@lukekaalim/act-web 3.2.1 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @lukekaalim/act-web
 
+## 3.3.0
+
+### Minor Changes
+
+- Scheduling refactor
+
+### Patch Changes
+
+- Updated dependencies
+  - @lukekaalim/act-backstage@2.0.0
+  - @lukekaalim/act-recon@2.0.0
+
+## 3.2.2
+
+### Patch Changes
+
+- cece5b4: Fixes CSS vars in the "style" prop not being applied
+
 ## 3.2.1
 
 ### Patch Changes

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@lukekaalim/act-web",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "type": "module",
   "main": "mod.ts",
   "dependencies": {
     "@lukekaalim/act": "^3.1.0",
-    "@lukekaalim/act-recon": "^1.1.1",
-    "@lukekaalim/act-backstage": "^1.2.1"
+    "@lukekaalim/act-recon": "^2.0.0",
+    "@lukekaalim/act-backstage": "^2.0.0"
   }
 }

package/props.ts

@@ -1,18 +1,27 @@
 import * as act from '@lukekaalim/act';
 
+declare global {
+  interface Window {
+    HTMLElement: typeof HTMLElement,
+    SVGElement: typeof SVGElement,
+    Text: typeof Text,
+  }
+}
+
 export const setProps = (
+  window: Window,
   node: HTMLElement | SVGElement | Text,
   
   next: act.Element,
   prev: null | act.Element
 ) => {
-  if (node instanceof HTMLElement) {
+  if (node instanceof window.HTMLElement) {
     setHTMLElementProps(node, next, prev);
   }
-  if (node instanceof SVGElement) {
+  if (node instanceof window.SVGElement) {
     setSVGElementProps(node, next, prev);
   }
-  if (node instanceof Text) {
+  if (node instanceof window.Text) {
     if (node.textContent !== next.props.value)
       node.textContent = next.props.value as string
   }
@@ -93,7 +102,8 @@ export const setStyleProp = (
   style: null | Record<keyof CSSStyleDeclaration, string | number>,
   prevStyle: null | Record<keyof CSSStyleDeclaration, string | number>,
 ) => {
-  setPropObject(node as any, style, prevStyle)
+  setPropObject(node as any, style, prevStyle, (name, value) =>
+    (node.setProperty(name, value as string), true))
 }
 
 const setPropObject = (

package/render.ts

@@ -1,12 +1,32 @@
-import { h } from "@lukekaalim/act";
+import { createId, h } from "@lukekaalim/act";
 import { createWebSpace, HTML } from "./space";
-import { createRenderFunction, RenderFunction, Scheduler } from "@lukekaalim/act-backstage";
+import { createRenderFunction, RenderFunction } from "@lukekaalim/act-backstage";
+import { Scheduler } from "@lukekaalim/act-recon";
 
-const intervalScheduler: Scheduler<NodeJS.Timeout> = {
-  duration: 10,
-  request: func => setInterval(func, 10),
-  cancel: id => clearInterval(id),
+export const createDOMScheduler = (): Scheduler => {
+  const workMap = new Map();
+  let id: number | null = null;
+  const work = () => {
+    id = null;
+    for (const [,callback] of workMap)
+      callback();
+
+    workMap.clear();
+  };
+  return {
+    requestWork(callback) {
+      const workId = createId<'WorkID'>();
+      workMap.set(workId, callback);
+      if (!id)
+        id = setTimeout(work, 1) as any;
+      return workId;
+    },
+    cancelWork(workId) {
+      workMap.delete(workId);
+    },
+  }
 }
 
+
 export const render: RenderFunction<HTMLElement> = (node, root) => 
-  createRenderFunction(intervalScheduler, createWebSpace)(h(HTML, {}, node), root);
+  createRenderFunction(createDOMScheduler(), createWebSpace)(h(HTML, {}, node), root);

package/space.ts

@@ -8,7 +8,13 @@ import { setProps } from './props.ts';
 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);
 
-export const createWebSpace = (tree: recon.CommitTree, root: HTMLElement, document: Document = window.document) => {
+const defaultWindow = window;
+
+export const createWebSpace = (
+  tree: recon.CommitTree,
+  root: HTMLElement,
+  window: Window = defaultWindow
+) => {
   return createSimpleRenderSpace(tree, {
     rootTypes: new Set(['web:html', 'web:svg']),
     create(element, rootType) {
@@ -19,7 +25,7 @@ export const createWebSpace = (tree: recon.CommitTree, root: HTMLElement, docume
           switch (tag) {
             case act.primitiveNodeTypes.string:
             case act.primitiveNodeTypes.number:
-              return document.createTextNode("");
+              return window.document.createTextNode("<empty text>");
             default:
               return null;
           }
@@ -27,9 +33,9 @@ export const createWebSpace = (tree: recon.CommitTree, root: HTMLElement, docume
         case 'string': {
           switch (rootType) {
             case 'web:html':
-              return document.createElementNS('http://www.w3.org/1999/xhtml', tag);
+              return window.document.createElementNS('http://www.w3.org/1999/xhtml', tag);
             case 'web:svg':
-              return document.createElementNS('http://www.w3.org/2000/svg', tag);
+              return window.document.createElementNS('http://www.w3.org/2000/svg', tag);
           }
         }
         default:
@@ -37,7 +43,7 @@ export const createWebSpace = (tree: recon.CommitTree, root: HTMLElement, docume
       }
     },
     update(el, next, prev) {
-      setProps(el, next, prev);
+      setProps(window, el, next, prev);
     },
     link(el, parent) {
       (parent || root).appendChild(el);

package/tags.ts

@@ -6,7 +6,7 @@ export const htmlTagNames = new Set([
   "h1", "h2", "h3", "h4", "h5", "h6",
   "hl",
   'p',
-  "ol", "ul", "li",
+  "ol", "ul", "li", "menu",
   "table", 'td', 'tr', 'th',
   "pre",