Convert to 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:
@@ -64,6 +64,7 @@ jobs:
       - uses: wyvox/action@v1
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
+      - run: pnpm build
       - run: pnpm lint
 
 ##############################################################

.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
 
@@ -14,8 +13,17 @@ strict-peer-dependents=true
 # Less strict, but required for tooling to not barf on duplicate peer trees.
 # (many libraries declare the same peers, which resolve to the same
 #  versions)
+peers-suffix-max-length=40
+dedupe-direct-deps=true
+dedupe-injected-deps=true
 dedupe-peer-dependents=true
 
+
+################
+# Hacks 
+################
+public-hoist-pattern[]=ember-source
+
 ################
 # Compatibility
 ################

.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,28 +1,14 @@
 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 loadInitializers from 'ember-load-initializers';
 import Resolver from 'ember-resolver';
 
 import config from 'limber/config/environment';
 
-if (DEBUG) {
-  // 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.
-  //
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  _backburner.DEBUG = true;
-}
+import { registry } from './registry.ts';
 
 // @babel/traverse (from babel-plugin-ember-template-imports)
 // accesses process.....
@@ -35,8 +21,5 @@ Object.assign(window, {
 
 export default class App extends Application {
   modulePrefix = config.modulePrefix;
-  podModulePrefix = config.podModulePrefix;
-  Resolver = Resolver;
+  Resolver = Resolver.withModules(registry);
 }
-
-loadInitializers(App, config.modulePrefix);

.prettierrc.cjs

@@ -9,21 +9,21 @@ import Menu from './menu';
  */
 export default class CopyMenu extends Component {
   copyAsText = (event: Event) => {
-    let code = getSnippetElement(event);
+    const code = getSnippetElement(event);
 
     navigator.clipboard.writeText(code.innerText);
   };
 
   copyAsImage = async (event: Event) => {
-    let code = getSnippetElement(event);
+    const code = getSnippetElement(event);
 
     await copyToClipboard(code);
   };
 
   <template>
     <Menu data-test-copy-menu>
       <:trigger as |t|>
-        <t.Default class="absolute top-3 right-4 z-10" data-test-copy-menu>
+        <t.Default class="absolute right-4 top-3 z-10" data-test-copy-menu>
           📋
         </t.Default>
       </:trigger>

apps/repl/.eslintignore

@@ -6,7 +6,7 @@ export function getSnippetElement(event: Event) {
    * closest, because the element may be removed from the DOM
    * by the time this function runs.
    */
-  let ancestry = event.composedPath();
+  const ancestry = event.composedPath();
 
   /**
    * This component has intimate knowledge
@@ -16,7 +16,7 @@ export function getSnippetElement(event: Event) {
    * We can't select the pre tag directly, otherwise html-to-image
    * loses the padding, border-radius, shadow
    */
-  for (let element of ancestry) {
+  for (const element of ancestry) {
     if (!(element instanceof HTMLElement)) continue;
 
     if (element.classList.contains('glimdown-snippet')) {
@@ -47,7 +47,7 @@ export function getSnippetElement(event: Event) {
  * So instead, we jitter a bit
  */
 export async function copyToClipboard(toCopy: HTMLElement) {
-  let pre = toCopy.querySelector('pre');
+  const pre = toCopy.querySelector('pre');
 
   try {
     pre?.classList.add('drop-shadow-lg');
@@ -68,9 +68,9 @@ export async function copyToClipboard(toCopy: HTMLElement) {
 }
 
 async function toClipboard(target: HTMLElement) {
-  let backgroundColor = '#ffffff';
-  let canCopyToImage = 'ClipboardItem' in window;
-  let filter = (node: HTMLElement | Text) => {
+  const backgroundColor = '#ffffff';
+  const canCopyToImage = 'ClipboardItem' in window;
+  const filter = (node: HTMLElement | Text) => {
     if (node instanceof Text) return true;
 
     if ('getAttribute' in node && node.hasAttribute('data-test-copy-menu')) {
@@ -84,9 +84,9 @@ async function toClipboard(target: HTMLElement) {
     return true;
   };
 
-  let box = target.getBoundingClientRect();
+  const box = target.getBoundingClientRect();
 
-  let options = {
+  const options = {
     filter,
     backgroundColor,
     // tell html-to-image to include margins in dimensions
@@ -104,12 +104,12 @@ async function toClipboard(target: HTMLElement) {
   };
 
   if (!canCopyToImage) {
-    let image = new Image();
-    let dataUri = await toPng(target, options);
+    const image = new Image();
+    const dataUri = await toPng(target, options);
 
     image.src = dataUri;
 
-    let w = window.open('');
+    const w = window.open('');
 
     w?.document.write(
       `Your browser does not yet support ` +
@@ -120,7 +120,7 @@ async function toClipboard(target: HTMLElement) {
     return;
   }
 
-  let blob = await toBlob(target, options);
+  const blob = await toBlob(target, options);
 
   // Works in chrome-based browsers only :(
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment

apps/repl/.eslintrc.cjs

@@ -2,10 +2,11 @@ import Component from '@glimmer/component';
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import { waitFor } from '@ember/test-waiters';
 
 import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
+import { faAngleRight, faAngleUp } from '@fortawesome/free-solid-svg-icons';
 
 import Menu from 'limber/components/limber/menu';
 import { getFromLabel, NAMES } from 'limber/snippets';
@@ -20,7 +21,7 @@ export class DemoSelect extends Component {
   @action
   @waitFor
   async select(demoName: string) {
-    let demo = await getFromLabel(demoName);
+    const demo = await getFromLabel(demoName);
 
     this.editor.updateDemo(demo, 'glimdown');
   }
@@ -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/.template-lintrc.js apps/repl/.template-lintrc.cjs

@@ -36,7 +36,7 @@ export default class CodeMirror extends Modifier<Signature> {
   previousFormat: Format | undefined;
 
   setup = async (element: Element) => {
-    let { format } = this.editor;
+    const { format } = this.editor;
 
     if (format === this.previousFormat) {
       return;
@@ -55,13 +55,13 @@ export default class CodeMirror extends Modifier<Signature> {
     assert(`Expected CODEMIRROR to exist`, CODEMIRROR);
     assert(`can only install codemirror editor an an HTMLElement`, element instanceof HTMLElement);
 
-    let { text: value } = this.editor;
-    let updateText = this.editor.updateText;
+    const { text: value } = this.editor;
+    const updateText = this.editor.updateText;
 
     element.innerHTML = '';
     element.setAttribute('data-format', format);
 
-    let { view, setText } = CODEMIRROR(element, value, format, updateText);
+    const { view, setText } = CODEMIRROR(element, value, format, updateText);
 
     /**
      * This has to be defined on the service so that
@@ -73,7 +73,7 @@ export default class CodeMirror extends Modifier<Signature> {
       setText(text, format); // update the editor
     };
 
-    let scrollable = document.querySelector('.cm-scroller');
+    const scrollable = document.querySelector('.cm-scroller');
 
     if (scrollable instanceof HTMLElement) {
       this.editor.scrollbarWidth = scrollable.offsetWidth - scrollable.clientWidth;
@@ -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/CHANGELOG.md

@@ -1,10 +1,9 @@
 import { waitForPromise } from '@ember/test-waiters';
 
+import { service } from 'ember-primitives/helpers/service';
 import { resource, resourceFactory } from 'ember-resources';
 import { TrackedObject } from 'tracked-built-ins';
 
-import { service } from 'limber-ui';
-
 import codemirror, { setupCodeMirror } from './-code-mirror';
 import Loader from './loader';
 import { LoadingError } from './loading-error';
@@ -13,7 +12,7 @@ import { Placeholder } from './placeholder';
 import type { TOC } from '@ember/component/template-only';
 
 function deferCodemirror() {
-  let state = new TrackedObject({ isLoading: false, isDone: false, error: null });
+  const state = new TrackedObject({ isLoading: false, isDone: false, error: null });
 
   function getEditor() {
     state.isLoading = true;
@@ -33,7 +32,7 @@ function deferCodemirror() {
     window.removeEventListener('touchstart', load);
   }
 
-  let load = () => {
+  const load = () => {
     getEditor();
     cleanup();
   };
@@ -71,7 +70,7 @@ export const Editor: TOC<{
 
     {{else}}
       <div
-        class="syntax-dark relative border border-gray-900 bg-code-bg overflow-hidden"
+        class="syntax-dark bg-code-bg relative overflow-hidden border border-gray-900"
         ...attributes
       >