DEV Community: wszgrcy

A Next-Generation Alternative to ngx-formly: piying-view

wszgrcy — Tue, 28 Oct 2025 14:08:44 +0000

If you're using ngx-formly, or looking for a more flexible, modern, and extensible form solution, then piying-view might be the next-generation choice worth trying.

📌 Background

ngx-formly is an excellent form abstraction library.
However, as project complexity increases, I found limitations in certain areas. Therefore, inspired by the core philosophy of ngx-formly, I've made several improvements and added more features, resulting in the creation of piying-view.

🚀 Improvements

Reset

ngx-formly only supports global reset. To reset individual form controls, you need complex custom implementations.
piying-view allows any form control to be reset simply by calling its reset method, including all its child controls (if any).

Input Properties

ngx-formly only supports setting properties via custom props, and does not support Angular’s built-in input properties.
piying-view supports both props and native Angular input properties (@Input), meaning existing components can be used directly as form controls.

Form Binding

ngx-formly requires inheritance from FieldType, making it incompatible with direct use of custom form controls.
piying-view allows existing custom form controls to be used directly without modification.

Component References

ngx-formly only supports synchronous component loading.
piying-view supports both synchronous and asynchronous component loading.

Query

ngx-formly only supports querying child controls, not direct parent or root-level queries.
piying-view supports querying children, parents (..), root (#), and named controls (@xxx) via path query.

Validators

ngx-formly offers limited built-in validators, but supports custom validators.
piying-view supports all validators from valibot, includes i18n support, and also allows custom validators.

Layout

ngx-formly uses the defined position as layout.
piying-view fixes the position during definition, but allows dynamic layout adjustments using layout actions.

Input Listening

ngx-formly requires dynamic property updates to be implemented in ngOnInit.
piying-view accepts Signal, Observable, or Promise as input parameters, enabling real-time updates.

Group Disabling

ngx-formly disables all controls within a group if any control in the same group is disabled.
piying-view allows disabling only specific logical groups within a single group.

🔥 New Features

🎯 Directive Support

Supports applying Angular directives directly to components.

🧩 Selectorless Mode

Supports selectorless components — created components do not require a selector definition in the template.

🔤 Strong Typing

Definitions can be directly converted into TypeScript types, enhancing development experience and type safety.

🛠️ Custom Actions

Allows encapsulating functionality into reusable Actions.

🌐 Multi-Platform Support

Supports not only Angular, but also provides adapter layers for Vue, React, Svelte, and Solid, ideal for cross-framework projects or future migration.

🔁 Bidirectional Data Transformation

Supports pre-processing (e.g., formatting) of input data and post-processing (e.g., serialization) of output data — meeting complex business requirements. Learn more

📊 Feature Comparison

😀 - Fully supported 🤢 - Partially supported 🥵 - Not supported

Feature	piying-view	ngx-formly
Wrapper	😀	😀
Control Group	😀	😀
Controls	😀	😀
JSON Schema	😀	😀
Validators	😀	😀
Component Layout	😀	😀
Settings Class	😀	😀
Plugins	😀	😀
Form Reset	😀	🤢
Form Query	😀	🤢
Input Properties	😀	🤢
Data Transformation	😀	🤢
Async Components	😀	🥵
Group Disabling	😀	🥵
Decorators	😀	🥵
Selectorless	😀	🥵
Multi-Platform	😀	🥵
Strong Typing	😀	🥵
Pre-built Component Library	🥵	😀

🌟 Final Thoughts

Get Started Quickly
If you're interested in piying-view, feel free to visit the 👉 Official Website for more documentation and examples.
Have feedback or suggestions? We welcome your 📩 contributions.
📦 Source Code

UnOfficial Implementation of Angular's Selectorless Components

wszgrcy — Sat, 18 Oct 2025 03:17:58 +0000

As is well known, when defining components in Angular, a custom tag must be generated. In some cases, this can be inconvenient when using CSS layout.
Although the official team has begun to consider implementing selectorless components, it is still in the planning stage, and it's uncertain how long it will take to be realized.

Principle

As is well known, structural directives can dynamically insert templates.
Template content can be customized and can also use all properties and methods within the component.
Therefore, it's sufficient to turn the component into a template to achieve this.
The method is also simple, just wrap a ng-template around the component's html
Now that we have the template, we only need to consider how to use it.
This is also simple: dynamically create a component, which returns the component instance. Through the instance, we can get the template reference.
Since we have the template reference, we can use viewContainerRef to insert it.
As the inserted content is a template, the component is only created but not actually inserted into the DOM with a selector.
This achieves the selectorless component.

Implementation

The following code is only for demonstrating the principle. For more detailed information, please refer to the repository
Directive

// Create component reference, existing only in memory
this._componentRef = createComponent(this.selectlessOutlet(), {});
// Get the instantiated component, note that the component needs a templateRef to save the template reference
const instance = this._componentRef.instance as {
  templateRef: Signal<TemplateRef<any>>;
};
// Insert the template in a structural directive (similar to ngIf ngFor)
this.#viewContainerRef.createEmbeddedView(instance.templateRef());
// Bind lifecycle
this.#appRef.attachView(this._componentRef.hostView);
this._componentRef.changeDetectorRef.detectChanges();

Selectorless component part

<ng-template #templateRef> 123 </ng-template>

@Component({})
export class InsertComponent implements OnInit {
  public templateRef = viewChild.required('templateRef');
}

Usage part

<ng-container *selectlessOutlet="InsertComponent;inputs:{}"> </ng-container>

Limitations

Of course, this method has some limitations.
The implementation of ng-content will be very complex; it needs to use ng-template references to replace input variables.
Some directives may be restricted, because components implemented in this way are essentially a shell and cannot access the real element. > Because at this point, the ElementRef gets an element that is not in the DOM.

Faster Usage?

Piying View has already supported custom selectorless component definitions and can switch them conveniently. > Piying can be considered as the Pro plus version of ngx-formly, with similar concepts to ngx-formly, but with clearer logic, safer, supports strong typing, multi-framework, and more features.

Final Words

If you have other questions, feel free to contact via email wszgrcy@gmail.com.
Selectorless code repository
Piying View code repository
Demo video

I've open-sourced a form library — define metadata once, and it can be rendered anywhere.

wszgrcy — Fri, 08 Aug 2025 04:14:04 +0000

After reviewing all major form libraries on the market, I identified a critical flaw: they require repeated definitions to build a form.
For example, consider the following (pseudo-code):

interface Test {
  firstName: string;
}

const form = useForm<Test>({
  defaultValues: {
    firstName: "default",
  },
  onSubmit: async ({ value }) => {
    console.log(value);
  },
});

<form.Field
  name="firstName"
  //...
/>

As we all know, the more times you define something, the higher the chance of introducing bugs.
In the above scenario, if we want to rename firstName to name, we’d need to update it in at least three places — significantly increasing code fragility.
That’s why I created Piying — a form library that achieves all the above functionality with just one definition.

v.object({ firstName: v.optional(v.string(), "default") });

How Does Piying Achieve This?

First, thanks to valibot, the code above is simply a schema definition.
Piying implements a traversal engine that collects metadata from the schema.
This metadata is then transformed into components and form configurations, enabling full compatibility across any frontend framework.

But What About Layout Flexibility?

While the schema definition is fixed, Piying supports dynamic layout manipulation via the layout method.
You can move any field into a container schema that supports nesting — meaning you can freely rearrange the UI layout without changing the schema.

v.intersect([
  v.pipe(v.object({}), setAlias("scope1")),
  v.object({
    key1: v.pipe(
      v.object({
        test1: v.pipe(v.optional(v.string(), "value1"), layout({ keyPath: ["#", "@scope1"] })),
      }),
    ),
  }),
]);

This effectively decouples definition from visual positioning.
Regarding field order in object, refer to the MDN documentation for details on JavaScript’s object property iteration order.

How to Achieve Advanced Layouts?

Sometimes, you need more than just field rendering — think labels, validation hints, tooltips, etc.
These can be achieved using wrappers:

v.pipe(v.number(), v.title("k2-label"), setWrappers(["label"]));

If you want to customize the styling of a group of fields, you can define a custom component directly: > While wrappers can be used for field groups, direct component customization is often more convenient.

v.pipe(
  v.object({
    k1: v.pipe(v.string(), v.title("k1-label"), setWrappers(["label"])),
    k2: v.pipe(v.number(), v.title("k2-label"), v.minValue(10), setWrappers(["label", "validator"])),
  }),
  setComponent("fieldset"),
);

How to Customize Wrappers or Components?

The code examples above don’t specify a particular frontend framework — because they’re framework-agnostic.
However, wrapper and component definitions are framework-specific.
You can find setup instructions for your preferred framework in the Quick Start Guide. Currently supported: React, Vue, and Angular. If you need support for another framework, feel free to open an issue.

Is It Ready for Production?

Piying Form has been used internally for over half a year before public open-source release.
Most features have undergone rigorous testing. Code coverage exceeds 95%, making it production-ready.
We provide extensive use case demos and equivalent implementations of popular libraries to ease migration:

Project Repository

piying-view

Contact Me

If you have any feedback, suggestions, or questions, feel free to reach out: wszgrcy@gmail.com

General Form Solution --- Piying

wszgrcy — Tue, 29 Jul 2025 14:29:02 +0000

Piying provides a unified form development experience across different frameworks
It allows developers to focus more on logic and layout, freeing them from trivial tasks
Piying's configuration is more semantic, reducing cognitive load for developers, and allows for custom encapsulation
Piying is fully compatible with all valibot Actions, allowing for perfect utilization of its validation and transformation mechanisms

Documentation

A sensory understanding may help you experience the charm of Piying faster. The website has implemented a large number of examples, making it easy for you to quickly understand Piying.
https://piying-org.github.io/website/

Current Support

Angular
Vue
React

Why Use Piying?

If you meet the following conditions, Piying is suitable for you

Reduce the cost of writing and maintaining code
Type-safe implementation of forms
Separation of view and logic
Reduce dependency on underlying frameworks to make the code more generic
More convenient validation mechanism

If you meet the following conditions, you can try Piying

There are some similar logic between pages, or some code looks similar
You hope that future code can be migrated across different frameworks

What Problems Does Piying Solve?

Piying has fully covered most of the common form functions, so the following problems are solved by Piying compared to mainstream libraries.

Type Safety

Most forms on the market do not have types, and after designing the form, you often need to write a type again to constrain the input and output
By defining with valibot, you can naturally obtain the type and get the most basic type validation, ensuring that the data type is always correct in any situation

Unified Frontend and Backend Types and Validation

When both the frontend and backend are developed using JavaScript, a common problem is that the backend's type is already defined, but the backend's interface often only has interface/type, and even worse, there may be no type at all, only telling you which fields are present
valibot can provide both types and validation
With the help of Piying's parsing, the relevant validation can be perfectly reflected on the form, making the checks on the frontend and backend the same, reducing maintenance costs and improving data security

General Definition Structure

Components in different frameworks are implemented differently, so they need to be implemented separately
However, after registration, the logic part is completely independent of any content in the view, making future migration and maintenance easier

Layout Mobility

Most forms do not have type safety, and even with metadata definitions, they cannot be moved arbitrarily and can only be displayed according to the defined order
Piying successfully solves this problem, making the definition and view not coupled, allowing for arbitrary display and adjustment > This way, you can customize the form according to your design requirements rather than being limited in display

Logical OR/AND

Most forms only implement three controls: Group, Array, and Control, but lack logical OR/AND, making some logic implementations more complex
For example, anyOf and oneOf in JsonSchema can be easily handled with the corresponding FieldLogicGroup using v.intersect and v.union for dynamic switching

Model-View/View-Model Separation of Form Controls

Most form controls have equivalent input and output, meaning that the control inputs a => emits output a, and inputs a => writes a into the control
Piying allows processing in these two stages separately, enabling more complex business logic

Test Coverage

✔ Browser application bundle generation complete.
29 07 2025 22:17:37.889:INFO [karma-server]: Karma v6.4.4 server started at http://localhost:9876/
29 07 2025 22:17:37.891:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
29 07 2025 22:17:37.910:INFO [launcher]: Starting browser Chrome
29 07 2025 22:17:38.530:INFO [Chrome 138.0.0.0 (Windows 10)]: Connected on socket VqecE5a27WYED9lwAAAB with id 10611162
Chrome 138.0.0.0 (Windows 10): Executed 452 of 454 (skipped 2) SUCCESS (0.944 secs / 0.854 secs)
TOTAL: 452 SUCCESS

=============================== Coverage summary ===============================
Statements   : 90.44% ( 1315/1454 )
Branches     : 82.19% ( 457/556 )
Functions    : 86.16% ( 411/477 )
Lines        : 90.69% ( 1258/1387 )
================================================================================

About Open Source

Currently, due to the large number of repositories, some code needs to be organized, so it will take about a week; please follow the website
If you have any opinions or suggestions, please feel free to contact me at wszgrcy@gmail.com

Now you can use dynamic directive in Angular

wszgrcy — Fri, 28 Feb 2025 14:22:46 +0000

wszgrcy/dynamic-component-define

npm i @cyia/dynamic-component-define

import { createDynamicComponentDefine } from "@cyia/dynamic-component-define";

export class AppComponent {
  envInjector = inject(EnvironmentInjector);
  continerRef = viewChild<ViewContainerRef, ViewContainerRef>("continerRef", {
    read: ViewContainerRef,
  });
  classInput = signal({ inputValue2: "hello" });
  ngOnInit(): void {
    let define = createDynamicComponentDefine({ type: C1Component }, [
      {
        type: ClassDirective,
        inputs: this.classInput,
      },
      {
        type: ClickDirective,
        outputs: {
          clientEvent: (event: any) => {
            console.log("click", event);
          },
        },
      },
    ]);
    let ref = createComponent(define, {
      environmentInjector: this.envInjector,
    });
    this.continerRef()!.createEmbeddedView(ref.instance.templateRef());
  }
  changeClass() {
    this.classInput.update((item) => {
      return { ...item, inputValue2: "changedClass" };
    });
  }
}

Using dependency injection in nodejs environment

wszgrcy — Tue, 30 Apr 2024 02:12:29 +0000

Introduction

Angular dependency injection standalone version
The usage method is completely consistent with Angular's dependency injection
No transformer required
0 dependencies
Remove Decorator > @Injectable()=>static injectOptions={} > @Inject() xx=>xx=inject() > @Optional()=>xx=inject(token,{optional:true})
JS/TS Support

Source

Angular 17.3.6

Usage

npm i static-injector
Create a first level dependency injector with Injector.create

import { Injector, inject } from 'static-injector';

class Main {
  child = inject(Child);
}
class Child {
  output() {
    return 'hello world';
  }
}
let injector = Injector.create({ providers: [Main, Child] });
const instance = injector.get(Main);
console.log(instance.child.output());

Different from `injection-js`

injection-js belongs to dynamic dependency injection and is a version used before Angular5. Currently no longer updated
The two are basically interchangeable (the details need to be adjusted)
Support the use of inject during construction

No Decorator

The original use of @Injectable() to pass parameters has been changed to static injectOptions={}. If there are no parameters, there is no need to set them
Originally, @Optional, @SkipSelf, @Self, please use the second pass parameter of inject instead

Test

Partially conducted unit testing to ensure that most functions are functioning properly
Because most of the code itself is extracted from Angular, stability is definitely guaranteed

Sync

Currently, the synchronization logic has been refactored and modified using @code-recycle/cli to ensure consistency with the official version of angular

Examples

https://github.com/wszgrcy/static-injector/tree/main/test/import

Contact me

If you have any technical issues, please contact me for assistance wszgrcy@gmail.com

Angular Event Modifier

wszgrcy — Sun, 21 Apr 2024 09:38:01 +0000

Source Code

version 17.3.5
commit cc57d4c4998b4e38f940afdf358af37185028072

EventManagerPlugin

For the official, it does provide an event management solution that allows for different monitoring based on any event name
However, it is only based on the event name to listen to DOM elements and handle their listening

The official does not provide a solution for processing component outputs

According to source code We know that the outputs of all components are actually subscribed directly, which means there is no chance to intercept them

Is the component output actually being monitored twice?

As mentioned above, all components are subscribed directly. However, when a component is subscribed directly, it also performs event listening, which means that EventManagerPlugin can also listen. After all, custom components are also DOM elements
But here's the problem. Even if you can handle this listening by creating an event manager, it only handles event listening, and subscriptions have nothing to do with it. In normal development, you will never call the DOM element of a component to do a dispatchEvent
Another issue is that the event manager relies on source code,addEventListener interface obtains an element and event name. How to find the corresponding component through the element?

Magic modification moment, showcasing skills begins

We found that there is an attribute called __ngContext__ on the element, and the number on this attribute is actually the LView ID
We use publicly available and non-public methods ɵgetLContext Get its LContext. Then read it to LView
On LView, there are many key attributes, and component instances are one of them Index position
Once we find the corresponding element of the component, we can hook up the original event emission and let it only go through our own listening channel. This part is relatively simple, just look at the source code

Handling event modifiers

There are two types of event modifiers, one is guard that returns true to prohibit, and the other is map, which is used for converting data
The code comes with some 'guard' type modifiers. From Vue source code
Regarding keyboard type event modifiers, fully call the official ng ɵKeyEventsPlugin

Use

source code
npm i @cyia/ngx-common

// app module
import { EVENT_MODIFIER_OPTIONS, EventModifiersPlugin } from '@cyia/ngx-common/event';

  providers: [
    {
      provide: EVENT_MANAGER_PLUGINS,
      useClass: EventModifiersPlugin,
      multi: true,
      deps: [DOCUMENT],
    },
    {
      provide: EVENT_MODIFIER_OPTIONS,
      useValue: {
        modifiers: {
          map: {
            // custom event modifier
            prefix: (value) => {
              return `prefix:${value}`;
            },
          },
        },
        componentOutput: true,
      },
    },
  ],

<div (click)="clicked('divClicked')">
  <button (click.stop.once)="clicked('btnClicked')">点击</button>
</div>
<app-a (output2.prefix.once)="output($event)" (output2)="output($event)"></app-a>

Contact me

If you have any technical issues, please contact me for assistance wszgrcy@gmail.com

Call Vue library in Angular

wszgrcy — Sun, 14 Apr 2024 08:30:00 +0000

Previously implemented the call to the React library Currently, Vue library calls are supported
React and Vue have similarities in some designs, so their implementations and calls are basically the same

demo

https://wszgrcy.github.io/cyia-bridge/

npm

https://www.npmjs.com/package/@cyia/ngx-bridge

Currently supports calling

Directly calling the vue component in the ng component

<vue-outlet [component]="xxxx" [root]="true" #root></vue-outlet>

Directly calling the ng component in the vue component

<NgOutletVue component={OutletRefTestComponent}></NgOutletVue>

When ng calls the Vue component, children can be either the Vue component or the ng component (projection)

<vue-outlet [component]="xxxx" #child></vue-outlet>
<!-- named slot -->
<vue-slot-group [name]="'xxx'">
  <ng-template #child let-input1="input1"></ng-template>
</vue-slot-group>

example

ant-design-vue

<vue-outlet [component]="Tree" [root]="true" [(model)]="bindModel" [props]="props">
  <vue-slot-group [name]="'title'">
    <ng-template #child let-key="key" let-title="title">
      @if (key === '0-0-1-0') {
      <span style="color: #1890ff">{{ title }}</span>
      }@else{ {{ title }} }
    </ng-template>
  </vue-slot-group>
</vue-outlet>

import { Component } from '@angular/core';
import { VueOutlet, VueSlotGroup } from '@cyia/ngx-bridge/vue-outlet';
import { Button, Tree, TreeProps } from 'ant-design-vue';
const treeData: TreeProps['treeData'] = [
  {
    title: 'parent 1',
    key: '0-0',
    children: [
      {
        title: 'parent 1-0',
        key: '0-0-0',
        disabled: true,
        children: [
          { title: 'leaf', key: '0-0-0-0', disableCheckbox: true },
          { title: 'leaf', key: '0-0-0-1' },
        ],
      },
      {
        title: 'parent 1-1',
        key: '0-0-1',
        children: [{ key: '0-0-1-0', title: 'sss' }],
      },
    ],
  },
];
const expandedKeys = ['0-0-0', '0-0-1'];
const selectedKeys = ['0-0-0', '0-0-1'];
const checkedKeys = ['0-0-0', '0-0-1'];
@Component({
  selector: 'app-ant-design-vue-demo',
  standalone: true,
  imports: [VueOutlet, VueSlotGroup],
  templateUrl: './ant-design-vue-demo.component.html',
  styleUrl: './ant-design-vue-demo.component.scss',
})
export class AntDesignVueDemoComponent {
  Tree = Tree;
  treeData = treeData;
  bindModel = { expandedKeys, selectedKeys, checkedKeys };
  props = {
    checkable: true,
    treeData: treeData,
  };
}

Call React library in Angular

wszgrcy — Tue, 09 Apr 2024 09:29:01 +0000

In Angular, the React library can be called, but manual insertion is required. All writing methods are mainly based on React, and Angular is only responsible for passing in data, which is very cumbersome and not elegant to write
In this way, we can use ngx-bridge to implement the same node structure as react, and use the react component in the ng component or call the ng component in the react component

ngx-bridge introduction

In Angular development, designed for the convenience of developers calling any React library
In order to make any React library callable like ng components and reduce development mindset
Provide an additional option for developers to use libraries in Angular development

demo

https://wszgrcy.github.io/cyia-bridge/

npm

https://www.npmjs.com/package/@cyia/ngx-bridge

Currently supports calling

Directly calling the react component in the ng component

<react-outlet [component]="xxxx" [root]="true" #root></react-outlet>

Directly calling the ng component in the react component

<NgOutlet component={OutletRefTestComponent}></NgOutlet>

The function components/nodes in the react component can use the ng component

componentWrapper(xxxx, {}).reactFunctionComponent
componentWrapper(xxxx, {}).reactElement

When ng calls the react component, children can be either the react component or the ng component (projection)

<react-outlet [component]="xxxx" #child></react-outlet>
<react-outlet [component]="xxxx" [parent]="root"></react-outlet>

<xxx [parent]="root"></xxx>

example

react-flowexample
react

import { stratify, tree } from 'd3-hierarchy';
import React, { useCallback, useMemo } from 'react';
import ReactFlow, {
  ReactFlowProvider,
  Panel,
  useNodesState,
  useEdgesState,
  useReactFlow,
} from 'reactflow';

import { initialNodes, initialEdges } from './nodes-edges.js';
import 'reactflow/dist/style.css';

const g = tree();

const getLayoutedElements = (nodes, edges, options) => {
  if (nodes.length === 0) return { nodes, edges };

  const { width, height } = document
    .querySelector(`[data-id="${nodes[0].id}"]`)
    .getBoundingClientRect();
  const hierarchy = stratify()
    .id((node) => node.id)
    .parentId((node) => edges.find((edge) => edge.target === node.id)?.source);
  const root = hierarchy(nodes);
  const layout = g.nodeSize([width * 2, height * 2])(root);

  return {
    nodes: layout
      .descendants()
      .map((node) => ({ ...node.data, position: { x: node.x, y: node.y } })),
    edges,
  };
};

const LayoutFlow = () => {
  const { fitView } = useReactFlow();
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);

  const onLayout = useCallback(
    (direction) => {
      const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(nodes, edges, {
        direction,
      });

      setNodes([...layoutedNodes]);
      setEdges([...layoutedEdges]);

      window.requestAnimationFrame(() => {
        fitView();
      });
    },
    [nodes, edges]
  );

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      fitView
    >
      <Panel position="top-right">
        <button onClick={onLayout}>layout</button>
      </Panel>
    </ReactFlow>
  );
};

