feat(dev-server): Example embedded UI extensions

Relates to #225
vendure-ecommerce · Dec 10, 2019 · 532b952 · 532b952
1 parent 085c7cf
commit 532b952
Show file tree

Hide file tree

Showing 8 changed files with 139 additions and 13 deletions.
diff --git a/packages/admin-ui/src/app/core/components/notification/notification.component.ts b/packages/admin-ui/src/app/core/components/notification/notification.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, ElementRef, HostListener, ViewChild } from '@angular/core';
+import { Component, ElementRef, HostListener, ViewChild } from '@angular/core';
 
 import { NotificationType } from '../../providers/notification/notification.service';
 

diff --git a/packages/dev-server/dev-config.ts b/packages/dev-server/dev-config.ts
@@ -72,8 +72,8 @@ export const devConfig: VendureConfig = {
         UiPlugin,
         AdminUiPlugin.init({
             port: 5001,
-            // extensions: UiPlugin.uiExtensions,
-            // watch: true,
+            extensions: UiPlugin.uiExtensions,
+            watch: true,
         }),
     ],
 };

diff --git a/packages/dev-server/package.json b/packages/dev-server/package.json
@@ -25,6 +25,7 @@
   "devDependencies": {
     "@types/csv-stringify": "^3.1.0",
     "@vendure/testing": "^0.6.4",
+    "@vendure/ui-devkit": "^0.6.4",
     "concurrently": "^5.0.0",
     "csv-stringify": "^5.3.3"
   }

diff --git a/packages/dev-server/ui-plugin/extensions/js-app/index.html b/packages/dev-server/ui-plugin/extensions/js-app/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<h1>Hello from the plain JS app</h1>
+</body>
+</html>
diff --git a/packages/dev-server/ui-plugin/extensions/ui-plugin.module.ts b/packages/dev-server/ui-plugin/extensions/ui-plugin.module.ts
@@ -1,6 +1,11 @@
 import { Component, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { ModalService, SharedModule } from '@vendure/admin-ui/src';
+import {
+    ExtensionHostComponent,
+    ExtensionHostConfig,
+    ModalService,
+    SharedModule,
+} from '@vendure/admin-ui/src';
 
 @Component({
     selector: 'plugin-test-component',
@@ -26,15 +31,35 @@ export class TestComponent {
 }
 
 @NgModule({
+    declarations: [TestComponent],
     imports: [
         SharedModule,
         RouterModule.forChild([
             {
-                path: 'test',
-                component: TestComponent,
+                path: 'js-app',
+                component: ExtensionHostComponent,
+                data: {
+                    extensionHostConfig: new ExtensionHostConfig({
+                        extensionUrl: './assets/js-app/index.html',
+                    }),
+                },
+            },
+            {
+                path: 'vue-app',
+                component: ExtensionHostComponent,
+                data: {
+                    breadcrumb: [
+                        {
+                            label: 'Vue.js extension',
+                            link: ['./'],
+                        },
+                    ],
+                    extensionHostConfig: new ExtensionHostConfig({
+                        extensionUrl: './assets/vue-app/index.html',
+                    }),
+                },
             },
         ]),
     ],
-    declarations: [TestComponent],
 })
 export class TestModule {}
diff --git a/packages/dev-server/ui-plugin/extensions/ui-shared-plugin.module.ts b/packages/dev-server/ui-plugin/extensions/ui-shared-plugin.module.ts
@@ -10,7 +10,6 @@ import {
     NavBuilderService,
     SharedModule,
 } from '@vendure/admin-ui/src';
-import { unique } from '@vendure/common/lib/unique';
 import gql from 'graphql-tag';
 import { Observable, of } from 'rxjs';
 import { startWith, switchMap } from 'rxjs/operators';
@@ -142,13 +141,19 @@ export function addNavItems(navBuilder: NavBuilderService) {
         navBuilder.addNavMenuSection(
             {
                 id: 'test-plugin',
-                label: 'Test Plugin',
+                label: 'UI Test Plugin',
                 items: [
                     {
-                        id: 'stats',
-                        label: 'Test',
-                        routerLink: ['/extensions/test'],
-                        icon: 'line-chart',
+                        id: 'js-app',
+                        label: 'Plain JS App',
+                        routerLink: ['/extensions/js-app'],
+                        icon: 'code',
+                    },
+                    {
+                        id: 'vue-app',
+                        label: 'Vue App',
+                        routerLink: ['/extensions/vue-app'],
+                        icon: 'code',
                     },
                 ],
             },

diff --git a/packages/dev-server/ui-plugin/extensions/vue-app/index.html b/packages/dev-server/ui-plugin/extensions/vue-app/index.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>Vue App</title>
+        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+        <script src="../devkit/ui-devkit.js"></script>
+        <link rel="stylesheet" href="https://unpkg.com/@clr/ui/clr-ui.min.css" />
+    </head>
+    <body>
+        <div id="app" style="padding: 1rem;">
+            <div>
+                <h1>Hello from Vue.js!</h1>
+                <button v-on:click="getProducts" class="btn btn-primary">Get products</button>
+                <h3>Products</h3>
+                <ol>
+                    <li v-for="product in products">
+                        {{ product.name }}
+                        <span class="label label-success" v-if="product.enabled">Enabled</span>
+                        <span class="label label-danger" v-else>Disabled</span>
+                        <button
+                            v-on:click="toggleEnabled(product.id, !product.enabled)"
+                            class="btn btn-sm btn-secondary"
+                        >
+                            toggle
+                        </button>
+                    </li>
+                </ol>
+            </div>
+        </div>
+        <script>
+            var app = new Vue({
+                el: '#app',
+                data: {
+                    message: 'Hello Vue!',
+                    products: [],
+                },
+                methods: {
+                    getProducts: function() {
+                        const query = `
+                        query GetProducts($skip: Int, $take: Int) {
+                            products(options: { skip: $skip, take: $take }) {
+                                items { id, name, enabled },
+                                totalItems
+                            }
+                        }`;
+                        this.sub = VendureUiDevkit.graphQlQuery(query, {
+                            skip: 0,
+                            take: 10,
+                        }).stream.subscribe(
+                            val => {
+                                this.products = val.products.items;
+                            },
+                            err => console.error(err),
+                            () => console.log('completed products stream'),
+                        );
+                    },
+                    toggleEnabled: function(id, enabled) {
+                        const mutation = `
+                        mutation ToggleEnabled($id: ID!, $enabled: Boolean!) {
+                            updateProduct(input: { id: $id, enabled: $enabled }) {
+                                id
+                                enabled
+                            }
+                        }
+                        `;
+                        VendureUiDevkit.graphQlMutation(mutation, { id, enabled }).then(val => {
+                            VendureUiDevkit.notify({
+                                message: 'Updated Product',
+                            });
+                        });
+                    },
+                },
+                beforeDestroy: function() {
+                    console.log('destroying!');
+                    this.sub.unsubscribe();
+                },
+            });
+        </script>
+    </body>
+</html>
diff --git a/packages/dev-server/ui-plugin/ui-plugin.ts b/packages/dev-server/ui-plugin/ui-plugin.ts
@@ -19,6 +19,10 @@ export class UiPlugin {
                     ngModuleName: 'TestSharedModule',
                 },
             ],
+            staticAssets: [
+                path.join(__dirname, 'extensions/js-app'),
+                path.join(__dirname, 'extensions/vue-app'),
+            ],
         },
     ];
 }