@lukekaalim/act-web 2.5.5 → 3.0.0

package/element.ts

@@ -0,0 +1,55 @@
+import * as act from '@lukekaalim/act';
+import { HTMLTagName } from "./tags";
+
+type EventMap = {
+  onClick: "click",
+
+  onMouseEnter: "mouseenter",
+  onMouseMove: "mousemove",
+  onMouseLeave: "mouseleave",
+
+  onPointerEnter: "pointerenter",
+  onPointerMove: "pointermove",
+  onPointerLeave: "pointerleave",
+
+  onKeyDown: "keydown",
+  onKeyUp: "keyup",
+
+  onFocus: "focus",
+  onBlur: 'blur',
+
+  onInput: "input",
+  onChange: "change",
+}
+
+type ElementMap = {
+  "button": HTMLButtonElement,
+  "div": HTMLDivElement,
+  "form": HTMLFormElement,
+  "input": HTMLInputElement,
+  "pre": HTMLPreElement,
+  "canvas": HTMLCanvasElement,
+}
+
+export const createSpiderElement = <Type extends HTMLTagName>(
+  type: Type,
+  props?: {
+    ref?: act.Ref<null | HTMLElement>,
+    key?: string | number,
+    style?: { [key in keyof CSSStyleDeclaration]?: number | string },
+    classList?: readonly (string | boolean | null | void)[],
+    className?: string,
+  }
+    & Record<string, unknown>
+    & {
+      //[key in keyof HTMLElement]?: HTMLElement[key] extends Function ? never : HTMLElement[key]
+    }
+    & {
+      [key in keyof EventMap]?: (this: HTMLElement, ev: HTMLElementEventMap[EventMap[key]]) => unknown
+    },
+  children?: act.Node,
+): act.Element => {
+  return act.createElement(type, props, children)
+};
+
+export const hs = createSpiderElement;

package/mod.ts

@@ -0,0 +1,4 @@
+export * from './space.ts';
+export * from './element.ts';
+export * from './props.ts';
+export * from './render.ts';

package/package.json

@@ -1,23 +1,11 @@
 {
   "name": "@lukekaalim/act-web",
-  "main": "entry.js",
-  "types": "entry.d.ts",
+  "version": "3.0.0",
   "type": "module",
-  "version": "2.5.5",
-  "sideEffects": false,
-  "scripts": {
-    "test": "cd ../..; npm test",
-    "postversion": "../../scripts/postversion.sh",
-    "preversion": "npm run test"
-  },
+  "main": "mod.ts",
   "dependencies": {
-    "@lukekaalim/act-renderer-core": "^3.5.5",
-    "@lukekaalim/act-reconciler": "^3.7.5"
-  },
-  "devDependencies": {
-    "@lukekaalim/act": "*"
-  },
-  "peerDependencies": {
-    "@lukekaalim/act": "^2.5.0"
+    "@lukekaalim/act": "^3.0.0",
+    "@lukekaalim/act-recon": "^1.0.0",
+    "@lukekaalim/act-backstage": "^1.0.0"
   }
-}
+}

package/props.ts

