Display in widget preview the theme style

pozzobonfeurostep · pozzobonfeurostep · commit c811c4bf4233 · 2023-03-23T09:38:44.000+01:00
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/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/types.ts b/src/types.ts
@@ -18,6 +18,7 @@ export interface SocketData {
     event: string;
     html: string;
     path: string;
+    themeHost: string;
 }
 
 export default WidgetFileType;

Original file line number	Diff line number	Diff line change
`@@ -18,6 +18,7 @@ export interface SocketData {`
`18`	`18`	`event: string;`
`19`	`19`	`html: string;`
`20`	`20`	`path: string;`
	`21`	`+ themeHost: string;`
`21`	`22`	`}`
`22`	`23`
`23`	`24`	`export default WidgetFileType;`