Use @glint/*@unstable (#1824)

* Use @glint/*@unstable

* Fixes

* Progress

* Eh

* eh

* eh

* lint:fix

apps/repl/app/components/limber/layout/index.gts

@@ -1,3 +1,6 @@
+// need to Fix something in ember-statechart-component
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import { assert } from '@ember/debug';
 import { fn, hash } from '@ember/helper';
 
@@ -57,12 +60,6 @@ export const Layout: TOC<{
   };
 }> = <template>
   <State as |state send|>
-    {{!--
-      {{effect (fn onTransition console.log)}}
-      {{log (state.toStrings)}}
-      --}}
-
-    {{! @glint-expect-error xstate broke }}
     {{#let (containerDirection state) as |horizontallySplit|}}
       <Orientation as |isVertical|>
         {{effect (fn send "ORIENTATION" (hash isVertical=isVertical))}}
@@ -72,26 +69,25 @@ export const Layout: TOC<{
           class="{{if horizontallySplit 'flex-col' 'flex-row'}} flex overflow-hidden"
         >
 
-          <EditorContainer
-            @splitHorizontally={{horizontallySplit}}
-            {{! @glint-ignore }}
-            {{setupState send}}
-          >
+          <EditorContainer @splitHorizontally={{horizontallySplit}} {{setupState send}}>
             <Save />
             <Controls
               @isMinimized={{state.matches "hasContainer.minimized"}}
               @isMaximized={{state.matches "hasContainer.maximized"}}
               @needsControls={{toBoolean state.context.container}}
               @splitHorizontally={{horizontallySplit}}
-              {{! @glint-expect-error xstate broken }}
               @send={{send}}
             />
 
             {{yield to="editor"}}
 
           </EditorContainer>
 
-          {{! @glint-expect-error xstate broken }}
+          {{!
+            Unfortunately, even if we were to use native container queries,
+            we wouldn't be able to conditionally render stuff as
+            native container queries are CSS only.
+          }}
           {{#if (isResizable state)}}
             <ResizeHandle @direction={{resizeDirection horizontallySplit}} />
           {{/if}}

apps/repl/app/components/limber/output/frame-messaging.gts

@@ -27,7 +27,7 @@ interface Signature {
   };
 }
 
-interface ParentMethods {
+export interface ParentMethods {
   ready: () => void;
   error: (error: OutputError) => void;
   beginCompile: () => void;

apps/repl/app/modifiers/highlighted.ts

@@ -9,11 +9,13 @@ import { getHighlighter, getPurifier } from './-utils/highlighting';
 interface Signature {
   Element: HTMLPreElement;
   Args: {
-    Positional: [string];
+    Positional: [string | null];
   };
 }
 
 export default modifier<Signature>((element: Element, [code]) => {
+  if (!code) return;
+
   let guid = guidFor(element);
 
   element.setAttribute('id', guid);

apps/repl/package.json

@@ -48,10 +48,10 @@
     "@fortawesome/free-brands-svg-icons": "^6.5.1",
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@glint/core": "1.4.0",
-    "@glint/environment-ember-loose": "1.4.0",
-    "@glint/environment-ember-template-imports": "1.4.0",
-    "@glint/template": "1.4.0",
+    "@glint/core": "1.4.1-unstable.ff9ea6c",
+    "@glint/environment-ember-loose": "1.4.1-unstable.ff9ea6c",
+    "@glint/environment-ember-template-imports": "1.4.1-unstable.ff9ea6c",
+    "@glint/template": "1.4.1-unstable.ff9ea6c",
     "@nullvoxpopuli/eslint-configs": "^4.0.0",
     "@nullvoxpopuli/limber-untyped": "workspace:^0.0.1",
     "@tsconfig/ember": "^3.0.7",

apps/repl/tests/application/output-demos-test.gts

@@ -1,4 +1,3 @@
-import Controller from '@ember/controller';
 import { assert as debugAssert } from '@ember/debug';
 import { settled, visit } from '@ember/test-helpers';
 import { module, test } from 'qunit';
@@ -14,6 +13,12 @@ import { fileFromParams, type Format } from 'limber/utils/messaging';
 import { getService } from '../helpers';
 import { Page } from './-page';
 
+import type {
+  MessagingAPI,
+  ParentMethods,
+} from 'limber/components/limber/output/frame-messaging.gts';
+import type { AsyncMethodReturns } from 'penpal';
+
 module('Output > Demos', function (hooks) {
   setupApplicationTest(hooks);
 
@@ -56,28 +61,20 @@ module('Output > Demos', function (hooks) {
     for (let demo of ALL) {
       test(demo.label, async function (assert) {
         let makeComponent!: (format: Format, text: string) => void;
-        let setParentFrame!: (parentAPI: {
-          beginCompile: () => void;
-          error: (e: unknown) => void;
-          success: () => void;
-          finishedRendering: () => void;
-        }) => void;
-
-        class FakeController extends Controller {
-          api = {
-            onReceiveText: (callback: typeof makeComponent) => (makeComponent = callback),
-            onConnect: (callback: typeof setParentFrame) => (setParentFrame = callback),
-          };
-        }
-        this.owner.register('controller:edit', FakeController);
+        let setParentFrame!: (parentAPI: AsyncMethodReturns<ParentMethods>) => void;
+
+        let api = {
+          onReceiveText: (callback: typeof makeComponent) => (makeComponent = callback),
+          onConnect: (callback) => (setParentFrame = callback),
+        } satisfies MessagingAPI;
+
         this.owner.register(
           'template:edit',
           Route(
             <template>
               <fieldset class="border">
                 <legend>Limber::Output</legend>
-                {{! @glint-ignore }}
-                <Output @messagingAPI={{@controller.api}} />
+                <Output @messagingAPI={{api}} />
               </fieldset>
             </template>
           )
@@ -89,10 +86,12 @@ module('Output > Demos', function (hooks) {
         debugAssert(`makeComponent did not get set`, makeComponent);
 
         setParentFrame({
-          beginCompile: () => assert.step('begin compile'),
-          error: (e) => assert.step(e as string),
-          success: () => assert.step('success'),
-          finishedRendering: () => assert.step('finished rendering'),
+          beginCompile: async () => assert.step('begin compile'),
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          error: async (e) => assert.step(e as any),
+          ready: async () => {},
+          success: async () => assert.step('success'),
+          finishedRendering: async () => assert.step('finished rendering'),
         });
 
         let text = await getFromLabel(demo.label);

apps/repl/tsconfig.json

@@ -5,7 +5,7 @@
   },
   "compilerOptions": {
     // Stylistic
-    "noPropertyAccessFromIndexSignature": "false",
+    "noPropertyAccessFromIndexSignature": false,
     // Ecosystem
     "skipLibCheck": true,
     "allowJs": true,

apps/tutorial/package.json

@@ -60,10 +60,10 @@
     "@fortawesome/free-brands-svg-icons": "^6.5.1",
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@glint/core": "1.4.0",
-    "@glint/environment-ember-loose": "1.4.0",
-    "@glint/environment-ember-template-imports": "1.4.0",
-    "@glint/template": "1.4.0",
+    "@glint/core": "1.4.1-unstable.ff9ea6c",
+    "@glint/environment-ember-loose": "1.4.1-unstable.ff9ea6c",
+    "@glint/environment-ember-template-imports": "1.4.1-unstable.ff9ea6c",
+    "@glint/template": "1.4.1-unstable.ff9ea6c",
     "@nullvoxpopuli/eslint-configs": "^4.0.0",
     "@nullvoxpopuli/limber-styles": "workspace:^0.0.1",
     "@nullvoxpopuli/limber-untyped": "workspace:^0.0.1",

apps/tutorial/tsconfig.json

@@ -6,12 +6,13 @@
   "compilerOptions": {
     "lib": ["DOM", "ES2023"],
     "declaration": false,
+    "declarationMap": false,
     // temporary until ember gets the glimmer-vm upgrade
     "skipLibCheck": true,
     "paths": {
-      "tutorial/tests/*": ["tests/*"],
-      "tutorial/*": ["app/*"],
-      "*": ["types/*"]
+      "tutorial/tests/*": ["./tests/*"],
+      "tutorial/*": ["./app/*"],
+      "*": ["./types/*"]
     }
   },
   "include": ["app/**/*", "tests/**/*", "types/**/*"]

