I am using brace which is a npm module for theming in ace editor.
Currently, I am importing each theme using
import 'brace/theme/solarized_dark';
How do I import all the themes as I need to give the user the option to pick any theme.
Create one brace/themes/index.js and export the things that you want to acess
export * as theme1 from './theme1';
export * as theme2 from './theme2';
....
Then import from that folder : (name is index.js so no need to give full path to the file)
import * as SolDark 'brace/themes'; // by default get index.js
Then you can access each method like :
SolDark.theme1;
SolDark.theme2;
I don't know how does your file structure look like, but lets assume it is something like that
|brace
|---theme
| |---theme1
| |---theme2
| | ...
| |---solarized_dark
Then you could create index.js in the theme folder and inside it:
//index.js
export {default as theme1} from './theme1';
export {default as theme2} from './theme2';
assuming you have default exports.
Then in other files you just simply do:
//other_file.js
import {theme1, theme2} from 'someRelativePath/brace/theme/index'
or
import * as themes from 'someRelativePath/brace/theme/index'
Related
We're using a folder structure like this
components
| Button.js
| Nav.js
| ...etc
| index.js
somefolder
|somefile.js
in the inderx file we're importing every component and reexporting it like this
// index.js
import Button from './Button'
import Nav from './Nav'
export {Button, Nav}
this way we can import many components into a file like this
// somefile.js
import {Button, Nav} from '../components'
Maintaining that index file is a bit of a pain though and discourages flexible use of components. I know that Webpack can import many files with a syntax like this
function requireAll(r) { r.keys().forEach(r); }
requireAll(require.context('./components/', true, /\.js$/));
however, I didn't yet find a way to reexport all of these components to use them like above.
The desired outcome is to replace the index.js file with something that automates the process of bundling all the files from a folder without having to add every file manually.
I think getting rid of the file index will not be the best solution and may cause questions from other developers. But I can offer a slightly more simplified way:
index.js:
export * from './some-component1.js';
export * from './some-component2.js';
some-component1.js:
export {SomeComponent1};
some-component2.js:
export {SomeComponent2};
I have the following structure for my JS components:
/components
/Menu
/Menu.js
/Menu.test.js
/index.js
/MenuItem
/MenuItem.js
/MenuItem.test.js
/index.js
The idea being we can have a folder for each component that can contain a test (and possible other files) and then if we just want to import the component we can rely on the use of the index.js to handle the directory import without having to reference the class inside the folder direct.
So for example:
Menu.js
class Menu extends Component {
// ... more code ..
}
export default Menu;
index.js
export default from './Menu';
And then it can be used like:
import Menu from './components/Menu';
However I found that this didn't work and it couldn't find the module...
So to fix this I had to import Menu into the index.js before export:
import Menu from './Menu';
export default Menu;
But having looked at how other projects have structured their code, I have seen that they are using the former without having to import again...
For example: https://github.com/IBM/carbon-components-react/blob/master/src/components/Breadcrumb/index.js
See how they have exported from the Breadcrumb without having to do the import first... how have they achieved this?
If you check the provided example, you will see they use
this babel plugin.
So you can add one to your babel plugin stack.
Alternatively, you can look into using just export {default} from "./destination"; form which works as is.
I was browsing through this repo on Github and was trying to comprehend the working of the code
Here, the author (or programmer) have mentioned import * at multiple places so I am trying to comprehend and understand how import * work?
First in Game.js file of his repo he have mentioned/written like this
import * as actions from '../actions';
In VS Code, when if I click on '../actions using command It is redirecting me to this file -> index.js
then in Index.js they have something like this
import * as ActionTypes from './action-types';
when I click on ./action-types it redirects me to here action-types.js
I went through firefox docs but I wasn't able to clearly make sense for the first example like for one, the action folder contains multiple files and how does import * as actions from '../actions'; mean index.js file
While i get he have called/referenced the functions using actions.functionName() or ActionType.TypeName
My Prime question remains
how does import * as actions from '../actions'; mean index.js file ?
The import * as name syntax imports all exported content of a javascript file.
For example, if you want to import an entire module's contents, then access the doAllTheAmazingThings() function
import * as myModule from '/modules/my-module.js';
myModule.doAllTheAmazingThings();
From the docs
Import in js is new syntax of ES6 to import a module it has the same work of require but its easier to filter what do you want in a module
In your example you import * as actions from '../actions'; you import all function from ../actions file
its same to do const actions = require('../actions')
but its easier to manage what you want
this syntax is not work on all browser so be sure to use transpiler with babel or other
you can see this syntax in python too
When you reference a directory in an import statement, it looks and loads the index.js file in that directory. What I usually do there is export classes and functions under that directory in a grouped object, so they can be easily accessed:
For instance in index.js I export sth like:
{
Class1,
method1
}
where each is imported as such:
import Class1 from './Class1';
So they just group the classes/methods/... that are in files in the directory.
Then you can easily access it as such:
import { Class1, method1 } from './mymodule';
vs
import Class1 from './mymodule/Class1';
In my Angular 2 app, I have a settings.js file with various exports that I want to use throughout the application:
exports.httpPort = 9000;
exports.httpsPort = 1435;
exports.segmentID = 1;
I want to export some of these into my ts component file query.component.ts, but I'm at a loss on what the correct syntax to do so is.
I see that many .js files have something along the lines of
var settings = require('../../settings');
which grabs the settings file and then
settings.dbConfig
Which calls the export, but it doesn't work on my component file.
This is my project file structure:
component.ts
- project/web/src/app/component.ts
-Place where I want to import an export from settings.js.
settings.js - project/server/settings.js
-File where I want to make the export.
In the component class you can do:
...
import {httpPort} from "../../../server/settings.js"
...
I am in the process of refactoring my structure of import and export of modules. The goal here is to import UserActions through index.js, in multiple files (namely, in UserReducer.js and Home.js).
the project's tree structure looks like:
js
|_ modules
| |_ user
| | |_index.js
| | |_UserActions.js
| | |_UserReducer.js
| | |_UserSagas.js
|_ containers
| |_ Home.js
This is the content of modules/user/index.js:
import * as UserActions from './UserActions'
import * as UserSagas from './UserSagas'
import UserReducer from './UserReducer'
export { UserActions, UserReducer, UserSagas }
Initially the actions were being imported directly from the UserActions file, in both UserReducer.js and Home.js as follows:
in UserReducer.js: import * as UserActions from './UserActions'
in Home.js: import * as UserActions from 'modules/user/UserActions'
And everything was working correctly. Now I want these two imports to use the index.js file above.
step 1)
inside UserReducer, i change the import line from:
import * as UserActions from './UserActions'
to:
import { UserActions } from '.' // fetches the named export from index.js
This is working.
step 2)
inside Home.js, i change the import line from:
import * as UserActions from 'modules/user/UserActions'
to:
import { UserAction } from 'modules/user'
Now webpack doesn't complain but the browser throws error in UserReducer, that UserActions is undefined.
Finally:
using the import { UserActions } from 'path_to_index.js' notation works, as long as I use it in one place only (could be in either file).
As soon as I use it in both places, all hell breaks loose...
Any ideas? Thanks
Edit: I realize that the errors above occur only if the user/index.js imports and exports UserSagas as well. If I import the UserSagas directly from their file instead of adding it to index.js, the app runs correctly.
Turns out #estus is correct in that even importing another exported part from index.js would cause circular dependency.
I wanted index.js to be the unique interface to users, but it looks like that will only apply to components outside of "users". Internally, the import will be directly from the actions file