snice 4.17.0 → 4.18.0

package/dist/cdn/code-block/snice-code-block.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.16.0
+ * snice v4.17.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.
@@ -239,10 +239,265 @@ var SniceCodeBlock = (function (exports, snice) {
       return tokensToHtml(tokens);
   }
 
+  /**
+   * Declarative grammar-based code formatter for snice-code-block.
+   *
+   * Rules are defined in grammar JSON files under "formatters" section.
+   * The engine scans code char by char, tracks string/comment context,
+   * and applies newline/space/indent rules based on regex char classes.
+   */
+  /**
+   * Format code using declarative rules.
+   */
+  function formatCode(code, rules) {
+      const tabSize = rules.tabSize ?? 2;
+      const useTabs = rules.useTabs ?? false;
+      const indentUnit = useTabs ? '\t' : ' '.repeat(tabSize);
+      const trimTrailing = rules.trimTrailing ?? true;
+      const skipStrings = rules.skipStrings ?? true;
+      const skipComments = rules.skipComments ?? true;
+      const newlineAfter = rules.newlineAfter ? new RegExp(rules.newlineAfter) : null;
+      const newlineBefore = rules.newlineBefore ? new RegExp(rules.newlineBefore) : null;
+      const spaceAfter = rules.spaceAfter ? new RegExp(rules.spaceAfter) : null;
+      const spaceBefore = rules.spaceBefore ? new RegExp(rules.spaceBefore) : null;
+      const spaceAround = rules.spaceAround ? new RegExp(rules.spaceAround) : null;
+      const indentRe = rules.indent ? new RegExp(rules.indent) : null;
+      const dedentRe = rules.dedent ? new RegExp(rules.dedent) : null;
+      // Strip existing formatting: collapse whitespace outside strings/comments
+      const stripped = stripWhitespace(code, skipStrings, skipComments);
+      // Build formatted output
+      let result = '';
+      let depth = 0;
+      let lineStart = true;
+      let inString = null;
+      let inComment = false; // block comment
+      let inLineComment = false;
+      for (let i = 0; i < stripped.length; i++) {
+          const ch = stripped[i];
+          const prev = i > 0 ? stripped[i - 1] : '';
+          const next = i + 1 < stripped.length ? stripped[i + 1] : '';
+          // Track string context
+          if (!inComment && !inLineComment && skipStrings) {
+              if (inString) {
+                  result += ch;
+                  if (ch === inString && prev !== '\\') {
+                      inString = null;
+                  }
+                  continue;
+              }
+              if (ch === '"' || ch === "'" || ch === '`') {
+                  inString = ch;
+                  if (lineStart) {
+                      result += indentUnit.repeat(depth);
+                      lineStart = false;
+                  }
+                  result += ch;
+                  continue;
+              }
+          }
+          // Track comment context
+          if (skipComments) {
+              if (inLineComment) {
+                  result += ch;
+                  if (ch === '\n') {
+                      inLineComment = false;
+                      lineStart = true;
+                  }
+                  continue;
+              }
+              if (inComment) {
+                  result += ch;
+                  if (ch === '/' && prev === '*') {
+                      inComment = false;
+                  }
+                  continue;
+              }
+              if (ch === '/' && next === '/') {
+                  if (lineStart) {
+                      result += indentUnit.repeat(depth);
+                      lineStart = false;
+                  }
+                  inLineComment = true;
+                  result += ch;
+                  continue;
+              }
+              if (ch === '/' && next === '*') {
+                  if (lineStart) {
+                      result += indentUnit.repeat(depth);
+                      lineStart = false;
+                  }
+                  inComment = true;
+                  result += ch;
+                  continue;
+              }
+          }
+          // Dedent before the char
+          if (dedentRe && dedentRe.test(ch)) {
+              depth = Math.max(0, depth - 1);
+          }
+          // Newline before
+          if (newlineBefore && newlineBefore.test(ch)) {
+              if (!lineStart) {
+                  result = trimTrailingSpaces(result);
+                  result += '\n';
+                  lineStart = true;
+              }
+          }
+          // Space before (including spaceAround)
+          if ((spaceBefore && spaceBefore.test(ch)) || (spaceAround && spaceAround.test(ch))) {
+              if (!lineStart && result.length > 0 && result[result.length - 1] !== ' ' && result[result.length - 1] !== '\n') {
+                  result += ' ';
+              }
+          }
+          // Write indent if at line start
+          if (lineStart && ch !== '\n') {
+              result += indentUnit.repeat(depth);
+              lineStart = false;
+          }
+          result += ch;
+          // Indent after the char
+          if (indentRe && indentRe.test(ch)) {
+              depth++;
+          }
+          // Space after (including spaceAround)
+          if ((spaceAfter && spaceAfter.test(ch)) || (spaceAround && spaceAround.test(ch))) {
+              if (next && next !== '\n' && next !== ' ') {
+                  result += ' ';
+              }
+          }
+          // Newline after
+          if (newlineAfter && newlineAfter.test(ch)) {
+              result = trimTrailingSpaces(result);
+              result += '\n';
+              lineStart = true;
+          }
+      }
+      // Post-processing
+      let lines = result.split('\n');
+      if (trimTrailing) {
+          lines = lines.map(l => l.replace(/\s+$/, ''));
+      }
+      if (rules.collapseBlankLines !== undefined) {
+          lines = collapseBlankLinesArr(lines, rules.collapseBlankLines);
+      }
+      // Trim leading/trailing blank lines
+      while (lines.length > 0 && lines[0].trim() === '')
+          lines.shift();
+      while (lines.length > 0 && lines[lines.length - 1].trim() === '')
+          lines.pop();
+      return lines.join('\n');
+  }
+  /**
+   * Strip existing whitespace: replace runs of whitespace (outside strings/comments)
+   * with a single space, and remove all newlines.
+   */
+  function stripWhitespace(code, skipStrings, skipComments) {
+      let result = '';
+      let inString = null;
+      let inComment = false;
+      let inLineComment = false;
+      for (let i = 0; i < code.length; i++) {
+          const ch = code[i];
+          const prev = i > 0 ? code[i - 1] : '';
+          const next = i + 1 < code.length ? code[i + 1] : '';
+          // Track strings
+          if (!inComment && !inLineComment && skipStrings) {
+              if (inString) {
+                  result += ch;
+                  if (ch === inString && prev !== '\\') {
+                      inString = null;
+                  }
+                  continue;
+              }
+              if (ch === '"' || ch === "'" || ch === '`') {
+                  inString = ch;
+                  result += ch;
+                  continue;
+              }
+          }
+          // Track comments
+          if (skipComments) {
+              if (inLineComment) {
+                  if (ch === '\n') {
+                      inLineComment = false;
+                      // Emit the newline so line comments stay separate
+                      result += ch;
+                  }
+                  else {
+                      result += ch;
+                  }
+                  continue;
+              }
+              if (inComment) {
+                  result += ch;
+                  if (ch === '/' && prev === '*') {
+                      inComment = false;
+                  }
+                  continue;
+              }
+              if (ch === '/' && next === '/') {
+                  inLineComment = true;
+                  result += ch;
+                  continue;
+              }
+              if (ch === '/' && next === '*') {
+                  inComment = true;
+                  result += ch;
+                  continue;
+              }
+          }
+          // Collapse whitespace
+          if (/\s/.test(ch)) {
+              if (result.length > 0 && !/\s/.test(result[result.length - 1])) {
+                  result += ' ';
+              }
+          }
+          else {
+              result += ch;
+          }
+      }
+      return result;
+  }
+  function trimTrailingSpaces(s) {
+      let end = s.length;
+      while (end > 0 && s[end - 1] === ' ')
+          end--;
+      return s.slice(0, end);
+  }
+  function collapseBlankLinesArr(lines, max) {
+      const result = [];
+      let blankCount = 0;
+      for (const line of lines) {
+          if (line.trim() === '') {
+              blankCount++;
+              if (blankCount <= max) {
+                  result.push(line);
+              }
+          }
+          else {
+              blankCount = 0;
+              result.push(line);
+          }
+      }
+      return result;
+  }
+
   var cssContent = ":host{display:block}.code-block{position:relative;background:hsl(var(--snice-color-gray-900));border-radius:var(--snice-border-radius-md,.375rem);overflow:hidden}.code-block__header{display:flex;justify-content:space-between;align-items:center;padding:var(--snice-spacing-sm,.75rem) var(--snice-spacing-md,1rem);background:hsl(var(--snice-color-gray-800));border-bottom:1px solid hsl(var(--snice-color-gray-700))}.code-block__filename{font-size:var(--snice-font-size-sm, .875rem);color:hsl(var(--snice-color-gray-300));font-family:var(--snice-font-family-mono, monospace)}.code-block__copy{background:0 0;border:1px solid hsl(var(--snice-color-gray-600));color:hsl(var(--snice-color-gray-300));padding:.25rem .5rem;border-radius:var(--snice-border-radius-sm,.25rem);cursor:pointer;font-size:var(--snice-font-size-xs, .75rem);transition:.2s}.code-block__copy:hover{background:hsl(var(--snice-color-gray-700));border-color:hsl(var(--snice-color-gray-500))}.code-block__copy--copied{background:var(--snice-color-success);border-color:hsl(var(--snice-color-green-500));color:hsl(0 0% 100%)}.code-block__content{overflow-x:auto}.code-block__pre{margin:0;padding:var(--snice-spacing-md,1rem);background:0 0;overflow-x:auto}.code-block__code{font-family:var(--snice-font-family-mono, 'Courier New', monospace);font-size:var(--snice-font-size-sm, .875rem);line-height:1.5;color:hsl(var(--snice-color-gray-100));display:block}.code-block__line{display:block}.code-block__line--highlight{background:hsl(0 0% 100% / .1);border-left:3px solid var(--snice-color-primary);padding-left:calc(var(--snice-spacing-sm,.75rem) - 3px);margin-left:calc(-1 * var(--snice-spacing-md,1rem));padding-right:var(--snice-spacing-md,1rem)}.code-block__line-number{display:inline-block;width:3rem;text-align:right;margin-right:var(--snice-spacing-md,1rem);color:hsl(var(--snice-color-gray-500));user-select:none}.token.keyword{color:var(--code-keyword-color,#c678dd)}.token.function{color:var(--code-function-color,#61afef)}.token.string{color:var(--code-string-color,#98c379)}.token.number{color:var(--code-number-color,#d19a66)}.token.comment{color:var(--code-comment-color,#6a9955);font-style:italic}.token.operator{color:var(--code-operator-color,#56b6c2)}.token.punctuation{color:var(--code-punctuation-color,#abb2bf)}.token.tag{color:var(--code-tag-color,#e06c75)}.token.attr-name,.token.property{color:var(--code-attr-name-color,#d19a66)}.token.attr-value{color:var(--code-attr-value-color,#98c379)}.token.boolean,.token.constant{color:var(--code-constant-color,#d19a66)}.token.class-name{color:var(--code-class-color,#e5c07b)}.token.builtin{color:var(--code-builtin-color,#e06c75)}.token.regex{color:var(--code-regex-color,#98c379)}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}";
 
   const LOAD_GRAMMAR_REQUEST = 'snice/code-block/load-grammar';
 
+  function dedent(text) {
+      const lines = text.replace(/^\n+/, '').replace(/\n\s*$/, '').split('\n');
+      if (lines.length === 0)
+          return '';
+      const indents = lines.filter(l => l.trim()).map(l => l.match(/^(\s*)/)?.[1].length ?? 0);
+      if (indents.length === 0)
+          return lines.join('\n');
+      const minIndent = Math.min(...indents);
+      if (minIndent === 0)
+          return lines.join('\n');
+      return lines.map(l => l.slice(minIndent)).join('\n');
+  }
   let SniceCodeBlock = (() => {
       let _classDecorators = [snice.element('snice-code-block')];
       let _classDescriptor;
@@ -274,6 +529,9 @@ var SniceCodeBlock = (function (exports, snice) {
       let _fetchMode_decorators;
       let _fetchMode_initializers = [];
       let _fetchMode_extraInitializers = [];
+      let _format_decorators;
+      let _format_initializers = [];
+      let _format_extraInitializers = [];
       let _codeEl_decorators;
       let _codeEl_initializers = [];
       let _codeEl_extraInitializers = [];
@@ -289,6 +547,8 @@ var SniceCodeBlock = (function (exports, snice) {
       let _dispatchCopyEvent_decorators;
       let _dispatchBeforeHighlightEvent_decorators;
       let _dispatchAfterHighlightEvent_decorators;
+      let _dispatchBeforeFormatEvent_decorators;
+      let _dispatchAfterFormatEvent_decorators;
       let _dispatchGrammarRequestEvent_decorators;
       let _dispatchGrammarLoadedEvent_decorators;
       let _requestGrammar_decorators;
@@ -298,6 +558,7 @@ var SniceCodeBlock = (function (exports, snice) {
       let _handleSlotChange_decorators;
       let _onGrammarChange_decorators;
       let _onFetchModeChange_decorators;
+      let _onFormatChange_decorators;
       let _updateHeader_decorators;
       let _onLanguageChange_decorators;
       (class extends _classSuper {
@@ -312,6 +573,7 @@ var SniceCodeBlock = (function (exports, snice) {
               _filename_decorators = [snice.property({})];
               _grammar_decorators = [snice.property({})];
               _fetchMode_decorators = [snice.property({ attribute: 'fetch-mode' })];
+              _format_decorators = [snice.property({})];
               _codeEl_decorators = [snice.query('.code-block__code')];
               _headerEl_decorators = [snice.query('.code-block__header')];
               _filenameEl_decorators = [snice.query('.code-block__filename')];
@@ -319,6 +581,8 @@ var SniceCodeBlock = (function (exports, snice) {
               _dispatchCopyEvent_decorators = [snice.dispatch('code-copy', { bubbles: true, composed: true })];
               _dispatchBeforeHighlightEvent_decorators = [snice.dispatch('code-before-highlight', { bubbles: true, composed: true })];
               _dispatchAfterHighlightEvent_decorators = [snice.dispatch('code-after-highlight', { bubbles: true, composed: true })];
+              _dispatchBeforeFormatEvent_decorators = [snice.dispatch('code-before-format', { bubbles: true, composed: true })];
+              _dispatchAfterFormatEvent_decorators = [snice.dispatch('code-after-format', { bubbles: true, composed: true })];
               _dispatchGrammarRequestEvent_decorators = [snice.dispatch('grammar-request', { bubbles: true, composed: true })];
               _dispatchGrammarLoadedEvent_decorators = [snice.dispatch('grammar-loaded', { bubbles: true, composed: true })];
               _requestGrammar_decorators = [snice.request(LOAD_GRAMMAR_REQUEST)];
@@ -328,11 +592,14 @@ var SniceCodeBlock = (function (exports, snice) {
               _handleSlotChange_decorators = [snice.on('slotchange', { target: 'slot' })];
               _onGrammarChange_decorators = [snice.watch('grammar')];
               _onFetchModeChange_decorators = [snice.watch('fetchMode')];
+              _onFormatChange_decorators = [snice.watch('format')];
               _updateHeader_decorators = [snice.watch('filename', 'copyable')];
               _onLanguageChange_decorators = [snice.watch('language')];
               __esDecorate(this, null, _dispatchCopyEvent_decorators, { kind: "method", name: "dispatchCopyEvent", static: false, private: false, access: { has: obj => "dispatchCopyEvent" in obj, get: obj => obj.dispatchCopyEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _dispatchBeforeHighlightEvent_decorators, { kind: "method", name: "dispatchBeforeHighlightEvent", static: false, private: false, access: { has: obj => "dispatchBeforeHighlightEvent" in obj, get: obj => obj.dispatchBeforeHighlightEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _dispatchAfterHighlightEvent_decorators, { kind: "method", name: "dispatchAfterHighlightEvent", static: false, private: false, access: { has: obj => "dispatchAfterHighlightEvent" in obj, get: obj => obj.dispatchAfterHighlightEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _dispatchBeforeFormatEvent_decorators, { kind: "method", name: "dispatchBeforeFormatEvent", static: false, private: false, access: { has: obj => "dispatchBeforeFormatEvent" in obj, get: obj => obj.dispatchBeforeFormatEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _dispatchAfterFormatEvent_decorators, { kind: "method", name: "dispatchAfterFormatEvent", static: false, private: false, access: { has: obj => "dispatchAfterFormatEvent" in obj, get: obj => obj.dispatchAfterFormatEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _dispatchGrammarRequestEvent_decorators, { kind: "method", name: "dispatchGrammarRequestEvent", static: false, private: false, access: { has: obj => "dispatchGrammarRequestEvent" in obj, get: obj => obj.dispatchGrammarRequestEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _dispatchGrammarLoadedEvent_decorators, { kind: "method", name: "dispatchGrammarLoadedEvent", static: false, private: false, access: { has: obj => "dispatchGrammarLoadedEvent" in obj, get: obj => obj.dispatchGrammarLoadedEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _requestGrammar_decorators, { kind: "method", name: "requestGrammar", static: false, private: false, access: { has: obj => "requestGrammar" in obj, get: obj => obj.requestGrammar }, metadata: _metadata }, null, _instanceExtraInitializers);
@@ -342,6 +609,7 @@ var SniceCodeBlock = (function (exports, snice) {
               __esDecorate(this, null, _handleSlotChange_decorators, { kind: "method", name: "handleSlotChange", static: false, private: false, access: { has: obj => "handleSlotChange" in obj, get: obj => obj.handleSlotChange }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _onGrammarChange_decorators, { kind: "method", name: "onGrammarChange", static: false, private: false, access: { has: obj => "onGrammarChange" in obj, get: obj => obj.onGrammarChange }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _onFetchModeChange_decorators, { kind: "method", name: "onFetchModeChange", static: false, private: false, access: { has: obj => "onFetchModeChange" in obj, get: obj => obj.onFetchModeChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _onFormatChange_decorators, { kind: "method", name: "onFormatChange", static: false, private: false, access: { has: obj => "onFormatChange" in obj, get: obj => obj.onFormatChange }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _updateHeader_decorators, { kind: "method", name: "updateHeader", static: false, private: false, access: { has: obj => "updateHeader" in obj, get: obj => obj.updateHeader }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _onLanguageChange_decorators, { kind: "method", name: "onLanguageChange", static: false, private: false, access: { has: obj => "onLanguageChange" in obj, get: obj => obj.onLanguageChange }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(null, null, _language_decorators, { kind: "field", name: "language", static: false, private: false, access: { has: obj => "language" in obj, get: obj => obj.language, set: (obj, value) => { obj.language = value; } }, metadata: _metadata }, _language_initializers, _language_extraInitializers);
@@ -352,6 +620,7 @@ var SniceCodeBlock = (function (exports, snice) {
               __esDecorate(null, null, _filename_decorators, { kind: "field", name: "filename", static: false, private: false, access: { has: obj => "filename" in obj, get: obj => obj.filename, set: (obj, value) => { obj.filename = value; } }, metadata: _metadata }, _filename_initializers, _filename_extraInitializers);
               __esDecorate(null, null, _grammar_decorators, { kind: "field", name: "grammar", static: false, private: false, access: { has: obj => "grammar" in obj, get: obj => obj.grammar, set: (obj, value) => { obj.grammar = value; } }, metadata: _metadata }, _grammar_initializers, _grammar_extraInitializers);
               __esDecorate(null, null, _fetchMode_decorators, { kind: "field", name: "fetchMode", static: false, private: false, access: { has: obj => "fetchMode" in obj, get: obj => obj.fetchMode, set: (obj, value) => { obj.fetchMode = value; } }, metadata: _metadata }, _fetchMode_initializers, _fetchMode_extraInitializers);
+              __esDecorate(null, null, _format_decorators, { kind: "field", name: "format", static: false, private: false, access: { has: obj => "format" in obj, get: obj => obj.format, set: (obj, value) => { obj.format = value; } }, metadata: _metadata }, _format_initializers, _format_extraInitializers);
               __esDecorate(null, null, _codeEl_decorators, { kind: "field", name: "codeEl", static: false, private: false, access: { has: obj => "codeEl" in obj, get: obj => obj.codeEl, set: (obj, value) => { obj.codeEl = value; } }, metadata: _metadata }, _codeEl_initializers, _codeEl_extraInitializers);
               __esDecorate(null, null, _headerEl_decorators, { kind: "field", name: "headerEl", static: false, private: false, access: { has: obj => "headerEl" in obj, get: obj => obj.headerEl, set: (obj, value) => { obj.headerEl = value; } }, metadata: _metadata }, _headerEl_initializers, _headerEl_extraInitializers);
               __esDecorate(null, null, _filenameEl_decorators, { kind: "field", name: "filenameEl", static: false, private: false, access: { has: obj => "filenameEl" in obj, get: obj => obj.filenameEl, set: (obj, value) => { obj.filenameEl = value; } }, metadata: _metadata }, _filenameEl_initializers, _filenameEl_extraInitializers);
@@ -370,6 +639,12 @@ var SniceCodeBlock = (function (exports, snice) {
           dispatchAfterHighlightEvent() {
               return { code: this.code, language: this.language, codeBlock: this };
           }
+          dispatchBeforeFormatEvent() {
+              return { code: this.code, language: this.language, codeBlock: this };
+          }
+          dispatchAfterFormatEvent() {
+              return { code: this.code, language: this.language, codeBlock: this };
+          }
           dispatchGrammarRequestEvent() {
               return { url: this.grammar, language: this.language, codeBlock: this };
           }
@@ -415,7 +690,10 @@ var SniceCodeBlock = (function (exports, snice) {
               this.readSlottedContent();
           }
           readSlottedContent() {
-              const text = this.textContent?.trim();
+              const raw = this.textContent;
+              if (!raw)
+                  return;
+              const text = dedent(raw);
               if (text) {
                   this.code = text;
                   this.highlight();
@@ -435,6 +713,11 @@ var SniceCodeBlock = (function (exports, snice) {
                   this.highlight();
               }
           }
+          onFormatChange() {
+              if (this.code) {
+                  this.highlight();
+              }
+          }
           updateHeader() {
               if (!this.headerEl)
                   return;
@@ -500,6 +783,9 @@ var SniceCodeBlock = (function (exports, snice) {
           setHighlighter(highlighter) {
               this.highlighter = highlighter;
           }
+          setFormatter(formatter) {
+              this._formatter = formatter;
+          }
           setGrammar(grammar) {
               this.loadedGrammar = grammar;
               this.loadedGrammarUrl = null;
@@ -551,6 +837,30 @@ var SniceCodeBlock = (function (exports, snice) {
               if (!this.code)
                   return;
               const version = ++this.highlightVersion;
+              // Resolve formatter: imperative setFormatter() wins, then grammar-based
+              let formatFn = this._formatter;
+              if (!formatFn && this.format) {
+                  const grammar = await this.resolveGrammar();
+                  if (version !== this.highlightVersion)
+                      return;
+                  if (grammar?.formatters?.[this.format]) {
+                      const rules = grammar.formatters[this.format];
+                      formatFn = (code) => formatCode(code, rules);
+                  }
+              }
+              if (formatFn && this.format) {
+                  this.dispatchBeforeFormatEvent();
+                  try {
+                      const formatted = await formatFn(this.code, this.language);
+                      if (version !== this.highlightVersion)
+                          return;
+                      this.code = formatted;
+                      this.dispatchAfterFormatEvent();
+                  }
+                  catch (error) {
+                      console.error('Code formatting failed:', error);
+                  }
+              }
               this.dispatchBeforeHighlightEvent();
               try {
                   if (this.highlighter) {
@@ -585,7 +895,8 @@ var SniceCodeBlock = (function (exports, snice) {
               this.filename = (__runInitializers(this, _copyable_extraInitializers), __runInitializers(this, _filename_initializers, ''));
               this.grammar = (__runInitializers(this, _filename_extraInitializers), __runInitializers(this, _grammar_initializers, ''));
               this.fetchMode = (__runInitializers(this, _grammar_extraInitializers), __runInitializers(this, _fetchMode_initializers, 'native'));
-              this.highlighter = __runInitializers(this, _fetchMode_extraInitializers);
+              this.format = (__runInitializers(this, _fetchMode_extraInitializers), __runInitializers(this, _format_initializers, ''));
+              this.highlighter = __runInitializers(this, _format_extraInitializers);
               this.copied = false;
               this.highlightedCode = '';
               this.loadedGrammar = null;