fusee-framework 1.6.0 → 1.8.0

package/create-fusee-go/internal/assets/embed/framework/types/router.d.ts

@@ -0,0 +1,32 @@
+import type { ComponentApi, ComponentFactory } from './component'
+import type { Signal } from './signal'
+
+export type Route = {
+    path: string | string[]
+    component: ComponentFactory<any>
+    children?: Route[]
+}
+
+export type Router = {
+    navigate: (path: string) => void
+    destroy: () => void
+}
+
+export type RouteParams = Record<string, string>
+
+export declare const currentRoute: Signal<string>
+export declare const routeParams: Signal<RouteParams>
+export declare const matchedRoutes: Signal<Route[]>
+
+export declare function createRouter(routes: Route[], options?: { cacheSize?: number; routerViewTimeout?: number }): Router
+export declare function navigate(path: string): void
+export declare function mountOutlet(el: HTMLElement): void
+
+export type FileRouterOptions = {
+    loadingComponent?: ComponentFactory<any>
+}
+
+export declare function generateRoutes(
+    globResults: Record<string, () => Promise<any>>,
+    options?: FileRouterOptions
+): Route[]

package/create-fusee-go/internal/assets/embed/framework/types/signal.d.ts

@@ -0,0 +1,79 @@
+export type SignalAccessor<T> = {
+    (): T;
+    (newValue: T): void;
+    isSignal: boolean;
+}
+
+export interface ReactiveArrayMethods<T> {
+    map<U>(callbackfn: (value: T, index: number, array: T[]) => U): Computed<U[]>;
+    filter(predicate: (value: T, index: number, array: T[]) => boolean): Computed<T[]>;
+    slice(start?: number, end?: number): Computed<T[]>;
+    reduce<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): Computed<U>;
+    reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): Computed<T>;
+    find(predicate: (value: T, index: number, obj: T[]) => boolean): Computed<T | undefined>;
+    findLast(predicate: (value: T, index: number, obj: T[]) => boolean): Computed<T | undefined>;
+    findIndex(predicate: (value: T, index: number, obj: T[]) => boolean): Computed<number>;
+    findLastIndex(predicate: (value: T, index: number, obj: T[]) => boolean): Computed<number>;
+    every(predicate: (value: T, index: number, array: T[]) => boolean): Computed<boolean>;
+    some(predicate: (value: T, index: number, array: T[]) => boolean): Computed<boolean>;
+    includes(searchElement: T, fromIndex?: number): Computed<boolean>;
+    indexOf(searchElement: T, fromIndex?: number): Computed<number>;
+    lastIndexOf(searchElement: T, fromIndex?: number): Computed<number>;
+    at(index: number): Computed<T | undefined>;
+    concat(...items: (T | T[])[]): Computed<T[]>;
+    flat<depth extends number = 1>(depth?: depth): Computed<any[]>;
+    flatMap<U>(callback: (value: T, index: number, array: T[]) => U | U[]): Computed<U[]>;
+    join(separator?: string): Computed<string>;
+}
+
+export type ArraySignalAccessor<T extends any[]> = SignalAccessor<T> & ReactiveArrayMethods<T[number]> & {
+    push(...items: T[number][]): number;
+    pop(): T[number] | undefined;
+    shift(): T[number] | undefined;
+    unshift(...items: T[number][]): number;
+    splice(start: number, deleteCount: number, ...items: T[number][]): T[number][];
+    remove(predicate: (item: T[number], index: number) => boolean): void;
+    clear(): void;
+    sort(compareFn?: (a: T[number], b: T[number]) => number): ArraySignalAccessor<T>;
+    reverse(): ArraySignalAccessor<T>;
+}
+
+export type ComputedAccessor<T> = {
+    (): T;
+    isSignal: boolean;
+    readonly: true;
+} & (T extends any[] ? ReactiveArrayMethods<T[number]> : {})
+
+export type Signal<T = any> = SignalAccessor<T> & (T extends any[] ? ReactiveArrayMethods<T[number]> : {})
+export type Computed<T = any> = ComputedAccessor<T> & (T extends any[] ? ReactiveArrayMethods<T[number]> : {})
+
+type EffectRunner = {
+    (): void;
+    deps: Set<Set<EffectRunner>>;
+}
+
+export type WatchSource<T = any> = (() => T) | Signal<T> | Computed<T>
+export type WatchCallback<T = any> = (newValue: T, oldValue: T | undefined, onCleanup: (fn: () => void) => void) => void
+
+export interface WatchOptions {
+    immediate?: boolean;
+    equals?: (a: any, b: any) => boolean;
+}
+
+export declare function signal<T extends any[]>(initialValue: T): ArraySignalAccessor<T>
+export declare function signal<T>(initialValue: T): SignalAccessor<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
+export declare function watch<T>(source: WatchSource<T>, callback: WatchCallback<T>, options?: WatchOptions): () => void
+export declare function watch<T extends any[]>(
+    sources: [...{ [K in keyof T]: WatchSource<T[K]> }],
+    callback: (newValue: T, oldValue: T | undefined, onCleanup: (fn: () => void) => void) => void,
+    options?: WatchOptions
+): () => void
+export declare function inspect(...args: any[]): (() => void) | void
+export declare function onCleanup(fn: () => void): void
+
+declare function setEffectHook(fn: (eff: any) => void): void
+

