zuby 1.0.20 → 1.0.22

package/commands/init.d.ts

@@ -1,2 +1,18 @@
 import { InitCommandOptions } from '../types.js';
 export default function init(options: InitCommandOptions): Promise<void>;
+export declare function initExample(example: Example, options: InitOptions): Promise<void>;
+export declare function getExamples(): Example[];
+export declare function updateDependencies({ projectPath, jsxProvider }: InitOptions): Promise<void>;
+export interface Example {
+    name: string;
+    path: string;
+    isJs: boolean;
+    isTs: boolean;
+}
+export interface InitOptions {
+    projectName?: string;
+    projectPath?: string;
+    jsxProvider?: string;
+    useTypescript?: boolean;
+    zubyVersion?: string;
+}

package/commands/init.js

@@ -2,33 +2,140 @@ import inquirer from 'inquirer';
 import { createLogger } from '../logger/index.js';
 import { getTitle } from '../branding.js';
 import chalk from 'chalk';
+import { existsSync, readdirSync, cpSync, statSync } from 'fs';
+import { readFile, writeFile } from 'fs/promises';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import { normalizePath } from '../utils/pathUtils.js';
+import { getZubyPackageConfig } from '../packageConfig.js';
+import { globSync } from 'glob';
+import { ProviderDependencies, Providers } from '../providers/index.js';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 export default async function init(options) {
     const logger = createLogger();
     logger.clearScreen('info');
     logger?.info(`${getTitle(`Let's get started with Zuby`)}\r\n`);
     logger.info("Initializing a new Zuby project");
-    const { projectName } = await inquirer.prompt([
+    const examples = getExamples();
+    const defaultProjectName = 'my-zuby-app';
+    const defaultExample = examples.find(example => example.name === 'basic');
+    const { projectPath, jsxProvider, exampleName, } = await inquirer.prompt([
         {
             type: 'input',
-            name: 'projectName',
-            message: 'What\'s the name of your new app?',
-            default: './my-zuby-app',
-            prefix: `${chalk.yellowBright.bgWhite(' name ')} ❯ `,
+            name: 'projectPath',
+            message: 'Where would you like to create your new project?',
+            default: `./${defaultProjectName}`,
+            prefix: `${chalk.yellowBright.bgWhite(' name    ')} ❯ `,
+            validate(projectPath) {
+                if (existsSync(projectPath)) {
+                    return 'Project with this name already exists. Please choose a different one.';
+                }
+                return true;
+            }
         },
         {
             type: 'list',
             name: 'jsxProvider',
             message: 'In which JSX framework would you like to write your components?',
-            choices: ['preact', 'react'],
+            choices: Object.keys(Providers),
             default: 'preact',
-            prefix: `${chalk.yellowBright.bgWhite(' jsx  ')} ❯ `,
+            prefix: `${chalk.yellowBright.bgWhite(' jsx     ')} ❯ `,
         },
         {
-            type: 'confirm',
-            name: 'useTypescript',
-            message: 'Do you want to write in TypeScript?',
-            default: true,
-            prefix: `${chalk.yellowBright.bgWhite(' ts   ')} ❯ `,
-        }
+            type: 'list',
+            name: 'exampleName',
+            message: 'Which Zuby example project would you like to use?',
+            choices: examples.map(example => example.name),
+            default: defaultExample?.name,
+            prefix: `${chalk.yellowBright.bgWhite(' example ')} ❯ `,
+        },
     ]);
+    let useTypescript = false;
+    const selectedExample = examples.find(example => example.name === exampleName);
+    if (!selectedExample) {
+        logger.error(`Example ${exampleName} was not found`);
+        process.exit(1);
+    }
+    if (selectedExample?.isTs) {
+        ({
+            useTypescript,
+        } = await inquirer.prompt([
+            {
+                type: 'confirm',
+                name: 'useTypescript',
+                message: 'Do you want to write in TypeScript?',
+                default: true,
+                prefix: `${chalk.yellowBright.bgWhite(' ts      ')} ❯ `,
+            }
+        ]));
+    }
+    const projectName = projectPath.split('/').pop() || defaultProjectName;
+    const zubyVersion = getZubyPackageConfig().version;
+    await initExample(selectedExample, {
+        projectName,
+        projectPath,
+        jsxProvider,
+        useTypescript,
+        zubyVersion,
+    });
+    await updateDependencies({
+        projectPath,
+        jsxProvider,
+    });
+    logger?.info(`\r\nCreated ${chalk.bold(projectName)} at ${chalk.bold(projectPath)}`);
+    logger?.info(`${chalk.greenBright.bold('We are done! 🎉')}`);
+    logger?.info(`\r\n`);
+    logger?.info(`Now enter your project directory using ${chalk.bold(`cd ${projectPath}`)}`);
+    logger?.info(`and run ${chalk.bold('npm install')} or ${chalk.bold('yarn install')} to install all dependencies.`);
+}
+export async function initExample(example, 
+// Following values can be used in templates
+// and will be replaced during init.
+// Example: <jsxProvider> => preact
+options) {
+    const { projectPath = '', useTypescript, } = options;
+    // Copy example files
+    cpSync(normalizePath(join(example.path, useTypescript ? 'ts' : 'js')), projectPath, {
+        recursive: true
+    });
+    // Interpolate values in files of the example
+    const transformPromises = globSync(normalizePath(join(projectPath, '**', '*')))
+        .map(async (file) => {
+        if (statSync(file).isDirectory())
+            return;
+        let fileContent = await readFile(file, 'utf-8');
+        Object.entries(options).forEach(([key, value]) => {
+            fileContent = fileContent.replace(new RegExp(`<${key}>`, 'g'), value.toString());
+        });
+        await writeFile(file, fileContent);
+    });
+    await Promise.all(transformPromises);
+}
+export function getExamples() {
+    const examplesPath = normalizePath(join(__dirname, '..', 'examples'));
+    const exampleNames = readdirSync(examplesPath);
+    return exampleNames.map(exampleName => ({
+        name: exampleName,
+        path: normalizePath(join(examplesPath, exampleName)),
+        isJs: existsSync(normalizePath(join(examplesPath, exampleName, 'js'))),
+        isTs: existsSync(normalizePath(join(examplesPath, exampleName, 'ts'))),
+    }));
+}
+export async function updateDependencies({ projectPath = '', jsxProvider = '' }) {
+    const packageJsonPath = normalizePath(join(projectPath, 'package.json'));
+    let packageJson = JSON.parse(await readFile(packageJsonPath, 'utf-8'));
+    // Receive dependencies for the selected jsxProvider
+    const dependencies = ProviderDependencies[jsxProvider]?.dependencies || {};
+    const devDependencies = ProviderDependencies[jsxProvider]?.devDependencies || {};
+    // Merge all dependencies
+    packageJson.dependencies = {
+        ...packageJson.dependencies,
+        ...dependencies,
+    };
+    packageJson.devDependencies = {
+        ...packageJson.devDependencies,
+        ...devDependencies,
+    };
+    await writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2));
 }

