Implement basic component API #14

simonihmig · 2023-01-13T18:41:10Z

Support the most basic component API:

<HeadlessForm> as the only public component
yielding field, which in turn yields label and input components, as well as value and setValue for custom markup
accepts (typed!) @data, passed all the way down to input
calls @onSubmit

<HeadlessForm
  @data={{this.data}}
  @onSubmit={{this.doSomething}}
  as
  |form|
>
  <form.field @name="name" as |field|>
    <field.label>Name</field.label>
    <field.input @type="text" />
  </form.field>

  <button type="submit">Submit</button>
</HeadlessForm>

Closes #3

ember-headless-form/src/components/-private/control/input.ts

ember-headless-form/src/components/-private/field.ts

ember-headless-form/rollup.config.mjs

NullVoxPopuli · 2023-01-18T15:54:34Z

ember-headless-form/unpublished-development-types/index.d.ts

@@ -2,12 +2,23 @@
 // These will *not* be published as part of your addon, so be careful that your published code does not rely on them!

 import '@glint/environment-ember-loose';
+import type HeadlessFormRegistry from '../src/template-registry';
+import { ComponentLike } from '@glint/template';


Suggested change

import { ComponentLike } from '@glint/template';

import type { ComponentLike } from '@glint/template';

surprised linting didn't catch this 🤔
or maybe it doesn't matter since in a .d.ts file, everything is a type?

Oh, I think I don't have your eslint-config for the addon (just the blueprint defaults here), only for the test-app (due to template-imports). I can add it here as well...

I added @nullvoxpopuli/eslint-configs also for the addon now, and indeed --fix did a couple of changes!

NullVoxPopuli · 2023-01-18T15:55:25Z

