diff --git a/README.md b/README.md index db19ede..eee1bf5 100644 --- a/README.md +++ b/README.md @@ -49,9 +49,14 @@ If the environment supports modules (Webpack / Rollup) you can enable "imports" Setting imports to `true` will result in imports from `'inferno'` module, or you may provide a string value to specify a different module form which to import. This setting can be applied the following way inside babelrc file +``` pragma ``` - string, replace the function used when compiling JSX expressions, defaults to createVNode. With defined pragma - global Inferno object will be disabled. + ```js { "presets": [ "es2015" ], - "plugins": [["inferno", {"imports": true}]] + "plugins": [["inferno", { + "imports": true, + "pragma": "" + }]] } ``` diff --git a/lib/index.js b/lib/index.js index 144a5aa..40d5833 100644 --- a/lib/index.js +++ b/lib/index.js @@ -71,9 +71,9 @@ function addCreateVNodeImportStatement(t, toInsert, opts) { if (opts.imports) { node.body.splice(index, 0, t.importDeclaration([ - t.ImportSpecifier(t.identifier('createVNode'), t.identifier('createVNode')) + t.ImportSpecifier(t.identifier('createVNode'), t.identifier(opts.pragma || 'createVNode')) ], t.stringLiteral(typeof opts.imports === 'string' ? opts.imports : 'inferno'))); - } else { + } else if (!opts.pragma) { node.body.splice(index, 0, t.VariableDeclaration('var', [ t.VariableDeclarator( t.Identifier('createVNode'), @@ -127,13 +127,13 @@ function getVNodeType(t, type) { }; } -function getVNodeChildren(t, astChildren) { +function getVNodeChildren(t, astChildren, opts) { var children = []; var parentCanBeKeyed = false; for (var i = 0; i < astChildren.length; i++) { var child = astChildren[ i ]; - var vNode = createVNode(t, child); + var vNode = createVNode(t, child, opts); if (!isNullOrUndefined(vNode)) { children.push(vNode); @@ -337,7 +337,7 @@ function createVNodeArgs(t, flags, type, className, children, props, key, ref, n return args; } -function createVNode(t, astNode) { +function createVNode(t, astNode, opts) { var astType = astNode.type; switch (astType) { @@ -345,7 +345,7 @@ function createVNode(t, astNode) { var openingElement = astNode.openingElement; var vType = getVNodeType(t, openingElement.name); var vProps = getVNodeProps(t, openingElement.attributes, vType.isComponent); - var childrenResults = getVNodeChildren(t, astNode.children); + var childrenResults = getVNodeChildren(t, astNode.children, opts); var vChildren = childrenResults.children; var flags = vType.flags; @@ -383,7 +383,7 @@ function createVNode(t, astNode) { vChildren = NULL; } return t.callExpression( - t.identifier('createVNode'), + t.identifier(opts.pragma || 'createVNode'), createVNodeArgs( t, flags, @@ -425,7 +425,7 @@ module.exports = function (options) { JSXElement: { enter: function (path, state) { var opts = state.opts; - var node = createVNode(t, path.node); + var node = createVNode(t, path.node, opts); path.replaceWith(node); if (!opts.hoistCreateVNode) { diff --git a/tests.js b/tests.js index 480e5c0..2f96103 100644 --- a/tests.js +++ b/tests.js @@ -59,6 +59,23 @@ describe('Array', function() { }); }); + describe('Pragma option', function () { + var babelSettingsPragma = { + presets: [['es2015', {modules: false}]], + plugins: [ + [plugin, {pragma: "t.some"}], + 'syntax-jsx' + ] + }; + function pluginTransformPragma(input) { + return babel.transform(input, babelSettingsPragma).code; + }; + + it('Should replace createVNode to pragma option value', function () { + expect(pluginTransformPragma('
')).to.equal('t.some(2, "div");'); + }); + }); + /** * In Inferno all SVG attributes are written as in DOM standard * however for compatibility reasons we want to support React like syntax