lapikit 0.3.7 → 0.3.8

package/dist/entry-bundler.d.ts

@@ -1,6 +1,4 @@
-type LapikitPreprocessOptions = {
-    plugins?: string[];
-};
+import type { LapikitPreprocessOptions } from './labs/compiler/types/options.js';
 declare function lapikitPreprocess(options?: LapikitPreprocessOptions): {
     markup({ content }: {
         content: string;

package/dist/entry-bundler.js

@@ -1,107 +1,5 @@
-const components = ['btn'];
-function componentName(shortName) {
-    return 'Kit' + shortName.charAt(0).toUpperCase() + shortName.slice(1);
-}
-// plugins lapikit
-const lapikitPlugins = {
-    repl: {
-        components: ['repl'],
-        ref: '@lapikit/repl'
-    }
-};
+import { liliCore } from './labs/compiler/preprocess/index.js';
 function lapikitPreprocess(options) {
-    return {
-        markup({ content }) {
-            const allComponents = [...components];
-            const componentToRef = new Map();
-            components.forEach((comp) => {
-                componentToRef.set(comp, 'lapikit/labs/components');
-            });
-            // 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);
-                        });
-                    }
-                });
-            }
-            const hasComponent = allComponents.some((comp) => content.includes(`<kit:${comp}`));
-            if (!hasComponent)
-                return;
-            let processedContent = content;
-            const importedComponents = new Map();
-            let hasChanges = true;
-            while (hasChanges) {
-                hasChanges = false;
-                for (const shortName of allComponents) {
-                    const componentNameStr = componentName(shortName);
-                    const attrPattern = `(?:[^>"']|"[^"]*"|'[^']*')*?`;
-                    const selfClosingRegex = new RegExp(`<kit:${shortName}(${attrPattern})\\s*/>`, 'g');
-                    const pairRegex = new RegExp(`<kit:${shortName}(${attrPattern})>([\\s\\S]*?)<\\/kit:${shortName}\\s*>`, 'g');
-                    let newContent = processedContent.replace(selfClosingRegex, (fullMatch, attrs) => {
-                        hasChanges = true;
-                        const ref = componentToRef.get(shortName) || 'lapikit/labs/components';
-                        importedComponents.set(componentNameStr, ref);
-                        return `<${componentNameStr}${attrs} />`;
-                    });
-                    newContent = newContent.replace(pairRegex, (fullMatch, attrs, children) => {
-                        hasChanges = true;
-                        const ref = componentToRef.get(shortName) || 'lapikit/labs/components';
-                        importedComponents.set(componentNameStr, ref);
-                        return `<${componentNameStr}${attrs}>${children}</${componentNameStr}>`;
-                    });
-                    if (newContent !== processedContent) {
-                        processedContent = newContent;
-                    }
-                }
-            }
-            if (processedContent === content)
-                return;
-            if (importedComponents.size > 0) {
-                const importsByRef = new Map();
-                importedComponents.forEach((ref, component) => {
-                    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 scriptRegex = /<script(?![^>]*\bmodule\b)([^>]*)>/;
-                const scriptMatch = processedContent.match(scriptRegex);
-                if (scriptMatch && scriptMatch.index !== undefined) {
-                    const insertPos = scriptMatch.index + scriptMatch[0].length;
-                    processedContent =
-                        processedContent.slice(0, insertPos) + importLines + processedContent.slice(insertPos);
-                }
-                else {
-                    const moduleScriptMatch = processedContent.match(/<script[^>]*\bmodule\b[^>]*>/);
-                    if (moduleScriptMatch && moduleScriptMatch.index !== undefined) {
-                        const moduleScriptEnd = processedContent.indexOf('</script>', moduleScriptMatch.index) + '</script>'.length;
-                        processedContent =
-                            processedContent.slice(0, moduleScriptEnd) +
-                                `\n\n<script>${importLines}\n</script>` +
-                                processedContent.slice(moduleScriptEnd);
-                    }
-                    else {
-                        processedContent = `<script>${importLines}\n</script>\n\n` + processedContent;
-                    }
-                }
-            }
-            return {
-                code: processedContent
-            };
-        }
-    };
+    return liliCore(options);
 }
 export { lapikitPreprocess };

package/dist/labs/compiler/components.d.ts

@@ -0,0 +1,2 @@
+declare const lapikitComponents: readonly string[];
+export default lapikitComponents;

package/dist/labs/compiler/components.js

@@ -0,0 +1,2 @@
+const lapikitComponents = ['sheet'];
+export default lapikitComponents;

package/dist/labs/compiler/index.d.ts

@@ -0,0 +1 @@
+export * from './preprocess/index.js';

package/dist/labs/compiler/index.js

@@ -0,0 +1 @@
+export * from './preprocess/index.js';

package/dist/labs/compiler/mapped-code.d.ts

@@ -0,0 +1,27 @@
+import type { SClassProp, SStyleProp } from './types/index.js';
+import type { PropValue } from '../utils/types/index.js';
+/**
+ * Computes a string of class names based on the provided sClass and classDirectiveProps.
+ * @param sClass - The s-class property which can be a string, array, or object.
+ * @param classDirectiveProps - An object containing s-class_xxx directives.
+ * @returns A string of class names.
+ */
+export declare function computeSClasses(sClass: SClassProp, classDirectiveProps: Record<string, unknown>): string;
+/**
+ * Computes a string of style declarations based on the provided sStyle and styleDirectiveProps.
+ * @param sStyle - The s-style property which is an object of style key-value pairs.
+ * @param styleDirectiveProps - An object containing s-style_xxx directives.
+ * @returns A string of style declarations.
+ */
+export declare function computeSStyles(sStyle: SStyleProp, styleDirectiveProps: Record<string, unknown>): string;
+/**
+ * Makes component props by separating s-class and s-style directives from other props.
+ * Optimized to use a single pass instead of three separate iterations.
+ * @param props The original props object containing all props.
+ * @returns An object containing separated classProps, styleProps, and restProps.
+ */
+export declare function makeComponentProps(props: Record<string, unknown>): {
+    classProps: Record<string, PropValue>;
+    styleProps: Record<string, PropValue>;
+    restProps: Record<string, unknown>;
+};

package/dist/labs/compiler/mapped-code.js

@@ -0,0 +1,103 @@
+/**
+ * Computes a string of class names based on the provided sClass and classDirectiveProps.
+ * @param sClass - The s-class property which can be a string, array, or object.
+ * @param classDirectiveProps - An object containing s-class_xxx directives.
+ * @returns A string of class names.
+ */
+export function computeSClasses(sClass, classDirectiveProps) {
+    const classes = [];
+    // s-class string
+    if (typeof sClass === 'string' && sClass) {
+        classes.push(sClass);
+    }
+    // s-class array
+    if (Array.isArray(sClass)) {
+        for (const value of sClass) {
+            if (typeof value === 'string' && value) {
+                classes.push(value);
+            }
+        }
+    }
+    // s-class object
+    if (sClass && typeof sClass === 'object' && !Array.isArray(sClass)) {
+        const entries = Object.entries(sClass);
+        if (entries.length > 0) {
+            for (const [key, value] of entries) {
+                if (value === true) {
+                    classes.push(key);
+                }
+                else if (typeof value === 'string' && value) {
+                    classes.push(value);
+                }
+            }
+        }
+    }
+    // s-class_xxx
+    const classEntries = Object.entries(classDirectiveProps);
+    if (classEntries.length > 0) {
+        for (const [key, value] of classEntries) {
+            // Use slice instead of replace for better performance (8 = 's-class_'.length)
+            const base = key.slice(8);
+            if (value === true) {
+                classes.push(base);
+            }
+            else if (typeof value === 'string' && value) {
+                classes.push(`${base}${value}`);
+            }
+        }
+    }
+    return classes.join(' ');
+}
+/**
+ * Computes a string of style declarations based on the provided sStyle and styleDirectiveProps.
+ * @param sStyle - The s-style property which is an object of style key-value pairs.
+ * @param styleDirectiveProps - An object containing s-style_xxx directives.
+ * @returns A string of style declarations.
+ */
+export function computeSStyles(sStyle, styleDirectiveProps) {
+    const styles = [];
+    if (sStyle && typeof sStyle === 'object') {
+        const entries = Object.entries(sStyle);
+        if (entries.length > 0) {
+            for (const [key, value] of entries) {
+                if (value) {
+                    styles.push(`${key}: ${value}`);
+                }
+            }
+        }
+    }
+    const styleEntries = Object.entries(styleDirectiveProps);
+    if (styleEntries.length > 0) {
+        for (const [key, value] of styleEntries) {
+            // Use slice instead of replace for better performance (8 = 's-style_'.length)
+            const base = key.slice(8);
+            if (value) {
+                styles.push(`${base}: ${value}`);
+            }
+        }
+    }
+    return styles.join('; ');
+}
+/**
+ * Makes component props by separating s-class and s-style directives from other props.
+ * Optimized to use a single pass instead of three separate iterations.
+ * @param props The original props object containing all props.
+ * @returns An object containing separated classProps, styleProps, and restProps.
+ */
+export function makeComponentProps(props) {
+    const classProps = {};
+    const styleProps = {};
+    const restProps = {};
+    for (const [key, value] of Object.entries(props)) {
+        if (key.startsWith('s-class_')) {
+            classProps[key] = value;
+        }
+        else if (key.startsWith('s-style_')) {
+            styleProps[key] = value;
+        }
+        else if (!key.startsWith('s-class') && !key.startsWith('s-style')) {
+            restProps[key] = value;
+        }
+    }
+    return { classProps, styleProps, restProps };
+}

