refactor: cleanup playground file layout + fix aliased relative import

playground/App.vue

@@ -29,25 +29,25 @@
 <script>
 import { defineAsyncComponent } from 'vue'
 import TestEnv from './TestEnv.vue'
-import TestModuleResolve from './TestModuleResolve.vue'
-import TestHmr from './TestHmr/TestHmr.vue'
-import TestPostCss from './TestPostCss.vue'
-import TestScopedCss from './TestScopedCss.vue'
-import TestCssModules from './TestCssModules.vue'
+import TestHmr from './hmr/TestHmr.vue'
+import TestPostCss from './css/TestPostCss.vue'
+import TestScopedCss from './css/TestScopedCss.vue'
+import TestCssModules from './css/TestCssModules.vue'
 import TestPreprocessors from './TestPreprocessors.vue'
 import TestSrcImport from './src-import/TestBlockSrcImport.vue'
 import TestAssets from './test-assets/TestAssets.vue'
-import TestJsonImport from './TestJsonImport.vue'
+import TestJsonImport from './json/TestJsonImport.vue'
 import TestTs from './ts/TestTs.vue'
-import TestJsx from './TestJsx.vue'
-import TestAlias from './TestAlias.vue'
-import TestTransform from './TestTransform.vue'
-import TestRewriteOptimized from './rewrite-optimized/TestRewriteOptimized.vue'
+import TestJsx from './jsx/TestJsx.vue'
+import TestAlias from './alias/TestAlias.vue'
+import TestTransform from './transform/TestTransform.vue'
 import TestCssAtImport from './css-@import/TestCssAtImport.vue'
 import TestCustomBlocks from './custom-blocks/TestCustomBlocks.vue'
 import TestOptimizeLink from './optimize-linked/TestOptimizeLink.vue'
-import TestRewriteUnoptimized from './rewrite-unoptimized/TestRewriteUnoptimized.vue'
-import TestNormalizePublicPath from './TestNormalizePublicPath.vue'
+import TestModuleResolve from './resolve/TestModuleResolve.vue'
+import TestNormalizePublicPath from './resolve/TestNormalizePublicPath.vue'
+import TestRewriteUnoptimized from './resolve/rewrite-unoptimized/TestRewriteUnoptimized.vue'
+import TestRewriteOptimized from './resolve/rewrite-optimized/TestRewriteOptimized.vue'
 import TestDynamicImport from './dynamic-import/TestDynamicImport.vue'
 import TestWebWorker from './worker/TestWorker.vue'
 

playground/main.js

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import './testHmrManual'
+import './hmr/testHmrManual'
 
 createApp(App).mount('#app')

playground/package.json

@@ -10,9 +10,9 @@
     "moment": "link:../node_modules/moment",
     "@babel/runtime": "link:../node_modules/@babel/runtime",
     "normalize.css": "link:../node_modules/normalize.css",
-    "resolve-browser-field-test-package": "link:./resolve-browser-field",
-    "rewrite-optimized-test-package": "link:./rewrite-optimized/test-package",
     "optimize-linked": "link:./optimize-linked",
-    "rewrite-unoptimized-test-package": "link:./rewrite-unoptimized/test-package"
+    "resolve-browser-field-test-package": "link:./resolve/browser-field",
+    "rewrite-optimized-test-package": "link:./resolve/rewrite-optimized/test-package",
+    "rewrite-unoptimized-test-package": "link:./resolve/rewrite-unoptimized/test-package"
   }
 }

playground/test-assets/TestAssets.vue

@@ -8,7 +8,7 @@
   </p>
   <p>
     Relative asset reference in template:
-    <img src="../testAssets.png" style="width: 30px;" />
+    <img src="./nested/testAssets.png" style="width: 30px;" />
   </p>
   <p>
     Absolute asset reference in template:
@@ -27,7 +27,7 @@
 
 <script>
 import './testAssets.css'
