regor 1.4.4 → 1.4.6

package/dist/regor.es2019.iife.js

@@ -51,6 +51,7 @@ var Regor = (() => {
     onUnmounted: () => onUnmounted,
     pause: () => pause,
     persist: () => persist,
+    pval: () => pval,
     raw: () => raw,
     ref: () => ref,
     removeNode: () => removeNode,
@@ -381,6 +382,37 @@ var Regor = (() => {
         `${constructor} was not found in the context stack at occurrence ${occurrence}.`
       );
     }
+    /**
+     * Validates selected incoming props using assertion-style validators.
+     *
+     * Only keys listed in `schema` are checked. Validation throws immediately
+     * on the first invalid prop and does not mutate `head.props`.
+     *
+     * The schema is keyed from `head.props`, so editor completion can suggest
+     * known prop names while still allowing you to validate only a subset.
+     *
+     * Validators typically come from `pval`, but custom user validators are also
+     * supported.
+     *
+     * Example:
+     * ```ts
+     * head.validateProps({
+     *   title: pval.isString,
+     *   count: pval.optional(pval.isNumber),
+     * })
+     * ```
+     *
+     * @param schema - Validators to apply to selected incoming props.
+     */
+    validateProps(schema) {
+      const props = this.props;
+      for (const name in schema) {
+        const validator = schema[name];
+        if (!validator) continue;
+        const validateProp = validator;
+        validateProp(props[name], name, this);
+      }
+    }
     /**
      * Unmounts this component instance by removing nodes between `start` and `end`
      * and calling unmount lifecycle handlers for captured contexts.
@@ -529,10 +561,13 @@ var Regor = (() => {
     }
     __bindAll(element) {
       const isIfElement = element.hasAttribute(this.__if);
-      const elements = findElements(element, this.__ifSelector);
-      for (const el of elements) {
-        this.__bind(el);
-      }
+      if (isIfElement) this.__bind(element);
+      this.__binder.__componentBinder.__forEachBindableDescendant(
+        element,
+        (el) => {
+          if (el.hasAttribute(this.__if)) this.__bind(el);
+        }
+      );
       return isIfElement;
     }
     __isProcessedOrMark(el) {
@@ -1324,8 +1359,16 @@ var Regor = (() => {
       }
       return false;
     }
+    __isNamedSlotTemplateShortcut(node) {
+      if (!isTemplate(node)) return false;
+      const attributeNames = node.getAttributeNames();
+      if (node.hasAttribute("name")) return true;
+      return attributeNames.some((x) => x.startsWith("#"));
+    }
+    __isDefaultSlotTemplateShortcut(node) {
+      return isTemplate(node) && node.getAttributeNames().length === 0;
+    }
     __unwrapComponents(element) {
-      var _a;
       const binder = this.__binder;
       const parser = binder.__parser;
       const registeredComponents = binder.__config.__components;
@@ -1334,16 +1377,9 @@ var Regor = (() => {
         return;
       }
       const contextComponents = parser.__getComponents();
-      const contextComponentSelectors = parser.__getComponentSelectors();
-      const registeredSelector = this.__getRegisteredComponentSelector(registeredComponents);
-      const selector = [
-        ...registeredSelector ? [registeredSelector] : [],
-        ...contextComponentSelectors,
-        ...contextComponentSelectors.map(hyphenate)
-      ].join(",");
+      const selector = this.__getComponentSelector();
       if (isNullOrWhitespace(selector)) return;
-      const list = element.querySelectorAll(selector);
-      const components = ((_a = element.matches) == null ? void 0 : _a.call(element, selector)) ? [element, ...list] : list;
+      const components = this.__collectTopLevelComponentHosts(element, selector);
       for (const component of components) {
         if (component.hasAttribute(binder.__pre)) continue;
         const parent = component.parentNode;
@@ -1417,7 +1453,7 @@ var Regor = (() => {
         };
         const capturedContext = [...parser.__capture()];
         const createComponentCtx = () => {
-          var _a2;
+          var _a;
           const props = getProps(component, capturedContext);
           const head2 = new ComponentHead(
             props,
@@ -1427,8 +1463,8 @@ var Regor = (() => {
             endOfComponent
           );
           const componentCtx2 = useScope(() => {
-            var _a3;
-            return (_a3 = registeredComponent.context(head2)) != null ? _a3 : {};
+            var _a2;
+            return (_a2 = registeredComponent.context(head2)) != null ? _a2 : {};
           }).context;
           if (head2.autoProps) {
             for (const [key, propsValue] of Object.entries(props)) {
@@ -1452,7 +1488,7 @@ var Regor = (() => {
                 }
               } else componentCtx2[key] = propsValue;
             }
-            (_a2 = head2.onAutoPropsAssigned) == null ? void 0 : _a2.call(head2);
+            (_a = head2.onAutoPropsAssigned) == null ? void 0 : _a.call(head2);
           }
           return { componentCtx: componentCtx2, head: head2 };
         };
@@ -1461,6 +1497,7 @@ var Regor = (() => {
         const len = childNodes.length;
         const isEmptyComponent = component.childNodes.length === 0;
         const expandSlot = (slot) => {
+          var _a;
           const parent2 = slot.parentElement;
           let name = slot.name;
           if (isNullOrWhitespace(name)) {
@@ -1490,9 +1527,12 @@ var Regor = (() => {
             `template[name='${name}'], template[\\#${name}]`
           );
           if (!compTemplate && name === "default") {
-            compTemplate = component.querySelector("template:not([name])");
-            if (compTemplate && compTemplate.getAttributeNames().filter((x) => x.startsWith("#")).length > 0)
-              compTemplate = null;
+            const unnamedTemplates = component.querySelectorAll(
+              "template:not([name])"
+            );
+            compTemplate = (_a = [...unnamedTemplates].find(
+              (x) => this.__isDefaultSlotTemplateShortcut(x)
+            )) != null ? _a : null;
           }
           const createSwitchContext = (childNodes2) => {
             if (!head.enableSwitch) return;
@@ -1528,7 +1568,7 @@ var Regor = (() => {
               return;
             }
             const childNodes2 = [...getChildNodes(component)].filter(
-              (x) => !isTemplate(x)
+              (x) => !this.__isNamedSlotTemplateShortcut(x)
             );
             for (const slotChild of childNodes2) {
               parent2.insertBefore(slotChild, slot);
@@ -1614,6 +1654,65 @@ var Regor = (() => {
         parser.__scoped(capturedContext, bindComponent);
       }
     }
+    __getComponentSelector() {
+      const binder = this.__binder;
+      const parser = binder.__parser;
+      const registeredComponents = binder.__config.__components;
+      const contextComponentSelectors = parser.__getComponentSelectors();
+      const registeredSelector = this.__getRegisteredComponentSelector(registeredComponents);
+      return [
+        ...registeredSelector ? [registeredSelector] : [],
+        ...contextComponentSelectors,
+        ...contextComponentSelectors.map(hyphenate)
+      ].join(",");
+    }
+    __collectTopLevelComponentHosts(root, selector) {
+      var _a;
+      const result = [];
+      if (isNullOrWhitespace(selector)) return result;
+      if ((_a = root.matches) == null ? void 0 : _a.call(root, selector)) return [root];
+      const stack = this.__getChildElements(root).reverse();
+      while (stack.length > 0) {
+        const current = stack.pop();
+        if (current.matches(selector)) {
+          result.push(current);
+          continue;
+        }
+        stack.push(...this.__getChildElements(current).reverse());
+      }
+      return result;
+    }
+    __forEachBindableDescendant(root, action) {
+      const selector = this.__getComponentSelector();
+      const stack = this.__getChildElements(root).reverse();
+      while (stack.length > 0) {
+        const current = stack.pop();
+        action(current);
+        if (!isNullOrWhitespace(selector) && current.matches(selector)) continue;
+        stack.push(...this.__getChildElements(current).reverse());
+      }
+    }
+    __getChildElements(root) {
+      const children = root == null ? void 0 : root.children;
+      if ((children == null ? void 0 : children.length) != null) {
+        const result = [];
+        for (let i = 0; i < children.length; ++i) {
+          const child = children[i];
+          if (isElement(child)) result.push(child);
+        }
+        return result;
+      }
+      const childNodes = root == null ? void 0 : root.childNodes;
+      if ((childNodes == null ? void 0 : childNodes.length) != null) {
+        const result = [];
+        for (let i = 0; i < childNodes.length; ++i) {
+          const child = childNodes[i];
+          if (isElement(child)) result.push(child);
+        }
+        return result;
+      }
+      return [];
+    }
   };
 
   // src/bind/DirectiveCollector.ts
@@ -1706,10 +1805,10 @@ var Regor = (() => {
       };
       processNode(element);
       if (!isRecursive || !element.firstElementChild) return map;
-      const nodes = element.querySelectorAll("*");
-      for (const node of nodes) {
-        processNode(node);
-      }
+      this.__binder.__componentBinder.__forEachBindableDescendant(
+        element,
+        processNode
+      );
       return map;
     }
   };
@@ -1727,17 +1826,19 @@ var Regor = (() => {
     constructor(binder) {
       __publicField(this, "__binder");
       __publicField(this, "__is");
-      __publicField(this, "__isSelector");
       this.__binder = binder;
       this.__is = binder.__config.__builtInNames.is;
-      this.__isSelector = toSelector(this.__is) + ", [is]";
     }
     __bindAll(element) {
       const isComponentElement = element.hasAttribute(this.__is);
-      const elements = findElements(element, this.__isSelector);
-      for (const el of elements) {
-        this.__bind(el);
-      }
+      if (isComponentElement || element.hasAttribute("is"))
+        this.__bind(element);
+      this.__binder.__componentBinder.__forEachBindableDescendant(
+        element,
+        (el) => {
+          if (el.hasAttribute(this.__is) || el.hasAttribute("is")) this.__bind(el);
+        }
+      );
       return isComponentElement;
     }
     __bind(el) {
@@ -2214,10 +2315,13 @@ var Regor = (() => {
     }
     __bindAll(element) {
       const isForElement = element.hasAttribute(this.__for);
-      const elements = findElements(element, this.__forSelector);
-      for (const el of elements) {
-        this.__bindFor(el);
-      }
+      if (isForElement) this.__bindFor(element);
+      this.__binder.__componentBinder.__forEachBindableDescendant(
+        element,
+        (el) => {
+          if (el.hasAttribute(this.__for)) this.__bindFor(el);
+        }
+      );
       return isForElement;
     }
     __isProcessedOrMark(el) {
@@ -2894,11 +2998,11 @@ var Regor = (() => {
       }
       return;
     }
-    const isBoolean = key in booleanAttributes;
-    if (isNullOrUndefined(value) || isBoolean && !includeBooleanAttr(value)) {
+    const isBoolean2 = key in booleanAttributes;
+    if (isNullOrUndefined(value) || isBoolean2 && !includeBooleanAttr(value)) {
       el.removeAttribute(key);
     } else {
-      el.setAttribute(key, isBoolean ? "" : value);
+      el.setAttribute(key, isBoolean2 ? "" : value);
     }
   };
 
@@ -3148,7 +3252,7 @@ var Regor = (() => {
   var handleInputAndTextArea = (el, flags, getModelRef, parsedValue) => {
     const isLazy = flags.lazy;
     const eventType = isLazy ? "change" : "input";
-    const isNumber = isNumberInput(el);
+    const isNumber2 = isNumberInput(el);
     const trimmer = () => {
       if (!flags.trim && !getFlags(parsedValue()[1]).trim) return;
       el.value = el.value.trim();
@@ -3178,7 +3282,7 @@ var Regor = (() => {
       if (!target || target.composing) return;
       let value = target.value;
       const flags2 = getFlags(parsedValue()[1]);
-      if (isNumber || flags2.number || flags2.int) {
+      if (isNumber2 || flags2.number || flags2.int) {
         if (flags2.int) {
           value = parseInt(value);
         } else {
@@ -4493,12 +4597,12 @@ var Regor = (() => {
       this.__gobbleSpaces();
       let ch = this.__code;
       while (ch === PERIOD_CODE || ch === OBRACK_CODE || ch === OPAREN_CODE || ch === QUMARK_CODE) {
-        let optional;
+        let optional2;
         if (ch === QUMARK_CODE) {
           if (this.__expr.charCodeAt(this.__index + 1) !== PERIOD_CODE) {
             break;
           }
-          optional = true;
+          optional2 = true;
           this.__index += 2;
           this.__gobbleSpaces();
           ch = this.__code;
@@ -4524,7 +4628,7 @@ var Regor = (() => {
             callee: node
           };
         } else {
-          if (optional) {
+          if (optional2) {
             this.__index--;
           }
           this.__gobbleSpaces();
@@ -4535,7 +4639,7 @@ var Regor = (() => {
             property: this.__gobbleIdentifier()
           };
         }
-        if (optional) {
+        if (optional2) {
           node.optional = true;
         }
         this.__gobbleSpaces();
@@ -6065,6 +6169,113 @@ var Regor = (() => {
     };
   };
 
+  // src/app/propValidators.ts
+  var fail = (name, message) => {
+    throw new Error(`Invalid prop "${name}": ${message}.`);
+  };
+  var describeValue = (value) => {
+    var _a;
+    if (value === null) return "null";
+    if (value === void 0) return "undefined";
+    if (typeof value === "string") return "string";
+    if (typeof value === "number") return "number";
+    if (typeof value === "boolean") return "boolean";
+    if (typeof value === "bigint") return "bigint";
+    if (typeof value === "symbol") return "symbol";
+    if (typeof value === "function") return "function";
+    if (isArray(value)) return "array";
+    if (value instanceof Date) return "Date";
+    if (value instanceof RegExp) return "RegExp";
+    if (value instanceof Map) return "Map";
+    if (value instanceof Set) return "Set";
+    const ctorName = (_a = value == null ? void 0 : value.constructor) == null ? void 0 : _a.name;
+    return ctorName && ctorName !== "Object" ? ctorName : "object";
+  };
+  var formatLiteral = (value) => {
+    if (typeof value === "string") return `"${value}"`;
+    if (typeof value === "number" || typeof value === "boolean") {
+      return String(value);
+    }
+    if (value === null) return "null";
+    if (value === void 0) return "undefined";
+    return describeValue(value);
+  };
+  var isString2 = (value, name) => {
+    if (typeof value !== "string") fail(name, "expected string");
+  };
+  var isNumber = (value, name) => {
+    if (typeof value !== "number") fail(name, "expected number");
+  };
+  var isBoolean = (value, name) => {
+    if (typeof value !== "boolean") fail(name, "expected boolean");
+  };
+  var isClass = (ctor) => {
+    return (value, name) => {
+      if (!(value instanceof ctor)) {
+        fail(name, `expected instance of ${ctor.name || "provided class"}`);
+      }
+    };
+  };
+  var optional = (validator) => {
+    return (value, name, head) => {
+      if (value === void 0) return;
+      validator(value, name, head);
+    };
+  };
+  var nullable = (validator) => {
+    return (value, name, head) => {
+      if (value === null) return;
+      validator(value, name, head);
+    };
+  };
+  var oneOf = (values) => {
+    return (value, name) => {
+      if (values.includes(value)) return;
+      fail(
+        name,
+        `expected one of ${values.map((x) => formatLiteral(x)).join(", ")}`
+      );
+    };
+  };
+  var arrayOf = (validator) => {
+    return (value, name, head) => {
+      if (!isArray(value)) fail(name, "expected array");
+      const items = value;
+      for (let i = 0; i < items.length; ++i) {
+        validator(items[i], `${name}[${i}]`, head);
+      }
+    };
+  };
+  var shape = (schema) => {
+    return (value, name, head) => {
+      if (!isObject(value)) fail(name, "expected object");
+      const record = value;
+      for (const key in schema) {
+        const validator = schema[key];
+        validator(record[key], `${name}.${key}`, head);
+      }
+    };
+  };
+  var refOf = (validator) => {
+    return (value, name, head) => {
+      if (!isRef(value)) fail(name, "expected ref");
+      const refValue = value;
+      validator(refValue(), `${name}.value`, head);
+    };
+  };
+  var pval = {
+    isString: isString2,
+    isNumber,
+    isBoolean,
+    isClass,
+    optional,
+    nullable,
+    oneOf,
+    arrayOf,
+    shape,
+    refOf
+  };
+
   // src/composition/ContextRegistry.ts
   var ContextRegistry = class {
     constructor() {