svelte-multiselect 11.5.2 → 11.6.0

package/dist/live-examples/mdsvex-transform.js

@@ -0,0 +1,184 @@
+// Remark plugin - transforms ```svelte example code blocks into rendered components
+import { Buffer } from 'node:buffer';
+import path from 'node:path';
+import { hast_to_html, LANG_TO_SCOPE, starry_night } from './highlighter.js';
+// Base64 encode to prevent preprocessors from modifying the content
+const to_base64 = (src) => Buffer.from(src, `utf-8`).toString(`base64`);
+// Escape backticks and template literal syntax for embedding in template literals
+const encode_escapes = (src) => src.replace(/`/g, `\\\``).replace(/\$\{/g, `\\$\{`);
+// Regex to find <script> block in svelte
+// Note: These patterns handle common cases but may have edge cases with nested
+// comments containing </script> strings or complex attribute syntax
+const RE_SCRIPT_START = /<script(?:\s+?[a-zA-Z]+(=(?:["']){0,1}[a-zA-Z0-9]+(?:["']){0,1}){0,1})*\s*?>/;
+const RE_SCRIPT_BLOCK = /(<script[\s\S]*?>)([\s\S]*?)(<\/script>)/g;
+const RE_STYLE_BLOCK = /(<style[\s\S]*?>)([\s\S]*?)(<\/style>)/g;
+// Parses key=value pairs from a string. Supports strings (with escaped quotes),
+// numbers, booleans, and arrays. Note: nested structures in arrays are not supported.
+const RE_PARSE_META = /(\w+=\d+|\w+="(?:[^"\\]|\\.)*"|\w+=\[[^\]]*\]|\w+)/g;
+export const EXAMPLE_MODULE_PREFIX = `___live_example___`;
+export const EXAMPLE_COMPONENT_PREFIX = `LiveExample___`;
+// Languages that render as live Svelte components (O(1) lookup)
+const LIVE_LANGUAGES = new Set([`svelte`, `html`]);
+// All languages that support the `example` meta (O(1) lookup)
+const EXAMPLE_LANGUAGES = new Set(Object.keys(LANG_TO_SCOPE));
+// Simple tree traversal - finds all nodes of a given type
+const visit = (tree, type, callback) => {
+    const walk = (nodes) => {
+        for (const node of nodes) {
+            if (node.type === type)
+                callback(node);
+            if (node.children)
+                walk(node.children);
+        }
+    };
+    walk(tree.children);
+};
+// Default wrapper component
+const DEFAULT_WRAPPER = `$lib/CodeExample.svelte`;
+function remark(options = {}) {
+    const { defaults = {} } = options;
+    return function transformer(tree, file) {
+        const examples = [];
+        // Track wrapper imports to avoid duplicates and generate unique aliases
+        const wrapper_aliases = new Map(); // wrapper key -> alias name
+        const filename = path.relative(file.cwd, file.filename);
+        // Helper to get or create a wrapper alias
+        function get_wrapper_alias(wrapper) {
+            // Use '::' as delimiter to avoid misparsing paths with colons (Windows, URLs)
+            const wrapper_key = typeof wrapper === `string`
+                ? wrapper
+                : `${wrapper[0]}::${wrapper[1]}`;
+            let alias = wrapper_aliases.get(wrapper_key);
+            if (!alias) {
+                alias = `Example_${wrapper_aliases.size}`;
+                wrapper_aliases.set(wrapper_key, alias);
+            }
+            return alias;
+        }
+        visit(tree, `code`, (node) => {
+            const meta = {
+                Wrapper: DEFAULT_WRAPPER,
+                filename,
+                ...defaults,
+                ...parse_meta(node.meta || ``),
+            };
+            const { csr, example, Wrapper } = meta;
+            // find code blocks with `example` meta in supported languages
+            if (example && node.lang && EXAMPLE_LANGUAGES.has(node.lang)) {
+                const is_live = LIVE_LANGUAGES.has(node.lang);
+                const wrapper_alias = is_live ? get_wrapper_alias(Wrapper ?? DEFAULT_WRAPPER) : ``;
+                const value = create_example_component(node.value || ``, meta, is_live ? examples.length : -1, // -1 for code-only (no component import needed)
+                node.lang, is_live, wrapper_alias);
+                // Only track live examples for component imports
+                if (is_live) {
+                    examples.push({ csr, wrapper_alias });
+                }
+                node.type = `paragraph`;
+                node.children = [{ type: `text`, value }];
+                delete node.lang;
+                delete node.meta;
+                delete node.value;
+            }
+        });
+        // add imports for each generated example
+        let scripts = ``;
+        // Add wrapper imports
+        // Use '::' as the tuple delimiter to avoid misparsing Windows paths (C:\path)
+        // or URLs (https://example.com) that contain single colons
+        for (const [wrapper_key, alias] of wrapper_aliases) {
+            const double_colon_idx = wrapper_key.indexOf(`::`);
+            if (double_colon_idx === -1) {
+                // Simple string path (default import)
+                scripts += `import ${alias} from "${wrapper_key}";\n`;
+            }
+            else {
+                // Tuple [module, export] using '::' delimiter
+                const module_path = wrapper_key.slice(0, double_colon_idx);
+                const export_name = wrapper_key.slice(double_colon_idx + 2);
+                scripts += `import { ${export_name} as ${alias} } from "${module_path}";\n`;
+            }
+        }
+        // Add example component imports
+        for (const [idx, ex] of examples.entries()) {
+            if (!ex.csr) {
+                scripts +=
+                    `import ${EXAMPLE_COMPONENT_PREFIX}${idx} from "${EXAMPLE_MODULE_PREFIX}${idx}.svelte";\n`;
+            }
+        }
+        // Try to inject imports into existing script block
+        let injected = false;
+        visit(tree, `html`, (node) => {
+            if (!injected && node.value && RE_SCRIPT_START.test(node.value)) {
+                node.value = node.value.replace(RE_SCRIPT_START, (opening_tag) => `${opening_tag}\n${scripts}`);
+                injected = true;
+            }
+        });
+        // Create script block if none existed
+        if (!injected) {
+            tree.children.push({ type: `html`, value: `<script>\n${scripts}</script>` });
+        }
+    };
+}
+function parse_meta(meta) {
+    const result = {};
+    for (const part of meta.match(RE_PARSE_META) ?? []) {
+        const eq = part.indexOf(`=`);
+        const key = eq === -1 ? part : part.slice(0, eq);
+        const value = eq === -1 ? `true` : part.slice(eq + 1);
+        try {
+            result[key] = JSON.parse(value);
+        }
+        catch {
+            throw new Error(`Unable to parse meta \`${key}=${value}\``);
+        }
+    }
+    return result;
+}
+function format_code(code, meta) {
+    let result = code;
+    if (meta.hideScript)
+        result = result.replace(RE_SCRIPT_BLOCK, ``);
+    if (meta.hideStyle)
+        result = result.replace(RE_STYLE_BLOCK, ``);
+    return result.trim();
+}
+function create_example_component(value, meta, index, lang, is_live, wrapper_alias) {
+    const code = format_code(value, meta);
+    const tree = starry_night.highlight(code, LANG_TO_SCOPE[lang]);
+    // Convert newlines to &#10; to prevent bundlers from stripping whitespace
+    const highlighted = hast_to_html(tree).replace(/\n/g, `&#10;`);
+    // Code-only examples (ts, js, css, etc.) - just render highlighted code block
+    if (!is_live) {
+        // Close and reopen <p> to avoid block-in-inline HTML nesting issues
+        return `</p><pre class="highlight highlight-${lang}"><code>{@html ${JSON.stringify(highlighted)}}</code></pre><p>`;
+    }
+    // Live examples (svelte, html) - render with CodeExample wrapper
+    const component = `${EXAMPLE_COMPONENT_PREFIX}${index}`;
+    const base64_src = to_base64(value);
+    const escaped_src = JSON.stringify(encode_escapes(code));
+    const escaped_meta = encode_escapes(JSON.stringify(meta));
+    // Close and reopen <p> to avoid block-in-inline HTML nesting issues
+    return `</p>
+  <${wrapper_alias}
+    __live_example_src={"${base64_src}"}
+    src={${escaped_src}}
+    meta={${escaped_meta}}
+  >
+    {#snippet example()}
+      ${meta.csr
+        ? `{#if typeof window !== 'undefined'}
+        {#await import("${EXAMPLE_MODULE_PREFIX}${index}.svelte") then module}
+          {@const ${component} = module.default}
+          <${component} />
+        {/await}
+        {/if}`
+        : `<${component} />`}
+    {/snippet}
+
+    {#snippet code()}
+      {@html ${JSON.stringify(highlighted)}}
+    {/snippet}
+  </${wrapper_alias}>
+  <p>`;
+}
+export default remark;

package/dist/live-examples/vite-plugin.d.ts

@@ -0,0 +1,6 @@
+import type { Plugin } from 'vite';
+import { EXAMPLE_MODULE_PREFIX } from './mdsvex-transform.js';
+export { EXAMPLE_MODULE_PREFIX };
+export default function live_examples_plugin(options?: {
+    extensions?: string[];
+}): Plugin;

package/dist/live-examples/vite-plugin.js

@@ -0,0 +1,170 @@
+// Vite plugin - handles virtual module resolution for example components
+// @ts-expect-error no types available
+import ast from 'abstract-syntax-tree';
+import { Buffer } from 'node:buffer';
+import path from 'node:path';
+import process from 'node:process';
+import { EXAMPLE_MODULE_PREFIX } from './mdsvex-transform.js';
+export { EXAMPLE_MODULE_PREFIX };
+// Max chars to scan after property end for trailing comma/whitespace cleanup
+const TRAILING_CLEANUP_BOUND = 50; // Generous bound - typical trailing content is ", " (2 chars)
+// Apply edits in reverse order so positions stay valid
+const apply_edits = (source, edits) => edits
+    .sort((a, b) => b.start - a.start)
+    .reduce((str, { start, end, content }) => str.slice(0, start) + content + str.slice(end), source);
+export default function live_examples_plugin(options = {}) {
+    const { extensions = [`.svelte.md`, `.md`, `.svx`] } = options;
+    // Extracted examples as individual virtual files (id -> svelte source)
+    const virtual_files = new Map();
+    // Reverse lookup: parent markdown path -> set of virtual file IDs (for O(1) HMR lookups)
+    const parent_to_virtual = new Map();
+    let vite_server;
+    return {
+        name: `live-examples-plugin`,
+        configureServer(server) {
+            vite_server = server;
+        },
+        resolveId(id) {
+            if (id.includes(EXAMPLE_MODULE_PREFIX)) {
+                // Force absolute path (dev uses relative, prod uses absolute)
+                // Use posix.join to ensure forward slashes on all platforms (Vite normalizes to /)
+                const cwd = process.cwd().replace(/\\/g, `/`);
+                return id.includes(cwd) ? id : path.posix.join(cwd, id);
+            }
+        },
+        load(id) {
+            if (id.includes(EXAMPLE_MODULE_PREFIX)) {
+                // Strip query parameters - Vite requests derived modules (styles, etc.) with queries
+                // like ?inline&svelte&type=style&lang.css but we store the base path
+                const [base_id, query = ``] = id.split(`?`);
+                const src = virtual_files.get(base_id);
+                if (src)
+                    return src;
+                // Virtual file not found - can happen during SSR/parallel builds when derived
+                // modules (styles, scripts) are requested before parent markdown is transformed.
+                // For derived module requests, return empty content to avoid crashes.
+                if (query.includes(`type=style`) || query.includes(`type=script`) ||
+                    query.includes(`type=module`)) {
+                    return ``;
+                }
+                // For main component requests in production, fail the build
+                const msg = `Example src not found for ${id}`;
+                if (process.env.NODE_ENV === `production`) {
+                    throw new Error(msg);
+                }
+                // In dev, warn and return error component to surface issue visibly
+                this.warn(msg);
+                return `<script>console.error(${JSON.stringify(msg)})</script><p style="color:red">${msg}</p>`;
+            }
+        },
+        transform(code, id) {
+            // Strip query params for extension check (Vite adds ?query for HMR, styles, etc.)
+            const base_id = id.split(`?`)[0];
+            // Skip non-matching files
+            const is_example_module = id.includes(EXAMPLE_MODULE_PREFIX);
+            const is_markdown = extensions.some((ext) => base_id.endsWith(ext));
+            if (!is_example_module && !is_markdown)
+                return;
+            // Skip derived modules (styles, etc.) - only process the main markdown file
+            // Vite creates derived modules like ?svelte&type=style&lang.css for style blocks
+            if (id.includes(`?svelte&type=`))
+                return { code, map: { mappings: `` } };
+            if (is_markdown) {
+                // Use AST for precise node location, collect edits to apply at end
+                let tree;
+                try {
+                    tree = ast.parse(code, { ranges: true });
+                }
+                catch {
+                    // Code may contain Svelte syntax that the JS parser can't handle
+                    // (e.g., template blocks, special directives). Skip transformation.
+                    return { code, map: { mappings: `` } };
+                }
+                const edits = [];
+                // Find all __live_example_src properties
+                const src_props = ast.find(tree, {
+                    type: `Property`,
+                    key: { name: `__live_example_src` },
+                });
+                for (const [idx, prop] of src_props.entries()) {
+                    // Extract the string literal content (base64 encoded)
+                    const string_literals = ast.find(prop, {
+                        type: `Literal`,
+                    });
+                    if (string_literals.length === 0)
+                        continue;
+                    const value_node = string_literals[0];
+                    // AST Literal nodes store value in .value property (string for literals)
+                    const src = Buffer.from(String(value_node.value ?? ``), `base64`).toString(`utf-8`);
+                    // Use base_id (without query params) to ensure consistent virtual file IDs
+                    const virtual_id = `${base_id}${EXAMPLE_MODULE_PREFIX}${idx}.svelte`;
+                    if (src !== virtual_files.get(virtual_id)) {
+                        virtual_files.set(virtual_id, src);
+                        // Update reverse lookup for HMR (get-or-create pattern)
+                        const virtual_set = parent_to_virtual.get(base_id) ?? new Set();
+                        if (!parent_to_virtual.has(base_id)) {
+                            parent_to_virtual.set(base_id, virtual_set);
+                        }
+                        virtual_set.add(virtual_id);
+                        // Invalidate modules for HMR
+                        if (vite_server) {
+                            const mod = vite_server.moduleGraph.getModuleById(virtual_id);
+                            const parent_mod = vite_server.moduleGraph.getModuleById(base_id);
+                            if (mod)
+                                vite_server.moduleGraph.invalidateModule(mod);
+                            if (parent_mod)
+                                vite_server.moduleGraph.invalidateModule(parent_mod);
+                        }
+                    }
+                    // Remove the property (including trailing comma/whitespace)
+                    if (prop.start !== undefined && prop.end !== undefined) {
+                        let end = prop.end;
+                        const max_end = Math.min(prop.end + TRAILING_CLEANUP_BOUND, code.length);
+                        while (end < max_end && /[\s,]/.test(code[end]))
+                            end++;
+                        edits.push({ start: prop.start, end, content: `` });
+                    }
+                }
+                // Update import paths (static and dynamic) to use virtual file IDs
+                const imports = [
+                    ...ast.find(tree, { type: `ImportDeclaration` }),
+                    ...ast.find(tree, { type: `ImportExpression` }),
+                ];
+                for (const { source } of imports) {
+                    const match = source?.value?.match(/___live_example___(\d+)\.svelte/);
+                    if (match && source?.start !== undefined && source?.end !== undefined) {
+                        const virtual_id = `${base_id}${EXAMPLE_MODULE_PREFIX}${match[1]}.svelte`;
+                        edits.push({
+                            start: source.start + 1,
+                            end: source.end - 1,
+                            content: virtual_id,
+                        });
+                    }
+                }
+                return {
+                    code: apply_edits(code, edits),
+                    map: { mappings: `` },
+                };
+            }
+            return { code, map: { mappings: `` } };
+        },
+        handleHotUpdate(ctx) {
+            // Collect virtual file modules that need HMR updates
+            const additional_modules = [];
+            // Normalize to forward slashes (ctx.file uses OS separators, Map keys use Vite's forward slashes)
+            const file = ctx.file.replace(/\\/g, `/`);
+            // O(1) lookup using reverse map instead of iterating all virtual files
+            if (extensions.some((ext) => file.endsWith(ext))) {
+                const virtual_ids = parent_to_virtual.get(file);
+                if (virtual_ids) {
+                    for (const id of virtual_ids) {
+                        const mod = ctx.server.moduleGraph.getModuleById(id);
+                        if (mod)
+                            additional_modules.push(mod);
+                    }
+                }
+            }
+            return [...additional_modules, ...ctx.modules];
+        },
+    };
+}

package/dist/types.d.ts

@@ -78,6 +78,14 @@ export interface MultiSelectEvents<T extends Option = Option> {
         option: T | null;
         index: number | null;
     }) => unknown;
+    onundo?: (data: {
+        previous: T[];
+        current: T[];
+    }) => unknown;
+    onredo?: (data: {
+        previous: T[];
+        current: T[];
+    }) => unknown;
 }
 export interface LoadOptionsParams {
     search: string;
@@ -222,12 +230,19 @@ export interface MultiSelectProps<T extends Option = Option> extends MultiSelect
     collapseAllGroups?: () => void;
     expandAllGroups?: () => void;
     shortcuts?: Partial<KeyboardShortcuts>;
+    history?: boolean | number;
+    undo?: () => boolean;
+    redo?: () => boolean;
+    canUndo?: boolean;
+    canRedo?: boolean;
 }
 export interface KeyboardShortcuts {
     select_all?: string | null;
     clear_all?: string | null;
     open?: string | null;
     close?: string | null;
+    undo?: string | null;
+    redo?: string | null;
 }
 export interface NavRouteObject {
     href: string;

package/dist/utils.d.ts

@@ -1,4 +1,5 @@
 import type { Option } from './types';
+export declare function get_uuid(): string;
 export declare const is_object: (val: unknown) => val is Record<string, unknown>;
 export declare const has_group: <T extends Option>(opt: T) => opt is T & {
     group: string;

package/dist/utils.js

@@ -1,3 +1,14 @@
+let uuid_counter = 0;
+// Generates a UUID for component IDs. Uses native crypto.randomUUID when available.
+// Fallback uses timestamp+counter - sufficient for DOM IDs (uniqueness, not security).
+// Cryptographic randomness is unnecessary here since these IDs are only used for
+// associating labels with inputs and ensuring unique DOM element identifiers.
+export function get_uuid() {
+    if (globalThis.crypto?.randomUUID)
+        return globalThis.crypto.randomUUID();
+    const hex = (Date.now().toString(16) + (uuid_counter++).toString(16)).padStart(32, `0`);
+    return hex.replace(/(.{8})(.{4})(.{4})(.{4})(.{12})/, `$1-$2-$3-$4-$5`);
+}
 // Type guard for checking if a value is a non-null object
 export const is_object = (val) => typeof val === `object` && val !== null;
 // Type guard for checking if an option has a group key

package/package.json

@@ -5,7 +5,7 @@
   "homepage": "https://janosh.github.io/svelte-multiselect",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "11.5.2",
+  "version": "11.6.0",
   "type": "module",
   "scripts": {
     "dev": "vite dev",
@@ -13,37 +13,52 @@
     "preview": "vite preview",
     "test": "vitest --run && playwright test",
     "check": "svelte-check",
-    "package": "svelte-package",
-    "prepublishOnly": "svelte-package"
+    "package": "svelte-package && find dist -name '*.js' -o -name '*.d.ts' | xargs sed -i '' -E \"s/(\\.\\.?\\/[^'\\\"]*)\\.ts(['\\\"])/\\1.js\\2/g\"",
+    "prepublishOnly": "pnpm package"
   },
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
   "peerDependencies": {
-    "svelte": "^5.35.6"
+    "@wooorm/starry-night": "^3.0.0",
+    "abstract-syntax-tree": "^2.0.0",
+    "svelte": "^5.48.0",
+    "svelte-preprocess": "^6.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@wooorm/starry-night": {
+      "optional": true
+    },
+    "abstract-syntax-tree": {
+      "optional": true
+    },
+    "svelte-preprocess": {
+      "optional": true
+    }
   },
   "devDependencies": {
-    "@playwright/test": "^1.57.0",
-    "@stylistic/eslint-plugin": "^5.7.0",
+    "@playwright/test": "^1.58.0",
+    "@stylistic/eslint-plugin": "^5.7.1",
     "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.50.0",
+    "@sveltejs/kit": "^2.50.1",
     "@sveltejs/package": "2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
-    "@types/node": "^25.0.9",
-    "@vitest/coverage-v8": "^4.0.17",
+    "@types/node": "^25.0.10",
+    "@vitest/coverage-v8": "^4.0.18",
+    "@wooorm/starry-night": "^3.9.0",
+    "abstract-syntax-tree": "^2.22.0",
     "eslint": "^9.39.2",
     "eslint-plugin-svelte": "^3.14.0",
-    "happy-dom": "^20.3.1",
+    "happy-dom": "^20.3.7",
     "mdsvex": "^0.12.6",
-    "mdsvexamples": "^0.5.1",
-    "svelte": "^5.46.4",
+    "svelte": "^5.48.2",
     "svelte-check": "^4.3.5",
     "svelte-preprocess": "^6.0.3",
     "svelte-toc": "^0.6.2",
     "svelte2tsx": "^0.7.46",
     "typescript": "5.9.3",
-    "typescript-eslint": "^8.53.0",
+    "typescript-eslint": "^8.53.1",
     "vite": "^7.3.1",
-    "vitest": "^4.0.17"
+    "vitest": "^4.0.18"
   },
   "keywords": [
     "svelte",
@@ -70,9 +85,17 @@
       "types": "./dist/attachments.d.ts",
       "default": "./dist/attachments.js"
     },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "default": "./dist/utils.js"
+    },
     "./heading-anchors": {
       "types": "./dist/heading-anchors.d.ts",
       "default": "./dist/heading-anchors.js"
+    },
+    "./live-examples": {
+      "types": "./dist/live-examples/index.d.ts",
+      "default": "./dist/live-examples/index.js"
     }
   },
   "types": "./dist/index.d.ts",