slicejs-web-framework 3.1.0 → 3.1.2

package/Slice/Slice.js

@@ -132,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');
 
       // 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]);
 

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

@@ -0,0 +1,144 @@
+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 and Route', 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() {}
+    }
+
+    sliceInstance.controller.classes.set('MultiRoute', MultiRouteComponent);
+    sliceInstance.controller.classes.set('Route', RouteComponent);
+
+    const builtMultiRoute = await sliceInstance.build('MultiRoute', {});
+    const builtRoute = await sliceInstance.build('Route', {});
+
+    assert.ok(builtMultiRoute, 'Expected MultiRoute instance to be created');
+    assert.ok(builtRoute, 'Expected Route instance to be created');
+    assert.equal(sliceInstance.controller.fetchCalls, 0);
+  } finally {
+    globalThis.slice = originalSlice;
+  }
+});
+
+test('build still fetches html/css for Link', async () => {
+  const originalSlice = globalThis.slice;
+
+  try {
+    const sliceInstance = createSlice();
+    globalThis.slice = sliceInstance;
+
+    class LinkComponent {
+      constructor(props) {
+        this.props = props;
+        this.sliceId = 'Link';
+      }
+      async init() {}
+    }
+
+    sliceInstance.controller.classes.set('Link', LinkComponent);
+
+    const builtLink = await sliceInstance.build('Link', {});
+
+    assert.equal(builtLink, null);
+    assert.ok(sliceInstance.controller.fetchCalls > 0, 'Expected Link to trigger resource fetches');
+  } finally {
+    globalThis.slice = originalSlice;
+  }
+});

package/package.json

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