create-vike 0.0.1 → 0.0.4

package/README.md

@@ -17,12 +17,14 @@ Options:
 ```
 
 ## How it works
-- Copies files from `input-files/common`, `input-files/react`, and `input-files/vue` renaming and transforming them as necessary.
-- Generates plain JS files from the TS files via `detype`.
+- Generates TypeScript and JavaScript files from the templates in `input-files` via `detype`.
+- Copies files from `files/<language>/<feature>` where:
+  - `<language>` is `shared`, `ts`, or `js`
+  - `<feature>` is any combination of `vike` (default), `react`, `vue`, and `client-router` combined with a plus sign
 - Configuration files (`package.json`, `tsconfig.json`, and `vite.config.{js,ts}`) are generated programmatically.
-- Boilerplate package versions are kept in `src/config-generators/package-versions.json`.
+- Boilerplate package versions are kept in `src/config-generators/package-versions.json`, `check-deps.mjs` can be used to review package updates.
 
-## Roadmap
+## TODO
+- Add integration tests
 - Create an interactive frontend
-- Apply TS > JS transform in build-time to speed up generation
 - Resolve user's default prettier config if any and use it instead of the default

package/dist/index.js

@@ -21,104 +21,42 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
-};
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+  return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 
 // src/index.ts
-var import_commander = __toModule(require("commander"));
+var import_commander = require("commander");
 
 // src/generate.ts
-var import_path2 = __toModule(require("path"));
-
-// src/copy-files.ts
-var import_fs = __toModule(require("fs"));
-var import_path = __toModule(require("path"));
-var import_walk = __toModule(require("walk"));
-async function copyFiles(src, dest, filter) {
-  return new Promise((resolve) => {
-    const walker = (0, import_walk.walk)(src, {});
-    walker.on("file", async (root, fileStats, next) => {
-      var _a;
-      const srcPath = import_path.default.join(root, fileStats.name);
-      const relativePath = import_path.default.relative(src, srcPath);
-      const destPath = import_path.default.join(dest, relativePath);
-      const filterResult = await filter({
-        path: relativePath,
-        readContent: () => import_fs.default.promises.readFile(srcPath, "utf-8"),
-        srcPath,
-        destPath
-      });
-      switch (filterResult.operation) {
-        case "skip":
-          break;
-        case "copy":
-          {
-            const outFileDir = import_path.default.dirname(destPath);
-            await import_fs.default.promises.mkdir(outFileDir, { recursive: true });
-            await import_fs.default.promises.copyFile(srcPath, destPath);
-          }
-          break;
-        case "rename":
-          {
-            const outFileName = import_path.default.join(dest, filterResult.newPath);
-            const outFileDir = import_path.default.dirname(outFileName);
-            await import_fs.default.promises.mkdir(outFileDir, { recursive: true });
-            await import_fs.default.promises.copyFile(srcPath, outFileName);
-          }
-          break;
-        case "transform":
-          {
-            const outFileName = import_path.default.join(dest, (_a = filterResult.newPath) != null ? _a : relativePath);
-            const outFileDir = import_path.default.dirname(outFileName);
-            await import_fs.default.promises.mkdir(outFileDir, { recursive: true });
-            await import_fs.default.promises.writeFile(outFileName, filterResult.newContent, "utf-8");
-          }
-          break;
-        default:
-          assertNever(filterResult);
-      }
-      next();
-    });
-    walker.on("end", resolve);
-  });
-}
-function assertNever(arg) {
-  throw new Error("Unexpected type");
-}
-
-// src/generate.ts
-var import_detype = __toModule(require("detype"));
-var import_promises = __toModule(require("fs/promises"));
-var import_prettier = __toModule(require("prettier"));
+var import_path = __toESM(require("path"));
+var import_promises = __toESM(require("fs/promises"));
+var import_prettier = require("prettier");
 
 // src/config-generators/package-versions.json
-var _types_express = "^4.17.13";
-var _types_node = "^16.10.2";
-var _types_react_dom = "^17.0.9";
-var _types_react = "^17.0.27";
-var _vitejs_plugin_react_refresh = "^1.3.6";
-var _vitejs_plugin_vue = "^1.9.2";
-var _vue_compiler_sfc = "^3.2.19";
-var _vue_server_renderer = "^3.2.19";
-var cross_env = "^7.0.3";
-var express = "^4.17.1";
-var react_dom = "^17.0.2";
-var react = "^17.0.2";
-var ts_node = "^10.2.1";
-var typescript = "^4.4.3";
-var vite_plugin_ssr = "^0.3.8";
-var vite = "2.6.2";
-var vue = "^3.2.19";
+var _types_express = "4.17.13";
+var _types_node = "17.0.36";
+var _types_react_dom = "18.0.5";
+var _types_react = "18.0.9";
+var _vitejs_plugin_react_refresh = "1.3.6";
+var _vitejs_plugin_vue = "2.3.3";
+var _vue_compiler_sfc = "3.2.36";
+var _vue_server_renderer = "3.2.36";
+var cross_env = "7.0.3";
+var express = "4.18.1";
+var react_dom = "18.1.0";
+var react = "18.1.0";
+var ts_node = "10.8.0";
+var typescript = "4.7.2";
+var vite_plugin_ssr = "0.3.64";
+var vite = "2.9.9";
+var vue = "3.2.36";
 var package_versions_default = {
   "@types/express": _types_express,
   "@types/node": _types_node,
@@ -168,7 +106,7 @@ var ConfigGenerator = class {
         return [dep, package_versions_default[dep]];
       }))
     });
-    return JSON.stringify(output, void 0, 2);
+    return output;
   }
   generateViteConfig() {
     const config = this.getViteConfig();
@@ -279,77 +217,186 @@ var VUE_DEPENDENCIES = [
   "vue"
 ];
 
+// src/detect-package-manager.ts
+function detectPackageManager() {
+  const agent = process.env.npm_config_user_agent;
+  if (agent) {
+    const [program2] = agent.split("/");
+    if (program2 === "yarn")
+      return "yarn";
+    if (program2 === "pnpm")
+      return "pnpm";
+    if (program2 === "npm")
+      return "npm";
+  }
+  if (process.platform !== "win32") {
+    const parent = process.env._;
+    if (parent) {
+      if (parent.endsWith("pnpx") || parent.endsWith("pnpm"))
+        return "pnpm";
+      if (parent.endsWith("yarn"))
+        return "yarn";
+      if (parent.endsWith("npx") || parent.endsWith("npm"))
+        return "npm";
+    }
+  }
+  return null;
+}
+
+// src/run-command.ts
+var import_child_process = require("child_process");
+async function runCommand(command, ...args) {
+  return new Promise((resolve, reject) => {
+    const child = (0, import_child_process.spawn)(command, args, { stdio: "inherit" });
+    child.on("close", (code) => {
+      if (code === 0) {
+        resolve();
+      } else {
+        reject();
+      }
+    });
+  });
+}
+
 // src/generate.ts
-var INPUT_FILES_DIR = import_path2.default.resolve(__dirname, "../input-files");
+var import_walk = require("walk");
+var FILES_DIR = import_path.default.resolve(__dirname, "../files");
 async function generate({
-  framework: frontendFramework,
-  language,
-  outputDir
+  outputDir,
+  typescript: typescript2,
+  react: react2,
+  vue: vue2,
+  clientRouter,
+  skipDependencies,
+  npm,
+  yarn,
+  pnpm,
+  initGitRepo,
+  createInitialCommit
 }) {
-  const prettierConfig = {};
-  const filter = async ({ path: path3, readContent, srcPath }) => {
-    if (path3 === "_gitignore") {
-      return { operation: "rename", newPath: ".gitignore" };
-    }
-    if (language !== "ts" && (["tsconfig.json", "renderer/types.ts"].includes(path3) || path3.endsWith(".d.ts")))
-      return { operation: "skip" };
-    if (path3 === "vue.d.ts") {
-      return frontendFramework === "vue" ? { operation: "copy" } : { operation: "skip" };
-    }
-    if (!path3.endsWith(".ts") && !path3.endsWith(".tsx") && !path3.endsWith(".vue")) {
-      return { operation: "copy" };
-    }
-    if (language === "ts") {
-      return {
-        operation: "transform",
-        newContent: (0, import_prettier.format)((0, import_detype.removeMagicComments)(await readContent()), __spreadProps(__spreadValues({}, prettierConfig), {
-          filepath: srcPath
-        }))
-      };
-    }
-    const newPath = path3.endsWith(".ts") ? path3.slice(0, -2) + "js" : path3.endsWith(".tsx") ? path3.slice(0, -3) + "jsx" : path3;
-    return {
-      operation: "transform",
-      newPath,
-      newContent: await (0, import_detype.transform)(await readContent(), srcPath, prettierConfig)
-    };
-  };
-  await copyFiles(import_path2.default.join(INPUT_FILES_DIR, "common"), outputDir, filter);
-  await copyFiles(import_path2.default.join(INPUT_FILES_DIR, frontendFramework), outputDir, filter);
+  let error = false;
+  if (Number(npm) + Number(pnpm) + Number(yarn) > 1) {
+    process.stderr.write("Only one of npm, pnpm, or yarn can be specified\n");
+    error = true;
+  }
+  let packageManager = npm ? "npm" : pnpm ? "pnpm" : yarn ? "yarn" : void 0;
+  if (!packageManager) {
+    const detected = detectPackageManager();
+    packageManager = detected || "npm";
+  }
+  if (vue2 && react2) {
+    process.stderr.write("Cannot use both react and vue\n");
+    error = true;
+  } else if (!vue2 && !react2) {
+    process.stderr.write("Please specify either --react or --vue\n");
+    error = true;
+  }
+  if (error) {
+    process.exit(1);
+  }
+  const framework = vue2 ? "vue" : "react";
+  const features = ["vike", framework];
+  if (clientRouter)
+    features.push("client-router");
+  const language = typescript2 ? "ts" : "js";
+  async function findDirs(dir) {
+    return (await import_promises.default.readdir(import_path.default.join(FILES_DIR, dir), {
+      withFileTypes: true
+    })).filter((x) => x.isDirectory()).map((x) => ({
+      name: import_path.default.join(dir, x.name),
+      features: x.name.split("+")
+    })).sort((a, b) => a.features.length - b.features.length);
+  }
+  const dirs = [...await findDirs("shared"), ...await findDirs(language)].filter((x) => x.features.every((f) => features.includes(f))).map((x) => x.name);
+  console.log("Copying files");
+  const toBeCopied = {};
+  for (const dir of dirs) {
+    const files = await getFiles(dir);
+    files.forEach((x) => {
+      let targetName = x.slice(dir.length + 1);
+      if (targetName === "_gitignore")
+        targetName = ".gitignore";
+      toBeCopied[targetName] = x;
+    });
+  }
+  for (const [targetName, sourcePath] of Object.entries(toBeCopied)) {
+    const targetPath = import_path.default.join(outputDir, targetName);
+    const dirName = import_path.default.dirname(targetPath);
+    await import_promises.default.mkdir(dirName, { recursive: true });
+    await import_promises.default.copyFile(import_path.default.join(FILES_DIR, sourcePath), targetPath);
+  }
   const generators = {
     react: ReactConfigGenerator,
     vue: VueConfigGenerator
   };
-  const generator = new generators[frontendFramework](language);
-  const packageJsonfileName = import_path2.default.join(outputDir, "package.json");
-  await import_promises.default.writeFile(packageJsonfileName, (0, import_prettier.format)(generator.generatePackageJson(), __spreadProps(__spreadValues({}, prettierConfig), {
+  console.log("Generating configutation files");
+  const generator = new generators[framework](language);
+  const prettierConfig = {};
+  const packageJson = generator.generatePackageJson();
+  if (yarn) {
+    packageJson.scripts.dev = "yarn server";
+    packageJson.scripts.prod = "yarn build && yarn server:prod";
+  } else if (pnpm) {
+    packageJson.scripts.dev = "pnpm run server";
+    packageJson.scripts.prod = "pnpm build && pnpm server:prod";
+  }
+  const packageJsonfileName = import_path.default.join(outputDir, "package.json");
+  await import_promises.default.writeFile(packageJsonfileName, (0, import_prettier.format)(JSON.stringify(packageJson), __spreadProps(__spreadValues({}, prettierConfig), {
     filepath: packageJsonfileName
   })));
   if (language === "ts") {
-    const fn = import_path2.default.join(outputDir, "tsconfig.json");
+    const fn = import_path.default.join(outputDir, "tsconfig.json");
     await import_promises.default.writeFile(fn, (0, import_prettier.format)(generator.generateTsConfig(), __spreadProps(__spreadValues({}, prettierConfig), { filepath: fn })));
   }
-  const viteConfigFileName = import_path2.default.join(outputDir, "vite.config." + language);
+  const viteConfigFileName = import_path.default.join(outputDir, "vite.config." + language);
   await import_promises.default.writeFile(viteConfigFileName, (0, import_prettier.format)(generator.generateViteConfig(), __spreadProps(__spreadValues({}, prettierConfig), {
     filepath: viteConfigFileName
   })));
+  process.chdir(outputDir);
+  if (!skipDependencies) {
+    console.log("Installing dependencies with", packageManager);
+    await runCommand(packageManager, "install");
+  }
+  if (initGitRepo) {
+    console.log("Initializing git repository");
+    await runCommand("git", "init");
+    if (initGitRepo === true)
+      initGitRepo = "main";
+    if (initGitRepo !== "master") {
+      await runCommand("git", "checkout", "-b", initGitRepo);
+    }
+    if (createInitialCommit) {
+      console.log("Creating initial commit");
+      if (createInitialCommit === true)
+        createInitialCommit = `Initialized Vike ${typescript2 ? "TypeScript" : "vanilla JavaScript"} boilerplate for ${react2 ? "React" : "Vue"}`;
+      await runCommand("git", "add", ".");
+      await runCommand("git", "commit", "-m", createInitialCommit);
+    }
+  } else if (createInitialCommit) {
+    console.warn("Ignoring initial commit because no git repo was initialized");
+  }
+}
+async function getFiles(dir) {
+  const files = [];
+  const walker = (0, import_walk.walk)(import_path.default.join(FILES_DIR, dir));
+  walker.on("file", (root, fileStats, next) => {
+    files.push(import_path.default.relative(FILES_DIR, import_path.default.join(root, fileStats.name)));
+    next();
+  });
+  await new Promise((resolve, reject) => {
+    walker.on("end", resolve);
+    walker.on("errors", (_, statsArr) => {
+      const errors = statsArr.map((stat) => stat.error);
+      reject(new Error(`Failed to walk ${dir}: ${errors.join(", ")}`));
+    });
+  });
+  return files;
 }
 
 // package.json
-var version = "0.0.1";
+var version = "0.0.4";
 
 // src/index.ts
-import_commander.program.description("Generates Vike application boilerplate").version(version);
-import_commander.program.argument("<output-dir>", "Output directory");
-import_commander.program.addOption(new import_commander.Option("-f, --framework <framework>", "Frontend framework").choices([
-  "react",
-  "vue"
-]));
-import_commander.program.addOption(new import_commander.Option("-l, --language <language>", "Programming language").choices([
-  "js",
-  "ts"
-]));
-import_commander.program.action((outputDir, options) => {
+import_commander.program.description("Generates Vike application boilerplate").version(version).argument("<output-dir>", "Output directory").option("-t, --typescript", "use TypeScript", false).option("-n, --npm", "use npm package manager", false).option("-y, --yarn", "use yarn package manager", false).option("-p, --pnpm", "use pnpm package manager", false).option("-v, --vue", "use Vue", false).option("-r, --react", "use React", false).option("-c, --client-router", "use client router", false).option("-s, --skip-dependencies", "skip installing dependencies", false).option("-i, --init-git-repo [branch]", "initialize git repo", false).option("-m, --create-initial-commit [message]", "create initial commit", false).action((outputDir, options) => {
   generate(__spreadValues({ outputDir }, options));
-});
-import_commander.program.parse();
+}).parse();

package/files/js/react/renderer/Link.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { usePageContext } from "./usePageContext";
+
+export { Link };
+
+function Link(props) {
+  const pageContext = usePageContext();
+  const className = [
+    props.className,
+    pageContext.urlPathname === props.href && "is-active",
+  ]
+    .filter(Boolean)
+    .join(" ");
+  return <a {...props} className={className} />;
+}

package/files/js/react/renderer/PageWrapper.jsx

@@ -0,0 +1,89 @@
+import React from "react";
+import logo from "./logo.svg";
+import { PageContextProvider } from "./usePageContext";
+import "./PageWrapper.css";
+import { Link } from "./Link";
+
+export { PageWrapper };
+
+function PageWrapper({ children, pageContext }) {
+  return (
+    <React.StrictMode>
+      <PageContextProvider pageContext={pageContext}>
+        <Layout>
+          <Sidebar>
+            <Logo />
+            <Link className="navitem" href="/">
+              Home
+            </Link>
+            <Link className="navitem" href="/about">
+              About
+            </Link>
+          </Sidebar>
+          <Content>{children}</Content>
+        </Layout>
+      </PageContextProvider>
+    </React.StrictMode>
+  );
+}
+
+function Layout({ children }) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        maxWidth: 900,
+        margin: "auto",
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+function Sidebar({ children }) {
+  return (
+    <div
+      style={{
+        padding: 20,
+        flexShrink: 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        lineHeight: "1.8em",
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+function Content({ children }) {
+  return (
+    <div
+      style={{
+        padding: 20,
+        paddingBottom: 50,
+        borderLeft: "2px solid #eee",
+        minHeight: "100vh",
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+function Logo() {
+  return (
+    <div
+      style={{
+        marginTop: 20,
+        marginBottom: 10,
+      }}
+    >
+      <a href="/">
+        <img src={logo} height={64} width={64} alt="logo" />
+      </a>
+    </div>
+  );
+}

package/files/js/react/renderer/_default.page.client.jsx

@@ -0,0 +1,19 @@
+import ReactDOM from "react-dom";
+import React from "react";
+import { getPage } from "vite-plugin-ssr/client";
+import { PageWrapper } from "./PageWrapper";
+
+hydrate();
+
+async function hydrate() {
+  // We do Server Routing, but we can also do Client Routing by using `useClientRouter()`
+  // instead of `getPage()`, see https://vite-plugin-ssr.com/useClientRouter
+  const pageContext = await getPage();
+  const { Page, pageProps } = pageContext;
+  ReactDOM.hydrate(
+    <PageWrapper pageContext={pageContext}>
+      <Page {...pageProps} />
+    </PageWrapper>,
+    document.getElementById("page-view")
+  );
+}

package/files/js/react/renderer/_default.page.server.jsx

@@ -0,0 +1,47 @@
+import ReactDOMServer from "react-dom/server";
+import React from "react";
+import { PageWrapper } from "./PageWrapper";
+import { escapeInject, dangerouslySkipEscape } from "vite-plugin-ssr";
+import logoUrl from "./logo.svg";
+
+export { render };
+
+// See https://vite-plugin-ssr.com/data-fetching
+export const passToClient = ["pageProps", "urlPathname"];
+
+async function render(pageContext) {
+  const { Page, pageProps } = pageContext;
+  const pageHtml = ReactDOMServer.renderToString(
+    <PageWrapper pageContext={pageContext}>
+      <Page {...pageProps} />
+    </PageWrapper>
+  );
+
+  // See https://vite-plugin-ssr.com/html-head
+  const { documentProps } = pageContext;
+  const title = (documentProps && documentProps.title) || "Vite SSR app";
+  const desc =
+    (documentProps && documentProps.description) ||
+    "App using Vite + vite-plugin-ssr";
+
+  const documentHtml = escapeInject`<!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" href="${logoUrl}" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content="${desc}" />
+        <title>${title}</title>
+      </head>
+      <body>
+        <div id="page-view">${dangerouslySkipEscape(pageHtml)}</div>
+      </body>
+    </html>`;
+
+  return {
+    documentHtml,
+    pageContext: {
+      // We can add some `pageContext` here, which is useful if we want to do page redirection https://vite-plugin-ssr.com/page-redirection
+    },
+  };
+}

package/files/js/react/renderer/_error.page.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+export { Page };
+
+function Page({ is404 }) {
+  if (is404) {
+    return (
+      <>
+        <h1>404 Page Not Found</h1>
+        <p>This page could not be found.</p>
+      </>
+    );
+  } else {
+    return (
+      <>
+        <h1>500 Internal Server Error</h1>
+        <p>Something went wrong.</p>
+      </>
+    );
+  }
+}

package/files/js/react/renderer/usePageContext.jsx

@@ -0,0 +1,18 @@
+// `usePageContext` allows us to access `pageContext` in any React component.
+// More infos: https://vite-plugin-ssr.com/pageContext-anywhere
+
+import React, { useContext } from "react";
+
+export { PageContextProvider };
+export { usePageContext };
+
+const Context = React.createContext(undefined);
+
+function PageContextProvider({ pageContext, children }) {
+  return <Context.Provider value={pageContext}>{children}</Context.Provider>;
+}
+
+function usePageContext() {
+  const pageContext = useContext(Context);
+  return pageContext;
+}

package/files/js/react+client-router/renderer/_default.page.client.jsx

@@ -0,0 +1,43 @@
+import ReactDOM from "react-dom";
+import React from "react";
+import { useClientRouter } from "vite-plugin-ssr/client/router";
+import { PageWrapper } from "./PageWrapper";
+
+useClientRouter({
+  async render(pageContext) {
+    if (pageContext.isHydration) {
+      // When we render the first page. (Since we do SSR, the first page is already
+      // rendered to HTML and we merely have to hydrate it.)
+      const { Page, pageProps } = pageContext;
+      ReactDOM.hydrate(
+        <PageWrapper pageContext={pageContext}>
+          <Page {...pageProps} />
+        </PageWrapper>,
+        document.getElementById("page-view")
+      );
+    } else {
+      // When the user navigates to a new page.
+      const { Page, pageProps } = pageContext;
+      ReactDOM.render(
+        <PageWrapper pageContext={pageContext}>
+          <Page {...pageProps} />
+        </PageWrapper>,
+        document.getElementById("page-view")
+      );
+    }
+  },
+
+  ensureHydration: true,
+
+  prefetchLinks: true,
+
+  onTransitionStart() {
+    // Page transition started
+  },
+
+  onTransitionEnd() {
+    // Page transition ended
+  },
+}).hydrationPromise.then(() => {
+  // Hydration finished; page is now interactive
+});