slicejs-web-framework 3.1.1 → 3.1.3

package/.worktrees/public-env-browser-exposure/Slice/Components/Structural/StylesManager/StylesManager.js

@@ -1,78 +0,0 @@
-
-export default class StylesManager {
-   constructor() {
-      this.componentStyles = document.createElement('style');
-      this.componentStyles.id = 'slice-component-styles';
-      document.head.appendChild(this.componentStyles);
-
-   }
-
-   /**
-    * Load global styles and initialize ThemeManager if enabled.
-    * @returns {Promise<void>}
-   */
-   async init() {
-      const requestedStyles = Array.isArray(slice.stylesConfig.requestedStyles)
-         ? slice.stylesConfig.requestedStyles
-         : [];
-
-      const styleResults = await Promise.all(
-         requestedStyles.map(async (styleName) => {
-            const styles = await slice.controller.fetchText(styleName, 'styles');
-            return { styleName, styles };
-         })
-      );
-
-      for (const { styleName, styles } of styleResults) {
-         this.appendComponentStyles(styles);
-         slice.logger.logInfo('StylesManager', `${styleName} styles loaded`);
-      }
-
-       if (slice.themeConfig.enabled) {
-          const ThemeManagerClass = slice.frameworkClasses?.ThemeManager
-             || await slice.getClass(`${slice.paths.structuralComponentFolderPath}/StylesManager/ThemeManager/ThemeManager.js`);
-          if (!ThemeManagerClass) {
-             throw new Error('ThemeManager not available');
-          }
-
-          this.themeManager = new ThemeManagerClass();
-         let theme;
-
-         if (slice.themeConfig.saveThemeLocally) {
-            theme = localStorage.getItem('sliceTheme');
-         }
-
-         if (!theme) {
-            theme = slice.themeConfig.defaultTheme;
-         }
-
-         if (slice.themeConfig.useBrowserTheme) {
-            const browserTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'Dark' : 'Light';
-            theme = browserTheme;
-         }
-
-         await this.themeManager.applyTheme(theme);
-      }
-   }
-
-   //add a method that will add css as text to the componentStyles element
-   /**
-    * Append raw CSS to the global component style tag.
-    * @param {string} cssText
-    * @returns {void}
-    */
-   appendComponentStyles(cssText) {
-      this.componentStyles.appendChild(document.createTextNode(cssText));
-   }
-
-   /**
-    * Register CSS for a component.
-    * @param {string} componentName
-    * @param {string} cssText
-    * @returns {void}
-    */
-   registerComponentStyles(componentName, cssText) {
-      slice.controller.requestedStyles.add(componentName);
-      this.appendComponentStyles(cssText);
-   }
-}

package/.worktrees/public-env-browser-exposure/Slice/Components/Structural/StylesManager/ThemeManager/ThemeManager.js

@@ -1,84 +0,0 @@
-/**
- * Manages theme CSS loading and persistence.
- */
-export default class ThemeManager {
-   constructor() {
-      this.themeStyles = new Map();
-      this.currentTheme = null;
-      this.themeStyle = document.createElement('style');
-      document.head.appendChild(this.themeStyle);
-   }
-
-   /**
-    * Apply a theme by name.
-    * @param {string} themeName
-    * @returns {Promise<void>}
-    */
-   async applyTheme(themeName) {
-      if (!themeName) {
-         slice.logger.logError('ThemeManager', 'Invalid theme name');
-         return;
-      }
-
-      if (!this.themeStyles.has(themeName)) {
-         await this.loadThemeCSS(themeName);
-      } else {
-         this.setThemeStyle(themeName);
-         this.saveThemeLocally(themeName, this.themeStyles.get(themeName));
-      }
-   }
-
-   /**
-    * Load theme CSS and cache it.
-    * @param {string} themeName
-    * @returns {Promise<void>}
-    */
-   async loadThemeCSS(themeName) {
-      let themeContent =
-         localStorage.getItem(`sliceTheme-${themeName}`) || (await slice.controller.fetchText(themeName, 'theme'));
-
-      if (!themeContent) {
-         slice.logger.logError('ThemeManager', `Failed to load theme: ${themeName}`);
-         return;
-      }
-
-      this.themeStyles.set(themeName, themeContent);
-      this.setThemeStyle(themeName);
-      this.saveThemeLocally(themeName, themeContent);
-   }
-
-   /**
-    * Persist a theme in localStorage when enabled.
-    * @param {string} themeName
-    * @param {string} themeContent
-    * @returns {void}
-    */
-   saveThemeLocally(themeName, themeContent) {
-      if (slice.themeConfig.saveThemeLocally) {
-         localStorage.setItem('sliceTheme', themeName);
-         localStorage.setItem(`sliceTheme-${themeName}`, themeContent);
-         slice.logger.logInfo('ThemeManager', `Theme ${themeName} saved locally`);
-      }
-   }
-
-   /**
-    * Clear currently applied theme styles.
-    * @returns {void}
-    */
-   removeCurrentTheme() {
-      if (this.currentTheme) {
-         this.themeStyle.textContent = '';
-      }
-   }
-
-   /**
-    * Set theme style text and mark current theme.
-    * @param {string} themeName
-    * @returns {void}
-    */
-   setThemeStyle(themeName) {
-      this.themeStyle.textContent = this.themeStyles.get(themeName);
-      this.currentTheme = themeName;
-      slice.logger.logInfo('ThemeManager', `Theme ${themeName} applied`);
-   }
-}

