zuby 1.0.6 → 1.0.8

package/README.md

@@ -1,8 +1,10 @@
 # Zuby.js
+
 Zuby.js is a simple [Preact](https://preactjs.com/) framework for building JS apps that can combine the best of the SPA and MPA worlds.
-The framework itself is based on [Vite](https://vitejs.dev/).  
+The framework itself is based on [Vite](https://vitejs.dev/).
 
 ## Features:
+
 - File-based routing (with similar syntax to Next.js)
 - Build-time HTML pre-rendering
   - Automatic for static paths
@@ -13,28 +15,36 @@ The framework itself is based on [Vite](https://vitejs.dev/).
 - Built-in i18n localization support
 
 Missing features:
+
 - Server-side rendering
 
 ## For contributors
+
 ### Repository setup
+
 Please see the [NVM guide](https://github.com/nvm-sh/nvm#installing-and-updating) how to install specific Node.js version on your device.
 To set up this repository, run the following commands:
-``` 
+
+```
 git clone git@gitlab.com:futrou/zuby.js.git
 cd zuby.js
 npm install
-``` 
+```
 
 ### Recommended versions
+
 - Node.js: 18
 - npm: 9
 
 ### Releases
+
 Please follow these steps to release a new stable version of the package:
+
 1. Check the current version in `package.json`. This version will be released. The patch version is automatically increased by CI and pushed to the master branch after each release. If you want to release a minor or major version, please change the version manually. Otherwise, you can skip this step.
 2. Go to the page with [repository tags](https://gitlab.com/futrou/zuby.js/-/tags) and create a new tag from'master' with the version from `package.json` as the name (in the following format, `v1.0.0`).
 3. This will trigger the CI pipeline, which will release the package, generate a changelog, and create a new release in the Gitlab UI.
 4. That's it! 🎉 You can check the new release on [Gitlab releases page](https://gitlab.com/futrou/zuby.js/-/releases) and [NPM package page](https://www.npmjs.com/package/zuby).
 
 ## License
-MIT
+
+MIT

package/branding.d.ts

@@ -0,0 +1,2 @@
+export declare const getBrand: () => string;
+export declare const getTitle: (title: string) => string;

package/branding.js

@@ -0,0 +1,9 @@
+import chalk from 'chalk';
+import { getZubyPackageJson } from './config.js';
+const { name, version } = getZubyPackageJson();
+export const getBrand = () => {
+    return name.charAt(0).toUpperCase() + name.slice(1) + '.js';
+};
+export const getTitle = (title) => {
+    return `${chalk.bgYellow.bold.whiteBright(` ${getBrand()} `)}${chalk.yellowBright.bgWhite(` v${version} `)} ${title}`;
+};

package/commands/build.d.ts

@@ -0,0 +1,2 @@
+import { BuildCommandOptions } from '../types.js';
+export default function build(options: BuildCommandOptions): Promise<void>;

package/commands/build.js

@@ -0,0 +1,15 @@
+import { getViteConfig, getZubyConfig } from '../config.js';
+import chalk from 'chalk';
+import { getTitle } from '../branding.js';
+import { build as viteBuild } from 'vite';
+export default async function build(options) {
+    const zubyConfig = await getZubyConfig(options.configFile);
+    const viteConfig = getViteConfig(zubyConfig);
+    const logger = zubyConfig.customLogger;
+    logger?.info(getTitle(chalk.gray(`building for production...`)));
+    await viteBuild({
+        configFile: false,
+        ...viteConfig,
+    });
+    logger?.info(`Done! 🎉`);
+}

package/commands/dev.d.ts

@@ -0,0 +1,2 @@
+import { ServerCommandOptions } from '../types.js';
+export default function dev(options: ServerCommandOptions): Promise<void>;

package/commands/dev.js

@@ -0,0 +1,7 @@
+import server from './server.js';
+export default async function dev(options) {
+    return server({
+        ...options,
+        mode: 'development',
+    });
+}

package/commands/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/commands/index.js

@@ -0,0 +1,28 @@
+#!/usr/bin/env node
+import { Command } from 'commander';
+import { getZubyPackageJson } from '../config.js';
+import dev from './dev.js';
+import build from './build.js';
+import preview from './preview.js';
+const { name, description, version } = getZubyPackageJson();
+const program = new Command().name(name).description(description).version(version);
+program
+    .command('dev')
+    .description('Starts the development server')
+    .option('--port', 'Port to use for the dev server', '3000')
+    .option('--host', 'Host to use for the dev server', 'localhost')
+    .option('--config-file', 'The relative path to file with Zuby config', 'zuby.config.mjs')
+    .action(async (options) => dev(options));
+program
+    .command('preview')
+    .description('Starts the preview server for the production build')
+    .option('--port', 'Port to use for the dev server', '3000')
+    .option('--host', 'Host to use for the dev server', 'localhost')
+    .option('--config-file', 'The relative path to file with Zuby config', 'zuby.config.mjs')
+    .action(async (options) => preview(options));
+program
+    .command('build')
+    .description('Builds the app for production')
+    .option('--config-file', 'The relative path to file with Zuby config', 'zuby.config.mjs')
+    .action(async (options) => build(options));
+program.parse(process.argv);

package/commands/preview.d.ts

@@ -0,0 +1,2 @@
+import { ServerCommandOptions } from '../types.js';
+export default function preview(options: ServerCommandOptions): Promise<void>;

package/commands/preview.js

@@ -0,0 +1,13 @@
+import server from './server.js';
+import { getZubyConfig } from "../config.js";
+import { existsSync } from "fs";
+export default async function preview(options) {
+    const zubyConfig = await getZubyConfig(options.configFile);
+    if (zubyConfig.outDir && !existsSync(zubyConfig.outDir)) {
+        throw new Error(`The outDir '${zubyConfig.outDir}' does not exist. Did you forget to run 'zuby build' first?`);
+    }
+    return server({
+        ...options,
+        mode: 'production',
+    });
+}

package/commands/server.d.ts

@@ -0,0 +1,2 @@
+import { ServerCommandOptions } from '../types.js';
+export default function server(options: ServerCommandOptions): Promise<void>;

package/commands/server.js

@@ -0,0 +1,32 @@
+import { createServer } from 'vite';
+import { getViteConfig, getZubyConfig } from '../config.js';
+import { performance } from 'node:perf_hooks';
+import chalk from 'chalk';
+import { getTitle } from '../branding.js';
+export default async function server(options) {
+    const port = Number(options.port ?? 3000);
+    const host = options.host ?? 'localhost';
+    const mode = options.mode ?? 'development';
+    const zubyConfig = await getZubyConfig(options.configFile);
+    const viteConfig = getViteConfig(zubyConfig);
+    const logger = zubyConfig.customLogger;
+    const server = await createServer({
+        ...viteConfig,
+        server: {
+            port,
+            host,
+            ...viteConfig.server,
+        },
+        mode,
+    });
+    if (!server.httpServer) {
+        throw new Error('HTTP server not available');
+    }
+    const startTime = performance.now();
+    await server.listen();
+    const readyTime = performance.now();
+    logger?.info(`  ${getTitle(chalk.gray(`started in ${Math.round(readyTime - startTime)}ms`))}\r\n`);
+    logger?.info(`  ┃ Mode     ${mode}`);
+    logger?.info(`  ┃ Local    http://${server.config.server.host}:${server.config.server.port}/`);
+    logger?.info(`  ┃ Network  ${chalk.gray('use --host and --port to expose')}\r\n`);
+}

package/config.d.ts

@@ -0,0 +1,6 @@
+import { ZubyConfig } from './types.js';
+import { UserConfig as ViteUserConfig } from 'vite';
+export declare const defineConfig: (config: ZubyConfig) => ZubyConfig;
+export declare const getZubyConfig: (configFile?: string, cache?: boolean) => Promise<ZubyConfig>;
+export declare const getViteConfig: (config: ZubyConfig) => ViteUserConfig;
+export declare const getZubyPackageJson: (cache?: boolean) => any;

package/config.js

@@ -0,0 +1,69 @@
+import { ZUBY_CONFIG_FILE } from './constants.js';
+import { fileURLToPath } from 'url';
+import { existsSync, readFileSync } from 'fs';
+import { dirname, resolve } from 'path';
+import { createLogger } from './logger.js';
+let zubyConfig;
+let packageJson;
+export const defineConfig = (config) => {
+    // Default values
+    config.srcDir = config.srcDir ?? './';
+    config.publicDir = config.publicDir ?? 'public';
+    config.outDir = config.outDir ?? 'build';
+    config.output = config.output ?? 'static';
+    config.prerenderPaths = config.prerenderPaths ?? [];
+    config.customLogger =
+        config.customLogger ??
+            createLogger(config.logLevel, {
+                allowClearScreen: false,
+                prefix: '[Zuby]',
+            });
+    config.logLevel = config.logLevel ?? 'info';
+    config.vite = config.vite ?? {};
+    config.vite.build = config.vite?.build ?? {};
+    return config;
+};
+export const getZubyConfig = async (configFile = ZUBY_CONFIG_FILE, cache = true) => {
+    // Return the cached config if it exists
+    if (cache && zubyConfig)
+        return zubyConfig;
+    // Find the config file with various extensions
+    const foundConfigFile = [
+        configFile,
+        configFile.replace(/\.mjs$/, '.js'),
+    ].find((file) => existsSync(file));
+    if (!configFile) {
+        throw new Error(`Config file does not exist: ${configFile}`);
+    }
+    const exportedConfig = await import(`file:///${process.cwd().replace(/\\/g, '/')}/${foundConfigFile}`);
+    // Find the default export and cache the config
+    zubyConfig = exportedConfig?.default ?? exportedConfig;
+    if (!zubyConfig) {
+        throw new Error(`No valid default export found in config file: ${foundConfigFile}`);
+    }
+    return zubyConfig;
+};
+export const getViteConfig = (config) => {
+    // Generates valid vite build config from the zuby config
+    return {
+        mode: 'production',
+        root: config.srcDir,
+        base: '/',
+        ...config.vite,
+        build: {
+            outDir: config.outDir,
+            ...config.vite?.build,
+        },
+        logLevel: config.logLevel,
+        customLogger: config.customLogger,
+    };
+};
+export const getZubyPackageJson = (cache = true) => {
+    if (cache && packageJson)
+        return packageJson;
+    const __filename = fileURLToPath(import.meta.url);
+    const __dirname = dirname(__filename);
+    // Cache the package.json content
+    packageJson = JSON.parse(readFileSync(resolve(__dirname, '../package.json'), 'utf-8'));
+    return packageJson;
+};

package/constants.d.ts

@@ -0,0 +1 @@
+export declare const ZUBY_CONFIG_FILE = "zuby.config.mjs";

package/constants.js

@@ -0,0 +1 @@
+export const ZUBY_CONFIG_FILE = 'zuby.config.mjs';

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types.js';
+export { defineConfig } from './config.js';

package/index.js

@@ -0,0 +1,2 @@
+export * from './types.js';
+export { defineConfig } from './config.js';

package/logger.d.ts

@@ -0,0 +1,8 @@
+import { ZubyLogger, LogLevel } from './types.js';
+export interface LoggerOptions {
+    prefix?: string;
+    allowClearScreen?: boolean;
+    customLogger?: ZubyLogger;
+}
+export declare function transformMsg(msg: string): string;
+export declare function createLogger(level?: LogLevel, options?: LoggerOptions): ZubyLogger;

package/logger.js

@@ -0,0 +1,107 @@
+/* eslint no-console: 0 */
+import readline from 'node:readline';
+import chalk from 'chalk';
+import { LogLevels } from './types.js';
+let lastType;
+let lastMsg;
+let sameCount = 0;
+function clearScreen() {
+    const repeatCount = process.stdout.rows - 2;
+    const blank = repeatCount > 0 ? '\n'.repeat(repeatCount) : '';
+    console.log(blank);
+    readline.cursorTo(process.stdout, 0, 0);
+    readline.clearScreenDown(process.stdout);
+}
+export function transformMsg(msg) {
+    if (msg.match(/vite v\d+.\d+.\d+/i))
+        return chalk.gray('Vite output:');
+    return msg;
+}
+export function createLogger(level = 'info', options = {}) {
+    if (options.customLogger) {
+        return options.customLogger;
+    }
+    const timeFormatter = new Intl.DateTimeFormat(undefined, {
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+    });
+    const loggedErrors = new WeakSet();
+    const { prefix = '[Zuby]', allowClearScreen = true } = options;
+    const thresh = LogLevels[level];
+    const canClearScreen = allowClearScreen && process.stdout.isTTY && !process.env.CI;
+    const clear = canClearScreen ? clearScreen : () => { };
+    function output(type, msg, options = {}) {
+        // Transforms all messages to have a consistent format.
+        msg = transformMsg(msg);
+        if (thresh >= LogLevels[type]) {
+            const method = type === 'info' ? 'log' : type;
+            const format = () => {
+                const tag = type === 'info'
+                    ? chalk.cyan(chalk.bold(prefix))
+                    : type === 'warn'
+                        ? chalk.yellow(chalk.bold(prefix))
+                        : chalk.red(chalk.bold(prefix));
+                if (options.timestamp) {
+                    return `${chalk.dim(timeFormatter.format(new Date()))} ${tag} ${msg}`;
+                }
+                else {
+                    return `${msg}`;
+                }
+            };
+            if (options.error) {
+                loggedErrors.add(options.error);
+            }
+            if (canClearScreen) {
+                if (type === lastType && msg === lastMsg) {
+                    sameCount++;
+                    clear();
+                    console[method](format(), chalk.yellow(`(x${sameCount + 1})`));
+                }
+                else {
+                    sameCount = 0;
+                    lastMsg = msg;
+                    lastType = type;
+                    if (options.clear) {
+                        clear();
+                    }
+                    console[method](format());
+                }
+            }
+            else {
+                console[method](format());
+            }
+        }
+    }
+    const warnedMessages = new Set();
+    const logger = {
+        hasWarned: false,
+        info(msg, opts) {
+            output('info', msg, opts);
+        },
+        warn(msg, opts) {
+            logger.hasWarned = true;
+            output('warn', msg, opts);
+        },
+        warnOnce(msg, opts) {
+            if (warnedMessages.has(msg))
+                return;
+            logger.hasWarned = true;
+            output('warn', msg, opts);
+            warnedMessages.add(msg);
+        },
+        error(msg, opts) {
+            logger.hasWarned = true;
+            output('error', msg, opts);
+        },
+        clearScreen(type) {
+            if (thresh >= LogLevels[type]) {
+                clear();
+            }
+        },
+        hasErrorLogged(error) {
+            return loggedErrors.has(error);
+        },
+    };
+    return logger;
+}

package/package.json

@@ -1,15 +1,33 @@
 {
   "name": "zuby",
-  "version": "1.0.6",
-  "description": "The Preact Framework for building SPA apps using Vite",
+  "version": "1.0.8",
+  "description": "Zuby.js is Preact Framework for building SPA apps using Vite",
   "type": "module",
-  "main": "index.mjs",
+  "main": "./commands/index.js",
   "scripts": {
     "release": "npm publish --access public ./dist/ ",
     "bump-version": "npm version patch",
-    "build": "rm -rf dist/ && mkdir dist && cp -rf src/* package.json README.md dist/",
+    "build": "rm -rf dist/ && tsc && cp -rf package.json README.md dist/",
+    "push-build": "npm run build && cd dist && npm link && cd ..",
+    "prettier": "prettier --write ./**/*",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "dependencies": {
+    "@preact/preset-vite": "^2.5.0",
+    "chalk": "^5.3.0",
+    "commander": "^11.0.0",
+    "html-minifier": "^4.0.0",
+    "vite": "^4.4.11",
+    "wouter-preact": "^2.12.0"
+  },
+  "devDependencies": {
+    "prettier": "^3.0.3",
+    "typescript": "^5.2.2",
+    "@types/node": "^20.8.3"
+  },
+  "bin": {
+    "zuby": "./commands/index.js"
+  },
   "bugs": {
     "url": "https://gitlab.com/futrou/zuby.js/-/issues",
     "email": "zuby@futrou.com"
@@ -25,5 +43,12 @@
     "spa",
     "framework",
     "web"
-  ]
+  ],
+  "prettier": {
+    "singleQuote": true,
+    "semi": true,
+    "trailingComma": "es5",
+    "printWidth": 100,
+    "arrowParens": "avoid"
+  }
 }

package/types.d.ts

@@ -0,0 +1,130 @@
+import { UserConfig as ViteUserConfig } from 'vite';
+export interface ZubyConfig {
+    /**
+     * The relative path to directory were your zuby project is located in.
+     * @default ./
+     */
+    srcDir?: string;
+    /**
+     * The relative path to directory were the folder with the static files is located in.
+     * These files are copied to the output directory.
+     * @default public
+     */
+    publicDir?: string;
+    /**
+     * The relative path to directory were the build will be placed in.
+     * @default build
+     */
+    outDir?: string;
+    /**
+     * The build mode.
+     * @default static
+     */
+    output?: 'static';
+    /**
+     * The internalization config. If this is set, the site will be generated in multiple locales.
+     * @default undefined
+     * @example {
+     *     locales: ['en', 'de', 'cs', 'pl'],
+     *     defaultLocale: 'en'
+     * }
+     */
+    i18n?: {
+        locales: string[];
+        defaultLocale: string;
+    };
+    /**
+     * List of additional dynamic routes to pre-render during the build.
+     * The static paths are pre-rendered automatically and don't need to be specified here.
+     * @default []
+     * @example ['/products/1', '/products/2']
+     */
+    prerenderPaths?: string[];
+    /**
+     * The additional vite config, which will be merged with the default config.
+     */
+    vite?: ViteUserConfig;
+    /**
+     * The log level for both Zuby and all plugins.
+     * @default info
+     */
+    logLevel?: 'error' | 'warn' | 'info' | 'silent';
+    /**
+     * The custom logger for both Zuby, Vite and all plugins.
+     * @default ZubyLogger
+     */
+    customLogger?: ZubyLogger;
+}
+export interface BaseCommandOptions {
+    /**
+     * The path to the zuby config file.
+     */
+    configFile?: string;
+}
+export interface ServerCommandOptions extends BaseCommandOptions {
+    /**
+     * The port for the dev server.
+     * @default 3000
+     */
+    port?: number;
+    /**
+     * The host for the dev server.
+     * @default localhost
+     */
+    host?: string;
+    /**
+     * The mode for the server.
+     * @default development
+     */
+    mode?: 'development' | 'production';
+}
+export interface BuildCommandOptions extends BaseCommandOptions {
+}
+export type LogType = 'error' | 'warn' | 'info';
+export type LogLevel = LogType | 'silent';
+export interface ZubyLogger {
+    info(msg: string, options?: LogOptions): void;
+    warn(msg: string, options?: LogOptions): void;
+    warnOnce(msg: string, options?: LogOptions): void;
+    error(msg: string, options?: LogErrorOptions): void;
+    clearScreen(type: LogType): void;
+    hasErrorLogged(error: Error | RollupError): boolean;
+    hasWarned: boolean;
+}
+export interface LogOptions {
+    clear?: boolean;
+    timestamp?: boolean;
+}
+export interface LogErrorOptions extends LogOptions {
+    error?: Error | RollupError | null;
+}
+export declare const LogLevels: Record<LogLevel, number>;
+export interface RollupError extends RollupLog {
+    name?: string;
+    stack?: string;
+    watchFiles?: string[];
+}
+export interface RollupLog {
+    binding?: string;
+    cause?: unknown;
+    code?: string;
+    exporter?: string;
+    frame?: string;
+    hook?: string;
+    id?: string;
+    ids?: string[];
+    loc?: {
+        column: number;
+        file?: string;
+        line: number;
+    };
+    message: string;
+    meta?: any;
+    names?: string[];
+    plugin?: string;
+    pluginCode?: unknown;
+    pos?: number;
+    reexporter?: string;
+    stack?: string;
+    url?: string;
+}

package/types.js

@@ -0,0 +1,6 @@
+export const LogLevels = {
+    silent: 0,
+    error: 1,
+    warn: 2,
+    info: 3,
+};