object-auto-expand

Author: tripolskypetr

config/main.js

@@ -1,3 +1,6 @@
+const fs = require('fs');
+const path = require('path');
+
 module.exports = {
   stories: [
     "../src/stories/**/*.stories.mdx",
@@ -7,4 +10,26 @@ module.exports = {
     "@storybook/addon-links",
     "@storybook/addon-essentials"
   ],
+  webpackFinal: async (config) => {
+    config.module.rules.push({
+      test: require.resolve('jquery'),
+      use: [{
+          loader: 'expose-loader',
+          options: '$'
+      }]
+    });
+    config.plugins.push({
+      apply: (compiler) => {
+        compiler.hooks.afterEmit.tap('AfterEmitPlugin', () => {
+          const from = path.resolve(__dirname, '../template/object-auto-expand.js');
+          const to = path.resolve(__dirname, '../dist/index.html');
+          console.log();
+          console.log('patching', from, to);
+          fs.appendFileSync(to, `<script>${fs.readFileSync(from)}</script>`);
+          console.log('done')
+        });
+      }
+    });
+    return config;
+  },
 };

package-lock.json

@@ -15,6 +15,8 @@
   "dependencies": {
     "@emotion/css": "^11.7.1",
     "@mui/material": "^5.2.8",
+    "expose-loader": "^3.1.0",
+    "jquery": "^3.6.0",
     "react": "^17.0.1",
     "react-declarative": "^1.6.6",
     "react-dom": "^17.0.1"

package.json

@@ -0,0 +1,26 @@
+(function() {
+
+    const rnd = () => (Math.random() + 1).toString(36).substring(7);
+
+    const main = () => {
+        const EXPANDED_CLASS = `preview-head-expanded-${rnd()}`;
+        debugger
+        const observer = new MutationObserver(() => {
+            const expandButtons = [...document.querySelectorAll('button[type=button] > span')]
+                .filter((el) => el.innerHTML === 'RAW')
+                .map((el) => el.closest('button'));
+            for (const button of expandButtons) {
+                if (!button.classList.contains(EXPANDED_CLASS)) {
+                    button.classList.add(EXPANDED_CLASS);
+                    button.click();
+                }
+            }
+        });
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+    };
+
+    document.addEventListener('DOMContentLoaded', main);
+})();