Use special equality of component functions.

runtime/index.js

@@ -1,16 +1,8 @@
+export { useComputed, computed, signal, effect, batch } from "@preact/signals";
 export { createElement, Fragment as fragment } from "preact";
 export { useEffect, useMemo, useRef } from "preact/hooks";
 export { createPortal } from "preact/compat";
 
-export {
-  useComputed,
-  useSignal,
-  computed,
-  signal,
-  effect,
-  batch,
-} from "@preact/signals";
-
 export * from "./src/pattern_matching";
 export * from "./src/normalize_event";
 export * from "./src/utilities";

runtime/src/component.js

@@ -0,0 +1,31 @@
+import { Component } from "preact";
+import { bindFunctions, setConstants } from "./Utils";
+
+export default const component = (...args) {
+  let render;
+
+  switch (args.length) {
+  case: 1
+    render = args[0]
+    break;
+  }
+
+
+  return class extends Component {
+    componentDidUpdate() {
+
+    }
+
+    componentDidMount() {
+
+    }
+
+    componentWillUnmount() {
+
+    }
+
+    render() {
+      return render();
+    }
+  }
+}

runtime/src/equality.js

@@ -2,6 +2,7 @@
 // We use a `Symbol` to have a custom equality functions and then use these
 // functions when comparing two values.
 export const Equals = Symbol("Equals");
+export const Id = Symbol("Id");
 
 Boolean.prototype[Equals] =
   Symbol.prototype[Equals] =
@@ -16,7 +17,11 @@ Date.prototype[Equals] = function (other) {
 };
 
 Function.prototype[Equals] = Node.prototype[Equals] = function (other) {
-  return this === other;
+  if (this[Id]) {
+    return this[Id] === other[Id];
+  } else {
+    return this === other;
+  }
 };
 
 // Search parameters need to be the same string to be equal.

runtime/src/normalize_event.js

