From 2d9579621137570135a5276621c77be514d02585 Mon Sep 17 00:00:00 2001 From: chavda-bhavik Date: Sun, 23 Oct 2022 15:16:02 +0530 Subject: [PATCH] feat: Applied modifications to embed lib --- libs/embed/package.json | 34 +++++++++++++--------- libs/embed/rollup.config.js | 2 +- libs/embed/src/embed.ts | 40 +++++++------------------- libs/embed/src/shared/iframeClasses.ts | 2 -- libs/embed/test/index.html | 39 ++++++------------------- package.json | 2 ++ pnpm-lock.yaml | 33 ++++++++------------- pnpm-workspace.yaml | 1 - 8 files changed, 54 insertions(+), 99 deletions(-) delete mode 100644 libs/embed/src/shared/iframeClasses.ts diff --git a/libs/embed/package.json b/libs/embed/package.json index 2d4498fab..d8b6c476f 100644 --- a/libs/embed/package.json +++ b/libs/embed/package.json @@ -7,7 +7,9 @@ "main": "dist/embed.umd.min.js", "module": "dist/embed.es5.min.js", "typings": "dist/types/embed.d.ts", - "files": ["dist"], + "files": [ + "dist" + ], "repository": { "type": "git", "url": "" @@ -15,14 +17,15 @@ "scripts": { "lint": "eslint 'src/**/*.ts'", "lint:fix": "pnpm lint -- --fix", + "preinstall": "pnpm build", "prebuild": "rimraf dist", - "build": "tsc && cross-env ENVIRONMENT=local rollup -c rollup.config.ts", - "build:dev": "tsc && cross-env ENVIRONMENT=dev rollup -c rollup.config.ts", - "build:prod": "tsc && cross-env ENVIRONMENT=production rollup -c rollup.config.ts", - "start": "cross-env ENVIRONMENT=local rollup -c rollup.config.ts -w", - "start:dev": "concurrently \"pnpm start\"", - "start:docker": "pnpm build && http-server -p 4701 dist", - "start:test:web": "http-server -p 4701 -o test", + "build": "tsc && cross-env ENVIRONMENT=local rollup -c rollup.config.js", + "build:dev": "tsc && cross-env ENVIRONMENT=dev rollup -c rollup.config.js -w", + "build:prod": "tsc && cross-env ENVIRONMENT=production rollup -c rollup.config.js", + "start:dev": "http-server -p 4701 -o test", + "start:docker": "pnpm build && pnpm start", + "start": "http-server -p 4701 -o test", + "dev": "concurrently \"pnpm build:dev\" \"pnpm start:dev\"", "precommit": "lint-staged" }, "license": "MIT", @@ -30,14 +33,20 @@ "node": ">=6.0.0" }, "lint-staged": { - "*.{js,jsx,ts,tsx}": ["eslint"], + "*.{js,jsx,ts,tsx}": [ + "eslint" + ], "{*.json,.{babelrc,eslintrc,prettierrc,stylelintrc}}": [ "prettier --ignore-path .eslintignore --parser json --write" ], - "*.{html,md,yml}": ["prettier --ignore-path .eslintignore --single-quote --write"] + "*.{html,md,yml}": [ + "prettier --ignore-path .eslintignore --single-quote --write" + ] }, "commitlint": { - "extends": ["@commitlint/config-conventional"] + "extends": [ + "@commitlint/config-conventional" + ] }, "devDependencies": { "@commitlint/cli": "^17.1.2", @@ -60,8 +69,5 @@ "ts-node": "^10.9.1", "tslib": "^2.4.0", "typescript": "^4.8.3" - }, - "dependencies": { - "iframe-resizer": "^4.3.2" } } diff --git a/libs/embed/rollup.config.js b/libs/embed/rollup.config.js index 8a5b18f6c..49cc4b6ad 100644 --- a/libs/embed/rollup.config.js +++ b/libs/embed/rollup.config.js @@ -5,7 +5,7 @@ import camelCase from 'lodash.camelcase'; import typescript from 'rollup-plugin-typescript2'; import json from 'rollup-plugin-json'; import replace from '@rollup/plugin-replace'; -import pkg from './package.json' assert { type: 'json' }; +import pkg from './package.json'; const libraryName = 'embed'; diff --git a/libs/embed/src/embed.ts b/libs/embed/src/embed.ts index b50fc8ca8..c6babc1eb 100644 --- a/libs/embed/src/embed.ts +++ b/libs/embed/src/embed.ts @@ -2,7 +2,7 @@ /* eslint promise/param-names: 0 */ /* eslint-disable */ // -import iFrameResize from 'iframe-resizer'; + import * as EventTypes from './shared/eventTypes'; import { UnmountedError, DomainVerificationError } from './shared/errors'; import { IFRAME_URL } from './shared/resources'; @@ -12,22 +12,16 @@ const IFRAME_ID = 'impler-iframe-element'; const WRAPPER_CLASS_NAME = 'wrapper-impler-widget'; class Impler { - public clientId: string | unknown; + public projectId: string | unknown; private backendUrl?: string = ''; - private socketUrl?: string = ''; - - private theme?: Record; - private i18n?: Record; private debugMode: boolean; private onloadFunc: (b: any) => void; - private unseenBadgeSelector: string = ''; - private domainAllowed: boolean; private selector: string = ''; @@ -52,7 +46,7 @@ class Impler { }; init = ( - clientId: string, + projectId: string, selectorOrOptions: string | IOptions, data: { subscriberId: string; lastName: string; firstName: string; email: string; subscriberHash?: string } ) => { @@ -60,17 +54,14 @@ class Impler { if (typeof selectorOrOptions === 'string') { this.selector = selectorOrOptions; } else { - this.selector = selectorOrOptions.bellSelector; - this.unseenBadgeSelector = selectorOrOptions.unseenBadgeSelector; + this.selector = selectorOrOptions.selector; this.options = selectorOrOptions; this.backendUrl = selectorOrOptions.backendUrl; - this.socketUrl = selectorOrOptions.socketUrl; - this.theme = selectorOrOptions.theme; this.i18n = selectorOrOptions.i18n; } - this.clientId = clientId; - this.initializeIframe(clientId, data); + this.projectId = projectId; + this.initializeIframe(projectId, data); this.mountIframe(); const button = document.querySelector(this.selector) as HTMLButtonElement; if (button) { @@ -144,7 +135,7 @@ class Impler { ensureAllowed = () => { if (!this.domainAllowed) { - throw new DomainVerificationError(`${window.location.host} is not permitted to use client ID ${this.clientId}`); + throw new DomainVerificationError(`${window.location.host} is not permitted to use client ID ${this.projectId}`); } }; @@ -177,7 +168,7 @@ class Impler { this.domainAllowed = false; }; - initializeIframe = (clientId: string, options: any) => { + initializeIframe = (projectId: string, options: any) => { if (!document.getElementById(IFRAME_ID)) { const iframe = document.createElement('iframe'); window.addEventListener( @@ -191,10 +182,8 @@ class Impler { { type: EventTypes.INIT_IFRAME, value: { - clientId: this.clientId, + projectId: this.projectId, backendUrl: this.backendUrl, - socketUrl: this.socketUrl, - theme: this.theme, i18n: this.i18n, topHost: window.location.host, data: options, @@ -206,7 +195,7 @@ class Impler { true ); - iframe.src = `${IFRAME_URL}/${clientId}?`; + iframe.src = `${IFRAME_URL}/${projectId}?`; iframe.id = IFRAME_ID; iframe.style.border = 'none'; (iframe as any).crossorigin = 'anonymous'; @@ -281,14 +270,7 @@ export default ((window: any) => { })(window); interface IOptions { - bellSelector: string; - unseenBadgeSelector: string; + selector: string; backendUrl?: string; - socketUrl?: string; - theme?: Record; i18n?: Record; - position?: { - top?: number | string; - left?: number | string; - }; } diff --git a/libs/embed/src/shared/iframeClasses.ts b/libs/embed/src/shared/iframeClasses.ts deleted file mode 100644 index 724178716..000000000 --- a/libs/embed/src/shared/iframeClasses.ts +++ /dev/null @@ -1,2 +0,0 @@ -export const TAKEOVER_CLASSNAME = 'weasl-iframe-takeover'; -export const INFO_MSG_CLASSNAME = 'weasl-iframe-info-msg'; diff --git a/libs/embed/test/index.html b/libs/embed/test/index.html index 5a62ae8b9..2e4802836 100644 --- a/libs/embed/test/index.html +++ b/libs/embed/test/index.html @@ -68,29 +68,6 @@