create-vitnode-app 1.2.0-canary.9 → 2.0.0-canary.1

package/dist/src/plugin/create/route-templates.js

@@ -0,0 +1,144 @@
+export const routeSlugFor = (pluginName) => pluginName.includes("/")
+    ? pluginName.slice(pluginName.indexOf("/") + 1)
+    : pluginName;
+export const pluginRoutesTemplate = (pluginName) => {
+    const slug = routeSlugFor(pluginName);
+    return `import { definePluginRoutes, lazy, page } from "@vitnode/core/routing";
+
+/**
+ * The routes this plugin contributes to whatever app installs it.
+ *
+ * Browser-safe data: a path, and the module that renders it. \`lazy\` keeps that
+ * \`import()\` a literal the bundler can follow *without running it*, so your page
+ * gets a chunk of its own and is fetched when somebody navigates to it - not
+ * before. Never import a page into this file: a component named here is in the
+ * initial bundle of every page on the site, which is why VitNode refuses one.
+ *
+ * Your page is never copied into the application either. The app holds one static
+ * import of this tree, and nothing else.
+ *
+ * Add a route by adding a \`page()\`. \`path\` is the public URL, written in
+ * VitNode's own spelling: a dynamic segment is \`:id\`, never Next's \`[id]\` and
+ * never TanStack's \`$id\`. To nest pages inside a shared frame, wrap them in a
+ * \`layout()\` and give each child a path relative to it.
+ */
+export const routes = definePluginRoutes([
+  page("/${slug}", {
+    component: lazy(() => import("./pages/home-page")),
+  }),
+]);
+`;
+};
+export const pluginRouteModuleTemplate = (pluginName) => `import { useTranslations } from "use-intl";
+
+/**
+ * The page \`routes.ts\` declares.
+ *
+ * Keep it framework-neutral. This module is compiled into the package's own
+ * \`dist\` and imported by whichever app installed the plugin, so anything from
+ * a router or a host-bound i18n package pins the plugin to one kind of host.
+ * \`use-intl\` - which is what VitNode itself renders through - and plain JSX are
+ * pinned to neither.
+ *
+ * No \`<main>\`: the application shell owns the document's one \`main\` landmark,
+ * and a page that renders a second gives a screen reader two to choose between.
+ * A page owns its container - width, padding, vertical rhythm - and nothing
+ * above it.
+ *
+ * To give this route a loader, page metadata or a breadcrumb, add a \`route\`
+ * export beside the default one:
+ *
+ *     import { definePluginRoute } from "@vitnode/core/routing";
+ *
+ *     export const route = definePluginRoute({
+ *       load: ({ context, params }) => fetchThing(context.locale, params.id),
+ *       head: ({ loaderData }) => ({ title: loaderData?.title }),
+ *     });
+ */
+const HomePage = () => {
+  const t = useTranslations("${pluginName}");
+
+  return (
+    <div className="container mx-auto flex max-w-2xl flex-col gap-4 p-4">
+      <h1 className="text-2xl font-semibold tracking-tight text-balance">
+        {t("home.title")}
+      </h1>
+
+      <p className="text-muted-foreground leading-relaxed text-pretty">
+        {t("home.desc")}
+      </p>
+    </div>
+  );
+};
+
+export default HomePage;
+`;
+export const pluginMessagesTemplate = (pluginName) => `${JSON.stringify({
+    [pluginName]: {
+        home: {
+            desc: "This page ships inside the plugin and is served by the app that installed it.",
+            title: "Hello from your plugin",
+        },
+    },
+}, null, 2)}\n`;
+export const pluginMessagesBarrelTemplate = () => `import type { LocaleMessagesMap } from "@vitnode/core/lib/i18n/types";
+
+/**
+ * Every language this plugin ships. Add a file next to this one and a line here
+ * to add another; apps pick it up with no copy step, because they read this
+ * package's own \`dist\` rather than a copy of it.
+ */
+const messages: LocaleMessagesMap = {
+  en: async () => await import("./en.json", { with: { type: "json" } }),
+};
+
+export default messages;
+`;
+export const pluginVariableName = (pluginName) => {
+    const camel = routeSlugFor(pluginName)
+        .split(/[^A-Za-z0-9]+/)
+        .filter(Boolean)
+        .map((part, index) => index === 0 ? part : `${part[0].toUpperCase()}${part.slice(1)}`)
+        .join("");
+    const safe = /^[A-Za-z]/.test(camel) ? camel : `vitnode${camel}`;
+    const stem = safe.replace(/plugin$/i, "");
+    return `${stem === "" ? safe : stem}Plugin`;
+};
+export const pluginConfigTemplate = (pluginName) => `import { buildPlugin } from "@vitnode/core/lib/plugin";
+
+import messages from "./locales";
+import { routes } from "./routes";
+
+/**
+ * This plugin, as an application registers it.
+ *
+ * \`pluginId\` is the package name, and that is not a convention - it is how this
+ * plugin's route tree is imported (\`${pluginName}/routes\`) and how its messages
+ * are namespaced. The two cannot drift because they are one string.
+ *
+ * Add this to an app's \`src/vitnode.config.ts\` \`plugins\` array. A plugin that
+ * is installed but not listed there contributes nothing - no directory is ever
+ * scanned - so this is the only switch.
+ */
+export const ${pluginVariableName(pluginName)} = () =>
+  buildPlugin({
+    pluginId: "${pluginName}",
+    messages,
+    routes,
+  });
+`;
+export const pluginPackageExports = () => ({
+    "./locales/*.json": "./src/locales/*.json",
+    "./*": {
+        import: "./dist/src/*.js",
+        types: "./dist/src/*.d.ts",
+        default: "./dist/src/*.js",
+    },
+});
+export const pluginRouteScaffold = (pluginName) => ({
+    "src/config.tsx": pluginConfigTemplate(pluginName),
+    "src/locales/en.json": pluginMessagesTemplate(pluginName),
+    "src/locales/index.ts": pluginMessagesBarrelTemplate(),
+    "src/pages/home-page.tsx": pluginRouteModuleTemplate(pluginName),
+    "src/routes.ts": pluginRoutesTemplate(pluginName),
+});

