feat: various module outputs using rollup

.gitignore

@@ -7,4 +7,5 @@ typedocs/
 .DS_Store
 *-debug.log
 .build
-storybook-static/
+storybook-static/
+.rollup.cache/

module-build/tsconfig.esm.json

@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-        "module": "es6",
+        "module": "ES2020",
         "declaration": true,
         "target": "es6",
         "moduleResolution": "node",

package-lock.json

@@ -4702,6 +4702,14 @@
             "dev": true,
             "requires": {
                 "tslib": "^1.9.0"
+            },
+            "dependencies": {
+                "tslib": {
+                    "version": "1.14.1",
+                    "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+                    "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+                    "dev": true
+                }
             }
         },
         "ci-info": {
@@ -13236,6 +13244,14 @@
             "dev": true,
             "requires": {
                 "tslib": "^1.9.0"
+            },
+            "dependencies": {
+                "tslib": {
+                    "version": "1.14.1",
+                    "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+                    "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+                    "dev": true
+                }
             }
         },
         "safe-buffer": {
@@ -14927,9 +14943,9 @@
             }
         },
         "tslib": {
-            "version": "1.13.0",
-            "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
-            "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==",
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
+            "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==",
             "dev": true
         },
         "tsutils": {
@@ -14939,6 +14955,14 @@
             "dev": true,
             "requires": {
                 "tslib": "^1.8.1"
+            },
+            "dependencies": {
+                "tslib": {
+                    "version": "1.14.1",
+                    "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+                    "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+                    "dev": true
+                }
             }
         },
         "tunnel-agent": {

package.json

@@ -52,6 +52,7 @@
         "style-loader": "^1.3.0",
         "ts-jest": "^26.5.3",
         "ts-loader": "^7.0.5",
+        "tslib": "^2.1.0",
         "typescript": "^4.2.3",
         "webpack": "^5.24.3",
         "webpack-cli": "^4.5.0",

packages/splitview/package.json

@@ -9,19 +9,24 @@
         "type": "git",
         "url": "https://github.com/mathuo/dockview.git"
     },
+    "bugs": {
+        "url": "https://github.com/mathuo/dockview/issues"
+    },
     "homepage": "https://github.com/mathuo/dockview",
     "scripts": {
-        "build-gulp": "cross-env ../../node_modules/.bin/gulp run",
-        "docs": "typedoc",
-        "build-css": "gulp sass",
-        "build-es6": "cross-env ../../node_modules/.bin/tsc --project tsconfig.esm.json --extendedDiagnostics",
-        "build-cjs": "cross-env ../../node_modules/.bin/tsc --project tsconfig.json --extendedDiagnostics",
-        "build": "npm run build-cjs && npm run build-es6 && npm run build-css",
+        "build:ci": "npm run build:cjs && npm run build:esm && npm run build:css",
+        "build:cjs": "cross-env ../../node_modules/.bin/tsc --project tsconfig.json --extendedDiagnostics",
+        "build:css": "gulp sass",
+        "build:esm": "cross-env ../../node_modules/.bin/tsc --project tsconfig.esm.json --extendedDiagnostics",
+        "build:modulefiles": "rollup -c",
+        "build": "npm run build:ci && npm run build:modulefiles",
         "clean": "rimraf dist/ .build/",
+        "docs": "typedoc",
+        "preversion": "npm run rebuild && npm run test",
         "rebuild": "npm run clean && npm run build",
         "test": "cross-env ../../node_modules/.bin/jest --selectProjects dockview",
-        "test-cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview --coverage",
-        "preversion": "npm run rebuild && npm run test"
+        "test-cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview --coverage"
+        
     },
     "files": [
         "dist",
@@ -46,13 +51,18 @@
     "author": "",
     "license": "ISC",
     "devDependencies": {
+        "@rollup/plugin-typescript": "^8.2.0",
         "@testing-library/react": "^11.2.5",
         "@types/react": "^17.0.3",
         "@types/react-dom": "^17.0.1",
         "cross-env": "^7.0.3",
+        "postcss": "^8.2.8",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
         "rimraf": "^3.0.2",
+        "rollup": "^2.42.0",
+        "rollup-plugin-postcss": "^4.0.0",
+        "rollup-plugin-terser": "^7.0.2",
         "typedoc": "^0.20.30"
     },
     "peerDependencies": {

packages/splitview/rollup.config.js

@@ -0,0 +1,94 @@
+/* eslint-disable */
+
+import { join } from 'path';
+import typescript from '@rollup/plugin-typescript';
+import { terser } from 'rollup-plugin-terser';
+import postcss from 'rollup-plugin-postcss';
+
+const packageName = require('./package.json').name;
+const main = join(__dirname, './scripts/rollupEntryTarget.ts');
+const mainNoStyles = join(__dirname, './src/index.ts');
+const outputDir = join(__dirname, 'dist');
+
+function outputFile(format, isMinified, withStyles) {
+    let name = join(outputDir, packageName);
+
+    if (format !== 'umd') {
+        name += `.${format}`;
+    }
+    if (isMinified) {
+        name += '.min';
+    }
+    if (!withStyles) {
+        name += '.noStyle';
+    }
+
+    return `${name}.js`;
+}
+
+function createBundle(format, options) {
+    const { withStyles, isMinified } = options;
+    const input = withStyles ? main : mainNoStyles;
+    const file = outputFile(format, isMinified, withStyles);
+
+    const external = [];
+
+    const output = {
+        file,
+        format,
+        globals: {},
+    };
+
+    const plugins = [
+        typescript({
+            tsconfig: 'tsconfig.esm.json',
+            incremental: false,
+            tsBuildInfoFile: undefined,
+            outDir: undefined,
+            declaration: false,
+        }),
+    ];
+
+    if (isMinified) {
+        plugins.push(terser());
+    }
+    if (withStyles) {
+        plugins.push(postcss());
+    }
+
+    if (format === 'umd') {
+        output['name'] = packageName;
+
+        // TODO: should be conditional on whether user wants the React wrappers
+        output.globals['react'] = 'React';
+        output.globals['react-dom'] = 'ReactDOM';
+    }
+
+    // TODO: should be conditional on whether user wants the React wrappers
+    external.push('react', 'react-dom');
+
+    return {
+        input,
+        output,
+        plugins,
+        external,
+    };
+}
+
+export default [
+    // amd
+    createBundle('amd', { withStyles: false, isMinified: false }),
+    createBundle('amd', { withStyles: true, isMinified: false }),
+    createBundle('amd', { withStyles: false, isMinified: true }),
+    createBundle('amd', { withStyles: true, isMinified: true }),
+    // umd
+    createBundle('umd', { withStyles: false, isMinified: false }),
+    createBundle('umd', { withStyles: true, isMinified: false }),
+    createBundle('umd', { withStyles: false, isMinified: true }),
+    createBundle('umd', { withStyles: true, isMinified: true }),
+    // cjs
+    createBundle('cjs', { withStyles: true, isMinified: false }),
+    // esm
+    createBundle('esm', { withStyles: true, isMinified: false }),
+    createBundle('esm', { withStyles: true, isMinified: true }),
+];

packages/splitview/scripts/rollupEntryTarget.ts

@@ -0,0 +1,2 @@
+import '../dist/styles/dockview.css';
+export * from '../src/index';