vitejs · patak-dev · Apr 29, 2021 · Apr 21, 2021 · Apr 22, 2021 · Apr 26, 2021
diff --git a/packages/playground/backend-integration/__tests__/backend-integration.spec.ts b/packages/playground/backend-integration/__tests__/backend-integration.spec.ts
@@ -0,0 +1,28 @@
+import { isBuild, readManifest } from '../../testUtils'
+
+const outerAssetMatch = isBuild
+  ? /\/dev\/assets\/logo\.\w{8}\.png/
+  : /\/dev\/@fs\/.+?\/images\/logo\.png/
+
+test('should have no 404s', () => {
+  browserLogs.forEach((msg) => {
+    expect(msg).not.toMatch('404')
+  })
+})
+
+describe('asset imports from js', () => {
+  test('file outside root', async () => {
+    expect(
+      await page.textContent('.asset-reference.outside-root .asset-url')
+    ).toMatch(outerAssetMatch)
+  })
+})
+
+if (isBuild) {
+  test('manifest', async () => {
+    const manifest = readManifest('dev')
+    const htmlEntry = manifest['index.html']
+    expect(htmlEntry.css.length).toEqual(1)
+    expect(htmlEntry.assets.length).toEqual(1)
+  })
+}
diff --git a/packages/playground/backend-integration/frontend/entrypoints/global.css b/packages/playground/backend-integration/frontend/entrypoints/global.css
@@ -0,0 +1,28 @@
+@import '~/styles/background.css';
+@import '../../references.css';
+
+html, body {
+  font-family: sans-serif;
+  line-height: 2.4rem;
+}
+
+body {
+  margin: 4vh auto;
+  max-width: 800px;
+  padding: 0 4vw;
+}
+
+ul {
+  padding: 0 .4em;
+  margin: 0;
+}
+
+li {
+  display: flex;
+  align-items: center;
+}
+
+img {
+  height: 32px;
+  width: 32px;
+}
diff --git a/packages/playground/backend-integration/frontend/entrypoints/index.html b/packages/playground/backend-integration/frontend/entrypoints/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+
+<link rel="stylesheet" href="/global.css" />
+
+<h1>Backend Integration</h1>
+
+<p>
+  This test configures the <code>root</code> to simulate a Laravel/Rails setup.
+</p>
+
+<h2>JS Asset References</h2>
+
+<ul>
+  <li class="asset-reference outside-root">Asset Outside Root</li>
+</ul>
+
+<h2>CSS Asset References</h2>
+
+<ul>
+  <li>
+    Background URL with Alias:
+    <div class="background-asset outside-root--aliased"></div>
+  </li>
+  <li>
+    Background URL with Relative Path:
+    <div class="background-asset outside-root--relative"></div>
+  </li>
+</ul>
+
+<script type="module">
+  import './global.css'
+
+  // Importing a file outside the `root` should provide an @fs path.
+  import outsideRootUrl from '~/images/logo.png'
+  setAssetReference('.outside-root', outsideRootUrl)
+
+  // Helper: Allows to test the URL content as well as the request being served.
+  function setAssetReference(elSelector, url) {
+    const text = document.createElement('code')
+    text.classList.add('asset-url')
+    text.textContent = url
+
+    const img = document.createElement('img')
+    img.classList.add('asset-preview')
+    img.src = url
+
+    const el = document.querySelector(`.asset-reference${elSelector}`)
+    el.appendChild(img)
+    el.appendChild(text)
+  }
+</script>
diff --git a/packages/playground/backend-integration/frontend/images/logo.png b/packages/playground/backend-integration/frontend/images/logo.png
diff --git a/packages/playground/backend-integration/frontend/styles/background.css b/packages/playground/backend-integration/frontend/styles/background.css
@@ -0,0 +1,15 @@
+.background-asset {
+  background-repeat: no-repeat;
+  background-size: 100%;
+  display: inline-block;
+  height: 32px;
+  width: 32px;
+}
+
+.outside-root--aliased {
+  background-image: url('~/images/logo.png');
+}
+
+.outside-root--relative {
+  background-image: url('../images/logo.png');
+}
diff --git a/packages/playground/backend-integration/package.json b/packages/playground/backend-integration/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "test-backend-integration",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
+  }
+}
diff --git a/packages/playground/backend-integration/references.css b/packages/playground/backend-integration/references.css
@@ -0,0 +1,11 @@
+.asset-reference {
+  display: grid;
+  grid-template-areas:
+    "summary preview ."
+    "url url url";
+}
+
+.asset-url {
+  grid-area: url;
+  white-space: nowrap;
+}
diff --git a/packages/playground/backend-integration/vite.config.js b/packages/playground/backend-integration/vite.config.js
@@ -0,0 +1,45 @@
+const path = require('path')
+const glob = require('fast-glob')
+
+/**
+ * @returns {import('vite').Plugin}
+ */
+function BackendIntegrationExample() {
+  return {
+    name: 'backend-integration',
+    config() {
+      const projectRoot = __dirname
+      const sourceCodeDir = path.join(projectRoot, 'frontend')
+      const root = path.join(sourceCodeDir, 'entrypoints')
+      const outDir = path.relative(root, path.join(projectRoot, 'dist/dev'))
+
+      const entrypoints = glob
+        .sync(`${root}/**/*`, { onlyFiles: true })
+        .map((filename) => [path.relative(root, filename), filename])
+
+      return {
+        build: {
+          manifest: true,
+          outDir,
+          rollupOptions: {
+            input: Object.fromEntries(entrypoints)
+          }
+        },
+        root,
+        resolve: {
+          alias: {
+            '~': sourceCodeDir
+          }
+        }
+      }
+    }
+  }
+}
+
+/**
+ * @returns {import('vite').UserConfig}
+ */
+module.exports = {
+  base: '/dev/',
+  plugins: [BackendIntegrationExample()]
+}