create-vike 0.0.3 → 0.0.5

package/package.json

@@ -1,56 +1,4 @@
 {
   "name": "create-vike",
-  "version": "0.0.3",
-  "description": "Generates Vike application boilerplate",
-  "main": "dist/index.js",
-  "bin": "create-vike.js",
-  "files": [
-    "dist/**/*",
-    "files/**/*"
-  ],
-  "dependencies": {
-    "commander": "^8.3.0",
-    "prettier": "^2.4.1",
-    "walk": "^2.3.15"
-  },
-  "devDependencies": {
-    "@types/jest": "^27.0.2",
-    "@types/rimraf": "^3.0.2",
-    "@types/walk": "^2.3.1",
-    "@typescript-eslint/eslint-plugin": "^5.3.1",
-    "@typescript-eslint/parser": "^5.3.1",
-    "chalk": "^4.1.2",
-    "detype": "^0.4.1",
-    "esbuild": "^0.13.13",
-    "esbuild-jest": "^0.5.0",
-    "esbuild-node-externals": "^1.3.0",
-    "eslint": "^8.2.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-import-resolver-typescript": "^2.5.0",
-    "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-no-only-tests": "^2.6.0",
-    "eslint-plugin-only-warn": "^1.0.3",
-    "eslint-plugin-ssr-friendly": "^1.0.5",
-    "fast-glob": "^3.2.7",
-    "jest": "^27.3.1",
-    "npm-run-all": "^4.1.5",
-    "rimraf": "^3.0.2",
-    "semver": "^7.3.5",
-    "typescript": "^4.4.4"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/cyco130/create-.git"
-  },
-  "author": "Fatih Aygün <cyco130@gmail.com>",
-  "license": "MIT",
-  "scripts": {
-    "build": "node build.mjs",
-    "generate-files": "./generate-files",
-    "test": "run-p 'test:*'",
-    "test:unit": "jest --passWithNoTests",
-    "test:typecheck": "tsc -p tsconfig.json --noEmit",
-    "test:lint": "eslint src --max-warnings 0",
-    "format": "prettier . --write"
-  }
-}
+  "version": "0.0.5"
+}

package/readme.md

@@ -0,0 +1,3 @@
+This is work in progress, stay tuned...
+
+If I didn't publish anything in a while and you want this package, then reach out and I'll give it away.

package/README.md

