@faiwer/react 0.8.3 → 0.9.0

package/README.md

@@ -6,6 +6,7 @@ A naive React implementation. Why? What's wrong with the existing one? Nothing.
 
 - JSX
 - Functional components
+- Class components (limited)
 - Hooks:
   - `useState`
   - `useRef`
@@ -14,21 +15,30 @@ A naive React implementation. Why? What's wrong with the existing one? Nothing.
   - `useLayoutEffect`, `useEffect` (improved versions)
   - `useId`
   - `useContext`
-- Tag-based refs
+- Refs
 - Context
 - Portals
 - Fragments
 
 ## Installation
 
-- `npm i --save @faiwer/react`
-- Update your `tsconfig.json`:
+- `npm uninstall react react-dom @types/react @types/react-dom`
+- `npm i --save react@npm:@faiwer/react`
+- `npm i --save --force react-dom@npm:@faiwer/react-dom`
+- You might need to update your `tsconfig.json` (no necessarily):
   ```json
   "compilerOptions": {
     "jsx": "react-jsx",
-    "jsxImportSource": "@faiwer/react"
   }
   ```
+  Or use `"jsx": "preserve"`
+- If you're using `eslint-plugin-react` than configure this in your .eslintrc:
+  ```json
+  "settings": {
+    "react": { "version": "19" } // not 'detect'
+  },
+  ```
+- Good luck. If your project is big enough, I'm pretty sure you got a ton of type errors. Sorry :-)
 
 ### Usage
 
@@ -42,23 +52,19 @@ createRoot(container).render(<App />);
 ## TODO
 
 - 1st line
-  - Events:
-    - "capture"-kind of events
-    - camelCase events
-    - custom `onChange` like in ReactDOM
   - Error handling
-  - Direct component refs, `forwardRef`, `useImperativeHandle`
-- 2nd line
-  - prepare an NPM-package
-- 3rd line
-  - `RunComponent` is not pure. Some hooks change the state during the rendering phase. Fix it.
   - `useReducer`
+- 2rd line
+  - HMR
+  - Resolve "TODO: add a test" comments
+  - `runComponent` is not pure. Some hooks change the state during the rendering phase. Fix it.
+  - leverage `isStaticChildren` in `jsx()`
 
 ## It does NOT support
 
 … and probably never will:
 
-- Class Components
+- Class Components: `getSnapshotBeforeUpdate`
 - Synthetic events
 - Portals:
   - Event bubbling from portals

package/dist/core/Children.d.ts

@@ -0,0 +1,11 @@
+import type { ElementNode, ScalarNode } from '../types';
+type Children = {
+    count: (children: JSX.Element[]) => number;
+    only: (children: JSX.Element) => asserts children is ElementNode | ScalarNode;
+    forEach: (children: JSX.Element[], fn: (child: ElementNode | ScalarNode) => void, objThis?: unknown) => void;
+    map: <T>(chidlren: JSX.Element[], fn: (child: ElementNode | ScalarNode) => T, objThis?: unknown) => T[];
+    toArray: (children: JSX.Element[]) => Array<ElementNode | ScalarNode>;
+};
+export declare const Children: Children;
+export {};
+//# sourceMappingURL=Children.d.ts.map

package/dist/core/Children.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Children.d.ts","sourceRoot":"","sources":["../../src/core/Children.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAElE,KAAK,QAAQ,GAAG;IACd,KAAK,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,EAAE,KAAK,MAAM,CAAC;IAC3C,IAAI,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,KAAK,OAAO,CAAC,QAAQ,IAAI,WAAW,GAAG,UAAU,CAAC;IAC9E,OAAO,EAAE,CACP,QAAQ,EAAE,GAAG,CAAC,OAAO,EAAE,EACvB,EAAE,EAAE,CAAC,KAAK,EAAE,WAAW,GAAG,UAAU,KAAK,IAAI,EAC7C,OAAO,CAAC,EAAE,OAAO,KACd,IAAI,CAAC;IACV,GAAG,EAAE,CAAC,CAAC,EACL,QAAQ,EAAE,GAAG,CAAC,OAAO,EAAE,EACvB,EAAE,EAAE,CAAC,KAAK,EAAE,WAAW,GAAG,UAAU,KAAK,CAAC,EAC1C,OAAO,CAAC,EAAE,OAAO,KACd,CAAC,EAAE,CAAC;IACT,OAAO,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,OAAO,EAAE,KAAK,KAAK,CAAC,WAAW,GAAG,UAAU,CAAC,CAAC;CACvE,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,QA6CtB,CAAC"}

package/dist/core/Children.js