@@ -0,0 +1,119 @@
+import * as act from '@lukekaalim/act';
+
+export const setProps = (
+  node: HTMLElement | SVGElement | Text,
+  
+  next: act.Element,
+  prev: null | act.Element
+) => {
+  if (node instanceof HTMLElement) {
+    setHTMLElementProps(node, next, prev);
+  }
+  if (node instanceof SVGElement) {
+    setSVGElementProps(node, next, prev);
+  }
+  if (node instanceof Text) {
+    if (node.textContent !== next.props.value)
+      node.textContent = next.props.value as string
+  }
+}
+
+export const setSVGElementProps = (
+  node: SVGElement,
+  
+  next: act.Element,
+  prev: null | act.Element
+) => {
+  setPropObject(node as any, next.props, prev && prev.props, (name, next, prev) => {
+    if (name.startsWith('on')) {
+      const eventName = name.slice(2).toLocaleLowerCase();
+      setEventProp(node as any, eventName, next, prev);
+      return true;
+    }
+    switch (name) {
+      case 'ref':
+        (next as any).current = node;
+        return true;
+      default:
+        node.setAttribute(name, next as any);
+        return true;
+    };
+  });
+}
+
+export const setHTMLElementProps = (
+  node: HTMLElement,
+  
+  next: act.Element,
+  prev: null | act.Element
+) => {
+  setPropObject(node as any, next.props, prev && prev.props, (name, next, prev) => {
+    if (name.startsWith('on')) {
+      const eventName = name.slice(2).toLocaleLowerCase();
+      setEventProp(node as any, eventName, next, prev);
+      return true;
+    }
+    switch (name) {
+      case 'ref':
+        (next as any).current = node;
+        return true;
+      case 'style':
+        return (setStyleProp(node.style, next as any, prev as any), true);
+      case 'className':
+        node.className = next as string;
+        return true;
+      case 'classList':
+        const classNames = (next as string[]).filter(Boolean).join(' ');
+        node.className = classNames;
+        return true;
+      default:
+        return false;
+    }
+  })
+}
+
+export const setEventProp = (
+  node: EventSource,
+  type: string,
+  next: unknown,
+  prev: unknown,
+) => {
+  if (prev === next)
+    return;
+  if (prev) {
+    node.removeEventListener(type, prev as any)
+  }
+  if (next) {
+    node.addEventListener(type, next as any)
+  }
+}
+
+export const setStyleProp = (
+  node: CSSStyleDeclaration,
+  style: null | Record<keyof CSSStyleDeclaration, string | number>,
+  prevStyle: null | Record<keyof CSSStyleDeclaration, string | number>,
+) => {
+  setPropObject(node as any, style, prevStyle)
+}
+
+const setPropObject = (
+  target: Record<string, unknown>,
+  next: null | Record<string, unknown>,
+  prev: null | Record<string, unknown>,
+  assign: null | ((name: string, next: unknown, prev: unknown) => boolean) = null, 
+) => {
+  const names = new Set([
+    ...Object.keys(next || {}),
+    ...Object.keys(prev || {})
+  ]);
+
+  for (const name of names) {
+    const nextValue = (next || {})[name];
+    const successfulAssign = assign && assign(name, nextValue, (prev || {})[name]);
+    if (!successfulAssign) {
+      if (target[name] !== nextValue) {
+        target[name] = nextValue;
+      }
+    }
+  }
+}

package/render.ts

@@ -0,0 +1,10 @@
+import { createWebSpace } from "./space";
+import { createRenderFunction, Scheduler } from "@lukekaalim/act-backstage";
+
+const intervalScheduler: Scheduler<NodeJS.Timeout> = {
+  duration: 10,
+  request: func => setInterval(func, 10),
+  cancel: id => clearInterval(id),
+}
+
+export const render = createRenderFunction(intervalScheduler, createWebSpace);

package/space.ts

@@ -0,0 +1,59 @@
+import * as act from '@lukekaalim/act';
+import * as recon from '@lukekaalim/act-recon';
+
+import { createSimpleRenderSpace } from '@lukekaalim/act-backstage/mod.ts';
+
+import { setProps } from './props.ts';
+
+export const HTML: act.Component = ({ children }) => act.h(act.primitiveNodeTypes.render, { type: 'web:html' }, children);
+export const SVG: act.Component = ({ children }) => act.h(act.primitiveNodeTypes.render, { type: 'web:svg' }, children);
+
+export const createWebSpace = (tree: recon.CommitTree, root: HTMLElement, document: Document = window.document) => {
+  return createSimpleRenderSpace(tree, {
+    rootTypes: new Set(['web:html', 'web:svg']),
+    create(element, rootType) {
+      const tag = element.type;
+      
+      switch (typeof tag) {
+        case 'symbol': {
+          switch (tag) {
+            case act.primitiveNodeTypes.string:
+              return document.createTextNode("");
+            default:
+              return null;
+          }
+        }
+        case 'string': {
+          switch (rootType) {
+            case 'web:html':
+              return document.createElementNS('http://www.w3.org/1999/xhtml', tag);
+            case 'web:svg':
+              return document.createElementNS('http://www.w3.org/2000/svg', tag);
+          }
+        }
+        default:
+          return null;
+      }
+    },
+    update(el, next, prev) {
+      setProps(el, next, prev);
+    },
+    link(el, parent) {
+      (parent || root).appendChild(el);
+    },
+    sort(el, newChildren) {
+      if (el instanceof Text)
+        return;
+      if (newChildren.length < 2)
+        return;
+
+      for (let i = 0; i < newChildren.length; i++)
+        if (el.children[i] !== newChildren[i])
+          el.insertBefore(newChildren[i], el.children[i])
+    },
+    destroy(prev) {
+      if (prev.parentNode)
+        prev.parentNode.removeChild(prev);
+    },
+  });
+};

