chore(dev-server): Update ui-devkit testing code

packages/dev-server/README.md

@@ -24,6 +24,18 @@ Specify the database as above to populate that database:
 DB=sqlite yarn populate
 ```
 
+## Testing custom ui extension compilation
+
+In order to compile ui extensions within this monorepo, you need to add the following entry to
+this package's `package.json` devDependencies:
+
+```
+ "@vendure/admin-ui": "./packages/admin-ui/package",
+```
+
+and then run `yarn`. Make sure you already built the admin-ui package first.
+
+
 ## Load testing
 
 This package also contains scripts for load testing the Vendure server. The load testing infrastructure and scripts are located in the [`./load-testing`](./load-testing) directory.

packages/dev-server/dev-config.ts

@@ -395,23 +395,53 @@ export const devConfig: VendureConfig = {
             route: 'admin',
             port: 5001,
             // Un-comment to compile a custom admin ui
-            // app: compileUiExtensions({
-            //     outputPath: path.join(__dirname, './custom-admin-ui'),
-            //     extensions: [
-            //         {
-            //             extensionPath: path.join(__dirname, 'test-plugins/with-ui-extension/ui'),
-            //             ngModules: [
-            //                 {
-            //                     type: 'lazy',
-            //                     route: 'greet',
-            //                     ngModuleFileName: 'greeter.module.ts',
-            //                     ngModuleName: 'GreeterModule',
-            //                 },
-            //             ],
-            //         },
-            //     ],
-            //     devMode: true,
-            // }),
+            app: compileUiExtensions({
+                outputPath: path.join(__dirname, './custom-admin-ui'),
+                extensions: [
+                    {
+                        id: 'test-ui-extension',
+                        extensionPath: path.join(__dirname, 'test-plugins/with-ui-extension/ui'),
+                        ngModules: [
+                            {
+                                type: 'lazy',
+                                route: 'greetz',
+                                ngModuleFileName: 'greeter.module.ts',
+                                ngModuleName: 'GreeterModule',
+                            },
+                            {
+                                type: 'shared',
+                                ngModuleFileName: 'greeter-shared.module.ts',
+                                ngModuleName: 'GreeterSharedModule',
+                            },
+                        ],
+                    },
+                    {
+                        globalStyles: path.join(
+                            __dirname,
+                            'test-plugins/with-ui-extension/ui/custom-theme.scss',
+                        ),
+                    },
+                    {
+                        id: 'external-ui-extension',
+                        extensionPath: path.join(__dirname, 'test-plugins/with-external-ui-extension'),
+                        ngModules: [
+                            {
+                                type: 'lazy',
+                                route: 'greet',
+                                ngModuleFileName: 'external-ui-extension.ts',
+                                ngModuleName: 'ExternalUiExtensionModule',
+                            },
+                        ],
+                        staticAssets: [
+                            {
+                                path: path.join(__dirname, 'test-plugins/with-external-ui-extension/app'),
+                                rename: 'external-app',
+                            },
+                        ],
+                    },
+                ],
+                devMode: true,
+            }),
         }),
     ],
 };

packages/dev-server/package.json

@@ -24,7 +24,6 @@
     },
     "devDependencies": {
         "@types/csv-stringify": "^3.1.0",
-        "@vendure/admin-ui": "./packages/admin-ui/package",
         "@vendure/testing": "2.0.0-beta.2",
         "@vendure/ui-devkit": "2.0.0-beta.2",
         "commander": "^7.1.0",

packages/dev-server/test-plugins/with-external-ui-extension/app/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>My App</title>
+        <link rel="stylesheet" href="../../theme.min.css" />
+        <script src="../devkit/ui-devkit.js"></script>
+    </head>
+    <body>
+        <div class="page-block">
+            <h1>Hello!</h1>
+            <button class="button primary" id="trigger">Trigger a notification</button>
+
+            <div style="background-color: antiquewhite; margin: 50px; height: 1700px; width: 200px"></div>
+        </div>
+        <script>
+            document.querySelector('#trigger').addEventListener('click', () => {
+                VendureUiClient.notify({
+                    message: 'Hello!',
+                });
+            });
+        </script>
+    </body>
+</html>

packages/dev-server/test-plugins/with-external-ui-extension/external-ui-extension.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { hostExternalFrame } from '@vendure/admin-ui/core';
+
+@NgModule({
+    imports: [
+        RouterModule.forChild([
+            hostExternalFrame({
+                path: '',
+                breadcrumbLabel: 'Test',
+                extensionUrl: './assets/external-app/index.html',
+                openInNewTab: false,
+            }),
+        ]),
+    ],
+})
+export class ExternalUiExtensionModule {}

packages/dev-server/test-plugins/with-ui-extension/ui/custom-theme.scss

@@ -0,0 +1,17 @@
+:root {
+    --color-primary-100: hsl(36 100% 95%);
+       --color-primary-125: hsl(36 100% 93%);
+       --color-primary-150: hsl(36 100% 90%);
+       --color-primary-200: hsl(36 100% 85%);
+       --color-primary-300: hsl(36 100% 75%);
+       --color-primary-400: hsl(36 100% 65%);
+       --color-primary-500: hsl(36 100% 55%);
+       --color-primary-600: hsl(36 100% 45%);
+       --color-primary-700: hsl(36 100% 35%);
+       --color-primary-800: hsl(36 100% 25%);
+       --color-primary-900: hsl(36 100% 15%);
+       --color-primary-950: hsl(36 100% 10%);
+       --color-primary-975: hsl(36 100% 7%);
+       --color-primary-1000: hsl(36 100 5%);
+}
+

packages/dev-server/test-plugins/with-ui-extension/ui/greeter-shared.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { addNavMenuSection, SharedModule } from '@vendure/admin-ui/core';
+
+@NgModule({
+    imports: [SharedModule],
+    providers: [
+        addNavMenuSection(
+            {
+                id: 'greeter',
+                label: 'My Extensions',
+                items: [
+                    {
+                        id: 'greeter',
+                        label: 'Greeter',
+                        routerLink: ['/extensions/greet'],
+                        // Icon can be any of https://clarity.design/icons
+                        icon: 'cursor-hand-open',
+                    },
+                ],
+            },
+            // Add this section before the "settings" section
+            'settings',
+        ),
+    ],
+})
+export class GreeterSharedModule {}