@domql/element 2.5.11 → 2.5.13

package/create.js

@@ -172,6 +172,7 @@ const cacheOptions = (element, options) => {
 
 const createKey = (element, parent, key) => {
   return (
+    exec(key, element) ||
     key ||
     element.key ||
     generateKey()

package/dist/cjs/create.js

@@ -133,7 +133,7 @@ const cacheOptions = (element, options) => {
   }
 };
 const createKey = (element, parent, key) => {
-  return (key || element.key || (0, import_utils.generateKey)()).toString();
+  return ((0, import_utils.exec)(key, element) || key || element.key || (0, import_utils.generateKey)()).toString();
 };
 const addRef = (element, parent) => {
   if (element.__ref)

package/dist/cjs/extend.js

@@ -68,6 +68,12 @@ const applyExtend = (element, parent, options = {}) => {
   if (__ref)
     __ref.__extend = stack;
   const findAndReplaceStrings = (0, import_utils2.replaceStringsWithComponents)(stack, context, options);
-  const mergedExtend = (0, import_utils2.cloneAndMergeArrayExtend)(findAndReplaceStrings);
+  let mergedExtend = (0, import_utils2.cloneAndMergeArrayExtend)(findAndReplaceStrings);
+  const COMPONENTS = context && context.components || options.components;
+  const component = (0, import_utils.exec)(element.component || mergedExtend.component, element);
+  if (component && COMPONENTS && COMPONENTS[component]) {
+    const componentExtend = (0, import_utils2.cloneAndMergeArrayExtend)((0, import_utils2.getExtendStack)(COMPONENTS[component]));
+    mergedExtend = (0, import_utils2.deepMergeExtend)(componentExtend, mergedExtend);
+  }
   return (0, import_utils2.deepMergeExtend)(element, mergedExtend);
 };

package/dist/cjs/node.js

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

package/extend.js

@@ -69,13 +69,14 @@ export const applyExtend = (element, parent, options = {}) => {
 
   if (__ref) __ref.__extend = stack
   const findAndReplaceStrings = replaceStringsWithComponents(stack, context, options)
-  const mergedExtend = cloneAndMergeArrayExtend(findAndReplaceStrings)
+  let mergedExtend = cloneAndMergeArrayExtend(findAndReplaceStrings)
 
-  // const component = exec(element.component || mergedExtend.component, element)
-  // if (component && COMPONENTS && COMPONENTS[component]) {
-  //   const componentExtend = cloneAndMergeArrayExtend(getExtendStack(COMPONENTS[component]))
-  //   mergedExtend = deepMergeExtend(componentExtend, mergedExtend)
-  // }
+  const COMPONENTS = (context && context.components) || options.components
+  const component = exec(element.component || mergedExtend.component, element)
+  if (component && COMPONENTS && COMPONENTS[component]) {
+    const componentExtend = cloneAndMergeArrayExtend(getExtendStack(COMPONENTS[component]))
+    mergedExtend = deepMergeExtend(componentExtend, mergedExtend)
+  }
 
   return deepMergeExtend(element, mergedExtend)
 }

package/node.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/element",
-  "version": "2.5.11",
+  "version": "2.5.13",
   "license": "MIT",
   "type": "module",
   "module": "index.js",
@@ -31,7 +31,7 @@
     "@domql/state": "latest",
     "@domql/utils": "latest"
   },
-  "gitHead": "033d166b64bda1969d04a0462f1d13096f7b8fac",
+  "gitHead": "3bbff7f4e2ced6f104572489a2779a5cf0dbb450",
   "devDependencies": {
     "@babel/core": "^7.12.0"
   }

package/dist/cjs/test/create.test.js

@@ -1,51 +0,0 @@
-"use strict";
-var import__ = require("../");
-const dom = (0, import__.create)({});
-test("should create EMPTY element", () => {
-  expect(dom).toHaveProperty("key");
-  expect(dom).toHaveProperty("state");
-  expect(dom).toHaveProperty("parent");
-  expect(dom).toHaveProperty("node");
-  expect(dom).toHaveProperty("set");
-  expect(dom).toHaveProperty("update");
-  expect(dom).toHaveProperty("__ref");
-});
-test("should create valid DOM node", () => {
-  expect(dom.node).toBeInstanceOf(window.HTMLDivElement);
-});
-test("must be able to create valid PATH", () => {
-  expect(dom.__ref.__path).toStrictEqual([dom.key]);
-});
-test("if it HAS a NODE, don't recreate", () => {
-  const node = document.createElement("div");
-  const dom2 = (0, import__.create)({ node });
-  expect(dom2.node.parentElement).toBe(document.body);
-});
-test("create with number", () => {
-  const numb = (0, import__.create)(0);
-  expect(numb.text).toBe(0);
-  expect(numb.tag).toBe("string");
-  expect(numb.node.nodeType).toBe(3);
-});
-test("create with string", () => {
-  const str = (0, import__.create)("hello");
-  expect(str.text).toBe("hello");
-  expect(str.tag).toBe("string");
-  expect(str.node.nodeType).toBe(3);
-});
-test("creating conditions", () => {
-  const element = (0, import__.create)({
-    data: { visible: true },
-    if: (element2) => element2.data.visible
-  });
-  expect(element.tag).toBe("div");
-});
-test("creating nesting", () => {
-  const element = (0, import__.create)({
-    header: {
-      h1: {}
-    }
-  });
-  expect(element.header.tag).toBe("header");
-  expect(element.header.h1.tag).toBe("h1");
-});

package/dist/cjs/test/isMethod.test.js

@@ -1,28 +0,0 @@
-const { isMethod, METHODS } = require("../dist/cjs");
-describe("isMethod", () => {
-  test("returns true if parameter is a method", () => {
-    const validMethod = "set";
-    const result = isMethod(validMethod);
-    expect(result).toBe(true);
-  });
-  test("returns false if parameter is not a method", () => {
-    const invalidMethod = "invalidMethod";
-    const result = isMethod(invalidMethod);
-    expect(result).toBe(false);
-  });
-  test("returns false if parameter is not a string", () => {
-    const invalidParam = 123;
-    const result = isMethod(invalidParam);
-    expect(result).toBe(false);
-  });
-  test("returns true if parameter is a valid method in the METHODS array", () => {
-    const validMethod = METHODS[0];
-    const result = isMethod(validMethod);
-    expect(result).toBe(true);
-  });
-  test("returns false if parameter is not a valid method in the METHODS array", () => {
-    const invalidMethod = "invalidMethod";
-    const result = isMethod(invalidMethod);
-    expect(result).toBe(false);
-  });
-});

package/dist/cjs/test/set.test.js

@@ -1,9 +0,0 @@
-"use strict";
-var import__ = require("../");
-const element = (0, import__.create)({});
-test("should SET element", () => {
-  element.set({ text: "test" });
-  expect(element.content.text).toBe("test");
-  element.set({ text: "test2" });
-  expect(element.content.text).toBe("test2");
-});

package/dist/cjs/test/update.test.js

@@ -1,8 +0,0 @@
-"use strict";
-var import__ = require("../");
-const element = (0, import__.create)({});
-test("should UPDATE element", () => {
-  expect(element.text).toBeUndefined();
-  element.update("test");
-  expect(element.text).toBe("test");
-});

package/test/create.test.js

@@ -1,61 +0,0 @@
-'use strict'
-
-import { create } from '../'
-
-const dom = create({})
-
-test('should create EMPTY element', () => {
-  expect(dom).toHaveProperty('key')
-  expect(dom).toHaveProperty('state')
-  expect(dom).toHaveProperty('parent')
-  expect(dom).toHaveProperty('node')
-  expect(dom).toHaveProperty('set')
-  expect(dom).toHaveProperty('update')
-  expect(dom).toHaveProperty('__ref')
-})
-
-test('should create valid DOM node', () => {
-  expect(dom.node).toBeInstanceOf(window.HTMLDivElement)
-})
-
-test('must be able to create valid PATH', () => {
-  expect(dom.__ref.__path).toStrictEqual([dom.key])
-})
-
-test('if it HAS a NODE, don\'t recreate', () => {
-  const node = document.createElement('div')
-  const dom2 = create({ node })
-  expect(dom2.node.parentElement).toBe(document.body)
-})
-
-test('create with number', () => {
-  const numb = create(0)
-  expect(numb.text).toBe(0)
-  expect(numb.tag).toBe('string')
-  expect(numb.node.nodeType).toBe(3) // #text
-})
-
-test('create with string', () => {
-  const str = create('hello')
-  expect(str.text).toBe('hello')
-  expect(str.tag).toBe('string')
-  expect(str.node.nodeType).toBe(3) // #text
-})
-
-test('creating conditions', () => {
-  const element = create({
-    data: { visible: true },
-    if: element => element.data.visible
-  })
-  expect(element.tag).toBe('div')
-})
-
-test('creating nesting', () => {
-  const element = create({
-    header: {
-      h1: {}
-    }
-  })
-  expect(element.header.tag).toBe('header')
-  expect(element.header.h1.tag).toBe('h1')
-})

package/test/isMethod.test.js

@@ -1,38 +0,0 @@
-const { isMethod, METHODS } = require('../dist/cjs')
-
-describe('isMethod', () => {
-  test('returns true if parameter is a method', () => {
-    const validMethod = 'set'
-    const result = isMethod(validMethod)
-
-    expect(result).toBe(true)
-  })
-
-  test('returns false if parameter is not a method', () => {
-    const invalidMethod = 'invalidMethod'
-    const result = isMethod(invalidMethod)
-
-    expect(result).toBe(false)
-  })
-
-  test('returns false if parameter is not a string', () => {
-    const invalidParam = 123
-    const result = isMethod(invalidParam)
-
-    expect(result).toBe(false)
-  })
-
-  test('returns true if parameter is a valid method in the METHODS array', () => {
-    const validMethod = METHODS[0]
-    const result = isMethod(validMethod)
-
-    expect(result).toBe(true)
-  })
-
-  test('returns false if parameter is not a valid method in the METHODS array', () => {
-    const invalidMethod = 'invalidMethod'
-    const result = isMethod(invalidMethod)
-
-    expect(result).toBe(false)
-  })
-})

package/test/set.test.js

@@ -1,13 +0,0 @@
-'use strict'
-
-import { create } from '../'
-
-const element = create({})
-
-test('should SET element', () => {
-  element.set({ text: 'test' })
-  expect(element.content.text).toBe('test')
-
-  element.set({ text: 'test2' })
-  expect(element.content.text).toBe('test2')
-})

package/test/update.test.js

@@ -1,13 +0,0 @@
-'use strict'
-
-import { create } from '../'
-
-const element = create({})
-
-test('should UPDATE element', () => {
-  expect(element.text).toBeUndefined()
-
-  element.update('test')
-
-  expect(element.text).toBe('test')
-})