1 files changed, 78 insertions, 0 deletions
diff --git a/src/z/z.js b/src/z/z.js
new file mode 100644
index 0000000..a5a1b92
--- /dev/null
+++ b/src/z/z.js
@@ -0,0 +1,78 @@
+class ZComponent extends HTMLElement {
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+
+	connectedCallback() {
+		const type = this.getAttribute('type');
+
+		if (type == null) {
+			throw `component without any type given.`;
+		}
+
+		const template = document.getElementById(`@${type}`);
+
+		if (template == null) {
+			throw `component '${type}' does not exist.`;
+		}
+
+		const node = document.importNode(template.content, true);
+		this.shadowRoot.appendChild(node);
+
+		Zenv.constructors[`component__${type}`](new Zenv(this));
+	}
+}
+
+class Zenv {
+	static constructors = {};
+
+	constructor(doc) {
+		this.document = doc;
+	}
+
+	component(type, slots) {
+		const element = document.createElement('z-component');
+		element.setAttribute('type', type);
+
+		for (const name in slots) {
+			const slot = slots[name];
+			slot.setAttribute('slot', name);
+			element.appendChild(slot);
+		}
+
+		return element;
+	}
+
+	populate_attributes(obj, attrs) {
+		for (const attr in attrs) {
+			if (typeof(obj[attr]) == 'object' && typeof(attrs[attr]) == 'object') {
+				populate_attributes(obj[attr], attrs[attr]);
+			} else {
+				obj[attr] = attrs[attr];
+			}
+		}
+	}
+
+	native(name, options) {
+		const element = document.createElement(name);
+		Zenv.populate_attributes(element, options);
+		return element;
+	}
+
+	by_id(id) {
+		return this.document.shadowRoot.getElementById(id);
+	}
+
+	by_selector(query) {
+		return this.document.shadowRoot.querySelector(query);
+	}
+
+	by_selector_all(query) {
+		return this.document.shadowRoot.querySelectorAll(query);
+	}
+}
+
+Z = new Zenv(document.body);
+
+customElements.define("z-component", ZComponent);