New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

decorators not working #296

Closed
psenger opened this Issue May 9, 2017 · 3 comments

Comments

Projects
None yet
2 participants
@psenger

psenger commented May 9, 2017

Hey team,

Firstly thank you for this project. It helps me when I want to experiment with an idea, or show off something really quick. I got this from a team mate who saw it being used by someone at either Sydney JS or the ReactJS Meetup.

I ran into one issue, home grown decorators. Im trying to write a decorator, I know this feature uses babel presets "react", "es2015", "stage-0" but I dont think AIK is picking up my .babelrc file. At least I cant detect if it is. I get errors from the linter and I think compiler. The thing that has me stumped, is the redux react connect decorator appeared to work ( I don't use it anymore, but I used it once ). Maybe this is a es-lint problem? Frankly Im not sure, I was wondering if anyone else has this issue or it is mine alone. Im going to apply WebPack Directly to see if i jacked up this code. What do you think? ( PS: I was injecting something called i18n into the context.

 ERROR  Failed to compile.

 Error in ./src/containers/Home/home.js

xxxxxx/src/containers/Home/home.js
  6:1  error  Parsing error: Unexpected character '@'

home.js

import PropTypes from "prop-types";
import React, {Component} from 'react';
import Labels from '../../decorator/labels';

@Labels()
export default class Home extends Component {
    constructor(props) {
        super(props);
        this.displayName = 'containers/Home';
    }
    render() {
        let _t = this.context.i18n;
        return (
            <div data-component-name={this.displayName}>
                <pre>{JSON.stringify(this.context,'\t',4)}</pre>
            </div>
        );
    }
}

labels.js

import PropTypes from "prop-types";
import React, {Component} from "react";
const Labels = () => {
    return ComponentToWrap => class extends Component {
            constructor(props, context) {
                super(props, context); 
                this.displayName = "decorator/Labels";
                this.contextTypes = {
                    i18n: PropTypes.object.isRequired
                };
            }
            render() { 
                const { i18n } = this.context;
                return (<ComponentToWrap {...this.props} i18n={i18n} data-component-name={this.displayName}/>);
            }
    }
};
export { Labels as default };

Cheers,
Phil

@d4rkr00t

This comment has been minimized.

Owner

d4rkr00t commented May 9, 2017

Hi Phill,

Thank you for the feedback.

I got this from a team mate who saw it being used by someone at either Sydney JS or the ReactJS Meetup.

It was actually me :) I gave a talk on Sydney JS couple of months ago about Aik. Here are the slides if you are interested.

Regarding the issue:

Aik currently doesn't support custom .babelrc files, probably it's worth adding this feature. And since Aik uses babel-preset-env it only has presets which considered latest unfortunately none of them has a plugin for decorators.

Also adding plugins to support decorators looks a bit scary to me, because they are going to change any time soon babel/babel#2645 and were disabled in stage-2 preset.

But anyway I'll add custom .babelrc to my todo list, can't promise any timeline, but probably in couple of future releases.

@d4rkr00t d4rkr00t added the enhancement label May 9, 2017

@psenger

This comment has been minimized.

psenger commented May 9, 2017

Stanislav, thanks for the fast response.. I trolled the other projects, saw the same problem. Oh well. Thanks!

@d4rkr00t

This comment has been minimized.

Owner

d4rkr00t commented Jul 19, 2017

I've experimented with this feature and turned out it causes interesting issues since Aik uses built-in eslint parser it doesn't know how to parse decorators and some other new syntax features.

But I'm going to implement plugins support for Aik and there it will be possible to redefine webpack configuration along with eslint.

d4rkr00t added a commit that referenced this issue Dec 17, 2017

d4rkr00t added a commit that referenced this issue Dec 17, 2017

d4rkr00t added a commit that referenced this issue Dec 17, 2017

d4rkr00t added a commit that referenced this issue Dec 17, 2017

d4rkr00t added a commit that referenced this issue Dec 17, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment