test export-order-loader changes

.storybook/loaders/export-order-loader.ts

@@ -0,0 +1,66 @@
+import { parse as parseCjs, init as initCjsParser } from 'cjs-module-lexer';
+import { parse as parseEs } from 'es-module-lexer';
+import MagicString from 'magic-string';
+import type { LoaderContext } from 'webpack';
+
+export default async function loader(
+  this: LoaderContext<any>,
+  source: string,
+  map: any,
+  meta: any
+) {
+  const callback = this.async();
+
+  try {
+    let isEsModule = true, esImports, moduleExports, namedExportsOrder;
+
+    try {
+      // Do NOT remove await here. The types are wrong! It has to be awaited,
+      // otherwise it will return a Promise<Promise<...>> when wasm isn't loaded.
+      const parseResult = await parseEs(source);
+      esImports = parseResult[0] || [];
+      moduleExports = parseResult[1] || [];
+    } catch {
+      esImports = [];
+      moduleExports = [];
+    }
+
+    if (!moduleExports.length && !esImports.length) {
+      isEsModule = false;
+      try {
+        await initCjsParser();
+        moduleExports = (parseCjs(source)).exports || [];
+      } catch {
+        moduleExports = [];
+      }
+      namedExportsOrder = moduleExports.filter(
+        (e) => e !== 'default' && e !== '__esModule'
+      );
+    } else {
+      namedExportsOrder = moduleExports.map(
+        (e) => source.substring(e.s, e.e)
+      ).filter((e) => e !== 'default');
+    }
+
+    if (namedExportsOrder.indexOf('__namedExportsOrder') >= 0) {
+      return callback(null, source, map, meta);
+    }
+
+    const magicString = new MagicString(source);
+    const namedExportsOrderString = JSON.stringify(namedExportsOrder);
+    if (isEsModule) {
+      magicString.append(
+        `;export const __namedExportsOrder = ${namedExportsOrderString};`
+      );
+    } else {
+      magicString.append(
+        `;module.exports.__namedExportsOrder = ${namedExportsOrderString};`
+      );
+    }
+
+    const generatedMap = magicString.generateMap({ hires: true });
+    return callback(null, magicString.toString(), generatedMap, meta);
+  } catch (err) {
+    return callback(null, source, map, meta);
+  }
+}

.storybook/main.ts

@@ -16,22 +16,33 @@ const config: StorybookConfig = {
       },
     },
   },
-  webpackFinal: async (config, { _configType }) => ({
-    // Make whatever fine-grained changes you need
-    ...config,
-    module: {
-      ...(config.module || {}),
-      rules: [
-        ...(config.module.rules || []),
-        {
-          test: /\.m?[jt]sx$/,
-          exclude: /node_modules/,
-          use: {
-            loader: 'babel-loader',
+  webpackFinal: async (config, { _configType }) => {
+    config = ({
+      // Make whatever fine-grained changes you need
+      ...config,
+      module: {
+        ...(config.module || {}),
+        rules: [
+          ...(config.module.rules || []),
+          {
+            test: /\.m?[jt]sx$/,
+            exclude: /node_modules/,
+            use: {
+              loader: 'babel-loader',
+            },
           },
-        },
-      ],
-    },
-  }),
+        ],
+      },
+    });
+    // Replace the export-order-loader from @storybook/builder-webpack5 with ./loaders/export-order-loader
+    config.module.rules.forEach((rule) => {
+      rule?.use?.forEach?.((u) => {
+        if (String(u?.loader)?.includes?.('export-order-loader')) {
+          u.loader = require.resolve('./loaders/export-order-loader');
+        }
+      });
+    });
+    return config;
+  },
 };
 export default config;

loader-changes.md

@@ -0,0 +1,114 @@
+# Loader output source
+
+## With `@babel/plugin-transform-modules-commonjs`:
+```
+"use strict";
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _compo = require("./compo1");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var _default = exports.default = {
+    title: "Components/Compo1",
+    component: _compo.Compo1,
+    parameters: {
+        layout: "container"
+    }
+};
+var Template = function(args) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_compo.Compo1, _object_spread({}, args));
+};
+var Default = exports.Default = Template.bind({});
+;module.exports.__namedExportsOrder = ["Default"];
+```
+
+## Without `@babel/plugin-transform-modules-commonjs`:
+```
+function _define_property(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function _object_spread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    var ownKeys = Object.keys(source);
+    if (typeof Object.getOwnPropertySymbols === "function") {
+      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+      }));
+    }
+    ownKeys.forEach(function (key) {
+      _define_property(target, key, source[key]);
+    });
+  }
+  return target;
+}
+import React from "react";
+import { Compo1 } from "./compo1";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default {
+  title: "Components/Compo1",
+  component: Compo1,
+  parameters: {
+    layout: "container"
+  }
+};
+var Template = function (args) {
+  return /*#__PURE__*/_jsx(Compo1, _object_spread({}, args));
+};
+export var Default = Template.bind({});
+Default.parameters = {
+  ...Default.parameters,
+  docs: {
+    ...Default.parameters?.docs,
+    source: {
+      originalSource: "args => <Compo1 {...args} />",
+      ...Default.parameters?.docs?.source
+    }
+  }
+};;export const __namedExportsOrder = ["Default"];
+```

package.json

@@ -40,6 +40,7 @@
     "@storybook/react-webpack5": "^7.6.6",
     "@storybook/test": "^7.6.6",
     "@storybook/testing-library": "^0.2.2",
+    "cjs-module-lexer": "^1.2.3",
     "storybook": "^7.6.6"
   }
 }