@domql/element 2.5.12 → 2.5.14

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/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/dist/cjs/set.js

@@ -39,7 +39,8 @@ var import_content = require("./mixins/content");
 const set = function(params, options = {}, el) {
   const element = el || this;
   const __contentRef = element.content && element.content.__ref;
-  if (__contentRef && __contentRef.__cached && (0, import_utils.isEqualDeep)(params, element.content)) {
+  if (__contentRef && __contentRef.__cached && (0, import_utils.deepContains)(params, element.content)) {
+    console.log("is content equal");
     return element;
   }
   (0, import_content.removeContent)(element);

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.12",
+  "version": "2.5.14",
   "license": "MIT",
   "type": "module",
   "module": "index.js",
@@ -31,7 +31,7 @@
     "@domql/state": "latest",
     "@domql/utils": "latest"
   },
-  "gitHead": "f17796f71477b72a3b8703b2ac65b5e9ff7e93e2",
+  "gitHead": "ab852cb3a435b154f6b32a9a664f65ec56a9c49f",
   "devDependencies": {
     "@babel/core": "^7.12.0"
   }

package/set.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { isEqualDeep } from '@domql/utils'
+import { deepContains } from '@domql/utils'
 
 import create from './create'
 import OPTIONS from './cache/options'
@@ -11,7 +11,8 @@ const set = function (params, options = {}, el) {
   const element = el || this
   const __contentRef = element.content && element.content.__ref
 
-  if (__contentRef && __contentRef.__cached && isEqualDeep(params, element.content)) {
+  if (__contentRef && __contentRef.__cached && deepContains(params, element.content)) {
+    console.log('is content equal')
     return element
   }
   removeContent(element)

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')
-})