@@ -0,0 +1,35 @@
+export const Children = {
+    count: (children) => {
+        return Children.toArray(children).length;
+    },
+    forEach: (children, fn, objThis) => {
+        for (const child of children) {
+            if (Array.isArray(child)) {
+                Children.forEach(child, fn, objThis);
+            }
+            else {
+                fn.call(objThis, child);
+            }
+        }
+    },
+    map: (chidlren, fn, objThis) => {
+        const result = [];
+        Children.forEach(chidlren, (child) => {
+            result.push(fn.call(objThis, child));
+        }, objThis);
+        return result;
+    },
+    only(children) {
+        if (!Array.isArray(children)) {
+            children = [children];
+        }
+        const items = Children.toArray(children);
+        if (items.length !== 1) {
+            throw new Error(`Found ${items.length} children. Expected only one`);
+        }
+    },
+    toArray: (children) => {
+        return Children.map(children, (child) => child);
+    },
+};
+//# sourceMappingURL=Children.js.map

package/dist/core/Children.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Children.js","sourceRoot":"","sources":["../../src/core/Children.ts"],"names":[],"mappings":"AAkBA,MAAM,CAAC,MAAM,QAAQ,GAAa;IAChC,KAAK,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC;QACnB,OAAO,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;IAAA,CAC1C;IAED,OAAO,EAAE,CAAC,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAQ,EAAE,CAAC;QACxC,KAAK,MAAM,KAAK,IAAI,QAAQ,EAAE,CAAC;YAC7B,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;gBACzB,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,EAAE,OAAO,CAAC,CAAC;YACvC,CAAC;iBAAM,CAAC;gBACN,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC;IAAA,CACF;IAED,GAAG,EAAE,CACH,QAAuB,EACvB,EAA0C,EAC1C,OAAiB,EACZ,EAAE,CAAC;QACR,MAAM,MAAM,GAAQ,EAAE,CAAC;QACvB,QAAQ,CAAC,OAAO,CACd,QAAQ,EACR,CAAC,KAAK,EAAE,EAAE,CAAC;YACT,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;QAAA,CACtC,EACD,OAAO,CACR,CAAC;QACF,OAAO,MAAM,CAAC;IAAA,CACf;IAED,IAAI,CAAC,QAAQ,EAAE;QACb,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC7B,QAAQ,GAAG,CAAC,QAAQ,CAAC,CAAC;QACxB,CAAC;QAED,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;QACzC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACvB,MAAM,IAAI,KAAK,CAAC,SAAS,KAAK,CAAC,MAAM,8BAA8B,CAAC,CAAC;QACvE,CAAC;IAAA,CACF;IAED,OAAO,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC;QACrB,OAAO,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC;IAAA,CACjD;CACF,CAAC"}

