@nonoun/native-playground 0.2.3 → 0.2.4

package/dist/editors.d.ts

@@ -1,17 +1,4 @@
-import { EditorView } from '@codemirror/view';
 export type TabName = 'html' | 'css' | 'js';
-export interface EditorInstance {
-    view: EditorView;
-    getCode(): string;
-    setCode(code: string): void;
-    destroy(): void;
-}
-export interface EditorOptions {
-    parent: HTMLElement;
-    initialCode: string;
-    language: TabName;
-    readonly?: boolean;
-    onChange?: (code: string) => void;
-}
-export declare function createEditor(options: EditorOptions): EditorInstance;
+export declare const TAB_LABELS: Record<TabName, string>;
+export declare function getLanguageExtension(language: TabName): import("@codemirror/language").LanguageSupport;
 //# sourceMappingURL=editors.d.ts.map

package/dist/editors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editors.d.ts","sourceRoot":"","sources":["../src/editors.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAM9C,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,IAAI,MAAM,CAAC;IAClB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,WAAW,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAcD,wBAAgB,YAAY,CAAC,OAAO,EAAE,aAAa,GAAG,cAAc,CAgDnE"}
+{"version":3,"file":"editors.d.ts","sourceRoot":"","sources":["../src/editors.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC;AAE5C,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAA0C,CAAC;AAE1F,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,OAAO,kDAMrD"}

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 export { NPlayground } from './playground-element.ts';
 export { createPlaygroundStore } from './playground-store.ts';
 export type { PlaygroundStore, ConsoleEntry } from './playground-store.ts';
-export { createEditor } from './editors.ts';
-export type { EditorInstance, EditorOptions, TabName } from './editors.ts';
+export { getLanguageExtension, TAB_LABELS } from './editors.ts';
+export type { TabName } from './editors.ts';
 export { buildSrcdoc } from './iframe/template.ts';
 export type { SrcdocOptions } from './iframe/template.ts';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAG3E,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAG3E,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,YAAY,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAG3E,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAChE,YAAY,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAG5C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,YAAY,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/native-playground.css

@@ -166,9 +166,14 @@
     display: none;
   }
 