package/create-fusee-go/internal/assets/embed/framework/types/store.d.ts

@@ -0,0 +1,8 @@
+export function defineStore<T>(id: string, setup: () => T): () => T;
+export function resetStore(id: string): void;
+export function clearStores(): void;
+export function registerStorePlugin(plugin: (store: any, id: string) => void): void;
+
+declare global {
+    function defineStore<T>(id: string, setup: () => T): () => T;
+}

package/create-fusee-go/internal/assets/templates/Counter.tmpl

@@ -0,0 +1,26 @@
+{{if .IsTS}}interface CounterResult {
+    count: Signal<number>
+    inc: () => void
+    dec: () => void
+    template: string
+}
+
+export const Counter = defineComponent({
+    setup(): CounterResult {
+{{else}}export const Counter = defineComponent({
+    setup() {
+{{end}}        const count = signal{{if .IsTS}}<number>{{end}}(0);
+        return {
+            count,
+            inc: () => count(count() + 1),
+            dec: () => count(count() - 1),
+            template: `
+                <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:3rem; font-weight:bold; min-width:60px; text-align:center;">{{`{{`}} count {{`}}` }}</span>
+                    <button @click="inc" style="{{.BtnStyle}}">+</button>
+                </div>
+            `
+        };
+    }
+});

package/create-fusee-go/internal/assets/templates/component.tmpl

@@ -0,0 +1,11 @@
+export const {{.ProjectName}} = defineComponent({
+    setup() {
+        return {
+            template: `
+                <div class="component-{{.ProjectName}}">
+                    <h3>{{.ProjectName}} Component</h3>
+                </div>
+            `
+        };
+    }
+});

package/create-fusee-go/internal/assets/templates/components/Loading.tmpl

@@ -0,0 +1,24 @@
+export const Loading = defineComponent({
+    setup() {
+        return {
+            template: `
+                <div style="display: flex; justify-content: center; align-items: center; padding: 5rem;">
+                    <div style="
+                        width: 50px; 
+                        height: 50px; 
+                        border: 5px solid #222; 
+                        border-top: 5px solid #ff3333; 
+                        border-radius: 50%; 
+                        animation: spin 1s linear infinite;
+                    "></div>
+                    <style>
+                        @keyframes spin {
+                            0% { transform: rotate(0deg); }
+                            100% { transform: rotate(360deg); }
+                        }
+                    </style>
+                </div>
+            `
+        }
+    }
+})

package/create-fusee-go/internal/assets/templates/index.html.tmpl

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Fusée App</title>
+    <style>
+        body { background: #050505; color: white; font-family: system-ui, margin: 0; }
+        #app { min-height: 100vh; }
+    </style>
+</head>
+<body>
+    <div id="app"></div>
+    <script type="module" src="/app/main.{{.Ext}}"></script>
+</body>
+</html>

package/create-fusee-go/internal/assets/templates/main.tmpl

@@ -0,0 +1,14 @@
+import { createRouter, mountOutlet, generateRoutes } from 'fusee-framework';
+import { Loading } from './components/Loading';
+
+const pages = import.meta.glob('./pages/**/*.{js,ts}');
+const routes = generateRoutes(pages, {
+    loadingComponent: Loading
+});
+
+createRouter(routes);
+
+const root = document.getElementById('app');
+if (root) {
+    mountOutlet(root);
+}

package/create-fusee-go/internal/assets/templates/package.json.tmpl

@@ -0,0 +1,14 @@
+{
+  "name": "{{.ProjectName}}",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "vite": "^5.0.0",
+    "unplugin-auto-import": "^0.17.0"{{if .IsTS}},
+    "typescript": "^5.0.0"{{end}}
+  }
+}

package/create-fusee-go/internal/assets/templates/page.tmpl

@@ -0,0 +1,12 @@
+export const {{.ProjectName}} = defineComponent({
+    setup() {
+        return {
+            template: `
+                <div class="page-{{.ProjectName}}">
+                    <h1>{{.ProjectName}} Page</h1>
+                    <p>Generated by Fusée CLI</p>
+                </div>
+            `
+        };
+    }
+});

package/create-fusee-go/internal/assets/templates/pages/about.tmpl

@@ -0,0 +1,20 @@
+export const About = defineComponent({
+    setup() {
+        return {
+            template: `
+                <div style="max-width: 800px; margin: 0 auto; padding-top: 4rem;">
+                    <h1 style="color: #ff3333; margin-bottom: 2rem;">About Fusée</h1>
+                    <p style="line-height: 1.6; font-size: 1.2rem; opacity: 0.9;">
+                        Fusée is a high-performance, reactive framework inspired by SolidJS and Nuxt.
+                        It features a unique template engine that works directly with the DOM, 
+                        providing a seamless development experience with minimal overhead.
+                    </p>
+                    <div style="margin-top: 3rem; padding: 2rem; background: #111; border-radius: 15px; border-left: 4px solid #ff3333;">
+                        <h3 style="margin-top: 0;">File-Based Routing</h3>
+                        <p>This page was automatically registered based on its filename in the <code>app/pages</code> directory.</p>
+                    </div>
+                </div>
+            `
+        };
+    }
+});

package/create-fusee-go/internal/assets/templates/pages/index.tmpl

@@ -0,0 +1,22 @@
+export const Index = defineComponent({
+    setup() {
+        const count = signal(0);
+        return {
+            count,
+            inc: () => count(count() + 1),
+            template: `
+                <div style="text-align: center; padding-top: 4rem;">
+                    <h1 style="font-size: 4rem; color: #ff3333; margin-bottom: 1rem;">Welcome Home</h1>
+                    <p style="opacity: 0.7; margin-bottom: 3rem;">File-based routing and layouts are now active!</p>
+                    
+                    <div style="display: inline-flex; align-items: center; gap: 2rem; background: #111; padding: 2rem; border-radius: 20px; border: 1px solid #222;">
+                        <span style="font-size: 3rem; font-weight: bold;">{{`{{`}} count {{`}}` }}</span>
+                        <button @click="inc" style="background: #ff3333; color: white; border: none; padding: 1rem 2rem; border-radius: 10px; cursor: pointer; font-weight: bold;">
+                            Increment
+                        </button>
+                    </div>
+                </div>
+            `
+        };
+    }
+});

package/create-fusee-go/internal/assets/templates/pages/layout.tmpl

@@ -0,0 +1,18 @@
+export const Layout = defineComponent({
+    setup() {
+        return {
+            template: `
+                <div style="min-height: 100vh; display: flex; flex-direction: column;">
+                    <nav style="background: #111; padding: 1rem 2rem; display: flex; gap: 2rem; border-bottom: 1px solid #222;">
+                        <a href="/" style="color: #ff3333; text-decoration: none; font-weight: bold;">Fusée 🚀</a>
+                        <a href="/about" style="color: #eee; text-decoration: none; opacity: 0.8;">About</a>
+                    </nav>
+                    <main style="flex: 1; padding: 2rem;" data-router-view></main>
+                    <footer style="padding: 2rem; border-top: 1px solid #222; text-align: center; opacity: 0.5; font-size: 0.8rem;">
+                        Built with Fusée Framework
+                    </footer>
+                </div>
+            `
+        };
+    }
+});

package/create-fusee-go/internal/assets/templates/tsconfig.json.tmpl

@@ -0,0 +1,14 @@
+{
+  "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"]
+}

package/create-fusee-go/internal/assets/templates/vite.config.js.tmpl

@@ -0,0 +1,18 @@
+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
+    })
+  ]
+});

package/create-fusee-go/main.go

@@ -0,0 +1,7 @@
+package main
+
+import "create-fusee/cmd"
+
+func main() {
+	cmd.Execute()
+}

package/framework/auto-import-preset.js

@@ -1,9 +1,13 @@
-export const FuseePreset = {
-    'fusee-framework': [
-        'signal', 'computed', 'effect', 'watch',
-        'batch', 'untrack', 'inspect',
-        'defineComponent', 'onMount', 'onUnmount',
-        'directive',
-        'mountOutlet', 'mountTemplate', 'emit'
-    ]
-}
+export const FuseePreset = {
+    'fusee-framework': [
+        'signal', 'computed', 'effect', 'watch',
+        'batch', 'untrack', 'inspect', 'onCleanup',
+        'defineComponent', 'onMount', 'onUnmount',
+        'directive',
+        'mountOutlet', 'mountTemplate', 'emit',
+        'defineStore', 'resetStore', 'clearStores',
+        'registerStorePlugin', 'useNestedStore',
+        'storeToRefs', 'storeToState', 'storeToGetters',
+        'MutationType'
+    ]
+}