TypeScript support

[zamotany]

No description provided.

[dumaron]

Hi, any news on this?
Can you tell me what need to be done in order to help?

[thymikee]

To make that happen we'll need to migrate to Babel 7 and make sure all works with @babel/preset-typescript

[dumaron]

This, however, will not help the ones working on projects bootstrapped with create-react-app-typescript, right? This will only support typescript if transpiled from babel?

[thymikee]

No, it won't work. Linaria is a Babel preset. AFAIK TypeScript doesn't allow you to transform its AST like Babel does. However, with Babel 7 you should be able to technically pre-compile your app (typescript and linaria presets required) before it goes to tsc.

[MartinJohns]

AFAIK TypeScript doesn't allow you to transform its AST like Babel does.

TypeScript has support for transformers: microsoft/TypeScript#13764

[resir014]

To make that happen we'll need to migrate to Babel 7 and make sure all works with @babel/preset-typescript

Not only that, but a type declaration (.d.ts) also needs to be provided.

[satya164]

cc @Esemesek, our ts hero

[satya164]

@resir014 can you check #263 if it helps?

[resir014]

Thanks, I'll check later tonight when I'm home.

…

On Fri, 19 Oct 2018, 18:04 Satyajit Sahoo, ***@***.***> wrote: @resir014 <https://github.com/resir014> can you check #263 <#263> if it helps? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#197 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFZshdl4HLc6RZbwXDMM5BY9-Zedfv_fks5umbGlgaJpZM4RuQMf> .

[satya164]

Can this be closed? We now use Babel 7 and also ship TypeScript definitions.

[zamotany]

For TS support: you need to use babel 7 with typescript preset.

[ShanonJackson]

Fucking around with linaria on weekends in preparation for when we stop supporting IE11 in production and i can swap from styled-components. Making sure the SSR all works etc etc i'm finding the lack of documentation for typescript support basically null, after reading the documentation it's starting to look like i'm literally forced to stop using awesome-typescript-loader (in dev) and ts-loader (in prod build for multi-threading with happypack which comes in slightly faster than ATL), just to use linaria and instead reconfigure my entire application to use babel.

Is there a workaround where i can configure the SSR to work without using babel and not get the "Error using the "styled" tag in runtime is not supported....."

[zamotany]

Unfortunately no, TypeScript compiler do not provide public API for writing custom transformers, so we cannot support tsc. Currently, there's no way to use linaria without babel.

[steadicat]

FWIW, here's the issue that tracks adding support for custom transformers to the TypeScript compiler: microsoft/TypeScript#14419

[ShanonJackson]

@zamotany Anychance in the intermediatory period we could have some cool babel cats out there setup a typescript example setup of both frontend / backend Typescript + Babel + Linaria? Spent about 8 hours now trying to configure something that will work but as someone with little babel experience (and someone who finds the babel documentation and plugin system confusing) it would be great to have an example template which shows the two running together.

(Backend with Linaria/Typescript/Babel for SSR).

[geakstr]

Hi and thanks for linaria! In our project we use typescript namespaces, so we can't move to @babel/preset-typescript (it doesn't support namespaces). It would be really cool to have linaria worked with ts-loader. Is there any chance?

[chrisabrams]

@geakstr have you tried running babel in front of ts-loader?

[geakstr]

@chrisabrams yes, from webpack config:

{
  test: /\.(ts|tsx)$/,
  include: paths.appSrc,
  use: [
    {
      loader: require.resolve("babel-loader")
    },
    {
      loader: require.resolve("linaria/loader"),
      options: {
        sourceMap: process.env.NODE_ENV !== "production"
      }
    },
    {
      loader: require.resolve("ts-loader"),
      options: {
        // disable type checker - we will use it in fork plugin
        transpileOnly: true,
        experimentalWatchApi: true
      }
    }
  ]
}
...
{
  test: /\.s(c|a)ss$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        hmr: process.env.NODE_ENV !== "production"
      }
    },
    {
      loader: require.resolve("css-loader"),
      options: {
        importLoaders: 2,
        sourceMap: true,
        modules: {
          mode: "local",
          localIdentName: "[name]_[local]_[hash:base64:5]"
        }
      }
    },
    {
      loader: require.resolve("postcss-loader"),
      options: {
        sourceMap: true,
        // Necessary for external CSS imports to work
        // https://github.com/facebookincubator/create-react-app/issues/2677
        ident: "postcss",
        plugins: () => [
          require("postcss-flexbugs-fixes"),
          autoprefixer({
            flexbox: "no-2009"
          })
        ]
      }
    },
    {
      loader: require.resolve("sass-loader"),
      options: {
        sourceMap: true
      }
    }
  ]
}

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react", "linaria/babel"]
}

In runtime: Error: Using the "css" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.

[geakstr]

Wow, got it work! The problem was "module": "commonjs"/"target": "es5" in tsconfig.json. With this config linaria/loader gets already transpiled imports. Changed to "module": "esnext"/"target": "esnext" - all works fine. It is super unintuitive and it should be reflected somewhere in the docs. Let me prepare PR when I have a chance.

[BasixKOR]

Hi, It seems like ts-loader supports custom transformer using their API. Can we use ts-loader instead of babel-loader with this API?

Related documentation: https://github.com/TypeStrong/ts-loader#getcustomtransformers

[Jack-Works]

Hello, this project looks awesome but it requires Babel... I have rich experience in writing TypeScript transformers, for example react-refresh-typescript to the official react-refresh/babel transformer.

I'd like to write a TypeScript version so I (and other people) can use this project with ts-loader. But if I made that, will this project accept the PR?

[Anber]

Hi @Jack-Works

We will. But I bet that it wouldn't be simple :)

[Anber]

@Jack-Works If you really want to try, you can create an issue and I will help you with planning and implementation, because such a task requires a few new abstractions in our existing code base.

[Jack-Works]

I'd like to introduce jest-file-snapshot and let test cases become a folder on their own (so I can share the test with TypeScript after I start coding).

An example in my project:
test files in a folder
snapshot for TypeScript transformer
test file that read those test files for TypeScript transformers

Is this ok? @Anber

[Anber]

Sounds good to me.