Make the 'packages' directory optional

Author: skirtles-code

packages/create-vue-lib/src/index.ts

@@ -64,6 +64,7 @@ type Config = {
   globalVariableName: string
   targetDirName: string
   targetDirPath: string
+  packagesDir: string
   mainPackageDirName: string
   templateDirPath: string
   githubPath: string
@@ -73,6 +74,7 @@ type Config = {
   githubPagesOrigin: string
   docsBase: string
   homepageUrl: string
+  includePackagesDir: boolean
   includeDocs: boolean
   includeGithubPages: boolean
   includePlayground: boolean
@@ -216,6 +218,9 @@ async function init() {
     }
   }
 
+  const includePackagesDir = await togglePromptIf(extended, `Use 'packages' directory?`, true)
+  const packagesDir = includePackagesDir ? 'packages/' : ''
+
   const mainPackageDirName = await textPromptIf(extended, 'Main package directory', unscopedPackageName)
 
   if (!isValidDirName(mainPackageDirName)) {
@@ -279,6 +284,12 @@ async function init() {
     process.exit(1)
   }
 
+  if (!includePackagesDir && mainPackageDirName === 'scripts') {
+    console.log(`The directory name 'scripts' is reserved for the scripts, please choose a different name.`)
+    suggestExtended()
+    process.exit(1)
+  }
+
   const [githubUserName, githubRepoName] = (githubPath || '/').split('/')
   const githubUrl = githubPath ? `https://github.com/${githubPath}` : ''
   const githubIssues = githubPath ? `${githubUrl}/issues` : ''
@@ -296,6 +307,7 @@ async function init() {
     globalVariableName,
     targetDirName,
     targetDirPath,
+    packagesDir,
     mainPackageDirName,
     templateDirPath,
     githubPath,
@@ -305,6 +317,7 @@ async function init() {
     githubPagesOrigin,
     docsBase,
     homepageUrl,
+    includePackagesDir,
     includeDocs,
     includeGithubPages,
     includePlayground,
@@ -383,7 +396,13 @@ function copyFiles(templateFile: string, config: Config) {
   const stats = fs.statSync(templatePath)
   const basename = path.basename(templatePath)
 
-  const targetPath = path.join(config.targetDirPath, templateFile.replace(/@projectName@/g, config.mainPackageDirName))
+  let targetFile = templateFile.replace(/@projectName@/g, config.mainPackageDirName)
+
+  if (!config.includePackagesDir) {
+    targetFile = targetFile.replace(/^packages/, '.')
+  }
+
+  const targetPath = path.join(config.targetDirPath, targetFile)
 
   if (stats.isDirectory()) {
     if (basename === 'node_modules') {

packages/create-vue-lib/src/template/base/config/.gitignore.ejs

@@ -13,8 +13,8 @@ dist
 dist-ssr
 coverage
 *.local
-packages/docs/.vitepress/cache
-packages/<%- config.mainPackageDirName %>/README.md
+<%- config.packagesDir %>docs/.vitepress/cache
+<%- config.packagesDir %><%- config.mainPackageDirName %>/README.md
 
 /cypress/videos/
 /cypress/screenshots/

packages/create-vue-lib/src/template/base/config/package.json.ejs

@@ -8,15 +8,15 @@
   "scripts": {
     "clean": "pnpm run -r clean",
     <%_ if (config.includePlayground) { _%>
-    "dev": "pnpm run --filter ./packages/playground -r dev",
+    "dev": "pnpm run --filter ./<%- config.packagesDir %>playground -r dev",
     <%_ } _%>
     <%_ if (config.includeDocs) { _%>
-    "docs:dev": "pnpm run --filter ./packages/docs -r dev",
-    "docs:build": "pnpm run --filter ./packages/docs -r build",
+    "docs:dev": "pnpm run --filter ./<%- config.packagesDir %>docs -r dev",
+    "docs:build": "pnpm run --filter ./<%- config.packagesDir %>docs -r build",
     <%_ } _%>
     <%_ if (config.includeVitest) { _%>
-    "test:unit": "pnpm run --filter ./packages/<%- config.mainPackageDirName %> -r test:unit",
-    "coverage": "pnpm run --filter ./packages/<%- config.mainPackageDirName %> -r coverage",
+    "test:unit": "pnpm run --filter ./<%- config.packagesDir %><%- config.mainPackageDirName %> -r test:unit",
+    "coverage": "pnpm run --filter ./<%- config.packagesDir %><%- config.mainPackageDirName %> -r coverage",
     <%_ } _%>
     <%_ if (config.includeEsLint) { _%>
     "type-check": "run-p type-check:*",

packages/create-vue-lib/src/template/base/config/pnpm-workspace.yaml

@@ -0,0 +1,12 @@
+packages:
+  <%_ if (config.includePackagesDir) { _%>
+  - '<%- config.packagesDir %>*'
+  <%_ } else { _%>
+  - '<%- config.mainPackageDirName %>'
+  <%_ if (config.includeDocs) { _%>
+  - 'docs'
+  <%_ } _%>
+  <%_ if (config.includePlayground) { _%>
+  - 'playground'
+  <%_ } _%>
+  <%_ } _%>

packages/create-vue-lib/src/template/base/config/pnpm-workspace.yaml.ejs

@@ -47,7 +47,7 @@ jobs:
         uses: actions/upload-pages-artifact@v3
         with:
           # Upload docs dist directory
-          path: './packages/docs/dist'
+          path: './<%- config.packagesDir %>docs/dist'
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4

packages/create-vue-lib/src/template/gh-pages/config/.github/workflows/pages.yml renamed to packages/create-vue-lib/src/template/gh-pages/config/.github/workflows/pages.yml.ejs

@@ -40,6 +40,7 @@
  
 <span class="check">✔</span> <a href="#package-name">Package name … @skirtle/test-project</a>
 <span class="check">✔</span> <a href="#target-directory">Target directory … test-project</a>
+<span class="check">✔</span> <a href="#use-packages-directory">Use 'packages' directory? … No / Yes</a>
 <span class="check">✔</span> <a href="#main-package-directory">Main package directory … test-project</a>
 <span class="check">✔</span> <a href="#global-variable-name">Global variable name … TestProject</a>
 <span class="check">✔</span> <a href="#github-path">GitHub path (optional) … skirtles-code/test-project</a>
@@ -78,6 +79,23 @@ The directory can be renamed after the project is created. None of the files wit
 
 The tool should only create files within the specified directory. It won't edit any global configuration or files elsewhere on the filesystem. If you want to delete the project you can just delete this directory.
 
+## Use 'packages' directory?{#use-packages-directory}
+
+:::info NOTE
+This question is only asked when using the `--extended` flag.
+:::
+
+By default, the packages in the newly created project will be placed in a root-level directory called `packages`, like this:
+
+```
+📁 packages
+   📁 docs
+   📁 playground
+   📁 <main-package-directory>
+```
+
+While this convention is commonly used by the official Vue libraries, the real benefits come as a project grows and the number of packages increases. If you only need one or two packages then you might prefer to keep them in root-level directories, rather than in `packages`.
+
 ## Main package directory
 
 :::info NOTE