bigcommerce · eurostep-commerce · Oct 20, 2022 · Oct 20, 2022 · Mar 17, 2023 · Mar 17, 2023
diff --git a/public/index.html b/public/index.html
@@ -4,6 +4,7 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Widget Builder</title>
+        <link href="" id="theme-host-stylesheet" rel="stylesheet"/>
     </head>
     <body>
         <div id="root"></div>

diff --git a/src/cli/create/starterTemplate.ts b/src/cli/create/starterTemplate.ts
@@ -10,6 +10,7 @@ import startWidgetBuilder from '../../server';
 
 const createStarterTemplate = () => {
     const program = new Command('create');
+    const themeHost = process.env.WIDGET_BUILDER_THEME_HOST ? process.env.WIDGET_BUILDER_THEME_HOST : 'http://localhost:3000';
 
     program
         .arguments('<widget-template-name>')
@@ -27,7 +28,7 @@ const createStarterTemplate = () => {
             try {
                 const widgetTemplateDir = path.resolve(`./${name}`);
                 createStarterWidgetTemplate.generate(name);
-                startWidgetBuilder(widgetTemplateDir, { autoOpen: true });
+                startWidgetBuilder(widgetTemplateDir, { autoOpen: true }, themeHost);
             } catch (e) {
                 log.error(e.message);
             }

diff --git a/src/cli/deployment/widgetTemplatePublish.ts b/src/cli/deployment/widgetTemplatePublish.ts
@@ -12,6 +12,7 @@ import AUTH_CONFIG from '../../services/auth/authConfig';
 
 const widgetTemplatePublish = () => {
     const program = new Command('publish');
+    const channelIdsToPublish = process.env.WIDGET_BUILDER_CHANNEL_ID ? process.env.WIDGET_BUILDER_CHANNEL_ID.split(',') : ['1'];
 
     return program
         .arguments('<widget-template>')
@@ -33,7 +34,9 @@ const widgetTemplatePublish = () => {
                 return;
             }
 
-            publishWidgetTemplate(widgetTemplate, widgetTemplateDir);
+            channelIdsToPublish.forEach((channelId) => {
+                publishWidgetTemplate(widgetTemplate, widgetTemplateDir, channelId);
+            });
         });
 };
 

diff --git a/src/cli/run/start.ts b/src/cli/run/start.ts
@@ -10,6 +10,7 @@ import AUTH_CONFIG from '../../services/auth/authConfig';
 
 const startCommand = () => {
     const program = new Command('start');
+    const themeHost = process.env.WIDGET_BUILDER_THEME_HOST ? process.env.WIDGET_BUILDER_THEME_HOST : 'http://localhost:3000';
 
     return program
         .arguments('[widgetPath]')
@@ -31,7 +32,7 @@ const startCommand = () => {
                 widgetDir += `/${widgetPath}`;
             }
 
-            startWidgetBuilder(widgetDir, options);
+            startWidgetBuilder(widgetDir, options, themeHost);
         });
 };
 

