Mint UI and Mint UI Website works!

spec/compilers2/argument

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

spec/compilers2/argument_with_default

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

spec/compilers2/block_with_await

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

spec/compilers2/call_labelled

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

spec/compilers2/component_global

@@ -26,13 +26,12 @@ component Main {
 --------------------------------------------------------------------------------
 import {
   createElement as B,
-  computed as E,
   signal as D
 } from "runtime";
 
 const
   A = () => {
-    return B(`div`, {}, [a.value])
+    return B(`div`, {}, [a()])
   },
   b = (c) => {
     return c
@@ -41,6 +40,6 @@ const
     return B(`div`, {}, [b(`Hello`)])
   },
   d = D(``),
-  a = E(() => {
+  a = () => {
     return d.value
-  });
+  };

spec/compilers2/component_instance_access

@@ -29,16 +29,14 @@ component Main {
 }
 --------------------------------------------------------------------------------
 import {
-  patternVariable as M,
-  createElement as G,
-  useComputed as E,
-  pattern as L,
-  useMemo as F,
+  patternVariable as K,
+  createElement as F,
+  pattern as J,
+  useMemo as E,
   variant as B,
-  setRef as N,
-  define as J,
-  useRef as I,
-  match as K
+  setRef as L,
+  useRef as H,
+  match as I
 } from "runtime";
 
 const
@@ -47,39 +45,39 @@ const
   D = ({
     _
   }) => {
-    const a = E(() => {
+    const a = () => {
       return `Instance`
-    });
-    const b = F(() => {
+    };
+    const b = E(() => {
       return {
         a
       }
     }, []);
-    _(b);
-    return G(`div`, {})
+    (_ ? _(b) : null);
+    return F(`div`, {})
   },
-  H = () => {
+  G = () => {
     const
-      c = I(new C()),
-      d = J('d', () => {
-        return K(c.current, [
+      c = H(new C()),
+      d = () => {
+        return I(c.current, [
           [
-            L(A, [M]),
+            J(A, [K]),
             (e) => {
-              return e.a
+              return e.a()
             }
           ],
           [
-            L(C, []),
+            J(C, []),
             () => {
               return ``
             }
           ]
         ])
-      });
-    return G(`div`, {
+      };
+    return F(`div`, {
       "onClick": d
-    }, [G(D, {
-      _: N(c, A)
+    }, [F(D, {
+      _: L(c, A)
     })])
   };

spec/compilers2/component_instance_access_ref

@@ -0,0 +1,79 @@
+enum Maybe(value) {
+  Just(value)
+  Nothing
+}
+
+component Instance {
+  fun render : Html {
+    <div as base></div>
+  }
+}
+
+component Main {
+  fun handleClick {
+    case (instance) {
+      Maybe::Just(component) => component.base
+      Maybe::Nothing => Maybe::Nothing
+    }
+  }
+
+  fun render : Html {
+    <div onClick={handleClick}>
+      <Instance as instance/>
+    </div>
+  }
+}
+--------------------------------------------------------------------------------
+import {
+  patternVariable as L,
+  createElement as G,
+  pattern as K,
+  useMemo as F,
+  variant as B,
+  setRef as H,
+  useRef as E,
+  match as J
+} from "runtime";
+
+const
+  A = B(1),
+  C = B(0),
+  D = ({
+    _
+  }) => {
+    const a = E(new C());
+    const b = F(() => {
+      return {
+        a
+      }
+    }, []);
+    (_ ? _(b) : null);
+    return G(`div`, {
+      ref: H(a, A)
+    })
+  },
+  I = () => {
+    const
+      c = E(new C()),
+      d = () => {
+        return J(c.current, [
+          [
+            K(A, [L]),
+            (e) => {
+              return e.a.current
+            }
+          ],
+          [
+            K(C, []),
+            () => {
+              return new C()
+            }
+          ]
+        ])
+      };
+    return G(`div`, {
+      "onClick": d
+    }, [G(D, {
+      _: H(c, A)
+    })])
+  };

spec/compilers2/css_definition

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

spec/compilers2/css_media

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

spec/compilers2/css_selector

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

spec/compilers2/css_selector_multiple

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

spec/compilers2/function

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