Dec 23, 2024 · Dec 12, 2024 · Dec 12, 2024 · Dec 12, 2024 · Dec 12, 2024 · Dec 12, 2024
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
          node-version: [18, 20, 22]
          os: [ubuntu-latest, windows-latest, macos-latest]
          verification-script:
            - pnpm --filter"\!*typescript*" build
            - pnpm --filter"*typescript*" build
            - pnpm --filter"*vitest*" test:unit
            - pnpm --filter"*eslint*" lint --no-fix --max-warnings=0
            - pnpm --filter"*prettier*" format --write --check
            - pnpm --filter'!*typescript*' build
            - pnpm --filter'*typescript*' build
            - pnpm --filter'*vitest*' --filter '!*bare*' test:unit
            - pnpm --filter'*eslint*' lint --no-fix --max-warnings=0
            - pnpm --filter'*prettier*' format --write --check
            # FIXME: it's failing now
            # - pnpm --filter"*with-tests*" test:unit
            # - pnpm --filter'*with-tests*' test:unit
      runs-on: ${{ matrix.os }}
      continue-on-error: ${{ matrix.os == 'windows-latest' }}
      env:

      - name: Run build script
        working-directory: ./playground
        run: pnpm --filter"*${{ matrix.e2e-framework }}*" build
        run: pnpm --filter'*${{ matrix.e2e-framework }}*' build

      - name: Run e2e test script
        working-directory: ./playground
        run: pnpm --filter"*${{ matrix.e2e-framework }}*" --workspace-concurrency 1 test:e2e
        run: pnpm --filter'*${{ matrix.e2e-framework }}*' --workspace-concurrency 1 test:e2e

      - name: Cypress component testing for projects without Vitest
        if: ${{ contains(matrix.e2e-framework, 'cypress') }}
diff --git a/index.ts b/index.ts
 import getCommand from './utils/getCommand'
 import getLanguage from './utils/getLanguage'
 import renderEslint from './utils/renderEslint'
 import trimBoilerplate from './utils/trimBoilerplate'

 function isValidPackageName(projectName) {
  return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(projectName)
  // --eslint
  // --eslint-with-prettier (only support prettier through eslint for simplicity)
  // --force (for force overwriting)
  // --bare (for a barebone template)

  const args = process.argv.slice(2)

    packageName = projectName ?? defaultProjectName,
    shouldOverwrite = argv.force,
    needsJsx = argv.jsx,
    needsTypeScript = argv.ts || argv.typescript,
    needsRouter = argv.router || argv['vue-router'],
    needsTypeScript =(argv.ts || argv.typescript) as boolean,
    needsRouter =(argv.router || argv['vue-router']) as boolean,
    needsPinia = argv.pinia,
    needsVitest = argv.vitest || argv.tests,
    needsPrettier = argv['eslint-with-prettier'],
    )
  }

  if (argv.bare) {
    trimBoilerplate(root, { needsTypeScript, needsRouter })
  }

  // Instructions:
  // Supported package managers: pnpm > yarn > bun > npm
  const userAgent = process.env.npm_config_user_agent ?? ''
diff --git a/scripts/snapshot.mjs b/scripts/snapshot.mjs
  throw new Error("Please use pnpm ('pnpm run snapshot') to generate snapshots!")

 const featureFlags = [
  'bare',
  'typescript',
  'jsx',
  'router',
 }

 let flagCombinations = fullCombination(featureFlags)
 flagCombinations.push(
  ['default'],
  ['router', 'pinia'],
  ['eslint'],
  ['eslint-with-prettier'],
 )
 flagCombinations.push(['default'], ['bare', 'default'], ['eslint'], ['eslint-with-prettier'])

 // `--with-tests` are equivalent of `--vitest --cypress`
 // Previously it means `--cypress` without `--vitest`.
 }

 // Filter out combinations that are not allowed
 flagCombinations = flagCombinations.filter(
  (combination) =>
    !featureFlagsDenylist.some((denylist) => denylist.every((flag) => combination.includes(flag))),
 )
 flagCombinations = flagCombinations
  .filter(
    (combination) =>
      !featureFlagsDenylist.some((denylist) =>
        denylist.every((flag) => combination.includes(flag)),
      ),
  )
  .filter((combination) => !(combination.length === 1 && combination[0] === 'bare'))

 const bin = path.posix.relative('../playground/', '../outfile.cjs')