diff --git a/src/client/components/App/App.tsx b/src/client/components/App/App.tsx
@@ -25,6 +25,17 @@ export class App extends Component<{}, {}> {
         this.socket.on('disconnect', () => {
             this.socket = undefined;
         });
+
+        this.socket.on('event', (data: SocketData) => {
+            // const stylesheetTag = document.createElement('link');
+            // stylesheetTag.rel = 'stylesheet';
+            // stylesheetTag.href = `${data.themeHost}/stencil/00000000-0000-0000-0000-000000000001/css/theme-00000000-0000-0000-0000-000000000001.css`;
+            // document.head.appendChild(stylesheetTag);
+            const elem = document.getElementById('theme-host-stylesheet');
+            if (elem) {
+                elem.setAttribute('href', `${data.themeHost}/stencil/00000000-0000-0000-0000-000000000001/css/theme-00000000-0000-0000-0000-000000000001.css`);
+            }
+        });
     }
 
     mountWidget(html: string) {

diff --git a/src/server/index.ts b/src/server/index.ts
@@ -23,9 +23,12 @@ interface Watcher {
     directory: string;
     sockets: Socket[];
     options: Options;
+    themeHost: string;
 }
 
-function setupFileWatcher({ directory, sockets, options }: Watcher) {
+function setupFileWatcher({
+    directory, sockets, options, themeHost,
+}: Watcher) {
     chokidar.watch(directory).on('all', (fileEvent: string, filePath: string) => {
     // We only care about change events
         if (fileEvent !== 'change') { return; }
@@ -38,15 +41,15 @@ function setupFileWatcher({ directory, sockets, options }: Watcher) {
         case WidgetFileType.CONFIGURATION:
         case WidgetFileType.QUERY:
             liveReload({
-                directory, sockets, fileEvent, filePath, options,
+                directory, sockets, fileEvent, filePath, options, themeHost,
             });
             break;
 
         case WidgetFileType.QUERY_PARAMS_BUILDER:
             validateQueryParamsBuilder(directory);
 
             liveReload({
-                directory, sockets, fileEvent, filePath, options,
+                directory, sockets, fileEvent, filePath, options, themeHost,
             });
             break;
 
@@ -57,7 +60,7 @@ function setupFileWatcher({ directory, sockets, options }: Watcher) {
             generateConfig(directory);
 
             liveReload({
-                directory, sockets, fileEvent, filePath, options,
+                directory, sockets, fileEvent, filePath, options, themeHost,
             });
 
             break;
@@ -71,7 +74,7 @@ function setupFileWatcher({ directory, sockets, options }: Watcher) {
     });
 }
 
-export default function startWidgetBuilder(directory: string, options: Options) {
+export default function startWidgetBuilder(directory: string, options: Options, themeHost: string) {
     const app = express();
     app.use(express.static(path.join(__dirname, '../', 'client')));
 
@@ -102,6 +105,7 @@ export default function startWidgetBuilder(directory: string, options: Options)
                         event: 'initialize',
                         html,
                         path: '',
+                        themeHost,
                     },
                 });
             })
@@ -132,5 +136,6 @@ export default function startWidgetBuilder(directory: string, options: Options)
         directory,
         sockets,
         options,
+        themeHost,
     });
 }
diff --git a/src/services/auth/generate.test.ts b/src/services/auth/generate.test.ts
@@ -18,6 +18,7 @@ WIDGET_BUILDER_AUTH_ID=${config.clientId}
 WIDGET_BUILDER_AUTH_TOKEN=${config.accessToken}
 WIDGET_BUILDER_CHANNEL_ID=1
 WIDGET_BUILDER_API_GATEWAY_BASE=${config.apiPath.replace(/\/$/, '')}
