@jschofield/play-ground 0.2.0 → 0.3.0

package/dist/assets/index.js

@@ -1,4 +1,4 @@
-import{LitElement as e,css as t,html as n}from"lit";import*as r from"prettier/standalone";import i from"prettier/plugins/babel";import a from"prettier/plugins/postcss";import o from"prettier/plugins/estree";import s from"prettier/plugins/html";import{EditorView as c,drawSelection as l,gutters as u,keymap as d,lineNumbers as f}from"@codemirror/view";import{EditorState as p}from"@codemirror/state";import{basicSetup as m}from"codemirror";import{customElement as h,property as g,state as _}from"lit/decorators.js";import{defaultKeymap as v,indentWithTab as y}from"@codemirror/commands";import{html as b}from"@codemirror/lang-html";import{vim as x}from"@replit/codemirror-vim";import{foldCode as S}from"@codemirror/language";(function(){let e=document.createElement(`link`).relList;if(e&&e.supports&&e.supports(`modulepreload`))return;for(let e of document.querySelectorAll(`link[rel="modulepreload"]`))n(e);new MutationObserver(e=>{for(let t of e)if(t.type===`childList`)for(let e of t.addedNodes)e.tagName===`LINK`&&e.rel===`modulepreload`&&n(e)}).observe(document,{childList:!0,subtree:!0});function t(e){let t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin===`use-credentials`?t.credentials=`include`:e.crossOrigin===`anonymous`?t.credentials=`omit`:t.credentials=`same-origin`,t}function n(e){if(e.ep)return;e.ep=!0;let n=t(e);fetch(e.href,n)}})();var C=class{static{this.STORAGE_KEY=`repl-playground-state`}static{this.STATE_CHANGE_EVENT=`repl-playground-state-change`}static{this.subscribers=new Set}static getState(){try{let e=localStorage.getItem(this.STORAGE_KEY);if(e)return JSON.parse(e)}catch(e){console.warn(`Failed to parse repl-playground state from localStorage:`,e)}return{vimMode:`disabled`}}static getVimMode(){return this.getState().vimMode===`enabled`}static setVimMode(e){let t={...this.getState(),vimMode:e?`enabled`:`disabled`};try{localStorage.setItem(this.STORAGE_KEY,JSON.stringify(t))}catch(e){console.warn(`Failed to save repl-playground state to localStorage:`,e)}this.notifySubscribers(t),window.dispatchEvent(new CustomEvent(this.STATE_CHANGE_EVENT,{detail:t}))}static subscribe(e){this.subscribers.add(e)}static unsubscribe(e){this.subscribers.delete(e)}static notifySubscribers(e){this.subscribers.forEach(t=>{try{t(e)}catch(e){console.warn(`Error in state change callback:`,e)}})}static initializeStorageListener(){window.addEventListener(`storage`,e=>{if(e.key===this.STORAGE_KEY&&e.newValue)try{let t=JSON.parse(e.newValue);this.notifySubscribers(t)}catch(e){console.warn(`Failed to parse state change from storage event:`,e)}}),window.addEventListener(this.STATE_CHANGE_EVENT,(()=>{}))}},w=(e,t)=>{let n;return((...r)=>{clearTimeout(n),n=setTimeout(()=>e(...r),t)})};function T(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}var E=[i,o,s,a],D=class extends e{constructor(...e){super(...e),this.docContents=``,this.vimMode=!1,this.html=``,this.fold=``,this.handleDocUpdate=()=>{this.docContents=this.editorView.state.doc.toString().trim(),this.updateIframeContent()},this.debouncedHandleDocUpdate=w(this.handleDocUpdate,200),this.onEditorUpdate=e=>{e.docChanged&&this.debouncedHandleDocUpdate()}}get template(){return this.querySelector(`template`)}connectedCallback(){super.connectedCallback(),C.initializeStorageListener(),this.vimMode=C.getVimMode(),this.stateChangeCallback=e=>{let t=e.vimMode===`enabled`;this.vimMode!==t&&(this.vimMode=t,this.buildEditor())},C.subscribe(this.stateChangeCallback)}async initEditorView(){let e=await this.getTemplate();this.docContents=e,this.buildEditor(e),this.fold&&this.foldLines()}buildEditor(e){let t=this.shadowRoot?.querySelector(`#editor`);if(!t)return;let n=[];this.vimMode&&n.push(x()),n.push(l()),n.push(m,d.of([...v,y]),b(),f(),u(),c.updateListener.of(this.onEditorUpdate));let r=p.create({doc:e??this.editorView?.state.doc.toString()??``,extensions:n});this.editorView&&this.editorView.destroy(),this.editorView=new c({state:r,parent:t})}foldLines(){this.fold.split(`,`).map(e=>Number.parseInt(e)).forEach(e=>{let t=this.editorView.state.doc.line(e);this.editorView.dispatch({selection:{anchor:t.from}}),S(this.editorView)})}async getTemplate(){if(this.html)return await this.format(this.html);let e=this.template?.innerHTML.trim();return await this.format(e)}async firstUpdated(){await this.initEditorView(),this.setupIframe()}disconnectedCallback(){super.disconnectedCallback(),this.stateChangeCallback&&C.unsubscribe(this.stateChangeCallback),this.editorView?.destroy()}setupIframe(){this.iframeContainer=this.shadowRoot?.querySelector(`#view-container`),this.iframeContainer&&this.updateIframeContent()}updateIframeContent(){if(!this.iframeContainer)return;let e=(this.docContents||`<!DOCTYPE html><p>Loading...</p>`).replace(`shadowrootmode="open."`,`shadowrootmode="open"`);this.iframe&&this.iframe.remove(),this.iframe=document.createElement(`iframe`),this.iframe.sandbox.add(`allow-scripts`,`allow-forms`,`allow-same-origin`),this.iframe.srcdoc=e,this.iframeContainer.appendChild(this.iframe)}async format(e=``){let t=await r.format(e,{parser:`html`,plugins:E}),n=[`open`,`disabled`,`checked`,`selected`,`readonly`,`required`,`autofocus`,`autoplay`,`controls`,`defer`,`hidden`,`loop`,`multiple`,`muted`,`reversed`,`scoped`,`async`,`default`,`visible`,`active`,`expanded`,`loading`,`invalid`,`complete`,`bool-attr`],i=t;return n.forEach(e=>{let t=RegExp(`\\s${e}=""`,`g`);i=i.replace(t,` ${e}`)}),i}toggleVimMode(){C.setVimMode(!this.vimMode)}async doFormat(){let e=await this.format(this.docContents),{state:t}=this.editorView,n=t.update({changes:{from:0,to:t.doc.length,insert:e}});this.editorView.update([n])}render(){return n`<div part="container" class="query-container">
+import{LitElement as e,css as t,html as n}from"lit";import*as r from"prettier/standalone";import i from"prettier/plugins/babel";import a from"prettier/plugins/postcss";import o from"prettier/plugins/estree";import s from"prettier/plugins/html";import{EditorView as c,drawSelection as l,gutters as u,keymap as d,lineNumbers as f}from"@codemirror/view";import{EditorState as p}from"@codemirror/state";import{basicSetup as m}from"codemirror";import{customElement as h,property as g,state as _}from"lit/decorators.js";import{defaultKeymap as v,indentWithTab as y}from"@codemirror/commands";import{html as b}from"@codemirror/lang-html";import{HighlightStyle as x,foldCode as S,syntaxHighlighting as C}from"@codemirror/language";import{tags as w}from"@lezer/highlight";import{vim as T}from"@replit/codemirror-vim";(function(){let e=document.createElement(`link`).relList;if(e&&e.supports&&e.supports(`modulepreload`))return;for(let e of document.querySelectorAll(`link[rel="modulepreload"]`))n(e);new MutationObserver(e=>{for(let t of e)if(t.type===`childList`)for(let e of t.addedNodes)e.tagName===`LINK`&&e.rel===`modulepreload`&&n(e)}).observe(document,{childList:!0,subtree:!0});function t(e){let t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.crossOrigin===`use-credentials`?t.credentials=`include`:e.crossOrigin===`anonymous`?t.credentials=`omit`:t.credentials=`same-origin`,t}function n(e){if(e.ep)return;e.ep=!0;let n=t(e);fetch(e.href,n)}})();var E=`#1a1b26`,D=`#9aa5ce`,O=`#364A82`,k=`#565f89`,A=`#1a1b26`,j=`#1e202e`,M=[c.theme({"&":{color:D,backgroundColor:E},".cm-content":{caretColor:`#c0caf5`},".cm-cursor, .cm-dropCursor":{borderLeftColor:`#c0caf5`},"&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":{backgroundColor:O},".cm-panels":{backgroundColor:E,color:D},".cm-searchMatch":{backgroundColor:`#3d59a1`,outline:`1px solid #3d59a166`},".cm-searchMatch.cm-searchMatch-selected":{backgroundColor:`#3d59a1aa`},".cm-activeLine":{backgroundColor:j},".cm-selectionMatch":{backgroundColor:`#3d59a144`},"&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket":{backgroundColor:`#3d59a166`},".cm-gutters":{backgroundColor:A,color:k,border:`none`},".cm-activeLineGutter":{backgroundColor:j},".cm-foldPlaceholder":{backgroundColor:`transparent`,border:`none`,color:`#565f89`},".cm-tooltip":{border:`none`,backgroundColor:`#24283b`},".cm-tooltip .cm-tooltip-arrow:before":{borderTopColor:`transparent`,borderBottomColor:`transparent`},".cm-tooltip .cm-tooltip-arrow:after":{borderTopColor:`#24283b`,borderBottomColor:`#24283b`},".cm-tooltip-autocomplete":{"& > ul > li[aria-selected]":{backgroundColor:`#364A82`,color:D}}},{dark:!0}),C(x.define([{tag:w.keyword,color:`#bb9af7`},{tag:[w.name,w.deleted,w.character,w.macroName],color:`#c0caf5`},{tag:[w.function(w.variableName)],color:`#7aa2f7`},{tag:[w.labelName],color:`#7dcfff`},{tag:[w.color,w.constant(w.name),w.standard(w.name)],color:`#ff9e64`},{tag:[w.definition(w.name),w.separator],color:`#c0caf5`},{tag:[w.brace],color:`#c0caf5`},{tag:[w.annotation],color:`#e0af68`},{tag:[w.number,w.changed,w.annotation,w.modifier,w.self,w.namespace],color:`#ff9e64`},{tag:[w.typeName,w.className],color:`#2ac3de`},{tag:[w.operator,w.operatorKeyword],color:`#bb9af7`},{tag:[w.tagName],color:`#f7768e`},{tag:[w.squareBracket],color:`#c0caf5`},{tag:[w.angleBracket],color:`#89ddff`},{tag:[w.attributeName],color:`#bb9af7`},{tag:[w.regexp],color:`#f7768e`},{tag:[w.quote],color:`#9ece6a`},{tag:[w.string],color:`#9ece6a`},{tag:w.link,color:`#73daca`,textDecoration:`underline`,textUnderlinePosition:`under`},{tag:[w.url,w.escape,w.special(w.string)],color:`#ff9e64`},{tag:[w.meta],color:`#565f89`},{tag:[w.comment],color:`#565f89`,fontStyle:`italic`},{tag:w.strong,fontWeight:`bold`,color:`#e0af68`},{tag:w.emphasis,fontStyle:`italic`,color:`#e0af68`},{tag:w.strikethrough,textDecoration:`line-through`},{tag:w.heading,fontWeight:`bold`,color:`#7dcfff`},{tag:w.special(w.heading1),fontWeight:`bold`,color:`#7dcfff`},{tag:w.heading1,fontWeight:`bold`,color:`#7dcfff`},{tag:[w.heading2,w.heading3,w.heading4],fontWeight:`bold`,color:`#7dcfff`},{tag:[w.heading5,w.heading6],color:`#7dcfff`},{tag:[w.atom,w.bool,w.special(w.variableName)],color:`#ff9e64`},{tag:[w.processingInstruction,w.inserted],color:`#73daca`},{tag:[w.contentSeparator],color:`#7aa2f7`},{tag:w.invalid,color:`#ff5370`,borderBottom:`1px dotted #ff5370`}]))],N=class{static{this.STORAGE_KEY=`repl-playground-state`}static{this.STATE_CHANGE_EVENT=`repl-playground-state-change`}static{this.subscribers=new Set}static getState(){try{let e=localStorage.getItem(this.STORAGE_KEY);if(e)return JSON.parse(e)}catch(e){console.warn(`Failed to parse repl-playground state from localStorage:`,e)}return{vimMode:`disabled`}}static getVimMode(){return this.getState().vimMode===`enabled`}static setVimMode(e){let t={...this.getState(),vimMode:e?`enabled`:`disabled`};try{localStorage.setItem(this.STORAGE_KEY,JSON.stringify(t))}catch(e){console.warn(`Failed to save repl-playground state to localStorage:`,e)}this.notifySubscribers(t),window.dispatchEvent(new CustomEvent(this.STATE_CHANGE_EVENT,{detail:t}))}static subscribe(e){this.subscribers.add(e)}static unsubscribe(e){this.subscribers.delete(e)}static notifySubscribers(e){this.subscribers.forEach(t=>{try{t(e)}catch(e){console.warn(`Error in state change callback:`,e)}})}static initializeStorageListener(){window.addEventListener(`storage`,e=>{if(e.key===this.STORAGE_KEY&&e.newValue)try{let t=JSON.parse(e.newValue);this.notifySubscribers(t)}catch(e){console.warn(`Failed to parse state change from storage event:`,e)}}),window.addEventListener(this.STATE_CHANGE_EVENT,(()=>{}))}},P=(e,t)=>{let n;return((...r)=>{clearTimeout(n),n=setTimeout(()=>e(...r),t)})};function F(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}var I=[i,o,s,a],L=class extends e{constructor(...e){super(...e),this.docContents=``,this.vimMode=!1,this.html=``,this.fold=``,this.darkModeQuery=window.matchMedia(`(prefers-color-scheme: dark)`),this.darkModeListener=()=>this.buildEditor(),this.handleDocUpdate=()=>{this.docContents=this.editorView.state.doc.toString().trim(),this.updateIframeContent()},this.debouncedHandleDocUpdate=P(this.handleDocUpdate,200),this.onEditorUpdate=e=>{e.docChanged&&this.debouncedHandleDocUpdate()}}get template(){return this.querySelector(`template`)}get isDark(){let e=document.documentElement.getAttribute(`data-theme`);return e===`dark`?!0:e===`light`?!1:this.darkModeQuery.matches}connectedCallback(){super.connectedCallback(),N.initializeStorageListener(),this.vimMode=N.getVimMode(),this.stateChangeCallback=e=>{let t=e.vimMode===`enabled`;this.vimMode!==t&&(this.vimMode=t,this.buildEditor())},N.subscribe(this.stateChangeCallback),this.darkModeQuery.addEventListener(`change`,this.darkModeListener),this.themeObserver=new MutationObserver(()=>this.buildEditor()),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`data-theme`]})}async initEditorView(){let e=await this.getTemplate();this.docContents=e,this.buildEditor(e),this.fold&&this.foldLines()}buildEditor(e){let t=this.shadowRoot?.querySelector(`#editor`);if(!t)return;let n=[];this.vimMode&&n.push(T()),n.push(l()),this.isDark&&n.push(M),n.push(m,d.of([...v,y]),b(),f(),u(),c.updateListener.of(this.onEditorUpdate));let r=p.create({doc:e??this.editorView?.state.doc.toString()??``,extensions:n});this.editorView&&this.editorView.destroy(),this.editorView=new c({state:r,parent:t})}foldLines(){this.fold.split(`,`).map(e=>Number.parseInt(e)).forEach(e=>{let t=this.editorView.state.doc.line(e);this.editorView.dispatch({selection:{anchor:t.from}}),S(this.editorView)})}async getTemplate(){if(this.html)return await this.format(this.html);let e=this.template?.innerHTML.trim();return await this.format(e)}async firstUpdated(){await this.initEditorView(),this.setupIframe()}disconnectedCallback(){super.disconnectedCallback(),this.stateChangeCallback&&N.unsubscribe(this.stateChangeCallback),this.darkModeQuery.removeEventListener(`change`,this.darkModeListener),this.themeObserver?.disconnect(),this.editorView?.destroy()}setupIframe(){this.iframeContainer=this.shadowRoot?.querySelector(`#view-container`),this.iframeContainer&&this.updateIframeContent()}updateIframeContent(){if(!this.iframeContainer)return;let e=(this.docContents||`<!DOCTYPE html><p>Loading...</p>`).replace(`shadowrootmode="open."`,`shadowrootmode="open"`),t=e.includes(`<head>`)?e.replace(`<head>`,`<head><style>html{background:#fff;color:#000;color-scheme:light}</style>`):`<style>html{background:#fff;color:#000;color-scheme:light}</style>${e}`;this.iframe&&this.iframe.remove(),this.iframe=document.createElement(`iframe`),this.iframe.sandbox.add(`allow-scripts`,`allow-forms`,`allow-same-origin`),this.iframe.srcdoc=t,this.iframeContainer.appendChild(this.iframe)}async format(e=``){let t=await r.format(e,{parser:`html`,plugins:I}),n=[`open`,`disabled`,`checked`,`selected`,`readonly`,`required`,`autofocus`,`autoplay`,`controls`,`defer`,`hidden`,`loop`,`multiple`,`muted`,`reversed`,`scoped`,`async`,`default`,`visible`,`active`,`expanded`,`loading`,`invalid`,`complete`,`bool-attr`],i=t;return n.forEach(e=>{let t=RegExp(`\\s${e}=""`,`g`);i=i.replace(t,` ${e}`)}),i}toggleVimMode(){N.setVimMode(!this.vimMode)}async doFormat(){let e=await this.format(this.docContents),{state:t}=this.editorView,n=t.update({changes:{from:0,to:t.doc.length,insert:e}});this.editorView.update([n])}render(){return n`<div part="container" class="query-container">
       <div class="editor-container">
         <div class="editor-wrapper">
           <div id="editor"></div>
@@ -38,7 +38,7 @@ import{LitElement as e,css as t,html as n}from"lit";import*as r from"prettier/st
 
     .query-container {
       container-type: inline-size;
-      border: 1px solid #333;
+      border: 1px solid var(--border, #333);
       border-radius: 8px;
       overflow: hidden;
     }
@@ -54,12 +54,13 @@ import{LitElement as e,css as t,html as n}from"lit";import*as r from"prettier/st
 
     #view-container {
       display: flex;
-      border-left: 1px solid #333;
+      border-left: 1px solid var(--border, #333);
     }
 
     #view-container iframe {
       width: 100%;
       border: none;
+      color-scheme: light;
     }
 
     .editor-wrapper {
@@ -71,8 +72,8 @@ import{LitElement as e,css as t,html as n}from"lit";import*as r from"prettier/st
       display: flex;
       gap: 8px;
       padding: 6px 8px;
-      border-top: 1px solid #333;
-      background: var(--seasalt, #fafafa);
+      border-top: 1px solid var(--border, #333);
+      background: var(--bg, #fafafa);
     }
 
     .controls button {
@@ -81,23 +82,23 @@ import{LitElement as e,css as t,html as n}from"lit";import*as r from"prettier/st
       cursor: pointer;
       border: none;
       border-radius: 8px;
-      background: var(--gunmetal, #1b2f36);
-      color: var(--seasalt, #fafafa);
+      background: var(--button-bg, #1b2f36);
+      color: var(--button-text, #fafafa);
       box-shadow: var(--shadow, 0 4px 8px rgba(0, 0, 0, 0.2));
       transition: color 0.2s;
     }
 
     .controls button:hover,
     .controls button:active {
-      background: var(--gradient, var(--gunmetal, #1b2f36));
-      color: var(--seasalt, #fafafa);
+      background: var(--gradient, var(--button-bg, #1b2f36));
+      color: var(--button-text, #fafafa);
     }
 
     .controls button:focus-visible {
-      outline: 2px solid var(--raw-umber, #906b56);
+      outline: 2px solid var(--link, #906b56);
       outline-offset: 1px;
-      background: var(--gradient, var(--gunmetal, #1b2f36));
-      color: var(--seasalt, #fafafa);
+      background: var(--gradient, var(--button-bg, #1b2f36));
+      color: var(--button-text, #fafafa);
     }
 
     .sr-only {
@@ -119,12 +120,12 @@ import{LitElement as e,css as t,html as n}from"lit";import*as r from"prettier/st
       margin-left: auto;
       cursor: pointer;
       font-size: 0.833rem;
-      color: var(--gunmetal, #1b2f36);
+      color: var(--text, #1b2f36);
       user-select: none;
     }
 
     .sr-only:focus-visible + .toggle-track {
-      outline: 2px solid var(--raw-umber, #906b56);
+      outline: 2px solid var(--link, #906b56);
       outline-offset: 2px;
     }
 
@@ -134,14 +135,14 @@ import{LitElement as e,css as t,html as n}from"lit";import*as r from"prettier/st
       width: 32px;
       height: 18px;
       border-radius: 9px;
-      background: #d5d5d5;
-      border: 1.5px solid var(--gunmetal, #1b2f36);
+      background: var(--border-subtle, #d5d5d5);
+      border: 1.5px solid var(--border, #1b2f36);
       box-sizing: border-box;
       transition: background 0.2s;
     }
 
     .toggle-track.active {
-      background: var(--gunmetal, #1b2f36);
+      background: var(--accent-secondary, #1b2f36);
     }
 
     .toggle-thumb {
@@ -151,7 +152,7 @@ import{LitElement as e,css as t,html as n}from"lit";import*as r from"prettier/st
       width: 12px;
       height: 12px;
       border-radius: 50%;
-      background: var(--seasalt, #fafafa);
+      background: var(--bg, #fafafa);
       transition: transform 0.2s;
     }
 
@@ -168,4 +169,4 @@ import{LitElement as e,css as t,html as n}from"lit";import*as r from"prettier/st
         }
       }
     }
-  `}};T([_()],D.prototype,`docContents`,void 0),T([_()],D.prototype,`vimMode`,void 0),T([g()],D.prototype,`html`,void 0),T([g()],D.prototype,`fold`,void 0),D=T([h(`play-ground`)],D);
+  `}};F([_()],L.prototype,`docContents`,void 0),F([_()],L.prototype,`vimMode`,void 0),F([g()],L.prototype,`html`,void 0),F([g()],L.prototype,`fold`,void 0),L=F([h(`play-ground`)],L);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jschofield/play-ground",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "./dist/assets/index.js",
   "exports": {
@@ -25,6 +25,7 @@
     "@codemirror/language": "^6.10.1",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.24.1",
+    "@lezer/highlight": "^1.2.0",
     "@replit/codemirror-vim": "^6.3.0",
     "codemirror": "^6.0.1",
     "lit": "^3.0.0",