fusee-framework 0.1.0-alpha.1 → 1.0.1

package/app/routes/Home.ts

@@ -0,0 +1,34 @@
+import { defineComponent, signal, type SignalAccessor } from '../../framework/index.js'
+import { UserForm } from '../components/UserForm.js'
+import { CounterSection } from '../components/CounterSection.js'
+
+type HomeResult = {
+    title: SignalAccessor<string>
+    changeTitle: () => void
+    template: string
+}
+
+export const Home = defineComponent({
+    components: { UserForm, CounterSection },
+    setup(): HomeResult {
+        const title = signal('Welcome!')
+
+        return {
+            title,
+            changeTitle: () => title('Changed Title!'),
+            template: `
+                <div class="page">
+                    <h1>{{ title.toUpperCase() }}</h1>
+                    <p>This is an SPA built with my own JavaScript custom framework!</p>
+                    <p>Made with passion by Sebastian Șomu</p>
+                    
+                    <button @click="changeTitle" class="primary-btn" style="margin-bottom: 20px;">Change App Title</button>
+                    
+                    {{ UserForm }}
+                    
+                    {{ CounterSection :pageTitle="title" }}
+                </div>
+            `
+        }
+    }
+})

package/app/routes/TestFor.js

@@ -0,0 +1,43 @@
+import { defineComponent, signal } from '../../framework/index.js'
+
+export const TestFor = defineComponent({
+    setup() {
+        const items = signal([
+            { id: 1, name: 'Item 1' },
+            { id: 2, name: 'Item 2' },
+            { id: 3, name: 'Item 3' }
+        ])
+
+        return {
+            items,
+            addItem: () => {
+                const nextId = Math.max(0, ...items().map(i => i.id)) + 1
+                items([...items(), { id: nextId, name: `Item ${nextId}` }])
+            },
+            shuffleItems: () => {
+                const shuffled = [...items()].sort(() => Math.random() - 0.5)
+                items(shuffled)
+            },
+            template: `
+                <div class="page">
+                    <h1>Keyed f-for Test</h1>
+                    <p>Focus an input below, then click "Shuffle" or "Add". The focus should stay!</p>
+                    
+                    <div style="margin-bottom: 20px; display: flex; gap: 10px;">
+                        <button @click="addItem" class="primary-btn">Add Item</button>
+                        <button @click="shuffleItems" class="primary-btn">Shuffle Items</button>
+                    </div>
+
+                    <div style="display: flex; flex-direction: column; gap: 10px;">
+                        <div f-for="item in items" :key="item.id" 
+                             style="padding: 10px; border: 1px solid #333; display: flex; gap: 10px; align-items: center;">
+                            <span>ID: {{ item.id }}</span>
+                            <input type="text" :value="item.name" placeholder="Type here..." 
+                                   style="background: #111; color: #fff; border: 1px solid #444; padding: 5px;" />
+                        </div>
+                    </div>
+                </div>
+            `
+        }
+    }
+})

package/framework/bin/create-fusee.js