package/commands/preview.js

@@ -7,6 +7,6 @@ export default async function preview(options) {
     if (outDir && !existsSync(outDir)) {
         throw new Error(`The outDir '${outDir}' does not exist. Did you forget to run 'zuby build' first?`);
     }
-    const serverPath = normalizePath(resolve(outDir, 'server.js'));
+    const serverPath = normalizePath(resolve(outDir, 'server.mjs'));
     await import(`file:///${serverPath}`);
 }

package/config.d.ts

@@ -1,4 +1,4 @@
-import { JsxProvider, ZubyConfig } from './types.js';
+import { ZubyConfig } from './types.js';
 /**
  * This function loads the config file and returns the config object with default values.
  * It also caches the config object for future use.
@@ -15,10 +15,5 @@ export declare const mergeDefaultConfig: (config?: ZubyConfig) => Promise<ZubyCo
  * This function returns the array of built-in Zuby plugins.
  * Check which framework components are relying on each plugin
  * before removing any of them.
- * @param config
  */
 export declare const getBuiltInPlugins: () => import("vite").PluginOption[];
-/**
- * Returns the instance of the JSX provider.
- */
-export declare const getJsxProvider: (jsx: string) => JsxProvider;

package/config.js

@@ -4,14 +4,11 @@ import { bundleRequire } from 'bundle-require';
 import { getApps, getErrors, getInnerLayouts, getLayouts, getPages, getTemplates } from './templates/index.js';
 import { createLogger } from './logger/index.js';
 // Plugins
-import { preact as preactPlugin } from '@preact/preset-vite';
 import contextPlugin from './plugins/contextPlugin/index.js';
 import compileTimePlugin from './plugins/compileTimePlugin/index.js';
 import chunkNamingPlugin from './plugins/chunkNamingPlugin/index.js';
 import prerenderPlugin from './plugins/prerenderPlugin/index.js';
