lapikit 0.0.0 → 0.0.1

package/dist/index.js

@@ -1,4 +1,4 @@
 // Reexport your entry components here
 export function helloWorld() {
-    console.log('Hello world!');
+    console.log('Hello world, this is lapikit!');
 }

package/dist/server/modules/ansi.d.ts

@@ -0,0 +1,41 @@
+export declare const ansi: {
+    color: {
+        red: (text: string) => string;
+        green: (text: string) => string;
+        yellow: (text: string) => string;
+        blue: (text: string) => string;
+        purple: (text: string) => string;
+        cyan: (text: string) => string;
+    };
+    variant: {
+        bold: (text: string) => string;
+        underline: (text: string) => string;
+        inverse: (text: string) => string;
+    };
+    bold: {
+        red: (text: string) => string;
+        green: (text: string) => string;
+        yellow: (text: string) => string;
+        blue: (text: string) => string;
+        purple: (text: string) => string;
+        cyan: (text: string) => string;
+    };
+    inverse: {
+        red: (text: string) => string;
+        green: (text: string) => string;
+        yellow: (text: string) => string;
+        blue: (text: string) => string;
+        purple: (text: string) => string;
+        cyan: (text: string) => string;
+    };
+    underline: {
+        red: (text: string) => string;
+        green: (text: string) => string;
+        yellow: (text: string) => string;
+        blue: (text: string) => string;
+        purple: (text: string) => string;
+        cyan: (text: string) => string;
+    };
+};
+export type Ansi = typeof ansi;
+export declare const sendConsole: (type: "info" | "error" | "warn" | "success" | undefined, msg: string) => void;

package/dist/server/modules/ansi.js

@@ -0,0 +1,55 @@
+const color = {
+    red: (text) => `\x1b[31m${text}\x1b[0m`,
+    green: (text) => `\x1b[32m${text}\x1b[0m`,
+    yellow: (text) => `\x1b[33m${text}\x1b[0m`,
+    blue: (text) => `\x1b[34m${text}\x1b[0m`,
+    purple: (text) => `\x1b[35m${text}\x1b[0m`,
+    cyan: (text) => `\x1b[36m${text}\x1b[0m`
+};
+const variant = {
+    bold: (text) => `\x1b[1m${text}\x1b[0m`,
+    underline: (text) => `\x1b[4m${text}\x1b[0m`,
+    inverse: (text) => `\x1b[7m${text}\x1b[0m`
+};
+const bold = {
+    red: (text) => `\x1b[1m\x1b[31m${text}\x1b[0m`,
+    green: (text) => `\x1b[1m\x1b[32m${text}\x1b[0m`,
+    yellow: (text) => `\x1b[1m\x1b[33m${text}\x1b[0m`,
+    blue: (text) => `\x1b[1m\x1b[34m${text}\x1b[0m`,
+    purple: (text) => `\x1b[1m\x1b[35m${text}\x1b[0m`,
+    cyan: (text) => `\x1b[1m\x1b[36m${text}\x1b[0m`
+};
+const inverse = {
+    red: (text) => `\x1b[7m\x1b[31m${text}\x1b[0m`,
+    green: (text) => `\x1b[7m\x1b[32m${text}\x1b[0m`,
+    yellow: (text) => `\x1b[7m\x1b[33m${text}\x1b[0m`,
+    blue: (text) => `\x1b[7m\x1b[34m${text}\x1b[0m`,
+    purple: (text) => `\x1b[7m\x1b[35m${text}\x1b[0m`,
+    cyan: (text) => `\x1b[7m\x1b[36m${text}\x1b[0m`
+};
+const underline = {
+    red: (text) => `\x1b[4m\x1b[31m${text}\x1b[0m`,
+    green: (text) => `\x1b[4m\x1b[32m${text}\x1b[0m`,
+    yellow: (text) => `\x1b[4m\x1b[33m${text}\x1b[0m`,
+    blue: (text) => `\x1b[4m\x1b[34m${text}\x1b[0m`,
+    purple: (text) => `\x1b[4m\x1b[35m${text}\x1b[0m`,
+    cyan: (text) => `\x1b[4m\x1b[36m${text}\x1b[0m`
+};
+export const ansi = {
+    color,
+    variant,
+    bold,
+    inverse,
+    underline
+};
+export const sendConsole = (type = 'info', msg) => {
+    const name = ansi.color.cyan('lapikit');
+    if (type === 'error')
+        console.error(name, ansi.bold.red('[error]'), msg);
+    else if (type === 'warn')
+        console.warn(name, ansi.bold.yellow('[warn]'), msg);
+    else if (type === 'success')
+        console.warn(name, ansi.bold.green('[success]'), msg);
+    else
+        console.log(name, ansi.bold.blue('[info]'), msg);
+};

