Add example that shows TypeScript usage

[D1no]

Our components are all written in TypeScript. Is there support for using TypeScript and possibly typings for react-static?

Glad to have an alternative to next.js and would love to switch.

Great Work!
Dino

[derekperkins]

@D1no We don't use Typescript ourselves, so we're not likely to add that anytime soon, but we'd be open to a PR!

[D1no]

Thats too bad. That is one of the burning issues of next.js and project groups, that already have a component library or logic. I wrote about it here; related to the blocking PR below
vercel/next.js#2391 (comment)
vercel/next.js#2699

Maintaining ecmascript variations is unfortunately quite difficult outside a core team.

[derekperkins]

@D1no So you're less interested in having react-static type definitions and more interested in making sure that TypeScript compiles during the build cycle?

[D1no]

Yes exactly. Since everything is react — I guess the few untyped properties of react-static are discardable. But not being able to to use existing code is quite a bummer

[derekperkins]

@tannerlinsley Shouldn't that be possible?

[tannerlinsley]

Technically yes. You can use custom webpack loaders, so using a typescript loader wouldn't be a problem at all. When using the react static browser components, you won't have type safety. But if someone wanted to submit types that would not be the case.

…

On Sun, Oct 8, 2017 at 11:01 AM Derek Perkins ***@***.***> wrote: @tannerlinsley <https://github.com/tannerlinsley> Shouldn't that be possible? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#8 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFUmCfpujwNSxykgPTuGRymwF3fd0aQZks5sqP_NgaJpZM4PxtNd> .

[derekperkins]

@D1no Does that give you enough to get started?

[D1no]

Sure! Thanks!

[D1no]

So I gave it a shot now on updating the rule-set for typescript. I get it to compile, but it crashes in the browser. Maybe a Webpack crack can take a look whats missing.

Essentially its about replacing the original babel rule with one that includes a pre-stage with awesome-typescript-loader.

Reproduction Repo: https://github.com/D1no/react-static-typescript

The commits detail what I needed to do to get this far.
clone
yarn install
yarn start

---

Essential config in static.config.js

// For TypeScript Resolution
import { CheckerPlugin, TsConfigPathsPlugin } from "awesome-typescript-loader"

// (...)

  webpack: (webpackConfigurator, { dev }) => {

    // Add .ts & .tsx extension to config
    webpackConfigurator.merge({
      resolve: {
        extensions: ['.ts', '.tsx']
      }
    })

    // We can take a look at the current Webpack Config via webpackConfigurator._config
    // Lets overwrite the default rule resolution for source files found here:
    // https://github.com/nozzle/react-static/blob/master/src/rules.js#L5

    // Update Rule to use awesome-typescript-loader
    // Extending the default ruleset with typescript support (normal webpack rule)
    let typeScriptRule = {
      test: /\.(js|jsx|ts|tsx)$/,
      // Keeping the original exclude path
      exclude: webpackConfigurator._config.module.rules[0].exclude,
      use: [
        {
          loader: 'babel-loader',
        },
        {
          loader: 'awesome-typescript-loader',
        }
      ]
    }

    // Overwrite the first (original js-transform) rule with our extended version
    webpackConfigurator._config.module.rules[0] = typeScriptRule;

    // For async error reporting of as-typescript
    webpackConfigurator.plugin("typescript-checker-plugin", CheckerPlugin)

    // For resolving potential alias paths inside the typescript.json
    webpackConfigurator.plugin("typescript-path-plugin", TsConfigPathsPlugin)

  }

Renaming i.e. Home.js to Home.tsx transpiles without problems

but crashes terribly in the browser

[tannerlinsley]

With the latest changes to version 2.0.0, this should now be extremely possible. Using the webpack callback you can easily modify or completely replace any aspect of the webpack config to make this work. It might take some fine tuning to get this right, but it's definitely possible now.

[srghma]

What the current status of this? Can I help?

[D1no]

Yes - a webpack config as an example in a static.confog.je would help a lot. I am just blocked right now that I can not even get a breath of air .... far from Open Source :/

[srghma]

@D1no so, as I understand, it's possible to make example with typescript right now? For example I can modify your Reproduction Repo and it will work?

[D1no]

The reproduction repo is on an outdated version of static-react. That needs to be updated and than possibly adapted to the new version according to the changelog. I think a normal webpack setup should do now. But I don’t have access to check myself (out of country atm)

[corydeppen]

I don't know that react-static should be advertised as having full TypeScript support yet if it's not possible to completely rename all .js component files to .tsx. I see the same console errors mentioned earlier when renaming the Home component. Has anyone been able to rename all .js component files to .tsx and successfully compile and run the TS example?

[D1no]

I think that is a harsh assumption. TypeScript, like Babel, is a preprocessor of which presets in babel and compiler options / definition files are an extension. React-Static compiles all .tsx files, allows to use typescripts flexible paths options (dynamically mapping them to webpack), includes hot module replacement and compiles — none-the-less — of warnings the typescript language service may throw up in your EDI.

Definition files are very straight forward and I invite anyone to update them along with the changes to the codebase. However, even if those would not exist or overwritten by the user, all typescript code will be transpiled and handled without problems.

So from my point of view, and probably @tannerlinsley's, full support is there. The definition file should be maintained for the language service for which I am happy to see support from any side possible.

Best
Dino