package/dist/labs/compiler/plugins.d.ts

@@ -0,0 +1,7 @@
+declare const lapikitPlugins: {
+    readonly repl: {
+        readonly components: readonly ["repl"];
+        readonly ref: "@lapikit/repl";
+    };
+};
+export default lapikitPlugins;

package/dist/labs/compiler/plugins.js

@@ -0,0 +1,7 @@
+const lapikitPlugins = {
+    repl: {
+        components: ['repl'],
+        ref: '@lapikit/repl'
+    }
+};
+export default lapikitPlugins;

package/dist/labs/compiler/preprocess/decode-sourcemap.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo, KitComponentScan } from '../types/index.js';
+export declare const decodeSourceMap: (content: string, componentInfo: Map<string, ComponentInfo>) => KitComponentScan;

package/dist/labs/compiler/preprocess/decode-sourcemap.js

@@ -0,0 +1,106 @@
+import { findTagEnd } from './finding.js';
+export const decodeSourceMap = (content, componentInfo) => {
+    const importedComponents = new Map();
+    const parts = [];
+    let changed = false;
+    let index = 0;
+    const length = content.length;
+    while (index < length) {
+        const nextLt = content.indexOf('<', index);
+        if (nextLt === -1) {
+            parts.push(content.slice(index));
+            break;
+        }
+        if (nextLt > index) {
+            parts.push(content.slice(index, nextLt));
+        }
+        const ch = content[nextLt + 1];
+        const isClosing = ch === '/';
+        if (content.startsWith('<script', nextLt) || content.startsWith('<style', nextLt)) {
+            const tagName = content.startsWith('<script', nextLt) ? 'script' : 'style';
+            const nameEnd = nextLt + tagName.length + 1;
+            const afterName = content[nameEnd];
+            if (afterName && !/[\s>/]/.test(afterName)) {
+                parts.push('<');
+                index = nextLt + 1;
+                continue;
+            }
+            const openEnd = findTagEnd(content, nameEnd);
+            if (openEnd === -1) {
+                parts.push(content.slice(nextLt));
+                break;
+            }
+            const closeTag = `</${tagName}>`;
+            const closeStart = content.indexOf(closeTag, openEnd + 1);
+            if (closeStart === -1) {
+                parts.push(content.slice(nextLt));
+                break;
+            }
+            const closeEnd = closeStart + closeTag.length;
+            parts.push(content.slice(nextLt, closeEnd));
+            index = closeEnd;
+            continue;
+        }
+        const isKitTag = (!isClosing && content.startsWith('<kit:', nextLt)) ||
+            (isClosing && content.startsWith('</kit:', nextLt));
+        if (!isKitTag) {
+            parts.push('<');
+            index = nextLt + 1;
+            continue;
+        }
+        const prefixLength = isClosing ? 6 : 5;
+        const nameStart = nextLt + prefixLength;
+        let nameEnd = nameStart;
+        while (nameEnd < length) {
+            const c = content[nameEnd];
+            if (c === '>' || c === '/' || c === ' ' || c === '\n' || c === '\t' || c === '\r') {
+                break;
+            }
+            nameEnd++;
+        }
+        const shortName = content.slice(nameStart, nameEnd);
+        if (!shortName) {
+            parts.push('<');
+            index = nextLt + 1;
+            continue;
+        }
+        const info = componentInfo.get(shortName);
+        const isKnown = info !== undefined;
+        if (isClosing) {
+            const tagEnd = content.indexOf('>', nameEnd);
+            if (tagEnd === -1) {
+                parts.push(content.slice(nextLt));
+                break;
+            }
+            if (isKnown) {
+                importedComponents.set(info.name, info.ref);
+                parts.push(`</${info.name}>`);
+                changed = true;
+            }
+            else {
+                parts.push(content.slice(nextLt, tagEnd + 1));
+            }
+            index = tagEnd + 1;
+            continue;
+        }
+        const tagEnd = findTagEnd(content, nameEnd);
+        if (tagEnd === -1) {
+            parts.push(content.slice(nextLt));
+            break;
+        }
+        if (isKnown) {
+            importedComponents.set(info.name, info.ref);
+            parts.push(`<${info.name}${content.slice(nameEnd, tagEnd + 1)}`);
+            changed = true;
+        }
+        else {
+            parts.push(content.slice(nextLt, tagEnd + 1));
+        }
+        index = tagEnd + 1;
+    }
+    return {
+        code: changed ? parts.join('') : content,
+        changed,
+        importedComponents
+    };
+};

