Improved tracking of deep objects

Author: JulianFun123

README.md

@@ -71,7 +71,8 @@ const hello = state({
     world: 'example'
 }, { deep: true })
 
-watch([track(() => hello.value)], () => {
+// only refreshes when hello changes
+watch([track(() => hello.value.hello)], () => {
     console.log('Hello changed')
 })
 
@@ -94,6 +95,31 @@ html`
     <${ExampleComponent} example="hello world" />
 `
 ```
+
+#### Function Components Life-Cycle hooks
+
+```ts
+import {defineEmits, defineProps, defineSlot, html, onMounted} from "pulsjs";
+
+function ExampleComponent() {
+    const props = defineProps<{
+        example: string;
+    }>()
+    const emit = defineEmits()
+    const slot = defineSlot<Node[]>()
+
+    onMounted(() => {
+        console.log('Mounted')
+    })
+    
+    onUnmounted(() => {
+        console.log('Unmounted')
+    })
+
+    return html``
+}
+```
+
 ### Class components
 ```js
 import { html } from 'pulsjs'

packages/puls-adapter/index.ts

@@ -1,2 +1,3 @@
 export * from './src/PulsAdapter';
-export * from './src/lifecycle-hooks';
+export * from './src/lifecycle-hooks';
+export * from './src/lifecycle-defines';

packages/puls-adapter/src/lifecycle-defines.ts

@@ -0,0 +1,26 @@
+export type EmitFunction = (name: string, ...args: any[]) => any
+
+export const currentLifecycleDefines = {
+    props: {},
+    emitsFunction: undefined as EmitFunction|undefined,
+    exports: {} as Record<string, any>,
+    slot: undefined as any
+}
+
+export function defineProps<T>(): T {
+    return currentLifecycleDefines.props as T
+}
+
+
+export function defineEmits<T extends Record<string, ((...args: any[]) => any)>>(
+): <K extends keyof T>(event: K, ...args: Parameters<T[K]>) => T[K] {
+    return currentLifecycleDefines.emitsFunction! as any
+}
+
+export function defineExports(exprts: any): any {
+    currentLifecycleDefines.exports = exprts
+}
+
+export function defineSlot<T>(): T {
+    return currentLifecycleDefines.slot
+}

packages/puls-dom-adapter/src/PulsDOMAdapter.ts

@@ -6,7 +6,8 @@ import {
     OnUnmount,
     OnUnmounted,
     PulsAdapter,
-    resetLifecycleHooks
+    resetLifecycleHooks,
+    currentLifecycleDefines
 } from "pulsjs-adapter";
 
 export type ValueTransformer<T> = {
@@ -28,6 +29,25 @@ export class PulsDOMAdapter extends PulsAdapter<Node[]>{
         return this.documentOverride ?? window.document
     }
 
+    setLifecycleDefines(tag: any, attributes: Record<string, any>, slot: any) {
+        currentLifecycleDefines.exports = {}
+        currentLifecycleDefines.props = attributes
+        currentLifecycleDefines.slot = slot
+        currentLifecycleDefines.emitsFunction = (name: string, ...args: any) => {
+            const fn = attributes[`@${name}`]
+            if (fn) {
+                return fn(...args)
+            }
+        }
+    }
+
+    clearLifecycleDefines() {
+        currentLifecycleDefines.emitsFunction = undefined
+        currentLifecycleDefines.props = {}
+        currentLifecycleDefines.emitsFunction = undefined
+        currentLifecycleDefines.slot = undefined
+    }
+
     partTransformers: Record<string, (part: ParserOutput) => any> = {
         'text': (part) => [this.document.createTextNode((part as ParserText).value)],
         'element': (part) => {
@@ -39,16 +59,34 @@ export class PulsDOMAdapter extends PulsAdapter<Node[]>{
                 if ('prototype' in conf.tag && conf.tag.prototype instanceof HTMLElement) {
                     out = this.createFromValue(this.createElement(conf))
                 } else {
-                    out = this.createFromValue((conf.tag as (values: any) => any)({
-                        ...conf.attributes.reduce((acc, [key, value]) => ({
-                                ...acc,
-                                [key]: value
-                            }), {}),
+                    // Function Components Implementation
+
+                    for (const [key, value] of conf.attributes) {
+                        if (key === ':if' || key === ':else-if' || key === ':else') {
+                            return this.setConditionFlowAttribute(key, value, conf)
+                        }
+                    }
+
+                    const attributes: Record<string, any> = conf.attributes.reduce((acc, [key, value]) => ({
+                        ...acc,
+                        [key]: value
+                    }), {})
 
-                        ...(conf.attributes.find(([k]) => k === ':props')?.[1] || {}),
+                    const slot = (conf.body.length > 0 ? (new (this.constructor as new (b: ParserOutput[]) => PulsDOMAdapter)(conf.body)).render() : undefined)
 
-                        $slot: (conf.body.length > 0 ? (new (this.constructor as new (b: ParserOutput[]) => PulsDOMAdapter)(conf.body)).render() : undefined),
+                    this.setLifecycleDefines(conf.tag, attributes, slot)
+
+                    // Call function component
+                    out = this.createFromValue((conf.tag as (values: any) => any)({
+                        ...attributes,
+                        $slot: slot
                     }))
+
+                    this.clearLifecycleDefines()
+
+                    if (':ref' in attributes) {
+                        attributes[':ref'](...(out || []), currentLifecycleDefines.exports)
+                    }
                 }
 
                 let lifeCycleComment: undefined|Comment= undefined
@@ -181,41 +219,45 @@ export class PulsDOMAdapter extends PulsAdapter<Node[]>{
         }
     }
 
-    setAttribute(el: Element|undefined, key: string, value: any, parserTag: ParserTag): Node|undefined {
-        if (key === ':if' || key === ':else-if' || key === ':else') {
-            if (key === ':if') {
-                this.currentControlFlow = this.controlFlows.push([value]) - 1
-                if (!value) {
-                    return this.document.createComment('if')
-                }
+    setConditionFlowAttribute(key: string, value: any, parserTag: ParserTag) {
+        if (key === ':if') {
+            this.currentControlFlow = this.controlFlows.push([value]) - 1
+            if (!value) {
+                return this.document.createComment('if')
+            }
+        }
+        if (key === ':else-if') {
+            if (typeof this.controlFlows[this.currentControlFlow] === 'undefined') {
+                throw new Error('else-if without if')
             }
-            if (key === ':else-if') {
-                if (typeof this.controlFlows[this.currentControlFlow] === 'undefined') {
-                    throw new Error('else-if without if')
-                }
 
-                let isElse = !this.controlFlows[this.currentControlFlow].includes(true)
-                this.controlFlows[this.currentControlFlow].push(value)
+            let isElse = !this.controlFlows[this.currentControlFlow].includes(true)
+            this.controlFlows[this.currentControlFlow].push(value)
 
-                if (!(isElse && value)) {
-                    return this.document.createComment('if')
-                }
+            if (!(isElse && value)) {
+                return this.document.createComment('if')
+            }
+        }
+        if (key === ':else') {
+            if (typeof this.controlFlows[this.currentControlFlow] === 'undefined') {
+                throw new Error('else without if before')
             }
-            if (key === ':else') {
-                if (typeof this.controlFlows[this.currentControlFlow] === 'undefined') {
-                    throw new Error('else without if before')
-                }
 
-                let isElse = !this.controlFlows[this.currentControlFlow].includes(true)
+            let isElse = !this.controlFlows[this.currentControlFlow].includes(true)
 
-                if (!isElse) {
-                    return this.document.createComment('if')
-                }
+            if (!isElse) {
+                return this.document.createComment('if')
             }
-            return this.createElement({
-                ...parserTag,
-                attributes: parserTag.attributes.filter(([k]) => k !== key)
-            })
+        }
+        return this.createElement({
+            ...parserTag,
+            attributes: parserTag.attributes.filter(([k]) => k !== key)
+        })
+    }
+
+    setAttribute(el: Element|undefined, key: string, value: any, parserTag: ParserTag): Node|undefined {
+        if (key === ':if' || key === ':else-if' || key === ':else') {
+            return this.setConditionFlowAttribute(key, value, parserTag)
         }
 
         if (el === undefined) return;

packages/puls-dom-adapter/src/PulsHookedDOMAdapter.ts

@@ -1,5 +1,5 @@
 import {PulsDOMAdapter} from "./PulsDOMAdapter";
-import {computed, Hook} from "pulsjs-state";
+import {computed, Hook, isHook, track} from "pulsjs-state";
 import {ParserTag} from "pulsjs-template";
 
 // Adds support for hooks in the PulsDOMAdapter
@@ -21,18 +21,27 @@ export class PulsHookedDOMAdapter extends PulsDOMAdapter {
         if (el && key.startsWith(':bind')) {
             const field = key.split(':')[2] || 'value'
 
+            if (typeof value === 'function')
+                value = track(value)
+
+            if (!isHook(value)) throw new Error(`Expected a hook on :bind. Got ${typeof value}`)
+
             const hook = value as Hook<any>
 
-            hook.addListener(() => {
-                (el as any)[field] = hook.value
-            })
+            let removeListener: any;
+            const setListener = () => {
+                removeListener = hook.addListener(() => {
+                    (el as any)[field] = hook.value
+                })
+            }
+            setListener()
 
             el.addEventListener(field === 'value' ? 'input' : `input:${field}`, () => {
-                hook.setValue((el as any)[field])
+                removeListener()
+                hook.setValue((el as any)[field]);
+                setListener()
             })
             ;(el as any)[field] = hook.value
-
-
             return
         }
 
@@ -92,14 +101,14 @@ export class PulsHookedDOMAdapter extends PulsDOMAdapter {
                 for (let c of this.controlFlows[currentControlFlowId]) {
                     if (c) return false;
                 }
-                return value instanceof Hook ? value.value : value
+                return isHook(value) ? value.value : value
             }
 
             const ind = this.controlFlows[currentControlFlowId].push(cond()) - 1
 
-            this.controlFlowHooks[this.currentControlFlow][ind] = value instanceof Hook ? value : null
+            this.controlFlowHooks[this.currentControlFlow][ind] = isHook(value) ? value : null
 
-            if (value && value instanceof Hook) {
+            if (value && isHook(value)) {
                 for (const hk of this.controlFlowHooks[this.currentControlFlow]) {
                     hk?.addListener(() => {
                         this.controlFlows[currentControlFlowId][ind] = cond()
@@ -110,13 +119,13 @@ export class PulsHookedDOMAdapter extends PulsDOMAdapter {
             return createIfListener(
                 [
                     ...this.controlFlowHooks[this.currentControlFlow].map((c) => c).filter(c => c !== null),
-                    ...(value instanceof Hook ? [value] : [])
+                    ...(isHook(value) ? [value] : [])
                 ],
                 () => this.controlFlows[currentControlFlowId][ind]
             )
         }
 
-        if (key.startsWith('@') || !(value instanceof Hook))
+        if (key.startsWith('@') || !isHook(value))
             return super.setAttribute(el, key, value, parserTag);
 
         const hook = value as Hook<any>
@@ -142,6 +151,11 @@ export class PulsHookedDOMAdapter extends PulsDOMAdapter {
             )
         }
 
+        if (el && '__puls_inject_hooks_as_value' in el) {
+            super.setAttribute(el, key, hook, parserTag)
+            return;
+        }
+
         const listener = () => {
             super.setAttribute(el, key, hook.value, parserTag)
         }
@@ -152,7 +166,7 @@ export class PulsHookedDOMAdapter extends PulsDOMAdapter {
     }
 
     createFromValue(value: any) : undefined|Node[] {
-        if (!(value instanceof Hook))
+        if (!isHook(value))
             return super.createFromValue(value);
 
         const hook = value as Hook<any>
@@ -218,7 +232,7 @@ export class PulsHookedDOMAdapter extends PulsDOMAdapter {
 
 
     setElementStyle(el: Element, key: string, value: any) {
-        if (value instanceof Hook) {
+        if (isHook(value)) {
             this.addListener(el, () => {
                 super.setElementClass(el, key, value.value)
             })
@@ -230,7 +244,7 @@ export class PulsHookedDOMAdapter extends PulsDOMAdapter {
     }
 
     setElementClass(el: Element, key: string, condition: any) {
-        if (condition instanceof Hook) {
+        if (isHook(condition)) {
             this.addListener(el, condition.addListener(() => {
                 super.setElementClass(el, key, condition.value)
             }))

packages/puls-jsx/jsx-runtime/index.ts

@@ -6,12 +6,17 @@ export function h(type: any, props?: any, children: any[] = []) {
         props = {}
     }
 
-    if (props && props.children) {
+    if (props && 'children' in props) {
         children = props.children;
         delete props.children;
     }
+    if (props && 'slot' in props) {
+        delete props.slot;
+    }
+
+
 
-    return html`<${type} :props=${
+    return html`<${type} ${
         Object.entries(props || {})
             .map(([key, value]) => {
                 if (key.startsWith('on:')) {
@@ -20,6 +25,9 @@ export function h(type: any, props?: any, children: any[] = []) {
                 if (key === 'classList' || key === 'className') {
                     key = 'class'
                 }
+                if (key === 'p:ref') {
+                    key = ':ref'
+                }
                 if (key === 'p:bind') {
                     key = ':bind'
                 }
@@ -40,10 +48,18 @@ export function h(type: any, props?: any, children: any[] = []) {
 }
 
 export function Fragment(...a: any) {
-    console.log(a)
-    console.log('fragment called --------------------------------')
+    return a
 }
 
 export const jsx = h
 export const jsxs = h
-export const jsxDEV = h
+export const jsxDEV = h
+
+export type Props<T> = {
+    [K in `on:${string}`]?: (...args: any[]) => any;
+} & T & {
+    'p:ref'?: (exports: Record<string, any>, el: HTMLElement) => void;
+    'p:if'?: any;
+    'p:else-if'?: any;
+    'p:else'?: any;
+}