-// JSX providers
-import preactProvider from './providers/preact/index.js';
-import { generateBuildId } from './utils/buildIdUtils.js';
+import { checkProviderDependencies, getProvider } from './providers/index.js';
 let zubyConfig;
 /**
  * This function loads the config file and returns the config object with default values.
@@ -44,6 +41,8 @@ export const getZubyConfig = async (configFile = ZUBY_CONFIG_FILE, cache = true)
         throw new Error(`No valid default export found in config file: ${foundConfigFile}`);
     }
     zubyConfig = await mergeDefaultConfig(zubyConfig);
+    // Check provider dependencies
+    await checkProviderDependencies(zubyConfig?.jsxProvider?.name || '');
     return zubyConfig;
 };
 /**
@@ -63,8 +62,6 @@ export const mergeDefaultConfig = async (config = {}) => {
     config.server = config.server ?? {};
     config.server.host = config.server.host ?? 'localhost';
     config.server.port = config.server.port ?? 3000;
-    // Generate the build id if not set
-    config.buildId = config.buildId ?? generateBuildId();
     // Add minification
     config.minifyCSS = config.minifyCSS ?? true;
     config.minifyHTML = config.minifyHTML ?? true;
@@ -88,14 +85,15 @@ export const mergeDefaultConfig = async (config = {}) => {
     config.vite.logLevel = config.vite.logLevel ?? config.logLevel;
     config.vite.customLogger = config.vite.customLogger ?? config.customLogger;
     config.vite.server = config.vite.server ?? config.server;
+    // Load jsx provider
+    config.jsx = config.jsx ?? 'preact';
+    config.jsxProvider = config.jsxProvider ?? await getProvider(config.jsx);
     // Merge built-in plugins with user plugins
     config.vite.plugins = [
         ...getBuiltInPlugins(),
+        ...(config.jsxProvider?.getPlugins() ?? []),
         ...(config.vite?.plugins ?? []),
     ];
-    // Load jsx provider
-    config.jsx = config.jsx ?? 'preact';
-    config.jsxProvider = config.jsxProvider ?? getJsxProvider(config.jsx);
     // Load templates
     const templates = await getTemplates();
     config.templates = config.templates ?? {};
@@ -110,25 +108,12 @@ export const mergeDefaultConfig = async (config = {}) => {
  * This function returns the array of built-in Zuby plugins.
  * Check which framework components are relying on each plugin
  * before removing any of them.
- * @param config
  */
 export const getBuiltInPlugins = () => {
     return [
-        preactPlugin(),
         contextPlugin(),
         compileTimePlugin(),
         chunkNamingPlugin(),
         prerenderPlugin(),
     ];
 };
-/**
- * Returns the instance of the JSX provider.
- */
-export const getJsxProvider = (jsx) => {
-    const provider = ({
-        'preact': preactProvider,
-    })[jsx] || undefined;
-    if (!provider)
-        throw new Error(`JSX provider '${jsx}' is not supported.`);
-    return provider;
-};

package/examples/basic/js/components/Card/index.css

@@ -0,0 +1,37 @@
+.link-card {
+    list-style: none;
+    display: flex;
+    padding: 1px;
+    background-color: #23262d;
+    background-image: none;
+    background-size: 400%;
+    border-radius: 7px;
+    background-position: 100%;
+    transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+.link-card > a {
+    width: 100%;
+    text-decoration: none;
+    line-height: 1.4;
+    padding: calc(1.5rem - 1px);
+    border-radius: 8px;
+    color: white;
+    background-color: #23262d;
+    opacity: 0.8;
+}
+h2 {
+    margin: 0;
+    font-size: 1.25rem;
+    transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+}
+p {
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+}
+.link-card:is(:hover, :focus-within) {
+    background-position: 0;
+}
+.link-card:is(:hover, :focus-within) h2 {
+    color: #ffcc00;
+}

package/examples/basic/js/components/Card/index.jsx

@@ -0,0 +1,17 @@
+import styles from './index.module.css';
+
+export default function Card({ href, title, body }) {
+  return (
+    <li className={styles.linkCard}>
+      <a href={href}>
+        <h2>
+          {title}
+          <span>&rarr;</span>
+        </h2>
+        <p>
+          {body}
+        </p>
+      </a>
+    </li>
+  );
+}

package/examples/basic/js/components/Card/index.module.css

@@ -0,0 +1,36 @@
+.linkCard {
+    list-style: none;
+    display: flex;
+    padding: 1px;
+    background-color: #fbf9f8;
+    background-image: none;
+    background-size: 400%;
+    border-radius: 7px;
+    background-position: 100%;
+    transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+.linkCard > a {
+    width: 100%;
+    text-decoration: none;
+    line-height: 1.4;
+    padding: calc(1.5rem - 1px);
+    border-radius: 8px;
+    color: #000;
+    opacity: 0.8;
+}
+h2 {
+    margin: 0;
+    font-size: 1.25rem;
+    transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+}
+p {
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+}
+.linkCard:is(:hover, :focus-within) {
+    background-position: 0;
+}
+.linkCard:is(:hover, :focus-within) h2 {
+    color: #ffcc00;
+}

package/examples/basic/js/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "<projectName>",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "npx zuby dev",
+    "build": "npx zuby build",
+    "preview": "npx zuby preview"
+  },
+  "dependencies": {
+    "zuby": "^<zubyVersion>"
+  }
+}