package/dist/server/modules/css.d.ts

@@ -0,0 +1 @@
+export declare const processCSS: (minified?: boolean, normalize?: boolean) => Promise<void>;

package/dist/server/modules/css.js

@@ -0,0 +1,137 @@
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+import fs from 'fs';
+import fsPromises from 'fs/promises';
+import path from 'path';
+import { ansi, sendConsole } from './ansi.js';
+import { minify } from './minify.js';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const __components = path.resolve('src/components');
+// temps
+const breakpoints = {
+    _default: 0,
+    desktop: 1024,
+    tablet: '768vw',
+    mobile: 480
+};
+export const processCSS = async (minified, normalize) => {
+    console.log(ansi.bold.blue('Processing CSS...'));
+    const _normalize = fs.readFileSync(path.resolve(__dirname, '../../styles/normalize.css'), 'utf-8');
+    const _variables = fs.readFileSync(path.resolve(__dirname, '../../styles/variables.css'), 'utf-8');
+    let styles = `${_variables}\n`;
+    if (normalize)
+        styles += `${_normalize}\n`;
+    if (fs.existsSync(__components) && fs.statSync(__components).isDirectory()) {
+        const tresholds = {
+            _default: '',
+            static: '',
+            min: '',
+            max: '',
+            all: ''
+        };
+        function loadComponentCSS(directory) {
+            fs.readdirSync(directory).forEach((File) => {
+                const absolutePath = path.join(directory, File);
+                if (fs.statSync(absolutePath).isDirectory())
+                    return loadComponentCSS(absolutePath);
+                else if (absolutePath.endsWith('.css') && !absolutePath.includes('/_')) {
+                    const content = parser(fs.readFileSync(absolutePath, 'utf-8'));
+                    tresholds._default += content.allExtracted
+                        .replaceAll('[breakpoint|min]', '[breakpoint]')
+                        .replaceAll('[breakpoint|max]', '[breakpoint]')
+                        .replaceAll('[breakpoint|all]', '[breakpoint]');
+                    tresholds.static += content.defaultExtracted;
+                    tresholds.min += content.minExtracted.replaceAll('[breakpoint|min]', '[breakpoint]');
+                    tresholds.max += content.maxExtracted.replaceAll('[breakpoint|max]', '[breakpoint]');
+                    tresholds.all += content.allModifierExtracted.replaceAll('[breakpoint|all]', '[breakpoint]');
+                    return (styles += `${content.cleaned}\n`);
+                }
+            });
+        }
+        loadComponentCSS(path.resolve(__dirname, '../../components'));
+        for (const property in breakpoints) {
+            if (property !== '_default') {
+                const name = `.${/^\d/.test(property) ? `\\3${property}` : property}\\:`;
+                const value = typeof breakpoints[property] === 'number'
+                    ? `${breakpoints[property]}px`
+                    : breakpoints[property];
+                if (tresholds.static !== '' || tresholds.all !== '' || tresholds.min !== '') {
+                    styles += `@media screen and (min-width: ${value}) {\n`;
+                    if (tresholds.static !== '')
+                        styles += tresholds.static.replaceAll('[breakpoint]', name);
+                    if (tresholds.all !== '')
+                        styles += tresholds.all.replaceAll('[breakpoint]', name);
+                    if (tresholds.min !== '')
+                        styles += tresholds.min.replaceAll('[breakpoint]', name);
+                    styles += `}\n`;
+                }
+                if (tresholds.max !== '' || tresholds.all !== '') {
+                    styles += `@media screen and (max-width: ${value}) {\n`;
+                    if (tresholds.max !== '')
+                        styles += tresholds.max.replaceAll('[breakpoint]', name);
+                    if (tresholds.all !== '')
+                        styles += tresholds.all.replaceAll('[breakpoint]', name);
+                    styles += `}\n`;
+                }
+            }
+            else {
+                styles += tresholds._default.replaceAll('[breakpoint]', '.');
+            }
+        }
+    }
+    if (minified) {
+        styles = minify(styles);
+        sendConsole('success', 'css minified');
+    }
+    fsPromises.writeFile(path.resolve(__dirname, '../../styles.css'), styles);
+};
+const parser = (css) => {
+    const regex = /([^{]+)\{([^}]+)\}/g;
+    let match;
+    const matchesToRemove = [];
+    const extractedByType = {
+        allExtracted: [],
+        defaultExtracted: [],
+        minExtracted: [],
+        maxExtracted: [],
+        allModifierExtracted: []
+    };
+    while ((match = regex.exec(css)) !== null) {
+        const fullMatch = match[0];
+        const selectors = match[1].trim();
+        const body = match[2].trim();
+        const selectorsArray = selectors.split(',').map((sel) => sel.trim());
+        let matchedType = null;
+        if (selectorsArray.some((sel) => sel.includes('[breakpoint|min]'))) {
+            matchedType = 'minExtracted';
+        }
+        else if (selectorsArray.some((sel) => sel.includes('[breakpoint|max]'))) {
+            matchedType = 'maxExtracted';
+        }
+        else if (selectorsArray.some((sel) => sel.includes('[breakpoint|all]'))) {
+            matchedType = 'allModifierExtracted';
+        }
+        else if (selectorsArray.some((sel) => sel.includes('[breakpoint]'))) {
+            matchedType = 'defaultExtracted';
+        }
+        if (matchedType) {
+            const rule = `${selectors} {\n${body}\n}`;
+            extractedByType.allExtracted.push(rule);
+            extractedByType[matchedType].push(rule);
+            matchesToRemove.push(fullMatch);
+        }
+    }
+    let cleaned = css;
+    for (const rule of matchesToRemove) {
+        cleaned = cleaned.replace(rule, '').replace(/\n{2,}/g, '\n\n');
+    }
+    return {
+        allExtracted: extractedByType.allExtracted.join('\n\n').trim(),
+        defaultExtracted: extractedByType.defaultExtracted.join('\n\n').trim(),
+        minExtracted: extractedByType.minExtracted.join('\n\n').trim(),
+        maxExtracted: extractedByType.maxExtracted.join('\n\n').trim(),
+        allModifierExtracted: extractedByType.allModifierExtracted.join('\n\n').trim(),
+        cleaned: cleaned.trim()
+    };
+};

