@quincarter/create-lit-app 1.1.3 → 1.1.5

package/create-app-shell.sh

@@ -867,7 +867,7 @@ if [ "$ENABLE_ROUTER" = true ]; then
 		directory: \"todos-page\",
 		component: \"todos-page\",
 		filePath: \"../../views/todos-page/todos-page.ts\",
-		levelOfAccess: [\"public\"],
+		levelOfAccess: [\"private\"],
 		tagName: \"todos-page\",
 		isMfe: false,
 	}"
@@ -953,6 +953,11 @@ export const routesBuilt = (
 		icon: navItem.icon || ("" as IconType),
 		mfeComponent: getMfeComponent(navItem.tagName),
 		userHasPermission: getAccessPermissions(navItem, accesses),
+		children: navItem.children?.map((child: NavItem) => ({
+			...child,
+			icon: child.icon || ("" as IconType),
+			userHasPermission: getAccessPermissions(child, accesses),
+		})),
 	}));
 };
 EOF
@@ -1262,10 +1267,12 @@ export class AppShellHeader extends LitElement {
         ${
 					this.routes.length > 0
 						? html`<ul>
-                ${this.routes.map(
-									(route) =>
-										html`<li><a href="${withBase(route.path)}">${route.name}</a></li>`,
-								)}
+                ${this.routes
+									.filter((route) => route.userHasPermission !== false)
+									.map(
+										(route) =>
+											html`<li><a href="${withBase(route.path)}">${route.name}</a></li>`,
+									)}
               </ul>`
 						: nothing
 				}
@@ -1607,7 +1614,6 @@ export const ViewMixin = <T extends Constructor<LitElement>>(superClass: T) => {
 
 		connectedCallback(): void {
 			super.connectedCallback();
-			this.featureIsEnabled = true;
 			this.mfeLoader?.init();
 		}
 
@@ -1624,7 +1630,7 @@ export const ViewMixin = <T extends Constructor<LitElement>>(superClass: T) => {
 				return this.renderUnderConstruction();
 			}
 
-			if (customTemplate) return html`${customTemplate}`;
+			if (customTemplate && this.featureIsEnabled) return html`${customTemplate}`;
 
 			return html`${
 				this.featureIsEnabled && this.isMfe
@@ -1793,13 +1799,23 @@ EOF
 IMPORTS="import { type HTMLTemplateResult, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { AppShellStyles } from './app-shell.styles';
-import type { NavItem } from './shared/interfaces/navigation.interface';"
+import type { NavItem } from './shared/interfaces/navigation.interface';
+import \"./shared/internal-views/404-not-found/page-not-found\";
+import \"./shared/internal-views/no-access/no-access\";
+import \"./shared/internal-views/under-construction/under-construction\";"
 
 if [ "$ENABLE_CONTEXT" = true ]; then
   IMPORTS="$IMPORTS
 import { provide } from '@lit/context';
 import { AccessesContext } from './shared/contexts/accesses.context';
-import { NavigationContext } from './shared/contexts/navigation.context';
+import { NavigationContext } from './shared/contexts/navigation.context';"
+fi
+
+# MFE loader context is provided independently of ENABLE_CONTEXT so the
+# micro-frontend (MFE) utility works even when context features are off.
+if [ "$ENABLE_MFE_LOADER" = true ]; then
+  IMPORTS="$IMPORTS
+import { provide } from '@lit/context';
 import { MfeLoaderContext } from './shared/contexts/mfe-loader.context';"
 fi
 
@@ -1808,9 +1824,10 @@ if [ "$ENABLE_ROUTER" = true ]; then
 import { Router } from '@lit-labs/router';
 import { html as staticHtml, unsafeStatic } from 'lit/static-html.js';
 import 'urlpattern-polyfill';
-import { navigationRouting } from './shared/configuration/nav';
+import { navigationRouting, sidePages } from './shared/configuration/nav';
 import { routesBuilt } from './shared/configuration/routes';
-import { withBase } from './shared/configuration/base-path';"
+import { withBase } from './shared/configuration/base-path';
+import { AppRootUtilities } from './shared/utilities/app-root.utility';"
 fi
 
 if [ "$ENABLE_HEADER" = true ]; then
@@ -1841,13 +1858,34 @@ cat <<EOF >> src/app-shell.ts
   @property({ type: Array })
   accesses: string[] = ["public"];
 EOF
-  if [ "$ENABLE_MFE_LOADER" = true ]; then
+else
+cat <<EOF >> src/app-shell.ts
+  @property({ type: Array })
+  routing: NavItem[] = [];
+
+  @property({ type: Array })
+  accesses: string[] = ["public"];
+EOF
+fi
+
+if [ "$ENABLE_ROUTER" = true ]; then
+cat <<EOF >> src/app-shell.ts
+  @state()
+  navRoutes: NavItem[] = [] as NavItem[];
+
+  @state()
+  notAllowedRouteList: NavItem[] = [];
+EOF
+fi
+
+# Provide the MFE loader independently of ENABLE_CONTEXT so that the MFE
+# utility initializes even when context features are disabled.
+if [ "$ENABLE_MFE_LOADER" = true ]; then
 cat <<EOF >> src/app-shell.ts
   @provide({ context: MfeLoaderContext })
   @state()
   mfeLoader = new MfeLoader(MFE_LOADER_CONFIG);
 EOF
-  fi
 fi
 
 if [ "$ENABLE_ROUTER" = true ]; then
@@ -1866,10 +1904,19 @@ EOF
 
 if [ "$ENABLE_ROUTER" = true ]; then
 cat <<EOF >> src/app-shell.ts
+    this.navRoutes = this._buildNavBarRoutes(navigationRouting);
     await this._setupRoutes();
 EOF
 fi
 
+# Initialize the MFE loader at the shell level (independent of ENABLE_CONTEXT)
+# so micro-frontend bundles are injected regardless of context feature state.
+if [ "$ENABLE_MFE_LOADER" = true ]; then
+cat <<EOF >> src/app-shell.ts
+    await this.mfeLoader?.init();
+EOF
+fi
+
 cat <<EOF >> src/app-shell.ts
   }
 EOF
@@ -1877,8 +1924,20 @@ EOF
 if [ "$ENABLE_ROUTER" = true ]; then
 cat <<EOF >> src/app-shell.ts
 
+  private _buildNavBarRoutes(navItems: NavItem[]): NavItem[] {
+    const navi = routesBuilt(navItems, this.accesses);
+    const { notAllowed, navItems: filtered } =
+      AppRootUtilities.getNotAllowedRoutes(navi, this.notAllowedRouteList);
+    this.notAllowedRouteList = notAllowed;
+    return filtered;
+  }
+
   private async _setupRoutes(): Promise<void> {
-    this.routing = routesBuilt(navigationRouting, ["public"]);
+    const detailRoutes = this._buildNavBarRoutes([...sidePages]);
+    this.routing = routesBuilt(
+      [...this.navRoutes, ...this.notAllowedRouteList, ...detailRoutes],
+      this.accesses,
+    );
     const routeConfigs = this.routing.map((navItem) => ({
       path: withBase(navItem.path),
       enter: async () => {
@@ -1891,8 +1950,8 @@ cat <<EOF >> src/app-shell.ts
       },
     }));
 
-    const firstPath = navigationRouting[0]?.path || "/home";
-    const firstItem = navigationRouting[0];
+    const firstPath = this.navRoutes[0]?.path || "/home";
+    const firstItem = this.navRoutes[0];
 
     this._router.routes = [
       {
@@ -1926,7 +1985,7 @@ EOF
 
 if [ "$ENABLE_HEADER" = true ]; then
 cat <<EOF >> src/app-shell.ts
-      <app-shell-header .routes="\${this.routing}" enable-theme-switcher>
+      <app-shell-header .routes="\${this.navRoutes}" enable-theme-switcher>
         <main>
 EOF
 else

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quincarter/create-lit-app",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "Interactive CLI initializer for Lit Element App Shell architecture",
   "type": "module",
   "bin": {