export default function () {
  return (
    <ReactFlowProvider>
      <LayoutFlow />
    </ReactFlowProvider>
  );
}

Angular

<react-outlet [component]="ReactFlowProvider" [root]="true">
  <react-outlet [component]="ReactFlow" #child #root [runInReact]="context">
    <react-outlet
      [component]="Panel"
      #child
      [props]="$any({ position: 'top-right' })"
    >
      <button #child (click)="root.output()?.['onLayout']('TB')">
        vertical layout
      </button>
      <button #child (click)="root.output()?.['onLayout']('LR')">
        horizontal layout
      </button>
    </react-outlet>
  </react-outlet>
</react-outlet>

import { Component } from '@angular/core';
import { ReactOutlet } from '@cyia/ngx-bridge';
import ReactFlow, {
  ReactFlowProvider,
  Panel,
  useReactFlow,
  useNodesState,
  useEdgesState,
} from 'reactflow';
import Dagre from '@dagrejs/dagre';
import { initialNodes, initialEdges } from './nodes-edges';
import { useCallback } from 'react';

const g = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));

const getLayoutedElements = (nodes: any, edges: any, options: any) => {
  g.setGraph({ rankdir: options.direction });

  edges.forEach((edge: any) => g.setEdge(edge.source, edge.target));
  nodes.forEach((node: any) => g.setNode(node.id, node));

  Dagre.layout(g);

  return {
    nodes: nodes.map((node: any) => {
      const { x, y } = g.node(node.id);

      return { ...node, position: { x, y } };
    }),
    edges,
  };
};
@Component({
  selector: 'app-custom-layout',
  standalone: true,
  imports: [ReactOutlet],
  templateUrl: './custom-layout.component.html',
  styleUrl: './custom-layout.component.scss',
  host: { style: 'display:block;height:400px' },
})
export class CustomLayoutComponent {
  ReactFlowProvider = ReactFlowProvider;
  ReactFlow = ReactFlow;
  Panel = Panel;
  context = (props: any, output: any) => {
    const { fitView } = useReactFlow();
    const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
    const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
    const onLayout = useCallback(
      (direction: any) => {
        const layouted = getLayoutedElements(nodes, edges, { direction });
        setNodes([...layouted.nodes]);
        setEdges([...layouted.edges]);
        window.requestAnimationFrame(() => {
          fitView();
        });
      },
      [nodes, edges]
    );
    return {
      props: {
        nodes,
        edges,
        onNodesChange,
        onEdgesChange,
        fitView: true,
      },
      output: {
        onLayout,
      },
    };
  };
}

