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/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);
+ });
});
};
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/services/widgetTemplate/publish.ts b/src/services/widgetTemplate/publish.ts
index d84351b..253cafd 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 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
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');
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;