Skip to content

Commit

Permalink
fixed source in key blocks not showing up in dynamic code view
Browse files Browse the repository at this point in the history
  • Loading branch information
@MikhaD
MikhaD committed Apr 18, 2024
1 parent afbb7f4 commit ff29e97
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 141 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
45 changes: 36 additions & 9 deletions public/img/favicon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 36 additions & 1 deletion src/lib/preprocessors/dynamicSource.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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;
Expand All @@ -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);
}
Expand Down Expand Up @@ -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} */
Expand Down
136 changes: 5 additions & 131 deletions src/stories/SVG/Logo.story.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,136 +8,10 @@
let rotation_speed = 8;
let key = true;
let color = "#000";
const default_source = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<mask id="cutout" fill="currentcolor">
<rect x="0" y="0" width="100%" height="100%" fill="white" />
<path fill="#000" d="M0 -11l70 51c7 5 7 15 0 20l-70 51z" />
</mask>
<g mask="url(#cutout)">
<path fill-rule="evenodd" d="M53.706 0h-7.41l-2.085 5.537-5.878 1.17-4.044-4.32-6.845 2.835.192 5.914-4.983 3.33-5.39-2.443-5.24 5.24 2.44 5.4-3.33 4.983-5.913-.195L2.4 34.287l4.318 4.046-1.17 5.878-5.538 2.083v7.41l5.537 2.085 1.17 5.878L2.4 65.713l2.835 6.845 5.913-.195 3.33 4.983-2.44 5.4 5.24 5.24 5.39-2.443 4.983 3.33-.192 5.914 6.845 2.835 4.044-4.32 5.878 1.17L46.297 100h7.41l2.083-5.538 5.878-1.17 4.046 4.318 6.845-2.835-.195-5.913 4.983-3.33 5.4 2.44 5.24-5.24-2.443-5.39 3.33-4.983 5.914.192 2.835-6.845-4.32-4.044 1.17-5.878L100 53.703v-7.41l-5.538-2.083-1.17-5.878 4.32-4.044-2.835-6.845-5.914.192-3.33-4.983 2.443-5.39-5.24-5.24-5.4 2.44-4.983-3.33.195-5.913-6.845-2.835-4.046 4.318-5.878-1.17L53.706 0zM50 83.213c18.343 0 33.214-14.87 33.214-33.213S68.344 16.787 50 16.787 16.787 31.657 16.787 50 31.657 83.213 50 83.213z" />
</g>
<path d="M7.5 24v52h7v-39l13 39l13 -39v39h7v-52h-10l-10 32l-10 -32z" />
</svg>`;
const flat_source = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<style>
path {
fill: #000;
}
@media (prefers-color-scheme: dark) {
path {
fill: #fff;
}
}
</style>
<path d="M103.559 209.461l-33.01 24.243-.29 8.924 17.523 7.258 10.352-11.056 15.048 2.994 5.338 14.175h18.967l5.333-14.176 15.048-2.993 10.357 11.054 17.523-7.259-.498-15.138 12.758-8.523 13.798 6.249 13.412-13.412-6.253-13.795 8.524-12.756 15.14.492 7.258-17.523-11.056-10.352 2.994-15.048L256 137.481v-18.967l-14.176-5.333-2.993-15.048 11.056-10.352-7.258-17.523-15.14.492-8.524-12.757 6.253-13.795-13.412-13.412-13.798 6.249-12.758-8.523.498-15.138-17.523-7.258-10.357 11.053-15.048-2.992L137.487.001H118.52l-5.338 14.175-15.048 2.994L87.782 6.114l-17.523 7.258.29 8.924 33.01 24.243c7.741-2.319 15.946-3.566 24.442-3.566 46.959 0 85.026 38.068 85.026 85.026s-38.067 85.026-85.026 85.026c-8.496 0-16.701-1.246-24.442-3.565zM95.2 61.6h26v133h-18v-104l-33 104-33-104v104h-18v-133h26l25 82z" />
</svg>`;
const animated_source = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
path { fill: black }
#cog {
animation: cog 2s ease-out;
transform-origin: center;
transform-box: fill-box;
}
#cutout-path {
transform: translateX(-100%);
animation: cutout 1s 0.6s ease-out;
animation-fill-mode: forwards;
}
#m {
transform: scale(0);
animation: m 0.6s 1s ease-out;
animation-fill-mode: forwards;
transform-origin: center;
transform-box: fill-box;
}
@keyframes cog {
from { transform: rotate(0deg) }
to { transform: rotate(180deg) }
}
@keyframes cutout {
to { transform: translateX(0%) }
}
@keyframes m {
to { transform: scale(1) }
}
</style>
<mask id="cutout">
<rect x="0" y="0" width="100%" height="100%" fill="#fff" />
<path id="cutout-path" d="M0 -11l70 51c7 5 7 15 0 20l-70 51z" />
</mask>
<g mask="url(#cutout)">
<path id="cog" fill-rule="evenodd" d="M53.706 0h-7.41l-2.085 5.537-5.878 1.17-4.044-4.32-6.845 2.835.192 5.914-4.983 3.33-5.39-2.443-5.24 5.24 2.44 5.4-3.33 4.983-5.913-.195L2.4 34.287l4.318 4.046-1.17 5.878-5.538 2.083v7.41l5.537 2.085 1.17 5.878L2.4 65.713l2.835 6.845 5.913-.195 3.33 4.983-2.44 5.4 5.24 5.24 5.39-2.443 4.983 3.33-.192 5.914 6.845 2.835 4.044-4.32 5.878 1.17L46.297 100h7.41l2.083-5.538 5.878-1.17 4.046 4.318 6.845-2.835-.195-5.913 4.983-3.33 5.4 2.44 5.24-5.24-2.443-5.39 3.33-4.983 5.914.192 2.835-6.845-4.32-4.044 1.17-5.878L100 53.703v-7.41l-5.538-2.083-1.17-5.878 4.32-4.044-2.835-6.845-5.914.192-3.33-4.983 2.443-5.39-5.24-5.24-5.4 2.44-4.983-3.33.195-5.913-6.845-2.835-4.046 4.318-5.878-1.17L53.706 0zM50 83.213c18.343 0 33.214-14.87 33.214-33.213S68.344 16.787 50 16.787 16.787 31.657 16.787 50 31.657 83.213 50 83.213z" />
</g>
<path id="m" d="M7.5 24v52h7v-39l13 39l13 -39v39h7v-52h-10l-10 32l-10 -32z" />
</svg>`;
const infinitely_animated_source = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
path { fill: black }
#cog {
animation: cog 2s linear infinite;
transform-origin: center;
transform-box: fill-box;
}
@keyframes cog {
from { transform: rotate(0deg) }
to { transform: rotate(90deg) }
}
</style>
<mask id="cutout">
<rect x="0" y="0" width="100%" height="100%" fill="#fff" />
<path fill="#000" id="cutout-path" d="M0 -11l70 51c7 5 7 15 0 20l-70 51z" />
</mask>
<g mask="url(#cutout)">
<path id="cog" fill-rule="evenodd"
d="M53.706 0h-7.41l-2.085 5.537-5.878 1.17-4.044-4.32-6.845 2.835.192 5.914-4.983 3.33-5.39-2.443-5.24 5.24 2.44 5.4-3.33 4.983-5.913-.195L2.4 34.287l4.318 4.046-1.17 5.878-5.538 2.083v7.41l5.537 2.085 1.17 5.878L2.4 65.713l2.835 6.845 5.913-.195 3.33 4.983-2.44 5.4 5.24 5.24 5.39-2.443 4.983 3.33-.192 5.914 6.845 2.835 4.044-4.32 5.878 1.17L46.297 100h7.41l2.083-5.538 5.878-1.17 4.046 4.318 6.845-2.835-.195-5.913 4.983-3.33 5.4 2.44 5.24-5.24-2.443-5.39 3.33-4.983 5.914.192 2.835-6.845-4.32-4.044 1.17-5.878L100 53.703v-7.41l-5.538-2.083-1.17-5.878 4.32-4.044-2.835-6.845-5.914.192-3.33-4.983 2.443-5.39-5.24-5.24-5.4 2.44-4.983-3.33.195-5.913-6.845-2.835-4.046 4.318-5.878-1.17L53.706 0zM50 83.213c18.343 0 33.214-14.87 33.214-33.213S68.344 16.787 50 16.787 16.787 31.657 16.787 50 31.657 83.213 50 83.213z" />
</g>
<path id="m" d="M7.5 24v52h7v-39l13 39l13 -39v39h7v-52h-10l-10 32l-10 -32z" />
</svg>`;
const animated_with_name_source = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 150" fill="currentcolor">
<style>
#cog { animation: cog 2s ease-out; transform-origin: center; transform-box: fill-box; }
#cutout-path { transform: translateX(-100%); animation: cutout 1s 0.6s ease-out; animation-fill-mode: forwards; }
#m { transform: scale(0); animation: m 0.6s 1s ease-out; animation-fill-mode: forwards; transform-origin: center; transform-box: fill-box; }
.text { text-anchor: middle; font-family: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif; font-weight: 600; transform: translateY(10%); opacity: 0; }
.name { font-size: 1em; animation: name 0.6s 0.8s ease-out; animation-fill-mode: forwards; }
.surname { font-size: 1.5em; animation: name 0.6s 1.4s ease-out; animation-fill-mode: forwards; }
@keyframes cog { from { transform: rotate(0deg); } to { transform: rotate(180deg); } }
@keyframes cutout { to { transform: translateX(0%); } }
@keyframes m { to { transform: scale(1); } }
@keyframes name { to { transform: translateY(0%); opacity: 1; } }
</style>
<mask id="cutout">
<!-- Everything under a white pixel will be visible -->
<rect x="0" y="0" width="100%" height="100%" fill="white" />
<!-- Everything under a black pixel will be invisible -->
<path fill="black" id="cutout-path" d="M0 -11l70 51c7 5 7 15 0 20l-70 51z"/>
</mask>
<g mask="url(#cutout)" >
<path id="cog" fill-rule="evenodd" d="M53.706 0h-7.41l-2.085 5.537-5.878 1.17-4.044-4.32-6.845 2.835.192 5.914-4.983 3.33-5.39-2.443-5.24 5.24 2.44 5.4-3.33 4.983-5.913-.195L2.4 34.287l4.318 4.046-1.17 5.878-5.538 2.083v7.41l5.537 2.085 1.17 5.878L2.4 65.713l2.835 6.845 5.913-.195 3.33 4.983-2.44 5.4 5.24 5.24 5.39-2.443 4.983 3.33-.192 5.914 6.845 2.835 4.044-4.32 5.878 1.17L46.297 100h7.41l2.083-5.538 5.878-1.17 4.046 4.318 6.845-2.835-.195-5.913 4.983-3.33 5.4 2.44 5.24-5.24-2.443-5.39 3.33-4.983 5.914.192 2.835-6.845-4.32-4.044 1.17-5.878L100 53.703v-7.41l-5.538-2.083-1.17-5.878 4.32-4.044-2.835-6.845-5.914.192-3.33-4.983 2.443-5.39-5.24-5.24-5.4 2.44-4.983-3.33.195-5.913-6.845-2.835-4.046 4.318-5.878-1.17L53.706 0zM50 83.213c18.343 0 33.214-14.87 33.214-33.213S68.344 16.787 50 16.787 16.787 31.657 16.787 50 31.657 83.213 50 83.213z"/>
</g>
<path id="m" d="M7.5 24v52h7v-39l13 39l13 -39v39h7v-52h-10l-10 32l-10 -32z"/>
<text textLength="46" x="50" y="120" class="name text">Mikha</text>
<text textLength="74" x="50" y="145" class="surname text">Davids</text>
</svg>`;
</script>

<Hst.Story title="Logo" icon="mdi:cog">
<Hst.Variant title="Default" icon="mdi:cog" source={default_source}>
<Hst.Variant title="Default" icon="mdi:cog">
<svg viewBox="0 0 100 100" fill={color}>
<mask id="cutout">
<rect x="0" y="0" width="100%" height="100%" fill="white" />
Expand All @@ -155,7 +29,7 @@
<ColorInput title="Color" bind:value={color} />
</svelte:fragment>
</Hst.Variant>
<Hst.Variant title="Flat" icon="mdi:cog" source={flat_source}>
<Hst.Variant title="Flat" icon="mdi:cog">
<svg viewBox="0 0 256 256" fill={color}>
<path
d="M103.559 209.461l-33.01 24.243-.29 8.924 17.523 7.258 10.352-11.056 15.048 2.994 5.338 14.175h18.967l5.333-14.176 15.048-2.993 10.357 11.054 17.523-7.259-.498-15.138 12.758-8.523 13.798 6.249 13.412-13.412-6.253-13.795 8.524-12.756 15.14.492 7.258-17.523-11.056-10.352 2.994-15.048L256 137.481v-18.967l-14.176-5.333-2.993-15.048 11.056-10.352-7.258-17.523-15.14.492-8.524-12.757 6.253-13.795-13.412-13.412-13.798 6.249-12.758-8.523.498-15.138-17.523-7.258-10.357 11.053-15.048-2.992L137.487.001H118.52l-5.338 14.175-15.048 2.994L87.782 6.114l-17.523 7.258.29 8.924 33.01 24.243c7.741-2.319 15.946-3.566 24.442-3.566 46.959 0 85.026 38.068 85.026 85.026s-38.067 85.026-85.026 85.026c-8.496 0-16.701-1.246-24.442-3.565zM95.2 61.6h26v133h-18v-104l-33 104-33-104v104h-18v-133h26l25 82z"
Expand All @@ -165,7 +39,7 @@
<ColorInput title="Color" bind:value={color} />
</svelte:fragment>
</Hst.Variant>
<Hst.Variant title="Animated" icon="mdi:cog" source={animated_source}>
<Hst.Variant title="Animated" icon="mdi:cog">
{#key key}
<svg viewBox="0 0 100 100">
<style>
Expand Down Expand Up @@ -235,7 +109,7 @@
<ColorInput title="Color" bind:value={color} />
</svelte:fragment>
</Hst.Variant>
<Hst.Variant title="Infinitely Animated" icon="mdi:cog" source={infinitely_animated_source}>
<Hst.Variant title="Infinitely Animated" icon="mdi:cog">
<svg viewBox="0 0 100 100" style:--speed="{rotation_speed}s" fill={color}>
<style>
#cog {
Expand Down Expand Up @@ -272,7 +146,7 @@
<ColorInput title="Color" bind:value={color} />
</svelte:fragment>
</Hst.Variant>
<Hst.Variant title="Animated With Name" icon="mdi:cog" source={animated_with_name_source}>
<Hst.Variant title="Animated With Name" icon="mdi:cog">
{#key key}
<svg width="65%" viewBox="0 0 100 150" fill={color}>
<style>
Expand Down

0 comments on commit ff29e97

Please sign in to comment.