@@ -34,7 +34,9 @@ if (!("DataTransfer" in window)) {
 export const normalizeEvent = (event) => {
   return new Proxy(event, {
     get: function (obj, prop) {
-      if (prop in obj) {
+      if (prop === "event") {
+        return event
+      } else if (prop in obj) {
         const value = obj[prop];
 
         if (value instanceof Function) {

runtime/src/program.js

@@ -123,7 +123,7 @@ class Program {
             elem =
               this.root.querySelector(hash) || // ID
               this.root.querySelector(`a[name="${hash.slice(1)}"]`); // Anchor
-          } finally {
+          } catch {
           }
 
           if (elem) {

runtime/src/provider.js

@@ -22,14 +22,16 @@ export const createProvider = (subscriptions, update) => {
 
     // This runs on every update so we don't return a cleanup function.
     useEffect(() => {
+      const data = object();
+
       // If the object is null that means we need to unsubscribe.
-      if (object === null) {
+      if (data === null) {
         unsubscribe();
       } else {
         const current = subscriptions.get(owner);
 
-        if (!compare(current, object)) {
-          subscriptions.set(owner, object);
+        if (!compare(current, data)) {
+          subscriptions.set(owner, data);
           untracked(update);
         }
       }
@@ -42,4 +44,4 @@ export const subscriptions = (items) => Array.from(items.values());
 
 // Returns a unique ID for a component which doesn't change.
 export const useId = () => useMemo(uuid, []);
-
+export {uuid};

runtime/src/utilities.js

@@ -1,4 +1,8 @@
-import { useEffect, useRef, useCallback } from "preact/hooks";
+import { useEffect, useRef, useCallback, useMemo } from "preact/hooks";
+import { createRef as createRefOriginal } from "preact";
+import { signal } from "@preact/signals";
+
+import { Id } from "./equality";
 
 // We need to have a different function for accessing array items because there
 // is no concept of `null` in Mint so we return `Just(a)` or `Nothing`.
@@ -23,6 +27,20 @@ export const setRef = (value, just) => (element) => {
   }
 }
 
+// A version of useSignal which subscribes to the signal by default (like a
+// state) since we want to re-render every time the signal changes.
+export const useSignal = (value) => {
+  const sig = useMemo(() => signal(value), [])
+  sig.value;
+  return sig
+}
+
+export const createRef = (value) => {
+  const ref = createRefOriginal()
+  ref.current = value
+  return ref
+}
+
 // A hook to replace the `componentDidUpdate` function.
 export const useDidUpdate = (callback) => {
   const hasMount = useRef(false);
@@ -60,3 +78,8 @@ export const access = (field) => (value) => value[field];
 
 // Identity function used in encoders.
 export const identity = (a) => a;
+
+export const define = (id, method) => {
+  method[Id] = id
+  return method
+}

spec/compilers2/access_deep

@@ -0,0 +1,35 @@
+type Locale {
+  level1: Level1
+}
+
+type Level1 {
+  level2: Level2
+}
+
+type Level2 {
+  name : String
+}
+
+store Settings {
+  state locale : Locale = { level1: { level2: { name: "Test" }} }
+}
+
+component Main {
+  fun render : String {
+    Settings.locale.level1.level2.name
+  }
+}
+--------------------------------------------------------------------------------
+import { signal as A } from "runtime";
+
+const
+  a = A({
+    level1: {
+      level2: {
+        name: `Test`
+      }
+    }
+  }),
+  B = () => {
+    return a.value.level1.level2.name
+  };

spec/compilers2/argument

@@ -10,10 +10,10 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { useFunction as B } from "runtime";
+import { define as B } from "runtime";
 
 const A = () => {
-  const a = B((b, c) => {
+  const a = B('a', (b, c) => {
     return c
   });
   a(``, 0);

spec/compilers2/argument_with_default

@@ -10,10 +10,10 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { useFunction as B } from "runtime";
+import { define as B } from "runtime";
 
 const A = () => {
-  const a = B((b, c = 0) => {
+  const a = B('a', (b, c = 0) => {
     return c
   });
   a(``);

spec/compilers2/block_with_await

@@ -14,14 +14,14 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { useFunction as B } from "runtime";
+import { define as B } from "runtime";
 
 const A = () => {
   const
-    a = B(() => {
+    a = B('a', () => {
       return undefined
     }),
-    b = B(async () => {
+    b = B('b', async () => {
       return await a()
     });
   b();

spec/compilers2/call_labelled

@@ -8,10 +8,10 @@ component Main {
   }
 }
 --------------------------------------------------------------------------------
-import { useFunction as B } from "runtime";
+import { define as B } from "runtime";
 
 const A = () => {
-  const a = B((b, c) => {
+  const a = B('a', (b, c) => {
     return ``
   });
   return a(``, 0)

spec/compilers2/component_instance_access

@@ -31,12 +31,12 @@ component Main {
 import {
   patternVariable as M,
   createElement as G,
-  useFunction as J,
   useComputed as E,
   pattern as L,
   useMemo as F,
   variant as B,
   setRef as N,
+  define as J,
   useRef as I,
   match as K
 } from "runtime";
@@ -61,7 +61,7 @@ const
   H = () => {
     const
       c = I(new C()),
-      d = J(() => {
+      d = J('d', () => {
         return K(c.current, [
           [
             L(A, [M]),

spec/compilers2/component_with_provider

@@ -35,14 +35,16 @@ const
   }),
   C = () => {
     const b = D();
-    A(b, (false ? {
-      moves: (c) => {
-        return null
-      },
-      ups: (d) => {
-        return null
-      }
-    } : null));
+    A(b, () => {
+      return (false ? {
+        moves: (c) => {
+          return null
+        },
+        ups: (d) => {
+          return null
+        }
+      } : null)
+    });
     return E(`div`, {})
   };
 

spec/compilers2/component_with_provider_and_lifecycle_functions

@@ -60,13 +60,15 @@ const
     F(() => {
       return null
     });
-    A(b, (false ? {
-      moves: (c) => {
-        return null
-      },
-      ups: (d) => {
-        return null
-      }
-    } : null));
+    A(b, () => {
+      return (false ? {
+        moves: (c) => {
+          return null
+        },
+        ups: (d) => {
+          return null
+        }
+      } : null)
+    });
     return G(`div`, {})
   };

spec/compilers2/component_with_provider_and_store

@@ -50,13 +50,15 @@ const
   }),
   D = () => {
     const d = E();
-    B(d, (false ? {
-      moves: (e) => {
-        return null
-      },
-      ups: (f) => {
-        return null
-      }
-    } : null));
+    B(d, () => {
+      return (false ? {
+        moves: (e) => {
+          return null
+        },
+        ups: (f) => {
+          return null
+        }
+      } : null)
+    });
     return F(`div`, {})
   };

spec/compilers2/css_definition

@@ -13,26 +13,25 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  createElement as D,
-  useFunction as C,
+  createElement as C,
   useComputed as B,
-  style as E
+  style as D
 } from "runtime";
 
 const A = () => {
   const
     a = B(() => {
       return 10
     }),
-    b = C(() => {
+    b = () => {
       const _ = {
         [`--a-a`]: a.value + `px 0px`
       };
       return _
-    });
-  return D(`div`, {
+    };
+  return C(`div`, {
     className: `Main_test`,
-    style: E([b()])
+    style: D([b()])
   })
 };