new functional component syntax

AliceJS.d.ts

@@ -1,5 +1,7 @@
 declare namespace JSX {
-  export type IntrinsicElements = { [index: string]: any };
+  export type IntrinsicElements = {
+    [index: string]: any
+  };
 }
 
 declare function h(
@@ -26,19 +28,28 @@ declare var styled: { new: typeof css, rule: typeof rule };
 
 type DLCSS = string;
 
+declare var $el: HTMLElement;
+
 interface Element {
-  $: DLComponent<any>
+  $: OuterComponentTypes & { [index: string | symbol]: any }
 }
 
 interface DLElement<T> extends Element {
-  $: T
+  $: T & OuterComponentTypes
 }
 
-declare var $el: HTMLElement;
+type ComponentElement<T extends (...args: any) => any> = DLElement<ReturnType<T>>;
 
-type DLComponent<T> = {
-  css: DLCSS,
+type OuterComponentTypes = {
   root: Element,
   children: Element[],
+}
+type InnerComponentTypes = {
+  css: DLCSS,
   mount?: () => void,
-} & T;
+}
+type ComponentTypes = OuterComponentTypes & InnerComponentTypes;
+
+type Component<Public, Private> = ((this: Public & Private & ComponentTypes, _props: Public) => DLElement<Public>);
+
+

css.js

@@ -20,10 +20,10 @@ function scopify_css(uid, css) {
   return cssParsed;
 }
 function tagcss(strings, values, isblock) {
-  const uid = `dream-${Array(16)
+  const uid = `dl${Array(5)
     .fill(0)
     .map(() => {
-      return Math.floor(Math.random() * 16).toString(16);
+      return Math.floor(Math.random() * 36).toString(36);
     })
     .join("")}`;