package/tags.ts

@@ -0,0 +1,31 @@
+export const htmlTagNames = new Set([
+  "div", "span",
+  "img", "picture", "canvas",
+  "details", "summary", "section",
+  "video", "audio",
+  "h1", "h2", "h3", "h4", "h5", "h6",
+  "hl",
+  'p',
+  "ol", "ul", "li",
+  "table", 'td', 'tr', 'th',
+  "pre",
+
+  'article', 'code', 'a',
+
+  "form", "input", "label", "button", "select", "textarea",
+] as const);
+export const svgTagName = new Set([
+  "svg",
+  "line",
+  "path",
+  "polyline",
+  "circle",
+  "rect",
+  "g",
+  "text",
+] as const);
+
+type SetValue<T extends Set<string>> = T extends Set<infer X> ? X : never;
+
+export type HTMLTagName = SetValue<typeof htmlTagNames>;
+export type SVGTagName = SetValue<typeof svgTagName>;

package/README.md

@@ -1,24 +0,0 @@
-# Act-Web
-The web renderer for Act, turning components into HTML or SVG elements.
-> ⚠️ Warning: This library is designed as an experiment, and should not be used for production.
-
-> ⚠️ Warning: This library is only available as an ESM.
-
-## API
-### `render`
-```
-(root: Element, htmlRoot: HTMLElement) => void
-```
-Starts the rendering of a root Act element, under a htmlRoot parent. You can create Act elements from the `@lukekaalim/act`'s `createElement` function.
-
-```js
-import { h } from '@lukekaalim/act';
-import { render } from '@lukekaalim/act-web';
-
-const App = () => [
-  h('h1', {}, 'Hello, World!'),
-  h('p', {}, 'Welcome to my first webpage!'),
-];
-
-render(h(App), document.body);
-```

package/entry.d.ts

@@ -1,7 +0,0 @@
-import { Element } from "@lukekaalim/act";
-
-export const render: (actElement: Element, htmlElement: HTMLElement) => void
-
-export * from './renderer.js';
-export * from './props.js';
-export * from './node.js';

package/entry.js

@@ -1,6 +0,0 @@
-// @flow strict
-export * from './renderer.js';
-export * from './reconciler.js';
-
-export * from './prop.js';
-export * from './node.js';

package/node.d.ts

@@ -1 +0,0 @@
-export declare function setNodeChildren2(parent: Node, children: Node[]): void

package/node.js