+  /* Native-codemirror — fill panel, strip border-radius */
+  :where(native-playground) :where(native-codemirror) {
+    height: 100%;
+    border-radius: 0;
+  }
+
   /* CodeMirror overrides */
   :where(native-playground) :where(.cm-editor) {
-    height: 100%;
     font-size: 0.8125rem;
     /* Force dark color-scheme so contenteditable text inherits light-on-dark
        colors even when the parent page uses color-scheme: light dark */

package/dist/native-playground.js

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

package/dist/{playground-element-DgFyaxxQ.js → playground-element-CrsNEOwq.js}

@@ -1,11 +1,9 @@
 import { CopyController as e, NativeElement as t, PresentController as n, ResizeController as r, signal as i } from "@nonoun/native-ui";
-import { EditorState as a } from "@codemirror/state";
-import { EditorView as o } from "@codemirror/view";
-import { NBaseExtensions as s, NSyntaxHighlighting as c, NTheme as l } from "@nonoun/native-codemirror";
-import { html as u } from "@codemirror/lang-html";
-import { css as d } from "@codemirror/lang-css";
-import { javascript as f } from "@codemirror/lang-javascript";
-function p(e, t, n) {
+import "@nonoun/native-codemirror/register";
+import { html as a } from "@codemirror/lang-html";
+import { css as o } from "@codemirror/lang-css";
+import { javascript as s } from "@codemirror/lang-javascript";
+function c(e, t, n) {
 	return {
 		html: i(e),
 		css: i(t),
@@ -24,57 +22,26 @@ function p(e, t, n) {
 		previewTheme: i("")
 	};
 }
-function m(e) {
+const l = {
+	html: "HTML",
+	css: "CSS",
+	js: "JS"
+};
+function u(e) {
 	switch (e) {
-		case "html": return u();
-		case "css": return d();
-		case "js": return f();
+		case "html": return a();
+		case "css": return o();
+		case "js": return s();
 	}
 }
-function h(e) {
-	let { parent: t, initialCode: n, language: r, readonly: i = !1, onChange: u } = e, d = [
-		l,
-		c,
-		s,
-		m(r),
-		a.readOnly.of(i)
-	];
-	u && d.push(o.updateListener.of((e) => {
-		e.docChanged && u(e.state.doc.toString());
-	}));
-	let f = new o({
-		state: a.create({
-			doc: n,
-			extensions: d
-		}),
-		parent: t,
-		root: document
-	});
-	return {
-		view: f,
-		getCode() {
-			return f.state.doc.toString();
-		},
-		setCode(e) {
-			f.dispatch({ changes: {
-				from: 0,
-				to: f.state.doc.length,
-				insert: e
-			} });
-		},
-		destroy() {
-			f.destroy();
-		}
-	};
-}
 /**
 * Escape `<\/script>` sequences in user-provided JS to prevent
 * breaking out of the inline script tag.
 */
-function g(e) {
+function d(e) {
 	return e.replace(/<\/script>/gi, "<\\/script>");
 }
-function _(e) {
+function f(e) {
 	let { html: t, css: n, js: r, frameworkCss: i, cssUrl: a, registerUrl: o, themeOverrides: s } = e;
 	return `<!DOCTYPE html>
 <html>
@@ -124,19 +91,15 @@ function _(e) {
       window.parent.postMessage({ type: 'playground:ready' }, '*');
     })();
   <\/script>
-  <script type="module">${g(r)}<\/script>
+  <script type="module">${d(r)}<\/script>
 </body>
 </html>`;
 }
-var v = [
+var p = [
 	"html",
 	"css",
 	"js"
-], y = {
-	html: "HTML",
-	css: "CSS",
-	js: "JS"
-}, b = class extends t {
+], m = class extends t {
 	static observedAttributes = [
 		"orientation",
 		"auto-run",
@@ -179,7 +142,11 @@ var v = [
 	}
 	/** Programmatically set code in one or more editors. */
 	setCode(e) {
-		for (let t of v) e[t] !== void 0 && (this.#e[t].value = e[t], this.#t.get(t)?.setCode(e[t]));
+		for (let t of p) if (e[t] !== void 0) {
+			this.#e[t].value = e[t];
+			let n = this.#t.get(t);
+			n && (n.value = e[t]);
+		}
 		this.#e.autoRun.value && this.#v();
 	}
 	attributeChangedCallback(e, t, n) {
@@ -211,7 +178,7 @@ var v = [
 		}
 	}
 	setup() {
-		if (super.setup(), this.#e = p("", "", ""), 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.#S(), this.#i = new e(this, { value: () => this.#e[this.#e.activeTab.value].value }), this.#p(), this.#o = new n(this), this.#f) {
 			let e = this.#e.orientation.value === "vertical";
 			this.#a = new r(this.#f, {
 				handleSelector: ".pg-resize-handle",
@@ -227,7 +194,7 @@ var v = [
 			}
 		}), this.addEffect(() => {
 			let e = this.#e.activeTab.value;
-			for (let t = 0; t < v.length; t++) this.#u[t].hidden = v[t] !== e;
+			for (let t = 0; t < p.length; t++) this.#u[t].hidden = p[t] !== e;
 			this.#l && this.#l.setAttribute("value", e);
 		}), this.addEffect(() => {
 			let e = this.#e.consoleOpen.value;
@@ -242,9 +209,7 @@ var v = [
 		});
 	}
 	teardown() {
-		window.removeEventListener("message", this.#k), clearTimeout(this.#r);
-		for (let e of this.#t.values()) e.destroy();
-		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.#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();
 	}
 	#p() {
 		let e = document.createElement("n-card-header"), t = document.createElement("n-toolbar");
@@ -263,25 +228,27 @@ var v = [
 		s.className = "pg-split";
 		let c = document.createElement("div");
 		c.className = "pg-editor";
-		let l = document.createElement("n-card-header"), u = document.createElement("n-tabs");
-		u.setAttribute("value", this.#e.activeTab.value), u.setAttribute("size", "sm");
-		for (let e of v) {
+		let u = document.createElement("n-card-header"), d = document.createElement("n-tabs");
+		d.setAttribute("value", this.#e.activeTab.value), d.setAttribute("size", "sm");
+		for (let e of p) {
 			let t = document.createElement("n-tab");
-			t.setAttribute("value", e), t.textContent = y[e], u.appendChild(t);
+			t.setAttribute("value", e), t.textContent = l[e], d.appendChild(t);
 		}
-		u.addEventListener("native:change", this.#O), this.#l = u, l.appendChild(u), c.appendChild(l);
-		for (let e = 0; e < v.length; e++) {
+		d.addEventListener("native:change", this.#O), 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 = v[e] !== this.#e.activeTab.value, c.appendChild(t), this.#u.push(t);
+			t.className = "pg-code-panel", t.setAttribute("role", "tabpanel"), t.hidden = p[e] !== this.#e.activeTab.value;
+			let n = document.createElement("native-codemirror");
+			t.appendChild(n), this.#t.set(p[e], n), c.appendChild(t), this.#u.push(t);
 		}
-		let d = document.createElement("div");
-		d.className = "pg-console", d.hidden = !this.#e.consoleOpen.value, c.appendChild(d), this.#d = d;
 		let f = document.createElement("div");
-		f.className = "pg-resize-handle", c.appendChild(f), s.appendChild(c), this.#f = c;
-		let p = document.createElement("div");
-		p.className = "pg-preview";
-		let m = document.createElement("iframe");
-		m.setAttribute("sandbox", "allow-scripts"), m.setAttribute("title", "Preview"), p.appendChild(m), this.#n = m, s.appendChild(p), this.append(e, s);
+		f.className = "pg-console", f.hidden = !this.#e.consoleOpen.value, c.appendChild(f), this.#d = f;
+		let m = document.createElement("div");
+		m.className = "pg-resize-handle", c.appendChild(m), s.appendChild(c), this.#f = c;
+		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);
 	}
 	#m(e, t, n) {
 		let r = document.createElement("n-button");
@@ -308,23 +275,20 @@ var v = [
 	}
 	#g() {
 		let e = this.#e.readonly.value;
-		for (let t = 0; t < v.length; t++) {
-			let n = v[t], r = this.#u[t], i = this.#e[n], a = h({
-				parent: r,
-				initialCode: i.value,
-				language: n,
-				readonly: e,
-				onChange: (e) => {
-					i.value = e, this.dispatchEvent(new CustomEvent("playground:change", {
-						bubbles: !0,
-						detail: {
-							tab: n,
-							code: e
-						}
-					}));
-				}
+		for (let t of p) {
+			let n = this.#t.get(t);
+			if (!n) continue;
+			let r = this.#e[t];
+			n.value = r.value, n.extensions = [u(t)], e && (n.readOnly = !0), n.addEventListener("native:input", (e) => {
+				let n = e.detail.value;
+				r.value = n, this.dispatchEvent(new CustomEvent("playground:change", {
+					bubbles: !0,
+					detail: {
+						tab: t,
+						code: n
+					}
+				}));
 			});
-			this.#t.set(n, a);
 		}
 	}
 	/**
@@ -357,7 +321,7 @@ var v = [
 		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;
-		this.#e.consoleEntries.value = [], e.srcdoc = _({
+		this.#e.consoleEntries.value = [], e.srcdoc = f({
 			html: r,
 			css: i,
 			js: a,
@@ -375,7 +339,9 @@ var v = [
 	}
 	#b() {
 		let { initialHtml: e, initialCss: t, initialJs: n } = this.#e;
-		this.#e.html.value = e, this.#e.css.value = t, this.#e.js.value = n, this.#t.get("html")?.setCode(e), this.#t.get("css")?.setCode(t), this.#t.get("js")?.setCode(n), this.dispatchEvent(new CustomEvent("playground:reset", {
+		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");
+		r && (r.value = e), i && (i.value = t), a && (a.value = n), this.dispatchEvent(new CustomEvent("playground:reset", {
 			bubbles: !0,
 			detail: {
 				html: e,
@@ -447,4 +413,4 @@ var v = [
 		}
 	};
 };
-export { p as i, _ as n, h as r, b as t };
+export { c as a, u as i, f as n, l as r, m as t };

package/dist/playground-element.d.ts

@@ -1,4 +1,5 @@
 import { NativeElement } from '@nonoun/native-ui';
+import '@nonoun/native-codemirror/register';
 import type { TabName } from './editors.ts';
 /**
  * Interactive code playground with live preview.

package/dist/playground-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"playground-element.d.ts","sourceRoot":"","sources":["../src/playground-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAuD,MAAM,mBAAmB,CAAC;AAIvG,OAAO,KAAK,EAAkB,OAAO,EAAE,MAAM,cAAc,CAAC;AAM5D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,WAAY,SAAQ,aAAa;;IAC5C,MAAM,CAAC,kBAAkB,WAUvB;IAsBF,yCAAyC;IACzC,GAAG,IAAI,OAAO,CAAC,IAAI,CAAC;IAIpB,wCAAwC;IACxC,KAAK,IAAI,IAAI;IAIb,mDAAmD;IACnD,OAAO,IAAI;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE;IAQpD,wDAAwD;IACxD,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,GAAG,IAAI;IAYrD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAqCpF,KAAK,IAAI,IAAI;IA6Fb,QAAQ,IAAI,IAAI;CAwZjB"}
+{"version":3,"file":"playground-element.d.ts","sourceRoot":"","sources":["../src/playground-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAuD,MAAM,mBAAmB,CAAC;AAEvG,OAAO,oCAAoC,CAAC;AAI5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAK5C;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,WAAY,SAAQ,aAAa;;IAC5C,MAAM,CAAC,kBAAkB,WAUvB;IAsBF,yCAAyC;IACzC,GAAG,IAAI,OAAO,CAAC,IAAI,CAAC;IAIpB,wCAAwC;IACxC,KAAK,IAAI,IAAI;IAIb,mDAAmD;IACnD,OAAO,IAAI;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE;IAQpD,wDAAwD;IACxD,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,GAAG,IAAI;IAarD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAqCpF,KAAK,IAAI,IAAI;IA6Fb,QAAQ,IAAI,IAAI;CA2ZjB"}

package/dist/register.js

@@ -1,4 +1,4 @@
-import { t as e } from "./playground-element-DgFyaxxQ.js";
+import { t as e } from "./playground-element-CrsNEOwq.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.3",
+  "version": "0.2.4",
   "description": "Embeddable live code sandbox for @nonoun/native-ui",
   "license": "MIT",
   "type": "module",