@flisk-sh/flisk 0.0.0-stage → 1.3.190

package/cli/dist/frontend-frameworks/lit.js

@@ -0,0 +1,64 @@
+export const litFrontendProvider = {
+    id: "lit",
+    label: "Lit + Vite",
+    dependencies: {
+        lit: "^3.2.0",
+    },
+    devDependencies: {},
+    compilerOptions: {},
+    createFiles(name) {
+        return [
+            {
+                filename: "index.html",
+                content: `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${name}</title>
+  </head>
+  <body>
+    <app-root></app-root>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
+`,
+                description: "Generating HTML template",
+                emoji: "💻",
+            },
+            {
+                filename: "src/main.ts",
+                content: `import './app-root';
+`,
+                description: "Generating Lit entry",
+                emoji: "💻",
+            },
+            {
+                filename: "src/app-root.ts",
+                content: `import { LitElement, css, html } from 'lit';
+
+export class AppRoot extends LitElement {
+  static styles = css\`
+    :host {
+      display: block;
+      padding: 2rem;
+      font-family: system-ui;
+    }
+  \`;
+
+  render() {
+    return html\`
+      <h1>${name}</h1>
+      <p>Frontend resource created with Flisk</p>
+    \`;
+  }
+}
+
+customElements.define('app-root', AppRoot);
+`,
+                description: "Generating Lit app",
+                emoji: "💻",
+            },
+        ];
+    },
+};

package/cli/dist/frontend-frameworks/preact.js

@@ -0,0 +1,62 @@
+export const preactFrontendProvider = {
+    id: "preact",
+    label: "Preact + Vite",
+    dependencies: {
+        preact: "^10.26.0",
+    },
+    devDependencies: {
+        "@preact/preset-vite": "^2.10.0",
+    },
+    compilerOptions: {
+        jsx: "react-jsx",
+        jsxImportSource: "preact",
+    },
+    createFiles(name) {
+        return [
+            {
+                filename: "index.html",
+                content: `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${name}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`,
+                description: "Generating HTML template",
+                emoji: "💻",
+            },
+            {
+                filename: "src/main.tsx",
+                content: `import { render } from 'preact';
+import App from './App';
+
+render(<App />, document.getElementById('app')!);
+`,
+                description: "Generating Preact entry",
+                emoji: "💻",
+            },
+            {
+                filename: "src/App.tsx",
+                content: `function App() {
+  return (
+    <div style={{ padding: '2rem', fontFamily: 'system-ui' }}>
+      <h1>${name}</h1>
+      <p>Frontend resource created with Flisk</p>
+    </div>
+  );
+}
+
+export default App;
+`,
+                description: "Generating Preact app",
+                emoji: "💻",
+            },
+        ];
+    },
+};

package/cli/dist/frontend-frameworks/qwik.js

@@ -0,0 +1,61 @@
+export const qwikFrontendProvider = {
+    id: "qwik",
+    label: "Qwik + Vite",
+    dependencies: {
+        "@builder.io/qwik": "^1.12.0",
+    },
+    devDependencies: {},
+    compilerOptions: {
+        jsx: "react-jsx",
+        jsxImportSource: "@builder.io/qwik",
+    },
+    createFiles(name) {
+        return [
+            {
+                filename: "index.html",
+                content: `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${name}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`,
+                description: "Generating HTML template",
+                emoji: "💻",
+            },
+            {
+                filename: "src/main.tsx",
+                content: `import '@builder.io/qwik/qwikloader.js';
+import { render } from '@builder.io/qwik';
+import { App } from './App';
+
+render(document.getElementById('app') as HTMLElement, <App />);
+`,
+                description: "Generating Qwik entry",
+                emoji: "💻",
+            },
+            {
+                filename: "src/App.tsx",
+                content: `import { component$ } from '@builder.io/qwik';
+
+export const App = component$(() => {
+  return (
+    <div style={{ padding: '2rem', fontFamily: 'system-ui' }}>
+      <h1>${name}</h1>
+      <p>Frontend resource created with Flisk</p>
+    </div>
+  );
+});
+`,
+                description: "Generating Qwik app",
+                emoji: "💻",
+            },
+        ];
+    },
+};

