Fix Preact package signal integration

.changeset/strong-shoes-drive.md

@@ -0,0 +1,5 @@
+---
+'@watching/clips-preact': patch
+---
+
+Fix Preact package signal integration

packages/clips-preact/configuration/rollup.config.js

@@ -20,19 +20,24 @@ export default quiltPackage({
           const {code: minifiedCode} = await minify(code, {
             nameCache,
             mangle: {
+              reserved: ['useSignal', 'useComputed', 'useSignalEffect'],
+              keep_classnames: true,
               properties: {
                 regex: '^_[^_]',
                 reserved: [
                   '__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED',
                   '__REACT_DEVTOOLS_GLOBAL_HOOK__',
                   '__PREACT_DEVTOOLS__',
                   '_renderers',
-                  '__source',
-                  '__self',
+                  '_',
                 ],
               },
             },
-            compress: false,
+            compress: {
+              conditionals: false,
+              loops: false,
+              sequences: false,
+            },
             ecma: 2017,
             toplevel: true,
             module: true,

packages/clips-preact/configuration/terser/name-cache.json

@@ -2,57 +2,40 @@
   "props": {
     "cname": 6,
     "props": {
-      "$_vnodeId": "__v",
-      "$_cleanup": "__c",
-      "$_afterPaintQueued": "__a",
-      "$__hooks": "__H",
-      "$_list": "__",
-      "$_pendingEffects": "__h",
-      "$_value": "__",
-      "$_original": "__v",
-      "$_args": "__H",
-      "$_factory": "__h",
-      "$_depth": "__b",
-      "$_nextDom": "__d",
-      "$_dirty": "__d",
-      "$_detachOnNextRender": "__b",
-      "$_force": "__e",
-      "$_nextState": "__s",
-      "$_renderCallbacks": "__h",
-      "$_vnode": "__v",
-      "$_children": "__k",
-      "$_pendingSuspensionCount": "__u",
-      "$_childDidSuspend": "__c",
-      "$_suspendedComponentWillUnmount": "__c",
-      "$_suspended": "__e",
-      "$_dom": "__e",
-      "$_hydrating": "__h",
-      "$_component": "__c",
-      "$__html": "__html",
-      "$_parent": "__",
-      "$_pendingError": "__E",
-      "$_processingException": "__",
-      "$_globalContext": "__n",
-      "$_context": "__c",
-      "$_defaultValue": "__",
-      "$_id": "__c",
-      "$_contextRef": "__",
-      "$_parentDom": "__P",
-      "$_originalParentDom": "__O",
-      "$_prevState": "__u",
-      "$_root": "__",
-      "$_diff": "__b",
-      "$_commit": "__c",
-      "$_addHookName": "__a",
-      "$_render": "__r",
-      "$_hook": "__h",
-      "$_catchError": "__e",
-      "$_unmount": "__u",
-      "$_owner": "__o",
-      "$_skipEffects": "__s",
-      "$_rerenderCount": "__r",
-      "$_forwarded": "__f",
-      "$_isSuspended": "__i"
+      "core: Node": "",
+      "$_source": "S",
+      "$_prevSource": "p",
+      "$_nextSource": "n",
+      "$_target": "t",
+      "$_prevTarget": "e",
+      "$_nextTarget": "x",
+      "$_rollbackNode": "r",
+      "core: Signal": "",
+      "$_refresh": "h",
+      "$_value": "v",
+      "$_node": "n",
+      "$_targets": "t",
+      "core: Computed": "",
+      "$_compute": "x",
+      "$_globalVersion": "g",
+      "core: Effect": "",
+      "$_callback": "c",
+      "$_nextEffect": "e",
+      "$_start": "S",
+      "$_dispose": "d",
+      "core: Computed+Effect": "",
+      "$_sources": "s",
+      "$_notify": "N",
+      "core: Signal+Node+Computed+Effect": "",
+      "$_flags": "f",
+      "$_version": "i",
+      "$_subscribe": "S",
+      "$_unsubscribe": "U",
+      "preact": "",
+      "$_signal": "s",
+      "$_updater": "__$u",
+      "$_updateFlags": "__$f",
+      "$_updaters": "U"
     }
   }
 }

packages/clips-preact/source/signals/signals.ts

@@ -1,4 +1,4 @@
-import {options, Component} from 'preact';
+import {options, Component, isValidElement} from 'preact';
 import {useRef, useMemo, useEffect} from 'preact/hooks';
 import {
   signal,
@@ -79,8 +79,8 @@ export function installHooks() {
   hasInstalledHooks = true;
 
   Object.defineProperties(Signal.prototype, {
-    constructor: {configurable: true},
-    type: {configurable: true, value: Text},
+    constructor: {configurable: true, value: undefined},
+    type: {configurable: true, value: SignalValue},
     props: {
       configurable: true,
       get() {
@@ -161,7 +161,7 @@ export function installHooks() {
   //       if (value instanceof Signal) {
   //         if (!signalProps) vnode.__np = signalProps = {};
   //         signalProps[i] = value;
-  //         // props[i] = value.peek();
+  //         props[i] = value.peek();
   //       }
   //     }
   //   }
@@ -246,18 +246,20 @@ export function installHooks() {
   /** Unsubscribe from Signals when unmounting components/vnodes */
   hook(OptionsTypes.UNMOUNT, (old, vnode: VNode) => {
     if (typeof vnode.type === 'string') {
-      // let dom = vnode.__e as Element | undefined;
-      // // vnode._dom is undefined during string rendering
-      // if (dom) {
-      //   const updaters = dom._updaters;
-      //   if (updaters) {
-      //     dom._updaters = undefined;
-      //     for (let prop in updaters) {
-      //       let updater = updaters[prop];
-      //       if (updater) updater._dispose();
-      //     }
-      //   }
-      // }
+      let dom = vnode.__e as
+        | (Element & {_updaters?: Record<string, Effect>})
+        | undefined;
+      // vnode._dom is undefined during string rendering
+      if (dom) {
+        const updaters = dom._updaters;
+        if (updaters) {
+          dom._updaters = undefined;
+          for (let prop in updaters) {
+            let updater = updaters[prop];
+            if (updater) updater._dispose();
+          }
+        }
+      }
     } else {
       let component = vnode.__c;
       if (component) {
@@ -273,7 +275,7 @@ export function installHooks() {
 
   /** Mark components that use hook state so we can skip sCU optimization. */
   hook(OptionsTypes.HOOK, (old, component, index, type) => {
-    if (type < 3)
+    if (type < 3 || type === 9)
       (component as AugmentedComponent)._updateFlags |= HAS_HOOK_STATE;
     old(component, index, type);
   });
@@ -418,7 +420,7 @@ export function update<T extends SignalOrReactive>(
  * A wrapper component that renders a Signal directly as a Text node.
  * @todo: in Preact 11, just decorate Signal with `type:null`
  */
-function Text(this: AugmentedComponent, {data}: {data: Signal}) {
+function SignalValue(this: AugmentedComponent, {data}: {data: Signal}) {
   // hasComputeds.add(this);
 
   // Store the props.data signal in another signal so that
@@ -436,8 +438,13 @@ function Text(this: AugmentedComponent, {data}: {data: Signal}) {
       }
     }
 
-    // Replace this component's vdom updater with a direct text one:
     this._updater!._callback = () => {
+      if (isValidElement(s.peek()) || this.base?.nodeType !== 3) {
+        this._updateFlags |= HAS_PENDING_UPDATE;
+        this.setState({});
+        return;
+      }
+
       (this.base as Text).data = s.peek();
     };
 
@@ -450,4 +457,4 @@ function Text(this: AugmentedComponent, {data}: {data: Signal}) {
 
   return s.value;
 }
-Text.displayName = '_st';
+SignalValue.displayName = '_st';