chore: cjs-esm-react-scripts-hell

package.json

@@ -159,6 +159,7 @@
     "@ipld/dag-pb": "^4.0.3",
     "@libp2p/bootstrap": "^8.0.0",
     "@libp2p/websockets": "^6.0.1",
+    "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
@@ -178,6 +179,7 @@
     "acorn-jsx": "^5.3.2",
     "aegir": "^39.0.8",
     "assert": "^2.0.0",
+    "babel": "^6.23.0",
     "babel-eslint": "10.0.3",
     "babel-loader": "^9.1.2",
     "blockstore-core": "^4.1.0",

rollup.config.mjs

@@ -0,0 +1,118 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import * as dts from 'rollup-plugin-dts';
+import terser from '@rollup/plugin-terser'
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import jsx from 'acorn-jsx';
+import postcss from 'rollup-plugin-postcss'
+import json from '@rollup/plugin-json';
+import svg from 'rollup-plugin-svg'
+import { babel } from '@rollup/plugin-babel';
+console.log(`babel: `, babel);
+
+import packageJson from './package.json' assert { type: 'json' }
+
+import { basename, dirname, isAbsolute } from 'path';
+import * as fs from 'fs';
+
+function isFile ( file ) {
+    try {
+        return fs.statSync( file ).isFile();
+    } catch ( err ) {
+        return false;
+    }
+}
+
+function addExtensionIfNecessary ( file, extensions ) {
+    try {
+        const name = basename( file );
+        const files = fs.readdirSync( dirname( file ) );
+
+        if ( ~files.indexOf( name ) && isFile( file ) ) return file;
+        for ( const ext of extensions ) {
+            if ( ~files.indexOf( `${name}${ext}` ) && isFile( `${file}${ext}` ) ) {
+                return `${file}${ext}`;
+            }
+        }
+    } catch ( err ) {
+        // noop
+    }
+
+    return null;
+}
+
+function extensions ({extensions}) {
+    if (!extensions || !extensions.length) {
+        throw new Error( `Must specify { extensions: [..] } as non-empty array!` );
+    }
+
+    return {
+        name: 'extensions',
+
+        resolveId ( importee, importer ) {
+            // absolute paths are left untouched
+            if ( isAbsolute( importee ) ) {
+                return addExtensionIfNecessary( resolve( importee ), extensions );
+            }
+
+            // if this is the entry point, resolve against cwd
+            if ( importer === undefined ) {
+                return addExtensionIfNecessary( resolve( process.cwd(), importee ), extensions );
+            }
+
+            // external modules are skipped at this stage
+            if ( importee[0] !== '.' ) return null;
+
+            return addExtensionIfNecessary( resolve( dirname( importer ), importee ), extensions );
+        }
+    };
+}
+
+export default [
+  {
+    input: 'src/index.js',
+    // dir: 'dist',
+    output: [
+      {
+        // file: packageJson.module,
+        dir: 'dist/cjs',
+        format: 'cjs',
+        sourcemap: true
+      }
+    ],
+    // acornInjectPlugins: [jsx()],
+
+    plugins: [
+      resolve({extensions: ['.js', '.jsx', '.ts', '.tsx']}),
+      babel({ babelHelpers: 'bundled', extensions: [".js", ".jsx"] }),
+      // extensions({
+      //   extensions: [ '.jsx', '.js'],
+      // }),
+
+        // 'src/components/object-info/LinksTable.css',
+        // 'src/components/loader/Loader.css'
+      // postcss({
+      //   include: "src/components/object-info/LinksTable.css",
+      //   extract: resolve('dist/cjs/components/object-info/LinksTable.css')
+      // }),
+      // postcss({
+      //   include: "src/components/loader/Loader.css",
+      //   extract: resolve('dist/cjs/components/loader/Loader.css')
+      // }),
+
+      // peerDepsExternal(),
+      // json(),
+      // svg(),
+      // commonjs(),
+      // typescript({ tsconfig: './tsconfig.rollup.json' }),
+      // terser(),
+    ],
+    external: ['react', 'react-dom', 'styled-components']
+  },
+  {
+    input: 'src/index.ts',
+    output: [{ file: 'dist/cjs/types.d.ts', format: 'es' }],
+    plugins: [dts.default()]
+  }
+]

tsconfig.rollup.json

@@ -0,0 +1,56 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "es2017",
+      "esnext"
+    ],
+    // "types": [
+    //   "vite/client",
+    //   "vite-plugin-svgr/client"
+    // ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "CommonJS",
+    // "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": false,
+    "outDir": "dist/cjs",
+    "declaration": true,
+    "declarationDir": "dist/cjs",
+    "jsx": "react",
+    "rootDir": "src",
+    "emitDeclarationOnly": false,
+    // "allowImportingTsExtensions": true,
+    // "jsxImportSource": "react"
+
+  },
+  // "include": [
+  //   "**/*.js",
+
+  // ],
+  "exclude": [
+    "src/*/*.test.*",
+    "node_modules",
+    "src/devPage.jsx",
+    "storybook-static",
+    "build",
+    "dist",
+    "custom-jest-env.js",
+    "vite.config.ts",
+    "src/**/*.stories.*",
+    "jest.config.js",
+    "rollup.config.mjs",
+    "webpack.config.js",
+    "package.json",
+    "dev"
+  ]
+}