@forsakringskassan/docs-live-example 1.3.0 → 1.4.0

package/dist/LiveCode.d.ts

@@ -15,7 +15,7 @@ declare const _default: import("vue").DefineComponent<{
         type: ObjectConstructor;
         required: true;
     };
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     template: {
         type: StringConstructor;
         required: true;

package/dist/LiveExample.vue.d.ts

@@ -34,7 +34,7 @@ declare const _default: import("vue").DefineComponent<{
     compileCode(): void;
     compileVue(): Promise<void>;
     compileHTML(): Promise<void>;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     template: {
         type: StringConstructor;
         required: true;

package/dist/index.js

@@ -21,6 +21,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
@@ -28,7 +32,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 
 // node_modules/highlight.js/lib/core.js
 var require_core = __commonJS({
-  "node_modules/highlight.js/lib/core.js"(exports, module2) {
+  "node_modules/highlight.js/lib/core.js"(exports2, module2) {
     function deepFreeze(obj) {
       if (obj instanceof Map) {
         obj.clear = obj.delete = obj.set = function() {
@@ -50,6 +54,9 @@ var require_core = __commonJS({
       return obj;
     }
     var Response = class {
+      /**
+       * @param {CompiledMode} mode
+       */
       constructor(mode) {
         if (mode.data === void 0)
           mode.data = {};
@@ -73,7 +80,10 @@ var require_core = __commonJS({
           result[key] = obj[key];
         }
       });
-      return result;
+      return (
+        /** @type {T} */
+        result
+      );
     }
     var SPAN_CLOSE = "</span>";
     var emitsWrappingTags = (node) => {
@@ -93,14 +103,28 @@ var require_core = __commonJS({
       return `${prefix}${name}`;
     };
     var HTMLRenderer = class {
+      /**
+       * Creates a new HTMLRenderer
+       *
+       * @param {Tree} parseTree - the parse tree (must support `walk` API)
+       * @param {{classPrefix: string}} options
+       */
       constructor(parseTree, options) {
         this.buffer = "";
         this.classPrefix = options.classPrefix;
         parseTree.walk(this);
       }
+      /**
+       * Adds texts to the output stream
+       *
+       * @param {string} text */
       addText(text) {
         this.buffer += escapeHTML(text);
       }
+      /**
+       * Adds a node open to the output stream (if needed)
+       *
+       * @param {Node} node */
       openNode(node) {
         if (!emitsWrappingTags(node))
           return;
@@ -110,14 +134,26 @@ var require_core = __commonJS({
         );
         this.span(className);
       }
+      /**
+       * Adds a node close to the output stream (if needed)
+       *
+       * @param {Node} node */
       closeNode(node) {
         if (!emitsWrappingTags(node))
           return;
         this.buffer += SPAN_CLOSE;
       }
+      /**
+       * returns the accumulated buffer
+      */
       value() {
         return this.buffer;
       }
+      // helpers
+      /**
+       * Builds a span element
+       *
+       * @param {string} className */
       span(className) {
         this.buffer += `<span class="${className}">`;
       }
@@ -127,7 +163,7 @@ var require_core = __commonJS({
       Object.assign(result, opts);
       return result;
     };
-    var TokenTree = class {
+    var TokenTree = class _TokenTree {
       constructor() {
         this.rootNode = newNode();
         this.stack = [this.rootNode];
@@ -138,9 +174,11 @@ var require_core = __commonJS({
       get root() {
         return this.rootNode;
       }
+      /** @param {Node} node */
       add(node) {
         this.top.children.push(node);
       }
+      /** @param {string} scope */
       openNode(scope) {
         const node = newNode({ scope });
         this.add(node);
@@ -159,9 +197,17 @@ var require_core = __commonJS({
       toJSON() {
         return JSON.stringify(this.rootNode, null, 4);
       }
+      /**
+       * @typedef { import("./html_renderer").Renderer } Renderer
+       * @param {Renderer} builder
+       */
       walk(builder) {
         return this.constructor._walk(builder, this.rootNode);
       }
+      /**
+       * @param {Renderer} builder
+       * @param {Node} node
+       */
       static _walk(builder, node) {
         if (typeof node === "string") {
           builder.addText(node);
@@ -172,6 +218,9 @@ var require_core = __commonJS({
         }
         return builder;
       }
+      /**
+       * @param {Node} node
+       */
       static _collapse(node) {
         if (typeof node === "string")
           return;
@@ -181,28 +230,39 @@ var require_core = __commonJS({
           node.children = [node.children.join("")];
         } else {
           node.children.forEach((child) => {
-            TokenTree._collapse(child);
+            _TokenTree._collapse(child);
           });
         }
       }
     };
     var TokenTreeEmitter = class extends TokenTree {
+      /**
+       * @param {*} options
+       */
       constructor(options) {
         super();
         this.options = options;
       }
+      /**
+       * @param {string} text
+       */
       addText(text) {
         if (text === "") {
           return;
         }
         this.add(text);
       }
+      /** @param {string} scope */
       startScope(scope) {
         this.openNode(scope);
       }
       endScope() {
         this.closeNode();
       }
+      /**
+       * @param {Emitter & {root: DataNode}} emitter
+       * @param {string} name
+       */
       __addSublanguage(emitter, name) {
         const node = emitter.root;
         if (name)
@@ -309,6 +369,7 @@ var require_core = __commonJS({
         begin: beginShebang,
         end: /$/,
         relevance: 0,
+        /** @type {ModeCallback} */
         "on:begin": (m, resp) => {
           if (m.index !== 0)
             resp.ignoreMatch();
@@ -348,12 +409,15 @@ var require_core = __commonJS({
       );
       mode.contains.push({
         scope: "doctag",
+        // hack to avoid the space from being included. the space is necessary to
+        // match here to prevent the plain text rule below from gobbling up doctags
         begin: "[ ]*(?=(TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):)",
         end: /(TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):/,
         excludeBegin: true,
         relevance: 0
       });
       const ENGLISH_WORD = either(
+        // list of common 1 and 2 letter words in English
         "I",
         "a",
         "is",
@@ -365,19 +429,38 @@ var require_core = __commonJS({
         "in",
         "it",
         "on",
+        // note: this is not an exhaustive list of contractions, just popular ones
         /[A-Za-z]+['](d|ve|re|ll|t|s|n)/,
+        // contractions - can't we'd they're let's, etc
         /[A-Za-z]+[-][a-z]+/,
+        // `no-way`, etc.
         /[A-Za-z][a-z]{2,}/
+        // allow capitalized words at beginning of sentences
       );
       mode.contains.push(
         {
+          // TODO: how to include ", (, ) without breaking grammars that use these for
+          // comment delimiters?
+          // begin: /[ ]+([()"]?([A-Za-z'-]{3,}|is|a|I|so|us|[tT][oO]|at|if|in|it|on)[.]?[()":]?([.][ ]|[ ]|\))){3}/
+          // ---
+          // this tries to find sequences of 3 english words in a row (without any
+          // "programming" type syntax) this gives us a strong signal that we've
+          // TRULY found a comment - vs perhaps scanning with the wrong language.
+          // It's possible to find something that LOOKS like the start of the
+          // comment - but then if there is no readable text - good chance it is a
+          // false match and not a comment.
+          //
+          // for a visual example please see:
+          // https://github.com/highlightjs/highlight.js/issues/2827
           begin: concat(
             /[ ]+/,
+            // necessary to prevent us gobbling up doctags like /* @author Bob Mcgill */
             "(",
             ENGLISH_WORD,
             /[.]?[:]?([.][ ]|[ ])/,
             "){3}"
           )
+          // look for 3 words in a row
         }
       );
       return mode;
@@ -425,6 +508,7 @@ var require_core = __commonJS({
       relevance: 0
     };
     var METHOD_GUARD = {
+      // excludes method names from keyword processing
       begin: "\\.\\s*" + UNDERSCORE_IDENT_RE,
       relevance: 0
     };
@@ -432,9 +516,11 @@ var require_core = __commonJS({
       return Object.assign(
         mode,
         {
+          /** @type {ModeCallback} */
           "on:begin": (m, resp) => {
             resp.data._beginMatch = m[1];
           },
+          /** @type {ModeCallback} */
           "on:end": (m, resp) => {
             if (resp.data._beginMatch !== m[1])
               resp.ignoreMatch();
@@ -540,8 +626,11 @@ var require_core = __commonJS({
       "if",
       "then",
       "parent",
+      // common variable name
       "list",
+      // common variable name
       "value"
+      // common variable name
     ];
     var DEFAULT_KEYWORD_SCOPE = "keyword";
     function compileKeywords(rawKeywords, caseInsensitive, scopeName = DEFAULT_KEYWORD_SCOPE) {
@@ -665,6 +754,7 @@ var require_core = __commonJS({
           this.matchAt = 1;
           this.position = 0;
         }
+        // @ts-ignore
         addRule(re, opts) {
           opts.position = this.position++;
           this.matchIndexes[this.matchAt] = opts;
@@ -679,6 +769,7 @@ var require_core = __commonJS({
           this.matcherRe = langRe(_rewriteBackreferences(terminators, { joinWith: "|" }), true);
           this.lastIndex = 0;
         }
+        /** @param {string} s */
         exec(s) {
           this.matcherRe.lastIndex = this.lastIndex;
           const match = this.matcherRe.exec(s);
@@ -699,6 +790,7 @@ var require_core = __commonJS({
           this.lastIndex = 0;
           this.regexIndex = 0;
         }
+        // @ts-ignore
         getMatcher(index) {
           if (this.multiRegexes[index])
             return this.multiRegexes[index];
@@ -714,11 +806,13 @@ var require_core = __commonJS({
         considerAll() {
           this.regexIndex = 0;
         }
+        // @ts-ignore
         addRule(re, opts) {
           this.rules.push([re, opts]);
           if (opts.type === "begin")
             this.count++;
         }
+        /** @param {string} s */
         exec(s) {
           const m = this.getMatcher(this.regexIndex);
           m.lastIndex = this.lastIndex;
@@ -753,11 +847,16 @@ var require_core = __commonJS({
         return mm;
       }
       function compileMode(mode, parent) {
-        const cmode = mode;
+        const cmode = (
+          /** @type CompiledMode */
+          mode
+        );
         if (mode.isCompiled)
           return cmode;
         [
           scopeClassName,
+          // do this early so compiler extensions generally don't have to worry about
+          // the distinction between match/begin
           compileMatch,
           MultiClass,
           beforeMatchExt
@@ -766,7 +865,10 @@ var require_core = __commonJS({
         mode.__beforeBegin = null;
         [
           beginKeywords,
+          // do this later so compiler extensions that come earlier have access to the
+          // raw array if they wanted to perhaps manipulate it, etc.
           compileIllegal,
+          // default to 1 relevance if not specified
           compileRelevance
         ].forEach((ext) => ext(mode, parent));
         mode.isCompiled = true;
@@ -795,14 +897,21 @@ var require_core = __commonJS({
           }
         }
         if (mode.illegal)
-          cmode.illegalRe = langRe(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);
         }));
         mode.contains.forEach(function(c) {
-          compileMode(c, cmode);
+          compileMode(
+            /** @type Mode */
+            c,
+            cmode
+          );
         });
         if (mode.starts) {
           compileMode(mode.starts, parent);
@@ -816,7 +925,10 @@ var require_core = __commonJS({
         throw new Error("ERR: contains `self` is not supported at the top-level of a language.  See documentation.");
       }
       language.classNameAliases = inherit$1(language.classNameAliases || {});
-      return compileMode(language);
+      return compileMode(
+        /** @type Mode */
+        language
+      );
     }
     function dependencyOnParent(mode) {
       if (!mode)
@@ -867,6 +979,8 @@ var require_core = __commonJS({
         classPrefix: "hljs-",
         cssSelector: "pre code",
         languages: null,
+        // beta configuration options, subject to change, welcome to discuss
+        // https://github.com/highlightjs/highlight.js/issues/1086
         __emitter: TokenTreeEmitter
       };
       function shouldNotHighlight(languageName) {
@@ -962,7 +1076,8 @@ var require_core = __commonJS({
               return;
             }
             result2 = _highlight(top.subLanguage, modeBuffer, true, continuations[top.subLanguage]);
-            continuations[top.subLanguage] = result2._top;
+            continuations[top.subLanguage] = /** @type {CompiledMode} */
+            result2._top;
           } else {
             result2 = highlightAuto(modeBuffer, top.subLanguage.length ? top.subLanguage : null);
           }
@@ -1321,6 +1436,7 @@ var require_core = __commonJS({
         updateClassName(element, language, result.language);
         element.result = {
           language: result.language,
+          // TODO: remove with version 11.0
           re: result.relevance,
           relevance: result.relevance
         };
@@ -1451,6 +1567,7 @@ var require_core = __commonJS({
         highlightAuto,
         highlightAll,
         highlightElement,
+        // TODO: Remove with v12 API
         highlightBlock: deprecateHighlightBlock,
         configure,
         initHighlighting,
@@ -1507,7 +1624,6 @@ var import_vue2 = require("vue");
 
 // src/utils/highlight.ts
 var prettier = __toESM(require("prettier"));
-var import_parser_html = __toESM(require("prettier/parser-html"));
 
 // node_modules/highlight.js/es/core.js
 var import_core = __toESM(require_core(), 1);
@@ -1630,6 +1746,7 @@ function xml(hljs) {
         relevance: 10
       },
       XML_ENTITIES,
+      // xml processing instructions
       {
         className: "meta",
         end: /\?>/,
@@ -1648,6 +1765,11 @@ function xml(hljs) {
       },
       {
         className: "tag",
+        /*
+        The lookahead pattern (?=...) ensures that 'begin' only matches
+        '<style' as a single word, followed by a whitespace or an
+        ending bracket.
+        */
         begin: /<style(?=\s|>)/,
         end: />/,
         keywords: { name: "style" },
@@ -1663,6 +1785,7 @@ function xml(hljs) {
       },
       {
         className: "tag",
+        // See the comment in the <style tag about the lookahead pattern
         begin: /<script(?=\s|>)/,
         end: />/,
         keywords: { name: "script" },
@@ -1677,16 +1800,21 @@ function xml(hljs) {
           ]
         }
       },
+      // we need this for now for jSX
       {
         className: "tag",
         begin: /<>|<\/>/
       },
+      // open tag
       {
         className: "tag",
         begin: regex.concat(
           /</,
           regex.lookahead(regex.concat(
             TAG_NAME_RE,
+            // <tag/>
+            // <tag>
+            // <tag ...
             regex.either(/\/>/, />/, /\s/)
           ))
         ),
@@ -1700,6 +1828,7 @@ function xml(hljs) {
           }
         ]
       },
+      // close tag
       {
         className: "tag",
         begin: regex.concat(
@@ -1730,7 +1859,6 @@ function xml(hljs) {
 core_default.registerLanguage("html", xml);
 var prettierConfig = {
   parser: "html",
-  plugins: [import_parser_html.default],
   singleQuote: false,
   arrowParens: "always",
   tabWidth: 4,
@@ -2030,11 +2158,23 @@ var _hoisted_3 = { class: "live-example__controls" };
 var _hoisted_4 = { class: "live-example__code" };
 var _hoisted_5 = { class: "live-example__code-toggle" };
 var _hoisted_6 = ["aria-controls", "aria-expanded"];
-var _hoisted_7 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ (0, import_vue3.createElementVNode)("i", { class: "icon icon--code" }, null, -1));
+var _hoisted_7 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ (0, import_vue3.createElementVNode)(
+  "i",
+  { class: "icon icon--code" },
+  null,
+  -1
+  /* HOISTED */
+));
 var _hoisted_8 = ["id"];
 var _hoisted_9 = { class: "live-example__code-languages" };
 var _hoisted_10 = { class: "fieldset radio-button-group radio-button-group--horizontal" };
-var _hoisted_11 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ (0, import_vue3.createElementVNode)("legend", { class: "label fieldset__label" }, "Kodspr\xE5k", -1));
+var _hoisted_11 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ (0, import_vue3.createElementVNode)(
+  "legend",
+  { class: "label fieldset__label" },
+  "Kodspr\xE5k",
+  -1
+  /* HOISTED */
+));
 var _hoisted_12 = { class: "fieldset__content radio-button-group__content" };
 var _hoisted_13 = {
   key: 0,
@@ -2049,14 +2189,20 @@ var _hoisted_19 = { ref: "template" };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_live_code = (0, import_vue3.resolveComponent)("live-code");
   return (0, import_vue3.openBlock)(), (0, import_vue3.createElementBlock)("div", _hoisted_1, [
-    (0, import_vue3.createElementVNode)("div", _hoisted_2, [
-      (0, import_vue3.createVNode)(_component_live_code, {
-        components: _ctx.components,
-        template: _ctx.template,
-        livedata: _ctx.livedata,
-        livemethods: _ctx.livemethods
-      }, null, 8, ["components", "template", "livedata", "livemethods"])
-    ], 512),
+    (0, import_vue3.createElementVNode)(
+      "div",
+      _hoisted_2,
+      [
+        (0, import_vue3.createVNode)(_component_live_code, {
+          components: _ctx.components,
+          template: _ctx.template,
+          livedata: _ctx.livedata,
+          livemethods: _ctx.livemethods
+        }, null, 8, ["components", "template", "livedata", "livemethods"])
+      ],
+      512
+      /* NEED_PATCH */
+    ),
     (0, import_vue3.createElementVNode)("div", _hoisted_3, [
       (0, import_vue3.renderSlot)(_ctx.$slots, "default", {}, void 0, true)
     ]),
@@ -2070,7 +2216,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onToggleCode && _ctx.onToggleCode(...args))
         }, [
           _hoisted_7,
-          (0, import_vue3.createTextVNode)(" " + (0, import_vue3.toDisplayString)(_ctx.codeToggleText), 1)
+          (0, import_vue3.createTextVNode)(
+            " " + (0, import_vue3.toDisplayString)(_ctx.codeToggleText),
+            1
+            /* TEXT */
+          )
         ], 8, _hoisted_6)
       ]),
       (0, import_vue3.createElementVNode)("div", {
@@ -2117,7 +2267,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             ])
           ])
         ]),
-        (0, import_vue3.createElementVNode)("pre", _hoisted_19, null, 512)
+        (0, import_vue3.createElementVNode)(
+          "pre",
+          _hoisted_19,
+          null,
+          512
+          /* NEED_PATCH */
+        )
       ], 8, _hoisted_8)
     ])
   ]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forsakringskassan/docs-live-example",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Components used for live examples",
   "keywords": [
     "documentation"
@@ -31,8 +31,8 @@
   ],
   "peerDependencies": {
     "html-validate": ">= 7.9.0",
-    "prettier": "2.8.8",
-    "vue": "^3"
+    "prettier": "^2 || ^3",
+    "vue": "^3.4.15"
   },
   "peerDependenciesMeta": {
     "html-validate": {