@webtides/element-js 0.7.2 → 1.0.0-alpha.1

package/package.json

@@ -1,8 +1,9 @@
 {
 	"name": "@webtides/element-js",
-	"version": "0.7.2",
+	"version": "1.0.0-alpha.1",
 	"module": "index.js",
 	"main": "dist/index.js",
+	"type": "module",
 	"files": [
 		"/dist",
 		"/src",
@@ -16,12 +17,7 @@
 		},
 		"./src/*": "./src/*.js",
 		"./src/util/*": "./src/util/*.js",
-		"./src/renderer/vanilla": "./src/renderer/vanilla/index.js",
-		"./src/renderer/vanilla/TemplateElement": "./src/renderer/vanilla/TemplateElement.js",
-		"./src/renderer/vanilla/util/*": "./src/renderer/vanilla/util/*.js",
-		"./src/renderer/vanilla/util/directives.js": "./src/renderer/vanilla/util/directives.js",
-		"./src/renderer/vanilla/util/html.js": "./src/renderer/vanilla/util/html.js",
-		"./src/renderer/vanilla/util/render.js": "./src/renderer/vanilla/util/render.js"
+		"./src/dom-parts/*": "./src/dom-parts/*.js"
 	},
 	"repository": "https://github.com/webtides/element-js.git",
 	"author": "@webtides",
@@ -37,23 +33,23 @@
 		"element-js",
 		"shadow-dom"
 	],
-	"dependencies": {
-		"lit-html": "^1.2.1"
-	},
+	"dependencies": {},
 	"devDependencies": {
-		"@open-wc/testing": "^3.0.3",
+		"@babel/eslint-parser": "^7.18.9",
+		"@open-wc/testing": "^3.1.6",
 		"@web/dev-server": "^0.1.30",
-		"@web/test-runner": "^0.13.26",
+		"@web/test-runner": "^0.14.0",
 		"babel-eslint": "^10.1.0",
 		"babel-plugin-module-resolver": "^5.0.0",
 		"deepmerge": "^4.2.2",
-		"esbuild": "^0.8.57",
-		"eslint": "^7.0.0",
-		"eslint-config-prettier": "^6.11.0",
-		"eslint-plugin-prettier": "^3.1.3",
-		"husky": "^7.0.4",
-		"lint-staged": "^12.1.2",
-		"prettier": "^2.5.1"
+		"esbuild": "^0.15.5",
+		"eslint": "8.22.0",
+		"eslint-config-prettier": "^7.2.0",
+		"eslint-plugin-import": "^2.26.0",
+		"eslint-plugin-prettier": "^4.2.1",
+		"husky": "^8.0.1",
+		"lint-staged": "^13.0.3",
+		"prettier": "^2.7.1"
 	},
 	"lint-staged": {
 		"*.{js,json}": [
@@ -62,7 +58,7 @@
 		]
 	},
 	"scripts": {
-		"lint": "eslint src/**/*.js",
+		"lint": "eslint index.js 'src/**/*.js'",
 		"prepare": "esbuild index.js --outfile=dist/index.js --bundle --format=esm --sourcemap --target=chrome79,firefox68,safari12,edge79",
 		"test": "web-test-runner test/**/*.test.{html,js} --node-resolve",
 		"test:coverage": "web-test-runner test/**/*.test.{html,js} --node-resolve --coverage",

package/src/BaseElement.js

@@ -26,13 +26,6 @@ class BaseElement extends HTMLElement {
 			propertyOptions: {},
 			...options,
 		};
-
-		if (options.childListUpdate !== undefined && options.childListUpdate !== null) {
-			this._options.mutationObserverOptions.childList = options.childListUpdate;
-			console.warn(
-				`[${this.localName}] Using the "childListUpdate" option is deprecated and will be removed before 1.0! Please use the "mutationObserverOptions" dictionary instead. See the docs for more info`,
-			);
-		}
 	}
 
 	connectedCallback() {
@@ -42,9 +35,6 @@ class BaseElement extends HTMLElement {
 		// define all properties to "this"
 		this.defineProperties();
 
-		// define all computed properties to "this"
-		this.defineComputedProperties();
-
 		// define context
 		this.definePropertyInjection();
 
@@ -52,13 +42,14 @@ class BaseElement extends HTMLElement {
 		this.defineObserver();
 
 		if (this.hasAttribute('defer-update') || this._options.deferUpdate) {
-			// don't updates/render, but register refs and events
+			// don't update/render, but register refs and events
 			this.registerEventsAndRefs();
 
 			this.triggerHook('connected');
 		} else {
 			this.requestUpdate({ notify: false }).then(() => {
 				this.triggerHook('connected');
+				this.triggerHook('afterUpdate');
 			});
 		}
 	}
@@ -388,11 +379,6 @@ class BaseElement extends HTMLElement {
 		});
 	}
 
