chore: Bundle size (#861)

## Related Issues Fixes descope/etc#6291 reduced React SDK bundle size from `455KB` to `115KB` (`112KB` to `36KB` gzipped) A new entry in React SDK was added in order to expose only flow related stuff: `@descope/react-sdk/flows` e.g.: `import { AuthProvider, Descope } from '@descope/react-sdk/flows';`
descope · Dec 17, 2024 · ff87cab · ff87cab
1 parent 3a1d65d
commit ff87cab
Show file tree

Hide file tree

Showing 25 changed files with 989 additions and 423 deletions.
diff --git a/packages/libs/sdk-mixins/package.json b/packages/libs/sdk-mixins/package.json
@@ -7,17 +7,29 @@
     "url": "https://github.com/descope/sdk-mixins/issues",
     "email": "[email protected]"
   },
-  "main": "dist/cjs/index.cjs.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    "require": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/cjs/index.cjs.js"
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/cjs/index.js"
+      }
     },
-    "import": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.esm.js"
+    "./themeMixin": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/esm/mixins/themeMixin/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/cjs/mixins/themeMixin/index.js"
+      }
     }
   },
   "type": "module",
@@ -83,7 +95,8 @@
     "ts-node": "10.9.2",
     "typescript": "^5.0.2",
     "@reduxjs/toolkit": "^2.0.1",
