lapikit 0.6.11 → 0.7.0

package/dist/@types/components.d.ts

@@ -30,4 +30,5 @@ export type KitComponentScan = {
 export type ComponentInfo = {
     name: string;
     ref: string;
+    direct?: boolean;
 };

package/dist/animations/ripple.js

@@ -10,41 +10,49 @@ function getCoords(e) {
     return { x: e.clientX, y: e.clientY };
 }
 export function ripple(el, options = {}) {
-    const rippleContainer = document.createElement('div');
+    // created on first interaction, removed once every ripple has faded out
+    let rippleContainer;
     const activeRipples = new Set();
-    addClasses();
-    setOptions(options);
     function isAriaDisabled() {
         return el.getAttribute('aria-disabled') === 'true';
     }
-    function addClasses(center) {
-        const shouldBeCentered = center || options.center;
-        if (!rippleContainer.classList.contains('kit-ripple--effect')) {
-            rippleContainer.classList.add('kit-ripple--effect');
+    function applyOptions(container) {
+        if (options.component) {
+            container.style.setProperty('--system-ripple-radius', `var(--kit-${options.component}-radius)`);
         }
-        if (!shouldBeCentered && rippleContainer.classList.contains('kit-ripple--center')) {
-            rippleContainer.classList.remove('kit-ripple--center');
+        if (options.color) {
+            container.style.setProperty('--system-ripple-color', options.color);
         }
-        if (shouldBeCentered) {
-            rippleContainer.classList.add('kit-ripple--center');
+        const duration = resolveDuration(options);
+        if (duration) {
+            container.style.setProperty('--system-animation-ripple-duration', `${duration}ms`);
         }
     }
-    function setOptions(newOptions) {
-        if (newOptions.disabled || isAriaDisabled()) {
-            rippleContainer.remove();
+    function mountContainer(center) {
+        if (!rippleContainer) {
+            rippleContainer = document.createElement('div');
+            rippleContainer.classList.add('kit-ripple--effect');
+            applyOptions(rippleContainer);
         }
-        else {
+        rippleContainer.classList.toggle('kit-ripple--center', !!(center || options.center));
+        if (!rippleContainer.isConnected) {
             el.appendChild(rippleContainer);
         }
-        if (newOptions.component) {
-            rippleContainer.style.setProperty('--system-ripple-radius', `var(--kit-${newOptions.component}-radius)`);
-        }
-        if (newOptions.color) {
-            rippleContainer.style.setProperty('--system-ripple-color', newOptions.color);
+        return rippleContainer;
+    }
+    function unmountContainer() {
+        rippleContainer?.remove();
+        rippleContainer = undefined;
+    }
+    function setOptions(newOptions) {
+        options = newOptions;
+        if (newOptions.disabled || isAriaDisabled()) {
+            activeRipples.forEach((cleanup) => cleanup());
+            activeRipples.clear();
+            unmountContainer();
         }
-        const duration = resolveDuration(newOptions);
-        if (duration) {
-            rippleContainer.style.setProperty('--system-animation-ripple-duration', `${duration}ms`);
+        else if (rippleContainer) {
+            applyOptions(rippleContainer);
         }
     }
     function createRipple(e, center) {
@@ -60,7 +68,7 @@ export function ripple(el, options = {}) {
             createRipple(click, true);
             return;
         }
-        addClasses(center);
+        const container = mountContainer(center);
         const rect = el.getBoundingClientRect();
         const { x: clientX, y: clientY } = getCoords(e);
         const x = clientX - rect.left > el.offsetWidth / 2 ? 0 : el.offsetWidth;
@@ -71,7 +79,7 @@ export function ripple(el, options = {}) {
         ripple.style.left = `${clientX - rect.left - radius}px`;
         ripple.style.top = `${clientY - rect.top - radius}px`;
         ripple.style.width = ripple.style.height = `${radius * 2}px`;
-        rippleContainer.appendChild(ripple);
+        container.appendChild(ripple);
         let timeoutId;
         function cleanup() {
             if (timeoutId) {
@@ -80,12 +88,18 @@ export function ripple(el, options = {}) {
             cancelEvents.forEach((event) => el.removeEventListener(event, removeRipple));
             ripple.remove();
         }
+        function release() {
+            activeRipples.delete(cleanup);
+            if (activeRipples.size === 0) {
+                unmountContainer();
+            }
+        }
         function removeRipple() {
             ripple.style.opacity = '0';
             cancelEvents.forEach((event) => el.removeEventListener(event, removeRipple));
             timeoutId = setTimeout(() => {
                 ripple.remove();
-                activeRipples.delete(cleanup);
+                release();
             }, resolveDuration(options) || 1000);
         }
         activeRipples.add(cleanup);
@@ -99,10 +113,9 @@ export function ripple(el, options = {}) {
             });
             activeRipples.forEach((cleanup) => cleanup());
             activeRipples.clear();
-            rippleContainer.remove();
+            unmountContainer();
         },
         update(newOptions) {
-            options = newOptions;
             setOptions(newOptions);
         }
     };

package/dist/components/list/list.svelte

@@ -158,9 +158,15 @@
 		--kit-list-item-hover-bg: color-mix(in oklab, var(--kit-list-item-fg), transparent 80%);
 		--kit-list-item-active-bg: color-mix(in oklab, var(--kit-list-item-fg), transparent 92%);
 	}
-	.kit-list[data-variant='text'] :global(.kit-list-item .outline),
-	.kit-list[data-variant='filled'] :global(.kit-list-item .outline) {
-		display: none;
+	.kit-list[data-variant='outline'] :global(.kit-list-item::before) {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border: 1px solid var(--kit-list-item-bd);
+		border-radius: inherit;
+		box-sizing: border-box;
+		z-index: 1;
+		pointer-events: none;
 	}
 
 	/** 

package/dist/components/list/modules/list-item.svelte

@@ -81,7 +81,6 @@
 	}}
 	{...restProps}
 >
-	<span class="outline"></span>
 	{#if prepend}
 		<span class="kit-list-item__prepend">
 			{@render prepend?.()}
@@ -189,8 +188,4 @@
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
-
-	.kit-list-item .outline {
-		--outline-color: var(--kit-list-item-bd);
-	}
 </style>

package/dist/constants.d.ts

@@ -1,5 +1,7 @@
 export declare const lapikitImportsRef = "lapikit/components";
 export declare const lapikitImportsLabsRef = "lapikit/labs/components";
+export declare const lapikitComponentPaths: Readonly<Record<string, string>>;
+export declare const lapikitLabsComponentPaths: Readonly<Record<string, string>>;
 export declare const lapikitComponents: readonly string[];
 export declare const lapikitLabsComponents: readonly string[];
 export declare const lapikitPlugins: {

package/dist/constants.js

@@ -1,41 +1,39 @@
 export const lapikitImportsRef = 'lapikit/components';
 export const lapikitImportsLabsRef = 'lapikit/labs/components';
-export const lapikitComponents = [
-    'app',
-    'btn',
-    'icon',
-    'avatar',
-    'dropdown',
-    'popover',
-    'tooltip',
-    'textfield',
-    'appbar',
-    'btn',
-    'icon',
-    'avatar',
-    'toolbar',
-    'btn',
-    'icon',
-    'avatar',
-    'list',
-    'list-item',
-    'dialog',
-    'modal',
-    'accordion',
-    'accordion-item',
-    'alert',
-    'aspect-ratio',
-    'spacer',
-    'separator',
-    'chip',
-    'card',
-    'card-title',
-    'card-content',
-    'card-media',
-    'card-actions',
-    'card-container'
-];
-export const lapikitLabsComponents = ['sheet'];
+export const lapikitComponentPaths = {
+    app: 'app/app.svelte',
+    appbar: 'appbar/appbar.svelte',
+    btn: 'btn/btn.svelte',
+    icon: 'icon/icon.svelte',
+    avatar: 'avatar/avatar.svelte',
+    dropdown: 'dropdown/dropdown.svelte',
+    popover: 'popover/popover.svelte',
+    tooltip: 'tooltip/tooltip.svelte',
+    textfield: 'textfield/textfield.svelte',
+    toolbar: 'toolbar/toolbar.svelte',
+    list: 'list/list.svelte',
+    'list-item': 'list/modules/list-item.svelte',
+    dialog: 'dialog/dialog.svelte',
+    modal: 'modal/modal.svelte',
+    accordion: 'accordion/accordion.svelte',
+    'accordion-item': 'accordion/modules/accordion-item.svelte',
+    alert: 'alert/alert.svelte',
+    'aspect-ratio': 'aspect-ratio/aspect-ratio.svelte',
+    spacer: 'spacer/spacer.svelte',
+    separator: 'separator/separator.svelte',
+    chip: 'chip/chip.svelte',
+    card: 'card/card.svelte',
+    'card-title': 'card/modules/card-title.svelte',
+    'card-content': 'card/modules/card-content.svelte',
+    'card-media': 'card/modules/card-media.svelte',
+    'card-actions': 'card/modules/card-actions.svelte',
+    'card-container': 'card/modules/card-container.svelte'
+};
+export const lapikitLabsComponentPaths = {
+    sheet: 'sheet/sheet.svelte'
+};
+export const lapikitComponents = Object.keys(lapikitComponentPaths);
+export const lapikitLabsComponents = Object.keys(lapikitLabsComponentPaths);
 export const lapikitPlugins = {
     repl: {
         components: ['repl'],

package/dist/framework.d.ts

@@ -1,10 +1,6 @@
 import type { LapikitPreprocessOptions } from './@types/index.js';
-/**
- * componentName generates the component name used in imports
- * @param shortName The short name of the component
- * @returns The component name with "Kit" prefix and the first letter capitalized
- */
 export declare function componentName(shortName: string): string;
+export declare function collectDeclaredIdentifiers(content: string): Set<string>;
 export declare function liliCore(options?: LapikitPreprocessOptions): {
     markup({ content }: {
         content: string;

package/dist/framework.js

@@ -1,67 +1,107 @@
 import { decodeSourceMap } from './escaping.js';
-import { lapikitImportsRef, lapikitImportsLabsRef, lapikitComponents, lapikitLabsComponents, lapikitPlugins } from './constants.js';
-/**
- * componentName generates the component name used in imports
- * @param shortName The short name of the component
- * @returns The component name with "Kit" prefix and the first letter capitalized
- */
+import { lapikitImportsRef, lapikitImportsLabsRef, lapikitComponentPaths, lapikitLabsComponentPaths, lapikitPlugins } from './constants.js';
 export function componentName(shortName) {
     const pascal = shortName.replace(/(^|-)([a-z])/g, (_, __, letter) => letter.toUpperCase());
     return 'Kit' + pascal;
 }
+export function collectDeclaredIdentifiers(content) {
+    const declared = new Set();
+    const scriptRegex = /<script\b[^>]*>([\s\S]*?)<\/script>/g;
+    for (const [, rawScript] of content.matchAll(scriptRegex)) {
+        const script = rawScript.replace(/\/\*[\s\S]*?\*\//g, '').replace(/(^|[^:])\/\/.*$/gm, '$1');
+        const importRegex = /\bimport\s+(?:type\s+)?([^'";]*?)\s+from\s*['"]/g;
+        for (const [, clause] of script.matchAll(importRegex)) {
+            const braces = clause.match(/\{([^}]*)\}/);
+            if (braces) {
+                for (const specifier of braces[1].split(',')) {
+                    const local = specifier
+                        .trim()
+                        .replace(/^type\s+/, '')
+                        .split(/\s+as\s+/)
+                        .pop();
+                    if (local)
+                        declared.add(local.trim());
+                }
+            }
+            const outside = clause.replace(/\{[^}]*\}/, '');
+            const namespace = outside.match(/\*\s*as\s+([\w$]+)/);
+            if (namespace)
+                declared.add(namespace[1]);
+            const defaultImport = outside.match(/^\s*([\w$]+)/);
+            if (defaultImport)
+                declared.add(defaultImport[1]);
+        }
+        const declarationRegex = /\b(?:const|let|var|function|class)\s+([\w$]+)/g;
+        for (const [, name] of script.matchAll(declarationRegex)) {
+            declared.add(name);
+        }
+    }
+    return declared;
+}
 export function liliCore(options) {
     return {
         markup({ content }) {
-            const allComponents = [...lapikitComponents, ...lapikitLabsComponents];
-            const componentToRef = new Map();
-            lapikitComponents.forEach((comp) => {
-                componentToRef.set(comp, lapikitImportsRef);
-            });
-            lapikitLabsComponents.forEach((comp) => {
-                componentToRef.set(comp, lapikitImportsLabsRef);
-            });
+            if (!content.includes('<kit:'))
+                return;
+            const componentInfo = new Map();
+            for (const [shortName, path] of Object.entries(lapikitComponentPaths)) {
+                componentInfo.set(shortName, {
+                    name: componentName(shortName),
+                    ref: `${lapikitImportsRef}/${path}`,
+                    direct: true
+                });
+            }
+            for (const [shortName, path] of Object.entries(lapikitLabsComponentPaths)) {
+                componentInfo.set(shortName, {
+                    name: componentName(shortName),
+                    ref: `${lapikitImportsLabsRef}/${path}`,
+                    direct: true
+                });
+            }
             // plugins
             if (options?.plugins) {
                 options.plugins.forEach((pluginKey) => {
                     const plugin = lapikitPlugins[pluginKey];
                     if (plugin) {
                         plugin.components.forEach((comp) => {
-                            if (!allComponents.includes(comp)) {
-                                allComponents.push(comp);
-                            }
-                            componentToRef.set(comp, plugin.ref);
+                            componentInfo.set(comp, { name: componentName(comp), ref: plugin.ref });
                         });
                     }
                 });
             }
-            if (!content.includes('<kit:'))
-                return;
-            const componentInfo = new Map();
-            for (const shortName of allComponents) {
-                componentInfo.set(shortName, {
-                    name: componentName(shortName),
-                    ref: componentToRef.get(shortName) || lapikitImportsRef
-                });
-            }
             const scanResult = decodeSourceMap(content, componentInfo);
             if (!scanResult.changed)
                 return;
             let processedContent = scanResult.code;
             const importedComponents = scanResult.importedComponents;
+            // components already declared by the user (manual import, alias...) are not imported again
+            const declared = collectDeclaredIdentifiers(content);
+            declared.forEach((name) => importedComponents.delete(name));
             if (importedComponents.size > 0) {
+                const directNames = new Set();
+                componentInfo.forEach((info) => {
+                    if (info.direct)
+                        directNames.add(info.name);
+                });
+                const directImports = [];
                 const importsByRef = new Map();
                 importedComponents.forEach((ref, component) => {
+                    if (directNames.has(component)) {
+                        directImports.push(`\n\timport ${component} from '${ref}';`);
+                        return;
+                    }
                     if (!importsByRef.has(ref)) {
                         importsByRef.set(ref, []);
                     }
                     importsByRef.get(ref).push(component);
                 });
-                const importLines = Array.from(importsByRef.entries())
-                    .map(([ref, components]) => {
-                    const imports = components.join(', ');
-                    return `\n\timport { ${imports} } from '${ref}';`;
-                })
-                    .join('');
+                const importLines = directImports.join('') +
+                    Array.from(importsByRef.entries())
+                        .map(([ref, components]) => {
+                        const imports = components.join(', ');
+                        return `\n\timport { ${imports} } from '${ref}';`;
+                    })
+                        .join('');
                 const scriptRegex = /<script(?![^>]*\bmodule\b)([^>]*)>/;
                 const scriptMatch = processedContent.match(scriptRegex);
                 if (scriptMatch && scriptMatch.index !== undefined) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.6.11",
+	"version": "0.7.0",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"
@@ -60,11 +60,21 @@
 			"svelte": "./dist/components/index.js",
 			"default": "./dist/components/index.js"
 		},
+		"./components/*": {
+			"types": "./dist/components/*.d.ts",
+			"svelte": "./dist/components/*",
+			"default": "./dist/components/*"
+		},
 		"./labs/components": {
 			"types": "./dist/labs/index.d.ts",
 			"svelte": "./dist/labs/index.js",
 			"default": "./dist/labs/index.js"
 		},
+		"./labs/components/*": {
+			"types": "./dist/labs/*.d.ts",
+			"svelte": "./dist/labs/*",
+			"default": "./dist/labs/*"
+		},
 		"./actions": {
 			"default": "./dist/hooks/actions.js"
 		}