fusee-framework 0.1.0-alpha.1 → 1.0.0

package/framework/router/router.js

@@ -1,69 +1,78 @@
-// ─── Hash-based SPA Router ────────────────────────────────────────────────────
-// Routes are declared as: { path: '/about', component: AboutComponent }
-// Navigation via <a href="#/about"> or router.navigate('/about')
-
 let _routes = []
 let _outlet = null
 let _currentInstance = null
 
 export function createRouter(routes) {
-  _routes = routes
-
-  // Listen for hash changes (back/forward + manual URL edits)
-  window.addEventListener('hashchange', () => _resolve())
-
-  // Initial render on page load
-  window.addEventListener('DOMContentLoaded', () => _resolve())
-
-  return { navigate }
+    _routes = routes
+
+    const handler = () => _resolve()
+    window.addEventListener('hashchange', handler)
+
+    if (document.readyState === 'loading') {
+        window.addEventListener('DOMContentLoaded', handler)
+    } else {
+        _resolve()
+    }
+
+    return {
+        navigate,
+        destroy() {
+            window.removeEventListener('hashchange', handler)
+            window.removeEventListener('DOMContentLoaded', handler)
+            if (_currentInstance) {
+                try { 
+                    _currentInstance.unmount() 
+                } catch {}
+            }
+            _routes = []
+            _outlet = null
+            _currentInstance = null
+        }
+    }
 }
 
 export function navigate(path) {
-  window.location.hash = path
+    window.location.hash = path
 }
 
-// ── Mount outlet ──────────────────────────────────────────────────────────────
-// Call this with the DOM element that acts as <router-outlet>
 export function mountOutlet(el) {
-  _outlet = el
-  _resolve()
+    _outlet = el
+    _resolve()
 }
 
-// ── Internal resolution ───────────────────────────────────────────────────────
 function _resolve() {
-  if (!_outlet) return
+    if (!_outlet) {
+        return
+    }
 
-  // Parse current hash: '#/about' → '/about', fallback to '/'
-  const hash = window.location.hash
-  const path = hash.startsWith('#') ? hash.slice(1) || '/' : '/'
+    const hash = window.location.hash
+    const path = hash.startsWith('#') ? hash.slice(1) || '/' : '/'
 
-  const matched = _routes.find(r => _matchPath(r.path, path))
+    const matched = _routes.find(r => _matchPath(r.path, path))
 
-  if (!matched) {
-    _outlet.innerHTML = `<p style="color:red">[framework] No route matched for "${path}"</p>`
-    return
-  }
+    if (!matched) {
+        _outlet.innerHTML = `<p style="color:red">[framework] No route matched for "${path}"</p>`
+        return
+    }
 
-  // Unmount previous component to run cleanup hooks
-  if (_currentInstance) {
-    try { _currentInstance.unmount() } catch {}
-  }
+    if (_currentInstance) {
+        try { _currentInstance.unmount() } catch {}
+    }
 
-  _outlet.innerHTML = ''
+    _outlet.innerHTML = ''
 
-  const componentFn = matched.component
-  _currentInstance = componentFn()
-  _currentInstance.render(_outlet)
+    const componentFn = matched.component
+    _currentInstance = componentFn()
+    _currentInstance.render(_outlet)
 }
 
-// Simple path matching — supports exact paths and :param segments
 function _matchPath(routePath, actualPath) {
-  const routeParts = routePath.split('/').filter(Boolean)
-  const actualParts = actualPath.split('/').filter(Boolean)
+    const routeParts = routePath.split('/').filter(Boolean)
+    const actualParts = actualPath.split('/').filter(Boolean)
 
-  if (routeParts.length !== actualParts.length) return false
+    if (routeParts.length !== actualParts.length) return false
 
-  return routeParts.every((part, i) =>
-    part.startsWith(':') || part === actualParts[i]
-  )
+    return routeParts.every((part, i) =>
+        part.startsWith(':') || part === actualParts[i]
+    )
 }

package/framework/types/compiler.d.ts

@@ -0,0 +1,25 @@
+import type { ComponentResult, ComponentFactory } from './component'
+
+export function mountTemplate(
+    template: string,
+    container: HTMLElement,
+    context: ComponentResult,
+    components: Record<string, ComponentFactory>
+): { effects: (() => void)[] }
+
+export function compileNode(
+    node: HTMLElement,
+    context: ComponentResult,
+    components: Record<string, ComponentFactory>,
+    effects: (() => void)[]
+): void
+
+function processTextNodes(root: HTMLElement, context: ComponentResult, effects: (() => void)[]): void
+function processAttrBindings(root: HTMLElement, context: ComponentResult, effects: (() => void)[]): void
+
+function bindComponents(
+    container: HTMLElement,
+    components: Record<string, ComponentFactory>,
+    context: ComponentResult,
+    effects: (() => void)[]
+): void

package/framework/types/component.d.ts

