@jschofield/play-ground 0.2.0

package/README.md

@@ -0,0 +1,111 @@
+# @jschofield/play-ground
+
+Interactive code editor and live preview web component built with [Lit](https://lit.dev/) and [CodeMirror 6](https://codemirror.net/). A split-pane playground for HTML/CSS/JS — like a lightweight CodePen you can embed anywhere.
+
+## Install
+
+```bash
+npm install @jschofield/play-ground
+```
+
+### Peer dependencies
+
+This component requires the following peer dependencies:
+
+```bash
+npm install lit prettier codemirror @codemirror/commands @codemirror/lang-html @codemirror/lang-javascript @codemirror/language @codemirror/state @codemirror/view @replit/codemirror-vim
+```
+
+| Peer | Version |
+|---|---|
+| `lit` | `^3.0.0` |
+| `prettier` | `^3.0.0` |
+| `codemirror` | `^6.0.1` |
+| `@codemirror/commands` | `^6.3.3` |
+| `@codemirror/lang-html` | `^6.4.8` |
+| `@codemirror/lang-javascript` | `^6.2.1` |
+| `@codemirror/language` | `^6.10.1` |
+| `@codemirror/state` | `^6.4.1` |
+| `@codemirror/view` | `^6.24.1` |
+| `@replit/codemirror-vim` | `^6.3.0` |
+
+## Usage
+
+```html
+<script type="module">
+  import '@jschofield/play-ground';
+</script>
+
+<play-ground>
+  <template>
+    <style>
+      h1 { color: tomato; }
+    </style>
+    <h1>Hello!</h1>
+  </template>
+</play-ground>
+```
+
+### Inline HTML attribute
+
+```html
+<play-ground html="<h1>Quick example</h1>"></play-ground>
+```
+
+### Code folding
+
+Collapse specific lines on initial load (useful for hiding boilerplate):
+
+```html
+<play-ground fold="1,5">
+  <template>
+    <!-- line 1 is folded -->
+    ...
+  </template>
+</play-ground>
+```
+
+### Without a bundler
+
+This component has many CodeMirror peer dependencies, so a bundler is strongly recommended. If you must go without one, you'll need an import map for all peers:
+
+```html
+<script type="importmap">
+{
+  "imports": {
+    "lit": "https://esm.run/lit",
+    "lit/": "https://esm.run/lit/",
+    "prettier/standalone": "https://esm.run/prettier/standalone",
+    "prettier/plugins/": "https://esm.run/prettier/plugins/",
+    "codemirror": "https://esm.run/codemirror",
+    "@codemirror/commands": "https://esm.run/@codemirror/commands",
+    "@codemirror/lang-html": "https://esm.run/@codemirror/lang-html",
+    "@codemirror/lang-javascript": "https://esm.run/@codemirror/lang-javascript",
+    "@codemirror/language": "https://esm.run/@codemirror/language",
+    "@codemirror/state": "https://esm.run/@codemirror/state",
+    "@codemirror/view": "https://esm.run/@codemirror/view",
+    "@replit/codemirror-vim": "https://esm.run/@replit/codemirror-vim"
+  }
+}
+</script>
+<script type="module" src="https://esm.run/@jschofield/play-ground"></script>
+```
+
+## Attributes
+
+| Attribute | Type | Default | Description |
+|---|---|---|---|
+| `html` | `string` | `""` | Initial HTML content (alternative to `<template>`) |
+| `fold` | `string` | `""` | Comma-separated line numbers to fold on load |
+
+## Features
+
+- Live preview updates as you type (200ms debounce)
+- Format button (Prettier with HTML/CSS/JS support)
+- Vim mode toggle (persists across page via shared state)
+- Sandboxed iframe preview (`allow-scripts allow-forms allow-same-origin`)
+- Responsive: stacks vertically below 900px
+
+## License
+
+MIT

package/dist/assets/index.js

@@ -0,0 +1,171 @@
+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">
+      <div class="editor-container">
+        <div class="editor-wrapper">
+          <div id="editor"></div>
+          <div class="controls">
+            <button
+              part="editor-format-button"
+              class="format-button"
+              type="button"
+              @click=${this.doFormat}
+            >
+              Format
+            </button>
+            <label class="vim-toggle">
+              <input
+                type="checkbox"
+                class="sr-only"
+                .checked=${this.vimMode}
+                @change=${this.toggleVimMode}
+              />
+              <span class="toggle-track ${this.vimMode?`active`:``}">
+                <span class="toggle-thumb"></span>
+              </span>
+              Vim mode
+            </label>
+          </div>
+        </div>
+        <div id="view-container"></div>
+      </div>
+    </div>`}static{this.styles=t`
+    :host {
+      display: block;
+    }
+
+    #editor {
+      font-size: 14px;
+    }
+
+    .query-container {
+      container-type: inline-size;
+      border: 1px solid #333;
+      border-radius: 8px;
+      overflow: hidden;
+    }
+
+    .editor-container {
+      position: relative;
+      display: flex;
+
+      & > * {
+        width: 50%;
+      }
+    }
+
+    #view-container {
+      display: flex;
+      border-left: 1px solid #333;
+    }
+
+    #view-container iframe {
+      width: 100%;
+      border: none;
+    }
+
+    .editor-wrapper {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .controls {
+      display: flex;
+      gap: 8px;
+      padding: 6px 8px;
+      border-top: 1px solid #333;
+      background: var(--seasalt, #fafafa);
+    }
+
+    .controls button {
+      padding: 0.25em 1em 0.2em;
+      font-size: 0.833rem;
+      cursor: pointer;
+      border: none;
+      border-radius: 8px;
+      background: var(--gunmetal, #1b2f36);
+      color: var(--seasalt, #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);
+    }
+
+    .controls button:focus-visible {
+      outline: 2px solid var(--raw-umber, #906b56);
+      outline-offset: 1px;
+      background: var(--gradient, var(--gunmetal, #1b2f36));
+      color: var(--seasalt, #fafafa);
+    }
+
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    .vim-toggle {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-left: auto;
+      cursor: pointer;
+      font-size: 0.833rem;
+      color: var(--gunmetal, #1b2f36);
+      user-select: none;
+    }
+
+    .sr-only:focus-visible + .toggle-track {
+      outline: 2px solid var(--raw-umber, #906b56);
+      outline-offset: 2px;
+    }
+
+    .toggle-track {
+      display: inline-block;
+      position: relative;
+      width: 32px;
+      height: 18px;
+      border-radius: 9px;
+      background: #d5d5d5;
+      border: 1.5px solid var(--gunmetal, #1b2f36);
+      box-sizing: border-box;
+      transition: background 0.2s;
+    }
+
+    .toggle-track.active {
+      background: var(--gunmetal, #1b2f36);
+    }
+
+    .toggle-thumb {
+      position: absolute;
+      top: 1.5px;
+      left: 1.5px;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: var(--seasalt, #fafafa);
+      transition: transform 0.2s;
+    }
+
+    .toggle-track.active .toggle-thumb {
+      transform: translateX(14px);
+    }
+
+    @container (max-width: 900px) {
+      .editor-container {
+        flex-direction: column;
+
+        & > * {
+          width: initial;
+        }
+      }
+    }
+  `}};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);

package/dist/index.html

@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Lit + TS</title>
+    <script type="module" crossorigin src="/assets/index.js"></script>
+  </head>
+  <body>
+    <play-ground fold="7">
+      <template slot="html">
+        <h1>Hello World!</h1>
+        <html>
+          <img src="https://picsum.photos/id/12/300/200" />
+          <script>
+            const someJavascript = document.createElement("span");
+          </script>
+          <style>
+            h1 {
+              font-weight: bold;
+            }
+          </style>
+        </html>
+      </template>
+    </play-ground>
+    <play-ground fold="3,9">
+      <template>
+        <link href="./example.css" rel="stylesheet" />
+        <div>Div outside the shadow DOM!</div>
+        <my-element>
+          <template shadowrootmode="open.">
+            testing
+            <link href="./example.css" rel="stylesheet" />
+          </template>
+        </my-element>
+        <script>
+          class MyElement extends HTMLElement {
+            connectedCallback() {
+              const div = document.createElement("div");
+              div.innerHTML = `
+            Div inside the shadow DOM!
+          `;
+              this.shadowRoot.append(div);
+            }
+          }
+          customElements.define("my-element", MyElement);
+        </script>
+      </template>
+    </play-ground>
+
+    <play-ground
+      html='
+    <my-element>
+      Here is text being passed into the default slot!
+    </my-element>
+    <script type="module">
+      import {
+        LitElement, html,
+      } from "https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js";
+
+      class MyElement extends LitElement {
+        render() {
+          return html`
+            <slot></slot>
+          `;
+        }
+      }
+
+      customElements.define("my-element", MyElement);
+    </script>
+     '></play-ground>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@jschofield/play-ground",
+  "version": "0.2.0",
+  "type": "module",
+  "main": "./dist/assets/index.js",
+  "exports": {
+    ".": "./dist/assets/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "description": "Interactive code editor/playground web component built with Lit and CodeMirror",
+  "author": "Jim Schofield",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/JimSchofield/jschof.dev",
+    "directory": "component/play-ground"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "@codemirror/commands": "^6.3.3",
+    "@codemirror/lang-html": "^6.4.8",
+    "@codemirror/lang-javascript": "^6.2.1",
+    "@codemirror/language": "^6.10.1",
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/view": "^6.24.1",
+    "@replit/codemirror-vim": "^6.3.0",
+    "codemirror": "^6.0.1",
+    "lit": "^3.0.0",
+    "prettier": "^3.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^6.0.2",
+    "vite": "^8.0.3"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  }
+}