fusee-framework 1.0.0 → 1.1.0

package/README.md

@@ -1,7 +1,7 @@
 # Fusée Framework 🚀
-**v1.0.0 — Signals-First JS Framework | Atomic Reactivity | Peak Performance**
+**v1.1.0 — Signals-First JS Framework | Atomic Reactivity | Peak Performance**
 
-Fusée is a custom, high-performance reactive JavaScript framework built for speed and simplicity. It features a recursive, non-greedy compiler, a signals-based reactivity engine, and a comprehensive CLI for instant application scaffolding.
+Fusée is a custom, high-performance fine-grained reactive JavaScript framework built for speed and simplicity. It features a recursive, non-greedy compiler, a signals-based reactivity engine, and a comprehensive CLI for instant application scaffolding.
 
 ---
 
@@ -10,8 +10,8 @@ Fusée is a custom, high-performance reactive JavaScript framework built for spe
 The fastest way to get started with Fusée is via the CLI:
 
 ```bash
-# 1. Install globally (linking the engine)
-npm link
+# 1. Install Fusée globally
+npm install -g fusee-framework
 
 # 2. Scaffold your first project
 create-fusee-app .
@@ -70,7 +70,6 @@ export const Counter = defineComponent({
 ## 🚀 Future Roadmap
 
 - [ ] Global Store Management
-- [ ] Keyed `f-for` for list reconciliation
-- [ ] Advanced router transitions support
+- [ ] Advanced file-based routing support
 
-Built with ❤️ by a forward-thinking JavaScript Architect. 🏎️🔥🏆🥇_
+Built with ❤️ by me, Sebi Somu, a forward-thinking JavaScript Architect.

package/app/components/Counter.ts

@@ -1,4 +1,4 @@
-import { defineComponent, signal, computed, effect, batch, untrack, onMount, onUnmount, type Signal, type Computed } from '../../framework/index.js'
+import type { Signal, Computed } from 'fusee-framework'
 
 type CounterProps = {
     initialValue?: string
@@ -96,4 +96,3 @@ export const Counter = defineComponent({
         }
     }
 })
-

package/app/components/CounterSection.ts

@@ -1,4 +1,4 @@
-import { defineComponent, signal, type SignalAccessor } from '../../framework/index.js'
+import type { SignalAccessor } from 'fusee-framework'
 import { Counter } from './Counter.js'
 
 type CounterSectionProps = {
@@ -22,7 +22,7 @@ export const CounterSection = defineComponent({
 
         return {
             showCounter,
-            get title() { return props.pageTitle },
+            get title() { return props.pageTitle || '' },
             toggleCounter: () => showCounter(!showCounter()),
             template: `
                 <div style="margin-top: 30px; border-top: 1px solid #333; padding-top: 20px;">

package/app/components/UserForm.js

