Make @ alias optional

Author: skirtles-code

src/index.ts

@@ -77,6 +77,7 @@ type Config = {
   includeExamples: boolean
   includeEsLint: boolean
   includeEsLintStylistic: boolean
+  includeAtAliases: boolean
 }
 
 type Args = {
@@ -245,6 +246,7 @@ async function init() {
   const includeGithubPages = includeDocs && await togglePrompt('Include GitHub Pages config for documentation?')
   const includePlayground = await togglePrompt('Include playground application for development?', true)
   const includeExamples = await togglePrompt('Include example code?', true, 'Yes', 'No, just configs')
+  const includeAtAliases = await togglePrompt('Configure @ as an alias for src?')
 
   function suggestExtended() {
     if (!extended) {
@@ -294,7 +296,8 @@ async function init() {
     includePlayground,
     includeExamples,
     includeEsLint,
-    includeEsLintStylistic
+    includeEsLintStylistic,
+    includeAtAliases
   }
 
   copyTemplate('base', config)

src/template/base/config/packages/@projectName@/tsconfig.app.json renamed to src/template/base/config/packages/@projectName@/tsconfig.app.json.ejs

@@ -3,9 +3,9 @@
   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"<%_ if (config.includeAtAliases) { _%>,
     "paths": {
       "@/*": ["./src/*"]
-    }
+    }<%_ } %>
   }
 }

src/template/base/config/packages/@projectName@/vite.config.mts renamed to src/template/base/config/packages/@projectName@/vite.config.mts.ejs

@@ -1,5 +1,7 @@
 import { resolve } from 'node:path'
+<%_ if (config.includeAtAliases) { _%>
 import { fileURLToPath, URL } from 'node:url'
+<%_ } _%>
 
 import { defineConfig, type UserConfig } from 'vite'
 import replace from '@rollup/plugin-replace'
@@ -29,22 +31,24 @@ export default defineConfig(({ mode }): UserConfig => {
       vue(),
       dtsPlugin
     ],
+    <%_ if (config.includeAtAliases) { _%>
     resolve: {
       alias: {
         '@': fileURLToPath(new URL('./src', import.meta.url))
       }
     },
+    <%_ } _%>
     build: {
       target: 'es2019',
       emptyOutDir: false,
       minify: mode === 'production',
       lib: {
         entry: resolve(__dirname, 'src/index.ts'),
-        name: '@globalVariableName@',
+        name: '<%- config.globalVariableName %>',
         formats: mode === 'neutral' ? ['cjs', 'es'] : ['es', 'iife'],
 
         fileName(format) {
-          let name = '@unscopedPackageName@'
+          let name = '<%- config.unscopedPackageName %>'
           let extension = 'js'
 
           if (format === 'iife') {

src/template/playground/config/packages/playground/tsconfig.app.json renamed to src/template/playground/config/packages/playground/tsconfig.app.json.ejs

@@ -4,8 +4,10 @@
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "paths": {
+      <%_ if (config.includeAtAliases) { _%>
       "@/*": ["./src/*"],
-      "@scopedPackageName@": ["../@projectName@/src/index.ts"]
+      <%_ } _%>
+      "<%- config.scopedPackageName %>": ["../<%- config.mainPackageDirName %>/src/index.ts"]
     }
   }
 }

src/template/playground/config/packages/playground/vite.config.mts

@@ -0,0 +1,43 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig, type UserConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+<%_ if (config.includeAtAliases) { _%>
+const librarySrc = fileURLToPath(new URL('../<%- config.mainPackageDirName %>/src/', import.meta.url))
+const playgroundSrc = fileURLToPath(new URL('./src/', import.meta.url))
+
+<%_ } _%>
+export default defineConfig(({ mode }): UserConfig => ({
+  plugins: [
+    vue(),
+    vueDevTools()
+  ],
+  resolve: {
+    <%_ if (config.includeAtAliases) { _%>
+    alias: [
+      {
+        find: '@',
+        replacement: '@',
+        customResolver(source, importer) {
+          return source.replace(
+            /^@\//,
+            importer?.startsWith(librarySrc) ? librarySrc : playgroundSrc
+          )
+        }
+      }, {
+        find: '<%- config.scopedPackageName %>',
+        replacement: librarySrc
+      }
+    ]
+    <%_ } else { _%>
+    alias: {
+      '<%- config.scopedPackageName %>': fileURLToPath(new URL('../<%- config.mainPackageDirName %>/src/', import.meta.url))
+    }
+    <%_ } _%>
+  },
+  define: {
+    __DEV__: JSON.stringify(mode !== 'production')
+  }
+}))

src/template/playground/config/packages/playground/vite.config.mts.ejs

@@ -1,7 +1,12 @@
-import { resolve } from 'node:path'
+import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfigWithTheme } from 'vitepress'
 
+<%_ if (config.includeAtAliases) { _%>
+const librarySrc = fileURLToPath(new URL('../../<%- config.mainPackageDirName %>/src/', import.meta.url))
+const playgroundSrc = fileURLToPath(new URL('../src/', import.meta.url))
+
+<%_ } _%>
 export default ({ mode }: { mode: string }) => defineConfigWithTheme({
   srcDir: './src',
   outDir: './dist',
@@ -30,9 +35,27 @@ export default ({ mode }: { mode: string }) => defineConfigWithTheme({
   <%_ } _%>
   vite: {
     resolve: {
+      <%_ if (config.includeAtAliases) { _%>
+      alias: [
+        {
+          find: '@',
+          replacement: '@',
+          customResolver(source, importer) {
+            return source.replace(
+              /^@\//,
+              importer?.startsWith(librarySrc) ? librarySrc : playgroundSrc
+            )
+          }
+        }, {
+          find: '<%- config.scopedPackageName %>',
+          replacement: librarySrc
+        }
+      ]
+      <%_ } else { _%>
       alias: {
-        '<%- config.scopedPackageName %>': resolve(__dirname, '../../<%- config.mainPackageDirName %>/src/index.ts')
+        '<%- config.scopedPackageName %>': fileURLToPath(new URL('../../<%- config.mainPackageDirName %>/src/', import.meta.url))
       }
+      <%_ } _%>
     },
 
     define: {

src/template/vitepress/config/packages/docs/.vitepress/config.mts.ejs

@@ -10,7 +10,10 @@
   ],
   "compilerOptions": {
     "paths": {
-      "@scopedPackageName@": ["../@projectName@/src/index.ts"]
+      <%_ if (config.includeAtAliases) { _%>
+      "@/*": ["./src/*"],
+      <%_ } _%>
+      "<%- config.scopedPackageName %>": ["../<%- config.mainPackageDirName %>/src/index.ts"]
     }
   },
   "vueCompilerOptions": {