package/dist/src/plugin/index.js

@@ -1,12 +1,15 @@
-import { input } from '@inquirer/prompts';
-import { basename, resolve } from 'path';
-import { validateNpmName } from '../helpers/validate-pkg.js';
-export const createPlugin = async (projectPath) => {
+import { input } from "@inquirer/prompts";
+import { basename, resolve } from "node:path";
+import { validateNpmName } from "../helpers/validate-pkg.js";
+import { createPluginVitNode } from "./create/create-plugin-vitnode.js";
+import { createPluginQuestionsCli } from "./questions.js";
+import { validationProjectForPlugin } from "./validation.js";
+export const createPlugin = async ({ program, projectPath, }) => {
     let name = projectPath;
     if (!name) {
         name = await input({
-            message: 'What is your plugin named?',
-            default: 'my-vitnode-plugin',
+            message: "What is your plugin named?",
+            default: "my-vitnode-plugin",
             validate: (name) => {
                 const validation = validateNpmName({ name: basename(resolve(name)) });
                 if (validation.valid)
@@ -15,4 +18,12 @@ export const createPlugin = async (projectPath) => {
             },
         });
     }
+    const { pluginName, pluginPath, eslint } = await validationProjectForPlugin(name);
+    const options = await createPluginQuestionsCli(program);
+    await createPluginVitNode({
+        pluginName,
+        pluginPath,
+        eslint,
+        ...options,
+    });
 };

package/dist/src/plugin/questions.js

@@ -0,0 +1,14 @@
+import { confirm } from "@inquirer/prompts";
+import color from "picocolors";
+export const createPluginQuestionsCli = async (program) => {
+    const optionsFromProgram = program.opts();
+    const options = {
+        install: !optionsFromProgram.skipInstall,
+    };
+    if (optionsFromProgram.skipInstall === undefined) {
+        options.install = await confirm({
+            message: `Would you like to ${color.blue("Install dependencies")}?`,
+        });
+    }
+    return options;
+};

package/dist/src/plugin/validation.js

@@ -0,0 +1,76 @@
+import { program } from "commander";
+import { existsSync } from "node:fs";
+import { mkdir, readFile } from "node:fs/promises";
+import { basename, join, resolve } from "node:path";
+import color from "picocolors";
+import { isFolderEmpty } from "../helpers/is-folder-empty.js";
+import { isWriteable } from "../helpers/is-writeable.js";
+import { validateNpmName } from "../helpers/validate-pkg.js";
+export const validationProjectForPlugin = async (projectPath) => {
+    if (!projectPath) {
+        console.log("\nPlease specify the plugin directory:\n" +
+            `  ${color.cyan(program.name())} ${color.green("<plugin-directory>")}\n` +
+            "For example:\n" +
+            `  ${color.cyan(program.name())} ${color.green("my-vitnode-plugin")}\n\n` +
+            `Run ${color.cyan(`${program.name()} --help`)} to see all options.`);
+        process.exit(1);
+    }
+    const cwd = process.cwd();
+    const turboJsonPath = join(cwd, "turbo.json");
+    const packageJsonPath = join(cwd, "package.json");
+    if (!existsSync(turboJsonPath)) {
+        console.error(`${color.red("Error:")} Could not find ${color.cyan("turbo.json")} in the current directory.`);
+        console.error(`Plugins must be created inside a VitNode monorepo structure.`);
+        console.error(`\nPlease run this command from the root of your VitNode monorepo project.`);
+        process.exit(1);
+    }
+    if (!existsSync(packageJsonPath)) {
+        console.error(`${color.red("Error:")} Could not find ${color.cyan("package.json")} in the current directory.`);
+        console.error(`\nPlease run this command from the root of your VitNode monorepo project.`);
+        process.exit(1);
+    }
+    let eslint = false;
+    try {
+        const packageJson = JSON.parse(await readFile(packageJsonPath, "utf-8"));
+        if (!packageJson.packageManager) {
+            console.error(`${color.red("Error:")} The ${color.cyan("packageManager")} field is not defined in ${color.cyan("package.json")}.`);
+            console.error(`\nPlease add a ${color.cyan('"packageManager"')} field to your ${color.cyan("package.json")} file.`);
+            console.error(`Example: ${color.green('"packageManager": "pnpm@10.18.3"')}`);
+            process.exit(1);
+        }
+        eslint = !!(packageJson.dependencies?.eslint ??
+            packageJson.devDependencies?.eslint ??
+            false);
+    }
+    catch (error) {
+        console.error(`${color.red("Error:")} Failed to read or parse ${color.cyan("package.json")}.`);
+        console.error(error);
+        process.exit(1);
+    }
+    const projectName = basename(resolve(projectPath));
+    const validation = validateNpmName({ name: projectName });
+    if (!validation.valid) {
+        console.error(`Could not create a plugin called ${color.red(`"${projectName}"`)} because of npm naming restrictions:`);
+        validation.problems.forEach(p => {
+            console.error(`${color.red(color.bold("*"))} ${p}`);
+        });
+        process.exit(1);
+    }
+    const pluginsDir = join(cwd, "plugins");
+    const pluginPath = join(pluginsDir, projectName);
+    const pluginName = basename(pluginPath);
+    const folderExists = existsSync(pluginPath);
+    if (folderExists && !isFolderEmpty(pluginPath, pluginName)) {
+        console.error(`The directory ${color.cyan(`plugins/${pluginName}`)} is not empty.`);
+        process.exit(1);
+    }
+    if (!existsSync(pluginsDir)) {
+        await mkdir(pluginsDir, { recursive: true });
+    }
+    if (!(await isWriteable(pluginsDir))) {
+        console.error(`The plugins directory is not writable, please check folder permissions and try again.`);
+        console.error(`It is likely you do not have write permissions for this folder.`);
+        process.exit(1);
+    }
+    return { pluginName, pluginPath, eslint };
+};

package/dist/src/prepare/prepare.js

@@ -1,12 +1,15 @@
-import { existsSync } from 'fs';
-import { mkdir } from 'fs/promises';
-import { join } from 'path';
+import { existsSync } from "node:fs";
+import { mkdir } from "node:fs/promises";
+import { join } from "node:path";
 const prepare = async () => {
-    const toRootPath = join(process.cwd(), 'copy-of-vitnode-app');
-    if (!existsSync(toRootPath)) {
-        await mkdir(toRootPath);
-    }
-    const fromRootPath = join(process.cwd(), '..', '..', 'apps', 'web');
+    const toRootPaths = ["copy-of-vitnode-app", "copy-of-vitnode-plugin"];
+    await Promise.all(toRootPaths.map(async (path) => {
+        const toRootPath = join(process.cwd(), path);
+        if (!existsSync(toRootPath)) {
+            await mkdir(toRootPath);
+        }
+    }));
+    const fromRootPath = join(process.cwd(), "..", "..", "apps", "web");
     if (!existsSync(fromRootPath)) {
         console.error(`\x1b[31mThe path ${fromRootPath} does not exist. Please check the directory structure.\x1b[0m`);
         process.exit(1);

package/dist/src/questions.js

@@ -1,45 +1,82 @@
-import { select } from '@inquirer/prompts';
-import { confirm } from '@inquirer/prompts';
-import color from 'picocolors';
-import { getAvailablePackageManagers } from './helpers/get-available-package-managers.js';
+import { confirm, select } from "@inquirer/prompts";
+import color from "picocolors";
+import { getAvailablePackageManagers } from "./helpers/get-available-package-managers.js";
 export const createQuestionsCli = async (program) => {
     const optionsFromProgram = program.opts();
     const options = {
         packageManager: optionsFromProgram.packageManager,
         eslint: optionsFromProgram.eslint,
         install: !optionsFromProgram.skipInstall,
+        docker: optionsFromProgram.docker,
+        mode: optionsFromProgram.mode,
+        monorepo: optionsFromProgram.monorepo,
     };
     if (!optionsFromProgram.packageManager) {
         const availablePackageManagers = await getAvailablePackageManagers();
         options.packageManager = await select({
-            message: `Which ${color.blue('package manager')} do you want to use?`,
+            message: `Which ${color.blue("package manager")} do you want to use?`,
             choices: [
                 {
-                    name: `npm${availablePackageManagers.npm ? `@${availablePackageManagers.npm}` : ''}`,
-                    value: 'npm',
-                    disabled: !availablePackageManagers.npm,
+                    name: `bun${availablePackageManagers.bun ? `@${availablePackageManagers.bun}` : ""}`,
+                    value: "bun",
+                    disabled: !availablePackageManagers.bun,
                 },
                 {
-                    name: `pnpm${availablePackageManagers.pnpm ? `@${availablePackageManagers.pnpm}` : ''}`,
-                    value: 'pnpm',
+                    name: `pnpm${availablePackageManagers.pnpm ? `@${availablePackageManagers.pnpm}` : ""}`,
+                    value: "pnpm",
                     disabled: !availablePackageManagers.pnpm,
                 },
                 {
-                    name: `bun${availablePackageManagers.bun ? `@${availablePackageManagers.bun}` : ''}`,
-                    value: 'bun',
-                    disabled: !availablePackageManagers.bun,
+                    name: `npm${availablePackageManagers.npm ? `@${availablePackageManagers.npm}` : ""}`,
+                    value: "npm",
+                    disabled: !availablePackageManagers.npm,
+                },
+            ],
+        });
+    }
+    if (optionsFromProgram.mode === undefined) {
+        options.mode = await select({
+            message: `What type of ${color.blue("app")} do you want to create?`,
+            choices: [
+                {
+                    name: `Single App - ${color.blue("TanStack Start")} & ${color.blue("Hono.js")}`,
+                    description: "One app: a TanStack Start frontend with the Hono API mounted inside it at /api.",
+                    value: "singleApp",
+                },
+                {
+                    name: `Monorepo App - ${color.blue("TanStack Start")} & ${color.blue("Hono.js")}`,
+                    description: "Two apps: a TanStack Start frontend and a Hono API served separately.",
+                    value: "apiMonorepo",
+                },
+                {
+                    name: `Only API - ${color.blue("Hono.js")}`,
+                    description: "Just the Hono API, with no frontend app.",
+                    value: "onlyApi",
                 },
             ],
+            default: "singleApp",
+        });
+    }
+    if (optionsFromProgram.monorepo === undefined &&
+        options.mode !== "apiMonorepo") {
+        options.monorepo = await confirm({
+            message: `Would you like to use ${color.blue("TurboRepo")} for monorepo management? ${color.red("(Required for plugins development)")}`,
+            default: false,
         });
     }
     if (optionsFromProgram.eslint === undefined) {
         options.eslint = await confirm({
-            message: `Would you like to use ${color.blue('ESLint')}?`,
+            message: `Would you like to use ${color.blue("ESLint & Prettier")}?`,
+        });
+    }
+    if (optionsFromProgram.docker === undefined) {
+        options.docker = await confirm({
+            message: `Would you like to use ${color.blue("Docker Container")}?`,
         });
     }
     if (optionsFromProgram.skipInstall === undefined) {
         options.install = await confirm({
-            message: `Would you like to ${color.blue('Install dependencies')}?`,
+            message: `Would you like to ${color.blue("Install dependencies")}?`,
         });
     }
     return options;

package/dist/src/validation.js

@@ -1,16 +1,16 @@
-import { program } from 'commander';
-import { existsSync } from 'fs';
-import { basename, dirname, resolve } from 'path';
-import color from 'picocolors';
-import { isFolderEmpty } from './helpers/is-folder-empty.js';
-import { isWriteable } from './helpers/is-writeable.js';
-import { validateNpmName } from './helpers/validate-pkg.js';
+import { program } from "commander";
+import { existsSync } from "node:fs";
+import { basename, dirname, resolve } from "node:path";
+import color from "picocolors";
+import { isFolderEmpty } from "./helpers/is-folder-empty.js";
+import { isWriteable } from "./helpers/is-writeable.js";
+import { validateNpmName } from "./helpers/validate-pkg.js";
 export const validationProject = async (projectPath) => {
     if (!projectPath) {
-        console.log('\nPlease specify the project directory:\n' +
-            `  ${color.cyan(program.name())} ${color.green('<project-directory>')}\n` +
-            'For example:\n' +
-            `  ${color.cyan(program.name())} ${color.green('my-vitnode-app')}\n\n` +
+        console.log("\nPlease specify the project directory:\n" +
+            `  ${color.cyan(program.name())} ${color.green("<project-directory>")}\n` +
+            "For example:\n" +
+            `  ${color.cyan(program.name())} ${color.green("my-vitnode-app")}\n\n` +
             `Run ${color.cyan(`${program.name()} --help`)} to see all options.`);
         process.exit(1);
     }
@@ -20,7 +20,7 @@ export const validationProject = async (projectPath) => {
     if (!validation.valid) {
         console.error(`Could not create a project called ${color.red(`"${projectName}"`)} because of npm naming restrictions:`);
         validation.problems.forEach(p => {
-            console.error(`${color.red(color.bold('*'))} ${p}`);
+            console.error(`${color.red(color.bold("*"))} ${p}`);
         });
         process.exit(1);
     }
@@ -28,12 +28,12 @@ export const validationProject = async (projectPath) => {
     const appName = basename(root);
     const folderExists = existsSync(root);
     if (folderExists && !isFolderEmpty(root, appName)) {
-        console.error('The specified directory is not empty.');
+        console.error("The specified directory is not empty.");
         process.exit(1);
     }
     if (!(await isWriteable(dirname(root)))) {
-        console.error('The application path is not writable, please check folder permissions and try again.');
-        console.error('It is likely you do not have write permissions for this folder.');
+        console.error("The application path is not writable, please check folder permissions and try again.");
+        console.error("It is likely you do not have write permissions for this folder.");
         process.exit(1);
     }
     return { appName, root };