Add support for typescript #11

marvinhagemeister · 2017-05-20T07:04:03Z

Currently a work an progress. Everything is compiling so far, but I get an exception at runtime.

Fixes #10

Tasks:

Compile ts and tsx files
allow user to extend tsconfig with stricter rules
Add cli flag for --typescript
~~support css modules via import syntax~~ This is a general TS issue. For now require() calls work
~~install typings for preact by default~~ Preact already includes typings 👍

marvinhagemeister · 2017-05-20T07:18:18Z

Got most of it working 🎉 I'm surprised how easy that was.

developit · 2017-05-20T14:41:06Z

src/lib/ts-config.js

@@ -0,0 +1,10 @@
+export default {
+  ompilerOptions: {


Missing a c here 😸

whoops, nice find! 🙈

developit · 2017-05-20T14:42:00Z

src/lib/webpack-config.js

+						test: /\.tsx?$/,
+						use: [
+							{
+								loader: resolve(__dirname, './npm-install-loader'),


Awwww yeah. So awesome.

developit · 2017-05-20T14:43:18Z

Like with the less and sass installs, we should let people provide a --typescript option to preact create that pre-installs the dependencies.

marvinhagemeister · 2017-05-20T14:52:08Z

That's a great idea, I like 👍 💯

developit · 2017-05-20T15:21:07Z

We can do that bit after this PR if you want.

jmfirth · 2017-05-20T16:11:35Z

src/lib/webpack-config.js

+									useBabel: true,
+									babelOptions: createBabelConfig(env),
+									useCache: true,
+									configFileName: resolve(__dirname, 'ts-config.js'),


tsconfig.json is the standard config file name. Is there any particular reason for requiring a non-standard config file?

I know that it is the standard name in the typescript ecosystem, same as with .babelrc for babel. Reason I went with this naming scheme is to be consistent with the other files in preact-cli. There isn't a .babelrc either, but babel-config.js instead. So I went with ts-config.js.

Plan is to use a user defined tsconfig.json if it is present at the projects root.

marvinhagemeister · 2017-05-20T16:53:18Z

@developit I was just looking at how the --sass switch is implemented, but I can only find the configuration for yargs, not the code that preinstalls sass. When running preact create --sass foo any sass related tools aren't preinstalled 😕 They'll only be added through npm-install-loader once webpack comes across a sass file.

developit · 2017-05-20T19:29:02Z

Ah yeah I should have mentioned that one we didnt' get around to adding. It'd just be conditionally appending to the list of things to install in the new repo.

edit: alright I just submitted a PR that adds those flags, should be easy to add the ts ones too:
#21

marvinhagemeister · 2017-05-22T09:33:02Z

@jmfirth Seems like awesome-typescript-loader wants a *.json after all, otherwise the custom config is ignored s-panferov/awesome-typescript-loader@ebe24d98#diff-b866b3d3c0a8d899e21c529fd7d86c9cR153 So I renamed it back to tsconfig.json.

@developit I think it's ready to be merged now 🎉

developit · 2017-05-25T02:02:10Z

src/lib/webpack-config.js

+								options: {
+									sourceMap: true,
+									useBabel: true,
+									babelOptions: createBabelConfig(env),


I wonder - if we enabled babel-loader for /.tsx?/ files, could we drop the useBabel and config here? TS files would get passed through awesome-typescript-loader (thanks to enforce:pre) and then later transformed from ES2017 to JS-of-yesteryear via the existing babel-loader rule.

Thoughts?

In theory that should work, but somehow babel-loader is skipped if I don't explicitly add the babel config here. Perhaps @s-panferov or @TheLarkInn may help here.

It would require adding .tsx? to the babel-loader regex (the extension is unchanged).

I tried that, but somehow module parsing fails to pass through babel:

./components/hello.tsx Module parse failed: /Users/marvinhagemeister/dev/github/marvinhagemeister/preact-cli/lib/lib/npm-install-loader.js??ref--5-0!/Users/marvinhagemeister/dev/test/preact-cli-ts/boof/node_modules/awesome-typescript- loader/dist/entry.js??ref--5-1!/Users/marvinhagemeister/dev/test/preact-cli-ts/boof/components/hello.tsx Unexpected token (2:11) You may need an appropriate loader to handle this file type. | export function Hello() { | return <h1>Hello World</h1>; | } | @ /Users/marvinhagemeister/dev/github/marvinhagemeister/preact-cli/~/babel-loader/lib?{"cacheDirectory":true,"plugins":["/Users/marvinhagemeister/dev/github/marvinhagemeister/preact-cli/~/babel-plugin-transform -object-assign/lib/index.js","/Users/marvinhagemeister/dev/github/marvinhagemeister/preact-cli/~/babel-plugin-transform-decorators-legacy/lib/index.js","/Users/marvinhagemeister/dev/github/marvinhagemeister/prea ct-cli/~/babel-plugin-transform-react-constant-elements/lib/index.js","/Users/marvinhagemeister/dev/github/marvinhagemeister/preact-cli/~/babel-plugin-transform-react-remove-prop-types/lib/index.js",["/Users/mar vinhagemeister/dev/github/marvinhagemeister/preact-cli/~/babel-plugin-transform-react-jsx/lib/index.js",{"pragma":"h"}],["/Users/marvinhagemeister/dev/github/marvinhagemeister/preact-cli/~/babel-plugin-jsx-pragm atic/jsx-pragmatic.js",{"module":"preact","export":"h","import":"h"}]],"presets":[["/Users/marvinhagemeister/dev/github/marvinhagemeister/preact-cli/~/babel-preset-env/lib/index.js",{"loose":true,"modules":false ,"uglify":true,"browsers":["> 1%","Last 2 versions","IE >= 9"],"exclude":["transform-regenerator","transform-es2015-typeof-symbol"]}],"/Users/marvinhagemeister/dev/github/marvinhagemeister/preact-cli/~/babel-pre set-stage-0/lib/index.js"]}!./routes/home/index.js 11:0-47 @ ./routes/home/index.js @ ./index.js @ /Users/marvinhagemeister/dev/github/marvinhagemeister/preact-cli/lib/lib/entry.js @ multi /Users/marvinhagemeister/dev/github/marvinhagemeister/preact-cli/lib/lib/entry webpack-dev-server/client?http://0.0.0.0:8080/ webpack/hot/dev-server?http://0.0.0.0:8080/

We could compile the jsx part directly via ts, but I'm not sure if babel jsx optimizations will work anymore

I think the only one we have enabled is hoisting, which rarely gets triggered.

that's with useBabel turned off for awesome-ts-loader?

Sorry for not getting back any sooner, I was on vacation the past week. Yep, that's with useBabel turned off. I'm not sure why the pipelining fails. My initial assumption was that plugins in webpack enforced via pre are executed before everything else and that this would turn .ts into .js and then the babel loader would match. Somehow this is not the case here. I could try swapping awesome-typescript-loader with ts-loader. The latter seems to have made huge improvements in the last months.

ethanroday · 2017-06-26T22:46:04Z

@marvinhagemeister Any idea when this might be ready to go in?

pqr · 2017-07-01T10:08:29Z

This is a great ticket, really looking for starting develop with preact-cli and TypeScript! Guys, my +100 internets for you!

marvinhagemeister · 2017-07-01T11:53:37Z

@ethanroday @pqr I'm not sure when this will be ready to merge again. Just did a rebase against master, but it seems like in the time between opening this PR and now a few internals have changed. File changes are not picked up by webpack when changing a ts-file. Will have to dig deeper as to what's causing this. If anyone wants to chime in: Help is always greatly appreciated. I'm currently limited with time.

developit · 2017-07-01T17:57:15Z

src/lib/webpack/webpack-base-config.js

+									useBabel: true,
+									babelOptions: createBabelConfig(env),
+									useCache: true,
+									configFileName: tsconfig,


I wonder if tsconfig.json being one directory level up is what's affecting this? We moved the webpack modules into lib/webpack/* but tsconfig is still in lib/

As a side-note, it's working fine for me with ts-loader via this preact.config.js hack (with tsconfig.json in the root of the project):

export default function (config, env, helpers) { config.module.loaders.push({ enforce: "pre", test: /\.tsx?$/, loader: "ts-loader" }); }

@wub How is your experience so far with ts-loader. I've only used them a few months back and awesome-typescript-loader was a lot faster back then.

@developit I'm honestly thinking of closing this PR as now the ability to extend the webpack config has been added. That way the core cli remains lean and a config like @wub posted above is as easy as it gets.

@developit @marvinhagemeister should I add above to the preact.config.js recipes and abandon this PR ?

It would be great to have some example how to setup preact-cli to work with TypeScript with css modules
I am struggling with this 💢

@rkostrzewski yep.

@porfirioribeiro CSS-Modules should work out of the box. The only difference is that you'll have to revert to require statements:

// styles appears as type any, because ts has no idea of `.css` files const styles = require("foo.css");

@marvinhagemeister awesome-typescript-loader is still much faster, although you can reach similar speeds with ts-loader with the fork checker plugin. I'm going to switch back to ATL, because all this stuff (including babel support) is "first-class."

prabirshrestha · 2017-07-08T06:40:30Z

src/commands/create.js

+				] : []),
+
+				// install typescript setup if --typescript
+				...(argv.typescript ? [


Since noEmitHelpers is set to true, can we also add tslib as dependency?

Since babel is applied right after the ts step and brings its own set helpers, I don't think adding the weight of another helper library is beneficial.

prabirshrestha · 2017-07-08T06:42:23Z

src/lib/tsconfig.json

+    "noEmitHelpers": true,
+    "module": "es2015",
+    "moduleResolution": "node",
+    "target": "es2017",


Should this be set to 2015?

Nah, the ts should compile the latest js version possible because babel is applied right after that anyways.

developit · 2017-07-17T02:06:09Z

Not to resurrect this - but would anyone be up for releasing a preact-cli-plugin-typescript? You can see a lovely reference plugin written by @SaraVieira here - it's basically just what you'd put in your preact.config.js but as simple as an install. In a future version of preact-cli (2.0 probably), we'll ship a way to add plugins just by dropping them into an Array in your package.json. That would make TypeScript nice and easy to support :)

wub · 2017-07-18T01:50:28Z

@developit I've done the first cut here: https://github.com/wub/preact-cli-plugin-typescript

Would appreciate any feedback/pull requests from the community.

variable-content · 2017-08-29T05:13:28Z

It would nice to have the CLI generate a sample app that uses .ts/.tsx files.

That way developers that want to use TS have an application that runs out of the box without having to change file extensions and fix all the compilation errors; update css imports to use require, and missing type annotations, etc.

lukeed · 2017-08-29T05:26:47Z

With #329, we're moving to remote/foreign templates. This means that you can install any PreactCLI-compatible template to use what you like & still get all the great benefits of the CLI commands & configs.

That said, I'm sure someone (likely from this PR) will volunteer to maintain a TS CLI starter. 👍

variable-content · 2017-08-29T05:35:15Z

Nice, that looks perfect

marvinhagemeister force-pushed the typescript branch from 9a1fe84 to ac2e208 Compare May 20, 2017 07:17

marvinhagemeister changed the title ~~WIP: Add support for typescript~~ Add support for typescript May 20, 2017

marvinhagemeister changed the title ~~Add support for typescript~~ WIP: Add support for typescript May 20, 2017

developit reviewed May 20, 2017

View reviewed changes

jmfirth reviewed May 20, 2017

View reviewed changes

marvinhagemeister force-pushed the typescript branch 3 times, most recently from 6643b61 to e5a8c12 Compare May 22, 2017 08:42

marvinhagemeister force-pushed the typescript branch from 49130ee to 71e3692 Compare May 22, 2017 09:40

marvinhagemeister changed the title ~~WIP: Add support for typescript~~ Add support for typescript May 22, 2017

developit reviewed May 25, 2017

View reviewed changes

marvinhagemeister force-pushed the typescript branch 2 times, most recently from 62da851 to 328bfce Compare July 1, 2017 11:37

marvinhagemeister added 2 commits July 1, 2017 13:38

Add support for typescript

4d4e493

Add cli flag for --typescript

7f029c2

marvinhagemeister force-pushed the typescript branch from 328bfce to 7f029c2 Compare July 1, 2017 11:38

developit reviewed Jul 1, 2017

View reviewed changes

prabirshrestha reviewed Jul 8, 2017

View reviewed changes

marvinhagemeister closed this Jul 14, 2017

Uh oh!

Add support for typescript #11

Add support for typescript #11

Uh oh!

Conversation

marvinhagemeister commented May 20, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

marvinhagemeister commented May 20, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

developit commented May 20, 2017

Uh oh!

marvinhagemeister commented May 20, 2017

Uh oh!

developit commented May 20, 2017

Uh oh!

jmfirth May 20, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

marvinhagemeister May 20, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

marvinhagemeister commented May 20, 2017

Uh oh!

developit commented May 20, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

marvinhagemeister commented May 22, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

developit May 26, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ethanroday commented Jun 26, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pqr commented Jul 1, 2017

Uh oh!

marvinhagemeister commented Jul 1, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

wub Jul 4, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

marvinhagemeister commented May 20, 2017 •

edited

Loading

marvinhagemeister commented May 20, 2017 •

edited

Loading

jmfirth May 20, 2017 •

edited

Loading

marvinhagemeister May 20, 2017 •

edited

Loading

developit commented May 20, 2017 •

edited

Loading

developit May 26, 2017 •

edited

Loading

ethanroday commented Jun 26, 2017 •

edited

Loading

wub Jul 4, 2017 •

edited

Loading