@mxenabled/web-connect-widget-sdk 0.0.1

package/.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+
+dist

package/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 80
+}

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 MX Technologies Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/dist/ConnectWidget.d.ts

@@ -0,0 +1,10 @@
+interface ConnectWidgetProps {
+    containerSelector: string;
+    iframeProps?: Record<string, unknown>;
+    url: string;
+}
+export declare const ConnectWidget: ({ containerSelector, iframeProps, url, }: ConnectWidgetProps) => {
+    mount: () => void;
+    unmount: () => void;
+};
+export {};

package/dist/ConnectWidget.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { ConnectWidget } from './ConnectWidget';

package/dist/index.js

@@ -0,0 +1,30 @@
+const m = ({
+  containerSelector: n,
+  iframeProps: o,
+  url: s
+}) => {
+  const t = document.createElement("iframe"), { style: i, ...c } = o || {}, a = {
+    height: "100%",
+    width: "100%",
+    ...i ?? {}
+  };
+  Object.assign(t.style, a);
+  for (const [e, r] of Object.entries(c))
+    e.startsWith("data-") ? t.setAttribute(e, String(r)) : Object.assign(t, { [e]: r });
+  return t.src = s, {
+    mount: () => {
+      const e = document.querySelector(n);
+      if (!e)
+        throw new Error(
+          `Container with selector "${n}" not found.`
+        );
+      e.appendChild(t);
+    },
+    unmount: () => {
+      t.remove();
+    }
+  };
+};
+export {
+  m as ConnectWidget
+};

package/dist/index.umd.cjs

@@ -0,0 +1 @@
+(function(e,o){typeof exports=="object"&&typeof module<"u"?o(exports):typeof define=="function"&&define.amd?define(["exports"],o):(e=typeof globalThis<"u"?globalThis:e||self,o(e.index={}))})(this,(function(e){"use strict";const o=({containerSelector:i,iframeProps:r,url:d})=>{const t=document.createElement("iframe"),{style:f,...c}=r||{},u={height:"100%",width:"100%",...f??{}};Object.assign(t.style,u);for(const[n,s]of Object.entries(c))n.startsWith("data-")?t.setAttribute(n,String(s)):Object.assign(t,{[n]:s});return t.src=d,{mount:()=>{const n=document.querySelector(i);if(!n)throw new Error(`Container with selector "${i}" not found.`);n.appendChild(t)},unmount:()=>{t.remove()}}};e.ConnectWidget=o,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));

package/eslint.config.js

@@ -0,0 +1,24 @@
+import js from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import prettier from 'eslint-plugin-prettier/recommended';
+import { defineConfig, globalIgnores } from 'eslint/config';
+
+export default defineConfig([
+  globalIgnores(['dist', 'node_modules']),
+  {
+    files: ['**/*.{ts,js}'],
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.recommended,
+      prettier,
+    ],
+    languageOptions: {
+      ecmaVersion: 2024,
+      sourceType: 'module',
+      parser: tseslint.parser,
+      parserOptions: {
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+]);

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@mxenabled/web-connect-widget-sdk",
+  "version": "0.0.1",
+  "description": "MX Connect Web Widget SDK",
+  "main": "dist/index.js",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mxenabled/web-connect-widget-sdk.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mxenabled/web-connect-widget-sdk/issues"
+  },
+  "homepage": "https://github.com/mxenabled/web-connect-widget-sdk#readme",
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "lint": "eslint \"src/**/*.{ts,js}\"",
+    "lint:fix": "eslint \"src/**/*.{ts,js}\" --fix",
+    "format": "prettier --write \"src/**/*.{ts,js,json,md}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,js,json,md}\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "jsdom": "^28.1.0",
+    "prettier": "^3.0.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.0.0",
+    "vitest": "^4.0.18"
+  },
+  "dependencies": {
+    "vite-plugin-dts": "^4.5.4"
+  }
+}

package/src/ConnectWidget.test.ts

