vanilla js integration + demo

jpmorgan-payments · Feb 23, 2024 · 3c99206 · 3c99206
1 parent dea63f4
commit 3c99206
Show file tree

Hide file tree

Showing 11 changed files with 1,684 additions and 1,251 deletions.
diff --git a/embedded-components/.demo/html-js/EBComponents.umd.cjs b/embedded-components/.demo/html-js/EBComponents.umd.cjs
diff --git a/embedded-components/.demo/html-js/EBComponentsWithReact.umd.js b/embedded-components/.demo/html-js/EBComponentsWithReact.umd.js
diff --git a/embedded-components/.demo/html-js/index.html b/embedded-components/.demo/html-js/index.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Embedded Components demo - HTML+JS</title>
+  </head>
+  <body>
+    <div id="component-container" style="border: 1px solid black; padding: 4px; width: 300px"></div>
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
+    ></script>
+    <script src="./EBComponents.umd.cjs"></script>
+    <!-- <script type="module" src="./EBComponentsWithReact.umd.js"></script> -->
+    <script type="module">
+      const EBComponentsManager = EBComponents.initEBComponentsManager();
+      EBComponentsManager.mountComponent('LinkAccountForm', null, 'component-container');
+    </script>
+  </body>
+</html>
diff --git a/embedded-components/.demo/html-js/style.css b/embedded-components/.demo/html-js/style.css
diff --git a/embedded-components/package.json b/embedded-components/package.json
@@ -2,12 +2,19 @@
   "name": "embedded-banking-components",
   "private": true,
   "version": "0.0.0",
-  "main": "dist/index.umd.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "type": "module",
   "files": [
     "dist"
   ],
+  "main": "./dist/EBComponents.umd.cjs",
+  "module": "./dist/EBComponents.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/EBComponents.js",
+      "require": "./dist/EBComponents.umd.cjs"
+    }
+  },
   "scripts": {
     "dev": "vite",
     "build": "rm -rf dist && vite build",
@@ -62,7 +69,6 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "identity-obj-proxy": "^3.0.0",
     "jsdom": "^23.0.1",
-    "openapi-typescript-codegen": "^0.25.0",
     "postcss": "^8.4.32",
     "postcss-preset-mantine": "1.13.0",
     "postcss-simple-vars": "^7.0.1",
@@ -75,6 +81,7 @@
     "typescript": "^5.3.3",
     "vite": "^5.0.10",
     "vite-plugin-dts": "^3.7.2",
+    "vite-plugin-lib-inject-css": "^2.0.0",
     "vite-tsconfig-paths": "^4.2.2",
     "vitest": "^1.1.0"
   }

diff --git a/embedded-components/src/index.tsx b/embedded-components/src/index.tsx
@@ -4,3 +4,5 @@ export { LinkAccountForm } from './components/LinkAccountForm/LinkAccountForm';
 export { PayOutForm } from './components/PayOutForm/PayOutForm';
 export { PaymentDetails } from './components/PaymentDetails/PaymentDetails';
 export * from './shared/EBComponentsProvider';
+
+export { initEBComponentsManager } from './vanilla/EBComponentsManager';
diff --git a/embedded-components/src/types/index.ts b/embedded-components/src/types/index.ts
@@ -0,0 +1,3 @@
+export interface EBConfig {
+  apiBaseUrl: string;
+}
diff --git a/embedded-components/src/vanilla/EBComponentsManager.tsx b/embedded-components/src/vanilla/EBComponentsManager.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import ReactDOMClient from 'react-dom/client';
+import { EBComponentsProvider } from '@/shared/EBComponentsProvider';
+import { EBConfig } from '@/types';
+import { componentRegistry, ComponentRegistry } from './componentRegistry';
+
+class EBComponentsManager {
+  private config: EBConfig;
+  private components: ComponentRegistry;
+  private roots: Map<string, ReactDOMClient.Root>;
+
+  constructor(config: EBConfig) {
+    this.config = config;
+    this.components = componentRegistry;
+    this.roots = new Map();
+  }
+
+  public mountComponent(
+    componentName: keyof ComponentRegistry,
+    props: any,
+    containerId: string
+  ): void {
+    const container = document.getElementById(containerId);
+    if (!container) {
+      console.error(`Container #${containerId} not found`);
+      return;
+    }
+
+    const Component = this.components[componentName];
+    if (Component) {
+      const root = ReactDOMClient.createRoot(container);
+      root.render(
+        <EBComponentsProvider theme={{}}>
+          <Component {...props} />
+        </EBComponentsProvider>
+      );
+      this.roots.set(containerId, root);
+    } else {
+      console.error(`Component ${componentName} not found`);
+    }
+  }
+
+  public unmountComponent(containerId: string): void {
+    const root = this.roots.get(containerId);
+    if (root) {
+      root.unmount();
+      this.roots.delete(containerId);
+    } else {
+      console.error(`No mounted component found in #${containerId}`);
+    }
+  }
+}
+
+export const initEBComponentsManager = (config: EBConfig) => new EBComponentsManager(config);
diff --git a/embedded-components/src/vanilla/componentRegistry.ts b/embedded-components/src/vanilla/componentRegistry.ts
@@ -0,0 +1,7 @@
+import { LinkAccountForm } from '@/components/LinkAccountForm/LinkAccountForm';
+
+export const componentRegistry = {
+  LinkAccountForm,
+};
+
+export type ComponentRegistry = typeof componentRegistry;
diff --git a/embedded-components/vite.config.mjs b/embedded-components/vite.config.mjs
@@ -1,30 +1,38 @@
 import { resolve } from 'path';
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 import react from '@vitejs/plugin-react';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import dts from 'vite-plugin-dts';
+import { libInjectCss } from 'vite-plugin-lib-inject-css';
 
-export default defineConfig({
-  plugins: [react(), tsconfigPaths(), dts({ rollupTypes: true })],
-  test: {
-    globals: true,
-    environment: 'jsdom',
-    setupFiles: './vitest.setup.mjs',
-  },
-  build: {
-    lib: {
-      entry: resolve(__dirname, 'src/index.tsx'),
-      name: 'Embedded Banking Components',
-      fileName: 'index',
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd());
+  return {
+    plugins: [react(), tsconfigPaths(), dts({ rollupTypes: true }), libInjectCss()],
+    test: {
+      globals: true,
+      environment: 'jsdom',
+      setupFiles: './vitest.setup.mjs',
     },
-    rollupOptions: {
-      external: ['react', 'react-dom'],
-      output: {
-        globals: {
-          react: 'React',
-          'react-dom': 'ReactDOM',
+    build: {
+      lib: {
+        entry: [resolve(__dirname, 'src/index.tsx')],
+        name: 'EBComponents',
+        formats: ['es', 'umd'],
+        fileName: 'EBComponents',
+      },
+      rollupOptions: {
+        external: ['react', 'react-dom'],
+        output: {
+          globals: {
+            react: 'React',
+            'react-dom': 'ReactDOM',
+          },
         },
       },
     },
-  },
+    define: {
+      'process.env': env,
+    },
+  };
 });