@herdingbits/trailhead-cloudscape 0.0.12 → 0.0.15

package/README.md

@@ -37,7 +37,7 @@ import '@herdingbits/trailhead-cloudscape/shell.css';
 
 const shell = new Trailhead({
   adapter: new CloudScapeAdapter(),
-  basePath: '/app',
+  appBasePath: '/app',
   apiUrl: 'https://api.example.com'
 });
 
@@ -45,6 +45,15 @@ const root = createRoot(document.getElementById('app')!);
 root.render(<ShellApp shell={shell} />);
 ```
 
+To load the CloudScape global styles from a CDN instead of bundling via npm import, pass `cloudscapeUrl` to the adapter (and remove the `@cloudscape-design/global-styles/index.css` import from your entry point):
+
+```typescript
+const shell = new Trailhead({
+  adapter: new CloudScapeAdapter({ cloudscapeUrl: 'https://unpkg.com/@cloudscape-design/global-styles@1.0.0/index.css' }),
+  appBasePath: '/app',
+});
+```
+
 ## What's Included
 
 - **CloudScapeAdapter** - Implements the Trailhead adapter interface

package/dist/adapter.d.ts

@@ -3,11 +3,16 @@
  * Uses CloudScape Flashbar, Modal, and Spinner components
  */
 import type { DesignSystemAdapter, FeedbackAdapter } from '@herdingbits/trailhead-types/adapters';
+export interface CloudScapeAdapterConfig {
+    /** URL for the CloudScape global-styles CSS. If provided, injected dynamically instead of requiring a hardcoded HTML link tag. */
+    cloudscapeUrl?: string;
+}
 export declare class CloudScapeAdapter implements DesignSystemAdapter {
     name: string;
     version: string;
     feedback: FeedbackAdapter;
-    constructor();
-    init(basePath: string): Promise<void>;
+    private readonly config?;
+    constructor(config?: CloudScapeAdapterConfig);
+    init(shellUrl: string): Promise<void>;
 }
 //# sourceMappingURL=adapter.d.ts.map

package/dist/adapter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"adapter.d.ts","sourceRoot":"","sources":["../src/adapter.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAA4C,MAAM,uCAAuC,CAAC;AAyE5I,qBAAa,iBAAkB,YAAW,mBAAmB;IAC3D,IAAI,SAAgB;IACpB,OAAO,SAAW;IAClB,QAAQ,EAAE,eAAe,CAAC;;IAMpB,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;CAG5C"}
+{"version":3,"file":"adapter.d.ts","sourceRoot":"","sources":["../src/adapter.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAA4C,MAAM,uCAAuC,CAAC;AAyE5I,MAAM,WAAW,uBAAuB;IACtC,kIAAkI;IAClI,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,qBAAa,iBAAkB,YAAW,mBAAmB;IAC3D,IAAI,SAAgB;IACpB,OAAO,SAAW;IAClB,QAAQ,EAAE,eAAe,CAAC;IAC1B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,CAA0B;gBAEtC,MAAM,CAAC,EAAE,uBAAuB;IAKtC,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;CAQ5C"}

package/dist/adapter.js

@@ -52,12 +52,18 @@ class CloudScapeFeedbackAdapter {
     }
 }
 export class CloudScapeAdapter {
-    constructor() {
+    constructor(config) {
         this.name = 'cloudscape';
         this.version = '3.0.0';
+        this.config = config;
         this.feedback = new CloudScapeFeedbackAdapter();
     }
-    async init(basePath) {
-        // CloudScape styles loaded via global-styles package
+    async init(shellUrl) {
+        if (this.config?.cloudscapeUrl) {
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = this.config.cloudscapeUrl;
+            document.head.appendChild(link);
+        }
     }
 }

package/dist/shell-app.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shell-app.d.ts","sourceRoot":"","sources":["../src/shell-app.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAE7D,UAAU,aAAa;IACrB,KAAK,EAAE,SAAS,CAAC;CAClB;AAiBD,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE,aAAa,2CAiNhD"}
+{"version":3,"file":"shell-app.d.ts","sourceRoot":"","sources":["../src/shell-app.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAE7D,UAAU,aAAa;IACrB,KAAK,EAAE,SAAS,CAAC;CAClB;AAiBD,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE,aAAa,2CAmNhD"}

package/dist/shell-app.js

@@ -21,8 +21,8 @@ export function ShellApp({ shell }) {
     // Get current path without basePath
     const getCurrentPath = () => {
         let path = window.location.pathname;
-        if (shell.basePath && path.startsWith(shell.basePath)) {
-            path = path.substring(shell.basePath.length) || '/';
+        if (shell.appBasePath && path.startsWith(shell.appBasePath)) {
+            path = path.substring(shell.appBasePath.length) || '/';
         }
         return path;
     };
@@ -72,7 +72,7 @@ export function ShellApp({ shell }) {
     const handleRoute = (path) => {
         // Normalize path by removing trailing slash for matching
         const normalizedPath = path.endsWith('/') && path !== '/' ? path.slice(0, -1) : path;
-        const route = navigation.find(item => item.path === normalizedPath);
+        const route = navigation.find(item => normalizedPath.startsWith(item.path));
         if (route && contentRef.current) {
             loadApp(route.app, route.path);
         }
@@ -81,9 +81,10 @@ export function ShellApp({ shell }) {
         if (!contentRef.current)
             return;
         contentRef.current.innerHTML = '<div>Loading...</div>';
+        const appBasePath = shell.appBasePath + appPath;
         try {
-            const pluginUrl = `${shell.basePath}${appPath}/app.js`;
-            const pluginCss = `${shell.basePath}${appPath}/${appName}.css`;
+            const pluginUrl = `${shell.appBasePath}${appPath}/app.js`;
+            const pluginCss = `${shell.appBasePath}${appPath}/${appName}.css`;
             // Load CSS
             const link = document.createElement("link");
             link.rel = "stylesheet";
@@ -96,7 +97,7 @@ export function ShellApp({ shell }) {
             script.onload = () => {
                 contentRef.current.innerHTML = "";
                 if (window.AppMount) {
-                    window.AppMount(contentRef.current);
+                    window.AppMount(contentRef.current, appBasePath);
                 }
             };
             script.onerror = () => {
@@ -147,5 +148,5 @@ export function ShellApp({ shell }) {
                         padding: '24px',
                         borderRadius: '8px',
                         textAlign: 'center',
-                    }, children: [_jsx(Spinner, { size: "large" }), _jsx("div", { style: { marginTop: '16px' }, children: busyMessage })] }) })), _jsx(Modal, { visible: dialogState.visible, onDismiss: handleDialogDismiss, header: dialogState.title, footer: _jsx(Box, { float: "right", children: _jsx(SpaceBetween, { direction: "horizontal", size: "xs", children: dialogState.buttons.map((btn, idx) => (_jsx(Button, { variant: btn.variant === 'primary' ? 'primary' : 'normal', onClick: () => handleDialogButton(btn.value), children: btn.label }, idx))) }) }), children: dialogState.message }), _jsx(ShellLayout, { navigation: navigation, currentPath: currentPath, basePath: shell.basePath, onNavigate: handleNavigate, children: _jsx("div", { id: "shell-content", ref: contentRef }) })] }));
+                    }, children: [_jsx(Spinner, { size: "large" }), _jsx("div", { style: { marginTop: '16px' }, children: busyMessage })] }) })), _jsx(Modal, { visible: dialogState.visible, onDismiss: handleDialogDismiss, header: dialogState.title, footer: _jsx(Box, { float: "right", children: _jsx(SpaceBetween, { direction: "horizontal", size: "xs", children: dialogState.buttons.map((btn, idx) => (_jsx(Button, { variant: btn.variant === 'primary' ? 'primary' : 'normal', onClick: () => handleDialogButton(btn.value), children: btn.label }, idx))) }) }), children: dialogState.message }), _jsx(ShellLayout, { navigation: navigation, currentPath: currentPath, basePath: shell.appBasePath, onNavigate: handleNavigate, children: _jsx("div", { id: "shell-content", ref: contentRef }) })] }));
 }

package/dist/shell-layout.js

@@ -9,7 +9,7 @@ export function ShellLayout({ navigation, currentPath, basePath, onNavigate, chi
         text: item.label,
         href: basePath + item.path + '/', // Add trailing slash for directory routing
     }));
-    return (_jsx(AppLayout, { navigationOpen: navigationOpen, onNavigationChange: ({ detail }) => setNavigationOpen(detail.open), navigation: _jsx(SideNavigation, { activeHref: currentPath, items: navItems, onFollow: (event) => {
+    return (_jsx(AppLayout, { navigationOpen: navigationOpen, onNavigationChange: ({ detail }) => setNavigationOpen(detail.open), navigation: _jsx(SideNavigation, { activeHref: basePath + currentPath + (currentPath.endsWith('/') ? '' : '/'), items: navItems, onFollow: (event) => {
                 event.preventDefault();
                 onNavigate(event.detail.href);
             } }), content: children, toolsHide: true }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@herdingbits/trailhead-cloudscape",
-  "version": "0.0.12",
+  "version": "0.0.15",
   "description": "AWS CloudScape adapter for Trailhead. React-based shell with CloudScape components. Supports React 19.",
   "type": "module",
   "main": "./dist/index.js",
@@ -21,21 +21,21 @@
     "build": "npm run clean && tsc && cp src/shell.css dist/"
   },
   "peerDependencies": {
-    "@herdingbits/trailhead-core": "^0.0.13",
     "@cloudscape-design/components": "^3.0.0",
     "@cloudscape-design/global-styles": "^1.0.0",
+    "@herdingbits/trailhead-core": "^0.0.16",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@herdingbits/trailhead-types": "^0.0.11",
-    "@cloudscape-design/components": "^3.0.1284",
-    "@cloudscape-design/global-styles": "^1.0.57",
+    "@cloudscape-design/components": "^3.0.1297",
+    "@cloudscape-design/global-styles": "^1.0.59",
+    "@herdingbits/trailhead-types": "^0.0.13",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "typescript": "^5.9.3"
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "typescript": "^6.0.3"
   },
   "keywords": [
     "micro-frontend",