refactor(frontend): replace stimulus with web component for textarea

packages/frontend/components/textarea/index.js

@@ -1,29 +1,31 @@
-import { Controller } from "@hotwired/stimulus";
 import { debounce } from "../../lib/utils/debounce.js";
 
-export const TextareaController = class extends Controller {
-  initialize() {
+export const TextareaComponent = class extends HTMLElement {
+  constructor() {
+    super();
+
     this.adjustHeight = this.adjustHeight.bind(this);
+    this.textarea = this.querySelector("textarea");
   }
 
-  connect() {
+  connectedCallback() {
     const delay = 100;
 
-    this.element.style.overflow = "hidden";
+    this.textarea.style.overflow = "hidden";
     this.onResize =
       delay > 0 ? debounce(this.adjustHeight, delay) : this.adjustHeight;
     this.adjustHeight();
 
-    this.element.addEventListener("input", this.adjustHeight);
+    this.textarea.addEventListener("input", this.adjustHeight);
     window.addEventListener("resize", this.onResize);
   }
 
-  disconnect() {
+  disconnectedCallback() {
     window.removeEventListener("resize", this.onResize);
   }
 
   adjustHeight() {
-    this.element.style.height = "auto";
-    this.element.style.height = `${this.element.scrollHeight + 4}px`;
+    this.textarea.style.height = "auto";
+    this.textarea.style.height = `${this.textarea.scrollHeight + 4}px`;
   }
 };

packages/frontend/components/textarea/styles.css

@@ -1,3 +1,7 @@
+textarea-component {
+  display: block;
+}
+
 .textarea {
   appearance: none;
   background-color: var(--color-background);

packages/frontend/components/textarea/template.njk

@@ -5,6 +5,7 @@
 {% set id = opts.id or opts.name | slugify({ decamelize: true }) %}
 {% set describedBy = opts.describedBy if opts.describedBy else "" %}
 {% call field({
+  element: "textarea-component",
   classes: opts.field.classes,
   attributes: opts.field.attributes,
   errorMessage: opts.errorMessage

packages/frontend/package.json

@@ -37,7 +37,6 @@
   },
   "dependencies": {
     "@accessible-components/tag-input": "^0.2.0",
-    "@hotwired/stimulus": "^3.0.1",
     "@indiekit/util": "^1.0.0-beta.5",
     "@rollup/plugin-commonjs": "^25.0.3",
     "@rollup/plugin-node-resolve": "^15.0.0",

packages/frontend/scripts/app.js

@@ -1,5 +1,3 @@
-/* global Stimulus */
-import { Application } from "@hotwired/stimulus";
 import { AddAnotherComponent } from "../components/add-another/index.js";
 import { CheckboxesComponent } from "../components/checkboxes/index.js";
 import { ErrorSummaryComponent } from "../components/error-summary/index.js";
@@ -8,9 +6,8 @@ import { PreviewComponent } from "../components/preview/index.js";
 import { NotificationComponent } from "../components/notification/index.js";
 import { RadiosComponent } from "../components/radios/index.js";
 import { TagInputComponent } from "../components/tag-input/index.js";
-import { TextareaController } from "../components/textarea/index.js";
+import { TextareaComponent } from "../components/textarea/index.js";
 
-window.Stimulus = Application.start();
 customElements.define("add-another-component", AddAnotherComponent);
 customElements.define("checkboxes-component", CheckboxesComponent);
 customElements.define("error-summary-component", ErrorSummaryComponent);
@@ -19,4 +16,4 @@ customElements.define("notification-component", NotificationComponent);
 customElements.define("preview-component", PreviewComponent);
 customElements.define("radios-component", RadiosComponent);
 customElements.define("tag-input-component", TagInputComponent);
-Stimulus.register("textarea", TextareaController);
+customElements.define("textarea-component", TextareaComponent);