packages/app-support/limber-ui/addon/package.json

@@ -66,10 +66,10 @@
     "@embroider/addon-dev": "5.0.0",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@glint/core": "1.4.0",
-    "@glint/environment-ember-loose": "1.4.0",
-    "@glint/environment-ember-template-imports": "1.4.0",
-    "@glint/template": "1.4.0",
+    "@glint/core": "1.4.1-unstable.ff9ea6c",
+    "@glint/environment-ember-loose": "1.4.1-unstable.ff9ea6c",
+    "@glint/environment-ember-template-imports": "1.4.1-unstable.ff9ea6c",
+    "@glint/template": "1.4.1-unstable.ff9ea6c",
     "@nullvoxpopuli/eslint-configs": "^4.0.0",
     "@nullvoxpopuli/limber-untyped": "workspace:*",
     "@rollup/plugin-babel": "^6.0.4",

packages/app-support/limber-ui/addon/tsconfig.json

@@ -12,7 +12,10 @@
     "skipLibCheck": true,
 
     "allowJs": true,
+    "noEmit": false,
     "declarationDir": "declarations",
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
 
     /**
       https://www.typescriptlang.org/tsconfig#rootDir

packages/app-support/limber-ui/test-app/package.json

@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@ember/test-waiters": "^3.1.0",
-    "@glint/template": "1.4.0",
+    "@glint/template": "1.4.1-unstable.ff9ea6c",
     "ember-async-data": "1.0.3",
     "ember-modifier": "^4.1.0",
     "ember-primitives": "^0.21.0",

packages/ember-repl/addon/package.json

@@ -115,10 +115,10 @@
     "@glimmer/syntax": "^0.92.0",
     "@glimmer/tracking": "^1.1.2",
     "@glimmer/util": "^0.92.0",
-    "@glint/core": "1.4.0",
-    "@glint/environment-ember-loose": "1.4.0",
-    "@glint/environment-ember-template-imports": "1.4.0",
-    "@glint/template": "1.4.0",
+    "@glint/core": "1.4.1-unstable.ff9ea6c",
+    "@glint/environment-ember-loose": "1.4.1-unstable.ff9ea6c",
+    "@glint/environment-ember-template-imports": "1.4.1-unstable.ff9ea6c",
+    "@glint/template": "1.4.1-unstable.ff9ea6c",
     "@nullvoxpopuli/eslint-configs": "^4.0.0",
     "@nullvoxpopuli/limber-untyped": "workspace:*",
     "@rollup/plugin-babel": "^6.0.4",
@@ -169,7 +169,7 @@
   "peerDependencies": {
     "@glimmer/compiler": ">= 0.86.0",
     "@glimmer/syntax": ">= 0.86.0",
-    "@glint/template": ">= 1.3.0",
+    "@glint/template": "1.4.1-unstable.ff9ea6c",
     "webpack": ">= 5.92.0"
   },
   "peerDependenciesMeta": {

packages/ember-repl/test-app/package.json

@@ -46,10 +46,10 @@
     "@embroider/webpack": "4.0.5",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@glint/core": "1.4.0",
-    "@glint/environment-ember-loose": "1.4.0",
-    "@glint/environment-ember-template-imports": "1.4.0",
-    "@glint/template": "1.4.0",
+    "@glint/core": "1.4.1-unstable.ff9ea6c",
+    "@glint/environment-ember-loose": "1.4.1-unstable.ff9ea6c",
+    "@glint/environment-ember-template-imports": "1.4.1-unstable.ff9ea6c",
+    "@glint/template": "1.4.1-unstable.ff9ea6c",
     "@nullvoxpopuli/eslint-configs": "^4.0.0",
     "@nullvoxpopuli/limber-untyped": "workspace:^0.0.1",
     "@tsconfig/ember": "^3.0.7",

packages/untyped/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "version": "0.0.1",
   "devDependencies": {
-    "@glint/template": "1.4.0",
+    "@glint/template": "1.4.1-unstable.ff9ea6c",
     "@nullvoxpopuli/eslint-configs": "^4.0.0",
     "eslint": "^8.55.0",
     "prettier": "^3.3.3",