pcp

preact-cli-plugin-typescript

Adds TypeScript support to preact-cli ⚡

Showing:

Popularity

Downloads/wk

63

GitHub Stars

49

Maintenance

Last Commit

2yrs ago

Contributors

4

Package

Dependencies

2

Size (min+gzip)

0.3KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

preact-cli-plugin-typescript · Build status npm version JavaScript Style Guide

Use TypeScript with preact-cli.

This will install typescript and awesome-typescript-loader.

If you prefer Flow, check out preact-cli-plugin-flow.

Installation

Install via npm:

npm i preact-cli-plugin-typescript --save-dev

After installation, this plugin will create a tsconfig.json (TypeScript configuration file), and preact.config.js, if they don't exist already.

In the root of your project, edit preact.config.js to add the plugin:

import preactCliTypeScript from 'preact-cli-plugin-typescript'

export default function(config) {
  preactCliTypeScript(config)
}

Usage

Existing tsconfig.json

If you have an existing tsconfig.json file, be sure to use the correct JSX factory:

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "h"
  }
}

Now you can simply add .ts/.tsx files to your project, and they'll be compiled. Cool. Make sure you use .tsx if you want to use JSX.

Mixing JavaScript and TypeScript

You might see an error like Module './components/app' was resolved to '/src/components/app.js', but '--allowJs' is not set..

To fix this, or if you want to incrementally move to TypeScript, make sure allowJs is enabled in your tsconfig.json:

{
  "compilerOptions": {
    "allowJs": true
  }
}

Changing the entrypoint

By default, preact-cli looks for src/index.js to start your app. This plugin widens the scope to "any file in src that starts with index and has a file extension resolved by webpack" - to change this, override the preact-cli-entrypoint in preact.config.js:

import { resolve } from 'path'

export default function (config, env, helpers) {
  preactCliTypeScript(config)

  config.resolve.alias['preact-cli-entrypoint'] = resolve(__dirname, 'src', 'foo-file.foo-extension')
}

Changing the entrypoint is NOT fully supported by preact-cli at this time. We recommend enabling allowJs in your tsconfig.json, so that the entrypoint for preact-cli can remain as src/index.js.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100