644 lines
20 KiB
TypeScript
644 lines
20 KiB
TypeScript
interface CustomElement extends HTMLElement {
|
|
setState(key_path: string, value: any): void
|
|
getState(key_path: string): any
|
|
}
|
|
|
|
interface ComponentOptions {
|
|
tag: string
|
|
template: string
|
|
style?: string
|
|
onMount?: (this: CustomElement) => void
|
|
onUnmount?: () => void
|
|
onAttributeChanged?: (attrName: string, oldValue: string, newValue: string) => void
|
|
states?: Record<string, any>
|
|
statesListeners?: { [key: string]: (value: any) => void }
|
|
events?: { [key: string]: (event: Event) => void }
|
|
}
|
|
|
|
export default (options: ComponentOptions) => {
|
|
const { tag, template, style, onMount, onUnmount, onAttributeChanged, states, statesListeners } = options
|
|
const componentRegistry = new Map()
|
|
componentRegistry.set(tag, options)
|
|
|
|
class CustomElementImpl extends HTMLElement {
|
|
private _states: Record<string, any> = {}
|
|
private _stateToElementsMap: Record<string, Set<HTMLElement>> = {}
|
|
private _currentRenderingElement: HTMLElement | null = null
|
|
private _statesListeners: Record<string, Function> = {}
|
|
private _textBindings: Array<{ node: Text, expr: string, originalContent: string }> = []
|
|
private _attributeBindings: Array<{ element: Element, attrName: string, expr: string, template: string }> = []
|
|
private _conditionalElements: Map<Element, {
|
|
expr: string,
|
|
placeholder: Comment,
|
|
isPresent: boolean
|
|
}> = new Map()
|
|
|
|
constructor() {
|
|
super()
|
|
|
|
// copy state from options
|
|
this._states = new Proxy({ ...(states || {}) }, {
|
|
set: (target: Record<string, any>, keyPath: string, value: any) => {
|
|
const valueRoute = keyPath.split('.')
|
|
let currentTarget = target
|
|
for (let i in valueRoute) {
|
|
const key = valueRoute[i]
|
|
if (parseInt(i) === valueRoute.length - 1) {
|
|
currentTarget[key] = value
|
|
} else {
|
|
if (!currentTarget[key]) {
|
|
currentTarget[key] = {}
|
|
}
|
|
currentTarget = currentTarget[key]
|
|
}
|
|
}
|
|
// trigger dom updates
|
|
this._triggerDomUpdates(keyPath)
|
|
if (this._statesListeners[keyPath])
|
|
this._statesListeners[keyPath](value)
|
|
|
|
// trigger state update events
|
|
if (statesListeners && statesListeners[keyPath]) {
|
|
statesListeners[keyPath](value)
|
|
}
|
|
|
|
return true
|
|
},
|
|
get: (target: Record<string, any>, keyPath: string) => {
|
|
// collect state dependencies
|
|
if (this._currentRenderingElement) {
|
|
if (!this._stateToElementsMap[keyPath])
|
|
this._stateToElementsMap[keyPath] = new Set()
|
|
this._stateToElementsMap[keyPath].add(this._currentRenderingElement)
|
|
}
|
|
|
|
const valueRoute = keyPath.split('.')
|
|
let currentTarget = target
|
|
for (let i in valueRoute) {
|
|
const key = valueRoute[i]
|
|
if (parseInt(i) === valueRoute.length - 1) {
|
|
return currentTarget[key]
|
|
} else {
|
|
if (!currentTarget[key]) {
|
|
currentTarget[key] = {}
|
|
}
|
|
currentTarget = currentTarget[key]
|
|
}
|
|
}
|
|
return undefined
|
|
}
|
|
})
|
|
|
|
// initialize dom tree and append to shadow root
|
|
this._initialize()
|
|
}
|
|
|
|
private _initialize() {
|
|
// initialize shadow dom
|
|
const shadow = this.attachShadow({ mode: 'open' })
|
|
|
|
if (style) {
|
|
const styleElement = document.createElement('style')
|
|
styleElement.textContent = style
|
|
this.shadowRoot?.appendChild(styleElement)
|
|
}
|
|
|
|
const parser = new DOMParser()
|
|
const doc = parser.parseFromString(template, 'text/html')
|
|
|
|
const mainContent = doc.body.firstElementChild
|
|
let rootElement
|
|
|
|
if (mainContent) {
|
|
rootElement = document.importNode(mainContent, true)
|
|
shadow.appendChild(rootElement)
|
|
} else {
|
|
const container = document.createElement('div')
|
|
container.innerHTML = template
|
|
rootElement = container
|
|
shadow.appendChild(container)
|
|
}
|
|
|
|
this._processTemplateMarcos(rootElement)
|
|
}
|
|
|
|
private _triggerDomUpdates(keyPath: string) {
|
|
if (this._stateToElementsMap[keyPath]) {
|
|
const updateQueue = new Set<HTMLElement>()
|
|
|
|
this._stateToElementsMap[keyPath].forEach(element => {
|
|
updateQueue.add(element)
|
|
})
|
|
|
|
this._scheduleUpdate(updateQueue)
|
|
}
|
|
|
|
// Update text bindings that depend on this state
|
|
if (this._textBindings) {
|
|
this._textBindings.forEach(binding => {
|
|
if (binding.expr === keyPath || binding.expr.startsWith(keyPath + '.')) {
|
|
this._updateTextNode(binding.node, binding.expr, binding.originalContent)
|
|
}
|
|
})
|
|
}
|
|
|
|
// Update attribute bindings that depend on this state
|
|
if (this._attributeBindings) {
|
|
this._attributeBindings.forEach(binding => {
|
|
if (binding.expr === keyPath || binding.expr.startsWith(keyPath + '.')) {
|
|
const value = this._getNestedState(binding.expr)
|
|
if (value !== undefined) {
|
|
binding.element.setAttribute(binding.attrName, String(value))
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
private _scheduleUpdate(elements: Set<HTMLElement>) {
|
|
requestAnimationFrame(() => {
|
|
elements.forEach(element => {
|
|
this._updateElement(element)
|
|
})
|
|
})
|
|
}
|
|
|
|
private _updateElement(element: HTMLElement) {
|
|
const renderFunction = (element as any)._renderFunction
|
|
if (renderFunction) {
|
|
// Set rendering context
|
|
this._currentRenderingElement = element
|
|
|
|
// Execute rendering
|
|
const result = renderFunction()
|
|
|
|
// Update DOM
|
|
if (typeof result === 'string') {
|
|
element.innerHTML = result
|
|
} else if (result instanceof Node) {
|
|
element.innerHTML = ''
|
|
element.appendChild(result)
|
|
}
|
|
|
|
// Clear rendering context
|
|
this._currentRenderingElement = null
|
|
}
|
|
}
|
|
|
|
private _processTemplateMarcos(element: Element) {
|
|
/*
|
|
* We define that those prefix are available as macros:
|
|
* - @ means event binding marco, such as @click="handleClick"
|
|
* - : means dynamic attribute marco, such as :src="imageUrl"
|
|
* - % means component controlling marco, such as %if="condition", %for="item in items" and %connect="stateName"
|
|
*/
|
|
|
|
// Traverse all child nodes, including text nodes
|
|
const walker = document.createTreeWalker(
|
|
element,
|
|
NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT,
|
|
null
|
|
)
|
|
|
|
// Store nodes and expressions that need to be updated
|
|
const textBindings: Array<{ node: Text, expr: string, originalContent: string }> = []
|
|
|
|
// Traverse the DOM tree
|
|
let currentNode: Node | null
|
|
while (currentNode = walker.nextNode()) {
|
|
// Handle text nodes
|
|
if (currentNode.nodeType === Node.TEXT_NODE) {
|
|
const textContent = currentNode.textContent || ''
|
|
const textNode = currentNode as Text
|
|
|
|
// Check if it contains Handlebars expressions {{ xxx }}
|
|
if (textContent.includes('{{')) {
|
|
// Save the original content, including expressions
|
|
const originalContent = textContent
|
|
|
|
// Record nodes and expressions that need to be updated
|
|
const matches = textContent.match(/\{\{\s*([^}]+)\s*\}\}/g)
|
|
if (matches) {
|
|
matches.forEach(match => {
|
|
// Extract the expression content, removing {{ }} and spaces
|
|
const expr = match.replace(/\{\{\s*|\s*\}\}/g, '').trim()
|
|
|
|
// Store the node, expression, and original content for later updates
|
|
textBindings.push({ node: textNode, expr, originalContent })
|
|
|
|
// Set the initial value
|
|
this._updateTextNode(textNode, expr, originalContent)
|
|
|
|
// Add dependency relationship for this state path
|
|
if (!this._stateToElementsMap[expr]) {
|
|
this._stateToElementsMap[expr] = new Set()
|
|
}
|
|
this._stateToElementsMap[expr].add(textNode as unknown as HTMLElement)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
// Handle element nodes (can extend to handle attribute bindings, etc.)
|
|
else if (currentNode.nodeType === Node.ELEMENT_NODE) {
|
|
// Handle element attribute bindings, such as <img src="{{ imageUrl }}">
|
|
const element = currentNode as Element
|
|
|
|
// Traverse all marco attributes
|
|
|
|
// Detect :attr="" bindings, such as :src="imageUrl"
|
|
Array.from(element.attributes).forEach(attr => {
|
|
if (attr.name.startsWith(':')) {
|
|
const attrName = attr.name.substring(1) // Remove ':'
|
|
const expr = attr.value.trim()
|
|
|
|
// Remove the attribute, as it is not a standard HTML attribute
|
|
element.removeAttribute(attr.name)
|
|
|
|
// Set up attribute binding
|
|
this._setupAttributeBinding(element, attrName, expr, attr.value)
|
|
}
|
|
})
|
|
|
|
// Process @event bindings, such as @click="handleClick"
|
|
const eventBindings = Array.from(element.attributes).filter(attr => attr.name.startsWith('@'))
|
|
eventBindings.forEach(attr => {
|
|
const eventName = attr.name.substring(1) // Remove '@'
|
|
const handlerValue = attr.value.trim()
|
|
|
|
// Remove the attribute, as it is not a standard HTML attribute
|
|
element.removeAttribute(attr.name)
|
|
|
|
// Handle different types of event handlers
|
|
if (handlerValue.includes('=>')) {
|
|
// Handle arrow function: @click="e => setState('count', count + 1)"
|
|
this._setupArrowFunctionHandler(element, eventName, handlerValue)
|
|
} else if (handlerValue.includes('(') && handlerValue.includes(')')) {
|
|
// Handle function call: @click="increment(5)"
|
|
this._setupFunctionCallHandler(element, eventName, handlerValue)
|
|
} else if (typeof (this as any)[handlerValue] === 'function') {
|
|
// Handle method reference: @click="handleClick"
|
|
element.addEventListener(eventName, (this as any)[handlerValue].bind(this))
|
|
} else {
|
|
// Handle simple expression: @click="count++" or @input="name = $event.target.value"
|
|
this._setupExpressionHandler(element, eventName, handlerValue)
|
|
}
|
|
})
|
|
|
|
// Process %-started marcos, such as %connect="stateName", %if="condition", %for="item in items"
|
|
const macroBindings = Array.from(element.attributes).filter(attr => attr.name.startsWith('%'))
|
|
macroBindings.forEach(attr => {
|
|
const macroName = attr.name.substring(1) // Remove '%'
|
|
const expr = attr.value.trim()
|
|
|
|
// Remove the attribute, as it is not a standard HTML attribute
|
|
element.removeAttribute(attr.name)
|
|
|
|
// Handle different types of macros
|
|
if (macroName === 'connect') // Handle state connection: %connect="stateName"
|
|
this._setupTwoWayBinding(element, expr)
|
|
else if (macroName === 'if')
|
|
this._setupConditionRendering(element, expr)
|
|
else if (macroName === 'for')
|
|
this._setupAttributeBinding(element, 'data-laterano-for', expr, attr.value)
|
|
else
|
|
console.warn(`Unknown macro: %${macroName}`)
|
|
})
|
|
|
|
|
|
}
|
|
}
|
|
|
|
// Save text binding relationships for updates
|
|
this._textBindings = textBindings
|
|
}
|
|
|
|
// Handle two-way data binding (%connect marco)
|
|
private _setupTwoWayBinding(element: Element, expr: string) {
|
|
console.log("setting up two-way binding for", expr)
|
|
|
|
// Get the initial value
|
|
const value = this._getNestedState(expr)
|
|
|
|
// Set the initial value
|
|
if (value !== undefined)
|
|
element.setAttribute('data-laterano-connect', String(value))
|
|
else
|
|
console.error(`State \`${expr}\` not found in the component state. Although Laterano will try to work with it, it may has potentially unexpected behavior.`)
|
|
|
|
// Add event listener for input events
|
|
element.addEventListener('input', (event: Event) => {
|
|
const target = event.target as HTMLInputElement
|
|
const newValue = target.value
|
|
|
|
// Update the state
|
|
this.setState(expr, newValue)
|
|
})
|
|
|
|
// Add event listener for state changes
|
|
this._statesListeners[expr] = (newValue: any) => {
|
|
if (element instanceof HTMLInputElement) {
|
|
element.value = newValue
|
|
} else {
|
|
element.setAttribute('data-laterano-connect', String(newValue))
|
|
}
|
|
}
|
|
}
|
|
|
|
// Handle condition rendering (%if marco)
|
|
private _setupConditionRendering(element: Element, expr: string) {
|
|
console.log("setting up condition rendering for", expr)
|
|
|
|
const placeholder = document.createComment(` %if: ${expr} `)
|
|
element.parentNode?.insertBefore(placeholder, element)
|
|
|
|
this._conditionalElements.set(element, {
|
|
expr,
|
|
placeholder,
|
|
isPresent: false
|
|
})
|
|
|
|
this._evaluateIfCondition(element, expr)
|
|
|
|
const statePaths = this._extractStatePathsFromExpression(expr)
|
|
statePaths.forEach(path => {
|
|
if (!this._stateToElementsMap[path]) {
|
|
this._stateToElementsMap[path] = new Set()
|
|
}
|
|
this._stateToElementsMap[path].add(element as HTMLElement)
|
|
})
|
|
}
|
|
|
|
private _evaluateIfCondition(element: Element, condition: string) {
|
|
const info = this._conditionalElements.get(element)
|
|
if (!info) return
|
|
|
|
// Evaluate the condition
|
|
const result = this._evaluateExpression(condition)
|
|
const shouldShow = Boolean(result)
|
|
if (shouldShow) console.log(`Condition "${condition}" is true, showing element.`)
|
|
else console.log(`Condition "${condition}" is false, hiding element.`)
|
|
|
|
if (info.isPresent)
|
|
|
|
if (shouldShow !== info.isPresent) {
|
|
if (shouldShow) // Insert the element back into the DOM
|
|
info.placeholder.parentNode?.insertBefore(element, info.placeholder.nextSibling)
|
|
else // Remove the element from the DOM
|
|
element.parentNode?.removeChild(element)
|
|
|
|
// Update the state
|
|
info.isPresent = shouldShow
|
|
this._conditionalElements.set(element, info)
|
|
}
|
|
}
|
|
|
|
private _evaluateExpression(expression: string): any {
|
|
try {
|
|
// get the state keys and values
|
|
if (this._states[expression] !== undefined)
|
|
return this._states[expression]
|
|
|
|
// execute the expression
|
|
const stateKeys = Object.keys(this._states)
|
|
const stateValues = Object.values(this._states)
|
|
|
|
const func = new Function(...stateKeys, `return ${expression}`)
|
|
const execRes = func(...stateValues)
|
|
if (typeof execRes !== 'boolean')
|
|
throw new Error(`The expression "${expression}" must return a boolean value.`)
|
|
return execRes
|
|
} catch (error) {
|
|
console.error(`Error evaluating expression: ${expression}`, error)
|
|
return undefined
|
|
}
|
|
}
|
|
|
|
private _extractStatePathsFromExpression(expression: string): string[] {
|
|
const matches = expression.match(/[a-zA-Z_$][a-zA-Z0-9_$]*/g) || []
|
|
return matches.filter(match =>
|
|
!['true', 'false', 'null', 'undefined', 'this'].includes(match)
|
|
)
|
|
}
|
|
|
|
// Handle arrow function
|
|
private _setupArrowFunctionHandler(element: Element, eventName: string, handlerValue: string) {
|
|
element.addEventListener(eventName, (event: Event) => {
|
|
try {
|
|
// Arrow function parsing
|
|
const splitted = handlerValue.split('=>')
|
|
if (splitted.length !== 2) {
|
|
throw new Error(`Invalid arrow function syntax: ${handlerValue}`)
|
|
}
|
|
const paramsStr = (() => {
|
|
if (splitted[0].includes('(')) {
|
|
return splitted[0].trim()
|
|
} else {
|
|
return `(${splitted[0].trim()})`
|
|
}
|
|
})()
|
|
const bodyStr = splitted[1].trim()
|
|
|
|
// Check if the function body is wrapped in {}
|
|
const isMultiline = bodyStr.startsWith('{') && bodyStr.endsWith('}')
|
|
|
|
// If it is a multiline function body, remove the outer braces
|
|
if (isMultiline) {
|
|
// Remove the outer braces
|
|
let bodyStr = handlerValue.split('=>')[1].trim()
|
|
bodyStr = bodyStr.substring(1, bodyStr.length - 1)
|
|
|
|
// Build code for multiline arrow function
|
|
const functionCode = `
|
|
return function${paramsStr} {
|
|
${bodyStr}
|
|
}
|
|
`
|
|
|
|
// Create context object
|
|
const context = this._createHandlerContext(event, element)
|
|
|
|
// Create and call function
|
|
const handlerFn = new Function(functionCode).call(null)
|
|
handlerFn.apply(context, [event])
|
|
} else {
|
|
// Single line arrow function, directly return expression result
|
|
const functionCode = `
|
|
return function${paramsStr} {
|
|
return ${bodyStr}
|
|
}
|
|
`
|
|
|
|
// Create context object
|
|
const context = this._createHandlerContext(event, element)
|
|
|
|
// Create and call function
|
|
const handlerFn = new Function(functionCode).call(null)
|
|
handlerFn.apply(context, [event])
|
|
}
|
|
} catch (err) {
|
|
console.error(`Error executing arrow function handler: ${handlerValue}`, err)
|
|
}
|
|
})
|
|
}
|
|
|
|
// Create handler context
|
|
private _createHandlerContext(event: Event, element: Element) {
|
|
// Basic context, including state
|
|
const context: {
|
|
[key: string]: any
|
|
$event: Event
|
|
$el: Element
|
|
this: CustomElementImpl // Provide reference to the component instance
|
|
setState: (keyPath: string, value: any) => void
|
|
getState: (keyPath: string) => any
|
|
} = {
|
|
...this._states,
|
|
$event: event,
|
|
$el: element,
|
|
this: this, // Provide reference to the component instance
|
|
setState: this.setState.bind(this),
|
|
getState: this.getState.bind(this)
|
|
}
|
|
|
|
// Add all methods of the component
|
|
Object.getOwnPropertyNames(Object.getPrototypeOf(this)).forEach(name => {
|
|
if (typeof (this as any)[name] === 'function' && name !== 'constructor') {
|
|
context[name] = (this as any)[name].bind(this)
|
|
}
|
|
})
|
|
|
|
return context
|
|
}
|
|
|
|
// Handle function call, such as @click="increment(5)"
|
|
private _setupFunctionCallHandler(element: Element, eventName: string, handlerValue: string) {
|
|
element.addEventListener(eventName, (event: Event) => {
|
|
try {
|
|
// Create context object
|
|
const context = this._createHandlerContext(event, element)
|
|
|
|
// Create and execute function call
|
|
const fnStr = `
|
|
with(this) {
|
|
${handlerValue}
|
|
}
|
|
`
|
|
|
|
new Function(fnStr).call(context)
|
|
} catch (err) {
|
|
console.error(`Error executing function call handler: ${handlerValue}`, err)
|
|
}
|
|
})
|
|
}
|
|
|
|
// Handle simple expression, such as @click="count++" or @input="name = $event.target.value"
|
|
private _setupExpressionHandler(element: Element, eventName: string, handlerValue: string) {
|
|
element.addEventListener(eventName, (event: Event) => {
|
|
try {
|
|
// Create context object
|
|
const context = this._createHandlerContext(event, element)
|
|
|
|
// Create expression function
|
|
const fnStr = `
|
|
with(this) {
|
|
${handlerValue}
|
|
}
|
|
`
|
|
|
|
// Execute expression
|
|
const result = new Function(fnStr).call(context)
|
|
|
|
// If the expression returns a value, it can be used for two-way binding
|
|
return result
|
|
} catch (err) {
|
|
console.error(`Error executing expression handler: ${handlerValue}`, err)
|
|
}
|
|
})
|
|
}
|
|
|
|
// Update text node
|
|
private _updateTextNode(node: Text, expr: string, template: string) {
|
|
// Replace all expressions with the current state value
|
|
let newContent = template
|
|
|
|
const replaceExpr = (match: string, expr: string) => {
|
|
// Get the value of the expression
|
|
const value = this._getNestedState(expr.trim())
|
|
return value !== undefined ? String(value) : ''
|
|
}
|
|
|
|
// Replace all {{ xxx }} expressions
|
|
newContent = newContent.replace(/\{\{\s*([^}]+)\s*\}\}/g, replaceExpr)
|
|
|
|
// Update node content
|
|
node.textContent = newContent
|
|
}
|
|
|
|
// Set up attribute binding
|
|
private _setupAttributeBinding(element: Element, attrName: string, expr: string, template: string) {
|
|
// Initialize attribute value
|
|
const value = this._getNestedState(expr)
|
|
|
|
// Set the initial attribute
|
|
if (value !== undefined) {
|
|
element.setAttribute(attrName, String(value))
|
|
}
|
|
|
|
// Add update function to the map
|
|
if (!this._attributeBindings) {
|
|
this._attributeBindings = []
|
|
}
|
|
|
|
this._attributeBindings.push({
|
|
element,
|
|
attrName,
|
|
expr,
|
|
template
|
|
})
|
|
}
|
|
|
|
// Get nested state value
|
|
private _getNestedState(path: string): any {
|
|
// Handle nested paths, such as "profile.name"
|
|
const parts = path.split('.')
|
|
let result = this._states
|
|
|
|
for (const part of parts) {
|
|
if (result === undefined || result === null) {
|
|
return undefined
|
|
}
|
|
result = result[part]
|
|
}
|
|
|
|
return result
|
|
}
|
|
|
|
connectedCallback() {
|
|
if (onMount) onMount.call(this)
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
if (onUnmount) onUnmount.call(this)
|
|
}
|
|
|
|
static get observedAttributes() {
|
|
return ['data-attribute']
|
|
}
|
|
|
|
attributeChangedCallback(attrName: string, oldValue: string, newValue: string) {
|
|
if (onAttributeChanged) onAttributeChanged(attrName, oldValue, newValue)
|
|
}
|
|
|
|
// state manager
|
|
setState(keyPath: string, value: any) {
|
|
this._states[keyPath] = value
|
|
}
|
|
|
|
getState(keyPath: string) {
|
|
return this._states[keyPath]
|
|
}
|
|
}
|
|
|
|
customElements.define(tag, CustomElementImpl)
|
|
} |