We can see that the node part is completely separated from the HTML template and has the same structure as the example. The logical part of the function component can be directly copied and passed into the runInReact attribute. We only need to write the export related methods in the output of the returned object, which can be called in the ng environment

Tested Library

ngx-bridge During development, testing was also conducted in the following libraries, and they can all be executed normally > In theory, it supports all React libraries, but cannot be tested one by one. We only selected some libraries with higher star values for testing
reactflow
slate
@tiptap
react-hot-toast
@react-pdf
antd
react-icons
react-spinners
react-dnd
react-hook-form

I separated localization from Angular:`@cyia/localize`

wszgrcy — Sun, 24 Mar 2024 08:52:52 +0000

Recently, while developing the VSCode Extension, I discovered an issue where the plugin and WebView sections sometimes share a portion of the code, which happens to contain content that needs to be translated, resulting in the inability to use the l10n provided by VSCode itself
Because some of the WebView pages were developed using Angular, it would be best if a translation could be used for implementation. Therefore, I came up with the localize in Angular to separate modules and make them a universal dependency

How to use it?

access the usage documentation

How to separate?

With the experience of separating dependency injection , is actually quite simple because it is an independent module, so just find the introduction and extraction parts
The import section is exported intact, while the extraction section uses some self implemented code. However, the related ID generation algorithm remains the same, which means that the translation in Angular can be directly moved here for use