-    "redux": "5.0.1"
+    "redux": "5.0.1",
+    "rollup-plugin-no-emit": "1.2.1"
   },
   "dependencies": {
     "@descope/sdk-helpers": "workspace:*",

diff --git a/packages/libs/sdk-mixins/rollup.config.mjs b/packages/libs/sdk-mixins/rollup.config.mjs
@@ -6,60 +6,68 @@ import del from 'rollup-plugin-delete';
 import dts from 'rollup-plugin-dts';
 import terser from '@rollup/plugin-terser';
 import replace from '@rollup/plugin-replace';
+import noEmit from 'rollup-plugin-no-emit';
 
 import packageJson from './package.json' assert { type: 'json' };
 
-const plugins = [
-  replace({
-    values: {
-      BUILD_VERSION: JSON.stringify(packageJson.version),
-    },
-    preventAssignment: true,
-  }),
-  typescript({
-    tsconfig: './tsconfig.json',
-  }),
-  commonjs(),
-  resolve(),
-  // terser(),
-];
-const input = './src/index.ts';
+const input = ['./src/index.ts', './src/mixins/themeMixin/index.ts'];
 const external = (id) =>
   !id.startsWith('\0') && !id.startsWith('.') && !id.startsWith('/');
 
 export default [
   {
     input,
-    output: {
-      file: packageJson.main,
-      format: 'cjs',
-      sourcemap: true,
-      exports: 'named',
-      interop: 'compat',
-      inlineDynamicImports: true,
-    },
-    plugins,
-    external,
-  },
-  {
-    input,
-    output: {
-      file: packageJson.module,
-      format: 'esm',
-      sourcemap: true,
-      inlineDynamicImports: true,
-    },
-    plugins,
+    output: [
+      {
+        dir: './dist/cjs',
+        format: 'cjs',
+        sourcemap: true,
+        exports: 'named',
+        interop: 'compat',
+        inlineDynamicImports: false,
+        preserveModules: true,
+      },
+      {
+        dir: './dist/esm',
+        format: 'esm',
+        sourcemap: true,
+        inlineDynamicImports: false,
+        preserveModules: true,
+      },
+    ],
+    plugins: [
+      del({ targets: 'dist/*' }),
+      replace({
+        values: {
+          BUILD_VERSION: JSON.stringify(packageJson.version),
+        },
+        preventAssignment: true,
+      }),
+      typescript({
+        tsconfig: './tsconfig.json',
+      }),
+      commonjs(),
+      resolve(),
+      // terser(),
+    ],
     external,
   },
   {
-    input: './dist/dts/src/index.d.ts',
-    output: [{ file: packageJson.types, format: 'esm' }],
+    input: input[0],
+    output: [{ dir: './dist', format: 'esm', inlineDynamicImports: true }],
     plugins: [
+      typescript({
+        tsconfig: './tsconfig.json',
+        compilerOptions: {
+          declaration: true,
+          declarationDir: './dist/types',
+        },
+      }),
       dts(),
-      del({ hook: 'buildEnd', targets: ['./dist/dts', './dist/cjs/dts'] }),
       cjsPackage(),
+      noEmit({ match: (file) => file.endsWith('.js') }),
     ],
+    external,
   },
 ];
 

diff --git a/packages/libs/sdk-mixins/src/mixins/configMixin/configMixin.ts b/packages/libs/sdk-mixins/src/mixins/configMixin/configMixin.ts
@@ -21,10 +21,11 @@ export const configMixin = createSingletonMixin(
 
       #fetchConfig = async () => {
         try {
-          const { body, headers } = await this.fetchStaticResource(
-            CONFIG_FILENAME,
-            'json',
-          );
+          const {
+            body,
+            headers,
+          }: { body: ProjectConfiguration; headers: Record<string, any> } =
+            await (<any>this.fetchStaticResource(CONFIG_FILENAME, 'json'));
           return {
             projectConfig: body as ProjectConfiguration,
             executionContext: { geo: headers['x-geo'] },

diff --git a/packages/libs/sdk-mixins/src/mixins/configMixin/types.ts b/packages/libs/sdk-mixins/src/mixins/configMixin/types.ts
@@ -23,18 +23,18 @@ type Operator =
   | 'is-false'
   | 'in'
   | 'not-in';
-export interface ClientCondition {
+export type ClientCondition = {
   operator: Operator;
   key: string;
   predicate?: string | number;
   met: ClientConditionResult;
   unmet?: ClientConditionResult;
-}
+};
 
-export interface ClientConditionResult {
+export type ClientConditionResult = {
   screenId: string;
   interactionId: string;
-}
+};
 
 export type FlowConfig = {
   startScreenId?: string;
@@ -46,7 +46,7 @@ export type FlowConfig = {
   fingerprintKey?: string;
 };
 
-export interface ProjectConfiguration {
+export type ProjectConfiguration = {
   componentsVersion: string;
   cssTemplate: {
     dark: ThemeTemplate;
@@ -55,4 +55,4 @@ export interface ProjectConfiguration {
   flows: {
     [key: string]: FlowConfig; // dynamic key names for flows
   };
-}
+};
diff --git a/packages/libs/sdk-mixins/src/mixins/loggerMixin/index.ts b/packages/libs/sdk-mixins/src/mixins/loggerMixin/index.ts
@@ -1 +1,2 @@
 export * from './loggerMixin';
+export type { Logger } from './types';
diff --git a/packages/libs/sdk-mixins/tsconfig.json b/packages/libs/sdk-mixins/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "rootDir": ".",
+    "rootDir": "./src",
     "target": "es2017",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": false,
@@ -11,8 +11,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "declaration": true,
-    "declarationDir": "dts",
+    "declaration": false,
     "noErrorTruncation": true,
     "typeRoots": ["./node_modules/@types"]
   },

diff --git a/packages/sdks/react-sdk/README.md b/packages/sdks/react-sdk/README.md
@@ -576,6 +576,14 @@ DESCOPE_STEP_UP_FLOW_ID=step-up
 DESCOPE_TELEMETRY_KEY=""
 ```
 
+## Performance / Bundle Size
+
+To improve modularity and reduce bundle size, all flow-related utilities are available also under `@descope/react-sdk/flows` subpath. Example:
+
+```
+import { Descope, useSession, ... } from '@descope/react-sdk/flows';
+```
+
 ## FAQ
 
 ### I updated the user in my backend, but the user / session token are not updated in the frontend

diff --git a/packages/sdks/react-sdk/package.json b/packages/sdks/react-sdk/package.json
@@ -15,17 +15,29 @@
   "license": "MIT",
   "type": "module",
   "exports": {
-    "require": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/cjs/index.cjs.js"
+    ".": {
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/cjs/index.js"
+      },
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/esm/index.js"
+      }
     },
-    "import": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.esm.js"
+    "./flows": {
+      "import": {
+        "types": "./dist/types/flows.d.ts",
+        "default": "./dist/esm/flows.js"
+      },
+      "require": {
+        "types": "./dist/types/flows.d.ts",
+        "default": "./dist/cjs/index.js"
+      }
     }
   },
-  "main": "dist/cjs/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist"
@@ -121,7 +133,8 @@
     "scheduler": "^0.23.0",
     "@remix-run/router": "1.17.0",
     "jest-environment-jsdom": "^29.0.0",
-    "core-js": "3.19.3"
+    "core-js": "3.19.3",
+    "rollup-plugin-no-emit": "1.2.1"
   },
   "peerDependencies": {
     "@types/react": ">=17",

diff --git a/packages/sdks/react-sdk/rollup.config.mjs b/packages/sdks/react-sdk/rollup.config.mjs
@@ -7,36 +7,30 @@ import dts from 'rollup-plugin-dts';
 import { terser } from 'rollup-plugin-terser';
 import commonjs from '@rollup/plugin-commonjs';
 import nodeResolve from '@rollup/plugin-node-resolve';
+import noEmit from 'rollup-plugin-no-emit';
 
 import packageJson from './package.json' assert { type: 'json' };
 
 export default [
   {
-    input: 'src/index.ts',
-    output: {
-      file: packageJson.main,
-      sourcemap: true,
-      format: 'cjs',
-    },
-    plugins: [
-      define({
-        replacements: {
-          BUILD_VERSION: JSON.stringify(packageJson.version),
-        },
-      }),
-      typescript(),
-      autoExternal(),
-      terser(),
+    input: ['src/index.ts', 'src/flows.ts'],
+    output: [
+      {
+        dir: './dist/esm',
+        sourcemap: true,
+        format: 'esm',
+        preserveModules: true,
+      },
+      {
+        dir: './dist/cjs',
+        sourcemap: true,
+        format: 'cjs',
+        preserveModules: true,
+        exports: 'named',
+      },
     ],
-  },
-  {
-    input: 'src/index.ts',
-    output: {
-      file: packageJson.module,
-      sourcemap: true,
-      format: 'esm',
-    },
     plugins: [
+      del({ targets: 'dist/*' }),
       define({
         replacements: {
           BUILD_VERSION: JSON.stringify(packageJson.version),
@@ -73,19 +67,20 @@ export default [
     ],
   },
   {
-    input: './dist/dts/src/index.d.ts',
-    output: [{ file: packageJson.types, format: 'esm' }],
+    input: 'src/index.ts',
+    output: [{ dir: './dist', format: 'esm' }],
     plugins: [
-      dts(),
-      del({
-        hook: 'buildEnd',
-        targets: [
-          './dist/test',
-          './dist/src',
-          './dist/cjs/!(index.cjs.*|package.json)',
-        ],
+      typescript({
+        tsconfig: './tsconfig.json',
+        compilerOptions: {
+          rootDir: './src',
+          declaration: true,
+          declarationDir: './dist/types',
+        },
       }),
+      dts(),
       cjsPackage(),
+      noEmit({ match: (file) => file.endsWith('.js') }),
     ],
   },
 ];
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from './loggerMixin';
		export type { Logger } from './types';