create-portfoliable 1.4.0 → 1.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-portfoliable",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "Unified Portfoliable package with initializer and runtime CLI",
   "private": false,
   "type": "module",
@@ -89,6 +89,7 @@
     "markdown-it-deflist": "^2.1.0",
     "markdown-it-footnote": "^4.0.0",
     "markdown-it-task-lists": "^2.1.1",
+    "prismjs": "^1.30.0",
     "vite": "^8.1.1"
   },
   "devDependencies": {

package/scripts/smoke-homeview.mjs

@@ -80,6 +80,16 @@ function assertIncludes(haystack, needle, message) {
   }
 }
 
+// Verifies a custom element registration call survives production bundling.
+function assertCustomElementRegistration(haystack, elementName) {
+  const registrationPattern = new RegExp(
+    `customElements\\.define\\(["'\`]${elementName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}["'\`]`
+  );
+  if (!registrationPattern.test(haystack)) {
+    fail(`Production bundle does not register ${elementName}.`);
+  }
+}
+
 // MARK: SMOKE ORCHESTRATION
 // Runs build, inspects emitted bundle/assets, and validates HomeView/CaseView route expectations.
 function main() {
@@ -94,6 +104,8 @@ function main() {
 
   // HomeView template is mounted through ds-home-view.
   assertIncludes(bundleText, 'ds-home-view', 'HomeView marker not found in bundle.');
+  assertCustomElementRegistration(bundleText, 'ds-home-view');
+  assertCustomElementRegistration(bundleText, 'ds-gallery');
 
   // CaseView template must exist for in-app Home -> Case transitions.
   assertIncludes(bundleText, 'ds-case-view', 'CaseView marker not found in bundle.');

package/src/App.js

@@ -27,6 +27,7 @@ import {
     resolveReturnOnlyVisibilityOverrides
 } from './header-visibility.contract.js';
 import { pickReachableRuntimeMediaUrl } from './runtime-media.contract.js';
+import './prism-runtime.js';
 import Lenis from 'lenis';
 import {
     AudioPlayer,
@@ -35,6 +36,7 @@ import {
     A11Y_THEME_TOKEN_KEYS,
     Header,
     HomeView,
+    Gallery,
     MermaidDiagram,
     Summary,
     Thumbnail,
@@ -43,14 +45,29 @@ import {
     PlayerView
 } from '@portfoliablejs/valence';
 
-void Article;
-void Header;
-void HomeView;
-void Summary;
-void Thumbnail;
-void Toast;
-void VideoPlayer;
-void MermaidDiagram;
+// Keeps Valence component modules in production bundles so their module-level
+// customElements.define calls are not removed as unused tree-shaken exports.
+function retainValenceComponentRegistrations() {
+    const componentRegistrations = [
+        ['ds-audio-player', AudioPlayer],
+        ['ds-article', Article],
+        ['ds-header', Header],
+        ['ds-home-view', HomeView],
+        ['ds-gallery', Gallery],
+        ['mermaid-diagram', MermaidDiagram],
+        ['ds-summary', Summary],
+        ['ds-thumbnail', Thumbnail],
+        ['ds-toast', Toast],
+        ['ds-video-player', VideoPlayer],
+        ['ds-player-view', PlayerView]
+    ];
+
+    for (const [elementName, component] of componentRegistrations) {
+        if (typeof component !== 'function' || customElements.get(elementName) !== component) {
+            throw new Error(`[portfoliable] Valence component registration failed: ${elementName}`);
+        }
+    }
+}
 
 // MARK: HEADER DEFAULTS
 // Resolves runtime defaults and persistence keys used across navigation and resume flows.
@@ -958,6 +975,7 @@ class AppShell extends HTMLElement {
     // Initializes shadow DOM, source content, and default runtime state.
     constructor() {
         super();
+        retainValenceComponentRegistrations();
         this.attachShadow({ mode: 'open' });
         this.shadowRoot.appendChild(template.content.cloneNode(true));
         this._portfolioCases = getPortfolioCases();

package/src/prism-runtime.js

@@ -0,0 +1,5 @@
+import Prism from 'prismjs';
+
+if (typeof globalThis.Prism === 'undefined') {
+    globalThis.Prism = Prism;
+}

package/vite.config.js

@@ -108,6 +108,11 @@ export default defineConfig(({ command }) => {
       // Keep warnings useful while avoiding noisy false alarms for optional async chunks.
       chunkSizeWarningLimit: 3000,
       rollupOptions: {
+        treeshake: {
+          // Valence modules register custom elements at module evaluation time.
+          // Preserve those registration side effects in production bundles.
+          moduleSideEffects: true
+        },
         output: {
           manualChunks: getManualChunk
         }