-import filepath from '../testAssets.png'
+import filepath from './nested/testAssets.png'
 
 export default {
   data() {

playground/test-assets/testAssets.css

@@ -1,4 +1,4 @@
 .css-import-bg {
-  background: url(../testAssets.png);
+  background: url(./nested/testAssets.png);
   background-size: 10px;
 }

playground/vite.config.ts

@@ -4,8 +4,8 @@ import { i18nTransform } from './custom-blocks/i18nTransform'
 
 const config: UserConfig = {
   alias: {
-    alias: '/aliased',
-    '/@alias/': require('path').resolve(__dirname, 'aliased-dir')
+    alias: '/alias/aliased',
+    '/@alias/': require('path').resolve(__dirname, 'alias/aliased-dir')
   },
   jsx: 'preact',
   minify: false,

playground/yarn.lock

@@ -35,14 +35,14 @@ regenerator-runtime@^0.13.4:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697"
   integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==
 
-"resolve-browser-field-test-package@link:./resolve-browser-field":
+"resolve-browser-field-test-package@link:./resolve/browser-field":
   version "0.0.0"
   uid ""
 
-"rewrite-optimized-test-package@link:./rewrite-optimized/test-package":
+"rewrite-optimized-test-package@link:./resolve/rewrite-optimized/test-package":
   version "0.0.0"
   uid ""
 
-"rewrite-unoptimized-test-package@link:./rewrite-unoptimized/test-package":
+"rewrite-unoptimized-test-package@link:./resolve/rewrite-unoptimized/test-package":
   version "0.0.0"
   uid ""

src/node/resolver.ts

@@ -143,7 +143,7 @@ export function createResolver(
             }
           },
           fileToRequest(filePath) {
-            if (filePath.startsWith(target)) {
+            if (filePath.startsWith(target + path.delimiter)) {
               return slash(key + path.relative(target, filePath))
             }
           }
@@ -289,28 +289,29 @@ export function createResolver(
       }
     },
 
-    resolveRelativeRequest(publicPath: string, relativePublicPath: string) {
-      let dirname = path.dirname(publicPath)
-      const filePath = resolver.requestToFile(publicPath)
+    resolveRelativeRequest(importer: string, importee: string) {
+      let resolved = path.posix.resolve(path.posix.dirname(importer), importee)
+
       for (const alias in literalDirAlias) {
-        if (publicPath.startsWith(alias)) {
-          const relativeFilePath = path.relative(
-            filePath,
-            literalDirAlias[alias]
-          )
-          if (!relativeFilePath.startsWith('..')) {
-            dirname = '/' + slash(relativeFilePath)
+        if (importer.startsWith(alias)) {
+          if (!resolved.startsWith(alias)) {
+            // resolved path is outside of alias directory, we need to use
+            // its full path instead
+            const importerFilePath = resolver.requestToFile(importer)
+            const importeeFilePath = path.resolve(
+              path.dirname(importerFilePath),
+              importee
+            )
+            resolved = resolver.fileToRequest(importeeFilePath)
           }
           break
         }
       }
 
-      const resolved = slash(path.posix.resolve(dirname, relativePublicPath))
-      const queryMatch = relativePublicPath.match(queryRE)
+      const queryMatch = importee.match(queryRE)
       return {
         // path resovle strips ending / which should be preserved
-        pathname:
-          cleanUrl(resolved) + (relativePublicPath.endsWith('/') ? '/' : ''),
+        pathname: cleanUrl(resolved) + (importee.endsWith('/') ? '/' : ''),
         query: queryMatch ? queryMatch[0] : ''
       }
     }

test/test.js

@@ -126,7 +126,7 @@ describe('vite', () => {
         await button.click()
         expect(await getText(button)).toMatch('>>> 1 <<<')
 
-        await updateFile('TestHmr/TestHmr.vue', (content) =>
+        await updateFile('hmr/TestHmr.vue', (content) =>
           content.replace('{{ count }}', 'count is {{ count }}')
         )
         // note: using the same button to ensure the component did only re-render
@@ -135,7 +135,7 @@ describe('vite', () => {
       })
 
       test('hmr (vue reload)', async () => {
-        await updateFile('TestHmr/TestHmr.vue', (content) =>
+        await updateFile('hmr/TestHmr.vue', (content) =>
           content.replace('count: 0,', 'count: 1337,')
         )
         await expectByPolling(() => getText('.hmr-increment'), 'count is 1337')
@@ -144,7 +144,7 @@ describe('vite', () => {
       test('hmr (js -> vue propagation)', async () => {
         const span = await page.$('.hmr-propagation')
         expect(await getText(span)).toBe('1')
-        await updateFile('TestHmr/testHmrPropagation.js', (content) =>
+        await updateFile('hmr/testHmrPropagation.js', (content) =>
           content.replace('return 1', 'return 666')
         )
         await expectByPolling(() => getText('.hmr-propagation'), '666')
@@ -159,9 +159,8 @@ describe('vite', () => {
         expect(await getText(span)).toBe('bar loading')
         await expectByPolling(() => getText(span), 'bar loaded')
         // update souce code
-        await updateFile(
-          'TestHmr/testHmrPropagationDynamicImport.js',
-          (content) => content.replace('bar loaded', 'bar updated')
+        await updateFile('hmr/testHmrPropagationDynamicImport.js', (content) =>
+          content.replace('bar loaded', 'bar updated')
         )
         // the update trigger the reload of TestHmr component
         // all states in it are lost
@@ -186,7 +185,7 @@ describe('vite', () => {
         await expectByPolling(() => getText(span), 'baz loaded')
         // update souce code
         await updateFile(
-          'TestHmr/testHmrPropagationFullDynamicImport.js',
+          'hmr/testHmrPropagationFullDynamicImport.js',
           (content) => content.replace('baz loaded', 'baz updated')
         )
         // the update doesn't trigger hmr
@@ -227,7 +226,7 @@ describe('vite', () => {
         await expectByPolling(() => getText(span), 'qux loaded')
         // update souce code
         await updateFile(
-          'TestHmr/testHmrPropagationFullDynamicImportSelfAccepting.js',
+          'hmr/testHmrPropagationFullDynamicImportSelfAccepting.js',
           (content) => content.replace('qux loaded', 'qux updated')
         )
         // the update is accepted by the imported file
@@ -241,12 +240,12 @@ describe('vite', () => {
       })
 
       test('hmr (manual API, self accepting)', async () => {
-        await updateFile('testHmrManual.js', (content) =>
+        await updateFile('hmr/testHmrManual.js', (content) =>
           content.replace('foo = 1', 'foo = 2')
         )
         await expectByPolling(
           () => browserLogs[browserLogs.length - 1],
-          'js module hot updated:  /testHmrManual.js'
+          'js module hot updated:  /hmr/testHmrManual.js'
         )
         expect(
           browserLogs.slice(browserLogs.length - 4, browserLogs.length - 1)
@@ -259,12 +258,12 @@ describe('vite', () => {
 
       test('hmr (manual API, accepting deps)', async () => {
         browserLogs.length = 0
-        await updateFile('testHmrManualDep.js', (content) =>
+        await updateFile('hmr/testHmrManualDep.js', (content) =>
           content.replace('foo = 1', 'foo = 2')
         )
         await expectByPolling(
           () => browserLogs[browserLogs.length - 1],
-          'js module hot updated:  /testHmrManual.js'
+          'js module hot updated:  /hmr/testHmrManual.js'
         )
         expect(
           browserLogs.slice(browserLogs.length - 8, browserLogs.length - 1)
@@ -288,7 +287,7 @@ describe('vite', () => {
       expect(await getComputedColor(el)).toBe('rgb(255, 0, 0)')
       // hmr
       if (!isBuild) {
-        await updateFile('testPostCss.css', (content) =>
+        await updateFile('css/testPostCss.css', (content) =>
           content.replace('red', 'green')
         )
         await expectByPolling(() => getComputedColor(el), 'rgb(0, 128, 0)')
@@ -300,7 +299,7 @@ describe('vite', () => {
       expect(await getComputedColor(el)).toBe('rgb(0, 128, 0)')
       // hmr
       if (!isBuild) {
-        await updateFile('TestPostCss.vue', (content) =>
+        await updateFile('css/TestPostCss.vue', (content) =>
           content.replace('color: green;', 'color: red;')
         )
         await expectByPolling(() => getComputedColor(el), 'rgb(255, 0, 0)')
@@ -311,7 +310,7 @@ describe('vite', () => {
       const el = await page.$('.style-scoped')
       expect(await getComputedColor(el)).toBe('rgb(138, 43, 226)')
       if (!isBuild) {
-        await updateFile('TestScopedCss.vue', (content) =>
+        await updateFile('css/TestScopedCss.vue', (content) =>
           content.replace('rgb(138, 43, 226)', 'rgb(0, 0, 0)')
         )
         await expectByPolling(() => getComputedColor(el), 'rgb(0, 0, 0)')
@@ -322,7 +321,7 @@ describe('vite', () => {
       const el = await page.$('.css-modules-sfc')
       expect(await getComputedColor(el)).toBe('rgb(0, 0, 255)')
       if (!isBuild) {
-        await updateFile('TestCssModules.vue', (content) =>
+        await updateFile('css/TestCssModules.vue', (content) =>
           content.replace('color: blue;', 'color: rgb(0, 0, 0);')
         )
         // css module results in component reload so must use fresh selector
@@ -386,7 +385,7 @@ describe('vite', () => {
       const el = await page.$('.css-modules-import')
       expect(await getComputedColor(el)).toBe('rgb(255, 140, 0)')
       if (!isBuild) {
-        await updateFile('testCssModules.module.css', (content) =>
+        await updateFile('css/testCssModules.module.css', (content) =>
           content.replace('rgb(255, 140, 0)', 'rgb(0, 0, 1)')
         )
         // css module results in component reload so must use fresh selector
@@ -438,7 +437,7 @@ describe('vite', () => {
     test('json', async () => {
       expect(await getText('.json')).toMatch('this is json')
       if (!isBuild) {
-        await updateFile('testJsonImport.json', (c) =>
+        await updateFile('json/testJsonImport.json', (c) =>
           c.replace('this is json', 'with hmr')
         )
         await expectByPolling(() => getText('.json'), 'with hmr')
@@ -467,7 +466,7 @@ describe('vite', () => {
       expect(text).toMatch('from Preact TSX')
       expect(text).toMatch('count is 1337')
       if (!isBuild) {
-        await updateFile('testJsx.jsx', (c) => c.replace('1337', '2046'))
+        await updateFile('jsx/testJsx.jsx', (c) => c.replace('1337', '2046'))
         await expectByPolling(() => getText('.jsx-root'), '2046')
       }
     })
@@ -482,28 +481,28 @@ describe('vite', () => {
         'directory aliased internal import outside works'
       )
       if (!isBuild) {
-        await updateFile('aliased/index.js', (c) =>
+        await updateFile('alias/aliased/index.js', (c) =>
           c.replace('works', 'hmr works')
         )
         await expectByPolling(() => getText('.alias'), 'alias hmr works')
 
-        await updateFile('aliased-dir/named.js', (c) =>
+        await updateFile('alias/aliased-dir/named.js', (c) =>
           c.replace('works', 'hmr works')
         )
         await expectByPolling(
           () => getText('.dir-alias'),
           'directory alias hmr works'
         )
 
-        await updateFile('aliased-dir/index.js', (c) =>
+        await updateFile('alias/aliased-dir/index.js', (c) =>
           c.replace('works', 'hmr works')
         )
         await expectByPolling(
           () => getText('.dir-alias-index'),
           'directory alias index hmr works'
         )
 
-        await updateFile('aliased-dir-import.js', (c) =>
+        await updateFile('alias/aliased-dir-import.js', (c) =>
           c.replace('works', 'hmr works')
         )
         await expectByPolling(
@@ -518,11 +517,13 @@ describe('vite', () => {
       expect(await getComputedColor(el)).toBe('rgb(0, 255, 255)')
       expect(await getText('.transform-js')).toBe('2')
       if (!isBuild) {
-        await updateFile('testTransform.scss', (c) =>
+        await updateFile('transform/testTransform.scss', (c) =>
           c.replace('cyan', 'rgb(0, 0, 0)')
         )
         await expectByPolling(() => getComputedColor(el), 'rgb(0, 0, 0)')
-        await updateFile('testTransform.js', (c) => c.replace('= 1', '= 2'))
+        await updateFile('transform/testTransform.js', (c) =>
+          c.replace('= 1', '= 2')
+        )
         await expectByPolling(() => getText('.transform-js'), '3')
       }
     })
@@ -726,7 +727,7 @@ describe('vite', () => {
       expect(await getText('.json')).toMatch('with hmr')
 
       // ensure import graph is still working
-      await updateFile('testJsonImport.json', (c) =>
+      await updateFile('json/testJsonImport.json', (c) =>
         c.replace('with hmr', 'with sw reload')
       )
       await expectByPolling(() => getText('.json'), 'with sw reload')