JavaScript: Removing decorators from create-react-app - javascript

Firstly, I want to say that I am very new to react world. I am using a react component from github in our project. I noticed that the component uses decorators in their code. And, to use that code as it is, I think we have to eject and use babel. But, we don't want to do that, so I plan to remove decorators (multiple) with the native code.
import React from 'react'
import dc from 'dc'
import BaseChart from './base-chart'
import coordinateGridMixin from '../mixins/coordinate-grid-mixin'
import stackMixin from '../mixins/stack-mixin'
import barMixin from '../mixins/bar-mixin'
#barMixin
#stackMixin
#coordinateGridMixin
export default class BarChart extends BaseChart{
static displayName = 'BarChart'
componentDidMount(){
this.chart = dc.barChart(this.chart)
this.configure()
this.chart.render()
}
}
I started this with the following code, with the help of this page.
import React from 'react'
import dc from 'dc'
import BaseChart from './base-chart'
import coordinateGridMixin from '../mixins/coordinate-grid-mixin'
import stackMixin from '../mixins/stack-mixin'
import barMixin from '../mixins/bar-mixin'
import compose from 'recompose'
class BarChart extends BaseChart {
static displayName = 'BarChart'
componentDidMount(){
this.chart = dc.barChart(this.chart)
this.configure()
this.chart.render()
}
}
export default compose(
coordinateGridMixin,
stackMixin,
barMixin
)(BarChart);
Doing this I get an error "export 'default' (imported as 'compose') was not found in 'recompose'
That make me wonder, do I need to use recompose? Or, there is a different and simpler way? Not sure how to replace this piece.
export default ???(
coordinateGridMixin,
stackMixin,
barMixin
)(BarChart);
Any help would be appreciated. I am not sure if I have given enough information to you to help.

Your error is about recompose exporting nothing by default, so your import is incorrect, you should import compose like this :
import { compose } from 'recompose';
You can also chain decorate your component to do it without recompose (not 100% sure about the syntax) :
let decoratedBarChart = coordinateGridMixin(BarChart);
decoratedBarChart = stackMixin(decoratedBarChart);
decoratedBarChart = barMixin(decoratedBarChart);
export default decoratedBarChart;

Related

The bundle of rollup contain an direct import

I tried to use rollup to package my library, but the resulting package is weird。it looks like
export { default as Test } from './test/test.js';
import './test/context.js';
I don't know why there is a direct import ,it look strange。
the context.js look like
import {createContext} from 'react';
export const context = {provider: null};
export const contextProvider = createContext(null);
but when I delete import from node_modules, and change it to
export const context = {provider: null};
export const contextProvider = null;
the bundle import statement will disappear.
I make a demo to describe the question ,hope somebody can help me.
https://github.com/CodeRubbish/rollup-error-demo

import { Component, Vue } from "vue-property-decorator" vs. import Vue from "vue"

