add typescript template #963

swyxio · 2019-01-11T22:24:02Z

Description

add typescript template. mostly a direct port of the basic template to typescript, but with aliases set up properly.

Motivation and Context

make it easier to use RS with TS

Types of changes

Refactoring/add tests (refactoring or adding test which isn't a fix or add a feature)
Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

My change requires a change to the documentation.
- I have updated the documentation accordingly.
My changes have tests around them

tannerlinsley · 2019-01-11T22:30:36Z

I think the plugin takes care of some more things you have manually defined. Might want to check: https://gitlab.com/Vinnl/react-static-plugin-typescript/blob/master/src/node.api.ts

swyxio · 2019-01-11T23:37:46Z

ok i can remove extensions: ['.js', '.jsx', '.ts', '.tsx']

from what i can tell that is the only line i can take out tho... unless i simplify the webpack.config.js insertion process?

tannerlinsley · 2019-01-11T23:40:48Z

That's your call. Anything to make it more reusable.

…

On Fri, Jan 11, 2019 at 4:37 PM swyx ***@***.***> wrote: ok i can remove extensions: ['.js', '.jsx', '.ts', '.tsx'] from what i can tell that is the only line i can take out tho... unless i simplify the webpack.config.js insertion process — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#963 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFUmCUR1_WYtXr74LkqV1WRBSnX15vS3ks5vCSBLgaJpZM4Z8Rka> .

swyxio · 2019-01-12T00:09:19Z

alright simplified a buncha stuff

tannerlinsley · 2019-01-12T00:12:45Z

What else could we do to avoid the API file?

swyxio · 2019-01-12T00:34:07Z

are they a bad thing? theyre the canonical place to modify webpack config right?

tannerlinsley · 2019-01-12T00:50:17Z

Yeah but if it's typescript related it could possibly be passed as a plugin option.

…

On Fri, Jan 11, 2019 at 5:34 PM swyx ***@***.***> wrote: are they a bad thing? theyre the canonical place to modify webpack config right? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#963 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFUmCX17JNCGl6qocHKlrGu4HEYVn4Nyks5vCS2AgaJpZM4Z8Rka> .

tannerlinsley · 2019-01-15T22:38:15Z

If you're reasonably convinced this is how far we can push things into the plugin, then let me know and we'll get this merged.

swyxio · 2019-01-16T01:44:57Z

sorry been busy with the netlify allhands past few days. gonna try a few things and see - my lack of complete knowledge of the RS api (and imperfect knowledge of webpack, its always been a weak point of mine) is probably hindering me here from a totally elegant solution but we can definitely improve this over time.

already used it for my podcasting site btw

swyxio · 2019-01-16T05:15:24Z

ok so i figured I was only using the node.api for path aliases which are frankly optional so i could just take them out. if it were to be a plugin option it would have to be added upstream to react-static-plugin-typescript by @Vinnl.

anyway - removing them made it a lot simpler, and brings us closer to just doing what the basic template does but in typescript!

Vinnl

Thanks for pinging me @sw-yx :)

Aliases are actually issue #1 for the TypeScript plugin - when support lands, it should be automatic (as in: paths you define in your TypeScript config should Just Work). If you think it's important that it's supported then I could work on that this weekend, as it could save you some documentation. If so, let me know.

Vinnl · 2019-01-16T08:27:17Z

packages/react-static/templates/typescript/package.json

+    "@types/react-hot-loader": "^4.1.0",
+    "@types/webpack-env": "^1.13.6",
+    "convert-tsconfig-paths-to-webpack-aliases": "^0.9.2",
+    "ts-loader": "^5.3.3",


If you add the plugin, you shouldn't be required to install TypeScript and a loader yourself. (And in any case, the plugin doesn't use ts-loader :) )

Vinnl · 2019-01-16T08:31:21Z

packages/react-static/templates/typescript/tsconfig.json

+    "paths": {
+      "@components/*": ["src/components/*"]
+    },
+    "typeRoots": ["./node_modules/@types"],


I don't think typeRoots is necessary? For reference, see the tsconfig at https://www.npmjs.com/package/react-static-plugin-typescript#usage

swyxio · 2019-01-16T16:04:49Z

ohhh nice! ok that can work. and thanks for the tips, will update

Vinnl · 2019-01-16T21:38:13Z

I could work on [alias support] this weekend

It was more involved than I estimated it to be, but on the plus side, I did most of the work tonight. I still have to clean it up for actual release (probably still this weekend), but it'd be great if you could test it using the template before that. You can install it using:

npm install --save-dev react-static-plugin-typescript@1-support-aliases

swyxio · 2019-01-16T21:50:14Z

wowww. i'm so glad i tagged you lol. trying now.

swyxio · 2019-01-18T15:56:18Z

@Vinnl it works! waiting for whenever you are ready to update your plugin, then i'll push/merge this template with the final version

Vinnl · 2019-01-18T16:02:34Z

Great! Coincidentally I just finished adding tests and such. It's building now, when that's finished I'll release 3.1.0 with alias support. I'll ping you when that's done :)

