forkless/mermaid-live-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Migrate to Material icons with Iconify, partial

Browse Source
This commit is contained in:
Sidharth Vinod
2025-03-12 21:17:36 -07:00
parent 2fae6f7798
commit fcc7a03650
25 changed files with 368 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+2
View File
@@ -24,6 +24,7 @@
"devDependencies": {
"@cypress/snapshot": "2.1.7",
"@fortawesome/fontawesome-free": "^6.5.1",
"@iconify/json": "^2.2.315",
"@sveltejs/adapter-static": "3.0.8",
"@sveltejs/kit": "2.17.2",
"@sveltejs/vite-plugin-svelte": "^4.0.0",
@@ -74,6 +75,7 @@
"tailwindcss-animate": "^1.0.7",
"tslib": "^2.6.2",
"typescript": "^5.5.0",
"unplugin-icons": "^22.1.0",
"vite": "^5.4.4",
"vitest": "^2.1.4",
"vitest-dom": "^0.1.1"
src/app.postcss
+4 -4
View File
@@ -1,9 +1,9 @@
@import '@fontsource-variable/recursive/crsv.css';
@import '@fortawesome/fontawesome-free/css/all.min.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
@@ -14,8 +14,8 @@
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 338 100% 44%;
--secondary-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
@@ -36,7 +36,7 @@
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 338 100% 44%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
src/lib/components/Actions.svelte
+10 -6
View File
@@ -12,7 +12,11 @@
import { version as FAVersion } from '@fortawesome/fontawesome-free/package.json';
import dayjs from 'dayjs';
import { toBase64 } from 'js-base64';
import Separator from './ui/separator/separator.svelte';
import CopyIcon from '~icons/fa-regular/copy';
import ExternalLinkIcon from '~icons/fa6-solid/link';
import ShareNodesIcon from '~icons/fa6-solid/share';
import DownloadIcon from '~icons/material-symbols/download';
import { Separator } from './ui/separator';
const FONT_AWESOME_URL = `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/${FAVersion}/css/all.min.css`;
@@ -191,17 +195,17 @@ ${svgString}`);
{#snippet dualActionButton(text: string, download: (event: Event) => unknown, url?: string)}
<div class="flex flex-grow gap-0.5">
<Button class="flex-grow rounded-r-none" onclick={download}>
<i class="fas fa-download"></i>{text}
<DownloadIcon class="size-4" />{text}
</Button>
{#if url}
<Button class="rounded-l-none" href={url} target="_blank" rel="noreferrer">
<i class="fas fa-external-link-alt"></i>
<ExternalLinkIcon />
</Button>
{/if}
</div>
{/snippet}
<Card title="Actions" isStackable icon="fas fa-share-nodes">
<Card title="Actions" isOpen isStackable icon={ShareNodesIcon}>
<div class="flex min-w-fit flex-col gap-2 p-2">
<div class="flex w-full items-center gap-2 whitespace-nowrap py-2">
PNG size
@@ -232,7 +236,7 @@ ${svgString}`);
{#if krokiRendererUrl}
<a target="_blank" rel="noreferrer" class="flex-grow" href={krokiUrl}>
<Button class="action-btn w-full">
<i class="fas fa-external-link-alt mr-2"></i> Kroki
<ExternalLinkIcon class="mr-2" /> Kroki
</Button>
</a>
{/if}
@@ -240,7 +244,7 @@ ${svgString}`);
<Separator />
{#if isClipboardAvailable()}
<Button class="action-btn w-full" onclick={onCopyClipboard}>
<i class="far fa-copy mr-2"></i> Copy Image to clipboard
<CopyIcon class="mr-2" /> Copy Image to clipboard
</Button>
{/if}
{#if rendererUrl}
src/lib/components/Card/Card.svelte
+7 -9
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import type { Tab } from '$lib/types';
import type { Snippet } from 'svelte';
import type { Component, Snippet } from 'svelte';
import { quintOut } from 'svelte/easing';
import { slide } from 'svelte/transition';
import Tabs from './Tabs.svelte';
@@ -12,7 +12,7 @@
tabs?: Tab[];
activeTabID?: string;
title?: string;
icon?: string;
icon?: Component;
onselect?: (tab: Tab) => void;
actions?: Snippet;
children?: Snippet;
@@ -43,19 +43,17 @@
<div
class="card flex h-fit {isOpen ? 'isOpen flex-grow' : ''} {isStackable
? 'flex-1 group-has-[.isOpen]:w-full group-has-[.isOpen]:flex-none'
: 'w-full'} flex-col overflow-hidden rounded-2xl border-2">
: 'w-full'} flex-col overflow-hidden rounded-2xl border-2 border-muted">
<div
role="toolbar"
tabindex="0"
class="bg-border p-2 {isTabsShown ? 'pb-1' : ''} flex-none cursor-pointer"
class="bg-muted p-2 {isTabsShown ? 'pb-1' : ''} flex-none cursor-pointer"
onclick={toggleCardOpen}
onkeypress={toggleCardOpen}>
<div class="flex justify-between whitespace-nowrap">
{#if icon || title}
<span role="menubar" tabindex="0" class="flex w-fit items-center gap-2 font-semibold">
{#if icon}
<i class={icon}></i>
{/if}
<svelte:component this={icon} class="size-4" />
{title}
</span>
{/if}
@@ -67,8 +65,8 @@
<!-- {#if isClosable && isOpen}
<div class="ml-auto flex h-8 flex-col gap-0 p-1">
<i class="fas fa-chevron-down size-full"></i>
<i class="fas fa-chevron-up size-full"></i>
<ChevronDownIcon class="size-full" />
<ChevronUpIcon class="size-full" />
</div>
{/if} -->
</div>
src/lib/components/Card/Tabs.svelte
+2 -2
View File
@@ -33,10 +33,10 @@
<Button
role="tab"
variant="ghost"
class={activeTabID === tab.id ? 'rounded-b-none border-b-2 border-b-primary/50' : ''}
class="px-2 {activeTabID === tab.id ? 'rounded-b-none border-b-2 border-b-primary/50' : ''}"
onclick={toggleTabs(tab)}
onkeypress={toggleTabs(tab)}>
<i class={tab.icon}></i>
<tab.icon />
{tab.title}
</Button>
src/lib/components/DropdownNavMenu.svelte
+6 -5
View File
@@ -1,20 +1,21 @@
<script lang="ts">
import * as Popover from '$/components/ui/popover';
import type { Component } from 'svelte';
interface Props {
links: { title: string; href: string }[];
label?: string;
icon?: string;
icon?: Component;
class?: string;
}
let { links, label, icon }: Props = $props();
let { links, label, icon, class: className }: Props = $props();
</script>
<Popover.Root>
<Popover.Trigger class="flex items-center gap-0">
{#if icon}
<i class={icon}></i>
{/if}
<svelte:component this={icon} class={className} />
{#if label}
<span>{label}</span>
{/if}
src/lib/components/Editor.svelte
+2 -1
View File
@@ -19,6 +19,7 @@
import monacoEditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import monacoJsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import { onDestroy, onMount } from 'svelte';
import ExclamationCircleIcon from '~icons/fa/exclamation-circle';
let divElement: HTMLDivElement | undefined = $state();
let editor: monaco.editor.IStandaloneCodeEditor | undefined;
@@ -137,7 +138,7 @@
{#if $stateStore.error instanceof Error}
<div class="flex flex-col text-sm text-neutral-100">
<div class="flex items-center gap-2 bg-red-700 p-2">
<i class="fa fa-exclamation-circle w-4" aria-hidden="true"></i>
<ExclamationCircleIcon class="w-4" aria-hidden="true" />
<p>Diagram syntax error</p>
</div>
<div class="max-h-32 overflow-auto bg-red-600 p-2 font-mono">
src/lib/components/FloatingToolbar.svelte
+1 -1
View File
@@ -8,6 +8,6 @@
let { children }: Props = $props();
</script>
<div class="flex items-center justify-between gap-2 rounded-2xl bg-border p-2">
<div class="flex items-center justify-between gap-2 rounded-2xl bg-muted p-2">
{@render children()}
</div>
src/lib/components/History/History.svelte
+18 -10
View File
@@ -10,6 +10,14 @@
import dayjsRelativeTime from 'dayjs/plugin/relativeTime';
import { onMount } from 'svelte';
import { get } from 'svelte/store';
import GitAltIcon from '~icons/fa-brands/git-alt';
import BookmarkIcon from '~icons/fa-regular/bookmark';
import SaveIcon from '~icons/fa-regular/save';
import DownloadIcon from '~icons/fa/download';
import UploadIcon from '~icons/fa/upload';
import HistoryIcon from '~icons/fa6-solid/history';
import TrashAltIcon from '~icons/fa6-solid/trash-alt';
import UndoIcon from '~icons/fa6-solid/undo';
import {
addHistoryEntry,
clearHistoryData,
@@ -31,12 +39,12 @@
{
id: 'manual',
title: 'Saved',
icon: 'far fa-bookmark'
icon: BookmarkIcon
},
{
id: 'auto',
title: 'Timeline',
icon: 'fas fa-history'
icon: HistoryIcon
}
]);
@@ -112,7 +120,7 @@
{
id: 'loader',
title: 'Revisions',
icon: 'fab fa-git-alt'
icon: GitAltIcon
},
...tabs
];
@@ -129,14 +137,14 @@
class="btn btn-secondary btn-xs w-12"
onclick={stopPropagation(() => uploadHistory())}
title="Upload history"
aria-label="Upload history"><i class="fa fa-upload"></i></button>
aria-label="Upload history"><UploadIcon /></button>
{#if $historyStore.length > 0}
<button
id="downloadHistory"
class="btn btn-secondary btn-xs w-12"
onclick={stopPropagation(() => downloadHistory())}
title="Download history"
aria-label="Download history"><i class="fa fa-download"></i></button>
aria-label="Download history"><DownloadIcon /></button>
{/if}
|
<button
@@ -144,14 +152,14 @@
class="btn btn-success btn-xs w-12"
onclick={stopPropagation(() => saveHistory())}
title="Save current state"
aria-label="Save current state"><i class="far fa-save"></i></button>
aria-label="Save current state"><SaveIcon /></button>
{#if $historyModeStore !== 'loader'}
<button
id="clearHistory"
class="btn btn-error btn-xs w-12"
onclick={stopPropagation(() => clearHistory())}
title="Delete all saved states"
aria-label="Delete all saved states"><i class="fas fa-trash-alt"></i></button>
aria-label="Delete all saved states"><TrashAltIcon /></button>
{/if}
</div>
{/snippet}
@@ -161,7 +169,7 @@
<li class="flex-col rounded p-2 shadow">
<div class="flex">
<div class="flex-1">
<div class="flex flex-col text-base-content">
<div class="text-base-content flex flex-col">
{#if url}
<a
href={url}
@@ -176,10 +184,10 @@
</div>
<div class="flex content-center gap-2">
<button class="btn btn-success" onclick={() => restoreHistoryItem(state)}
><i class="fas fa-undo mr-1"></i>Restore</button>
><UndoIcon class="mr-1" />Restore</button>
{#if type !== 'loader'}
<button class="btn btn-error" onclick={() => clearHistory(id)}
><i class="fas fa-trash-alt mr-1"></i>Delete</button>
><TrashAltIcon class="mr-1" />Delete</button>
{/if}
</div>
</div>
src/lib/components/Navbar.svelte
+13 -10
View File
@@ -16,6 +16,10 @@
import { MCBaseURL } from '$lib/util/util';
import { toggleMode } from 'mode-watcher';
import type { ComponentProps } from 'svelte';
import GithubIcon from '~icons/fa-brands/github';
import CloseIcon from '~icons/fa/close';
import MoonIcon from '~icons/fa6-solid/moon';
import SunIcon from '~icons/fa6-solid/sun';
import DropdownNavMenu from './DropdownNavMenu.svelte';
const { isEnabledMermaidChartLinks } = env;
@@ -79,7 +83,7 @@
dismissPromotion(activePromotion?.id);
activePromotion = undefined;
}}>
<i class="fa fa-close px-2"></i>
<CloseIcon class="px-2" />
</button>
{/snippet}
</div>
@@ -163,23 +167,22 @@
<div class="hidden w-full lg:flex lg:w-auto lg:items-center" id="menu">
<!-- <span class="text-sm">v{version}</span> -->
<div class="h-full items-center justify-between gap-2 pt-4 text-base lg:flex lg:pt-0">
<div
class="h-full items-center justify-between gap-2 overflow-hidden pt-4 text-base lg:flex lg:pt-0">
<!-- <li>
<Privacy />
</li> -->
<!-- <DropdownNavMenu label="Documentation" links={documentationLinks} /> -->
<DropdownNavMenu icon="fab fa-github fa-lg" links={githubLinks} />
<Separator orientation="vertical" class="min-h-[50%]" />
<DropdownNavMenu icon={GithubIcon} class="fa-lg" links={githubLinks} />
<Separator orientation="vertical" />
<Button onclick={toggleMode} variant="outline" size="icon">
<i
class="fas fa-sun rotate-0 scale-100 transition-all duration-200 dark:-rotate-90 dark:scale-0"
></i>
<i
class="fas fa-moon absolute rotate-90 scale-0 transition-all duration-200 dark:rotate-0 dark:scale-100"
></i>
<SunIcon
class="rotate-0 scale-100 transition-all duration-200 dark:-rotate-90 dark:scale-0" />
<MoonIcon
class="absolute rotate-90 scale-0 transition-all duration-200 dark:rotate-0 dark:scale-100" />
<span class="sr-only">Toggle theme</span>
</Button>
<Button variant="secondary" size="sm">Share</Button>
src/lib/components/PanZoomToolbar.svelte
+16 -7
View File
@@ -1,5 +1,9 @@
<script lang="ts">
import type { PanZoomState } from '$/util/panZoom';
import ExpandIcon from '~icons/material-symbols/arrow-range';
import ArrowsToCircleIcon from '~icons/material-symbols/screenshot-frame-2';
import MagnifyingGlassPlusIcon from '~icons/material-symbols/zoom-in';
import MagnifyingGlassMinusIcon from '~icons/material-symbols/zoom-out';
import FloatingToolbar from './FloatingToolbar.svelte';
import { Button } from './ui/button';
import { Separator } from './ui/separator';
@@ -8,13 +12,18 @@
</script>
<FloatingToolbar>
<Button variant="ghost" size="icon" title="Reset view" onclick={() => panZoomState.reset()}
><i class="fas fa-arrows-to-circle"></i></Button>
<Button variant="ghost" size="icon" title="Reset view" onclick={() => panZoomState.reset()}>
<ArrowsToCircleIcon />
</Button>
<Separator orientation="vertical" />
<Button variant="ghost" size="icon" onclick={() => panZoomState.zoomIn()}
><i class="fa-solid fa-magnifying-glass-plus"></i></Button>
<Button variant="ghost" size="icon" onclick={() => panZoomState.zoomOut()}
><i class="fa-solid fa-magnifying-glass-minus"></i></Button>
<Button variant="ghost" size="icon" onclick={() => panZoomState.zoomOut()}>
<MagnifyingGlassMinusIcon />
</Button>
<Button variant="ghost" size="icon" onclick={() => panZoomState.zoomIn()}>
<MagnifyingGlassPlusIcon />
</Button>
<Separator orientation="vertical" />
<Button variant="ghost" size="icon" title="Full Screen"><i class="fas fa-expand"></i></Button>
<Button variant="ghost" size="icon" title="Full Screen">
<ExpandIcon class="-rotate-45" />
</Button>
</FloatingToolbar>
src/lib/components/Preset.svelte
+2 -1
View File
@@ -3,6 +3,7 @@
import Card from '$lib/components/Card/Card.svelte';
import { updateCode } from '$lib/util/state';
import { logEvent } from '$lib/util/stats';
import ShapesIcon from '~icons/fa6-solid/shapes';
const samples = {
Flow: `flowchart TD
@@ -221,7 +222,7 @@ packet-beta
];
</script>
<Card title="Sample Diagrams" isStackable icon="fas fa-shapes">
<Card title="Sample Diagrams" isStackable icon={ShapesIcon}>
<div class="flex h-fit max-h-52 flex-wrap gap-2 overflow-y-auto p-2">
{#each diagramOrder as sample}
<Button
src/lib/components/Privacy.svelte
+6 -2
View File
@@ -1,10 +1,14 @@
<script>
import ShieldHalvedIcon from '~icons/fa6-solid/shield-halved';
</script>
<label for="privacyModal" class="btn btn-ghost flex gap-2">
<i class="fa-solid fa-shield-halved text-xl"></i> Security
<ShieldHalvedIcon /> Security
</label>
<input type="checkbox" id="privacyModal" class="modal-toggle" />
<div class="modal" role="dialog">
<div class="modal-box flex flex-col gap-4 text-base-content">
<div class="modal-box text-base-content flex flex-col gap-4">
<h1 class="text-3xl font-bold">Data security</h1>
<p>
<span class="text-xl font-extrabold">
src/lib/components/SyncRoughToolbar.svelte
+10 -2
View File
@@ -2,13 +2,21 @@
import { inputStateStore, stateStore } from '$/util/state';
import { cmdKey, syncDiagram } from '$/util/util';
import { slide } from 'svelte/transition';
import SyncIcon from '~icons/fa6-solid/arrows-rotate';
import FloatingToolbar from './FloatingToolbar.svelte';
import { Switch } from './ui/switch';
</script>
<FloatingToolbar>
<label class="label flex cursor-pointer items-center gap-2" for="rough">
<Switch bind:checked={$inputStateStore.rough} name="rough" />
<Switch
bind:checked={$inputStateStore.rough}
onclick={() => {
if (!$inputStateStore.autoSync) {
syncDiagram();
}
}}
name="rough" />
<span>Hand drawn</span>
</label>
@@ -24,6 +32,6 @@
title="Sync Diagram ({cmdKey} + Enter)"
aria-label="Sync Diagram"
data-cy="sync"
onclick={syncDiagram}><i class="fas fa-sync"></i></button>
onclick={syncDiagram}><SyncIcon /></button>
{/if}
</FloatingToolbar>
src/lib/components/VersionSecurityToolbar.svelte
+5 -3
View File
@@ -1,18 +1,20 @@
<script lang="ts">
import { version } from 'mermaid/package.json';
import QuestionCircleIcon from '~icons/fa6-solid/circle-question';
import ShieldHalvedIcon from '~icons/fa6-solid/shield-halved';
import FloatingToolbar from './FloatingToolbar.svelte';
import { Button } from './ui/button';
import Separator from './ui/separator/separator.svelte';
import { Separator } from './ui/separator';
</script>
<FloatingToolbar>
<span class="text-sm opacity-50">v{version}</span>
<Button variant="ghost" size="icon" title="Privacy & Security">
<i class="fa-solid fa-shield-halved"></i>
<ShieldHalvedIcon />
</Button>
<Separator orientation="vertical" />
<Button variant="ghost" size="icon" title="Help">
<i class="fas fa-question-circle"></i>
<QuestionCircleIcon />
</Button>
</FloatingToolbar>
src/lib/components/View.svelte
+3 -2
View File
@@ -9,6 +9,7 @@
import type { MermaidConfig } from 'mermaid';
import { onMount } from 'svelte';
import { Svg2Roughjs } from 'svg2roughjs';
import SyncIcon from '~icons/fa6-solid/arrows-rotate';
let { panZoomState = new PanZoomState() }: { panZoomState?: PanZoomState } = $props();
let code = '';
@@ -141,13 +142,13 @@
{#if outOfSync}
<div
class="font-monotext-yellow-600 bg-base-100 absolute z-10 w-full bg-opacity-80 p-2 text-left"
class="bg-base-100 absolute z-10 w-full bg-opacity-80 p-2 text-left font-mono text-yellow-600"
id="errorContainer">
Diagram out of sync. <br />
{#if $stateStore.autoSync}
It will be updated automatically.
{:else}
Press <i class="fas fa-sync"></i> (Sync button) or <kbd>{cmdKey} + Enter</kbd> to sync.
Press <SyncIcon /> (Sync button) or <kbd>{cmdKey} + Enter</kbd> to sync.
{/if}
</div>
{/if}
src/lib/components/ui/separator/separator.svelte
+6 -7
View File
@@ -1,11 +1,11 @@
<script lang="ts">
import { Separator as SeparatorPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
import { cn } from '$lib/utils.js';
import { Separator as SeparatorPrimitive } from 'bits-ui';
let {
ref = $bindable(null),
class: className,
orientation = "horizontal",
orientation = 'horizontal',
...restProps
}: SeparatorPrimitive.RootProps = $props();
</script>
@@ -13,10 +13,9 @@
<SeparatorPrimitive.Root
bind:ref
class={cn(
"bg-border shrink-0",
orientation === "horizontal" ? "h-[1px] w-full" : "min-h-full w-[1px]",
'shrink-0 rounded border',
orientation === 'horizontal' ? 'h-[1px] w-full' : 'min-h-6 w-[0px]',
className
)}
{orientation}
{...restProps}
/>
{...restProps} />
src/lib/components/ui/switch/switch.svelte
+1 -1
View File
@@ -14,7 +14,7 @@
bind:ref
bind:checked
class={cn(
'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-secondary data-[state=unchecked]:bg-input',
'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-accent data-[state=unchecked]:bg-input',
className
)}
{...restProps}>
src/lib/types.d.ts
Vendored
+4 -1
View File
@@ -1,3 +1,6 @@
import type { Component } from 'svelte';
import 'unplugin-icons/types/svelte';
export interface MarkerData {
severity: number;
message: string;
@@ -15,7 +18,7 @@ export interface TabEvents {
export interface Tab {
id: string;
title: string;
icon: string;
icon: Component;
}
export interface State {
src/lib/util/panZoom.ts
+6 -2
View File
@@ -58,8 +58,6 @@ export class PanZoomState {
// TODO: Investigate why this is necessary
if (pan !== undefined && zoom !== undefined && Number.isFinite(zoom)) {
this.restorePanZoom(pan, zoom);
} else if (this.pan && this.zoom) {
this.restorePanZoom(this.pan, this.zoom);
}
// we start out with both pan and zoom enabled so that the tool can auto position view refreshed
@@ -71,6 +69,10 @@ export class PanZoomState {
this.pzoom.disableZoom();
this.pzoom.disablePan();
}
if (pan === undefined && zoom === undefined) {
this.reset();
}
}
public restorePanZoom(pan: Point, zoom: number) {
@@ -96,6 +98,8 @@ export class PanZoomState {
public reset() {
this.pzoom?.reset();
// Zoom out a bit to avoid overlap with the toolbar
this.pzoom?.zoom(0.9);
this.isDirty = false;
}
}
src/routes/edit/+page.svelte
+10 -7
View File
@@ -15,6 +15,9 @@
import { stateStore, updateCodeStore } from '$lib/util/state';
import { initHandler } from '$lib/util/util';
import { onMount } from 'svelte';
import BookIcon from '~icons/material-symbols/book-2-outline-rounded';
import CodeIcon from '~icons/material-symbols/code-blocks-outline';
import GearIcon from '~icons/material-symbols/settings-outline-rounded';
const panZoomState = new PanZoomState();
const docURLBase = 'https://mermaid.js.org';
@@ -108,12 +111,12 @@
{
id: 'code',
title: 'Code',
icon: 'fas fa-code'
icon: CodeIcon
},
{
id: 'config',
title: 'Config',
icon: 'fas fa-gear'
icon: GearIcon
}
];
@@ -135,7 +138,7 @@
variant="ghost"
href={docURL}
title="View documentation for {docKey.replace('Diagram', '')} diagram">
<i class="fas fa-book mr-1"></i>
<BookIcon class="mr-1" />
Docs
</Button>
</div>
@@ -154,9 +157,6 @@
<Resizable.Handle class="mr-2 opacity-0" />
<Resizable.Pane>
<div class="relative flex h-full flex-1 flex-col overflow-hidden">
<div class="absolute right-0 top-0"><PanZoomToolbar {panZoomState} /></div>
<div class="absolute bottom-0 left-0"><SyncRoughToolbar /></div>
<div class="absolute bottom-0 right-0"><VersionSecurityToolbar /></div>
<!-- <Card title="Diagram" isClosable={false}>
{#snippet actions()}
<div class="flex flex-row items-center gap-2">
@@ -188,7 +188,7 @@
target="_blank"
class="btn btn-secondary btn-xs gap-1"
title="View diagram in new page"
><i class="fas fa-external-link-alt"></i>Full screen</a>
><ExternalLinkAltIcon />Full screen</a>
{#if env.isEnabledMermaidChartLinks}
<a
href={`${MCBaseURL}/app/plugin/save?state=${$stateStore.serialized}`}
@@ -205,6 +205,9 @@
<!-- <div class="flex-1 overflow-auto"> -->
<View {panZoomState} />
<div class="absolute right-0 top-0"><PanZoomToolbar {panZoomState} /></div>
<div class="absolute bottom-0 left-0"><SyncRoughToolbar /></div>
<div class="absolute bottom-0 right-0"><VersionSecurityToolbar /></div>
<!-- </div> -->
<!-- </Card> -->
<div class="mx-2 rounded p-2 shadow md:hidden">
tailwind.config.js
+55 -55
View File
@@ -1,96 +1,96 @@
import { fontFamily } from "tailwindcss/defaultTheme";
import tailwindcssAnimate from "tailwindcss-animate";
import tailwindcssAnimate from 'tailwindcss-animate';
import { fontFamily } from 'tailwindcss/defaultTheme';
/** @type {import('tailwindcss').Config} */
const config = {
darkMode: ["class"],
content: ["./src/**/*.{html,js,svelte,ts}"],
safelist: ["dark"],
darkMode: ['class'],
content: ['./src/**/*.{html,js,svelte,ts}'],
safelist: ['dark'],
theme: {
container: {
center: true,
padding: "2rem",
padding: '2rem',
screens: {
"2xl": "1400px"
'2xl': '1400px'
}
},
extend: {
colors: {
border: "hsl(var(--border) / <alpha-value>)",
input: "hsl(var(--input) / <alpha-value>)",
ring: "hsl(var(--ring) / <alpha-value>)",
background: "hsl(var(--background) / <alpha-value>)",
foreground: "hsl(var(--foreground) / <alpha-value>)",
border: 'hsl(var(--border) / <alpha-value>)',
input: 'hsl(var(--input) / <alpha-value>)',
ring: 'hsl(var(--ring) / <alpha-value>)',
background: 'hsl(var(--background) / <alpha-value>)',
foreground: 'hsl(var(--foreground) / <alpha-value>)',
primary: {
DEFAULT: "hsl(var(--primary) / <alpha-value>)",
foreground: "hsl(var(--primary-foreground) / <alpha-value>)"
DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
foreground: 'hsl(var(--primary-foreground) / <alpha-value>)'
},
secondary: {
DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
foreground: "hsl(var(--secondary-foreground) / <alpha-value>)"
DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)'
},
destructive: {
DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
foreground: "hsl(var(--destructive-foreground) / <alpha-value>)"
DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)'
},
muted: {
DEFAULT: "hsl(var(--muted) / <alpha-value>)",
foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
foreground: 'hsl(var(--muted-foreground) / <alpha-value>)'
},
accent: {
DEFAULT: "hsl(var(--accent) / <alpha-value>)",
foreground: "hsl(var(--accent-foreground) / <alpha-value>)"
DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
foreground: 'hsl(var(--accent-foreground) / <alpha-value>)'
},
popover: {
DEFAULT: "hsl(var(--popover) / <alpha-value>)",
foreground: "hsl(var(--popover-foreground) / <alpha-value>)"
DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
foreground: 'hsl(var(--popover-foreground) / <alpha-value>)'
},
card: {
DEFAULT: "hsl(var(--card) / <alpha-value>)",
foreground: "hsl(var(--card-foreground) / <alpha-value>)"
DEFAULT: 'hsl(var(--card) / <alpha-value>)',
foreground: 'hsl(var(--card-foreground) / <alpha-value>)'
},
sidebar: {
DEFAULT: "hsl(var(--sidebar-background))",
foreground: "hsl(var(--sidebar-foreground))",
primary: "hsl(var(--sidebar-primary))",
"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
accent: "hsl(var(--sidebar-accent))",
"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
border: "hsl(var(--sidebar-border))",
ring: "hsl(var(--sidebar-ring))",
},
DEFAULT: 'hsl(var(--sidebar-background))',
foreground: 'hsl(var(--sidebar-foreground))',
primary: 'hsl(var(--sidebar-primary))',
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
accent: 'hsl(var(--sidebar-accent))',
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
border: 'hsl(var(--sidebar-border))',
ring: 'hsl(var(--sidebar-ring))'
}
},
borderRadius: {
xl: "calc(var(--radius) + 4px)",
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)"
xl: 'calc(var(--radius) + 4px)',
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
},
fontFamily: {
sans: [...fontFamily.sans]
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--bits-accordion-content-height)" },
'accordion-down': {
from: { height: '0' },
to: { height: 'var(--bits-accordion-content-height)' }
},
"accordion-up": {
from: { height: "var(--bits-accordion-content-height)" },
to: { height: "0" },
},
"caret-blink": {
"0%,70%,100%": { opacity: "1" },
"20%,50%": { opacity: "0" },
'accordion-up': {
from: { height: 'var(--bits-accordion-content-height)' },
to: { height: '0' }
},
'caret-blink': {
'0%,70%,100%': { opacity: '1' },
'20%,50%': { opacity: '0' }
}
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
"caret-blink": "caret-blink 1.25s ease-out infinite",
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out',
'caret-blink': 'caret-blink 1.25s ease-out infinite'
}
}
},
},
},
plugins: [tailwindcssAnimate],
plugins: [tailwindcssAnimate]
};
export default config;
vite.config.js
+8 -1
View File
@@ -1,9 +1,16 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { svelteTesting } from '@testing-library/svelte/vite';
import Icons from 'unplugin-icons/vite';
import { defineConfig } from 'vitest/config';
export default defineConfig({
plugins: [sveltekit(), svelteTesting()],
plugins: [
sveltekit(),
svelteTesting(),
Icons({
compiler: 'svelte'
})
],
envPrefix: 'MERMAID_',
optimizeDeps: { include: ['mermaid'] },
server: {
yarn.lock
+111 -2
View File
@@ -33,11 +33,24 @@
package-manager-detector "^0.2.0"
tinyexec "^0.3.0"
"@antfu/install-pkg@^1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@antfu/install-pkg/-/install-pkg-1.0.0.tgz#2912a150fc8b35ec912f583f90074ee98f64d66a"
integrity sha512-xvX6P/lo1B3ej0OsaErAjqgFYzYVcJpamjLAFLYh9vRJngBrMoUG7aVnrGTeqM7yxbyTD5p3F2+0/QUEh8Vzhw==
dependencies:
package-manager-detector "^0.2.8"
tinyexec "^0.3.2"
"@antfu/utils@^0.7.10":
version "0.7.10"
resolved "https://registry.yarnpkg.com/@antfu/utils/-/utils-0.7.10.tgz#ae829f170158e297a9b6a28f161a8e487d00814d"
integrity sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==
"@antfu/utils@^8.1.0":
version "8.1.1"
resolved "https://registry.yarnpkg.com/@antfu/utils/-/utils-8.1.1.tgz#95b1947d292a9a2efffba2081796dcaa05ecedfb"
integrity sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==
"@babel/code-frame@^7.0.0":
version "7.22.10"
resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.10.tgz#1c20e612b768fefa75f6e90d6ecb86329247f0a3"
@@ -458,7 +471,15 @@
resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3"
integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
"@iconify/types@^2.0.0":
"@iconify/json@^2.2.315":
version "2.2.315"
resolved "https://registry.yarnpkg.com/@iconify/json/-/json-2.2.315.tgz#7e201f0d985c7cc6ccf685c25da811d7c23d38a1"
integrity sha512-ST+F6ZF+IpKm2eaABWftJ4stWbB8pcEd9Q5bshW8hcIW/kcvzwit3fI/5x3tFFscWUCxHGNU3JNVMtNlodHweQ==
dependencies:
"@iconify/types" "*"
pathe "^1.1.2"
"@iconify/types@*", "@iconify/types@^2.0.0":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@iconify/types/-/types-2.0.0.tgz#ab0e9ea681d6c8a1214f30cd741fe3a20cc57f57"
integrity sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==
@@ -477,6 +498,20 @@
local-pkg "^0.5.1"
mlly "^1.7.3"
"@iconify/utils@^2.3.0":
version "2.3.0"
resolved "https://registry.yarnpkg.com/@iconify/utils/-/utils-2.3.0.tgz#1bbbf8c477ebe9a7cacaea78b1b7e8937f9cbfba"
integrity sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==
dependencies:
"@antfu/install-pkg" "^1.0.0"
"@antfu/utils" "^8.1.0"
"@iconify/types" "^2.0.0"
debug "^4.4.0"
globals "^15.14.0"
kolorist "^1.8.0"
local-pkg "^1.0.0"
mlly "^1.7.4"
"@internationalized/date@^3.5.6":
version "3.7.0"
resolved "https://registry.yarnpkg.com/@internationalized/date/-/date-3.7.0.tgz#23a4956308ee108e308517a7137c69ab8f5f2ad9"
@@ -2195,6 +2230,11 @@ confbox@^0.1.8:
resolved "https://registry.yarnpkg.com/confbox/-/confbox-0.1.8.tgz#820d73d3b3c82d9bd910652c5d4d599ef8ff8b06"
integrity sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w==
confbox@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/confbox/-/confbox-0.2.1.tgz#ae39f2c99699afa451d00206479f15f9a1208a8b"
integrity sha512-hkT3yDPFbs95mNCy1+7qNKC6Pro+/ibzYxtM2iqEigpf0sVw+bg4Zh9/snjsBcf990vfIsg5+1U7VyiyBb3etg==
config-chain@^1.1.12:
version "1.1.13"
resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.13.tgz#fad0795aa6a6cdaff9ed1b68e9dff94372c232f4"
@@ -3366,6 +3406,11 @@ expect-type@^1.1.0:
resolved "https://registry.yarnpkg.com/expect-type/-/expect-type-1.1.0.tgz#a146e414250d13dfc49eafcfd1344a4060fa4c75"
integrity sha512-bFi65yM+xZgk+u/KRIpekdSYkTB5W1pEf0Lt8Q8Msh7b+eQ7LXVtIB1Bkm4fvclDEL1b2CZkMhv2mOeF8tMdkA==
exsolve@^1.0.1:
version "1.0.4"
resolved "https://registry.yarnpkg.com/exsolve/-/exsolve-1.0.4.tgz#7de5c75af82ecd15998328fbf5f2295883be3a39"
integrity sha512-xsZH6PXaER4XoV+NiT7JHp1bJodJVT+cxeSH1G0f0tlT0lJqYuHUP3bUx2HtfTDvOagMINYp8rsqusxud3RXhw==
extend@~3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
@@ -3710,6 +3755,11 @@ globals@^15.13.0:
resolved "https://registry.yarnpkg.com/globals/-/globals-15.14.0.tgz#b8fd3a8941ff3b4d38f3319d433b61bbb482e73f"
integrity sha512-OkToC372DtlQeje9/zHIo5CT8lRP/FUgEOKBEhU4e0abL7J7CD24fD9ohiLN5hagG/kWCYj4K5oaxxtj2Z0Dig==
globals@^15.14.0:
version "15.15.0"
resolved "https://registry.yarnpkg.com/globals/-/globals-15.15.0.tgz#7c4761299d41c32b075715a4ce1ede7897ff72a8"
integrity sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==
globby@^11.1.0:
version "11.1.0"
resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
@@ -4354,6 +4404,15 @@ local-pkg@^0.5.1:
mlly "^1.7.3"
pkg-types "^1.2.1"
local-pkg@^1.0.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/local-pkg/-/local-pkg-1.1.1.tgz#f5fe74a97a3bd3c165788ee08ca9fbe998dc58dd"
integrity sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==
dependencies:
mlly "^1.7.4"
pkg-types "^2.0.1"
quansync "^0.2.8"
locate-character@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/locate-character/-/locate-character-3.0.0.tgz#0305c5b8744f61028ef5d01f444009e00779f974"
@@ -4910,6 +4969,13 @@ package-manager-detector@^0.2.0:
resolved "https://registry.yarnpkg.com/package-manager-detector/-/package-manager-detector-0.2.9.tgz#20990785afa69d38b4520ccc83b34e9f69cb970f"
integrity sha512-+vYvA/Y31l8Zk8dwxHhL3JfTuHPm6tlxM2A3GeQyl7ovYnSp1+mzAxClxaOr0qO1TtPxbQxetI7v5XqKLJZk7Q==
package-manager-detector@^0.2.8:
version "0.2.11"
resolved "https://registry.yarnpkg.com/package-manager-detector/-/package-manager-detector-0.2.11.tgz#3af0b34f99d86d24af0a0620603d2e1180d05c9c"
integrity sha512-BEnLolu+yuz22S56CU1SUKq3XC3PkwD5wv4ikR4MfGvnRVcmzXR9DwSlW2fEamyTPyXHomBJRzgapeuBvRNzJQ==
dependencies:
quansync "^0.2.7"
pako@2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/pako/-/pako-2.1.0.tgz#266cc37f98c7d883545d11335c00fbd4062c9a86"
@@ -4999,6 +5065,11 @@ pathe@^2.0.1:
resolved "https://registry.yarnpkg.com/pathe/-/pathe-2.0.2.tgz#5ed86644376915b3c7ee4d00ac8c348d671da3a5"
integrity sha512-15Ztpk+nov8DR524R4BF7uEuzESgzUEAV4Ah7CUMNGXdE5ELuvxElxGXndBl32vMSsWa1jpNf22Z+Er3sKwq+w==
pathe@^2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/pathe/-/pathe-2.0.3.tgz#3ecbec55421685b70a9da872b2cff3e1cbed1716"
integrity sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==
pathval@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.1.tgz#8534e77a77ce7ac5a2512ea21e0fdb8fcf6c3d8d"
@@ -5088,6 +5159,15 @@ pkg-types@^1.2.1, pkg-types@^1.3.0:
mlly "^1.7.4"
pathe "^2.0.1"
pkg-types@^2.0.1:
version "2.1.0"
resolved "https://registry.yarnpkg.com/pkg-types/-/pkg-types-2.1.0.tgz#70c9e1b9c74b63fdde749876ee0aa007ea9edead"
integrity sha512-wmJwA+8ihJixSoHKxZJRBQG1oY8Yr9pGLzRmSsNms0iNWyHHAlZCa7mmKiFR10YPZuz/2k169JiS/inOjBCZ2A==
dependencies:
confbox "^0.2.1"
exsolve "^1.0.1"
pathe "^2.0.3"
plausible-tracker@^0.3.8:
version "0.3.9"
resolved "https://registry.yarnpkg.com/plausible-tracker/-/plausible-tracker-0.3.9.tgz#81f3083822492564a8cb69a168f9241435b47ff2"
@@ -5537,6 +5617,11 @@ qs@~6.10.3:
dependencies:
side-channel "^1.0.4"
quansync@^0.2.7, quansync@^0.2.8:
version "0.2.8"
resolved "https://registry.yarnpkg.com/quansync/-/quansync-0.2.8.tgz#2e893d17bb754ba0988ea399ff0bc5f2a8467793"
integrity sha512-4+saucphJMazjt7iOM27mbFCk+D9dd/zmgMDCzRZ8MEoBfYp7lAvoN38et/phRQF6wOPMy/OROBGgoWeSKyluA==
querystringify@^2.1.1:
version "2.2.0"
resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
@@ -6428,7 +6513,7 @@ tinycolor2@^1.6.0:
resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
tinyexec@^0.3.0, tinyexec@^0.3.1:
tinyexec@^0.3.0, tinyexec@^0.3.1, tinyexec@^0.3.2:
version "0.3.2"
resolved "https://registry.yarnpkg.com/tinyexec/-/tinyexec-0.3.2.tgz#941794e657a85e496577995c6eef66f53f42b3d2"
integrity sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==
@@ -6605,6 +6690,25 @@ universalify@^2.0.0:
resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
unplugin-icons@^22.1.0:
version "22.1.0"
resolved "https://registry.yarnpkg.com/unplugin-icons/-/unplugin-icons-22.1.0.tgz#5a6fe3d751e50f1c937e289857b0418e6855d92a"
integrity sha512-ect2ZNtk1Zgwb0NVHd0C1IDW/MV+Jk/xaq4t8o6rYdVS3+L660ZdD5kTSQZvsgdwCvquRw+/wYn75hsweRjoIA==
dependencies:
"@antfu/install-pkg" "^1.0.0"
"@iconify/utils" "^2.3.0"
debug "^4.4.0"
local-pkg "^1.0.0"
unplugin "^2.2.0"
unplugin@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-2.2.0.tgz#2659dee5c6b3de9b7ea671228c18263886ae58b6"
integrity sha512-m1ekpSwuOT5hxkJeZGRxO7gXbXT3gF26NjQ7GdVHoLoF8/nopLcd/QfPigpCy7i51oFHiRJg/CyHhj4vs2+KGw==
dependencies:
acorn "^8.14.0"
webpack-virtual-modules "^0.6.2"
untildify@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
@@ -6817,6 +6921,11 @@ webidl-conversions@^7.0.0:
resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
webpack-virtual-modules@^0.6.2:
version "0.6.2"
resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz#057faa9065c8acf48f24cb57ac0e77739ab9a7e8"
integrity sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==
whatwg-encoding@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz#d0f4ef769905d426e1688f3e34381a99b60b76e5"