package/dist/labs/compiler/preprocess/finding.d.ts

@@ -0,0 +1 @@
+export declare const findTagEnd: (content: string, start: number) => number;

package/dist/labs/compiler/preprocess/finding.js

@@ -0,0 +1,49 @@
+export const findTagEnd = (content, start) => {
+    let inSingle = false;
+    let inDouble = false;
+    let inTemplate = false;
+    let braceDepth = 0;
+    for (let i = start; i < content.length; i++) {
+        const ch = content[i];
+        const prev = i > 0 ? content[i - 1] : '';
+        if (inSingle) {
+            if (ch === "'" && prev !== '\\')
+                inSingle = false;
+            continue;
+        }
+        if (inDouble) {
+            if (ch === '"' && prev !== '\\')
+                inDouble = false;
+            continue;
+        }
+        if (inTemplate) {
+            if (ch === '`' && prev !== '\\')
+                inTemplate = false;
+            continue;
+        }
+        if (ch === "'") {
+            inSingle = true;
+            continue;
+        }
+        if (ch === '"') {
+            inDouble = true;
+            continue;
+        }
+        if (ch === '`') {
+            inTemplate = true;
+            continue;
+        }
+        if (ch === '{') {
+            braceDepth++;
+            continue;
+        }
+        if (ch === '}' && braceDepth > 0) {
+            braceDepth--;
+            continue;
+        }
+        if (braceDepth === 0 && ch === '>') {
+            return i;
+        }
+    }
+    return -1;
+};

package/dist/labs/compiler/preprocess/index.d.ts

@@ -0,0 +1 @@
+export * from './lili.js';

package/dist/labs/compiler/preprocess/index.js

@@ -0,0 +1 @@
+export * from './lili.js';

package/dist/labs/compiler/preprocess/lili.d.ts

@@ -0,0 +1,9 @@
+import type { LapikitPreprocessOptions } from '../types/index.js';
+export declare function liliCore(options?: LapikitPreprocessOptions): {
+    markup({ content }: {
+        content: string;
+        filename?: string;
+    }): {
+        code: string;
+    } | undefined;
+};

package/dist/labs/compiler/preprocess/lili.js

