@lukekaalim/act-web 3.4.0-alpha.2 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @lukekaalim/act-web
 
+## 4.0.0
+
+### Major Changes
+
+- 6658c01: Internal Refactor!
+- afd247e: Another major refactor! So everything is broken. Good luck!
+
+### Minor Changes
+
+- bd0a076: Add support for data-\* attributes on HTML elements
+- b3f6c49: Added debug capabilities and protocol
+
+### Patch Changes
+
+- 7597a8f: Added "Style" prop support to SVG
+- ccb3900: Reconciler should apply all changes in the correct order, and not skip any.
+  - Reconciler does send out a Render command once it completes all pending renders (called a "ThreadStack")
+    Scheduler has been updated to perform some updates in Sync.
+- Updated dependencies [6658c01]
+- Updated dependencies [fdf1557]
+- Updated dependencies [ccb3900]
+- Updated dependencies [afd247e]
+- Updated dependencies [2984273]
+- Updated dependencies [b3f6c49]
+- Updated dependencies [c5e8775]
+  - @lukekaalim/act-backstage@3.0.0
+  - @lukekaalim/act-recon@3.0.0
+  - @lukekaalim/act@4.0.0
+
+## 3.4.0-alpha.3
+
+### Patch Changes
+
+- ccb3900: Reconciler should apply all changes in the correct order, and not skip any.
+  - Reconciler does send out a Render command once it completes all pending renders (called a "ThreadStack")
+    Scheduler has been updated to perform some updates in Sync.
+- Updated dependencies [ccb3900]
+  - @lukekaalim/act-recon@3.0.0-alpha.3
+
 ## 3.4.0-alpha.2
 
 ### Minor Changes

package/README.md

@@ -0,0 +1,38 @@
+# @lukekaalim/act-web
+
+```bash
+npm i @lukekaalim/act-web
+```
+
+```ts
+import { h, Component } from "@lukekaalim/act";
+import { render } from "@lukekaalim/act-web";
+
+const MyApp = () => {
+  return h('article', {}, [
+    h('h1', {}, "Hello, world!")
+  ])
+}
+
+render(h(MyApp), document.body)
+```
+
+<TypeDoc project="@lukekaalim/act-web" name="render" />
+
+## Capabilities
+
+  - [x] Supports HTML elements and SVG elements
+    - [x] Add in the `web:html` or `web:svg` root pick the correct type
+  - [x] Prop support
+    - [x] **Attributes.** Most props will just be assigned directly to the element
+    - [x] **Event Listeners.** `onClick` adds an event listener for `click`
+    - [x] **Ref.** `ref` will attach a `HTMLElement` to `ref.current`
+    - [x] **Styles.** `style` will set styles directly on the element
+    - [x] **ClassList.** An array of strings or falseish values will be added as classes via `classList`
+
+## Builder
+
+If you are composing another renderer and want to give
+it web powers, use the builder:
+
+<TypeDoc project="@lukekaalim/act-web" name="createWebNodeBuilder" />

package/docs/index.ts

@@ -0,0 +1,5 @@
+import { DocApp } from '@lukekaalim/grimoire';
+
+const createWebDocs = (doc: DocApp) => {
+  
+}

package/mod.ts

@@ -3,3 +3,4 @@ export * from './element.ts';
 export * from './props.ts';
 export * from './render.ts';
 export * from './scheduler.ts';
+export * from './server.ts';

package/package.json

@@ -1,11 +1,16 @@
 {
   "name": "@lukekaalim/act-web",
-  "version": "3.4.0-alpha.2",
+  "version": "4.0.0",
   "type": "module",
   "main": "mod.ts",
   "dependencies": {
-    "@lukekaalim/act": "^3.1.0",
-    "@lukekaalim/act-recon": "^3.0.0-alpha.0",
-    "@lukekaalim/act-backstage": "^3.0.0-alpha.0"
+    "@lukekaalim/act": "^4.0.0",
+    "@lukekaalim/act-backstage": "^3.0.0",
+    "@lukekaalim/act-recon": "^3.0.0",
+    "@types/hast": "^3.0.4",
+    "hast-util-to-html": "^9.0.5",
+    "hastscript": "^9.0.1",
+    "rehype": "^13.0.2",
+    "rehype-stringify": "^10.0.1"
   }
 }

package/render.ts

