npm - @potch/html-bin - Versions diffs - 1.0.0 - Mend

@potch/html-bin 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,3 @@
+# html-bin
+wip!

package/index.html ADDED Viewed

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <script defer type="module">
+      import { createBin } from "/build/index.js";
+      window.bin = createBin({
+        container: document.body,
+        sources: {
+          js: `// js goes here
+const el = document.querySelector('h1');
+function update(time) {
+  el.innerText = time;
+}
+setInterval(() => {
+  update(Date.now());
+}, 1000)`,
+          css: `h1, .cool, #foo {
+  color: #fc0;
+  background: hsla(120, 50%, 75%, 0.3);
+}`,
+          html: "<h1>HI</h1>\n",
+        },
+        split: 0.6,
+        height: "512px",
+      });
+    </script>
+    <link rel="stylesheet" href="src/style.css" />
+  </head>
+  <body></body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,33 @@
+{
+  "name": "@potch/html-bin",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "rollup -c",
+    "start": "npm run build && tinyserve -p 8081 -w 'src index.html' -d . -x 'npm run build'"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@codemirror/commands": "^6.8.1",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/language": "^6.11.0",
+    "@codemirror/search": "^6.5.11",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.36.8",
+    "@potch/minifw": "^3.1.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@uiw/codemirror-theme-dracula": "^4.23.12"
+  },
+  "devDependencies": {
+    "@potch/tinyserve": "^1.5.1",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "rollup": "^4.40.2"
+  }
+}

package/rollup.config.js ADDED Viewed

@@ -0,0 +1,12 @@
+import { nodeResolve } from "@rollup/plugin-node-resolve";
+import terser from "@rollup/plugin-terser";
+export default {
+  input: "src/index.js",
+  output: {
+    sourcemap: true,
+    dir: "build",
+    format: "es",
+  },
+  plugins: [nodeResolve(), terser()],
+};

package/src/index.js ADDED Viewed

