@vyckr/tachyon 1.1.10 → 1.2.0

package/src/{client/template.js → compiler/render-template.js}

@@ -10,36 +10,29 @@ export default async function(props) {
 
     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 counters = { id: {}, ev: {}, bind: {} }
 
         const ty_generateId = (hash, source) => {
 
-            hash = compId ? `${hash}-${compId}` : hash
-
-            if(elemIds.get(source).has(hash)) {
-
-                const degree = elemIds.get(source).get(hash)
+            const key = compId ? hash + '-' + compId : hash
 
-                elemIds.get(source).set(hash, degree + 1)
+            const map = counters[source]
 
-                return "ty-" + hash + "-" + degree
+            if(key in map) {
+                return 'ty-' + key + '-' + map[key]++
             }
 
-            elemIds.get(source).set(hash, 1)
+            map[key] = 1
 
-            return "ty-" + hash + "-0"
+            return 'ty-' + key + '-0'
         }
 
         const ty_invokeEvent = (hash, action) => {
             
-            if(elemId === ty_generateId(hash, '@')) {
+            if(elemId === ty_generateId(hash, 'ev')) {
                 
                 if(event && !action.endsWith(')')) {
-                    return `${action}('${event}')`
+                    return action + "('" + event + "')"
                 }
                 return action
             }
@@ -49,7 +42,7 @@ export default async function(props) {
         const ty_assignValue = (hash, variable) => {
 
             if(elemId === ty_generateId(hash, 'bind') && event) {
-                return `${variable} = '${event.value}'`
+                return variable + " = '" + event.value + "'"
             }
 
             return variable

package/src/compiler/template-compiler.ts

@@ -0,0 +1,419 @@
+import Router from "../server/route-handler.js";
+import { BunRequest } from 'bun';
+import { exists } from 'node:fs/promises';
+
+interface ParsedElement {
+    static?: string;
+    element?: string;
+}
+
+interface ComponentData {
+    html: string;
+    script?: string;
+    scriptLang?: string;
+}
+
+const TEMPLATE_PATH = `${import.meta.dir}/render-template.js`;
+const ROUTES_JSON_PATH = `${import.meta.dir}/../runtime/route-manifest.json`;
+const LAYOUTS_JSON_PATH = `${import.meta.dir}/../runtime/layout-manifest.json`;
+const NOT_FOUND_PATH = `${import.meta.dir}/../runtime/shells/not-found.html`;
+
+const jsResponse = (body: BodyInit) =>
+    new Response(body, { headers: { 'Content-Type': 'application/javascript' } });
+
+const jsonResponse = (path: string) =>
+    async () => new Response(await Bun.file(path).bytes(), { headers: { 'Content-Type': 'application/json' } });
+
+export default class Yon {
+
+    private static readonly htmlMethod = 'HTML'
+    private static readonly layoutMethod = 'LAYOUT'
+    private static readonly compMapping = new Map<string, string>()
+    private static layoutMapping: Record<string, string> = {}
+
+    static getParams(request: BunRequest, route: string) {
+        const url = new URL(request.url)
+        const params = url.pathname.split('/').slice(route.split('/').length)
+        return { params: Router.parseParams(params) }
+    }
+
+    static async createStaticRoutes() {
+        Yon.compMapping.clear()
+        Yon.layoutMapping = {}
+
+        // Build client-side render + HMR scripts
+        const result = await Bun.build({
+            entrypoints: [`${import.meta.dir}/../runtime/spa-renderer.ts`, `${import.meta.dir}/../runtime/hot-reload-client.ts`],
+            minify: true
+        })
+
+        for (const output of result.outputs) {
+            Router.reqRoutes[output.path.replace('./', '/')] = {
+                GET: async () => jsResponse(output)
+            }
+        }
+
+        // JSON manifests
+        Router.reqRoutes["/routes.json"] = { GET: jsonResponse(ROUTES_JSON_PATH) }
+        Router.reqRoutes["/layouts.json"] = { GET: jsonResponse(LAYOUTS_JSON_PATH) }
+
+        // Optional user main.js
+        const main = Bun.file(`${process.cwd()}/main.js`)
+        if (await main.exists()) {
+            Router.reqRoutes["/main.js"] = {
+                GET: async () => new Response(await main.bytes(), { headers: { 'Content-Type': 'application/javascript' } })
+            }
+        }
+
+        // Bundle all client assets in parallel
+        await Promise.all([
+            Yon.bundleDependencies(),
+            Yon.bundleComponents(),
+            Yon.bundleLayouts(),
+            Yon.bundlePages(),
+            Yon.bundleAssets()
+        ])
+
+        // Write manifests after all routes are registered
+        await Promise.all([
+            Bun.write(Bun.file(ROUTES_JSON_PATH), JSON.stringify(Router.routeSlugs)),
+            Bun.write(Bun.file(LAYOUTS_JSON_PATH), JSON.stringify(Yon.layoutMapping))
+        ])
+    }
+
+    // ── Template extraction ────────────────────────────────────────────────────
+    private static async extractComponents(data: string): Promise<ComponentData> {
+        let scriptContent = '';
+        let scriptLang = 'js';
+
+        const rewriter = new HTMLRewriter()
+            .on('script', {
+                element(element) {
+                    const lang = element.getAttribute('lang');
+                    if (lang) scriptLang = lang;
+                },
+                text(text) { scriptContent += text.text; }
+            })
+
+        const htmlContent = await rewriter.transform(new Response(data)).text();
+
+        return {
+            html: htmlContent,
+            script: scriptContent || undefined,
+            scriptLang
+        };
+    }
+
+    // ── HTML → AST parsing ─────────────────────────────────────────────────────
+    private static parseHTML(
+        htmlContent: string,
+        imports: Map<string, Set<string>> = new Map()
+    ): Promise<ParsedElement[]> {
+        return new Promise((resolve) => {
+            const parsed: ParsedElement[] = [];
+            const tagStack: string[] = [];
+            let insideScript = false;
+            let insideStyle = false;
+
+            const genHash = () => Bun.randomUUIDv7().replace(/-/g, '').slice(-8);
+
+            const formatAttr = (name: string, value: string, hash: string): string => {
+                if (name.startsWith('@'))
+                    return `${name}="\${eval(ty_invokeEvent('${hash}', '${value}'))}"`;
+                if (name === ':value')
+                    return `value="\${eval(ty_assignValue('${hash}', '${value}'))}"`;
+                return `${name}="${value}"`;
+            };
+
+            const interpolate = (text: string) =>
+                text.replace(/\{([^{}]+)\}/g, '${$1}').replace(/\{\{([^{}]+)\}\}/g, '{${$1}}');
+
+            const rewriter = new HTMLRewriter()
+                .on('script', {
+                    element(el) {
+                        insideScript = true;
+                        el.onEndTag(() => { insideScript = false; });
+                    }
+                })
+                .on('style', {
+                    element(el) {
+                        insideStyle = true;
+                        el.onEndTag(() => { insideStyle = false; });
+                    },
+                    text(text) {
+                        parsed.push({ element: `\`<style>@scope { ${text.text} }</style>\`` });
+                    }
+                })
+                .on('*', {
+                    element(element) {
+                        const tag = element.tagName.toUpperCase();
+
+                        if (tag === 'SCRIPT' || tag === 'STYLE') return;
+
+                        if (tag === 'SLOT') {
+                            parsed.push({ element: '`<div id="ty-layout-slot"></div>`' });
+                            element.remove();
+                            return;
+                        }
+
+                        const hash = genHash();
+                        const tagLower = element.tagName.toLowerCase();
+                        const attrs: Record<string, string> = {};
+
+                        for (const [name, value] of element.attributes) attrs[name] = value;
+
+                        // Component import
+                        if (tag.endsWith('_')) {
+                            const compName = tagLower.slice(0, -1);
+                            const filepath = Yon.compMapping.get(compName);
+                            const isLazy = 'lazy' in attrs;
+
+                            if (filepath && compName && !isLazy) {
+                                const existing = imports.get(filepath);
+                                if (!existing || !existing.has(compName)) {
+                                    const keyword = existing ? 'const' : 'const';
+                                    const awaitPrefix = existing ? '' : 'await ';
+                                    parsed.push({ static: `${keyword} { default: ${compName} } = ${awaitPrefix}import('/components/${filepath}')` });
+                                    if (existing) existing.add(compName);
+                                    else imports.set(filepath, new Set([compName]));
+                                }
+                            }
+                        }
+
+                        // Auto-generate id for non-control, non-component elements
+                        if (!attrs.id && !tag.endsWith('_') && tag !== 'LOOP' && tag !== 'LOGIC') {
+                            attrs[':id'] = `ty_generateId('${hash}', 'id')`;
+                        }
+
+                        const attrStr = Object.entries(attrs).map(([n, v]) => formatAttr(n, v, hash)).join(' ');
+                        tagStack.push(tagLower);
+
+                        if (element.selfClosing) {
+                            parsed.push({ element: `\`<${tagLower} ${attrStr} />\`` });
+                            tagStack.pop();
+                        } else {
+                            parsed.push({ element: `\`<${tagLower} ${attrStr}>\`` });
+                        }
+                    },
+                    text(text) {
+                        if (text.text.trim() && !insideScript && !insideStyle) {
+                            parsed.push({ element: `\`${interpolate(text.text)}\`` });
+                        }
+                    }
+                })
+                .on('*', {
+                    element(element) {
+                        if (element.selfClosing) return;
+                        const tag = element.tagName.toUpperCase();
+                        if (tag === 'SCRIPT' || tag === 'STYLE') return;
+                        element.onEndTag(() => {
+                            const tagName = tagStack.pop();
+                            if (tagName) parsed.push({ element: `\`</${tagName}>\`` });
+                        });
+                    }
+                });
+
+            rewriter.transform(new Response(htmlContent)).text().then(() => resolve(parsed));
+        });
+    }
+
+    // ── JS code generation ─────────────────────────────────────────────────────
+    private static async createJSData(elements: ParsedElement[], scriptContent?: string): Promise<string> {
+        const statics: string[] = [];
+        const body: string[] = [];
+
+        for (const el of elements) {
+            if (el.static) statics.push(el.static);
+            if (el.element) {
+                // Control flow and component tags are raw JS, not concatenated
+                if (el.element.includes('<loop') || el.element.includes('</loop') ||
+                    el.element.includes('<logic') || el.element.includes('</logic') ||
+                    /<([A-Za-z0-9-]+)_\s+([^/>]*)\/>/.test(el.element)) {
+                    body.push(el.element);
+                } else {
+                    body.push(`elements+=${el.element}`);
+                }
+            }
+        }
+
+        let code = await Bun.file(TEMPLATE_PATH).text();
+
+        code = code
+            .replaceAll('// imports', statics.join('\n'))
+            .replaceAll('// script', scriptContent ?? '')
+            .replaceAll('// inners', body.join('\n'));
+
+        // Transform control flow tags to JS
+        code = code
+            .replaceAll(/`<loop :for="(.*?)">`|`<\/loop>`/g, (_, expr) => expr ? `for(${expr}) {` : '}')
+            .replaceAll(/`<logic :if="(.*?)">`|`<\/logic>`/g, (_, expr) => expr ? `if(${expr}) {` : '}')
+            .replaceAll(/`<logic :else-if="(.*?)">`|`<\/logic>`/g, (_, expr) => expr ? `else if(${expr}) {` : '}')
+            .replaceAll(/`<logic else="">`|`<\/logic>`/g, (_, expr) => expr ? `else {` : '}');
+
+        // Bind dynamic attributes :attr="expr" → attr="${expr}"
+        code = code.replaceAll(/:(\w[\w-]*)="([^"]*)"/g, '$1="${$2}"');
+
+        // Transform component invocations
+        code = code.replaceAll(/`<([A-Za-z0-9-]+)_\s+([^/>]*)\/>`/g, (_, component, attrStr) => {
+            const matches = attrStr.matchAll(/([a-zA-Z0-9-@]+)="([^"]*)"/g);
+            const props: string[] = [];
+            const events: string[] = [];
+            const hash = genHash();
+            const isLazy = /\blazy\b/.test(attrStr);
+
+            for (const [, key, value] of matches) {
+                if (key === 'lazy') continue;
+                if (key.startsWith('@')) {
+                    events.push(`${key}="${value.replace(/(ty_invokeEvent\(')([^"]+)(',[^)]+\))/g, `$1${hash}$3`)}"`);
+                } else {
+                    props.push(`${key}=${value}`);
+                }
+            }
+
+            const genId = "${ty_generateId('" + hash + "', 'id')}";
+
+            if (isLazy) {
+                const filepath = Yon.compMapping.get(component);
+                const propsEncoded = props.length ? props.join(';') : '';
+                return `
+                elements += \`<div id="${genId}" data-lazy-component="${component}" data-lazy-path="/components/${filepath}" data-lazy-props="${propsEncoded}" ${events.join(' ')}></div>\`
+                `;
+            }
+
+            return `
+                elements += \`<div id="${genId}" ${events.join(' ')}>\`
+                if(!compRenders.has('${hash}')) {
+                    render = await ${component}(\`${props.join(';')}\`)
+                    elements += await render(elemId, event, '${hash}')
+                    compRenders.set('${hash}', render)
+                } else {
+                    render = compRenders.get('${hash}')
+                    elements += await render(elemId, event, '${hash}')
+                }
+                elements += '</div>'
+            `;
+        });
+
+        return code;
+    }
+
+    // ── Build & register a single template module ──────────────────────────────
+    private static async registerModule(data: ComponentData, route: string, dir: 'pages' | 'components' | 'layouts') {
+        const parsed = await Yon.parseHTML(data.html);
+        const jsCode = await Yon.createJSData(parsed, data.script);
+
+        const srcRoute = route.replace('.html', `.${data.scriptLang || 'js'}`);
+        const tmpPath = `/tmp/${srcRoute}`;
+
+        await Bun.write(Bun.file(tmpPath), jsCode);
+
+        const result = await Bun.build({
+            entrypoints: [tmpPath],
+            external: ["*"],
+            minify: { whitespace: true, syntax: true }
+        });
+
+        const outRoute = srcRoute.replace('.ts', '.js');
+
+        Router.reqRoutes[`/${dir}/${outRoute}`] = {
+            GET: () => jsResponse(result.outputs[0])
+        };
+    }
+
+    // ── Asset bundlers ─────────────────────────────────────────────────────────
+    private static async bundleAssets() {
+        if (!await exists(Router.assetsPath)) return;
+
+        for (const route of new Bun.Glob('**/*').scanSync({ cwd: Router.assetsPath })) {
+            const file = Bun.file(`${Router.assetsPath}/${route}`);
+            Router.reqRoutes[`/assets/${route}`] = {
+                GET: async () => new Response(await file.bytes(), { headers: { 'Content-Type': file.type } })
+            };
+        }
+    }
+
+    private static async bundlePages() {
+        if (await exists(Router.routesPath)) {
+            for (const route of new Bun.Glob(`**/${Yon.htmlMethod}`).scanSync({ cwd: Router.routesPath })) {
+                await Router.validateRoute(route);
+                const data = await Yon.extractComponents(await Bun.file(`${Router.routesPath}/${route}`).text());
+                await Yon.registerModule(data, `${route}.${data.scriptLang || 'js'}`, 'pages');
+            }
+        }
+
+        // 404 page
+        const nfFile = Bun.file(`${process.cwd()}/404.html`);
+        const nfContent = await nfFile.exists()
+            ? await nfFile.text()
+            : await Bun.file(NOT_FOUND_PATH).text();
+        const nfData = await Yon.extractComponents(nfContent);
+        await Yon.registerModule(nfData, '404.html', 'pages');
+    }
+
+    private static async bundleLayouts() {
+        if (!await exists(Router.routesPath)) return;
+
+        for (const layout of new Bun.Glob(`**/${Yon.layoutMethod}`).scanSync({ cwd: Router.routesPath })) {
+            const prefix = layout === Yon.layoutMethod ? '/' : `/${layout.replace(`/${Yon.layoutMethod}`, '')}`;
+            const data = await Yon.extractComponents(await Bun.file(`${Router.routesPath}/${layout}`).text());
+            const layoutRoute = layout === Yon.layoutMethod ? Yon.layoutMethod : layout;
+            await Yon.registerModule(data, `${layoutRoute}.${data.scriptLang || 'js'}`, 'layouts');
+            Yon.layoutMapping[prefix] = `/layouts/${layoutRoute}.js`;
+        }
+    }
+
+    private static async bundleComponents() {
+        if (!await exists(Router.componentsPath)) return;
+
+        for (const comp of new Bun.Glob('**/*.html').scanSync({ cwd: Router.componentsPath })) {
+            const filename = comp.split('/').pop()!.replace('.html', '');
+            Yon.compMapping.set(filename, comp.replace('.html', '.js'));
+            const data = await Yon.extractComponents(await Bun.file(`${Router.componentsPath}/${comp}`).text());
+            await Yon.registerModule(data, comp, 'components');
+        }
+    }
+
+    private static async bundleDependencies() {
+        const packageFile = Bun.file(`${process.cwd()}/package.json`);
+        if (!await packageFile.exists()) return;
+
+        const packages = await packageFile.json();
+        const modules = Object.keys(packages.dependencies ?? {});
+        const fallbackEntries = ['index.js', 'index', 'index.node'];
+
+        for (const mod of modules) {
+            const modPackPath = `${process.cwd()}/node_modules/${mod}/package.json`;
+            const modPack = await Bun.file(modPackPath).json();
+
+            if (!modPack.main) {
+                for (const entry of fallbackEntries) {
+                    if (await Bun.file(`${process.cwd()}/node_modules/${mod}/${entry}`).exists()) {
+                        modPack.main = entry;
+                        break;
+                    }
+                }
+            }
+
+            if (!modPack.main) continue;
+
+            try {
+                const result = await Bun.build({
+                    entrypoints: [`${process.cwd()}/node_modules/${mod}/${(modPack.main as string).replace('./', '')}`],
+                    minify: true
+                });
+
+                for (const output of result.outputs) {
+                    Router.reqRoutes[`/modules/${mod}.js`] = {
+                        GET: () => jsResponse(output)
+                    };
+                }
+            } catch (e) {
+                console.warn(`Failed to bundle module '${mod}': ${(e as Error).message}`, process.pid);
+            }
+        }
+    }
+}
+
+function genHash(): string {
+    return Bun.randomUUIDv7().replace(/-/g, '').slice(-8);
+}

package/src/runtime/hot-reload-client.ts

@@ -0,0 +1,15 @@
+const HMR_RECONNECT_MS = 3000
+
+function connectHMR() {
+    fetch('/hmr').then(async res => {
+
+        for await(const _ of res.body!) {
+            window.location.reload()
+        }
+
+    }).catch(() => {
+        setTimeout(connectHMR, HMR_RECONNECT_MS)
+    })
+}
+
+connectHMR()

package/src/{client/dev.html → runtime/shells/development.html}

@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title></title>
     <script src="/main.js"></script>
-    <script src="/render.js"></script>
-    <script src="/hmr.js"></script>
+    <script src="/spa-renderer.js"></script>
+    <script src="/hot-reload-client.js"></script>
 </head>
 <body></body>
 </html>

package/src/runtime/shells/not-found.html

@@ -0,0 +1,73 @@
+<script>
+    document.title = "404 — Page Not Found"
+</script>
+
+<style>
+    .nf-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        min-height: 80vh;
+        text-align: center;
+        font-family: system-ui, -apple-system, sans-serif;
+        color: #334155;
+    }
+    .nf-code {
+        font-size: 8rem;
+        font-weight: 800;
+        letter-spacing: -0.04em;
+        background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        line-height: 1;
+        margin: 0;
+    }
+    .nf-label {
+        font-size: 1.25rem;
+        font-weight: 500;
+        color: #64748b;
+        margin: 0.5rem 0 1.5rem;
+    }
+    .nf-message {
+        font-size: 0.95rem;
+        color: #94a3b8;
+        max-width: 360px;
+        margin-bottom: 2rem;
+        line-height: 1.5;
+    }
+    .nf-home {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.65rem 1.5rem;
+        background: linear-gradient(135deg, #6366f1, #8b5cf6);
+        color: #fff;
+        text-decoration: none;
+        border-radius: 9999px;
+        font-size: 0.9rem;
+        font-weight: 500;
+        transition: transform 0.15s, box-shadow 0.15s;
+        box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
+    }
+    .nf-home:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
+    }
+    .nf-divider {
+        width: 64px;
+        height: 4px;
+        border-radius: 2px;
+        background: linear-gradient(90deg, #6366f1, #a855f7);
+        margin-bottom: 1.5rem;
+    }
+</style>
+
+<div class="nf-container">
+    <p class="nf-code">404</p>
+    <div class="nf-divider"></div>
+    <p class="nf-label">Page Not Found</p>
+    <p class="nf-message">The page you're looking for doesn't exist or has been moved.</p>
+    <a class="nf-home" href="/">&#8592; Back to Home</a>
+</div>

package/src/{client/prod.html → runtime/shells/production.html}

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title></title>
     <script src="/main.js"></script>
-    <script src="/render.js"></script>
+    <script src="/spa-renderer.js"></script>
 </head>
 <body></body>
 </html>