sygnal 4.1.1 → 4.2.1

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,308 @@
+'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 = {
+  // Container / structural
+  svg: 1, g: 1, defs: 1, symbol: 1, use: 1,
+  // Shape
+  circle: 1, ellipse: 1, line: 1, path: 1, polygon: 1, polyline: 1, rect: 1,
+  // Text  (no HTML collision: HTML has no <text>, <tspan>, or <textPath>)
+  text: 1, tspan: 1, textPath: 1,
+  // Gradient / paint
+  linearGradient: 1, radialGradient: 1, stop: 1, pattern: 1,
+  // Clipping / masking
+  clipPath: 1, mask: 1,
+  // Marker
+  marker: 1,
+  // Filter primitives
+  filter: 1, feBlend: 1, feColorMatrix: 1, feComponentTransfer: 1,
+  feComposite: 1, feConvolveMatrix: 1, feDiffuseLighting: 1,
+  feDisplacementMap: 1, feDropShadow: 1, feFlood: 1, feGaussianBlur: 1,
+  feImage: 1, feMerge: 1, feMergeNode: 1, feMorphology: 1, feOffset: 1,
+  fePointLight: 1, feSpecularLighting: 1, feSpotLight: 1, feTile: 1,
+  feTurbulence: 1, feFuncR: 1, feFuncG: 1, feFuncB: 1, feFuncA: 1,
+  // Descriptive  (excluding 'title' — collides with HTML <title>)
+  desc: 1, metadata: 1,
+  // Other  (excluding 'a', 'image', 'style', 'script' — collide with HTML)
+  foreignObject: 1, switch: 1,
+  // Animation
+  animate: 1, animateMotion: 1, animateTransform: 1, set: 1, mpath: 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 applySvg = (vnode) => {
+  // Skip text vnodes (sel is undefined) and nullish values
+  if (!vnode || undefinedv(vnode.sel)) return vnode
+
+  const data = vnode.data || {};
+  const props = data.props || {};
+  const propsWithoutClassName = omit('className', props);
+  const classAttr = props.className !== undefined ? { class: props.className } : {};
+  const mergedAttrs = assign({}, propsWithoutClassName, classAttr, data.attrs || {});
+
+  return assign(vnode,
+    { data: omit('props', assign({}, data,
+      { ns: 'http://www.w3.org/2000/svg', attrs: mergedAttrs }
+    )) },
+    // foreignObject contains HTML, not SVG — do not recurse into its children
+    { children: (!Array.isArray(vnode.children) || vnode.sel === 'foreignObject')
+      ? vnode.children
+      : vnode.children.map((child) => applySvg(child))
+    }
+  )
+};
+
+const considerSvg = (vnode) => !svg(vnode) ? vnode : applySvg(vnode);
+
+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(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,303 @@
+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 = {
+  // Container / structural
+  svg: 1, g: 1, defs: 1, symbol: 1, use: 1,
+  // Shape
+  circle: 1, ellipse: 1, line: 1, path: 1, polygon: 1, polyline: 1, rect: 1,
+  // Text  (no HTML collision: HTML has no <text>, <tspan>, or <textPath>)
+  text: 1, tspan: 1, textPath: 1,
+  // Gradient / paint
+  linearGradient: 1, radialGradient: 1, stop: 1, pattern: 1,
+  // Clipping / masking
+  clipPath: 1, mask: 1,
+  // Marker
+  marker: 1,
+  // Filter primitives
+  filter: 1, feBlend: 1, feColorMatrix: 1, feComponentTransfer: 1,
+  feComposite: 1, feConvolveMatrix: 1, feDiffuseLighting: 1,
+  feDisplacementMap: 1, feDropShadow: 1, feFlood: 1, feGaussianBlur: 1,
+  feImage: 1, feMerge: 1, feMergeNode: 1, feMorphology: 1, feOffset: 1,
+  fePointLight: 1, feSpecularLighting: 1, feSpotLight: 1, feTile: 1,
+  feTurbulence: 1, feFuncR: 1, feFuncG: 1, feFuncB: 1, feFuncA: 1,
+  // Descriptive  (excluding 'title' — collides with HTML <title>)
+  desc: 1, metadata: 1,
+  // Other  (excluding 'a', 'image', 'style', 'script' — collide with HTML)
+  foreignObject: 1, switch: 1,
+  // Animation
+  animate: 1, animateMotion: 1, animateTransform: 1, set: 1, mpath: 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 applySvg = (vnode) => {
+  // Skip text vnodes (sel is undefined) and nullish values
+  if (!vnode || undefinedv(vnode.sel)) return vnode
+
+  const data = vnode.data || {};
+  const props = data.props || {};
+  const propsWithoutClassName = omit('className', props);
+  const classAttr = props.className !== undefined ? { class: props.className } : {};
+  const mergedAttrs = assign({}, propsWithoutClassName, classAttr, data.attrs || {});
+
+  return assign(vnode,
+    { data: omit('props', assign({}, data,
+      { ns: 'http://www.w3.org/2000/svg', attrs: mergedAttrs }
+    )) },
+    // foreignObject contains HTML, not SVG — do not recurse into its children
+    { children: (!Array.isArray(vnode.children) || vnode.sel === 'foreignObject')
+      ? vnode.children
+      : vnode.children.map((child) => applySvg(child))
+    }
+  )
+};
+
+const considerSvg = (vnode) => !svg(vnode) ? vnode : applySvg(vnode);
+
+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(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 };