package/cli/dist/frontend-frameworks/react.js

@@ -0,0 +1,69 @@
+export const reactFrontendProvider = {
+    id: "react",
+    label: "React + Vite",
+    dependencies: {
+        react: "^19.0.0",
+        "react-dom": "^19.0.0",
+    },
+    devDependencies: {
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
+        "@vitejs/plugin-react": "^4.3.4",
+    },
+    compilerOptions: {
+        jsx: "react-jsx",
+    },
+    createFiles(name) {
+        return [
+            {
+                filename: "index.html",
+                content: `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${name}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`,
+                description: "Generating HTML template",
+                emoji: "💻",
+            },
+            {
+                filename: "src/main.tsx",
+                content: `import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
+`,
+                description: "Generating React entry",
+                emoji: "💻",
+            },
+            {
+                filename: "src/App.tsx",
+                content: `function App() {
+  return (
+    <div style={{ padding: '2rem', fontFamily: 'system-ui' }}>
+      <h1>${name}</h1>
+      <p>Frontend resource created with Flisk</p>
+    </div>
+  );
+}
+
+export default App;
+`,
+                description: "Generating React app",
+                emoji: "💻",
+            },
+        ];
+    },
+};

package/cli/dist/frontend-frameworks/registry.js

@@ -0,0 +1,83 @@
+// Copyright (c) 2026 Flisk Landscape contributors
+// SPDX-License-Identifier: MIT
+import { TdkError } from "../utils/errors.js";
+import { litFrontendProvider } from "./lit.js";
+import { preactFrontendProvider } from "./preact.js";
+import { qwikFrontendProvider } from "./qwik.js";
+import { reactFrontendProvider } from "./react.js";
+import { solidFrontendProvider } from "./solid.js";
+import { svelteFrontendProvider } from "./svelte.js";
+import { tanstackRouterFrontendProvider } from "./tanstack-router.js";
+import { vanillaFrontendProvider } from "./vanilla.js";
+import { vueFrontendProvider } from "./vue.js";
+export const DEFAULT_FRONTEND_FRAMEWORK = "react";
+export const FRONTEND_FRAMEWORKS = {
+    react: reactFrontendProvider,
+    vue: vueFrontendProvider,
+    svelte: svelteFrontendProvider,
+    preact: preactFrontendProvider,
+    lit: litFrontendProvider,
+    solid: solidFrontendProvider,
+    qwik: qwikFrontendProvider,
+    vanilla: vanillaFrontendProvider,
+    "tanstack-router": tanstackRouterFrontendProvider,
+};
+// Frameworks that own their own server or build config. They are never scaffolded as Vite SPA providers; they go through
+// `flisk resource <name> --type bring-your-own` instead.
+export const META_FRAMEWORK_IDS = [
+    "next",
+    "nuxt",
+    "sveltekit",
+    "astro",
+    "angular",
+    "remix",
+    "tanstack-start",
+];
+// Providers that have passed the resource-types/frontend e2e suite (one leg per framework, see tests/e2e/axes.json).
+export const VERIFIED_FRONTEND_FRAMEWORKS = [
+    "react",
+    "vue",
+    "svelte",
+    "preact",
+    "lit",
+    "solid",
+    "qwik",
+    "vanilla",
+    "tanstack-router",
+];
+export function listFrontendFrameworks() {
+    return Object.entries(FRONTEND_FRAMEWORKS).map(([id, provider]) => ({
+        id,
+        label: provider.label,
+        kind: "vite-spa",
+        verified: VERIFIED_FRONTEND_FRAMEWORKS.includes(id),
+        command: `flisk resource <name> --type frontend --framework ${id}`,
+    }));
+}
+export function getFrontendFramework(frameworkId, resourceName) {
+    const id = (frameworkId ?? DEFAULT_FRONTEND_FRAMEWORK).trim().toLowerCase();
+    const provider = Object.hasOwn(FRONTEND_FRAMEWORKS, id) ? FRONTEND_FRAMEWORKS[id] : undefined;
+    if (!provider) {
+        const supportedIds = Object.keys(FRONTEND_FRAMEWORKS).join(", ");
+        const isMeta = META_FRAMEWORK_IDS.includes(id);
+        const byo = `flisk resource ${resourceName ?? "<name>"} --type bring-your-own`;
+        throw new TdkError(`${isMeta ? `"${frameworkId}" is not a Vite SPA provider` : `Unknown frontend framework "${frameworkId}"`}. Supported frameworks: ${supportedIds}.`, [
+            `Use one of: ${supportedIds}`,
+            `Omit --framework to use ${DEFAULT_FRONTEND_FRAMEWORK}`,
+            ...(isMeta ? [`Create the app with ${id}'s own CLI, then register it: ${byo}`] : []),
+        ]);
+    }
+    return provider;
+}
+export function resolveFrontendFramework(resourceType, frameworkId, resourceName) {
+    if (resourceType !== "frontend") {
+        // Backends take their own framework ids (see backend-frameworks/registry.ts).
+        if (frameworkId !== undefined && resourceType !== "backend") {
+            throw new TdkError("--framework can only be used with --type frontend or --type backend.", [
+                "Add --type frontend or --type backend, or drop --framework for this resource type",
+            ]);
+        }
+        return undefined;
+    }
+    return getFrontendFramework(frameworkId, resourceName);
+}