@@ -1,5 +1,3 @@
-import { defineComponent, signal } from '../../framework/index.js'
-
 export const UserForm = defineComponent({
     setup() {
         const userName = signal('Guest')

package/app/main.js

@@ -1,10 +1,12 @@
-import { createRouter, mountOutlet } from '../framework/index.js'
+import { createRouter } from '../framework/index.js'
 import { Home } from './routes/Home.js'
 import { About } from './routes/About.js'
+import { TestFor } from './routes/TestFor.js'
 
 createRouter([
     { path: '/', component: Home },
     { path: '/about', component: About },
+    { path: '/test-for', component: TestFor },
 ])
 
 const outlet = document.getElementById('app')

package/app/routes/About.js

@@ -1,5 +1,3 @@
-import { defineComponent, signal, onMount } from '../../framework/index.js'
-
 export const About = defineComponent({
     props: [],
     setup() {

package/app/routes/Home.js

@@ -1,4 +1,3 @@
-import { defineComponent, signal } from '../../framework/index.js'
 import { UserForm } from '../components/UserForm.js'
 import { CounterSection } from '../components/CounterSection.js'
 

package/app/routes/Home.ts

@@ -1,9 +1,9 @@
-import { defineComponent, signal, type SignalAccessor } from '../../framework/index.js'
+import type { Signal } from 'fusee-framework'
 import { UserForm } from '../components/UserForm.js'
 import { CounterSection } from '../components/CounterSection.js'
 
 type HomeResult = {
-    title: SignalAccessor<string>
+    title: Signal<string>
     changeTitle: () => void
     template: string
 }
@@ -11,15 +11,14 @@ type HomeResult = {
 export const Home = defineComponent({
     components: { UserForm, CounterSection },
     setup(): HomeResult {
-        const title = signal('Welcome!')
-
+        const title = signal<string>('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>This is an SPA built with my own (TypeScript!) 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>

package/app/routes/TestFor.js

@@ -0,0 +1,41 @@
+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/app/routes/TestFor.ts

@@ -0,0 +1,56 @@
+import type { Signal } from 'fusee-framework'
+
+type Item = {
+    id: number
+    name: string
+}
+
+type TestForResult = {
+    items: Signal<Item[]>
+    addItem: () => void
+    shuffleItems: () => void
+    template: string
+}
+
+export const TestFor = defineComponent({
+    setup(): TestForResult {
+        const items = signal<Item[]>([
+            { id: 1, name: 'Item 1' },
+            { id: 2, name: 'Item 2' },
+            { id: 3, name: 'Item 3' }
+        ])
+
+        return {
+            items,
+            addItem: () => {
+                const nextIds = items().map(i => i.id)
+                const nextId = nextIds.length > 0 ? Math.max(...nextIds) + 1 : 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 (TypeScript)</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/auto-imports.d.ts

@@ -0,0 +1,12 @@
+export { }
+declare global {
+  const batch: typeof import('fusee-framework').batch
+  const computed: typeof import('fusee-framework').computed
+  const defineComponent: typeof import('fusee-framework').defineComponent
+  const effect: typeof import('fusee-framework').effect
+  const mountOutlet: typeof import('fusee-framework').mountOutlet
+  const onMount: typeof import('fusee-framework').onMount
+  const onUnmount: typeof import('fusee-framework').onUnmount
+  const signal: typeof import('fusee-framework').signal
+  const untrack: typeof import('fusee-framework').untrack
+}

package/framework/auto-import-preset.js

@@ -0,0 +1,8 @@
+export const FuseePreset = {
+    'fusee-framework': [
+        'signal', 'computed', 'effect',
+        'batch', 'untrack',
+        'defineComponent', 'onMount', 'onUnmount',
+        'mountOutlet', 'mountTemplate'
+    ]
+}

package/framework/bin/create-fusee.js

@@ -6,7 +6,16 @@ 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, '..');
+
+// Find the package root
+let pkgRoot = __dirname;
+while (pkgRoot !== path.dirname(pkgRoot) && !fs.existsSync(path.join(pkgRoot, 'package.json'))) {
+    pkgRoot = path.dirname(pkgRoot);
+}
+
+const sourceFramework = fs.existsSync(path.join(pkgRoot, 'framework'))
+    ? path.join(pkgRoot, 'framework')
+    : pkgRoot;
 
 const projectName = process.argv[2] || 'my-fusee-app';
 const projectPath = path.isAbsolute(projectName) ? projectName : path.join(process.cwd(), projectName);
@@ -24,9 +33,8 @@ async function scaffold() {
     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;
+            if (item === 'bin' || item === 'node_modules' || item === '.git' || item === 'dist') return;
 
             const s = path.join(src, item);
             const d = path.join(dest, item);
@@ -35,81 +43,127 @@ async function scaffold() {
         });
     }
 
-    const coreFolders = ['app', 'app/components'];
+    const coreFolders = ['app', 'app/components', 'app/routes'];
     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)...');
+    console.log('📦 Injecting Fusée Core Engine...');
     copyDir(sourceFramework, path.join(projectPath, 'framework'), choice === 'js');
 
+    const ext = choice === 'ts' ? 'ts' : 'js';
+
+    // 1. package.json
     const packageJson = {
         name: projectName === '.' ? 'fusee-project' : projectName,
         version: '1.0.0',
         type: 'module',
         scripts: { "dev": "vite", "build": "vite build" },
-        devDependencies: { "vite": "^5.0.0" }
+        devDependencies: {
+            "vite": "^5.0.0",
+            "unplugin-auto-import": "^0.17.0"
+        }
     };
     if (choice === 'ts') packageJson.devDependencies["typescript"] = "^5.0.0";
     fs.writeFileSync(path.join(projectPath, 'package.json'), JSON.stringify(packageJson, null, 2));
 
+    // 2. vite.config.js
+    const viteConfig = `import { defineConfig } from 'vite';
+import path from 'path';
+import AutoImport from 'unplugin-auto-import/vite';
+import { FuseePreset } from './framework/auto-import-preset.js';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      'fusee-framework': path.resolve(__dirname, './framework')
+    }
+  },
+  plugins: [
+    AutoImport({
+      imports: [FuseePreset],
+      dts: true // Generates auto-imports.d.ts
+    })
+  ]
+});`;
+    fs.writeFileSync(path.join(projectPath, 'vite.config.js'), viteConfig);
+
+    // 3. tsconfig.json (if TS)
     if (choice === 'ts') {
-        const tsConfig = { compilerOptions: { "target": "ESNext", "module": "ESNext", "moduleResolution": "node", "strict": true, "esModuleInterop": true, "skipLibCheck": true } };
+        const tsConfig = {
+            compilerOptions: {
+                "target": "ESNext",
+                "module": "ESNext",
+                "moduleResolution": "bundler",
+                "strict": true,
+                "esModuleInterop": true,
+                "skipLibCheck": true,
+                "paths": {
+                    "fusee-framework": ["./framework/types/index.d.ts"]
+                }
+            },
+            "include": ["app/**/*", "framework/**/*", "auto-imports.d.ts"]
+        };
         fs.writeFileSync(path.join(projectPath, 'tsconfig.json'), JSON.stringify(tsConfig, null, 2));
     }
 
-    const ext = choice === 'ts' ? 'ts' : 'js';
-    const indexHtml = `
-<!DOCTYPE html>
+    // 4. index.html
+    const indexHtml = `<!DOCTYPE html>
 <html>
 <head>
     <meta charset="UTF-8">
-    <title>Strict Fusée App</title>
+    <title>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; }
+        body { background: #050505; color: white; font-family: system-ui; margin: 0; }
+        #app { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
+        .hero { text-align: center; margin-bottom: 2rem; }
+        h1 { color: #ff3333; font-size: 3rem; margin: 0; }
     </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>
+        <div class="hero">
+            <h1>Fusée 🚀</h1>
+            <p style="opacity: 0.6;">Modern Reactive Framework</p>
+        </div>
         {{ Counter }}
     </div>
     <script type="module" src="/app/main.${ext}"></script>
 </body>
-</html>
-    `;
+</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);";
+    // 5. Counter component
+    const btnStyle = "background:#ff3333; color:white; border:none; width:50px; height:50px; border-radius:15px; cursor:pointer; font-size:1.5rem; transition: 0.2s;";
     const counterContent = choice === 'ts'
-        ? `import { signal } from '../../framework/core/signal.js';
-import { defineComponent } from '../../framework/core/component.js';
+        ? `import type { Signal } from 'fusee-framework'
+
+interface CounterResult {
+    count: Signal<number>
+    inc: () => void
+    dec: () => void
+    template: string
+}
 
 export const Counter = defineComponent({
-    setup() {
+    setup(): CounterResult {
         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;">
+                <div style="display:flex; align-items:center; gap:2rem; background:#111; padding:2rem; border-radius:20px; border:1px solid #222;">
                     <button @click="dec" style="${btnStyle}">-</button>
-                    <span style="font-size:2.8rem; font-weight:bold; min-width:70px;">{{ count }}</span>
+                    <span style="font-size:3rem; font-weight:bold; min-width:60px; text-align:center;">{{ 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({
+        : `export const Counter = defineComponent({
     setup() {
         const count = signal(0);
         return {
@@ -117,23 +171,23 @@ export const Counter = defineComponent({
             inc: () => count(count() + 1),
             dec: () => count(count() - 1),
             template: \`
-                <div style="display:flex; align-items:center; justify-content:center; gap:2.5rem;">
+                <div style="display:flex; align-items:center; gap:2rem; background:#111; padding:2rem; border-radius:20px; border:1px solid #222;">
                     <button @click="dec" style="${btnStyle}">-</button>
-                    <span style="font-size:2.8rem; font-weight:bold; min-width:70px;">{{ count }}</span>
+                    <span style="font-size:3rem; font-weight:bold; min-width:60px; text-align:center;">{{ 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}';
+    // 6. main.js
+    const mainContent = `import { Counter } from './components/Counter';
 
 const root = document.getElementById('app');
 if (root) {
+    // mountTemplate is now auto-imported via Fusée!
     mountTemplate(root.innerHTML, root, {}, { Counter });
 }
 `;

package/framework/core/compiler.js

@@ -64,7 +64,7 @@ export function compileNode(node, context, components, effects) {
     }
 
     if (node.nodeType === 1) {
-        processDirectives(node, context, components, effects)
+        if (processDirectives(node, context, components, effects)) return
         processBindingAttrs(node, context, effects)
         bindComponents(node, components, context, effects)
     } else if (node.nodeType === 3) {
@@ -80,7 +80,7 @@ export function compileNode(node, context, components, effects) {
 
 function compileOnce(node, context, components, effects) {
     if (node.nodeType === 1) {
-        processDirectives(node, context, components, effects)
+        if (processDirectives(node, context, components, effects)) return
         processBindingAttrs(node, context, effects)
         bindComponents(node, components, context, effects)
     } else if (node.nodeType === 3) {
@@ -167,48 +167,51 @@ function processBindingAttrs(el, context, effects) {
     }
 }
 
-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
-                        })
-                    }
+function bindComponents(el, components, context, effects) {
+    if (el.nodeType !== 1) return
+    const name = el.getAttribute('data-component')
+    if (!name) return
+
+    // Remove the attribute immediately to prevent recursive compilers from 
+    // re-identifying this element as a component placeholder.
+    el.removeAttribute('data-component')
+
+    const ComponentFn = components[name]
+    if (ComponentFn) {
+        const props = {}
+        for (const attr of [...el.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())
-            }
+        }
+        const childComponent = ComponentFn(props)
+        childComponent.render(el)
+        if (effects) {
+            effects.push(() => childComponent.unmount())
         }
     }
 }