Synchronize updates

Due to the limited number of localize changes, only a small portion has been modified
Using Sync Script And use github actions for update testing

      - uses: wszgrcy/code-recycle-action@main
        with:
          path: ./script/sync-localize.ts
          cwd: ./src

Calling methods

import { $localize } from '@cyia/localize';
$localize`one`;

Use i18n ./src Extract all $localize label template contents under src and generate extract.json metadata > Generate ID consistent with @angular/localize
Copy extract.json custom language translation and write the translation content into the target field
Use i18n convert ./i18n-merge ./i18n Convert translation metadata to key-value format for reference
Custom reference format import translation, such as

// Node environment demonstration
import path from 'path';
import fs from 'fs';
import { loadTranslations } from '@cyia/localize';
export const LanguageMap: Record<string, string> = {
  zh_cn: 'zh-Hans',
  cn: 'zh-Hans',
  en: 'en-US',
  en_us: 'en-US',
};
export function loadI18n() {
  let lang = process.env['CR_LANG']?.toLowerCase();
  if (!lang) {
    if (process.env['LANGUAGE']) {
      lang = process.env['LANGUAGE'].split(':')[0].toLowerCase();
    } else if (process.env['LANG']) {
      lang = process.env['LANG'].split('.')[0].toLowerCase();
    }
  }
  let cache;
  const filePath = path.join(__dirname, `./i18n/${LanguageMap[lang!] || lang || 'zh-Hans'}.json`);
  if (ENV === 'test') {
    cache = {};
  } else {
    if (!fs.existsSync(filePath)) {
      cache = __non_webpack_require__('./i18n/zh-Hans.json');
    } else {
      cache = __non_webpack_require__(filePath);
    }
  }

  loadTranslations(cache);
}

