@forsakringskassan/docs-live-example 1.4.3 → 1.4.5

package/README.md

@@ -52,7 +52,7 @@ Vi rekommenderar att använda `LiveExample` som suffix på alla live-exempel.
 
 Följande boilerplate kan användas:
 
-```vue
+```vue static
 <template>
     <live-example :components :template :livedata>
         <!-- Example configuration -->
@@ -136,6 +136,61 @@ Det går också med fördel att använda `createElement` (se beskrivning längre
          },
 ```
 
+Resultatet:
+
+```vue live-example
+<template>
+    <live-example :template>
+        <div>
+            <label for="config-element"> Element </label>
+            <select id="config-element" v-model="tagName">
+                <option value="div">div</option>
+                <option value="p">p</option>
+                <option value="em">em</option>
+            </select>
+        </div>
+        <div>
+            <label>
+                <input
+                    type="checkbox"
+                    v-model="placeholderText"
+                    :value="true"
+                />
+                Use placeholder text
+            </label>
+        </div>
+    </live-example>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import {
+    LiveExample,
+    createElement,
+} from "@forsakringskassan/docs-live-example";
+
+export default defineComponent({
+    name: "AwesomeComponentLiveExample",
+    components: { LiveExample },
+    data() {
+        return {
+            tagName: "div",
+            placeholderText: false,
+        };
+    },
+    computed: {
+        template(): string {
+            const { tagName, placeholderText } = this;
+            const message = placeholderText
+                ? "Lorem ipsum dolor sit amet"
+                : "Hello World!";
+            return createElement(tagName, message);
+        },
+    },
+});
+</script>
+```
+
 ## `createElement`
 
 A helper function to render the markup for the live example.

package/dist/cjs/index.js

@@ -58,8 +58,7 @@ var require_core = __commonJS({
        * @param {CompiledMode} mode
        */
       constructor(mode) {
-        if (mode.data === void 0)
-          mode.data = {};
+        if (mode.data === void 0) mode.data = {};
         this.data = mode.data;
         this.isMatchIgnored = false;
       }
@@ -126,8 +125,7 @@ var require_core = __commonJS({
        *
        * @param {Node} node */
       openNode(node) {
-        if (!emitsWrappingTags(node))
-          return;
+        if (!emitsWrappingTags(node)) return;
         const className = scopeToCSSClass(
           node.scope,
           { prefix: this.classPrefix }
@@ -139,8 +137,7 @@ var require_core = __commonJS({
        *
        * @param {Node} node */
       closeNode(node) {
-        if (!emitsWrappingTags(node))
-          return;
+        if (!emitsWrappingTags(node)) return;
         this.buffer += SPAN_CLOSE;
       }
       /**
@@ -191,8 +188,7 @@ var require_core = __commonJS({
         return void 0;
       }
       closeAllNodes() {
-        while (this.closeNode())
-          ;
+        while (this.closeNode()) ;
       }
       toJSON() {
         return JSON.stringify(this.rootNode, null, 4);
@@ -222,10 +218,8 @@ var require_core = __commonJS({
        * @param {Node} node
        */
       static _collapse(node) {
-        if (typeof node === "string")
-          return;
-        if (!node.children)
-          return;
+        if (typeof node === "string") return;
+        if (!node.children) return;
         if (node.children.every((el) => typeof el === "string")) {
           node.children = [node.children.join("")];
         } else {
@@ -265,8 +259,7 @@ var require_core = __commonJS({
        */
       __addSublanguage(emitter, name) {
         const node = emitter.root;
-        if (name)
-          node.scope = `language:${name}`;
+        if (name) node.scope = `language:${name}`;
         this.add(node);
       }
       toHTML() {
@@ -279,10 +272,8 @@ var require_core = __commonJS({
       }
     };
     function source(re) {
-      if (!re)
-        return null;
-      if (typeof re === "string")
-        return re;
+      if (!re) return null;
+      if (typeof re === "string") return re;
       return re.source;
     }
     function lookahead(re) {
@@ -371,8 +362,7 @@ var require_core = __commonJS({
         relevance: 0,
         /** @type {ModeCallback} */
         "on:begin": (m, resp) => {
-          if (m.index !== 0)
-            resp.ignoreMatch();
+          if (m.index !== 0) resp.ignoreMatch();
         }
       }, opts);
     };
@@ -522,8 +512,7 @@ var require_core = __commonJS({
           },
           /** @type {ModeCallback} */
           "on:end": (m, resp) => {
-            if (resp.data._beginMatch !== m[1])
-              resp.ignoreMatch();
+            if (resp.data._beginMatch !== m[1]) resp.ignoreMatch();
           }
         }
       );
@@ -568,39 +557,30 @@ var require_core = __commonJS({
       }
     }
     function beginKeywords(mode, parent) {
-      if (!parent)
-        return;
-      if (!mode.beginKeywords)
-        return;
+      if (!parent) return;
+      if (!mode.beginKeywords) return;
       mode.begin = "\\b(" + mode.beginKeywords.split(" ").join("|") + ")(?!\\.)(?=\\b|\\s)";
       mode.__beforeBegin = skipIfHasPrecedingDot;
       mode.keywords = mode.keywords || mode.beginKeywords;
       delete mode.beginKeywords;
-      if (mode.relevance === void 0)
-        mode.relevance = 0;
+      if (mode.relevance === void 0) mode.relevance = 0;
     }
     function compileIllegal(mode, _parent) {
-      if (!Array.isArray(mode.illegal))
-        return;
+      if (!Array.isArray(mode.illegal)) return;
       mode.illegal = either(...mode.illegal);
     }
     function compileMatch(mode, _parent) {
-      if (!mode.match)
-        return;
-      if (mode.begin || mode.end)
-        throw new Error("begin & end are not supported with match");
+      if (!mode.match) return;
+      if (mode.begin || mode.end) throw new Error("begin & end are not supported with match");
       mode.begin = mode.match;
       delete mode.match;
     }
     function compileRelevance(mode, _parent) {
-      if (mode.relevance === void 0)
-        mode.relevance = 1;
+      if (mode.relevance === void 0) mode.relevance = 1;
     }
     var beforeMatchExt = (mode, parent) => {
-      if (!mode.beforeMatch)
-        return;
-      if (mode.starts)
-        throw new Error("beforeMatch cannot be used with starts");
+      if (!mode.beforeMatch) return;
+      if (mode.starts) throw new Error("beforeMatch cannot be used with starts");
       const originalMode = Object.assign({}, mode);
       Object.keys(mode).forEach((key) => {
         delete mode[key];
@@ -675,8 +655,7 @@ var require_core = __commonJS({
       console.log(`WARN: ${message}`, ...args);
     };
     var deprecated = (version2, message) => {
-      if (seenDeprecations[`${version2}/${message}`])
-        return;
+      if (seenDeprecations[`${version2}/${message}`]) return;
       console.log(`Deprecated as of ${version2}. ${message}`);
       seenDeprecations[`${version2}/${message}`] = true;
     };
@@ -696,8 +675,7 @@ var require_core = __commonJS({
       mode[key]._multi = true;
     }
     function beginMultiClass(mode) {
-      if (!Array.isArray(mode.begin))
-        return;
+      if (!Array.isArray(mode.begin)) return;
       if (mode.skip || mode.excludeBegin || mode.returnBegin) {
         error("skip, excludeBegin, returnBegin not compatible with beginScope: {}");
         throw MultiClassError;
@@ -710,8 +688,7 @@ var require_core = __commonJS({
       mode.begin = _rewriteBackreferences(mode.begin, { joinWith: "" });
     }
     function endMultiClass(mode) {
-      if (!Array.isArray(mode.end))
-        return;
+      if (!Array.isArray(mode.end)) return;
       if (mode.skip || mode.excludeEnd || mode.returnEnd) {
         error("skip, excludeEnd, returnEnd not compatible with endScope: {}");
         throw MultiClassError;
@@ -792,8 +769,7 @@ var require_core = __commonJS({
         }
         // @ts-ignore
         getMatcher(index) {
-          if (this.multiRegexes[index])
-            return this.multiRegexes[index];
+          if (this.multiRegexes[index]) return this.multiRegexes[index];
           const matcher = new MultiRegex();
           this.rules.slice(index).forEach(([re, opts]) => matcher.addRule(re, opts));
           matcher.compile();
@@ -809,8 +785,7 @@ var require_core = __commonJS({
         // @ts-ignore
         addRule(re, opts) {
           this.rules.push([re, opts]);
-          if (opts.type === "begin")
-            this.count++;
+          if (opts.type === "begin") this.count++;
         }
         /** @param {string} s */
         exec(s) {
@@ -818,8 +793,7 @@ var require_core = __commonJS({
           m.lastIndex = this.lastIndex;
           let result = m.exec(s);
           if (this.resumingScanAtSamePosition()) {
-            if (result && result.index === this.lastIndex)
-              ;
+            if (result && result.index === this.lastIndex) ;
             else {
               const m2 = this.getMatcher(0);
               m2.lastIndex = this.lastIndex + 1;
@@ -851,8 +825,7 @@ var require_core = __commonJS({
           /** @type CompiledMode */
           mode
         );
-        if (mode.isCompiled)
-          return cmode;
+        if (mode.isCompiled) return cmode;
         [
           scopeClassName,
           // do this early so compiler extensions generally don't have to worry about
@@ -884,25 +857,20 @@ var require_core = __commonJS({
         }
         cmode.keywordPatternRe = langRe(keywordPattern, true);
         if (parent) {
-          if (!mode.begin)
-            mode.begin = /\B|\b/;
+          if (!mode.begin) mode.begin = /\B|\b/;
           cmode.beginRe = langRe(cmode.begin);
-          if (!mode.end && !mode.endsWithParent)
-            mode.end = /\B|\b/;
-          if (mode.end)
-            cmode.endRe = langRe(cmode.end);
+          if (!mode.end && !mode.endsWithParent) mode.end = /\B|\b/;
+          if (mode.end) cmode.endRe = langRe(cmode.end);
           cmode.terminatorEnd = source(cmode.end) || "";
           if (mode.endsWithParent && parent.terminatorEnd) {
             cmode.terminatorEnd += (mode.end ? "|" : "") + parent.terminatorEnd;
           }
         }
-        if (mode.illegal)
-          cmode.illegalRe = langRe(
-            /** @type {RegExp | string} */
-            mode.illegal
-          );
-        if (!mode.contains)
-          mode.contains = [];
+        if (mode.illegal) cmode.illegalRe = langRe(
+          /** @type {RegExp | string} */
+          mode.illegal
+        );
+        if (!mode.contains) mode.contains = [];
         mode.contains = [].concat(...mode.contains.map(function(c) {
           return expandOrCloneMode(c === "self" ? mode : c);
         }));
@@ -919,8 +887,7 @@ var require_core = __commonJS({
         cmode.matcher = buildModeRegex(cmode);
         return cmode;
       }
-      if (!language.compilerExtensions)
-        language.compilerExtensions = [];
+      if (!language.compilerExtensions) language.compilerExtensions = [];
       if (language.contains && language.contains.includes("self")) {
         throw new Error("ERR: contains `self` is not supported at the top-level of a language.  See documentation.");
       }
@@ -931,8 +898,7 @@ var require_core = __commonJS({
       );
     }
     function dependencyOnParent(mode) {
-      if (!mode)
-        return false;
+      if (!mode) return false;
       return mode.endsWithParent || dependencyOnParent(mode.starts);
     }
     function expandOrCloneMode(mode) {
@@ -1049,8 +1015,7 @@ var require_core = __commonJS({
               emitter.addText(buf);
               buf = "";
               keywordHits[word] = (keywordHits[word] || 0) + 1;
-              if (keywordHits[word] <= MAX_KEYWORD_HITS)
-                relevance += keywordRelevance;
+              if (keywordHits[word] <= MAX_KEYWORD_HITS) relevance += keywordRelevance;
               if (kind.startsWith("_")) {
                 buf += match[0];
               } else {
@@ -1067,8 +1032,7 @@ var require_core = __commonJS({
           emitter.addText(buf);
         }
         function processSubLanguage() {
-          if (modeBuffer === "")
-            return;
+          if (modeBuffer === "") return;
           let result2 = null;
           if (typeof top.subLanguage === "string") {
             if (!languages[top.subLanguage]) {
@@ -1095,8 +1059,7 @@ var require_core = __commonJS({
           modeBuffer = "";
         }
         function emitKeyword(keyword, scope) {
-          if (keyword === "")
-            return;
+          if (keyword === "") return;
           emitter.startScope(scope);
           emitter.addText(keyword);
           emitter.endScope();
@@ -1143,8 +1106,7 @@ var require_core = __commonJS({
             if (mode["on:end"]) {
               const resp = new Response(mode);
               mode["on:end"](match, resp);
-              if (resp.isMatchIgnored)
-                matched = false;
+              if (resp.isMatchIgnored) matched = false;
             }
             if (matched) {
               while (mode.endsParent && mode.parent) {
@@ -1172,11 +1134,9 @@ var require_core = __commonJS({
           const resp = new Response(newMode);
           const beforeCallbacks = [newMode.__beforeBegin, newMode["on:begin"]];
           for (const cb of beforeCallbacks) {
-            if (!cb)
-              continue;
+            if (!cb) continue;
             cb(match, resp);
-            if (resp.isMatchIgnored)
-              return doIgnore(lexeme);
+            if (resp.isMatchIgnored) return doIgnore(lexeme);
           }
           if (newMode.skip) {
             modeBuffer += lexeme;
@@ -1309,8 +1269,7 @@ var require_core = __commonJS({
               }
               top.matcher.lastIndex = index;
               const match = top.matcher.exec(codeToHighlight);
-              if (!match)
-                break;
+              if (!match) break;
               const beforeMatch = codeToHighlight.substring(index, match.index);
               const processedCount = processLexeme(beforeMatch, match);
               index = match.index + processedCount;
@@ -1379,8 +1338,7 @@ var require_core = __commonJS({
         );
         results.unshift(plaintext);
         const sorted = results.sort((a, b) => {
-          if (a.relevance !== b.relevance)
-            return b.relevance - a.relevance;
+          if (a.relevance !== b.relevance) return b.relevance - a.relevance;
           if (a.language && b.language) {
             if (getLanguage(a.language).supersetOf === b.language) {
               return 1;
@@ -1403,8 +1361,7 @@ var require_core = __commonJS({
       function highlightElement(element) {
         let node = null;
         const language = blockLanguage(element);
-        if (shouldNotHighlight(language))
-          return;
+        if (shouldNotHighlight(language)) return;
         fire(
           "before:highlightElement",
           { el: element, language }
@@ -1469,8 +1426,7 @@ var require_core = __commonJS({
         blocks.forEach(highlightElement);
       }
       function boot() {
-        if (wantsHighlight)
-          highlightAll();
+        if (wantsHighlight) highlightAll();
       }
       if (typeof window !== "undefined" && window.addEventListener) {
         window.addEventListener("DOMContentLoaded", boot, false);
@@ -1488,8 +1444,7 @@ var require_core = __commonJS({
           }
           lang = PLAINTEXT_LANGUAGE;
         }
-        if (!lang.name)
-          lang.name = languageName;
+        if (!lang.name) lang.name = languageName;
         languages[languageName] = lang;
         lang.rawDefinition = languageDefinition.bind(null, hljs);
         if (lang.aliases) {
@@ -1615,7 +1570,8 @@ var require_core = __commonJS({
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  LiveExample: () => LiveExample_default2
+  LiveExample: () => LiveExample_default2,
+  createElement: () => createElement
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -2437,3 +2393,87 @@ function render2(_ctx, _cache, $props, $setup, $data, $options) {
 LiveExample_default.render = render2;
 LiveExample_default.__file = "src/LiveExample.vue";
 var LiveExample_default2 = LiveExample_default;
+
+// src/create-element.ts
+var voidElements = [
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+];
+function unpackArgs(args) {
+  if (args.length === 0) {
+    return { attributes: {}, children: [] };
+  }
+  if (args.length === 1) {
+    const [arg02] = args;
+    if (typeof arg02 === "string") {
+      return { attributes: {}, children: [arg02] };
+    } else if (Array.isArray(arg02)) {
+      return { attributes: {}, children: arg02 };
+    } else {
+      return { attributes: arg02, children: [] };
+    }
+  }
+  const [arg0, arg1] = args;
+  return { attributes: arg0, children: Array.isArray(arg1) ? arg1 : [arg1] };
+}
+function serializeChildren(children) {
+  if (children.length > 0) {
+    return ` ${children.join(" ")} `;
+  } else {
+    return "";
+  }
+}
+function serializeAttribute(key, value, prefix = "") {
+  if (Array.isArray(value)) {
+    const tokens = value.map((it) => it ? String(it) : null).filter(Boolean);
+    if (tokens.length > 0) {
+      return `${prefix}${key}="${tokens.join(" ")}"`;
+    } else {
+      return [];
+    }
+  }
+  if (value === null || value === void 0) {
+    return [];
+  }
+  if (typeof value === "string" || typeof value === "number") {
+    return `${prefix}${key}="${value}"`;
+  }
+  if (typeof value === "boolean") {
+    return value ? `${prefix}${key}` : [];
+  }
+  return Object.entries(value).map(([nestedKey, value2]) => {
+    return serializeAttribute(nestedKey, value2, `${prefix}${key}-`);
+  }).flat().filter(Boolean);
+}
+function serializeAttributes(attrs) {
+  const entries = Object.entries(attrs);
+  const kv = entries.map(([key, value]) => serializeAttribute(key, value));
+  const flat = kv.flat();
+  if (flat.length > 0) {
+    return ` ${kv.flat().join(" ")}`;
+  } else {
+    return "";
+  }
+}
+function createElement(tagName, ...args) {
+  const { attributes, children } = unpackArgs(args);
+  const attrs = serializeAttributes(attributes);
+  if (voidElements.includes(tagName)) {
+    return `<${tagName}${attrs}>`;
+  } else {
+    const content = serializeChildren(children);
+    return `<${tagName}${attrs}>${content}</${tagName}>`;
+  }
+}

package/dist/esm/index.js

@@ -52,8 +52,7 @@ var require_core = __commonJS({
        * @param {CompiledMode} mode
        */
       constructor(mode) {
-        if (mode.data === void 0)
-          mode.data = {};
+        if (mode.data === void 0) mode.data = {};
         this.data = mode.data;
         this.isMatchIgnored = false;
       }
@@ -120,8 +119,7 @@ var require_core = __commonJS({
        *
        * @param {Node} node */
       openNode(node) {
-        if (!emitsWrappingTags(node))
-          return;
+        if (!emitsWrappingTags(node)) return;
         const className = scopeToCSSClass(
           node.scope,
           { prefix: this.classPrefix }
@@ -133,8 +131,7 @@ var require_core = __commonJS({
        *
        * @param {Node} node */
       closeNode(node) {
-        if (!emitsWrappingTags(node))
-          return;
+        if (!emitsWrappingTags(node)) return;
         this.buffer += SPAN_CLOSE;
       }
       /**
@@ -185,8 +182,7 @@ var require_core = __commonJS({
         return void 0;
       }
       closeAllNodes() {
-        while (this.closeNode())
-          ;
+        while (this.closeNode()) ;
       }
       toJSON() {
         return JSON.stringify(this.rootNode, null, 4);
@@ -216,10 +212,8 @@ var require_core = __commonJS({
        * @param {Node} node
        */
       static _collapse(node) {
-        if (typeof node === "string")
-          return;
-        if (!node.children)
-          return;
+        if (typeof node === "string") return;
+        if (!node.children) return;
         if (node.children.every((el) => typeof el === "string")) {
           node.children = [node.children.join("")];
         } else {
@@ -259,8 +253,7 @@ var require_core = __commonJS({
        */
       __addSublanguage(emitter, name) {
         const node = emitter.root;
-        if (name)
-          node.scope = `language:${name}`;
+        if (name) node.scope = `language:${name}`;
         this.add(node);
       }
       toHTML() {
@@ -273,10 +266,8 @@ var require_core = __commonJS({
       }
     };
     function source(re) {
-      if (!re)
-        return null;
-      if (typeof re === "string")
-        return re;
+      if (!re) return null;
+      if (typeof re === "string") return re;
       return re.source;
     }
     function lookahead(re) {
@@ -365,8 +356,7 @@ var require_core = __commonJS({
         relevance: 0,
         /** @type {ModeCallback} */
         "on:begin": (m, resp) => {
-          if (m.index !== 0)
-            resp.ignoreMatch();
+          if (m.index !== 0) resp.ignoreMatch();
         }
       }, opts);
     };
@@ -516,8 +506,7 @@ var require_core = __commonJS({
           },
           /** @type {ModeCallback} */
           "on:end": (m, resp) => {
-            if (resp.data._beginMatch !== m[1])
-              resp.ignoreMatch();
+            if (resp.data._beginMatch !== m[1]) resp.ignoreMatch();
           }
         }
       );
@@ -562,39 +551,30 @@ var require_core = __commonJS({
       }
     }
     function beginKeywords(mode, parent) {
-      if (!parent)
-        return;
-      if (!mode.beginKeywords)
-        return;
+      if (!parent) return;
+      if (!mode.beginKeywords) return;
       mode.begin = "\\b(" + mode.beginKeywords.split(" ").join("|") + ")(?!\\.)(?=\\b|\\s)";
       mode.__beforeBegin = skipIfHasPrecedingDot;
       mode.keywords = mode.keywords || mode.beginKeywords;
       delete mode.beginKeywords;
-      if (mode.relevance === void 0)
-        mode.relevance = 0;
+      if (mode.relevance === void 0) mode.relevance = 0;
     }
     function compileIllegal(mode, _parent) {
-      if (!Array.isArray(mode.illegal))
-        return;
+      if (!Array.isArray(mode.illegal)) return;
       mode.illegal = either(...mode.illegal);
     }
     function compileMatch(mode, _parent) {
-      if (!mode.match)
-        return;
-      if (mode.begin || mode.end)
-        throw new Error("begin & end are not supported with match");
+      if (!mode.match) return;
+      if (mode.begin || mode.end) throw new Error("begin & end are not supported with match");
       mode.begin = mode.match;
       delete mode.match;
     }
     function compileRelevance(mode, _parent) {
-      if (mode.relevance === void 0)
-        mode.relevance = 1;
+      if (mode.relevance === void 0) mode.relevance = 1;
     }
     var beforeMatchExt = (mode, parent) => {
-      if (!mode.beforeMatch)
-        return;
-      if (mode.starts)
-        throw new Error("beforeMatch cannot be used with starts");
+      if (!mode.beforeMatch) return;
+      if (mode.starts) throw new Error("beforeMatch cannot be used with starts");
       const originalMode = Object.assign({}, mode);
       Object.keys(mode).forEach((key) => {
         delete mode[key];
@@ -669,8 +649,7 @@ var require_core = __commonJS({
       console.log(`WARN: ${message}`, ...args);
     };
     var deprecated = (version2, message) => {
-      if (seenDeprecations[`${version2}/${message}`])
-        return;
+      if (seenDeprecations[`${version2}/${message}`]) return;
       console.log(`Deprecated as of ${version2}. ${message}`);
       seenDeprecations[`${version2}/${message}`] = true;
     };
@@ -690,8 +669,7 @@ var require_core = __commonJS({
       mode[key]._multi = true;
     }
     function beginMultiClass(mode) {
-      if (!Array.isArray(mode.begin))
-        return;
+      if (!Array.isArray(mode.begin)) return;
       if (mode.skip || mode.excludeBegin || mode.returnBegin) {
         error("skip, excludeBegin, returnBegin not compatible with beginScope: {}");
         throw MultiClassError;
@@ -704,8 +682,7 @@ var require_core = __commonJS({
       mode.begin = _rewriteBackreferences(mode.begin, { joinWith: "" });
     }
     function endMultiClass(mode) {
-      if (!Array.isArray(mode.end))
-        return;
+      if (!Array.isArray(mode.end)) return;
       if (mode.skip || mode.excludeEnd || mode.returnEnd) {
         error("skip, excludeEnd, returnEnd not compatible with endScope: {}");
         throw MultiClassError;
@@ -786,8 +763,7 @@ var require_core = __commonJS({
         }
         // @ts-ignore
         getMatcher(index) {
-          if (this.multiRegexes[index])
-            return this.multiRegexes[index];
+          if (this.multiRegexes[index]) return this.multiRegexes[index];
           const matcher = new MultiRegex();
           this.rules.slice(index).forEach(([re, opts]) => matcher.addRule(re, opts));
           matcher.compile();
@@ -803,8 +779,7 @@ var require_core = __commonJS({
         // @ts-ignore
         addRule(re, opts) {
           this.rules.push([re, opts]);
-          if (opts.type === "begin")
-            this.count++;
+          if (opts.type === "begin") this.count++;
         }
         /** @param {string} s */
         exec(s) {
@@ -812,8 +787,7 @@ var require_core = __commonJS({
           m.lastIndex = this.lastIndex;
           let result = m.exec(s);
           if (this.resumingScanAtSamePosition()) {
-            if (result && result.index === this.lastIndex)
-              ;
+            if (result && result.index === this.lastIndex) ;
             else {
               const m2 = this.getMatcher(0);
               m2.lastIndex = this.lastIndex + 1;
@@ -845,8 +819,7 @@ var require_core = __commonJS({
           /** @type CompiledMode */
           mode
         );
-        if (mode.isCompiled)
-          return cmode;
+        if (mode.isCompiled) return cmode;
         [
           scopeClassName,
           // do this early so compiler extensions generally don't have to worry about
@@ -878,25 +851,20 @@ var require_core = __commonJS({
         }
         cmode.keywordPatternRe = langRe(keywordPattern, true);
         if (parent) {
-          if (!mode.begin)
-            mode.begin = /\B|\b/;
+          if (!mode.begin) mode.begin = /\B|\b/;
           cmode.beginRe = langRe(cmode.begin);
-          if (!mode.end && !mode.endsWithParent)
-            mode.end = /\B|\b/;
-          if (mode.end)
-            cmode.endRe = langRe(cmode.end);
+          if (!mode.end && !mode.endsWithParent) mode.end = /\B|\b/;
+          if (mode.end) cmode.endRe = langRe(cmode.end);
           cmode.terminatorEnd = source(cmode.end) || "";
           if (mode.endsWithParent && parent.terminatorEnd) {
             cmode.terminatorEnd += (mode.end ? "|" : "") + parent.terminatorEnd;
           }
         }
-        if (mode.illegal)
-          cmode.illegalRe = langRe(
-            /** @type {RegExp | string} */
-            mode.illegal
-          );
-        if (!mode.contains)
-          mode.contains = [];
+        if (mode.illegal) cmode.illegalRe = langRe(
+          /** @type {RegExp | string} */
+          mode.illegal
+        );
+        if (!mode.contains) mode.contains = [];
         mode.contains = [].concat(...mode.contains.map(function(c) {
           return expandOrCloneMode(c === "self" ? mode : c);
         }));
@@ -913,8 +881,7 @@ var require_core = __commonJS({
         cmode.matcher = buildModeRegex(cmode);
         return cmode;
       }
-      if (!language.compilerExtensions)
-        language.compilerExtensions = [];
+      if (!language.compilerExtensions) language.compilerExtensions = [];
       if (language.contains && language.contains.includes("self")) {
         throw new Error("ERR: contains `self` is not supported at the top-level of a language.  See documentation.");
       }
@@ -925,8 +892,7 @@ var require_core = __commonJS({
       );
     }
     function dependencyOnParent(mode) {
-      if (!mode)
-        return false;
+      if (!mode) return false;
       return mode.endsWithParent || dependencyOnParent(mode.starts);
     }
     function expandOrCloneMode(mode) {
@@ -1043,8 +1009,7 @@ var require_core = __commonJS({
               emitter.addText(buf);
               buf = "";
               keywordHits[word] = (keywordHits[word] || 0) + 1;
-              if (keywordHits[word] <= MAX_KEYWORD_HITS)
-                relevance += keywordRelevance;
+              if (keywordHits[word] <= MAX_KEYWORD_HITS) relevance += keywordRelevance;
               if (kind.startsWith("_")) {
                 buf += match[0];
               } else {
@@ -1061,8 +1026,7 @@ var require_core = __commonJS({
           emitter.addText(buf);
         }
         function processSubLanguage() {
-          if (modeBuffer === "")
-            return;
+          if (modeBuffer === "") return;
           let result2 = null;
           if (typeof top.subLanguage === "string") {
             if (!languages[top.subLanguage]) {
@@ -1089,8 +1053,7 @@ var require_core = __commonJS({
           modeBuffer = "";
         }
         function emitKeyword(keyword, scope) {
-          if (keyword === "")
-            return;
+          if (keyword === "") return;
           emitter.startScope(scope);
           emitter.addText(keyword);
           emitter.endScope();
@@ -1137,8 +1100,7 @@ var require_core = __commonJS({
             if (mode["on:end"]) {
               const resp = new Response(mode);
               mode["on:end"](match, resp);
-              if (resp.isMatchIgnored)
-                matched = false;
+              if (resp.isMatchIgnored) matched = false;
             }
             if (matched) {
               while (mode.endsParent && mode.parent) {
@@ -1166,11 +1128,9 @@ var require_core = __commonJS({
           const resp = new Response(newMode);
           const beforeCallbacks = [newMode.__beforeBegin, newMode["on:begin"]];
           for (const cb of beforeCallbacks) {
-            if (!cb)
-              continue;
+            if (!cb) continue;
             cb(match, resp);
-            if (resp.isMatchIgnored)
-              return doIgnore(lexeme);
+            if (resp.isMatchIgnored) return doIgnore(lexeme);
           }
           if (newMode.skip) {
             modeBuffer += lexeme;
@@ -1303,8 +1263,7 @@ var require_core = __commonJS({
               }
               top.matcher.lastIndex = index;
               const match = top.matcher.exec(codeToHighlight);
-              if (!match)
-                break;
+              if (!match) break;
               const beforeMatch = codeToHighlight.substring(index, match.index);
               const processedCount = processLexeme(beforeMatch, match);
               index = match.index + processedCount;
@@ -1373,8 +1332,7 @@ var require_core = __commonJS({
         );
         results.unshift(plaintext);
         const sorted = results.sort((a, b) => {
-          if (a.relevance !== b.relevance)
-            return b.relevance - a.relevance;
+          if (a.relevance !== b.relevance) return b.relevance - a.relevance;
           if (a.language && b.language) {
             if (getLanguage(a.language).supersetOf === b.language) {
               return 1;
@@ -1397,8 +1355,7 @@ var require_core = __commonJS({
       function highlightElement(element) {
         let node = null;
         const language = blockLanguage(element);
-        if (shouldNotHighlight(language))
-          return;
+        if (shouldNotHighlight(language)) return;
         fire(
           "before:highlightElement",
           { el: element, language }
@@ -1463,8 +1420,7 @@ var require_core = __commonJS({
         blocks.forEach(highlightElement);
       }
       function boot() {
-        if (wantsHighlight)
-          highlightAll();
+        if (wantsHighlight) highlightAll();
       }
       if (typeof window !== "undefined" && window.addEventListener) {
         window.addEventListener("DOMContentLoaded", boot, false);
@@ -1482,8 +1438,7 @@ var require_core = __commonJS({
           }
           lang = PLAINTEXT_LANGUAGE;
         }
-        if (!lang.name)
-          lang.name = languageName;
+        if (!lang.name) lang.name = languageName;
         languages[languageName] = lang;
         lang.rawDefinition = languageDefinition.bind(null, hljs);
         if (lang.aliases) {
@@ -2424,6 +2379,91 @@ function render2(_ctx, _cache, $props, $setup, $data, $options) {
 LiveExample_default.render = render2;
 LiveExample_default.__file = "src/LiveExample.vue";
 var LiveExample_default2 = LiveExample_default;
+
+// src/create-element.ts
+var voidElements = [
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+];
+function unpackArgs(args) {
+  if (args.length === 0) {
+    return { attributes: {}, children: [] };
+  }
+  if (args.length === 1) {
+    const [arg02] = args;
+    if (typeof arg02 === "string") {
+      return { attributes: {}, children: [arg02] };
+    } else if (Array.isArray(arg02)) {
+      return { attributes: {}, children: arg02 };
+    } else {
+      return { attributes: arg02, children: [] };
+    }
+  }
+  const [arg0, arg1] = args;
+  return { attributes: arg0, children: Array.isArray(arg1) ? arg1 : [arg1] };
+}
+function serializeChildren(children) {
+  if (children.length > 0) {
+    return ` ${children.join(" ")} `;
+  } else {
+    return "";
+  }
+}
+function serializeAttribute(key, value, prefix = "") {
+  if (Array.isArray(value)) {
+    const tokens = value.map((it) => it ? String(it) : null).filter(Boolean);
+    if (tokens.length > 0) {
+      return `${prefix}${key}="${tokens.join(" ")}"`;
+    } else {
+      return [];
+    }
+  }
+  if (value === null || value === void 0) {
+    return [];
+  }
+  if (typeof value === "string" || typeof value === "number") {
+    return `${prefix}${key}="${value}"`;
+  }
+  if (typeof value === "boolean") {
+    return value ? `${prefix}${key}` : [];
+  }
+  return Object.entries(value).map(([nestedKey, value2]) => {
+    return serializeAttribute(nestedKey, value2, `${prefix}${key}-`);
+  }).flat().filter(Boolean);
+}
+function serializeAttributes(attrs) {
+  const entries = Object.entries(attrs);
+  const kv = entries.map(([key, value]) => serializeAttribute(key, value));
+  const flat = kv.flat();
+  if (flat.length > 0) {
+    return ` ${kv.flat().join(" ")}`;
+  } else {
+    return "";
+  }
+}
+function createElement(tagName, ...args) {
+  const { attributes, children } = unpackArgs(args);
+  const attrs = serializeAttributes(attributes);
+  if (voidElements.includes(tagName)) {
+    return `<${tagName}${attrs}>`;
+  } else {
+    const content = serializeChildren(children);
+    return `<${tagName}${attrs}>${content}</${tagName}>`;
+  }
+}
 export {
-  LiveExample_default2 as LiveExample
+  LiveExample_default2 as LiveExample,
+  createElement
 };

package/dist/index.d.ts

@@ -1 +1,2 @@
 export { default as LiveExample } from "./LiveExample.vue";
+export { createElement } from "./create-element";

package/dist/main.css

@@ -9,14 +9,26 @@
 
 :root {
   --live-example-space: 1.5rem;
+  --live-example-controls-width: 17rem;
+}
+
+.code-preview {
+  container-type: inline-size;
+  container-name: example-container;
 }
 
 .live-example__container {
   border: var(--f-border-width-small) solid #ddddde;
   border-radius: 4px;
   display: grid;
-  grid-template-columns: 1fr auto;
-  grid-template-areas: "example controls" "code code";
+  grid-template-columns: 1fr;
+  grid-template-areas: "example" "controls" "code";
+}
+@container example-container (width >= 43.0379746835rem) {
+  .live-example__container {
+    grid-template-columns: 1fr var(--live-example-controls-width);
+    grid-template-areas: "example controls" "code code";
+  }
 }
 .live-example__example {
   grid-area: example;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forsakringskassan/docs-live-example",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "description": "Components used for live examples",
   "keywords": [
     "documentation"
@@ -8,7 +8,8 @@
   "homepage": "https://github.com/Forsakringskassan/docs-live-example",
   "bugs": "https://github.com/Forsakringskassan/docs-live-example/issues",
   "repository": {
-    "url": "https://github.com/Forsakringskassan/docs-live-example.git"
+    "type": "git",
+    "url": "git+https://github.com/Forsakringskassan/docs-live-example.git"
   },
   "license": "MIT",
   "author": "Försäkringskassan",