package/cli/dist/frontend-frameworks/solid.js

@@ -0,0 +1,62 @@
+export const solidFrontendProvider = {
+    id: "solid",
+    label: "Solid + Vite",
+    dependencies: {
+        "solid-js": "^1.9.0",
+    },
+    devDependencies: {
+        "vite-plugin-solid": "^2.11.0",
+    },
+    compilerOptions: {
+        jsx: "preserve",
+        jsxImportSource: "solid-js",
+    },
+    createFiles(name) {
+        return [
+            {
+                filename: "index.html",
+                content: `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${name}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`,
+                description: "Generating HTML template",
+                emoji: "💻",
+            },
+            {
+                filename: "src/main.tsx",
+                content: `import { render } from 'solid-js/web';
+import App from './App';
+
+render(() => <App />, document.getElementById('app')!);
+`,
+                description: "Generating Solid entry",
+                emoji: "💻",
+            },
+            {
+                filename: "src/App.tsx",
+                content: `function App() {
+  return (
+    <div style={{ padding: '2rem', 'font-family': 'system-ui' }}>
+      <h1>${name}</h1>
+      <p>Frontend resource created with Flisk</p>
+    </div>
+  );
+}
+
+export default App;
+`,
+                description: "Generating Solid app",
+                emoji: "💻",
+            },
+        ];
+    },
+};

package/cli/dist/frontend-frameworks/svelte.js

