feat: initial implementation of markup preprocessor that wraps svg (#1)

* feat: initial implementation of markup preprocessor that wraps svg content with @html * fix: override vulnerable ansi-regex version * chore: update esbuild min version * feat: implement strict parser and options, add some docs * test: add tests and fix skip * test: fix expected result after reformat of fixtures * test: include node17, only build main package * fix: remove .npmrc with engine-strict to allow use of vite-plugin-svelte in playground * chore: update package.json before first release * docs: update main readme
svitejs · Nov 2, 2021 · 0001073 · 0001073
1 parent 1f5dceb
commit 0001073
Show file tree

Hide file tree

Showing 26 changed files with 639 additions and 42 deletions.
diff --git a/.changeset/smart-roses-allow.md b/.changeset/smart-roses-allow.md
@@ -0,0 +1,5 @@
+---
+'@svitejs/svelte-preprocess-svg': minor
+---
+
+Initial implementation
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -87,6 +87,17 @@ module.exports = {
 				node: true,
 				browser: false
 			}
+		},
+		{
+			files: ['packages/e2e-tests/**', 'packages/playground/**'],
+			rules: {
+				'node/no-extraneous-import': 'off',
+				'node/no-extraneous-require': 'off',
+				'no-unused-vars': 'off'
+			},
+			env: {
+				browser: true
+			}
 		}
 	]
 };
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -1,4 +1,4 @@
-# build and test on linux, windows, mac with node 12, 14, 16
+# build and test on linux, windows, mac with node 12, 14, 16, 17
 name: CI
 
 on:
@@ -46,7 +46,7 @@ jobs:
         if: (${{ success() }} || ${{ failure() }})
         run: pnpm audit
 
-  # this is the test matrix, it runs with node14 on linux,windows,macos + node12,16 on linux
+  # this is the test matrix, it runs with node14 on linux,windows,macos + node12,16,17 on linux
   # it is skipped if the build step of the checks job wasn't successful (still runs if lint or audit fail)
   test:
     needs: checks
@@ -63,6 +63,8 @@ jobs:
             os: ubuntu-latest
           - node: 16
             os: ubuntu-latest
+          - node: 17
+            os: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2