loadI18n();

I separated dependency injection from Angular:`static-injector`

wszgrcy — Sun, 24 Mar 2024 04:18:27 +0000

Angular's dependency injection is indeed very useful, making the dependency relationships between services more flexible and reusable
However, its limited use within Angular restricts its effectiveness and needs to be made available on all Node/Frontend platforms.

How to use?

If you don't care about the implementation, you can directly access the usage documentation

Why not write a package that is the same as Angular dependency injection

A mature feature has usually undergone multiple considerations, so it is the best to not reinvent the wheel.
Using the source code of Angular can ensure that the function is in sync with the official version, without worrying about differences between your implementation and the official version.
Using the same logic in Node/frontend eliminates mental burden.

Can I use the code directly?

Of course not. First, Angular's source code is designed for its specific services, so some features that we don't need need to be removed. For example, @Module has dependency injection-related code, @Host and other component decorators, and more non-general dependencies.
Additionally, Angular uses dependency injection for static dependency injection, so it needs to implement its own static compilation method to ensure consistency with the official version.
It also needs to create interfaces to call and invoke Angular's source code, ensuring the normal operation of the function.

Is it over if it runs successfully?

Running successfully is not the end, but the first step. The code successfully executes independently, so the next step is to ensure that the code runs in sync with the Angular official version, no missed new features, but also no defects are overlooked.
To accomplish this, a method must be found that allows stable code changes and automatically updates code to match project updates.

Use `Code Recycle` to Stable Update and Sync Code

Update synchronization script
Pull the Angular source code through scripts, use CSS selector syntax to query and modify code
Test the modified code after making changes to the code.
After each update, only change the tag => synchronize the update => test => adjust(if there are problems) => publish. This reduces potential issues caused by manual modifications.

How do we know if the repository supports these features?

Check the examples
All existing examples have been tested and verified. If you need to use other features, you can submit an issue.

Implementing programmable code snippets in VSCode - `Code Recycle`

wszgrcy — Tue, 19 Mar 2024 01:38:32 +0000

How to customize code snippets in the editor? Provide the completion prefix, provide the completion content, and then you can use it directly
But specific content can only be inserted in the current file and input location, sometimes it may not meet the requirements
If we want to introduce a service that automatically creates when it does not exist, we can only rely on ourselves because the code snippet is static and cannot be programmed
If you have such a need and want to implement it, why not give it a try with Code Recycle

Import a service

Create code snippet configuration

{
    "prefix": [
        "import"
    ],
    "body": " ",
    "regexp": {
        "pattern": "\\.([\\p{L}\\p{N}]+)",
        "flag": "u"
    },
    "pattern": "**/*.ts",
    "dynamicMode": true,
    "script": "./import-class.ts"
}

