Merge pull request #11 from NullVoxPopuli/option-to-do-split-tool-sup…

…port

Option to do split compile (requiring both rollup and babel config)

.changeset/odd-vans-repair.md

@@ -0,0 +1,21 @@
+---
+"rollup-plugin-glimmer-template-tag": minor
+---
+
+Add option to the rollup plugin so that folks can choose to separately due to the two-step transform.
+
+In 0.2.0, it became possible to _only_ use the rollup plugin for the entirety of the transform, whereas in 0.1.0, a babel plugin was needed as well.
+
+In this version, you may go back to the 0.1.0 style configuration via:
+
+```js
+// rollup.config.mjs
+export default {
+  output: addon.output(),
+  plugins: [
+    // ...
+    glimmerTemplateTag({ preprocessOnly: true }),
+    // ...
+  ],
+};
+```

README.md

@@ -129,3 +129,41 @@ Without setting `transpileOnly: true` (using the default or explicitly setting t
     This exposes internal information about the `<template>` transformation process. 
     Though, you could try to get around the issue if you _really_ want `transpileOnly: false` by `declare module`ing for `@ember/template-compilation` in your `unpublished-development-types` _except_ that `@ember/template-compilation` is not presently a real package, so the part of the error saying `Cannot find module ` is still true, even though a corresponding type declaration is defined -- both the module and the type declarations are needed.
 
+
+### Manually choosing the two-stage transformation
+
+There is an option available to the rollup plugin so that folks can choose to separately due to the two-step transform.
+
+Normally, these are done wholly within the rollup plugin:
+ 1. preprocess the `<template>` tag into a secret internal format
+ 2. convert that secret internal format into vanilla JS that a consuming build environment knows how to handle
+
+However, for performance or compatibility reasons, it may not be desireable to allow both steps to be handled automatically.
+
+You'd want these changes to your config files:
+
+```js
+// rollup.config.mjs
+export default {
+  output: addon.output(),
+  plugins: [
+    // ...
+    glimmerTemplateTag({ preprocessOnly: true }),
+    // ...
+  ],
+};
+```
+
+```diff
+ // babel.config.js / json / etc
+ 'use strict';
+ module.exports = {
+   plugins: [
++    'ember-template-imports/src/babel-plugin',
+     '@embroider/addon-dev/template-colocation-plugin',
+     ['@babel/plugin-proposal-decorators', { legacy: true }],
+     '@babel/plugin-proposal-class-properties'
+   ]
+ };
+```
+

packages/rollup-plugin-glimmer-template-tag/src/rollup-plugin.js

@@ -13,8 +13,20 @@ import { TEMPLATE_TAG_NAME, TEMPLATE_TAG_PLACEHOLDER } from 'ember-template-impo
 const PLUGIN_KEY = 'glimmer-template-tag';
 const RELEVANT_EXTENSION_REGEX = /\.g([jt]s)$/;
 
-/** @type {PluginImpl} */
-export function glimmerTemplateTag() {
+/**
+ * Rollup plugin that does a two-phase transform to convert <template> tags to vanilla JS.
+ * 1. preprocess the <template> tag into a secret internal format
+ * 2. convert that secret internal format into vanilla JS that a consuming build environment knows how to handle
+ *
+ * @typedef {object} Options
+ * @property {boolean} [preprocessOnly] tells this rollup plugin to only do the first part of the <template> transform
+ * @param {Options} options
+ *
+ * @type {PluginImpl}
+ * */
+export function glimmerTemplateTag(options) {
+  let { preprocessOnly } = options || {};
+
   return {
     name: 'preprocess-glimmer-template-tag',
     async resolveId(source, importer, options) {
@@ -50,7 +62,7 @@ export function glimmerTemplateTag() {
       }
 
       if (RELEVANT_EXTENSION_REGEX.test(originalId)) {
-        return transformGlimmerTemplateTag(originalId);
+        return transformGlimmerTemplateTag(originalId, preprocessOnly);
       }
 
       return;
@@ -60,10 +72,15 @@ export function glimmerTemplateTag() {
 
 /**
  * @param {string} originalId
+ * @param {boolean} [ preprocessOnly ]
  */
-async function transformGlimmerTemplateTag(originalId) {
+async function transformGlimmerTemplateTag(originalId, preprocessOnly) {
   let intermediate = await preprocessTemplates(originalId);
 
+  if (preprocessOnly) {
+    return intermediate;
+  }
+
   let config = await babel.loadPartialConfigAsync();
 
   // Use the basename so we don't accidentally operate on real files

packages/test-app/package.json

@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@nullvoxpopuli/test-rollup-addon-gjs": "workspace:*",
+    "@nullvoxpopuli/test-rollup-addon-split-gts": "workspace:*",
     "@nullvoxpopuli/test-rollup-addon-gts": "workspace:*"
   },
   "devDependencies": {

packages/test-app/tests/integration/loose-mode-test.ts

@@ -25,4 +25,14 @@ module('loose mode', function (hooks) {
     assert.dom().containsText('TS Demo: Hello World');
     assert.dom().containsText('TS Class Demo: Hello World');
   });
+
+  test('ts components using the split compilation are correct', async function (assert) {
+    await render(hbs`
+      <TsSplitDemo />
+      <TsSplitClassDemo />
+    `);
+
+    assert.dom().containsText('TS Split Demo: Hello World');
+    assert.dom().containsText('TS Split Class Demo: Hello World');
+  });
 });

packages/test-app/types/index.d.ts

@@ -5,9 +5,13 @@ import '@glint/environment-ember-loose/native-integration';
 
 import type { Registry as JSRegistry } from '@nullvoxpopuli/test-rollup-addon-gjs/glint-registry';
 import type { Registry as TSRegistry } from '@nullvoxpopuli/test-rollup-addon-gts/glint-registry';
+import type { Registry as TSSplitRegistry } from '@nullvoxpopuli/test-rollup-addon-split-gts/glint-registry';
 
 declare module '@glint/environment-ember-loose/registry' {
-  export default interface Registry extends JSRegistry, TSRegistry {
+  export default interface Registry
+    extends JSRegistry,
+      TSRegistry,
+      TSSplitRegistry {
     // Custom stuff would be added here, but we don't
     // yet have anything custom in the globals
   }

packages/test-rollup-addon-split-gts/.eslintignore

@@ -0,0 +1 @@
+dist/

packages/test-rollup-addon-split-gts/.eslintrc.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+const { configs } = require('@nullvoxpopuli/eslint-configs');
+
+let config = configs.ember();
+
+module.exports = {
+  overrides: [...config.overrides],
+};

packages/test-rollup-addon-split-gts/.gitignore

@@ -0,0 +1 @@
+dist/

packages/test-rollup-addon-split-gts/.prettierignore

@@ -0,0 +1 @@
+dist/

packages/test-rollup-addon-split-gts/.prettierrc.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+module.exports = {
+  singleQuote: true,
+  printWidth: 100,
+};

packages/test-rollup-addon-split-gts/addon-main.cjs

@@ -0,0 +1,5 @@
+'use strict';
+
+const { addonV1Shim } = require('@embroider/addon-shim');
+
+module.exports = addonV1Shim(__dirname);

packages/test-rollup-addon-split-gts/babel.config.json

@@ -0,0 +1,15 @@
+{
+  "presets": ["@babel/preset-typescript"],
+  "plugins": [
+    "ember-template-imports/src/babel-plugin",
+    [
+      "@babel/plugin-transform-typescript",
+      {
+        "allowDeclareFields": true
+      }
+    ],
+    "@embroider/addon-dev/template-colocation-plugin",
+    ["@babel/plugin-proposal-decorators", { "legacy": true }],
+    "@babel/plugin-proposal-class-properties"
+  ]
+}

packages/test-rollup-addon-split-gts/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@nullvoxpopuli/test-rollup-addon-split-gts",
+  "version": "0.0.0",
+  "private": true,
+  "keywords": [
+    "ember-addon"
+  ],
+  "exports": {
+    ".": "dist/index.js",
+    "./components/ts-split-demo": "dist/components/ts-split-demo.js",
+    "./components/ts-split-class-demo": "dist/components/ts-split-class-demo.js",
+    "./glint-registry": {
+      "types": "dist/glint-registry.d.ts"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "glint-registry": [
+        "dist/glint-registry.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist",
+    "addon-main.cjs"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "lint": "concurrently 'npm:lint:*(!fix)' --names 'lint:'",
+    "lint:types": "glint",
+    "lint:fix": "concurrently 'npm:lint:*:fix' --names 'fix:'",
+    "lint:js": "eslint . --cache",
+    "lint:prettier": "prettier --check .",
+    "lint:prettier:fix": "prettier --write .",
+    "lint:js:fix": "eslint . --fix"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.21.3",
+    "@babel/eslint-parser": "^7.21.3",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-decorators": "^7.21.0",
+    "@babel/preset-typescript": "^7.21.0",
+    "@babel/runtime": "^7.21.0",
+    "@embroider/addon-dev": "^3.0.0",
+    "@glimmer/component": "^1.1.2",
+    "@glint/core": "^1.0.0-beta.3",
+    "@glint/environment-ember-loose": "^1.0.0-beta.3",
+    "@glint/environment-ember-template-imports": "^1.0.0-beta.3",
+    "@glint/template": "^1.0.0-beta.3",
+    "@nullvoxpopuli/eslint-configs": "^3.1.3",
+    "@tsconfig/ember": "^2.0.0",
+    "@types/rsvp": "^4.0.4",
+    "ember-source": "^4.11.0",
+    "ember-template-imports": "^3.4.1",
+    "eslint": "^8.36.0",
+    "eslint-plugin-ember": "^11.4.7",
+    "eslint-plugin-qunit": "^7.3.4",
+    "prettier": "^2.8.4",
+    "rollup": "^3.19.1",
+    "rollup-plugin-glimmer-template-tag": "workspace:*",
+    "rollup-plugin-ts": "^3.2.0",
+    "typescript": "^4.9.5"
+  },
+  "ember-addon": {
+    "version": 2,
+    "type": "addon",
+    "main": "addon-main.cjs",
+    "app-js": {
+      "./components/ts-split-class-demo.js": "./dist/_app_/components/ts-split-class-demo.js",
+      "./components/ts-split-demo.js": "./dist/_app_/components/ts-split-demo.js"
+    }
+  },
+  "dependencies": {
+    "@embroider/addon-shim": "^1.8.4"
+  },
+  "peerDependencies": {
+    "@glimmer/component": "^1.1.2",
+    "ember-source": "^4.11.0"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  }
+}

packages/test-rollup-addon-split-gts/rollup.config.mjs

@@ -0,0 +1,28 @@
+import { Addon } from '@embroider/addon-dev/rollup';
+
+import typescript from 'rollup-plugin-ts';
+import { defineConfig } from 'rollup';
+import { glimmerTemplateTag } from 'rollup-plugin-glimmer-template-tag';
+
+const addon = new Addon({
+  srcDir: 'src',
+  destDir: 'dist',
+});
+
+export default defineConfig({
+  output: addon.output(),
+  plugins: [
+    addon.publicEntrypoints(['**/*.js']),
+    addon.appReexports(['components/**/*.js']),
+    glimmerTemplateTag({ preprocessOnly: true }),
+    typescript({
+      transpiler: 'babel',
+      // Babel defaults to "guessing" when there is no browserslist past
+      // We want to do the least amount of work
+      browserslist: ['last 1 firefox versions'],
+      transpileOnly: true,
+    }),
+    addon.dependencies(),
+    addon.clean(),
+  ],
+});

packages/test-rollup-addon-split-gts/src/components/ts-split-class-demo.gts

@@ -0,0 +1,15 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+
+import type RouterService from '@ember/routing/router-service';
+
+export default class TsClassDemo extends Component {
+  // Need TS Syntax for confident test
+  @service declare router: RouterService;
+
+  greeting = 'Hello World!';
+
+  <template>
+    TS Split Class Demo: {{this.greeting}}
+  </template>
+}

packages/test-rollup-addon-split-gts/src/components/ts-split-demo.gts

@@ -0,0 +1,5 @@
+const greeting = 'Hello World!';
+
+<template>
+  TS Split Demo: {{greeting}}
+</template>

packages/test-rollup-addon-split-gts/src/glint-registry.ts

@@ -0,0 +1,6 @@
+import type { ComponentLike } from '@glint/template';
+
+export interface Registry {
+  TsSplitDemo: ComponentLike;
+  TsSplitClassDemo: ComponentLike;
+}

packages/test-rollup-addon-split-gts/src/index.ts

@@ -0,0 +1,2 @@
+export { default as TSClassDemo } from './components/ts-split-class-demo';
+export { default as TSDemo } from './components/ts-split-demo';

packages/test-rollup-addon-split-gts/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@tsconfig/ember/tsconfig.json",
+  "include": ["src/**/*", "unpublished-development-types/**/*"],
+  "glint": {
+    "environment": ["ember-loose", "ember-template-imports"]
+  }
+}

packages/test-rollup-addon-split-gts/unpublished-development-types/index.d.ts

@@ -0,0 +1,2 @@
+import 'ember-source/types';
+import 'ember-source/types/preview';