@@ -1,30 +0,0 @@
-# Vike Project Generator
-
-Generates Vike application boilerplate
-
-## Usage
-```
-create-vike [options] <output-dir>
-
-Arguments:
-  output-dir                   Output directory
-
-Options:
-  -V, --version                output the version number
-  -f, --framework <framework>  Frontend framework (choices: "react", "vue")
-  -l, --language <language>    Programming language (choices: "js", "ts")
-  -h, --help                   display help for command
-```
-
-## How it works
-- 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`, `check-deps.mjs` can be used to review package updates.
-
-## TODO
-- Add integration tests
-- Create an interactive frontend
-- Resolve user's default prettier config if any and use it instead of the default

package/create-vike.js

@@ -1,2 +0,0 @@
-#!/usr/bin/env node
-require("./dist");

package/dist/index.js

@@ -1,405 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  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 });
-  }
-  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);
-};
-
-// src/index.ts
-var import_commander = __toModule(require("commander"));
-
-// src/generate.ts
-var import_path = __toModule(require("path"));
-var import_promises = __toModule(require("fs/promises"));
-var import_prettier = __toModule(require("prettier"));
-
-// src/config-generators/package-versions.json
-var _types_express = "4.17.13";
-var _types_node = "16.11.7";
-var _types_react_dom = "17.0.11";
-var _types_react = "17.0.34";
-var _vitejs_plugin_react_refresh = "1.3.6";
-var _vitejs_plugin_vue = "1.9.4";
-var _vue_compiler_sfc = "3.2.21";
-var _vue_server_renderer = "3.2.21";
-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.4.0";
-var typescript = "4.4.4";
-var vite_plugin_ssr = "0.3.27";
-var vite = "2.6.14";
-var vue = "^3.2.21";
-var package_versions_default = {
-  "@types/express": _types_express,
-  "@types/node": _types_node,
-  "@types/react-dom": _types_react_dom,
-  "@types/react": _types_react,
-  "@vitejs/plugin-react-refresh": _vitejs_plugin_react_refresh,
-  "@vitejs/plugin-vue": _vitejs_plugin_vue,
-  "@vue/compiler-sfc": _vue_compiler_sfc,
-  "@vue/server-renderer": _vue_server_renderer,
-  "cross-env": cross_env,
-  express,
-  "react-dom": react_dom,
-  react,
-  "ts-node": ts_node,
-  typescript,
-  "vite-plugin-ssr": vite_plugin_ssr,
-  vite,
-  vue
-};
-
-// src/config-generators/common.ts
-var ConfigGenerator = class {
-  constructor(language) {
-    this.language = language;
-  }
-  generateTsConfig() {
-    const config = deepClone(TS_CONFIG);
-    this.modifyTsConfig(config);
-    return JSON.stringify(config, void 0, 2);
-  }
-  generatePackageJson() {
-    const pkg = deepClone(PACKAGE_JSON);
-    if (this.language === "ts") {
-      pkg.scripts = __spreadValues(__spreadValues({}, pkg.scripts), TS_PACKAGE_JSON_OVERRIDES.scripts);
-      pkg.dependencies = [
-        ...pkg.dependencies,
-        ...TS_PACKAGE_JSON_OVERRIDES.dependencies
-      ];
-    }
-    this.modifyPackageJson(pkg);
-    pkg.dependencies = pkg.dependencies.sort();
-    const output = __spreadProps(__spreadValues({}, pkg), {
-      dependencies: Object.fromEntries(pkg.dependencies.map((dep) => {
-        if (!(dep in package_versions_default)) {
-          throw new Error("Unknown package " + dep);
-        }
-        return [dep, package_versions_default[dep]];
-      }))
-    });
-    return output;
-  }
-  generateViteConfig() {
-    const config = this.getViteConfig();
-    let out = `import ${config.frameworkImportName} from ${JSON.stringify(config.frameworkImportPackage)};
-`;
-    out += `import ssr from "vite-plugin-ssr/plugin";
-`;
-    if (this.language === "ts") {
-      out += `import { UserConfig } from "vite";
-`;
-    }
-    out += "\n";
-    if (this.language === "ts") {
-      out += `const config: UserConfig = `;
-    } else {
-      out += `export default `;
-    }
-    out += `{
-  plugins: [${config.frameworkImportName}(), ssr()],
-};
-`;
-    if (this.language === "ts") {
-      out += `
-export default config;
-`;
-    }
-    return out;
-  }
-};
-function deepClone(original) {
-  return JSON.parse(JSON.stringify(original));
-}
-var TS_CONFIG = {
-  compilerOptions: {
-    strict: true,
-    module: "ES2020",
-    moduleResolution: "Node",
-    target: "ES2017",
-    lib: ["DOM", "DOM.Iterable", "ESNext"],
-    types: ["vite/client"],
-    jsx: "react",
-    skipLibCheck: true,
-    esModuleInterop: true
-  },
-  "ts-node": { transpileOnly: true, compilerOptions: { module: "CommonJS" } }
-};
-var PACKAGE_JSON = {
-  scripts: {
-    dev: "npm run server",
-    prod: "npm run build && npm run server:prod",
-    build: "vite build && vite build --ssr",
-    server: "node ./server",
-    "server:prod": "cross-env NODE_ENV=production node ./server"
-  },
-  dependencies: ["cross-env", "express", "vite", "vite-plugin-ssr"]
-};
-var TS_PACKAGE_JSON_OVERRIDES = {
-  scripts: {
-    server: "ts-node ./server",
-    "server:prod": "cross-env NODE_ENV=production ts-node ./server"
-  },
-  dependencies: ["@types/express", "@types/node", "ts-node", "typescript"]
-};
-
-// src/config-generators/react.ts
-var ReactConfigGenerator = class extends ConfigGenerator {
-  modifyTsConfig() {
-  }
-  modifyPackageJson(pkg) {
-    pkg.dependencies.push(...REACT_DEPENDENCIES);
-    if (this.language === "ts") {
-      pkg.dependencies.push(...REACT_TS_DEPENDENCIES);
-    }
-  }
-  getViteConfig() {
-    return {
-      frameworkImportName: "reactRefresh",
-      frameworkImportPackage: "@vitejs/plugin-react-refresh"
-    };
-  }
-};
-var REACT_DEPENDENCIES = [
-  "@vitejs/plugin-react-refresh",
-  "react",
-  "react-dom"
-];
-var REACT_TS_DEPENDENCIES = ["@types/react", "@types/react-dom"];
-
-// src/config-generators/vue.ts
-var VueConfigGenerator = class extends ConfigGenerator {
-  modifyTsConfig(config) {
-    delete config.compilerOptions.jsx;
-  }
-  modifyPackageJson(pkg) {
-    pkg.dependencies.push(...VUE_DEPENDENCIES);
-  }
-  getViteConfig() {
-    return {
-      frameworkImportName: "vue",
-      frameworkImportPackage: "@vitejs/plugin-vue"
-    };
-  }
-};
-var VUE_DEPENDENCIES = [
-  "@vitejs/plugin-vue",
-  "@vue/compiler-sfc",
-  "@vue/server-renderer",
-  "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 = __toModule(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 import_walk = __toModule(require("walk"));
-var FILES_DIR = import_path.default.resolve(__dirname, "../files");
-async function generate({
-  outputDir,
-  typescript: typescript2,
-  react: react2,
-  vue: vue2,
-  clientRouter,
-  skipDependencies,
-  npm,
-  yarn,
-  pnpm,
-  initGitRepo,
-  createInitialCommit
-}) {
-  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
-  };
-  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_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_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.3";
-
-// src/index.ts
-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));
-}).parse();

package/files/js/react/pages/about/index.page.jsx

@@ -1,13 +0,0 @@
-import React from "react";
-import "./index.css";
-
-export { Page };
-
-function Page() {
-  return (
-    <>
-      <h1>About</h1>
-      <p>A colored page.</p>
-    </>
-  );
-}

package/files/js/react/pages/index/Counter.jsx

@@ -1,12 +0,0 @@
-import React, { useState } from "react";
-
-export { Counter };
-
-function Counter() {
-  const [count, setCount] = useState(0);
-  return (
-    <button type="button" onClick={() => setCount((count) => count + 1)}>
-      Counter {count}
-    </button>
-  );
-}

package/files/js/react/pages/index/index.page.jsx

@@ -1,19 +0,0 @@
-import React from "react";
-import { Counter } from "./Counter";
-
-export { Page };
-
-function Page() {
-  return (
-    <>
-      <h1>Welcome</h1>
-      This page is:
-      <ul>
-        <li>Rendered to HTML.</li>
-        <li>
-          Interactive. <Counter />
-        </li>
-      </ul>
-    </>
-  );
-}

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

@@ -1,15 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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")
-  );
-}