@@ -1,54 +0,0 @@
-// @flow strict
-/*:: import type { Element } from '@lukekaalim/act'; */
-/*:: import type { RenderResult, RenderResult2 } from '@lukekaalim/act-renderer-core'; */
-/*:: import type { CommitDiff } from '@lukekaalim/act-reconciler'; */
-
-import { calculateIndexChanges } from "@lukekaalim/act-reconciler/util";
-
-export const createNode = (type/*: string*/, namespace/*: string*/)/*: Node*/ => {
-  if (type === 'act:string')
-    return document.createTextNode('');
-  return document.createElementNS(namespace, type);
-};
-export const removeNode = (node/*: Node*/) => {
-  const parent = node.parentNode;
-  if (parent)
-    parent.removeChild(node);
-}
-export const setNodeChildren = (parent/*: Node*/, children/*: RenderResult<Node>[]*/) => {
-  const childrenToAttach = children.filter(r => !r.commit.suspension).map(r => r.node);
-  const childrenToRemove = children.filter(r => r.commit.suspension).map(r => r.node);
-  for (let i = 0; i < childrenToRemove.length; i++)
-    removeNode(childrenToRemove[i]);
-  
-  // iterate backwards through the children
-  for (let i = childrenToAttach.length; i > 0; i--) {
-    const child = childrenToAttach[i - 1];
-    const rightSibling = childrenToAttach[i];
-    if (parent !== child.parentNode || (rightSibling && child.nextSibling !== rightSibling)) {
-      parent.insertBefore(child, rightSibling);
-    }
-  }
-}
-
-export const setNodeChildren2 = (parent/*: Node*/, children/*: Node[]*/) => {
-  const parentNodeLength = parent.childNodes.length;
-  const parentNodes = [...parent.childNodes];
-  
-  for (let i  = 0; i < parentNodeLength; i++) {
-    if (!children.includes(parentNodes[i]))
-      parent.removeChild(parentNodes[i]);
-  }
-
-  for (let i = 0; i < children.length; i++) {
-    const prevChild = parent.childNodes[i] || null;
-    const nextChild = children[i] || null;
-
-    if (prevChild !== nextChild) {
-      if (!prevChild)
-        parent.appendChild(nextChild)
-      else
-        parent.replaceChild(nextChild, prevChild);
-    }
-  }
-}

package/prop.js

