add state usage support for props

drinking-code · drinking-code · commit bfc56f408dc4 · 2023-04-04T22:21:28.000+02:00
diff --git a/src/compiler/generate-code.ts b/src/compiler/generate-code.ts
@@ -33,7 +33,7 @@ export function clientTemplatesToJs(): string {
     mapMapToArray(getClientTemplates(), ([componentId, template]) => {
         code += wrapQuoteIfStartsWithNumber(componentId)
         code += ':'
-        code += `'${template}'`
+        code += `'${template.replace(/'/, '\\\'')}'`
         code += ','
     })
     code += '},'
diff --git a/src/compiler/template/check-props.ts b/src/compiler/template/check-props.ts
@@ -1,6 +1,7 @@
 import {filterObject, mapObject} from '../../utils/iterate-object'
 import {isStateUsage} from '../../state/state-usage'
 import {isState} from '../../state/state'
+import {stringifyDomTokenList, stringifyStyleObject} from '../../runtime/state-usage'
 
 export function checkProps(props: { [propName: string]: any }) { // todo
     const mapped = mapObject(props, ([propName, propValue]) => {
@@ -20,12 +21,9 @@ export function transformProps(props: { [propName: string]: any }) {
             propValue = propValue.use()
         if (!isStateUsage(propValue)) {
             if (['class', 'id'].includes(propName) && Array.isArray(propValue))
-                propValue = propValue.filter(v => v).join(' ').trim()
+                propValue = stringifyDomTokenList(propValue)
             if (propName === 'style' && typeof propValue === 'object')
-                propValue = Object.entries(propValue)
-                    .filter(([name, value]) => value && value !== 0)
-                    .map(([name, value]) => `${name}:${value}`)
-                    .join(';')
+                propValue = stringifyStyleObject(propValue)
         }
         return [propName.toLowerCase(), propValue]
     })
diff --git a/src/compiler/template/state-usage.ts b/src/compiler/template/state-usage.ts
@@ -4,14 +4,6 @@ import StateUsage, {isStateUsage} from '../../state/state-usage'
 import {getClientState} from '../../runtime'
 import {stateIsListenedTo} from '../states-collector'
 
-export type ContextType<T extends 'child' | 'prop'> = {
-    type: T,
-    contextElement: VirtualElement['_id']['fullPath']
-    prop: T extends 'prop' ? string : never,
-    beforeChild: T extends 'child' ? number : never,
-    makeString: string // (stateValue: string) => string
-}
-
 export type ProtoContextType<T extends 'child' | 'prop'> = {
     type: T,
     contextElement?: VirtualElement,
@@ -50,7 +42,7 @@ export function getStateUsagesAsCode() {
             code += `${stateUsagesName}.set('${key}', ${usage.transform.toString()});` + newLine
         let functionArray = '['
         for (const state of usage.states) {
-            functionArray += `${getClientState.name}('${state.id}')`
+            functionArray += `${getClientState.name}('${state.id}'),`
             if (!stateStateUsagesMap[state.id]) {
                 stateStateUsagesMap[state.id] = []
             }
@@ -85,6 +77,14 @@ function stringifyContext(context: ContextType<any>): string {
     return contextString
 }
 
+export type ContextType<T extends 'child' | 'prop'> = {
+    type: T,
+    contextElement: VirtualElement['_id']['fullPath']
+    prop: T extends 'prop' ? string : never,
+    beforeChild: T extends 'child' ? number : never,
+    makeString: string // (stateValue: string) => string
+}
+
 export function makeContext<T extends 'child' | 'prop'>(
     {type, contextElement, prop}: ProtoContextType<T>, stateUsage: StateUsage
 ): ContextType<T> {
@@ -118,7 +118,11 @@ export function makeContext<T extends 'child' | 'prop'>(
         context.makeString = functionString
     } else {
         context.prop = prop
-        // todo
+        /*if (['style', 'class', 'id'].includes(prop)) {
+            context.makeString = 'value => value'
+        } else {
+            context.makeString = 'value => String(value)'
+        }*/
     }
     return context as ContextType<T>
 }
diff --git a/src/compiler/template/template-builder.ts b/src/compiler/template/template-builder.ts
@@ -121,7 +121,7 @@ export default class TemplateBuilder {
             element.props.ref.populate(element)
         }
         const props = checkProps(element.props)
-        const stringifiedProps = stringifyProps(props)
+        const stringifiedProps = stringifyProps(props, element)
         const [stringifiedChildren, serverChildren] = this.stringifyNodes(element.children.flat(), element)
         const wrappedChildren = stringifiedChildren.length === 1 ? stringifiedChildren : `[${stringifiedChildren.join('')}]`
         return [
diff --git a/src/runtime/client-state.ts b/src/runtime/client-state.ts
@@ -1,8 +1,8 @@
-import {findElementByPath} from './dom'
 import {HashType} from '../jsx/VirtualElement'
 import {ContextType} from '../compiler/template/state-usage'
 import {AbstractState} from './abstract-state'
 import {getStateListenerCleanupMap} from './state-listener'
+import {updateStateUsages} from './state-usage'
 
 function cloneStateValue<V>(value: V): V {
     if (['string', 'number', 'boolean'].includes(typeof value) || [null, undefined].includes(value)) {
@@ -16,11 +16,6 @@ function cloneStateValue<V>(value: V): V {
 }
 
 export type StateChangeHandlerType = (...args: ([any, (value: any) => void] | HTMLElement)[]) => (() => void) | void
-type ClientContextType<T extends 'child' | 'prop'> = ContextType<T> & { makeString: (value: string) => string }
-
-declare const stateUsages: Map<HashType, (...values: any[]) => string>
-declare const stateUsagesParameters: Map<HashType, State[]>
-declare const stateUsagesContexts: Map<HashType, ClientContextType<any>[]>
 
 export class State<V = any> extends AbstractState<V> {
     private _listeners: (StateChangeHandlerType)[] = []
@@ -53,36 +48,7 @@ export class State<V = any> extends AbstractState<V> {
             cleanup()
         })
         this._value = cloneStateValue(value)
-        stateStateUsagesMap[this._id]?.forEach(stateUsageId => {
-            const contexts = stateUsagesContexts.get(stateUsageId)
-            contexts.forEach(context => {
-                let transform
-                if (stateUsages.has(stateUsageId)) {
-                    transform = stateUsages.get(stateUsageId)
-                    transform = stateUsages.get(stateUsageId)
-                } else {
-                    transform = value => String(value)
-                }
-                const transformParameters = stateUsagesParameters.get(stateUsageId)
-                const target = findElementByPath(context.contextElement)
-                const newString = context.makeString(
-                    transform(
-                        ...transformParameters.map(state => state.valueOf())
-                    )
-                )
-                if (context.type === 'child') {
-                    if (target.childElementCount == 0) {
-                        target.innerText = newString
-                    } else {
-                        target.children[context.beforeChild].previousSibling.replaceWith(
-                            document.createTextNode(newString)
-                        )
-                    }
-                } else if (context.type === 'prop') {
-                    // todo
-                }
-            })
-        })
+        updateStateUsages(this._id)
         if (executeListeners) {
             this._listeners.forEach(listener => stateListenerCleanupMap.set(listener, listener()))
         }
@@ -102,7 +68,6 @@ export class State<V = any> extends AbstractState<V> {
 }
 
 const states = new Map()
-declare const stateStateUsagesMap: { [key: HashType]: HashType[] }
 
 export function getClientState(id: HashType, value?: any) {
     if (!states.has(id))
diff --git a/src/runtime/state-usage.ts b/src/runtime/state-usage.ts
@@ -0,0 +1,63 @@
+import {type HashType} from '../jsx/VirtualElement'
+import {type State} from './client-state'
+import {findElementByPath} from './dom'
+import {type ContextType} from '../compiler/template/state-usage'
+import {type StringifiableType} from '../utils/stringify'
+
+export type ClientContextType<T extends 'child' | 'prop'> = ContextType<T> & { makeString: (value: string) => string }
+
+declare const stateUsages: Map<HashType, (...values: any[]) => string>
+declare const stateStateUsagesMap: { [key: HashType]: HashType[] }
+declare const stateUsagesParameters: Map<HashType, State[]>
+declare const stateUsagesContexts: Map<HashType, ClientContextType<any>[]>
+
+export function stringifyStyleObject(object: { [p: string]: StringifiableType }) {
+    return Object.entries(object)
+        .filter(([name, value]) => value && value !== 0)
+        .map(([name, value]) => `${name}:${value}`)
+        .join(';')
+}
+
+export function stringifyDomTokenList(array: StringifiableType[]) {
+    return array.filter(v => v).join(' ').trim()
+}
+
+export function updateStateUsages(id: HashType) {
+    stateStateUsagesMap[id]?.forEach(stateUsageId => {
+        const contexts = stateUsagesContexts.get(stateUsageId)
+        contexts.forEach(context => {
+            let transform
+            if (stateUsages.has(stateUsageId)) {
+                transform = stateUsages.get(stateUsageId)
+                transform = stateUsages.get(stateUsageId)
+            } else {
+                transform = value => String(value)
+            }
+            const transformParameters = stateUsagesParameters.get(stateUsageId)
+            const target = findElementByPath(context.contextElement)
+            const transformed = transform(
+                ...transformParameters.map(state => state.valueOf())
+            )
+            if (context.type === 'child') {
+                const newString = context.makeString(transformed)
+                if (target.childElementCount == 0) {
+                    target.innerText = newString
+                } else {
+                    target.children[context.beforeChild].previousSibling.replaceWith(
+                        document.createTextNode(newString)
+                    )
+                }
+            } else if (context.type === 'prop') {
+                let newString
+                if (context.prop === 'style' && typeof transformed === 'object') {
+                    newString = stringifyStyleObject(transformed)
+                } else if (['class', 'id'].includes(context.prop) && Array.isArray(transformed)) {
+                    newString = stringifyDomTokenList(transform)
+                } else {
+                    newString = String(transform)
+                }
+                target.setAttribute(context.prop, newString)
+            }
+        })
+    })
+}
diff --git a/src/utils/stringify.ts b/src/utils/stringify.ts
@@ -3,6 +3,9 @@ import {isArray} from './array'
 import {mapObject, mapObjectToArray} from './iterate-object'
 import {isState} from '../state/state'
 import {isStateUsage} from '../state/state-usage'
+import {includeStateUsage} from '../compiler/template/state-usage'
+import {type VirtualElementInterface} from '../jsx/cherry-soda'
+import {type VirtualElement} from '../jsx/VirtualElement'
 
 interface HasToStringInterface {
     toString: () => string
@@ -22,10 +25,18 @@ export default function stringifyValue(value: StringifiableType): string {
         return value.toString()
 }
 
-export function stringifyProps(props: { [p: string]: any }) {
-    return mapObjectToArray(props, ([key, value]) =>
-        isState(value) || isStateUsage(value)
-            ? '#' + ((!isStateUsage(value) ? value.use() : value).$$stateId.serialize()) // todo
-            : key + JSON.stringify(stringifyValue(value))
-    )
+export function stringifyProps(props: { [p: string]: any }, contextElement?: VirtualElementInterface<any>) {
+    return mapObjectToArray(props, ([key, value]) => {
+        if (isState(value) || isStateUsage(value)) {
+            const stateUsage = !isStateUsage(value) ? value.use() : value
+            includeStateUsage(stateUsage, {
+                type: 'prop',
+                contextElement: contextElement as VirtualElement,
+                prop: key
+            })
+            return '#' + stateUsage.$$stateId.serialize() // todo
+        } else {
+            return key + JSON.stringify(stringifyValue(value))
+        }
+    })
 }

Original file line number	Diff line number	Diff line change
`@@ -121,7 +121,7 @@ export default class TemplateBuilder {`
`121`	`121`	`element.props.ref.populate(element)`
`122`	`122`	`}`
`123`	`123`	`const props = checkProps(element.props)`
`124`		`- const stringifiedProps = stringifyProps(props)`
	`124`	`+ const stringifiedProps = stringifyProps(props, element)`
`125`	`125`	`const [stringifiedChildren, serverChildren] = this.stringifyNodes(element.children.flat(), element)`
`126`	`126`	const wrappedChildren = stringifiedChildren.length === 1 ? stringifiedChildren : `[${stringifiedChildren.join('')}]`
`127`	`127`	`return [`