azdom - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

package.json

 {
   "name": "azdom",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A DOM manager library.",
-  "main": "index.js",
   "keywords": [
@@ -11,3 +10,6 @@ "azdom",
   "author": "Qian Chen",
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {
+    "jsstrgen": "*"
+  }
 }

src/azdom.js

@@ -0,7 +1,15 @@
+import { randGen } from '../node_modules/jsstrgen/jsstrgen.js';
+import { resolveDOM, resolveFunction } from './utils.js';
+
 /**
  * The only foot print to the global scope, hopefully, and the api entry for end users.
  */
-global.az = {};
+window.az = {};
 
 /**
+ * Enable change detection, default to true.
+ */
+az.detectChanges = true;
+
+/**
  * The cache of all ui components.
@@ -11,8 +19,19 @@ */
 
+const proxyHandler = {
+  set: (target, property, value) => {
+    const oldValue = target[property];
+    target[property] = value;
+    if (target.onChange && typeof target.onChange === 'function') {
+      target.onChange(property, oldValue, value);
+    }
+    return true;
+  }
+};
+
 /**
- * The ui function is a helper function that takes four arguments, `componentClass`,
- * `domElement`, `options` (optional, defaults to {}) and `init` (optional, defaults to false),
- * and returns a cached representation of the ui component managed by the `componentClass`.
+ * The ui function is a helper function that takes 3 arguments, `componentClass`,
+ * `domElement`, and `options` (optional, defaults to {}), and returns a cached representation 
+ * of the ui component managed by the `componentClass`.
  * 
- * It is not uncommon for the same `domElement` to be managed by multiple `componentClass`es.
+ * It is common for the same `domElement` to be managed by multiple `componentClass`es.
  * For example, a `domElement` could be managed by a Draggable `componentClass` and a Droppable
@@ -30,30 +49,31 @@ * `componentClass` at the same time.
  * 
- * The `componentclass` should provide an `init(domElement, options)` method. 
+ * The `componentclass` must provide an `onInit(domElement, options)` method, and a static classId
+ * field.
+ * 
+ * Optionally, the `componentclass` could provide an `onChange(property, oldValue, newValue)` to 
+ * receive notification on property changes.
  */
-az.ui = function (componentClass, domElement, options = {}, init = false) {
-  const node = normalizeElement(domElement);
-  let objId = node.getAttribute(cls.className.toLowerCase());
+az.ui = (componentClass, domElement, options = {}) => {
+  const node = resolveDOM(null, domElement);
+  const classId = resolveFunction(componentClass.classId);
+  if (!classId) {
+    throw `Unidentified classId for class ${componentClass.name}`;
+  }
+  let objId = node.getAttribute('azui-' + classId);
   if (objId) {
-    const obj = objCache[objId];
-    if (obj) {
-      return obj;
+    const componentObject = objCache[objId];
+    if (componentObject) {
+      componentObject.onInit(node, options);
+      objCache[objId] = componentObject;
+      return componentObject;
     }
   }
-  const obj = new componentClass();
-  obj.node = node;
+  const _componentObject = new componentClass();
+  const componentObject = az.detectChanges ? new Proxy(_componentObject, proxyHandler) : _componentObject;
+  componentObject.node = node;
   objId = randGen(8);
-  node.setAttribute(cls.className.toLowerCase(), objId);
-  objCache[objId] = obj;
-};
-
-const normalizeElement = function (el) {
-  if (typeof el === 'string') {
-    return document.querySelector(el);
-  } else if (el instanceof Node) {
-    return el;
-  } else if ((el instanceof NodeList || Array.isArray(el)) && el.length > 0) {
-    return el[0];
-  } else {
-    throw `${el} cannot be targeted.`;
-  }
+  node.setAttribute('azui-' + classId, objId);
+  componentObject.onInit(node, options);
+  objCache[objId] = componentObject;
+  return componentObject;
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Wildcard dependency

Quality

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5035

increased by61.27%

Number of package files

7

increased by75%

Lines of code

97

increased by83.02%

Worsened metrics

Dependency count

1

increased byInfinity%

Number of medium quality alerts

2

increased by100%

Dependency changes

• + Addedjsstrgen@*

• + Addedjsstrgen@0.0.1(transitive)