Nwb: Use nwb with react-component and TypeScript

[drager]

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

[haldunanil]

@drager Did you ever resolve this?

[drager]

@haldunanil: I did not...

[haldunanil]

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!

[Jeff-Tian]

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.

[omerman]

If this is still relevant.. I drafted this light boilerplate, including ts & eslint & prettier.

https://github.com/omerman/nwb-boilerplate

[lekoaf]

As a complete nwb newb, but a Typescript lover, how would I use your boilerplate @omerman ?

[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 :) )

[mrdulin]

@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

[omerman]

@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

[nlukjanov]

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.

[aeciolevy]

@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

Did you figure it out?

[vivekiyer114]

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!

[tnrich]

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?

[Eliav2]

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?