create-vike 0.0.4 → 0.0.304

package/boilerplate-vue-ts/server/root.ts

@@ -0,0 +1,8 @@
+export { root }
+
+// https://stackoverflow.com/questions/46745014/alternative-for-dirname-in-node-when-using-the-experimental-modules-flag/50052194#50052194
+
+import { dirname } from 'path'
+import { fileURLToPath } from 'url'
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const root = `${__dirname}/..`

package/boilerplate-vue-ts/server/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  // Make IDEs complain about missing file extension .js in import paths.
+  // Alternatively, we could always set "module" to "Node16" and add the file extension .js to import paths everywhere.
+  "compilerOptions": {
+    "module": "Node16",
+    "moduleResolution": "Node16"
+  }
+}

package/boilerplate-vue-ts/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "module": "ES2020",
+    "target": "ES2020",
+    // Doesn't apply to server/, see ts-node config down below and server/tsconfig.json
+    "moduleResolution": "Bundler",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+    "esModuleInterop": true
+  },
+  "ts-node": {
+    "transpileOnly": true,
+    "esm": true,
+    "compilerOptions": {
+      "module": "Node16",
+      "moduleResolution": "Node16"
+    }
+  }
+}

package/boilerplate-vue-ts/vite.config.ts

@@ -0,0 +1,9 @@
+import vue from '@vitejs/plugin-vue'
+import ssr from 'vike/plugin'
+import { UserConfig } from 'vite'
+
+const config: UserConfig = {
+  plugins: [vue(), ssr()]
+}
+
+export default config

package/boilerplate-vue-ts/vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  const Component: any
+  export default Component
+}

package/index.js

@@ -0,0 +1,222 @@
+#!/usr/bin/env node
+
+// @ts-check
+const fs = require('fs')
+const path = require('path')
+const argv = require('minimist')(process.argv.slice(2))
+const { prompt } = require('enquirer')
+const { green, cyan, bold } = require('picocolors')
+const { execSync } = require('child_process')
+
+const BOILERPLATES = [
+  {
+    name: 'vue',
+    color: green
+  },
+  {
+    name: 'vue-ts',
+    color: green
+  },
+  {
+    name: 'react',
+    color: cyan
+  },
+  {
+    name: 'react-ts',
+    color: cyan
+  }
+]
+const IGNORE_FILES = ['.prettierrc', '.test-dev.test.ts', '.test-prod.test.ts', '.testCiJob.json']
+//const IGNORE_PACKAGE_JSON = ['name', 'version', '// Needed for Yarn workspaces']
+const IGNORE_PACKAGE_JSON = []
+const RENAME_FILES = {
+  _gitignore: '.gitignore'
+}
+
+const cwd = process.cwd()
+
+async function init() {
+  let targetDir = argv._[0]
+  if (!targetDir) {
+    /**
+     * @type {{ name: string }}
+     */
+    const { name } = await prompt({
+      type: 'input',
+      name: 'name',
+      message: `Project name:`,
+      initial: 'vite-ssr-project'
+    })
+    targetDir = name
+  }
+
+  const root = path.join(cwd, targetDir)
+  console.log(`\nScaffolding project in ${root}...`)
+
+  if (!fs.existsSync(root)) {
+    fs.mkdirSync(root, { recursive: true })
+  } else {
+    const existing = fs.readdirSync(root)
+    if (existing.length) {
+      /**
+       * @type {{ yes: boolean }}
+       */
+      const { yes } = await prompt({
+        type: 'confirm',
+        name: 'yes',
+        initial: 'Y',
+        message: `Target directory ${targetDir} is not empty.\n` + `Remove existing files and continue?`
+      })
+      if (yes) {
+        emptyDir(root)
+      } else {
+        return
+      }
+    }
+  }
+
+  // determine boilerplate
+  let boilerplate = argv.t || argv.boilerplate
+  let message = 'Select a boilerplate:'
+  let isValidBoilerplate = false
+
+  // --boilerplate expects a value
+  if (typeof boilerplate === 'string') {
+    const availableBoilerplates = BOILERPLATES.map((b) => b.name)
+    isValidBoilerplate = availableBoilerplates.includes(boilerplate)
+    message = `${boilerplate} isn't a valid boilerplate. Please choose from below:`
+  }
+
+  if (!boilerplate || !isValidBoilerplate) {
+    /**
+     * @type {{ t: string }}
+     */
+    const { t } = await prompt({
+      type: 'select',
+      name: 't',
+      message,
+      choices: BOILERPLATES.map((b) => ({
+        message: b.color(b.name),
+        name: b.name
+      }))
+    })
+    boilerplate = t
+  }
+
+  const boilerplateDir = path.join(__dirname, `boilerplate-${boilerplate}`)
+
+  const write = (file) => {
+    const targetPath = RENAME_FILES[file] ? path.join(root, RENAME_FILES[file]) : path.join(root, file)
+    if (file === 'package.json') {
+      let content = JSON.parse(fs.readFileSync(path.join(boilerplateDir, file)).toString())
+      IGNORE_PACKAGE_JSON.forEach((key) => {
+        delete content[key]
+      })
+      content = JSON.stringify(content, null, 2)
+      fs.writeFileSync(targetPath, content + '\n')
+    } else {
+      copy(path.join(boilerplateDir, file), targetPath)
+    }
+  }
+
+  const files = fs.readdirSync(boilerplateDir)
+  for (const file of files.filter((f) => !IGNORE_FILES.includes(f))) {
+    write(file)
+  }
+
+  if (!argv['skip-git']) {
+    initGitRepo(root)
+  }
+
+  console.log(`\nDone. Now run:\n`)
+  if (root !== cwd) {
+    console.log(cmd(`  cd ${path.relative(cwd, root)}/`))
+  }
+  console.log(`  ${cmd('npm install')} (or ${cmd('pnpm install')} / ${cmd('yarn install')})`)
+  console.log(`  ${cmd('npm run dev')} (or ${cmd('pnpm run dev')} / ${cmd('yarn dev')})`)
+  console.log()
+}
+
+function cmd(str) {
+  return bold(str)
+}
+
+function copy(src, dest) {
+  const stat = fs.statSync(src)
+  if (stat.isDirectory()) {
+    copyDir(src, dest)
+  } else {
+    fs.copyFileSync(src, dest)
+  }
+}
+
+function copyDir(srcDir, destDir) {
+  fs.mkdirSync(destDir, { recursive: true })
+  for (const file of fs.readdirSync(srcDir)) {
+    const srcFile = path.resolve(srcDir, file)
+    const destFile = path.resolve(destDir, file)
+    copy(srcFile, destFile)
+  }
+}
+
+function emptyDir(dir) {
+  if (!fs.existsSync(dir)) {
+    return
+  }
+  for (const file of fs.readdirSync(dir)) {
+    const abs = path.resolve(dir, file)
+    // baseline is Node 12 so can't use rmSync :(
+    if (fs.lstatSync(abs).isDirectory()) {
+      emptyDir(abs)
+      fs.rmdirSync(abs)
+    } else {
+      fs.unlinkSync(abs)
+    }
+  }
+}
+
+function initGitRepo(cwd) {
+  if (!isGitInstalled()) {
+    return
+  }
+
+  try {
+    execSync('git init', {
+      cwd,
+      // See https://github.com/vikejs/vike/issues/478
+      stdio: 'ignore'
+    })
+
+    execSync('git add .', { cwd, stdio: 'ignore' })
+    execSync(
+      [
+        'git',
+        '-c user.name="Romuald Brillout"',
+        '-c user.email="vike@brillout.com"',
+        'commit',
+        '--no-gpg-sign',
+        '--message="Scaffold Vike app"'
+      ].join(' '),
+      { cwd, stdio: 'ignore' }
+    )
+  } catch {
+    try {
+      fs.rmSync(path.join(cwd, '.git'), { recursive: true, force: true })
+    } catch {}
+    console.warn('Could not initialize a git repository.')
+  }
+}
+
+function isGitInstalled() {
+  let stdout
+  try {
+    stdout = execSync('git --version')
+  } catch (err) {
+    return false
+  }
+  return !!stdout
+}
+
+init().catch((e) => {
+  console.error(e)
+})

