feat(ember-form): bump ember-source to 7.1.0-alpha.5, strip on/fn imports

NullVoxPopuli · claude · NullVoxPopuli · commit 38875378dfd4 · 2026-05-12T08:19:36.000-04:00
Per review request. ember-source 7.x's template build transforms compile
`on`/`fn` (and other built-in keywords) directly into the template scope,
so they no longer need explicit imports.

- ember-source peer + dev → ^7.1.0-alpha.5
- babel-plugin-ember-template-compilation → ^3.1.0 (matches the 7-beta
  @ember/app-blueprint shape)
- All `import { on } from '@ember/modifier'` and `import { fn } from
  '@ember/helper'` removed from src, tests, demo-app, README, and the 8
  docs files
- eslint.config.mjs: declare `on`, `fn`, `hash`, `array`, `concat`, `get`
  as readonly globals for `.gts`/`.gjs` (template-implicit, not JS-implicit,
  but easier than per-file overrides)

All five pipeline targets pass: test:eslint, test:types (ember-tsc),
test:lib (10/10 rendering tests under testem+Chrome), test:build (publint
--strict), build (rollup + ember-tsc declarations). Sherif and pnpm
test:docs also green.

Co-Authored-By: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/docs/framework/ember/guides/arrays.md b/docs/framework/ember/guides/arrays.md
@@ -33,8 +33,6 @@ export default class PeopleForm extends Component {
 This will regenerate the list every time you run `pushValue` on `field`:
 
 ```gjs
-import { fn } from '@ember/helper';
-import { on } from '@ember/modifier';
 
 const addPerson = (field) => field.pushValue({ name: '', age: 0 });
 
@@ -47,8 +45,6 @@ const addPerson = (field) => field.pushValue({ name: '', age: 0 });
 Finally, you can use a subfield like so:
 
 ```gjs
-import { fn } from '@ember/helper';
-import { on } from '@ember/modifier';
 
 const handleInput = (field, event) => field.handleChange(event.target.value);
 const nameAt = (i) => `people[${i}].name`;
@@ -66,8 +62,6 @@ const nameAt = (i) => `people[${i}].name`;
 
 ```gjs
 import Component from '@glimmer/component';
-import { fn } from '@ember/helper';
-import { on } from '@ember/modifier';
 import { createForm } from '@tanstack/ember-form';
 
 const handleInput = (field, event) => field.handleChange(event.target.value);
diff --git a/docs/framework/ember/guides/async-initial-values.md b/docs/framework/ember/guides/async-initial-values.md
@@ -25,8 +25,6 @@ Because `createForm` runs at component construction time, the simplest pattern i
 ```gjs
 // person-form.gts
 import Component from '@glimmer/component';
-import { fn } from '@ember/helper';
-import { on } from '@ember/modifier';
 import { createForm } from '@tanstack/ember-form';
 
 const handleInput = (field, event) => field.handleChange(event.target.value);
diff --git a/docs/framework/ember/guides/basic-concepts.md b/docs/framework/ember/guides/basic-concepts.md
@@ -69,8 +69,6 @@ Example:
 
 ```gjs
 import Component from '@glimmer/component';
-import { fn } from '@ember/helper';
-import { on } from '@ember/modifier';
 import { createForm } from '@tanstack/ember-form';
 
 const handleInput = (field, event) => field.handleChange(event.target.value);
@@ -171,8 +169,7 @@ Example:
 
 ```gjs
 import Component from '@glimmer/component';
-import { fn, hash } from '@ember/helper';
-import { on } from '@ember/modifier';
+import { hash } from '@ember/helper';
 import { createForm } from '@tanstack/ember-form';
 
 const handleInput = (field, event) => field.handleChange(event.target.value);
@@ -230,8 +227,7 @@ Supported libraries include:
 
 ```gjs
 import Component from '@glimmer/component';
-import { fn, hash } from '@ember/helper';
-import { on } from '@ember/modifier';
+import { hash } from '@ember/helper';
 import { z } from 'zod';
 import { createForm } from '@tanstack/ember-form';
 
@@ -322,8 +318,6 @@ Example:
 
 ```gjs
 import Component from '@glimmer/component';
-import { fn } from '@ember/helper';
-import { on } from '@ember/modifier';
 import { createForm } from '@tanstack/ember-form';
 
 const handleInput = (field, event) => field.handleChange(event.target.value);
diff --git a/docs/framework/ember/guides/dynamic-validation.md b/docs/framework/ember/guides/dynamic-validation.md
@@ -144,8 +144,7 @@ You can also use `onDynamic` validation with fields, just like you would with ot
 
 ```gjs
 import Component from '@glimmer/component';
-import { fn, hash } from '@ember/helper';
-import { on } from '@ember/modifier';
+import { hash } from '@ember/helper';
 import { createForm, revalidateLogic } from '@tanstack/ember-form';
 
 const handleNumberInput = (field, event) =>
diff --git a/docs/framework/ember/guides/form-composition.md b/docs/framework/ember/guides/form-composition.md
@@ -51,8 +51,6 @@ The simplest way to remove boilerplate is to write small wrapper components that
 ```gjs
 // text-field.gts
 import Component from '@glimmer/component';
-import { fn } from '@ember/helper';
-import { on } from '@ember/modifier';
 
 const handleInput = (field, event) =>
   field.handleChange(event.target.value);
@@ -347,8 +345,6 @@ Now that we've covered the basics of composing forms, let's put it all together
 ```gjs
 // /src/components/text-field.gts
 import Component from '@glimmer/component';
-import { fn } from '@ember/helper';
-import { on } from '@ember/modifier';
 
 const handleInput = (field, event) => field.handleChange(event.target.value);
 
diff --git a/docs/framework/ember/guides/linked-fields.md b/docs/framework/ember/guides/linked-fields.md
@@ -16,8 +16,7 @@ To solve this, we need to make sure that the "confirm password" validation is re
 
 ```gjs
 import Component from '@glimmer/component';
-import { fn, hash } from '@ember/helper';
-import { on } from '@ember/modifier';
+import { hash } from '@ember/helper';
 import { createForm } from '@tanstack/ember-form';
 
 const handleChange = (field, event) => field.handleChange(event.target.value);
diff --git a/docs/framework/ember/guides/validation.md b/docs/framework/ember/guides/validation.md
@@ -17,8 +17,7 @@ Here is an example:
 
 ```gjs
 import Component from '@glimmer/component';
-import { fn, hash } from '@ember/helper';
-import { on } from '@ember/modifier';
+import { hash } from '@ember/helper';
 import { createForm } from '@tanstack/ember-form';
 
 const handleNumberInput = (field, event) =>
diff --git a/docs/framework/ember/quick-start.md b/docs/framework/ember/quick-start.md
@@ -7,8 +7,6 @@ The bare minimum to get started with TanStack Form is to create a form and add a
 
 ```gjs
 import Component from '@glimmer/component';
-import { fn } from '@ember/helper';
-import { on } from '@ember/modifier';
 import { createForm } from '@tanstack/ember-form';
 
 const handleInput = (field, event) => field.handleChange(event.target.value);
diff --git a/packages/ember-form/README.md b/packages/ember-form/README.md
@@ -16,8 +16,7 @@ pnpm add @tanstack/ember-form
 
 ```gjs
 import Component from '@glimmer/component';
-import { fn, hash } from '@ember/helper';
-import { on } from '@ember/modifier';
+import { hash } from '@ember/helper';
 import { createForm, Field, Subscribe } from '@tanstack/ember-form';
 
 const handleInput = (field, event) => {
diff --git a/packages/ember-form/demo-app/templates/application.gts b/packages/ember-form/demo-app/templates/application.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
-import { fn, hash } from '@ember/helper';
-import { on } from '@ember/modifier';
+import { hash } from '@ember/helper';
 import { pageTitle } from 'ember-page-title';
 import { createForm, Subscribe } from '@tanstack/ember-form';
 
diff --git a/packages/ember-form/eslint.config.mjs b/packages/ember-form/eslint.config.mjs
@@ -69,6 +69,16 @@ export default defineConfig([
     languageOptions: {
       parser: emberParser,
       parserOptions: { ...esmParserOptions },
+      // ember-source 7+ compiles these implicitly into template scope via
+      // build transforms, so they don't need imports.
+      globals: {
+        on: 'readonly',
+        fn: 'readonly',
+        hash: 'readonly',
+        array: 'readonly',
+        concat: 'readonly',
+        get: 'readonly',
+      },
     },
     rules: {
       'no-unused-vars': 'off',
diff --git a/packages/ember-form/package.json b/packages/ember-form/package.json
@@ -57,7 +57,7 @@
   },
   "peerDependencies": {
     "@glimmer/component": "^2.0.0",
-    "ember-source": "^6.8.0"
+    "ember-source": "^7.1.0-alpha.5"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
@@ -79,12 +79,12 @@
     "@glint/environment-ember-template-imports": "^1.5.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@typescript-eslint/parser": "^8.0.0",
-    "babel-plugin-ember-template-compilation": "^4.0.0",
+    "babel-plugin-ember-template-compilation": "^3.1.0",
     "concurrently": "^9.0.1",
     "ember-eslint-parser": "^0.5.9",
     "ember-page-title": "^9.0.3",
     "ember-qunit": "^9.0.2",
-    "ember-source": "^6.12.0",
+    "ember-source": "^7.1.0-alpha.5",
     "ember-strict-application-resolver": "^0.1.0",
     "eslint": "9.36.0",
     "eslint-config-prettier": "^10.1.5",
diff --git a/packages/ember-form/tests/integration/create-form-test.gts b/packages/ember-form/tests/integration/create-form-test.gts
@@ -1,6 +1,4 @@
 import Component from '@glimmer/component';
-import { fn } from '@ember/helper';
-import { on } from '@ember/modifier';
 import { fillIn, render, settled } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
diff --git a/packages/ember-form/tests/integration/field-reactive-args-test.gts b/packages/ember-form/tests/integration/field-reactive-args-test.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
-import { fn, hash } from '@ember/helper';
-import { on } from '@ember/modifier';
+import { hash } from '@ember/helper';
 import { tracked } from '@glimmer/tracking';
 import { click, fillIn, render } from '@ember/test-helpers';
 import { module, test } from 'qunit';
diff --git a/packages/ember-form/tests/integration/field-test.gts b/packages/ember-form/tests/integration/field-test.gts
@@ -1,6 +1,5 @@
 import Component from '@glimmer/component';
-import { fn, hash } from '@ember/helper';
-import { on } from '@ember/modifier';
+import { hash } from '@ember/helper';
 import { fillIn, render } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
diff --git a/packages/ember-form/tests/integration/subscribe-test.gts b/packages/ember-form/tests/integration/subscribe-test.gts
@@ -1,6 +1,4 @@
 import Component from '@glimmer/component';
-import { fn } from '@ember/helper';
-import { on } from '@ember/modifier';
 import { fillIn, render } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