What's the difference and use cases between importing Vue from vue-property-decorator and vue? What I understood I need to import Vue from vue-property-decorator always when defining a custom component with a #Component decorator, but are there any unexpected/different things/scenarios related to the Vue's core which I should be aware when doing so?
I would say that there is no difference according to sources of vue-property-decorator.
vue-property-decorator just does the following:
import Vue, { PropOptions, WatchOptions } from 'vue'
// ...
export { Component, Vue, mixins as Mixins }
Possible that it is done to reduce number of imports in your code:
import {Vue, Smth1, Smth2}` from 'vue-property-decorator';
vs
import Vue from 'vue';
import {Smth1, Smth2} from 'vue-property-decorator';
Let's say you have a very simple module named 'some-module', in it you have:
var foo = 'bar';
export default foo;
export function helloWorld () { ... };
When you do:
import something from 'some-module';
you are only importing the default export of 'some-module'. In this case, it is the string foo. The default export can be anything, object, function, etc.
When you do:
import {helloWorld} from 'some-module';
You are specifically importing a member of 'some-module' named 'helloWorld' and not the default export. In this case, it is the function 'helloWorld'.
If you had done:
import {something} from 'some-module';
The 'something' would be 'undefined' since there is no export for with that name.
You can read more here

React : best way to Import / Export

I'm creating a project in React and I'm not sure if the approach to import/export is right.
I'm exporting my components with an index.js file inside my Components folder like this:
export {default as Card} from './Card/Card'
export {default as CardList} from './CardList/CardList'
Each component is a const and I'm exporting it as:
export default Card and export default CardList
I'm using export default two times
in the index.js
in each component file
Is this the best practice to use an index file to export the components?
Thanks!
You can keep exporting your components as default, and in your index.js you can export them like:
export Card from './Card/Card';
export CardList from './CardList/CardList';
then when using these, you can do:
import {Card, CardList} from 'components';
Your point of contact (index.js) Feels less verbose

X is not a constructor when trying to import SimpleBar into Angular 2 app

I've been poking around for hours now, but can't get this to work. I'd like to import SimpleBar in my app, but am failing miserably.
TypeError: simplebar_1.SimpleBar is not a constructor
I managed to get the npm package working earlier today, but there were some weird issues with resizing and as the npm package only ships with the minified version I resorted to getting the 'real thing'.
I'm trying to wrap this in a directive like so
import {
Directive,
Input,
ElementRef,
AfterViewInit
} from '#angular/core';
import { SimpleBar } from 'simplebar';
#Directive({
selector: '[simpleBar]'
})
export class SimpleBarDirective implements AfterViewInit {
constructor(private elementRef: ElementRef) { }
ngAfterViewInit() {
new SimpleBar(this.elementRef.nativeElement, {
autoHide: true
});
}
};
However, that gives me the above error message. Luckily I managed to get a Plunker up and running that shows the exact same error.
What am I missing here?
THE PROBLEM
In src/simplebar you declared the export as default by doing export default class SimpleBar{....} and then you imported by using import {SimpleBar} from 'simplebar'
You can only import a default export by doing import SimpleBar from 'simplebar' without the parenthesis.
The parenthisis import style is used when you want to import multiple things from the file eg -
import {SimpleBar, SimpleDialog, SimpleModal} from 'simplethings'
that way there won't be a default export in the file.
THE SOLUTION
use import SimpleBar from 'simplebar' or remove the default modifier in your class export in src/simplebar
Look at here, the sourcecode of simplebar. https://github.com/Grsmto/simplebar/blob/master/src/simplebar.js
They are using export default. They don't export SimpleBar. Therefore, fix your import syntax.
import * as SimpleBar from 'simplebar';

inheritance is not working in react mocha test

I have used the below structure to create a react component which is working on the browser after done babel. But the Layout spec is failing in my case since the React is declared in Base component only. Why the inheritance is not working in spec?
Base.js
import React from 'react';
export default class Base extends React.Component {
}
Layout.js
import 'Base' from './Base';
export default class Layout extends Base {
const sample = React.cloneElement(this.props.data, {ref: 't'});
}
Test Case
import Layout from 'component/Layout'
import React from 'react';
describe('Layout', () => {
}
Error message:
ReferenceError: Can't find variable: React
In Layout.js you have the following line
const sample = React.cloneElement(this.props.data, {ref: 't'});
Here you reference React, but Layout.js hasn't got a definition for React, similar to how you don't have access to identifiers in different closures, so it would throw a ReferenceError
If you want to use this reference you need to first teach it to Layout.js by including the import line again
import React from 'react';
If you don't want to have a second import line, you could
Re-export React in Base.js so the one import does both import {foo, bar} from 'baz';
See if you can reference what you want through an identifier you can see, e.g. via Object.getPrototypeOf(Base.prototype).constructor?
As you are creating React as a global in Test Case, the ReferenceError in mocha may be getting thrown too early, moving the import React line above the import Layout line should fix this

Categories