zuby 1.0.22 → 1.0.23

package/README.md

@@ -1,8 +1,16 @@
 # 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.
+Zuby.js is a simple framework for building JS apps that combines the best of the SPA and MPA worlds.
 The framework itself is based on [Vite](https://vitejs.dev/).
 
+## Installation
+
+You can set up new Zuby.js app easily with Zuby CLI wizard. Just run the following command and follow the instructions:
+
+```
+npx zuby init
+```
+
 ## Features:
 
 - File-based routing (with similar syntax to Next.js)
@@ -14,37 +22,20 @@ The framework itself is based on [Vite](https://vitejs.dev/).
 - Fast development server
 - Built-in i18n localization support
 
-Missing features:
-
-- Server-side rendering
+Please note that Zuby.js is still in early development, so some features may be missing or not working properly.
 
-## For contributors
+## Integrations
 
-### Repository setup
+Zuby.js integrates with JSX libraries through the `JsxProvider` interface.
+Following integrations are available:
 
-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:
+- [@zubyjs/preact](https://www.npmjs.com/package/@zubyjs/preact) - Preact integration for Zuby.js
 
-```
-git clone git@gitlab.com:futrou/zuby.js.git
-cd zuby.js
-npm install
-```
-
-### Recommended versions
+## 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

package/package.json

@@ -1,19 +1,21 @@
 {
   "name": "zuby",
-  "version": "1.0.22",
-  "description": "Zuby.js is Preact Framework for building SPA apps using Vite",
+  "version": "1.0.23",
+  "description": "Zuby.js is 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 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",
     "push-build": "npm run build && cd dist && npm link && cd ..",
-    "prettier": "prettier --write ./**/*",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "exit 0"
+  },
+  "publishConfig": {
+    "directory": "dist",
+    "linkDirectory": true
   },
   "dependencies": {
     "@preact/preset-vite": "^2.6.0",
@@ -25,6 +27,7 @@
     "esbuild": "^0.19.5",
     "glob": "^10.3.10",
     "inquirer": "^9.2.11",
+    "jest": "^29.7.0",
     "magic-string": "^0.30.5",
     "rollup": "^4.0.2",
     "vite": "^4.4.11",
@@ -82,12 +85,5 @@
   ],
   "engines": {
     "node": ">=16"
-  },
-  "prettier": {
-    "singleQuote": true,
-    "semi": true,
-    "trailingComma": "es5",
-    "printWidth": 100,
-    "arrowParens": "avoid"
   }
 }

package/src/branding.ts

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

package/src/commands/build.ts

@@ -0,0 +1,159 @@
+import { BuildCommandOptions, MODES, ZubyConfig } from '../types.js';
+import { getZubyConfig } from '../config.js';
+import chalk from 'chalk';
+import { getTitle } from '../branding.js';
+import { build as viteBuild } from 'vite';
+import { dirname, join } from 'path';
+import { normalizePath } from '../utils/pathUtils.js';
+import { existsSync, rmSync, writeFileSync, copyFileSync, mkdirSync } from 'fs';
+import { ZUBY_CONFIG_FILE } from '../constants.js';
+import { TEMPLATES } from '../templates/types.js';
+import { glob } from 'glob';
+import { fileURLToPath } from 'url';
+import { getZubyPackageConfig } from '../packageConfig.js';
+import { nodeFileTrace } from '@vercel/nft';
+import { copyFile } from 'fs/promises';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export default async function build(options: BuildCommandOptions) {
+  const zubyConfig = await getZubyConfig(options.configFile);
+  const { vite: viteConfig, customLogger: logger, outDir = '' } = zubyConfig;
+
+  process.env.NODE_ENV = MODES.production;
+  logger?.info(getTitle(chalk.gray(`building for production...`)));
+
+  // Clean build directory
+  if (existsSync(outDir || '')) {
+    rmSync(outDir || '', {
+      recursive: true,
+    });
+  }
+
+  // Load the entry file
+  const entryFile = await getEntryFile(zubyConfig);
+
+  // Client build
+  logger?.info(
+    `${chalk.bgYellow.bold.whiteBright(` Step 1/4 `)} ${chalk.gray(`building client...`)}`
+  );
+  await viteBuild({
+    configFile: false,
+    ...viteConfig,
+    build: {
+      ...viteConfig?.build,
+      outDir: normalizePath(join(outDir, 'client')),
+      rollupOptions: {
+        ...viteConfig?.build?.rollupOptions,
+        input: {
+          entry: normalizePath(entryFile),
+        },
+      },
+    },
+    mode: MODES.production,
+  });
+
+  // Server build
+  logger?.info(
+    `${chalk.bgYellow.bold.whiteBright(` Step 2/4 `)} ${chalk.gray(`building server...`)}`
+  );
+  await viteBuild({
+    configFile: false,
+    ...viteConfig,
+    build: {
+      ...viteConfig?.build,
+      outDir: normalizePath(join(outDir, 'server')),
+      ssr: normalizePath(entryFile),
+      ssrManifest: true,
+    },
+    optimizeDeps: {
+      ...viteConfig?.optimizeDeps,
+      entries: ['**/*'],
+      include: ['**/*'],
+      force: true,
+      disabled: false,
+    },
+    mode: MODES.production,
+  });
+
+  // Add serialized zuby config to build directory
+  writeFileSync(
+    normalizePath(join(outDir, ZUBY_CONFIG_FILE.replace(/\.mjs$/, '.json'))),
+    JSON.stringify(zubyConfig, null, 2)
+  );
+
+  // Add standalone server assets
+  copyFileSync(
+    normalizePath(join(__dirname, '..', 'server', 'index.js')),
+    normalizePath(join(outDir, 'server.mjs'))
+  );
+  copyFileSync(
+    normalizePath(join(__dirname, '..', 'server', 'expressApp.cjs')),
+    normalizePath(join(outDir, 'expressApp.cjs'))
+  );
+
+  const { name, version } = getZubyPackageConfig();
+
+  // Write package.json
+  writeFileSync(
+    normalizePath(join(outDir, 'package.json')),
+    JSON.stringify({
+      type: 'module',
+      name,
+      version,
+    })
+  );
+
+  logger?.info(
+    `${chalk.bgYellow.bold.whiteBright(` Step 4/4 `)} ${chalk.gray(`tracing dependencies...`)}`
+  );
+
+  logger?.info(`Tracing production dependencies...`);
+  const { fileList } = await nodeFileTrace([normalizePath(join(outDir, 'server', 'entry.js'))], {
+    processCwd: process.cwd(),
+    ignore: (path: string) => {
+      return path.startsWith(outDir);
+    },
+  });
+
+  logger?.info(`Copying ${fileList.size} files...`);
+  const copyFilePromises = [...fileList].map(async (srcFile: string) => {
+    const destFile = normalizePath(join(outDir, srcFile));
+    const destDir = dirname(destFile);
+    if (srcFile.startsWith(outDir) || existsSync(destFile)) {
+      return;
+    }
+    if (!existsSync(destDir)) {
+      mkdirSync(destDir, {
+        recursive: true,
+      });
+    }
+    return copyFile(srcFile, destFile);
+  });
+  await Promise.all(copyFilePromises);
+
+  logger?.info(`Done! 🎉`);
+}
+
+export async function getEntryFile(zubyConfig: ZubyConfig) {
+  const { srcDir = '', pageExtensions = [], jsx, customLogger: logger } = zubyConfig;
+
+  const userEntryFile = (
+    await glob(`${normalizePath(srcDir)}${TEMPLATES.entry}.{${pageExtensions.join(',')}}`)
+  ).pop();
+  const entryFile = userEntryFile || jsx?.entryTemplateFile;
+
+  if (!entryFile) {
+    logger?.error(
+      `No entry template is available. Please create a file named '${TEMPLATES.entry}' in your project directory or use different jsx.`
+    );
+    process.exit(1);
+  }
+
+  if (userEntryFile) {
+    logger?.info(chalk.gray(`Using custom entry template: '${userEntryFile}'`));
+  }
+
+  return entryFile;
+}

package/src/commands/dev.ts

@@ -0,0 +1,52 @@
+import { MODES, ServerCommandOptions } from '../types.js';
+import { getZubyConfig } from '../config.js';
+import { createServer, InlineConfig, preview, PreviewServer, ViteDevServer } from 'vite';
+import { normalizePath } from '../utils/pathUtils.js';
+import { join } from 'path';
+import { performance } from 'node:perf_hooks';
+import { getTitle } from '../branding.js';
+import chalk from 'chalk';
+
+export default async function dev(options: ServerCommandOptions) {
+  const {
+    vite: viteConfig,
+    customLogger: logger,
+    outDir = '',
+  } = await getZubyConfig(options.configFile);
+
+  const port = options.port ? Number(options.port) : viteConfig?.server?.port;
+  const host = options.host || viteConfig?.server?.host;
+  const mode = MODES.development;
+
+  const serverConfig: InlineConfig = {
+    ...viteConfig,
+    server: {
+      ...viteConfig?.server,
+      port,
+      host,
+    },
+    build: {
+      outDir: normalizePath(join(outDir, 'client')),
+    },
+    mode,
+  };
+
+  const startTime = performance.now();
+  const server = await createServer(serverConfig);
+  await server.listen();
+  const readyTime = performance.now();
+
+  if (!server.httpServer) {
+    throw new Error('HTTP server not available');
+  }
+
+  const bindAddress = server.httpServer.address();
+  const bindPort = typeof bindAddress === 'string' ? undefined : bindAddress?.port;
+
+  logger?.info(
+    `  ${getTitle(chalk.gray(`started in ${Math.round(readyTime - startTime)}ms`))}\r\n`
+  );
+  logger?.info(`  ┃ Mode     ${mode}`);
+  logger?.info(`  ┃ Local    http://${host}:${bindPort || port}/`);
+  logger?.info(`  ┃ Network  ${chalk.gray('use --host and --port to expose')}\r\n`);
+}

package/src/commands/index.ts

@@ -0,0 +1,54 @@
+#!/usr/bin/env node
+import { Command } from 'commander';
+import { BuildCommandOptions, InitCommandOptions, ServerCommandOptions } from '../types.js';
+import { getZubyPackageConfig } from '../packageConfig.js';
+
+import dev from './dev.js';
+import build from './build.js';
+import preview from './preview.js';
+import init from './init.js';
+
+const { name, description, version } = getZubyPackageConfig();
+const program = new Command().name(name).description(description).version(version);
+
+program
+  .command('dev')
+  .description('Starts the development server')
+  .option('-p, --port <port>', 'Port to use for the dev server', '3000')
+  .option('-h, --host <host>', 'Host to use for the dev server', 'localhost')
+  .option(
+    '-c, --config-file <file>',
+    'The relative path to file with Zuby config',
+    'zuby.config.mjs'
+  )
+  .action(async options => dev(options as ServerCommandOptions));
+
+program
+  .command('preview')
+  .alias('start')
+  .description('Starts the preview server for the production build')
+  .option('-p, --port <port>', 'Port to use for the dev server', '3000')
+  .option('-h, --host <host>', 'Host to use for the dev server', 'localhost')
+  .option(
+    '-c, --config-file <file>',
+    'The relative path to file with Zuby config',
+    'zuby.config.mjs'
+  )
+  .action(async options => preview(options as ServerCommandOptions));
+
+program
+  .command('build')
+  .description('Builds the app for production')
+  .option(
+    '-c, --config-file <file>',
+    'The relative path to file with Zuby config',
+    'zuby.config.mjs'
+  )
+  .action(async options => build(options as BuildCommandOptions));
+
+program
+  .command('init')
+  .description('Initializes a new Zuby project')
+  .action(async options => init(options as InitCommandOptions));
+
+program.parse(process.argv);

package/src/commands/init.ts

@@ -0,0 +1,160 @@
+import { InitCommandOptions } from '../types.js';
+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';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export default async function init(options: InitCommandOptions) {
+  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 examples = getExamples();
+  const defaultProjectName = 'my-zuby-app';
+  const defaultExample = examples.find(example => example.name === 'basic');
+
+  const { projectPath, jsxProviderName, exampleName } = await inquirer.prompt([
+    {
+      type: 'input',
+      name: 'projectPath',
+      message: 'Where would you like to create your new project?',
+      default: `./${defaultProjectName}`,
+      prefix: `${chalk.yellowBright.bgWhite(' name    ')} ❯ `,
+      validate(projectPath: string): boolean | string {
+        if (existsSync(projectPath)) {
+          return 'Project with this name already exists. Please choose a different one.';
+        }
+        return true;
+      },
+    },
+    {
+      type: 'list',
+      name: 'jsxProviderName',
+      message: 'In which JSX framework would you like to write your components?',
+      choices: ['preact', 'react'],
+      default: 'preact',
+      prefix: `${chalk.yellowBright.bgWhite(' jsx     ')} ❯ `,
+    },
+    {
+      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,
+    jsxProviderName,
+    useTypescript,
+    zubyVersion,
+  });
+
+  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: Example,
+  // Following values can be used in templates
+  // and will be replaced during init.
+  // Example: <jsxProviderName> => preact
+  options: InitOptions
+) {
+  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');
+
+      // Remove template comments
+      fileContent = fileContent.replace(/\/\/\s+@template\s+/, '$1');
+
+      // Replace all available <key> values in the file
+      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(): Example[] {
+  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 interface Example {
+  name: string;
+  path: string;
+  isJs: boolean;
+  isTs: boolean;
+}
+
+export interface InitOptions {
+  projectName?: string;
+  projectPath?: string;
+  jsxProviderName?: string;
+  useTypescript?: boolean;
+  zubyVersion?: string;
+}

package/src/commands/preview.ts

@@ -0,0 +1,18 @@
+import { ServerCommandOptions } from '../types.js';
+import { getZubyConfig } from '../config.js';
+import { existsSync } from 'fs';
+import { normalizePath } from '../utils/pathUtils.js';
+import { resolve } from 'path';
+
+export default async function preview(options: ServerCommandOptions) {
+  const { outDir = '' } = await getZubyConfig(options.configFile);
+
+  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.mjs'));
+  await import(`file:///${serverPath}`);
+}