-	// Deprecated
-	hooks() {
-		return {};
-	}
-
 	// Connected lifecycle hook
 	connected() {}
 
@@ -407,14 +393,6 @@ class BaseElement extends HTMLElement {
 
 	// Triggers a lifecycle hook based on the name
 	triggerHook(name) {
-		if (this.hooks && name in this.hooks()) {
-			console.warn(
-				`[${this.localName}] Using the hooks() map for lifecycle hooks is deprecated! Please overwrite the existing lifecycle hook functions. See the docs for more info`,
-			);
-			this.hooks()[name]();
-			return;
-		}
-
 		if (name in this) {
 			this[name]();
 		}
@@ -431,25 +409,6 @@ class BaseElement extends HTMLElement {
 		return {};
 	}
 
-	// Deprecated
-	computed() {
-		return {};
-	}
-
-	// Deprecated
-	defineComputedProperties() {
-		Object.keys(this.computed()).forEach((prop) => {
-			if (!this.hasOwnProperty(prop)) {
-				console.warn(
-					`[${this.localName}] Using the computed() map for computed properties is deprecated! Please use regular JS getters and return the computed value. See the docs for more info`,
-				);
-				Object.defineProperty(this, prop, {
-					get: () => this.computed()[prop](),
-				});
-			}
-		});
-	}
-
 	/**
 	 * Return a map of events that should be registered on the element.
 	 * eg. { '.link': {

package/src/StyledElement.js

@@ -33,14 +33,6 @@ class StyledElement extends BaseElement {
 		if (supportsAdoptingStyleSheets() && this._options.shadowRender) {
 			// adopting does only make sense in shadow dom. Fall back to append for light elements
 			this.adoptStyleSheets();
-		} else if (this._options.shadowRender && window.ShadyCSS !== undefined) {
-			// if shadowRoot is polyfilled we use ShadyCSS to copy scoped styles to <head>
-			window.ShadyCSS.ScopingShim.prepareAdoptedCssText(this._styles, this.localName);
-		}
-
-		// if shadowRoot is polyfilled - scope element template
-		if (window.ShadyCSS !== undefined) {
-			window.ShadyCSS.styleElement(this);
 		}
 	}
 
@@ -52,7 +44,7 @@ class StyledElement extends BaseElement {
 		if (!supportsAdoptingStyleSheets() || this._options.shadowRender === false) {
 			// append stylesheets to template if not already adopted
 			const appendableStyles = [...this._styles];
-			if (this._options.shadowRender && this._options.adoptGlobalStyles && !window.ShadyCSS) {
+			if (this._options.shadowRender && this._options.adoptGlobalStyles) {
 				appendableStyles.unshift(StyledElement.globalStyles?.textContent ?? '');
 			}
 			this.appendStyleSheets(appendableStyles);

package/src/TemplateElement.js

@@ -1,6 +1,6 @@
 import { StyledElement } from './StyledElement.js';
-import { html } from 'lit-html';
-import { render } from 'lit-html/lib/shady-render.js';
+import { html } from './dom-parts/html.js';
+import { render } from './dom-parts/render.js';
 export { i18n } from './util/i18n.js';
 
 class TemplateElement extends StyledElement {
@@ -35,11 +35,7 @@ class TemplateElement extends StyledElement {
 			// just a plain string literal. no lit-html required
 			this.getRoot().innerHTML = `${template}`;
 		} else {
-			// render via lit-html
-			render(html` ${template} `, this.getRoot(), {
-				scopeName: this.localName,
-				eventContext: this,
-			});
+			render(template, this.getRoot());
 		}
 	}
 

package/src/dom-parts/AttributePart.js

@@ -0,0 +1,160 @@
+import { Part } from './Part.js';
+
+/**
+ * @param {Element} node
+ * @param {String} name
+ * @param {Boolean} oldValue
+ * @return {(function(*): void)|*}
+ */
+const processBooleanAttribute = (node, name, oldValue) => {
+	// TODO: It would be better if the ?boolean= attribute would not be there in the first place...
+	node.removeAttribute(`?${name}`);
+	return (newValue) => {
+		const value = !!newValue?.valueOf() && newValue !== 'false';
+		if (oldValue !== value) {
+			node.toggleAttribute(name, (oldValue = !!value));
+		}
+	};
+};
+
+/**
+ * @param {Element} node
+ * @param {String} name
+ * @return {(function(*): void)|*}
+ */
+const processPropertyAttribute = (node, name) => {
+	// TODO: It would be better if the .property= attribute would not be there in the first place...
+	node.removeAttribute(`.${name}`);
+	return (value) => {
+		node[name] = value;
+	};
+};
+
+/**
+ * @param {Element} node
+ * @param {String} name
+ * @return {(function(*): void)|*}
+ */
+const processEventAttribute = (node, name) => {
+	// TODO: It would be better if the event attribute would not be there in the first place...
+	node.removeAttribute(name);
+
+	let oldValue = undefined;
+	let type = name.startsWith('@') ? name.slice(1) : name.toLowerCase().slice(2);
+
+	return (newValue) => {
+		if (oldValue !== newValue) {
+			if (oldValue) node.removeEventListener(type, oldValue);
+			if ((oldValue = newValue)) node.addEventListener(type, oldValue);
+		}
+	};
+};
+
+/**
+ * @param {Element} node
+ * @param {String} name
+ * @return {(function(*): void)|*}
+ */
+const processAttribute = (node, name) => {
+	let oldValue,
+		orphan = true;
+	const attributeNode = globalThis.document?.createAttributeNS(null, name);
+	return (newValue) => {
+		const value = newValue?.valueOf();
+		if (oldValue !== value) {
+			if ((oldValue = value) == null) {
+				if (!orphan) {
+					node.removeAttributeNode(attributeNode);
+					orphan = true;
+				}
+			} else {
+				attributeNode.value = value;
+				if (orphan) {
+					node.setAttributeNodeNS(attributeNode);
+					orphan = false;
+				}
+			}
+		}
+	};
+};
+
+/**
+ * @param {Element} node
+ * @param {String} name
+ * @return {(function(*): void)|*}
+ */
+export const processAttributePart = (node, name) => {
+	// boolean attribute: ?boolean=${...}
+	if (name.startsWith('?')) {
+		return processBooleanAttribute(node, name.slice(1), false);
+	}
+
+	// property attribute: .property=${...}
+	if (name.startsWith('.')) {
+		return processPropertyAttribute(node, name.slice(1));
+	}
+
+	// event attribute: @event=${...} || "old school" event attribute: onevent=${...}
+	if (name.startsWith('@') || name.startsWith('on')) {
+		return processEventAttribute(node, name);
+	}
+
+	// normal "string" attribute: attribute=${...}
+	return processAttribute(node, name);
+};
+
+/**
+ * For updating a single attribute
+ */
+export class AttributePart extends Part {
+	name = undefined;
+	interpolations = 1;
+	values = [];
+	currentValueIndex = 0;
+	initialValue = undefined;
+
+	/**
+	 * @param {Node} node
+	 * @param {String} name
+	 * @param {String} initialValue
+	 */
+	constructor(node, name, initialValue) {
+		super();
+		this.name = name;
+		this.initialValue = initialValue;
+		this.processor = processAttributePart(node.nextElementSibling, this.name);
+	}
+
+	/**
+	 * @param {Node} node
+	 */
+	addNode(node) {
+		this.interpolations++;
+		// TODO: what about the comment node? It will always be the first for now...
+	}
+
+	/**
+	 * @param {string | number | bigint | boolean | undefined | symbol | null} value
+	 */
+	update(value) {
+		// If we only have one sole interpolation, we can just apply the update
+		if (this.initialValue === '\x03') {
+			this.processor(value);
+			return;
+		}
+
+		// Instead of applying the update immediately, we check if the part has multiple interpolations
+		// and store the values for each interpolation in a list
+		this.values[this.currentValueIndex++] = value;
+
+		// Only the last call to update (for the last interpolation) will actually trigger the update
+		// on the DOM processor. Here we can reset everything before the next round of updates
+		if (this.interpolations === this.currentValueIndex) {
+			this.currentValueIndex = 0;
+			let replaceIndex = 0;
+			// Note: this will coarse the values into strings, but it's probably ok since there can only be multiple values in string attributes?!
+			const parsedValue = this.initialValue.replace(/\x03/g, () => this.values[replaceIndex++]);
+			this.processor(parsedValue);
+		}
+	}
+}