@@ -0,0 +1,452 @@
+import {
+  lineNumbers,
+  highlightActiveLineGutter,
+  highlightSpecialChars,
+  drawSelection,
+  dropCursor,
+  crosshairCursor,
+  highlightActiveLine,
+  keymap,
+  EditorView,
+} from "@codemirror/view";
+import { EditorState } from "@codemirror/state";
+import {
+  indentOnInput,
+  syntaxHighlighting,
+  bracketMatching,
+} from "@codemirror/language";
+import { history, defaultKeymap, historyKeymap } from "@codemirror/commands";
+import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
+const cmSetup = [
+  lineNumbers(),
+  highlightActiveLineGutter(),
+  highlightSpecialChars(),
+  history(),
+  drawSelection(),
+  dropCursor(),
+  EditorState.allowMultipleSelections.of(true),
+  indentOnInput(),
+  bracketMatching(),
+  crosshairCursor(),
+  highlightActiveLine(),
+  highlightSelectionMatches(),
+  EditorView.theme(
+    {
+      ".cm-content": {
+        caretColor: "#fff",
+      },
+    },
+    { dark: true }
+  ),
+  keymap.of([...defaultKeymap, ...searchKeymap, ...historyKeymap]),
+];
+import { javascript } from "@codemirror/lang-javascript";
+import { html } from "@codemirror/lang-html";
+import { css } from "@codemirror/lang-css";
+import { classHighlighter } from "@lezer/highlight";
+import {
+  dom as _,
+  signal,
+  computed,
+  effect as _effect,
+  on as _on,
+} from "@potch/minifw";
+const getLeft = (el) => (el ? el.offsetLeft + getLeft(el.offsetParent) : 0);
+const getTop = (el) => (el ? el.offsetTop + getTop(el.offsetParent) : 0);
+const debounceComputed = (s, ms) => {
+  const out = signal(s.value);
+  let timeout = null;
+  s.watch(() => {
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+      timeout = null;
+      out.value = s.value;
+    }, ms);
+  });
+  return out;
+};
+const maybe = (condition, value) => (condition ? value : "");
+export const createBin = ({
+  container,
+  sources: rawSources,
+  split,
+  width,
+  height,
+}) => {
+  const editorSplit = signal(parseFloat(split) || 0.5);
+  const teardownFns = [];
+  const effect = (...args) => {
+    teardownFns.push(_effect(...args));
+  };
+  const on = (...args) => {
+    teardownFns.push(_on(...args));
+  };
+  const actualWidth = signal(0);
+  const widthObserver = new ResizeObserver((entries) => {
+    if (entries[0]) {
+      actualWidth.value = entries[0].contentRect.width;
+    }
+  });
+  const isMiniMode = computed(() => actualWidth.value <= 700);
+  const resizing = signal(false);
+  const splitOverride = signal(null);
+  const activeTab = signal("js");
+  const sources = {
+    js: signal(rawSources.js ?? "// js goes here"),
+    css: signal(rawSources.css ?? "/* css goes here */\n"),
+    html: signal(rawSources.html ?? "<!-- html goes here -->\n"),
+  };
+  // previews
+  const scriptURL = computed((oldURL) => {
+    if (oldURL) {
+      URL.revokeObjectURL(oldURL);
+    }
+    return URL.createObjectURL(
+      new Blob([sources.js.value], { type: "text/javascript" })
+    );
+  });
+  const cssURL = computed((oldURL) => {
+    if (oldURL) {
+      URL.revokeObjectURL(oldURL);
+    }
+    return URL.createObjectURL(
+      new Blob([sources.css.value], { type: "text/css" })
+    );
+  });
+  const previewDoc = computed(
+    () => `
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <meta charset=utf8>
+        <link rel="stylesheet" href="${cssURL.value}">
+      </head>
+      <body>
+        ${sources.html.value}
+        <script>
+          window.onerror = function (msg, file, line, col, error) {
+            window.top.postMessage({
+              type: 'error',
+              msg: msg,
+              line: line,
+              col: col,
+              stack: error.stack.split('\\n')
+            }, '*');
+          };
+        </script>
+        <script type="module" src="${scriptURL.value}"></script>
+      </body>
+    </html>
+  `
+  );
+  const debouncePreviewDoc = debounceComputed(previewDoc, 1000);
+  const previewURL = computed((oldURL) => {
+    if (oldURL) {
+      URL.revokeObjectURL(oldURL);
+    }
+    return URL.createObjectURL(
+      new Blob([debouncePreviewDoc.value], { type: "text/html" })
+    );
+  });
+  // editor tabs
+  const jsEditorEl = _("div", {
+    className: computed(
+      () =>
+        "bin__editor bin__editor--js" +
+        maybe(activeTab.value === "js", " bin__editor--active")
+    ),
+  });
+  const cssEditorEl = _("div", {
+    className: computed(
+      () =>
+        "bin__editor bin__editor--css" +
+        maybe(activeTab.value === "css", " bin__editor--active")
+    ),
+  });
+  const htmlEditorEl = _("div", {
+    className: computed(
+      () =>
+        "bin__editor bin__editor--html" +
+        maybe(activeTab.value === "html", " bin__editor--active")
+    ),
+  });
+  const tabsForm = _(
+    "form",
+    {
+      className: "bin__tabs",
+      onsubmit: (e) => e.preventDefault(),
+      oninput: (e) => (activeTab.value = tabsForm.elements.tab.value),
+    },
+    _(
+      "label",
+      { className: "bin__tab bin__editor_tab" },
+      _("input", { type: "radio", name: "tab", value: "html" }),
+      "html"
+    ),
+    _(
+      "label",
+      { className: "bin__tab bin__editor_tab" },
+      _("input", { type: "radio", name: "tab", value: "css" }),
+      "css"
+    ),
+    _(
+      "label",
+      { className: "bin__tab bin__editor_tab" },
+      _("input", { type: "radio", name: "tab", value: "js", checked: true }),
+      "javascript"
+    ),
+    _(
+      "label",
+      { className: "bin__tab bin__preview_tab bin__mini_preview_tab" },
+      _("input", {
+        type: "radio",
+        name: "tab",
+        value: "preview",
+        disabled: computed(() => (isMiniMode.value ? false : true)),
+      }),
+      "preview",
+      _(
+        "button",
+        {
+          className: "bin__preview__refresh bin__iconbutton",
+          title: "reload the preview",
+          "aria-label": "reload the preview",
+          onclick: () => {
+            previewEl.value?.contentWindow.location.reload();
+          },
+        },
+        "🔁"
+      )
+    )
+  );
+  const resizerEl = _("div", {
+    className: "bin__resizer",
+  });
+  let previewEl = signal();
+  const binEl = _(
+    "div",
+    {
+      className: computed(
+        () =>
+          "bin" +
+          maybe(isMiniMode.value, " bin--mini-mode") +
+          maybe(resizing.value, " bin--resizing")
+      ),
+    },
+    _(
+      "div",
+      { className: "bin__widget" },
+      _(
+        "div",
+        { className: "bin__tabstrip" },
+        tabsForm,
+        _("button", {
+          className: "bin__editor__expand bin__iconbutton",
+          title: "toggle showing only the editor",
+          "aria-label": "toggle showing only the editor",
+          innerText: computed(() => (splitOverride.value === 1 ? "⏮️" : "↔️")),
+          onclick: () => {
+            splitOverride.value = splitOverride.value === 1 ? null : 1;
+          },
+        })
+      ),
+      _(
+        "div",
+        { className: "bin__menu" },
+        _(
+          "div",
+          { className: "bin__tab bin__preview_tab bin__tab--active" },
+          "preview",
+          _(
+            "button",
+            {
+              className: "bin__preview__refresh bin__iconbutton",
+              title: "reload the preview",
+              "aria-label": "reload the preview",
+              onclick: () => {
+                previewEl.value?.contentWindow.location.reload();
+              },
+            },
+            "🔁"
+          )
+        ),
+        _("button", {
+          className: "bin__preview__expand bin__iconbutton",
+          title: "toggle showing only the preview",
+          "aria-label": "toggle showing only the preview",
+          innerText: computed(() => (splitOverride.value === 0 ? "⏭️" : "↔️")),
+          style: computed(() => ({
+            order: splitOverride.value === 0 ? -1 : "unset",
+          })),
+          onclick: () => {
+            splitOverride.value = splitOverride.value === 0 ? null : 0;
+          },
+        })
+      ),
+      jsEditorEl,
+      cssEditorEl,
+      htmlEditorEl,
+      resizerEl,
+      _("iframe", {
+        ref: previewEl,
+        className: computed(
+          () =>
+            "bin__preview" +
+            maybe(activeTab.value === "preview", " bin__editor--active")
+        ),
+        src: previewURL,
+      }),
+      _("div", { className: "bin__controls" })
+    )
+  );
+  if (width) binEl.style.setProperty("--bin-width", width);
+  if (height) binEl.style.setProperty("--bin-height", height);
+  // resizing
+  const ilerp = (a, b, i) => (i - a) / (b - a);
+  const clamp = (a, b, n) => Math.max(a, Math.min(n, b));
+  const updateResize = (e) => {
+    if (resizing.value) {
+      let pos = e.clientX - resizerEl.offsetWidth / 2 - getLeft(binEl);
+      editorSplit.value = clamp(
+        0.2,
+        0.8,
+        ilerp(10, binEl.offsetWidth - 10, pos)
+      );
+    }
+  };
+  const startResize = (e) => {
+    resizing.value = true;
+    updateResize(e);
+    splitOverride.value = null;
+  };
+  const endResize = (e) => {
+    resizing.value = false;
+    updateResize(e);
+  };
+  on(resizerEl, "mousedown", startResize);
+  on(document.body, "mouseup", endResize);
+  on(document.body, "mouseleave", endResize);
+  on(binEl, "mousemove", (e) => {
+    updateResize(e);
+  });
+  effect(() => {
+    binEl.style.setProperty(
+      "--resizer-split",
+      splitOverride.value !== null ? splitOverride.value : editorSplit.value
+    );
+  });
+  // editor tabs
+  effect(() => {
+    const t = activeTab.value;
+    const m = isMiniMode.value;
+    if (t === "preview" && !m) {
+      tabsForm.elements.tab.value = "js";
+      activeTab.value = "js";
+    }
+  });
+  // create CM editors
+  const update = (s) => (v) => {
+    if (v.docChanged) {
+      // how to get the full text content from the editor
+      s.value = v.state.doc.toString();
+    }
+  };
+  const editors = {
+    js: new EditorView({
+      doc: sources.js.value,
+      parent: jsEditorEl,
+      extensions: [
+        cmSetup,
+        javascript(),
+        syntaxHighlighting(classHighlighter),
+        EditorView.updateListener.of(update(sources.js)),
+      ],
+    }),
+    css: new EditorView({
+      doc: sources.css.value,
+      parent: cssEditorEl,
+      extensions: [
+        cmSetup,
+        css(),
+        syntaxHighlighting(classHighlighter),
+        EditorView.updateListener.of(update(sources.css)),
+      ],
+    }),
+    html: new EditorView({
+      doc: sources.html.value,
+      parent: htmlEditorEl,
+      extensions: [
+        cmSetup,
+        html(),
+        syntaxHighlighting(classHighlighter),
+        EditorView.updateListener.of(update(sources.html)),
+      ],
+    }),
+  };
+  // mount bin and start
+  container.append(binEl);
+  widthObserver.observe(binEl);
+  // destroy / teardown
+  const findEffects = (node) => {
+    if (node._effects) {
+      teardownFns.push(...node._effects);
+    }
+    for (let n of node?.childNodes) findEffects(n);
+  };
+  findEffects(binEl);
+  const teardown = () => {
+    while (teardownFns.length) {
+      teardownFns.pop()();
+    }
+    widthObserver.disconnect();
+  };
+  return {
+    editors,
+    activeTab,
+    teardown,
+  };
+};

