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

package/CHANGELOG.md

@@ -1,142 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
-
-<!--
-   PRs should document their user-visible changes (if any) in the
-   Unreleased section, uncommenting the header as necessary.
--->
-
-<!-- ## Unreleased -->
-<!-- ### Added -->
-<!-- ### Changed -->
-<!-- ### Removed -->
-<!-- ### Fixed -->
-
-## [0.7.3] - 2023-03-07
-
-### Fixed
-* last release was tagged wrong
-
-## [0.7.2] - 2023-03-03
-
-### Fixed
-* watcher callbacks for injected stores
-
-## [0.7.1] - 2023-03-03
-
-### Added
-* Elements are now able to watch Stores 
-
-### Fixed
-* Injection of falsy values
-
-## [0.7.0] - 2023-02-13
-
-### Added
-* Dependency Injection via Context Protocol 💉
-* Provide reactive Properties or entire Stores via: provideProperties() { return { name : value}} 
-* Inject / Request them via injectProperties() { return { name : 'defaultValue'}}
-
-### Changed
-* docs structure
-
-### Fixed
-* Cannot re-render slotted light dom when using the vanilla renderer https://github.com/webtides/element-js/issues/76
-* adds Vanilla Renderer Tests
-
-
-## [0.6.2] - 2022-11-18
-
-### FIXED
-* Store always switching to singleProperty Mode if constructed without any arguments.
-
-## [0.6.1] - 2022-11-18
-
-### ADDED
-* Store watch() map to control internal store state scope
-
-## [0.6.0] - 2022-11-17
-
-### ADDED
-* StoreProperty for shared application state  
-* Directives for Vanilla Renderer
-
-## [0.5.0] - 2022-09-13
-
-### Changed
-* improved the performance of the vanilla-renderer
-
-### Removed
-* setting attributes as properties during dom diffing for the vanilla renderer. This is potentially a **breaking** change if you used attributes with the "." (dot) notation
-
-## [0.4.3] - 2022-07-06
-
-### ADDED
-* parse option to propertyOptions that can be either a boolean OR a function for custom parsing
-* enhance reflect option in propertyOptions that it can also be a function for custom reflection
-
-## [0.4.2] - 2022-02-03
-
-### Fixed
-* vanilla-renderer: fixes attribute comparsion
-
-## [0.4.1] - 2022-02-01
-
-### Fixed
-* refs="id[]" indexing keys not nodes *rolleyes* 
-
-### Added
-* refs="id[]" aka possibbility to refrence a list of nodes to the $refs map. 
-
-## [0.4.0] - 2022-01-28
-
-### Added
-* a "vanilla" renderer with support for hydration and no dependencies
-
-### Changed
-* uses new @web/test-runner isntead of karma (#27)
-
-## [0.3.3] - 2021-09-22
-
-### Added
-* optional complex event callback notation to support addEventListener options (i.E. for passive Event Listeners )
-* Example:  {listener: () => {}, options: { passive: true } }
-* docs
-* tests
-
-
-## [0.3.2] - 2021-03-09
-
-### Added
-* bundled version of `element-js` to use from a CDN and be able to prototype in tools like CodePen etc.
-
-## [0.3.1] - 2020-12-08
-
-### Fixed 
-* i18n fallback values
-
-### Added
-* i18n tests
-
-## [0.3.0] - 2020-07-27
-
-### Added
-* first batch/draft of the documentation
-* property/attribute reflection via constructor options (see the [Documentation](/docs/README.md#propertyoptions) for more info)
-* mutationObserverOptions to enable observing subtree mutations (see the [Documentation](/docs/README.md#mutationobserveroptions) for more info)
-
-### Removed
-* `childListUpdate` constructor option has been deprecated and will be removed before `1.0`
-
-## [0.2.0] - 2020-07-01
-
-### Changed
-* uses shady-render instead of render from `lit-html` for rendering templates to be compatible with the shady-css polyfill
-* refactored and simplified `StyledElement`s handling/loading of style sheets
-
-## [0.1.0] - 2020-06-26
-
-* initial release

package/src/renderer/vanilla/TemplateElement.js

@@ -1,50 +0,0 @@
-import { StyledElement } from '../../StyledElement.js';
-import { html, spreadAttributes, unsafeHTML } from './util/html.js';
-import { render } from './util/render.js';
-export { i18n } from '../../util/i18n.js';
-
-class TemplateElement extends StyledElement {
-	constructor(options) {
-		super({
-			deferUpdate: false,
-			shadowRender: false,
-			styles: [],
-			adoptGlobalStyles: true,
-			mutationObserverOptions: {
-				childList: false,
-			},
-			...options,
-		});
-		this._template = this._options.template;
-
-		if (this._options.shadowRender && !this.shadowRoot) {
-			this.attachShadow({ mode: 'open' });
-		}
-	}
-
-	template() {
-		return html``;
-	}
-
-	update(options) {
-		this.renderTemplate();
-		super.update(options);
-	}
-
-	renderTemplate() {
-		const template = this._template || this.template();
-
-		if (typeof template === 'string') {
-			// just a plain string literal. no fancy rendering required
-			this.getRoot().innerHTML = `${template}`;
-		} else {
-			render(template, this.getRoot());
-		}
-	}
-
-	getRoot() {
-		return this.shadowRoot !== null ? this.shadowRoot : this;
-	}
-}
-
-export { TemplateElement, html, unsafeHTML, render, spreadAttributes };

package/src/renderer/vanilla/index.js

@@ -1,18 +0,0 @@
-import { BaseElement } from '../../BaseElement.js';
-import { StyledElement } from '../../StyledElement.js';
-import { TemplateElement, html, unsafeHTML, spreadAttributes } from './TemplateElement.js';
-import { toString } from '../../util/toString.js';
-import { defineElement } from '../../util/defineElement.js';
-import { i18n } from '../../util/i18n.js';
-
-export {
-	BaseElement,
-	StyledElement,
-	TemplateElement,
-	html,
-	unsafeHTML,
-	spreadAttributes,
-	toString,
-	defineElement,
-	i18n,
-};

package/src/renderer/vanilla/util/html.js

@@ -1,65 +0,0 @@
-import { encodeAttribute } from '../../../util/AttributeParser.js';
-import { unsafeHTML, spreadAttributes } from './directives.js';
-
-class Part {
-	constructor(value) {
-		this.value = value;
-	}
-
-	toString() {
-		if (typeof this.value !== 'string') {
-			return encodeAttribute(JSON.stringify(this.value));
-		}
-		return encodeAttribute(this.value);
-	}
-}
-
-class TemplatePart extends Part {
-	$$templatePart = true;
-
-	constructor(value) {
-		super(value?.$$templatePart ? value.value : value);
-	}
-
-	toString() {
-		if (this.value === null || this.value === undefined) {
-			return '';
-		} else if (this.value === '') {
-			return '';
-		} else if (Array.isArray(this.value)) {
-			return this.value.map((row) => new TemplatePart(row).toString()).join('');
-		} else if (this.value?.$$templateLiteral) {
-			return this.value.toString();
-		} else if (typeof this.value === 'function') {
-			// A directive
-			return this.value(this);
-		}
-		return super.toString();
-	}
-}
-
-class TemplateLiteral {
-	$$templateLiteral = true;
-
-	constructor(strings, ...values) {
-		let result = [];
-		for (let i = 0; i < strings.length; i++) {
-			result.push(strings[i]);
-
-			if (i < values.length) {
-				result.push(new TemplatePart(values[i]));
-			}
-		}
-		this.result = result;
-	}
-
-	toString() {
-		return `${this.result.join('')}`;
-	}
-}
-
-const html = function (strings, ...values) {
-	return new TemplateLiteral(strings, ...values);
-};
-
-export { Part, TemplatePart, TemplateLiteral, html, unsafeHTML, spreadAttributes };

package/src/renderer/vanilla/util/render.js

@@ -1,149 +0,0 @@
-import { TemplateElement } from '../TemplateElement.js';
-
-/**
- * Parses the given template string and returns a real DOM element.
- * @param {string} template
- * @returns {HTMLElement}
- */
-const convertStringToHTML = (template) => {
-	const parser = new DOMParser();
-	const document = parser.parseFromString(template.toString(), 'text/html');
-	return document.body;
-};
-
-/**
- * Diff the attributes for a live DOM element against a template DOM element
- * @param  {Element} templateElement The new template
- * @param  {Element} domElement The existing DOM node
- */
-const diffAttributes = function (templateElement, domElement) {
-	// remove or update previous attributes
-	for (/** @type {Attr} */ const attribute of Array.from(domElement.attributes)) {
-		if (templateElement.hasAttribute(attribute.name)) {
-			const oldValue = attribute.value;
-			const newValue = templateElement.getAttribute(attribute.name) || '';
-			if (oldValue !== newValue) {
-				domElement.setAttribute(attribute.name, newValue);
-			}
-		} else {
-			domElement.removeAttribute(attribute.name);
-		}
-	}
-
-	// set newly added attributes
-	for (/** @type {Attr} */ const attribute of Array.from(templateElement.attributes)) {
-		if (!domElement.hasAttribute(attribute.name)) {
-			domElement.setAttribute(attribute.name, attribute.value);
-		}
-	}
-};
-
-/**
- * Checks whether the given element or node is a TemplateElement or not
- * @param {Element|Node} element
- * @returns {boolean}
- */
-const isTemplateElement = (element) => {
-	const tagName = element.tagName?.toLowerCase() ?? false;
-	if (!tagName || !tagName.includes('-') || element.shadowRoot) {
-		return false;
-	}
-	return element instanceof TemplateElement;
-};
-
-/**
- * Diff a live DOM node against a template DOM node
- * @param {Node} templateNode
- * @param {Node} domNode
- */
-const diffNodes = function (templateNode, domNode) {
-	const templateChildNodes = [...templateNode.childNodes];
-	const domChildNodes = [...domNode.childNodes];
-
-	// Diff each node in the child node lists
-	const length = Math.max(templateChildNodes.length, domChildNodes.length);
-	for (let index = 0; index < length; index++) {
-		const templateChildNode = templateChildNodes[index];
-		const domChildNode = domChildNodes[index];
-
-		// If the DOM node doesn't exist, append/copy the template node
-		if (!domChildNode) {
-			domNode.appendChild(templateChildNode);
-			continue;
-		}
-
-		// If the template node doesn't exist, remove the node in the DOM
-		if (!templateChildNode) {
-			domChildNode.parentNode.removeChild(domChildNode);
-			continue;
-		}
-
-		// If DOM node is equal to the template node, don't do anything
-		if (domChildNode.isEqualNode(templateChildNode)) {
-			continue;
-		}
-
-		// If node types are not the same, replace the DOM node with the template node
-		if (templateChildNode.nodeType !== domChildNode.nodeType) {
-			domChildNode.parentNode.replaceChild(templateChildNode, domChildNode);
-			continue;
-		}
-
-		// If the element tag names are not the same, replace the DOM node with the template node
-		if (templateChildNode.nodeType === 1 && templateChildNode.tagName !== domChildNode.tagName) {
-			domChildNode.parentNode.replaceChild(templateChildNode, domChildNode);
-			continue;
-		}
-
-		// If the node is an SVG element, don't even think about diffing it, just replace it
-		if (templateChildNode.nodeType === 1 && templateChildNode.tagName === 'SVG') {
-			domChildNode.parentNode.replaceChild(templateChildNode, domChildNode);
-			continue;
-		}
-
-		// If the node is an Element node, diff the attributes
-		if (templateChildNode.nodeType === 1) {
-			diffAttributes(templateChildNode, domChildNode);
-		}
-
-		// If the node is a Text node or a Comment node, update it
-		if (domChildNode.nodeType === 3 || domChildNode.nodeType === 8) {
-			domChildNode.textContent = templateChildNode.textContent;
-			continue;
-		}
-
-		// If the DOM node should be empty, remove all child nodes
-		if (domChildNode.hasChildNodes() && !templateChildNode.hasChildNodes()) {
-			domChildNode.replaceChildren();
-			continue;
-		}
-
-		// If the DOM node is empty, but should have children, add child nodes from the template node
-		if (!domChildNode.hasChildNodes() && templateChildNode.hasChildNodes()) {
-			domChildNode.replaceChildren(...templateChildNode.childNodes);
-			continue;
-		}
-
-		// If there are child nodes, diff them recursively
-		if (templateChildNode.hasChildNodes()) {
-			// https://stackoverflow.com/questions/46898739/why-domparser-doesnt-use-the-customelements-registered
-			// we have to use the domChildNode here because the templateChildNode is not upgraded because it was not
-			// imported into a document yet and therefore instanceOf will not work...
-			if (!isTemplateElement(domChildNode)) {
-				diffNodes(templateChildNode, domChildNode);
-			}
-		}
-	}
-};
-
-/**
- * Render a template string into the given DOM node
- * @param {string} template
- * @param {Node} domNode
- */
-const render = (template, domNode) => {
-	const templateNode = convertStringToHTML(template);
-	diffNodes(templateNode, domNode);
-};
-
-export { render };