(Don't forget to update the README btw! :) )

Vinnl · 2019-01-18T16:16:57Z

@sw-yx It's been released! V3.1.0.

swyxio · 2019-01-18T19:29:50Z

ok thanks Vinnl you rock. as far as i can tell i'm ready to merge this. pinging @tannerlinsley in case any final comments.

tannerlinsley · 2019-01-18T19:34:13Z

This is great you guys. Seriously, so good.

tannerlinsley · 2019-01-18T19:35:22Z

The only thing left is to add it to this page: https://github.com/nozzle/react-static/tree/master/packages/react-static/templates

swyxio · 2019-01-18T21:41:08Z

ok, updated and added a mention in that README

tannerlinsley · 2019-01-18T21:42:24Z

Merged! Thanks guys. This is just awesome.

tannerlinsley · 2019-01-18T21:44:17Z

It should now be available in the latest release 🎉

Vinnl · 2019-01-19T12:30:19Z

Great, thanks! Unfortunately, I did still run into an error when trying it out:

$ react-static start
  Error: /tmp/my-static-site-ts/static.config.js:1
  (function (exports, require, module, __filename, __dirname) { import axios fro  m 'axios';
                                                                       ^^^^^
  SyntaxError: Unexpected identifier

This is in static.config.js, so not a TypeScript file. However, it does not occur with the basic template. Any of you have any idea what that could be?

swyxio · 2019-01-20T20:03:54Z

solved in the related issue #980

shamrin · 2019-01-29T07:02:43Z

I've tried typescript template, but it failed right away: #989.

Update: Upgrading yarn helped solve my problem.

ngocdaothanh · 2021-03-21T16:22:54Z

TypeScript template does not support image import:
#1589

I guess it's missing Webpack config?

SleeplessByte · 2021-03-21T17:30:57Z

Thanks for opening a new issue. It's not good practice to comment on a PR merged over 2 years ago.

sw-yx added 2 commits January 11, 2019 14:21

add typescript example

b0c5351

tsreadme

474b730

simplify typescript tempalte

7c5e5cf

sw-yx added 2 commits January 15, 2019 21:12

remove fancydiv and nodeapi

f930095

readme

a2f7b8f

Vinnl reviewed Jan 16, 2019

View reviewed changes

sw-yx added 2 commits January 16, 2019 13:56

add back @components

5f84adb

remove even more useless things

925aeaf

update with typescript plugin v3.1

e4843e5

sw-yx added 2 commits January 18, 2019 13:38

Merge remote-tracking branch 'origin/master' into addTStemplate

02c6adf

add typescript to readme

5743bc9

tannerlinsley merged commit d51616a into react-static:master Jan 18, 2019

swyxio mentioned this pull request Jan 20, 2019

Typescript template doesn't work #980

Closed

swyxio deleted the addTStemplate branch January 29, 2019 07:21

react-static locked as resolved and limited conversation to collaborators Mar 21, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add typescript template #963

add typescript template #963

swyxio commented Jan 11, 2019 •

edited

Loading

tannerlinsley commented Jan 11, 2019

swyxio commented Jan 11, 2019 •

edited

Loading

tannerlinsley commented Jan 11, 2019 via email

swyxio commented Jan 12, 2019

tannerlinsley commented Jan 12, 2019

swyxio commented Jan 12, 2019

tannerlinsley commented Jan 12, 2019 via email

tannerlinsley commented Jan 15, 2019

swyxio commented Jan 16, 2019

swyxio commented Jan 16, 2019

Vinnl left a comment •

edited

Loading

Vinnl Jan 16, 2019

Vinnl Jan 16, 2019

swyxio commented Jan 16, 2019

Vinnl commented Jan 16, 2019 •

edited

Loading

swyxio commented Jan 16, 2019

swyxio commented Jan 18, 2019

Vinnl commented Jan 18, 2019

Vinnl commented Jan 18, 2019

swyxio commented Jan 18, 2019

tannerlinsley commented Jan 18, 2019

tannerlinsley commented Jan 18, 2019

swyxio commented Jan 18, 2019

tannerlinsley commented Jan 18, 2019

tannerlinsley commented Jan 18, 2019

Vinnl commented Jan 19, 2019

swyxio commented Jan 20, 2019 •

edited

Loading

shamrin commented Jan 29, 2019 •

edited

Loading

ngocdaothanh commented Mar 21, 2021

SleeplessByte commented Mar 21, 2021

add typescript template #963

add typescript template #963

Conversation

swyxio commented Jan 11, 2019 • edited Loading

Description

Motivation and Context

Types of changes

Checklist:

tannerlinsley commented Jan 11, 2019

swyxio commented Jan 11, 2019 • edited Loading

tannerlinsley commented Jan 11, 2019 via email

swyxio commented Jan 12, 2019

tannerlinsley commented Jan 12, 2019

swyxio commented Jan 12, 2019

tannerlinsley commented Jan 12, 2019 via email

tannerlinsley commented Jan 15, 2019

swyxio commented Jan 16, 2019

swyxio commented Jan 16, 2019

Vinnl left a comment • edited Loading

Choose a reason for hiding this comment

Vinnl Jan 16, 2019

Choose a reason for hiding this comment

Vinnl Jan 16, 2019

Choose a reason for hiding this comment

swyxio commented Jan 16, 2019

Vinnl commented Jan 16, 2019 • edited Loading

swyxio commented Jan 16, 2019

swyxio commented Jan 18, 2019

Vinnl commented Jan 18, 2019

Vinnl commented Jan 18, 2019

swyxio commented Jan 18, 2019

tannerlinsley commented Jan 18, 2019

tannerlinsley commented Jan 18, 2019

swyxio commented Jan 18, 2019

tannerlinsley commented Jan 18, 2019

tannerlinsley commented Jan 18, 2019

Vinnl commented Jan 19, 2019

swyxio commented Jan 20, 2019 • edited Loading

shamrin commented Jan 29, 2019 • edited Loading

ngocdaothanh commented Mar 21, 2021

SleeplessByte commented Mar 21, 2021

swyxio commented Jan 11, 2019 •

edited

Loading

swyxio commented Jan 11, 2019 •

edited

Loading

Vinnl left a comment •

edited

Loading

Vinnl commented Jan 16, 2019 •

edited

Loading

swyxio commented Jan 20, 2019 •

edited

Loading

shamrin commented Jan 29, 2019 •

edited

Loading