mbasso / react-decoration Goto Github PK

General Information

• Bug
• Improvement
• Feature
• Other

Description
I'm trying to use @component decorator and it shows this error.

Version: webpack 4.20.2
Time: 57ms
Built at: 09/27/2018 2:44:37 PM
     Asset       Size  Chunks             Chunk Names
 bundle.js    1.1 MiB    main  [emitted]  main
index.html  440 bytes          [emitted]
Entrypoint main = bundle.js
[./src/Components/TodoList.js] 2.14 KiB {main} [built] [failed] [1 error]
    + 45 hidden modules

ERROR in ./src/Components/TodoList.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/jasinyip/prj/hi/react-todolist/my-app/src/Components/TodoList.js: super() is only allowed in a derived constructor
   4 | @component
   5 | class Counter {
   6 |   constructor () {
>  7 |     super()
     |     ^
   8 |     this.state = {
   9 |       val: 2
  10 |     }
    at File.buildCodeFrameError (/Users/jasinyip/prj/hi/react-todolist/my-app/node_modules/@babel/core/lib/transformation/file/file.js:261:12)
    at NodePath.buildCodeFrameError (/Users/jasinyip/prj/hi/react-todolist/my-app/node_modules/@babel/traverse/lib/path/index.js:157:21)
    at Object.Super (/Users/jasinyip/prj/hi/react-todolist/my-app/node_modules/@babel/plugin-transform-classes/lib/transformClass.js:81:18)
    at NodePath._call (/Users/jasinyip/prj/hi/react-todolist/my-app/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/Users/jasinyip/prj/hi/react-todolist/my-app/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/Users/jasinyip/prj/hi/react-todolist/my-app/node_modules/@babel/traverse/lib/path/context.js:88:12)
    at TraversalContext.visitQueue (/Users/jasinyip/prj/hi/react-todolist/my-app/node_modules/@babel/traverse/lib/context.js:118:16)
    at TraversalContext.visitSingle (/Users/jasinyip/prj/hi/react-todolist/my-app/node_modules/@babel/traverse/lib/context.js:90:19)
    at TraversalContext.visit (/Users/jasinyip/prj/hi/react-todolist/my-app/node_modules/@babel/traverse/lib/context.js:146:19)
    at Function.traverse.node (/Users/jasinyip/prj/hi/react-todolist/my-app/node_modules/@babel/traverse/lib/index.js:94:17)
 @ ./src/App.js 21:0-45 47:33-41
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
       4 modules
ℹ ｢wdm｣: Failed to compile.

Steps to reproduce

import { autobind, component } from 'react-decoration'

@component
class Counter {
  constructor () {
    super()
    this.state = {
      val: 2
    }
  }

  render () {
    return (
      <div onClick={this.increment}>
        {this.state.val}
      </div>
    )
  }

  @autobind
  increment () {
    this.setState({ val: this.state.val + 1 })
  }
}

export default Counter

Versions

{
  "dependencies": {
    "react": "^16.5.2",
    "react-decoration": "^2.0.0",
    "react-dom": "^16.5.2",
    "react-scripts": "1.1.5"
  },
  "devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.2",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.0",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.9"
  }
}

• react-decoration: 2.0.0

Can you provide a simple example for each decorator?

General Information

• Bug
• Improvement
• Feature
• Other

Description

I have a question. According to https://stackoverflow.com/a/28046731/6928824 event pooling may be a problem for the throttle/debounce decorators. In your README example you use the debounce decorator for event handling so I guess it has worked for you so far.

So wouldn't it be better to call event.persist() before running the decorated function (I haven't found any code doing that)?
Maybe your example works because the event is cleaned after a longer time - so debounce(10e4) would not work...I haven't played around it yet.

Versions

• react-decoration: 2.0.0
• Browser: -

General Information

• Bug
• Improvement
• Feature
• Other

Description

Hey guys, I'm looking for new useful decorators to include in this library, do you have any idea?

General Information

• Bug
• Improvement
• Feature
• Other

Description

For simply use state properties.

@component()
export default class Hello extends Component<{name: string}, any> {
  @state()
  name = this.props.name;

  @state()
  age: number = 20;

