infernojs / babel-plugin-inferno Goto Github PK

Create test suite with Babel Plugin, We don't even need coverage for now. But we need tests to avoid regression bugs.

Simple mocha setup should be fine. When basis is there we can add different scenarios (spread objects. etc from history)

Hi,

In our project we use space as indentation which leads to an issue that HandleWhiteSpace function never removes the whitespace.

Steps to reproduce:

var stringWithWhitespaces = '\n             ';

function handleWhiteSpace(str) {
    str = str.replace(/\t/g, '');
    if(str.indexOf("\n") !== -1) {
        var remove = str.substring(0, str.indexOf("\n")).trim();
        if(remove === '') {
            str = str.substring(str.indexOf("\n") + 1);
        }
        str = handleWhiteSpace(str);
    }
    return str;
}

// call the function
handleWhiteSpace(stringWithWhitespaces)  // Expected result '', instead got '             ';

Sidenote: Should this function also handle Windows ('\r\n') and Mac ('\r') style of line endings?

Havunen

I have try to find some performance test against this plugin and inferno-hyperscript but haven't much lacky.

I read that only jsx/Babel can be optimized but I likes to find some compare text.

Hyperscript sulution Is much more slow then jsx/Babel?

Best regards,
Leonardo

your .babelrc file is missing a comma - interestingly babel didn't output a clear message.

{   
    "presets": [ "es2015", "stage-0" ]
    "plugins": ["babel-plugin-syntax-jsx", "babel-plugin-inferno"]
}

should be:

{   
    "presets": [ "es2015", "stage-0" ],
    "plugins": ["babel-plugin-syntax-jsx", "babel-plugin-inferno"]
}

note the comma after ["stage-0"]

Given the template:

<button dataMyData={myDataValue} ariaSelected="true"><{buttonText}</button>

The resulting html is:

<button datamydata="someValue" ariaselected="true"><Toggle</button>

Which is invalid.

The expected result should be:

<button data-my-data="someValue" aria-selected="true"><Toggle</button>

At the moment, the supported options for fragments are:

<>...</>
<Fragment>...</Fragment>
<Inferno.Fragment>...</Inferno.Fragment>

Projects currently using React would benefit from also supporting, <React.Fragment> to make the transition smoother, or being able to configure it, like <Anything.Fragment>.

I'm in a requireJS environment at work and can't use npm to install this plugin, but I'd like to use Inferno. Can this repo also host a minified dist file?

It doesn't seem possible for a component to be referenced as a property of another object. For example, parsing <obj.component /> throws the error "Cannot read property 'charAt' of undefined while parsing file". You can work around it, but the flexibility would be appreciated.

This may be related to #52.

This code snippet is missing in the compiled output when brunch watch detects a change in the code and recompiles it:

var createVNode = Inferno.createVNode,
    createComponentVNode = Inferno.createComponentVNode,
    createTextVNode = Inferno.createTextVNode;

Calling brunch build on the command line after each code change does not exhibit said behavior.

In the process of upgrading nwb to Babel 7 beta I've found a weird issue with using JSX in an app's entry module.

This is my entry module...

import './index.css'

import Inferno from 'inferno'

import App from './App'

Inferno.render(<App/>, document.querySelector('#app'))

if (module.hot) {
  module.hot.accept()
}

...which gives me the following error after upgrading to Babel 7.0.0-beta.37, using babel-plugin-inferno 3.3.1:

Module build failed: TypeError: Property arguments[1] of CallExpression expected node to be of a type ["Expression","SpreadElement","JSXNamespacedName"] but instead got "JSXIdentifier"
    at validate (C:\Users\Jonny\repos\nwb\node_modules\@babel\types\lib\definitions\utils.js:136:13)
    at validator (C:\Users\Jonny\repos\nwb\node_modules\@babel\types\lib\definitions\utils.js:95:7)
    at Object.validate (C:\Users\Jonny\repos\nwb\node_modules\@babel\types\lib\definitions\utils.js:191:10)
    at validate (C:\Users\Jonny\repos\nwb\node_modules\@babel\types\lib\validators\validate.js:15:9)
    at builder (C:\Users\Jonny\repos\nwb\node_modules\@babel\types\lib\builders\builder.js:40:27)
    at Object.CallExpression (C:\Users\Jonny\repos\nwb\node_modules\@babel\types\lib\builders\generated\index.js:276:27)
    at createVNode (C:\Users\Jonny\repos\nwb\node_modules\babel-plugin-inferno\lib\index.js:385:12)
    at PluginPass.enter (C:\Users\Jonny\repos\nwb\node_modules\babel-plugin-inferno\lib\index.js:428:17)
    at newFn (C:\Users\Jonny\repos\nwb\node_modules\@babel\traverse\lib\visitors.js:223:21)
    at NodePath._call (C:\Users\Jonny\repos\nwb\node_modules\@babel\traverse\lib\path\context.js:64:19)
    at NodePath.call (C:\Users\Jonny\repos\nwb\node_modules\@babel\traverse\lib\path\context.js:38:17)
    at NodePath.visit (C:\Users\Jonny\repos\nwb\node_modules\@babel\traverse\lib\path\context.js:99:12)
    at TraversalContext.visitQueue (C:\Users\Jonny\repos\nwb\node_modules\@babel\traverse\lib\context.js:139:18)
    at TraversalContext.visitMultiple (C:\Users\Jonny\repos\nwb\node_modules\@babel\traverse\lib\context.js:93:17)
    at TraversalContext.visit (C:\Users\Jonny\repos\nwb\node_modules\@babel\traverse\lib\context.js:178:19)
    at Function.traverse.node (C:\Users\Jonny\repos\nwb\node_modules\@babel\traverse\lib\index.js:76:17)

Whereas if I avoid using JSX, it works correctly:

Inferno.render(Inferno.createVNode(1 << 4, App), document.querySelector('#app'))

From the README:

This plugin transforms JSX code in your projects to Inferno compatible virtual DOM.

In what way is that different from React-compatible virtual DOM?

Cannot attach version 1.2.0-beta11 to Babel. As soon as I do, the following stack is thrown:

ERROR in ./src/index.js
Module build failed: SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:404:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at ~/node_modules/babel-core/lib/transformation/file/options/option-manager.js:174:20
    at Array.map (native)
    at Function.normalisePlugins (~/node_modules/babel-core/lib/transformation/file/options/option-manager.js:154:20)
    at OptionManager.mergeOptions (~/node_modules/babel-core/lib/transformation/file/options/option-manager.js:229:36)
    at OptionManager.init (~/node_modules/babel-core/lib/transformation/file/options/option-manager.js:374:12)
    at File.initOptions (~/node_modules/babel-core/lib/transformation/file/index.js:216:65)
    at new File (~/node_modules/babel-core/lib/transformation/file/index.js:139:24)
    at Pipeline.transform (~/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (~/node_modules/babel-loader/lib/index.js:41:20)
    at Object.module.exports (~/node_modules/babel-loader/lib/index.js:138:12)

It's nothing to do with my source file: src/index.js. To verify, I set its contents to:

console.log('nearly empty');

and the error is still thrown.

Reverting to 1.0.0-legacy allowed me to continue working.

The following JSX fails:

<button aria-selected="false" disabled>{i18n.t('buttonText')}</button>

aria-selected needs to be quoted in the attrs Object (unexpected token "-") and the boolean attribute disabled yields a null attribute.value.

Looks like this is a Babel defect but I'd like to confirm.

Latest version give 3 failing tests on Inferno. Downgrade to 0.2.7, and everything works just fine !!

Templaes are evaluated into this. Note undefined.appendChild(...).

function tpl1272327436(fragment) {
    var root = Inferno.template.createElement("div");
    fragment.dom = root
    var child_0_root = Inferno.template.createElement("div");
    undefined.appendChild(child_0_root);
    var child_1_0 = Inferno.template.createElement("span");
    child_0_root.appendChild(child_1_0);

    if (typeof fragment.templateValues[0] !== "object") {
        child_1_0.textContent = fragment.templateValues[0];
        fragment.templateTypes[0] = Inferno.FragmentValueTypes.TEXT;
    } else {
        fragment.templateTypes[0] = (fragment.templateValues[0].constructor === Array ? Inferno.FragmentValueTypes.LIST : Inferno.FragmentValueTypes.FRAGMENT);
    }

    fragment.templateElements[0] = child_1_0;
    var child_1_root = Inferno.template.createElement("h1");
    undefined.appendChild(child_1_root);
    child_1_root.textContent = "Hello world!";
}

Compiling JSX with the current version of babel-plugin-inferno currently fails and throws a SyntaxError.

Anecdotally, after going through all babel plugins with similar syntax, it appears all working examples are written in ES6. May or may not be related, but I solved my problem by removing a few "ES6-isms" as Babel kept running it as if it were ES5 and running into errors.

I won't speculate on why this fixes the problem, but I've opened a PR here so you can see what I had to change in order to get it to work.

Environment:

• Babel-Inferno 0.2.11 (Tested as failing all the way down to 2.7)
• Babel 6.5.1 (Tested as failing all the way down to 6.2)
• OS X 10.10.5

/.../node_modules/babel-plugin-inferno/lib/index.js:190
                enter(path, scope) {
                     ^
SyntaxError: Unexpected token (
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at /usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:204:20
    at Array.map (native)
    at Function.normalisePlugins (/usr/local/lib/node_modules/babel-cli/node_modules/babel-core/lib/transformation/file/options/option-manager.js:182:20)

This plugin is the only reason I'm still using Babel. Perhaps that's a way to hook into Buble's JSX system?

How can i run Inferno and Inferno babel plugin in browser by just adding script tags? I know it sounds stupid, but i find it a little troublesome to build all npm packages and go through all the fuss to just try some Inferno out.

I think it would be better for new users or users who just heard of Inferno (just like me)

Again, sorry to make an issue, couldn't find any stackoverflow or any other thing of that sort.

Hey

Its related to this issue:
infernojs/inferno#141

When defining spread attributes at the beginning of element it overrides rest of attributes.

<List
data={data}
{...other}  /> 

is ok

<List
{...other}
data={data}  /> 

compiles wrongly. data attribute is lost.

I am having trouble adding elements to an svg after it has rendered without using createVNode when using the code below the element is not flagged as a SVGElement. The transpiled code recieves a VNodeFlag of HtmlElement.

<g name="minimap"> <line x1={HORIZ_PADDING} y1={VERT_PADDING} x2={mapWidth} y2={VERT_PADDING} strokeWidth={LINE_WIDTH} stroke="#ccc" />, <line x1={HORIZ_PADDING + xOff} y1={VERT_PADDING} x2={xOff + thumbWidth} y2={VERT_PADDING} strokeWidth={LINE_WIDTH} stroke="#f00" /> </g>

However when using createVNode and setting the VNode flag manually the element is rendered correctly

return createVNode( VNodeFlags.SvgElement, 'g', null, [ <line x1={HORIZ_PADDING} y1={VERT_PADDING} x2={mapWidth} y2={VERT_PADDING} strokeWidth={LINE_WIDTH} stroke="#ccc" />, <line x1={HORIZ_PADDING + xOff} y1={VERT_PADDING} x2={xOff + thumbWidth} y2={VERT_PADDING} strokeWidth={LINE_WIDTH} stroke="#f00" /> ], ChildFlags.HasNonKeyedChildren, { name: 'minimap' } );

Thanks

Brian

create hash map for all svg attributes and convert them into matching attribute.

fe:

xlinkHref => xlink:href
strokeWidth => stroke-width

According to issue #20 users should not need to install babel-plugin-syntax-jsx, however that issue was closed 6 years ago the README still says that babel-plugin-syntax-jsx must be installed.
Which is it?

<div index="text"></div>

compiles to:

({
    tag: "div",
    attrs: vtext,
    dom: null
});

Was looking at this module investigating an unrelated issue and noticed your current setup requires users to enable the syntax plugin, so wanted to comment. You should be able to include babel-plugin-syntax-jsx as a dependency of this plugin itself to avoid your users needing to think about it. As long as its in your dependencies and you use inherits like you already do, it should just work.

See this:

https://www.npmjs.com/package/babel-eslint

I'm getting this error. It looks like this plugin is outputting code with object spread where JSX spread is used.

ERROR in ./src/main.js
Module parse failed: <project-path>/node_modules/babel-loader/lib/index.js!<project-path>/src/main.js Unexpected token (144:4)
You may need an appropriate loader to handle this file type.
| const render = () => {
|   _inferno2.default.render(createVNode(16, _Component2.default, null, null, {
|     ...store.state,
|     ...messagesStore.state,
|     'actions': actions
 @ multi (webpack)-dev-server/client?https://localhost:8080 webpack/hot/dev-server babel-polyfill ./src/main.js

If the object spread babel plugin should be required to use this plugin, then I'd expect that to be documented. However, it seems better to compile to current JS, as the JSX plugin used by the React babel preset does.

We had some issues previously with white space, it would be nice to have use cases added there and tested for regression. There is now tests file which we can use to add mocha tests.

I'm planning to optimize this plugin to reduce compile time for huge applications. handleWhiteSpace it a least doing two loops

In babel-plugin-transform-react-jsx i can do:

{
  "plugins": [
    ["transform-react-jsx", {
      "pragma": "dom" // default pragma is React.createElement
    }]
  ]
}

Please add same thing to your plugin.

In reactive-di i use dependency injection techiques and my components are independed from react, inferno, whatever. They are really pure, without framework bindings. Passing createVNode to components also clearly solves context inheritance problem. It's works like hierachical dependency injectors in angular2.

var createVNode = Inferno.createVNode;

function Hello(_ref, _ref2, createVNode) {
    var text = _ref.text;
    var user = _ref2.user;

    var set = new _src.BaseSetter(user).create(_src.BaseSetter.createEventSet);
    return createVNode(2, 'div', null, [createVNode(2, 'h1', null, ['Hello ', user.name]), createVNode(512, 'input', {
        'value': user.name
    }, null, {
        'onInput': set.name
    })]);
}

I use createVNode only as interface for interfactions with di container. It's format is better optimized than createElement. But i don't want to create function createVNode instead of delegating object with method.

In di core binded to this, it's not good:

createVNode: CreateVNode = (
    ) => {...}

I want to pass di core object instead of function, to do something like this:

function Hello(_ref, _ref2, t) {
    return t.h(2, 'div', null, [t.h(2, 'h1', null, ['Hello ', user.name]), t.h(512, 'input', {
        'value': user.name
    }, null, {
        'onInput': set.name
    })]);
}

From the readme:

Note! Make sure babel-plugin has same major version as the inferno you are using!

The current version of inferno is 7.4.3, while the latest version of babel-plugin-inferno is 6.1.1. Is this line incorrect or should I avoid using babel-plugin-inferno until there's a 7.x.x release?

At the moment the import always specifies the import source as 'inferno' there are situations such as when using rollup that this won't work as rollup does not correctly find the named exports, this is usually fixed with an import proxy file.

It should therefore be possible to set the import used by the plugin, this is a very quick fix, changing line 73 from:
], t.stringLiteral('inferno')));
to
], t.stringLiteral(typeof opts.imports === 'string' ? opts.imports : 'inferno')));
will allow the import module to be specified using the current imports option.

Imagine this in render():

return (
  <div $HasVNodeChildren>
    <h1>Hi</h1>
  </div>
);

$HasVNodeChildren is useless and compiler should warn the developer.

Hi! First of all: thanks for providing infrastructure for Inferno!

Unfortunately, it seems like I found an issue.

const { render } = Inferno

const getProps = () => ({
  className: 'red'
})

class MyComponent extends InfernoComponent {
	render() {
  	return <div {...getProps()}>Hello world</div>;
  }
}

render(
	<MyComponent />,
  document.getElementById('container')
);

That div inside MyComponent won't have red class (while if react babel plugin is used, it will).

Sorry, no online demonstration, since I haven't found any base setup of babel + inferno for jsfiddle (#27).

There doesn't seem to be any tests set up in this repo, so I'll paste a failing example here.

const code = `
export default (
  <div>
    <img src="FOO_URL"/><Component>Foo</Component>
    <img src="BAR_URL"/><Component>Bar</Component>
  </div>
);
`;

This yields:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var $createOptBlueprint = Inferno.createOptBlueprint,
    $createStaticVElement = Inferno.createStaticVElement,
    $createOptVElement = Inferno.createOptVElement,
    $createVComponent = Inferno.createVComponent,
    $ValueTypes = Inferno.ValueTypes,
    $NodeTypes = Inferno.NodeTypes,
    $ChildrenTypes = Inferno.ChildrenTypes;
var bp0 = $createOptBlueprint($createStaticVElement("img", {
  src: "FOO_URL"
}, null), null, null, null, null, null, null, null, null, InfernoDOM),
    bp1 = $createOptBlueprint($createStaticVElement("div", null, null), $ValueTypes.CHILDREN, $ChildrenTypes.NON_KEYED, null, null, null, null, null, null, InfernoDOM);
exports.default = {
  bp: bp1,
  dom: null,
  key: null,
  type: $NodeTypes.OPT_ELEMENT,
  v0: [{
    bp: bp0,
    dom: null,
    key: null,
    type: $NodeTypes.OPT_ELEMENT,
    v0: null,
    v1: null,
    v2: null,
    v3: null
  }, {
    component: Component,
    dom: null,
    hooks: null,
    instance: null,
    key: null,
    props: {
      children: "Foo"
    },
    ref: null,
    type: $NodeTypes.COMPONENT
  }, {
    bp: bp0,
    dom: null,
    key: null,
    type: $NodeTypes.OPT_ELEMENT,
    v0: null,
    v1: null,
    v2: null,
    v3: null
  }, {
    component: Component,
    dom: null,
    hooks: null,
    instance: null,
    key: null,
    props: {
      children: "Bar"
    },
    ref: null,
    type: $NodeTypes.COMPONENT
  }],
  v1: null,
  v2: null,
  v3: null
};

Which you'll notice does not have BAR_URL. The first image tag is repeated twice.

1.3.0-beta17

Hello!
I'm use rollup watch with few babel plugins, in particular inferno plugin for convert JSX syntax. After running the rollup watch first build is ok (has valid and runnable code), but after changing the source file and rebuilding bundle some of variable declarations is removed and bundle code is broken. I made the example to reproduce bug. Take a look at declaration of 'createVNode' and 'createTextVNode' variables.

here the repository with example https://github.com/harimambura/inferno_bug

Implement a support to detect static shapes of virtual nodes. This information could be used to optimize diff algorithm and re-creation of static trees runtime.