package/src/style.css ADDED Viewed

@@ -0,0 +1,360 @@
+@property --resizer-split {
+  initial-value: 0.5;
+  inherits: true;
+  syntax: "<number>";
+}
+.bin,
+.bin *,
+.bin *:before,
+.bin *:after {
+  box-sizing: border-box;
+}
+.bin {
+  height: var(--bin-height);
+  width: var(--bin-width);
+  max-height: 90vh;
+  max-height: 90svh;
+  position: relative;
+  container-type: inline-size;
+  container-name: bin;
+  --bg: #aaa;
+  --resizer-split: 0.5;
+  --margin: 2px;
+  --code-bg: #282a36;
+  --code-highlight: color-mix(in xyz, var(--code-bg), #cceeff 5%);
+  --code-text: #f8f8f2;
+  --code-comment: #a3b0d9;
+  --bin-width: 100%;
+  --bin-height: 512px;
+}
+.bin__widget {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid:
+    "tabs x menu" auto
+    "editor resizer preview" 1fr
+    "controls controls controls" auto
+    "footer footer footer" auto / calc(
+      var(--resizer-split) * (100% - var(--margin) * 2)
+    )
+    calc(var(--margin) * 2)
+    1fr;
+  align-items: stretch;
+  margin: 5rem auto;
+  height: var(--bin-height);
+  width: var(--bin-width);
+  background: var(--bg);
+  padding: calc(var(--margin) * 2);
+  border-radius: 0.3rem;
+  box-shadow: 0 0.5rem 1rem #4444;
+  font-family: sans-serif;
+  transition: 0.1s --resizer-split ease-out;
+}
+.bin--resizing .bin__widget {
+  transition: none;
+}
+.bin__editor {
+  overflow: auto;
+  grid-area: editor;
+  background: var(--code-bg);
+  color: var(--code-text);
+  display: none;
+  font-size: 13px;
+  border-width: 0 1px 1px;
+}
+.bin__editor--active {
+  display: block;
+}
+.bin__iconbutton {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 0.125rem;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1/1;
+  align-self: center;
+}
+.bin__iconbutton:hover {
+  background: #ddd;
+  box-shadow: 0 0 0 0.25rem #ddd;
+}
+.bin__editor__expand,
+.bin__preview__expand {
+  margin-inline: 0.5rem;
+}
+.bin__resizer {
+  grid-area: resizer;
+  cursor: ew-resize;
+  position: relative;
+}
+.bin__resizer:after {
+  content: "";
+  position: absolute;
+  display: block;
+  top: calc(50% - 0.5rem);
+  left: 1px;
+  height: 1rem;
+  width: 2px;
+  background: #444;
+}
+.bin__menu {
+  grid-area: menu;
+  font-size: 13px;
+  display: flex;
+  gap: var(--margin);
+  overflow: hidden;
+}
+.bin__preview {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  grid-area: preview;
+  border: 0 none;
+}
+.bin--resizing .bin__preview {
+  pointer-events: none;
+}
+.bin__tabstrip {
+  grid-area: tabs;
+  display: flex;
+  background: var(--bg);
+  font-size: 13px;
+  overflow: hidden;
+}
+.bin__tabs {
+  display: flex;
+  gap: var(--margin);
+  margin-inline-end: auto;
+}
+.bin__tab {
+  border-bottom: var(--margin) solid var(--bg);
+  padding: 0.5rem 1rem 0.5rem;
+  border-radius: 0.25rem 0.25rem 0 0;
+  cursor: pointer;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: center;
+}
+.bin__tabstrip .bin__tab:hover {
+  text-decoration: underline;
+}
+.bin__editor_tab {
+  background: var(--code-bg);
+  color: var(--code-comment);
+}
+.bin__tab input {
+  width: 0;
+  height: 0;
+  position: absolute;
+  visibility: hidden;
+}
+.bin__tab--active,
+.bin__tab:has(input:checked) {
+  border-bottom-color: transparent;
+}
+.bin__editor_tab:has(input:checked) {
+  color: var(--code-text);
+}
+.bin__editor_tab:hover {
+  background: var(--code-highlight);
+}
+.bin__preview_tab,
+.bin__mini_preview_tab {
+  background: #fff;
+}
+.bin__tabstrip .bin__preview_tab:hover {
+  background: var(--code-text);
+}
+.bin__mini_preview_tab {
+  display: none;
+}
+.bin__controls {
+  grid-area: controls;
+  padding: 1rem;
+}
+.bin__controls:empty {
+  display: none;
+}
+.bin--mini-mode {
+  .bin__widget {
+    grid:
+      "tabs" auto
+      "editor" 1fr
+      "controls" auto
+      "footer" auto / 1fr;
+  }
+  .bin__preview {
+    grid-area: editor;
+    display: none;
+  }
+  .bin__preview.bin__editor--active {
+    display: block;
+  }
+  .bin__mini_preview_tab {
+    display: flex;
+  }
+  .bin__preview__expand,
+  .bin__editor__expand,
+  .bin__resizer,
+  .bin__menu {
+    display: none;
+  }
+}
+.bin .cm-editor {
+  height: 100%;
+  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+}
+.bin .cm-content {
+  caret-color: white !important;
+}
+.bin .cm-wrap {
+  height: 100%;
+}
+.bin .cm-scroller {
+  overflow: auto;
+  line-height: 1.5;
+}
+.bin .cm-gutters {
+  background: var(--code-bg);
+  color: #f8f8f2cc;
+  border: 0 none;
+}
+.bin .cm-activeLineGutter {
+  background: #cceeff44;
+}
+.bin .cm-selectionBackground {
+  background: #cceeff66 !important;
+}
+/**
+ * Dracula Theme originally by Zeno Rocha [@zenorocha]
+ * https://draculatheme.com/
+ *
+ * Ported for PrismJS by Albert Vallverdu [@byverdu]
+ * Adapted here for CodeMirror
+ */
+.tok-comment,
+.tok-prolog,
+.tok-doctype,
+.tok-cdata {
+  color: var(--code-comment);
+}
+.tok-punctuation {
+  color: #dbdbbd;
+}
+.namespace {
+  opacity: 0.7;
+}
+.tok-propertyName,
+.tok-constant,
+.tok-symbol,
+.tok-deleted {
+  color: #ff79c6;
+}
+.tok-bool,
+.tok-number,
+.tok-labelName {
+  color: #bd93f9;
+}
+.tok-selector,
+.tok-attr-name,
+.tok-string,
+.tok-char,
+.tok-builtin,
+.tok-tag,
+.tok-typeName,
+.tok-inserted {
+  color: #50fa7b;
+}
+.tok-operator,
+.tok-entity,
+.tok-url,
+.language-css .tok-string,
+.style .tok-string,
+.tok-variableName {
+  color: #f8f8f2;
+}
+.tok-atrule,
+.tok-attr-value,
+.tok-function,
+.tok-literal,
+.tok-className {
+  color: #f1fa8c;
+}
+.tok-keyword {
+  color: #8be9fd;
+}
+.tok-regex,
+.tok-important {
+  color: #ffb86c;
+}
+/*
+.tok-link
+.tok-heading
+.tok-emphasis
+.tok-strong
+.tok-keyword
+.tok-atom
+.tok-bool
+.tok-url
+.tok-labelName
+.tok-inserted
+.tok-deleted
+.tok-literal
+.tok-string
+.tok-number
+.tok-string2
+.tok-variableName
+.tok-variableName.tok-local
+.tok-variableName.tok-definition
+.tok-variableName2
+.tok-propertyName.tok-definition
+.tok-typeName
+.tok-namespace
+.tok-className
+.tok-macroName
+.tok-propertyName
+.tok-operator
+.tok-comment
+.tok-meta
+.tok-invalid
+.tok-punctuation
+*/