Develop Reference

How to export two modules/namespaces with same name from multiple files in typescript in index.d.ts?

I'm building a new npm package, I have two different typescript files, they contain namespaces and modules with same name 'X'
at the end of each file i declare :
export default X;
I want to import them both into index.d.ts file and export them so the outer files (the files that import this repository/package) can import and use X modules and namespaces
But when I import them both:
import X from "./file1"
import X from "./file2"
I get this error:
Duplicate identifier 'X'
Is there a way to have the same namespace in two different typescript file and export them to outer packages?

Yes, there is - using aliases.
file1.ts
class A{}
export default A;
file2.ts
class A{}
export default A;
index.ts
import { default as firstOne } from './file1';
import { default as secondOne } from './file2';
console.log(firstOne, secondOne);

Typescript npm publish with subpath exports

I am trying to create a npm package with a bit uncommon use case. I have two typescript files error.ts and filehandle.ts. These modules have their classes. After package is published, I want to import specific modules separately.
Currently, I have imported all in one.
import {ErrorClassA, ErrorClassB, Reader, Writer } from 'package';
Since errors and file handles are not similar modules, I want to import like below.
import { ErrorClassA, ErrorClassB } from 'package/error'
import { Reader, Writer } from 'package/filehandle'
error and filehandles are given beow.
error.ts
export class ErrorClassA {
....
}
export class ErrorClassB {
....
}
filehandle.ts
export class Reader {
}

How to properly export/import modules for library usage in javascript

I want to write a javascript library with two files:
snabbpixi.js
export function init() {
}
pixiapi.js
export function createElement() {
}
I want to use this library like this:
import { init } from 'snabbpixi';
import { createElement } from 'snabbpixi/pixiapi';
If I don't do anything and set the package.json for library as:
{
"main": "src/snabbpixi.js"
}
second import doesn't work (import { createElement } from 'snabbpixi/pixiap')
If I compile this library and export as umd format using webpack it also doesn't work.
How can I configure my library so I can import like this:
import { createElement } from 'snabbpixi/pixiap'

I normally do this sort of thing in TypeScript rather than straight JavaScript, but hopefully this works in basically the same way...
Try creating a new file (typically named index.js), with contents like this:
export * from './snabbpixi'; // Adjust paths as needed for your particular case.
export * from './snabbpixi/pixiapi';
Then make index.js your main.
The import you would use would then be flattened-out, however, looking more like:
import { init, createElement } from 'snabbpixi';

When you are using import { Something } from 'somewhere' you are calling on a named export from a given file or directory.
If the two files are in different directories then you can add an index.js file to each directory and then use export { default as function } from './file'
To do this you would have to export the default file from pixiapi and snabbpixi.
If you have both files importing into your index.js then you will still want to export them as defaults. But then you would do the following..
import file1 from './file1'
import file2 from './file2'
export default {
file1,
file2,
}
This will allow you to use the named imports as well and keep them in the same directory

Export JS module without importing it first

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.

ES6 modules: How to automatically re-export all types in the current directory from index.js?

I have lots of code like this scattered around index.js files throughout my React Native project:
import Restaurant from './Restaurant';
import Store from './Store';
import Vineyard from './Vineyard';
import Wine from './Wine';
export {
Restaurant,
Store,
Vineyard,
Wine
};
It's very repetitive and tedious to write out. Is there a way I can automatically re-export all of the other files in the current working directory from index.js? (note I'm also using Flow in my project so any solution should preserve the type information it can infer.)
Thanks.

export * from './Restaurant';
export * from './Store';
By using the above syntax, you can access all exported properties from each component and export them directly.
This is a common pattern when you grouping all Actions in each individual Action file inside index.js and exporting them directly. You can have a look at the github repo

You can also use this pattern if you'd like:
export { default } from './Comp'
export { default as CompHeader } from './CompHeader'
export { default as CompContent } from './CompContent'
// Usage
import Comp, { CompHeader, CompContent } from './component/Comp'