@domql/element 2.5.47 → 2.5.48

package/create.js

@@ -79,7 +79,7 @@ const create = (element, parent, key, options = OPTIONS.create || {}, attachOpti
     return onlyResolveExtends(element, parent, key, options)
   }
 
-  replaceOptions(element, parent, options)
+  switchDefaultOptions(element, parent, options)
 
   addCaching(element, parent)
 
@@ -196,7 +196,7 @@ const addRef = (element, parent) => {
   return element.__ref
 }
 
-const replaceOptions = (element, parent, options) => {
+const switchDefaultOptions = (element, parent, options) => {
   if (Object.keys(options).length) {
     registry.defaultOptions = options
     if (options.ignoreChildExtend) delete options.ignoreChildExtend
@@ -228,9 +228,7 @@ const renderElement = (element, parent, options, attachOptions) => {
   triggerEventOn('render', element, options)
 }
 
-const checkIfPrimitive = (element) => {
-  return is(element)('string', 'number')
-}
+const checkIfPrimitive = (element) => is(element)('string', 'number')
 
 const applyValueAsText = (element, parent, key) => {
   const extendTag = element.extend && element.extend.tag
@@ -243,12 +241,17 @@ const applyValueAsText = (element, parent, key) => {
 }
 
 const applyContext = (element, parent, options) => {
-  if (options.context && !ROOT.context && !element.context) ROOT.context = options.context
+  const forcedOptionsContext = options.context && !ROOT.context && !element.context
+  if (forcedOptionsContext) ROOT.context = options.context
+
+  // inherit from parent or root
   if (!element.context) element.context = parent.context || options.context || ROOT.context
 }
 
+// Create scope - shared object across the elements to the own or the nearest parent
 const createScope = (element, parent) => {
   const { __ref: ref } = element
+  // If the element doesn't have a scope, initialize it using the parent's scope or the root's scope.
   if (!element.scope) element.scope = parent.scope || ref.__root.scope || {}
 }
 

package/dist/cjs/create.js

@@ -67,7 +67,7 @@ const create = (element, parent, key, options = import_options.default.create ||
   if (options.onlyResolveExtends) {
     return onlyResolveExtends(element, parent, key, options);
   }
-  replaceOptions(element, parent, options);
+  switchDefaultOptions(element, parent, options);
   addCaching(element, parent);
   (0, import_set.addMethods)(element, parent);
   createScope(element, parent);
@@ -150,7 +150,7 @@ const addRef = (element, parent) => {
     element.__ref = { origin: element };
   return element.__ref;
 };
-const replaceOptions = (element, parent, options) => {
+const switchDefaultOptions = (element, parent, options) => {
   if (Object.keys(options).length) {
     import_mixins.registry.defaultOptions = options;
     if (options.ignoreChildExtend)
@@ -172,9 +172,7 @@ const renderElement = (element, parent, options, attachOptions) => {
   (0, import_event.triggerEventOn)("renderRouter", element, options);
   (0, import_event.triggerEventOn)("render", element, options);
 };
-const checkIfPrimitive = (element) => {
-  return (0, import_utils.is)(element)("string", "number");
-};
+const checkIfPrimitive = (element) => (0, import_utils.is)(element)("string", "number");
 const applyValueAsText = (element, parent, key) => {
   const extendTag = element.extend && element.extend.tag;
   const childExtendTag = parent.childExtend && parent.childExtend.tag;
@@ -185,7 +183,8 @@ const applyValueAsText = (element, parent, key) => {
   };
 };
 const applyContext = (element, parent, options) => {
-  if (options.context && !import_tree.ROOT.context && !element.context)
+  const forcedOptionsContext = options.context && !import_tree.ROOT.context && !element.context;
+  if (forcedOptionsContext)
     import_tree.ROOT.context = options.context;
   if (!element.context)
     element.context = parent.context || options.context || import_tree.ROOT.context;

package/dist/cjs/node.js

@@ -39,7 +39,7 @@ var import_methods = require("./methods");
 var import_create = __toESM(require("./create"), 1);
 var import_iterate = require("./iterate");
 var import_mixins = require("./mixins");
-var import_applyParam = require("./applyParam");
+var import_applyParam = require("./utils/applyParam");
 var import_utils2 = require("./utils");
 const ENV = "development";
 const createNode = (element, options) => {

package/dist/cjs/update.js

@@ -40,7 +40,7 @@ var import_utils2 = require("./utils");
 var import_create = __toESM(require("./create"), 1);
 var import_iterate = require("./iterate");
 var import_mixins = require("./mixins");
-var import_applyParam = require("./applyParam");
+var import_applyParam = require("./utils/applyParam");
 var import_options = __toESM(require("./cache/options"), 1);
 const snapshot = {
   snapshotId: import_utils.createSnapshotId

package/dist/cjs/{applyParam.js → utils/applyParam.js}

@@ -22,7 +22,7 @@ __export(applyParam_exports, {
 });
 module.exports = __toCommonJS(applyParam_exports);
 var import_utils = require("@domql/utils");
-var import_mixins = require("./mixins");
+var import_mixins = require("../mixins");
 const applyParam = (param, element, options) => {
   const { node, context, __ref: ref } = element;
   const prop = element[param];

package/dist/cjs/utils/component.js

@@ -23,6 +23,8 @@ __export(component_exports, {
   applyKeyComponentAsExtend: () => applyKeyComponentAsExtend,
   applyVariant: () => applyVariant,
   checkIfKeyIsComponent: () => checkIfKeyIsComponent,
+  checkIfKeyIsProperty: () => checkIfKeyIsProperty,
+  createValidDomqlObjectFromSugar: () => createValidDomqlObjectFromSugar,
   extendizeByKey: () => extendizeByKey,
   hasVariantProp: () => hasVariantProp,
   isVariant: () => isVariant,
@@ -32,6 +34,7 @@ module.exports = __toCommonJS(component_exports);
 var import_utils = require("@domql/utils");
 var import_extend = require("../extend");
 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)
@@ -39,6 +42,13 @@ const checkIfKeyIsComponent = (key) => {
   const firstCharKey = key.slice(0, 1);
   return /^[A-Z]*$/.test(firstCharKey);
 };
+const checkIfKeyIsProperty = (key) => {
+  const isFirstKeyString = (0, import_utils.isString)(key);
+  if (!isFirstKeyString)
+    return;
+  const firstCharKey = key.slice(0, 1);
+  return /^[a-z]*$/.test(firstCharKey);
+};
 const addAdditionalExtend = (newExtend, element) => {
   const { extend: elementExtend } = element;
   const originalArray = (0, import_utils.isArray)(elementExtend) ? elementExtend : [elementExtend];
@@ -46,6 +56,26 @@ const addAdditionalExtend = (newExtend, element) => {
   const extend = (0, import_utils.joinArrays)(receivedArray, originalArray);
   return { ...element, extend };
 };
+const replaceOnKeys = (key) => key.replace(/on\w+/g, (match) => match.substring(2));
+const createValidDomqlObjectFromSugar = (el) => {
+  const newElem = {
+    props: {},
+    on: {}
+  };
+  for (const k in el) {
+    const prop = el[k];
+    const isEvent = prop.startsWith("on");
+    const isMethod = prop.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;
+    }
+  }
+  return newElem;
+};
 const extendizeByKey = (element, parent, key) => {
   const { context, tag, extend, props, attr, state, childExtend, childProps, on, if: condition } = element;
   const hasComponentAttrs = extend || childExtend || props || state || on || condition || attr;

package/dist/cjs/{onlyResolveExtends.js → utils/onlyResolveExtends.js}

@@ -22,15 +22,15 @@ __export(onlyResolveExtends_exports, {
 });
 module.exports = __toCommonJS(onlyResolveExtends_exports);
 var import_utils = require("@domql/utils");
-var import__ = require(".");
-var import_mixins = require("./mixins");
-var import_utils2 = require("./utils");
-var import_methods = require("./methods");
-var import_set = require("./methods/set");
+var import__ = require("..");
+var import_mixins = require("../mixins");
+var import__2 = require(".");
+var import_methods = require("../methods");
+var import_set = require("../methods/set");
 var import_state = require("@domql/state");
 var import_render = require("@domql/render");
-var import_props = require("./props");
-var import_iterate = require("./iterate");
+var import_props = require("../props");
+var import_iterate = require("../iterate");
 const onlyResolveExtends = (element, parent, key, options) => {
   const { __ref } = element;
   element.tag = (0, import_render.detectTag)(element);
@@ -68,13 +68,13 @@ const onlyResolveExtends = (element, parent, key, options) => {
     parent[key || element.key] = element;
   }
   (0, import_props.createProps)(element, parent);
-  (0, import_utils2.applyVariant)(element, parent);
+  (0, import__2.applyVariant)(element, parent);
   if (element.tag !== "string" && element.tag !== "fragment") {
     (0, import_iterate.throughInitialDefine)(element);
     (0, import_iterate.throughInitialExec)(element);
     for (const param in element) {
       const prop = element[param];
-      if ((0, import_utils.isUndefined)(prop) || (0, import_methods.isMethod)(param) || (0, import_utils.isObject)(import_mixins.registry[param]) || (0, import_utils2.isVariant)(param))
+      if ((0, import_utils.isUndefined)(prop) || (0, import_methods.isMethod)(param) || (0, import_utils.isObject)(import_mixins.registry[param]) || (0, import__2.isVariant)(param))
         continue;
       const hasDefine = element.define && element.define[param];
       const contextHasDefine = element.context && element.context.define && element.context.define[param];

package/node.js

@@ -12,7 +12,7 @@ import {
   throughInitialExec
 } from './iterate'
 import { registry } from './mixins'
-import { applyParam } from './applyParam'
+import { applyParam } from './utils/applyParam'
 import { isVariant } from './utils'
 // import { defineSetter } from './methods'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/element",
-  "version": "2.5.47",
+  "version": "2.5.48",
   "license": "MIT",
   "type": "module",
   "module": "index.js",
@@ -31,7 +31,7 @@
     "@domql/state": "latest",
     "@domql/utils": "latest"
   },
-  "gitHead": "c49194ab459d5e43b9d5fabdf3d0f3c7b8b32b5f",
+  "gitHead": "68ea5ab143d09bdb009664526b638e7c804480c6",
   "devDependencies": {
     "@babel/core": "^7.12.0"
   }

package/update.js

@@ -23,7 +23,7 @@ import { METHODS_EXL, isVariant } from './utils'
 import create from './create'
 import { throughUpdatedDefine, throughUpdatedExec } from './iterate'
 import { registry } from './mixins'
-import { applyParam } from './applyParam'
+import { applyParam } from './utils/applyParam'
 import OPTIONS from './cache/options'
 
 const snapshot = {

package/{applyParam.js → utils/applyParam.js}

@@ -1,7 +1,7 @@
 'use strict'
 
 import { isFunction } from '@domql/utils'
-import { registry } from './mixins'
+import { registry } from '../mixins'
 
 export const applyParam = (param, element, options) => {
   const { node, context, __ref: ref } = element

package/utils/component.js

@@ -4,12 +4,20 @@ import { exec, isArray, isFunction, isObject, isString, joinArrays, overwriteDee
 import { applyExtend } from '../extend'
 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
   const firstCharKey = key.slice(0, 1)
   return /^[A-Z]*$/.test(firstCharKey)
 }
+export const checkIfKeyIsProperty = (key) => {
+  const isFirstKeyString = isString(key)
+  if (!isFirstKeyString) return
+  const firstCharKey = key.slice(0, 1)
+  return /^[a-z]*$/.test(firstCharKey)
+}
 
 export const addAdditionalExtend = (newExtend, element) => {
   const { extend: elementExtend } = element
@@ -19,16 +27,37 @@ export const addAdditionalExtend = (newExtend, element) => {
   return { ...element, extend }
 }
 
+const replaceOnKeys = key => key.replace(/on\w+/g, match => match.substring(2))
+
+export const createValidDomqlObjectFromSugar = el => {
+  const newElem = {
+    props: {},
+    on: {}
+  }
+  for (const k in el) {
+    const prop = el[k]
+    const isEvent = prop.startsWith('on')
+    const isMethod = prop.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
+    }
+  }
+  return newElem
+}
+
 export const extendizeByKey = (element, parent, key) => {
   const { context, tag, extend, props, attr, state, childExtend, childProps, on, if: condition } = element
   const hasComponentAttrs = extend || childExtend || props || state || on || condition || attr
 
   const extendFromKey = key.includes('+')
-    ? key.split('+')
+    ? key.split('+') // get array of componentKeys
     : key.includes('_')
-      ? key.split('_')[0]
+      ? key.split('_')[0] // get component key split _
       : key.includes('.')
-        ? key.split('.')[0]
+        ? key.split('.')[0] // get component key split .
         : [key]
 
   const isExtendKeyComponent = context?.components[extendFromKey]

package/{onlyResolveExtends.js → utils/onlyResolveExtends.js}

@@ -1,15 +1,15 @@
 'use strict'
 
 import { exec, isFunction, isObject, isUndefined } from '@domql/utils'
-import { create } from '.'
-import { registry } from './mixins'
-import { applyVariant, isVariant } from './utils'
-import { isMethod } from './methods'
-import { addMethods } from './methods/set'
+import { create } from '..'
+import { registry } from '../mixins'
+import { applyVariant, isVariant } from '.'
+import { isMethod } from '../methods'
+import { addMethods } from '../methods/set'
 import { createState } from '@domql/state'
 import { detectTag } from '@domql/render'
-import { createProps } from './props'
-import { throughInitialDefine, throughInitialExec } from './iterate'
+import { createProps } from '../props'
+import { throughInitialDefine, throughInitialExec } from '../iterate'
 
 export const onlyResolveExtends = (element, parent, key, options) => {
   const { __ref } = element