[transformers ] Add @lit/ts-transformers package with idiomatic decorator transform

.eslintignore

@@ -121,6 +121,8 @@ packages/reactive-element/reactive-controller.*
 
 packages/tests/node_modules/
 
+packages/transformers/lib/
+
 packages/labs/motion/development/
 packages/labs/motion/node_modules/
 packages/labs/motion/index.*

.prettierignore

@@ -109,6 +109,8 @@ packages/reactive-element/reactive-controller.*
 
 packages/tests/node_modules/
 
+packages/transformers/lib/
+
 packages/labs/motion/development/
 packages/labs/motion/node_modules/
 packages/labs/motion/index.*

package.json

@@ -15,7 +15,7 @@
     "lint": "eslint \"**/*.{js,ts}\"",
     "nuke": "rm -rf node_modules && npm install && lerna exec 'rm -rf node_modules' && lerna bootstrap && npm run clean",
     "upgrade": "rm -rf node_modules package-lock.json && npm install && lerna exec 'rm -rf node_modules package-lock.json' && lerna bootstrap && npm run clean",
-    "test": "(cd packages/tests && npm test) && (cd packages/labs/ssr && npm test) && (cd packages/localize && npm test) && (cd packages/localize-tools && npm test) && (cd packages/lit-starter-ts && npm test) && (cd packages/lit-starter-js && npm test)",
+    "test": "(cd packages/tests && npm test) && (cd packages/labs/ssr && npm test) && (cd packages/localize && npm test) && (cd packages/localize-tools && npm test) && (cd packages/lit-starter-ts && npm test) && (cd packages/lit-starter-js && npm test) && (cd packages/transformers && npm test)",
     "prepare": "husky install"
   },
   "devDependencies": {

packages/localize-tools/package.json

@@ -49,6 +49,7 @@
     "xmldom": "^0.5.0"
   },
   "devDependencies": {
+    "@lit/transformers": "^0.0.1",
     "@types/diff": "^5.0.0",
     "@types/fs-extra": "^9.0.1",
     "@types/glob": "^7.1.1",

packages/localize-tools/src/tests/analysis.unit.test.ts

@@ -13,7 +13,7 @@ import ts from 'typescript';
 import {
   createTsProgramFromFragment,
   CompilerHostCache,
-} from './compile-ts-fragment.js';
+} from '@lit/transformers/lib/tests/compile-ts-fragment.js';
 
 const cache = new CompilerHostCache();
 