@@ -1,8 +1,32 @@
-import { h } from "@lukekaalim/act";
-import { createWebSpace, HTML } from "./space";
-import { createRenderFunction, RenderFunction } from "@lukekaalim/act-backstage";
+import { h, Node } from "@lukekaalim/act";
+import { createWebNodeBuilder, HTML } from "./space";
+import { RenderSpace2 } from "@lukekaalim/act-backstage";
 import { createDOMScheduler } from "./scheduler";
+import { Reconciler2 } from "@lukekaalim/act-recon";
 
+/**
+ * Custom options for web.render
+ */
+type Options = {
+  window?: Window;
+}
 
-export const render: RenderFunction<HTMLElement> = (node, root) => 
-  createRenderFunction(createDOMScheduler(), createWebSpace)(h(HTML, {}, node), root);
+/**
+ * Render a node into the page.
+ * 
+ * 
+ * @param node 
+ * @param root 
+ * @param options 
+ * @returns 
+ */
+export const render = (node: Node, root: HTMLElement, options: Options = {}) => {
+  const scheduler = createDOMScheduler();
+  const reconciler = new Reconciler2(scheduler);
+  const space = new RenderSpace2(reconciler.tree, createWebNodeBuilder(root, options.window));
+
+  reconciler.bus = space.bus;
+  const ref = reconciler.mount(h(HTML, {}, node));
+
+  return {reconciler, space,ref};
+}

package/scheduler.ts

