From bf614b11b17aaa3e376e9e2f1bb494ce5f3ea5c4 Mon Sep 17 00:00:00 2001
From: Simon Ihmig <simon.ihmig@gmail.com>
Date: Thu, 16 Mar 2023 12:17:35 +0100
Subject: [PATCH] Convert addon to use template tag

---
 .prettierrc.js                                | 16 ++++++
 .../ember-headless-form/babel.config.json     |  1 +
 packages/ember-headless-form/package.json     |  1 +
 .../ember-headless-form/rollup.config.mjs     |  6 ++-
 .../{headless-form.ts => headless-form.gts}   | 49 ++++++++++++++++---
 .../src/components/headless-form.hbs          | 34 -------------
 .../src/{index.ts => index.gts}               |  0
 ...late-registry.ts => template-registry.gts} |  0
 pnpm-lock.yaml                                | 43 +++++++++++-----
 test-app/.prettierrc.js                       | 23 ---------
 10 files changed, 97 insertions(+), 76 deletions(-)
 rename packages/ember-headless-form/src/components/{headless-form.ts => headless-form.gts} (93%)
 delete mode 100644 packages/ember-headless-form/src/components/headless-form.hbs
 rename packages/ember-headless-form/src/{index.ts => index.gts} (100%)
 rename packages/ember-headless-form/src/{template-registry.ts => template-registry.gts} (100%)
 delete mode 100644 test-app/.prettierrc.js

diff --git a/.prettierrc.js b/.prettierrc.js
index f9f8cd21..ef60ba9b 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -4,4 +4,20 @@ module.exports = {
   plugins: ['prettier-plugin-ember-template-tag'],
   singleQuote: true,
   templateSingleQuote: false,
+  // this was required to make the VSCode + Prettier work correctly with <template>, see https://github.com/gitKrystan/prettier-plugin-ember-template-tag/issues/38
+  // we should roll this back once that issue has been fixed!
+  overrides: [
+    {
+      files: '*.gjs',
+      options: {
+        parser: 'ember-template-tag',
+      },
+    },
+    {
+      files: '*.gts',
+      options: {
+        parser: 'ember-template-tag',
+      },
+    },
+  ],
 };
