azdom - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

package.json

		{
		"name": "azdom",
		"version": "0.0.2",
		"version": "0.0.3",
		"description": "A DOM manager library.",
		@@ -13,3 +13,8 @@ "keywords": [
		"jsstrgen": "*"
		}
		}
		},
		"repository": {
		"type": "git",
		"url": "git+https://github.com/elgs/azdom.git"
		},
		"homepage": "https://github.com/elgs/azdom#readme"
		}

src/azdom.js

		import { randGen } from '../node_modules/jsstrgen/jsstrgen.js';
		import { resolveDOM, resolveFunction } from './utils.js';
		import { resolveDOM } from './utils.js';

		@@ -10,26 +10,10 @@ /**
		/**
		* Enable change detection, default to true.
		* Cache of all ui components.
		*/
		az.detectChanges = true;

		/**
		* The cache of all ui components.
		*/
		const objCache = {};

		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 3 arguments, `componentClass`,
		* `domElement`, and `options` (optional, defaults to {}), and returns a cached representation
		* of the ui component managed by the `componentClass`.
		* The ui function is a helper function that takes 4 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`.
		*
		@@ -49,19 +33,21 @@ * It is common for the same `domElement` to be managed by multiple `componentClass`es.
		*
		* The `componentclass` must provide an `onInit(domElement, options)` method, and a static classId
		* field.
		* The `componentclass` could optional provide an `azInit(domElement, options)` method for the
		* ui component initialization.
		*
		* Optionally, the `componentclass` could provide an `onChange(property, oldValue, newValue)` to
		* receive notification on property changes.
		* The `domElement` could be a dom element, a css style query string, or a function that returns
		* any of the types of the `domElement`.
		*
		* The `options` could be anything that will be comsumed by the `azInit` of the `componentClass`,
		* {} by default.
		*
		* The `init` indicates whether the `azInit` should be run if the ui component is retrieved from
		* the `objCache`, false by default.
		*/
		az.ui = (componentClass, domElement, options = {}) => {
		az.ui = (componentClass, domElement, options = {}, init = false) => {
		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);
		let objId = node.getAttribute('azdom-' + componentClass.name);
		if (objId) {
		const componentObject = objCache[objId];
		if (componentObject) {
		componentObject.onInit(node, options);
		init && typeof componentObject.azInit === 'function' && componentObject.azInit(node, options);
		objCache[objId] = componentObject;
		@@ -71,10 +57,10 @@ return componentObject;
		}
		const _componentObject = new componentClass();
		const componentObject = az.detectChanges ? new Proxy(_componentObject, proxyHandler) : _componentObject;

		const componentObject = new componentClass();
		componentObject.node = node;
		objId = randGen(8);
		node.setAttribute('azui-' + classId, objId);
		componentObject.onInit(node, options);
		objId = randGen(16);
		node.setAttribute('azdom-' + componentClass.name, objId);
		typeof componentObject.azInit === 'function' && componentObject.azInit(node, options);
		objCache[objId] = componentObject;
		return componentObject;
		};

test/border.js

		export class Border {
		static classId = 'Border';
		onInit(el, options) {
		azInit(el, options) {
		el.style.width = options.width \|\| '100px';
		el.style.height = options.height \|\| '100px';
		el.style.border = '1px solid tomato';
		console.log(this);
		}

		onChange(property, oldValue, newValue) {
		console.log(property, oldValue, newValue);
		f() {
		alert(1);
		}
		}

test/azdom.html

Sorry, the diff of this file is not supported yet

azdom - npm Package Compare versions

Fixed alerts

Improved metrics

Worsened metrics