@@ -0,0 +1,147 @@
+#!/usr/bin/env node
+import fs from 'fs';
+import path from 'path';
+import readline from 'readline';
+import { fileURLToPath } from 'url';
+
+const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const sourceFramework = path.join(__dirname, '..');
+
+const projectName = process.argv[2] || 'my-fusee-app';
+const projectPath = path.isAbsolute(projectName) ? projectName : path.join(process.cwd(), projectName);
+
+async function scaffold() {
+    console.log(`\n🚀 Welcome to Fusée Framework Scaffolder!`);
+    const choice = await new Promise(resolve => {
+        rl.question('🧬 Select language template [JavaScript (js) / TypeScript (ts)] (default: js): ', (answer) => {
+            resolve(answer.toLowerCase() === 'ts' ? 'ts' : 'js');
+        });
+    }); rl.close();
+
+    console.log(`\n🚀 Scaffolding a new project in: ${projectPath}...`);
+
+    function copyDir(src, dest, skipTypes = false) {
+        if (!fs.existsSync(dest)) fs.mkdirSync(dest, { recursive: true });
+        fs.readdirSync(src).forEach(item => {
+            // Sărim folderul types SAU orice fișier .d.ts rătăcit
+            if (skipTypes && (item === 'types' || item.endsWith('.d.ts'))) return;
+            if (item === 'bin' || item === 'node_modules' || item === '.git') return;
+
+            const s = path.join(src, item);
+            const d = path.join(dest, item);
+            if (fs.lstatSync(s).isDirectory()) copyDir(s, d, skipTypes);
+            else fs.copyFileSync(s, d);
+        });
+    }
+
+    const coreFolders = ['app', 'app/components'];
+    coreFolders.forEach(f => {
+        const dir = path.join(projectPath, f);
+        if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+    });
+
+    console.log('📦 Injecting Fusée Core Engine (Strict Mode)...');
+    copyDir(sourceFramework, path.join(projectPath, 'framework'), choice === 'js');
+
+    const packageJson = {
+        name: projectName === '.' ? 'fusee-project' : projectName,
+        version: '1.0.0',
+        type: 'module',
+        scripts: { "dev": "vite", "build": "vite build" },
+        devDependencies: { "vite": "^5.0.0" }
+    };
+    if (choice === 'ts') packageJson.devDependencies["typescript"] = "^5.0.0";
+    fs.writeFileSync(path.join(projectPath, 'package.json'), JSON.stringify(packageJson, null, 2));
+
+    if (choice === 'ts') {
+        const tsConfig = { compilerOptions: { "target": "ESNext", "module": "ESNext", "moduleResolution": "node", "strict": true, "esModuleInterop": true, "skipLibCheck": true } };
+        fs.writeFileSync(path.join(projectPath, 'tsconfig.json'), JSON.stringify(tsConfig, null, 2));
+    }
+
+    const ext = choice === 'ts' ? 'ts' : 'js';
+    const indexHtml = `
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Strict Fusée App</title>
+    <style>
+        body { background: #050505; color: white; font-family: system-ui; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; }
+        #app { text-align: center; background: #111; padding: 3rem; border-radius: 20px; border: 1px solid #222; box-shadow: 0 10px 40px rgba(255, 51, 51, 0.1); }
+        h1 { color: #ff3333; text-shadow: 0 0 20px rgba(255, 51, 51, 0.3); margin: 0; font-size: 2.5rem; }
+    </style>
+</head>
+<body>
+    <div id="app">
+        <h1>Fusée 🚀</h1>
+        <p style="color: #ff9999; opacity: 0.8; margin-bottom: 2rem;">A reactive framework built with passion.</p>
+        {{ Counter }}
+    </div>
+    <script type="module" src="/app/main.${ext}"></script>
+</body>
+</html>
+    `;
+    fs.writeFileSync(path.join(projectPath, 'index.html'), indexHtml);
+
+    const btnStyle = "background:#ff3333; color:white; border:none; width:45px; height:45px; border-radius:12px; cursor:pointer; font-size:1.6rem; font-weight:bold; transition: 0.3s; box-shadow: 0 4px 15px rgba(255, 51, 51, 0.2);";
+    const counterContent = choice === 'ts'
+        ? `import { signal } from '../../framework/core/signal.js';
+import { defineComponent } from '../../framework/core/component.js';
+
+export const Counter = defineComponent({
+    setup() {
+        const count = signal<number>(0);
+        return {
+            count,
+            inc: () => count(count() + 1),
+            dec: () => count(count() - 1),
+            template: \`
+                <div style="display:flex; align-items:center; justify-content:center; gap:2.5rem;">
+                    <button @click="dec" style="${btnStyle}">-</button>
+                    <span style="font-size:2.8rem; font-weight:bold; min-width:70px;">{{ count }}</span>
+                    <button @click="inc" style="${btnStyle}">+</button>
+                </div>
+            \`
+        };
+    }
+});`
+        : `import { signal } from '../../framework/core/signal.js';
+import { defineComponent } from '../../framework/core/component.js';
+
+export const Counter = defineComponent({
+    setup() {
+        const count = signal(0);
+        return {
+            count,
+            inc: () => count(count() + 1),
+            dec: () => count(count() - 1),
+            template: \`
+                <div style="display:flex; align-items:center; justify-content:center; gap:2.5rem;">
+                    <button @click="dec" style="${btnStyle}">-</button>
+                    <span style="font-size:2.8rem; font-weight:bold; min-width:70px;">{{ count }}</span>
+                    <button @click="inc" style="${btnStyle}">+</button>
+                </div>
+            \`
+        };
+    }
+});`;
+
+    fs.writeFileSync(path.join(projectPath, `app/components/Counter.${ext}`), counterContent);
+
+    const mainContent = `import { mountTemplate } from '../framework/core/compiler.js';
+import { Counter } from './components/Counter.${ext}';
+
+const root = document.getElementById('app');
+if (root) {
+    mountTemplate(root.innerHTML, root, {}, { Counter });
+}
+`;
+    fs.writeFileSync(path.join(projectPath, `app/main.${ext}`), mainContent);
+
+    console.log(`\n✅ Fusée Project Ready!`);
+    const instructions = projectName === '.' ? 'npm install && npm run dev' : `cd ${projectName} && npm install && npm run dev`;
+    console.log(`👉 Run: ${instructions}\n`);
+}
+
+scaffold();

