proscenium 0.19.0.beta6 → 0.19.0.beta7

data/lib/proscenium/ui/flash/node_modules/sourdough-toast/src/sourdough-toast.js

@@ -0,0 +1,537 @@
+// vim: foldmethod=marker
+
+const DEFAULT_OPTIONS = {
+  maxToasts: 3,
+  duration: 4000,
+  width: 356,
+  gap: 14,
+  theme: "light",
+  viewportOffset: 32,
+  expandedByDefault: false,
+  yPosition: "bottom",
+  xPosition: "right",
+};
+
+let toastsCounter = 0;
+
+// {{{ Helpers
+const SVG_NS = "http://www.w3.org/2000/svg";
+
+const svgTags = ["svg", "path", "line", "circle"];
+
+const h = (tag, props = {}, children = [], isSvg = false) => {
+  const element =
+    svgTags.includes(tag) || isSvg
+      ? document.createElementNS(SVG_NS, tag)
+      : document.createElement(tag);
+
+  for (const [key, value] of Object.entries(props)) {
+    if (key === "style") {
+      if (typeof value === "string") {
+        element.style = value;
+      } else {
+        for (const [k, v] of Object.entries(value)) {
+          element.style.setProperty(k, v);
+        }
+      }
+    } else if (key === "dataset") {
+      for (const [k, v] of Object.entries(value)) {
+        element.dataset[k] = v;
+      }
+    } else {
+      element.setAttribute(key, value);
+    }
+  }
+
+  for (const child of children) {
+    if (typeof child === "string") {
+      element.appendChild(document.createTextNode(child));
+      continue;
+    } else if (Array.isArray(child)) {
+      for (const c of child) {
+        element.appendChild(c);
+      }
+      continue;
+    } else if (child instanceof HTMLElement || child instanceof SVGElement) {
+      element.appendChild(child);
+    }
+  }
+
+  return element;
+};
+
+const svgAttrs = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24",
+  height: "20",
+  width: "20",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "1.5",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round",
+  dataset: { slot: "icon" },
+};
+
+const icons = {
+  success: h("svg", svgAttrs, [h("path", { d: "M20 6 9 17l-5-5" })]),
+  info: h("svg", svgAttrs, [
+    h("circle", { cx: "12", cy: "12", r: "10" }),
+    h("path", { d: "M12 16v-4" }),
+    h("path", { d: "M12 8h.01" }),
+  ]),
+  warning: h("svg", svgAttrs, [
+    h("path", {
+      d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
+    }),
+    h("path", { d: "M12 9v4" }),
+    h("path", { d: "M12 17h.01" }),
+  ]),
+  error: h("svg", svgAttrs, [
+    h("circle", { cx: "12", cy: "12", r: "10" }),
+    h("path", { d: "m4.9 4.9 14.2 14.2" }),
+  ]),
+  spinner: h(
+    "svg",
+    {
+      ...svgAttrs,
+      viewBox: "0 0 2400 2400",
+      stroke: "black",
+      "data-sourdough-spinner": "",
+      "stroke-width": "200",
+      "stroke-linecap": "round",
+    },
+    [
+      h("line", { x1: "1200", y1: "600", x2: "1200", y2: "100" }),
+      h("line", {
+        opacity: "0.5",
+        x1: "1200",
+        y1: "2300",
+        x2: "1200",
+        y2: "1800",
+      }),
+      h("line", {
+        opacity: "0.917",
+        x1: "900",
+        y1: "680.4",
+        x2: "650",
+        y2: "247.4",
+      }),
+      h("line", {
+        opacity: "0.417",
+        x1: "1750",
+        y1: "2152.6",
+        x2: "1500",
+        y2: "1719.6",
+      }),
+      h("line", {
+        opacity: "0.833",
+        x1: "680.4",
+        y1: "900",
+        x2: "247.4",
+        y2: "650",
+      }),
+      h("line", {
+        opacity: "0.333",
+        x1: "2152.6",
+        y1: "1750",
+        x2: "1719.6",
+        y2: "1500",
+      }),
+      h("line", {
+        opacity: "0.75",
+        x1: "600",
+        y1: "1200",
+        x2: "100",
+        y2: "1200",
+      }),
+      h("line", {
+        opacity: "0.25",
+        x1: "2300",
+        y1: "1200",
+        x2: "1800",
+        y2: "1200",
+      }),
+      h("line", {
+        opacity: "0.667",
+        x1: "680.4",
+        y1: "1500",
+        x2: "247.4",
+        y2: "1750",
+      }),
+      h("line", {
+        opacity: "0.167",
+        x1: "2152.6",
+        y1: "650",
+        x2: "1719.6",
+        y2: "900",
+      }),
+      h("line", {
+        opacity: "0.583",
+        x1: "900",
+        y1: "1719.6",
+        x2: "650",
+        y2: "2152.6",
+      }),
+      h("line", {
+        opacity: "0.083",
+        x1: "1750",
+        y1: "247.4",
+        x2: "1500",
+        y2: "680.4",
+      }),
+    ],
+  ),
+};
+
+function getDocumentDirection() {
+  if (typeof window === "undefined") return "ltr";
+
+  const dirAttribute = document.documentElement.getAttribute("dir");
+
+  if (dirAttribute === "auto" || !dirAttribute) {
+    return window.getComputedStyle(document.documentElement).direction;
+  }
+
+  return dirAttribute;
+}
+// }}}
+
+// {{{ class Store
+class Store extends EventTarget {
+  #subscribers = [];
+
+  constructor() {
+    super();
+
+    this.data = {
+      toasts: [],
+      expanded: false,
+      interacting: false,
+    };
+  }
+
+  subscribe = (fn) => {
+    this.#subscribers.push(fn);
+
+    return () => {
+      this.#subscribers = this.#subscribers.filter((f) => f !== fn);
+    };
+  };
+
+  #publish = () => {
+    this.#subscribers.forEach((fn) => fn(this.data));
+  };
+
+  #set = (fn) => {
+    const change = fn({ ...this.data });
+    this.data = { ...this.data, ...change };
+    this.#publish(this.data);
+  };
+
+  touch = () => {
+    this.#publish();
+  };
+
+  create = (opts) => {
+    const id = (toastsCounter++).toString();
+    const toast = { id, ...opts };
+
+    this.#set((data) => ({
+      toasts: [...data.toasts, toast],
+    }));
+  };
+
+  remove = (id) => {
+    this.#set((data) => ({
+      toasts: data.toasts.filter((t) => t.id !== id),
+    }));
+  };
+
+  expand = () => {
+    this.#set(() => ({ expanded: true }));
+  };
+
+  collapse = () => {
+    this.#set(() => ({ expanded: false }));
+  };
+
+  focus = () => {
+    this.#set(() => ({ interacting: true }));
+  };
+
+  blur = () => {
+    this.#set(() => ({ interacting: false }));
+  };
+} // }}}
+
+// {{{ class Toast
+class Toast {
+  constructor(sourdough, opts = {}) {
+    this.sourdough = sourdough;
+    this.opts = opts;
+
+    this.paused = false;
+
+    const children = [];
+
+    let icon = null;
+    if (opts.type) {
+      switch (opts.type) {
+        case "success":
+          icon = icons.success;
+          break;
+        case "info":
+          icon = icons.info;
+          break;
+        case "warning":
+          icon = icons.warning;
+          break;
+        case "error":
+          icon = icons.error;
+          break;
+      }
+    }
+
+    if (icon) {
+      children.push(
+        h("div", { dataset: { icon: "" } }, [icon.cloneNode(true)]),
+      );
+    }
+
+    const contentChildren = [];
+
+    const title = h("div", { dataset: { title: "" } }, opts.title);
+
+    contentChildren.push(title);
+
+    if (opts.description) {
+      const description = h(
+        "div",
+        { dataset: { description: "" } },
+        opts.description,
+      );
+      contentChildren.push(description);
+    }
+
+    const content = h("div", { dataset: { content: "" } }, contentChildren);
+
+    children.push(content);
+
+    const li = h(
+      "li",
+      {
+        dataset: {
+          sourdoughToast: "",
+          expanded: sourdough.opts.expanded,
+          styled: true,
+          swiping: false,
+          swipeOut: false,
+          type: opts.type,
+          yPosition: sourdough.opts.yPosition,
+          xPosition: sourdough.opts.xPosition,
+        },
+        style: {},
+      },
+      [children],
+    );
+
+    this.element = li;
+  }
+
+  mount = () => {
+    this.element.dataset.mounted = "true";
+
+    this.initialHeight = this.element.offsetHeight;
+
+    state.touch();
+
+    this.timeLeft = this.sourdough.opts.duration;
+    this.resume();
+  };
+
+  remove = () => {
+    this.element.dataset.removed = "true";
+
+    setTimeout(() => {
+      this.element.remove();
+      state.remove(this.opts.id);
+    }, 400);
+  };
+
+  pause = () => {
+    this.paused = true;
+    this.timeLeft = this.timeLeft - (Date.now() - this.startedAt);
+    clearTimeout(this.timer);
+  };
+
+  resume = () => {
+    this.paused = false;
+    this.startedAt = Date.now();
+    this.timer = setTimeout(this.remove, this.timeLeft);
+  };
+}
+// }}}
+
+class Sourdough {
+  constructor(opts = {}) {
+    this.opts = Object.assign({}, DEFAULT_OPTIONS, opts);
+
+    this.expanded = this.opts.expandedByDefault;
+    if (this.opts.expandedByDefault) setTimeout(state.expand);
+
+    // Cache rendered toasts by id
+    this.renderedToastsById = {};
+
+    this.list = h("ol", {
+      dir: getDocumentDirection(),
+      dataset: {
+        sourdoughToaster: "",
+        expanded: this.expanded,
+        theme: this.opts.theme,
+        richColors: this.opts.richColors,
+        yPosition: this.opts.yPosition,
+        xPosition: this.opts.xPosition,
+      },
+      style: {
+        "--width": `${this.opts.width}px`,
+        "--gap": `${this.opts.gap}px`,
+        "--offset": `${this.opts.viewportOffset}px`,
+      },
+    });
+
+    this.list.addEventListener("mouseenter", state.focus);
+    this.list.addEventListener("mouseleave", state.blur);
+
+    this.element = h(
+      "div",
+      {
+        dataset: {
+          sourdough: "",
+          ...opts.dataset,
+        },
+      },
+      [this.list],
+    );
+
+    this.subscription = state.subscribe(this.update.bind(this));
+  }
+
+  boot = () => {
+    if (document.querySelector("[data-sourdough]")) {
+      return;
+    }
+    document.body.appendChild(this.element);
+  };
+
+  update = (state) => {
+    this.expanded = state.expanded || state.interacting;
+    this.list.dataset.expanded = this.expanded;
+
+    // Get first X toasts
+    const toasts = state.toasts.slice(-this.opts.maxToasts);
+
+    // Render and cache toasts that haven't been rendered yet
+    const renderedIds = [];
+    const toastsToRender = toasts.reduce((coll, t) => {
+      renderedIds.push(t.id);
+      coll.push(this.renderedToastsById[t.id] || this.createToast(t));
+      return coll;
+    }, []);
+
+    // Uncache and remove toast elements that are not to be rendered
+    Object.keys(this.renderedToastsById).forEach((id) => {
+      if (!renderedIds.includes(id)) {
+        this.renderedToastsById[id].element.remove();
+        delete this.renderedToastsById[id];
+      }
+    });
+
+    const front = toastsToRender[toastsToRender.length - 1];
+
+    if (front) {
+      this.list.style.setProperty(
+        "--front-toast-height",
+        `${front.element.offsetHeight}px`,
+      );
+    }
+
+    for (const [index, t] of toastsToRender.entries()) {
+      if (t.paused && !state.interacting) {
+        t.resume();
+      } else if (!t.paused && state.interacting) {
+        t.pause();
+      }
+
+      t.element.dataset.index = index;
+      t.element.dataset.front = t === front;
+      t.element.dataset.expanded = this.expanded;
+
+      t.element.style.setProperty("--index", index);
+      t.element.style.setProperty(
+        "--toasts-before",
+        toastsToRender.length - index - 1,
+      );
+      t.element.style.setProperty("--z-index", index);
+
+      t.element.style.setProperty(
+        "--initial-height",
+        this.expanded ? "auto" : `${t.initialHeight}px`,
+      );
+
+      // Calculate offset by adding all the heights of the toasts before
+      // the current one + the gap between them.
+      // Note: We're calculating the total height once per loop which is
+      // not ideal.
+      const [heightBefore, totalHeight] = toastsToRender.reduce(
+        ([before, total], t, i) => {
+          const boxHeight = t.initialHeight + this.opts.gap;
+          if (i < index) before += boxHeight;
+          total += boxHeight;
+          return [before, total];
+        },
+        [0, 0],
+      );
+
+      const offset =
+        totalHeight - heightBefore - t.initialHeight - this.opts.gap;
+      t.element.style.setProperty(
+        "--offset",
+        `${t.element.dataset.removed ? "0" : offset || 0}px`,
+      );
+    }
+  };
+
+  createToast = (opts) => {
+    const toast = new Toast(this, opts);
+    this.renderedToastsById[opts.id] = toast;
+    this.list.appendChild(toast.element);
+
+    setTimeout(toast.mount, 0);
+
+    return toast;
+  };
+}
+
+const state = new Store();
+
+const toast = (title) => {
+  state.create({ title });
+};
+toast.message = ({ title, description, ...opts }) => {
+  state.create({ title, description, ...opts });
+};
+toast.success = (title, opts = {}) => {
+  state.create({ title, type: "success", ...opts });
+};
+toast.info = (title, opts = {}) => {
+  state.create({ title, type: "info", ...opts });
+};
+toast.warning = (title, opts = {}) => {
+  state.create({ title, type: "warning", ...opts });
+};
+toast.error = (title, opts = {}) => {
+  state.create({ title, type: "error", ...opts });
+};
+
+export { toast, Sourdough };

