feat: use stateful component

- so that it works with lazy-loaded component in SSR
- less code since we no longer need to inherit attributes for functional component

closes #15

index.js

@@ -1,61 +1,9 @@
 const path = require('path')
 const posthtml = require('posthtml')
 
-const REGISTER_STYLE_COMPONENT = path.join(
-  __dirname,
-  './lib/registerStyleComponent.js'
-)
+const STYLE_COMPONENT = path.join(__dirname, './lib/StyleComponent.js')
 
 const plugin = state => tree => {
-  tree.match({ tag: 'svg' }, node => {
-    const attrs = {}
-
-    node.attrs = node.attrs || {}
-    for (const name of Object.keys(node.attrs)) {
-      // Don't add unnecessary attrs
-      if (
-        name !== 'version' &&
-        name !== 'xmlns' &&
-        !name.startsWith('xmlns:')
-      ) {
-        attrs[name] = node.attrs[name]
-      }
-      delete node.attrs[name]
-    }
-
-    // Adding v-bind
-    const existingClass = attrs.class
-    const existingStyle = attrs.style
-    delete attrs.class
-    delete attrs.style
-
-    // Bind all attrs on the component
-    node.attrs['v-bind'] = 'data.attrs'
-
-    // Merge exiting class with the class prop on the component
-    node.attrs['v-bind:class'] = `[${JSON.stringify(
-      existingClass
-    )}, data.staticClass, data.class]`
-
-    // Merge exiting style with the style prop on the component
-    node.attrs['v-bind:style'] = `[${JSON.stringify(
-      existingStyle
-    )}, data.style]`
-
-    for (const key of Object.keys(attrs)) {
-      node.attrs[`v-bind:${key}`] = `!data.attrs || data.attrs[${JSON.stringify(
-        key
-      )}] === undefined ? ${JSON.stringify(
-        attrs[key]
-      )} : data.attrs[${JSON.stringify(key)}]`
-    }
-
-    // Adding v-on
-    node.attrs['v-on'] = 'data.on'
-
-    return node
-  })
-
   // SVGO will inline styles, so if you don't turn off relevant plugin
   // the tree will never match `style` nodes because they don't exist
   tree.match({ tag: 'style' }, node => {
@@ -71,13 +19,17 @@ const plugin = state => tree => {
 }
 
 const createComponent = (svg, state) => {
-  let result = `<template functional>${svg}</template>`
+  let result = `<template>${svg}</template>`
 
   if (state.hasStyleTag) {
     result += `
     <script>
-    import ${JSON.stringify(REGISTER_STYLE_COMPONENT)}
-    export default {}
+    import Component ${JSON.stringify(STYLE_COMPONENT)}
+    export default {
+      components: {
+        'svg2vue-style': Component
+      }
+    }
     </script>
     `
   }
@@ -88,7 +40,10 @@ const createComponent = (svg, state) => {
 module.exports = (input, { sync } = {}) => {
   const state = {}
 
-  const stream = posthtml([plugin(state)]).process(input, { sync })
+  const stream = posthtml([plugin(state)]).process(input, {
+    sync,
+    recognizeSelfClosing: true
+  })
 
   if (stream.then) {
     return stream.then(res => ({

lib/StyleComponent.js

@@ -0,0 +1,7 @@
+export default {
+  name: 'svg2vue-style',
+  functional: true,
+  render(h, ctx) {
+    return h('style', ctx.data, ctx.children)
+  }
+}

package.json

@@ -40,7 +40,7 @@
     "eslint-plugin-prettier": "^3.0.1",
     "husky": "^1.3.1",
     "lint-staged": "^8.1.0",
-    "poi": "^12.0.0-beta.6",
+    "poi": "^12.4.3",
     "prettier": "^1.15.3",
     "semantic-release": "^15.13.3",
     "vue": "^2.5.17",
@@ -53,7 +53,7 @@
       "plugin:prettier/recommended"
     ],
     "rules": {
-      "unicorn/filename": "off"
+      "unicorn/filename-case": "off"
     },
     "ignores": [
       "lib/registerStyleComponent.js"

test/index.test.js

@@ -36,6 +36,6 @@ test('replace style tag', t => {
     sync: true
   })
 
-  t.true(sfc.component.includes('/lib/registerStyleComponent.js'))
+  t.true(sfc.component.includes('/lib/StyleComponent.js'))
   t.true(sfc.component.includes('<svg2vue-style>'))
 })

test/snapshots/index.test.js.md

@@ -9,9 +9,9 @@ Generated by [AVA](https://ava.li).
 > Snapshot 1
 
     {
-      component: `<template functional>␊
+      component: `<template>␊
        ␊
-      <svg v-bind="data.attrs" v-bind:class="[undefined, data.staticClass, data.class]" v-bind:style="[undefined, data.style]" v-bind:width="!data.attrs || data.attrs[&quot;width&quot;] === undefined ? &quot;48px&quot; : data.attrs[&quot;width&quot;]" v-bind:height="!data.attrs || data.attrs[&quot;height&quot;] === undefined ? &quot;1px&quot; : data.attrs[&quot;height&quot;]" v-bind:viewBox="!data.attrs || data.attrs[&quot;viewBox&quot;] === undefined ? &quot;0 0 48 1&quot; : data.attrs[&quot;viewBox&quot;]" v-on="data.on">␊
+      <svg width="48px" height="1px" viewBox="0 0 48 1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">␊
           <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->␊
           <title>Rectangle 5 可以</title>␊
           <desc>Created with Sketch.</desc>␊

test/snapshots/loader.test.js.md

@@ -8,4 +8,4 @@ Generated by [AVA](https://ava.li).
 
 > Snapshot 1
 
-    '<template functional><svg v-bind="data.attrs" v-bind:class="[undefined, data.staticClass, data.class]" v-bind:style="[undefined, data.style]" v-bind:id="!data.attrs || data.attrs[&quot;id&quot;] === undefined ? &quot;foo_svg__foo&quot; : data.attrs[&quot;id&quot;]" v-bind:width="!data.attrs || data.attrs[&quot;width&quot;] === undefined ? &quot;48&quot; : data.attrs[&quot;width&quot;]" v-bind:height="!data.attrs || data.attrs[&quot;height&quot;] === undefined ? &quot;1&quot; : data.attrs[&quot;height&quot;]" v-bind:viewBox="!data.attrs || data.attrs[&quot;viewBox&quot;] === undefined ? &quot;0 0 48 1&quot; : data.attrs[&quot;viewBox&quot;]" v-on="data.on"><g id="foo_svg__Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="foo_svg__19-Separator" transform="translate(-129 -156)" fill="#063855"><g id="foo_svg__Controls/Settings" transform="translate(80)"><g id="foo_svg__Content" transform="translate(0 64)"><g id="foo_svg__Group" transform="translate(24 56)"><g id="foo_svg__Group-2"><path id="foo_svg__Rectangle-5" d="M25 36h48v1H25z"></path></g></g></g></g></g></g></svg></template>'
+    '<template><svg id="foo_svg__foo" width="48" height="1" viewBox="0 0 48 1" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="foo_svg__Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="foo_svg__19-Separator" transform="translate(-129 -156)" fill="#063855"><g id="foo_svg__Controls/Settings" transform="translate(80)"><g id="foo_svg__Content" transform="translate(0 64)"><g id="foo_svg__Group" transform="translate(24 56)"><g id="foo_svg__Group-2"><path id="foo_svg__Rectangle-5" d="M25 36h48v1H25z"></path></g></g></g></g></g></g></svg></template>'

yarn.lock

@@ -851,25 +851,30 @@
     universal-user-agent "^2.0.0"
     url-template "^2.0.8"
 
-"@poi/dev-utils@^12.0.0-beta.0":
-  version "12.0.0-beta.0"
-  resolved "https://registry.npmjs.org/@poi/dev-utils/-/dev-utils-12.0.0-beta.0.tgz#4b3809dca53949c25e9cb4d978ee1ba7f671dfd2"
-  integrity sha512-Btq7hyLEmfgEUT6G1AumiP2Nbp/X1KrjXeYES0LAVPzaztXRPETkaGsVvIOlBC+2mcwJbJGfjaXO8zcyx45ocA==
+"@poi/dev-utils@^12.1.0":
+  version "12.1.0"
+  resolved "https://registry.npmjs.org/@poi/dev-utils/-/dev-utils-12.1.0.tgz#646b159a75a1d74bac5cb784a3e75b8b755dd67c"
+  integrity sha512-y3fGQXA1UJMa00/MoU6s7pqkrsRg16mb5px4bI678S5u2Wy5d4H+JLlCuJL+Zg6ktLE5ikeXXC/iUWcnmZdBdQ==
   dependencies:
-    chalk "^2.4.1"
+    address "^1.0.3"
     cross-spawn "^6.0.5"
     opn "^5.4.0"
     react-error-overlay "^4.0.1"
     sockjs-client "^1.1.5"
-    strip-ansi "^4.0.0"
+    strip-ansi "3.0.0"
 
-"@poi/logger@^12.0.0-beta.0":
-  version "12.0.0-beta.0"
-  resolved "https://registry.npmjs.org/@poi/logger/-/logger-12.0.0-beta.0.tgz#ea27fc8878e534f977bcd3709daf0e98a8e5189b"
-  integrity sha512-2HNe8oAh9SfOY9gxsvUlEAneBa0+MPesESi3F1tmnGQl/oyFMijqQ2WfR5xFEZNlg8tJR0j5AFkNwv94PUP5IA==
+"@poi/logger@^12.0.0":
+  version "12.0.0"
+  resolved "https://registry.npmjs.org/@poi/logger/-/logger-12.0.0.tgz#c2bf31ad0b22e3b76d46ed288e89dd156d3e8b0f"
+  integrity sha512-G2wQoJgBf64EKQ6gooHoFFCB5T4upW9Q0dndluD93bGRKyAsbkvVu70ahww9EMMUPwP1XTCVsUFyCGI+zTAM6w==
   dependencies:
     chalk "^2.4.1"
 
+"@poi/pnp-webpack-plugin@^0.0.2":
+  version "0.0.2"
+  resolved "https://registry.npmjs.org/@poi/pnp-webpack-plugin/-/pnp-webpack-plugin-0.0.2.tgz#4633d4445637a2ed3b3da7f831ea7ee38587e6d7"
+  integrity sha512-5yqBjV6yZzrJBYVG6ASAbhRhAQMjEu1nYDPJFbpPDcfNxEvsO+QwIxFq3ABQwH0iq59nI62v8VtxEc/z+jDFOg==
+
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.0"
   resolved "https://registry.npmjs.org/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"
@@ -1794,6 +1799,11 @@ babel-messages@^6.23.0:
   dependencies:
     babel-runtime "^6.22.0"
 
+babel-plugin-assets-named-imports@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmjs.org/babel-plugin-assets-named-imports/-/babel-plugin-assets-named-imports-0.2.0.tgz#c71222cd0f3843155c42384c82126091a1024b21"
+  integrity sha512-aSWR/oN6AcO5tCqd+cm53EbkA25tEpdCr8dvoAOnG2ia7mhWW8l13IgfETucxk1/ksfX8fp0/aUmnoGJxgIakA==
+
 babel-plugin-check-es2015-constants@^6.8.0:
   version "6.22.0"
   resolved "https://registry.npmjs.org/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz#35157b101426fd2ffd3da3f75c7d1e91835bbf8a"
@@ -2304,10 +2314,10 @@ bytes@3.0.0:
   resolved "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
   integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=
 
-cac@^6.3.6:
-  version "6.3.9"
-  resolved "https://registry.npmjs.org/cac/-/cac-6.3.9.tgz#0cdf3f2d3a7d3fb71ab89c476c73e472084859a2"
-  integrity sha512-vWuINsAe+HYqdp/adfi03pP/A0wCmbg9WmHKNBywwUTuHoFhctEGbGp/x4ecQemihUEqvWq1FB9sna7gLF3KCw==
+cac@^6.3.12:
+  version "6.4.0"
+  resolved "https://registry.npmjs.org/cac/-/cac-6.4.0.tgz#cf23dff1ac1492ec7401f7a64de66a705b2f2bf5"
+  integrity sha512-Pvz61H9E+SyAklec5AgTQfLQJGmayaLSJM01WotbUGvjVz/F9EhZYKB78Dcu8aBoNEgjIQ+12+O5ikOzueIY6g==
 
 cacache@^10.0.4:
   version "10.0.4"
@@ -6567,10 +6577,10 @@ joycon@^2.1.2:
   resolved "https://registry.yarnpkg.com/joycon/-/joycon-2.1.2.tgz#565739af7d07b844834c799c1630a9ffab75044e"
   integrity sha512-nJlP8JLfIgArXcipjcqEk49nv91FFEsC+yK9fAGF5vAGKEnFrmFpcSwUK7Yu6qBY1ri1Ae7M6XWAZugFQmQBaQ==
 
-joycon@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.npmjs.org/joycon/-/joycon-2.2.0.tgz#b600876a4dd62866ac47e803de8cce004b0bf660"
-  integrity sha512-lOVASpOJ9jWNqSW/Ecsyn0Xxj5gCYSBfc1rpB8XWGGWWNnnm6dR6s4xGYDsZYeyffLHYvcF06/5cQSYJ84007Q==
+joycon@^2.2.1:
+  version "2.2.3"
+  resolved "https://registry.npmjs.org/joycon/-/joycon-2.2.3.tgz#eeb1169850710c39ab60d8d4a00e50b0b61be581"
+  integrity sha512-4gHuFIQJPickKKT4sQ0B3IyQJ1uwIATwMPXWXiq/+NAUWSzhRotwV3bNocahOsqpzI6cTZErLtCvKzZFthZ6eQ==
 
 js-levenshtein@^1.1.3:
   version "1.1.4"
@@ -8878,10 +8888,10 @@ pluralize@^1.2.1:
   resolved "https://registry.npmjs.org/pluralize/-/pluralize-1.2.1.tgz#d1a21483fd22bb41e58a12fa3421823140897c45"
   integrity sha1-0aIUg/0iu0HlihL6NCGCMUCJfEU=
 
-poi@^12.0.0-beta.6:
-  version "12.0.0-beta.6"
-  resolved "https://registry.npmjs.org/poi/-/poi-12.0.0-beta.6.tgz#c3ff409a42a5e503f41bc97501b729bc77a71772"
-  integrity sha512-WU+aWNJYr0g5DAPlNm/4mXs6HEUbRPYDUlEASHge1oTme0Mx6DvRQgUI6iRMZ5VLenuaXn8dyvwY9Q1B6oi0TA==
+poi@^12.4.3:
+  version "12.4.3"
+  resolved "https://registry.npmjs.org/poi/-/poi-12.4.3.tgz#8c27018c934abe031956831c948392a0acb2c463"
+  integrity sha512-NOpOYepmRrrjpmewM8m+aDnzXWpG2ActL8KeGv9zU4Ix2evWspdjYQIbDHArIv9PLnKQx7TIkKxnUiXWx2NhPg==
   dependencies:
     "@babel/core" "^7.1.6"
     "@babel/plugin-proposal-class-properties" "^7.1.0"
@@ -8895,14 +8905,15 @@ poi@^12.0.0-beta.6:
     "@babel/preset-typescript" "^7.1.0"
     "@babel/runtime" "^7.1.5"
     "@intervolga/optimize-cssnano-plugin" "^1.0.6"
-    "@poi/dev-utils" "^12.0.0-beta.0"
-    "@poi/logger" "^12.0.0-beta.0"
-    address "^1.0.3"
+    "@poi/dev-utils" "^12.1.0"
+    "@poi/logger" "^12.0.0"
+    "@poi/pnp-webpack-plugin" "^0.0.2"
     babel-helper-vue-jsx-merge-props "^2.0.3"
     babel-loader "^8.0.4"
+    babel-plugin-assets-named-imports "^0.2.0"
     babel-plugin-macros "^2.4.2"
     babel-plugin-transform-vue-jsx "^4.0.0"
-    cac "^6.3.6"
+    cac "^6.3.12"
     cache-loader "^1.2.5"
     case-sensitive-paths-webpack-plugin "^2.1.2"
     chalk "^2.4.1"
@@ -8916,7 +8927,7 @@ poi@^12.0.0-beta.6:
     get-port "^4.0.0"
     gzip-size "^5.0.0"
     html-webpack-plugin "^4.0.0-beta.4"
-    joycon "^2.2.0"
+    joycon "^2.2.1"
     launch-editor-middleware "^2.2.1"
     lodash.merge "^4.6.1"
     mini-css-extract-plugin "^0.4.5"
@@ -8935,6 +8946,7 @@ poi@^12.0.0-beta.6:
     webpack "^4.26.0"
     webpack-chain "^5.0.1"
     webpack-dev-server "^3.1.10"
+    webpack-merge "^4.1.4"
 
 portfinder@^1.0.9:
   version "1.0.20"
@@ -10990,6 +11002,13 @@ stringify-package@^1.0.0:
   resolved "https://registry.npmjs.org/stringify-package/-/stringify-package-1.0.0.tgz#e02828089333d7d45cd8c287c30aa9a13375081b"
   integrity sha512-JIQqiWmLiEozOC0b0BtxZ/AOUtdUZHCBPgqIZ2kSJJqGwgb9neo44XdTHUC4HZSGqi03hOeB7W/E8rAlKnGe9g==
 
+strip-ansi@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.0.tgz#7510b665567ca914ccb5d7e072763ac968be3724"
+  integrity sha1-dRC2ZVZ8qRTMtdfgcnY6yWi+NyQ=
+  dependencies:
+    ansi-regex "^2.0.0"
+
 strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   version "3.0.1"
   resolved "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
@@ -11930,6 +11949,13 @@ webpack-log@^2.0.0:
     ansi-colors "^3.0.0"
     uuid "^3.3.2"
 
+webpack-merge@^4.1.4:
+  version "4.2.1"
+  resolved "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.2.1.tgz#5e923cf802ea2ace4fd5af1d3247368a633489b4"
+  integrity sha512-4p8WQyS98bUJcCvFMbdGZyZmsKuWjWVnVHnAS3FFg0HDaRVrPbkivx2RYCre8UiemD67RsiFFLfn4JhLAin8Vw==
+  dependencies:
+    lodash "^4.17.5"
+
 webpack-sources@^1.1.0, webpack-sources@^1.3.0:
   version "1.3.0"
   resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.3.0.tgz#2a28dcb9f1f45fe960d8f1493252b5ee6530fa85"