lapikit 0.6.12 → 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/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.12",
+	"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"
 		}