Upgrades oofta

ember-cli-babel ruins lives :(
(or maybe just babel)

Blocked by: NullVoxPopuli/ember-statechart-component#149
which is in-turn blocked by: emberjs/ember-cli-babel#419
which is then blocked by ember-data... *for some reason*.
(I don't use ember-data here, so idgaf)

Further work is blocked by embroider-build/embroider#1038

Author: NullVoxPopuli

frontend/app/app.ts

@@ -1,4 +1,5 @@
 import 'ember-statechart-component';
+import './function-modifiers';
 
 import Application from '@ember/application';
 

frontend/app/components/limber/editor-controls/index.ts

@@ -2,8 +2,6 @@ import Component from '@glimmer/component';
 import { setComponentTemplate } from '@ember/component';
 import { hbs } from 'ember-cli-htmlbars';
 
-import { modifier } from 'ember-could-get-used-to-this';
-
 import State from './state';
 
 import type { InterpreterFrom, StateFrom } from 'xstate';
@@ -72,11 +70,11 @@ class CurriedControls extends Component<CurriedArgs> {
   // could this be a standalone modifier?
   // {{modifier (fn @send 'CONTAINER_FOUND') (fn @send 'CONTAINER_REMOVED')}}
   // ?
-  containerToControl = modifier((element: Element) => {
+  containerToControl = (element: Element) => {
     this.args.send('CONTAINER_FOUND', { container: element as HTMLElement });
 
     return () => this.args.send('CONTAINER_REMOVED');
-  });
+  };
 
   get Controls() {
     let { send, state } = this.args;

frontend/app/components/limber/editor/-code-mirror.ts

@@ -1,26 +1,26 @@
 import { assert } from '@ember/debug';
 
-import { modifier } from 'ember-could-get-used-to-this';
-
 import type { NamedArgs, PositionalArgs } from './-types';
 import type { EditorView } from '@codemirror/view';
 
-export default modifier(
-  (element: HTMLElement, [value, updateText]: PositionalArgs, named: NamedArgs) => {
-    assert(`Expected CODEMIRROR to exist`, CODEMIRROR);
+export default function codeMirror(
+  element: HTMLElement,
+  [value, updateText]: PositionalArgs,
+  named: NamedArgs
+) {
+  assert(`Expected CODEMIRROR to exist`, CODEMIRROR);
 
-    element.innerHTML = '';
+  element.innerHTML = '';
 
-    let { view, setText } = CODEMIRROR(element, value, updateText);
+  let { view, setText } = CODEMIRROR(element, value, updateText);
 
-    named.setValue((text) => {
-      updateText(text); // update the service / URL
-      setText(text); // update the editor
-    });
+  named.setValue((text) => {
+    updateText(text); // update the service / URL
+    setText(text); // update the editor
+  });
 
-    return () => view.destroy();
-  }
-);
+  return () => view.destroy();
+}
 
 let CODEMIRROR:
   | undefined

frontend/app/components/limber/editor/-monaco.ts

@@ -1,7 +1,5 @@
 import { assert } from '@ember/debug';
 
-import { modifier } from 'ember-could-get-used-to-this';
-
 import type { NamedArgs, PositionalArgs } from './-types';
 /**
  * I wish there was a way to specify types-only packages
@@ -13,23 +11,25 @@ import type { NamedArgs, PositionalArgs } from './-types';
  */
 import type * as monaco from 'monaco-editor';
 
-export default modifier(
-  (element: HTMLElement, [value, updateText]: PositionalArgs, named: NamedArgs) => {
-    assert(`Expected MONACO to exist`, MONACO);
+export default function installMonaco(
+  element: HTMLElement,
+  [value, updateText]: PositionalArgs,
+  named: NamedArgs
+) {
+  assert(`Expected MONACO to exist`, MONACO);
 
-    element.innerHTML = '';
+  element.innerHTML = '';
 
-    let { editor, setText } = MONACO(element, value, updateText);
+  let { editor, setText } = MONACO(element, value, updateText);
 
-    named.setValue((text) => {
-      // changing the text this ways calls updateText for us
-      // updateText(text); // update the service / URL
-      setText(text); // update the editor
-    });
+  named.setValue((text) => {
+    // changing the text this ways calls updateText for us
+    // updateText(text); // update the service / URL
+    setText(text); // update the editor
+  });
 
-    return () => editor?.dispose();
-  }
-);
+  return () => editor?.dispose();
+}
 
 let MONACO:
   | undefined

frontend/app/components/shadowed.ts

@@ -3,14 +3,12 @@ import { tracked } from '@glimmer/tracking';
 import { setComponentTemplate } from '@ember/component';
 import { hbs } from 'ember-cli-htmlbars';
 
-import { modifier } from 'ember-could-get-used-to-this';
-
 class Shadowed extends Component {
   @tracked shadow?: ShadowRoot;
 
-  attachShadow = modifier((element: HTMLElement) => {
+  attachShadow = (element: HTMLElement) => {
     this.shadow = element.attachShadow({ mode: 'open' });
-  });
+  };
 }
 
 export default setComponentTemplate(

frontend/app/function-modifiers.js

@@ -0,0 +1,42 @@
+import { setOwner } from '@ember/application';
+import { destroy, registerDestructor } from '@ember/destroyable';
+import { capabilities as modifierCapabilities, setModifierManager } from '@ember/modifier';
+
+class FunctionalModifierManager {
+  capabilities = modifierCapabilities('3.22');
+
+  createModifier(fn, args) {
+    return { fn, args, element: undefined, destructor: undefined };
+  }
+
+  installModifier(state, element) {
+    state.element = element;
+    this.setupModifier(state);
+  }
+
+  updateModifier(state) {
+    this.destroyModifier(state);
+    this.setupModifier(state);
+  }
+
+  setupModifier(state) {
+    let { fn, args, element } = state;
+
+    state.destructor = fn(element, args.positional, args.named);
+  }
+
+  destroyModifier(state) {
+    if (typeof state.destructor === 'function') {
+      state.destructor();
+    }
+  }
+
+  getDebugName(fn) {
+    return fn.name || '(anonymous function)';
+  }
+}
+
+const FUNCTIONAL_MODIFIER_MANAGER = new FunctionalModifierManager();
+const FUNCTIONAL_MODIFIER_MANAGER_FACTORY = () => FUNCTIONAL_MODIFIER_MANAGER;
+
+setModifierManager(FUNCTIONAL_MODIFIER_MANAGER_FACTORY, Function.prototype);

frontend/app/index.html

@@ -11,6 +11,7 @@
 
     {{content-for "head"}}
 
+    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/tailwind.css">
     <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
     <link integrity="" rel="stylesheet" href="{{rootURL}}assets/limber.css">
 

frontend/app/modifiers/constrain-vertically.ts

@@ -1,8 +1,6 @@
 import { debounce } from '@ember/runloop';
 
-import { modifier } from 'ember-could-get-used-to-this';
-
-export default modifier(function constraintVertically(element: HTMLElement) {
+export default function constraintVertically(element: HTMLElement) {
   let debouncedConstrain = () => constrain(element);
   let x = () => debounce(debouncedConstrain, 10);
 
@@ -12,7 +10,7 @@ export default modifier(function constraintVertically(element: HTMLElement) {
   return () => {
     window.removeEventListener('resize', x);
   };
-});
+}
 
 function constrain(element: HTMLElement) {
   let offset = element.getBoundingClientRect().y;

frontend/app/modifiers/highlight-code-blocks.ts

@@ -1,42 +1,15 @@
-import { isDestroyed, isDestroying } from '@ember/destroyable';
-import { action } from '@ember/object';
-
-import { Modifier } from 'ember-could-get-used-to-this';
-
 import { getHighlighter } from './-utils/highlighting';
 
-interface Args {
-  positional: [unknown /* used to trigger updates */];
-}
-export default class HighlightCodeBlocks extends Modifier<Args> {
-  get isSafe() {
-    return !isDestroyed(this) && !isDestroying(this);
-  }
-
-  setup() {
-    this.highlight();
-  }
-
-  update() {
-    this.highlight();
+export default async function highlightCodeBlocks(element: HTMLElement, _: unknown) {
+  if (!_) {
+    console.warn(`No argument was passed to {{highlight-code-blocks}}. Updates won't be detected`);
   }
 
-  @action
-  async highlight() {
-    if (!this.args.positional[0]) {
-      console.warn(
-        `No argument was passed to {{highlight-code-blocks}}. Updates won't be detected`
-      );
-    }
-
-    if (this.isSafe && this.element) {
-      let elements = this.element.querySelectorAll('pre > code');
+  let elements = element.querySelectorAll('pre > code');
 
-      for (let element of elements) {
-        let hljs = await getHighlighter();
+  for (let element of elements) {
+    let hljs = await getHighlighter();
 
-        hljs.highlightElement(element as HTMLElement);
-      }
-    }
+    hljs.highlightElement(element as HTMLElement);
   }
 }

frontend/app/modifiers/highlighted.js

@@ -1,36 +1,25 @@
-import { isDestroyed, isDestroying } from '@ember/destroyable';
-import { action } from '@ember/object';
-
-import { Modifier } from 'ember-could-get-used-to-this';
+import { guidFor } from '@ember/object/internals';
 
 import { getHighlighter, getPurifier } from './-utils/highlighting';
 
-export default class Highlighted extends Modifier {
-  get isSafe() {
-    return !isDestroyed(this) && !isDestroying(this);
-  }
+/**
+ * NOTE: this cannot have a destructor, because it is async
+ */
+export default async function highlighted(element, code) {
+  let guid = guidFor(element);
 
-  get code() {
-    return this.args.positional[0];
-  }
+  element.setAttribute('id', guid);
 
-  setup() {
-    this.highlight(this.code);
-  }
+  let [hljs, purify] = await Promise.all([getHighlighter(), getPurifier()]);
 
-  update() {
-    this.highlight(this.code);
+  // because the above is async, it's possible that the element
+  // has been removed from the DOM
+  if (!window.body.getElementById(guid)) {
+    return;
   }
 
-  @action
-  async highlight(code) {
-    if (this.isSafe && this.element) {
-      let [hljs, purify] = await Promise.all([getHighlighter(), getPurifier()]);
-
-      let target = this.element.querySelector('code');
-      let { value } = hljs.highlight(code, { language: target.classList[0] });
+  let target = element.querySelector('code');
+  let { value } = hljs.highlight(code, { language: target.classList[0] });
 
-      target.innerHTML = purify.sanitize(value);
-    }
-  }
+  target.innerHTML = purify.sanitize(value);
 }

frontend/app/modifiers/positioned-n-lines-from-top.ts

@@ -1,13 +1,8 @@
-import { modifier } from 'ember-could-get-used-to-this';
-
 type PositionalArgs = [number, number];
 
-export default modifier(function positionFromTop(
-  element: HTMLElement,
-  [lines, padding]: PositionalArgs
-) {
+export default function positionFromTop(element: HTMLElement, [lines, padding]: PositionalArgs) {
   let container = element.parentElement as Element;
   let lineHeight = getComputedStyle(container).lineHeight;
 
   element.setAttribute('style', `top: calc(${padding} + ${lineHeight} * ${lines - 1})`);
-});
+}