Add additional library context reporting (#18)

* Add additional library context reporting

* Remove parallel building to ensure vanilla finishes first for types availability

.github/workflows/ci.yml

@@ -2,17 +2,17 @@ name: ci
 on: push
 
 env:
-  NODE_VERSION: 18.6.0
+  NODE_VERSION: 20.9.0
 
 jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2.4.0
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v3
         with:
           version: 8
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: "pnpm"

examples/react-webpack/package.json

@@ -19,25 +19,25 @@
     ]
   },
   "dependencies": {
-    "@babel/plugin-syntax-jsx": "^7.22.5",
+    "@babel/plugin-syntax-jsx": "^7.23.3",
     "@parallelmarkets/react": "workspace:*",
     "@parallelmarkets/vanilla": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.0",
+    "@babel/core": "^7.24.0",
     "@babel/plugin-syntax-jsx": "^7.14.5",
-    "@babel/plugin-transform-runtime": "^7.22.15",
-    "@babel/preset-env": "^7.22.20",
-    "@babel/runtime": "^7.23.1",
+    "@babel/plugin-transform-runtime": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
+    "@babel/runtime": "^7.24.0",
     "babel-loader": "^9.1.3",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react-app": "^10.0.1",
-    "eslint-plugin-react": "^7.33.2",
-    "html-webpack-plugin": "^5.5.3",
-    "webpack": "^5.88.2",
+    "eslint-plugin-react": "^7.34.0",
+    "html-webpack-plugin": "^5.6.0",
+    "webpack": "^5.90.3",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^5.0.2"
   }
 }

examples/webpack/package.json

@@ -22,15 +22,15 @@
     "@parallelmarkets/vanilla": "workspace:*"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.0",
-    "@babel/plugin-transform-runtime": "^7.22.15",
-    "@babel/preset-env": "^7.22.20",
-    "@babel/runtime": "^7.23.1",
+    "@babel/core": "^7.24.0",
+    "@babel/plugin-transform-runtime": "^7.24.0",
+    "@babel/preset-env": "^7.24.0",
+    "@babel/runtime": "^7.24.0",
     "babel-loader": "^9.1.3",
     "babel-preset-env": "^1.7.0",
-    "html-webpack-plugin": "^5.5.3",
-    "webpack": "^5.88.2",
+    "html-webpack-plugin": "^5.6.0",
+    "webpack": "^5.90.3",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^5.0.2"
   }
 }

package.json

@@ -4,7 +4,7 @@
   "version": "2.0.0",
   "description": "ParallelMarkets.com JavaScript SDK loading utility",
   "scripts": {
-    "build": "pnpm --parallel --filter '@parallelmarkets/*' build",
+    "build": "pnpm --filter '@parallelmarkets/*' build",
     "lint": "eslint examples/*/src packages/*/src && prettier -l packages/*/src examples/*/src",
     "test": "jest"
   },
@@ -16,6 +16,6 @@
   "homepage": "https://developer.parallelmarkets.com/docs/javascript",
   "devDependencies": {
     "jest": "^29.7.0",
-    "rollup": "^3.29.4"
+    "rollup": "^4.12.1"
   }
 }

packages/react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## v2.0.1 (2024-03-07)
+
+### Enhancements
+
+- Update React library SDK to pass library context to the Parallel JS for logging/debugging purposes
+
 ## v2.0.0 (2023-10-06)
 
 - Updates APIs to use [Case Management APIs](https://developer.parallelmarkets.com/docs/server/case-management-api/introduction).

packages/react/jest/fileTransform.js

@@ -6,12 +6,12 @@ const path = require('path')
 // http://facebook.github.io/jest/docs/en/webpack.html
 
 module.exports = {
-  process (src, filename) {
+  process(src, filename) {
     const assetFilename = JSON.stringify(path.basename(filename))
 
     if (filename.match(/\.svg$/)) {
-      return { code:
-        `module.exports = {
+      return {
+        code: `module.exports = {
           __esModule: true,
           default: ${assetFilename},
           ReactComponent: (props) => ({
@@ -23,10 +23,10 @@ module.exports = {
               children: ${assetFilename}
             })
           }),
-        };`
+        };`,
       }
     }
 
     return { code: `module.exports = ${assetFilename};` }
-  }
+  },
 }

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parallelmarkets/react",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "ParallelMarkets.com React SDK",
   "author": "Parallel Markets (https://parallelmarkets.com)",
   "license": "MIT",
@@ -42,30 +42,32 @@
     "watch": "pnpm typecheck --watch --noEmit"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.0",
-    "@babel/eslint-parser": "^7.22.15",
-    "@babel/plugin-syntax-jsx": "^7.22.5",
-    "@babel/preset-env": "^7.22.20",
+    "@babel/core": "^7.24.0",
+    "@babel/eslint-parser": "^7.23.10",
+    "@babel/plugin-syntax-jsx": "^7.23.3",
+    "@babel/preset-env": "^7.24.0",
     "@parallelmarkets/vanilla": "workspace:*",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^25.0.4",
-    "@rollup/plugin-image": "^3.0.2",
-    "@rollup/plugin-node-resolve": "^15.2.1",
-    "@rollup/plugin-typescript": "^11.1.4",
-    "@testing-library/react": "^14.0.0",
-    "@types/react": "^18.2.24",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-image": "^3.0.3",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@testing-library/react": "^14.2.1",
+    "@types/node": "^20.11.25",
+    "@types/react": "^18.2.64",
     "babel-jest": "^29.7.0",
     "babel-preset-react-app": "^10.0.1",
-    "eslint": "^8.50.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-n": "^16.1.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^16.6.2",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tslib": "^2.6.2",
-    "typescript": "^5.2.2"
+    "typescript": "^5.4.2"
   },
   "peerDependencies": {
     "@parallelmarkets/vanilla": "workspace:*",

packages/react/rollup.config.mjs

@@ -2,6 +2,7 @@ import { babel } from '@rollup/plugin-babel'
 import pkg from './package.json' assert { type: 'json' }
 import image from '@rollup/plugin-image'
 import typescript from '@rollup/plugin-typescript'
+import replace from '@rollup/plugin-replace'
 
 const config = [
   // config for CommonJS
@@ -10,8 +11,16 @@ const config = [
     output: { file: pkg.main, format: 'cjs', generatedCode: 'es5' },
     external: ['react'],
     plugins: [
+      // First perform constant replacement
+      replace({
+        values: {
+          'process.env.PACKAGE_NAME': JSON.stringify(pkg.name),
+          'process.env.PACKAGE_VERSION': JSON.stringify(pkg.version),
+        },
+        preventAssignment: true,
+      }),
       image(),
-      // run TS first
+      // TS conversion
       typescript({
         tsconfig: './tsconfig.cjs.json', // this TS config checks types only, Babel compiles in the next plugin
         exclude: ['**/*-test.ts'],
@@ -26,8 +35,16 @@ const config = [
     output: { file: pkg.module, format: 'esm', generatedCode: 'es2015' },
     external: ['react'],
     plugins: [
+      // First perform constant replacement
+      replace({
+        values: {
+          'process.env.PACKAGE_NAME': JSON.stringify(pkg.name),
+          'process.env.PACKAGE_VERSION': JSON.stringify(pkg.version),
+        },
+        preventAssignment: true,
+      }),
       image(),
-      // Run TS
+      // TS conversion
       typescript({
         tsconfig: './tsconfig.esm.json', // TS-Config for ESM target
         exclude: ['**/*-test.ts'],

packages/react/src/__tests__/index-test.js

@@ -8,6 +8,7 @@ const ParallelMock = {
   getLoginStatus: (cb) => cb({}),
   subscribe: () => null,
   unsubscribe: () => null,
+  _appendLoadContext: () => null,
 }
 
 const wrapRender = async (parallel, _children) => {

packages/react/src/index.tsx

@@ -96,6 +96,9 @@ export const useParallel = () => {
     console.error('flow_type must be "redirect" or "overlay" when using React')
   }
 
+  // This should be idempotent, so it's OK if we call it multiple times with the same values
+  parallel._appendLoadContext(`${process.env.PACKAGE_NAME} ${process.env.PACKAGE_VERSION}`)
+
   return {
     isLoaded: true,
     parallel,

packages/vanilla/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## v2.0.1 (2024-03-07)
+
+### Enhancements
+
+- Update Vanilla SDK to pass library context to the Parallel JS for logging/debugging purposes
+
 ## v2.0.0 (2023-10-06)
 
 - Updates Vanilla SDK to use V2 API.

packages/vanilla/babel.config.js

@@ -14,7 +14,7 @@ module.exports = function (api) {
     ],
   ]
 
-  const plugins = []
+  const plugins = [['@babel/plugin-proposal-private-methods', { loose: true }]]
 
   return {
     presets,

packages/vanilla/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parallelmarkets/vanilla",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "ParallelMarkets.com JavaScript SDK loading utility",
   "author": "Parallel Markets (https://parallelmarkets.com)",
   "license": "MIT",
@@ -42,29 +42,30 @@
     "watch": "pnpm typecheck --watch --noEmit"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.0",
-    "@babel/eslint-parser": "^7.22.15",
-    "@babel/preset-env": "^7.22.20",
-    "@babel/preset-typescript": "^7.23.0",
+    "@babel/core": "^7.24.0",
+    "@babel/eslint-parser": "^7.23.10",
+    "@babel/preset-env": "^7.24.0",
+    "@babel/preset-typescript": "^7.23.3",
     "@jest/globals": "^29.7.0",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-typescript": "^11.1.4",
-    "@types/jest": "^29.5.5",
-    "@types/node": "^20.8.2",
-    "@typescript-eslint/eslint-plugin": "^6.7.4",
-    "@typescript-eslint/parser": "^6.7.4",
-    "eslint": "^8.50.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-n": "^16.1.0",
-    "eslint-plugin-prettier": "^5.0.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-replace": "^5.0.5",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.11.25",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.1.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "prettier": "^3.0.3",
-    "rollup": "^3.29.4",
+    "prettier": "^3.2.5",
+    "rollup": "^4.12.1",
     "tslib": "^2.6.2",
-    "typescript": "^5.2.2",
-    "typescript-eslint": "0.0.1-alpha.0"
+    "typescript": "^5.4.2",
+    "typescript-eslint": "7.1.1"
   }
 }

packages/vanilla/rollup.config.mjs

@@ -1,14 +1,23 @@
 import { babel } from '@rollup/plugin-babel'
 import pkg from './package.json' assert { type: 'json' }
 import typescript from '@rollup/plugin-typescript'
+import replace from '@rollup/plugin-replace'
 
 const config = [
   // config for CommonJS
   {
     input: 'src/index.ts',
     output: { file: pkg.main, format: 'cjs', generatedCode: 'es5' },
     plugins: [
-      // run TS first
+      // First perform constant replacement
+      replace({
+        values: {
+          'process.env.PACKAGE_NAME': JSON.stringify(pkg.name),
+          'process.env.PACKAGE_VERSION': JSON.stringify(pkg.version),
+        },
+        preventAssignment: true,
+      }),
+      // TS conversion
       typescript({
         tsconfig: './tsconfig.cjs.json', // this TS config checks types only, Babel compiles in the next plugin
         exclude: ['**/*-test.ts'],
@@ -22,7 +31,15 @@ const config = [
     input: 'src/index.ts',
     output: { file: pkg.module, format: 'esm', generatedCode: 'es2015' },
     plugins: [
-      // Run TS
+      // First perform constant replacement
+      replace({
+        values: {
+          'process.env.PACKAGE_NAME': JSON.stringify(pkg.name),
+          'process.env.PACKAGE_VERSION': JSON.stringify(pkg.version),
+        },
+        preventAssignment: true,
+      }),
+      // TS conversion
       typescript({
         tsconfig: './tsconfig.esm.json', // TS-Config for ESM target
         exclude: ['**/*-test.ts'],

packages/vanilla/src/index.ts

@@ -84,6 +84,7 @@ export const loadParallel = (config: ParallelConfig): Promise<Parallel | null> =
       delete rawlessConfig.raw_config
       const parallelConfig = { ...baseConfig, ...rawlessConfig }
       Parallel.init({ ...parallelConfig, on_init: onInit })
+      Parallel._appendLoadContext(`${process.env.PACKAGE_NAME} ${process.env.PACKAGE_VERSION}`)
     })
   })
 }

packages/vanilla/src/types.ts

@@ -91,6 +91,7 @@ export interface Parallel {
   subscribe: (event: SubscribeEvents, callback: SubscriptionHandler) => void
   unsubscribe: (event: SubscribeEvents, callback: SubscriptionHandler) => void
   getLoginStatus: (callback: AuthSuccessCallbackFunc) => void
+  _appendLoadContext: (context: string) => void
 }
 
 declare global {