@jay-framework/runtime 0.16.4 → 0.17.0

package/dist/index.d.ts

@@ -65,6 +65,7 @@ type PreRenderElement<ViewState extends object, Refs extends object, JayElementT
 type RenderElement<ViewState extends object, Refs extends object, JayElementT extends JayElement<ViewState, Refs>> = (vs: ViewState) => JayElementT;
 interface RenderElementOptions {
     eventWrapper?: JayEventHandlerWrapper<any, any, any>;
+    sanitizeHtml?: (html: string) => string;
 }
 type JayEventHandlerWrapper<EventType, ViewState, Returns> = (orig: JayEventHandler<EventType, ViewState, Returns>, event: JayEvent<EventType, ViewState>) => Returns;
 interface ContextMarker<ContextType> {
@@ -505,11 +506,18 @@ interface WithData<ParentViewState, ChildViewState> {
 }
 declare function mkUpdateCollection<ViewState, Item>(child: ForEach<ViewState, Item>, group: KindergartenGroup): [updateFunc<ViewState>, MountFunc, MountFunc];
 declare function dynamicText<ViewState>(textContent: (vs: ViewState) => string | number | boolean): TextElement<ViewState>;
-type ElementChildren<ViewState> = Array<BaseJayElement<ViewState> | TextElement<ViewState> | string>;
+interface HtmlContent<ViewState> {
+    __htmlContent: true;
+    htmlAccessor: (vs: ViewState) => string;
+}
+declare function dynamicHtml<ViewState>(htmlContent: (vs: ViewState) => string): HtmlContent<ViewState>;
+declare function isHtmlContent(child: any): child is HtmlContent<any>;
+declare function applyHtmlContent<ViewState>(child: HtmlContent<ViewState>, parentElement: Element, updates: updateFunc<ViewState>[], skipInitial?: boolean): void;
+type ElementChildren<ViewState> = Array<BaseJayElement<ViewState> | TextElement<ViewState> | HtmlContent<ViewState> | string>;
 declare const element: <ViewState>(tagName: string, attributes: Attributes<ViewState>, children?: ElementChildren<ViewState>, ref?: PrivateRef<ViewState, BaseJayElement<ViewState>>) => BaseJayElement<ViewState>;
 declare const svgElement: <ViewState>(tagName: string, attributes: Attributes<ViewState>, children?: ElementChildren<ViewState>, ref?: PrivateRef<ViewState, BaseJayElement<ViewState>>) => BaseJayElement<ViewState>;
 declare const mathMLElement: <ViewState>(tagName: string, attributes: Attributes<ViewState>, children?: ElementChildren<ViewState>, ref?: PrivateRef<ViewState, BaseJayElement<ViewState>>) => BaseJayElement<ViewState>;
-type DynamicElementChildren<ViewState> = Array<Conditional<ViewState> | ForEach<ViewState, any> | WithData<ViewState, any> | TextElement<ViewState> | BaseJayElement<ViewState> | When<ViewState, any> | string>;
+type DynamicElementChildren<ViewState> = Array<Conditional<ViewState> | ForEach<ViewState, any> | WithData<ViewState, any> | TextElement<ViewState> | BaseJayElement<ViewState> | HtmlContent<ViewState> | When<ViewState, any> | string>;
 declare const dynamicElementNS: (ns: string) => <ViewState>(tagName: string, attributes: Attributes<ViewState>, children?: DynamicElementChildren<ViewState>, ref?: PrivateRef<ViewState, BaseJayElement<ViewState>>) => BaseJayElement<ViewState>;
 declare const dynamicElement: <ViewState>(tagName: string, attributes: Attributes<ViewState>, children?: DynamicElementChildren<ViewState>, ref?: PrivateRef<ViewState, BaseJayElement<ViewState>>) => BaseJayElement<ViewState>;
 declare const svgDynamicElement: <ViewState>(tagName: string, attributes: Attributes<ViewState>, children?: DynamicElementChildren<ViewState>, ref?: PrivateRef<ViewState, BaseJayElement<ViewState>>) => BaseJayElement<ViewState>;
@@ -571,7 +579,8 @@ declare class ConstructContext<ViewState> {
     private readonly _coordinateMap?;
     private readonly _rootElement?;
     private readonly _dataIds;
-    constructor(data: ViewState, forStaticElements?: boolean, coordinateBase?: Coordinate, coordinateMap?: Map<string, Element[]>, rootElement?: Element, dataIds?: Coordinate);
+    readonly sanitizeHtml?: (html: string) => string;
+    constructor(data: ViewState, forStaticElements?: boolean, coordinateBase?: Coordinate, coordinateMap?: Map<string, Element[]>, rootElement?: Element, dataIds?: Coordinate, sanitizeHtml?: (html: string) => string);
     get currData(): ViewState;
     /** The accumulated trackBy values from ancestor forEach loops (for __headlessInstances key lookup) */
     get dataIds(): Coordinate;
@@ -620,7 +629,7 @@ declare class ConstructContext<ViewState> {
      * hydrateForEach due to JavaScript argument evaluation order).
      */
     peekCoordinate(key: string): Element | undefined;
-    static withRootContext<ViewState, Refs>(viewState: ViewState, refManager: ReferencesManager, elementConstructor: () => BaseJayElement<ViewState>): JayElement<ViewState, Refs>;
+    static withRootContext<ViewState, Refs>(viewState: ViewState, refManager: ReferencesManager, elementConstructor: () => BaseJayElement<ViewState>, sanitizeHtml?: (html: string) => string): JayElement<ViewState, Refs>;
     /**
      * Hydrate a child component's inline template within the parent's coordinate scope.
      *
@@ -679,7 +688,7 @@ declare function adoptText<ViewState>(coordinate: string, accessor: (vs: ViewSta
  * Hydration counterpart to element() — adopts server-rendered HTML and wires
  * up dynamic attribute bindings and children.
  */
-declare function adoptElement<ViewState>(coordinate: string, attributes: Attributes<ViewState>, children?: BaseJayElement<ViewState>[], ref?: PrivateRef<ViewState, BaseJayElement<ViewState>>): BaseJayElement<ViewState>;
+declare function adoptElement<ViewState>(coordinate: string, attributes: Attributes<ViewState>, children?: (BaseJayElement<ViewState> | HtmlContent<ViewState>)[], ref?: PrivateRef<ViewState, BaseJayElement<ViewState>>): BaseJayElement<ViewState>;
 /**
  * Adopt an existing element that has interactive children (forEach/conditional).
  *
@@ -733,4 +742,4 @@ declare function hydrateForEach<ViewState, Item>(accessor: (vs: ViewState) => It
  */
 declare function childCompHydrate<ParentVS, Props, ChildT, ChildElement extends BaseJayElement<ChildT>, ChildComp extends JayComponent<Props, ChildT, ChildElement>>(compCreator: JayComponentConstructor<Props>, getProps: (t: ParentVS) => Props, scopeRootCoordinate?: string, ref?: PrivateRef<ParentVS, ChildComp>): BaseJayElement<ParentVS>;
 
-export { type Attribute, type Attributes, type BaseJayElement, BaseReferencesManager, type ComponentCollectionProxy, ComponentCollectionRefImpl, type ComponentProxy, ComponentRefImpl, ComponentRefsImpl, type Conditional, ConstructContext, type ContextMarker, type Coordinate, type DynamicAttributeOrProperty, EVENT_TRAP, type ElementFrom, type EventEmitter, type EventTypeFrom, type ExtractFastViewState, type ExtractInteractiveViewState, type ExtractProps, type ExtractRefs, type ExtractSlowViewState, type ExtractViewState, type ForEach, GetTrapProxy, type GlobalJayEvents, type HTMLElementCollectionProxy, type HTMLElementCollectionProxyTarget, type HTMLElementProxy, type HTMLElementProxyTarget, type HTMLNativeExec, type HeadLink, type JayComponent, type JayComponentConstructor, type JayContract, type JayElement, type JayEvent, type JayEventHandler, type JayEventHandlerWrapper, type JayLog, type JayNativeEventBuilder, type JayNativeFunction, LogType, type ManagedRefConstructor, ManagedRefType, type ManagedRefs, type MapEventEmitterViewState, type MountFunc, type OnlyEventEmitters, type PreRenderElement, type PrivateRef, type PrivateRefConstructor, PrivateRefs, type PropsFrom, ReferencesManager, type RenderElement, type RenderElementOptions, STATIC, type TextElement, VIEW_STATE_CHANGE_EVENT, type ViewStateFrom, type When, WhenRole, type WithData, adoptDynamicElement, adoptElement, adoptText, booleanAttribute, childComp, childCompHydrate, clearGlobalContextRegistry, conditional, createJayContext, currentConstructionContext, defaultEventWrapper, dynamicAttribute, dynamicElement, dynamicElementNS, dynamicProperty, dynamicText, element, findContext, forEach, hydrateConditional, hydrateForEach, injectHeadLinks, isCondition, isForEach, isWhen, isWithData, jayLog, mathMLDynamicElement, mathMLElement, mkUpdateCollection, noop, noopMount, noopUpdate, normalizeMount, normalizeUpdates, pending, registerGlobalContext, rejected, resolved, restoreContext, saveContext, slowForEachItem, svgDynamicElement, svgElement, type updateFunc, useContext, useGlobalContext, withContext, withData };
+export { type Attribute, type Attributes, type BaseJayElement, BaseReferencesManager, type ComponentCollectionProxy, ComponentCollectionRefImpl, type ComponentProxy, ComponentRefImpl, ComponentRefsImpl, type Conditional, ConstructContext, type ContextMarker, type Coordinate, type DynamicAttributeOrProperty, EVENT_TRAP, type ElementFrom, type EventEmitter, type EventTypeFrom, type ExtractFastViewState, type ExtractInteractiveViewState, type ExtractProps, type ExtractRefs, type ExtractSlowViewState, type ExtractViewState, type ForEach, GetTrapProxy, type GlobalJayEvents, type HTMLElementCollectionProxy, type HTMLElementCollectionProxyTarget, type HTMLElementProxy, type HTMLElementProxyTarget, type HTMLNativeExec, type HeadLink, type HtmlContent, type JayComponent, type JayComponentConstructor, type JayContract, type JayElement, type JayEvent, type JayEventHandler, type JayEventHandlerWrapper, type JayLog, type JayNativeEventBuilder, type JayNativeFunction, LogType, type ManagedRefConstructor, ManagedRefType, type ManagedRefs, type MapEventEmitterViewState, type MountFunc, type OnlyEventEmitters, type PreRenderElement, type PrivateRef, type PrivateRefConstructor, PrivateRefs, type PropsFrom, ReferencesManager, type RenderElement, type RenderElementOptions, STATIC, type TextElement, VIEW_STATE_CHANGE_EVENT, type ViewStateFrom, type When, WhenRole, type WithData, adoptDynamicElement, adoptElement, adoptText, applyHtmlContent, booleanAttribute, childComp, childCompHydrate, clearGlobalContextRegistry, conditional, createJayContext, currentConstructionContext, defaultEventWrapper, dynamicAttribute, dynamicElement, dynamicElementNS, dynamicHtml, dynamicProperty, dynamicText, element, findContext, forEach, hydrateConditional, hydrateForEach, injectHeadLinks, isCondition, isForEach, isHtmlContent, isWhen, isWithData, jayLog, mathMLDynamicElement, mathMLElement, mkUpdateCollection, noop, noopMount, noopUpdate, normalizeMount, normalizeUpdates, pending, registerGlobalContext, rejected, resolved, restoreContext, saveContext, slowForEachItem, svgDynamicElement, svgElement, type updateFunc, useContext, useGlobalContext, withContext, withData };

package/dist/index.js

@@ -175,10 +175,11 @@ function wrapWithModifiedCheck(initialData, baseJayElement) {
   return baseJayElement;
 }
 class ConstructContext {
-  constructor(data, forStaticElements = true, coordinateBase = [], coordinateMap, rootElement, dataIds) {
+  constructor(data, forStaticElements = true, coordinateBase = [], coordinateMap, rootElement, dataIds, sanitizeHtml) {
     __publicField(this, "_coordinateMap");
     __publicField(this, "_rootElement");
     __publicField(this, "_dataIds");
+    __publicField(this, "sanitizeHtml");
     __publicField(this, "coordinate", (refName) => {
       return [...this.coordinateBase, refName];
     });
@@ -188,6 +189,7 @@ class ConstructContext {
     this._coordinateMap = coordinateMap;
     this._rootElement = rootElement;
     this._dataIds = dataIds ?? coordinateBase;
+    this.sanitizeHtml = sanitizeHtml;
   }
   get currData() {
     return this.data;
@@ -213,7 +215,8 @@ class ConstructContext {
       [...this.coordinateBase, id],
       this._coordinateMap,
       this._rootElement,
-      [...this._dataIds, id]
+      [...this._dataIds, id],
+      this.sanitizeHtml
     );
   }
   /**
@@ -232,7 +235,8 @@ class ConstructContext {
       this.coordinateBase,
       localMap,
       scopeRootElement,
-      this._dataIds
+      this._dataIds,
+      this.sanitizeHtml
     );
   }
   forAsync(childViewState) {
@@ -242,7 +246,8 @@ class ConstructContext {
       [...this.coordinateBase],
       this._coordinateMap,
       this._rootElement,
-      this._dataIds
+      this._dataIds,
+      this.sanitizeHtml
     );
   }
   /** Whether this context is in hydration mode (adopting existing DOM). */
@@ -286,8 +291,16 @@ class ConstructContext {
       return void 0;
     return elements[0];
   }
-  static withRootContext(viewState, refManager, elementConstructor) {
-    let context = new ConstructContext(viewState);
+  static withRootContext(viewState, refManager, elementConstructor, sanitizeHtml) {
+    let context = new ConstructContext(
+      viewState,
+      true,
+      [],
+      void 0,
+      void 0,
+      void 0,
+      sanitizeHtml
+    );
     let element2 = withContext(
       CONSTRUCTION_CONTEXT_MARKER,
       context,
@@ -716,9 +729,35 @@ function dynamicText(textContent) {
     unmount: noopMount
   };
 }
+function dynamicHtml(htmlContent) {
+  return { __htmlContent: true, htmlAccessor: htmlContent };
+}
+function isHtmlContent(child) {
+  return child && child.__htmlContent;
+}
+function applyHtmlContent(child, parentElement, updates, skipInitial = false) {
+  const accessor = child.htmlAccessor;
+  const context = currentConstructionContext();
+  const sanitize = context.sanitizeHtml;
+  let content = accessor(context.currData);
+  if (!skipInitial) {
+    parentElement.innerHTML = sanitize ? sanitize(content) : content;
+  }
+  updates.push((newData) => {
+    const newContent = accessor(newData);
+    if (newContent !== content) {
+      parentElement.innerHTML = sanitize ? sanitize(newContent) : newContent;
+      content = newContent;
+    }
+  });
+}
 const elementNS = (ns) => (tagName, attributes, children = [], ref) => {
   let { e, updates, mounts, unmounts } = createBaseElement(ns, tagName, attributes, ref);
   children.forEach((child) => {
+    if (isHtmlContent(child)) {
+      applyHtmlContent(child, e, updates);
+      return;
+    }
     if (typeof child === "string")
       child = text(child);
     e.append(child.dom);
@@ -746,6 +785,10 @@ const dynamicElementNS = (ns) => (tagName, attributes, children = [], ref) => {
   let { e, updates, mounts, unmounts } = createBaseElement(ns, tagName, attributes, ref);
   let kindergarten = new Kindergarten(e);
   children.forEach((child) => {
+    if (isHtmlContent(child)) {
+      applyHtmlContent(child, e, updates);
+      return;
+    }
     if (typeof child === "string")
       child = text(child);
     let group = kindergarten.newGroup();
@@ -1303,6 +1346,10 @@ function adoptElement(coordinate, attributes, children = [], ref) {
     return NOOP_ELEMENT;
   const { element: element2, updates, mounts, unmounts } = base;
   for (const child of children) {
+    if (isHtmlContent(child)) {
+      applyHtmlContent(child, element2, updates, true);
+      continue;
+    }
     collectChild(child, updates, mounts, unmounts);
   }
   return {
@@ -1594,6 +1641,7 @@ export {
   adoptDynamicElement,
   adoptElement,
   adoptText,
+  applyHtmlContent,
   booleanAttribute,
   childComp,
   childCompHydrate,
@@ -1605,6 +1653,7 @@ export {
   dynamicAttribute,
   dynamicElement,
   dynamicElementNS,
+  dynamicHtml,
   dynamicProperty,
   dynamicText,
   element,
@@ -1615,6 +1664,7 @@ export {
   injectHeadLinks,
   isCondition,
   isForEach,
+  isHtmlContent,
   isWhen,
   isWithData,
   jayLog,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jay-framework/runtime",
-  "version": "0.16.4",
+  "version": "0.17.0",
   "type": "module",
   "license": "Apache-2.0",
   "main": "dist/index.js",
@@ -23,11 +23,11 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@jay-framework/list-compare": "^0.16.4",
-    "@jay-framework/reactive": "^0.16.4"
+    "@jay-framework/list-compare": "^0.17.0",
+    "@jay-framework/reactive": "^0.17.0"
   },
   "devDependencies": {
-    "@jay-framework/dev-environment": "^0.16.4",
+    "@jay-framework/dev-environment": "^0.17.0",
     "@testing-library/jest-dom": "^6.2.0",
     "@types/jsdom": "^21.1.6",
     "@types/node": "^20.11.5",