support .svg in svelte extensions (#78)

* feat: svg import * add changeset * chore: rename asset-import to custom-extensions * fix(custom-extensions): update vite config * chore(custom-extensions): rename spec file * fix(custom-extensions): add pnpm preview * more generic prevention of asset plugin interference for custom extensions Co-authored-by: dominikg <dominik.goepel@gmx.de>
sveltejs · Jul 6, 2021 · 2eb09cf · 2eb09cf
1 parent 5100376
commit 2eb09cf
Show file tree

Hide file tree

Showing 11 changed files with 150 additions and 25 deletions.
diff --git a/.changeset/clever-trains-drum.md b/.changeset/clever-trains-drum.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+Support svg extension
diff --git a/packages/e2e-tests/custom-extensions/__tests__/custom-extensions.spec.ts b/packages/e2e-tests/custom-extensions/__tests__/custom-extensions.spec.ts
@@ -0,0 +1,5 @@
+import { getText } from '../../testUtils';
+
+test('should render svg', async () => {
+	expect(await getText('#test-svg')).toBe('Foo bar=bar');
+});
diff --git a/packages/e2e-tests/custom-extensions/index.html b/packages/e2e-tests/custom-extensions/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width,initial-scale=1" />
+
+		<title>Svelte app</title>
+
+		<script type="module" src="/src/main.js"></script>
+	</head>
+
+	<body></body>
+</html>
diff --git a/packages/e2e-tests/custom-extensions/package.json b/packages/e2e-tests/custom-extensions/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "e2e-tests-custom-extensions",
+	"private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "workspace:*",
+    "svelte": "^3.38.3",
+    "svelte-hmr": "^0.14.4",
+    "vite": "^2.3.8"
+  }
+}
diff --git a/packages/e2e-tests/custom-extensions/src/App.svelte b/packages/e2e-tests/custom-extensions/src/App.svelte
@@ -0,0 +1,26 @@
+<script>
+	import TestSvg from './components/TestSvg.svg';
+</script>
+
+<main>
+	<p>
+		Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte
+		apps.
+	</p>
+	<TestSvg />
+</main>
+
+<style>
+	main {
+		text-align: center;
+		padding: 1em;
+		max-width: 240px;
+		margin: 0 auto;
+	}
+
+	@media (min-width: 640px) {
+		main {
+			max-width: none;
+		}
+	}
+</style>
diff --git a/packages/e2e-tests/custom-extensions/src/components/TestSvg.svg b/packages/e2e-tests/custom-extensions/src/components/TestSvg.svg
diff --git a/packages/e2e-tests/custom-extensions/src/main.js b/packages/e2e-tests/custom-extensions/src/main.js
@@ -0,0 +1,7 @@
+import App from './App.svelte';
+
+const app = new App({
+	target: document.body
+});
+
+export default app;
diff --git a/packages/e2e-tests/custom-extensions/vite.config.js b/packages/e2e-tests/custom-extensions/vite.config.js
@@ -0,0 +1,21 @@
+const { svelte } = require('@sveltejs/vite-plugin-svelte');
+const { defineConfig } = require('vite');
+
+module.exports = defineConfig(() => {
+	return {
+		plugins: [svelte({ extensions: ['.svelte', '.svg'] })],
+		build: {
+			// make build faster by skipping transforms and minification
+			target: 'esnext',
+			minify: false
+		},
+		server: {
+			watch: {
+				// During tests we edit the files too fast and sometimes chokidar
+				// misses change events, so enforce polling for consistency
+				usePolling: true,
+				interval: 100
+			}
+		}
+	};
+});
diff --git a/packages/vite-plugin-svelte/src/index.ts b/packages/vite-plugin-svelte/src/index.ts
@@ -1,4 +1,12 @@
-import { HmrContext, IndexHtmlTransformContext, ModuleNode, Plugin, UserConfig } from 'vite';
+import fs from 'fs';
+import {
+	HmrContext,
+	IndexHtmlTransformContext,
+	ModuleNode,
+	Plugin,
+	ResolvedConfig,
+	UserConfig
+} from 'vite';
 import { handleHotUpdate } from './handle-hot-update';
 import { log, logCompilerWarnings } from './utils/log';
 import { CompileData, createCompileSvelte } from './utils/compile';
@@ -35,6 +43,7 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin {
 	// updated in configResolved hook
 	let requestParser: IdParser;
 	let options: ResolvedOptions;
+	let viteConfig: ResolvedConfig;
 	/* eslint-disable no-unused-vars */
 	let compileSvelte: (
 		svelteRequest: SvelteRequest,
@@ -65,6 +74,7 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin {
 			addExtraPreprocessors(options, config);
 			requestParser = buildIdParser(options);
 			compileSvelte = createCompileSvelte(options);
+			viteConfig = config;
 			log.debug('resolved options', options);
 		},
 
@@ -76,22 +86,21 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin {
 
 		load(id, ssr) {
 			const svelteRequest = requestParser(id, !!ssr);
-			if (!svelteRequest) {
-				return;
-			}
-
-			log.debug('load', svelteRequest);
-			const { filename, query } = svelteRequest;
-
-			//
-			if (query.svelte) {
-				if (query.type === 'style') {
+			if (svelteRequest) {
+				const { filename, query } = svelteRequest;
+				// virtual css module
+				if (query.svelte && query.type === 'style') {
 					const css = cache.getCSS(svelteRequest);
 					if (css) {
 						log.debug(`load returns css for ${filename}`);
 						return css;
 					}
 				}
+				// prevent vite asset plugin from loading files as url that should be compiled in transform
+				if (!query.url && !query.raw && viteConfig.assetsInclude(filename)) {
+					log.debug(`load returns raw content for ${filename}`);
+					return fs.readFileSync(filename, 'utf-8');
+				}
 			}
 		},
 

diff --git a/packages/vite-plugin-svelte/src/utils/id.ts b/packages/vite-plugin-svelte/src/utils/id.ts
@@ -7,19 +7,24 @@ import * as fs from 'fs';
 
 const VITE_FS_PREFIX = '/@fs/';
 const IS_WINDOWS = process.platform === 'win32';
+
 export type SvelteQueryTypes = 'style' | 'script';
 
-export interface SvelteQuery {
+export interface RequestQuery {
+	// our own
 	svelte?: boolean;
 	type?: SvelteQueryTypes;
+	// vite specific
+	url?: boolean;
+	raw?: boolean;
 }
 
 export interface SvelteRequest {
 	id: string;
 	cssId: string;
 	filename: string;
 	normalizedFilename: string;
-	query: SvelteQuery;
+	query: RequestQuery;
 	timestamp: number;
 	ssr: boolean;
 }
@@ -39,9 +44,12 @@ function parseToSvelteRequest(
 	timestamp: number,
 	ssr: boolean
 ): SvelteRequest {
-	const query = qs.parse(rawQuery) as SvelteQuery;
-	if (query.svelte != null) {
-		query.svelte = true;
+	const query: RequestQuery = qs.parse(rawQuery) as RequestQuery;
+	for (const p of ['svelte', 'url', 'raw'] as Array<keyof RequestQuery>) {
+		if (query[p] != null) {
+			// @ts-ignore
+			query[p] = true;
+		}
 	}
 
 	const normalizedFilename = normalize(filename, root);

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml