search

philcockfield / ui-harness

Create, isolate and test modular UI components in React.
http://uiharness.com
MIT License
268 stars 14 forks source link

Support components written in TypeScript #69

Closed frederickfogerty closed 8 years ago

frederickfogerty commented 8 years ago

Opening for discussion.

Motivation: We're both using TS, or are about to, so we need this if we are going to start writing React in TS.

Alternatives: Use flow

Options

1. Use TS compiler for everything

The TS compiler is able to compile normal ES6/7 JS files as well (including async/await), and so we can just compile the ui-harness source with it. We can still use webpack, so we still get hot reloading and the dev server. ts-loader.

👍 simple 👍 webpack 👎 will break support for existing .js files with unsupported syntax (e.g. object spread, destructuring) 👎 can't use babel transforms

2. Use TS compiler in conjunction with Babel

We selectively transpile .ts files to ES6 .js files using the TS compiler, and then use Babel and Webpack as normal to compile the type-stripped TS along with any .js files. I have a gulp workflow which does this. Speed is not really an issue as it only recompiles the changed files.

👍 webpack 👍 existing .js that work with Babel will still work 👎 more complex

3. Force users to deliver their own JS

Just require the user to compile .js files on their own, using an editor watcher or something. I don't like this.

@philcockfield keen to hear your thoughts

philcockfield commented 8 years ago

Hey @frederickfogerty - good layout of options. Here's some thoughts.

Options 3 is a non-starter. UIHarness needs to make it easy/self-contained.

My feeling is that Option 2 is the way to go (the "yes/and" option). Doesn't feel like it would be too complex, just adds a pre-compile step of getting the .ts into .js before the builder kicks off.

frederickfogerty commented 8 years ago

I've been having a bash at this for the last few hours, and I've been hitting some pretty massive tech roadblocks. The one I'm working on right now is the requiring of all the modules from the server script to set up the BDD environment, as the babel code can't parse the typescript code, of course.

philcockfield commented 8 years ago

We could possibly drop the server-side parsing of the specs.

frederickfogerty commented 8 years ago

@philcockfield what does that do? Specifically https://github.com/philcockfield/ui-harness/blob/master/src/server/paths.js#L94. Commenting L94-L96 make it work, without having any (noticeable) impact on functionality.