package/dist/core/actions/applyAction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"applyAction.d.ts","sourceRoot":"","sources":["../../../src/core/actions/applyAction.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAYzD;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,0BAGvB,CAAC"}
+{"version":3,"file":"applyAction.d.ts","sourceRoot":"","sources":["../../../src/core/actions/applyAction.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAazD;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,0BAGvB,CAAC"}

package/dist/core/actions/applyAction.js

@@ -8,6 +8,7 @@ import { setTextAction } from './setText.action';
 import { removeAction } from './remove.action';
 import { replaceAction } from './replace.action';
 import { relayoutAction } from './relayout.action';
+import { createContainerAction } from './createContainer.action';
 /**
  * The commit phase of the rendering process contains two parts:
  * - Applying DOM changes
@@ -24,6 +25,7 @@ const actionHandlers = {
     CreateTag: createTagAction,
     CreateText: createTextAction,
     CreateComment: createCommentAction,
+    CreateContainer: createContainerAction,
     SetProps: setPropsAction,
     SetRef: setRefAction,
     SetAttr: setAttrAction,

package/dist/core/actions/applyAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"applyAction.js","sourceRoot":"","sources":["../../../src/core/actions/applyAction.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,MAAc,EAAQ,EAAE,CAAC;IACnD,kCAAkC;IAClC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,MAAa,CAAC,CAAC;AAAA,CAC1D,CAAC;AAEF,MAAM,cAAc,GAKhB;IACF,SAAS,EAAE,eAAe;IAC1B,UAAU,EAAE,gBAAgB;IAC5B,aAAa,EAAE,mBAAmB;IAClC,QAAQ,EAAE,cAAc;IACxB,MAAM,EAAE,YAAY;IACpB,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;IACtB,MAAM,EAAE,YAAY;IACpB,OAAO,EAAE,aAAa;IACtB,QAAQ,EAAE,cAAc;CACzB,CAAC"}
+{"version":3,"file":"applyAction.js","sourceRoot":"","sources":["../../../src/core/actions/applyAction.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,MAAc,EAAQ,EAAE,CAAC;IACnD,kCAAkC;IAClC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,MAAa,CAAC,CAAC;AAAA,CAC1D,CAAC;AAEF,MAAM,cAAc,GAKhB;IACF,SAAS,EAAE,eAAe;IAC1B,UAAU,EAAE,gBAAgB;IAC5B,aAAa,EAAE,mBAAmB;IAClC,eAAe,EAAE,qBAAqB;IACtC,QAAQ,EAAE,cAAc;IACxB,MAAM,EAAE,YAAY;IACpB,OAAO,EAAE,aAAa;IACtB,OAAO,EAAE,aAAa;IACtB,MAAM,EAAE,YAAY;IACpB,OAAO,EAAE,aAAa;IACtB,QAAQ,EAAE,cAAc;CACzB,CAAC"}

package/dist/core/actions/createComment.action.d.ts

@@ -1,7 +1,7 @@
-import type { FiberNode } from '../../types';
+import { type FiberNode } from '../../types';
 import type { CreateCommentAction } from '../../types/actions';
 /**
  * Creates a new comment DOM node (<!--r:${mode}:${fiber.id}-->).
  */
-export declare function createCommentAction(fiber: FiberNode, { mode }: CreateCommentAction): void;
+export declare function createCommentAction(fiber: FiberNode, { mode }: Pick<CreateCommentAction, 'mode'>): void;
 //# sourceMappingURL=createComment.action.d.ts.map

package/dist/core/actions/createComment.action.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createComment.action.d.ts","sourceRoot":"","sources":["../../../src/core/actions/createComment.action.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAKtE;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,SAAS,EAChB,EAAE,IAAI,EAAE,EAAE,mBAAmB,QAc9B"}
+{"version":3,"file":"createComment.action.d.ts","sourceRoot":"","sources":["../../../src/core/actions/createComment.action.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAItE;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,SAAS,EAChB,EAAE,IAAI,EAAE,EAAE,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC,QAO5C"}

package/dist/core/actions/createComment.action.js

@@ -1,20 +1,13 @@
 import { getParentElement } from './helpers';
-import { tryToCompactNode } from '../compact';
 import { buildComment } from '../reconciliation/comments';
 /**
  * Creates a new comment DOM node (<!--r:${mode}:${fiber.id}-->).
  */
 export function createCommentAction(fiber, { mode }) {
     // Only two scenarios lead here:
-    // - First render of a fragment or component. The parent's element is a
-    //   comment `r:begin:{id}`
+    // - Render a component or a fragment without children
     // - Render of a portal. The parent element is the portal target node.
     fiber.element = buildComment(mode, fiber.id);
     getParentElement(fiber).appendChild(fiber.element);
-    if (mode === 'end') {
-        // All children are added. If the current fiber is the only child, we can
-        // compact the parent node: "<!--begin-->child<!--end-->" -> "child".
-        tryToCompactNode(fiber);
-    }
 }
 //# sourceMappingURL=createComment.action.js.map

package/dist/core/actions/createComment.action.js.map

@@ -1 +1 @@
-{"version":3,"file":"createComment.action.js","sourceRoot":"","sources":["../../../src/core/actions/createComment.action.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D;;GAEG;AACH,MAAM,UAAU,mBAAmB,CACjC,KAAgB,EAChB,EAAE,IAAI,EAAuB,EAC7B;IACA,gCAAgC;IAChC,uEAAuE;IACvE,2BAA2B;IAC3B,sEAAsE;IACtE,KAAK,CAAC,OAAO,GAAG,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;IAC7C,gBAAgB,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEnD,IAAI,IAAI,KAAK,KAAK,EAAE,CAAC;QACnB,yEAAyE;QACzE,qEAAqE;QACrE,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC1B,CAAC;AAAA,CACF"}
+{"version":3,"file":"createComment.action.js","sourceRoot":"","sources":["../../../src/core/actions/createComment.action.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D;;GAEG;AACH,MAAM,UAAU,mBAAmB,CACjC,KAAgB,EAChB,EAAE,IAAI,EAAqC,EAC3C;IACA,gCAAgC;IAChC,sDAAsD;IACtD,sEAAsE;IACtE,KAAK,CAAC,OAAO,GAAG,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;IAC7C,gBAAgB,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;AAAA,CACpD"}

package/dist/core/actions/createContainer.action.d.ts

@@ -0,0 +1,7 @@
+import { type FiberNode } from '../../types';
+/**
+ * Once all component- or fragment-fiber's nodes are mounted we can finalize
+ * their fragment-like container.
+ */
+export declare function createContainerAction(fiber: FiberNode): void;
+//# sourceMappingURL=createContainer.action.d.ts.map

package/dist/core/actions/createContainer.action.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createContainer.action.d.ts","sourceRoot":"","sources":["../../../src/core/actions/createContainer.action.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAIlE;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,SAAS,QAiBrD"}

package/dist/core/actions/createContainer.action.js

@@ -0,0 +1,28 @@
+import { containerSym } from '../../types';
+import { getParentElement } from './helpers';
+import { buildComment } from '../reconciliation/comments';
+/**
+ * Once all component- or fragment-fiber's nodes are mounted we can finalize
+ * their fragment-like container.
+ */
+export function createContainerAction(fiber) {
+    if (fiber.children.length === 0) {
+        // Case 1: We have no child nodes, so create an !--empty comment.
+        const container = getParentElement(fiber);
+        const empty = buildComment('empty', fiber.id);
+        container.appendChild(empty);
+        fiber.element = empty;
+    }
+    else if (fiber.children.length === 1) {
+        // Case 2: We have only one child. Let's refer to it. It's slightly faster
+        // than the `containerSym` approach.
+        fiber.element = fiber.children[0].element;
+    }
+    else {
+        // Case 3: We have more then one DOM children. Resort to the slow path:
+        // containerSym. In such a mode to get the fiber's domNodes we need to
+        // traverse through some of its children.
+        fiber.element = containerSym;
+    }
+}
+//# sourceMappingURL=createContainer.action.js.map

package/dist/core/actions/createContainer.action.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createContainer.action.js","sourceRoot":"","sources":["../../../src/core/actions/createContainer.action.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAkB,MAAM,oBAAoB,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D;;;GAGG;AACH,MAAM,UAAU,qBAAqB,CAAC,KAAgB,EAAE;IACtD,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAChC,iEAAiE;QACjE,MAAM,SAAS,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC1C,MAAM,KAAK,GAAG,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;QAC9C,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAC7B,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC;IACxB,CAAC;SAAM,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACvC,0EAA0E;QAC1E,oCAAoC;QACpC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAC5C,CAAC;SAAM,CAAC;QACN,uEAAuE;QACvE,sEAAsE;QACtE,yCAAyC;QACzC,KAAK,CAAC,OAAO,GAAG,YAAY,CAAC;IAC/B,CAAC;AAAA,CACF"}

package/dist/core/actions/createTag.action.d.ts

@@ -1,4 +1,5 @@
 import type { FiberNode } from '../../types';
+import type { CreateTagAction } from '../../types/actions';
 /**
  * Handles two scenarios:
  * - Creates a <!--r:portal:id--> comment for portal fibers
@@ -6,5 +7,5 @@ import type { FiberNode } from '../../types';
  *
  * This doesn't create child nodes or set attributes/event handlers.
  */
-export declare function createTagAction(fiber: FiberNode): void;
+export declare function createTagAction(fiber: FiberNode, { attrs, ref }: CreateTagAction): void;
 //# sourceMappingURL=createTag.action.d.ts.map

package/dist/core/actions/createTag.action.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createTag.action.d.ts","sourceRoot":"","sources":["../../../src/core/actions/createTag.action.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAIpD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,CAgBtD"}
+{"version":3,"file":"createTag.action.d.ts","sourceRoot":"","sources":["../../../src/core/actions/createTag.action.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAIpD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAIlE;;;;;;GAMG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,SAAS,EAChB,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,eAAe,GAC9B,IAAI,CAsCN"}

package/dist/core/actions/createTag.action.js

@@ -1,5 +1,8 @@
 import { getParentElement } from './helpers';
-import { applyAction } from './applyAction';
+import { createCommentAction } from './createComment.action';
+import { setAttrAction } from './setAttr.action';
+import { setRefAction } from './setRef.action';
+import { ReactError } from '../reconciliation/errors/ReactError';
 /**
  * Handles two scenarios:
  * - Creates a <!--r:portal:id--> comment for portal fibers
@@ -7,21 +10,120 @@ import { applyAction } from './applyAction';
  *
  * This doesn't create child nodes or set attributes/event handlers.
  */
-export function createTagAction(fiber) {
+export function createTagAction(fiber, { attrs, ref }) {
     if (fiber.type !== 'tag') {
-        throw new Error(`createTagAction supports only tag-fiber-nodes.`);
+        throw new ReactError(fiber, `createTagAction supports only tag-fiber-nodes.`);
     }
     if (fiber.data instanceof HTMLElement) {
         // This is a portal, not a regular tag. We shouldn't create it since it
         // already exists outside the app's DOM subtree. Instead, create a
         // <!--r:portal:id--> comment node.
-        applyAction({ type: 'CreateComment', fiber, mode: 'portal' });
+        createCommentAction(fiber, { mode: 'portal' });
     }
     else if (fiber.tag !== 'root') {
         // 'root' is a special case - it's the node where the app is mounted.
-        const tag = document.createElement(fiber.tag);
+        const tag = SVG_TAGS.has(fiber.tag)
+            ? document.createElementNS('http://www.w3.org/2000/svg', fiber.tag)
+            : document.createElement(fiber.tag);
         fiber.element = tag;
         getParentElement(fiber).appendChild(fiber.element);
+        if (fiber.element instanceof HTMLInputElement) {
+            if (attrs?.type === 'radio') {
+                attrs.checked ??= undefined;
+            }
+            if (typeof attrs?.type === 'string') {
+                fiber.element.type = attrs.type;
+            }
+        }
+        for (const [name, value] of Object.entries(attrs ?? EMPTY)) {
+            setAttrAction(fiber, { name, value, creation: true });
+        }
+        if (ref) {
+            setRefAction(fiber, { ref, dontUnsetRef: true });
+        }
     }
 }
+const EMPTY = {};
+const SVG_TAGS = new Set([
+    // Core SVG Elements:
+    'svg',
+    'g',
+    'defs',
+    'symbol',
+    'use',
+    'image',
+    'switch',
+    'style',
+    // Basic Shapes:
+    'rect',
+    'circle',
+    'ellipse',
+    'line',
+    'polyline',
+    'polygon',
+    'path',
+    // Text Elements:
+    'text',
+    'tspan',
+    'tref',
+    'textPath',
+    'altGlyph',
+    'glyphRef',
+    // Descriptive & Metadata:
+    'title',
+    'desc',
+    'metadata',
+    // Container Elements:
+    'foreignObject',
+    'marker',
+    'pattern',
+    'mask',
+    'clipPath',
+    'filter',
+    // Gradient & Painting Elements:
+    'linearGradient',
+    'radialGradient',
+    'stop',
+    // Animation Elements:
+    'animate',
+    'animateMotion',
+    'animateTransform',
+    'set',
+    // Filter Primitive Elements:
+    'feBlend',
+    'feColorMatrix',
+    'feComponentTransfer',
+    'feComposite',
+    'feConvolveMatrix',
+    'feDiffuseLighting',
+    'feDisplacementMap',
+    'feDropShadow',
+    'feFlood',
+    'feFuncA',
+    'feFuncB',
+    'feFuncG',
+    'feFuncR',
+    'feGaussianBlur',
+    'feImage',
+    'feMerge',
+    'feMergeNode',
+    'feMorphology',
+    'feOffset',
+    'fePointLight',
+    'feSpecularLighting',
+    'feSpotLight',
+    'feTile',
+    'feTurbulence',
+    // Font Elements:
+    'font',
+    'glyph',
+    'hkern',
+    'vkern',
+    'font-face',
+    'font-face-src',
+    'font-face-uri',
+    'font-face-format',
+    'font-face-name',
+    'missing-glyph',
+]);
 //# sourceMappingURL=createTag.action.js.map

package/dist/core/actions/createTag.action.js.map

@@ -1 +1 @@
-{"version":3,"file":"createTag.action.js","sourceRoot":"","sources":["../../../src/core/actions/createTag.action.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C;;;;;;GAMG;AACH,MAAM,UAAU,eAAe,CAAC,KAAgB,EAAQ;IACtD,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;QACzB,MAAM,IAAI,KAAK,CAAC,gDAAgD,CAAC,CAAC;IACpE,CAAC;IAED,IAAI,KAAK,CAAC,IAAI,YAAY,WAAW,EAAE,CAAC;QACtC,uEAAuE;QACvE,kEAAkE;QAClE,mCAAmC;QACnC,WAAW,CAAC,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;IAChE,CAAC;SAAM,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE,CAAC;QAChC,qEAAqE;QACrE,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC9C,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;QACpB,gBAAgB,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACrD,CAAC;AAAA,CACF"}
+{"version":3,"file":"createTag.action.js","sourceRoot":"","sources":["../../../src/core/actions/createTag.action.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AAEjE;;;;;;GAMG;AACH,MAAM,UAAU,eAAe,CAC7B,KAAgB,EAChB,EAAE,KAAK,EAAE,GAAG,EAAmB,EACzB;IACN,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;QACzB,MAAM,IAAI,UAAU,CAClB,KAAK,EACL,gDAAgD,CACjD,CAAC;IACJ,CAAC;IAED,IAAI,KAAK,CAAC,IAAI,YAAY,WAAW,EAAE,CAAC;QACtC,uEAAuE;QACvE,kEAAkE;QAClE,mCAAmC;QACnC,mBAAmB,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;IACjD,CAAC;SAAM,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE,CAAC;QAChC,qEAAqE;QACrE,MAAM,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC;YACjC,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,4BAA4B,EAAE,KAAK,CAAC,GAAG,CAAC;YACnE,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACtC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;QACpB,gBAAgB,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAEnD,IAAI,KAAK,CAAC,OAAO,YAAY,gBAAgB,EAAE,CAAC;YAC9C,IAAI,KAAK,EAAE,IAAI,KAAK,OAAO,EAAE,CAAC;gBAC5B,KAAK,CAAC,OAAO,KAAK,SAAS,CAAC;YAC9B,CAAC;YACD,IAAI,OAAO,KAAK,EAAE,IAAI,KAAK,QAAQ,EAAE,CAAC;gBACpC,KAAK,CAAC,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;YAClC,CAAC;QACH,CAAC;QAED,KAAK,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,IAAI,KAAK,CAAC,EAAE,CAAC;YAC3D,aAAa,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QACxD,CAAC;QAED,IAAI,GAAG,EAAE,CAAC;YACR,YAAY,CAAC,KAAK,EAAE,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;QACnD,CAAC;IACH,CAAC;AAAA,CACF;AAED,MAAM,KAAK,GAA0C,EAAE,CAAC;AAExD,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC;IACvB,qBAAqB;IACrB,KAAK;IACL,GAAG;IACH,MAAM;IACN,QAAQ;IACR,KAAK;IACL,OAAO;IACP,QAAQ;IACR,OAAO;IACP,gBAAgB;IAChB,MAAM;IACN,QAAQ;IACR,SAAS;IACT,MAAM;IACN,UAAU;IACV,SAAS;IACT,MAAM;IACN,iBAAiB;IACjB,MAAM;IACN,OAAO;IACP,MAAM;IACN,UAAU;IACV,UAAU;IACV,UAAU;IACV,0BAA0B;IAC1B,OAAO;IACP,MAAM;IACN,UAAU;IACV,sBAAsB;IACtB,eAAe;IACf,QAAQ;IACR,SAAS;IACT,MAAM;IACN,UAAU;IACV,QAAQ;IACR,gCAAgC;IAChC,gBAAgB;IAChB,gBAAgB;IAChB,MAAM;IACN,sBAAsB;IACtB,SAAS;IACT,eAAe;IACf,kBAAkB;IAClB,KAAK;IACL,6BAA6B;IAC7B,SAAS;IACT,eAAe;IACf,qBAAqB;IACrB,aAAa;IACb,kBAAkB;IAClB,mBAAmB;IACnB,mBAAmB;IACnB,cAAc;IACd,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,gBAAgB;IAChB,SAAS;IACT,SAAS;IACT,aAAa;IACb,cAAc;IACd,UAAU;IACV,cAAc;IACd,oBAAoB;IACpB,aAAa;IACb,QAAQ;IACR,cAAc;IACd,iBAAiB;IACjB,MAAM;IACN,OAAO;IACP,OAAO;IACP,OAAO;IACP,WAAW;IACX,eAAe;IACf,eAAe;IACf,kBAAkB;IAClB,gBAAgB;IAChB,eAAe;CAChB,CAAC,CAAC"}

package/dist/core/actions/createText.action.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createText.action.d.ts","sourceRoot":"","sources":["../../../src/core/actions/createText.action.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGpD;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,SAAS,QAWhD"}
+{"version":3,"file":"createText.action.d.ts","sourceRoot":"","sources":["../../../src/core/actions/createText.action.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAIpD;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,SAAS,QAUhD"}

package/dist/core/actions/createText.action.js

@@ -1,15 +1,12 @@
 import { getParentElement } from './helpers';
+import { ReactError } from '../reconciliation/errors/ReactError';
 /**
  * Creates a new text DOM node.
  */
 export function createTextAction(fiber) {
     if (fiber.type !== 'text') {
-        throw new Error(`Can't apply CreateText for a ${fiber.type} node`);
+        throw new ReactError(fiber, `Can't apply CreateText for a ${fiber.type} node`);
     }
-    // Only two scenarios lead here:
-    // - First render of a fragment or component. The parent's element is
-    //   a comment `r:begin:{id}`
-    // - Render of a portal. The parent element is the portal target node.
     fiber.element = new Text(fiber.props.text);
     getParentElement(fiber).appendChild(fiber.element);
 }

package/dist/core/actions/createText.action.js.map

@@ -1 +1 @@
-{"version":3,"file":"createText.action.js","sourceRoot":"","sources":["../../../src/core/actions/createText.action.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAE7C;;GAEG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAAgB,EAAE;IACjD,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CAAC,gCAAgC,KAAK,CAAC,IAAI,OAAO,CAAC,CAAC;IACrE,CAAC;IAED,gCAAgC;IAChC,qEAAqE;IACrE,6BAA6B;IAC7B,sEAAsE;IACtE,KAAK,CAAC,OAAO,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC3C,gBAAgB,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;AAAA,CACpD"}
+{"version":3,"file":"createText.action.js","sourceRoot":"","sources":["../../../src/core/actions/createText.action.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AAEjE;;GAEG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAAgB,EAAE;IACjD,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;QAC1B,MAAM,IAAI,UAAU,CAClB,KAAK,EACL,gCAAgC,KAAK,CAAC,IAAI,OAAO,CAClD,CAAC;IACJ,CAAC;IAED,KAAK,CAAC,OAAO,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAC3C,gBAAgB,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;AAAA,CACpD"}

package/dist/core/actions/dom/attributes.d.ts

@@ -0,0 +1,4 @@
+import type { TagAttrValue } from '../../../types';
+export declare const setHtmlAttribute: (element: HTMLElement, name: string, value: TagAttrValue) => void;
+export declare const BOOL_ATTRS: Set<string>;
+//# sourceMappingURL=attributes.d.ts.map

package/dist/core/actions/dom/attributes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attributes.d.ts","sourceRoot":"","sources":["../../../../src/core/actions/dom/attributes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,eAAO,MAAM,gBAAgB,mEAoB5B,CAAC;AAEF,eAAO,MAAM,UAAU,aAsCrB,CAAC"}

package/dist/core/actions/dom/attributes.js

@@ -0,0 +1,56 @@
+export const setHtmlAttribute = (element, name, value) => {
+    if (BOOL_ATTRS.has(name)) {
+        if (value) {
+            element.setAttribute(name, '');
+        }
+        else {
+            element.removeAttribute(name);
+        }
+        return;
+    }
+    if (name === 'value') {
+        element.value = value == null ? '' : String(value);
+        return;
+    }
+    element.setAttribute(name === 'className' ? 'class' : name, String(value));
+};
+export const BOOL_ATTRS = new Set([
+    'autoFocus',
+    'checked',
+    'multiple',
+    'muted',
+    'selected',
+    'contentEditable',
+    'spellCheck',
+    'draggable',
+    'autoReverse',
+    'externalResourcesRequired',
+    'focusable',
+    'preserveAlpha',
+    'allowFullScreen',
+    'async',
+    'autoPlay',
+    'controls',
+    'default',
+    'defer',
+    'disabled',
+    'disablePictureInPicture',
+    'disableRemotePlayback',
+    'formNoValidate',
+    'hidden',
+    'loop',
+    'noModule',
+    'noValidate',
+    'open',
+    'playsInline',
+    'readOnly',
+    'required',
+    'reversed',
+    'scoped',
+    'seamless',
+    'itemScope',
+    'capture',
+    'download',
+    'inert',
+]);
+//# sourceMappingURL=attributes.js.map

package/dist/core/actions/dom/attributes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attributes.js","sourceRoot":"","sources":["../../../../src/core/actions/dom/attributes.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,OAAoB,EACpB,IAAY,EACZ,KAAmB,EACnB,EAAE,CAAC;IACH,IAAI,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;QACzB,IAAI,KAAK,EAAE,CAAC;YACV,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QACjC,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;QAChC,CAAC;QACD,OAAO;IACT,CAAC;IAED,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;QACpB,OAA4B,CAAC,KAAK,GAAG,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACzE,OAAO;IACT,CAAC;IAED,OAAO,CAAC,YAAY,CAAC,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;AAAA,CAC5E,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,GAAG,CAAC;IAChC,WAAW;IACX,SAAS;IACT,UAAU;IACV,OAAO;IACP,UAAU;IACV,iBAAiB;IACjB,YAAY;IACZ,WAAW;IACX,aAAa;IACb,2BAA2B;IAC3B,WAAW;IACX,eAAe;IACf,iBAAiB;IACjB,OAAO;IACP,UAAU;IACV,UAAU;IACV,SAAS;IACT,OAAO;IACP,UAAU;IACV,yBAAyB;IACzB,uBAAuB;IACvB,gBAAgB;IAChB,QAAQ;IACR,MAAM;IACN,UAAU;IACV,YAAY;IACZ,MAAM;IACN,aAAa;IACb,UAAU;IACV,UAAU;IACV,UAAU;IACV,QAAQ;IACR,UAAU;IACV,WAAW;IACX,SAAS;IACT,UAAU;IACV,OAAO;CACR,CAAC,CAAC"}

package/dist/core/actions/dom/css.d.ts

@@ -0,0 +1,6 @@
+import type { TagAttrValue, TagFiberNode } from '../../../types';
+/**
+ * Handles removing, toggling and adding tag styles.
+ */
+export declare const setTagStyles: (fiber: TagFiberNode, stylesRaw: TagAttrValue) => void;
+//# sourceMappingURL=css.d.ts.map

package/dist/core/actions/dom/css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../../../src/core/actions/dom/css.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAa,MAAM,oBAAoB,CAAC;AAEhF;;GAEG;AACH,eAAO,MAAM,YAAY,wDA0CxB,CAAC"}

package/dist/core/actions/dom/css.js

@@ -0,0 +1,54 @@
+import { ReactError } from '../../../core/reconciliation/errors/ReactError';
+/**
+ * Handles removing, toggling and adding tag styles.
+ */
+export const setTagStyles = (fiber, 
+/** Should be a CSS-string (hyphens) or a CSS map (camelCase) */
+stylesRaw) => {
+    if (typeof stylesRaw !== 'string' &&
+        stylesRaw != null &&
+        typeof stylesRaw !== 'object') {
+        throw new ReactError(fiber, `Unsupported format of styles`);
+    }
+    const elementStyle = fiber.element.style;
+    const newStyles = typeof stylesRaw === 'string' ? strToStyles(stylesRaw) : (stylesRaw ?? {});
+    if (Object.keys(newStyles).length > 0) {
+        for (const key of Object.keys(fiber.data.styles ?? {})) {
+            if (!(key in newStyles)) {
+                if (key.includes('-')) {
+                    elementStyle.removeProperty(key);
+                }
+                else if (key in elementStyle) {
+                    // @ts-ignore It's wrongly typed as read-only.
+                    elementStyle[key] = '';
+                }
+            }
+        }
+        for (const [key, value] of Object.entries(newStyles)) {
+            if (key.includes('-')) {
+                elementStyle.setProperty(key, value);
+            }
+            else if (key in elementStyle) {
+                // @ts-ignore It's wrongly typed as read-only.
+                elementStyle[key] = value;
+            }
+        }
+    }
+    else {
+        fiber.element.removeAttribute('style');
+    }
+    fiber.data.styles = newStyles;
+};
+/**
+ * Converts a string like "color: red; font-size: 12px" to
+ * { color: 'red', ['font-size']: '12px' }
+ */
+const strToStyles = (css) => {
+    cssDummy.style.cssText = css;
+    return Object.fromEntries(Array.from(cssDummy.style).map((k) => [
+        k,
+        cssDummy.style.getPropertyValue(k),
+    ]));
+};
+const cssDummy = document.createElement('x-css-dummy');
+//# sourceMappingURL=css.js.map

package/dist/core/actions/dom/css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.js","sourceRoot":"","sources":["../../../../src/core/actions/dom/css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,oDAAoD,CAAC;AAGhF;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,KAAmB;AACnB,gEAAgE;AAChE,SAAuB,EACjB,EAAE,CAAC;IACT,IACE,OAAO,SAAS,KAAK,QAAQ;QAC7B,SAAS,IAAI,IAAI;QACjB,OAAO,SAAS,KAAK,QAAQ,EAC7B,CAAC;QACD,MAAM,IAAI,UAAU,CAAC,KAAK,EAAE,8BAA8B,CAAC,CAAC;IAC9D,CAAC;IAED,MAAM,YAAY,GAAI,KAAK,CAAC,OAAuB,CAAC,KAAK,CAAC;IAC1D,MAAM,SAAS,GACb,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC;IAE7E,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QACtC,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC,EAAE,CAAC;YACvD,IAAI,CAAC,CAAC,GAAG,IAAI,SAAS,CAAC,EAAE,CAAC;gBACxB,IAAI,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;oBACtB,YAAY,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;gBACnC,CAAC;qBAAM,IAAI,GAAG,IAAI,YAAY,EAAE,CAAC;oBAC/B,8CAA8C;oBAC9C,YAAY,CAAC,GAAsB,CAAC,GAAG,EAAE,CAAC;gBAC5C,CAAC;YACH,CAAC;QACH,CAAC;QAED,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;YACrD,IAAI,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;gBACtB,YAAY,CAAC,WAAW,CAAC,GAAG,EAAE,KAAe,CAAC,CAAC;YACjD,CAAC;iBAAM,IAAI,GAAG,IAAI,YAAY,EAAE,CAAC;gBAC/B,8CAA8C;gBAC9C,YAAY,CAAC,GAAsB,CAAC,GAAG,KAAK,CAAC;YAC/C,CAAC;QACH,CAAC;IACH,CAAC;SAAM,CAAC;QACN,KAAK,CAAC,OAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;IAC1C,CAAC;IAED,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;AAAA,CAC/B,CAAC;AAEF;;;GAGG;AACH,MAAM,WAAW,GAAG,CAAC,GAAW,EAAa,EAAE,CAAC;IAC9C,QAAQ,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;IAC7B,OAAO,MAAM,CAAC,WAAW,CACvB,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;QACpC,CAAC;QACD,QAAQ,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC;KACnC,CAAC,CACH,CAAC;AAAA,CACH,CAAC;AAEF,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC"}

package/dist/core/actions/dom/events.d.ts

@@ -0,0 +1,3 @@
+import type { TagAttrValue, TagFiberNode } from '../../../types';
+export declare const setEventHandler: (fiber: TagFiberNode, element: Element, name: string, value: TagAttrValue) => void;
+//# sourceMappingURL=events.d.ts.map

package/dist/core/actions/dom/events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../../../src/core/actions/dom/events.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAErE,eAAO,MAAM,eAAe,oFAwD3B,CAAC"}