[showcase] Refactor the code block renders to improve the results and optimize initial load performance

package.json

@@ -4,6 +4,7 @@
   "type": "module",
   "scripts": {
     "build": "cd packages/showcase && yarn && yarn build",
+    "build.watch": "cd packages/showcase && yarn && yarn build.watch",
     "build.mer": "cd packages/mercury && yarn && yarn build-no-svg",
     "test.mer": "cd packages/mercury && yarn && yarn test",
     "test.mer.watch": "cd packages/mercury && yarn && yarn test.watch",

packages/showcase/angular.json

@@ -17,7 +17,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/showcase",
+            "outputPath": "dist",
             "index": "src/index.html",
             "browser": "src/main.ts",
             "tsConfig": "tsconfig.app.json",
@@ -95,21 +95,6 @@
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n"
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "tsConfig": "tsconfig.spec.json",
-            "inlineStyleLanguage": "scss",
-            "assets": [
-              {
-                "glob": "**/*",
-                "input": "public"
-              }
-            ],
-            "styles": ["src/styles.scss"],
-            "scripts": []
-          }
         }
       }
     }

packages/showcase/package.json

@@ -7,43 +7,36 @@
     "start": "yarn build.scss && ng serve -o --port 0",
     "start.watch": "ng serve -o --port 0",
     "build": "yarn build.scss && ng build",
+    "build.watch": "yarn build -- --watch",
     "build.scss": "mercury -i=/assets/icons/ -f=/assets/fonts/ --outDir=.mercury/ --avoid-hash=base/base",
     "watch": "ng build --watch --configuration development",
     "test": "yarn build.scss && ng test",
-    "serve:ssr:showcase": "node dist/showcase/server/server.mjs"
+    "serve:ssr:showcase": "node dist/server/server.mjs"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~19.0.5",
-    "@angular/common": "~19.0.5",
-    "@angular/compiler": "~19.0.5",
-    "@angular/core": "~19.0.5",
-    "@angular/forms": "~19.0.5",
-    "@angular/platform-browser": "~19.0.5",
-    "@angular/platform-browser-dynamic": "~19.0.5",
-    "@angular/platform-server": "~19.0.5",
-    "@angular/router": "~19.0.5",
-    "@angular/ssr": "~19.0.6",
+    "@angular/common": "~19.2.9",
+    "@angular/compiler": "~19.2.9",
+    "@angular/core": "~19.2.9",
+    "@angular/platform-browser": "~19.2.9",
+    "@angular/platform-browser-dynamic": "~19.2.9",
+    "@angular/platform-server": "~19.2.9",
+    "@angular/router": "~19.2.9",
+    "@angular/ssr": "~19.2.10",
     "@genexus/chameleon-controls-library": "~6.5.0",
     "@genexus/mercury": "*",
     "@genexus/unanimo": "latest",
     "express": "^4.21.2",
-    "rxjs": "~7.8.1",
     "tslib": "~2.8.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~19.0.6",
-    "@angular/cli": "~19.0.6",
-    "@angular/compiler-cli": "~19.0.5",
+    "@angular-devkit/build-angular": "~19.2.10",
+    "@angular/cli": "~19.2.10",
+    "@angular/compiler-cli": "~19.2.9",
     "@types/express": "^4.17.17",
     "@types/jasmine": "~5.1.5",
     "@types/node": "~22.10.5",
     "jasmine-core": "~5.2.0",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
     "prettier": "~3.4.2",
     "typescript": "~5.6.0"
   }

packages/showcase/src/app/app.component.html

@@ -4,7 +4,7 @@
     'components/icon',
     'components/code',
     'components/navigation-list',
-    'components/segmented-control',
+    'components/switch',
     'components/sidebar',
     'utils/elevation',
     'utils/spacing',
@@ -67,12 +67,15 @@
       (selectedItemChange)="handleDesignSystemChange($event)"
     ></ch-segmented-control-render> -->
 
