init commit

3 files changed, 72 insertions, 0 deletions

diff --git a/element/container.js b/element/container.js
new file mode 100644
index 0000000..fe8dcac
--- /dev/null
+++ b/element/container.js
@@ -0,0 +1,24 @@
+import * as theme from '../theme.js'
+import { create as create_element } from './index.js'
+
+export class Container extends HTMLElement {
+	constructor(options) {
+		super();
+
+		this.body = this.attachShadow({ mode: 'closed' });
+		this.body.adoptedStyleSheets = (options?.css ?? []).concat(theme.css());
+
+		(options?.children ?? (() => []))().forEach(child => this.body.append(child))
+	}
+
+	static new(options) {
+		if (!this.__sfw_tag) {
+			this.__sfw_tag = this.__sfw_tag
+				?? 'sfw-' + this.name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+
+			customElements.define(this.__sfw_tag, this);
+		}
+
+		return create_element(this.__sfw_tag, options);
+	}
+}
diff --git a/element/index.js b/element/index.js
new file mode 100644
index 0000000..f2b79ac
--- /dev/null
+++ b/element/index.js
@@ -0,0 +1,14 @@
+export { Container } from './container.js';
+export { native } from './native.js';
+
+export function create(tag, options) {
+	const element = document.createElement(tag);
+
+	if (options) {
+		Object.entries(options).forEach(([key, value]) => {
+			element[key] = value;
+		})
+	}
+
+	return element;
+}
diff --git a/element/native.js b/element/native.js
new file mode 100644
index 0000000..f68add0
--- /dev/null
+++ b/element/native.js
@@ -0,0 +1,34 @@
+import { create as create_element } from './index.js'
+
+class Native {
+	constructor(tag) {
+		this.tag = tag;
+	}
+
+	new(options) {
+		const children = options?.children ?? []
+
+		if (options) {
+			delete options.children;
+		}
+
+		const element = create_element(this.tag, options);
+
+		children.forEach(child => {
+			element.append(child);
+		})
+
+		return element;
+	}
+}
+
+
+const target = {};
+
+const handler = {
+	get(target, prop, receiver) {
+		return new Native(prop);
+	}
+};
+
+export const native = new Proxy(target, handler);