feat: use package.json imports instead of `@` as alias to `src`

See reasons at https://github.com/epicweb-dev/epic-stack/blob/main/docs/decisions/031-imports.md
and https://github.com/vuejs/core/issues/9919

Pending https://github.com/vuejs/core/issues/9919 to be fixed
Pending https://github.com/microsoft/TypeScript/pull/55015 to be released

diff --git a/template/base/jsconfig.json b/template/base/jsconfig.json
index 5a1f2d222a302a174e710614c6d76531b7bda926..b5f0392901b2e5527e59e8ec30fd2cc837a0f3ca 100644 (file)
--- a/template/base/jsconfig.json
+++ b/template/base/jsconfig.json
@@ -1,6 +1,9 @@
 {
   "compilerOptions": {
     "paths": {
+      // TODO: no longer needed after TS 5.4
+      "#src/*": ["./src/*"],
+      // Deprecated, use `#src` instead (configured in `package.json` `imports` field)
       "@/*": ["./src/*"]
     }
   },

diff --git a/template/base/package.json b/template/base/package.json
index 57c2b86ad421daa58aa91fd87b54ec872c73bd22..c05f39ba29e84f2e5df25a8708ae57d6fd5dd5af 100644 (file)
--- a/template/base/package.json
+++ b/template/base/package.json
@@ -1,6 +1,9 @@
 {
   "private": true,
   "type": "module",
+  "imports": {
+    "#src/": "./src/"
+  },
   "scripts": {
     "dev": "vite",
     "build": "vite build",

diff --git a/template/base/vite.config.js.ejs b/template/base/vite.config.js.ejs
index c3e65d219947edbd8388ec9fe25cea24f99c40fd..a04ed07329ba486f088e1681dd543e3efc1f3e54 100644 (file)
--- a/template/base/vite.config.js.ejs
+++ b/template/base/vite.config.js.ejs
@@ -14,6 +14,7 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
+      // Deprecated, use `#src` instead (configured in `package.json` `imports` field)
       '@': fileURLToPath(new URL('./src', import.meta.url))
     }
   }

diff --git a/template/code/router/src/App.vue b/template/code/router/src/App.vue
index e864195002371619c22d0454351235745b2a4f3f..719e4d99740a0284d39ecd2c8d4f0a776d3febd3 100644 (file)
--- a/template/code/router/src/App.vue
+++ b/template/code/router/src/App.vue
@@ -5,7 +5,7 @@ import HelloWorld from './components/HelloWorld.vue'
 
 <template>
   <header>
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
+    <img alt="Vue logo" class="logo" src="#src/assets/logo.svg" width="125" height="125" />
 
     <div class="wrapper">
       <HelloWorld msg="You did it!" />

diff --git a/template/code/typescript-router/src/App.vue b/template/code/typescript-router/src/App.vue
index 7905b05167cb53db655f3938ea2adb68ca72e9fb..fe29657d4c03ff6dc55e20d9cf29691f79d59423 100644 (file)
--- a/template/code/typescript-router/src/App.vue
+++ b/template/code/typescript-router/src/App.vue
@@ -5,7 +5,7 @@ import HelloWorld from './components/HelloWorld.vue'
 
 <template>
   <header>
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
+    <img alt="Vue logo" class="logo" src="#src/assets/logo.svg" width="125" height="125" />
 
     <div class="wrapper">
       <HelloWorld msg="You did it!" />

diff --git a/template/config/cypress-ct/cypress/support/component.js b/template/config/cypress-ct/cypress/support/component.js
index 7283cad6de351c3afb7304f9750eff81d99f8098..9aeff11070e07bc4f41f2fb27c22fa39b2a2e1f0 100644 (file)
--- a/template/config/cypress-ct/cypress/support/component.js
+++ b/template/config/cypress-ct/cypress/support/component.js
@@ -20,7 +20,7 @@ import './commands'
 // require('./commands')
 
 // Import global styles
-import '@/assets/main.css'
+import '#src/assets/main.css'
 
 import { mount } from 'cypress/vue'
 

diff --git a/template/config/cypress-ct/cypress/support/component.ts b/template/config/cypress-ct/cypress/support/component.ts
index 04e4c352b8c5115ee57961d93d6c4a950da15c5c..b2a0063d48c8aeee9039f38ab55dedec990d40ad 100644 (file)
--- a/template/config/cypress-ct/cypress/support/component.ts
+++ b/template/config/cypress-ct/cypress/support/component.ts
@@ -20,7 +20,7 @@ import './commands'
 // require('./commands')
 
 // Import global styles
-import '@/assets/main.css'
+import '#src/assets/main.css'
 
 import { mount } from 'cypress/vue'
 

diff --git a/template/tsconfig/base/tsconfig.app.json b/template/tsconfig/base/tsconfig.app.json
index e14c754d3ae5775d2ab13001e251c1371be912de..59419d6de2374df71373042a7ee0271dae8f88c4 100644 (file)
--- a/template/tsconfig/base/tsconfig.app.json
+++ b/template/tsconfig/base/tsconfig.app.json
@@ -8,6 +8,9 @@
 
     "baseUrl": ".",
     "paths": {
+      // TODO: no longer needed after TS 5.4
+      "#src/*": ["./src/*"],
+      // Deprecated, use `#src` instead (configured in `package.json` `imports` field)
       "@/*": ["./src/*"]
     }
   }

diff --git a/template/tsconfig/nightwatch-ct/tsconfig.app.json b/template/tsconfig/nightwatch-ct/tsconfig.app.json
index e14c754d3ae5775d2ab13001e251c1371be912de..59419d6de2374df71373042a7ee0271dae8f88c4 100644 (file)
--- a/template/tsconfig/nightwatch-ct/tsconfig.app.json
+++ b/template/tsconfig/nightwatch-ct/tsconfig.app.json
@@ -8,6 +8,9 @@
 
     "baseUrl": ".",
     "paths": {
+      // TODO: no longer needed after TS 5.4
+      "#src/*": ["./src/*"],
+      // Deprecated, use `#src` instead (configured in `package.json` `imports` field)
       "@/*": ["./src/*"]
     }
   }