-    <ch-segmented-control-render
-      class="segmented-control"
-      [model]="colorSchemeModel()"
-      [selectedId]="colorScheme()"
-      (selectedItemChange)="handleColorSchemeChange($event)"
-    ></ch-segmented-control-render>
+    <ch-switch
+      class="switch-small"
+      [checkedCaption]="'Dark'"
+      [checkedValue]="'dark'"
+      [value]="colorSchemeService.colorScheme()"
+      [unCheckedCaption]="'Dark'"
+      [unCheckedValue]="'light'"
+      (input)="handleColorSchemeChange()"
+    ></ch-switch>
   </div>
 </header>
 

packages/showcase/src/app/app.component.ts

@@ -15,8 +15,8 @@ import {
   Router,
   RouterOutlet
 } from "@angular/router";
-import { DOCUMENT, isPlatformBrowser, Location } from "@angular/common";
-import {
+import { DOCUMENT, Location } from "@angular/common";
+import type {
   ChEditCustomEvent,
   ChNavigationListRenderCustomEvent,
   ChSegmentedControlRenderCustomEvent,
@@ -29,7 +29,7 @@ import {
 
 import { RuntimeBundlesComponent } from "../user-controls/runtime-bundles/runtime-bundles.component";
 import { getNavigationListRoutes } from "./app.routes";
-import { ColorScheme, DesignSystem } from "../common/types";
+import type { DesignSystem } from "../common/types";
 import { bundleMapping, URL_MAPPING } from "./bundles-and-url-mapping";
 
 import { ColorSchemeService } from "../services/color-scheme.service";
@@ -64,11 +64,6 @@ export class AppComponent {
   dsService = inject(DesignSystemService);
   seoService = inject(SEOService);
 
-  colorSchemeModel = signal<SegmentedControlModel>([
-    { id: "dark", caption: "Dark" },
-    { id: "light", caption: "Light" }
-  ]);
-  colorScheme = signal<ColorScheme>("dark");
   designSystem = signal<DesignSystem | undefined>(undefined);
   designSystemModel = signal<SegmentedControlModel>([
     { id: "mercury", caption: "Mercury" },
@@ -116,15 +111,6 @@ export class AppComponent {
       }
     });
 
-    // Browser
-    if (isPlatformBrowser(this.platform)) {
-      // Initialize the color scheme
-      this.colorScheme.set(this.colorSchemeService.getColorScheme());
-
-      // Store the new color scheme each time the signal is updated
-      effect(() => this.colorSchemeService.setColorScheme(this.colorScheme()));
-    }
-
     effect(() => {
       if (this.designSystem()) {
         // The "!" is a WA to avoid Angular's issues with signal type narrowing
@@ -133,11 +119,10 @@ export class AppComponent {
     });
   }
 
-  handleColorSchemeChange = (
-    event: ChSegmentedControlRenderCustomEvent<string>
-  ) => {
-    this.colorScheme.set(event.detail as ColorScheme);
-  };
+  handleColorSchemeChange = () =>
+    this.colorSchemeService.colorScheme.set(
+      this.colorSchemeService.colorScheme() === "dark" ? "light" : "dark"
+    );
 
   copyBundle = () => navigator.clipboard.writeText(this.selectedBundle());
 

packages/showcase/src/app/app.config.server.ts

@@ -1,11 +1,11 @@
-import { mergeApplicationConfig, ApplicationConfig } from "@angular/core";
+import { mergeApplicationConfig, type ApplicationConfig } from "@angular/core";
 import { provideServerRendering } from "@angular/platform-server";
-import { provideServerRoutesConfig } from "@angular/ssr";
+import { provideServerRouting } from "@angular/ssr";
 import { appConfig } from "./app.config";
 import { serverRoutes } from "./app.routes.server";
 
 const serverConfig: ApplicationConfig = {
-  providers: [provideServerRendering(), provideServerRoutesConfig(serverRoutes)]
+  providers: [provideServerRendering(), provideServerRouting(serverRoutes)]
 };
 
 export const config = mergeApplicationConfig(appConfig, serverConfig);

packages/showcase/src/app/app.config.ts

@@ -1,5 +1,5 @@
 import {
-  ApplicationConfig,
+  type ApplicationConfig,
   provideExperimentalZonelessChangeDetection
 } from "@angular/core";
 import { provideRouter, withComponentInputBinding } from "@angular/router";
@@ -14,6 +14,9 @@ export const appConfig: ApplicationConfig = {
   providers: [
     provideExperimentalZonelessChangeDetection(),
     provideRouter(routes, withComponentInputBinding()),
+
+    // provideClientHydration increases 4KB (compressed) the bundle size
+    // withEventReplay increases 8KB (compressed) the bundle size
     provideClientHydration(withEventReplay())
   ]
 };

packages/showcase/src/app/app.routes.server.ts

@@ -1,4 +1,4 @@
-import { RenderMode, ServerRoute } from "@angular/ssr";
+import { RenderMode, type ServerRoute } from "@angular/ssr";
 
 export const serverRoutes: ServerRoute[] = [
   {

packages/showcase/src/app/app.routes.ts

@@ -1,8 +1,9 @@
-import { Routes } from "@angular/router";
-import {
+import type { Routes } from "@angular/router";
+import type {
   NavigationListItemModel,
   NavigationListModel
 } from "@genexus/chameleon-controls-library";
+
 import {
   COMPONENTS_ROUTES,
   STANDALONE_ROUTES,

packages/showcase/src/app/components/accordion/metadata.ts

@@ -1,14 +1,12 @@
-import { ComponentMetadata } from "../../../common/types";
-import { chameleonImportType } from "../../../services/template-language/create-template";
+import type { ComponentMetadata } from "../../../common/types";
+import { chameleonImportType } from "../../../services/metadata-to-framework-language";
 
 import {
-  accordionCommonChildren,
   accordionCustomHeaderChildren,
   returnAccordionCommonChildren
 } from "./common";
 import {
   accordionModel,
-  accordionWithIconsModel,
   accordionCustomHeaderModel,
   accordionWithIconsModelForMetadata
 } from "./models";
@@ -17,7 +15,7 @@ const CH_TAG = "ch-accordion-render";
 const FILLED_CLASS = "accordion-filled";
 const FILLED_HEADER_CLASS = "accordion-filled-header";
 const OUTLINED_CLASS = "accordion-outlined";
-const ELEVATION_1_CLASS = "elevation-1";
+// const ELEVATION_1_CLASS = "elevation-1";
 const ELEVATION_2_CLASS = "elevation-2";
 const ELEVATION_3_CLASS = "elevation-3";
 

packages/showcase/src/app/components/accordion/models.ts

@@ -1,4 +1,4 @@
-import { AccordionModel } from "@genexus/chameleon-controls-library";
+import type { AccordionModel } from "@genexus/chameleon-controls-library";
 import { getIconPath } from "@genexus/mercury/assets-manager.js";
 
 export const accordionModel: AccordionModel = [

packages/showcase/src/app/components/button/metadata.ts

@@ -1,5 +1,4 @@
-import { ComponentMetadata } from "../../../common/types";
-import { ComponentTemplateItemText } from "../../../services/template-language/types";
+import type { ComponentMetadata } from "../../../common/types";
 import {
   buttonCommon,
   iconCommonPrimary,

packages/showcase/src/app/components/checkbox/metadata.ts

@@ -1,4 +1,4 @@
-import { ComponentMetadata } from "../../../common/types";
+import type { ComponentMetadata } from "../../../common/types";
 
 const COMPONENT_CLASS = "checkbox";
 

packages/showcase/src/app/components/combo-box/combo-box.component.ts

@@ -12,7 +12,6 @@ import { comboBoxMetadata } from "./metadata";
 import { CodeSnippetComponent } from "../../../user-controls/code-snippet/code-snippet.component";
 import { RuntimeBundlesComponent } from "../../../user-controls/runtime-bundles/runtime-bundles.component";
 import { RouterCommonLinksService } from "../../../services/router-links.service";
-import { getComboBoxImagePathCallback } from "@genexus/mercury/assets-manager.js";
 
 @Component({
   selector: "components-combo-box",

packages/showcase/src/app/components/combo-box/metadata.ts

@@ -1,4 +1,4 @@
-import { ComponentMetadata } from "../../../common/types";
+import type { ComponentMetadata } from "../../../common/types";
 
 const COMPONENT_CLASS = "combo-box";
 

packages/showcase/src/app/components/dialog/metadata.ts

@@ -1,4 +1,4 @@
-import { ComponentMetadata } from "../../../common/types";
+import type { ComponentMetadata } from "../../../common/types";
 
 export const iconMetadata = {
   title: "Dialog",

packages/showcase/src/app/components/drop-down/drop-down.component.ts

@@ -11,8 +11,7 @@ import { CommonModule } from "@angular/common";
 import { Router } from "@angular/router";
 import type {
   ChCheckboxCustomEvent,
-  ActionMenuModel,
-  ActionMenuItemActionableModel
+  ActionMenuModel
 } from "@genexus/chameleon-controls-library";
 
 import { dropDownMetadata } from "./metadata";

packages/showcase/src/app/components/drop-down/metadata.ts

@@ -1,5 +1,5 @@
-import { ComponentMetadata } from "../../../common/types";
-import { chameleonImportType } from "../../../services/template-language/create-template";
+import type { ComponentMetadata } from "../../../common/types";
+import { chameleonImportType } from "../../../services/metadata-to-framework-language";
 import {
   nestedModel,
   plainModel,

packages/showcase/src/app/components/icon/metadata.ts

@@ -1,4 +1,4 @@
-import { ComponentMetadata } from "../../../common/types";
+import type { ComponentMetadata } from "../../../common/types";
 
 export const iconMetadata = {
   title: "Icon",

packages/showcase/src/app/components/input/metadata.ts

@@ -1,4 +1,4 @@
-import { ComponentMetadata } from "../../../common/types";
+import type { ComponentMetadata } from "../../../common/types";
 
 const COMPONENT_CLASS = "input";
 

packages/showcase/src/app/components/label/metadata.ts

@@ -1,4 +1,4 @@
-import { ComponentMetadata } from "../../../common/types";
+import type { ComponentMetadata } from "../../../common/types";
 
 const COMPONENT_CLASS = "label";
 

packages/showcase/src/app/components/list-box/list-box.component.ts

@@ -8,11 +8,7 @@ import {
 } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { Router } from "@angular/router";
-import type {
-  ChCheckboxCustomEvent,
-  ActionListModel
-} from "@genexus/chameleon-controls-library";
-import { getIconPath } from "@genexus/mercury/assets-manager.js";
+import type { ChCheckboxCustomEvent } from "@genexus/chameleon-controls-library";
 
 import { listBoxMetadata } from "./metadata";
 import { CSS } from "../../../common/html";

packages/showcase/src/app/components/list-box/metadata.ts

@@ -1,19 +1,16 @@
-import { ComponentMetadata } from "../../../common/types";
-import { chameleonImportType } from "../../../services/template-language/create-template";
+import type { ComponentMetadata } from "../../../common/types";
+import { chameleonImportType } from "../../../services/metadata-to-framework-language";
 import {
   plainModel,
   withSeparatorModel,
   withGroupModel,
   withGroupAndSeparatorModel,
-  withIconsModel,
   withIconsModelForMetadata,
   withAdditionalInormationEndModel,
   withDisabledItemsModel
 } from "./models";
 import { CSS } from "../../../common/html";
 
-const COMPONENT_CLASS = "list-box";
-
 export const listBoxMetadata = {
   title: "List Box",
   description:

packages/showcase/src/app/components/list-box/models.ts

@@ -1,12 +1,11 @@
-import { getIconPath, getIconPathExpanded } from "@genexus/mercury";
-import { start } from "repl";
+import { getIconPath } from "@genexus/mercury";
 
-const chatIconPath =
-  "https://unpkg.com/@genexus/unanimo@0.10.0/dist/assets/icons/chat.svg";
-const editIconPath =
-  "https://unpkg.com/@genexus/unanimo@0.10.0/dist/assets/icons/edit.svg";
-const deleteIconPath =
-  "https://unpkg.com/@genexus/unanimo@0.10.0/dist/assets/icons/delete.svg";
+// const chatIconPath =
+//   "https://unpkg.com/@genexus/unanimo@0.10.0/dist/assets/icons/chat.svg";
+// const editIconPath =
+//   "https://unpkg.com/@genexus/unanimo@0.10.0/dist/assets/icons/edit.svg";
+// const deleteIconPath =
+//   "https://unpkg.com/@genexus/unanimo@0.10.0/dist/assets/icons/delete.svg";
 
 export const plainModel = [
   { id: "item-1", type: "actionable", caption: "Item 1" },