@@ -0,0 +1,82 @@
+import { componentName, lapikitImportsRef } from './source-import.js';
+import { decodeSourceMap } from './decode-sourcemap.js';
+// imports components and plugins
+import lapikitComponents from '../components.js';
+import lapikitPlugins from '../plugins.js';
+export function liliCore(options) {
+    return {
+        markup({ content }) {
+            const allComponents = [...lapikitComponents];
+            const componentToRef = new Map();
+            lapikitComponents.forEach((comp) => {
+                componentToRef.set(comp, lapikitImportsRef);
+            });
+            // 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);
+                        });
+                    }
+                });
+            }
+            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;
+            if (importedComponents.size > 0) {
+                const importsByRef = new Map();
+                importedComponents.forEach((ref, component) => {
+                    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 scriptRegex = /<script(?![^>]*\bmodule\b)([^>]*)>/;
+                const scriptMatch = processedContent.match(scriptRegex);
+                if (scriptMatch && scriptMatch.index !== undefined) {
+                    const insertPos = scriptMatch.index + scriptMatch[0].length;
+                    processedContent =
+                        processedContent.slice(0, insertPos) + importLines + processedContent.slice(insertPos);
+                }
+                else {
+                    const moduleScriptMatch = processedContent.match(/<script[^>]*\bmodule\b[^>]*>/);
+                    if (moduleScriptMatch && moduleScriptMatch.index !== undefined) {
+                        const moduleScriptEnd = processedContent.indexOf('</script>', moduleScriptMatch.index) + '</script>'.length;
+                        processedContent =
+                            processedContent.slice(0, moduleScriptEnd) +
+                                `\n\n<script>${importLines}\n</script>` +
+                                processedContent.slice(moduleScriptEnd);
+                    }
+                    else {
+                        processedContent = `<script>${importLines}\n</script>\n\n` + processedContent;
+                    }
+                }
+            }
+            return {
+                code: processedContent
+            };
+        }
+    };
+}

package/dist/labs/compiler/preprocess/source-import.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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 const lapikitImportsRef = "lapikit/labs/components";

package/dist/labs/compiler/preprocess/source-import.js

@@ -0,0 +1,9 @@
+/**
+ * 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 function componentName(shortName) {
+    return 'Kit' + shortName.charAt(0).toUpperCase() + shortName.slice(1);
+}
+export const lapikitImportsRef = 'lapikit/labs/components';

package/dist/labs/compiler/types/dom.d.ts

@@ -0,0 +1,2 @@
+export type SClassProp = string | string[] | Record<string, boolean | string> | undefined;
+export type SStyleProp = Record<string, boolean | string> | undefined;

package/dist/labs/compiler/types/dom.js

@@ -0,0 +1 @@
+export {};

package/dist/labs/compiler/types/index.d.ts

@@ -0,0 +1,2 @@
+export type * from './dom.js';
+export * from './options.js';

package/dist/labs/compiler/types/index.js

@@ -0,0 +1 @@
+export * from './options.js';

package/dist/labs/compiler/types/options.d.ts

@@ -0,0 +1,12 @@
+export type LapikitPreprocessOptions = {
+    plugins?: string[];
+};
+export type KitComponentScan = {
+    code: string;
+    changed: boolean;
+    importedComponents: Map<string, string>;
+};
+export type ComponentInfo = {
+    name: string;
+    ref: string;
+};

package/dist/labs/compiler/types/options.js

@@ -0,0 +1 @@
+export {};

package/dist/labs/components/index.d.ts

@@ -1 +1 @@
-export { default as KitBtn } from './btn/btn.svelte';
+export { default as KitSheet } from './sheet/sheet.svelte';

package/dist/labs/components/index.js

@@ -1,2 +1,2 @@
 // components
-export { default as KitBtn } from './btn/btn.svelte';
+export { default as KitSheet } from './sheet/sheet.svelte';

package/dist/labs/components/sheet/sheet.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	/**
+	 * Sheet component
+	 * @description A simple sheet component for experimentation for developers Lapikit. Please don't use it in production.
+	 */
+
+	import { useClassName, useStyles } from '../../utils/index.js';
+	import { makeComponentProps } from '../../compiler/mapped-code.js';
+
+	let {
+		class: className,
+		style: styleAttr,
+		children,
+		's-class': sClass,
+		's-style': sStyle,
+		...rest
+	} = $props();
+
+	let { classProps, styleProps, restProps } = $derived(
+		makeComponentProps(rest as Record<string, unknown>)
+	);
+
+	let componentClass = $derived(
+		useClassName({
+			baseClass: 'kit-sheet',
+			className,
+			sClass,
+			classProps
+		})
+	);
+
+	let componentStyle = $derived(
+		useStyles({
+			styleAttr,
+			sStyle,
+			styleProps
+		})
+	);
+</script>
+
+<div class={componentClass} style={componentStyle} {...restProps}>
+	{@render children()}
+</div>
+
+<style>
+	.kit-sheet {
+		border: 1px solid rgb(0, 0, 0);
+	}
+</style>