data/lib/proscenium/ui/flash/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@proscenium/flash",
+  "module": "index.js",
+  "type": "module",
+  "devDependencies": {
+    "sourdough-toast": "latest"
+  },
+  "dependencies": {
+    "dom-mutations": "^1.0.0"
+  }
+}

data/lib/proscenium/ui/react-manager/index.jsx

@@ -1,15 +1,5 @@
-window.Proscenium = window.Proscenium || { lazyScripts: {} };
 const pathAttribute = "data-proscenium-component-path";
 
-// Find lazyscripts JSON already in the DOM.
-const element = document.querySelector("#prosceniumLazyScripts");
-if (element) {
-  window.Proscenium.lazyScripts = {
-    ...window.Proscenium.lazyScripts,
-    ...JSON.parse(element.text),
-  };
-}
-
 // Find components already in the DOM.
 const elements = document.querySelectorAll(`[${pathAttribute}]`);
 elements.length > 0 && init(elements);
@@ -17,12 +7,7 @@ elements.length > 0 && init(elements);
 new MutationObserver((mutationsList) => {
   for (const { addedNodes } of mutationsList) {
     for (const ele of addedNodes) {
-      if (ele.tagName === "SCRIPT" && ele.id === "prosceniumLazyScripts") {
-        window.Proscenium.lazyScripts = {
-          ...window.Proscenium.lazyScripts,
-          ...JSON.parse(ele.text),
-        };
-      } else if (ele.matches(`[${pathAttribute}]`)) {
+      if (ele.matches(`[${pathAttribute}]`)) {
         init([ele]);
       }
     }
@@ -81,12 +66,8 @@ function init(elements) {
     // For testing and simulation of slow connections.
     // const sim = new Promise((resolve) => setTimeout(resolve, 5000));
 
-    if (!window.Proscenium.lazyScripts[path]) {
-      throw `[proscenium/react/manager] Cannot load component ${path} (not found in Proscenium.lazyScripts)`;
-    }
-
-    const react = import("proscenium/react-manager/react");
-    const Component = import(window.Proscenium.lazyScripts[path].outpath);
+    const react = import("@rubygems/proscenium/react-manager/react");
+    const Component = import(path);
 
     const forwardChildren =
       "prosceniumComponentForwardChildren" in element.dataset &&

data/lib/proscenium/ui/ujs/index.js

@@ -2,7 +2,7 @@ export default async () => {
   window.Proscenium = window.Proscenium || {};
 
   if (!window.Proscenium.UJS) {
-    const classPath = "/proscenium/ujs/class.js";
+    const classPath = "/node_modules/@rubygems/proscenium/ujs/class.js";
     const module = await import(classPath);
     window.Proscenium.UJS = new module.default();
   }

data/lib/proscenium/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Proscenium
-  VERSION = '0.19.0.beta6'
+  VERSION = '0.19.0.beta7'
 end

data/lib/proscenium.rb

@@ -40,6 +40,9 @@ module Proscenium
   autoload :Builder
   autoload :Importer
   autoload :Resolver
+  autoload :BundledGems
+  autoload :RubyGems
+  autoload :Registry
   autoload :UI
 
   class Deprecator
@@ -66,10 +69,6 @@ module Proscenium
       @config ||= Railtie.config.proscenium
     end
 
-    def cache
-      @cache ||= config.cache || ActiveSupport::Cache::NullStore.new
-    end
-
     def ui_path
       @ui_path ||= Railtie.root.join('lib', 'proscenium', 'ui')
     end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: proscenium
 version: !ruby/object:Gem::Version
-  version: 0.19.0.beta6
+  version: 0.19.0.beta7
 platform: ruby
 authors:
 - Joel Moss
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-02-13 00:00:00.000000000 Z
+date: 2025-03-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activesupport
@@ -132,6 +132,7 @@ files:
 - README.md
 - lib/proscenium.rb
 - lib/proscenium/builder.rb
+- lib/proscenium/bundled_gems.rb
 - lib/proscenium/core_ext/object/css_module_ivars.rb
 - lib/proscenium/css_module.rb
 - lib/proscenium/css_module/path.rb
@@ -145,8 +146,8 @@ files:
 - lib/proscenium/log_subscriber.rb
 - lib/proscenium/middleware.rb
 - lib/proscenium/middleware/base.rb
-- lib/proscenium/middleware/engines.rb
 - lib/proscenium/middleware/esbuild.rb
+- lib/proscenium/middleware/ruby_gems.rb
 - lib/proscenium/monkey.rb
 - lib/proscenium/phlex.rb
 - lib/proscenium/phlex/asset_inclusions.rb
@@ -154,7 +155,12 @@ files:
 - lib/proscenium/phlex/react_component.rb
 - lib/proscenium/railtie.rb
 - lib/proscenium/react_componentable.rb
+- lib/proscenium/registry.rb
+- lib/proscenium/registry/bundled_package.rb
+- lib/proscenium/registry/package.rb
+- lib/proscenium/registry/ruby_gem_package.rb
 - lib/proscenium/resolver.rb
+- lib/proscenium/ruby_gems.rb
 - lib/proscenium/side_load.rb
 - lib/proscenium/source_path.rb
 - lib/proscenium/templates/rescues/build_error.html.erb
@@ -168,8 +174,20 @@ files:
 - lib/proscenium/ui/component.rb
 - lib/proscenium/ui/custom_element.js
 - lib/proscenium/ui/flash.rb
+- lib/proscenium/ui/flash/bun.lock
 - lib/proscenium/ui/flash/index.css
 - lib/proscenium/ui/flash/index.js
+- lib/proscenium/ui/flash/node_modules/dom-mutations/index.d.ts
+- lib/proscenium/ui/flash/node_modules/dom-mutations/index.js
+- lib/proscenium/ui/flash/node_modules/dom-mutations/license
+- lib/proscenium/ui/flash/node_modules/dom-mutations/package.json
+- lib/proscenium/ui/flash/node_modules/dom-mutations/readme.md
+- lib/proscenium/ui/flash/node_modules/sourdough-toast/LICENSE
+- lib/proscenium/ui/flash/node_modules/sourdough-toast/README.md
+- lib/proscenium/ui/flash/node_modules/sourdough-toast/package.json
+- lib/proscenium/ui/flash/node_modules/sourdough-toast/src/sourdough-toast.css
+- lib/proscenium/ui/flash/node_modules/sourdough-toast/src/sourdough-toast.js
+- lib/proscenium/ui/flash/package.json
 - lib/proscenium/ui/form.css
 - lib/proscenium/ui/form.rb
 - lib/proscenium/ui/form/field_methods.rb