[sc193803] Rollup react sdk output (#107)

yusinto · web-flow · commit 9854a95a5e02 · 2023-07-11T12:31:51.000-07:00
This PR introduces rollup to bundle the react sdk output: 1. The rollup config is in typescript. It shares the default tsconfig.json with the project hence these warnings of `rollup.config.ts` which can be safely ignored. 2. We now support both cjs and esm. 3. As above. 4. Type definitions are also generated by rollup. ![Screenshot_2023-07-10_at_3_28_42_PM](https://github.com/launchdarkly/react-client-sdk-private/assets/1593077/14180ee9-18ee-4c1e-839f-bb2047b58215) --------- Co-authored-by: Yusinto Ngadiman <yus@launchdarkly.com>
diff --git a/examples/typescript/.gitignore b/examples/typescript/.gitignore
@@ -21,5 +21,3 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-
-public
diff --git a/examples/typescript/package.json b/examples/typescript/package.json
@@ -22,7 +22,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "postinstall": "cd ../../ && yarn link-dev",
+    "tsc": "tsc"
   },
   "eslintConfig": {
     "extends": [
diff --git a/examples/typescript/public/index.html b/examples/typescript/public/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang='en'>
+<head>
+  <meta charset='UTF-8'>
+  <title>Title</title>
+</head>
+<body>
+<div id="root"></div>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -12,7 +12,11 @@
     "sdk",
     "bindings"
   ],
-  "main": "lib/index.js",
+  "exports": {
+    "require": "./lib/cjs/index.js",
+    "import": "./lib/esm/index.js"
+  },
+  "main": "./lib/cjs/index.js",
   "types": "lib/index.d.ts",
   "files": [
     "lib",
@@ -23,7 +27,10 @@
   "scripts": {
     "test": "jest",
     "test:junit": "jest --ci --reporters=default --reporters=jest-junit",
-    "build": "rimraf lib/* && tsc && mv lib/src/* lib && rimraf lib/package.json lib/src lib/*.test.*",
+    "clean": "rimraf lib/*",
+    "rb": "rollup -c --configPlugin typescript",
+    "rbw": "yarn rb --watch",
+    "build": "yarn clean && yarn rb",
     "lint": "tslint -p tsconfig.json 'src/**/*.ts*'",
     "lint:all": "npm run lint",
     "check-typescript": "tsc",
@@ -38,6 +45,10 @@
   },
   "homepage": "https://github.com/launchdarkly/react-client-sdk",
   "devDependencies": {
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-terser": "^0.4.3",
+    "@rollup/plugin-typescript": "^11.1.2",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.0.1",
     "@types/hoist-non-react-statics": "^3.3.1",
@@ -47,6 +58,7 @@
     "@types/react": "^18.0.3",
     "@types/react-dom": "^18.0.0",
     "@types/react-test-renderer": "^18.0.0",
+    "esbuild": "^0.18.11",
     "jest": "^27.4.4",
     "jest-environment-jsdom": "^27.4.4",
     "jest-environment-jsdom-global": "^3.0.0",
@@ -57,6 +69,10 @@
     "react-dom": "^18.0.0",
     "react-test-renderer": "^18.0.0",
     "rimraf": "^3.0.0",
+    "rollup": "^3.26.2",
+    "rollup-plugin-dts": "^5.3.0",
+    "rollup-plugin-esbuild": "^5.0.0",
+    "rollup-plugin-filesize": "^10.0.0",
     "ts-jest": "^27.1.1",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.18.0",
diff --git a/rollup.config.ts b/rollup.config.ts
@@ -0,0 +1,44 @@
+import dts from 'rollup-plugin-dts';
+import esbuild from 'rollup-plugin-esbuild';
+import filesize from 'rollup-plugin-filesize';
+import json from '@rollup/plugin-json';
+import resolve from '@rollup/plugin-node-resolve';
+import terser from '@rollup/plugin-terser';
+
+const plugins = [resolve(), esbuild(), json(), terser(), filesize()];
+const external = /node_modules/;
+
+export default [
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: 'lib/cjs/index.js',
+        format: 'cjs',
+        sourcemap: true,
+      },
+    ],
+    plugins,
+    external,
+  },
+  {
+    input: 'src/index.ts',
+    output: [
+      {
+        file: 'lib/esm/index.js',
+        format: 'esm',
+        sourcemap: true,
+      },
+    ],
+    plugins,
+    external,
+  },
+  {
+    input: 'src/index.ts',
+    plugins: [dts(), json()],
+    output: {
+      file: 'lib/index.d.ts',
+      format: 'es',
+    },
+  },
+];