package/examples/basic/js/pages/about.jsx

@@ -0,0 +1,7 @@
+export default function About() {
+  return (
+    <main>
+      <h1>Hello from <span className="text-gradient">/about</span> page</h1>
+    </main>
+  );
+}

package/examples/basic/js/pages/app.css

@@ -0,0 +1,49 @@
+html {
+    font-family: system-ui, sans-serif;
+    background: #f5f0f0;
+    background-size: 224px;
+}
+code {
+    font-family: 'Segoe UI', Verdana, sans-serif;
+}
+main {
+    margin: auto;
+    padding: 1rem;
+    width: 800px;
+    max-width: calc(100% - 2rem);
+    color: #202020;
+    font-size: 20px;
+    line-height: 1.6;
+}
+h1 {
+    font-size: 4rem;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    margin-bottom: 1em;
+}
+.text-gradient {
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-color: #ef5734;
+    background-image: linear-gradient(315deg, #ef5734 0%, #ffcc2f 74%);
+    background-position: 0;
+}
+.instructions {
+    margin-bottom: 2rem;
+    padding: 1.5rem;
+    border-radius: 8px;
+    text-align: center;
+}
+.instructions code {
+    font-size: 0.8em;
+    font-weight: bold;
+    border-radius: 4px;
+    padding: 0.3em 0.4em;
+}
+.link-card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
+    gap: 2rem;
+    padding: 0;
+}

package/examples/basic/js/pages/app.jsx

@@ -0,0 +1,7 @@
+import './app.css'
+
+export default function App({
+    children
+}) {
+    return children;
+}

package/examples/basic/js/pages/index.jsx

@@ -0,0 +1,24 @@
+import Card from '../components/Card/index.jsx';
+
+export default function Home() {
+  return (
+    <main>
+      <h1>Hello from <span className="text-gradient">Zuby.js</span> site</h1>
+      <p className="instructions">
+        To get started, open the directory <code>./pages</code> in your project and edit <code>index</code> file.
+      </p>
+      <ul role="list" className="link-card-grid">
+        <Card
+          href="https://zuby.futrou.com/docs"
+          title="Documentation"
+          body="Find config API, tips and tricks, and more in the Zuby.js docs."
+        />
+        <Card
+          href="https://zuby.futrou.com/examples"
+          title="Examples"
+          body="See what's possible to build with Zuby.js by browsing examples."
+        />
+      </ul>
+    </main>
+  );
+}

package/examples/basic/js/pages/products/[id].jsx

@@ -0,0 +1,7 @@
+export default function Product() {
+    return (
+        <main>
+            <h1>Hello from the dynamic product page</h1>
+        </main>
+    );
+}

package/examples/basic/js/zuby.config.mjs

@@ -0,0 +1,6 @@
+import { defineConfig } from 'zuby';
+
+export default defineConfig({
+    outDir: '.zuby',
+    jsx: '<jsxProvider>',
+})

package/examples/basic/ts/components/Card/index.module.css

@@ -0,0 +1,36 @@
+.linkCard {
+    list-style: none;
+    display: flex;
+    padding: 1px;
+    background-color: #fbf9f8;
+    background-image: none;
+    background-size: 400%;
+    border-radius: 7px;
+    background-position: 100%;
+    transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+.linkCard > a {
+    width: 100%;
+    text-decoration: none;
+    line-height: 1.4;
+    padding: calc(1.5rem - 1px);
+    border-radius: 8px;
+    color: #000;
+    opacity: 0.8;
+}
+h2 {
+    margin: 0;
+    font-size: 1.25rem;
+    transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+}
+p {
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+}
+.linkCard:is(:hover, :focus-within) {
+    background-position: 0;
+}
+.linkCard:is(:hover, :focus-within) h2 {
+    color: #ffcc00;
+}

package/examples/basic/ts/components/Card/index.tsx

@@ -0,0 +1,21 @@
+import styles from './index.module.css';
+
+export default function Card({ href, title, body } : {
+    href: string,
+    title: string,
+    body: string,
+}) {
+  return (
+    <li className={styles.linkCard}>
+      <a href={href}>
+        <h2>
+          {title}
+          <span>&rarr;</span>
+        </h2>
+        <p>
+          {body}
+        </p>
+      </a>
+    </li>
+  );
+}

package/examples/basic/ts/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "<projectName>",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "npx zuby dev",
+    "build": "npx zuby build",
+    "preview": "npx zuby preview"
+  },
+  "dependencies": {
+    "zuby": "^<zubyVersion>"
+  }
+}

package/examples/basic/ts/pages/about.tsx

@@ -0,0 +1,7 @@
+export default function About() {
+  return (
+    <main>
+      <h1>Hello from <span className="text-gradient">/about</span> page</h1>
+    </main>
+  );
+}

package/examples/basic/ts/pages/app.css

@@ -0,0 +1,49 @@
+html {
+    font-family: system-ui, sans-serif;
+    background: #f5f0f0;
+    background-size: 224px;
+}
+code {
+    font-family: 'Segoe UI', Verdana, sans-serif;
+}
+main {
+    margin: auto;
+    padding: 1rem;
+    width: 800px;
+    max-width: calc(100% - 2rem);
+    color: #202020;
+    font-size: 20px;
+    line-height: 1.6;
+}
+h1 {
+    font-size: 4rem;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    margin-bottom: 1em;
+}
+.text-gradient {
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-color: #ef5734;
+    background-image: linear-gradient(315deg, #ef5734 0%, #ffcc2f 74%);
+    background-position: 0;
+}
+.instructions {
+    margin-bottom: 2rem;
+    padding: 1.5rem;
+    border-radius: 8px;
+    text-align: center;
+}
+.instructions code {
+    font-size: 0.8em;
+    font-weight: bold;
+    border-radius: 4px;
+    padding: 0.3em 0.4em;
+}
+.link-card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
+    gap: 2rem;
+    padding: 0;
+}

package/examples/basic/ts/pages/app.tsx

@@ -0,0 +1,9 @@
+import './app.css'
+
+export default function App({
+    children
+}: {
+    children: any
+}) {
+    return children;
+}

package/examples/basic/ts/pages/index.tsx

@@ -0,0 +1,24 @@
+import Card from '../components/Card';
+
+export default function Home() {
+  return (
+    <main>
+      <h1>Hello from <span className="text-gradient">Zuby.js</span> site</h1>
+      <p className="instructions">
+        To get started, open the directory <code>./pages</code> in your project and edit <code>index</code> file.
+      </p>
+      <ul role="list" className="link-card-grid">
+        <Card
+          href="https://zuby.futrou.com/docs"
+          title="Documentation"
+          body="Find config API, tips and tricks, and more in the Zuby.js docs."
+        />
+        <Card
+          href="https://zuby.futrou.com/examples"
+          title="Examples"
+          body="See what's possible to build with Zuby.js by browsing examples."
+        />
+      </ul>
+    </main>
+  );
+}

package/examples/basic/ts/pages/products/[id].tsx

@@ -0,0 +1,7 @@
+export default function Product() {
+    return (
+        <main>
+            <h1>Hello from the dynamic product page</h1>
+        </main>
+    );
+}

package/examples/basic/ts/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "types": ["vite/client", "<jsxProvider>"],
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "<jsxProvider>",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    "composite": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": [
+    "./**/*",
+    "zuby.config.ts"
+  ]
+}

package/examples/basic/ts/zuby.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'zuby';
+
+export default defineConfig({
+    outDir: '.zuby',
+    jsx: '<jsxProvider>',
+})

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "zuby",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "description": "Zuby.js is Preact Framework for building SPA apps using Vite",
   "type": "module",
   "main": "index.js",
   "scripts": {
     "release": "npm publish --access public ./dist/ ",
     "bump-version": "npm version patch",
-    "build": "rm -rf dist/ && tsc && cp -rf package.json README.md dist/ && npm run bundle-server && npm run bundle-express",
+    "build": "rm -rf dist/ && tsc && cp -rf package.json README.md src/examples dist/ && npm run bundle-server && npm run bundle-express",
     "bundle-server": "esbuild src/server/index.ts --bundle --platform=node --format=esm  --outfile=dist/server/index.js",
     "bundle-express": "esbuild src/server/expressApp.ts --bundle --platform=node --format=cjs --minify --outfile=dist/server/expressApp.cjs",
     "watch-build": "npm run build && tsc --watch",
@@ -16,33 +16,33 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
+    "@preact/preset-vite": "^2.6.0",
     "@vercel/nft": "^0.24.3",
     "bundle-require": "^4.0.2",
     "chalk": "^5.3.0",
     "commander": "^11.0.0",
     "devalue": "^4.3.2",
     "esbuild": "^0.19.5",
+    "glob": "^10.3.10",
     "inquirer": "^9.2.11",
     "magic-string": "^0.30.5",
-    "preact-render-to-string": "^6.2.2",
     "rollup": "^4.0.2",
     "vite": "^4.4.11",
-    "wouter-preact": "^2.12.0",
-    "glob": "^10.3.10"
+    "wouter-preact": "^2.12.0"
   },
   "devDependencies": {
-    "express": "^4.18.2",
-    "@preact/preset-vite": "^2.5.0",
     "@types/express": "^4.17.20",
     "@types/inquirer": "^9.0.6",
     "@types/node": "^20.8.3",
     "@types/react": "^18.2.28",
     "@types/react-dom": "^18.2.13",
+    "express": "^4.18.2",
     "prettier": "^3.0.3",
     "typescript": "^5.2.2"
   },
   "peerDependencies": {
     "preact": "^10.0.0 || ^11.0.0",
+    "preact-render-to-string": "^6.0.0 || ^7.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
@@ -50,6 +50,9 @@
     "preact": {
       "optional": true
     },
+    "preact-render-to-string": {
+      "optional": true
+    },
     "react": {
       "optional": true
     },

package/plugins/chunkNamingPlugin/index.js

@@ -28,7 +28,10 @@ export default function chunkNamingPlugin() {
                 }
                 return `${folder}[name]-[hash].js`;
             };
