Fix @ aliases on Windows (#14)

* Fix `@` aliases on Windows

* Add docs for `customResolver` usage

Author: skirtles-code

packages/create-vue-lib/src/template/playground/config/packages/playground/vite.config.mts.ejs

@@ -1,3 +1,6 @@
+<%_ if (config.includeAtAliases) { _%>
+import { relative, sep as pathSeparator } from 'node:path'
+<%_ } _%>
 import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig, type UserConfig } from 'vite'
@@ -28,10 +31,14 @@ export default defineConfig(({ mode }): UserConfig => ({
         find: '@',
         replacement: '@',
         customResolver(source, importer, options) {
-          const filePath = source.replace(
-            /^@\//,
-            importer?.startsWith(librarySrc) ? librarySrc : playgroundSrc
-          )
+          let target = playgroundSrc
+
+          // If the importer is inside librarySrc we resolve @ to that path
+          if (importer && relative(importer, librarySrc).split(pathSeparator).every(p => p === '..')) {
+            target = librarySrc
+          }
+
+          const filePath = source.replace(/^@\//, target)
 
           return this.resolve(filePath, importer, options)
         }

packages/create-vue-lib/src/template/vitepress/config/packages/docs/.vitepress/config.mts.ejs

@@ -1,3 +1,6 @@
+<%_ if (config.includeAtAliases) { _%>
+import { relative, sep as pathSeparator } from 'node:path'
+<%_ } _%>
 import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfigWithTheme } from 'vitepress'
@@ -50,10 +53,14 @@ export default ({ mode }: { mode: string }) => defineConfigWithTheme({
           find: '@',
           replacement: '@',
           customResolver(source, importer, options) {
-            const filePath = source.replace(
-              /^@\//,
-              importer?.startsWith(librarySrc) ? librarySrc : docsSrc
-            )
+            let target = docsSrc
+
+            // If the importer is inside librarySrc we resolve @ to that path
+            if (importer && relative(importer, librarySrc).split(pathSeparator).every(p => p === '..')) {
+              target = librarySrc
+            }
+
+            const filePath = source.replace(/^@\//, target)
 
             return this.resolve(filePath, importer, options)
           }

packages/docs/src/why.md

@@ -76,6 +76,8 @@ As we can't build all the output files we need in one go, we instead run Vite th
 
 In `rollupOptions` we configure `external: ['vue']`. This tells rollup to keep any imports from the `vue` package as imports, rather than pulling all the code into the built library. For output formats that don't support `import` it will be rewritten accordingly, e.g. using `require()` for CommonJS. For global (IIFE) builds, there is the extra setting `globals: { vue: 'Vue' }`, which tells rollup to rewrite imports like `import { ref } from 'vue'` as `const { ref } = Vue`, or code that's equivalent.
 
+For pages that use [`@` aliases for `src` paths](questions#configure-src-alias), a `customResolver` is needed in the playground and docs packages. These packages pull in the library source code directly, so they need to resolve an `@` within the library code differently from an `@` within their own code.
+
 ## `__DEV__` and `__TEST__`
 
 The project supports 'global variables' for `__DEV__` and `__TEST__`. The `__TEST__` variable isn't included by default and requires the `--extended` flag to opt in.