Convert addon to use template tag

.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',
+      },
+    },
+  ],
 };

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"

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": {

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.

packages/ember-headless-form/src/components/headless-form.ts → packages/ember-headless-form/src/components/headless-form.gts

@@ -1,14 +1,15 @@
 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';
 
 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>
 }