Size directive. (#795)

Author: gdotdesign

core/tests/tests/Context.mint

@@ -1,6 +1,6 @@
 type Test.Context {
   name : String
-}
+} context { name: "NAME" }
 
 component Test.NestedConsumer {
   fun render {
@@ -30,4 +30,10 @@ suite "Context" {
     |> Test.Html.start()
     |> Test.Html.assertTextOf("div", "Joe")
   }
+
+  test "Test.Consumer" {
+    <Test.Consumer/>
+    |> Test.Html.start()
+    |> Test.Html.assertTextOf("div", "NAME")
+  }
 }

runtime/index.js

@@ -1,5 +1,5 @@
 export { createElement, Fragment as fragment, createContext } from "preact";
-export { useEffect, useMemo, useRef, useContext } from "preact/hooks";
+export { useEffect, useMemo, useContext } from "preact/hooks";
 export { signal, batch } from "@preact/signals";
 
 export * from "./src/pattern_matching";

runtime/src/utilities.js

@@ -1,5 +1,5 @@
-import { useEffect, useRef, useMemo } from "preact/hooks";
-import { signal } from "@preact/signals";
+import { signal, useSignalEffect, useSignal as useSignalOriginal } from "@preact/signals";
+import { useEffect, useRef, useMemo, useCallback } from "preact/hooks";
 
 import {
   createRef as createRefOriginal,
@@ -31,16 +31,32 @@ export const bracketAccess = (array, index, just, nothing) => {
   }
 };
 
-// This sets the references to an element or component. The current
+// These set the references to an element or component. The current
 // value is always a `Maybe`
-export const setRef = (value, just, nothing) => (element) => {
+export const setTestRef = (signal, just, nothing) => (element) => {
+  let current;
   if (element === null) {
-    value.current = new nothing();
+    current = new nothing();
   } else {
-    value.current = new just(element);
+    current = new just(element);
   }
+
+  if (signal) {
+    if (!compare(signal.peek(), current)) {
+      signal.value = current
+    }
+  }
+}
+
+export const setRef = (signal, just, nothing) => {
+  return useCallback((element) => {
+    setTestRef(signal, just, nothing)(element)
+  }, [])
 };
 
+// The normal useSignal.
+export const useRefSignal = useSignalOriginal;
+
 // 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) => {
@@ -49,13 +65,6 @@ export const useSignal = (value) => {
   return item;
 };
 
-// A version of `createRef` with a default value.
-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);
@@ -131,3 +140,26 @@ export const load = async (path) => {
 export const isThruthy = (value, just, ok) => {
   return value instanceof ok || value instanceof just
 };
+
+// Returns a signal for tracking the size of an entity.
+export const useDimensions = (ref, get, empty) => {
+  const signal = useSignal(empty());
+
+  // Initial setup...
+  useSignalEffect(() => {
+    const observer = new ResizeObserver(() => {
+      signal.value = ref.value && ref.value._0 ? get(ref.value._0) : empty();
+    });
+
+    if (ref.value && ref.value._0) {
+      observer.observe(ref.value._0);
+    }
+
+    return () => {
+      signal.value = empty();
+      observer.disconnect();
+    };
+  });
+
+  return signal;
+}

spec/compilers/component_instance_access

@@ -31,11 +31,11 @@ component Main {
 import {
   patternVariable as G,
   createElement as C,
+  useRefSignal as D,
   pattern as F,
   useMemo as B,
   variant as A,
   setRef as H,
-  useRef as D,
   match as E
 } from "./runtime.js";
 
@@ -60,7 +60,7 @@ export const
     const
       c = D(new J()),
       d = () => {
-        return E(c.current, [
+        return E(c.value, [
           [
             F(I, [G]),
             (e) => {

spec/compilers/component_instance_access_2

@@ -17,9 +17,9 @@ global component Global {
 --------------------------------------------------------------------------------
 import {
   createElement as B,
-  createRef as C,
   variant as A,
-  setRef as D
+  setRef as D,
+  signal as C
 } from "./runtime.js";
 
 export const

spec/compilers/component_instance_access_ref

@@ -27,11 +27,11 @@ component Main {
 import {
   patternVariable as H,
   createElement as D,
+  useRefSignal as B,
   pattern as G,
   useMemo as C,
   variant as A,
   setRef as E,
-  useRef as B,
   match as F
 } from "./runtime.js";
 
@@ -56,11 +56,11 @@ export const
     const
       c = B(new J()),
       d = () => {
-        return F(c.current, [
+        return F(c.value, [
           [
             G(I, [H]),
             (e) => {
-              return e.a.current
+              return e.a.value
             }
           ],
           [

spec/compilers/context

@@ -1,6 +1,9 @@
 type Form {
   set: Function(String, String, Promise(Void)),
   get: Function(String, String)
+} context {
+  set: (a: String, b: String) { await void },
+  get: (a: String) { "" }
 }
 
 type Maybe(a) {
@@ -46,12 +49,12 @@ component Main {
 --------------------------------------------------------------------------------
 import {
   createElement as E,
-  createContext as B,
+  createContext as C,
   useContext as D,
   mapAccess as H,
   useSignal as F,
   variant as A,
-  record as C,
+  record as B,
   or as G
 } from "./runtime.js";
 
@@ -60,40 +63,47 @@ export const
   J = A(1, `Maybe.Just`),
   K = A(1, `Result.Ok`),
   L = A(1, `Result.Err`),
-  M = B(),
-  a = C(`Form`),
+  a = B(`Form`),
+  M = C(a({
+    set: async (b, c) => {
+      return await null
+    },
+    get: (d) => {
+      return ``
+    }
+  })),
   N = ({
-    b
+    e
   }) => {
     const
-      c = () => {
-        return d.set(b, d.get(b) + `1`)
+      f = () => {
+        return g.set(e, g.get(e) + `1`)
       },
-      d = D(M);
+      g = D(M);
     return E(`button`, {
-      "onClick": c
+      "onClick": f
     }, [`Change!`])
   },
   O = () => {
-    const e = F([]);
+    const h = F([]);
     return E(M.Provider, {
       value: a({
-        set: (f, g) => {
+        set: (i, j) => {
           return (() => {
-            e.value = e.value
+            h.value = h.value
           })()
         },
-        get: (h) => {
-          return G(I, L, H(e.value, h, J, I), ``)
+        get: (k) => {
+          return G(I, L, H(h.value, k, J, I), ``)
         }
       })
     }, (() => {
       return E(`div`, {}, [
         E(N, {
-          b: `firstname`
+          e: `firstname`
         }),
         E(N, {
-          b: `lastname`
+          e: `lastname`
         })
       ])
     })())

spec/compilers/context_with_defer

@@ -0,0 +1,134 @@
+type Form {
+  set: Function(String, String, Promise(Void)),
+  get: Function(String, String)
+} context {
+  set: (a: String, b: String) { await void },
+  get: (a: String) { "" }
+}
+
+type Maybe(a) {
+  Nothing
+  Just(a)
+}
+
+type Result(err, value) {
+  Ok(value)
+  Err(err)
+}
+
+async component Input {
+  property name : String
+  context form : Form
+
+  fun handleClick {
+    form.set(name, form.get(name) + "1")
+  }
+
+  fun render {
+    <button onClick={handleClick}>
+      "Change!"
+    </button>
+  }
+}
+
+component Main {
+  state form : Map(String, String) = {} of String => String
+
+  provide Form {
+    set: (name : String, value : String) { next { form: form } },
+    get: (name : String) { form[name] or "" }
+  }
+
+  fun render {
+    <div>
+      <Input name="firstname"/>
+      <Input name="lastname"/>
+    </div>
+  }
+}
+--------------------------------------------------------------------------------
+---=== /__mint__/index.js ===---
+import {
+  lazyComponent as I,
+  createElement as F,
+  createContext as C,
+  mapAccess as H,
+  useSignal as E,
+  variant as A,
+  record as B,
+  lazy as D,
+  or as G
+} from "./runtime.js";
+
+export const
+  J = A(0, `Maybe.Nothing`),
+  K = A(1, `Maybe.Just`),
+  L = A(1, `Result.Ok`),
+  M = A(1, `Result.Err`),
+  a = B(`Form`),
+  N = C(a({
+    set: async (b, c) => {
+      return await null
+    },
+    get: (d) => {
+      return ``
+    }
+  })),
+  O = D(`./1.js`),
+  P = () => {
+    const e = E([]);
+    return F(N.Provider, {
+      value: a({
+        set: (f, g) => {
+          return (() => {
+            e.value = e.value
+          })()
+        },
+        get: (h) => {
+          return G(J, M, H(e.value, h, K, J), ``)
+        }
+      })
+    }, (() => {
+      return F(`div`, {}, [
+        F(I, {
+          c: [],
+          key: `Input`,
+          p: {
+            a: `firstname`
+          },
+          x: O
+        }),
+        F(I, {
+          c: [],
+          key: `Input`,
+          p: {
+            a: `lastname`
+          },
+          x: O
+        })
+      ])
+    })())
+  };
+
+---=== /__mint__/1.js ===---
+import {
+  createElement as C,
+  useContext as B
+} from "./runtime.js";
+
+import { N as A } from "./index.js";
+
+export const D = ({
+  a
+}) => {
+  const
+    b = () => {
+      return c.set(a, c.get(a) + `1`)
+    },
+    c = B(A);
+  return C(`button`, {
+    "onClick": b
+  }, [`Change!`])
+};
+
+export default D;