fix: Force html & svg tags to always be treated as string tags

Author: nickmessing

Diff for: packages/babel-plugin-transform-vue-jsx/package.json

@@ -37,7 +37,9 @@
     "@babel/helper-module-imports": "^7.0.0-rc.3",
     "@babel/plugin-syntax-jsx": "^7.0.0-rc.3",
     "@vue/babel-helper-vue-jsx-merge-props": "^0.1.0",
-    "lodash.kebabcase": "^4.1.1"
+    "html-tags": "^2.0.0",
+    "lodash.kebabcase": "^4.1.1",
+    "svg-tags": "^1.0.0"
   },
   "peerDependencies": {
     "@vue/babel-helper-vue-jsx-merge-props": "^0.1.0"

Diff for: packages/babel-plugin-transform-vue-jsx/src/index.js

@@ -1,6 +1,8 @@
 import syntaxJsx from '@babel/plugin-syntax-jsx'
 import { addDefault } from '@babel/helper-module-imports'
 import kebabcase from 'lodash.kebabcase'
+import htmlTags from 'html-tags'
+import svgTags from 'svg-tags'
 
 const xlinkRE = /^xlink([A-Z])/
 const rootAttributes = ['class', 'style', 'key', 'ref', 'refInFor', 'slot', 'scopedSlots', 'model']
@@ -40,7 +42,7 @@ const getTag = (t, path) => {
   const namePath = path.get('name')
   if (t.isJSXIdentifier(namePath)) {
     const name = namePath.get('name').node
-    if (path.scope.hasBinding(name)) {
+    if (path.scope.hasBinding(name) && !htmlTags.includes(name) && !svgTags.includes(name)) {
       return t.identifier(name)
     } else {
       return t.stringLiteral(name)

Diff for: packages/babel-plugin-transform-vue-jsx/test/snapshot.js

@@ -24,6 +24,12 @@ const tests = [
     from: `render(h => <div>test</div>)`,
     to: `render(h => h("div", ["test"]));`,
   },
+  {
+    name: 'HTML tag if variable in scope',
+    from: `const div = {}; render(h => <div>test</div>)`,
+    to: `const div = {};
+render(h => h("div", ["test"]));`,
+  },
   {
     name: 'Tag & Component',
     from: `const Alpha = {}; render(h => [<Alpha>test</Alpha>, <Beta>test</Beta>])`,

Diff for: packages/babel-plugin-transform-vue-jsx/yarn.lock

@@ -2572,6 +2572,11 @@ html-encoding-sniffer@^1.0.2:
   dependencies:
     whatwg-encoding "^1.0.1"
 
+html-tags@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b"
+  integrity sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=
+
 http-signature@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
@@ -4591,6 +4596,11 @@ supports-color@^5.0.0, supports-color@^5.3.0:
   dependencies:
     has-flag "^3.0.0"
 
+svg-tags@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
+  integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
+
 symbol-observable@^0.2.2:
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-0.2.4.tgz#95a83db26186d6af7e7a18dbd9760a2f86d08f40"