@lukekaalim/act-web 5.1.1 → 6.0.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @lukekaalim/act-web
 
+## 6.0.0
+
+### Major Changes
+
+- 2ed02cf: Breaking! Change how useRef works, no longer compatible with React-style.
+
+  New API has `.get` and `.set` properties in order to better type ReadOnlyRef and WriteOnlyRef.
+
+  Add primitive registry to web, remove old element API and replace with "html" and "svg" element maps
+
+### Patch Changes
+
+- Updated dependencies [2ed02cf]
+  - @lukekaalim/act@5.0.0
+  - @lukekaalim/act-recon@4.0.1
+  - @lukekaalim/act-backstage@3.2.1
+
+## 5.2.0
+
+### Minor Changes
+
+- bf3138f: Added PrimitiveRegistry for dynamically adding more elements to act-three, implemented in backstage
+
+### Patch Changes
+
+- Updated dependencies [bf3138f]
+  - @lukekaalim/act-backstage@3.2.0
+  - @lukekaalim/act@4.3.0
+
 ## 5.1.1
 
 ### Patch Changes

package/element.ts

@@ -1,5 +1,139 @@
 import * as act from '@lukekaalim/act';
-import { HTMLTagName } from "./tags";
+import { createPrimitiveRegistry } from '@lukekaalim/act-backstage';
+import { Object } from 'ts-toolbelt';
+
+export interface ExtendedHTMLPrimitives {}
+export interface ExtendedSVGPrimitives {}
+
+type HTMLClasses = {
+  div: HTMLDivElement,
+  span: HTMLSpanElement,
+  main: HTMLElement,
+  article: HTMLElement,
+  section: HTMLElement,
+  p: HTMLParagraphElement,
+  i: HTMLElement,
+  strong: HTMLElement,
+  title: HTMLTitleElement,
+
+  body: HTMLBodyElement,
+  head: HTMLHeadElement,
+  meta: HTMLMetaElement,
+
+  ol: HTMLOListElement,
+  li: HTMLLIElement,
+  ul: HTMLUListElement,
+  menu: HTMLMenuElement,
+  nav: HTMLOListElement,
+
+  form: HTMLFormElement,
+  input: HTMLInputElement,
+  label: HTMLLabelElement,
+  button: HTMLButtonElement,
+  meter: HTMLMeterElement,
+  select: HTMLSelectElement,
+  options: HTMLOptionElement,
+  progress: HTMLProgressElement,
+  time: HTMLTimeElement,
+
+  table: HTMLTableElement,
+  tbody: HTMLTableSectionElement,
+  thead: HTMLTableSectionElement,
+  tfoot: HTMLTableSectionElement,
+  tr: HTMLTableRowElement,
+  th: HTMLTableCellElement,
+  td: HTMLTableCellElement,
+
+  a: HTMLAnchorElement,
+
+  map: HTMLMapElement,
+
+  audio: HTMLAudioElement,
+  video: HTMLVideoElement,
+  image: HTMLImageElement,
+  canvas: HTMLCanvasElement,
+  iframe: HTMLIFrameElement,
+  source: HTMLSourceElement,
+};
+type SVGClasses = {
+  svg: SVGSVGElement,
+  rect: SVGRectElement,
+  line: SVGLineElement,
+  path: SVGPathElement,
+  text: SVGTextElement,
+  g: SVGGElement,
+}
+type BuiltinHTMLPrimitives = { [Key in keyof HTMLClasses]: PropsFromClass<HTMLClasses[Key]> } & {
+  [act.primitiveNodeTypes.string]: { value: string },
+  [act.primitiveNodeTypes.number]: { value: number },
+  [act.primitiveNodeTypes.boolean]: { value: boolean },
+}
+type BuiltinSVGPrimitives = { [Key in keyof SVGClasses]: PropsFromClass<SVGClasses[Key]> } & {
+
+}
+
+type AllHTMLPrimitives = BuiltinHTMLPrimitives & ExtendedHTMLPrimitives;
+type AllSVGPrimitives = BuiltinSVGPrimitives & ExtendedSVGPrimitives;
+
+
+type HTMLElementProps<T extends HTMLElement> = {
+  style?: { [key in keyof CSSStyleDeclaration]?: CSSStyleDeclaration[key] } & { [key in string]?: string },
+  classList?: readonly (string | false | null | void)[],
+  className?: string | false | null | void,
+  attributes?: Record<string, string>,
+};
+type SVGElementProps<T extends SVGElement> = {
+  style?: { [key in keyof CSSStyleDeclaration]?: CSSStyleDeclaration[key] } & { [key in string]?: string },
+  classList?: readonly (string | false | null | void)[],
+  attributes?: Record<string, string>,
+};
+
+type WritableProps<T extends {}> = {
+  [
+    Key
+      in Exclude<Object.WritableKeys<T>, 'style' | 'classList'>
+      as (T[Key] extends string | number | boolean ? Key : never)
+  ]?: T[Key]
+};
+type EventHandlers<T> = {
+  [Key in keyof EventMap]?: (this: T, event: GlobalEventHandlersEventMap[EventMap[Key]] & { currentTarget: T }) => unknown
+}
+
+
+export type PropsFromClass<T extends HTMLElement | SVGElement | Text> = {
+  ref?: act.WriteOnlyRef<T>,
+}
+  & (T extends HTMLElement ? HTMLElementProps<T> : {})
+  & (T extends SVGElement ? SVGElementProps<T> : {})
+  & WritableProps<T>
+  & EventHandlers<T>
+
+export const htmlRegistry = createPrimitiveRegistry<AllHTMLPrimitives, HTMLElement | Text>()
+  .registerUnhandledPrimitives([
+    'a', 'audio', 'article',
+    'body', 'button',
+    'canvas',
+    'div', 'form',
+    'head',
+    'i', 'iframe', 'image',
+    'label', 'li', 'main',
+    'map', 'menu', 'meta', 'meter',
+    'nav',
+    'ol', 'options',
+    'p', 'progress',
+    'section', 'select', 'source', 'span', 'strong',
+    'title', 'time', 'table', 'tbody', 'thead', 'tfoot', 'tr', 'th', 'td',
+    'ul',
+    'video',
+  ]);
+
+export const svgRegistry = createPrimitiveRegistry<AllSVGPrimitives, SVGElement>()
+  .registerUnhandledPrimitives([
+    'g', 'line', 'path', 'rect', 'svg', 'text'
+  ]);
+
+export const html = htmlRegistry.elements;
+export const svg = svgRegistry.elements;
 
 type EventMap = {
   onClick: "click",
@@ -21,35 +155,3 @@ type EventMap = {
   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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukekaalim/act-web",
-  "version": "5.1.1",
+  "version": "6.0.0",
   "type": "module",
   "main": "mod.ts",
   "exports": {
@@ -8,13 +8,14 @@
     "./node": "./nodejs/index.ts"
   },
   "dependencies": {
-    "@lukekaalim/act": "^4.2.0",
-    "@lukekaalim/act-backstage": "^3.1.1",
-    "@lukekaalim/act-recon": "^4.0.0",
+    "@lukekaalim/act": "^5.0.0",
+    "@lukekaalim/act-backstage": "^3.2.1",
+    "@lukekaalim/act-recon": "^4.0.1",
     "@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"
+    "rehype-stringify": "^10.0.1",
+    "ts-toolbelt": "^9.6.0"
   }
 }

package/props.ts

@@ -1,4 +1,5 @@
 import * as act from '@lukekaalim/act';
+import { String } from 'ts-toolbelt';
 
 declare global {
   interface Window {

package/rehydrate.ts

@@ -2,7 +2,6 @@ import { createId, Element, ElementType, h, primitiveNodeTypes, specialNodeTypes
 import { Commit2, CommitID, CommitRef2, Reconciler2 } from "@lukekaalim/act-recon";
 import { deserializeSSRPayload, RehydratableComponent, SSRContext, SSRPayload, ssrStringToSymbolMap } from "./ssr";
 import { RenderSpace2 } from "@lukekaalim/act-backstage";
-import { recon } from "../three/deps";
 
 
 export const rehydrate = (

package/space.ts

@@ -2,6 +2,7 @@ import * as act from '@lukekaalim/act';
 
 import { setProps } from './props.ts';
 import { NodeBuilder } from '@lukekaalim/act-backstage';
+import { htmlRegistry, svgRegistry } from './element.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);
@@ -29,10 +30,18 @@ export const createWebNodeBuilder = (
       }
       case 'string': {
         switch (rootType) {
-          case 'web:html':
+          case 'web:html': {
+            const prim = htmlRegistry.create(element);
+            if (prim)
+              return prim;
             return window.document.createElementNS('http://www.w3.org/1999/xhtml', tag);
-          case 'web:svg':
+          }
+          case 'web:svg': {
+            const prim = svgRegistry.create(element);
+            if (prim)
+              return prim;
             return window.document.createElementNS('http://www.w3.org/2000/svg', tag);
+          }
         }
       }
       default:

package/ssr.ts

@@ -162,10 +162,10 @@ export const ssr = {
     }, deps)
 
     useEffect(() => {
-      if (!firstRun.current || ssrData.mode === 'server')
+      if (!firstRun.get() || ssrData.mode === 'server')
         return effect();
 
-      firstRun.current = false;
+      firstRun.set(false);
 
       // for the very first run on a client, check against
       // the server props to see if we need to re-render

package/tags.ts

@@ -1,31 +0,0 @@
-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", "menu",
-  "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>;