package/dist/labs/components/sheet/sheet.svelte.d.ts

@@ -0,0 +1,7 @@
+declare const Sheet: import("svelte").Component<{
+    class: any;
+    style: any;
+    children: any;
+} & Record<string, any>, {}, "">;
+type Sheet = ReturnType<typeof Sheet>;
+export default Sheet;

package/dist/labs/utils/components.d.ts

@@ -0,0 +1,18 @@
+import type { useClassNameProps, useStylesProps } from './types/index.js';
+/**
+ * useClassName - Utility to compute class names for a component.
+ * @param baseClass - The base class name for the component.
+ * @param className - Additional class names as a string.
+ * @param sClass - The s-class property which can be a string, array, or object.
+ * @param classProps - An object containing s-class_xxx directives.
+ * @returns A computed class string.
+ */
+export declare function useClassName({ baseClass, className, sClass, classProps }?: useClassNameProps): string;
+/**
+ * useStyles - Utility to compute style declarations for a component (optimized pure function).
+ * @param styleAttr - Inline style attribute as a string.
+ * @param sStyle - The s-style property which is an object of style key-value pairs.
+ * @param styleProps - An object containing s-style_xxx directives.
+ * @returns A computed style string.
+ */
+export declare function useStyles({ styleAttr, sStyle, styleProps }?: useStylesProps): string;

package/dist/labs/utils/components.js

@@ -0,0 +1,92 @@
+/**
+ * useClassName - Utility to compute class names for a component.
+ * @param baseClass - The base class name for the component.
+ * @param className - Additional class names as a string.
+ * @param sClass - The s-class property which can be a string, array, or object.
+ * @param classProps - An object containing s-class_xxx directives.
+ * @returns A computed class string.
+ */
+export function useClassName({ baseClass = '', className, sClass, classProps } = {}) {
+    const classes = [];
+    if (baseClass) {
+        classes.push(baseClass);
+    }
+    if (typeof sClass === 'string' && sClass) {
+        classes.push(sClass);
+    }
+    if (Array.isArray(sClass)) {
+        for (const value of sClass) {
+            if (typeof value === 'string' && value) {
+                classes.push(value);
+            }
+        }
+    }
+    if (sClass && typeof sClass === 'object' && !Array.isArray(sClass)) {
+        const entries = Object.entries(sClass);
+        if (entries.length > 0) {
+            for (const [key, value] of entries) {
+                if (value === true) {
+                    classes.push(key);
+                }
+                else if (typeof value === 'string' && value) {
+                    classes.push(value);
+                }
+            }
+        }
+    }
+    if (classProps) {
+        const entries = Object.entries(classProps);
+        if (entries.length > 0) {
+            for (const [key, value] of entries) {
+                // Use slice instead of replace for better performance (8 = 's-class_'.length)
+                const base = key.slice(8);
+                if (value === true) {
+                    classes.push(base);
+                }
+                else if (typeof value === 'string' && value) {
+                    classes.push(`${base}${value}`);
+                }
+            }
+        }
+    }
+    if (className) {
+        classes.push(className);
+    }
+    return classes.filter(Boolean).join(' ');
+}
+/**
+ * useStyles - Utility to compute style declarations for a component (optimized pure function).
+ * @param styleAttr - Inline style attribute as a string.
+ * @param sStyle - The s-style property which is an object of style key-value pairs.
+ * @param styleProps - An object containing s-style_xxx directives.
+ * @returns A computed style string.
+ */
+export function useStyles({ styleAttr, sStyle, styleProps } = {}) {
+    const styles = [];
+    if (sStyle && typeof sStyle === 'object') {
+        const entries = Object.entries(sStyle);
+        if (entries.length > 0) {
+            for (const [key, value] of entries) {
+                if (value) {
+                    styles.push(`${key}: ${value}`);
+                }
+            }
+        }
+    }
+    if (styleProps) {
+        const entries = Object.entries(styleProps);
+        if (entries.length > 0) {
+            for (const [key, value] of entries) {
+                // Use slice instead of replace for better performance (8 = 's-style_'.length)
+                const base = key.slice(8);
+                if (value) {
+                    styles.push(`${base}: ${value}`);
+                }
+            }
+        }
+    }
+    if (styleAttr) {
+        styles.push(styleAttr);
+    }
+    return styles.filter(Boolean).join('; ');
+}