Implement call function

let fn: ScriptFunction = async (util, rule, host, injector) => {
  let importName = util.documentContext.snippetParameters![1];
  let _ = util.lodash;
  let className = _.upperFirst(_.camelCase(importName));
  let rootCtx = util.initContext();
  await util.changeList(
    [
    // Check if the class exists
      {
        path: `*.ts`,
        name: 'classPath',
        glob: true,
        list: [
          {
            query: `export class ${className}`,
            mode: 'like',
            optional: true,
            callback(context, index) {
              let classPathCtx = context.getContext('root.classPath');
              classPathCtx.data = context.node!.path!;
            },
          },
        ],
      },
    ],
    rootCtx
  );
  let filePath = rootCtx.getContext('root.classPath').data;
  if (!filePath) {
    // Create from template
    await util.changeList([
      {
        type: 'copy',
        from: join(__dirname, './template/__name@dasherize__.ts'),
        to: './',
        pathTemplate: '@angular-devkit',
        contentTemplate: '@angular-devkit',
        templateContext: { name: importName },
      },
    ]);
    let changedRecord = host.records();
    filePath = util.path.normalize((changedRecord[0] as any).path);
  }
  let pathRelative = require('../shared/path-relative');
  // insert reference
  let changed = await util.changeList([
    {
      path: util.filePathGroup.currentPath,
      list: [
        {
          range: [0, 0],
          replace: `import {${className}} from '${pathRelative(util.filePathGroup.currentPath, filePath, util)}'\n`,
        },
        {
          range: util.documentContext.insertRange![0].range,
          replace: `let ${importName} = new ${className}()`,
        },
      ],
    },
  ]);

  await util.updateChangeList(changed);
};

