questmark-webrenderer 1.0.10 → 1.0.12

package/dist/webRender-basic.js

@@ -1 +1 @@
-let firstTime=!1,log=()=>{console.log(arguments)},clear=()=>{window.logElement.clear()};window.choices=e=>{console.table&&console.table(e);const t=document.createElement("div");return t.setAttribute("style","\n    display: grid;\n    align-content: stretch;\n    justify-content: start;\n    align-items: center;\n    justify-items: start;\n  "),window.logElement.appendChild(t),new Promise(((n,o)=>{e.forEach((e=>{const o=document.createElement("button");o.textContent=e.title,o.classList.add("questmark");const l=new CustomEvent("selectQuestmarkOption",{detail:e});window.dispatchEvent(l),o.onclick=()=>{clear(),console.log(`Picked #${e.id}: "${e.title}" `),n(e.id)},t.appendChild(o)}))}))},window.emit=e=>{if(!1===firstTime){document.body.textContent="",firstTime=!0;const e=document.createElement("style");e.textContent="span.questmark {\n      white-space: pre-line;\n    }",document.head.appendChild(e),window.logElement=document.createElement("div"),document.body.appendChild(window.logElement),log=e=>{console.log(e);const t=document.createElement("span");t.textContent=e,t.classList.add("questmark"),window.logElement.appendChild(t)},clear=()=>{window.logElement.innerHTML=""}}log(e)};
+let firstTime=!1,log=()=>{console.log(arguments)},clear=()=>{window.logElement.clear()};window.choices=e=>{console.table&&console.table(e);const t=document.createElement("div");return t.setAttribute("style","\n    display: grid;\n    align-content: stretch;\n    justify-content: start;\n    align-items: center;\n    justify-items: start;\n  "),window.logElement.appendChild(t),new Promise((n,o)=>{e.forEach(e=>{const o=document.createElement("button");o.textContent=e.title,o.classList.add("questmark");const l=new CustomEvent("selectQuestmarkOption",{detail:e});window.dispatchEvent(l),o.onclick=()=>{clear(),console.log(`Picked #${e.id}: "${e.title}" `),n(e.id)},t.appendChild(o)})})},window.emit=e=>{if(!1===firstTime){document.body.textContent="",firstTime=!0;const e=document.createElement("style");e.textContent="span.questmark {\n      white-space: pre-line;\n    }",document.head.appendChild(e),window.logElement=document.createElement("div"),document.body.appendChild(window.logElement),log=e=>{console.log(e);const t=document.createElement("span");t.textContent=e,t.classList.add("questmark"),window.logElement.appendChild(t)},clear=()=>{window.logElement.innerHTML=""}}log(e)};

package/main.mjs

@@ -1,23 +1,23 @@
-import { QuestVM, parseMarkdown } from "questmark";
-
-const vm = new QuestVM(body => {
-  globalThis.emit(body);
-}, (choices) => {
-  return globalThis.choices(choices);
-}, globalThis.extraForeignFunctions ? globalThis.extraForeignFunctions : {});
-
-const vmState = parseMarkdown(document.body.textContent).qvmState;
-console.log(vmState);
-vm.loadVMState(vmState);
-let run = true;
-if (globalThis.preRun) {
-  let result = globalThis.preRun(vm);
-  if (result === false) {
-    run = false;
-  }
-}
-if (run) {
-  vm.run();
-}
-
-globalThis.vm = vm;
+import { QuestVM, parseMarkdown } from "questmark";
+
+const vm = new QuestVM(body => {
+  globalThis.emit(body);
+}, (choices) => {
+  return globalThis.choices(choices);
+}, globalThis.extraForeignFunctions ? globalThis.extraForeignFunctions : {});
+
+const vmState = parseMarkdown(document.body.textContent).qvmState;
+console.log(vmState);
+vm.loadVMState(vmState);
+let run = true;
+if (globalThis.preRun) {
+  let result = globalThis.preRun(vm);
+  if (result === false) {
+    run = false;
+  }
+}
+if (run) {
+  vm.run();
+}
+
+globalThis.vm = vm;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "questmark-webrenderer",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "A simple inline parser and renderer for Questmark, to create live testable Questmark documents easily",
   "main": "dist/main.js",
   "scripts": {
@@ -11,11 +11,12 @@
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "copy-webpack-plugin": "^9.0.1",
+    "copy-webpack-plugin": "^14.0.0",
+    "terser-webpack-plugin": "^5.6.1",
     "webpack": "^5.54.0",
-    "webpack-cli": "^4.8.0"
+    "webpack-cli": "^7.2.3"
   },
   "dependencies": {
-    "questmark": "^0.0.34"
+    "questmark": "^0.0.37"
   }
 }