package/.worktrees/public-env-browser-exposure/Slice/Slice.js

@@ -1,533 +0,0 @@
-
-/**
- * Main Slice.js runtime.
- */
-export default class Slice {
-   /**
-    * @param {Object} sliceConfig
-    */
-    constructor(sliceConfig, frameworkClasses = null) {
-      this.frameworkClasses = frameworkClasses;
-      const ControllerClass = frameworkClasses?.Controller;
-      const StylesManagerClass = frameworkClasses?.StylesManager;
-
-      this.controller = ControllerClass ? new ControllerClass() : null;
-      this.stylesManager = StylesManagerClass ? new StylesManagerClass() : null;
-      this.paths = sliceConfig.paths;
-      this.themeConfig = sliceConfig.themeManager;
-      this.stylesConfig = sliceConfig.stylesManager;
-      this.loggerConfig = sliceConfig.logger;
-      this.debuggerConfig = sliceConfig.debugger;
-      this.loadingConfig = sliceConfig.loading;
-      this.eventsConfig = sliceConfig.events;
-
-      // Default to production until init() resolves the actual mode.
-      // Safe to call isProduction() before init() completes.
-      this._mode = 'production';
-      this._publicEnv = {};
-
-      // 📦 Bundle system is initialized automatically via import in index.js
-   }
-
-   /**
-    * Dynamically import a module and return its default export.
-    * @param {string} module
-    * @returns {Promise<any>}
-    */
-   async getClass(module) {
-      try {
-         const { default: myClass } = await import(module);
-         return await myClass;
-      } catch (error) {
-         this.logger.logError('Slice', `Error loading class ${module}`, error);
-      }
-   }
-
-   /**
-    * Returns true when running in production mode.
-    * Reliable after init() has completed.
-    * @returns {boolean}
-    */
-   isProduction() {
-      return this._mode === 'production';
-   }
-
-   setPublicEnv(envPayload = {}) {
-      const normalized = {};
-
-      for (const [key, value] of Object.entries(envPayload || {})) {
-         if (!key.startsWith('SLICE_PUBLIC_')) continue;
-         normalized[key] = String(value ?? '');
-      }
-
-      this._publicEnv = normalized;
-   }
-
-   getEnv(name, fallbackValue = undefined) {
-      if (!name || typeof name !== 'string') {
-         return fallbackValue;
-      }
-
-      if (Object.prototype.hasOwnProperty.call(this._publicEnv, name)) {
-         return this._publicEnv[name];
-      }
-
-      return fallbackValue;
-   }
-
-   getPublicEnv() {
-      return { ...this._publicEnv };
-   }
-
-   /**
-    * Get a component instance by sliceId.
-    * @param {string} componentSliceId
-    * @returns {HTMLElement|undefined}
-    */
-   getComponent(componentSliceId) {
-      return this.controller.activeComponents.get(componentSliceId);
-   }
-
-   /**
-    * Build a component instance and run init.
-    * @param {string} componentName
-    * @param {Object} [props]
-    * @returns {Promise<HTMLElement|Object|null>}
-    */
-   async build(componentName, props = {}) {
-      if (!componentName) {
-         this.logger.logError('Slice', null, `Component name is required to build a component`);
-         return null;
-      }
-
-      if (typeof componentName !== 'string') {
-         this.logger.logError('Slice', null, `Component name must be a string`);
-         return null;
-      }
-
-      if (!this.controller.componentCategories.has(componentName)) {
-         this.logger.logError('Slice', null, `Component ${componentName} not found in components.js file`);
-         return null;
-      }
-
-      // 📦 Try to load from bundles first
-      const bundleName = this.controller.getBundleForComponent(componentName);
-      if (bundleName && !this.controller.loadedBundles.has(bundleName)) {
-         await this.controller.loadBundle(bundleName);
-      }
-
-      let componentCategory = this.controller.componentCategories.get(componentName);
-
-      // 📦 Check if component is already available from loaded bundles
-      const isFromBundle = this.controller.isComponentFromBundle(componentName);
-
-      if (componentCategory === 'Structural') {
-         this.logger.logError(
-            'Slice',
-            null,
-            `Component ${componentName} is a Structural component and cannot be built`
-         );
-         return null;
-      }
-
-      let isVisual = slice.paths.components[componentCategory].type === 'Visual';
-      let modulePath = `${slice.paths.components[componentCategory].path}/${componentName}/${componentName}.js`;
-
-      // Load template, class, and CSS concurrently if needed
-      try {
-         // 📦 Skip individual loading if component is available from bundles
-         const loadTemplate =
-            isFromBundle || !isVisual || this.controller.templates.has(componentName)
-               ? Promise.resolve(null)
-               : this.controller.fetchText(componentName, 'html', componentCategory);
-
-         const loadClass =
-            isFromBundle || this.controller.classes.has(componentName)
-               ? Promise.resolve(null)
-               : this.getClass(modulePath);
-
-         const loadCSS =
-            isFromBundle || !isVisual || this.controller.requestedStyles.has(componentName)
-               ? Promise.resolve(null)
-               : this.controller.fetchText(componentName, 'css', componentCategory);
-
-         const [html, ComponentClass, css] = await Promise.all([loadTemplate, loadClass, loadCSS]);
-
-         // 📦 If component is from bundle but not in cache, it should have been registered by registerBundle
-         if (isFromBundle) {
-            console.log(`📦 Using bundled component: ${componentName}`);
-         }
-
-         if (html || html === '') {
-            const template = document.createElement('template');
-            template.innerHTML = html;
-            this.controller.templates.set(componentName, template);
-            this.logger.logInfo('Slice', `Template ${componentName} loaded`);
-         }
-
-         if (ComponentClass) {
-            this.controller.classes.set(componentName, ComponentClass);
-            this.logger.logInfo('Slice', `Class ${componentName} loaded`);
-         }
-
-         if (css) {
-            this.stylesManager.registerComponentStyles(componentName, css);
-            this.logger.logInfo('Slice', `CSS ${componentName} loaded`);
-         }
-      } catch (error) {
-         console.log(error);
-         this.logger.logError('Slice', `Error loading resources for ${componentName}`, error);
-         return null;
-      }
-
-      // Create instance
-      try {
-         let componentIds = {};
-         if (props.id) componentIds.id = props.id;
-         if (props.sliceId) componentIds.sliceId = props.sliceId;
-
-         delete props.id;
-         delete props.sliceId;
-
-       const ComponentClass = this.controller.classes.get(componentName);
-       if (componentName === 'Loading') {
-          console.log('🔎 Build component: Loading', {
-             classType: typeof ComponentClass,
-             isFunction: typeof ComponentClass === 'function',
-             classValue: ComponentClass
-          });
-       }
-       if (componentName === 'InputSearchDocs' || componentName === 'MainMenu') {
-          console.log(`🔎 Build component: ${componentName}`, {
-             classType: typeof ComponentClass,
-             isFunction: typeof ComponentClass === 'function',
-             classValue: ComponentClass
-          });
-       }
-       const componentInstance = new ComponentClass(props);
-
-         if (componentIds.id && isVisual) componentInstance.id = componentIds.id;
-         if (componentIds.sliceId) componentInstance.sliceId = componentIds.sliceId;
-
-         if (!this.controller.verifyComponentIds(componentInstance)) {
-            this.logger.logError('Slice', `Error registering instance ${componentName} ${componentInstance.sliceId}`);
-            return null;
-         }
-
-         if (componentInstance.init) await componentInstance.init();
-
-         if (slice.debuggerConfig.enabled && isVisual) {
-            this.debugger.attachDebugMode(componentInstance);
-         }
-
-         this.controller.registerComponent(componentInstance);
-         if (isVisual) {
-            this.controller.registerComponentsRecursively(componentInstance);
-         }
-
-         this.logger.logInfo('Slice', `Instance ${componentInstance.sliceId} created`);
-         return componentInstance;
-      } catch (error) {
-         console.log(error);
-         this.logger.logError('Slice', `Error creating instance ${componentName}`, error);
-         return null;
-      }
-   }
-
-   /**
-    * Apply a theme by name.
-    * @param {string} themeName
-    * @returns {Promise<void>}
-    */
-   async setTheme(themeName) {
-      await this.stylesManager.themeManager.applyTheme(themeName);
-   }
-
-   /**
-    * Current theme name.
-    * @returns {string|null}
-    */
-   get theme() {
-      return this.stylesManager.themeManager.currentTheme;
-   }
-
-   /**
-    * Attach HTML template to a component instance.
-    * @param {HTMLElement} componentInstance
-    * @returns {void}
-    */
-   attachTemplate(componentInstance) {
-      this.controller.loadTemplateToComponent(componentInstance);
-   }
-}
-
-async function loadConfig() {
-   try {
-      const response = await fetch('/sliceConfig.json'); // 🔹 Express lo sirve desde `src/`
-      if (!response.ok) throw new Error('Error loading sliceConfig.json');
-      const json = await response.json();
-      return json;
-   } catch (error) {
-      console.error(`Error loading config file: ${error.message}`);
-      return null;
-   }
-}
-
-async function init() {
-   const sliceConfig = await loadConfig();
-   if (!sliceConfig) {
-      //Display error message in console with colors and alert in english
-      console.error('%c⛔️ Error loading Slice configuration ⛔️', 'color: red; font-size: 20px;');
-      alert('Error loading Slice configuration');
-      return;
-   }
-
-    // 1+2. Fetch mode endpoint and bundle config in parallel — both are independent.
-    // In production, /slice-env.json returns 404 (catch is expected and normal).
-    // bundleConfigJson.production serves as a mode fallback when env endpoint is absent.
-    let frameworkClasses = null;
-    const [envResult, configResult] = await Promise.all([
-      fetch('/slice-env.json', { cache: 'no-store' })
-        .then(r => r.ok ? r.json() : null)
-        .catch(() => null),
-      fetch('/bundles/bundle.config.json', { cache: 'no-store' })
-        .then(r => r.ok ? r.json() : null)
-        .catch(() => null)
-    ]);
-    const envMode = envResult?.mode ?? null;
-    const bundleConfigJson = configResult;
-
-     // 3. Determine canonical mode: env endpoint takes precedence, then bundle config
-     let resolvedMode;
-     if (envMode) {
-       resolvedMode = envMode;
-     } else if (bundleConfigJson?.production) {
-       resolvedMode = 'production';
-     } else {
-       resolvedMode = 'development';
-     }
-
-      // 4. Load framework classes.
-     // In production the bundler generates slice-bundle.framework.js which
-     // sets window.SLICE_FRAMEWORK_CLASSES. In dev mode always use individual
-     // imports so the live /Slice/ source is served directly without bundles.
-     if (resolvedMode === 'production' && bundleConfigJson?.bundles?.framework?.file) {
-       try {
-         await import(`/bundles/${bundleConfigJson.bundles.framework.file}`);
-         if (window.SLICE_FRAMEWORK_CLASSES) {
-           frameworkClasses = window.SLICE_FRAMEWORK_CLASSES;
-         }
-        } catch (e) {
-          // framework bundle failed — fall through to individual imports
-          console.error('[Slice.js] framework bundle import failed:', e?.message || e);
-        }
-     }
-
-     if (!frameworkClasses) {
-       try {
-         const imports = await Promise.all([
-           import('./Components/Structural/Controller/Controller.js'),
-           import('./Components/Structural/StylesManager/StylesManager.js')
-         ]);
-         frameworkClasses = {
-           Controller: imports[0].default,
-           StylesManager: imports[1].default
-         };
-       } catch (e) {
-         console.error('[Slice.js] individual imports fallback failed:', e?.message || e);
-         throw e;
-       }
-     }
-
-    // 5. Create Slice instance and set resolved mode
-    window.slice = new Slice(sliceConfig, frameworkClasses);
-    window.slice._mode = resolvedMode;
-    window.slice.setPublicEnv(envResult?.env || {});
-
-     const createBundlingInitError = (step, error) => {
-        const detail = error instanceof Error ? error.message : String(error);
-        return new Error(`Bundling V2 initialization failed (${step}): ${detail}`, { cause: error });
-     };
-
-     // Initialize bundles before building components.
-     // Only in production — dev mode loads each component individually from source.
-     // bundleConfigJson was already fetched above (step 2); reuse it.
-     if (resolvedMode === 'production' && bundleConfigJson) {
-        window.slice.controller.bundleConfig = bundleConfigJson;
-     }
-
-     if (resolvedMode === 'production' && window.slice.controller.bundleConfig) {
-        const config = window.slice.controller.bundleConfig;
-        const criticalFile = config?.bundles?.critical?.file;
-        if (criticalFile) {
-           try {
-              await window.slice.controller.loadBundle('critical');
-           } catch (error) {
-              throw createBundlingInitError(`critical bundle "${criticalFile}"`, error);
-           }
-        }
-
-        const routeBundles = config?.routeBundles || {};
-        const initialPath = window.location.pathname || '/';
-        const bundlesForRoute = routeBundles[initialPath] || [];
-
-        const loadRouteBundles = async () => {
-           for (const bundleName of bundlesForRoute) {
-              if (bundleName === 'critical') continue;
-              const bundleInfo = config?.bundles?.routes?.[bundleName];
-              if (!bundleInfo?.file) continue;
-              await window.slice.controller.loadBundle(bundleName);
-           }
-        };
-
-        const preloadRouteBundles = () => {
-           loadRouteBundles().catch((error) => {
-              const bundlingError = createBundlingInitError(
-                 `idle route preload "${initialPath}"`,
-                 error
-              );
-              queueMicrotask(() => {
-                 throw bundlingError;
-              });
-           });
-        };
-
-        if (typeof requestIdleCallback === 'function') {
-           requestIdleCallback(() => preloadRouteBundles());
-        } else {
-           setTimeout(() => preloadRouteBundles(), 0);
-        }
-     }
-
-   slice.paths.structuralComponentFolderPath = '/Slice/Components/Structural';
-
-    if (sliceConfig.logger.enabled) {
-       const LoggerModule = window.slice.frameworkClasses?.Logger
-         || await window.slice.getClass(`${slice.paths.structuralComponentFolderPath}/Logger/Logger.js`);
-       window.slice.logger = new LoggerModule();
-   } else {
-      window.slice.logger = {
-         logError: () => {},
-         logWarning: () => {},
-         logInfo: () => {},
-      };
-   }
-
-    if (sliceConfig.debugger.enabled) {
-        const DebuggerModule = window.slice.frameworkClasses?.Debugger
-           || await window.slice.getClass(`${slice.paths.structuralComponentFolderPath}/Debugger/Debugger.js`);
-        window.slice.debugger = new DebuggerModule();
-       await window.slice.debugger.enableDebugMode();
-       document.body.appendChild(window.slice.debugger);
-   }
-
-     if (sliceConfig.events?.ui?.enabled) {
-        const EventsDebuggerModule = window.slice.frameworkClasses?.EventManagerDebugger
-           || await window.slice.getClass(`${slice.paths.structuralComponentFolderPath}/EventManager/EventManagerDebugger.js`);
-        window.slice.eventsDebugger = new EventsDebuggerModule();
-       await window.slice.eventsDebugger.init();
-       document.body.appendChild(window.slice.eventsDebugger);
-    }
-
-     if (sliceConfig.context?.ui?.enabled) {
-        const ContextDebuggerModule = window.slice.frameworkClasses?.ContextManagerDebugger
-           || await window.slice.getClass(`${slice.paths.structuralComponentFolderPath}/ContextManager/ContextManagerDebugger.js`);
-        window.slice.contextDebugger = new ContextDebuggerModule();
-       await window.slice.contextDebugger.init();
-       document.body.appendChild(window.slice.contextDebugger);
-    }
-
-    if (sliceConfig.events?.enabled) {
-       const EventManagerModule = window.slice.frameworkClasses?.EventManager
-          || await window.slice.getClass(`${slice.paths.structuralComponentFolderPath}/EventManager/EventManager.js`);
-      window.slice.events = new EventManagerModule();
-      if (typeof window.slice.events.init === 'function') {
-         await window.slice.events.init();
-      }
-   } else {
-      window.slice.events = {
-         subscribe: () => null,
-         subscribeOnce: () => null,
-         unsubscribe: () => false,
-         emit: () => {},
-         bind: () => ({
-            subscribe: () => null,
-            subscribeOnce: () => null,
-            emit: () => {},
-         }),
-         cleanupComponent: () => 0,
-         hasSubscribers: () => false,
-         subscriberCount: () => 0,
-         clear: () => {},
-      };
-      window.slice.logger.logError('Slice', 'EventManager disabled');
-   }
-
-    if (sliceConfig.context?.enabled) {
-       const ContextManagerModule = window.slice.frameworkClasses?.ContextManager
-          || await window.slice.getClass(`${slice.paths.structuralComponentFolderPath}/ContextManager/ContextManager.js`);
-      window.slice.context = new ContextManagerModule();
-      if (typeof window.slice.context.init === 'function') {
-         await window.slice.context.init();
-      }
-   } else {
-      window.slice.context = {
-         create: () => false,
-         getState: () => null,
-         setState: () => {},
-         watch: () => null,
-         has: () => false,
-         destroy: () => false,
-         list: () => [],
-      };
-      window.slice.logger.logError('Slice', 'ContextManager disabled');
-   }
-
-    if (sliceConfig.loading.enabled) {
-      const loading = await window.slice.build('Loading', {});
-      window.slice.loading = loading;
-      if (typeof loading?.start === 'function') {
-         loading.start();
-      }
-    }
-
-   const stylesInitPromise = window.slice.stylesManager.init();
-   const routesModulePromise = import(slice.paths.routesFile);
-
-   if (sliceConfig.events?.ui?.shortcut || sliceConfig.context?.ui?.shortcut) {
-      const normalize = (value) => (typeof value === 'string' ? value.toLowerCase() : '');
-      const toKey = (event) => {
-         const parts = [];
-         if (event.ctrlKey) parts.push('ctrl');
-         if (event.shiftKey) parts.push('shift');
-         if (event.altKey) parts.push('alt');
-         if (event.metaKey) parts.push('meta');
-         const key = event.key?.toLowerCase();
-         if (key && !['control', 'shift', 'alt', 'meta'].includes(key)) {
-            parts.push(key);
-         }
-         return parts.join('+');
-      };
-
-      const handlers = {
-         [normalize(sliceConfig.events?.ui?.shortcut)]: () => window.slice.eventsDebugger?.toggle?.(),
-         [normalize(sliceConfig.context?.ui?.shortcut)]: () => window.slice.contextDebugger?.toggle?.(),
-      };
-
-      document.addEventListener('keydown', (event) => {
-         const key = toKey(event);
-         if (!key || !handlers[key]) return;
-         event.preventDefault();
-         handlers[key]();
-      });
-   }
-
-   const [, routesModule] = await Promise.all([stylesInitPromise, routesModulePromise]);
-   const routes = routesModule.default;
-    const RouterModule = window.slice.frameworkClasses?.Router
-       || await window.slice.getClass(`${slice.paths.structuralComponentFolderPath}/Router/Router.js`);
-    window.slice.router = new RouterModule(routes);
-   await window.slice.router.init();
-}
-
- await init();