@@ -1,26 +1,53 @@
-import { createId } from "@lukekaalim/act";
 import { Scheduler } from "@lukekaalim/act-recon";
 
 export const createDOMScheduler = (): Scheduler => {
-  const workMap = new Map();
   let id: number | null = null;
-  const work = () => {
+  let callbackFunc = () => console.error(`DOMScheduler got callback before callback function was configured`)
+  let synccall_available = false;
+  let synccall_requested = false;
+  const time_budget = 60;
+
+  const onTimeout = () => {
+    const start = performance.now();
     id = null;
-    for (const [,callback] of workMap)
-      callback();
 
-    workMap.clear();
-  };
+    synccall_available = true;
+    // at least 1 call
+    callbackFunc();
+
+    // if callback func re-requested a call,
+    // do the rest in sync
+    while (synccall_requested) {
+      synccall_requested = false;
+      const now = performance.now();
+      
+      if (now - start >= time_budget) {
+        synccall_available = false;
+      }
+      
+      callbackFunc();
+    }
+    synccall_available = false;
+  }
+
   return {
-    requestWork(callback) {
-      const workId = createId<'WorkID'>();
-      workMap.set(workId, callback);
-      if (!id)
-        id = setTimeout(work, 1) as any;
-      return workId;
+    setCallbackFunc(newCallbackFunc) {
+      callbackFunc = newCallbackFunc;
+    },
+    isCallbackPending() {
+      return id !== null;
+    },
+    requestCallback() {
+      if (synccall_available) {
+        synccall_requested = true;
+      }
+      else if (!id) {
+        id = window.setTimeout(onTimeout, 0);
+      }
     },
-    cancelWork(workId) {
-      workMap.delete(workId);
+    cancelCallback() {
+      if (id !== null)
+        window.clearTimeout(id);
     },
   }
 }

package/server.ts

@@ -0,0 +1,91 @@
+import { h, s } from 'hastscript';
+import { Element, Nodes as HNode, Root } from 'hast';
+import { NodeBuilder, RenderSpace2 } from "@lukekaalim/act-backstage";
+import { primitiveNodeTypes } from '@lukekaalim/act';
+import { CommitTree2 } from '@lukekaalim/act-recon';
+
+export const createHASTBuilder = (root: Root): NodeBuilder<HNode, 'web:html' | 'web:svg'> => ({
+  roots: new Set(['web:html', 'web:svg']),
+
+  create(element, root): HNode | null {
+    switch (element.type) {
+      case primitiveNodeTypes.string:
+      case primitiveNodeTypes.string:
+      case primitiveNodeTypes.number:
+        return { type: 'text', value: '' };
+      default: {
+        switch (typeof element.type) {
+          case 'string':
+            switch (root) {
+              case 'web:html':
+                return h(element.type);
+              case 'web:svg':
+                return s(element.type);
+            }
+          default:
+            return null;
+        }
+      }
+    }
+  },
+  link(child, parent) {
+    switch (child.type) {
+      case 'element':
+      case 'comment':
+      case 'text':
+        switch (parent.type) {
+          case 'element':
+          case 'root':
+            parent.children.push(child);
+        }
+        return;
+      case 'doctype':
+        switch (parent.type) {
+          case 'root':
+            parent.children.push(child);
+        }
+        return;
+      default:
+    }
+  },
+  linkRoot(child) {
+    switch (child.type) {
+      case 'doctype':
+      case 'element':
+      case 'comment':
+      case 'text':
+        root.children.push(child);
+    }
+  },
+  update(el, next, prev) {
+    switch (el.type) {
+      case 'text':
+        el.value = (next.props.value as number | string | boolean).toString()
+        return;
+      case 'element':
+
+    }
+  },
+  unlink(child, parent) {
+    if ("children" in parent) {
+      parent.children = parent.children.filter(c => c !== child);
+    }
+  },
+  sort(el, children) {
+    if ("children" in el) {
+      el.children = children as Element[];
+    }
+  },
+}) 
+
+type DehydratedRender = {
+  
+}
+
+export const dehydrate = (tree: CommitTree2, renderer: RenderSpace2<HNode, string | symbol>) => {
+
+}
+
+export const rehydrate = () => {
+
+}

package/space.ts

@@ -1,69 +1,77 @@
 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';
+import { NodeBuilder } from '@lukekaalim/act-backstage';
 
 export const HTML: act.Component = ({ children }) => act.h(act.renderNodeType, { type: 'web:html' }, children);
 export const SVG: act.Component = ({ children }) => act.h(act.renderNodeType, { type: 'web:svg' }, children);
 
 const defaultWindow = window;
 
-export const createWebSpace = (
-  tree: recon.CommitTree,
+export const createWebNodeBuilder = (
   root: HTMLElement,
   window: Window = defaultWindow
-) => {
-  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:
-            case act.primitiveNodeTypes.number:
-              return window.document.createTextNode("<empty text>");
-            default:
-              return null;
-          }
+): NodeBuilder<HTMLElement | SVGElement | Text, 'web:html' | 'web:svg'> => ({
+  roots: new Set(['web:html', 'web:svg'] as const),
+
+  create(element, rootType) {
+    const tag = element.type;
+    
+    switch (typeof tag) {
+      case 'symbol': {
+        switch (tag) {
+          case act.primitiveNodeTypes.string:
+          case act.primitiveNodeTypes.number:
+            return window.document.createTextNode("<empty text>");
+          default:
+            return null;
         }
-        case 'string': {
-          switch (rootType) {
-            case 'web:html':
-              return window.document.createElementNS('http://www.w3.org/1999/xhtml', tag);
-            case 'web:svg':
-              return window.document.createElementNS('http://www.w3.org/2000/svg', tag);
-          }
+      }
+      case 'string': {
+        switch (rootType) {
+          case 'web:html':
+            return window.document.createElementNS('http://www.w3.org/1999/xhtml', tag);
+          case 'web:svg':
+            return window.document.createElementNS('http://www.w3.org/2000/svg', tag);
         }
-        default:
-          return null;
       }
-    },
-    update(el, next, prev) {
-      setProps(window, el, next, prev);
-    },
-    link(el, parent) {
-      (parent || root).appendChild(el);
-    },
-    unlink(el, parent) {
-      (parent || root).removeChild(el);
-    },
-    sort(el, newChildren) {
-      if (el instanceof Text)
-        return;
-      if (newChildren.length < 2)
-        return;
+      default:
+        return null;
+    }
+  },
+  update(el, next, prev) {
+    setProps(window, el, next, prev);
+  },
+  link(el, parent) {
+    parent.appendChild(el);
+  },
+  linkRoot(child) {
+    root.appendChild(child);
+  },
+  unlink(el, parent) {
+    if (el.parentNode === parent)
+      parent.removeChild(el);
+  },
+  destroy(el) {
+    if (el.parentNode)
+      el.parentNode.removeChild(el)
+  },
+  suspend(el, parent) {
+    if (el instanceof HTMLElement)
+      el.style.opacity = 0.5.toString();
+  },
+  unsuspend(el, parent) {
+    if (el instanceof HTMLElement)
+      el.style.opacity = (1).toString();
+  },
+  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);
-    },
-  });
-};
+    for (let i = 0; i < newChildren.length; i++)
+      if (el.children[i] !== newChildren[i])
+        el.insertBefore(newChildren[i], el.children[i])
+  },
+})