@greenwood/plugin-typescript v0.29.3

@greenwood/plugin-typescript

Overview

A Greenwood plugin for writing TypeScript. There is still a little more work we would like to do but this plugin should be suitable for general usage.

This package assumes you already have @greenwood/cli installed.

Caveats

As of now, this transformation is only supported for client side (browser) code and will not run correctly in NodeJS until support for this is introduced into Greenwood, or natively by NodeJS. This means it will not work when using prerender option with WCC.

Installation

You can use your favorite JavaScript package manager to install this package.

examples:

# npm
npm install @greenwood/plugin-typescript --save-dev

# yarn
yarn add @greenwood/plugin-typescript --dev

Usage

Add this plugin to your greenwood.config.js.

import { greenwoodPluginTypeScript } from '@greenwood/plugin-typescript';

export default {
  // ...

  plugins: [
    greenwoodPluginTypeScript()
  ]
};

Then, you can write some TypeScript

import { html, css, LitElement, customElement, property } from 'lit-element';

@customElement('app-greeting')
export class GreetingComponent extends LitElement {
  static styles = css`p { color: blue }`;

  @property()
  name = 'Somebody';

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

And use it in your project like you would use a .js file!

<script type="module" src="/components/greeting.ts"></script>

Options

This plugin provides the following default compilerOptions.

{
  "compilerOptions": {
    "target": "es2020",
    "module": "es2020",
    "moduleResolution": "node",
    "sourceMap": true
  }
}

If you would like to extend / override these options:

1. Create your own tsconfig.json with your own compilerOptions

   {
     "compilerOptions": {
       "experimentalDecorators": true
     }
   }

2. When adding greenwoodPluginTypeScript to your greenwood.config.js, enable the extendConfig option

   import { greenwoodPluginTypeScript } from '@greenwood/plugin-typescript';
   
   export default {
     // ...
   
     plugins: [
       greenwoodPluginTypeScript({
         extendConfig: true
       })
     ]
   };

This will then process your JavaScript with TypeScript with the additional configuration settings you provide. This also allows you to configure the rest of tsconfig.json to support your IDE and local development environment settings.