package/dist/labs/utils/index.d.ts

@@ -1 +1 @@
-export * from './props.js';
+export * from './components.js';

package/dist/labs/utils/index.js

@@ -1 +1 @@
-export * from './props.js';
+export * from './components.js';

package/dist/labs/utils/types/index.d.ts

@@ -0,0 +1,13 @@
+import type { SClassProp, SStyleProp } from '../../compiler/types/index.js';
+export type PropValue = string | boolean | number | null | undefined;
+export interface useClassNameProps {
+    baseClass?: string;
+    className?: string;
+    sClass?: SClassProp;
+    classProps?: Record<string, PropValue>;
+}
+export interface useStylesProps {
+    styleAttr?: string;
+    sStyle?: SStyleProp;
+    styleProps?: Record<string, PropValue>;
+}

package/dist/labs/utils/types/index.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.3.7",
+	"version": "0.3.8",
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public"

package/dist/labs/components/btn/btn.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-	import { useClassName, useStyles } from './btn.svelte.js';
-	import { splitSyntheticProps } from '../../utils/index.js';
-
-	let {
-		class: className,
-		style: styleAttr,
-		children,
-		's-class': sClass,
-		's-style': sStyle,
-		...rest
-	} = $props();
-
-	let { classDirectiveProps, styleDirectiveProps, regularProps } = $derived(
-		splitSyntheticProps(rest as Record<string, unknown>)
-	);
-
-	let finalClass = $derived(
-		useClassName({
-			baseClass: 'kit-button',
-			className,
-			sClass,
-			classDirectiveProps
-		}).value
-	);
-
-	let finalStyle = $derived(
-		useStyles({
-			styleAttr,
-			sStyle,
-			styleDirectiveProps
-		}).value
-	);
-</script>
-
-<button class={finalClass} style={finalStyle} {...regularProps}>
-	{@render children()}
-</button>
-
-<style>
-	.kit-btn {
-		border: 1px solid rgb(0, 0, 0);
-	}
-</style>

package/dist/labs/components/btn/btn.svelte.d.ts

@@ -1,7 +0,0 @@
-declare const Btn: import("svelte").Component<{
-    class: any;
-    style: any;
-    children: any;
-} & Record<string, any>, {}, "">;
-type Btn = ReturnType<typeof Btn>;
-export default Btn;

package/dist/labs/components/btn/btn.svelte.js