package/site/index.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Questmark webrenderer</title>
+  <meta name="description" content="A simple inline parser, interpreter and renderer for Questmark documents, so you can write and play them directly in the browser.">
+  <style>
+    :root {
+      --bg: #f7f6f3;
+      --fg: #1d1c1a;
+      --muted: #6b6a66;
+      --accent: #7c4dff;
+      --card: #ffffff;
+      --border: #e5e3de;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      background: var(--bg);
+      color: var(--fg);
+      line-height: 1.55;
+    }
+    main { max-width: 720px; margin: 0 auto; padding: 4rem 1.5rem; }
+    h1 { font-size: 2.1rem; margin: 0 0 0.35rem; }
+    .subtitle { color: var(--muted); margin: 0 0 2.5rem; }
+    h2 {
+      font-size: 0.85rem;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: var(--muted);
+      margin: 2.5rem 0 1rem;
+    }
+    ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
+    li a {
+      display: block;
+      background: var(--card);
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      padding: 1.1rem 1.3rem;
+      color: inherit;
+      text-decoration: none;
+      transition: border-color 0.15s, box-shadow 0.15s;
+    }
+    li a:hover, li a:focus { border-color: var(--accent); box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
+    .title { font-weight: 600; font-size: 1.1rem; }
+    li a:hover .title, li a:focus .title { color: var(--accent); }
+    .desc { color: var(--muted); margin-top: 0.15rem; font-size: 0.95rem; }
+    p code, li code { background: #ecebe7; padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.9em; }
+    pre {
+      background: #1d1c1a;
+      color: #f7f6f3;
+      padding: 1rem 1.2rem;
+      border-radius: 10px;
+      overflow-x: auto;
+      font-size: 0.85rem;
+    }
+    footer { color: var(--muted); font-size: 0.85rem; margin-top: 3rem; }
+    footer a, main > p a { color: var(--accent); }
+  </style>
+</head>
+<body>
+  <main>
+    <h1>Questmark webrenderer</h1>
+    <p class="subtitle">A simple inline parser, interpreter and renderer for Questmark documents — write Questmark and play it directly in your browser.</p>
+
+    <h2>Live demos</h2>
+    <ul>
+      <li>
+        <a href="./demos/space-alien.md.html">
+          <div class="title">Space Alien</div>
+          <div class="desc">A small conversation tree demonstrating states, options, context and preconditions.</div>
+        </a>
+      </li>
+      <li>
+        <a href="./demos/foreign-function.md.html">
+          <div class="title">Foreign functions</div>
+          <div class="desc">Extending a Questmark document with custom JavaScript functions via <code>extraForeignFunctions</code>.</div>
+        </a>
+      </li>
+      <li>
+        <a href="./demos/prerun.md.html">
+          <div class="title">Pre-run hook</div>
+          <div class="desc">Modifying (or preventing) the VM before it starts, using the <code>preRun</code> global.</div>
+        </a>
+      </li>
+    </ul>
+
+    <h2>Usage</h2>
+    <p>Save your Questmark document as an <code>.html</code> file and add these two scripts at the bottom:</p>
+    <pre>&lt;script src="https://unpkg.com/questmark-webrenderer/dist/webRender-basic.js"&gt;&lt;/script&gt;
+&lt;script src="https://unpkg.com/questmark-webrenderer/dist/main.js" type="module"&gt;&lt;/script&gt;</pre>
+    <p>Then open the file in your browser. See the <a href="https://github.com/jorisvddonk/questmark-webrenderer#readme">README</a> for the full details and customization options.</p>
+
+    <footer>
+      Part of <a href="https://github.com/jorisvddonk/questmark">Questmark</a>.
+      Source: <a href="https://github.com/jorisvddonk/questmark-webrenderer">questmark-webrenderer</a>.
+    </footer>
+  </main>
+</body>
+</html>

package/webRender-basic.js

@@ -1,62 +1,62 @@
-let firstTime = false;
-let log = () => {
-  console.log(arguments);
-};
-let clear = () => {
-  window.logElement.clear();
-};
-window.choices = (choices) => {
-  if (console.table) {
-    console.table(choices);
-  }
-  const buttonsRoot = document.createElement('div');
-  buttonsRoot.setAttribute('style', `
-    display: grid;
-    align-content: stretch;
-    justify-content: start;
-    align-items: center;
-    justify-items: start;
-  `);
-  window.logElement.appendChild(buttonsRoot);
-  return new Promise((resolve, reject) => {
-    choices.forEach(element => {
-      const button = document.createElement('button');
-      button.textContent = element.title;
-      button.classList.add('questmark');
-      const event = new CustomEvent('selectQuestmarkOption', { detail: element });
-      window.dispatchEvent(event);
-      button.onclick = () => {
-        clear();
-        console.log(`Picked #${element.id}: "${element.title}" `);
-        resolve(element.id);
-      }
-      buttonsRoot.appendChild(button);
-    });
-  });
-};
-window.emit = (body) => {
-  if (firstTime === false) {
-    document.body.textContent = '';
-    firstTime = true;
-
-    const style = document.createElement('style');
-    style.textContent = `span.questmark {
-      white-space: pre-line;
-    }`;
-    document.head.appendChild(style);
-
-    window.logElement = document.createElement('div');
-    document.body.appendChild(window.logElement);
-    log = (body) => {
-      console.log(body);
-      const span = document.createElement('span');
-      span.textContent = body;
-      span.classList.add('questmark');
-      window.logElement.appendChild(span);
-    }
-    clear = () => {
-      window.logElement.innerHTML = "";
-    }
-  }
-  log(body);
-};
+let firstTime = false;
+let log = () => {
+  console.log(arguments);
+};
+let clear = () => {
+  window.logElement.clear();
+};
+window.choices = (choices) => {
+  if (console.table) {
+    console.table(choices);
+  }
+  const buttonsRoot = document.createElement('div');
+  buttonsRoot.setAttribute('style', `
+    display: grid;
+    align-content: stretch;
+    justify-content: start;
+    align-items: center;
+    justify-items: start;
+  `);
+  window.logElement.appendChild(buttonsRoot);
+  return new Promise((resolve, reject) => {
+    choices.forEach(element => {
+      const button = document.createElement('button');
+      button.textContent = element.title;
+      button.classList.add('questmark');
+      const event = new CustomEvent('selectQuestmarkOption', { detail: element });
+      window.dispatchEvent(event);
+      button.onclick = () => {
+        clear();
+        console.log(`Picked #${element.id}: "${element.title}" `);
+        resolve(element.id);
+      }
+      buttonsRoot.appendChild(button);
+    });
+  });
+};
+window.emit = (body) => {
+  if (firstTime === false) {
+    document.body.textContent = '';
+    firstTime = true;
+
+    const style = document.createElement('style');
+    style.textContent = `span.questmark {
+      white-space: pre-line;
+    }`;
+    document.head.appendChild(style);
+
+    window.logElement = document.createElement('div');
+    document.body.appendChild(window.logElement);
+    log = (body) => {
+      console.log(body);
+      const span = document.createElement('span');
+      span.textContent = body;
+      span.classList.add('questmark');
+      window.logElement.appendChild(span);
+    }
+    clear = () => {
+      window.logElement.innerHTML = "";
+    }
+  }
+  log(body);
+};

package/webpack.config.js

@@ -1,32 +1,32 @@
-const path = require('path');
-const CopyPlugin = require("copy-webpack-plugin");
-const TerserPlugin = require('terser-webpack-plugin');
-
-module.exports = {
-  entry: './main.mjs',
-  output: {
-    filename: 'main.js',
-    path: path.resolve(__dirname, 'dist'),
-  },
-  resolve: { fallback: { fs: false } },
-  optimization: {
-    minimize: true,
-    mangleExports: false,
-    minimizer: [
-      new TerserPlugin({
-        parallel: true,
-        terserOptions: {
-          keep_classnames: true,
-          keep_fnames: true
-        },
-      }),
-    ],
-  },
-  plugins: [
-    new CopyPlugin({
-      patterns: [
-        { from: "webRender-basic.js", to: "webRender-basic.js" }
-      ],
-    }),
-  ],
+const path = require('path');
+const CopyPlugin = require("copy-webpack-plugin");
+const TerserPlugin = require('terser-webpack-plugin');
+
+module.exports = {
+  entry: './main.mjs',
+  output: {
+    filename: 'main.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  resolve: { fallback: { fs: false } },
+  optimization: {
+    minimize: true,
+    mangleExports: false,
+    minimizer: [
+      new TerserPlugin({
+        parallel: true,
+        terserOptions: {
+          keep_classnames: true,
+          keep_fnames: true
+        },
+      }),
+    ],
+  },
+  plugins: [
+    new CopyPlugin({
+      patterns: [
+        { from: "webRender-basic.js", to: "webRender-basic.js" }
+      ],
+    }),
+  ],
 };