Skip to content

Commit 2621687

Browse files
committed
Add README
1 parent 401d121 commit 2621687

File tree

1 file changed

+75
-0
lines changed

1 file changed

+75
-0
lines changed

README.md

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# typescript-plugin-namespace-import
2+
3+
A [TypeScript Language Service Plugin](https://github.com/microsoft/TypeScript/wiki/Writing-a-Language-Service-Plugin) to insert [Namespace Import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#import_an_entire_modules_contents) automatically.
4+
5+
## Motivation
6+
7+
We often use an object as a namespace.
8+
9+
```typescript
10+
// someLogics.ts
11+
export const someLogics = {
12+
calculate() { ... },
13+
print() { ... },
14+
};
15+
16+
// main.ts
17+
import { someLogics } from "./someLogics.ts";
18+
19+
someLogics.calculate()
20+
// `someLogics` is auto-completable without import!
21+
```
22+
23+
This is good way in developer experience, but it obstruct tree-shaking. In this case, `someLogics.print` will be included in bundle although it's not used.
24+
25+
To keep tree-shaking working, we can use [Namespace Import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#import_an_entire_modules_contents).
26+
27+
```typescript
28+
// someLogics.ts
29+
export function calculate() { ... }
30+
export function print() { ... }
31+
32+
// main.ts
33+
import * as someLogics from "./someLogics.ts";
34+
35+
someLogics.calculate()
36+
// `someLogics` is NOT auto-completable without import :(
37+
```
38+
39+
Now we can tree-shake `someLogics.print`. However, developer experience get worse because we can't auto-complete `someLogics` without import statement. We need to write import statement by ourselves.
40+
41+
typescript-plugin-namespace-import resolves this problem by making Namespace Import auto-completable.
42+
43+
## Installation
44+
45+
Install with npm/yarn.
46+
47+
```sh
48+
npm install -D typescript-plugin-namespace-import
49+
# or yarn add -D typescript-plugin-namespace-import
50+
```
51+
52+
Then add this plugin in `tsconfig.json`.
53+
54+
```json
55+
{
56+
"compilerOptions": {
57+
"plugins": [
58+
{
59+
"name": "typescript-plugin-namespace-import",
60+
"options": {
61+
"paths": ["src/logics"]
62+
}
63+
}
64+
]
65+
}
66+
}
67+
```
68+
69+
`paths` option is required. See below for detail.
70+
71+
## Options
72+
73+
### paths (required)
74+
75+
Specify directory in relative path to the project's root (`tsconfig.json`'s dir). All `.ts` or `.js` files in the directories can be Namespace Imported with auto-completion.

0 commit comments

Comments
 (0)