@@ -1,156 +0,0 @@
-// @flow strict
-/*::
-import type { Commit3 } from "../../reconciler/commit3";
-import type { Diff3, DiffSet } from "../../reconciler/diff";
-import type { CommitDiff } from '@lukekaalim/act-reconciler';
-import type { PropDiff, PropDiffRegistry } from '@lukekaalim/act-renderer-core';
-*/
-import { calculatePropsDiff } from '@lukekaalim/act-renderer-core'
-
-const propBlacklist = new Set(['ref', 'key', 'children']);
-
-export const setStylesProp = (
-  element/*: HTMLElement | SVGElement*/,
-  { prev, next }/*: PropDiff*/
-) => {
-  const style = element.style;
-  const prevRules = typeof prev === 'object' && prev || {};
-  const nextRules = typeof next === 'object' && next || {};
-
-  const reg = calculatePropsDiff(prevRules, nextRules);
-
-  for (const [rule, { next }] of reg.map) {
-    const nextRuleValue = (typeof next === 'string' || typeof next === 'number') ? next : null;
-    if (typeof (style/*: any*/)[rule] !== 'undefined')
-      (style/*: any*/)[rule] = nextRuleValue;
-    else
-      if (nextRuleValue === null)
-        style.removeProperty(rule);
-      else
-        style.setProperty(rule, nextRuleValue.toString());
-  }
-};
-
-export const setEventListenerProp = (
-  element/*: Element*/,
-  { key, prev, next }/*: PropDiff*/
-) => {
-  const event = key.slice(2).toLowerCase();
-
-  if (typeof prev === 'function')
-    element.removeEventListener(event, ((prev/*: any*/)/*: EventListener*/));
-  if (typeof next === 'function')
-    element.addEventListener(event, ((next/*: any*/)/*: EventListener*/));
-};
-
-export const setAttributeProp = (
-  element/*: Element*/,
-  { key, prev, next }/*: PropDiff*/
-) => {
-  if (next === null && prev !== null)
-    element.removeAttribute(key);
-  else if (next !== null)
-    switch (typeof next) {
-      case 'string':
-        element.setAttribute(key, next);
-      case 'number':
-      case 'boolean':
-        element.setAttribute(key, next.toString());
-      default:
-    }
-};
-
-export const setDOMTokenList = (
-  list/*: DOMTokenList*/,
-  prop/*: PropDiff*/
-)/*: void*/ => {
-  const next = prop.next;
-  if (typeof prop.next === 'string')
-    // $FlowFixMe
-    return list.value = prop.next;
-  else if (Array.isArray(next)) {
-    const removed = [...list].filter(e => !next.includes(e));
-    for (const item of removed)
-      list.remove(item);
-    for (const item of next)
-      typeof item === 'string' && list.add(item);
-  }
-}
-
-export const setHTMLProp = (
-  element/*: HTMLElement | SVGElement*/,
-  prop/*: PropDiff*/
-) => {
-  if (prop.key.startsWith('on'))
-    setEventListenerProp(element, prop);
-  else if (prop.key === 'style')
-    setStylesProp(element, prop);
-  else if (prop.key in element && !propBlacklist.has(prop.key) && element instanceof HTMLElement) {
-    const htmlElement = (element/*: Object*/);
-    if (htmlElement[prop.key] instanceof DOMTokenList)
-      setDOMTokenList(htmlElement[prop.key], prop);
-    else
-      htmlElement[prop.key] = prop.next;
-  }
-  else
-    setAttributeProp(element, prop);
-}
-
-export const setHTMLProps = (
-  element/*: HTMLElement | SVGElement*/,
-  registry/*: PropDiffRegistry*/
-) => {
-  for (const [_, propDiff] of registry.map)
-    setHTMLProp(element, propDiff);
-};
-
-export const setTextProps = (
-  element/*: Text*/,
-  registry/*: PropDiffRegistry*/
-) => {
-  const content = registry.prop('content', '').next;
-  if (content !== element.textContent)
-    element.textContent = typeof content === 'string' ? content : '';
-};
-
-export const setProps = (
-  element/*: ?Node*/,
-  diff/*: CommitDiff*/
-) => {
-  const propDiff = calculatePropsDiff(diff.prev.element.props, diff.next.element.props);
-  if (element instanceof HTMLElement || element instanceof SVGElement)
-    setHTMLProps(element, propDiff);
-  if (element instanceof Text)
-    setTextProps(element, propDiff);
-};
-
-export const setWebProps2 = (
-  element/*: Node*/,
-  set/*: DiffSet*/,
-  diff/*: Diff3*/,
-) => {
-  const prev = set.prevs.map.get(diff.commit.id);
-  const propDiff = calculatePropsDiff(prev ? prev.element.props : {}, diff.commit.element.props);
-  if (element instanceof HTMLElement || element instanceof SVGElement)
-    setHTMLProps(element, propDiff);
-  if (element instanceof Text)
-    setTextProps(element, propDiff);
-}
-
-export const setRef = (
-  node/*: ?Node*/,
-  diff/*: CommitDiff*/
-) => {;
-  const ref/*: any*/ = diff.next.element.props['ref'];
-  if (typeof ref === 'function') {
-    if (diff.prev.pruned)
-      (ref/*: Function*/)(node);
-    else if (diff.next.pruned)
-      (ref/*: Function*/)(null);
-  } else if (ref && typeof ref === 'object') {
-    if (diff.prev.pruned)
-      ref['current'] = node;
-    else if (diff.next.pruned)
-      ref['current'] = null;
-  }
-};

package/props.d.ts

@@ -1,7 +0,0 @@
-import { Diff3, DiffSet } from "@lukekaalim/act-reconciler";
-
-export declare function setWebProps2(
-  element: Node,
-  set: DiffSet,
-  diff: Diff3,
-): void;

package/reconciler.js

