@jxsuite/ui 0.5.1 → 0.7.0

package/src/loaders.ts

@@ -17,11 +17,16 @@
  * @docs extending/ui-kit
  */
 
-/** A module the runtime imports on first use, keyed as the kit's documents spell their `$src`. */
-export type KitModuleLoader = () => Promise<Record<string, unknown>>;
+import type { JxScope } from "@jxsuite/runtime/types";
+
+/**
+ * A module the runtime imports on first use, keyed as the kit's documents spell their `$src`. The
+ * namespace it resolves to is read into scope, export by export, as `KIT_MODULES` entries are.
+ */
+export type KitModuleLoader = () => Promise<JxScope>;
 
 /** Behaviour modules as loaders, under the `$src` specifiers the documents use. */
-export const KIT_LOADERS: Readonly<Record<string, KitModuleLoader>> = {
+export const KIT_LOADERS = {
   "jx-ui:/behaviors/color-area.ts": () => import("./behaviors/color-area.ts"),
   "jx-ui:/behaviors/color-field.ts": () => import("./behaviors/color-field.ts"),
   "jx-ui:/behaviors/color-slider.ts": () => import("./behaviors/color-slider.ts"),
@@ -44,4 +49,4 @@ export const KIT_LOADERS: Readonly<Record<string, KitModuleLoader>> = {
   "jx-ui:/behaviors/toast-host.ts": () => import("./behaviors/toast-host.ts"),
   "jx-ui:/color.ts": () => import("./color.ts"),
   "jx-ui:/icons.ts": () => import("./icons.ts"),
-};
+} as const satisfies Readonly<Record<string, KitModuleLoader>>;

package/src/testing/popover-shim.ts

@@ -13,6 +13,8 @@
  * are the browser's to verify.
  */
 
+import { isFunction } from "@jxsuite/schema/guards";
+
 interface PopoverState {
   open: Set<HTMLElement>;
   /** The invoker each showing popover was shown from, when `showPopover({ source })` named one. */
@@ -37,7 +39,10 @@ function toggleEvent(
   source?: Element | null,
 ): Event {
   const event = new Event(type, { bubbles: false, cancelable: type === "beforetoggle" });
-  Object.assign(event, { newState, oldState, ...(source ? { source } : {}) });
+  Object.assign(event, { newState, oldState });
+  if (source) {
+    Object.assign(event, { source });
+  }
   return event;
 }
 
@@ -58,13 +63,19 @@ function modeOf(el: HTMLElement): "auto" | "hint" | "manual" {
   return raw === "auto" || raw === "" ? "auto" : "manual";
 }
 
+/**
+ * `HTMLElement.prototype` as a DOM without the popover API presents it: the methods this shim
+ * installs may be absent, which the DOM lib's own `HTMLElement` type cannot say.
+ */
+interface PopoverPrototype {
+  showPopover?: (options?: ShowPopoverOptions) => void;
+  hidePopover?: () => void;
+  togglePopover?: (force?: boolean) => boolean;
+}
+
 export function installPopoverShim(): void {
-  const proto = HTMLElement.prototype as HTMLElement & {
-    showPopover?: (options?: { source?: Element }) => void;
-    hidePopover?: () => void;
-    togglePopover?: (force?: boolean) => boolean;
-  };
-  if (typeof proto.showPopover === "function") {
+  const proto: PopoverPrototype = HTMLElement.prototype;
+  if (isFunction(proto.showPopover)) {
     return;
   }
   const state: PopoverState = { invokers: new WeakMap(), open: new Set() };

package/src/theme.ts

@@ -10,6 +10,7 @@
  * @docs extending/ui-kit
  */
 import { buildStyleRules } from "@jxsuite/runtime/css";
+import { getNestedStyle, isFunction } from "@jxsuite/schema/guards";
 import type { JxStyle } from "@jxsuite/schema/types";
 import project from "../project.json";
 
@@ -17,7 +18,7 @@ import project from "../project.json";
 export const THEME_LAYER = "jx-ui";
 
 /** The `style` block as authored: one key, the cascade layer, holding every declaration. */
-const themeStyle = project.style as JxStyle;
+const themeStyle: JxStyle = project.style;
 
 /**
  * The tokens themselves, from inside the layer.
@@ -27,7 +28,7 @@ const themeStyle = project.style as JxStyle;
  * jx-ui` and let it look up a token that is one level down, which returns `undefined` rather than
  * failing.
  */
-export const themeTokens = (themeStyle[`@layer ${THEME_LAYER}`] ?? {}) as JxStyle;
+export const themeTokens: JxStyle = getNestedStyle(themeStyle, `@layer ${THEME_LAYER}`) ?? {};
 
 /**
  * The theme as CSS text: every token on `:root`, inside `@layer jx-ui`.
@@ -67,7 +68,7 @@ export function installTheme(doc: Document = document): void {
     return;
   }
   const css = themeCSS();
-  if (typeof CSSStyleSheet === "function" && "replaceSync" in CSSStyleSheet.prototype) {
+  if (isFunction(globalThis.CSSStyleSheet) && "replaceSync" in CSSStyleSheet.prototype) {
     const sheet = new CSSStyleSheet();
     sheet.replaceSync(css);
     doc.adoptedStyleSheets = [...doc.adoptedStyleSheets, sheet];