From 378ab16aedc25809986fe3bf5a6174b0f820c40e Mon Sep 17 00:00:00 2001 From: eurostep-commerce <116254142+eurostep-commerce@users.noreply.github.com> Date: Thu, 20 Oct 2022 14:14:59 +0200 Subject: [PATCH 1/4] Retrieve channel ids to be published From the .env file of the widget-workshop folder in the template folder retrieve the list of ids to be split in list of publishese --- src/cli/deployment/widgetTemplatePublish.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/cli/deployment/widgetTemplatePublish.ts b/src/cli/deployment/widgetTemplatePublish.ts index 59fd1f9..e1c1da6 100644 --- 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('') @@ -33,7 +34,9 @@ const widgetTemplatePublish = () => { return; } - publishWidgetTemplate(widgetTemplate, widgetTemplateDir); + channelIdsToPublish.forEach((channelId) => { + publishWidgetTemplate(widgetTemplate, widgetTemplateDir, channelId); + }); }); }; From 28ddd1fa75152eeb478392274676eb33fe03ebc6 Mon Sep 17 00:00:00 2001 From: eurostep-commerce <116254142+eurostep-commerce@users.noreply.github.com> Date: Thu, 20 Oct 2022 14:17:23 +0200 Subject: [PATCH 2/4] Publish the template on a specific channel id Based on the channel id passed, publish the template in the specific channel id --- src/services/widgetTemplate/publish.ts | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/services/widgetTemplate/publish.ts b/src/services/widgetTemplate/publish.ts index d84351b..0926c99 100644 --- a/src/services/widgetTemplate/publish.ts +++ b/src/services/widgetTemplate/publish.ts @@ -1,3 +1,6 @@ +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'; @@ -5,8 +8,10 @@ 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 publishWidgetTemplate = async (widgetName: string, widgetTemplateDir: string, channelId: string) => { const widgetTemplateUuid = track.isTracked(widgetTemplateDir); - try { const widgetConfiguration = await Promise.all([ widgetTemplateLoader(widgetTemplateDir), @@ -50,7 +54,7 @@ const publishWidgetTemplate = async (widgetName: string, widgetTemplateDir: stri } return acc; - }, widgetTemplatePayload(widgetName), + }, widgetTemplatePayload(widgetName, channelId), )); const { uuid } = await publishWidget(widgetConfiguration, widgetTemplateUuid); @@ -59,7 +63,7 @@ const publishWidgetTemplate = async (widgetName: string, widgetTemplateDir: stri track.startTracking(widgetTemplateDir, uuid); 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); From 90485aea019848f12e34969099793fb0a83dbe3d Mon Sep 17 00:00:00 2001 From: francescopozzobon Date: Fri, 17 Mar 2023 11:30:01 +0100 Subject: [PATCH 3/4] Manage different widget uuid for different channels --- src/services/widgetTemplate/publish.ts | 4 ++-- src/services/widgetTemplate/track.ts | 9 ++++++--- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/services/widgetTemplate/publish.ts b/src/services/widgetTemplate/publish.ts index 0926c99..253cafd 100644 --- a/src/services/widgetTemplate/publish.ts +++ b/src/services/widgetTemplate/publish.ts @@ -30,7 +30,7 @@ const widgetTemplatePayload = (widgetName: string, channelId: string): CreateWid }); const publishWidgetTemplate = async (widgetName: string, widgetTemplateDir: string, channelId: string) => { - const widgetTemplateUuid = track.isTracked(widgetTemplateDir); + const widgetTemplateUuid = track.isTracked(widgetTemplateDir, channelId); try { const widgetConfiguration = await Promise.all([ widgetTemplateLoader(widgetTemplateDir), @@ -60,7 +60,7 @@ const publishWidgetTemplate = async (widgetName: string, widgetTemplateDir: stri 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} - Channel ID: ${channelId}`); diff --git a/src/services/widgetTemplate/track.ts b/src/services/widgetTemplate/track.ts index 1f31fe5..5af4c83 100644 --- 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'); From c811c4bf42330b541922b32e85ca73a06b1c23ad Mon Sep 17 00:00:00 2001 From: francescopozzobon Date: Thu, 23 Mar 2023 09:38:44 +0100 Subject: [PATCH 4/4] Display in widget preview the theme style --- public/index.html | 1 + src/cli/create/starterTemplate.ts | 3 ++- src/cli/run/start.ts | 3 ++- src/client/components/App/App.tsx | 11 +++++++++++ src/server/index.ts | 15 ++++++++++----- src/services/auth/generate.test.ts | 1 + src/services/auth/generate.ts | 1 + src/services/broadcast/liveReload.ts | 10 ++++++---- src/types.ts | 1 + 9 files changed, 35 insertions(+), 11 deletions(-) diff --git a/public/index.html b/public/index.html index ba098fc..b034f18 100644 --- a/public/index.html +++ b/public/index.html @@ -4,6 +4,7 @@ Widget Builder +
diff --git a/src/cli/create/starterTemplate.ts b/src/cli/create/starterTemplate.ts index b4997b0..08ff57b 100644 --- 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('') @@ -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/run/start.ts b/src/cli/run/start.ts index 6686a34..c8b8b58 100644 --- 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 index 43aa96a..642a80e 100755 --- 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 index fcd385d..b041a5f 100755 --- 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,7 +41,7 @@ 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; @@ -46,7 +49,7 @@ function setupFileWatcher({ directory, sockets, options }: Watcher) { 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 index f2c9c33..97de862 100644 --- 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 index 76fb415..b47b6a6 100644 --- 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 index ec47137..6f24851 100644 --- 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,13 +46,13 @@ 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, }); }); @@ -58,6 +60,6 @@ export default function liveReload({ } broadcastWidgetChange({ - directory, sockets, fileEvent, filePath, + directory, sockets, fileEvent, filePath, themeHost, }); } diff --git a/src/types.ts b/src/types.ts index b74f2cd..884d189 100644 --- 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;