Refactor: Move all core components to gts

packages/core/package.json

@@ -58,12 +58,12 @@
     "@glint/environment-ember-loose": "1.0.2",
     "@glint/environment-ember-template-imports": "1.0.2",
     "@glint/template": "1.0.2",
-    "@rollup/plugin-babel": "6.0.3",
     "@tsconfig/ember": "^3.0.0",
     "babel-plugin-ember-template-compilation": "^2.1.1",
     "concurrently": "^8.2.0",
     "ember-source": "^5.1.2",
     "rollup": "^3.27.0",
+    "rollup-plugin-ts": "^3.2.0",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.1.6"
   },

packages/core/rollup.config.mjs

@@ -1,14 +1,11 @@
-import { babel } from '@rollup/plugin-babel';
+import ts from "rollup-plugin-ts";
 import { Addon } from '@embroider/addon-dev/rollup';
 
 const addon = new Addon({
   srcDir: 'src',
   destDir: 'dist',
 });
 
-// Add extensions here, such as ts, gjs, etc that you may import
-const extensions = ['.js', '.ts', '.gjs', '.gts'];
-
 export default {
   // This provides defaults that work well alongside `publicEntrypoints` below.
   // You can augment this if you need to.
@@ -44,9 +41,11 @@ export default {
     // It exists only to provide development niceties for you, like automatic
     // template colocation.
     // See `babel.config.json` for the actual Babel configuration!
-    babel({
-      extensions,
-      babelHelpers: 'bundled',
+    ts({
+      transpiler: "babel",
+      transpileOnly: true,
+      babelConfig: "./babel.config.js",
+      browserslist: ["last 2 firefox versions", "last 2 chrome versions"],
     }),
 
 

packages/core/src/components/close-button.gts

@@ -2,8 +2,8 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import 'focus-visible/dist/focus-visible.js';
 import { on } from '@ember/modifier';
-import useFrontileClass from '../helpers/use-frontile-class.ts';
-import VisuallyHidden from './visually-hidden.ts';
+import useFrontileClass from '../helpers/use-frontile-class';
+import VisuallyHidden from './visually-hidden';
 
 export interface CloseButtonArgs {
   /**

packages/core/src/components/collapsible/index.ts → packages/core/src/components/collapsible/index.gts

@@ -1,7 +1,9 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { buildWaiter } from '@ember/test-waiters';
-import safeStyles from '../../utils/safe-styles.ts';
+import { on } from '@ember/modifier';
+import didUpdate from '@ember/render-modifiers/modifiers/did-update';
+import safeStyles from '../../utils/safe-styles';
 
 const waiter = buildWaiter('@frontile/core:collapsible');
 
@@ -149,4 +151,15 @@ export default class Collapsible extends Component<CollapsibleSignature> {
       });
     });
   }
+
+  <template>
+    <div
+      style={{this.styles}}
+      ...attributes
+      {{didUpdate this.update @isOpen}}
+      {{on "transitionend" this.onTransitionEnd}}
+    >
+      {{yield}}
+    </div>
+  </template>
 }

packages/core/src/components/visually-hidden.ts → packages/core/src/components/visually-hidden.gts

@@ -7,4 +7,10 @@ export interface VisuallyHiddenSignature {
   };
 }
 
-export default class VisuallyHidden extends Component<VisuallyHiddenSignature> {}
+export default class VisuallyHidden extends Component<VisuallyHiddenSignature> {
+  <template>
+    <div class="sr-only" ...attributes>
+      {{yield}}
+    </div>
+  </template>
+}

packages/core/src/template-registry.ts

@@ -1,4 +1,4 @@
-import type VisuallyHidden from './components/visually-hidden.ts';
+import type VisuallyHidden from './components/visually-hidden';
 import type CloseButton from './components/close-button';
 import type Collapsible from './components/collapsible';