test-app/.prettierrc.js

  overrides: [
    {
-      files: '*.{js,ts}',
+      files: '*.gjs',


is this not automatic? 🤔

maybe I missed something the the README for this plugin

Yeah, probably this shouldn't be there. But this was the only way to make the prettier VSCode plugin work, see gitKrystan/prettier-plugin-ember-template-tag#38

making editors work is pretty important, I'm in favor

I am adding a comment there to point to that issue, so we can revert that should that get fixed.

nicolechung · 2023-01-18T16:18:01Z

.github/workflows/ci.yml

@@ -62,12 +62,11 @@ jobs:
      fail-fast: false
      matrix:
        try-scenario:
-          - ember-lts-3.28


Question, just curious: We aren't supporting 3.28 anymore?

Well, this is the very start of everything, so we never supported anything before! 😆
But you are right, we are starting by not supporting Ember 3.28, at least that's the outcome of some back and forth between Preston and me. But we can revisit this decision, if you think there is a good reason to still support Ember 3.28.

Having Ember 3.28 support is good for existing addons, as that supports apps that still have trouble upgrading to 4. And it's quite unfortunate if addons don't have this overlap, and maybe only the newer version of an addon supports Ember 4, but not Ember 3.28. In this way users are forces to upgrade Ember and the addon at the same time.

But none of this applies here, as this is a green field project, and we don't have any existing Ember 3.28 users, so we can just support what is reasonable for us I think...

nicolechung · 2023-01-18T16:20:34Z

ember-headless-form/src/components/-private/field.hbs

@@ -0,0 +1,16 @@
+{{#let (unique-id) (fn @set @name) as |uuid setValue|}}


Question: how come these field files are just index files inside of the field folder?

Not sure what you mean here with index files?

NullVoxPopuli

I think this is a great initial implementation. We're still working out some details on Slack, but I see no reason to hold up this PR. nice work!

nicolechung · 2023-01-18T16:40:43Z

test-app/tests/integration/components/headless-form-test.gts

+
+      assert
+        .dom('form > [data-test-user-content]')
+        .exists('does not render anything on its own');


Super tiny nit, non-blocking: I am not sure how this shows how HeadlessForm does not render it on it's own. Maybe the message is just a bit confusing to me and can be reworded?

Yeah, I see how this can be a bit confusing. The selector basically tests that there is no DOM node sitting between <form> and our <div data-test-user-content>, i.e. the field component does not add any markup on its own (which we want to do as little as possible, given were are "headless")

Oh I see! Maybe it can be field component contains no markup itself or something then.

Yeah, that's a much better phrase, applied that. TY!

nicolechung · 2023-01-18T16:41:38Z

test-app/tests/integration/components/headless-form-test.gts

+        );
+
+        assert.true(
+          submitHandler.calledWith({ firstName: 'Nicole', lastName: 'Chung' }),


Hey that's me! 😁

nicolechung · 2023-01-18T16:45:40Z

test-app/tests/integration/components/headless-form-test.gts

+
+      assert.dom('input').hasAttribute(
+        'id',
+        // copied from https://ihateregex.io/expr/uuid/


nicolechung

Looks good! I left a few tiny comments / questions but more out of curiosity

ynotdraw

Echoing @NullVoxPopuli's statement, this is an excellent step forward! Thanks a bunch!

ynotdraw · 2023-01-18T18:21:57Z

test-app/tests/integration/components/headless-form-test.gts

+  module('data', function () {
+    module('data down', function () {
+      test('data is passed to form controls', async function (assert) {
+        const data = { firstName: 'Tony', lastName: 'Ward' };


I'm forever now part of ember-headless-forms! 🎉

simonihmig added 5 commits January 13, 2023 12:23

Add form component stub, setup Glint in test-app

4ec94bf

Add form test

ea808d8

form.field contextual component

c1d3f69

field.label contextual component

0d53e2c

field.input contextual component

12a2eac

NullVoxPopuli reviewed Jan 13, 2023

View reviewed changes

ember-headless-form/src/components/-private/control/input.ts Show resolved Hide resolved

NullVoxPopuli reviewed Jan 13, 2023

View reviewed changes

ember-headless-form/src/components/-private/control/input.ts Show resolved Hide resolved

NullVoxPopuli reviewed Jan 13, 2023

View reviewed changes

ember-headless-form/src/components/-private/field.ts Outdated Show resolved Hide resolved

Fix type linting in tests

3283734

simonihmig mentioned this pull request Jan 13, 2023

component helper w/ class constructor returns nullable value typed-ember/glint#517

Closed

simonihmig added 20 commits January 16, 2023 10:24

Support only Ember 4.8+

9daa0da

Bring back Ember 4.4 support

62f5fbd

Use native unique-id helper

c523a90

Remove classic scenario

bed86e3

Use ensure-safe-component for strict Embroider compatibility

3e93824

Add ensure-safe-component Glint type

07edccb

Fix Glint errors

9b3eafe

Pass data down

9278915

Fix Embroider tests

ed1f6c1

Pass value as string to input, fixes Glint

38718aa

Switch test-app to template-imports

b478d4d

Add prettier-plugin-ember-template-tag

1f5cadd

Add reactivity test

760fe2d

submit handler

87f43ae

yield value

865c834

yield field id

0ba351f

yield setValue

0f3c84d

Fix broken Glint declarations by rolling back public entrypoint changes

81979df

Fix Glint types

a418ef6

Fix ESLint issues

b63d5d2

simonihmig added 2 commits January 18, 2023 13:11

Disable no-implicit-this template-lint rule

19729e7

Tweak @data types, add Glint tests

093ad97

simonihmig force-pushed the basics branch from 2e58f60 to 093ad97 Compare January 18, 2023 15:31

Update ember-sinon-qunit, cleanup

eaee023

simonihmig marked this pull request as ready for review January 18, 2023 15:43

simonihmig requested review from NullVoxPopuli, ynotdraw and nicolechung January 18, 2023 15:43

NullVoxPopuli reviewed Jan 18, 2023

View reviewed changes

ember-headless-form/rollup.config.mjs Show resolved Hide resolved

NullVoxPopuli reviewed Jan 18, 2023

View reviewed changes

nicolechung reviewed Jan 18, 2023

View reviewed changes

NullVoxPopuli approved these changes Jan 18, 2023

View reviewed changes

nicolechung reviewed Jan 18, 2023

View reviewed changes

nicolechung approved these changes Jan 18, 2023

View reviewed changes

simonihmig added 3 commits January 18, 2023 17:53

Tweak test message

c094820

Add comment to VSCode prettier workaround

e77cba1

Use @nullvoxpopuli/eslint-configs for addon

cb2b675

ynotdraw approved these changes Jan 18, 2023

View reviewed changes

simonihmig added 2 commits January 19, 2023 09:21

Update to stable Ember 4.10.0

089fce2

Try running Embroider tests with 1.x

568199c

This was referenced Jan 19, 2023

Support checkbox control #15

Merged

dependencySatisfies fails due to empty package.json embroider-build/embroider#1332

Closed

Remove ember-source from addon's devDependencies to "fix" Embroider

8cc04a0

simonihmig merged commit 8699b2f into main Jan 20, 2023

simonihmig deleted the basics branch January 20, 2023 18:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement basic component API #14

Implement basic component API #14

simonihmig commented Jan 13, 2023 •

edited

NullVoxPopuli Jan 18, 2023

simonihmig Jan 18, 2023

simonihmig Jan 18, 2023

NullVoxPopuli Jan 18, 2023

simonihmig Jan 18, 2023

NullVoxPopuli Jan 18, 2023

simonihmig Jan 18, 2023

nicolechung Jan 18, 2023 •

edited

simonihmig Jan 18, 2023 •

edited

nicolechung Jan 18, 2023

simonihmig Jan 18, 2023

NullVoxPopuli left a comment

nicolechung Jan 18, 2023

simonihmig Jan 18, 2023

nicolechung Jan 18, 2023

simonihmig Jan 18, 2023

nicolechung Jan 18, 2023 •

edited

nicolechung Jan 18, 2023

nicolechung left a comment

ynotdraw left a comment

ynotdraw Jan 18, 2023

	import { ComponentLike } from '@glint/template';
	import type { ComponentLike } from '@glint/template';

		@@ -0,0 +1,16 @@
		{{#let (unique-id) (fn @set @name) as \|uuid setValue\|}}

Implement basic component API #14

Implement basic component API #14

Conversation

simonihmig commented Jan 13, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nicolechung Jan 18, 2023 • edited

Choose a reason for hiding this comment

simonihmig Jan 18, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NullVoxPopuli left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nicolechung Jan 18, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nicolechung left a comment

Choose a reason for hiding this comment

ynotdraw left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

simonihmig commented Jan 13, 2023 •

edited

nicolechung Jan 18, 2023 •

edited

simonihmig Jan 18, 2023 •

edited

nicolechung Jan 18, 2023 •

edited