Convert addons to template tag and gts #246

ynotdraw · 2023-08-03T15:28:50Z

🚀 Description

Converts toucan-core and toucan-form to use the <template> tag and gts file extension. A couple of things worth mentioning:

Massive PR

Unfortunately this PR is massive; however, not much code was actually changed. It was mostly creating a gts file, then copying the hbs file into the <template> and then adding any helper imports needed. While I was in the code I did a few things like added missing JSdocs or renamed things, but everything else stayed put.

Tailwind CSS Autocomplete

NOTE: This only applies to you if you use VSCode.

In VS code, it does not recognize how to format gjs/gts class names by default. Due to that, you need to help the extension out by telling it which language glimmer-ts is. We map it to "html".

Go to the settings for the TailwindCSS extension and add the following:

`prettier-plugin-tailwindcss`

The downside with gjs/gts is that it appears our prettier-plugin-tailwindcss rule no longer works. This rule would auto-sort the class names for us based on Tailwind's rules. I believe we may need to update the prettier glimmer plugin, but I asked on the Ember Discord for clarification. I could also be missing something. At the time I was thinking maybe we needed something like above to help tell the underlying library how to handle these files, but since it's prettier rather than an extension, we don't appear to have the correct hooks for that configuration.

I suppose the good news would be that once the underlying issue is resolved, it should all just work in a future prettier release.

https://discord.com/channels/480462759797063690/486516209873846292/1136646656977289236

🔬 How to Test

Green build
Generally poking around https://51b75e02.ember-toucan-core.pages.dev/ is probably wise too

📸 Images/Videos of Functionality

N/A

changeset-bot · 2023-08-03T15:28:53Z

🦋 Changeset detected

Latest commit: 0e817b6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@crowdstrike/ember-toucan-core	Patch
@crowdstrike/ember-toucan-form	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2023-08-03T16:14:47Z

Preview URLs

Env: preview
Docs: https://7cda0b2c.ember-toucan-core.pages.dev

ynotdraw · 2023-08-03T16:38:00Z

.prettierrc.js

+    {
+      files: '*.gjs',
+      options: {
+        parser: 'ember-template-tag',
+      },
+    },


I suppose we could axe this as we will probably only use gts?

ynotdraw · 2023-08-03T16:38:56Z

docs-app/package.json

@@ -36,7 +36,7 @@
    "@ember/string": "^3.0.1",
    "@ember/test-helpers": "^3.1.0",
    "@embroider/compat": "^2.0.0",
-    "@embroider/core": "^2.0.0",
+    "@embroider/core": "2.0.2",


Had to pin this for now due to an error I was seeing. The task to upgrade us to the latest embroider stuff is at #210

The error was:

docs-app:build: $TMPDIR/embroider/6cc172/node_modules/.pnpm/file+packages+ember-toucan-core_@[email protected]_@[email protected]_@e_y4sbboigrbv5roskhqf7pymkbu/node_modules/@crowdstrike/ember-toucan-core/dist/components/form/fields/textarea.js: Scope objects for `precompileTemplate` may only contain direct references to in-scope values, e.g. { Field } or { Field: Field } docs-app:build: 115 | `, { docs-app:build: 116 | strictMode: true, docs-app:build: > 117 | scope: () => ({ docs-app:build: | ^ docs-app:build: 118 | Field: ToucanFormFieldComponent, docs-app:build: 119 | hash, docs-app:build: 120 | field,

Mind adding a comment somewhere? One possibility:

`"devDependencyComments": { "@embroider/core": "[your comment]" },`

I dig it - added!

ynotdraw · 2023-08-03T16:39:50Z

docs-app/package.json

@@ -108,7 +108,7 @@
    "postcss": "^8.4.17",
    "postcss-import": "^15.0.0",
    "postcss-loader": "^7.0.1",
-    "prettier": "^2.8.3",
+    "prettier": "^3.0.1",


Needed to update prettier so that the prettier template plugin would work properly

ynotdraw · 2023-08-03T16:40:15Z

packages/ember-toucan-core/.prettierrc.cjs

Removed this one as we have one in the root. This was likely left over from when we moved from the single-package to the multiple-package format.

ynotdraw · 2023-08-03T16:41:01Z

packages/ember-toucan-core/package.json

+    "@types/ember__helper": "^4.0.2",
+    "@types/ember__modifier": "^4.0.3",


With gjs/gts we need to import helpers like on, fn, and hash explicitly. By adding these dependencies, it allows us to do so (see below!)

Being able to trace helpers back to import statements is perhaps my favorite part of gjs/gts.

I 100% agree 🎉

ynotdraw · 2023-08-03T16:41:43Z

packages/ember-toucan-core/src/-private/components/form/controls/autocomplete/option.gts

 import { action } from '@ember/object';

 import Check from '../../../../../-private/icons/check';

-interface ToucanFormAutocompleteOptionControlComponentSignature {
+interface ToucanCoreAutocompleteOptionComponentSignature {


For these -private components, I updated the prefix to ToucanCore*

ynotdraw · 2023-08-03T16:42:23Z

packages/ember-toucan-core/src/components/button.gts

@@ -76,9 +77,9 @@ export default class Button extends Component<ButtonSignature> {

    assert(
      `Invalid variant for Button: '${variant}' (allowed values: [${VALID_VARIANTS.join(
-        ', '
+        ', ',


I believe this change was due to the latest version of prettier where trailing commas are now the default.

ynotdraw · 2023-08-03T16:52:36Z

.changeset/good-rivers-train.md

I figured I'd do a patch upgrade just in case things would break consumers for some strange reason 🤞

ynotdraw · 2023-08-03T17:02:14Z

.prettierrc.js

For consistency I took these settings from ember-headless-form.

clintcs · 2023-08-07T13:26:22Z

docs-app/package.json

@@ -36,7 +36,7 @@
    "@ember/string": "^3.0.1",
    "@ember/test-helpers": "^3.1.0",
    "@embroider/compat": "^2.0.0",
-    "@embroider/core": "^2.0.0",
+    "@embroider/core": "2.0.2",


Mind adding a comment somewhere? One possibility:

`"devDependencyComments": { "@embroider/core": "[your comment]" },`

clintcs · 2023-08-07T13:27:44Z

packages/ember-toucan-core/package.json

+    "@types/ember__helper": "^4.0.2",
+    "@types/ember__modifier": "^4.0.3",


Being able to trace helpers back to import statements is perhaps my favorite part of gjs/gts.

clintcs · 2023-08-07T13:28:36Z

packages/ember-toucan-core/rollup.config.mjs

@@ -26,11 +27,15 @@ export default {
    // not everything in publicEntrypoints necessarily needs to go here.
    addon.appReexports(['components/**/*.js']),

+    // compile <template> tag into plain JS
+    glimmerTemplateTag({ preprocessOnly: true }),


Off the top of your head, any idea what this compiles to when there's a backing class? A template class method maybe?

I'm honestly not sure but Preston would know! A bit more info on https://github.com/ember-template-imports/ember-template-imports/blob/master/src/babel-plugin.js#L6-L55, but that's as far as I'll probably dig in 😂

github-actions bot deployed to ember-toucan-core (Preview) August 3, 2023 16:14 View deployment

ynotdraw marked this pull request as ready for review August 3, 2023 16:37

ynotdraw force-pushed the template-tag-gts branch from 0601181 to 25fddb8 Compare August 3, 2023 16:50

ynotdraw requested review from nicolechung, simonihmig, joelamb and clintcs August 3, 2023 16:51

ynotdraw commented Aug 3, 2023

View reviewed changes

github-actions bot deployed to ember-toucan-core (Preview) August 3, 2023 16:52 View deployment

ynotdraw self-assigned this Aug 3, 2023

ynotdraw commented Aug 3, 2023

View reviewed changes

.prettierrc.js

Copy link

Contributor Author

ynotdraw Aug 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For consistency I took these settings from ember-headless-form.

clintcs approved these changes Aug 7, 2023

View reviewed changes

ynotdraw force-pushed the template-tag-gts branch from 25fddb8 to 2e28216 Compare August 7, 2023 16:14

ynotdraw added 4 commits August 7, 2023 12:19

Convert toucan-core to template-tag/gts

2977dac

Convert toucan-form to template-tag/gts

13964ce

Re-export FileEvent type

6d8749c

Pin embroider/core for the time being

0e817b6

ynotdraw force-pushed the template-tag-gts branch from 2e28216 to 0e817b6 Compare August 7, 2023 16:19

github-actions bot deployed to ember-toucan-core (Preview) August 7, 2023 16:22 View deployment

ynotdraw merged commit 04419d3 into main Aug 7, 2023
14 checks passed

ynotdraw deleted the template-tag-gts branch August 7, 2023 20:12

github-actions bot mentioned this pull request Aug 7, 2023

Release Preview #251

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Convert addons to template tag and gts #246

Convert addons to template tag and gts #246

ynotdraw commented Aug 3, 2023 •

edited

Loading

changeset-bot bot commented Aug 3, 2023 •

edited

Loading

github-actions bot commented Aug 3, 2023 •

edited

Loading

ynotdraw Aug 3, 2023

ynotdraw Aug 3, 2023

clintcs Aug 7, 2023

ynotdraw Aug 7, 2023

ynotdraw Aug 3, 2023

ynotdraw Aug 3, 2023

ynotdraw Aug 3, 2023

clintcs Aug 7, 2023

ynotdraw Aug 7, 2023

ynotdraw Aug 3, 2023

ynotdraw Aug 3, 2023

ynotdraw Aug 3, 2023

ynotdraw Aug 3, 2023

clintcs Aug 7, 2023

clintcs Aug 7, 2023

clintcs Aug 7, 2023 •

edited

Loading

ynotdraw Aug 7, 2023 •

edited

Loading

		"@types/ember__helper": "^4.0.2",
		"@types/ember__modifier": "^4.0.3",

Convert addons to template tag and gts #246

Convert addons to template tag and gts #246

Conversation

ynotdraw commented Aug 3, 2023 • edited Loading

🚀 Description

Massive PR

Tailwind CSS Autocomplete

prettier-plugin-tailwindcss

🔬 How to Test

📸 Images/Videos of Functionality

changeset-bot bot commented Aug 3, 2023 • edited Loading

🦋 Changeset detected

github-actions bot commented Aug 3, 2023 • edited Loading

Preview URLs

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

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

Choose a reason for hiding this comment

clintcs Aug 7, 2023 • edited Loading

Choose a reason for hiding this comment

ynotdraw Aug 7, 2023 • edited Loading

Choose a reason for hiding this comment

ynotdraw commented Aug 3, 2023 •

edited

Loading

`prettier-plugin-tailwindcss`

changeset-bot bot commented Aug 3, 2023 •

edited

Loading

github-actions bot commented Aug 3, 2023 •

edited

Loading

clintcs Aug 7, 2023 •

edited

Loading

ynotdraw Aug 7, 2023 •

edited

Loading