@@ -0,0 +1,44 @@
+// ─── Component Types ─────────────────────────────────────────────────────────
+
+export type ComponentProps = Record<string, any>
+
+export type EmptyProps = Record<string, never>
+
+export type PropSchema = string[] | Record<string, PropConfig>
+
+export type PropConfig = {
+    type?: FunctionConstructor | StringConstructor | NumberConstructor | BooleanConstructor
+    default?: any | (() => any)
+    required?: boolean
+}
+
+export type ComponentInstance = {
+    props: ComponentProps
+    _mountHooks: (() => void)[]
+    _unmountHooks: (() => void)[]
+    _effects: import('./signal').EffectRunner[]
+    _element: HTMLElement | null
+}
+
+export type ComponentResult = {
+    template: string
+    [key: string]: any
+}
+
+export type ComponentOptions<TProps = ComponentProps> = {
+    props?: PropSchema
+    components?: Record<string, ComponentFactory<any>>
+    setup: (props: TProps) => ComponentResult
+}
+
+export type ComponentFactory<TProps = ComponentProps> = (props?: TProps) => ComponentApi
+
+export type ComponentApi = {
+    render: (container: HTMLElement) => ComponentInstance
+    unmount: () => void
+    instance: ComponentInstance
+}
+
+export declare function onMount(fn: () => void): void
+export declare function onUnmount(fn: () => void): void
+export declare function defineComponent<TProps = EmptyProps>(options: ComponentOptions<TProps>): ComponentFactory<TProps>

package/framework/types/directives.d.ts

@@ -0,0 +1,32 @@
+import type { ComponentResult, ComponentFactory } from './component'
+
+export function processDirectives(
+    root: HTMLElement,
+    context: ComponentResult,
+    components: Record<string, ComponentFactory>,
+    effects: (() => void)[]
+): void
+
+export function processRefs(root: HTMLElement, context: ComponentResult): void
+
+export function processModel(root: HTMLElement, context: ComponentResult, effects: (() => void)[]): void
+
+export function processFor(
+    root: HTMLElement,
+    context: ComponentResult,
+    components: Record<string, ComponentFactory>,
+    effects: (() => void)[]
+): void
+
+export function processIf(
+    root: HTMLElement,
+    context: ComponentResult,
+    components: Record<string, ComponentFactory>,
+    effects: (() => void)[]
+): void
+
+export function processShow(root: HTMLElement, context: ComponentResult, effects: (() => void)[]): void
+export function processHtml(root: HTMLElement, context: ComponentResult, effects: (() => void)[]): void
+export function processText(root: HTMLElement, context: ComponentResult, effects: (() => void)[]): void
+export function processEvents(root: HTMLElement, context: ComponentResult): void
+export function processCloak(root: HTMLElement): void

package/framework/types/evaluator.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentResult } from './component'
+
+export type InterpolationPart = {
+    type: 'static' | 'dynamic'
+    value?: string
+    key?: string
+}
+
+export const MUSTACHE_RE: RegExp
+
+export function evaluateExpression(expr: string, context: Record<string, any>, extraContext?: Record<string, any>): any
+
+export function parseInterpolation(str: string): InterpolationPart[]
+
+export function sanitizeAttr(name: string, value: string): string

package/framework/types/index.d.ts

@@ -0,0 +1,9 @@
+// ─── Fusée Framework Types ───────────────────────────────────────────────────
+
+// Public API
+export * from './signal'
+export * from './component'
+export * from './router'
+
+// Re-export as namespace for convenience
+export as namespace Fusee

package/framework/types/router.d.ts

@@ -0,0 +1,17 @@
+// ─── Router Types ─────────────────────────────────────────────────────────────
+
+import type { ComponentApi } from './component'
+
+export type Route = {
+    path: string
+    component: () => ComponentApi
+}
+
+export type Router = {
+    navigate: (path: string) => void
+    destroy: () => void
+}
+
+export declare function createRouter(routes: Route[]): Router
+export declare function navigate(path: string): void
+export declare function mountOutlet(el: HTMLElement): void

package/framework/types/signal.d.ts

@@ -0,0 +1,30 @@
+// ─── Signal Types ────────────────────────────────────────────────────────────
+
+export type SignalAccessor<T> = {
+    (): T;
+    (newValue: T): void;
+    isSignal: boolean;
+}
+
+export type ComputedAccessor<T> = {
+    (): T;
+    isSignal: boolean;
+    readonly: true;
+}
+
+export type Signal<T = any> = SignalAccessor<T>
+export type Computed<T = any> = ComputedAccessor<T>
+
+type EffectRunner = {
+    (): void;
+    deps: Set<Set<EffectRunner>>;
+}
+
+export declare function signal<T>(initialValue: T): Signal<T>
+export declare function effect(fn: () => void): () => void
+export declare function computed<T>(fn: () => T): Computed<T>
+export declare function batch<T>(fn: () => T): T
+export declare function untrack<T>(fn: () => T): T
+
+declare function setEffectHook(fn: (eff: any) => void): void
+

package/index.html

@@ -1,11 +1,18 @@
 <!DOCTYPE html>
 <html lang="ro">
