Is there any way to export component(s) with or without hoc in one export? I know I can do it like this:
export const TranslatedList = translate('components')(List);
export const PureList = List;
but is there any other way to do something like below:
export {
TranslatedList: translate('components')(List),
PureList: List,
};
and in index.js something like:
import { TranslatedList } from './List';
export default TranslatedList;
maybe stupid question but this will be really helpful to me
Maybe use node.js native exports like this:
module.exports = {
TranslatedList: translate('components')(List),
PureList: List,
};
And require it
const {TranslatedList, PureList} = require('list.js');
A little late to the party. I did not find a "great" solution to this issue, but this is an "ok" one, in my opinion.
const TranslatedDropzone = translate()(Dropzone)
const TranslatedDropzoneControls = translate()(DropzoneControls)
const TranslatedDropzonePreview = translate()(DropzonePreview)
const TranslatedFilePreview = translate()(FilePreview)
export {
TranslatedDropzone as Dropzone,
TranslatedDropzoneControls as DropzoneControls,
TranslatedDropzonePreview as DropzonePreview,
TranslatedFilePreview as FilePreview
}
export default TranslatedDropzone
In ES6 you simply cannot do this:
export {
TranslatedList: translate('components')(List),
PureList: List,
};
Instead you can try doing this:
const toExport = {
TranslatedList: translate('components')(List),
PureList: List,
};
export toExport;
To import, simply do this:
import { TranslatedList, PureList } from './list.js';
Related
I have a colors.ts file:
export const black = '#0C0C0C';
export const blue = '#22618E';
and when ever I want to import a specific color I import it like:
import {black} from 'Shared';
In my Shared folder I have an index.ts that exports the colors:
export * from './colors';
Now I want to be able to export and Import the same way when using a theme.
Example
colors.ts:
const DefaultTheme = {
black: '#0C0C0C',
blue: '#22618E',
}
const SpecialTheme= {
black: 'red',
blue: 'yellow',
}
export const ColorsBytheme = () => {
const context = myContext();
return context.Default? DefaultTheme :SpecialTheme;
}
Problem:
I can not deconstruct/import the properties directly, this gives me undefined:
import {black} from 'Shared';
How can I accomplish this?
EDIT:
I have also tried by using a self invoking function when exporting:
const ColorsBytheme = () => {
return DefaultTheme;
};
export default ColorsBytheme();
When I import
import { black } from 'Shared';
It is still undefined
Based on your code example, you are currently exporting ColorsBytheme as a function that generates/returns the theme object...therefore, your import/deconstruction would need to look something along the lines of:
import { ColorsBytheme } from "Shared"
const { black } = ColorsBytheme();
Another option if you wish to have a single line would be to use require instead of import:
const { black } = require("Shared").ColorsBytheme()
Variables that are imported are just that, static variables. Functions are not evaluated when they are imported, therefore, in order for the values to be dynamic, the function needs to be executed.
import { utils } from 'shared'
const {
pick,
get,
isEmpty,
sortBy,
orderObjectsArray,
isString
} = utils.lodashAlternative
export { pick, get, isEmpty, sortBy, orderObjectsArray, isString }
Above you can see exports , imagine I don't want to desctructure all of those functions , how can I do it ? I've tried to make export utils.lodashAlternative , but it will not work , also :
const {...data} = utils.lodashAlternative
export {...data}
Also will not work, it there any way to export it without discructuring ?
A simple way to export everything under utils.lodashAlternative is creating an alias and exporting that one instead.
There's no need to create an object and spread lodashAlternative inside.
You can't declare and export afterwards (unless you use as)!
Way 1: using default
import { utils } from 'shared'
const lodashAlternative = utils.lodashAlternative;
export default lodashAlternative;
Way 2: exporting directly
import { utils } from 'shared'
export const lodashAlternative = utils.lodashAlternative;
Way 3: export each one separately, to be able to import them separately
import {utils} from "shared";
const { foo, bar } = utils.lodashAlternative;
export { foo, bar };
import then:
// WITH WAY 1
import lodashAlternative from "lodash-alternative";
// WITH WAY 2
import {lodashAlternative} from "lodash-alternative";
// WITH WAY 3
import {foo, bar} from "lodash-alternative";
Blitz here
I am having problem with import, I have a file like this :
import { TYPE_CONTRAT_UPDATE, CONFORMITE_UPDATE } from "./actionsTypes";
import { createAction } from "../../../../../../redux/Utilities";
const updateTypeContrat = (idContrat, data, success, error) =>
createAction(TYPE_CONTRAT_UPDATE.PUT_CALL, { idContrat, data, success,
error });
const updateConformiteContrat = (idContrat, data, success, error) =>
createAction(CONFORMITE_UPDATE.PUT_CALL, { idContrat, data, success,
error });
export default { updateTypeContrat, updateConformiteContrat};
I am trying to import as you can see variables in capital from my file actionsTypes, here is the file :
import { createPutTypes } from "../../../../../../redux/Utilities";
const TYPE_CONTRAT_UPDATE = createPutTypes("TYPE_CONTRAT_UPDATE");
const CONFORMITE_UPDATE = createPutTypes("CONFORMITE_UPDATE");
export default { CONFORMITE_UPDATE, TYPE_CONTRAT_UPDATE }
But I get an error :
Line 1: TYPE_CONTRAT_UPDATE not found in './actionsTypes' import/named
Line 1: CONFORMITE_UPDATE not found in './actionsTypes' import/named
Any help would be much appreciated.
You need to use named export instead of the default.
import { createPutTypes } from "../../../../../../redux/Utilities";
export const TYPE_CONTRAT_UPDATE = createPutTypes("TYPE_CONTRAT_UPDATE");
export const CONFORMITE_UPDATE = createPutTypes("CONFORMITE_UPDATE");
Those imports, as said from the error, should be named exports.
DEFAULT export
A default export (export default [...] is what will be imported when using import X from 'fileX'. There can be only one. No matter what you assign the import to in this case (here, you assign it to X), it will work
// fileX.js
export default Example;
You can do either
import X from 'fileX'; // works, X contains Example
import Example from 'fileX'; // same
...
NAMED exports
A named export (export const TYPE_CONTRACT = [...]) can be used as much as you want, however, the name of the import matters:
// fileX.js
export const Example = [...]
means that the import should be :
import { Example } from 'fileX'; // works properly, Example contains the export of fileX
import { X } from 'fileX'; // won't work, no way to know which export you're referring to
import Example from 'fileX'; // won't work either, this is not a default export.
I am struggling to put best practises into action, converting an existing file for Cypress testing into a more appropriate format for exporting and importing.
Currently:
support-file.js
export const1 = () => cy.get('#someId1');
export const2 = () => cy.get('#someId2');
export const3 = () => cy.get('#someId3');
export function myFunct1() {
// Do something
}
export function myFunct2() {
// Do something
}
export function myFunct3() {
// Do something
}
file-where-used.js
import {
const1, const2, const3,
myFunct1, myFunct2, myFunct3
}
// usage of the consts/functs below
I have experimented with trying to get them into a format such that I do not have to import each separately, but I cannot figure it out... I thought, perhaps wrapping all as a class and exporting that, which does work but only when using a require rather than import... And I also found difficulty in exporting my const variables...
attempt
export const1 = () => cy.get('#someId1');
export const2 = () => cy.get('#someId2');
export const3 = () => cy.get('#someId3');
class myClass {
myFunct1() {
// Do something
}
myFunct2() {
// Do something
}
myFunct3() {
// Do something
}
}
module.exports = new myClass();
You can cut your issues up in several steps.
Custom Commands/functions
Firstly you are creating custom commands like this one:
export function() {
// Do something
}
By putting that function in the file cypress/support/commands.js you don't have to import it in the integration files, but you do have to rewrite is like this:
Cypress.Commands.add('myFunct1', function () {
// Do something
})
What you end up in the integration file is this:
cy.myFunct1()
Global variables
You are assigning global variables like this:
export const1 = () => cy.get('#someId1');
export const2 = () => cy.get('#someId2');
export const3 = () => cy.get('#someId3');
Start with rewriting them to be a constant:
const const1 = () => cy.get('#someId1');
const const2 = () => cy.get('#someId2');
const const3 = () => cy.get('#someId3');
You'll always need to import them one by one, but you can combine them as long as they are in one file. You could do so by importing them into the testfile like this:
import {const1, const2, const3} from '<FILE_DIRECTORY>'
Now they are available trough the whole testfile.
I have a long set of exported constants in a file. Here's an excerpt:
...
export const COUNTER_INCREMENT_REQUESTED = 'COUNTER_INCREMENT_REQUESTED';
export const COUNTER_INCREMENT_REQUESTED_ASYNC = 'COUNTER_INCREMENT_REQUESTED_ASYNC';
export const COUNTER_DECREMENT_REQUESTED = 'COUNTER_DECREMENT_REQUESTED';
export const COUNTER_DECREMENT_REQUESTED_ASYNC = 'COUNTER_DECREMENT_REQUESTED_ASYNC';
...
Is there a way to create an array and loop through it, exporting each value?
const events = [
...
'COUNTER_INCREMENT_REQUESTED',
'COUNTER_INCREMENT_REQUESTED_ASYNC',
'COUNTER_DECREMENT_REQUESTED',
'COUNTER_DECREMENT_REQUESTED_ASYNC',
...
]
for(event of events) {
export ...
}
No this is not possible.
One of the notable feature of ES module system is that the module structure can be statically analysed. This basically prevents programatically exporting things as you wish to do, as then it would break the static analysability.
I did manage a variation on this by putting the constants in it's own file/module, then importing them into the module and looping over them there.
constants.js
export const COUNTER_INCREMENT_REQUESTED = 'COUNTER_INCREMENT_REQUESTED';
export const COUNTER_INCREMENT_REQUESTED_ASYNC = 'COUNTER_INCREMENT_REQUESTED_ASYNC';
export const COUNTER_DECREMENT_REQUESTED = 'COUNTER_DECREMENT_REQUESTED';
export const COUNTER_DECREMENT_REQUESTED_ASYNC = 'COUNTER_DECREMENT_REQUESTED_ASYNC';
index.js
import * as actions from './constants';
...
let eventEmitters = {};
for(const action in actions ) {
...
}
export default eventEmitters;