npm - @unabridged/midwest - Versions diffs - 0.26.0 → 0.27.0 - Mend

@unabridged/midwest 0.26.0 → 0.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/README.md CHANGED Viewed

@@ -3,7 +3,7 @@
 [![Rails Tests](https://github.com/unabridged/midwest/actions/workflows/rails-tests.yml/badge.svg?branch=main)](https://github.com/unabridged/midwest/actions/workflows/rails-tests.yml)
 [![Bridgetown Tests](https://github.com/unabridged/midwest/actions/workflows/bridgetown-tests.yml/badge.svg?branch=main)](https://github.com/unabridged/midwest/actions/workflows/bridgetown-tests.yml)
 [![Ruby](https://img.shields.io/badge/Ruby-3.3_%7C_3.4-CC342D?logo=ruby&logoColor=white)](https://github.com/unabridged/midwest/actions/workflows/ci.yml)
-[![Coverage](https://img.shields.io/badge/coverage-95%25-brightgreen)](https://github.com/unabridged/midwest/actions/workflows/ci.yml)
+[![Coverage](https://img.shields.io/badge/coverage-94%25-brightgreen)](https://github.com/unabridged/midwest/actions/workflows/ci.yml)
 Midwest Component Library is an implementation of the Midwest Design System using [ViewComponent](https://github.com/github/view_component).

package/app/assets/javascript/midwest/async_runtime.ts ADDED Viewed

@@ -0,0 +1,90 @@
+// Shared runtime for the async (per-component) JS build.
+//
+// In bundled mode every controller is registered up front by
+// `registerMidwestControllers(application)`. In async mode each component's
+// module is fetched on its own, whenever that component first appears on a
+// page — which may be long before or long after the host application calls
+// `Application.start()`. So registration cannot assume an application exists
+// yet: anything that arrives early is queued and flushed once one does.
+//
+// Wiring, for a host app that follows the Rails convention of exposing its
+// instance as `window.Stimulus`, is nothing — the runtime adopts it. Otherwise:
+//
+//   import { Application } from '@hotwired/stimulus'
+//   const application = Application.start()
+//   window.Midwest.useApplication(application)
+//
+// See ASYNC_ASSETS.md §6.2.
+type ControllerConstructor = unknown
+interface StimulusApplication {
+  register: (identifier: string, controllerConstructor: ControllerConstructor) => void
+}
+interface MidwestRuntime {
+  register: (identifier: string, controllerConstructor: ControllerConstructor) => void
+  useApplication: (application: StimulusApplication) => void
+}
+declare global {
+  interface Window {
+    Stimulus?: StimulusApplication
+    Midwest?: MidwestRuntime
+  }
+}
+const pending: [string, ControllerConstructor][] = []
+const registered = new Set<string>()
+let application: StimulusApplication | null = null
+// Idempotent by identifier: a component's module can legitimately be requested
+// twice (a Turbo Frame carrying a component the page already had), and while
+// the browser's module map means it only *executes* once per URL, a rebuilt
+// file with a new hash is a different URL and would execute again.
+export function register (identifier: string, controllerConstructor: ControllerConstructor): void {
+  if (registered.has(identifier)) return
+  registered.add(identifier)
+  if (application) {
+    application.register(identifier, controllerConstructor)
+  } else {
+    pending.push([identifier, controllerConstructor])
+  }
+}
+export function useApplication (app: StimulusApplication): void {
+  application = app
+  while (pending.length > 0) {
+    const [identifier, controllerConstructor] = pending.shift() as [string, ControllerConstructor]
+    app.register(identifier, controllerConstructor)
+  }
+}
+// Adoption has to cope with either order, and the common one is the awkward
+// one: `midwest_asset_tags` sits in <head>, so Midwest's modules are usually
+// parsed — and executed — BEFORE the application's own Stimulus boot. Checking
+// `window.Stimulus` once at load time therefore finds nothing, queues every
+// controller, and never flushes. Nothing errors; the page is simply inert.
+//
+// So when there is no application yet, watch the property for one being
+// assigned. Rails' convention of `window.Stimulus = Application.start()` then
+// wires everything up on its own, whichever script happens to run first.
+if (typeof window !== 'undefined') {
+  window.Midwest = { register, useApplication }
+  if (window.Stimulus) {
+    useApplication(window.Stimulus)
+  } else {
+    let assigned: StimulusApplication | undefined
+    Object.defineProperty(window, 'Stimulus', {
+      configurable: true,
+      enumerable: true,
+      get: () => assigned,
+      set (value: StimulusApplication) {
+        assigned = value
+        if (value) useApplication(value)
+      }
+    })
+  }
+}

package/app/assets/javascript/midwest.js CHANGED Viewed

@@ -9428,21 +9428,19 @@ class SplitView extends Controller {
 class Assets extends Controller {
   static values = {
-    css: String,
-    js: String
+    css: Array,
+    js: Array
   };
   connect() {
-    if (this.cssValue)
-      this.ensureStylesheet(this.cssValue);
-    if (this.jsValue)
-      this.ensureScript(this.jsValue);
+    this.cssValue.forEach((href) => {
+      this.ensureStylesheet(href);
+    });
+    this.jsValue.forEach((src) => {
+      this.ensureScript(src);
+    });
   }
   ensureStylesheet(href) {
-    const url = this.absolute(href);
-    const present = Array.from(
-      document.querySelectorAll('link[rel="stylesheet"]')
-    ).some((link2) => link2.href === url);
-    if (present)
+    if (!href || this.present('link[rel="stylesheet"]', "href", href))
       return;
     const link = document.createElement("link");
     link.rel = "stylesheet";
@@ -9450,17 +9448,19 @@ class Assets extends Controller {
     document.head.appendChild(link);
   }
   ensureScript(src) {
-    const url = this.absolute(src);
-    const present = Array.from(
-      document.querySelectorAll("script[src]")
-    ).some((script2) => script2.src === url);
-    if (present)
+    if (!src || this.present("script[src]", "src", src))
       return;
     const script = document.createElement("script");
     script.type = "module";
     script.src = src;
     document.head.appendChild(script);
   }
+  present(selector, attribute, url) {
+    const absolute = this.absolute(url);
+    return Array.from(document.querySelectorAll(selector)).some(
+      (element) => element[attribute] === absolute
+    );
+  }
   // Resolve a possibly-relative URL to its absolute form for comparison.
   absolute(url) {
     const anchor = document.createElement("a");