feat(build): components field support PascalCase (#143)

Author: allen-zh

packages/mars-build/src/compiler/script/babel-plugin-script-post.js

@@ -5,6 +5,8 @@
 
 /* eslint-disable fecs-camelcase */
 /* eslint-disable babel/new-cap */
+const {hyphenate} = require('../../helper/util');
+
 module.exports = function getVisitor(options = {}) {
     return ({types: t}) => {
         const {
@@ -33,6 +35,7 @@ module.exports = function getVisitor(options = {}) {
                                 : path.node.key.type === 'StringLiteral'
                                     ? path.node.key.value
                                     : null;
+                            componentName = hyphenate(componentName);
                             if (componentName && !componentsInUsed[componentName].using) {
                                 path.remove();
                             }

packages/mars-build/src/compiler/script/babel-plugin-script.js

@@ -5,6 +5,8 @@
 
 /* eslint-disable fecs-camelcase */
 /* eslint-disable babel/new-cap */
+const {hyphenate} = require('../../helper/util');
+
 function getPlainObjectNodeValue(node, path, t) {
     let result;
     if (t.isObjectExpression(node)) {
@@ -90,7 +92,9 @@ const getPropertyVisitor = (t, options) => {
                                 throw path.buildCodeFrameError(`cannot find binding for component "${p.value.name}"`);
                             }
 
-                            const keyName = t.isLiteral(p.key) ? p.key.value : p.key.name;
+                            let keyName = t.isLiteral(p.key) ? p.key.value : p.key.name;
+                            keyName = hyphenate(keyName);
+
                             const bindPath = binding.path;
                             const bindParentNode = bindPath.parent;
                             const bindNode = bindPath.node;

packages/mars-build/src/h5/transform/plugins/transformScriptPlugin.js

@@ -6,7 +6,6 @@
 /* eslint-disable fecs-camelcase */
 
 /* eslint-disable babel/new-cap */
-
 // 小程序page生命周期
 const PAGE_LIFECYCLE_HOOKS = {
     onLoad: true,
@@ -128,6 +127,7 @@ function getPlainObjectNodeValue(node, path, t) {
     return result;
 }
 
+const {hyphenate} = require('../../../helper/util');
 /* eslint-disable */
 const Property = (t, options) => {
     return {
@@ -166,13 +166,16 @@ const Property = (t, options) => {
                     let props = JSON.parse(JSON.stringify(path.node.value.properties));
                     props.forEach(p => {
                         if (t.isIdentifier(p.value)) {
+                            let keyName = t.isLiteral(p.key) ? p.key.value : p.key.name;
+                            keyName = hyphenate(keyName);
+                            p.key = t.stringLiteral(keyName);
+
                             const bindPath = path.scope.bindings[p.value.name].path;
                             const bindParentNode = bindPath.parent;
                             const bindVaule = bindParentNode.source;
                             bindParentNode.source = t.stringLiteral(bindVaule.value + '.vue');
                             p.value = bindParentNode.source;
                         }
-
                     });
 
                     path.node.value.properties.push();

packages/mars-build/src/helper/util.js

@@ -0,0 +1,44 @@
+/**
+ * @file util
+ * @author zhangwentao
+ */
+
+/**
+ * Create a cached version of a pure function.
+ */
+
+function cached(fn) {
+    const cache = Object.create(null);
+    return function cachedFn(str) {
+        const hit = cache[str];
+        return hit || (cache[str] = fn(str));
+    };
+}
+
+/**
+ * Camelize a hyphen-delimited string.
+ */
+
+const camelizeRE = /-(\w)/g;
+const camelize = cached(str => {
+    return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '');
+});
+
+/**
+ * Capitalize a string.
+ */
+const capitalize = cached(str => {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+});
+
+/**
+ * Hyphenate a camelCase string.
+ */
+const hyphenateRE = /\B([A-Z])/g;
+const hyphenate = cached(str => {
+    return str.replace(hyphenateRE, '-$1').toLowerCase();
+});
+
+exports.camelize = camelize;
+exports.capitalize = capitalize;
+exports.hyphenate = hyphenate;

packages/mars-build/src/swan/transform/transform.js

@@ -47,7 +47,6 @@ function transAttrs(node, options) {
                 attrs[key] = val;
             }
         }
-
     });
 
     if (null !== showAttr) {