package/dist/server/modules/importer.d.ts

@@ -0,0 +1 @@
+export declare const importer: () => Promise<any>;

package/dist/server/modules/importer.js

@@ -0,0 +1,13 @@
+import path from 'path';
+import fs from 'fs';
+import { ansi } from './ansi.js';
+const app = process.cwd();
+const pathConfig = path.resolve(app, 'lapikit.config.js');
+export const importer = async () => {
+    if (!fs.existsSync(pathConfig)) {
+        console.error(ansi.color.cyan('lapikit'), ansi.bold.red('[error]'), 'config file not found\n', ansi.color.yellow('Could not find lapikit.config.js. See https://localhost/docs/kit/vite to learn more about the configuration file.'), '\n\n', ansi.color.blue('for initializing a new lapikit config, run:\n'), '     ' + ansi.variant.bold('npx lapikit init') + '  ' + ansi.bold.yellow('(preview)'), '\n\n');
+        process.exit(1);
+    }
+    const content = await import(pathConfig);
+    return content.default;
+};

package/dist/server/modules/minify.d.ts

@@ -0,0 +1 @@
+export declare const minify: (css: string) => string;

package/dist/server/modules/minify.js

@@ -0,0 +1,10 @@
+export const minify = (css) => {
+    const minified = css
+        .replace(/\s+/g, ' ')
+        .replace(/\/\*.*?\*\//g, '')
+        .replace(/;\s*}/g, '}')
+        .replace(/:\s+/g, ':')
+        .replace(/\s*([{};:])\s*/g, '$1')
+        .trim();
+    return minified;
+};

