@nonoun/native-playground 0.2.14 → 0.2.15

package/dist/native-playground.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, r, t as i } from "./playground-element-ZQhZxB3I.js";
+import { a as e, i as t, n, r, t as i } from "./playground-element-FVaaBTmI.js";
 export { i as NPlayground, r as TAB_LABELS, n as buildSrcdoc, e as createPlaygroundStore, t as getLanguageExtension };

package/dist/{playground-element-ZQhZxB3I.js → playground-element-FVaaBTmI.js}

@@ -124,13 +124,15 @@ var p = [
 	#u = [];
 	#d = null;
 	#f = null;
+	#p = null;
+	#m = [];
 	/** Manually trigger a preview update. */
 	run() {
-		return this.#y();
+		return this.#x();
 	}
 	/** Reset all code to initial values. */
 	reset() {
-		this.#b();
+		this.#S();
 	}
 	/** Get the current code from all three editors. */
 	getCode() {
@@ -147,7 +149,7 @@ var p = [
 			let n = this.#t.get(t);
 			n && (n.value = e[t]);
 		}
-		this.#e.autoRun.value && this.#v();
+		this.#e.autoRun.value && this.#b();
 	}
 	attributeChangedCallback(e, t, n) {
 		if (t !== n && this.#e) {
@@ -178,7 +180,7 @@ var p = [
 		}
 	}
 	setup() {
-		if (super.setup(), this.#e = c("", "", ""), this.#S(), this.#i = new e(this, { value: () => this.#e[this.#e.activeTab.value].value }), this.#p(), this.#o = new n(this), this.#f) {
+		if (super.setup(), this.#e = c("", "", ""), this.#w(), this.#i = new e(this, { value: () => this.#e[this.#e.activeTab.value].value }), this.#h(), this.#o = new n(this), this.#f) {
 			let e = this.#e.orientation.value === "vertical";
 			this.#a = new r(this.#f, {
 				handleSelector: ".pg-resize-handle",
@@ -201,29 +203,31 @@ var p = [
 			this.#d && (this.#d.hidden = !e);
 		}), this.addEffect(() => {
 			let e = this.#e.consoleEntries.value;
-			this.#x(e);
+			this.#C(e);
 		}), this.addEffect(() => {
-			this.#e.html.value, this.#e.css.value, this.#e.js.value, this.#e.autoRun.value && this.#v();
-		}), window.addEventListener("message", this.#k), this.deferChildren(() => {
-			this.#h(), this.#g(), this.#y();
+			this.#e.html.value, this.#e.css.value, this.#e.js.value, this.#e.autoRun.value && this.#b();
+		}), window.addEventListener("message", this.#j), this.deferChildren(() => {
+			this.#_(), this.#v(), this.#x();
 		});
 	}
 	teardown() {
-		window.removeEventListener("message", this.#k), clearTimeout(this.#r), this.#t.clear(), this.#i.destroy(), this.#a?.destroy(), this.#a = null, this.#o?.destroy(), this.#o = null, this.#n = null, this.#d = null, this.#f = null, this.#l = null, this.#u = [], super.teardown();
+		window.removeEventListener("message", this.#j), clearTimeout(this.#r), this.#t.clear(), this.#i.destroy(), this.#a?.destroy(), this.#a = null, this.#o?.destroy(), this.#o = null;
+		for (let e of this.#m) e.parentNode?.removeChild(e);
+		this.#m = [], this.#n = null, this.#d = null, this.#f = null, this.#l = null, this.#u = [], super.teardown();
 	}
-	#p() {
+	#h() {
 		let e = document.createElement("n-header"), t = document.createElement("n-toolbar");
 		t.setAttribute("variant", "plain"), t.setAttribute("size", "md"), t.setAttribute("fill", "");
-		let n = this.#m("pg-btn-run", "Run", "▶ Run");
-		n.addEventListener("native:press", this.#C);
-		let r = this.#m("", "Reset", "↺ Reset");
-		r.addEventListener("native:press", this.#w);
-		let i = this.#m("", "Copy", "Copy");
-		i.addEventListener("native:press", this.#T);
-		let a = this.#m("", "Console", "Console");
-		a.addEventListener("native:press", this.#E);
-		let o = this.#m("", "Expand", "Expand");
-		o.addEventListener("native:press", this.#D), t.append(n, r, i, a, o), e.appendChild(t);
+		let n = this.#g("pg-btn-run", "Run", "▶ Run");
+		n.addEventListener("native:press", this.#T);
+		let r = this.#g("", "Reset", "↺ Reset");
+		r.addEventListener("native:press", this.#E);
+		let i = this.#g("", "Copy", "Copy");
+		i.addEventListener("native:press", this.#D);
+		let a = this.#g("", "Console", "Console");
+		a.addEventListener("native:press", this.#O);
+		let o = this.#g("", "Expand", "Expand");
+		o.addEventListener("native:press", this.#k), t.append(n, r, i, a, o), e.appendChild(t);
 		let s = document.createElement("div");
 		s.className = "pg-split";
 		let c = document.createElement("div");
@@ -234,7 +238,7 @@ var p = [
 			let t = document.createElement("n-tab");
 			t.setAttribute("value", e), t.textContent = l[e], d.appendChild(t);
 		}
-		d.addEventListener("native:change", this.#O), this.#l = d, u.appendChild(d), c.appendChild(u);
+		d.addEventListener("native:change", this.#A), this.#l = d, u.appendChild(d), c.appendChild(u);
 		for (let e = 0; e < p.length; e++) {
 			let t = document.createElement("div");
 			t.className = "pg-code-panel", t.setAttribute("role", "tabpanel"), t.hidden = p[e] !== this.#e.activeTab.value;
@@ -248,13 +252,13 @@ var p = [
 		let h = document.createElement("div");
 		h.className = "pg-preview";
 		let g = document.createElement("iframe");
-		g.setAttribute("sandbox", "allow-scripts"), g.setAttribute("title", "Preview"), h.appendChild(g), this.#n = g, s.appendChild(h), this.append(e, s);
+		g.setAttribute("sandbox", "allow-scripts"), g.setAttribute("title", "Preview"), h.appendChild(g), this.#n = g, s.appendChild(h), this.append(e, s), this.#m = [e, s];
 	}
-	#m(e, t, n) {
+	#g(e, t, n) {
 		let r = document.createElement("n-button");
 		return r.className = e, r.title = t, r.setAttribute("variant", "ghost"), r.textContent = n, r;
 	}
-	#h() {
+	#_() {
 		let e = this.querySelectorAll("script[type^=\"playground/\"]"), t = "", n = "", r = "";
 		for (let i of e) {
 			let e = (i.getAttribute("type") ?? "").replace("playground/", ""), a = (i.textContent ?? "").trim();
@@ -271,9 +275,13 @@ var p = [
 			}
 			i.remove();
 		}
-		this.#e.html.value = t, this.#e.css.value = n, this.#e.js.value = r, this.#e.initialHtml = t, this.#e.initialCss = n, this.#e.initialJs = r;
+		!t && !n && !r && this.#p && (t = this.#p.html, n = this.#p.css, r = this.#p.js), (t || n || r) && (this.#p = {
+			html: t,
+			css: n,
+			js: r
+		}), this.#e.html.value = t, this.#e.css.value = n, this.#e.js.value = r, this.#e.initialHtml = t, this.#e.initialCss = n, this.#e.initialJs = r;
 	}
-	#g() {
+	#v() {
 		let e = this.#e.readonly.value;
 		for (let t of p) {
 			let n = this.#t.get(t);
@@ -298,7 +306,7 @@ var p = [
 	* gets the resolved CSS as a string. Falls back to fetch() for production
 	* CDN URLs where ?inline isn't available.
 	*/
-	async #_(e) {
+	async #y(e) {
 		if (!e) return "";
 		if (e === this.#c && this.#s) return this.#s;
 		let t = "";
@@ -312,12 +320,12 @@ var p = [
 		}
 		return this.#c = e, this.#s = t, t;
 	}
-	#v() {
+	#b() {
 		clearTimeout(this.#r), this.#r = setTimeout(() => {
-			this.#y();
+			this.#x();
 		}, this.#e.debounce.value);
 	}
-	async #y() {
+	async #x() {
 		let e = this.#n;
 		if (!e) return;
 		let t = this.getAttribute("css-url") ?? "", n = this.getAttribute("register-url") ?? "", r = this.#e.html.value, i = this.#e.css.value, a = this.#e.js.value;
@@ -325,7 +333,7 @@ var p = [
 			html: r,
 			css: i,
 			js: a,
-			frameworkCss: await this.#_(t),
+			frameworkCss: await this.#y(t),
 			registerUrl: n,
 			themeOverrides: this.#e.previewTheme.value || void 0
 		}), this.dispatchEvent(new CustomEvent("playground:run", {
@@ -337,7 +345,7 @@ var p = [
 			}
 		}));
 	}
-	#b() {
+	#S() {
 		let { initialHtml: e, initialCss: t, initialJs: n } = this.#e;
 		this.#e.html.value = e, this.#e.css.value = t, this.#e.js.value = n;
 		let r = this.#t.get("html"), i = this.#t.get("css"), a = this.#t.get("js");
@@ -348,9 +356,9 @@ var p = [
 				css: t,
 				js: n
 			}
-		})), this.#y();
+		})), this.#x();
 	}
-	#x(e) {
+	#C(e) {
 		let t = this.#d;
 		if (t) {
 			t.textContent = "";
@@ -365,7 +373,7 @@ var p = [
 			t.scrollTop = t.scrollHeight;
 		}
 	}
-	#S() {
+	#w() {
 		let e = this.getAttribute("orientation");
 		(e === "horizontal" || e === "vertical" || e === "auto") && (this.#e.orientation.value = e), this.hasAttribute("auto-run") && (this.#e.autoRun.value = !0);
 		let t = this.getAttribute("debounce");
@@ -375,13 +383,13 @@ var p = [
 		let r = this.getAttribute("preview-theme");
 		r && (this.#e.previewTheme.value = r);
 	}
-	#C = () => {
-		this.#y();
+	#T = () => {
+		this.#x();
 	};
-	#w = () => {
-		this.#b();
+	#E = () => {
+		this.#S();
 	};
-	#T = async () => {
+	#D = async () => {
 		let e = this.#e.activeTab.value, t = this.#e[e].value;
 		await this.#i.copy(), this.dispatchEvent(new CustomEvent("playground:copy", {
 			bubbles: !0,
@@ -391,17 +399,17 @@ var p = [
 			}
 		}));
 	};
-	#E = () => {
+	#O = () => {
 		this.#e.consoleOpen.value = !this.#e.consoleOpen.value;
 	};
-	#D = () => {
+	#k = () => {
 		this.#o?.present();
 	};
-	#O = (e) => {
+	#A = (e) => {
 		let t = e.detail;
 		(t?.value === "html" || t?.value === "css" || t?.value === "js") && (this.#e.activeTab.value = t.value);
 	};
-	#k = (e) => {
+	#j = (e) => {
 		if (e.source !== this.#n?.contentWindow) return;
 		let t = e.data;
 		if (!(!t || typeof t != "object") && t.type === "playground:console") {

package/dist/register.js

@@ -1,4 +1,4 @@
-import { t as e } from "./playground-element-ZQhZxB3I.js";
+import { t as e } from "./playground-element-FVaaBTmI.js";
 import { define as t } from "@nonoun/native-ui";
 /**
 * Register native-playground

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nonoun/native-playground",
-  "version": "0.2.14",
+  "version": "0.2.15",
   "description": "Embeddable live code sandbox for @nonoun/native-ui",
   "license": "MIT",
   "type": "module",