Merge pull request #27 from vuejs/feat/component-in-scope

Treat string as component if declared in scope

Author: nickmessing

packages/babel-plugin-transform-vue-jsx/package.json

@@ -38,7 +38,9 @@
     "@babel/helper-module-imports": "^7.0.0",
     "@babel/plugin-syntax-jsx": "^7.2.0",
     "@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"

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 = ['staticClass', '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 (name[0] > 'A' && name[0] < 'Z') {
+    if (path.scope.hasBinding(name) && !htmlTags.includes(name) && !svgTags.includes(name)) {
       return t.identifier(name)
     } else {
       return t.stringLiteral(name)

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

@@ -25,9 +25,16 @@ const tests = [
     to: `render(h => h("div", ["test"]));`,
   },
   {
-    name: 'Uppercase component',
-    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>])`,
+    to: `const Alpha = {};
+render(h => [h(Alpha, ["test"]), h("Beta", ["test"])]);`,
   },
   {
     name: 'MemberExpression component',

packages/babel-plugin-transform-vue-jsx/yarn.lock

@@ -2922,6 +2922,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"
@@ -5249,6 +5254,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"