slicejs-web-framework 3.0.0 → 3.1.1

package/Slice/Slice.js

@@ -24,6 +24,7 @@ export default class Slice {
       // 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
    }
@@ -51,6 +52,33 @@ export default class Slice {
       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
@@ -104,24 +132,25 @@ export default class Slice {
 
       let isVisual = slice.paths.components[componentCategory].type === 'Visual';
       let modulePath = `${slice.paths.components[componentCategory].path}/${componentName}/${componentName}.js`;
+      const isJsOnlyVisualComponent = isVisual && (componentName === 'MultiRoute' || componentName === 'Route' || componentName === 'Link');
 
       // 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 loadTemplate =
+             isFromBundle || !isVisual || isJsOnlyVisualComponent || 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 loadCSS =
+             isFromBundle || !isVisual || isJsOnlyVisualComponent || this.controller.requestedStyles.has(componentName)
+                ? Promise.resolve(null)
+                : this.controller.fetchText(componentName, 'css', componentCategory);
 
          const [html, ComponentClass, css] = await Promise.all([loadTemplate, loadClass, loadCSS]);
 
@@ -314,6 +343,7 @@ async function init() {
     // 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);

package/Slice/tests/build-js-only-visual-components.test.js

@@ -0,0 +1,129 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+
+globalThis.alert = () => {};
+
+const { default: Slice } = await import('../Slice.js');
+
+class FakeController {
+  constructor() {
+    this.componentCategories = new Map([
+      ['MultiRoute', 'Visual'],
+      ['Route', 'Visual'],
+      ['Link', 'Visual'],
+      ['Button', 'Visual']
+    ]);
+    this.templates = new Map();
+    this.classes = new Map();
+    this.requestedStyles = new Set();
+    this.loadedBundles = new Set();
+    this.activeComponents = new Map();
+    this.fetchCalls = 0;
+  }
+
+  getBundleForComponent() {
+    return null;
+  }
+
+  isComponentFromBundle() {
+    return false;
+  }
+
+  async fetchText() {
+    this.fetchCalls += 1;
+    throw new Error('fetchText should not be called for js-only visual components');
+  }
+
+  verifyComponentIds() {
+    return true;
+  }
+
+  registerComponent() {}
+
+  registerComponentsRecursively() {}
+}
+
+class FakeStylesManager {
+  registerComponentStyles() {}
+}
+
+function createSlice() {
+  const instance = new Slice(
+    {
+      paths: {
+        components: {
+          Visual: {
+            path: '/Components/Visual',
+            type: 'Visual'
+          }
+        }
+      },
+      themeManager: {},
+      stylesManager: {},
+      logger: {},
+      debugger: { enabled: false },
+      loading: {},
+      events: {}
+    },
+    {
+      Controller: FakeController,
+      StylesManager: FakeStylesManager
+    }
+  );
+
+  instance.logger = {
+    logError() {},
+    logWarning() {},
+    logInfo() {}
+  };
+
+  return instance;
+}
+
+test('build does not fetch html/css for MultiRoute, Route, and Link', async () => {
+  const originalSlice = globalThis.slice;
+
+  try {
+    const sliceInstance = createSlice();
+    globalThis.slice = sliceInstance;
+
+    class MultiRouteComponent {
+      constructor(props) {
+        this.props = props;
+        this.sliceId = 'MultiRoute';
+      }
+      async init() {}
+    }
+
+    class RouteComponent {
+      constructor(props) {
+        this.props = props;
+        this.sliceId = 'Route';
+      }
+      async init() {}
+    }
+
+    class LinkComponent {
+      constructor(props) {
+        this.props = props;
+        this.sliceId = 'Link';
+      }
+      async init() {}
+    }
+
+    sliceInstance.controller.classes.set('MultiRoute', MultiRouteComponent);
+    sliceInstance.controller.classes.set('Route', RouteComponent);
+    sliceInstance.controller.classes.set('Link', LinkComponent);
+
+    const builtMultiRoute = await sliceInstance.build('MultiRoute', {});
+    const builtRoute = await sliceInstance.build('Route', {});
+    const builtLink = await sliceInstance.build('Link', {});
+
+    assert.ok(builtMultiRoute, 'Expected MultiRoute instance to be created');
+    assert.ok(builtRoute, 'Expected Route instance to be created');
+    assert.ok(builtLink, 'Expected Link instance to be created');
+    assert.equal(sliceInstance.controller.fetchCalls, 0);
+  } finally {
+    globalThis.slice = originalSlice;
+  }
+});

package/Slice/tests/public-env-runtime-accessors.test.js

@@ -0,0 +1,44 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+
+globalThis.alert = () => {};
+
+const { default: Slice } = await import('../Slice.js');
+
+function createSliceInstance() {
+  return new Slice({
+    paths: {},
+    themeManager: {},
+    stylesManager: {},
+    logger: {},
+    debugger: {},
+    loading: {},
+    events: {}
+  });
+}
+
+test('getEnv returns fallback for missing key and stored value for known key', () => {
+  const sliceInstance = createSliceInstance();
+
+  assert.equal(typeof sliceInstance.getEnv, 'function');
+  assert.equal(typeof sliceInstance.setPublicEnv, 'function');
+  assert.equal(sliceInstance.getEnv('SLICE_PUBLIC_MISSING', 'fallback'), 'fallback');
+
+  sliceInstance.setPublicEnv({ SLICE_PUBLIC_API_URL: 'https://api.example.com' });
+  assert.equal(sliceInstance.getEnv('SLICE_PUBLIC_API_URL'), 'https://api.example.com');
+});
+
+test('getPublicEnv returns a copy and only includes SLICE_PUBLIC_ keys', () => {
+  const sliceInstance = createSliceInstance();
+
+  sliceInstance.setPublicEnv({
+    SLICE_PUBLIC_FLAG: 'true',
+    INTERNAL_SECRET: 'hidden'
+  });
+
+  const snapshot = sliceInstance.getPublicEnv();
+  assert.deepEqual(snapshot, { SLICE_PUBLIC_FLAG: 'true' });
+
+  snapshot.SLICE_PUBLIC_FLAG = 'mutated';
+  assert.equal(sliceInstance.getEnv('SLICE_PUBLIC_FLAG'), 'true');
+});

package/api/index.js

@@ -9,6 +9,7 @@ import {
   sliceFrameworkProtection, 
   suspiciousRequestLogger
 } from './middleware/securityMiddleware.js';
+import { createPublicEnvProvider } from './utils/publicEnvResolver.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -22,6 +23,10 @@ const args = process.argv.slice(2);
 
 const runMode = process.env.NODE_ENV === 'production' ? 'production' : 'development';
 const folderDeployed = runMode === 'production' ? 'dist' : 'src';
+const publicEnvProvider = createPublicEnvProvider({
+  mode: runMode,
+  envFilePath: path.join(__dirname, '..', '.env')
+});
 
 // Obtener puerto desde process.env.PORT con fallback a sliceConfig.json
 const PORT = process.env.PORT || sliceConfig.server?.port || 3001;
@@ -90,18 +95,13 @@ app.use((req, res, next) => {
 // RUNTIME MODE ENDPOINT
 // ==============================================
 
-// Expone el modo actual al framework Slice.js en runtime.
-// Solo se registra en development — 404 en production indica modo producción.
-if (runMode === 'development') {
-  app.get('/slice-env.json', (req, res) => {
-    res.json({ mode: 'development' });
-  });
-} else {
-  // Explicit 404 so the SPA fallback doesn't return 200 for this dev-only endpoint.
-  app.get('/slice-env.json', (req, res) => {
-    res.status(404).json({ error: 'Not found' });
-  });
-}
+app.get('/slice-env.json', (req, res) => {
+  const payload = publicEnvProvider.getPayload();
+  res.setHeader('Cache-Control', 'no-store');
+  res.setHeader('Pragma', 'no-cache');
+  res.setHeader('Expires', '0');
+  res.json(payload);
+});
 
 // ==============================================
 // ARCHIVOS ESTÁTICOS (DESPUÉS DE SEGURIDAD)

package/api/tests/public-env-resolver.test.js

@@ -0,0 +1,193 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import { mkdtemp, rm, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import { tmpdir } from 'node:os';
+
+const resolverModulePath = new URL('../utils/publicEnvResolver.js', import.meta.url);
+
+async function withTempEnvFile(contents, callback) {
+   const dir = await mkdtemp(path.join(tmpdir(), 'slice-public-env-'));
+   const envFilePath = path.join(dir, '.env');
+
+   try {
+      await writeFile(envFilePath, contents, 'utf8');
+      await callback(envFilePath);
+   } finally {
+      await rm(dir, { recursive: true, force: true });
+   }
+}
+
+test('resolvePublicEnv filters only SLICE_PUBLIC_ keys', async () => {
+   const { resolvePublicEnv } = await import(resolverModulePath.href);
+
+   await withTempEnvFile(
+      ['SLICE_PUBLIC_FROM_FILE=file-visible', 'PRIVATE_KEY=hidden-file-value', 'SLICE_API_URL=hidden-file-api-url'].join('\n'),
+      async (envFilePath) => {
+         const payload = resolvePublicEnv({
+            mode: 'development',
+            envFilePath,
+            processEnv: {
+               SLICE_PUBLIC_FROM_PROCESS: 'process-visible',
+               SECRET_TOKEN: 'hidden-process-token',
+               NODE_ENV: 'development',
+            },
+         });
+
+         assert.equal(payload.mode, 'development');
+         assert.deepEqual(payload.env, {
+            SLICE_PUBLIC_FROM_FILE: 'file-visible',
+            SLICE_PUBLIC_FROM_PROCESS: 'process-visible',
+         });
+      }
+   );
+});
+
+test('resolvePublicEnv uses process.env values over .env values', async () => {
+   const { resolvePublicEnv } = await import(resolverModulePath.href);
+
+   await withTempEnvFile('SLICE_PUBLIC_API_URL=https://from-file.example', async (envFilePath) => {
+      const payload = resolvePublicEnv({
+         mode: 'development',
+         envFilePath,
+         processEnv: {
+            SLICE_PUBLIC_API_URL: 'https://from-process.example',
+         },
+      });
+
+      assert.equal(payload.mode, 'development');
+      assert.equal(payload.env.SLICE_PUBLIC_API_URL, 'https://from-process.example');
+   });
+});
+
+test('resolvePublicEnv warns about suspicious public key names without exposing values', async () => {
+   const { resolvePublicEnv } = await import(resolverModulePath.href);
+   const warnings = [];
+   const logger = {
+      warn: (...args) => warnings.push(args.map(String).join(' ')),
+   };
+
+   await withTempEnvFile('SLICE_PUBLIC_API_KEY=super-secret-value', async (envFilePath) => {
+      const payload = resolvePublicEnv({
+         mode: 'development',
+         envFilePath,
+         processEnv: {},
+         logger,
+      });
+
+      assert.equal(payload.mode, 'development');
+      assert.equal(payload.env.SLICE_PUBLIC_API_KEY, 'super-secret-value');
+      assert.equal(warnings.length, 1);
+      assert.match(warnings[0], /SLICE_PUBLIC_API_KEY/);
+      assert.doesNotMatch(warnings[0], /super-secret-value/);
+   });
+});
+
+test('resolvePublicEnv warns once when suspicious key appears in .env and processEnv', async () => {
+   const { resolvePublicEnv } = await import(resolverModulePath.href);
+   const warnings = [];
+   const logger = {
+      warn: (...args) => warnings.push(args.map(String).join(' ')),
+   };
+
+   await withTempEnvFile('SLICE_PUBLIC_API_KEY=from-file-secret', async (envFilePath) => {
+      const payload = resolvePublicEnv({
+         mode: 'development',
+         envFilePath,
+         processEnv: {
+            SLICE_PUBLIC_API_KEY: 'from-process-secret',
+         },
+         logger,
+      });
+
+      assert.equal(payload.env.SLICE_PUBLIC_API_KEY, 'from-process-secret');
+      assert.equal(warnings.length, 1);
+      assert.match(warnings[0], /SLICE_PUBLIC_API_KEY/);
+      assert.doesNotMatch(warnings[0], /from-file-secret|from-process-secret/);
+   });
+});
+
+test('resolvePublicEnv parses first key when .env starts with BOM', async () => {
+   const { resolvePublicEnv } = await import(resolverModulePath.href);
+
+   await withTempEnvFile('\uFEFFSLICE_PUBLIC_TITLE=Slice App', async (envFilePath) => {
+      const payload = resolvePublicEnv({
+         mode: 'development',
+         envFilePath,
+         processEnv: {},
+      });
+
+      assert.equal(payload.env.SLICE_PUBLIC_TITLE, 'Slice App');
+   });
+});
+
+test('resolvePublicEnv strips inline comments for unquoted values', async () => {
+   const { resolvePublicEnv } = await import(resolverModulePath.href);
+
+   await withTempEnvFile('SLICE_PUBLIC_ORIGIN=https://slice.dev # dev origin', async (envFilePath) => {
+      const payload = resolvePublicEnv({
+         mode: 'development',
+         envFilePath,
+         processEnv: {},
+      });
+
+      assert.equal(payload.env.SLICE_PUBLIC_ORIGIN, 'https://slice.dev');
+   });
+});
+
+test('resolvePublicEnv strips trailing comments after quoted values', async () => {
+   const { resolvePublicEnv } = await import(resolverModulePath.href);
+
+   await withTempEnvFile('SLICE_PUBLIC_X="value" # comment', async (envFilePath) => {
+      const payload = resolvePublicEnv({
+         mode: 'development',
+         envFilePath,
+         processEnv: {},
+      });
+
+      assert.equal(payload.env.SLICE_PUBLIC_X, 'value');
+   });
+});
+
+test('createPublicEnvProvider caches in production and recomputes in development', async () => {
+   const { createPublicEnvProvider } = await import(resolverModulePath.href);
+
+   await withTempEnvFile('SLICE_PUBLIC_COUNTER=from-file', async (envFilePath) => {
+      let processValue = 'first-value';
+      const processEnv = {
+         get SLICE_PUBLIC_COUNTER() {
+            return processValue;
+         },
+      };
+
+      const productionProvider = createPublicEnvProvider({
+         mode: 'production',
+         envFilePath,
+         processEnv,
+      });
+      assert.equal(typeof productionProvider.getPayload, 'function');
+
+      const firstProduction = productionProvider.getPayload();
+      processValue = 'second-value';
+      const secondProduction = productionProvider.getPayload();
+
+      assert.equal(firstProduction.mode, 'production');
+      assert.equal(firstProduction.env.SLICE_PUBLIC_COUNTER, 'first-value');
+      assert.equal(secondProduction.env.SLICE_PUBLIC_COUNTER, 'first-value');
+
+      const developmentProvider = createPublicEnvProvider({
+         mode: 'development',
+         envFilePath,
+         processEnv,
+      });
+      assert.equal(typeof developmentProvider.getPayload, 'function');
+
+      const firstDevelopment = developmentProvider.getPayload();
+      processValue = 'third-value';
+      const secondDevelopment = developmentProvider.getPayload();
+
+      assert.equal(firstDevelopment.mode, 'development');
+      assert.equal(firstDevelopment.env.SLICE_PUBLIC_COUNTER, 'second-value');
+      assert.equal(secondDevelopment.env.SLICE_PUBLIC_COUNTER, 'third-value');
+   });
+});

package/api/utils/publicEnvResolver.js

@@ -0,0 +1,117 @@
+import { readFileSync, existsSync } from 'node:fs';
+
+const PUBLIC_PREFIX = 'SLICE_PUBLIC_';
+const SUSPICIOUS_TERMS = ['SECRET', 'TOKEN', 'PASSWORD', 'PRIVATE', 'API_KEY', 'ACCESS_KEY', 'CREDENTIAL'];
+
+function parseEnvFile(envFilePath) {
+   if (!envFilePath || !existsSync(envFilePath)) {
+      return {};
+   }
+
+   const fileContent = readFileSync(envFilePath, 'utf8').replace(/^\uFEFF/, '');
+   const parsed = {};
+   const lines = fileContent.split(/\r?\n/);
+
+   for (const rawLine of lines) {
+      const line = rawLine.trim();
+
+      if (!line || line.startsWith('#')) {
+         continue;
+      }
+
+      const equalsIndex = line.indexOf('=');
+      if (equalsIndex === -1) {
+         continue;
+      }
+
+      let key = line.slice(0, equalsIndex).trim();
+      if (!key) {
+         continue;
+      }
+
+      if (key.startsWith('export ')) {
+         key = key.slice('export '.length).trim();
+      }
+
+      let value = line.slice(equalsIndex + 1).trim();
+
+      const quotedWithOptionalCommentMatch = value.match(/^(["'])(.*?)\1(?:\s+#.*)?$/);
+
+      if (quotedWithOptionalCommentMatch) {
+         value = quotedWithOptionalCommentMatch[2];
+      } else {
+         value = value.replace(/\s+#.*$/, '').trimEnd();
+      }
+
+      parsed[key] = value;
+   }
+
+   return parsed;
+}
+
+function warnSuspiciousKey(key, logger, warnedKeys) {
+   const upperKey = key.toUpperCase();
+   const isSuspicious = SUSPICIOUS_TERMS.some((term) => upperKey.includes(term));
+
+   if (isSuspicious && !warnedKeys.has(key) && logger && typeof logger.warn === 'function') {
+      logger.warn(`[slice-env] Suspicious public environment key detected: ${key}`);
+      warnedKeys.add(key);
+   }
+}
+
+function buildPublicPayload({ envFromFile, processEnv, logger }) {
+   const env = {};
+   const warnedKeys = new Set();
+
+   for (const [key, value] of Object.entries(envFromFile)) {
+      if (key.startsWith(PUBLIC_PREFIX)) {
+         env[key] = String(value ?? '');
+         warnSuspiciousKey(key, logger, warnedKeys);
+      }
+   }
+
+   for (const [key, value] of Object.entries(processEnv || {})) {
+      if (key.startsWith(PUBLIC_PREFIX)) {
+         env[key] = String(value ?? '');
+         warnSuspiciousKey(key, logger, warnedKeys);
+      }
+   }
+
+   return env;
+}
+
+export function resolvePublicEnv({ mode, envFilePath, processEnv = process.env, logger = console }) {
+   const envFromFile = parseEnvFile(envFilePath);
+   const env = buildPublicPayload({
+      envFromFile,
+      processEnv,
+      logger,
+   });
+
+   return {
+      mode,
+      env,
+   };
+}
+
+export function createPublicEnvProvider({ mode, envFilePath, processEnv = process.env, logger = console }) {
+   if (mode === 'production') {
+      let cachedPayload;
+
+      return {
+         getPayload() {
+            if (!cachedPayload) {
+               cachedPayload = resolvePublicEnv({ mode, envFilePath, processEnv, logger });
+            }
+
+            return cachedPayload;
+         },
+      };
+   }
+
+   return {
+      getPayload() {
+         return resolvePublicEnv({ mode, envFilePath, processEnv, logger });
+      },
+   };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-web-framework",
-  "version": "3.0.0",
+  "version": "3.1.1",
   "description": "",
   "engines": {
     "node": ">=20"