When entering import.hello in the ts file in the editor, and completing the completion, the Hello class will be automatically introduced and initialized

More?

examples
The tool currently supports the execution of CLI and VSCode Extension. Script Support yaml/js/ts
You can view document learn more
If you want to see more instances, you can visit the repository view and Run
If you are already interested, you can start quickly

DEV Community: wszgrcy

A Next-Generation Alternative to ngx-formly: piying-view

📌 Background

🚀 Improvements

Reset

Input Properties

Form Binding

Component References

Query

Validators

Layout

Input Listening

Group Disabling

🔥 New Features

🎯 Directive Support

🧩 Selectorless Mode

🔤 Strong Typing

🛠️ Custom Actions

🌐 Multi-Platform Support

🔁 Bidirectional Data Transformation

📊 Feature Comparison

🌟 Final Thoughts

UnOfficial Implementation of Angular's Selectorless Components

Principle

Implementation

Limitations

Faster Usage?

Final Words

I've open-sourced a form library — define metadata once, and it can be rendered anywhere.

How Does Piying Achieve This?

But What About Layout Flexibility?

How to Achieve Advanced Layouts?

How to Customize Wrappers or Components?

Is It Ready for Production?

Project Repository

Contact Me

General Form Solution --- Piying

Documentation

Current Support

Why Use Piying?

What Problems Does Piying Solve?

Type Safety

Unified Frontend and Backend Types and Validation

General Definition Structure

Layout Mobility

Logical OR/AND

Model-View/View-Model Separation of Form Controls

Test Coverage

About Open Source

Now you can use dynamic directive in Angular

Using dependency injection in nodejs environment

Introduction

Source

Usage

Different from injection-js

No Decorator

Test

Sync

Examples

Contact me

Angular Event Modifier

Source Code

EventManagerPlugin

The official does not provide a solution for processing component outputs

Is the component output actually being monitored twice?

Magic modification moment, showcasing skills begins

Handling event modifiers

Use

Contact me

Call Vue library in Angular

demo

npm

Currently supports calling

example

Call React library in Angular

ngx-bridge introduction

demo

npm

Currently supports calling

example

Different from `injection-js`

Use `Code Recycle` to Stable Update and Sync Code