From ff29e975adc689e58e0507dcabebd8cef74db596 Mon Sep 17 00:00:00 2001 From: mikha Date: Thu, 18 Apr 2024 22:45:31 +0200 Subject: [PATCH] fixed source in key blocks not showing up in dynamic code view --- README.md | 1 + public/img/favicon.svg | 45 ++++++-- src/lib/preprocessors/dynamicSource.js | 37 ++++++- src/stories/SVG/Logo.story.svelte | 136 +------------------------ 4 files changed, 78 insertions(+), 141 deletions(-) diff --git a/README.md b/README.md index d223720..7c4b478 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,7 @@ To use the pre processor it needs to be placed in the `preprocess` array after ` - It does not recognize variables declared with the @const directive - It has not been tested with multiple stories in a file - The only multiline thing that indents correctly is text. Everything else is missing indentation +- The whitelisted AST node types should come with processing functions that get used in formatSrc instead of if statements ## Components to add - Tabs diff --git a/public/img/favicon.svg b/public/img/favicon.svg index 5e55145..c5e61b5 100644 --- a/public/img/favicon.svg +++ b/public/img/favicon.svg @@ -1,16 +1,43 @@ - + - - + + + + + + + + \ No newline at end of file diff --git a/src/lib/preprocessors/dynamicSource.js b/src/lib/preprocessors/dynamicSource.js index cf1ad21..167fff3 100644 --- a/src/lib/preprocessors/dynamicSource.js +++ b/src/lib/preprocessors/dynamicSource.js @@ -52,6 +52,33 @@ function splice(str, index, count, add) { return str.slice(0, index) + add + str.slice(index + count); } +/** + * Return the start and end indices of the opening tag of a node. If it doesn't have children, the + * start and end indices of the node itself are returned. + * @param {TemplateNode} node + */ +function openTagLocation(node) { + if (node.children && node.children.length > 0) { + return { start: node.start, end: node.children[0].start - 1}; + } else { + return { start: node.start, end: node.end }; + } +} + +/** + * Return the start and end indices of the closing tag of a node. If it doesn't have children, the + * start and end indices of the node itself are returned. + * @param {TemplateNode} node + */ +function closeTagLocation(node) { + if (node.children && node.children.length > 0) { + // @ts-ignore + return { start: node.children.at(-1).end + 1, end: node.end }; + } else { + return { start: node.start, end: node.end }; + } +} + /** * Format the given svelte code by standardizing the indentation and removing unnecessary elements. * @param {string} src @@ -69,6 +96,7 @@ function formatSrc(src, options) { changes.unshift({ start: child.start, end: child.end, replace: "" }); } else if (child.type === "Text") { + // If there is a next node and that next node is being discarded, remove this text node. if (i < node.children.length - 1 && !options.keepNode(node.children[i + 1])) { changes.unshift({ start: child.start, end: child.end, replace: "" }); continue; @@ -88,6 +116,13 @@ function formatSrc(src, options) { } changes.unshift({ start: child.start, end: child.end, replace: lines.join("\n") }); } + } else if (child.type === "KeyBlock") { + const open_tag = openTagLocation(child); + changes.unshift({ start: open_tag.start, end: open_tag.end, replace: "" }); + processChildren(child, depth); + const close_tag = closeTagLocation(child); + changes.unshift({ start: close_tag.start, end: close_tag.end, replace: "" }); + // changes } else { processChildren(child, depth + 1); } @@ -296,7 +331,7 @@ const /** @type {UserOptions} */ defaultOptions = { export default function preprocessor(options) { options = defu(options, defaultOptions); // merge options with default options - const KeepComponents = new Set(["InlineComponent", "Element", "Text", "SlotTemplate"]); + const KeepComponents = new Set(["InlineComponent", "Element", "Text", "SlotTemplate", "KeyBlock"]); if (!options.removeComments) KeepComponents.add("Comment"); /** @type {InternalOptions} */ diff --git a/src/stories/SVG/Logo.story.svelte b/src/stories/SVG/Logo.story.svelte index c940e99..63bd5e5 100644 --- a/src/stories/SVG/Logo.story.svelte +++ b/src/stories/SVG/Logo.story.svelte @@ -8,136 +8,10 @@ let rotation_speed = 8; let key = true; let color = "#000"; - const default_source = ` - - - - - - - - - -`; - const flat_source = ` - - - -`; - const animated_source = ` - - - - - - - - - - -`; - const infinitely_animated_source = ` - - - - - - - - - - -`; - const animated_with_name_source = ` - - - - - - - - - - - - - Mikha - Davids -`; - + @@ -155,7 +29,7 @@ - + - + {#key key} - + - + {#key key}