@@ -0,0 +1,67 @@
+export const svelteFrontendProvider = {
+    id: "svelte",
+    label: "Svelte + Vite",
+    dependencies: {
+        svelte: "^5.0.0",
+    },
+    devDependencies: {
+        "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    },
+    compilerOptions: {},
+    createFiles(name) {
+        return [
+            {
+                filename: "index.html",
+                content: `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${name}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
+`,
+                description: "Generating HTML template",
+                emoji: "💻",
+            },
+            {
+                filename: "src/main.ts",
+                content: `import { mount } from 'svelte';
+import App from './App.svelte';
+
+const app = mount(App, { target: document.getElementById('app')! });
+
+export default app;
+`,
+                description: "Generating Svelte entry",
+                emoji: "💻",
+            },
+            {
+                filename: "src/App.svelte",
+                content: `<script lang="ts">
+  const message: string = 'Frontend resource created with Flisk';
+</script>
+
+<main style="padding: 2rem; font-family: system-ui">
+  <h1>${name}</h1>
+  <p>{message}</p>
+</main>
+`,
+                description: "Generating Svelte app",
+                emoji: "💻",
+            },
+            {
+                filename: "src/vite-env.d.ts",
+                content: `/// <reference types="svelte" />
+/// <reference types="vite/client" />
+`,
+                description: "Generating Svelte module types",
+                emoji: "⚙️",
+            },
+        ];
+    },
+};

package/cli/dist/frontend-frameworks/tanstack-router.js

@@ -0,0 +1,101 @@
+// A client-side Vite SPA using TanStack Router with code-based routes. It shares the React toolchain (same Vite config, JSX
+// setting and entry file), so the generators only learn the id. TanStack Start (SSR) is a different contract: bring your own.
+export const tanstackRouterFrontendProvider = {
+    id: "tanstack-router",
+    label: "TanStack Router + React + Vite",
+    dependencies: {
+        "@tanstack/react-router": "^1.0.0",
+        react: "^19.0.0",
+        "react-dom": "^19.0.0",
+    },
+    devDependencies: {
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
+        "@vitejs/plugin-react": "^4.3.4",
+    },
+    compilerOptions: {
+        jsx: "react-jsx",
+    },
+    createFiles(name) {
+        return [
+            {
+                filename: "index.html",
+                content: `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${name}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`,
+                description: "Generating HTML template",
+                emoji: "💻",
+            },
+            {
+                filename: "src/main.tsx",
+                content: `import { RouterProvider } from '@tanstack/react-router';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { router } from './router';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>
+);
+`,
+                description: "Generating TanStack Router entry",
+                emoji: "💻",
+            },
+            {
+                filename: "src/router.tsx",
+                content: `/// <reference types="vite/client" />
+import { createRootRoute, createRoute, createRouter, Link, Outlet } from '@tanstack/react-router';
+
+const rootRoute = createRootRoute({
+  component: () => (
+    <div style={{ padding: '2rem', fontFamily: 'system-ui' }}>
+      <nav>
+        <Link to="/">Home</Link>
+      </nav>
+      <Outlet />
+    </div>
+  ),
+});
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  component: () => (
+    <>
+      <h1>${name}</h1>
+      <p>Frontend resource created with Flisk</p>
+    </>
+  ),
+});
+
+const routeTree = rootRoute.addChildren([indexRoute]);
+
+export const router = createRouter({
+  routeTree,
+  // The app is served under /<name>/ behind Traefik, and Vite exposes that base here.
+  basepath: import.meta.env.BASE_URL,
+});
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}
+`,
+                description: "Generating TanStack Router routes",
+                emoji: "💻",
+            },
+        ];
+    },
+};

package/cli/dist/frontend-frameworks/types.js

@@ -0,0 +1 @@
+export {};

package/cli/dist/frontend-frameworks/vanilla.js

@@ -0,0 +1,59 @@
+export const vanillaFrontendProvider = {
+    id: "vanilla",
+    label: "Vanilla TypeScript + Vite",
+    dependencies: {},
+    devDependencies: {},
+    compilerOptions: {},
+    createFiles(name) {
+        return [
+            {
+                filename: "index.html",
+                content: `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${name}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
+`,
+                description: "Generating HTML template",
+                emoji: "💻",
+            },
+            {
+                filename: "src/main.ts",
+                content: `import { renderApp } from './app';
+
+const root = document.getElementById('app');
+if (root) {
+  renderApp(root);
+}
+`,
+                description: "Generating vanilla entry",
+                emoji: "💻",
+            },
+            {
+                filename: "src/app.ts",
+                content: `export function renderApp(root: HTMLElement): void {
+  root.style.padding = '2rem';
+  root.style.fontFamily = 'system-ui';
+
+  const title = document.createElement('h1');
+  title.textContent = '${name}';
+
+  const note = document.createElement('p');
+  note.textContent = 'Frontend resource created with Flisk';
+
+  root.replaceChildren(title, note);
+}
+`,
+                description: "Generating vanilla app",
+                emoji: "💻",
+            },
+        ];
+    },
+};