@@ -0,0 +1,116 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { getByTestId, queryByTestId } from '@testing-library/dom';
+import { ConnectWidget } from './ConnectWidget';
+
+const widgetContainerId = 'widget-container';
+const testId = 'connect-widget-iframe';
+
+const createDOM = () => {
+  const div = document.createElement('div');
+  div.id = widgetContainerId;
+  document.body.appendChild(div);
+
+  return div;
+};
+
+describe('ConnectWidget', () => {
+  let container: HTMLElement;
+
+  beforeEach(() => {
+    container = createDOM();
+  });
+  afterEach(() => {
+    document.body.replaceChildren();
+  });
+
+  it('mounts and unmounts without error', () => {
+    const widget = ConnectWidget({
+      containerSelector: `#${widgetContainerId}`,
+      iframeProps: {
+        'data-testid': 'connect-widget-iframe',
+      },
+      url: 'https://example.com',
+    });
+
+    widget.mount();
+
+    const iframe = getByTestId(container, testId);
+
+    expect(iframe).toBeTruthy();
+
+    widget.unmount();
+
+    expect(queryByTestId(container, testId)).toBeFalsy();
+  });
+
+  it('sets data attributes, styles, and other iframe props correctly', () => {
+    const widget = ConnectWidget({
+      containerSelector: `#${widgetContainerId}`,
+      iframeProps: {
+        'data-testid': testId,
+        'data-custom-attr': 'customValue',
+        title: 'Connect Widget Iframe',
+        style: {
+          border: 'solid 1px black',
+          height: '50px',
+          width: '50px',
+        },
+      },
+      url: 'https://example.com',
+    });
+
+    widget.mount();
+
+    const iframe = getByTestId(container, testId);
+
+    expect(iframe).toBeTruthy();
+    expect(iframe).toHaveAttribute('data-custom-attr', 'customValue');
+    expect(iframe).toHaveAttribute('title', 'Connect Widget Iframe');
+    expect(iframe).toHaveStyle({
+      width: '50px',
+      height: '50px',
+    });
+    expect(iframe.style.border).toBe('1px solid black');
+
+    widget.unmount();
+  });
+
+  it('defaults height and width to 100% if not provided in styles, but still uses the rest of the provided styles', () => {
+    const widget = ConnectWidget({
+      containerSelector: `#${widgetContainerId}`,
+      iframeProps: {
+        'data-testid': testId,
+        style: {
+          border: 'solid 1px black',
+        },
+        title: 'Connect Widget Iframe',
+      },
+      url: 'https://example.com',
+    });
+
+    widget.mount();
+
+    const iframe = getByTestId(container, testId);
+
+    expect(iframe).toBeTruthy();
+    expect(iframe).toHaveStyle({
+      width: '100%',
+      height: '100%',
+    });
+
+    expect(iframe.style.border).toBe('1px solid black');
+
+    widget.unmount();
+  });
+
+  it('throws an error if the container element is not found when mounting', () => {
+    const widget = ConnectWidget({
+      containerSelector: '#non-existent-container',
+      url: 'https://example.com',
+    });
+
+    expect(() => widget.mount()).toThrowError(
+      'Container with selector "#non-existent-container" not found.'
+    );
+  });
+});

package/src/ConnectWidget.ts

@@ -0,0 +1,50 @@
+interface ConnectWidgetProps {
+  containerSelector: string;
+  iframeProps?: Record<string, unknown>;
+  url: string;
+}
+
+export const ConnectWidget = ({
+  containerSelector,
+  iframeProps,
+  url,
+}: ConnectWidgetProps) => {
+  const iframe = document.createElement('iframe');
+
+  const { style: iframeStyle, ...restIframeProps } = iframeProps || {};
+
+  const style = {
+    height: '100%',
+    width: '100%',
+    ...(iframeStyle ?? {}),
+  };
+
+  Object.assign(iframe.style, style);
+
+  for (const [key, value] of Object.entries(restIframeProps)) {
+    if (key.startsWith('data-')) {
+      iframe.setAttribute(key, String(value));
+    } else {
+      Object.assign(iframe, { [key]: value });
+    }
+  }
+
+  iframe.src = url;
+
+  return {
+    mount: () => {
+      const container = document.querySelector(containerSelector);
+
+      if (!container) {
+        throw new Error(
+          `Container with selector "${containerSelector}" not found.`
+        );
+      }
+
+      container.appendChild(iframe);
+    },
+    unmount: () => {
+      iframe.remove();
+    },
+  };
+};

package/src/index.ts

@@ -0,0 +1 @@
+export { ConnectWidget } from './ConnectWidget';

package/testSetup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client", "vitest/globals", "@testing-library/jest-dom"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/vite.config.ts

@@ -0,0 +1,18 @@
+/// <reference types="vitest/config" />
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: 'src/index.ts',
+      name: 'index',
+      fileName: 'index',
+    },
+  },
+  plugins: [dts()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./testSetup.ts'],
+  },
+});