Skip to content

Add support for typescript #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
marvinhagemeister wants to merge 2 commits into from
Closed

Add support for typescript #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4d4e493
Add support for typescript
marvinhagemeister May 20, 2017
7f029c2
Add cli flag for --typescript
marvinhagemeister Jul 1, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions src/commands/create.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,11 @@ export default asyncCommand({
type: 'boolean',
default: false
},
typescript: {
description: 'Pre-install TypeScript support',
type: 'boolean',
default: false
},
install: {
description: 'Install dependencies',
type: 'boolean',
Expand Down Expand Up @@ -136,6 +141,12 @@ export default asyncCommand({
...(argv.less ? [
'less',
'less-loader'
] : []),

// install typescript setup if --typescript
...(argv.typescript ? [
Copy link

@prabirshrestha prabirshrestha Jul 8, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

@marvinhagemeister marvinhagemeister Jul 8, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

'typescript',
'awesome-typescript-loader'
] : [])
].filter(Boolean));

Expand Down
11 changes: 11 additions & 0 deletions src/lib/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"compilerOptions": {
"noEmitHelpers": true,
"module": "es2015",
"moduleResolution": "node",
"target": "es2017",
Copy link

@prabirshrestha prabirshrestha Jul 8, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be set to 2015?

Copy link
Member Author

@marvinhagemeister marvinhagemeister Jul 8, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

"noImplicitAny": false,
"sourceMap": true,
"jsx": "preserve"
}
}
34 changes: 34 additions & 0 deletions src/lib/webpack/webpack-base-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,9 @@ export default (env) => {
let babelrc = readJson(resolve(cwd, '.babelrc')) || {};
let browsers = env.pkg.browserslist || ['> 1%', 'last 2 versions', 'IE >= 9'];

// use user specified tsconfig.json if present
let tsconfig = resolve(cwd, 'tsconfig.json');

return group([
setContext(src('.')),
customConfig({
Expand Down Expand Up @@ -97,6 +100,37 @@ export default (env) => {
}
}),

// TypeScript
customConfig({
module: {
loaders: [
{
enforce: 'pre',
test: /\.tsx?$/,
use: [
{
loader: resolve(__dirname, './npm-install-loader'),
options: {
modules: ['typescript', 'awesome-typescript-loader'],
save: true
}
},
{
loader: 'awesome-typescript-loader',
options: {
sourceMap: true,
useBabel: true,
babelOptions: createBabelConfig(env),
useCache: true,
configFileName: tsconfig,
Copy link
Member

@developit developit Jul 1, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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/

Copy link

@wub wub Jul 4, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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"
	});
}

Copy link
Member Author

@marvinhagemeister marvinhagemeister Jul 8, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.

Copy link
Collaborator

@rkostrzewski rkostrzewski Jul 12, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link

@porfirioribeiro porfirioribeiro Jul 13, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 💢

Copy link
Member Author

@marvinhagemeister marvinhagemeister Jul 14, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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");

Copy link

@wub wub Jul 17, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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."

}
}
]
}
]
}
}),

// LESS, SASS & CSS
customConfig({
module: {
Expand Down