  render() {
    console.log("render hello");
    return (
      <div>
        Hello {this.name}, age: {this.age}
        <br />
        <button onClick={this.handleClick}>Incr age</button>
      </div>
    );
  }

  private handleClick = () => {
    this.age++;
  };
}

Steps to reproduce

https://codesandbox.io/s/provider-a-state-property-decorator-r8yh3

General Information

• Bug
• [ x ] Improvement
• Feature
• Other

Description

i tried react-decoration with react-boilerplate, it's great, but the only issue is bundle size :

before

Version: webpack 2.1.0-beta.22
Time: 19226ms
                                    Asset       Size  Chunks             Chunk Names
          3.276f03ea0a17756b8a66.chunk.js     7.8 kB       3  [emitted]
                                .htaccess    1.53 kB          [emitted]
                            manifest.json  624 bytes          [emitted]
          0.b967f0bb33e8c1f9801c.chunk.js    66.8 kB       0  [emitted]
          1.c6c8c78ee23a90950b3f.chunk.js    79.7 kB       1  [emitted]
          2.3c0fd83ed0be4e272278.chunk.js    25.3 kB       2  [emitted]
                              favicon.ico    15.1 kB          [emitted]
          4.8526170230b22366d99e.chunk.js    3.43 kB       4  [emitted]
          5.2f3d2e1475dcdf3d02bb.chunk.js  571 bytes       5  [emitted]
             main.be58e1bd77b283349da5.js     393 kB       6  [emitted]  main
main.7de2fbe314ffdbfdcc0733fdd993e7a0.css  908 bytes       6  [emitted]  main
                               index.html  621 bytes          [emitted]
                                    sw.js    13.6 kB          [emitted]

after

Version: webpack 2.1.0-beta.22
Time: 20009ms
                                    Asset       Size  Chunks             Chunk Names
          3.276f03ea0a17756b8a66.chunk.js     7.8 kB       3  [emitted]
                                .htaccess    1.53 kB          [emitted]
                            manifest.json  624 bytes          [emitted]
          0.42c9f3bb7483cb57a46d.chunk.js     112 kB       0  [emitted]
          1.08976c80ec099195e156.chunk.js    66.8 kB       1  [emitted]
          2.3c0fd83ed0be4e272278.chunk.js    25.3 kB       2  [emitted]
                              favicon.ico    15.1 kB          [emitted]
          4.8526170230b22366d99e.chunk.js    3.43 kB       4  [emitted]
          5.2f3d2e1475dcdf3d02bb.chunk.js  571 bytes       5  [emitted]
             main.e9d7fd3bddaa80e91f4e.js     393 kB       6  [emitted]  main
main.7de2fbe314ffdbfdcc0733fdd993e7a0.css  908 bytes       6  [emitted]  main
                               index.html  621 bytes          [emitted]
                                    sw.js    13.6 kB          [emitted]

the only different is i use

import { throttle } from 'react-decoration';

and the final build size increased about 32kb

i think it import all the decorators ?

Versions

• react-decoration: latest
• Browser: all

General Information

• [x ] Bug
• Improvement
• Feature
• Other

Description

I have installed the package in my project. At first Atom was complaining that it couldn't find the module:

That's probably because the "main" field in the package.json file is set to "lib/index.js", but there's no lib folder in the project.
Looking at the npm scripts I found the build script, that should generate the lib folder, but I'm not sure when that's supposed to happen. Maybe as a postinstall script?

Steps to reproduce

Install the package via npm install and import one of the decorators in a project.

Versions

• react-decoration: 1.4.0
• Browser: No browser needed, happens on node level

General Information

• Bug
• Improvement
• Feature
• Other

Description

react-addons-perf is not compatible with React-Native. The best would be if @perf provided alternative functionality that worked with React-Native.

Right now you'll have to import each decorator directly to not trigger an import of react-addons-perf - a decent first step would be to import it dynamically so you only need to install react-addons-perf for the @perf decorator.

Steps to reproduce

1. Install react-decoration
2. Don't install react-addons-perf
3. Import any decorator from the main export.

Versions

• react-decoration: 1.4.1

General Information

• Bug
• Improvement
• Feature
• Other

Description

debounce and throttle are very common in dev, could it be added?