@vyckr/tachyon 1.1.9 → 1.1.10

package/src/client/template.js

@@ -0,0 +1,66 @@
+export default async function(props) {
+
+    // imports
+
+    // script
+
+    if(props) props.split(';').map(prop => eval(prop))
+
+    const compRenders = new Map()
+
+    return async function(elemId, event, compId) {
+
+        const elemIds = new Map()
+
+        elemIds.set('@', new Map())
+        elemIds.set('id', new Map())
+        elemIds.set('bind', new Map())
+
+        const ty_generateId = (hash, source) => {
+
+            hash = compId ? `${hash}-${compId}` : hash
+
+            if(elemIds.get(source).has(hash)) {
+
+                const degree = elemIds.get(source).get(hash)
+
+                elemIds.get(source).set(hash, degree + 1)
+
+                return "ty-" + hash + "-" + degree
+            }
+
+            elemIds.get(source).set(hash, 1)
+
+            return "ty-" + hash + "-0"
+        }
+
+        const ty_invokeEvent = (hash, action) => {
+            
+            if(elemId === ty_generateId(hash, '@')) {
+                
+                if(event && !action.endsWith(')')) {
+                    return `${action}('${event}')`
+                }
+                return action
+            }
+            return "''"
+        }
+
+        const ty_assignValue = (hash, variable) => {
+
+            if(elemId === ty_generateId(hash, 'bind') && event) {
+                return `${variable} = '${event.value}'`
+            }
+
+            return variable
+        }
+
+        let elements = '';
+
+        let render;
+
+        // inners
+
+        return elements
+    }
+}

package/src/client/yon.ts

@@ -20,12 +20,16 @@ export default class Yon {
 
     static async createStaticRoutes() {
 
-        Router.reqRoutes["/render.js"] = {
-            GET: async () => new Response(await Bun.file(`${import.meta.dir}/render.js`).bytes(), { headers: { 'Content-Type': 'application/javascript' } })
-        }
+        const result = await Bun.build({
+            entrypoints: [`${import.meta.dir}/render.ts`, `${import.meta.dir}/hmr.ts`],
+            minify: true
+        })
 
-        Router.reqRoutes["/hmr.js"] = {
-            GET: async () => new Response(await Bun.file(`${import.meta.dir}/hmr.js`).bytes(), { headers: { 'Content-Type': 'application/javascript' } })
+        for(const output of result.outputs) {
+
+            Router.reqRoutes[output.path.replace('./', '/')] = {
+                GET: async () => new Response(output, { headers: { 'Content-Type': 'application/javascript' } })
+            }
         }
 
         Router.reqRoutes["/routes.json"] = {
@@ -54,158 +58,167 @@ export default class Yon {
         return { html, script:  html.querySelectorAll('script')[0] }
     }
 
-    private static parseHTML(elements: HTMLDivElement, imports: Map<string, Set<string>> = new Map<string, Set<string>>()) {
+    private static parseHTML(
+        elements: HTMLCollection,
+        imports: Map<string, Set<string>> = new Map<string, Set<string>>()
+    ): Array<{ static?: string; render?: string; element?: string }> {
+        
+        const parsed: Array<{ static?: string; render?: string; element?: string }> = [];
+        
+        const parseAttrs = (attrs: NamedNodeMap, hash: string) => Array.from(attrs).map(attr => {
+            
+            if(attr.name.startsWith('@')) {
+                return `${attr.name}="` + "${eval(ty_invokeEvent('" + hash + "', '" + attr.value + "'))}" + '"'
+            }
+
+            if(attr.name === ":value") {
+                return `${attr.name.replace(':', '')}="` + "${eval(ty_assignValue('" + hash + "', '" + attr.value + "'))}" + '"'
+            }
+            
+            return `${attr.name}="${attr.value}"`
+        })
 
-        const parsed: { static?: string, render?: string, element?: string }[] = []
+        const interpolateText = (textContext: string) => textContext.replace(/\{([^{}]+)\}/g, '${$1}').replace(/\{\{([^{}]+)\}\}/g, '{${$1}}')
         
-        for (const element of elements.children) {
+        for (const element of Array.from(elements)) {
 
-            if(element.tagName !== "SCRIPT") {
+            if (element.tagName === "SCRIPT") {
+                continue; // Skip script tags as they're handled separately
+            }
 
-                if(element.tagName.startsWith('TY-')) {
+            if(element.tagName === 'STYLE') {
+                element.innerHTML = `@scope { ${element.innerHTML} }`
+                parsed.push({ element: `\`${element.outerHTML}\`` })
+                continue
+            }
 
-                    const component = element.tagName.split('-')[1].toLowerCase()
-    
-                    if(component === 'loop') {
-                        const attribute = element.attributes[0];
-                        if (attribute.name === ':for') parsed.push({ render: `for(${attribute.value}) {`})
-                    } else if(component === "logic") {
-                        const attribute = element.attributes[0]
-                        if (attribute.name === ':if') parsed.push({ render: `if(${attribute.value}) {`});
-                        if (attribute.name === ':else-if') parsed.push({ render: `else if(${attribute.value}) {`});
-                        if (attribute.name === ':else') parsed.push({ render: `else {`});
-                    } else {
-    
-                        const exports: string[] = []
-    
-                        const filepath = Yon.compMapping.get(component)
-    
-                        if(filepath) {
-    
-                            for(let i = 0; i < element.attributes.length; i++) {
-    
-                                if(element.attributes[i].name.startsWith(':')) {
-                                    const propName = element.attributes[i].name.slice(1)
-                                    exports.push(`${propName} = ${"${" + element.attributes[i].value + "}"}`)
-                                } else {
-                                    const propName = element.attributes[i].name
-                                    exports.push(`${propName} = "${element.attributes[i].value}"`)
-                                }
-                            }
-    
-                            if(imports.has(filepath)) {
-    
-                                if(!imports.get(filepath)?.has(component)) {
-                                    parsed.push({ static: `const { default: ${component} } = import('/components/${filepath}')`})
-                                    imports.get(filepath)?.add(component)
-                                }
-    
-                            } else {
-    
-                                parsed.push({ static: `const { default: ${component} } = await import('/components/${filepath}')`})
-                                imports.set(filepath, new Set<string>([component]))
-                            }
-    
-                            const hash = Bun.randomUUIDv7().split('-')[1]
-    
-                            parsed.push({ static: `const comp_${hash} = await ${component}(\`${exports.join(';')}\`)`})
+            if(element.tagName.startsWith('TY') && !element.tagName.endsWith('LOOP') && !element.tagName.endsWith('LOGIC')) {
+                
+                const component = element.tagName.split('-')[1].toLowerCase()
+
+                const filepath = Yon.compMapping.get(component)
+
+                if(filepath) {
 
-                            parsed.push({ render: `elements += "<div>"` })
+                    if(imports.has(filepath)) {
     
-                            parsed.push({ render: `elements += comp_${hash}(execute && execute.compId === "ty-${hash}" ? execute : null).replaceAll('class="', 'class="ty-${hash} ')`})
-                        
-                            parsed.push({ render: `elements += "</div>"` })
+                        if(!imports.get(filepath)?.has(component)) {
+                            parsed.push({ static: `const { default: ${component} } = import('/components/${filepath}')`})
+                            imports.get(filepath)?.add(component)
                         }
+
+                    } else {
+
+                        parsed.push({ static: `const { default: ${component} } = await import('/components/${filepath}')`})
+                        imports.set(filepath, new Set<string>([component]))
                     }
-    
-                    const temp = new JSDOM('').window.document.createElement('div');
-                    temp.innerHTML = element.innerHTML
-    
-                    parsed.push(...this.parseHTML(temp, imports))
-    
-                    if(component === "loop" || component === "logic") parsed.push({ render: '}'})
-    
-                } else if(element.tagName === "STYLE") {
-    
-                    element.innerHTML = `@scope { ${element.innerHTML} }`
-    
-                    parsed.push({ element: `\`${element.outerHTML}\`` })
-    
+                }
+            }
+
+            const hash = Bun.randomUUIDv7().split('-')[3]
+
+            if(!element.id && !element.tagName.startsWith('TY-')) {
+                element.setAttribute(':id', "ty_generateId('" + hash + "', 'id')")
+            }
+            
+            if(element.children.length > 0) {
+
+                const text = Array.from(element.childNodes).reduce((a, b) => {
+                    return a + (b.nodeType === 3 ? b.textContent : '')
+                }, '')
+
+                parsed.push({ element: `\`<${element.tagName.toLowerCase()} ${parseAttrs(element.attributes, hash).join(" ")}>\`` })
+                if(text) parsed.push({ element: `\`${interpolateText(text)}\`` })
+                parsed.push(...this.parseHTML(element.children, imports))
+                parsed.push({ element: `\`</${element.tagName.toLowerCase()}>\`` })
+
+            } else {
+
+                if(element.outerHTML.includes('</')) {
+                    parsed.push({ element: `\`<${element.tagName.toLowerCase()} ${parseAttrs(element.attributes, hash).join(" ")}>\`` })
+                    if(element.textContent) parsed.push({ element: `\`${interpolateText(element.textContent)}\`` })
+                    parsed.push({ element: `\`</${element.tagName.toLowerCase()}>\`` })
                 } else {
-    
-                    for(let i = 0; i < element.attributes.length; i++) {
-    
-                        const attr = element.attributes[i]
-    
-                        if(attr.name.startsWith(':')) {
-    
-                            const attrName = attr.name.slice(1)
-    
-                            element.removeAttribute(attr.name)
-                            element.setAttribute(attrName, "${" + attr.value + "}")
-                        }
-                    }
-    
-                    parsed.push({ element: `\`${element.outerHTML}\`` })
+                    parsed.push({ element: `\`<${element.tagName.toLowerCase()} ${parseAttrs(element.attributes, hash).join(" ")} />\`` })
                 }
             }
         }
-
-        return parsed
+    
+        return parsed;
     }
 
-    private static createJSData(html: { static?: string, render?: string, element?: string }[], scriptTag?: HTMLScriptElement) {
-
-        const hash = Bun.randomUUIDv7().split('-')[3]
+    private static async createJSData(html: { static?: string, render?: string, element?: string }[], scriptTag?: HTMLScriptElement) {
 
-        const outers: string[] = []
         const inners: string[] = []
+        const outers: string[] = []
 
         html.forEach(h => {
-            if(h.static) outers.push(h.static)
             if(h.element) {
-                const temp = new JSDOM('').window.document.createElement('div');
-                temp.innerHTML = h.element
-                if(temp.children[0].tagName !== 'STYLE') temp.children[0].classList.add(`ty-${hash}`)
-                inners.push(`elements += ${temp.innerHTML}`)
+                if(h.element.includes('<ty-') || h.element.includes('</ty-')) {
+                    inners.push(h.element)
+                } else inners.push(`elements+=${h.element}`)
             }
-            if(h.render) inners.push(h.render)
+            if(h.static) outers.push(h.static)
         })
 
-        return `
-            
-            export default async function(props) {
-
-                ${scriptTag ? scriptTag.innerHTML : ''}
-
-                ${outers.join('\n')}
-
-                props?.split(';').map(exp => eval(exp))
-
-                return function(execute) {
-
-                    if(execute) {
-                        const { classId, compId, func } = execute
-                        if(classId === "ty-${hash}" || compId === "ty-${hash}") {
-                            eval(func)
-                        }
-                    }
+        const tempFile = await Bun.file(`${import.meta.dir}/template.js`).text()
+        
+        return tempFile.replaceAll('// imports', outers.join('\n'))
+                        .replaceAll('// script', scriptTag?.innerHTML ?? '')
+                        .replaceAll('// inners', inners.join('\n'))
+                        .replaceAll(/`<ty-loop :for="(.*?)">`|`<\/ty-loop>`/g, (match, p1) => {
+                            if(p1) return `for(${p1}) {`
+                            else return '}'
+                        })
+                        .replaceAll(/`<ty-logic :if="(.*?)">`|`<\/ty-logic>`/g, (match, p1) => {
+                            if(p1) return `if(${p1}) {`
+                            else return '}'
+                        })
+                        .replaceAll(/`<ty-logic :else-if="(.*?)">`|`<\/ty-logic>`/g, (match, p1) => {
+                            if(p1) return `else if(${p1}) {`
+                            else return '}'
+                        })
+                        .replaceAll(/`<ty-logic :else="">`|`<\/ty-logic>`/g, (match, p1) => {
+                            if(p1) return `else {`
+                            else return '}'
+                        })
+                        .replaceAll(/:([^"]*)="([^"]*)"/g, '$1="${$2}"')
+                        .replaceAll(/`<\/ty-(\w+)\s*>`/g, '')
+                        .replaceAll(/`<ty-([a-zA-Z0-9-]+)(?:\s+([^>]*))>`/g, (match, component, atrributes) => {
+                         
+                            const matches = atrributes.matchAll(/([a-zA-Z0-9-]+)="([^"]*)"/g)
+
+                            const exports: string[] = []
+                            
+                            for(const [_, key, value] of matches) {
+                                exports.push(`${key}=${value}`)
+                            }
+                            
+                            const hash = Bun.randomUUIDv7().split('-')[3]
+                            
+                            return `
+                                elements += '<div>'
+
+                                if(!compRenders.has('${hash}')) {
+                                    render = await ${component}(\`${exports.join(';')}\`)
+                                    elements += await render(elemId, event, '${hash}')
+                                    compRenders.set('${hash}', render)
+                                } else {
+                                    render = compRenders.get('${hash}')
+                                    elements += await render(elemId, event, '${hash}')
+                                }
 
-                    let elements = '';
-                
-                    ${inners.join('\n')}
-                    
-                    return elements
-                }
-            }
-        `
+                                elements += '</div>'
+                            `
+                        })
+                        
     }
 
     private static async addToStatix(html: HTMLDivElement, script: HTMLScriptElement, route: string, dir: 'pages' | 'components') {
         
-        const module = Yon.parseHTML(html)
+        const module = Yon.parseHTML(html.children)
 
-        const jsData = Yon.createJSData(module, script)
+        const jsData = await Yon.createJSData(module, script)
 
         route = route.replace('.html', `.${script?.lang || 'js'}`)
 

package/src/serve.ts

@@ -27,59 +27,59 @@ await configureRoutes()
 
 const server = Bun.serve({
     routes: Router.reqRoutes,
-    // websocket: {
-    //     async open(ws: ServerWebSocket<WebSocketData>) {
+    websocket: {
+        async open(ws: ServerWebSocket<WebSocketData>) {
 
-    //         const { handler, path } = ws.data
+            const { handler, path } = ws.data
 
-    //         const proc = Bun.spawn({
-    //             cmd: [handler],
-    //             stdout: 'inherit',
-    //             stderr: "pipe",
-    //             stdin: "pipe"
-    //         })
+            const proc = Bun.spawn({
+                cmd: [handler],
+                stdout: 'inherit',
+                stderr: "pipe",
+                stdin: "pipe"
+            })
  
-    //         Tach.webSockets.set(ws, proc)
+            Tach.webSockets.set(ws, proc)
 
-    //         console.info(`WebSocket Connected - ${path} - ${proc.pid}`)
+            console.info(`WebSocket Connected - ${path} - ${proc.pid}`)
 
-    //         for await(const ev of watch(`/tmp`)) {
+            for await(const ev of watch(`/tmp`)) {
 
-    //             if(ev.filename === proc.pid.toString()) {
+                if(ev.filename === proc.pid.toString()) {
 
-    //                 const status = ws.send(Bun.mmap(`/tmp/${proc.pid}`))
+                    const status = ws.send(Bun.mmap(`/tmp/${proc.pid}`))
 
-    //                 console.info(`WebSocket Message Sent - ${path} - ${proc.pid} - ${status} byte(s)`)
-    //             }
-    //         }
-    //     },
-    //     async message(ws: ServerWebSocket<WebSocketData>, message: string) {
+                    console.info(`WebSocket Message Sent - ${path} - ${proc.pid} - ${status} byte(s)`)
+                }
+            }
+        },
+        async message(ws: ServerWebSocket<WebSocketData>, message: string) {
 
-    //         const proc = Tach.webSockets.get(ws)!
+            const proc = Tach.webSockets.get(ws)!
 
-    //         const { ctx, path } = ws.data
+            const { ctx, path } = ws.data
 
-    //         ctx.body = message
+            ctx.body = message
 
-    //         proc.stdin.write(JSON.stringify(ctx))
+            proc.stdin.write(JSON.stringify(ctx))
 
-    //         proc.stdin.flush()
+            proc.stdin.flush()
 
-    //         console.info(`WebSocket Message Received - ${path} - ${proc.pid} - ${message.length} byte(s)`)
-    //     },
-    //     close(ws, code, reason) {
+            console.info(`WebSocket Message Received - ${path} - ${proc.pid} - ${message.length} byte(s)`)
+        },
+        close(ws, code, reason) {
 
-    //         const { path } = ws.data
+            const { path } = ws.data
 
-    //         const proc = Tach.webSockets.get(ws)!
+            const proc = Tach.webSockets.get(ws)!
 
-    //         proc.stdin.end()
+            proc.stdin.end()
 
-    //         Tach.webSockets.delete(ws)
+            Tach.webSockets.delete(ws)
 
-    //         console.info(`WebSocket Disconnected - ${path} - ${proc.pid} - Code (${code}): ${reason}`)
-    //     },
-    // },
+            console.info(`WebSocket Disconnected - ${path} - ${proc.pid} - Code (${code}): ${reason}`)
+        },
+    },
     port: process.env.PORT || 8080,
     hostname: process.env.HOSTNAME || '0.0.0.0',
     development: process.env.NODE_ENV === 'development'

package/components/counter.html

@@ -1,13 +0,0 @@
-<script>
-    let count;
-</script>
-
-<button @click="count++">+</button>
-<p>${count}</p>
-<button @click="count--">-</button>
-
-<style>
-    p {
-        color: blueviolet;
-    }
-</style>