-            const transformAssetFileName = (chunkInfo) => {
+            const transformAssetFileName = (_chunkInfo) => {
+                if (config?.mode === MODES.production) {
+                    return "chunks/chunk-[hash][extname]";
+                }
                 return "chunks/[name]-[hash][extname]";
             };
             config.build.rollupOptions.output.chunkFileNames = transformJsFileName;

package/plugins/contextPlugin/index.js

@@ -1,4 +1,6 @@
 import { getZubyConfig } from '../../config.js';
+import { relative } from 'path';
+import { normalizePath } from '../../utils/pathUtils.js';
 let viteConfig;
 export default function index() {
     return {
@@ -39,6 +41,7 @@ export async function generateTemplatesCode() {
 }
 export async function generateTemplateCode(template) {
     return `{
+        filename: "${normalizePath(relative(viteConfig?.root || '', template.filename))}",
         path: "${template.path}",
         pathRegex: ${template.pathRegex},
         pathParams: ${JSON.stringify(template.pathParams)},

package/plugins/prerenderPlugin/index.js

@@ -1,5 +1,5 @@
 import { findMatchingTemplate, getStaticPages } from '../../templates/index.js';
-import { existsSync, mkdirSync, writeFileSync } from 'fs';
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'fs';
 import { basename, dirname, join, resolve } from 'path';
 import { getZubyConfig } from '../../config.js';
 import { getContext } from '../../context/index.js';
@@ -36,11 +36,21 @@ export default function prerenderPlugin() {
             const entry = entryModule.default || entryModule;
             const entryClientJs = (await glob(`${outDir}/client/chunks/entry-*.js`)).pop();
             const entryClientCss = (await glob(`${outDir}/client/chunks/entry-*.css`)).pop();
+            const ssrManifest = JSON.parse(readFileSync(resolve(outDir, 'server', 'ssr-manifest.json'), 'utf-8'));
             for (const path of paths) {
                 const zubyContext = getContext().update({
                     currentPath: path,
                     title: undefined
                 });
+                // Page
+                const { pages = [] } = zubyContext.templates || {};
+                const { template: page } = findMatchingTemplate(pages, path);
+                // App
+                const { apps = [] } = zubyContext.templates || {};
+                const { template: app } = findMatchingTemplate(apps, path);
+                // Nothing to pre-render
+                if (!page || !app)
+                    continue;
                 // Load layout template component
                 const { layouts = [] } = zubyContext.templates || {};
                 const { template: layout } = findMatchingTemplate(layouts, path);
@@ -63,17 +73,30 @@ export default function prerenderPlugin() {
                         children: entry()
                     }),
                 })) || '';
-                // Insert document type
-                html = "<!DOCTYPE html>" + html;
-                // Insert client SPA assets
-                // Insert main entry js
-                if (entryClientJs) {
-                    html = html.replace(/(<\/head>)/, `<script type="module" src="/chunks/${basename(entryClientJs)}"></script>$1`);
-                }
-                // Insert main entry css
+                const staticImports = [
+                    ...(ssrManifest[app.filename] || []),
+                    ...(ssrManifest[page.filename] || []),
+                ];
+                const cssImports = staticImports.filter((imp) => imp.endsWith('.css'));
+                const jsImports = [];
+                // Entry css
                 if (entryClientCss) {
-                    html = html.replace(/(<\/head>)/, `<link rel='stylesheet' href="/chunks/${basename(entryClientCss)}"/>$1`);
+                    cssImports.unshift(`/chunks/${basename(entryClientCss)}`);
+                }
+                // Entry js
+                if (entryClientJs) {
+                    jsImports.unshift(`/chunks/${basename(entryClientJs)}`);
                 }
+                // Insert document type
+                html = "<!DOCTYPE html>" + html;
+                // Insert client CSS imports
+                cssImports.forEach((imp) => {
+                    html = html.replace(/(<\/head>)/, `<link rel='stylesheet' href="${imp}"/>$1`);
+                });
+                // Insert client JS imports
+                jsImports.forEach((imp) => {
+                    html = html.replace(/(<\/head>)/, `<script type="module" src="${imp}" defer></script>$1`);
+                });
                 const titleHtml = `<title>${zubyContext.title || ''}<\/title>`;
                 // Insert title
                 if (html.match(/<title>(.+)<\/title>/)) {

package/providers/index.d.ts

@@ -0,0 +1,20 @@
+import { JsxProvider } from './types.js';
+export type ProviderName = keyof typeof Providers;
+export declare const Providers: {
+    preact: () => Promise<any>;
+};
+export declare const ProviderDependencies: {
+    [key: string]: {
+        dependencies: {
+            [key: string]: string;
+        };
+        devDependencies: {
+            [key: string]: string;
+        };
+    };
+};
+/**
+ * Returns the instance of the JSX provider.
+ */
+export declare const getProvider: (jsx: string) => Promise<JsxProvider>;
+export declare const checkProviderDependencies: (jsx: string) => Promise<void>;

package/providers/index.js

@@ -0,0 +1,75 @@
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import { normalizePath } from '../utils/pathUtils.js';
+import { readFile } from 'fs/promises';
+import chalk from 'chalk';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+export const Providers = {
+    preact: async () => (await import(`file:///${normalizePath(join(__dirname, 'preact', 'index.js'))}`)).default,
+};
+export const ProviderDependencies = {
+    preact: {
+        dependencies: {
+            'preact': '^10.18.1',
+        },
+        devDependencies: {
+            'preact-render-to-string': '^6.2.2',
+        }
+    },
+    react: {
+        dependencies: {
+            'react': '^18.2.0',
+            'react-dom': '^18.2.0',
+        },
+        devDependencies: {}
+    }
+};
+/**
+ * Returns the instance of the JSX provider.
+ */
+export const getProvider = async (jsx) => {
+    const providerImport = Providers[jsx];
+    if (!providerImport)
+        throw new Error(`JSX provider '${jsx}' is not supported.`);
+    return providerImport();
+};
+export const checkProviderDependencies = async (jsx) => {
+    const packageJsonPath = normalizePath(join(process.cwd(), 'package.json'));
+    const packageJson = JSON.parse(await readFile(packageJsonPath, 'utf-8'));
+    const providerDependencies = ProviderDependencies[jsx]?.dependencies || {};
+    const providerDevDependencies = ProviderDependencies[jsx]?.devDependencies || {};
+    const dependencies = packageJson?.dependencies || {};
+    const devDependencies = packageJson?.devDependencies || {};
+    const getMissingDependencies = (installed, required) => {
+        return Object.entries(required)
+            .reduce((missing, [key, value]) => {
+            if (!installed[key])
+                return {
+                    ...missing,
+                    [key]: value
+                };
+            return missing;
+        }, {});
+    };
+    const missingDependencies = getMissingDependencies(dependencies, providerDependencies);
+    const missingDevDependencies = getMissingDependencies({
+        ...dependencies,
+        ...devDependencies
+    }, providerDevDependencies);
+    if (Object.keys(missingDependencies).length === 0 && Object.keys(missingDevDependencies).length === 0) {
+        return;
+    }
+    console.error(`${chalk.bgRed.bold.whiteBright(` ERROR `)} ${chalk.gray(`missing dependencies...`)}`);
+    console.error(`Zuby JSX provider '${jsx}' requires following dependencies:`);
+    if (Object.keys(missingDependencies).length > 0) {
+        console.error(`${chalk.bold(`dependencies`)}:`);
+        console.error(JSON.stringify(missingDependencies, null, 2));
+    }
+    if (Object.keys(missingDevDependencies).length > 0) {
+        console.error(`${chalk.bold(`devDependencies`)}:`);
+        console.error(JSON.stringify(missingDevDependencies, null, 2));
+    }
+    console.error(`Please add them to you package.json and install:`);
+    process.exit(1);
+};

package/providers/preact/index.d.ts

@@ -1,3 +1,3 @@
-import { JsxProvider } from '../../types.js';
+import { JsxProvider } from '../types.js';
 declare const _default: JsxProvider;
 export default _default;

package/providers/preact/index.js

@@ -2,14 +2,16 @@ import render from './render.js';
 import { fileURLToPath } from 'url';
 import { dirname, resolve } from 'path';
 import { normalizePath } from '../../utils/pathUtils.js';
+import { preact } from '@preact/preset-vite';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 export default {
-    name: 'preactProvider',
+    name: 'preact',
     appTemplateFile: normalizePath(resolve(__dirname, 'templates', 'app.js')),
     entryTemplateFile: normalizePath(resolve(__dirname, 'templates', 'entry.js')),
     layoutTemplateFile: normalizePath(resolve(__dirname, 'templates', 'layout.js')),
     innerLayoutTemplateFile: normalizePath(resolve(__dirname, 'templates', 'innerLayout.js')),
     errorTemplateFile: normalizePath(resolve(__dirname, 'templates', 'error.js')),
     render,
+    getPlugins: () => preact()
 };

package/providers/preact/router.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
+import { jsx as _jsx } from "preact/jsx-runtime";
 import { Router as WouterRouter, Route as WouterRoute, Switch as WouterSwitch, } from 'wouter-preact';
 import { Suspense, lazy } from 'preact/compat';
 import { getContext } from '../../context/index.js';
@@ -31,7 +31,7 @@ export default function Router() {
         return pathRegex.test(zubyContext.currentPath ?? '');
     });
     const page = (_jsx(WouterSwitch, { children: pages.map((page) => (_jsx(WouterRoute, { path: page.path, component: page.component }))) }));
-    return (_jsxs(_Fragment, { children: [_jsx("h1", { children: "Router file" }), _jsx(WouterRouter, { ssrPath: zubyContext.currentPath, children: _jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: createElement(app?.component, {
-                        children: page,
-                    }) }) })] }));
+    return (_jsx(WouterRouter, { ssrPath: zubyContext.currentPath, children: _jsx(Suspense, { fallback: _jsx("div", { children: "Loading..." }), children: createElement(app?.component, {
+                children: page,
+            }) }) }));
 }

