ryansolid · mdynnl · Dec 8, 2024 · Dec 8, 2024
diff --git a/apps/playground/index.html b/apps/playground/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Solid Playground</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>
diff --git a/apps/playground/package.json b/apps/playground/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "playground",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "dom-expressions": "workspace:*",
+    "s-js": "0.4.9"
+  },
+  "devDependencies": {
+    "babel-plugin-jsx-dom-expressions": "workspace:*",
+    "vite": "^5.4.10",
+    "vite-plugin-solid": "^2.10.2"
+  }
+}
diff --git a/apps/playground/src/dom.js b/apps/playground/src/dom.js
@@ -0,0 +1 @@
+export * from "dom-expressions/src/client.js";
diff --git a/apps/playground/src/index.jsx b/apps/playground/src/index.jsx
@@ -0,0 +1,24 @@
+import { render } from "./dom.js";
+import * as s from "./rxcore.js";
+
+const count = s.value(0);
+const increment = () => count(count() + 1);
+const s0 = () => (count() % 2 ? "ok" : [1, 2]);
+
+render(function App() {
+  return (
+    <>
+      <button type="button" onClick={increment}>
+        {s0()}
+      </button>
+      <pre
+        ref={ref => {
+          ref.prepend("x");
+          queueMicrotask(() => ref.append("y"));
+        }}
+      >
+        {s0()}
+      </pre>
+    </>
+  );
+}, document.getElementById("root"));
diff --git a/apps/playground/src/rxcore.js b/apps/playground/src/rxcore.js
@@ -0,0 +1,96 @@
+import S from "s-js";
+const { root, value, sample } = S;
+export { value, sample };
+
+const getOwner = null;
+const sharedConfig = {
+  getNextContextId() {
+    return this.context.id + this.context.count++;
+  }
+};
+
+function memo(fn) {
+  const s = value(sample(fn));
+  S(() => s(fn()));
+  return s;
+}
+
+function createComponent(Comp, props) {
+  if (Comp.prototype && Comp.prototype.isClassComponent) {
+    return sample(() => {
+      const comp = new Comp(props);
+      return comp.render(props);
+    });
+  }
+  return sample(() => Comp(props));
+}
+
+const propTraps = {
+  get(_, property) {
+    return _.get(property);
+  },
+  has(_, property) {
+    return _.has(property);
+  },
+  set: trueFn,
+  deleteProperty: trueFn,
+  getOwnPropertyDescriptor(_, property) {
+    return {
+      configurable: true,
+      enumerable: true,
+      get() {
+        return _.get(property);
+      },
+      set: trueFn,
+      deleteProperty: trueFn
+    };
+  },
+  ownKeys(_) {
+    return _.keys();
+  }
+};
+
+function trueFn() {
+  return true;
+}
+
+function resolveSource(s) {
+  return (s = typeof s === "function" ? s() : s) == null ? {} : s;
+}
+
+function mergeProps(...sources) {
+  return new Proxy(
+    {
+      get(property) {
+        for (let i = sources.length - 1; i >= 0; i--) {
+          const v = resolveSource(sources[i])[property];
+          if (v !== undefined) return v;
+        }
+      },
+      has(property) {
+        for (let i = sources.length - 1; i >= 0; i--) {
+          if (property in resolveSource(sources[i])) return true;
+        }
+        return false;
+      },
+      keys() {
+        const keys = [];
+        for (let i = 0; i < sources.length; i++)
+          keys.push(...Object.keys(resolveSource(sources[i])));
+        return [...new Set(keys)];
+      }
+    },
+    propTraps
+  );
+}
+
+export {
+  root,
+  S as effect,
+  memo,
+  createComponent,
+  getOwner,
+  sharedConfig,
+  sample as untrack,
+  mergeProps
+};
diff --git a/apps/playground/vite.config.js b/apps/playground/vite.config.js
@@ -0,0 +1,42 @@
+import { defineConfig } from "vite";
+import { transformAsync } from "@babel/core";
+import dom from "babel-plugin-jsx-dom-expressions";
+export default defineConfig({
+  plugins: [
+    {
+      async transform(code, id) {
+        if (!/.[tj]sx$/.test(id)) return;
+        const result = await transformAsync(code, {
+          plugins: [
+            [
+              dom,
+              {
+                moduleName: "./dom",
+                generate: "dom",
+                hydratable: false,
+                delegateEvents: true,
+                delegatedEvents: [],
+                builtIns: [],
+                requireImportSource: false,
+                wrapConditionals: true,
+                omitNestedClosingTags: false,
+                contextToCustomElements: false,
+                staticMarker: "@once",
+                effectWrapper: "effect",
+                memoWrapper: "memo",
+                validate: true
+              }
+            ]
+          ]
+        });
+        return result.code;
+      }
+    }
+  ],
+  esbuild: { jsx: "preserve" },
+  resolve: {
+    alias: {
+      rxcore: "/src/rxcore.js"
+    }
+  }
+});
diff --git a/packages/dom-expressions/src/client.js b/packages/dom-expressions/src/client.js
@@ -475,13 +475,26 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
       } else node = document.createTextNode(value);
       current = cleanChildren(parent, current, marker, node);
     } else {
-      if (current !== "" && typeof current === "string") {
-        current = parent.firstChild.data = value;
-      } else current = parent.textContent = value;
+      if (current && Array.isArray(current) && current.length) {
+        for (let i = current.length - 1; i--;) current[i].remove();
+        current = current[0];
+      }
+      if (current && current.nodeType === 3) {
+        current.data !== value && (current.data = value)
+      } else {
+        current && current.remove();
+        current = document.createTextNode(value);
+        parent.appendChild(current);
+      }
     }
   } else if (value == null || t === "boolean") {
     if (hydrating) return current;
-    current = cleanChildren(parent, current, marker);
+    if (multi) {
+      current = cleanChildren(parent, current, marker);
+    } else {
+      current && current.remove()
+      current = value
+    }
   } else if (t === "function") {
     effect(() => {
       let v = value();
@@ -513,8 +526,8 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
         appendNodes(parent, array, marker);
       } else reconcileArrays(parent, current, array);
     } else {
-      current && cleanChildren(parent);
-      appendNodes(parent, array);
+      appendNodes(parent, array, current);
+      current && current.remove();
     }
     current = array;
   } else if (value.nodeType) {
@@ -524,7 +537,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
       cleanChildren(parent, current, null, value);
     } else if (current == null || current === "" || !parent.firstChild) {
       parent.appendChild(value);
-    } else parent.replaceChild(value, parent.firstChild);
+    } else parent.replaceChild(value, current);
     current = value;
   } else if ("_DX_DEV_") console.warn(`Unrecognized value. Skipped inserting`, value);