+
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>MyFramework — SPA Demo</title>
   <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
 
     body {
       font-family: system-ui, sans-serif;
@@ -23,12 +30,18 @@
     }
 
     nav a {
-      color: #8b8bff;
+      color: #ff3333; /* Link-urile sunt acum roșii */
       text-decoration: none;
       font-weight: 500;
     }
 
-    nav a:hover { color: #fff; }
+    /* Temă Red Fusée */
+    #app h1 { color: #ff3333; text-shadow: 0 0 20px rgba(255, 51, 51, 0.4); margin-bottom: 1rem; }
+    #app p { color: #ff9999; opacity: 0.9; }
+
+    nav a:hover {
+      color: #fff;
+    }
 
     #app {
       padding: 2rem;
@@ -36,8 +49,16 @@
       margin: 0 auto;
     }
 
-    .page h1 { margin-bottom: 1rem; font-size: 1.8rem; }
-    .page p  { margin-bottom: 0.5rem; color: #aaa; line-height: 1.6; }
+    .page h1 {
+      margin-bottom: 1rem;
+      font-size: 1.8rem;
+    }
+
+    .page p {
+      margin-bottom: 0.5rem;
+      color: #aaa;
+      line-height: 1.6;
+    }
 
     .counter {
       margin-top: 2rem;
@@ -48,7 +69,13 @@
       display: inline-block;
     }
 
-    .counter h2 { margin-bottom: 1rem; font-size: 1rem; color: #888; text-transform: uppercase; letter-spacing: 0.1em; }
+    .counter h2 {
+      margin-bottom: 1rem;
+      font-size: 1rem;
+      color: #888;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+    }
 
     .value {
       font-size: 4rem !important;
@@ -83,15 +110,51 @@
       transition: background 0.15s;
     }
 
-    .actions button:hover { background: #2a2a3a; }
+    .actions button:hover {
+      background: #2a2a3a;
+    }
+
+    .primary-btn {
+      padding: 0.6rem 1.25rem;
+      border: none;
+      background: #8b8bff;
+      color: #fff;
+      font-weight: 600;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 1rem;
+      transition: background 0.15s, transform 0.1s;
+    }
+
+    .primary-btn:hover {
+      background: #7171e5;
+    }
+
+    .primary-btn:active {
+      transform: scale(0.97);
+    }
 
     .status {
       margin-top: 1rem;
       font-size: 0.8rem;
       color: #4caf50 !important;
     }
+
+    .positive {
+      color: #8b8bff !important;
+    }
+
+    .negative {
+      color: #ff6b6b !important;
+    }
+
+    .actions button:disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
   </style>
 </head>
+
 <body>
   <nav>
     <a href="#/">Home</a>
@@ -99,5 +162,9 @@
   </nav>
   <div id="app"></div>
   <script type="module" src="./app/main.js"></script>
+  <!-- For TypeScript: compile with `npx tsc` then change to: -->
+  <!-- <script type="module" src="./dist/app/main.js"></script> -->
+
 </body>
-</html>
+
+</html>

package/package.json

@@ -1,20 +1,31 @@
 {
   "name": "fusee-framework",
-  "version": "0.1.0-alpha.1",
+  "version": "1.0.0",
   "description": "Fusée - Signals-first JS Framework | Peak Performance",
   "main": "framework/index.js",
+  "types": "framework/types/index.d.ts",
+  "bin": {
+    "create-fusee-app": "./framework/bin/create-fusee.js"
+  },
+  "type": "module",
   "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
-  "type": "commonjs",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/SebiSomu/fusee.git"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "typescript": "^6.0.2",
+    "vite": "^5.0.0"
   }
-}
+}

package/tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ES2020",
+    "moduleResolution": "bundler",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    
+    "allowJs": true,
+    "checkJs": false,
+    "strict": true,
+    "noImplicitAny": false,
+    "strictNullChecks": true,
+    
+    "outDir": "./dist",
+    "rootDir": ".",
+    "removeComments": true,
+    "sourceMap": true,
+    
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    
+    "declaration": true,
+    "declarationDir": "./dist/types",
+    
+    "resolveJsonModule": true
+  },
+  "include": [
+    "app/**/*",
+    "framework/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "**/*.test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/vite.config.js

@@ -0,0 +1,35 @@
+import { defineConfig } from 'vite'
+import path from 'path'
+
+export default defineConfig({
+    // Directorul rădăcină al proiectului
+    root: '.',
+
+    // Alias-uri pentru import-uri mai curate
+    // În loc de '../../framework/index.js' poți scrie '@fusee'
+    resolve: {
+        alias: {
+            '@fusee': path.resolve(__dirname, './framework'),
+            '@app': path.resolve(__dirname, './app'),
+        }
+    },
+
+    // Config pentru server-ul de development
+    server: {
+        port: 3000,
+        open: true,        // Deschide browserul automat
+        hmr: true,         // Hot Module Replacement
+    },
+
+    // Config pentru build de producție
+    build: {
+        outDir: 'dist',
+        emptyOutDir: true,
+
+        rollupOptions: {
+            input: {
+                main: path.resolve(__dirname, 'index.html'),
+            }
+        }
+    }
+})