@domql/element 2.5.117 → 2.5.120

package/create.js

@@ -35,6 +35,7 @@ import {
   applyVariant,
   checkIfKeyIsComponent,
   createValidDomqlObjectFromSugar,
+  detectInfiniteLoop,
   isVariant
 } from './utils/component'
 
@@ -46,8 +47,6 @@ const ENV = process.env.NODE_ENV
 const create = (element, parent, key, options = OPTIONS.create || {}, attachOptions) => {
   cacheOptions(element, options)
 
-  // if (key === 'Title') debugger
-
   // if element is STRING
   if (checkIfPrimitive(element)) {
     element = applyValueAsText(element, parent, key)
@@ -212,12 +211,23 @@ const addElementIntoParentChildren = (element, parent) => {
   if (parent.__ref && parent.__ref.__children) parent.__ref.__children.push(element.key)
 }
 
+const visitedElements = new WeakMap()
 const renderElement = (element, parent, options, attachOptions) => {
+  if (visitedElements.has(element)) {
+    console.warn('Cyclic rendering detected:', element)
+    return
+  }
+
+  visitedElements.set(element, true)
+
   const { __ref: ref, key } = element
 
   // CREATE a real NODE
   try {
+    const isInfiniteLoop = detectInfiniteLoop(ref.__path)
+    if (ref.__uniqId || isInfiniteLoop) return
     createNode(element, options)
+    ref.__uniqId = Math.random()
   } catch (e) {
     if (ENV === 'test' || ENV === 'development') console.warn(element, e)
   }

package/dist/cjs/create.js

@@ -167,10 +167,20 @@ const addElementIntoParentChildren = (element, parent) => {
   if (parent.__ref && parent.__ref.__children)
     parent.__ref.__children.push(element.key);
 };
+const visitedElements = /* @__PURE__ */ new WeakMap();
 const renderElement = (element, parent, options, attachOptions) => {
+  if (visitedElements.has(element)) {
+    console.warn("Cyclic rendering detected:", element);
+    return;
+  }
+  visitedElements.set(element, true);
   const { __ref: ref, key } = element;
   try {
+    const isInfiniteLoop = (0, import_component.detectInfiniteLoop)(ref.__path);
+    if (ref.__uniqId || isInfiniteLoop)
+      return;
     (0, import_node.default)(element, options);
+    ref.__uniqId = Math.random();
   } catch (e) {
     if (ENV === "test" || ENV === "development")
       console.warn(element, e);

package/dist/cjs/extend.js

@@ -28,7 +28,8 @@ let mainExtend;
 const applyExtend = (element, parent, options = {}) => {
   if ((0, import_utils.isFunction)(element))
     element = (0, import_utils.exec)(element, parent);
-  let { extend, props, __ref } = element;
+  const { props, __ref } = element;
+  let extend = (props == null ? void 0 : props.extends) || element.extend;
   const context = element.context || parent.context;
   extend = (0, import_utils2.fallbackStringExtend)(extend, context, options);
   const extendStack = (0, import_utils2.getExtendStack)(extend, context);

package/dist/cjs/node.js

@@ -78,7 +78,9 @@ const createNode = (element, options) => {
     if (isElement) {
       const { hasDefine, hasContextDefine } = isElement;
       if (element[param] && !hasDefine && !hasContextDefine) {
-        const createAsync = () => (0, import_create.default)((0, import_utils.exec)(value, element), element, param, options);
+        const createAsync = () => {
+          (0, import_create.default)((0, import_utils.exec)(value, element), element, param, options);
+        };
         if (element.props && element.props.lazyLoad || options.lazyLoad) {
           window.requestAnimationFrame(() => createAsync());
         } else

package/dist/cjs/utils/component.js

@@ -25,6 +25,7 @@ __export(component_exports, {
   checkIfKeyIsComponent: () => checkIfKeyIsComponent,
   checkIfKeyIsProperty: () => checkIfKeyIsProperty,
   createValidDomqlObjectFromSugar: () => createValidDomqlObjectFromSugar,
+  detectInfiniteLoop: () => detectInfiniteLoop,
   extendizeByKey: () => extendizeByKey,
   hasVariantProp: () => hasVariantProp,
   isVariant: () => isVariant,
@@ -33,20 +34,8 @@ __export(component_exports, {
 module.exports = __toCommonJS(component_exports);
 var import_utils = require("@domql/utils");
 var import_extend = require("../extend");
+var import_mixins = require("../mixins");
 const ENV = "development";
-const DOMQL_BUILTINS = [
-  "extend",
-  "childExtend",
-  "childExtendRecursive",
-  "define",
-  "props",
-  "state",
-  "on",
-  "if",
-  "attr",
-  "key",
-  "tag"
-];
 const checkIfKeyIsComponent = (key) => {
   const isFirstKeyString = (0, import_utils.isString)(key);
   if (!isFirstKeyString)
@@ -77,17 +66,16 @@ const createValidDomqlObjectFromSugar = (el, parent, key, options) => {
   for (const k in el) {
     const prop = el[k];
     const isEvent = k.startsWith("on");
-    const isMethod = k.startsWith("$");
     if (isEvent) {
       const onKey = replaceOnKeys(prop);
       newElem.on[onKey] = prop;
-    } else if (!isMethod && checkIfKeyIsProperty(k)) {
-      if (!DOMQL_BUILTINS.includes(k))
-        newElem.props[k] = prop;
-    } else if (checkIfKeyIsComponent(k)) {
+    }
+    const isComponent = checkIfKeyIsComponent(k);
+    const isRegistry = import_mixins.registry[k];
+    if (isComponent || isRegistry) {
       newElem[k] = prop;
     } else {
-      newElem[k] = prop;
+      newElem.props[k] = prop;
     }
   }
   return newElem;
@@ -187,3 +175,24 @@ const applyVariant = (element) => {
   });
   return element;
 };
+const detectInfiniteLoop = (actions) => {
+  const maxRepeats = 10;
+  let pattern = [];
+  let repeatCount = 0;
+  for (let i = 0; i < actions.length; i++) {
+    if (pattern.length < 2) {
+      pattern.push(actions[i]);
+    } else {
+      if (actions[i] === pattern[i % 2]) {
+        repeatCount++;
+      } else {
+        pattern = [actions[i]];
+        repeatCount = 0;
+      }
+      if (repeatCount > maxRepeats * 2) {
+        console.warn("Warning: Potential infinite loop detected due to repeated sequence:", pattern);
+        return true;
+      }
+    }
+  }
+};

package/dist/cjs/utils/object.js

@@ -68,7 +68,7 @@ const deepClone = (obj, exclude = METHODS_EXL, seen = /* @__PURE__ */ new WeakMa
   if (obj === null || typeof obj !== "object") {
     return obj;
   }
-  if (obj instanceof Node || obj === window || obj instanceof Document) {
+  if (obj instanceof window.Node || obj === window || obj instanceof window.Document) {
     return obj;
   }
   if (seen.has(obj)) {

package/extend.js

@@ -20,7 +20,8 @@ let mainExtend
 export const applyExtend = (element, parent, options = {}) => {
   if (isFunction(element)) element = exec(element, parent)
 
-  let { extend, props, __ref } = element
+  const { props, __ref } = element
+  let extend = props?.extends || element.extend
   const context = element.context || parent.context
 
   extend = fallbackStringExtend(extend, context, options)

package/node.js

@@ -73,7 +73,9 @@ export const createNode = (element, options) => {
     if (isElement) {
       const { hasDefine, hasContextDefine } = isElement
       if (element[param] && !hasDefine && !hasContextDefine) {
-        const createAsync = () => create(exec(value, element), element, param, options)
+        const createAsync = () => {
+          create(exec(value, element), element, param, options)
+        }
 
         if ((element.props && element.props.lazyLoad) || options.lazyLoad) {
           window.requestAnimationFrame(() => createAsync())

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/element",
-  "version": "2.5.117",
+  "version": "2.5.120",
   "license": "MIT",
   "type": "module",
   "module": "index.js",
@@ -31,7 +31,7 @@
     "@domql/state": "latest",
     "@domql/utils": "latest"
   },
-  "gitHead": "56be344ba28e3cb51c146c1b74fe3c0e21341879",
+  "gitHead": "ca99941529086268c7c106229ef1873faf5ac54c",
   "devDependencies": {
     "@babel/core": "^7.12.0"
   }

package/props/create.js

@@ -51,10 +51,6 @@ export const syncProps = (props, element) => {
 export const createProps = function (element, parent, cached) {
   const { __ref: ref } = element
 
-  // if (element.parent.key === '0' && element.key === 'editor') {
-  //   debugger
-  // }
-
   const applyProps = () => {
     const propsStack = cached || createPropsStack(element, parent)
     if (propsStack.length) {

package/update.js

@@ -82,7 +82,6 @@ const update = function (params = {}, opts = UPDATE_DEFAULT_OPTIONS) {
 
   const overwriteChanges = overwriteDeep(element, params, METHODS_EXL)
   const execChanges = throughUpdatedExec(element, { ignore: UPDATE_DEFAULT_OPTIONS })
-  // if (element.key === 'Navigation') debugger
   const definedChanges = throughUpdatedDefine(element)
 
   if (!options.isForced && !options.preventListeners) {

package/utils/component.js

@@ -2,22 +2,9 @@
 
 import { exec, isArray, isFunction, isObject, isString, joinArrays, overwriteDeep } from '@domql/utils'
 import { applyExtend } from '../extend'
+import { registry } from '../mixins'
 const ENV = process.env.NODE_ENV
 
-const DOMQL_BUILTINS = [
-  'extend',
-  'childExtend',
-  'childExtendRecursive',
-  'define',
-  'props',
-  'state',
-  'on',
-  'if',
-  'attr',
-  'key',
-  'tag'
-]
-
 export const checkIfKeyIsComponent = (key) => {
   const isFirstKeyString = isString(key)
   if (!isFirstKeyString) return
@@ -50,16 +37,18 @@ export const createValidDomqlObjectFromSugar = (el, parent, key, options) => {
   for (const k in el) {
     const prop = el[k]
     const isEvent = k.startsWith('on')
-    const isMethod = k.startsWith('$')
     if (isEvent) {
       const onKey = replaceOnKeys(prop)
       newElem.on[onKey] = prop
-    } else if (!isMethod && checkIfKeyIsProperty(k)) {
-      if (!DOMQL_BUILTINS.includes(k)) newElem.props[k] = prop
-    } else if (checkIfKeyIsComponent(k)) {
+    // } else if (!isMethod && checkIfKeyIsProperty(k)) {
+    }
+
+    const isComponent = checkIfKeyIsComponent(k)
+    const isRegistry = registry[k]
+    if (isComponent || isRegistry) {
       newElem[k] = prop
     } else {
-      newElem[k] = prop
+      newElem.props[k] = prop
     }
   }
   return newElem
@@ -176,3 +165,31 @@ export const applyVariant = (element) => {
 
   return element
 }
+
+export const detectInfiniteLoop = (actions) => {
+  const maxRepeats = 10 // Maximum allowed repetitions
+  let pattern = []
+  let repeatCount = 0
+
+  for (let i = 0; i < actions.length; i++) {
+    if (pattern.length < 2) {
+      // Build the initial pattern with two consecutive elements
+      pattern.push(actions[i])
+    } else {
+      // Check if the current element follows the repeating pattern
+      if (actions[i] === pattern[i % 2]) {
+        repeatCount++
+      } else {
+        // If there's a mismatch, reset the pattern and repeat counter
+        pattern = [actions[i]]
+        repeatCount = 0
+      }
+
+      // If the pattern has repeated more than `maxRepeats` times, throw a warning
+      if (repeatCount > maxRepeats * 2) { // *2 because it increments for both "Hgroup" and "content"
+        console.warn('Warning: Potential infinite loop detected due to repeated sequence:', pattern)
+        return true
+      }
+    }
+  }
+}

package/utils/object.js

@@ -45,7 +45,7 @@ export const deepClone = (obj, exclude = METHODS_EXL, seen = new WeakMap()) => {
   }
 
   // Check for DOM nodes, Window, or Document
-  if (obj instanceof Node || obj === window || obj instanceof Document) {
+  if (obj instanceof window.Node || obj === window || obj instanceof window.Document) {
     return obj
   }