I would like to know if something like:
import { faPause,
faLevelUpAlt,
faExchangeAlt,
faCircle,
} as SolidIcons from '#fortawesome/free-solid-svg-icons';
=> SolidIcons.faPause
I know there is:
import * as everything from '#fortawesome/free-solid-svg-icons';
=> everything.faPause
But that is not what I want because it imports everything from the library..
I don't think that what you've listed is possible under the syntax, but you should be able to bundle your imports into an object after the fact to simulate it. Something like
import { faPause,
faLevelUpAlt,
faExchangeAlt,
faCircle,
} from '#fortawesome/free-solid-svg-icons';
const SolidIcons = { faPause,
faLevelUpAlt,
faExchangeAlt,
faCircle,
};
Related
I use Create React App and already declare this on src/setupTests.js:
import '#testing-library/jest-dom';
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });
But every time I use expect(anything).toBeInTheDocument() on test file, when running the test I get:
TypeError: expect(...).toBeInTheDocument is not a function
To make sure that the setupTests.js is actually run, I try to use enzyme shallow on test file and it works. So what is the problem with jest-dom actually and how to solve it?
Solved with:
import '#testing-library/jest-dom/extend-expect';
on src/setupTests.js
It is easier to add in your jest.config.js
module.exports = {
...,
"setupFilesAfterEnv": [
"<rootDir>/jest.setup.js"
]
}
and to create jest.setup.js with the content
import '#testing-library/jest-dom'
With that you don't have to import the jest-dom in every test file
I'm curious if there is a good way to replace just the state in the current location. It's a pattern that I do often and it always requires creating a new location object from the location and I feel like there must be a better way to achieve this.
import React from 'react';
import withRouter from 'react-router/lib/withRouter';
class Component extends React.Component {
updateLocationState(value) {
const newLocation = Object.assign({}, this.props.location, {
state: Object.assign({}, this.props.location.state, {
myKey: value,
}),
});
this.props.router.replace(newLocation);
}
...
}
export default withRouter(Component);
This feels very verbose and it copies the location key which feels wrong. Is there a better pattern for this?
I'm on react-router v2.6
Hey there I have this uiTypes.js file like this:
export default {
SELECT_ITEM: 'SELECT_ITEM',
DESELECT_ITEM: 'DESELECT_ITEM',
TOGGLE_ITEM: 'TOGGLE_ITEM',
}
And when I try importing its content like so, it works:
import uiTypes from './uiTypes';
console.log(uiTypes.SELECT_ITEM) // 'SELECT_ITEM'
But not like this:
import { SELECT_ITEM, DESELECT_ITEM, TOGGLE_ITEM } from './uiTypes';
console.log(SELECT_ITEM) // undefined,
Am I missing something?
There is no destructuring for imports (notice also that exports and imports use the keyword as instead of a colon to avoid confusion with objects). You can either import the default export, individual named exports, or the module namespace object.
Your attempt is trying to import three named exports, while there is only a default export; that's why it's failing.
You should use named exports:
export const SELECT_ITEM = 'SELECT_ITEM';
export const DESELECT_ITEM = 'DESELECT_ITEM';
export const TOGGLE_ITEM = 'TOGGLE_ITEM';
or use "real" destructuring after importing the object:
import uiTypes from './uiTypes';
const {SELECT_ITEM, DESELECT_ITEM, TOGGLE_ITEM} = uiTypes;
I am developing a React & Reflux app, which is bundled by webpack with babel-loader (v6), and I am experiencing es6 modules dependencies issues
For example, I have a component that use the reflux .connect() mixin :
import MyStore from '../stores/my-store';
const Component = React.createClass({
mixins: [Reflux.connect(MyStore)]
});
When I import all modules individually in each file like this, everything's fine.
I then tried to improve my code by using deconstructed import statements :
...in a component :
//import One from '../js/one';
//import Two from '../js/two';
//import Three from '../js/three';
import { One, Two, Three } from '../js'; // Instead
...and in js/index.js :
import One from './one';
import Two from './two';
import Three from './three';
export { One, Two, Three };
App source code files are more concise using the above technique, because I can import all components in one import line.
But when I use this, some dependencies end up beeing undefined when I use them
If I use the same updated example...
//import MyStore from '../stores/my-store';
import { MyStore } from '../stores'; // Instead
const Component = React.createClass({
mixins: [Reflux.connect(MyStore)]
});
...MyStore parameter ends up undefined in Reflux.connect method.
I tried to troubleshoot in the debugger, but I'm not really aware of what's going on with the __webpack_require__(xxx) statements in the generated bundle. There must be a circular dependency that babel-loader or webpack require could not figure out when there are the index.js files re-exporting individual modules.
Do you know any tool that can help me figure this out? I tried madge but it does not work with es6 modules, and I could not find anything that would tell me where anything is wrong
In order to get extended info about build, run:
webpack --profile --display-modules --display-reasons
It will give you bunch of information for optimisation/profiling.
import statement is used to import functions, objects or primitives that have been exported from an external module.
As per MDN doc, you can import the Modules not the directory.
import name from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as alias from "module-name";
import defaultMember from "module-name";
import "module-name";
Reference URL:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
http://es6-features.org/#ValueExportImport
https://github.com/lukehoban/es6features#modules
http://www.2ality.com/2014/09/es6-modules-final.html
As a workaround keep one file as base.js and include all your 3 files.
Suppose that I have the following root query in a relay with react-router-relay project:
export default {
calc: () => Relay.QL`query queryType ($number: String) { auth (number: $number) }`,
}
Initial value of $number comes from server like a hidden input and I want to use this number in my first query to server. How can I pass $number to my query using the current react-router-relay API? This is neither a queryParam or stateParam.
You should be able to do something like:
import {createHistory} from 'history';
import React from 'react';
import ReactDOM from 'react-dom';
import {Route, Router} from 'react-router-relay';
import MyComponent from './components/MyComponent';
import MyComponentQueries from './routes/MyComponentQueries';
function addAuthParam(params, route) {
return {
...params,
number: 'SECRET',
};
}
ReactDOM.render(
<Router
history={createHistory()}
createElement={ReactRouterRelay.createElement}>
<Route
component={MyComponent}
path="/thing/:id"
prepareParams={addAuthParam}
queries={MyComponentQueries}
/>
</Router>,
document.getElementById('relay-root')
);
prepareParams was added in react-router-relay in v0.6.2. The above syntax should work for that or v0.7.0 (the current release) as well.