nwb
nwb copied to clipboard
insin
Use nwb with react-component and TypeScript
Hey!
How would I use TypeScript with nwb for react-components? I tried setting it up like this: https://github.com/drager/nwb-react-typescript but when I build I do not get any lib nor any es folder. Though it outputs demo and umd.
Thanks
I was able to resolve it using TypeScript's own compiler. Essentially, I replaced my build config, which was:
"build": "npm-run-all build-css build-min-css build-js",
...
"build-js": "nwb build-react-component --no-demo --copy-files --keep-proptypes",
with this:
"build": "npm run clean:ts && npm run build:all",
...
"build:ts": "tsc",
"build:all": "npm-run-all copy:css-to-lib build:ts",
I also configured a tsconfig.json file that the tsc command uses when building the output. That one looks like this:
{
"compilerOptions": {
"outDir": "build/lib",
"module": "commonjs",
"target": "es5",
"lib": ["es5", "es6", "es7", "es2017", "dom"],
"sourceMap": true,
"allowJs": true, // todo: make this false when all .js files have been converted to .ts/.tsx
"jsx": "react",
"moduleResolution": "node",
"rootDirs": ["src"],
"forceConsistentCasingInFileNames": true,
// "noImplicitReturns": true, // todo: enable this when all .js files have been converted to .ts/.tsx
// "noImplicitThis": true, // todo: enable this when all .js files have been converted to .ts/.tsx
// "noImplicitAny": true, // todo: enable this when all .js files have been converted to .ts/.tsx
// "strictNullChecks": true, // todo: enable this when all .js files have been converted to .ts/.tsx
"removeComments": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"declaration": false, // todo: make this true when all .js files have been converted to .ts/.tsx
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"esModuleInterop": true
},
"include": ["src/**/*"],
"exclude": [
"node_modules",
"build",
"build/lib",
"scripts",
"es",
"lib",
"tests/**",
".storybook/**",
".idea",
".html",
"src/**/*.test.js",
"src/**/*.test.ts",
"src/**/*.stories.js",
"src/**/*.stories.ts"
]
}
I omitted the css stuff above for brevity, let me know if this helps!
Made a working typescript seed project of writing react-component using nwb: https://github.com/Jeff-Tian/uni-alarm
But the tests are still pure js, though.
If this is still relevant.. I drafted this light boilerplate, including ts & eslint & prettier.
https://github.com/omerman/nwb-boilerplate
As a complete nwb newb, but a Typescript lover, how would I use your boilerplate @omerman ?
@lekoaf well I haven't used it since I created it the repo. I believe you can simply fork it and use it as your own. But I'd suggest creating a fresh nwb repo and try and copy TS related stuff ( and eslint and prettier if you want it as well :) )
@omerman I am not sure what happens. But your boilerplate doesn't generate files in es and lib directories.
After running yarn run build, got:
yarn run v1.22.4
$ nwb build-react-component
✔ Creating ES5 build
✔ Creating ES modules build
✔ Creating UMD builds
File sizes after gzip:
umd/nwb-boilerplate.js 1.52 KB
umd/nwb-boilerplate.min.js 710 B
✔ Building demo
File size after gzip:
demo/dist/main.166885c5.js 3.08 KB
✨ Done in 12.83s.
.
├── CONTRIBUTING.md
├── README.md
├── demo
│ ├── dist
│ │ ├── index.html
│ │ ├── main.166885c5.js
│ │ ├── main.166885c5.js.map
│ │ ├── runtime.3b9dd18b.js
│ │ └── runtime.3b9dd18b.js.map
│ ├── src
│ │ └── index.tsx
│ └── umd-test
│ └── index.html
├── es
├── lib
├── nwb.config.js
├── package.json
├── src
│ ├── comp.tsx
│ └── index.tsx
├── tests
│ └── index.test.js
├── tsconfig.json
├── umd
│ ├── nwb-boilerplate.js
│ ├── nwb-boilerplate.min.js
│ └── nwb-boilerplate.min.js.map
└── yarn.lock
@mrdulin My fork is kind of very very old.. I'd suggest using a fresh nwb template, and copy the TS relevant stuff off my repo.. Back when I created the boilerplate, I was expecting it to be some kind of a temporary solution until someone would take over.. or nwb would add a way to create a TS template project.. Now its kind of an abandoned boilerplate.. You are more than welcome to take over and make it work, sorry I can't be of any more help to you
For anyone still interested I have made a working template from the latest nwb new react-app.
Not the tests though, needs further config.
https://github.com/nlukjanov/nwb-ts-template
Hope this is helpful.
@omerman I am not sure what happens. But your boilerplate doesn't generate files in
esandlibdirectories.After running
yarn run build, got:yarn run v1.22.4 $ nwb build-react-component ✔ Creating ES5 build ✔ Creating ES modules build ✔ Creating UMD builds File sizes after gzip: umd/nwb-boilerplate.js 1.52 KB umd/nwb-boilerplate.min.js 710 B ✔ Building demo File size after gzip: demo/dist/main.166885c5.js 3.08 KB ✨ Done in 12.83s.. ├── CONTRIBUTING.md ├── README.md ├── demo │ ├── dist │ │ ├── index.html │ │ ├── main.166885c5.js │ │ ├── main.166885c5.js.map │ │ ├── runtime.3b9dd18b.js │ │ └── runtime.3b9dd18b.js.map │ ├── src │ │ └── index.tsx │ └── umd-test │ └── index.html ├── es ├── lib ├── nwb.config.js ├── package.json ├── src │ ├── comp.tsx │ └── index.tsx ├── tests │ └── index.test.js ├── tsconfig.json ├── umd │ ├── nwb-boilerplate.js │ ├── nwb-boilerplate.min.js │ └── nwb-boilerplate.min.js.map └── yarn.lock
Did you figure it out?
Anyone who is still scratching their heads with this, checkout - https://tsdx.io/
It bundles typescript projects to exportable npm components out of the box!
I just tried out tsdx and found that the test runner had issues with stale code. I would update a test file and rerun the tests but the code being run didn't seem to be updated. I'd need to rm -rf the dist folder and even then that didn't help much. Seems like a nice idea but the testing left a bad taste in my mouth. Maybe try them again in 6 months?
what if i want to just do nwb react run index.tsx (note tsx). there is no way to run react template with typescript support?
