lapikit 0.0.0-insiders.f8dce9a → 0.0.0-insiders.fac243e

package/dist/components/app/app.css

@@ -15,7 +15,7 @@
 	left: 0;
 	height: 100%;
 	width: 100%;
-	background-color: color-mix(in oklab, black 70%, transparent);
+	background-color: color-mix(in oklab, black 75%, transparent);
 	z-index: 9000;
 	cursor: default;
 }

package/dist/components/textfield/textfield.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { TextfieldProps } from './types.js';
-declare const Textfield: import("svelte").Component<TextfieldProps, {}, "value" | "ref">;
+declare const Textfield: import("svelte").Component<TextfieldProps, {}, "ref" | "value">;
 type Textfield = ReturnType<typeof Textfield>;
 export default Textfield;

package/dist/entry-bundler.d.ts

@@ -1,4 +1,7 @@
-declare function lapikitPreprocess(): {
+type LapikitPreprocessOptions = {
+    plugins?: string[];
+};
+declare function lapikitPreprocess(options?: LapikitPreprocessOptions): {
     markup({ content }: {
         content: string;
         filename?: string;

package/dist/entry-bundler.js

@@ -2,23 +2,58 @@ const components = ['btn'];
 function componentName(shortName) {
     return 'Kit' + shortName.charAt(0).toUpperCase() + shortName.slice(1);
 }
-function lapikitPreprocess() {
+// plugins lapikit
+const lapikitPlugins = {
+    repl: {
+        components: ['repl'],
+        ref: '@lapikit/repl'
+    }
+};
+function lapikitPreprocess(options) {
     return {
         markup({ content }) {
-            const hasComponent = components.some((comp) => content.includes(`<lpk:${comp}`));
+            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 Set();
+            const importedComponents = new Map();
             let hasChanges = true;
             while (hasChanges) {
                 hasChanges = false;
-                for (const shortName of components) {
+                for (const shortName of allComponents) {
                     const componentNameStr = componentName(shortName);
-                    const regex = new RegExp(`<lpk:${shortName}([\\s\\S]*?)>([\\s\\S]*?)<\\/lpk:${shortName}\\s*>`, 'g');
-                    const newContent = processedContent.replace(regex, (fullMatch, attrs, children) => {
+                    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;
-                        importedComponents.add(componentNameStr);
+                        const ref = componentToRef.get(shortName) || 'lapikit/labs/components';
+                        importedComponents.set(componentNameStr, ref);
                         return `<${componentNameStr}${attrs}>${children}</${componentNameStr}>`;
                     });
                     if (newContent !== processedContent) {
@@ -29,15 +64,25 @@ function lapikitPreprocess() {
             if (processedContent === content)
                 return;
             if (importedComponents.size > 0) {
-                const imports = Array.from(importedComponents).join(', ');
+                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) +
-                            `\n\timport { ${imports} } from 'lapikit/labs/components';` +
-                            processedContent.slice(insertPos);
+                        processedContent.slice(0, insertPos) + importLines + processedContent.slice(insertPos);
                 }
                 else {
                     const moduleScriptMatch = processedContent.match(/<script[^>]*\bmodule\b[^>]*>/);
@@ -45,13 +90,11 @@ function lapikitPreprocess() {
                         const moduleScriptEnd = processedContent.indexOf('</script>', moduleScriptMatch.index) + '</script>'.length;
                         processedContent =
                             processedContent.slice(0, moduleScriptEnd) +
-                                `\n\n<script>\n\timport { ${imports} } from 'lapikit/labs/components';\n</script>` +
+                                `\n\n<script>${importLines}\n</script>` +
                                 processedContent.slice(moduleScriptEnd);
                     }
                     else {
-                        processedContent =
-                            `<script>\n\timport { ${imports} } from 'lapikit/labs/components';\n</script>\n\n` +
-                                processedContent;
+                        processedContent = `<script>${importLines}\n</script>\n\n` + processedContent;
                     }
                 }
             }

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

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { useClassName, useStyles } from './btn.svelte.js';
+	import { type SClassProp, type SStyleProp, splitSyntheticProps } from '../../utils/index.js';
+
+	interface Btn {
+		id?: string;
+		class?: string;
+		style?: string;
+		[rest: string]: any;
+		className?: string | undefined | null | Array<string | undefined | null>;
+	}
+
+	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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,71 @@
+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/components/index.d.ts

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

package/dist/labs/components/index.js

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

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

@@ -0,0 +1 @@
+export * from "./props.js";

package/dist/labs/utils/index.js

@@ -0,0 +1 @@
+export * from "./props.js";

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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,60 @@
+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('; ');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lapikit",
-  "version": "0.0.0-insiders.f8dce9a",
+  "version": "0.0.0-insiders.fac243e",
   "license": "MIT",
   "publishConfig": {
     "access": "public"

package/dist/labs/components/button/button.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-	let { children, ...rest } = $props();
-</script>
-
-<button {...rest}>
-	{@render children()}
-</button>
-
-<style>
-	button {
-		padding: 0.5em 1em;
-		border: none;
-		border-radius: 4px;
-		background-color: #007bff;
-		color: white;
-		cursor: pointer;
-		font-size: 1em;
-		transition: background-color 0.3s ease;
-	}
-
-	button:hover {
-		background-color: #0056b3;
-	}
-</style>

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

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