sygnal 4.1.0 → 4.2.0

package/README.md

@@ -186,13 +186,23 @@ For Vite:
 // vite.config.js
 export default defineConfig({
   esbuild: {
-    jsxInject: `import { jsx, Fragment } from 'sygnal/jsx'`,
-    jsxFactory: 'jsx',
-    jsxFragment: 'Fragment'
+    jsx: 'automatic',
+    jsxImportSource: 'sygnal',
   }
 })
 ```
 
+For TypeScript projects, also add to `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "sygnal"
+  }
+}
+```
+
 Without JSX, use `h()`:
 
 ```javascript

package/dist/astro/index.cjs.js

@@ -16,8 +16,8 @@ function sygnalAstroIntegration() {
         updateConfig({
           vite: {
             esbuild: {
-              jsxFactory: 'jsx',
-              jsxInject: `import { jsx } from 'sygnal/jsx'`,
+              jsx: 'automatic',
+              jsxImportSource: 'sygnal',
             },
           },
         });

package/dist/astro/index.mjs

@@ -14,8 +14,8 @@ function sygnalAstroIntegration() {
         updateConfig({
           vite: {
             esbuild: {
-              jsxFactory: 'jsx',
-              jsxInject: `import { jsx } from 'sygnal/jsx'`,
+              jsx: 'automatic',
+              jsxImportSource: 'sygnal',
             },
           },
         });

package/dist/jsx-dev-runtime.cjs.js

@@ -0,0 +1,271 @@
+'use strict';
+
+var _extend = require('extend');
+
+const undefinedv = (v) => v === undefined;
+
+const number = (v) => typeof v === 'number';
+
+const string = (v) => typeof v === 'string';
+
+const text = (v) => string(v) || number(v);
+
+const array = (v) => Array.isArray(v);
+
+const object = (v) => typeof v === 'object' && v !== null;
+
+const fun = (v) => typeof v === 'function';
+
+const vnode$1 = (v) => object(v) && 'sel' in v && 'data' in v && 'children' in v && 'text' in v;
+
+const svgPropsMap = { svg: 1, circle: 1, ellipse: 1, line: 1, polygon: 1,
+  polyline: 1, rect: 1, g: 1, path: 1, text: 1 };
+
+const svg = (v) => v.sel in svgPropsMap;
+
+// TODO: stop using extend here
+
+const extend = (...objs) => _extend(true, ...objs);
+
+const assign = (...objs) => _extend(false, ...objs);
+
+const reduceDeep = (arr, fn, initial) => {
+  let result = initial;
+  for (let i = 0; i < arr.length; i++) {
+    const value = arr[i];
+    if (array(value)) {
+      result = reduceDeep(value, fn, result);
+    } else {
+      result = fn(result, value);
+    }
+  }
+  return result
+};
+
+const mapObject = (obj, fn) => Object.keys(obj).map(
+  (key) => fn(key, obj[key])
+).reduce(
+  (acc, curr) => extend(acc, curr),
+  {}
+);
+
+const deepifyKeys = (obj, modules) => mapObject(obj,
+  (key, val) => {
+    const dashIndex = key.indexOf('-');
+    if (dashIndex > -1 && modules[key.slice(0, dashIndex)] !== undefined) {
+      const moduleData = {
+        [key.slice(dashIndex + 1)]: val
+      };
+      return {
+        [key.slice(0, dashIndex)]: moduleData
+      }
+    }
+    return { [key]: val }
+  }
+);
+
+const omit = (key, obj) => mapObject(obj,
+  (mod, data) => mod !== key ? ({ [mod]: data }) : {}
+);
+
+// Const fnName = (...params) => guard ? default : ...
+
+const createTextElement = (text$1) => !text(text$1) ? undefined : {
+  text: text$1,
+  sel: undefined,
+  data: undefined,
+  children: undefined,
+  elm: undefined,
+  key: undefined
+};
+
+const considerSvg = (vnode) => !svg(vnode) ? vnode :
+  assign(vnode,
+    { data: omit('props', extend(vnode.data,
+      { ns: 'http://www.w3.org/2000/svg', attrs: omit('className', extend(vnode.data.props,
+        { class: vnode.data.props ? vnode.data.props.className : undefined }
+      )) }
+    )) },
+    { children: undefinedv(vnode.children) ? undefined :
+      vnode.children.map((child) => considerSvg(child))
+    }
+  );
+
+const rewrites = {
+  for: 'attrs',
+  role: 'attrs',
+  tabindex: 'attrs',
+  'aria-*': 'attrs',
+  key: null
+};
+
+const rewriteModules = (data, modules) => mapObject(data, (key, val) => {
+  const inner = { [key]: val };
+  if (rewrites[key] && modules[rewrites[key]] !== undefined) {
+    return { [rewrites[key]]: inner }
+  }
+  if (rewrites[key] === null) {
+    return {}
+  }
+  const keys = Object.keys(rewrites);
+  for (let i = 0; i < keys.length; i++) {
+    const k = keys[i];
+    if (k.charAt(k.length - 1) === '*' && key.indexOf(k.slice(0, -1)) === 0 && modules[rewrites[k]] !== undefined) {
+      return { [rewrites[k]]: inner }
+    }
+  }
+  if (modules[key] !== undefined) {
+    return { [modules[key] ? modules[key] : key]: val }
+  }
+  if (modules.props !== undefined) {
+    return { props: inner }
+  }
+  return inner
+});
+
+const applyFocusProps = (data) => {
+  if (!data.props) return data
+  const { autoFocus, autoSelect, ...rest } = data.props;
+  if (!autoFocus && !autoSelect) return data
+
+  data.props = rest;
+  const existingInsert = data.hook?.insert;
+  data.hook = {
+    ...data.hook,
+    insert: (vnode) => {
+      if (existingInsert) existingInsert(vnode);
+      if (vnode.elm && typeof vnode.elm.focus === 'function') {
+        vnode.elm.focus();
+        if (autoSelect && typeof vnode.elm.select === 'function') {
+          vnode.elm.select();
+        }
+      }
+    },
+  };
+  return data
+};
+
+const sanitizeData = (data, modules) => applyFocusProps(considerSvg(rewriteModules(deepifyKeys(data, modules), modules)));
+
+const sanitizeText = (children) => children.length > 1 || !text(children[0]) ? undefined : children[0].toString();
+
+const sanitizeChildren = (children) => reduceDeep(children, (acc, child) => {
+  const vnode = vnode$1(child) ? child : createTextElement(child);
+  acc.push(vnode);
+  return acc
+}
+, []);
+
+const defaultModules = {
+  attrs: '',
+  props: '',
+  class: '',
+  data: 'dataset',
+  style: '',
+  hook: '',
+  on: ''
+};
+
+const createElementWithModules = (modules) => {
+  return (sel, data, ...children) => {
+    if (typeof sel === 'undefined') {
+      sel = 'UNDEFINED';
+      console.error('JSX Error: Capitalized HTML element without corresponding factory function.  Components with names where the first letter is capital MUST be defined or included at the parent component\'s file scope.');
+    }
+    if (fun(sel)) {
+      if (sel.name === 'Fragment') {
+        return sel(data || {}, children)
+      }
+      data ||= {};
+      if (!sel.isSygnalComponent) {
+        const name = sel.componentName || sel.label || sel.name || 'FUNCTION_COMPONENT';
+        const view = sel;
+        const { model, intent, hmrActions, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug, preventInstantiation } = sel;
+        if (preventInstantiation) {
+          const text = sanitizeText(children);
+          return considerSvg({
+            sel: name,
+            data: data ? sanitizeData(data, modules) : {},
+            children: typeof text !== 'undefined' ? createTextElement(text) : sanitizeChildren(children),
+            text,
+            elm: undefined,
+            key: data ? data.key : undefined
+          })
+        }
+        const options = { name, view, model, intent, hmrActions, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug };
+        data.sygnalOptions = options;
+        sel = name;
+      } else {
+        const factory = sel;
+        sel = sel.componentName || sel.label || sel.name || 'sygnal-factory';
+        data.sygnalFactory = factory;
+      }
+    }
+    const text = sanitizeText(children);
+    return considerSvg({
+      sel,
+      data: data ? sanitizeData(data, modules) : {},
+      children: typeof text !== 'undefined' ? createTextElement(text) : sanitizeChildren(children),
+      text,
+      elm: undefined,
+      key: data ? data.key : undefined
+    })
+  }
+};
+
+const createElement = createElementWithModules(defaultModules);
+
+function vnode(sel, data, children, text, elm) {
+    const key = data === undefined ? undefined : data.key;
+    return { sel, data, children, text, elm, key };
+}
+
+/* eslint-disable @typescript-eslint/no-namespace, import/export */
+function Fragment(data, ...children) {
+    const flatChildren = flattenAndFilter(children, []);
+    if (flatChildren.length === 1 &&
+        !flatChildren[0].sel &&
+        flatChildren[0].text) {
+        // only child is a simple text node, pass as text for a simpler vtree
+        return vnode(undefined, undefined, undefined, flatChildren[0].text, undefined);
+    }
+    else {
+        return vnode(undefined, data !== null && data !== void 0 ? data : {}, flatChildren, undefined, undefined);
+    }
+}
+function flattenAndFilter(children, flattened) {
+    for (const child of children) {
+        // filter out falsey children, except 0 since zero can be a valid value e.g inside a chart
+        if (child !== undefined &&
+            child !== null &&
+            child !== false &&
+            child !== "") {
+            if (Array.isArray(child)) {
+                flattenAndFilter(child, flattened);
+            }
+            else if (typeof child === "string" ||
+                typeof child === "number" ||
+                typeof child === "boolean") {
+                flattened.push(vnode(undefined, undefined, undefined, String(child), undefined));
+            }
+            else {
+                flattened.push(child);
+            }
+        }
+    }
+    return flattened;
+}
+
+function jsx(type, props, key) {
+  if (props == null) return createElement(type, null)
+  const { children, ...rest } = props;
+  if (key !== undefined) rest.key = key;
+  if (children === undefined) return createElement(type, rest)
+  if (Array.isArray(children)) return createElement(type, rest, ...children)
+  return createElement(type, rest, children)
+}
+
+exports.Fragment = Fragment;
+exports.jsx = jsx;
+exports.jsxDEV = jsx;
+exports.jsxs = jsx;

package/dist/jsx-dev-runtime.esm.js

@@ -0,0 +1,266 @@
+import _extend from 'extend';
+
+const undefinedv = (v) => v === undefined;
+
+const number = (v) => typeof v === 'number';
+
+const string = (v) => typeof v === 'string';
+
+const text = (v) => string(v) || number(v);
+
+const array = (v) => Array.isArray(v);
+
+const object = (v) => typeof v === 'object' && v !== null;
+
+const fun = (v) => typeof v === 'function';
+
+const vnode$1 = (v) => object(v) && 'sel' in v && 'data' in v && 'children' in v && 'text' in v;
+
+const svgPropsMap = { svg: 1, circle: 1, ellipse: 1, line: 1, polygon: 1,
+  polyline: 1, rect: 1, g: 1, path: 1, text: 1 };
+
+const svg = (v) => v.sel in svgPropsMap;
+
+// TODO: stop using extend here
+
+const extend = (...objs) => _extend(true, ...objs);
+
+const assign = (...objs) => _extend(false, ...objs);
+
+const reduceDeep = (arr, fn, initial) => {
+  let result = initial;
+  for (let i = 0; i < arr.length; i++) {
+    const value = arr[i];
+    if (array(value)) {
+      result = reduceDeep(value, fn, result);
+    } else {
+      result = fn(result, value);
+    }
+  }
+  return result
+};
+
+const mapObject = (obj, fn) => Object.keys(obj).map(
+  (key) => fn(key, obj[key])
+).reduce(
+  (acc, curr) => extend(acc, curr),
+  {}
+);
+
+const deepifyKeys = (obj, modules) => mapObject(obj,
+  (key, val) => {
+    const dashIndex = key.indexOf('-');
+    if (dashIndex > -1 && modules[key.slice(0, dashIndex)] !== undefined) {
+      const moduleData = {
+        [key.slice(dashIndex + 1)]: val
+      };
+      return {
+        [key.slice(0, dashIndex)]: moduleData
+      }
+    }
+    return { [key]: val }
+  }
+);
+
+const omit = (key, obj) => mapObject(obj,
+  (mod, data) => mod !== key ? ({ [mod]: data }) : {}
+);
+
+// Const fnName = (...params) => guard ? default : ...
+
+const createTextElement = (text$1) => !text(text$1) ? undefined : {
+  text: text$1,
+  sel: undefined,
+  data: undefined,
+  children: undefined,
+  elm: undefined,
+  key: undefined
+};
+
+const considerSvg = (vnode) => !svg(vnode) ? vnode :
+  assign(vnode,
+    { data: omit('props', extend(vnode.data,
+      { ns: 'http://www.w3.org/2000/svg', attrs: omit('className', extend(vnode.data.props,
+        { class: vnode.data.props ? vnode.data.props.className : undefined }
+      )) }
+    )) },
+    { children: undefinedv(vnode.children) ? undefined :
+      vnode.children.map((child) => considerSvg(child))
+    }
+  );
+
+const rewrites = {
+  for: 'attrs',
+  role: 'attrs',
+  tabindex: 'attrs',
+  'aria-*': 'attrs',
+  key: null
+};
+
+const rewriteModules = (data, modules) => mapObject(data, (key, val) => {
+  const inner = { [key]: val };
+  if (rewrites[key] && modules[rewrites[key]] !== undefined) {
+    return { [rewrites[key]]: inner }
+  }
+  if (rewrites[key] === null) {
+    return {}
+  }
+  const keys = Object.keys(rewrites);
+  for (let i = 0; i < keys.length; i++) {
+    const k = keys[i];
+    if (k.charAt(k.length - 1) === '*' && key.indexOf(k.slice(0, -1)) === 0 && modules[rewrites[k]] !== undefined) {
+      return { [rewrites[k]]: inner }
+    }
+  }
+  if (modules[key] !== undefined) {
+    return { [modules[key] ? modules[key] : key]: val }
+  }
+  if (modules.props !== undefined) {
+    return { props: inner }
+  }
+  return inner
+});
+
+const applyFocusProps = (data) => {
+  if (!data.props) return data
+  const { autoFocus, autoSelect, ...rest } = data.props;
+  if (!autoFocus && !autoSelect) return data
+
+  data.props = rest;
+  const existingInsert = data.hook?.insert;
+  data.hook = {
+    ...data.hook,
+    insert: (vnode) => {
+      if (existingInsert) existingInsert(vnode);
+      if (vnode.elm && typeof vnode.elm.focus === 'function') {
+        vnode.elm.focus();
+        if (autoSelect && typeof vnode.elm.select === 'function') {
+          vnode.elm.select();
+        }
+      }
+    },
+  };
+  return data
+};
+
+const sanitizeData = (data, modules) => applyFocusProps(considerSvg(rewriteModules(deepifyKeys(data, modules), modules)));
+
+const sanitizeText = (children) => children.length > 1 || !text(children[0]) ? undefined : children[0].toString();
+
+const sanitizeChildren = (children) => reduceDeep(children, (acc, child) => {
+  const vnode = vnode$1(child) ? child : createTextElement(child);
+  acc.push(vnode);
+  return acc
+}
+, []);
+
+const defaultModules = {
+  attrs: '',
+  props: '',
+  class: '',
+  data: 'dataset',
+  style: '',
+  hook: '',
+  on: ''
+};
+
+const createElementWithModules = (modules) => {
+  return (sel, data, ...children) => {
+    if (typeof sel === 'undefined') {
+      sel = 'UNDEFINED';
+      console.error('JSX Error: Capitalized HTML element without corresponding factory function.  Components with names where the first letter is capital MUST be defined or included at the parent component\'s file scope.');
+    }
+    if (fun(sel)) {
+      if (sel.name === 'Fragment') {
+        return sel(data || {}, children)
+      }
+      data ||= {};
+      if (!sel.isSygnalComponent) {
+        const name = sel.componentName || sel.label || sel.name || 'FUNCTION_COMPONENT';
+        const view = sel;
+        const { model, intent, hmrActions, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug, preventInstantiation } = sel;
+        if (preventInstantiation) {
+          const text = sanitizeText(children);
+          return considerSvg({
+            sel: name,
+            data: data ? sanitizeData(data, modules) : {},
+            children: typeof text !== 'undefined' ? createTextElement(text) : sanitizeChildren(children),
+            text,
+            elm: undefined,
+            key: data ? data.key : undefined
+          })
+        }
+        const options = { name, view, model, intent, hmrActions, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug };
+        data.sygnalOptions = options;
+        sel = name;
+      } else {
+        const factory = sel;
+        sel = sel.componentName || sel.label || sel.name || 'sygnal-factory';
+        data.sygnalFactory = factory;
+      }
+    }
+    const text = sanitizeText(children);
+    return considerSvg({
+      sel,
+      data: data ? sanitizeData(data, modules) : {},
+      children: typeof text !== 'undefined' ? createTextElement(text) : sanitizeChildren(children),
+      text,
+      elm: undefined,
+      key: data ? data.key : undefined
+    })
+  }
+};
+
+const createElement = createElementWithModules(defaultModules);
+
+function vnode(sel, data, children, text, elm) {
+    const key = data === undefined ? undefined : data.key;
+    return { sel, data, children, text, elm, key };
+}
+
+/* eslint-disable @typescript-eslint/no-namespace, import/export */
+function Fragment(data, ...children) {
+    const flatChildren = flattenAndFilter(children, []);
+    if (flatChildren.length === 1 &&
+        !flatChildren[0].sel &&
+        flatChildren[0].text) {
+        // only child is a simple text node, pass as text for a simpler vtree
+        return vnode(undefined, undefined, undefined, flatChildren[0].text, undefined);
+    }
+    else {
+        return vnode(undefined, data !== null && data !== void 0 ? data : {}, flatChildren, undefined, undefined);
+    }
+}
+function flattenAndFilter(children, flattened) {
+    for (const child of children) {
+        // filter out falsey children, except 0 since zero can be a valid value e.g inside a chart
+        if (child !== undefined &&
+            child !== null &&
+            child !== false &&
+            child !== "") {
+            if (Array.isArray(child)) {
+                flattenAndFilter(child, flattened);
+            }
+            else if (typeof child === "string" ||
+                typeof child === "number" ||
+                typeof child === "boolean") {
+                flattened.push(vnode(undefined, undefined, undefined, String(child), undefined));
+            }
+            else {
+                flattened.push(child);
+            }
+        }
+    }
+    return flattened;
+}
+
+function jsx(type, props, key) {
+  if (props == null) return createElement(type, null)
+  const { children, ...rest } = props;
+  if (key !== undefined) rest.key = key;
+  if (children === undefined) return createElement(type, rest)
+  if (Array.isArray(children)) return createElement(type, rest, ...children)
+  return createElement(type, rest, children)
+}
+
+export { Fragment, jsx, jsx as jsxDEV, jsx as jsxs };

package/dist/jsx-runtime.cjs.js

@@ -0,0 +1,271 @@
+'use strict';
+
+var _extend = require('extend');
+
+const undefinedv = (v) => v === undefined;
+
+const number = (v) => typeof v === 'number';
+
+const string = (v) => typeof v === 'string';
+
+const text = (v) => string(v) || number(v);
+
+const array = (v) => Array.isArray(v);
+
+const object = (v) => typeof v === 'object' && v !== null;
+
+const fun = (v) => typeof v === 'function';
+
+const vnode$1 = (v) => object(v) && 'sel' in v && 'data' in v && 'children' in v && 'text' in v;
+
+const svgPropsMap = { svg: 1, circle: 1, ellipse: 1, line: 1, polygon: 1,
+  polyline: 1, rect: 1, g: 1, path: 1, text: 1 };
+
+const svg = (v) => v.sel in svgPropsMap;
+
+// TODO: stop using extend here
+
+const extend = (...objs) => _extend(true, ...objs);
+
+const assign = (...objs) => _extend(false, ...objs);
+
+const reduceDeep = (arr, fn, initial) => {
+  let result = initial;
+  for (let i = 0; i < arr.length; i++) {
+    const value = arr[i];
+    if (array(value)) {
+      result = reduceDeep(value, fn, result);
+    } else {
+      result = fn(result, value);
+    }
+  }
+  return result
+};
+
+const mapObject = (obj, fn) => Object.keys(obj).map(
+  (key) => fn(key, obj[key])
+).reduce(
+  (acc, curr) => extend(acc, curr),
+  {}
+);
+
+const deepifyKeys = (obj, modules) => mapObject(obj,
+  (key, val) => {
+    const dashIndex = key.indexOf('-');
+    if (dashIndex > -1 && modules[key.slice(0, dashIndex)] !== undefined) {
+      const moduleData = {
+        [key.slice(dashIndex + 1)]: val
+      };
+      return {
+        [key.slice(0, dashIndex)]: moduleData
+      }
+    }
+    return { [key]: val }
+  }
+);
+
+const omit = (key, obj) => mapObject(obj,
+  (mod, data) => mod !== key ? ({ [mod]: data }) : {}
+);
+
+// Const fnName = (...params) => guard ? default : ...
+
+const createTextElement = (text$1) => !text(text$1) ? undefined : {
+  text: text$1,
+  sel: undefined,
+  data: undefined,
+  children: undefined,
+  elm: undefined,
+  key: undefined
+};
+
+const considerSvg = (vnode) => !svg(vnode) ? vnode :
+  assign(vnode,
+    { data: omit('props', extend(vnode.data,
+      { ns: 'http://www.w3.org/2000/svg', attrs: omit('className', extend(vnode.data.props,
+        { class: vnode.data.props ? vnode.data.props.className : undefined }
+      )) }
+    )) },
+    { children: undefinedv(vnode.children) ? undefined :
+      vnode.children.map((child) => considerSvg(child))
+    }
+  );
+
+const rewrites = {
+  for: 'attrs',
+  role: 'attrs',
+  tabindex: 'attrs',
+  'aria-*': 'attrs',
+  key: null
+};
+
+const rewriteModules = (data, modules) => mapObject(data, (key, val) => {
+  const inner = { [key]: val };
+  if (rewrites[key] && modules[rewrites[key]] !== undefined) {
+    return { [rewrites[key]]: inner }
+  }
+  if (rewrites[key] === null) {
+    return {}
+  }
+  const keys = Object.keys(rewrites);
+  for (let i = 0; i < keys.length; i++) {
+    const k = keys[i];
+    if (k.charAt(k.length - 1) === '*' && key.indexOf(k.slice(0, -1)) === 0 && modules[rewrites[k]] !== undefined) {
+      return { [rewrites[k]]: inner }
+    }
+  }
+  if (modules[key] !== undefined) {
+    return { [modules[key] ? modules[key] : key]: val }
+  }
+  if (modules.props !== undefined) {
+    return { props: inner }
+  }
+  return inner
+});
+
+const applyFocusProps = (data) => {
+  if (!data.props) return data
+  const { autoFocus, autoSelect, ...rest } = data.props;
+  if (!autoFocus && !autoSelect) return data
+
+  data.props = rest;
+  const existingInsert = data.hook?.insert;
+  data.hook = {
+    ...data.hook,
+    insert: (vnode) => {
+      if (existingInsert) existingInsert(vnode);
+      if (vnode.elm && typeof vnode.elm.focus === 'function') {
+        vnode.elm.focus();
+        if (autoSelect && typeof vnode.elm.select === 'function') {
+          vnode.elm.select();
+        }
+      }
+    },
+  };
+  return data
+};
+
+const sanitizeData = (data, modules) => applyFocusProps(considerSvg(rewriteModules(deepifyKeys(data, modules), modules)));
+
+const sanitizeText = (children) => children.length > 1 || !text(children[0]) ? undefined : children[0].toString();
+
+const sanitizeChildren = (children) => reduceDeep(children, (acc, child) => {
+  const vnode = vnode$1(child) ? child : createTextElement(child);
+  acc.push(vnode);
+  return acc
+}
+, []);
+
+const defaultModules = {
+  attrs: '',
+  props: '',
+  class: '',
+  data: 'dataset',
+  style: '',
+  hook: '',
+  on: ''
+};
+
+const createElementWithModules = (modules) => {
+  return (sel, data, ...children) => {
+    if (typeof sel === 'undefined') {
+      sel = 'UNDEFINED';
+      console.error('JSX Error: Capitalized HTML element without corresponding factory function.  Components with names where the first letter is capital MUST be defined or included at the parent component\'s file scope.');
+    }
+    if (fun(sel)) {
+      if (sel.name === 'Fragment') {
+        return sel(data || {}, children)
+      }
+      data ||= {};
+      if (!sel.isSygnalComponent) {
+        const name = sel.componentName || sel.label || sel.name || 'FUNCTION_COMPONENT';
+        const view = sel;
+        const { model, intent, hmrActions, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug, preventInstantiation } = sel;
+        if (preventInstantiation) {
+          const text = sanitizeText(children);
+          return considerSvg({
+            sel: name,
+            data: data ? sanitizeData(data, modules) : {},
+            children: typeof text !== 'undefined' ? createTextElement(text) : sanitizeChildren(children),
+            text,
+            elm: undefined,
+            key: data ? data.key : undefined
+          })
+        }
+        const options = { name, view, model, intent, hmrActions, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug };
+        data.sygnalOptions = options;
+        sel = name;
+      } else {
+        const factory = sel;
+        sel = sel.componentName || sel.label || sel.name || 'sygnal-factory';
+        data.sygnalFactory = factory;
+      }
+    }
+    const text = sanitizeText(children);
+    return considerSvg({
+      sel,
+      data: data ? sanitizeData(data, modules) : {},
+      children: typeof text !== 'undefined' ? createTextElement(text) : sanitizeChildren(children),
+      text,
+      elm: undefined,
+      key: data ? data.key : undefined
+    })
+  }
+};
+
+const createElement = createElementWithModules(defaultModules);
+
+function vnode(sel, data, children, text, elm) {
+    const key = data === undefined ? undefined : data.key;
+    return { sel, data, children, text, elm, key };
+}
+
+/* eslint-disable @typescript-eslint/no-namespace, import/export */
+function Fragment(data, ...children) {
+    const flatChildren = flattenAndFilter(children, []);
+    if (flatChildren.length === 1 &&
+        !flatChildren[0].sel &&
+        flatChildren[0].text) {
+        // only child is a simple text node, pass as text for a simpler vtree
+        return vnode(undefined, undefined, undefined, flatChildren[0].text, undefined);
+    }
+    else {
+        return vnode(undefined, data !== null && data !== void 0 ? data : {}, flatChildren, undefined, undefined);
+    }
+}
+function flattenAndFilter(children, flattened) {
+    for (const child of children) {
+        // filter out falsey children, except 0 since zero can be a valid value e.g inside a chart
+        if (child !== undefined &&
+            child !== null &&
+            child !== false &&
+            child !== "") {
+            if (Array.isArray(child)) {
+                flattenAndFilter(child, flattened);
+            }
+            else if (typeof child === "string" ||
+                typeof child === "number" ||
+                typeof child === "boolean") {
+                flattened.push(vnode(undefined, undefined, undefined, String(child), undefined));
+            }
+            else {
+                flattened.push(child);
+            }
+        }
+    }
+    return flattened;
+}
+
+function jsx(type, props, key) {
+  if (props == null) return createElement(type, null)
+  const { children, ...rest } = props;
+  if (key !== undefined) rest.key = key;
+  if (children === undefined) return createElement(type, rest)
+  if (Array.isArray(children)) return createElement(type, rest, ...children)
+  return createElement(type, rest, children)
+}
+
+exports.Fragment = Fragment;
+exports.jsx = jsx;
+exports.jsxDEV = jsx;
+exports.jsxs = jsx;

package/dist/jsx-runtime.esm.js

@@ -0,0 +1,266 @@
+import _extend from 'extend';
+
+const undefinedv = (v) => v === undefined;
+
+const number = (v) => typeof v === 'number';
+
+const string = (v) => typeof v === 'string';
+
+const text = (v) => string(v) || number(v);
+
+const array = (v) => Array.isArray(v);
+
+const object = (v) => typeof v === 'object' && v !== null;
+
+const fun = (v) => typeof v === 'function';
+
+const vnode$1 = (v) => object(v) && 'sel' in v && 'data' in v && 'children' in v && 'text' in v;
+
+const svgPropsMap = { svg: 1, circle: 1, ellipse: 1, line: 1, polygon: 1,
+  polyline: 1, rect: 1, g: 1, path: 1, text: 1 };
+
+const svg = (v) => v.sel in svgPropsMap;
+
+// TODO: stop using extend here
+
+const extend = (...objs) => _extend(true, ...objs);
+
+const assign = (...objs) => _extend(false, ...objs);
+
+const reduceDeep = (arr, fn, initial) => {
+  let result = initial;
+  for (let i = 0; i < arr.length; i++) {
+    const value = arr[i];
+    if (array(value)) {
+      result = reduceDeep(value, fn, result);
+    } else {
+      result = fn(result, value);
+    }
+  }
+  return result
+};
+
+const mapObject = (obj, fn) => Object.keys(obj).map(
+  (key) => fn(key, obj[key])
+).reduce(
+  (acc, curr) => extend(acc, curr),
+  {}
+);
+
+const deepifyKeys = (obj, modules) => mapObject(obj,
+  (key, val) => {
+    const dashIndex = key.indexOf('-');
+    if (dashIndex > -1 && modules[key.slice(0, dashIndex)] !== undefined) {
+      const moduleData = {
+        [key.slice(dashIndex + 1)]: val
+      };
+      return {
+        [key.slice(0, dashIndex)]: moduleData
+      }
+    }
+    return { [key]: val }
+  }
+);
+
+const omit = (key, obj) => mapObject(obj,
+  (mod, data) => mod !== key ? ({ [mod]: data }) : {}
+);
+
+// Const fnName = (...params) => guard ? default : ...
+
+const createTextElement = (text$1) => !text(text$1) ? undefined : {
+  text: text$1,
+  sel: undefined,
+  data: undefined,
+  children: undefined,
+  elm: undefined,
+  key: undefined
+};
+
+const considerSvg = (vnode) => !svg(vnode) ? vnode :
+  assign(vnode,
+    { data: omit('props', extend(vnode.data,
+      { ns: 'http://www.w3.org/2000/svg', attrs: omit('className', extend(vnode.data.props,
+        { class: vnode.data.props ? vnode.data.props.className : undefined }
+      )) }
+    )) },
+    { children: undefinedv(vnode.children) ? undefined :
+      vnode.children.map((child) => considerSvg(child))
+    }
+  );
+
+const rewrites = {
+  for: 'attrs',
+  role: 'attrs',
+  tabindex: 'attrs',
+  'aria-*': 'attrs',
+  key: null
+};
+
+const rewriteModules = (data, modules) => mapObject(data, (key, val) => {
+  const inner = { [key]: val };
+  if (rewrites[key] && modules[rewrites[key]] !== undefined) {
+    return { [rewrites[key]]: inner }
+  }
+  if (rewrites[key] === null) {
+    return {}
+  }
+  const keys = Object.keys(rewrites);
+  for (let i = 0; i < keys.length; i++) {
+    const k = keys[i];
+    if (k.charAt(k.length - 1) === '*' && key.indexOf(k.slice(0, -1)) === 0 && modules[rewrites[k]] !== undefined) {
+      return { [rewrites[k]]: inner }
+    }
+  }
+  if (modules[key] !== undefined) {
+    return { [modules[key] ? modules[key] : key]: val }
+  }
+  if (modules.props !== undefined) {
+    return { props: inner }
+  }
+  return inner
+});
+
+const applyFocusProps = (data) => {
+  if (!data.props) return data
+  const { autoFocus, autoSelect, ...rest } = data.props;
+  if (!autoFocus && !autoSelect) return data
+
+  data.props = rest;
+  const existingInsert = data.hook?.insert;
+  data.hook = {
+    ...data.hook,
+    insert: (vnode) => {
+      if (existingInsert) existingInsert(vnode);
+      if (vnode.elm && typeof vnode.elm.focus === 'function') {
+        vnode.elm.focus();
+        if (autoSelect && typeof vnode.elm.select === 'function') {
+          vnode.elm.select();
+        }
+      }
+    },
+  };
+  return data
+};
+
+const sanitizeData = (data, modules) => applyFocusProps(considerSvg(rewriteModules(deepifyKeys(data, modules), modules)));
+
+const sanitizeText = (children) => children.length > 1 || !text(children[0]) ? undefined : children[0].toString();
+
+const sanitizeChildren = (children) => reduceDeep(children, (acc, child) => {
+  const vnode = vnode$1(child) ? child : createTextElement(child);
+  acc.push(vnode);
+  return acc
+}
+, []);
+
+const defaultModules = {
+  attrs: '',
+  props: '',
+  class: '',
+  data: 'dataset',
+  style: '',
+  hook: '',
+  on: ''
+};
+
+const createElementWithModules = (modules) => {
+  return (sel, data, ...children) => {
+    if (typeof sel === 'undefined') {
+      sel = 'UNDEFINED';
+      console.error('JSX Error: Capitalized HTML element without corresponding factory function.  Components with names where the first letter is capital MUST be defined or included at the parent component\'s file scope.');
+    }
+    if (fun(sel)) {
+      if (sel.name === 'Fragment') {
+        return sel(data || {}, children)
+      }
+      data ||= {};
+      if (!sel.isSygnalComponent) {
+        const name = sel.componentName || sel.label || sel.name || 'FUNCTION_COMPONENT';
+        const view = sel;
+        const { model, intent, hmrActions, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug, preventInstantiation } = sel;
+        if (preventInstantiation) {
+          const text = sanitizeText(children);
+          return considerSvg({
+            sel: name,
+            data: data ? sanitizeData(data, modules) : {},
+            children: typeof text !== 'undefined' ? createTextElement(text) : sanitizeChildren(children),
+            text,
+            elm: undefined,
+            key: data ? data.key : undefined
+          })
+        }
+        const options = { name, view, model, intent, hmrActions, context, peers, components, initialState, calculated, storeCalculatedInState, DOMSourceName, stateSourceName, debug };
+        data.sygnalOptions = options;
+        sel = name;
+      } else {
+        const factory = sel;
+        sel = sel.componentName || sel.label || sel.name || 'sygnal-factory';
+        data.sygnalFactory = factory;
+      }
+    }
+    const text = sanitizeText(children);
+    return considerSvg({
+      sel,
+      data: data ? sanitizeData(data, modules) : {},
+      children: typeof text !== 'undefined' ? createTextElement(text) : sanitizeChildren(children),
+      text,
+      elm: undefined,
+      key: data ? data.key : undefined
+    })
+  }
+};
+
+const createElement = createElementWithModules(defaultModules);
+
+function vnode(sel, data, children, text, elm) {
+    const key = data === undefined ? undefined : data.key;
+    return { sel, data, children, text, elm, key };
+}
+
+/* eslint-disable @typescript-eslint/no-namespace, import/export */
+function Fragment(data, ...children) {
+    const flatChildren = flattenAndFilter(children, []);
+    if (flatChildren.length === 1 &&
+        !flatChildren[0].sel &&
+        flatChildren[0].text) {
+        // only child is a simple text node, pass as text for a simpler vtree
+        return vnode(undefined, undefined, undefined, flatChildren[0].text, undefined);
+    }
+    else {
+        return vnode(undefined, data !== null && data !== void 0 ? data : {}, flatChildren, undefined, undefined);
+    }
+}
+function flattenAndFilter(children, flattened) {
+    for (const child of children) {
+        // filter out falsey children, except 0 since zero can be a valid value e.g inside a chart
+        if (child !== undefined &&
+            child !== null &&
+            child !== false &&
+            child !== "") {
+            if (Array.isArray(child)) {
+                flattenAndFilter(child, flattened);
+            }
+            else if (typeof child === "string" ||
+                typeof child === "number" ||
+                typeof child === "boolean") {
+                flattened.push(vnode(undefined, undefined, undefined, String(child), undefined));
+            }
+            else {
+                flattened.push(child);
+            }
+        }
+    }
+    return flattened;
+}
+
+function jsx(type, props, key) {
+  if (props == null) return createElement(type, null)
+  const { children, ...rest } = props;
+  if (key !== undefined) rest.key = key;
+  if (children === undefined) return createElement(type, rest)
+  if (Array.isArray(children)) return createElement(type, rest, ...children)
+  return createElement(type, rest, children)
+}
+
+export { Fragment, jsx, jsx as jsxDEV, jsx as jsxs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sygnal",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "An intuitive framework for building fast and small components or applications based on Cycle.js",
   "main": "./dist/index.cjs.js",
   "types": "./dist/index.d.ts",
@@ -12,10 +12,20 @@
       "require": "./dist/index.cjs.js"
     },
     "./jsx": {
-      "types": "./dist/index.d.ts",
+      "types": "./src/jsx.d.ts",
       "import": "./dist/jsx.esm.js",
       "require": "./dist/jsx.cjs.js"
     },
+    "./jsx-runtime": {
+      "types": "./src/jsx-runtime.d.ts",
+      "import": "./dist/jsx-runtime.esm.js",
+      "require": "./dist/jsx-runtime.cjs.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./src/jsx-runtime.d.ts",
+      "import": "./dist/jsx-dev-runtime.esm.js",
+      "require": "./dist/jsx-dev-runtime.cjs.js"
+    },
     "./astro": {
       "types": "./src/astro/index.d.ts",
       "import": "./dist/astro/index.mjs",

package/src/astro/index.js

@@ -14,8 +14,8 @@ export default function sygnalAstroIntegration() {
         updateConfig({
           vite: {
             esbuild: {
-              jsxFactory: 'jsx',
-              jsxInject: `import { jsx } from 'sygnal/jsx'`,
+              jsx: 'automatic',
+              jsxImportSource: 'sygnal',
             },
           },
         })

package/src/jsx-dev-runtime.js

@@ -0,0 +1 @@
+export { jsx, jsxs, jsxDEV, Fragment } from './jsx-runtime'

package/src/jsx-runtime.d.ts

@@ -0,0 +1,4 @@
+export declare function jsx(type: any, props: any, key?: any): any
+export declare function jsxs(type: any, props: any, key?: any): any
+export declare function jsxDEV(type: any, props: any, key?: any): any
+export declare function Fragment(data: any, ...children: any[]): any

package/src/jsx-runtime.js

@@ -0,0 +1,14 @@
+import { createElement } from './pragma/index'
+export { Fragment } from 'snabbdom'
+
+export function jsx(type, props, key) {
+  if (props == null) return createElement(type, null)
+  const { children, ...rest } = props
+  if (key !== undefined) rest.key = key
+  if (children === undefined) return createElement(type, rest)
+  if (Array.isArray(children)) return createElement(type, rest, ...children)
+  return createElement(type, rest, children)
+}
+
+export { jsx as jsxs }
+export { jsx as jsxDEV }

package/src/jsx.d.ts

@@ -0,0 +1,2 @@
+export { createElement as jsx } from './pragma/index';
+export declare function Fragment(data: any, children: any[]): any;

package/src/pragma/index.d.ts

@@ -0,0 +1,2 @@
+export declare function createElement(sel: any, data: any, ...children: any[]): any;
+export declare function createElementWithModules(modules: any): (sel: any, data: any, ...children: any[]) => any;