package/framework/core/compiler.js

@@ -0,0 +1,214 @@
+import { effect, batch } from './signal.js'
+import { processDirectives } from './directives.js'
+import {
+    evaluateExpression,
+    parseInterpolation,
+    sanitizeAttr,
+    MUSTACHE_RE
+} from './evaluator.js'
+
+export function mountTemplate(template, container, context, components) {
+    const effects = []
+    let processed = template.replace(/(<[a-zA-Z0-9-]+\s[^>]*?)\s:([a-zA-Z][a-zA-Z0-9-]*)=/g, '$1 data-bind-$2=')
+
+    for (const name of Object.keys(components)) {
+        const re = new RegExp(`\\{\\{\\s*${name}(\\s+.*?|\\s*)\\}\\}`, 'g')
+        processed = processed.replace(re, (match, propsStr) => {
+            let attrs = ''
+            if (propsStr && propsStr.trim()) {
+                const attrRegex = /(:?[a-zA-Z0-9-]+)="([^"]*)"/g
+                let attrMatch
+                while ((attrMatch = attrRegex.exec(propsStr)) !== null) {
+                    const attrName = attrMatch[1]
+                    const attrValue = attrMatch[2]
+
+                    if (attrName.startsWith(':')) {
+                        attrs += ` data-bind-prop-${attrName.slice(1).toLowerCase()}="${attrValue}"`
+                    } else {
+                        attrs += ` data-prop-${attrName.toLowerCase()}="${attrValue}"`
+                    }
+                }
+            }
+            return `<div data-component="${name}"${attrs}></div>`
+        })
+    }
+
+    container.innerHTML = processed
+    compileNode(container, context, components, effects)
+
+    return { effects }
+}
+
+export function compileNode(node, context, components, effects) {
+    // Handle f-once (render once and discard reactive tracking for this subtree)
+    if (node.nodeType === 1 && node.hasAttribute('f-once')) {
+        node.removeAttribute('f-once')
+        const temporaryEffects = []
+
+        // Process ONLY this node and its children ONCE
+        processDirectives(node, context, components, temporaryEffects)
+        processBindingAttrs(node, context, temporaryEffects)
+        processMustaches(node, context, temporaryEffects)
+        bindComponents(node, components, context, temporaryEffects)
+
+        // Recurse children but with temporary effects
+        let child = node.firstChild
+        while (child) {
+            compileOnce(child, context, components, temporaryEffects)
+            child = child.nextSibling
+        }
+
+        // Cleanup immediately
+        for (const cleanup of temporaryEffects) if (typeof cleanup === 'function') cleanup()
+        return
+    }
+
+    if (node.nodeType === 1) {
+        processDirectives(node, context, components, effects)
+        processBindingAttrs(node, context, effects)
+        bindComponents(node, components, context, effects)
+    } else if (node.nodeType === 3) {
+        processMustaches(node, context, effects)
+    }
+
+    let child = node.firstChild
+    while (child) {
+        compileNode(child, context, components, effects)
+        child = child.nextSibling
+    }
+}
+
+function compileOnce(node, context, components, effects) {
+    if (node.nodeType === 1) {
+        processDirectives(node, context, components, effects)
+        processBindingAttrs(node, context, effects)
+        bindComponents(node, components, context, effects)
+    } else if (node.nodeType === 3) {
+        processMustaches(node, context, effects)
+    }
+
+    let child = node.firstChild
+    while (child) {
+        compileOnce(child, context, components, effects)
+        child = child.nextSibling
+    }
+}
+
+function processMustaches(node, context, effects) {
+    if (node.nodeType !== 3) return
+    const text = node.textContent
+    if (!MUSTACHE_RE.test(text)) return
+
+    const parts = parseInterpolation(text)
+    const fragment = document.createDocumentFragment()
+
+    for (const part of parts) {
+        if (part.type === 'static') {
+            fragment.appendChild(document.createTextNode(part.value))
+        } else {
+            const reactiveNode = document.createTextNode('')
+            fragment.appendChild(reactiveNode)
+            const key = part.key
+            const e = effect(() => {
+                const resolved = evaluateExpression(key, context)
+                reactiveNode.textContent = String(resolved ?? '')
+            })
+            effects.push(e)
+        }
+    }
+    node.parentNode.replaceChild(fragment, node)
+}
+
+function processBindingAttrs(el, context, effects) {
+    if (el.nodeType !== 1) return
+    for (const attr of [...el.attributes]) {
+        if (attr.name.startsWith('data-bind-') && !attr.name.startsWith('data-bind-prop-')) {
+            const realAttr = attr.name.slice(10)
+            const expr = attr.value
+            el.removeAttribute(attr.name)
+
+            const e = effect(() => {
+                let resolved = evaluateExpression(expr, context)
+                if (realAttr === 'class') {
+                    if (!el._staticClass) el._staticClass = el.getAttribute('class') || ''
+                    let dynamicClass = ''
+                    if (Array.isArray(resolved)) dynamicClass = resolved.filter(Boolean).join(' ')
+                    else if (resolved !== null && typeof resolved === 'object') {
+                        dynamicClass = Object.entries(resolved).filter(([_, v]) => !!v).map(([k]) => k).join(' ')
+                    } else dynamicClass = String(resolved ?? '')
+                    el.className = (el._staticClass + ' ' + dynamicClass).trim()
+                } else if (realAttr === 'style') {
+                    if (resolved !== null && typeof resolved === 'object') {
+                        for (const k in resolved) el.style[k] = resolved[k]
+                    } else el.style.cssText = String(resolved ?? '')
+                } else {
+                    if (typeof resolved === 'boolean') {
+                        resolved ? el.setAttribute(realAttr, '') : el.removeAttribute(realAttr)
+                    } else el.setAttribute(realAttr, sanitizeAttr(realAttr, String(resolved)))
+                }
+            })
+            effects.push(e)
+            continue
+        }
+
+        if (MUSTACHE_RE.test(attr.value)) {
+            const attrName = attr.name
+            const parts = parseInterpolation(attr.value)
+            el.removeAttribute(attrName)
+            const e = effect(() => {
+                let result = ''
+                for (const part of parts) {
+                    result += part.type === 'static' ? part.value : String(evaluateExpression(part.key, context) ?? '')
+                }
+                el.setAttribute(attrName, sanitizeAttr(attrName, result))
+            })
+            effects.push(e)
+        }
+    }
+}
+
+function bindComponents(container, components, context, effects) {
+    const placeholders = container.querySelectorAll('[data-component]')
+    const els = container.matches && container.matches('[data-component]') ? [container, ...placeholders] : placeholders
+    for (const placeholder of els) {
+        const name = placeholder.dataset.component
+        const ComponentFn = components[name]
+        if (ComponentFn) {
+            const props = {}
+            for (const attr of [...placeholder.attributes]) {
+                const attrName = attr.name.toLowerCase()
+
+                if (attrName.startsWith('data-prop-')) {
+                    props[attrName.slice(10)] = attr.value
+                } else if (attrName.startsWith('data-bind-prop-')) {
+                    const propName = attrName.slice(15)
+                    const expression = attr.value.trim()
+
+                    if (expression in context) {
+                        Object.defineProperty(props, propName, {
+                            get() {
+                                const val = context[expression]
+                                return typeof val === 'function' && val.isSignal ? val() : val
+                            },
+                            enumerable: true,
+                            configurable: true
+                        })
+                    } else {
+                        Object.defineProperty(props, propName, {
+                            get() {
+                                return evaluateExpression(expression, context)
+                            },
+                            enumerable: true,
+                            configurable: true
+                        })
+                    }
+                }
+            }
+            const childComponent = ComponentFn(props)
+            childComponent.render(placeholder)
+            if (effects) {
+                effects.push(() => childComponent.unmount())
+            }
+        }
+    }
+}

