@merkur/integration-custom-element 0.36.2 → 0.36.3

package/cli/index.mjs

@@ -1,5 +1,72 @@
+import fs from 'node:fs';
+
+import { createLogger } from '@merkur/cli';
 import { createAssets } from '@merkur/integration/server';
 
+export function merkurCustomElementCssBundlePlugin({ cliConfig, config }) {
+  const { projectFolder } = cliConfig;
+  const { writeToDisk } = config;
+  const logger = createLogger('merkurCustomElementCssBundlePlugin', cliConfig);
+
+  return {
+    name: 'merkurCustomElementCssBundlePlugin',
+    setup(build) {
+      build.onResolve(
+        { filter: /@merkur\/integration-custom-element\/cssBundle/ },
+        (args) => {
+          return {
+            path: args.path,
+            namespace: 'merkur-custom-element-css-bundle',
+          };
+        },
+      );
+
+      build.onLoad(
+        {
+          filter: /@merkur\/integration-custom-element\/cssBundle/,
+          namespace: 'merkur-custom-element-css-bundle',
+        },
+        async () => {
+          return {
+            contents: 'var STYLE={__bundle__:""}; export default STYLE;',
+          };
+        },
+      );
+
+      build.onEnd((result) => {
+        if (!writeToDisk) {
+          logger.debug('merkurCustomElementCssBundlePlugin is disabled');
+        }
+
+        Object.keys(result?.metafile?.outputs ?? {}).map((key) => {
+          const value = result.metafile.outputs[key];
+
+          if ('cssBundle' in value) {
+            try {
+              let css = fs.readFileSync(`${projectFolder}/${value.cssBundle}`, {
+                encoding: 'utf8',
+                flag: 'r',
+              });
+              css = css.replace(/\n/g, ' ');
+
+              let js = fs.readFileSync(`${projectFolder}/${key}`, {
+                encoding: 'utf8',
+                flag: 'r',
+              });
+              js = js.replace('{__bundle__:""}', `\`${css}\``);
+              js = js.replace('{ __bundle__: "" };', `\`${css}\``);
+
+              fs.writeFileSync(`${projectFolder}/${key}`, js);
+            } catch (error) {
+              logger.error(error);
+            }
+          }
+        });
+      });
+    },
+  };
+}
+
 export default function ({ emitter, EMITTER_EVENTS }) {
   emitter.on(
     EMITTER_EVENTS.MERKUR_CONFIG,
@@ -14,10 +81,6 @@ export default function ({ emitter, EMITTER_EVENTS }) {
               name: 'widget.js',
               type: 'script',
             },
-            {
-              name: 'widget.css',
-              type: 'stylesheet',
-            },
           ],
           staticFolder,
           staticBaseUrl: `${protocol}//${host}${staticPath}`,
@@ -60,4 +123,23 @@ export default function ({ emitter, EMITTER_EVENTS }) {
       return cliConfig;
     },
   );
+
+  emitter.on(
+    EMITTER_EVENTS.CLI_CONFIG,
+    function forceWriteToDisk({ cliConfig }) {
+      cliConfig.writeToDisk = true;
+
+      return cliConfig;
+    },
+  );
+
+  emitter.on(
+    EMITTER_EVENTS.TASK_BUILD,
+    function registerCustomElementPlugin(event) {
+      const { build } = event;
+      build.plugins.push(merkurCustomElementCssBundlePlugin(event));
+
+      return build;
+    },
+  );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@merkur/integration-custom-element",
-  "version": "0.36.2",
+  "version": "0.36.3",
   "description": "Merkur module for easy integration with other apps with custom element.",
   "main": "lib/index",
   "module": "lib/index",
@@ -8,6 +8,7 @@
   "sideEffects": false,
   "exports": {
     "./cli": "./cli/index.mjs",
+    "./cssBundle": "./cli/cssBundle.mjs",
     ".": {
       "import": "./lib/index.mjs",
       "require": "./lib/index.cjs"
@@ -57,5 +58,5 @@
     "@merkur/core": "*",
     "@merkur/integration": "*"
   },
-  "gitHead": "e12bdfa8ff7e8f927edd757d051a90ddf9a95b01"
+  "gitHead": "bda01b8902e75089b69748bb98b8128b80ca0e87"
 }