@@ -1,27 +0,0 @@
-// @flow strict
-/*:: import type { Element } from '@lukekaalim/act'; */
-import { createBoundaryService, createEffectService, createReconciler, createSchedule2, createTree, createTreeService2 } from '@lukekaalim/act-reconciler';
-import { createWebRenderer } from './renderer.js';
-import { setNodeChildren2 } from "./node.js";
-
-export const render = (element/*: Element*/, node/*: HTMLElement*/) => {
-  const web = createWebRenderer();
-
-  const onScheduleRequest = (callback) => {
-    const id = requestAnimationFrame(() => callback(16));
-    return () => cancelAnimationFrame(id);
-  };
-  const scheduler = createSchedule2(onScheduleRequest)
-  const effect = createEffectService(scheduler);
-  const boundary = createBoundaryService();
-  const reconciler = createReconciler(scheduler);
-
-  reconciler.diff.subscribeDiff((set) => {
-    setNodeChildren2(node, web.render(set, set.root));
-    reconciler.tree.live.registry = effect.runEffectRegistry(set.registry);
-
-    const map = boundary.calcBoundaryMap(set);
-    boundary.getRootBoundaryValue(set.suspensions, set, map);
-  });
-  reconciler.tree.mount(element);
-};

package/renderer.d.ts

@@ -1,6 +0,0 @@
-import { ElementType } from "@lukekaalim/act";
-import { Renderer2 } from "@lukekaalim/act-renderer-core";
-
-export declare function createWebRenderer(
-  getNextRenderer?: null | ((element: ElementType) => null | Renderer2<Node>),
-): Renderer2<Node>

package/renderer.js

@@ -1,85 +0,0 @@
-// @flow strict
-/*::
-import type { ElementType } from '@lukekaalim/act'; 
-import type { CommitDiff, Commit } from '@lukekaalim/act-reconciler'; 
-import type { Renderer2 } from "../core/renderer2";
-*/
-/*:: import type { Renderer, RenderResult } from '@lukekaalim/act-renderer-core'; */
-import { setProps, setRef, setWebProps2 } from './prop.js';
-import { createNode, removeNode, setNodeChildren, setNodeChildren2 } from './node.js';
-import { createRenderer2, setRef2 } from '@lukekaalim/act-renderer-core';
-
-export const createDOMRenderer = (
-  namespace/*: string*/,
-  getNextRenderer/*: null | (ElementType => null | Renderer2<Node>)*/ = null,
-)/*: Renderer2<Node>*/ => {
-  const create = (type) => {
-    return createNode(type, namespace);
-  }
-  const remove = (node, children, diff) => {
-    setRef2(node, diff.commit, diff.change);
-    removeNode(node);
-  };
-  const update = (node, set, diff) => {
-    if (diff.change.type === 'create')
-      setRef2(node, diff.commit, diff.change);
-
-    setWebProps2(node, set, diff);
-  }
-  const attach = (node, set, diff, children) => {
-    if (diff.commit.element.props["ignoreChildren"])
-      return;
-    setNodeChildren2(node, children);
-  }
-
-  const getRenderer = (set, commitId) => {
-    const commit = set.nexts.map.get(commitId) || set.prevs.get(commitId);
-    return getNextRenderer && getNextRenderer(commit.element.type) || nodeRenderer;
-  }
-
-  const getNodes = (set, commitId) => {
-    const renderer = getRenderer(set, commitId)
-    return renderer.getNodes(set, commitId);
-  }
-
-  const render = (set, commitId) => {
-    const renderer = getRenderer(set, commitId)
-    return renderer.render(set, commitId);
-  }
-
-  const nodeRenderer = createRenderer2({
-    create,
-    update,
-    remove,
-    attach,
-  }, {
-    getNodes,
-    render,
-  });
-
-  return nodeRenderer;
-};
-
-export const createWebRenderer = (
-  getNextRenderer/*: null | (ElementType => null | Renderer2<Node>)*/ = null,
-)/*: Renderer2<Node>*/ => {
-  const svgRenderer = createDOMRenderer('http://www.w3.org/2000/svg', type => {
-    switch (type) {
-      case 'div':
-        return htmlRenderer;
-      default:
-        return getNextRenderer && getNextRenderer(type);
-    }
-  })
-
-  const htmlRenderer = createDOMRenderer('http://www.w3.org/1999/xhtml', type => {
-    switch (type) {
-      case 'svg':
-        return svgRenderer;
-      default:
-        return getNextRenderer && getNextRenderer(type);
-    }
-  });
-
-  return htmlRenderer;
-}