@@ -1,71 +0,0 @@
-export function useClassName({ baseClass = '', className, sClass, classDirectiveProps } = {}) {
-    return {
-        get value() {
-            const classes = [];
-            if (baseClass) {
-                classes.push(baseClass);
-            }
-            if (typeof sClass === 'string' && sClass) {
-                classes.push(sClass);
-            }
-            if (Array.isArray(sClass)) {
-                for (const value of sClass) {
-                    if (typeof value === 'string' && value) {
-                        classes.push(value);
-                    }
-                }
-            }
-            if (sClass && typeof sClass === 'object' && !Array.isArray(sClass)) {
-                Object.entries(sClass).forEach(([key, value]) => {
-                    if (value === true) {
-                        classes.push(key);
-                    }
-                    else if (typeof value === 'string' && value) {
-                        classes.push(value);
-                    }
-                });
-            }
-            if (classDirectiveProps) {
-                Object.entries(classDirectiveProps).forEach(([key, value]) => {
-                    const base = key.replace('s-class_', '');
-                    if (value === true) {
-                        classes.push(base);
-                    }
-                    else if (typeof value === 'string' && value) {
-                        classes.push(`${base}${value}`);
-                    }
-                });
-            }
-            if (className) {
-                classes.push(className);
-            }
-            return classes.filter(Boolean).join(' ');
-        }
-    };
-}
-export function useStyles({ styleAttr, sStyle, styleDirectiveProps } = {}) {
-    return {
-        get value() {
-            const styles = [];
-            if (sStyle && typeof sStyle === 'object') {
-                Object.entries(sStyle).forEach(([key, value]) => {
-                    if (value) {
-                        styles.push(`${key}: ${value}`);
-                    }
-                });
-            }
-            if (styleDirectiveProps) {
-                Object.entries(styleDirectiveProps).forEach(([key, value]) => {
-                    const base = key.replace('s-style_', '');
-                    if (value) {
-                        styles.push(`${base}: ${value}`);
-                    }
-                });
-            }
-            if (styleAttr) {
-                styles.push(styleAttr);
-            }
-            return styles.filter(Boolean).join('; ');
-        }
-    };
-}

package/dist/labs/utils/props.d.ts

@@ -1,15 +0,0 @@
-export type SClassProp = string | string[] | Record<string, boolean | string> | undefined;
-export type SStyleProp = Record<string, boolean | string> | undefined;
-export declare function splitSyntheticProps(allProps: Record<string, unknown>): {
-    classDirectiveProps: {
-        [k: string]: unknown;
-    };
-    styleDirectiveProps: {
-        [k: string]: unknown;
-    };
-    regularProps: {
-        [k: string]: unknown;
-    };
-};
-export declare function computeSClasses(sClass: SClassProp, classDirectiveProps: Record<string, unknown>): string;
-export declare function computeSStyles(sStyle: SStyleProp, styleDirectiveProps: Record<string, unknown>): string;

package/dist/labs/utils/props.js

@@ -1,60 +0,0 @@
-export function splitSyntheticProps(allProps) {
-    const classDirectiveProps = Object.fromEntries(Object.entries(allProps).filter(([key]) => key.startsWith('s-class_')));
-    const styleDirectiveProps = Object.fromEntries(Object.entries(allProps).filter(([key]) => key.startsWith('s-style_')));
-    const regularProps = Object.fromEntries(Object.entries(allProps).filter(([key]) => !key.startsWith('s-class') && !key.startsWith('s-style')));
-    return { classDirectiveProps, styleDirectiveProps, regularProps };
-}
-export function computeSClasses(sClass, classDirectiveProps) {
-    const classes = [];
-    // s-class string
-    if (typeof sClass === 'string' && sClass) {
-        classes.push(sClass);
-    }
-    // s-class array
-    if (Array.isArray(sClass)) {
-        for (const value of sClass) {
-            if (typeof value === 'string' && value) {
-                classes.push(value);
-            }
-        }
-    }
-    // s-class object
-    if (sClass && typeof sClass === 'object' && !Array.isArray(sClass)) {
-        Object.entries(sClass).forEach(([key, value]) => {
-            if (value === true) {
-                classes.push(key);
-            }
-            else if (typeof value === 'string' && value) {
-                classes.push(value);
-            }
-        });
-    }
-    // s-class_xxx
-    Object.entries(classDirectiveProps).forEach(([key, value]) => {
-        const base = key.replace('s-class_', '');
-        if (value === true) {
-            classes.push(base);
-        }
-        else if (typeof value === 'string' && value) {
-            classes.push(`${base}${value}`);
-        }
-    });
-    return classes.join(' ');
-}
-export function computeSStyles(sStyle, styleDirectiveProps) {
-    const styles = [];
-    if (sStyle && typeof sStyle === 'object') {
-        Object.entries(sStyle).forEach(([key, value]) => {
-            if (value) {
-                styles.push(`${key}: ${value}`);
-            }
-        });
-    }
-    Object.entries(styleDirectiveProps).forEach(([key, value]) => {
-        const base = key.replace('s-style_', '');
-        if (value) {
-            styles.push(`${base}: ${value}`);
-        }
-    });
-    return styles.join('; ');
-}