+WIDGET_BUILDER_THEME_HOST=http://localhost:3000
 `;
 
 

diff --git a/src/services/auth/generate.ts b/src/services/auth/generate.ts
@@ -20,6 +20,7 @@ WIDGET_BUILDER_AUTH_ID=${clientId}
 WIDGET_BUILDER_AUTH_TOKEN=${accessToken}
 WIDGET_BUILDER_CHANNEL_ID=1
 WIDGET_BUILDER_API_GATEWAY_BASE=${apiPath.replace(/\/$/, '')}
+WIDGET_BUILDER_THEME_HOST=http://localhost:3000
 `;
 
     try {

diff --git a/src/services/broadcast/liveReload.ts b/src/services/broadcast/liveReload.ts
@@ -11,6 +11,7 @@ interface WidgetChangeBroadcast {
     sockets: Socket[];
     fileEvent: string;
     filePath: string;
+    themeHost: string;
 }
 
 export interface Options {
@@ -24,7 +25,7 @@ interface LiveReloadPayload extends WidgetChangeBroadcast {
 }
 
 const broadcastWidgetChange = ({
-    directory, sockets, fileEvent, filePath,
+    directory, sockets, fileEvent, filePath, themeHost,
 }: WidgetChangeBroadcast) => {
     renderWidget(directory)
         .then((html: string) => {
@@ -34,6 +35,7 @@ const broadcastWidgetChange = ({
                     event: fileEvent,
                     html,
                     path: filePath,
+                    themeHost,
                 },
             });
             log.info(messages.rerenderWidget());
@@ -44,20 +46,20 @@ const broadcastWidgetChange = ({
 };
 
 export default function liveReload({
-    directory, sockets, fileEvent, filePath, options,
+    directory, sockets, fileEvent, filePath, options, themeHost,
 }: LiveReloadPayload) {
     if (options && options.genQueryParams) {
         generateQueryParams(directory)
             .then(() => {
                 broadcastWidgetChange({
-                    directory, sockets, fileEvent, filePath,
+                    directory, sockets, fileEvent, filePath, themeHost,
                 });
             });
 
         return;
     }
 
     broadcastWidgetChange({
-        directory, sockets, fileEvent, filePath,
+        directory, sockets, fileEvent, filePath, themeHost,
     });
 }
diff --git a/src/services/widgetTemplate/publish.ts b/src/services/widgetTemplate/publish.ts
@@ -1,12 +1,17 @@
+import dotenv from 'dotenv';
+import { toInteger } from 'lodash';
+
 import { log, messages } from '../../messages';
 import queryLoader from '../query/queryLoader/queryLoader';
 import queryParamsLoader from '../query/queryParamsLoader/queryParamsLoader';
 import { publishWidget } from '../api/widget';
 import WidgetFileType, { FileLoaderResponse } from '../../types';
 import schemaLoader from '../schema/schemaLoader/schemaLoader';
 
-import widgetTemplateLoader from './widgetTemplateLoader/widgetTemplateLoader';
 import track from './track';
+import widgetTemplateLoader from './widgetTemplateLoader/widgetTemplateLoader';
+
+dotenv.config();
 
 interface CreateWidgetTemplateReq {
     name: string;
@@ -16,17 +21,16 @@ interface CreateWidgetTemplateReq {
     channel_id: number;
 }
 
-const widgetTemplatePayload = (widgetName: string): CreateWidgetTemplateReq => ({
+const widgetTemplatePayload = (widgetName: string, channelId: string): CreateWidgetTemplateReq => ({
     name: widgetName,
     schema: [],
     template: '',
     storefront_api_query: '',
-    channel_id: 1,
+    channel_id: toInteger(channelId),
 });
 
-const publishWidgetTemplate = async (widgetName: string, widgetTemplateDir: string) => {
-    const widgetTemplateUuid = track.isTracked(widgetTemplateDir);
-
+const publishWidgetTemplate = async (widgetName: string, widgetTemplateDir: string, channelId: string) => {
+    const widgetTemplateUuid = track.isTracked(widgetTemplateDir, channelId);
     try {
         const widgetConfiguration = await Promise.all([
             widgetTemplateLoader(widgetTemplateDir),
@@ -50,16 +54,16 @@ const publishWidgetTemplate = async (widgetName: string, widgetTemplateDir: stri
                 }
 
                 return acc;
-            }, widgetTemplatePayload(widgetName),
+            }, widgetTemplatePayload(widgetName, channelId),
         ));
 
         const { uuid } = await publishWidget(widgetConfiguration, widgetTemplateUuid);
 
         if (!widgetTemplateUuid) {
-            track.startTracking(widgetTemplateDir, uuid);
+            track.startTracking(widgetTemplateDir, uuid, channelId);
             log.success(messages.widgetRelease.success(widgetName));
         } else {
-            log.success(`Successfully updated ${widgetName}`);
+            log.success(`Successfully updated ${widgetName} - Channel ID: ${channelId}`);
         }
     } catch {
         log.error(messages.widgetRelease.failure);

diff --git a/src/services/widgetTemplate/track.ts b/src/services/widgetTemplate/track.ts
@@ -2,9 +2,10 @@ import { readFileSync, writeFileSync } from 'fs';
 
 import { log } from '../../messages';
 
-const filePath = (dir: string): string => `${dir}/widget.yml`;
 
-const isTracked = (dir: string): string | null => {
+const isTracked = (dir: string, channelId: string): string | null => {
+    const filePath = (dir: string): string => `${dir}/widget-channel-${channelId}.yml`;
+
     try {
         const data = readFileSync(filePath(dir), 'utf-8');
         if (!data) {
@@ -17,7 +18,9 @@ const isTracked = (dir: string): string | null => {
     }
 };
 
-const startTracking = (dir: string, uuid: string) => {
+const startTracking = (dir: string, uuid: string, channelId: string) => {
+    const filePath = (dir: string): string => `${dir}/widget-channel-${channelId}.yml`;
+
     try {
         writeFileSync(filePath(dir), uuid);
         log.success('New publishes now will update instead of creating a new instance');

diff --git a/src/types.ts b/src/types.ts
@@ -18,6 +18,7 @@ export interface SocketData {
     event: string;
     html: string;
     path: string;
+    themeHost: string;
 }
 
 export default WidgetFileType;