@solidjs/universal 2.0.0-experimental.14 → 2.0.0-experimental.16

package/dist/dev.cjs

@@ -2,6 +2,9 @@
 
 var solidJs = require('solid-js');
 
+const effect = (fn, effectFn, initial) => solidJs.createRenderEffect(fn, effectFn, initial, {
+  transparent: true
+});
 const memo = fn => solidJs.createMemo(() => fn());
 
 function createRenderer({
@@ -23,7 +26,7 @@ function createRenderer({
       accessor = normalize(accessor, multi, true);
       if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
     }
-    solidJs.createRenderEffect(() => normalize(accessor, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
+    effect(() => normalize(accessor, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
   }
   function insertExpression(parent, value, current, marker) {
     if (value === current) return;
@@ -71,7 +74,7 @@ function createRenderer({
       for (let i = 0, len = value.length; i < len; i++) {
         const item = value[i],
           t = typeof item;
-        if (t === "string" || t === "number") value[i] = document.createTextNode(item);
+        if (t === "string" || t === "number") value[i] = createTextNode(item);
       }
     }
     return value;
@@ -161,13 +164,16 @@ function createRenderer({
     const prevProps = {};
     props || (props = {});
     if (!skipChildren) {
-      solidJs.createRenderEffect(() => normalize(props.children), value => {
+      effect(() => normalize(props.children), value => {
         insertExpression(node, value, prevProps.children);
         prevProps.children = value;
       });
     }
-    solidJs.createRenderEffect(() => props.ref && props.ref(node), () => {});
-    solidJs.createRenderEffect(() => {
+    effect(() => {
+      const r = props.ref;
+      (typeof r === "function" || Array.isArray(r)) && ref(() => r, node);
+    }, () => {});
+    effect(() => {
       const newProps = {};
       for (const prop in props) {
         if (prop === "children" || prop === "ref") continue;
@@ -185,6 +191,13 @@ function createRenderer({
     });
     return prevProps;
   }
+  function applyRef(r, element) {
+    Array.isArray(r) ? r.flat(Infinity).forEach(f => f && f(element)) : r(element);
+  }
+  function ref(fn, element) {
+    const resolved = solidJs.untrack(fn);
+    solidJs.runWithOwner(null, () => applyRef(resolved, element));
+  }
   return {
     render(code, element) {
       let disposer;
@@ -204,12 +217,11 @@ function createRenderer({
       return value;
     },
     mergeProps: solidJs.merge,
-    effect: solidJs.createRenderEffect,
+    effect,
     memo,
     createComponent: solidJs.createComponent,
-    use(fn, element, arg) {
-      return solidJs.untrack(() => fn(element, arg));
-    }
+    applyRef,
+    ref
   };
 }
 

package/dist/dev.js

@@ -1,5 +1,8 @@
-import { createMemo, createRoot, merge, createRenderEffect, createComponent, untrack, flatten } from 'solid-js';
+import { createMemo, createRenderEffect, createComponent, merge, createRoot, flatten, untrack, runWithOwner } from 'solid-js';
 
+const effect = (fn, effectFn, initial) => createRenderEffect(fn, effectFn, initial, {
+  transparent: true
+});
 const memo = fn => createMemo(() => fn());
 
 function createRenderer({
@@ -21,7 +24,7 @@ function createRenderer({
       accessor = normalize(accessor, multi, true);
       if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
     }
-    createRenderEffect(() => normalize(accessor, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
+    effect(() => normalize(accessor, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
   }
   function insertExpression(parent, value, current, marker) {
     if (value === current) return;
@@ -69,7 +72,7 @@ function createRenderer({
       for (let i = 0, len = value.length; i < len; i++) {
         const item = value[i],
           t = typeof item;
-        if (t === "string" || t === "number") value[i] = document.createTextNode(item);
+        if (t === "string" || t === "number") value[i] = createTextNode(item);
       }
     }
     return value;
@@ -159,13 +162,16 @@ function createRenderer({
     const prevProps = {};
     props || (props = {});
     if (!skipChildren) {
-      createRenderEffect(() => normalize(props.children), value => {
+      effect(() => normalize(props.children), value => {
         insertExpression(node, value, prevProps.children);
         prevProps.children = value;
       });
     }
-    createRenderEffect(() => props.ref && props.ref(node), () => {});
-    createRenderEffect(() => {
+    effect(() => {
+      const r = props.ref;
+      (typeof r === "function" || Array.isArray(r)) && ref(() => r, node);
+    }, () => {});
+    effect(() => {
       const newProps = {};
       for (const prop in props) {
         if (prop === "children" || prop === "ref") continue;
@@ -183,6 +189,13 @@ function createRenderer({
     });
     return prevProps;
   }
+  function applyRef(r, element) {
+    Array.isArray(r) ? r.flat(Infinity).forEach(f => f && f(element)) : r(element);
+  }
+  function ref(fn, element) {
+    const resolved = untrack(fn);
+    runWithOwner(null, () => applyRef(resolved, element));
+  }
   return {
     render(code, element) {
       let disposer;
@@ -202,12 +215,11 @@ function createRenderer({
       return value;
     },
     mergeProps: merge,
-    effect: createRenderEffect,
+    effect,
     memo,
     createComponent,
-    use(fn, element, arg) {
-      return untrack(() => fn(element, arg));
-    }
+    applyRef,
+    ref
   };
 }
 

package/dist/universal.cjs

@@ -2,6 +2,9 @@
 
 var solidJs = require('solid-js');
 
+const effect = (fn, effectFn, initial) => solidJs.createRenderEffect(fn, effectFn, initial, {
+  transparent: true
+});
 const memo = fn => solidJs.createMemo(() => fn());
 
 function createRenderer({
@@ -23,7 +26,7 @@ function createRenderer({
       accessor = normalize(accessor, multi, true);
       if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
     }
-    solidJs.createRenderEffect(() => normalize(accessor, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
+    effect(() => normalize(accessor, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
   }
   function insertExpression(parent, value, current, marker) {
     if (value === current) return;
@@ -71,7 +74,7 @@ function createRenderer({
       for (let i = 0, len = value.length; i < len; i++) {
         const item = value[i],
           t = typeof item;
-        if (t === "string" || t === "number") value[i] = document.createTextNode(item);
+        if (t === "string" || t === "number") value[i] = createTextNode(item);
       }
     }
     return value;
@@ -161,13 +164,16 @@ function createRenderer({
     const prevProps = {};
     props || (props = {});
     if (!skipChildren) {
-      solidJs.createRenderEffect(() => normalize(props.children), value => {
+      effect(() => normalize(props.children), value => {
         insertExpression(node, value, prevProps.children);
         prevProps.children = value;
       });
     }
-    solidJs.createRenderEffect(() => props.ref && props.ref(node), () => {});
-    solidJs.createRenderEffect(() => {
+    effect(() => {
+      const r = props.ref;
+      (typeof r === "function" || Array.isArray(r)) && ref(() => r, node);
+    }, () => {});
+    effect(() => {
       const newProps = {};
       for (const prop in props) {
         if (prop === "children" || prop === "ref") continue;
@@ -185,6 +191,13 @@ function createRenderer({
     });
     return prevProps;
   }
+  function applyRef(r, element) {
+    Array.isArray(r) ? r.flat(Infinity).forEach(f => f && f(element)) : r(element);
+  }
+  function ref(fn, element) {
+    const resolved = solidJs.untrack(fn);
+    solidJs.runWithOwner(null, () => applyRef(resolved, element));
+  }
   return {
     render(code, element) {
       let disposer;
@@ -204,12 +217,11 @@ function createRenderer({
       return value;
     },
     mergeProps: solidJs.merge,
-    effect: solidJs.createRenderEffect,
+    effect,
     memo,
     createComponent: solidJs.createComponent,
-    use(fn, element, arg) {
-      return solidJs.untrack(() => fn(element, arg));
-    }
+    applyRef,
+    ref
   };
 }
 

package/dist/universal.js

@@ -1,5 +1,8 @@
-import { createMemo, createRoot, merge, createRenderEffect, createComponent, untrack, flatten } from 'solid-js';
+import { createMemo, createRenderEffect, createComponent, merge, createRoot, flatten, untrack, runWithOwner } from 'solid-js';
 
+const effect = (fn, effectFn, initial) => createRenderEffect(fn, effectFn, initial, {
+  transparent: true
+});
 const memo = fn => createMemo(() => fn());
 
 function createRenderer({
@@ -21,7 +24,7 @@ function createRenderer({
       accessor = normalize(accessor, multi, true);
       if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
     }
-    createRenderEffect(() => normalize(accessor, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
+    effect(() => normalize(accessor, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
   }
   function insertExpression(parent, value, current, marker) {
     if (value === current) return;
@@ -69,7 +72,7 @@ function createRenderer({
       for (let i = 0, len = value.length; i < len; i++) {
         const item = value[i],
           t = typeof item;
-        if (t === "string" || t === "number") value[i] = document.createTextNode(item);
+        if (t === "string" || t === "number") value[i] = createTextNode(item);
       }
     }
     return value;
@@ -159,13 +162,16 @@ function createRenderer({
     const prevProps = {};
     props || (props = {});
     if (!skipChildren) {
-      createRenderEffect(() => normalize(props.children), value => {
+      effect(() => normalize(props.children), value => {
         insertExpression(node, value, prevProps.children);
         prevProps.children = value;
       });
     }
-    createRenderEffect(() => props.ref && props.ref(node), () => {});
-    createRenderEffect(() => {
+    effect(() => {
+      const r = props.ref;
+      (typeof r === "function" || Array.isArray(r)) && ref(() => r, node);
+    }, () => {});
+    effect(() => {
       const newProps = {};
       for (const prop in props) {
         if (prop === "children" || prop === "ref") continue;
@@ -183,6 +189,13 @@ function createRenderer({
     });
     return prevProps;
   }
+  function applyRef(r, element) {
+    Array.isArray(r) ? r.flat(Infinity).forEach(f => f && f(element)) : r(element);
+  }
+  function ref(fn, element) {
+    const resolved = untrack(fn);
+    runWithOwner(null, () => applyRef(resolved, element));
+  }
   return {
     render(code, element) {
       let disposer;
@@ -202,12 +215,11 @@ function createRenderer({
       return value;
     },
     mergeProps: merge,
-    effect: createRenderEffect,
+    effect,
     memo,
     createComponent,
-    use(fn, element, arg) {
-      return untrack(() => fn(element, arg));
-    }
+    applyRef,
+    ref
   };
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solidjs/universal",
   "description": "Solid's universal runtime for creating custom renderers",
-  "version": "2.0.0-experimental.14",
+  "version": "2.0.0-experimental.16",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -37,10 +37,10 @@
     "./types/*": "./types/*"
   },
   "peerDependencies": {
-    "solid-js": "^2.0.0-experimental.14"
+    "solid-js": "^2.0.0-experimental.16"
   },
   "devDependencies": {
-    "solid-js": "2.0.0-experimental.14"
+    "solid-js": "2.0.0-experimental.16"
   },
   "scripts": {
     "build": "npm-run-all -nl build:*",

package/types/index.d.ts

@@ -0,0 +1,30 @@
+export interface RendererOptions<NodeType> {
+  createElement(tag: string): NodeType;
+  createTextNode(value: string): NodeType;
+  replaceText(textNode: NodeType, value: string): void;
+  isTextNode(node: NodeType): boolean;
+  setProperty<T>(node: NodeType, name: string, value: T, prev?: T): void;
+  insertNode(parent: NodeType, node: NodeType, anchor?: NodeType): void;
+  removeNode(parent: NodeType, node: NodeType): void;
+  getParentNode(node: NodeType): NodeType | undefined;
+  getFirstChild(node: NodeType): NodeType | undefined;
+  getNextSibling(node: NodeType): NodeType | undefined;
+}
+
+export interface Renderer<NodeType> {
+  render(code: () => NodeType, node: NodeType): () => void;
+  effect<T>(fn: (prev?: T) => T, effect: (value: T, prev?: T) => void, init?: T): void;
+  memo<T>(fn: () => T, equal: boolean): () => T;
+  createComponent<T>(Comp: (props: T) => NodeType, props: T): NodeType;
+  createElement(tag: string): NodeType;
+  createTextNode(value: string): NodeType;
+  insertNode(parent: NodeType, node: NodeType, anchor?: NodeType): void;
+  insert<T>(parent: any, accessor: (() => T) | T, marker?: any | null, initial?: any): NodeType;
+  spread<T>(node: any, accessor: (() => T) | T, skipChildren?: boolean): void;
+  setProp<T>(node: NodeType, name: string, value: T, prev?: T): T;
+  mergeProps(...sources: unknown[]): unknown;
+  use<A, T>(fn: (element: NodeType, arg: A) => T, element: NodeType, arg: A): T;
+}
+
+export function createRenderer<NodeType>(options: RendererOptions<NodeType>): Renderer<NodeType>;
+