From 5b0dc9b92203daaac5c12792c4813283665134ff Mon Sep 17 00:00:00 2001
From: Damian Stasik <visualfanatic@users.noreply.github.com>
Date: Sun, 14 Jun 2020 20:22:57 +0200
Subject: [PATCH] Change the way of importing SVGs as Vue components

Previously to use SVG file as a component you would need to add `?component` to the path of the imported SVG file. That caused a lot of issues for both build process and tests, as neither Rollup nor Jest supports query string in the file path.
---
 README.md | 10 +++++-----
 index.js  | 46 ++++++++++++++++++++++++++++++----------------
 2 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/README.md b/README.md
index e7ca5d0..ec93899 100644
--- a/README.md
+++ b/README.md
@@ -13,19 +13,19 @@ Vite is currently in an experimental state which means this plugin will change a
 
 #### Currently supported Vite version:
 
-<p><code>0.20.4</code></p>
+<p><code>0.20.8</code></p>
 
 ### Install
 
 ```bash
-yarn add --dev vite-plugin-svg @vue/compiler-dom
+yarn add --dev vite-plugin-svg
 
-npm i -D vite-plugin-svg @vue/compiler-dom
+npm i -D vite-plugin-svg
 ```
 
 ### Usage
 
-To use SVG file as a Vue component you need to append `?component` query string to the path of your file.
+Starting from `v0.4.0` to use SVG file as a component, just import `VueComponent` from the path of the file.
 This gives you more control over how a particular SVG file should be loaded and processed:
 
 ```js
@@ -48,7 +48,7 @@ img.src = myIconUrl;
   </div>
 </template>
 <script>
-import MyIcon from './svgs/my-icon.svg?component'; // Note the `?component` part
+import { VueComponent as MyIcon } from './svgs/my-icon.svg';
 
 export default {
   components: {
diff --git a/index.js b/index.js
index 909cf54..fa3266b 100644
--- a/index.js
+++ b/index.js
@@ -1,20 +1,24 @@
-const { compile } = require('@vue/compiler-dom');
+const { compileTemplate } = require('@vue/compiler-sfc');
+const { join } = require('path');
+const { readFileSync } = require('fs');
 const SVGO = require('svgo');
 
-async function compileSvg(code, path, isBuild) {
-  const { code: compiledCode } = compile(code, {
-    mode: 'module',
-    runtimeModuleName: isBuild ? undefined : '/@modules/vue',
+async function compileSvg(source, path, isBuild) {
+  let { code } = compileTemplate({
+    source,
+    transformAssetUrls: false,
   });
 
-  return `
-${compiledCode.replace('export ', '')}
+  code = code.replace('export function render', 'function render');
+  code += '\nconst VueComponent = { render };';
 
-export default {
-  render,
-  __hmrId: ${JSON.stringify(path)}
-}
-`;
+  if (!isBuild) {
+    code += `\nVueComponent.__hmrId = ${JSON.stringify(path)};`;
+  }
+
+  code += `\nexport { VueComponent };`;
+
+  return code;
 }
 
 async function optimizeSvg(svgo, content, path) {
@@ -33,21 +37,31 @@ module.exports = (options = {}) => {
   return {
     transforms: [
       {
-        test: (path, query) => path.endsWith('.svg') && query.component != null,
-        transform: async (code, isImport, isBuild, path) => {
+        test: (path, query) => {
+          const isSVG = path.endsWith('.svg');
+
+          return process.env.NODE_ENV === 'production'
+            ? isSVG
+            : isSVG && query.import != null;
+        },
+        transform: async (transformedCode, _, isBuild, path) => {
           let result = cache.get(path);
 
           if (!result) {
+            const code = readFileSync(
+              isBuild ? path : join(process.cwd(), path),
+            );
+
             const svg = await optimizeSvg(svgo, code, path);
 
             result = await compileSvg(svg, path, isBuild);
 
             if (isBuild) {
-              cache.set(id, result);
+              cache.set(path, result);
             }
           }
 
-          return result;
+          return `${transformedCode}\n${result}`;
         },
       },
     ],