journal 2020 08 24: Giving up Hegel, using TypeScript

Yesterday I tried out doing some simple things using Hegel, but came across a tonne of errors, which I referred to here:

• https://github.com/easoncxz/twitanalysis/issues/3#issuecomment-678791461

Hegel's philosophy (safety, strictness, powerful type-inference) suits my taste much better; however I need something that works right now. Unfortunately, that means I have to use TypeScript.

TypeScript etc

I've had more success today trying to set up TypeScript, Rollup, and ESLint manually. I basically started with the huge tsconfig reference. Here is the relevant reading:

TypeScript:

• The huge tsconfig.json reference page, which I read through slowly, picking the options I want: https://www.typescriptlang.org/tsconfig
• The JSDoc reference, allowing me to type-check .js source files: https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html
• Type definitions for DOM: https://www.typescriptlang.org/docs/handbook/dom-manipulation.html#documentgetelementbyid

Rollup:

• My comment on Rollup's ticket: https://github.com/rollup/rollup/issues/487#issuecomment-679099914 , basically using a Browserify-like plugin to handle React:
  • https://github.com/calvinmetcalf/rollup-plugin-node-globals

ESLint:

• Intersecting TypeScript: https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/README.md
• Intersecting React: https://www.npmjs.com/package/eslint-plugin-react

Workflow

I run everything manually; no watch mode. I point Rollup's input param to TypeScript's output directory, and use tsc && rollup -c (via npm run or npx) as my build command.

There is no consideration given to minification, almost not even source maps. This shouldn't be an issue, as I plan for a workflow driven by ts-node REPL and tests, and that when a bundle is built, it should "Just Work".

With Rollup set up properly, I no longer have that well-known ( https://github.com/rollup/rollup/issues/487 ) and yet nondescript error:

Uncaught ReferenceError: process is not defined

Beforehand:

After adding rollup-plugin-node-globals:

This is sufficiently good. I can carry on with doing my usual TypeScript things, and starting to explore React per-se.