diff --git a/utils/trimBoilerplate.ts b/utils/trimBoilerplate.ts
 import * as fs from 'node:fs'
 import * as path from 'path'

 function getBareBoneAppContent(isTs: boolean) {
  return `<script setup${isTs ? ' lang="ts"' : ''}>
 </script>

 <template>
  <h1>Hello World</h1>
 </template>

 <style scoped>
 </style>
 `
 }

 function replaceContent(filepath: string, replacer: (content: string) => string) {
  const content = fs.readFileSync(filepath, 'utf8')
  fs.writeFileSync(filepath, replacer(content))
 }

 export default function trimBoilerplate(rootDir: string, features: Record<string, boolean>) {
  const isTs = features.needsTypeScript
  const srcDir = path.resolve(rootDir, 'src')

  for (const filename of fs.readdirSync(srcDir)) {
    // Keep `App.vue`, `main.js/ts`, `router`, and `stores` directories
    if (['App.vue', 'main.js', 'main.ts', 'router', 'stores'].includes(filename)) {
      continue
    }
    const fullpath = path.resolve(srcDir, filename)
    fs.rmSync(fullpath, { recursive: true })
  }

  // Replace the content in `src/App.vue` with a barebone template
  replaceContent(path.resolve(rootDir, 'src/App.vue'), () => getBareBoneAppContent(isTs))

  // Remove CSS import in the entry file
  const entryPath = path.resolve(rootDir, isTs ? 'src/main.ts' : 'src/main.js')
  replaceContent(entryPath, (content) => content.replace("import './assets/main.css'\n\n", ''))

  // If `router` feature is selected, use an empty router configuration
  if (features.needsRouter) {
    const routerEntry = path.resolve(srcDir, isTs ? 'router/index.ts' : 'router/index.js')
    replaceContent(routerEntry, (content) =>
      content
        .replace(`import HomeView from '../views/HomeView.vue'\n`, '')
        .replace(/routes:\s*\[[\s\S]*?\],/, 'routes: [],'),
    )
  }
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -49,13 +49,13 @@ jobs:
		node-version: [18, 20, 22]
		os: [ubuntu-latest, windows-latest, macos-latest]
		verification-script:
		- pnpm --filter"\!typescript" build
		- pnpm --filter"typescript" build
		- pnpm --filter"vitest" test:unit
		- pnpm --filter"eslint" lint --no-fix --max-warnings=0
		- pnpm --filter"prettier" format --write --check
		- pnpm --filter'!typescript' build
		- pnpm --filter'typescript' build
		- pnpm --filter'vitest' --filter '!bare' test:unit
haoqunjiang marked this conversation as resolved. OutdatedShow resolvedHide resolved
		- pnpm --filter'eslint' lint --no-fix --max-warnings=0
		- pnpm --filter'prettier' format --write --check
		# FIXME: it's failing now
		# - pnpm --filter"with-tests" test:unit
		# - pnpm --filter'with-tests' test:unit
		runs-on: ${{ matrix.os }}
		continue-on-error: ${{ matrix.os == 'windows-latest' }}
		env:
Expand DownExpand Up		@@ -163,11 +163,11 @@ jobs:

		- name: Run build script
		working-directory: ./playground
		run: pnpm --filter"${{ matrix.e2e-framework }}" build
		run: pnpm --filter'${{ matrix.e2e-framework }}' build

		- name: Run e2e test script
		working-directory: ./playground
		run: pnpm --filter"${{ matrix.e2e-framework }}" --workspace-concurrency 1 test:e2e
		run: pnpm --filter'${{ matrix.e2e-framework }}' --workspace-concurrency 1 test:e2e

		- name: Cypress component testing for projects without Vitest
		if: ${{ contains(matrix.e2e-framework, 'cypress') }}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -18,6 +18,7 @@ import generateReadme from './utils/generateReadme'
		import getCommand from './utils/getCommand'
		import getLanguage from './utils/getLanguage'
		import renderEslint from './utils/renderEslint'
		import trimBoilerplate from './utils/trimBoilerplate'

		function isValidPackageName(projectName) {
		return /^(?:@[a-z0-9-~][a-z0-9-._~]\/)?[a-z0-9-~][a-z0-9-._~]$/.test(projectName)
Expand DownExpand Up		@@ -84,6 +85,7 @@ async function init() {
		// --eslint
		// --eslint-with-prettier (only support prettier through eslint for simplicity)
		// --force (for force overwriting)
		// --bare (for a barebone template)

		const args = process.argv.slice(2)

Expand DownExpand Up		@@ -319,8 +321,8 @@ async function init() {
		packageName = projectName ?? defaultProjectName,
		shouldOverwrite = argv.force,
		needsJsx = argv.jsx,
		needsTypeScript = argv.ts \|\| argv.typescript,
		needsRouter = argv.router \|\| argv['vue-router'],
		needsTypeScript =(argv.ts \|\| argv.typescript) as boolean,
		needsRouter =(argv.router \|\| argv['vue-router']) as boolean,
		needsPinia = argv.pinia,
		needsVitest = argv.vitest \|\| argv.tests,
		needsPrettier = argv['eslint-with-prettier'],
Expand DownExpand Up		@@ -563,6 +565,10 @@ async function init() {
		)
		}

		if (argv.bare) {
		trimBoilerplate(root, { needsTypeScript, needsRouter })
		}

		// Instructions:
		// Supported package managers: pnpm > yarn > bun > npm
		const userAgent = process.env.npm_config_user_agent ?? ''
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,6 +8,7 @@ if (!/pnpm/.test(process.env.npm_config_user_agent ?? ''))
		throw new Error("Please use pnpm ('pnpm run snapshot') to generate snapshots!")

		const featureFlags = [
		'bare',
		'typescript',
		'jsx',
		'router',
Expand DownExpand Up		@@ -54,12 +55,7 @@ function fullCombination(arr) {
		}

		let flagCombinations = fullCombination(featureFlags)
		flagCombinations.push(
		['default'],
		['router', 'pinia'],
		['eslint'],
		['eslint-with-prettier'],
		)
		flagCombinations.push(['default'], ['bare', 'default'], ['eslint'], ['eslint-with-prettier'])

		// `--with-tests` are equivalent of `--vitest --cypress`
		// Previously it means `--cypress` without `--vitest`.
Expand All		@@ -85,10 +81,14 @@ for (const flags of flagCombinations) {
		}

		// Filter out combinations that are not allowed
		flagCombinations = flagCombinations.filter(
		(combination) =>
		!featureFlagsDenylist.some((denylist) => denylist.every((flag) => combination.includes(flag))),
		)
		flagCombinations = flagCombinations
		.filter(
		(combination) =>
		!featureFlagsDenylist.some((denylist) =>
		denylist.every((flag) => combination.includes(flag)),
		),
		)
		.filter((combination) => !(combination.length === 1 && combination[0] === 'bare'))
haoqunjiang marked this conversation as resolved. Show resolvedHide resolved

		const bin = path.posix.relative('../playground/', '../outfile.cjs')

Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,51 @@
		import * as fs from 'node:fs'
		import * as path from 'path'

		function getBareBoneAppContent(isTs: boolean) {
		return `<script setup${isTs ? ' lang="ts"' : ''}>
		</script>

		<template>
		<h1>Hello World</h1>
		</template>

		<style scoped>
		</style>
		`
		}

		function replaceContent(filepath: string, replacer: (content: string) => string) {
		const content = fs.readFileSync(filepath, 'utf8')
		fs.writeFileSync(filepath, replacer(content))
		}

		export default function trimBoilerplate(rootDir: string, features: Record<string, boolean>) {
		const isTs = features.needsTypeScript
		const srcDir = path.resolve(rootDir, 'src')

		for (const filename of fs.readdirSync(srcDir)) {
		// Keep `App.vue`, `main.js/ts`, `router`, and `stores` directories
		if (['App.vue', 'main.js', 'main.ts', 'router', 'stores'].includes(filename)) {
		continue
		}
		const fullpath = path.resolve(srcDir, filename)
		fs.rmSync(fullpath, { recursive: true })
		}

		// Replace the content in `src/App.vue` with a barebone template
		replaceContent(path.resolve(rootDir, 'src/App.vue'), () => getBareBoneAppContent(isTs))

		// Remove CSS import in the entry file
		const entryPath = path.resolve(rootDir, isTs ? 'src/main.ts' : 'src/main.js')
		replaceContent(entryPath, (content) => content.replace("import './assets/main.css'\n\n", ''))

		// If `router` feature is selected, use an empty router configuration
		if (features.needsRouter) {
		const routerEntry = path.resolve(srcDir, isTs ? 'router/index.ts' : 'router/index.js')
		replaceContent(routerEntry, (content) =>
		content
		.replace(`import HomeView from '../views/HomeView.vue'\n`, '')
		.replace(/routes:\s\[[\s\S]?\],/, 'routes: [],'),
		)
		}
		}