Vite!

Author: NullVoxPopuli

.github/workflows/ci.yml

@@ -41,7 +41,7 @@ jobs:
       with:
         repo-token: ${{ secrets.GITHUB_TOKEN }}
     - run:  echo ${{ github.event.number }} > ./pr-number.txt
-    - run: pnpm turbo build
+    - run: pnpm turbo build build:prod
     # Used for faster deploy so we don't need to checkout the repo
     - uses: actions/upload-artifact@v4
       with:

.github/workflows/deploy-preview.yml

@@ -77,7 +77,7 @@ jobs:
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
       - uses: wyvox/action-setup-pnpm@v3
-      - run: pnpm turbo build 
+      - run: pnpm turbo build:prod 
       - uses: actions/upload-artifact@v4
         with:
           name: deploy-prep-dist

.github/workflows/preview-embroider-upgrade.yml

@@ -1,4 +1,3 @@
-node-version = 20.11.1
 registry = https://registry.npmjs.org
 ignore-scripts = true
 

.node-version

@@ -2,7 +2,8 @@
 
 module.exports = {
   printWidth: 100,
-  plugins: ['prettier-plugin-ember-template-tag'],
+  tailwindStylesheet: './app/styles/app.css',
+  plugins: ['prettier-plugin-ember-template-tag', 'prettier-plugin-tailwindcss'],
   overrides: [
     {
       // Lol, JavaScript

.npmrc

@@ -1,20 +1,19 @@
 import 'limber-ui/theme.css';
 import 'ember-statechart-component';
+import './icons.ts';
 
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import { DEBUG } from '@glimmer/env';
 import Application from '@ember/application';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { _backburner } from '@ember/runloop';
+import compatModules from '@embroider/virtual/compat-modules';
 
 import loadInitializers from 'ember-load-initializers';
 import Resolver from 'ember-resolver';
 
-import config from 'limber/config/environment';
+import config from './config/environment';
 
-if (DEBUG) {
+if (import.meta.env.DEV) {
   // This has performance implications, but the debuggability is worth it.
   // Debugging eventloop stuff is notoriously difficult, so let's make it
   // not difficult by default.
@@ -35,8 +34,7 @@ Object.assign(window, {
 
 export default class App extends Application {
   modulePrefix = config.modulePrefix;
-  podModulePrefix = config.podModulePrefix;
-  Resolver = Resolver;
+  Resolver = Resolver.withModules(compatModules);
 }
 
-loadInitializers(App, config.modulePrefix);
+loadInitializers(App, config.modulePrefix, compatModules);

.prettierrc.cjs

@@ -6,6 +6,7 @@ import { inject as service } from '@ember/service';
 import { waitFor } from '@ember/test-waiters';
 
 import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
+import { faAngleUp, faAngleRight } from '@fortawesome/free-solid-svg-icons';
 
 import Menu from 'limber/components/limber/menu';
 import { getFromLabel, NAMES } from 'limber/snippets';
@@ -29,13 +30,13 @@ export class DemoSelect extends Component {
     <Menu @inline={{true}}>
       <:trigger as |t|>
         <t.Default data-test-demo-select as |menu|>
-          <span class="grid grid-flow-col gap-2 items-center">
+          <span class="grid grid-flow-col items-center gap-2">
             Select demo
 
             {{#if menu.isOpen}}
-              <FaIcon @icon="angle-up" class="min-w-3" />
+              <FaIcon @icon={{faAngleUp}} class="min-w-3" />
             {{else}}
-              <FaIcon @icon="angle-right" class="min-w-3" />
+              <FaIcon @icon={{faAngleRight}} class="min-w-3" />
             {{/if}}
           </span>
         </t.Default>

apps/repl/.eslintignore

@@ -101,5 +101,5 @@ export async function setupCodeMirror() {
   // TypeScript doesn't have a way to type files in the public folder
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  CODEMIRROR = (await import(/* webpackIgnore: true */ '/codemirror/preconfigured.js')).default;
+  CODEMIRROR = (await import('@nullvoxpopuli/limber-codemirror/preconfigured')).default;
 }

apps/repl/.eslintrc.cjs

@@ -71,7 +71,7 @@ export const Editor: TOC<{
 
     {{else}}
       <div
-        class="syntax-dark relative border border-gray-900 bg-code-bg overflow-hidden"
+        class="syntax-dark relative overflow-hidden border border-gray-900 bg-code-bg"
         ...attributes
       >
 

apps/repl/.template-lintrc.js apps/repl/.template-lintrc.cjs

@@ -1,7 +1,7 @@
 <template>
   <div
     data-test-editor-loader
-    class="z-10 absolute inset-0 grid items-center content-center text-center bg-gray-800 bg-opacity-40 text-white text-3xl font-semibold"
+    class="bg-opacity-40 absolute inset-0 z-10 grid content-center items-center bg-gray-800 text-center text-3xl font-semibold text-white"
   >
     Loading Editor...
   </div>

apps/repl/CHANGELOG.md

@@ -7,7 +7,7 @@ export const LoadingError: TOC<{
 }> = <template>
   <div
     data-test-loading-error
-    class="rounded absolute left-4 p-4 top-4 bg-red-100 text-black drop-shadow-md border border-red-700 max-w-[40vw]"
+    class="absolute top-4 left-4 max-w-[40vw] rounded border border-red-700 bg-red-100 p-4 text-black drop-shadow-md"
   >
     {{!
       We need this log to get the stack trace, otherwise we have no easy to

apps/repl/app/app.ts

@@ -18,7 +18,7 @@ export const Placeholder: TOC<{
       data-test-placeholder
       id="initial-editor"
       spellcheck="false"
-      class="w-full h-full px-6 py-2 font-sm font-mono text-white"
+      class="font-sm h-full w-full px-6 py-2 font-mono text-white"
       {{! @glint-ignore }}
       {{highlighted context.text}}
       ...attributes

apps/repl/app/components/limber/demo-select.gts

@@ -167,7 +167,7 @@ export default class FrameOutput extends Component {
     <iframe
       {{this.monitorConnection}}
       title="Rendered output"
-      class="w-full h-full border-none"
+      class="h-full w-full border-none"
       src="/output"
     ></iframe>
   </template>

apps/repl/app/components/limber/editor/-code-mirror.ts

@@ -1,4 +1,7 @@
 import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
+import { faCubes } from '@fortawesome/free-solid-svg-icons';
+
+import { faEmber, faGithub } from '@fortawesome/free-brands-svg-icons';
 import { notInIframe } from 'ember-primitives/iframe';
 
 import { FormatButtons } from 'limber/components/limber/layout/controls/format-buttons';
@@ -9,20 +12,19 @@ import { Share } from './share';
 
 <template>
   <header
-    class="bg-ember-black flex justify-between items-center drop-shadow-lg z-20 py-2 px-4 max-h-12"
+    class="z-20 flex max-h-12 items-center justify-between bg-ember-black px-4 py-2 drop-shadow-lg"
   >
-    <div class="flex gap-2 items-center">
-      <h1 class="text-ember-brand flex gap-2 items-center">
+    <div class="flex items-center gap-2">
+      <h1 class="flex items-center gap-2 text-ember-brand">
         <a
           class="focus:ring-4 focus:outline-none focus-visible:outline-none"
           href="https://emberjs.com"
           target="_blank"
           rel="noreferrer noopener"
         >
-          <FaIcon @icon="ember" @prefix="fab" @size="3x" class="-mb-3 -mt-2" />
+          <FaIcon @icon={{faEmber}} @size="3x" class="-mt-2 -mb-3" />
           <span class="sr-only">Ember.JS homepage</span>
         </a>
-        {{!<FaIcon @icon="markdown" @prefix="fab" @size="2x" class="-mb-2 -mt-2" />}}
       </h1>
 
       {{#if (notInIframe)}}
@@ -31,7 +33,7 @@ import { Share } from './share';
       <Share />
     </div>
 
-    <nav class="text-white flex gap-2 items-baseline">
+    <nav class="flex items-baseline gap-2 text-white">
       <DemoSelect />
 
       <ExternalLink href="/bundle.html">
@@ -41,8 +43,8 @@ import { Share } from './share';
               Bundle
             </DefaultContent>
           </span>
-          <span class="block sm:hidden px-2">
-            <FaIcon @icon="cubes" />
+          <span class="block px-2 sm:hidden">
+            <FaIcon @icon={{faCubes}} />
           </span>
         </:custom>
       </ExternalLink>
@@ -53,8 +55,8 @@ import { Share } from './share';
               GitHub
             </DefaultContent>
           </span>
-          <span class="block sm:hidden px-2">
-            <FaIcon @icon="github" @prefix="fab" />
+          <span class="block px-2 sm:hidden">
+            <FaIcon @icon={{faGithub}} />
           </span>
         </:custom>
       </ExternalLink>

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

@@ -1,6 +1,7 @@
 import { on } from '@ember/modifier';
 
 import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
+import { faQuestion, faXmark } from '@fortawesome/free-solid-svg-icons';
 import { Modal } from 'ember-primitives';
 import { notInIframe } from 'ember-primitives/iframe';
 
@@ -14,7 +15,7 @@ export const FAB: TOC<{
 }> = <template>
   <button
     type="button"
-    class="inline-block items-center p-2 grid-flow-col grid gap-2 rounded-full border-2 text-black bg-white hover:bg-[var(--ember-faint-gray)] focus:outline-none focus:ring focus-visible:outline-none focus-visible:ring ring-ember-brand drop-shadow-2xl hover:drop-shadow-xl disabled:opacity-30 aspect-square text-4xl"
+    class="grid aspect-square grid-flow-col items-center gap-2 rounded-full border-2 bg-white p-2 text-4xl text-black ring-ember-brand drop-shadow-2xl hover:bg-[var(--ember-faint-gray)] hover:drop-shadow-xl focus:ring focus:outline-none focus-visible:ring focus-visible:outline-none disabled:opacity-30"
     ...attributes
   >
     {{yield}}
@@ -27,7 +28,7 @@ export const FlatButton: TOC<{
 }> = <template>
   <button
     type="button"
-    class="inline-block items-center grid-flow-col grid gap-2 rounded-full p-2 border-1 text-black bg-white hover:bg-[var(--ember-faint-gray)] focus:outline-none focus:ring focus-visible:outline-none focus-visible:ring ring-ember-brand disabled:opacity-30 aspect-square text-2xl"
+    class="grid aspect-square grid-flow-col items-center gap-2 rounded-full border-1 bg-white p-2 text-2xl text-black ring-ember-brand hover:bg-[var(--ember-faint-gray)] focus:ring focus:outline-none focus-visible:ring focus-visible:outline-none disabled:opacity-30"
     ...attributes
   >
     {{yield}}
@@ -97,18 +98,18 @@ export const Help = <template>
     <Modal as |m|>
       <div class="fixed right-4 bottom-4">
         <FAB {{on "click" m.open}} aria-label="Help / How to use this tool">
-          <FaIcon @size="xs" @icon="question" class="aspect-square" />
+          <FaIcon @size="xs" @icon={{faQuestion}} class="aspect-square" />
         </FAB>
       </div>
 
       <m.Dialog
-        class="prose rounded drop-shadow-xl border border-white"
+        class="prose rounded border border-white drop-shadow-xl"
         aria-label="help with this tool"
       >
-        <header class="flex justify-between items-center py-2 px-2">
+        <header class="flex items-center justify-between px-2 py-2">
           <h2 class="m-0">Help</h2>
           <FlatButton {{on "click" m.close}} aria-label="hide the help information">
-            <FaIcon @size="xs" @icon="xmark" class="aspect-square" />
+            <FaIcon @size="xs" @icon={{faXmark}} class="aspect-square" />
           </FlatButton>
         </header>
 

apps/repl/app/components/limber/editor/loader.gts

@@ -4,9 +4,9 @@ import { service } from 'limber-ui';
   {{#let (service "editor") as |editor|}}
     {{#if editor.isCompiling}}
       <div
-        class="absolute top-0 inset-x-0 bg-opacity-95 p-10 bg-gray-100 shadow text-black text-2xl font-bold z-20 flex gap-4 items-center"
+        class="bg-opacity-95 absolute inset-x-0 top-0 z-20 flex items-center gap-4 bg-gray-100 p-10 text-2xl font-bold text-black shadow"
       >
-        <div class="loader animate-spin h-6 w-6"></div>
+        <div class="loader h-6 w-6 animate-spin"></div>
         <span>Building...</span>
       </div>
     {{/if}}

apps/repl/app/components/limber/editor/loading-error.gts

@@ -12,8 +12,8 @@ export const EditorContainer: TOC<{
 }> = <template>
   <section
     data-test-editor-panel
-    class="grid overflow-hidden relative min-w-[38px] min-h-[38px]
-      {{if @splitHorizontally 'w-full h-[40vh] resize-y' 'w-[40vw] min-h-full resize-x'}}
+    class="relative grid min-h-[38px] min-w-[38px] overflow-hidden
+      {{if @splitHorizontally 'h-[40vh] w-full resize-y' 'min-h-full w-[40vw] resize-x'}}
       "
     ...attributes
   >
@@ -24,8 +24,8 @@ export const EditorContainer: TOC<{
 export const OutputContainer: TOC<{
   Blocks: { default: [] };
 }> = <template>
-  <section class="flex-1 drop-shadow-inner grid overflow-hidden relative">
-    <div class="overflow-auto relative bg-white flex" data-test-output>
+  <section class="drop-shadow-inner relative grid flex-1 overflow-hidden">
+    <div class="relative flex overflow-auto bg-white" data-test-output>
       {{yield}}
     </div>