diff --git a/.npmrc b/.npmrc
diff --git a/README.md b/README.md
@@ -3,25 +3,15 @@
 [![npm version](https://img.shields.io/npm/v/@svitejs/svelte-preprocess-svg)](https://www.npmjs.com/package/@svitejs/svelte-preprocess-svg)
 [![CI](https://github.com/svitejs/svelte-preprocess-svg/actions/workflows/ci.yml/badge.svg)](https://github.com/svitejs/svelte-preprocess-svg/actions/workflows/ci.yml)
 
-PROJECT TAGLINE HERE
+Optimize inline svg in svelte components
 
-## Installation
+## Features
 
-```bash
-npm install --save-dev @svitejs/svelte-preprocess-svg
-```
-
-## Usage
-
-```js
-// show em how it's done
-```
+- wrap content of `<svg>` in `@html` directive so that the svelte compiler treats it as string instead of generating an extra function call for each childnode.
 
 ## Documentation
 
-- some
-- doc
-- links
+[see here](packages/svelte-preprocess-svg/README.md)
 
 ## Packages
 

diff --git a/package.json b/package.json
@@ -4,8 +4,8 @@
   "license": "MIT",
   "scripts": {
     "dev": "pnpm --dir packages/svelte-preprocess-svg dev",
-    "build": "pnpm -r build",
-    "test": "pnpm -r test --workspace-concurrency=1",
+    "build": "pnpm --dir packages/svelte-preprocess-svg build",
+    "test": "pnpm --dir packages/svelte-preprocess-svg test",
     "lint": "eslint --ignore-path .gitignore '**/*.{js,ts,svelte,html,svx,md}'",
     "lint:fix": "pnpm run lint -- --fix",
     "format": "prettier --ignore-path .gitignore '**/*.{css,scss,svelte,html,js,ts,svx,md}' --check",
@@ -56,7 +56,8 @@
   "pnpm": {
     "overrides": {
       "@svitejs/svelte-preprocess-svg": "workspace:*",
-      "esbuild": "^0.13.4"
+      "esbuild": "^0.13.12",
+      "ansi-regex@>2.1.1 <5.0.1": ">=5.0.1"
     }
   }
 }
diff --git a/packages/playground/inline-svg/README.md b/packages/playground/inline-svg/README.md
@@ -0,0 +1,3 @@
+# inline-svg
+
+just a simple playground with an inline svg for quick prototyping
diff --git a/packages/playground/inline-svg/index.html b/packages/playground/inline-svg/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" href="/favicon.ico" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Svelte + Vite App</title>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/main.js"></script>
+	</body>
+</html>
diff --git a/packages/playground/inline-svg/jsconfig.json b/packages/playground/inline-svg/jsconfig.json
@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "target": "esnext",
+    "module": "esnext",
+    /**
+     * svelte-preprocess cannot figure out whether you have
+     * a value or a type, so tell TypeScript to enforce using
+     * `import type` instead of `import` for Types.
+     */
+    "importsNotUsedAsValues": "error",
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    /**
+     * To have warnings / errors of the Svelte compiler at the
+     * correct position, enable source maps by default.
+     */
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable this if you'd like to use dynamic types.
+     */
+    "checkJs": true
+  },
+  /**
+   * Use global.d.ts instead of compilerOptions.types
+   * to avoid limiting type declarations.
+   */
+  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}
diff --git a/packages/playground/inline-svg/package.json b/packages/playground/inline-svg/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "inline-svg",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
+    "@svitejs/svelte-preprocess-svg": "workspace:*",
+    "svelte": "^3.44.0",
+    "vite": "^2.6.13"
+  }
+}
diff --git a/packages/playground/inline-svg/public/favicon.ico b/packages/playground/inline-svg/public/favicon.ico
diff --git a/packages/playground/inline-svg/src/App.svelte b/packages/playground/inline-svg/src/App.svelte
@@ -0,0 +1,33 @@
+<script context="module">
+	console.log('foo');
+</script>
+
+<script>
+	const str = '<svg>not really an svg</svg>';
+</script>
+
+<div>
+	<h1>Svelte inline svg</h1>
+	<svg
+		enable-background="new 0 0 98.1 118"
+		viewBox="0 0 98.1 118"
+		xmlns="http://www.w3.org/2000/svg"
+		class="logo"
+	>
+		<path
+			d="m91.8 15.6c-10.9-15.7-32.6-20.3-48.2-10.4l-27.5 17.6c-7.5 4.7-12.7 12.4-14.2 21.1-1.3 7.3-.2 14.8 3.3 21.3-2.4 3.6-4 7.6-4.7 11.8-1.6 8.9.5 18.1 5.7 25.4 11 15.7 32.6 20.3 48.2 10.4l27.5-17.5c7.5-4.7 12.7-12.4 14.2-21.1 1.3-7.3.2-14.8-3.3-21.3 2.4-3.6 4-7.6 4.7-11.8 1.7-9-.4-18.2-5.7-25.5"
+			fill="#ff3e00"
+		/>
+		<path
+			d="m40.9 103.9c-8.9 2.3-18.2-1.2-23.4-8.7-3.2-4.4-4.4-9.9-3.5-15.3.2-.9.4-1.7.6-2.6l.5-1.6 1.4 1c3.3 2.4 6.9 4.2 10.8 5.4l1 .3-.1 1c-.1 1.4.3 2.9 1.1 4.1 1.6 2.3 4.4 3.4 7.1 2.7.6-.2 1.2-.4 1.7-.7l27.4-17.5c1.4-.9 2.3-2.2 2.6-3.8s-.1-3.3-1-4.6c-1.6-2.3-4.4-3.3-7.1-2.6-.6.2-1.2.4-1.7.7l-10.5 6.7c-1.7 1.1-3.6 1.9-5.6 2.4-8.9 2.3-18.2-1.2-23.4-8.7-3.1-4.4-4.4-9.9-3.4-15.3.9-5.2 4.1-9.9 8.6-12.7l27.5-17.5c1.7-1.1 3.6-1.9 5.6-2.5 8.9-2.3 18.2 1.2 23.4 8.7 3.2 4.4 4.4 9.9 3.5 15.3-.2.9-.4 1.7-.7 2.6l-.5 1.6-1.4-1c-3.3-2.4-6.9-4.2-10.8-5.4l-1-.3.1-1c.1-1.4-.3-2.9-1.1-4.1-1.6-2.3-4.4-3.3-7.1-2.6-.6.2-1.2.4-1.7.7l-27.4 17.5c-1.4.9-2.3 2.2-2.6 3.8s.1 3.3 1 4.6c1.6 2.3 4.4 3.3 7.1 2.6.6-.2 1.2-.4 1.7-.7l10.5-6.7c1.7-1.1 3.6-1.9 5.6-2.5 8.9-2.3 18.2 1.2 23.4 8.7 3.2 4.4 4.4 9.9 3.5 15.3-.9 5.2-4.1 9.9-8.6 12.7l-27.5 17.5c-1.7 1.1-3.6 1.9-5.6 2.5"
+			fill="#fff"
+		/>
+	</svg>
+</div>
+
+<style>
+	.logo {
+		width: 100px;
+		height: 100px;
+	}
+</style>
diff --git a/packages/playground/inline-svg/src/main.js b/packages/playground/inline-svg/src/main.js
@@ -0,0 +1,7 @@
+import App from './App.svelte';
+
+const app = new App({
+	target: document.getElementById('app')
+});
+
+export default app;
diff --git a/packages/playground/inline-svg/src/vite-env.d.ts b/packages/playground/inline-svg/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
diff --git a/packages/playground/inline-svg/svelte.config.js b/packages/playground/inline-svg/svelte.config.js
@@ -0,0 +1,4 @@
+import { sveltePreprocessSvg } from '@svitejs/svelte-preprocess-svg';
+export default {
+	preprocess: [sveltePreprocessSvg()]
+};
diff --git a/packages/playground/inline-svg/vite.config.js b/packages/playground/inline-svg/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [svelte()]
+});
diff --git a/packages/svelte-preprocess-svg/README.md b/packages/svelte-preprocess-svg/README.md
@@ -1,24 +1,66 @@
-# @svitejs/project-template
+# @svitejs/svelte-preprocess-svg
 