diff --git a/packages/ember-headless-form/babel.config.json b/packages/ember-headless-form/babel.config.json
index 739f8261..04da3ac3 100644
--- a/packages/ember-headless-form/babel.config.json
+++ b/packages/ember-headless-form/babel.config.json
@@ -1,6 +1,7 @@
 {
   "presets": [["@babel/preset-typescript"]],
   "plugins": [
+    "ember-template-imports/src/babel-plugin",
     "@embroider/addon-dev/template-colocation-plugin",
     ["@babel/plugin-proposal-decorators", { "legacy": true }],
     "@babel/plugin-proposal-class-properties"
diff --git a/packages/ember-headless-form/package.json b/packages/ember-headless-form/package.json
index 3adc360b..c3b2ed5e 100644
--- a/packages/ember-headless-form/package.json
+++ b/packages/ember-headless-form/package.json
@@ -33,6 +33,7 @@
     "@embroider/util": "^1.10.0",
     "ember-async-data": "^0.7.0",
     "ember-modifier": "^4.1.0",
+    "rollup-plugin-glimmer-template-tag": "^0.1.0",
     "tracked-built-ins": "^3.1.0"
   },
   "peerDependencies": {
diff --git a/packages/ember-headless-form/rollup.config.mjs b/packages/ember-headless-form/rollup.config.mjs
index 953140cc..ace2b88b 100644
--- a/packages/ember-headless-form/rollup.config.mjs
+++ b/packages/ember-headless-form/rollup.config.mjs
@@ -1,6 +1,7 @@
 import typescript from 'rollup-plugin-ts';
 import copy from 'rollup-plugin-copy';
 import { Addon } from '@embroider/addon-dev/rollup';
+import { glimmerTemplateTag } from 'rollup-plugin-glimmer-template-tag';
 
 const addon = new Addon({
   srcDir: 'src',
@@ -31,11 +32,14 @@ export default {
     // package names.
     addon.dependencies(),
 
+    // compile <template> tag into plain JS
+    glimmerTemplateTag(),
+
     // compile TypeScript to latest JavaScript, including Babel transpilation
     typescript({
       transpiler: 'babel',
       browserslist: false,
-      transpileOnly: false,
+      transpileOnly: true,
     }),
 
     // Ensure that standalone .hbs files are properly integrated as Javascript.
diff --git a/packages/ember-headless-form/src/components/headless-form.ts b/packages/ember-headless-form/src/components/headless-form.gts
similarity index 93%
rename from packages/ember-headless-form/src/components/headless-form.ts
rename to packages/ember-headless-form/src/components/headless-form.gts
index 739d72ed..2208db60 100644
--- a/packages/ember-headless-form/src/components/headless-form.ts
+++ b/packages/ember-headless-form/src/components/headless-form.gts
@@ -1,6 +1,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { assert, warn } from '@ember/debug';
+import { hash } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action, set } from '@ember/object';
 
@@ -8,7 +9,7 @@ import { TrackedAsyncData } from 'ember-async-data';
 import { modifier } from 'ember-modifier';
 import { TrackedObject } from 'tracked-built-ins';
 
-import FieldComponent from '../-private/components/field';
+import HeadlessFormFieldComponent from '../-private/components/field';
 import { mergeErrorRecord } from '../-private/utils';
 
 import type {
@@ -91,7 +92,7 @@ export interface HeadlessFormComponentSignature<
          * Field component to define the fields of your form. It yields the further components for the form control, label and validation error.
          */
         Field: WithBoundArgs<
-          typeof FieldComponent<DATA>,
+          typeof HeadlessFormFieldComponent<DATA>,
           | 'data'
           | 'set'
           | 'errors'
@@ -186,11 +187,6 @@ export default class HeadlessFormComponent<
   DATA extends UserData,
   SUBMISSION_VALUE
 > extends Component<HeadlessFormComponentSignature<DATA, SUBMISSION_VALUE>> {
-  FieldComponent = FieldComponent<DATA>;
-
-  // we cannot use (modifier "on") directly in the template due to https://github.com/emberjs/ember.js/issues/19869
-  on = on;
-
   formElement?: HTMLFormElement;
 
   registerForm = modifier((el: HTMLFormElement, _p: []) => {
@@ -498,4 +494,43 @@ export default class HeadlessFormComponent<
       );
     }
   }
+
+  <template>
+    <form
+      novalidate
+      ...attributes
+      {{this.registerForm}}
+      {{on "submit" this.onSubmit}}
+      {{(if
+        this.fieldValidationEvent
+        (modifier this.on this.fieldValidationEvent this.handleFieldValidation)
+      )}}
+      {{(if
+        this.fieldRevalidationEvent
+        (modifier
+          this.on this.fieldRevalidationEvent this.handleFieldRevalidation
+        )
+      )}}
+    >
+      {{yield
+        (hash
+          Field=(component
+            HeadlessFormFieldComponent
+            data=this.internalData
+            set=this.set
+            errors=this.visibleErrors
+            registerField=this.registerField
+            unregisterField=this.unregisterField
+            triggerValidationFor=this.handleFieldValidation
+            fieldValidationEvent=this.fieldValidationEvent
+            fieldRevalidationEvent=this.fieldRevalidationEvent
+          )
+          validationState=this.validationState
+          submissionState=this.submissionState
+          isInvalid=this.hasValidationErrors
+          rawErrors=this.visibleErrors
+        )
+      }}
+    </form>
+  </template>
 }
diff --git a/packages/ember-headless-form/src/components/headless-form.hbs b/packages/ember-headless-form/src/components/headless-form.hbs
deleted file mode 100644
index c8d11e26..00000000
--- a/packages/ember-headless-form/src/components/headless-form.hbs
+++ /dev/null
@@ -1,34 +0,0 @@
-<form
-  novalidate
-  ...attributes
-  {{this.registerForm}}
-  {{on 'submit' this.onSubmit}}
-  {{(if
-    this.fieldValidationEvent
-    (modifier this.on this.fieldValidationEvent this.handleFieldValidation)
-  )}}
-  {{(if
-    this.fieldRevalidationEvent
-    (modifier this.on this.fieldRevalidationEvent this.handleFieldRevalidation)
-  )}}
->
-  {{yield
-    (hash
-      Field=(component
-        (ensure-safe-component this.FieldComponent)
-        data=this.internalData
-        set=this.set
-        errors=this.visibleErrors
-        registerField=this.registerField
-        unregisterField=this.unregisterField
-        triggerValidationFor=this.handleFieldValidation
-        fieldValidationEvent=this.fieldValidationEvent
-        fieldRevalidationEvent=this.fieldRevalidationEvent
-      )
-      validationState=this.validationState
-      submissionState=this.submissionState
-      isInvalid=this.hasValidationErrors
-      rawErrors=this.visibleErrors
-    )
-  }}
-</form>
\ No newline at end of file
diff --git a/packages/ember-headless-form/src/index.ts b/packages/ember-headless-form/src/index.gts
similarity index 100%
rename from packages/ember-headless-form/src/index.ts
rename to packages/ember-headless-form/src/index.gts
diff --git a/packages/ember-headless-form/src/template-registry.ts b/packages/ember-headless-form/src/template-registry.gts
similarity index 100%
rename from packages/ember-headless-form/src/template-registry.ts
rename to packages/ember-headless-form/src/template-registry.gts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cc242257..27044304 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -136,7 +136,7 @@ importers:
       ember-cached-decorator-polyfill: 1.0.1_4gwf5qe42h4jyi7rum37j2phty
       ember-changeset: 4.1.2_webpack@5.75.0
       ember-changeset-validations: 4.1.1_webpack@5.75.0
-      ember-headless-form: file:packages/ember-headless-form_75nsunfos7lzy6svk2ukeoc4li
+      ember-headless-form: file:packages/ember-headless-form_jkrnf4sfvzscdkog72gjywvtwm
       ember-headless-form-changeset: file:packages/changeset_5ijfjkgszm3mcpbxie63nhlrqm
       ember-headless-form-yup: file:packages/yup_swedepl4whxmnoq3j4sgro3xmu
       ember-modifier: 4.1.0_ember-source@4.11.0
@@ -407,6 +407,7 @@ importers:
       prettier: ^2.8.3
       rollup: ^3.0.0
       rollup-plugin-copy: ^3.4.0
+      rollup-plugin-glimmer-template-tag: ^0.1.0
       rollup-plugin-ts: ^3.2.0
       tracked-built-ins: ^3.1.0
       typescript: ^5.0.0
@@ -417,6 +418,7 @@ importers:
       '@embroider/util': 1.10.0_j4rdeqmk3bfqity5vrrnavkxem
       ember-async-data: 0.7.0
       ember-modifier: 4.1.0_ember-source@4.10.0
+      rollup-plugin-glimmer-template-tag: 0.1.0_ember-source@4.10.0
       tracked-built-ins: 3.1.0
     devDependencies:
       '@babel/core': 7.20.12
@@ -717,7 +719,7 @@ importers:
       ember-cli-typescript: 5.2.1
       ember-disable-prototype-extensions: 1.1.3
       ember-fetch: 8.1.2
-      ember-headless-form: file:packages/ember-headless-form_75nsunfos7lzy6svk2ukeoc4li
+      ember-headless-form: file:packages/ember-headless-form_jkrnf4sfvzscdkog72gjywvtwm
       ember-headless-form-changeset: file:packages/changeset_5ijfjkgszm3mcpbxie63nhlrqm
       ember-headless-form-yup: file:packages/yup_swedepl4whxmnoq3j4sgro3xmu
       ember-load-initializers: 2.1.2
@@ -4298,7 +4300,7 @@ packages:
       '@types/estree': 1.0.0
 
   /@types/eslint/7.29.0:
-    resolution: {integrity: sha512-VNcvioYDH8/FxaeTKkM4/TiTwt6pBV9E3OfGmvaw8tPl0rrHCJ4Ll15HRT+pMiFAf/MLQvAzC+6RzUMEL9Ceng==}
+    resolution: {integrity: sha512-VNcvioYDH8/FxaeTKkM4/TiTwt6pBV9E3OfGmvaw8tPl0rrHCJ4Ll15HRT+pMiFAf/MLQvAzC+6RzUMEL9Ceng==, tarball: '@types/eslint/-/eslint-7.29.0.tgz'}
     dependencies:
       '@types/estree': 1.0.0
       '@types/json-schema': 7.0.11
@@ -5333,7 +5335,6 @@ packages:
   /babel-import-util/0.2.0:
     resolution: {integrity: sha512-CtWYYHU/MgK88rxMrLfkD356dApswtR/kWZ/c6JifG1m10e7tBBrs/366dFzWMAoqYmG5/JSh+94tUSpIwh+ag==}
     engines: {node: '>= 12.*'}
-    dev: true
 
   /babel-import-util/1.3.0:
     resolution: {integrity: sha512-PPzUT17eAI18zn6ek1R3sB4Krc/MbnmT1MkZQFmyhjoaEGBVwNABhfVU9+EKcDSKrrOm9OIpGhjxukx1GCiy1g==}
@@ -9035,7 +9036,6 @@ packages:
       validate-peer-dependencies: 1.2.0
     transitivePeerDependencies:
       - supports-color
-    dev: true
 
   /ember-template-lint/4.18.2:
     resolution: {integrity: sha512-yI8kQ8IQ2x5HVq0tQAISXABOHr0Is5sAg6rwceO6M8CYozq7HMxUPEj0VbdcbyIE70SWw/8d24M1rBI4km544Q==}
@@ -9654,7 +9654,7 @@ packages:
     dev: true
 
   /eslint-plugin-es/4.1.0_eslint@7.32.0:
-    resolution: {integrity: sha512-GILhQTnjYE2WorX5Jyi5i4dz5ALWxBIdQECVQavL6s7cI76IZTDWleTHkxz/QT3kvcs2QlGHvKLYsSlPOlPXnQ==}
+    resolution: {integrity: sha512-GILhQTnjYE2WorX5Jyi5i4dz5ALWxBIdQECVQavL6s7cI76IZTDWleTHkxz/QT3kvcs2QlGHvKLYsSlPOlPXnQ==, tarball: eslint-plugin-es/-/eslint-plugin-es-4.1.0.tgz}
     engines: {node: '>=8.10.0'}
     peerDependencies:
       eslint: '>=4.19.1'
@@ -9665,7 +9665,7 @@ packages:
     dev: true
 
   /eslint-plugin-es/4.1.0_eslint@8.34.0:
-    resolution: {integrity: sha512-GILhQTnjYE2WorX5Jyi5i4dz5ALWxBIdQECVQavL6s7cI76IZTDWleTHkxz/QT3kvcs2QlGHvKLYsSlPOlPXnQ==}
+    resolution: {integrity: sha512-GILhQTnjYE2WorX5Jyi5i4dz5ALWxBIdQECVQavL6s7cI76IZTDWleTHkxz/QT3kvcs2QlGHvKLYsSlPOlPXnQ==, tarball: eslint-plugin-es/-/eslint-plugin-es-4.1.0.tgz}
     engines: {node: '>=8.10.0'}
     peerDependencies:
       eslint: '>=4.19.1'
@@ -15056,6 +15056,26 @@ packages:
       del: 5.1.0
     dev: true
 
+  /rollup-plugin-glimmer-template-tag/0.1.0_ember-source@4.10.0:
+    resolution: {integrity: sha512-GVzXFNVqNd99QoagWcBM+g+2ylT/743JLsHLzU+9zlVo5AEOAD6hzx9WHBTIRwCPbsavtw99oKaKVzteM3PmSA==}
+    engines: {node: ^16.0.0 || ^18.0.0 || ^20.0.0}
+    peerDependencies:
+      ember-source: ^4.0.0 || ^5.0.0
+      ember-template-imports: ^3.4.1
+    dependencies:
+      ember-source: 4.10.0_ipwtokbwlukr3yko7oz5lbj6xy
+    dev: false
+
+  /rollup-plugin-glimmer-template-tag/0.1.0_svigfnfu27ui4lkymf46xwz2zy:
+    resolution: {integrity: sha512-GVzXFNVqNd99QoagWcBM+g+2ylT/743JLsHLzU+9zlVo5AEOAD6hzx9WHBTIRwCPbsavtw99oKaKVzteM3PmSA==}
+    engines: {node: ^16.0.0 || ^18.0.0 || ^20.0.0}
+    peerDependencies:
+      ember-source: ^4.0.0 || ^5.0.0
+      ember-template-imports: ^3.4.1
+    dependencies:
+      ember-source: 4.11.0_ipwtokbwlukr3yko7oz5lbj6xy
+      ember-template-imports: 3.4.1
+
   /rollup-plugin-ts/3.2.0_gfyeq5oxbau7uihhx6detv4zpq:
     resolution: {integrity: sha512-KkTLVifkUexEiAXS9VtSjDrjKr0TyusmNJpb2ZTAzI9VuPumSu4AktIaVNnwv70iUEitHwZtET7OAM+5n1u1tg==}
     engines: {node: '>=14.9.0', npm: '>=7.0.0', pnpm: '>=3.2.0', yarn: '>=1.13'}
@@ -16854,7 +16874,6 @@ packages:
     dependencies:
       resolve-package-path: 3.1.0
       semver: 7.3.8
-    dev: true
 
   /validate-peer-dependencies/2.2.0:
     resolution: {integrity: sha512-8X1OWlERjiUY6P6tdeU9E0EwO8RA3bahoOVG7ulOZT5MqgNDUO/BQoVjYiHPcNe+v8glsboZRIw9iToMAA2zAA==}
@@ -17375,13 +17394,13 @@ packages:
     dependencies:
       '@embroider/addon-shim': 1.8.4
       ember-changeset: 4.1.2_webpack@5.75.0
-      ember-headless-form: file:packages/ember-headless-form_75nsunfos7lzy6svk2ukeoc4li
+      ember-headless-form: file:packages/ember-headless-form_jkrnf4sfvzscdkog72gjywvtwm
       ember-source: 4.11.0_ipwtokbwlukr3yko7oz5lbj6xy
       validated-changeset: 1.3.4
     transitivePeerDependencies:
       - supports-color
 
-  file:packages/ember-headless-form_75nsunfos7lzy6svk2ukeoc4li:
+  file:packages/ember-headless-form_jkrnf4sfvzscdkog72gjywvtwm:
     resolution: {directory: packages/ember-headless-form, type: directory}
     id: file:packages/ember-headless-form
     name: ember-headless-form
@@ -17399,9 +17418,11 @@ packages:
       ember-async-data: 0.7.0
       ember-modifier: 4.1.0_ember-source@4.11.0
       ember-source: 4.11.0_ipwtokbwlukr3yko7oz5lbj6xy
+      rollup-plugin-glimmer-template-tag: 0.1.0_svigfnfu27ui4lkymf46xwz2zy
       tracked-built-ins: 3.1.0
     transitivePeerDependencies:
       - '@glint/template'
+      - ember-template-imports
       - supports-color
 
   file:packages/yup_swedepl4whxmnoq3j4sgro3xmu:
@@ -17416,7 +17437,7 @@ packages:
     dependencies:
       '@embroider/addon-shim': 1.8.4
       ember-functions-as-helper-polyfill: 2.1.1_ember-source@4.11.0
-      ember-headless-form: file:packages/ember-headless-form_75nsunfos7lzy6svk2ukeoc4li
+      ember-headless-form: file:packages/ember-headless-form_jkrnf4sfvzscdkog72gjywvtwm
       ember-source: 4.11.0_ipwtokbwlukr3yko7oz5lbj6xy
       yup: 1.0.0
     transitivePeerDependencies:
diff --git a/test-app/.prettierrc.js b/test-app/.prettierrc.js
deleted file mode 100644
index ef60ba9b..00000000
--- a/test-app/.prettierrc.js
+++ /dev/null
@@ -1,23 +0,0 @@
-'use strict';
-
-module.exports = {
-  plugins: ['prettier-plugin-ember-template-tag'],
-  singleQuote: true,
-  templateSingleQuote: false,
-  // this was required to make the VSCode + Prettier work correctly with <template>, see https://github.com/gitKrystan/prettier-plugin-ember-template-tag/issues/38
-  // we should roll this back once that issue has been fixed!
-  overrides: [
-    {
-      files: '*.gjs',
-      options: {
-        parser: 'ember-template-tag',
-      },
-    },
-    {
-      files: '*.gts',
-      options: {
-        parser: 'ember-template-tag',
-      },
-    },
-  ],
-};