package/framework/core/component.js

@@ -1,128 +1,119 @@
-// ─── Component System ─────────────────────────────────────────────────────────
-import { effect } from './signal.js'
+import { effect, setEffectHook, batch } from './signal.js'
+import { mountTemplate } from './compiler.js'
 
-// Lifecycle context — set while setup() runs
 let currentInstance = null
 
-export function onMount(fn) {
-  if (currentInstance) currentInstance._mountHooks.push(fn)
-}
-
-export function onUnmount(fn) {
-  if (currentInstance) currentInstance._unmountHooks.push(fn)
-}
+setEffectHook(eff => {
+    if (currentInstance) currentInstance._effects.push(eff)
+})
 
-export function defineComponent(options) {
-  return function ComponentFactory(props = {}) {
-    const instance = {
-      props,
-      _mountHooks: [],
-      _unmountHooks: [],
-      _effects: [],
-      _element: null,
-    }
+function resolveProps(schema, received) {
+    const isArray = Array.isArray(schema)
+    const resolved = {}
 
-    // Run setup() with lifecycle context active
-    currentInstance = instance
-    const result = options.setup(props)
-    currentInstance = null
-
-    // Validate props defined in component
-    const allowedProps = options.props || []
-    for (const key of Object.keys(props)) {
-      if (!allowedProps.includes(key)) {
-        console.warn(`[framework] Unknown prop "${key}" passed to component.`)
-      }
+    const normalizedSchema = {}
+    if (isArray) {
+        schema.forEach(k => normalizedSchema[k.toLowerCase()] = k)
+    } else {
+        for (const key of Object.keys(schema)) {
+            normalizedSchema[key.toLowerCase()] = key
+        }
     }
 
-    // ── Template rendering ───────────────────────────────────────────────────
-    function render(container) {
-      instance._element = container
+    for (const receivedKey of Object.keys(received)) {
+        const schemaKey = isArray
+            ? schema.find(k => k.toLowerCase() === receivedKey.toLowerCase())
+            : normalizedSchema[receivedKey.toLowerCase()]
 
-      const e = effect(() => {
-        const html = resolveTemplate(result.template, result, options.components || {})
-        container.innerHTML = html
-        bindEvents(container, result)
-        bindComponents(container, options.components || {})
-      })
-
-      instance._effects.push(e)
-
-      // Run mount hooks after first render
-      for (const hook of instance._mountHooks) hook()
+        if (!schemaKey) {
+            console.warn(`[framework] Unknown prop "${receivedKey}"`)
+            continue
+        }
 
-      return instance
+        const descriptor = Object.getOwnPropertyDescriptor(received, receivedKey)
+        if (descriptor && descriptor.get) {
+            Object.defineProperty(resolved, schemaKey, {
+                get: descriptor.get,
+                enumerable: true,
+                configurable: true
+            })
+        } else {
+            resolved[schemaKey] = received[receivedKey]
+        }
     }
 
-    // ── Unmount ──────────────────────────────────────────────────────────────
-    function unmount() {
-      for (const hook of instance._unmountHooks) hook()
-      // Clean up all reactive effects
-      for (const e of instance._effects) {
-        for (const dep of e.deps) dep.delete(e)
-        e.deps.clear()
-      }
-      if (instance._element) instance._element.innerHTML = ''
+    if (!isArray) {
+        for (const [key, config] of Object.entries(schema)) {
+            if (!(key in resolved)) {
+                if (config.required) {
+                    console.error(`[framework] Required prop "${key}" is missing`)
+                }
+                if (config.default !== undefined) {
+                    resolved[key] = typeof config.default === 'function'
+                        ? config.default()
+                        : config.default
+                }
+            } else if (config.type) {
+                const value = resolved[key]
+                const expectedType = config.type.name
+                const actualType = typeof value
+                const typeMap = { String: 'string', Number: 'number', Boolean: 'boolean' }
+                if (typeMap[expectedType] && actualType !== typeMap[expectedType]) {
+                    console.warn(`[framework] Prop "${key}" expected ${expectedType} but got ${actualType}`)
+                }
+            }
+        }
     }
 
-    return { render, unmount, instance }
-  }
+    return resolved
 }
 
-// ── Template resolver ─────────────────────────────────────────────────────────
-// Replaces {{ expr }} with evaluated values from the component result object.
-function resolveTemplate(template, context, components) {
-  return template.replace(/\{\{\s*(\w+)\s*\}\}/g, (_, key) => {
-    if (key in components) {
-      // Nested component: {{ Counter }} → render component placeholder
-      return `<div data-component="${key}"></div>`
-    }
-    const val = context[key]
-    if (typeof val === 'function') {
-      // Could be a signal — call it to get value
-      try { return val() } catch { return '' }
-    }
-    return val ?? ''
-  })
+export function onMount(fn) {
+    if (currentInstance) currentInstance._mountHooks.push(fn)
 }
 
-// ── Event binding ─────────────────────────────────────────────────────────────
-// Finds all elements with @event attributes and attaches listeners.
-// Re-runs after every template re-render (innerHTML wipe clears old listeners).
-function bindEvents(container, context) {
-  const all = container.querySelectorAll('*')
-  for (const el of all) {
-    for (const attr of [...el.attributes]) {
-      if (attr.name.startsWith('@')) {
-        const eventName = attr.name.slice(1)          // @click → click
-        const handlerName = attr.value                 // "increment"
-        const handler = context[handlerName]
-        if (typeof handler === 'function') {
-          el.removeAttribute(attr.name)
-          el.addEventListener(eventName, handler)
-        }
-      }
-    }
-  }
+export function onUnmount(fn) {
+    if (currentInstance) currentInstance._unmountHooks.push(fn)
 }
 
-// ── Nested component mounting ─────────────────────────────────────────────────
-// Finds data-component placeholders and mounts child components inside them.
-function bindComponents(container, components) {
-  const placeholders = container.querySelectorAll('[data-component]')
-  for (const placeholder of placeholders) {
-    const name = placeholder.dataset.component
-    const ComponentFn = components[name]
-    if (ComponentFn) {
-      // Read props from data-prop-* attributes if present
-      const props = {}
-      for (const attr of [...placeholder.attributes]) {
-        if (attr.name.startsWith('data-prop-')) {
-          props[attr.name.slice(10)] = attr.value
+export function defineComponent(options) {
+    return function ComponentFactory(props = {}) {
+        const instance = {
+            props: options.props ? resolveProps(options.props, props) : props,
+            _mountHooks: [],
+            _unmountHooks: [],
+            _effects: [],
+            _element: null,
         }
-      }
-      const child = ComponentFn(props)
-      child.render(placeholder)
+
+        currentInstance = instance
+        const result = options.setup(instance.props)
+        currentInstance = null
+
+        function render(container) {
+            instance._element = container
+
+            const { effects } = mountTemplate(
+                result.template,
+                container,
+                result,
+                options.components || {}
+            )
+
+            instance._effects.push(...effects)
+            for (const hook of instance._mountHooks) hook()
+
+            return instance
+        }
+
+        function unmount() {
+            for (const hook of instance._unmountHooks) hook()
+            for (const e of instance._effects) {
+                if (typeof e === 'function') e()
+            }
+            if (instance._element) instance._element.innerHTML = ''
+        }
+
+        return { render, unmount, instance }
     }
-  }
-}
+}