-PROJECT TAGLINE HERE
+Optimize inline svg in svelte components
 
 ## Installation
 
 ```bash
-npm install --save-dev @svitejs/project-template
+npm install --save-dev @svitejs/svelte-preprocess-svg
 ```
 
 ## Usage
 
+svelte.config.js
+
 ```js
-// show em how it's done
+import { sveltePreprocessSvg } from '@svitejs/svelte-preprocess-svg';
+//...
+export default {
+	//...
+	preprocess: [
+		//...
+		// sveltePreprocessSvg must be used AFTER other markup preprocessors like mdsvex
+		sveltePreprocessSvg({
+			/* options */
+		})
+	]
+	//...
+};
 ```
 
 ## Documentation
 
-- some
-- doc
-- links
+### options
+
+```ts
+interface SveltePreprocessSvgOptions {
+	/**
+	 * Filter function to only include some files
+	 *
+	 * @param filename
+	 * @param content
+	 * @return boolean true to include the file
+	 */
+	// eslint-disable-next-line no-unused-vars
+	include?: (filename: string, content?: string) => boolean;
+
+	/**
+	 * Filter function to exclude some files
+	 *
+	 * @param filename
+	 * @param content
+	 * @return boolean true to exclude the file
+	 */
+	// eslint-disable-next-line no-unused-vars
+	exclude?: (filename: string, content?: string) => boolean;
+
+	/**
+	 * Set to true to use a simple string search instead of svelte.parse.
+	 * This is faster but not fault tolerant. misaligned html comments or svg inside string literals will trip it up
+	 */
+	useSimpleStringParser?: boolean;
+}
+```
 
 ## License
 

diff --git a/packages/svelte-preprocess-svg/package.json b/packages/svelte-preprocess-svg/package.json
@@ -1,9 +1,8 @@
 {
   "name": "@svitejs/svelte-preprocess-svg",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "license": "MIT",
   "author": "dominikg",
-  "private": true,
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -18,7 +17,7 @@
   "scripts": {
     "dev": "tsup-node --watch src",
     "build": "tsup-node --dts",
-    "test": "tsm node_modules/uvu/bin.js tests"
+    "test": "tsm node_modules/uvu/bin.js tests -i fixtures"
   },
   "engines": {
     "node": "^12.20 || ^14.13.1 || >= 16"
@@ -32,7 +31,13 @@
     "url": "https://github.com/svitejs/svelte-preprocess-svg/issues"
   },
   "homepage": "https://github.com/svitejs/svelte-preprocess-svg#readme",
+  "keywords": ["svelte","svelte-preprocess","svg"],
+  "peerDependencies": {
+    "svelte": "^3.44.1"
+  },
   "devDependencies": {
+    "magic-string": "^0.25.7",
+    "svelte": "^3.44.1",
     "uvu": "^0.5.2"
   }
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# inline-svg

		just a simple playground with an inline svg for quick prototyping
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/// <reference types="svelte" />
		/// <reference types="vite/client" />