Add Webpack Config (#5)

* add webpack config

* 0.0.5

* add JSDelivr badge to README

Author: ploomiz

README.md

@@ -2,6 +2,7 @@
 
 [![](https://img.shields.io/npm/v/@eppo/js-client-sdk)](https://www.npmjs.com/package/@eppo/js-client-sdk)
 [![](https://img.shields.io/static/v1?label=GitHub+Pages&message=API+reference&color=00add8)](https://eppo-exp.github.io/js-client-sdk/js-client-sdk.html)
+[![](https://data.jsdelivr.com/v1/package/npm/@eppo/js-client-sdk/badge)](https://www.jsdelivr.com/package/npm/@eppo/js-client-sdk)
 
 This SDK is for client-side JS applications that run in a web browser. For server-side JS applications, use Eppo's [server-side Node JS SDK](https://github.com/Eppo-exp/node-server-sdk).
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eppo/js-client-sdk",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Eppo SDK for client-side JavaScript applications",
   "main": "dist/index.js",
   "files": [
@@ -11,13 +11,14 @@
     "lint": "eslint '**/*.{ts,tsx}' '**/*.d.{ts,tsx}' --cache",
     "lint:fix": "eslint --fix '**/*.{ts,tsx}' --cache",
     "lint:fix-pre-commit": "eslint -c .eslintrc.pre-commit.js --fix '**/*.{ts,tsx}' --no-eslintrc --cache",
-    "prepare": "husky install",
+    "prepare": "husky install && rm -rf dist/ && tsc && webpack && api-extractor run --local",
     "pre-commit": "lint-staged && tsc && yarn docs",
     "typecheck": "tsc",
     "test": "yarn test:unit",
     "test:unit": "NODE_ENV=test jest '.*\\.spec\\.ts'",
-    "docs": "tsc && api-extractor run --local --verbose && api-documenter markdown -i ./temp -o ./docs"
+    "docs": "api-documenter markdown -i ./temp -o ./docs"
   },
+  "jsdelivr": "dist/eppo-sdk.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Eppo-exp/js-client-sdk.git"
@@ -33,6 +34,7 @@
     "@microsoft/api-documenter": "^7.17.17",
     "@microsoft/api-extractor": "^7.25.0",
     "@types/jest": "^28.1.1",
+    "@types/md5": "^2.3.2",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
     "@typescript-eslint/parser": "^5.13.0",
     "eslint": "^8.17.0",
@@ -45,12 +47,17 @@
     "jest": "^28.1.1",
     "jest-environment-jsdom": "^28.1.1",
     "prettier": "^2.7.1",
+    "terser-webpack-plugin": "^5.3.3",
     "testdouble": "^3.16.6",
     "ts-jest": "^28.0.5",
-    "typescript": "^4.7.3",
+    "ts-loader": "^9.3.1",
+    "typescript": "^4.7.4",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
     "xhr-mock": "^2.5.1"
   },
   "dependencies": {
-    "axios": "^0.27.2"
+    "axios": "^0.27.2",
+    "md5": "^2.3.0"
   }
 }

src/eppo-client.ts

@@ -1,4 +1,4 @@
-import { createHash } from 'crypto';
+import * as md5 from 'md5';
 
 import { IAssignmentEvent, IAssignmentLogger } from './assignment-logger';
 import { MAX_EVENT_QUEUE_SIZE, NULL_SENTINEL, SESSION_ASSIGNMENT_CONFIG_LOADED } from './constants';
@@ -147,7 +147,7 @@ export default class EppoClient implements IEppoClient {
     subjectKey: string,
     experimentConfig: IExperimentConfiguration,
   ): string {
-    const subjectHash = createHash('md5').update(subjectKey).digest('hex');
+    const subjectHash = md5(subjectKey);
     return experimentConfig?.overrides[subjectHash];
   }
 

src/shard.ts

@@ -1,9 +1,9 @@
-import { createHash } from 'crypto';
+import * as md5 from 'md5';
 
 import { IShardRange } from './experiment/variation';
 
 export function getShard(input: string, subjectShards: number): number {
-  const hashOutput = createHash('md5').update(input).digest('hex');
+  const hashOutput = md5(input);
   // get the first 4 bytes of the md5 hex string and parse it using base 16
   // (8 hex characters represent 4 bytes, e.g. 0xffffffff represents the max 4-byte integer)
   const intFromHash = parseInt(hashOutput.slice(0, 8), 16);

webpack.config.js

@@ -0,0 +1,34 @@
+const path = require('path');
+
+const TerserPlugin = require('terser-webpack-plugin');
+
+module.exports = {
+  entry: './src/index.ts',
+  mode: 'production',
+  devtool: 'inline-source-map',
+  target: 'web',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+  output: {
+    filename: 'eppo-sdk.js',
+    library: {
+      name: 'eppo',
+      type: 'var',
+    },
+    path: path.resolve(__dirname, 'dist'),
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin()],
+  },
+};