package/dist/server/vite.d.ts

@@ -0,0 +1,11 @@
+import type { ViteDevServer } from 'vite';
+interface LapikitPlugin {
+    normalize?: boolean;
+    minify?: boolean;
+}
+export declare function lapikit(options?: LapikitPlugin): Promise<{
+    name: string;
+    configResolved(): Promise<void>;
+    configureServer(server: ViteDevServer): Promise<void>;
+}>;
+export {};

package/dist/server/vite.js

@@ -0,0 +1,17 @@
+import { ansi } from './modules/ansi.js';
+import { importer } from './modules/importer.js';
+import { processCSS } from './modules/css.js';
+export async function lapikit(options = {}) {
+    return {
+        name: 'lapikit/vite.js',
+        async configResolved() {
+            console.log(ansi.bold.blue('Vite plugin loaded'), options);
+            const config = await importer();
+            await processCSS(options.minify, options.normalize);
+            // console.log('config', config);
+        },
+        async configureServer(server) {
+            // console.log(ansi.inverse.red('Vite server configured'), server);
+        }
+    };
+}

package/dist/styles/normalize.css

@@ -0,0 +1,123 @@
+html {
+	-webkit-text-size-adjust: 100%;
+	tab-size: 4;
+	line-height: 1.5;
+	box-sizing: border-box;
+	font-family: var(--font-sans, var(--kit-font-family-sans));
+}
+
+pre,
+code {
+	font-family: var(--font-mono, var(--kit-font-family-mono));
+}
+
+body {
+	margin: 0;
+}
+
+main {
+	display: block;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+	font: inherit;
+}
+
+button {
+	overflow: visible;
+}
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'],
+[role='button'] {
+	cursor: pointer;
+	color: inherit;
+}
+
+*:not(body) {
+	outline: none;
+}
+
+*,
+::after,
+::before,
+::backdrop {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	border: 0 solid;
+}
+
+*,
+::before,
+::after {
+	background-repeat: no-repeat;
+	box-sizing: inherit;
+}
+
+::before,
+::after {
+	text-decoration: inherit;
+	vertical-align: inherit;
+}
+
+[type='search'] {
+	-webkit-appearance: textfield;
+	appearance: textfield;
+	outline-offset: -2px;
+}
+
+ol,
+ul,
+menu {
+	list-style: initial;
+	margin-left: calc(var(--kit-spacing) * 5);
+}
+
+ol ul,
+ol ol,
+ul ul,
+ul ol {
+	padding-left: 1rem;
+}
+
+code {
+	border-radius: 0.25rem;
+	padding-block: 0.125rem;
+	padding-inline: 0.375rem;
+	position: relative;
+}
+
+sub,
+sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sup {
+	top: -0.5em;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+img {
+	border-style: none;
+}
+
+button,
+input,
+select,
+textarea {
+	background-color: transparent;
+	border-style: none;
+}

package/dist/styles/variables.css

@@ -0,0 +1,7 @@
+:root {
+	--kit-font-family-sans:
+		system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+		sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+	--kit-font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+	--kit-spacing: 0.25rem;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lapikit",
-	"version": "0.0.0",
+	"version": "0.0.1",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -32,7 +32,11 @@
 		".": {
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js"
-		}
+		},
+		"./vite": {
+			"default": "./dist/server/vite.js"
+		},
+		"./css": "./dist/styles.css"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"