package/package.json

@@ -1,57 +1,18 @@
 {
   "name": "create-vike",
-  "version": "0.0.4",
-  "description": "Generates Vike application boilerplate",
-  "main": "dist/index.js",
-  "bin": "create-vike.js",
-  "files": [
-    "dist/**/*",
-    "files/**/*"
-  ],
-  "dependencies": {
-    "commander": "^9.3.0",
-    "prettier": "^2.6.2",
-    "walk": "^2.3.15"
-  },
-  "devDependencies": {
-    "@types/jest": "^27.5.1",
-    "@types/node": "^17.0.36",
-    "@types/rimraf": "^3.0.2",
-    "@types/walk": "^2.3.1",
-    "@typescript-eslint/eslint-plugin": "^5.27.0",
-    "@typescript-eslint/parser": "^5.27.0",
-    "chalk": "^5.0.1",
-    "detype": "^0.5.0",
-    "esbuild": "^0.14.42",
-    "esbuild-jest": "^0.5.0",
-    "esbuild-node-externals": "^1.4.1",
-    "eslint": "^8.16.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-import-resolver-typescript": "^2.7.1",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-no-only-tests": "^2.6.0",
-    "eslint-plugin-only-warn": "^1.0.3",
-    "eslint-plugin-ssr-friendly": "^1.0.6",
-    "fast-glob": "^3.2.11",
-    "jest": "^28.1.0",
-    "npm-run-all": "^4.1.5",
-    "rimraf": "^3.0.2",
-    "semver": "^7.3.7",
-    "typescript": "^4.7.2"
+  "version": "0.0.304",
+  "license": "MIT",
+  "bin": {
+    "create-vike": "index.js"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/cyco130/create-.git"
+  "main": "index.js",
+  "engines": {
+    "node": ">=12.0.0"
   },
-  "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"
+  "repository": "https://github.com/vikejs/vike",
+  "dependencies": {
+    "enquirer": "^2.3.6",
+    "minimist": "^1.2.6",
+    "picocolors": "^1.0.0"
   }
-}
+}

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");