@@ -39,6 +39,7 @@ function checkAnalysis(
   options.typeRoots = [];
   const {program, host} = createTsProgramFromFragment(
     inputTs,
+    '',
     options,
     cache,
     () => undefined

packages/localize-tools/src/tests/transform.unit.test.ts

@@ -10,7 +10,10 @@ import {Message, makeMessageIdMap} from '../messages.js';
 import {test} from 'uvu';
 import * as assert from 'uvu/assert';
 import prettier from 'prettier';
-import {compileTsFragment, CompilerHostCache} from './compile-ts-fragment.js';
+import {
+  compileTsFragment,
+  CompilerHostCache,
+} from '@lit/transformers/lib/tests/compile-ts-fragment.js';
 
 const cache = new CompilerHostCache();
 const IMPORT_MSG = `import { msg, str } from "@lit/localize";\n`;
@@ -52,7 +55,7 @@ function checkTransform(
   // them here, so it's a waste of time.
   options.typeRoots = [];
   options.experimentalDecorators = true;
-  const result = compileTsFragment(inputTs, options, cache, (program) => ({
+  const result = compileTsFragment(inputTs, '', options, cache, (program) => ({
     before: [
       litLocalizeTransform(
         makeMessageIdMap(opts?.messages ?? []),

packages/transformers/.gitignore

@@ -0,0 +1 @@
+/lib/

packages/transformers/CHANGELOG.md

@@ -0,0 +1,12 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## Unreleased
+
+### Added
+
+- Initial release of `@lit/transformers`.

packages/transformers/LICENSE

@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright (c) 2021 Google LLC. All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

packages/transformers/README.md

@@ -0,0 +1,153 @@
+# @lit/transformers
+
+[npm-img]: https://img.shields.io/npm/v/@lit/transformers
+[npm-href]: https://www.npmjs.com/package/@lit/transformers
+[test-img]: https://github.com/lit/lit/workflows/Tests/badge.svg?branch=master
+[test-href]: https://github.com/lit/lit/actions?query=workflow%3ATests+branch%3Amaster+event%3Apush
+
+[![Published on NPM][npm-img]][npm-href]
+[![Test status][test-img]][test-href]
+
+TypeScript transformers for the [Lit decorators](https://lit.dev/docs/components/decorators/).
+
+## Example
+
+### Before
+
+```ts
+import {LitElement, html} from 'lit';
+import {
+  customElement,
+  property,
+  state,
+  query,
+  eventOptions,
+} from 'lit/decorators.js';
+
+@customElement('simple-greeting')
+class SimpleGreeting extends LitElement {
+  @property()
+  name = 'Somebody';
+
+  @state()
+  private counter = 0;
+
+  @query('#myButton')
+  button?: HTMLButtonElement;
+
+  render() {
+    return html`
+      <button id="myButton" @click=${this._onClick}>
+        Hello ${this.name} (${this.counter})
+      </button>
+    `;
+  }
+
+  @eventOptions({capture: true})
+  private _onClick(event: Event) {
+    this.counter++;
+    console.log('click', event.target);
+  }
+}
+```
+
+### After
+
+```ts
+import {LitElement, html} from 'lit';
+
+class MyElement extends LitElement {
+  static get properties() {
+    return {
+      str: {},
+      num: {state: true, attribute: false},
+    };
+  }
+
+  get button() {
+    return this.renderRoot?.querySelector('#myButton');
+  }
+
+  constructor() {
+    super(...arguments);
+    this.name = 'Somebody';
+    this.counter = 0;
+  }
+
+  render() {
+    return html`
+      <button
+        id="myButton"
+        @click=${{
+          handleEvent: (e) => this._onClick(e),
+          capture: true,
+        }}
+      >
+        Hello ${this.name} (${this.counter})
+      </button>
+    `;
+  }
+
+  private _onClick(event: Event) {
+    this.counter++;
+    console.log('click', event.target);
+  }
+}
+
+customElements.define('simple-greeting', SimpleGreeting);
+```
+
+## Install
+
+```sh
+npm i @lit/transformers
+```
+
+## Usage
+
+### Option 1: ttypescript
+
+[ttypescript](https://github.com/cevek/ttypescript) wraps the standard
+TypeScript compiler and adds the ability to run transformer plugins:
+
+```sh
+npm i ttypescript
+```
+
+Update your `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "plugins": [
+      {
+        "transform": "@lit/transformers/lib/idiomatic.js"
+      }
+    ]
+  }
+}
+```
+
+Now use `tssc` instead of `tsc`:
+
+```sh
+npx ttsc
+```
+
+### Option 2: TypeScript API
+
+If you are using the [TypeScript compiler
+API](https://github.com/microsoft/TypeScript-wiki/blob/master/Using-the-Compiler-API.md),
+pass the transformer to the `customTransformers` parameter of `Program.emit`:
+
+```ts
+import idiomaticLitDecoratorsTransform from '@lit/transformers/lib/idiomatic.js';
+import ts from 'typescript';
+
+// Note this is not a complete example. For more information see
+// https://github.com/microsoft/TypeScript-wiki/blob/master/Using-the-Compiler-API.md
+const program = ts.createProgram(rootNames, options);
+const result = program.emit(undefined, undefined, undefined, undefined, {
+  before: [idiomaticLitDecoratorTransformer(program)],
+});
+```