Fix module (#91)

* Output cjs

* Build cjs and esm

* Add node platrofm

* Update size-limit config

* Fix module path

package.json

@@ -1,7 +1,8 @@
 {
   "version": "0.3.0-a.4",
   "license": "CC-BY-4.0",
-  "main": "dist/index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
   "homepage": "https://macaw-ui.vercel.app/",
   "repository": {
     "type": "git",
@@ -17,7 +18,7 @@
     "react",
     "ui components"
   ],
-  "typings": "dist/index.d.ts",
+  "typings": "dist/types/index.d.ts",
   "files": [
     "dist",
     "src"
@@ -67,15 +68,18 @@
   "name": "@saleor/macaw-ui",
   "description": "Saleor's UI component library",
   "author": "Saleor Commerce",
-  "module": "dist/index.js",
   "private": false,
   "publishConfig": {
     "access": "public"
   },
   "sideEffects": false,
   "size-limit": [
     {
-      "path": "dist/index.js",
+      "path": "dist/cjs/index.js",
+      "limit": "40 KB"
+    },
+    {
+      "path": "dist/esm/index.js",
       "limit": "40 KB"
     }
   ],

scripts/esbuild.js

@@ -12,8 +12,7 @@ const lodash = esbuildPluginImport([
     camel2DashComponentName: false,
   },
 ]);
-const timerLabel = "Finished";
-const logger = {
+const logger = (timerLabel) => ({
   name: "logger",
   setup: (build) => {
     build.onStart((result) => {
@@ -24,28 +23,40 @@ const logger = {
       console.timeEnd(timerLabel);
     });
   },
-};
+});
 
 module.exports = (entryPoints, watch) => {
-  const options = {
-    bundle: true,
+  const commonOptions = {
     entryPoints,
-    outdir: "dist",
-    plugins: [logger, lodash],
+    loader: {
+      ".svg": "text",
+    },
+    bundle: true,
     external: [
       ...Object.keys(packageJson.peerDependencies),
       ...Object.keys(packageJson.dependencies),
     ],
-    loader: {
-      ".svg": "text",
-    },
-    splitting: true,
     sourcemap: true,
     minify: true,
-    format: "esm",
     target: "es6",
     watch,
   };
 
-  return esbuild.build(options);
+  const optionMatrix = [
+    {
+      ...commonOptions,
+      outfile: "dist/cjs/index.js",
+      plugins: [logger("Finished cjs"), lodash],
+      platform: "node",
+    },
+    {
+      ...commonOptions,
+      outdir: "dist/esm",
+      splitting: true,
+      format: "esm",
+      plugins: [logger("Finished esm"), lodash],
+    },
+  ];
+
+  return Promise.all(optionMatrix.map((options) => esbuild.build(options)));
 };

src/theme/createSaleorTheme/types.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/unified-signatures */
 import type { Theme } from "@material-ui/core/styles";
-import type { ThemeOptions } from "@material-ui/core/styles/createMuiTheme";
+import type { ThemeOptions } from "@material-ui/core/styles";
 import type {
   Palette,
   PaletteOptions,

src/utils/Decorator.tsx

@@ -1,11 +1,10 @@
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
-import { StoryFn } from "@storybook/addons";
 import React from "react";
 
 import { ThemeProvider } from "../theme";
 
-export const Decorator = (storyFn: StoryFn<React.ReactNode>) => (
+export const Decorator = (storyFn: any) => (
   <ThemeProvider>
     <div
       style={{
@@ -17,7 +16,7 @@ export const Decorator = (storyFn: StoryFn<React.ReactNode>) => (
   </ThemeProvider>
 );
 
-export const GuideDecorator = (storyFn: StoryFn<React.ReactNode>) => (
+export const GuideDecorator = (storyFn: any) => (
   <Card style={{ margin: "auto", width: 700 }}>
     <CardContent>{storyFn()}</CardContent>
   </Card>

tsconfig.json

@@ -31,7 +31,7 @@
     // error out if import and file system have a casing mismatch. Recommended by TS
     "forceConsistentCasingInFileNames": true,
     "emitDeclarationOnly": true,
-    "outDir": "dist",
+    "outDir": "dist/types",
     "isolatedModules": true
   }
 }