kimu-core 0.4.1

package/src/assets/style.css

@@ -0,0 +1,116 @@
+/*
+This file can be freely modified by developers.
+Changes made to this page are not subject to the publication requirement of the MPL framework license.
+*/
+
+/* Base styles with fallback values */
+:root {
+  /* Default theme colors (overridden by theme module if installed) */
+  /* These provide basic styling when no theme module is active */
+  
+  /* Primary colors */
+  --kimu-primary: #667eea;
+  --kimu-primary-light: #818cf8;
+  --kimu-primary-dark: #5a67d8;
+  --kimu-text-on-primary: #ffffff;
+  
+  /* Accent colors */
+  --kimu-accent: #764ba2;
+  --kimu-accent-light: #9f7aea;
+  --kimu-accent-dark: #6b46c1;
+  --kimu-text-on-accent: #ffffff;
+  
+  /* Background colors */
+  --kimu-background: #ffffff;
+  --kimu-background-alt: #f7fafc;
+  --kimu-surface: #ffffff;
+  
+  /* Text colors */
+  --kimu-text-primary: #1a202c;
+  --kimu-text-secondary: #4a5568;
+  --kimu-text-disabled: #a0aec0;
+  
+  /* Borders and dividers */
+  --kimu-border: #e2e8f0;
+  --kimu-divider: #cbd5e0;
+  
+  /* Semantic colors */
+  --kimu-success: #22c55e;
+  --kimu-warning: #f59e0b;
+  --kimu-error: #ef4444;
+  --kimu-info: #3b82f6;
+  
+  /* Font and dimensions */
+  --kimu-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --kimu-radius: 8px;
+  --kimu-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --kimu-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
+}
+
+/* Base styles - use theme variables */
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  background-color: var(--kimu-background, #ffffff);
+  color: var(--kimu-text-primary, #1a202c);
+  font-family: var(--kimu-font);
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Reset styles */
+:host {
+  all: initial;
+  display: block;
+  font-family: var(--kimu-font);
+  color: var(--kimu-text-primary, #1a202c);
+  background-color: transparent;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+/* Layout base */
+.container {
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Tipografia - use theme colors */
+h1,
+h2,
+h3,
+h4 {
+  color: var(--kimu-text-primary);
+  margin: 0;
+  font-weight: 600;
+}
+
+p {
+  margin: 0.5rem 0;
+  color: var(--kimu-text-secondary);
+}
+
+/* headings */
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0.5em 0;
+}
+
+/* links */
+a {
+  color: var(--kimu-primary);
+  text-decoration: none;
+}

package/src/config/kimu-base-config.json

@@ -0,0 +1,5 @@
+{
+    "version": "0.0.0",
+    "environment": "dev",
+    "build": {}
+}

package/src/core/index.ts

@@ -0,0 +1,47 @@
+/**
+ * KIMU Core - Central Export File
+ * 
+ * This file exports all core KIMU framework classes, decorators, and utilities
+ * for convenient importing in extensions and applications.
+ */
+
+// Core application classes
+export { KimuApp } from './kimu-app';
+export { KimuComponentElement } from './kimu-component-element';
+export { KimuComponent } from './kimu-component';
+export { KimuEngine } from './kimu-engine';
+export { KimuRender } from './kimu-render';
+
+// Extension and module management
+export { KimuExtensionManager } from './kimu-extension-manager';
+export { KimuModule } from './kimu-module';
+export { KimuModuleManager } from './kimu-module-manager';
+
+// Asset and style management
+export { KimuAssetManager } from './kimu-asset-manager';
+export { KimuGlobalStyles } from './kimu-global-styles';
+
+// Configuration and storage
+export { KimuPathConfig } from './kimu-path-config';
+export { KimuStore } from './kimu-store';
+
+// Reactive system - Optimized & Minimal
+export { 
+  property,
+  initReactiveProperties,
+  getObservedAttributes,
+  handleAttributeChange
+} from './kimu-reactive';
+
+// Type definitions
+export type {
+  KimuAsset,
+  KimuGroupAsset,
+  KimuLang,
+  KimuExtensionLanguages,
+  KimuExtensionMeta,
+  KimuModuleOptions
+} from './kimu-types';
+
+// Reactive system types
+export type { PropertyOptions } from './kimu-reactive';

package/src/core/kimu-app.ts

@@ -0,0 +1,76 @@
+import { KimuBuildConfig } from "../config/kimu-build-config";
+import { KimuModuleManager } from "./kimu-module-manager";
+
+/**
+ * The `KimuApp` class represents the core application logic for the Kimu framework.
+ * It is implemented as a singleton to ensure a single global instance throughout the application.
+ * 
+ * Key functionalities:
+ * - Manages the system configuration, including version and environment details.
+ * - Provides utility methods to check the current environment (local, dev, prod).
+ * - Initializes the application by loading the configuration from the default configuration file.
+ * - Ensures the application is properly initialized before usage.
+ * - Provides access to the global KimuModuleManager for dynamic module management.
+ */
+export class KimuApp {
+
+    private static _instance: KimuApp;
+    private _config: any = null; // KIMU system configuration
+    public readonly moduleManager: KimuModuleManager;
+
+    /** Private constructor for singleton design pattern */
+    private constructor() {
+        this.moduleManager = new KimuModuleManager();
+    }
+
+    /** Retrieves the global instance, initializing it if necessary */
+    static async getInstance(): Promise<KimuApp> {
+        if (!this._instance) {
+            console.log('[Kimu] Avvio Kimu Framework');
+            this._instance = new KimuApp();
+            await this._instance._init();
+        }
+        return this._instance;
+    }
+
+    /** Initializes KimuApp component by reading the configuration */
+    private async _init(): Promise<void> {
+        try {
+             // Initializes the configuration with the default configuration file
+            this._config = KimuBuildConfig;
+            //console.log("[KIMU] version: ", this.version); 
+            //console.log("[KIMU] environment: ", this.environment);  
+          
+        } catch (err) {
+            console.warn('[KimuApp] ❌ Error: Configuration not found or invalid. Using fallback.', err);
+        }
+    }
+
+    get config(): any {
+        if (!this._config) {
+            throw new Error('[KimuApp] ❌ Error: System configuration not available!');
+        }
+        return this._config;
+    }
+
+    get version(): string {
+        return this.config.version;
+    }
+
+    get environment(): string {
+        return this.config.environment;
+    }
+
+    isLocal(): boolean {
+        return this.environment === 'local';
+    }
+
+    isDev(): boolean {
+        return this.environment === 'dev';
+    }
+
+    isProd(): boolean {
+        return this.environment === 'prod';
+    }
+
+}

package/src/core/kimu-asset-manager.ts

@@ -0,0 +1,167 @@
+import type { KimuGroupAsset, KimuExtensionMeta } from './kimu-types';
+import { KimuPathConfig } from './kimu-path-config';
+
+/**
+ * The `KimuAssetManager` class provides utility methods for managing assets such as stylesheets,
+ * scripts, and other external resources in the Kimu framework. It includes functionality to:
+ * 
+ * - Fetch text files from the server.
+ * - Inject stylesheets and scripts into the DOM or Shadow DOM.
+ * - Manage external assets defined in metadata or configuration objects.
+ * - Ensure assets are loaded only once to avoid duplication.
+ * 
+ * This class is designed to streamline asset management for extensions and components
+ * within the Kimu framework.
+ */
+export class KimuAssetManager {
+
+    /** Cache for fetched files to avoid repeated requests */
+    private static _fileCache = new Map<string, string | null>();
+
+    /** Loads a text file from the server root */
+    static async fetchFile(path: string, useCache: boolean = true): Promise<string | null> {
+        // Check cache first (if caching is enabled)
+        if (useCache && this._fileCache.has(path)) {
+            return this._fileCache.get(path)!;
+        }
+
+        // console.log(`[KimuAssetManager::fetchFile] 🧾 Fetching file: ${path}`);
+        const rawPath = path.includes('?raw') ? path : `${path}?raw`;
+        const finalPath = rawPath.startsWith('/') ? 
+            KimuPathConfig.resolvePath(rawPath) : 
+            KimuPathConfig.resolvePath(`/${rawPath}`);
+        // console.log(`[KimuAssetManager::fetchFile] 🧾 Fetching file: ${finalPath}`);
+        try {
+            const response = await fetch(finalPath);
+            if (!response.ok) {
+                console.warn(`[KimuAssetManager::fetchFile] ⚠️ File not found: ${path} (status: ${response.status})`);
+                if (useCache) this._fileCache.set(path, null);
+                return null;
+            }
+            const content = await response.text();
+            if (useCache) this._fileCache.set(path, content);
+            return content;
+        } catch (err) {
+            console.warn(`[KimuAssetManager::fetchFile] ⚠️ Fetch File Error: ${path}`, err);
+            if (useCache) this._fileCache.set(path, null);
+            return null;
+        }
+    }
+
+    /** Injects an element if not already present in the target node */
+    private static injectElementIfAbsent(
+        root: Document | ShadowRoot | HTMLElement,
+        create: () => HTMLElement,
+        id?: string
+    ): void {
+        if (!root || typeof root.appendChild !== 'function') {
+            console.warn('[KimuAssetManager] ⚠️ Invalid root node for injection: ', root);
+            return;
+        }
+        if (id && 'getElementById' in root && root.getElementById(id)) {
+            console.log(`[KimuAssetManager] ⚠️ Element already present: ${id}`);
+            return;
+        }
+        const el = create();
+        if (id) {
+            el.id = id;
+        }
+        root.appendChild(el);
+    }
+
+    static async injectStyle(component: HTMLElement, stylePath: string, styleId: string | null): Promise<void> {
+        // console.log(`[KimuAssetManager] Injecting style: ${stylePath}`);
+        if(!stylePath) {
+            console.warn('[KimuAssetManager] ⚠️ No style assigned: ', stylePath);
+            return;
+        }
+        const root = component.shadowRoot;
+        if (!(root instanceof ShadowRoot)) {
+            console.warn('[KimuAssetManager] ⚠️ ShadowRoot not found, unable to inject styl');
+            return;
+        }
+        if (styleId && root.getElementById(styleId)) {
+            console.log(`[KimuAssetManager] ⚠️ Style already injected: ${styleId}`);
+            return;
+        }
+        //const css = await fetch(stylePath).then(res => res.ok ? res.text() : null).catch(() => null);
+        const css = await this.fetchFile(stylePath);
+        if (!css) {
+            console.warn(`[KimuAssetManager] ⚠️ Style not found: ${stylePath}`);
+            return;
+        }
+        const style = document.createElement('style');
+        if (styleId) {
+            style.id = styleId;
+        }
+        style.textContent = css;
+        root.appendChild(style);
+    }
+
+    static injectExternalLink(component: HTMLElement, href: string, id: string): void {
+        const root = component.shadowRoot;
+        if (!root) return;
+        this.injectElementIfAbsent(root, () => {
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = href;
+            return link;
+        }, id);
+    }
+
+    static injectExternalScript(component: HTMLElement | Document, src: string, id: string): void {
+        const root = component instanceof HTMLElement ? component.shadowRoot : component;
+        if (!root) return;
+        this.injectElementIfAbsent(root, () => {
+            const script = document.createElement('script');
+            script.src = src;
+            script.defer = true;
+            return script;
+        }, id);
+    }
+
+    static injectGlobalScript(src: string, id: string): void {
+        this.injectElementIfAbsent(document.head, () => {
+            const script = document.createElement('script');
+            script.src = src;
+            script.defer = true;
+            return script;
+        }, id);
+    }
+
+    static injectFromMeta(component: HTMLElement, meta: KimuExtensionMeta): void {
+        meta.external?.css?.forEach((css, index) => {
+            const id = css.id ?? `ext-css-${meta.tag}-${index}`;
+            this.injectExternalLink(component, css.path, id);
+        });
+        meta.external?.js?.forEach((js, index) => {
+            const id = js.id ?? `ext-js-${meta.tag}-${index}`;
+            this.injectGlobalScript(js.path, id);
+        });
+    }
+
+    static async loadExternalAssets(assets?: KimuGroupAsset): Promise<void> {
+        if (!assets) return;
+        const promises: Promise<void>[] = [];
+        assets.css?.forEach(asset => {
+            if (!document.querySelector(`link[href="${asset.path}"]`)) {
+                const link = document.createElement('link');
+                link.rel = 'stylesheet';
+                link.href = asset.path;
+                document.head.appendChild(link);
+                promises.push(new Promise(resolve => link.onload = () => resolve()));
+            }
+        });
+        assets.js?.forEach(asset => {
+            if (!document.querySelector(`script[src="${asset.path}"]`)) {
+                const script = document.createElement('script');
+                script.src = asset.path;
+                script.defer = true;
+                document.head.appendChild(script);
+                promises.push(new Promise(resolve => script.onload = () => resolve()));
+            }
+        });
+        await Promise.all(promises);
+    }
+
+}