package/providers/types.d.ts

@@ -0,0 +1,17 @@
+import { Plugin } from "vite";
+export interface JsxProvider {
+    name: string;
+    render(node: any): Promise<string>;
+    getPlugins(): Plugin[] | Plugin[][];
+    appTemplateFile: string;
+    entryTemplateFile: string;
+    layoutTemplateFile: string;
+    innerLayoutTemplateFile: string;
+    errorTemplateFile: string;
+    dependencies?: {
+        [key: string]: string;
+    };
+    devDependencies?: {
+        [key: string]: string;
+    };
+}

package/providers/types.js

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

package/server/index.js

@@ -644,8 +644,8 @@ var envPort = process.env["PORT"] ? Number(process.env["PORT"]) : void 0;
 var envHost = process.env["HOST"];
 var port = envPort || 3e3;
 var host = envHost || "localhost";
-expressApp.get("/api", function(req, res) {
-  res.send("Hello World!");
+expressApp.use(function(req, res) {
+  res.sendFile(resolve2(__dirname, "client", "index.html"));
 });
 expressApp.listen(port, host, () => {
   logger?.info(`  ${getTitle("")}\r

package/templates/types.d.ts

@@ -16,6 +16,7 @@ export interface LazyTemplate {
     path: string;
     pathRegex: RegExp;
     pathParams: string[];
+    filename: string;
     templateType: TemplateType;
     component: any;
 }

package/types.d.ts

@@ -2,6 +2,8 @@ import { UserConfig as ViteUserConfig } from 'vite';
 import type { Plugin as VitePlugin } from "vite";
 import { Template } from './templates/types.js';
 import { ZubyLogger } from './logger/types.js';
+import { ProviderName } from './providers/index.js';
+import { JsxProvider } from './providers/types.js';
 export interface ZubyConfig {
     /**
      * The relative path to directory were your zuby project is located in.
@@ -12,7 +14,7 @@ export interface ZubyConfig {
      * The name of the framework which will be used to render the components.
      * @default 'preact'
      */
-    jsx?: 'preact' | 'react';
+    jsx?: ProviderName;
     /**
      * The JSX provider. This option is set automatically based on the `jsx` option
      * in case no provider is specified.
@@ -99,11 +101,6 @@ export interface ZubyConfig {
      * @default ZubyLogger
      */
     customLogger?: ZubyLogger;
-    /**
-     * The id which is unique for each build.
-     * @private
-     */
-    buildId?: string;
     /**
      * Server options for both the dev and production server.
      */
@@ -123,15 +120,6 @@ export interface ZubyConfig {
         port?: number;
     };
 }
-export interface JsxProvider {
-    name: string;
-    render(node: any): Promise<string>;
-    appTemplateFile: string;
-    entryTemplateFile: string;
-    layoutTemplateFile: string;
-    innerLayoutTemplateFile: string;
-    errorTemplateFile: string;
-}
 export interface BaseCommandOptions {
     /**
      * The path to the zuby config file.