From 827d3ec0625933c41fc60f179c00273c11f2102f Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 24 Nov 2025 21:06:42 +0530 Subject: [PATCH 01/20] SK-2408 test the build size --- package.json | 1 + src/core/internal/reveal/reveal-frame.ts | 10 +++++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index ae9414ce..33e58b9c 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "jquery-mask-plugin": "^1.14.16", "jss": "^10.7.1", "jss-preset-default": "^10.7.1", + "jszip": "^3.10.1", "jwt-decode": "^3.1.2", "lodash": "^4.17.21", "mime": "3.0.0", diff --git a/src/core/internal/reveal/reveal-frame.ts b/src/core/internal/reveal/reveal-frame.ts index 973e0a2a..89dcc505 100644 --- a/src/core/internal/reveal/reveal-frame.ts +++ b/src/core/internal/reveal/reveal-frame.ts @@ -2,6 +2,8 @@ Copyright (c) 2022 Skyflow, Inc. */ import bus from 'framebus'; +// eslint-disable-next-line import/no-extraneous-dependencies +import * as JSZip from 'jszip'; import { ELEMENT_EVENTS_TO_IFRAME, STYLE_TYPE, @@ -421,11 +423,17 @@ class RevealFrame { return new Promise((resolve, reject) => { try { getFileURLFromVaultBySkyflowIDComposable(data, this.#client, clientConfig.authToken) - .then((resolvedResult) => { + .then(async (resolvedResult) => { let url = ''; if (resolvedResult.fields && data.column) { url = resolvedResult.fields[data.column]; } + // fetch file from url + const response = await fetch(url); + const arrayBuffer = await response.arrayBuffer(); + console.log('array', arrayBuffer); + const zip = await JSZip.loadAsync(arrayBuffer); + console.log('zip files', zip); this.sub2({ url, iframeName: this.#name, From dcc7dd6f5439a2e46e38233501614b25b57a73a3 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 24 Nov 2025 15:37:37 +0000 Subject: [PATCH 02/20] [AUTOMATED] Release - 2.6.0-dev.827d3ec --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 33e58b9c..d243a2eb 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.6.0", + "version": "2.6.0-dev.827d3ec", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", From c9a6c63fe5af48bd0496ad31de8047494701fae8 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 24 Nov 2025 21:35:47 +0530 Subject: [PATCH 03/20] SK-2408 test the build zip size --- package.json | 4 ++-- src/core/internal/reveal/reveal-frame.ts | 12 ++++++------ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index d243a2eb..3547133c 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.6.0-dev.827d3ec", + "version": "2.6.0", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", @@ -33,6 +33,7 @@ "url": "https://github.com/skyflowapi/skyflow-js.git" }, "dependencies": { + "@zip.js/zip.js": "^2.8.11", "core-js": "^3.6.5", "framebus": "^4.0.0", "inject-stylesheet": "^2.0.0", @@ -40,7 +41,6 @@ "jquery-mask-plugin": "^1.14.16", "jss": "^10.7.1", "jss-preset-default": "^10.7.1", - "jszip": "^3.10.1", "jwt-decode": "^3.1.2", "lodash": "^4.17.21", "mime": "3.0.0", diff --git a/src/core/internal/reveal/reveal-frame.ts b/src/core/internal/reveal/reveal-frame.ts index 89dcc505..eff24baa 100644 --- a/src/core/internal/reveal/reveal-frame.ts +++ b/src/core/internal/reveal/reveal-frame.ts @@ -2,8 +2,7 @@ Copyright (c) 2022 Skyflow, Inc. */ import bus from 'framebus'; -// eslint-disable-next-line import/no-extraneous-dependencies -import * as JSZip from 'jszip'; +import * as zip from '@zip.js/zip.js'; import { ELEMENT_EVENTS_TO_IFRAME, STYLE_TYPE, @@ -430,10 +429,11 @@ class RevealFrame { } // fetch file from url const response = await fetch(url); - const arrayBuffer = await response.arrayBuffer(); - console.log('array', arrayBuffer); - const zip = await JSZip.loadAsync(arrayBuffer); - console.log('zip files', zip); + const blob = await response.blob(); + + const reader = new zip.ZipReader(new zip.BlobReader(blob)); + const entries = await reader.getEntries(); + console.log('entries', entries); this.sub2({ url, iframeName: this.#name, From 89572aa04b9e135d4276cb99ae396e35da440cdb Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Mon, 24 Nov 2025 16:06:36 +0000 Subject: [PATCH 04/20] [AUTOMATED] Release - 2.6.0-dev.c9a6c63 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3547133c..51810db9 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.6.0", + "version": "2.6.0-dev.c9a6c63", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", From 499a0800dc7122bf4987d652c6b4c3d2cb3ff038 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Tue, 25 Nov 2025 13:59:54 +0530 Subject: [PATCH 05/20] SK-2408 test the build size just import required functions --- src/core/internal/reveal/reveal-frame.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/core/internal/reveal/reveal-frame.ts b/src/core/internal/reveal/reveal-frame.ts index eff24baa..017565f0 100644 --- a/src/core/internal/reveal/reveal-frame.ts +++ b/src/core/internal/reveal/reveal-frame.ts @@ -2,7 +2,7 @@ Copyright (c) 2022 Skyflow, Inc. */ import bus from 'framebus'; -import * as zip from '@zip.js/zip.js'; +// import * as zip from '@zip.js/zip.js'; import { ELEMENT_EVENTS_TO_IFRAME, STYLE_TYPE, @@ -38,6 +38,9 @@ import properties from '../../../properties'; const { getType } = require('mime'); +// eslint-disable-next-line import/no-extraneous-dependencies +const { ZipReader, BlobReader } = require('@zip.js/zip.js'); + const CLASS_NAME = 'RevealFrame'; class RevealFrame { static revealFrame: RevealFrame; @@ -431,7 +434,7 @@ class RevealFrame { const response = await fetch(url); const blob = await response.blob(); - const reader = new zip.ZipReader(new zip.BlobReader(blob)); + const reader = new ZipReader(new BlobReader(blob)); const entries = await reader.getEntries(); console.log('entries', entries); this.sub2({ From e9146476c1e28771f2890092eca404353bf522e7 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Tue, 25 Nov 2025 08:30:54 +0000 Subject: [PATCH 06/20] [AUTOMATED] Release - 2.6.0-dev.499a080 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 51810db9..d78da8df 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.6.0-dev.c9a6c63", + "version": "2.6.0-dev.499a080", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", From 11ee3f30277444f0e6ee5c9a2e17f63afeda3954 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Tue, 25 Nov 2025 14:14:47 +0530 Subject: [PATCH 07/20] SK-2408 test the build size just import required functions --- package.json | 8 ++++---- src/core/internal/reveal/reveal-frame.ts | 12 +++++------- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index d78da8df..6453852e 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.6.0-dev.499a080", + "version": "2.6.0-dev.c9a6c63", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", @@ -33,7 +33,6 @@ "url": "https://github.com/skyflowapi/skyflow-js.git" }, "dependencies": { - "@zip.js/zip.js": "^2.8.11", "core-js": "^3.6.5", "framebus": "^4.0.0", "inject-stylesheet": "^2.0.0", @@ -45,7 +44,8 @@ "lodash": "^4.17.21", "mime": "3.0.0", "regex-parser": "^2.2.11", - "set-value": "^4.0.1" + "set-value": "^4.0.1", + "jszip": "^3.10.1" }, "engines": { "node": ">=12.0", @@ -85,4 +85,4 @@ "webpack-manifest-plugin": "^4.0.2", "webpack-merge": "^5.8.0" } -} +} \ No newline at end of file diff --git a/src/core/internal/reveal/reveal-frame.ts b/src/core/internal/reveal/reveal-frame.ts index 017565f0..060f37ba 100644 --- a/src/core/internal/reveal/reveal-frame.ts +++ b/src/core/internal/reveal/reveal-frame.ts @@ -2,7 +2,6 @@ Copyright (c) 2022 Skyflow, Inc. */ import bus from 'framebus'; -// import * as zip from '@zip.js/zip.js'; import { ELEMENT_EVENTS_TO_IFRAME, STYLE_TYPE, @@ -39,7 +38,7 @@ import properties from '../../../properties'; const { getType } = require('mime'); // eslint-disable-next-line import/no-extraneous-dependencies -const { ZipReader, BlobReader } = require('@zip.js/zip.js'); +const { loadAsync } = require('jszip'); const CLASS_NAME = 'RevealFrame'; class RevealFrame { @@ -432,11 +431,10 @@ class RevealFrame { } // fetch file from url const response = await fetch(url); - const blob = await response.blob(); - - const reader = new ZipReader(new BlobReader(blob)); - const entries = await reader.getEntries(); - console.log('entries', entries); + const arrayBuffer = await response.arrayBuffer(); + console.log('array', arrayBuffer); + const zip = await loadAsync(arrayBuffer); + console.log('zip files', zip); this.sub2({ url, iframeName: this.#name, From 53d5319731a3157c0fb2a205029234eec17b1d62 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Tue, 25 Nov 2025 20:14:48 +0530 Subject: [PATCH 08/20] SK-2408 test the different files for element type --- .github/workflows/common-release.yml | 4 +- package.json | 2 + .../external/collect/collect-container.ts | 4 +- .../collect/compose-collect-container.ts | 6 +- src/core/external/common/iframe.ts | 25 +++- .../reveal/composable-reveal-container.ts | 4 +- src/core/external/reveal/reveal-container.ts | 4 +- src/core/external/skyflow-container.ts | 4 +- src/iframe-libs/iframer.ts | 37 ++++++ src/index-internal-collect.ts | 40 ++++++ src/index-internal-composable-reveal.ts | 39 ++++++ src/index-internal-controller.ts | 26 ++++ src/index-internal-reveal.ts | 40 ++++++ src/properties.ts | 6 +- webpack.iframe-split.js | 116 ++++++++++++++++++ 15 files changed, 340 insertions(+), 17 deletions(-) create mode 100644 src/index-internal-collect.ts create mode 100644 src/index-internal-composable-reveal.ts create mode 100644 src/index-internal-controller.ts create mode 100644 src/index-internal-reveal.ts create mode 100644 webpack.iframe-split.js diff --git a/.github/workflows/common-release.yml b/.github/workflows/common-release.yml index 1516c5ec..eae5e322 100644 --- a/.github/workflows/common-release.yml +++ b/.github/workflows/common-release.yml @@ -95,13 +95,13 @@ jobs: run: npm run build-browser-sdk env: IFRAME_SECURE_ORIGIN: ${{ secrets.IFRAME_SECURE_ORIGIN }} - IFRAME_SECURE_SITE: "v${{ env.RELEASE_VERSION }}/${{ secrets.IFRAME_SECURE_SITE }}" + IFRAME_SECURE_SITE: "v${{ env.RELEASE_VERSION }}/elements" - name: Build Iframe run: npm run build-iframe env: IFRAME_SECURE_ORIGIN: ${{ secrets.IFRAME_SECURE_ORIGIN }} - IFRAME_SECURE_SITE: "v${{ env.RELEASE_VERSION }}/${{ secrets.IFRAME_SECURE_SITE }}" + IFRAME_SECURE_SITE: "v${{ env.RELEASE_VERSION }}/elements" - name: Configure AWS Credentials uses: aws-actions/configure-aws-credentials@v4 diff --git a/package.json b/package.json index 6453852e..31c5a7a7 100644 --- a/package.json +++ b/package.json @@ -23,9 +23,11 @@ "type-check:watch": "npm run type-check -- --watch", "build:types": "tsc --emitDeclarationOnly", "dev": "webpack serve --config=webpack.dev.js --open --hot ", + "dev:split": "SPLIT_BUNDLES=true webpack serve --config=webpack.dev.js --open --hot", "build-browser-sdk": "webpack --config=webpack.skyflow-browser.js", "build-node-sdk": "webpack --config=webpack.skyflow-node.js", "build-iframe": "webpack --config=webpack.iframe.js", + "build-iframe-split": "webpack --config=webpack.iframe-split.js", "test": "jest --config=jest.config.json" }, "repository": { diff --git a/src/core/external/collect/collect-container.ts b/src/core/external/collect/collect-container.ts index 2642d236..9d56ef64 100644 --- a/src/core/external/collect/collect-container.ts +++ b/src/core/external/collect/collect-container.ts @@ -2,7 +2,7 @@ Copyright (c) 2022 Skyflow, Inc. */ import bus from 'framebus'; -import iframer, { setAttributes, getIframeSrc, setStyles } from '../../../iframe-libs/iframer'; +import iframer, { setAttributes, getIframeSrcByType, setStyles } from '../../../iframe-libs/iframer'; import deepClone from '../../../libs/deep-clone'; import { formatValidations, formatOptions, validateElementOptions, @@ -120,7 +120,7 @@ class CollectContainer extends Container { referrer: clientDomain, }); setAttributes(iframe, { - src: getIframeSrc(), + src: getIframeSrcByType(COLLECT_FRAME_CONTROLLER), }); setStyles(iframe, { ...CONTROLLER_STYLES }); printLog(parameterizedString(logs.infoLogs.CREATE_COLLECT_CONTAINER, CLASS_NAME), diff --git a/src/core/external/collect/compose-collect-container.ts b/src/core/external/collect/compose-collect-container.ts index d8915d0f..50305d21 100644 --- a/src/core/external/collect/compose-collect-container.ts +++ b/src/core/external/collect/compose-collect-container.ts @@ -6,7 +6,9 @@ Copyright (c) 2023 Skyflow, Inc. import bus from 'framebus'; import sum from 'lodash/sum'; import EventEmitter from '../../../event-emitter'; -import iframer, { setAttributes, getIframeSrc, setStyles } from '../../../iframe-libs/iframer'; +import iframer, { + setAttributes, getIframeSrc, setStyles, getIframeSrcByType, +} from '../../../iframe-libs/iframer'; import deepClone from '../../../libs/deep-clone'; import { formatValidations, formatOptions, validateElementOptions, getElements, @@ -125,7 +127,7 @@ class ComposableContainer extends Container { referrer: this.#clientDomain, }); setAttributes(iframe, { - src: getIframeSrc(), + src: getIframeSrcByType(COLLECT_FRAME_CONTROLLER), }); setStyles(iframe, { ...CONTROLLER_STYLES }); printLog(parameterizedString(logs.infoLogs.CREATE_COLLECT_CONTAINER, CLASS_NAME), diff --git a/src/core/external/common/iframe.ts b/src/core/external/common/iframe.ts index 96304fbf..3a17d9c5 100644 --- a/src/core/external/common/iframe.ts +++ b/src/core/external/common/iframe.ts @@ -3,12 +3,14 @@ Copyright (c) 2022 Skyflow, Inc. */ import iframer, { setAttributes, - getIframeSrc, + getIframeSrcByType, } from '../../../iframe-libs/iframer'; import SkyflowError from '../../../libs/skyflow-error'; import SKYFLOW_ERROR_CODE from '../../../utils/constants'; import { updateMetricObjectValue } from '../../../metrics/index'; -import { METRIC_TYPES } from '../../constants'; +import { + METRIC_TYPES, FRAME_ELEMENT, FRAME_REVEAL, COMPOSABLE_REVEAL, +} from '../../constants'; import { LogLevel } from '../../../index-node'; import { Metadata } from '../../internal/internal-types'; @@ -21,15 +23,31 @@ export default class IFrame { container?: Element; + #frameType: string; + constructor(name: string, metadata: Metadata, containerId: string, logLevel: LogLevel) { const clientDomain = metadata.clientDomain || ''; this.name = `${name}:${containerId}:${logLevel}:${btoa(clientDomain)}`; this.metadata = metadata; + + // Determine frame type from name + const namePrefix = name.split(':')[0]; + console.log('namePrefix', namePrefix); + if (namePrefix === FRAME_ELEMENT || namePrefix === 'element') { + this.#frameType = FRAME_ELEMENT; + } else if (namePrefix === FRAME_REVEAL || namePrefix === 'reveal') { + this.#frameType = FRAME_REVEAL; + } else if (namePrefix === COMPOSABLE_REVEAL || namePrefix === 'reveal-composable') { + this.#frameType = COMPOSABLE_REVEAL; + } else { + this.#frameType = FRAME_ELEMENT; // Default fallback + } this.iframe = iframer({ name: this.name, referrer: clientDomain, title: name.match(/^element:([^:]+):/)?.[1] ?? name, }); + console.log('src', this.iframe.src); } mount = (domElement, elementId?: string, data?: any) => { @@ -52,7 +70,8 @@ export default class IFrame { // throw new SkyflowError(SKYFLOW_ERROR_CODE.INVALID_ELEMENT_SELECTOR, [], true); } - setAttributes(this.iframe, { src: `${getIframeSrc()}${data ? `?${btoa(data?.record)}` : ''}` }); + setAttributes(this.iframe, { src: `${getIframeSrcByType(this.#frameType)}${data ? `?${btoa(data?.record)}` : ''}` }); + console.log('iframe src before set', getIframeSrcByType(this.#frameType)); this.container?.appendChild(this.iframe); }; diff --git a/src/core/external/reveal/composable-reveal-container.ts b/src/core/external/reveal/composable-reveal-container.ts index 91a41a20..91756a6e 100644 --- a/src/core/external/reveal/composable-reveal-container.ts +++ b/src/core/external/reveal/composable-reveal-container.ts @@ -6,7 +6,7 @@ Copyright (c) 2023 Skyflow, Inc. import bus from 'framebus'; import sum from 'lodash/sum'; import EventEmitter from '../../../event-emitter'; -import iframer, { setAttributes, getIframeSrc, setStyles } from '../../../iframe-libs/iframer'; +import iframer, { setAttributes, getIframeSrcByType, setStyles } from '../../../iframe-libs/iframer'; import deepClone from '../../../libs/deep-clone'; import SkyflowError from '../../../libs/skyflow-error'; import uuid from '../../../libs/uuid'; @@ -115,7 +115,7 @@ class ComposableRevealContainer extends Container { referrer: this.#clientDomain, }); setAttributes(iframe, { - src: getIframeSrc(), + src: getIframeSrcByType(COLLECT_FRAME_CONTROLLER), }); setStyles(iframe, { ...CONTROLLER_STYLES }); printLog(parameterizedString(logs.infoLogs.CREATE_COLLECT_CONTAINER, CLASS_NAME), diff --git a/src/core/external/reveal/reveal-container.ts b/src/core/external/reveal/reveal-container.ts index f4e1b80b..20a61299 100644 --- a/src/core/external/reveal/reveal-container.ts +++ b/src/core/external/reveal/reveal-container.ts @@ -3,7 +3,7 @@ Copyright (c) 2022 Skyflow, Inc. */ import bus from 'framebus'; import EventEmitter from '../../../event-emitter'; -import iframer, { getIframeSrc, setAttributes, setStyles } from '../../../iframe-libs/iframer'; +import iframer, { getIframeSrcByType, setAttributes, setStyles } from '../../../iframe-libs/iframer'; import SkyflowError from '../../../libs/skyflow-error'; import uuid from '../../../libs/uuid'; import { ContainerType } from '../../../skyflow'; @@ -103,7 +103,7 @@ class RevealContainer extends Container { referrer: clientDomain, }); setAttributes(iframe, { - src: getIframeSrc(), + src: getIframeSrcByType(REVEAL_FRAME_CONTROLLER), }); setStyles(iframe, { ...CONTROLLER_STYLES }); printLog(parameterizedString(logs.infoLogs.CREATE_REVEAL_CONTAINER, CLASS_NAME), diff --git a/src/core/external/skyflow-container.ts b/src/core/external/skyflow-container.ts index b7b9f33d..d6e872da 100644 --- a/src/core/external/skyflow-container.ts +++ b/src/core/external/skyflow-container.ts @@ -4,7 +4,7 @@ Copyright (c) 2022 Skyflow, Inc. import bus from 'framebus'; import Client from '../../client'; import iframer, { - getIframeSrc, + getIframeSrcByType, setAttributes, setStyles, } from '../../iframe-libs/iframer'; @@ -71,7 +71,7 @@ class SkyflowContainer { referrer: clientDomain, }); setAttributes(iframe, { - src: getIframeSrc(), + src: getIframeSrcByType(SKYFLOW_FRAME_CONTROLLER), }); setStyles(iframe, { ...CONTROLLER_STYLES }); document.body.append(iframe); diff --git a/src/iframe-libs/iframer.ts b/src/iframe-libs/iframer.ts index 1761e6f6..ef51496d 100644 --- a/src/iframe-libs/iframer.ts +++ b/src/iframe-libs/iframer.ts @@ -3,6 +3,10 @@ Copyright (c) 2022 Skyflow, Inc. */ import { IFRAME_DEFAULT_STYLES, + FRAME_ELEMENT, + FRAME_REVEAL, + COMPOSABLE_REVEAL, + SKYFLOW_FRAME_CONTROLLER, } from '../core/constants'; import properties from '../properties'; @@ -44,6 +48,39 @@ export default (options = {}) => { return iframe; }; +/** + * Get iframe source URL based on frame type + * @param frameType - Type of frame (FRAME_ELEMENT, FRAME_REVEAL, etc.) + * @returns URL to the appropriate iframe HTML file + */ +export const getIframeSrcByType = (frameType: string): string => { + const secureSite = properties.IFRAME_SECURE_SITE; + + console.log('secureSite frameType', secureSite); + + // If IFRAME_SECURE_SITE ends with .html, use monolithic bundle (backwards compatible) + // This happens in dev mode with npm run dev (not npm run dev:split) + if (secureSite.endsWith('.html')) { + return secureSite; // Use monolithic iframe.html + } + + // Otherwise, use split bundles (production or npm run dev:split) + const baseUrl = secureSite.replace(/\/$/, ''); // Remove trailing slash if present + + switch (frameType) { + case FRAME_ELEMENT: + return `${baseUrl}/collect.html`; + case FRAME_REVEAL: + return `${baseUrl}/reveal.html`; + case COMPOSABLE_REVEAL: + return `${baseUrl}/composable-reveal.html`; + case SKYFLOW_FRAME_CONTROLLER: + return `${baseUrl}/controller.html`; + default: + return secureSite; // Fallback to default + } +}; + export const getIframeSrc = () => properties.IFRAME_SECURE_SITE; export const setStyles = (element: HTMLElement, styles) => { diff --git a/src/index-internal-collect.ts b/src/index-internal-collect.ts new file mode 100644 index 00000000..43cb80db --- /dev/null +++ b/src/index-internal-collect.ts @@ -0,0 +1,40 @@ +/* +Copyright (c) 2022 Skyflow, Inc. +*/ +import 'core-js/stable'; +import { FRAME_ELEMENT } from './core/constants'; +import logs from './utils/logs'; +import { MessageType, LogLevel } from './utils/common'; +import { + printLog, + parameterizedString, + getElementName, +} from './utils/logs-helper'; +import { getValueFromName } from './utils/helpers'; +import FrameElementInit from './core/internal/frame-element-init'; + +(function init(root: any) { + try { + const frameName = root.name; + const frameType = getValueFromName(frameName, 0); + console.log('frameType 2', frameType); + if (frameType === FRAME_ELEMENT) { + const logLevel = getValueFromName(frameName, 4) || LogLevel.ERROR; + printLog( + parameterizedString( + logs.infoLogs.COLLECT_ELEMET_START, + 'index-internal-collect', + getElementName(frameName), + ), + MessageType.LOG, + LogLevel[logLevel], + ); + root.Skyflow = FrameElementInit; + FrameElementInit.startFrameElement(); + } else { + throw new Error('Invalid frame type for collect bundle'); + } + } catch (e) { + throw new Error(parameterizedString(logs.errorLogs.INVALID_IFRAME)); + } +}(window)); diff --git a/src/index-internal-composable-reveal.ts b/src/index-internal-composable-reveal.ts new file mode 100644 index 00000000..1d6e5360 --- /dev/null +++ b/src/index-internal-composable-reveal.ts @@ -0,0 +1,39 @@ +/* +Copyright (c) 2022 Skyflow, Inc. +*/ +import 'core-js/stable'; +import { COMPOSABLE_REVEAL } from './core/constants'; +import logs from './utils/logs'; +import { MessageType, LogLevel } from './utils/common'; +import { + printLog, + parameterizedString, +} from './utils/logs-helper'; +import { getValueFromName } from './utils/helpers'; +import RevealComposableFrameElementInit from './core/internal/composable-frame-element-init'; + +(function init(root: any) { + try { + const frameName = root.name; + const frameType = getValueFromName(frameName, 0); + console.log('frameType 3', frameType); + if (frameType === COMPOSABLE_REVEAL) { + const logLevel = getValueFromName(frameName, 4) || LogLevel.ERROR; + printLog( + parameterizedString( + logs.infoLogs.COLLECT_ELEMET_START, + 'index-internal-composable-reveal', + frameName, + ), + MessageType.LOG, + LogLevel[logLevel], + ); + root.Skyflow = RevealComposableFrameElementInit; + RevealComposableFrameElementInit.startFrameElement(); + } else { + throw new Error('Invalid frame type for composable reveal bundle'); + } + } catch (e) { + throw new Error(parameterizedString(logs.errorLogs.INVALID_IFRAME)); + } +}(window)); diff --git a/src/index-internal-controller.ts b/src/index-internal-controller.ts new file mode 100644 index 00000000..8c9abee1 --- /dev/null +++ b/src/index-internal-controller.ts @@ -0,0 +1,26 @@ +/* +Copyright (c) 2022 Skyflow, Inc. +*/ +import 'core-js/stable'; +import { SKYFLOW_FRAME_CONTROLLER } from './core/constants'; +import SkyflowFrameController from './core/internal/skyflow-frame/skyflow-frame-controller'; +import logs from './utils/logs'; +import { parameterizedString } from './utils/logs-helper'; +import { getValueFromName } from './utils/helpers'; + +(function init(root: any) { + try { + const frameName = root.name; + const frameType = getValueFromName(frameName, 0); + const frameId = getValueFromName(frameName, 1); + console.log('frameType 5', frameType); + + if (frameType === SKYFLOW_FRAME_CONTROLLER) { + SkyflowFrameController.init(frameId); + } else { + throw new Error('Invalid frame type for controller bundle'); + } + } catch (e) { + throw new Error(parameterizedString(logs.errorLogs.INVALID_IFRAME)); + } +}(window)); diff --git a/src/index-internal-reveal.ts b/src/index-internal-reveal.ts new file mode 100644 index 00000000..c91ddd4f --- /dev/null +++ b/src/index-internal-reveal.ts @@ -0,0 +1,40 @@ +/* +Copyright (c) 2022 Skyflow, Inc. +*/ +import 'core-js/stable'; +import RevealFrame from './core/internal/reveal/reveal-frame'; +import { FRAME_REVEAL } from './core/constants'; +import logs from './utils/logs'; +import { MessageType, LogLevel } from './utils/common'; +import { + printLog, + parameterizedString, +} from './utils/logs-helper'; +import { getAtobValue, getValueFromName } from './utils/helpers'; + +(function init(root: any) { + try { + const frameName = root.name; + const frameType = getValueFromName(frameName, 0); + const frameId = getValueFromName(frameName, 1); + console.log('frameType 6', frameType); + + if (frameType === FRAME_REVEAL) { + const logLevel = getValueFromName(frameName, 3) || LogLevel.ERROR; + printLog( + parameterizedString( + logs.infoLogs.REVEAL_ELEMENT_START, + 'index-internal-reveal', + getAtobValue(frameId), + ), + MessageType.LOG, + LogLevel[logLevel], + ); + RevealFrame.init(); + } else { + throw new Error('Invalid frame type for reveal bundle'); + } + } catch (e) { + throw new Error(parameterizedString(logs.errorLogs.INVALID_IFRAME)); + } +}(window)); diff --git a/src/properties.ts b/src/properties.ts index b3611fe9..bfebf425 100644 --- a/src/properties.ts +++ b/src/properties.ts @@ -2,8 +2,10 @@ Copyright (c) 2022 Skyflow, Inc. */ const properties = { - IFRAME_SECURE_SITE: `${process.env.IFRAME_SECURE_ORIGIN}/${process.env.IFRAME_SECURE_SITE}`, - IFRAME_SECURE_ORIGIN: process.env.IFRAME_SECURE_ORIGIN || '', + IFRAME_SECURE_SITE: 'http://js.skyflow.dev/', // Default monolithic + IFRAME_SECURE_ORIGIN: 'http://js.skyflow.dev', + // For split bundles in dev, the base path would be 'http://localhost:3040/' + // and getIframeSrcByType will append the specific HTML file }; export default properties; diff --git a/webpack.iframe-split.js b/webpack.iframe-split.js new file mode 100644 index 00000000..eb075a91 --- /dev/null +++ b/webpack.iframe-split.js @@ -0,0 +1,116 @@ +/* +Copyright (c) 2022 Skyflow, Inc. +*/ +const { merge } = require('webpack-merge'); +const path = require('path'); +const { CleanWebpackPlugin } = require('clean-webpack-plugin'); +const { WebpackManifestPlugin } = require('webpack-manifest-plugin'); +const terserWebpackPlugin = require('terser-webpack-plugin'); +const CompressionPlugin = require('compression-webpack-plugin'); +const HtmlWebPackPlugin = require('html-webpack-plugin'); +const common = require('./webpack.common.js'); + +const minify = { + collapseWhitespace: true, + removeComments: true, + removeRedundantAttributes: true, + removeScriptTypeAttributes: true, + removeStyleLinkTypeAttributes: true, + useShortDoctype: true, + minifyCSS: true, + minifyJS: true, +}; + +module.exports = () => merge(common, { + mode: 'production', + + entry: { + 'collect': [ + path.resolve(__dirname, 'src/index-internal-collect.ts'), + ], + 'reveal': [ + path.resolve(__dirname, 'src/index-internal-reveal.ts'), + ], + 'composable-reveal': [ + path.resolve(__dirname, 'src/index-internal-composable-reveal.ts'), + ], + 'controller': [ + path.resolve(__dirname, 'src/index-internal-controller.ts'), + ], + }, + + output: { + filename: '[name].js', + path: path.resolve(__dirname, 'dist/v1/elements'), + }, + + optimization: { + runtimeChunk: false, + minimizer: [new terserWebpackPlugin()], + splitChunks: { + cacheGroups: { + // Common vendor code shared across all bundles + vendor: { + test: /[\\/]node_modules[\\/]/, + name: 'vendor', + chunks: 'all', + priority: 10, + }, + // Common internal code + common: { + minChunks: 2, + name: 'common', + chunks: 'all', + priority: 5, + reuseExistingChunk: true, + enforce: true, + }, + }, + }, + }, + + module: { + rules: [], + }, + + plugins: [ + // HTML file for collect elements + new HtmlWebPackPlugin({ + filename: 'collect.html', + template: 'assets/iframe.html', + chunks: ['vendor', 'common', 'collect'], + inject: 'head', + minify, + }), + // HTML file for reveal elements + new HtmlWebPackPlugin({ + filename: 'reveal.html', + template: 'assets/iframe.html', + chunks: ['vendor', 'common', 'reveal'], + inject: 'head', + minify, + }), + // HTML file for composable reveal elements + new HtmlWebPackPlugin({ + filename: 'composable-reveal.html', + template: 'assets/iframe.html', + chunks: ['vendor', 'common', 'composable-reveal'], + inject: 'head', + minify, + }), + // HTML file for controller frame + new HtmlWebPackPlugin({ + filename: 'controller.html', + template: 'assets/iframe.html', + chunks: ['vendor', 'common', 'controller'], + inject: 'head', + minify, + }), + new CleanWebpackPlugin({ + verbose: true, + dry: false, + }), + new WebpackManifestPlugin(), + new CompressionPlugin(), + ], +}); From 55efb2a5f422628881a64be2ba6fcbbd864bab45 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Tue, 25 Nov 2025 14:46:16 +0000 Subject: [PATCH 09/20] [AUTOMATED] Release - 2.6.0-dev.53d5319 --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 31c5a7a7..48e3ee59 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.6.0-dev.c9a6c63", + "version": "2.6.0-dev.53d5319", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", @@ -87,4 +87,4 @@ "webpack-manifest-plugin": "^4.0.2", "webpack-merge": "^5.8.0" } -} \ No newline at end of file +} From 28eea796305a79c52224b1bf493e9e954e9f2452 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Tue, 25 Nov 2025 20:32:21 +0530 Subject: [PATCH 10/20] SK-2408 test the different files for element type --- .github/workflows/common-release.yml | 2 +- src/properties.ts | 6 ++---- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/.github/workflows/common-release.yml b/.github/workflows/common-release.yml index eae5e322..c5c0c822 100644 --- a/.github/workflows/common-release.yml +++ b/.github/workflows/common-release.yml @@ -131,7 +131,7 @@ jobs: npm run build-node-sdk env: IFRAME_SECURE_ORIGIN: ${{ secrets.IFRAME_SECURE_ORIGIN }} - IFRAME_SECURE_SITE: "v${{ env.RELEASE_VERSION }}/${{ secrets.IFRAME_SECURE_SITE }}" + IFRAME_SECURE_SITE: "v${{ env.RELEASE_VERSION }}/elements" - name: Publish SDK run: | diff --git a/src/properties.ts b/src/properties.ts index bfebf425..b3611fe9 100644 --- a/src/properties.ts +++ b/src/properties.ts @@ -2,10 +2,8 @@ Copyright (c) 2022 Skyflow, Inc. */ const properties = { - IFRAME_SECURE_SITE: 'http://js.skyflow.dev/', // Default monolithic - IFRAME_SECURE_ORIGIN: 'http://js.skyflow.dev', - // For split bundles in dev, the base path would be 'http://localhost:3040/' - // and getIframeSrcByType will append the specific HTML file + IFRAME_SECURE_SITE: `${process.env.IFRAME_SECURE_ORIGIN}/${process.env.IFRAME_SECURE_SITE}`, + IFRAME_SECURE_ORIGIN: process.env.IFRAME_SECURE_ORIGIN || '', }; export default properties; From 61fe244209dbb887811caeffd8bd24fec05872b0 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Tue, 25 Nov 2025 15:03:11 +0000 Subject: [PATCH 11/20] [AUTOMATED] Release - 2.6.0-dev.28eea79 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 48e3ee59..37ad7267 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.6.0-dev.53d5319", + "version": "2.6.0-dev.28eea79", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", From e35dec0a5beefe0dab49ebc5379766894f0f1eaa Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Tue, 25 Nov 2025 20:40:02 +0530 Subject: [PATCH 12/20] SK-2408 test the different files for element type --- src/properties.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/properties.ts b/src/properties.ts index b3611fe9..6fb296f0 100644 --- a/src/properties.ts +++ b/src/properties.ts @@ -2,7 +2,7 @@ Copyright (c) 2022 Skyflow, Inc. */ const properties = { - IFRAME_SECURE_SITE: `${process.env.IFRAME_SECURE_ORIGIN}/${process.env.IFRAME_SECURE_SITE}`, + IFRAME_SECURE_SITE: process.env.IFRAME_SECURE_ORIGIN, IFRAME_SECURE_ORIGIN: process.env.IFRAME_SECURE_ORIGIN || '', }; From 61002c1780c88c9b1a377eada46a9a7921493d01 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Tue, 25 Nov 2025 15:10:43 +0000 Subject: [PATCH 13/20] [AUTOMATED] Release - 2.6.0-dev.e35dec0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 37ad7267..60693e73 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.6.0-dev.28eea79", + "version": "2.6.0-dev.e35dec0", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", From b12e1bdf1e1d37f031173224956aec4bff731514 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Tue, 25 Nov 2025 20:44:26 +0530 Subject: [PATCH 14/20] SK-2408 test the different files for element type --- src/properties.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/properties.ts b/src/properties.ts index 6fb296f0..b3611fe9 100644 --- a/src/properties.ts +++ b/src/properties.ts @@ -2,7 +2,7 @@ Copyright (c) 2022 Skyflow, Inc. */ const properties = { - IFRAME_SECURE_SITE: process.env.IFRAME_SECURE_ORIGIN, + IFRAME_SECURE_SITE: `${process.env.IFRAME_SECURE_ORIGIN}/${process.env.IFRAME_SECURE_SITE}`, IFRAME_SECURE_ORIGIN: process.env.IFRAME_SECURE_ORIGIN || '', }; From 9d6afbc22c42f58c09590abd5948bcdc019d49a4 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Tue, 25 Nov 2025 15:15:15 +0000 Subject: [PATCH 15/20] [AUTOMATED] Release - 2.6.0-dev.b12e1bd --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 60693e73..1c2b7d53 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.6.0-dev.e35dec0", + "version": "2.6.0-dev.b12e1bd", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", From dd627268cb928ebfd297a1c7ed6d562e83a75738 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Tue, 25 Nov 2025 20:53:36 +0530 Subject: [PATCH 16/20] SK-2408 test the different files for element type --- .github/workflows/common-release.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/common-release.yml b/.github/workflows/common-release.yml index c5c0c822..c7e8852c 100644 --- a/.github/workflows/common-release.yml +++ b/.github/workflows/common-release.yml @@ -98,7 +98,7 @@ jobs: IFRAME_SECURE_SITE: "v${{ env.RELEASE_VERSION }}/elements" - name: Build Iframe - run: npm run build-iframe + run: npm run build-iframe-split env: IFRAME_SECURE_ORIGIN: ${{ secrets.IFRAME_SECURE_ORIGIN }} IFRAME_SECURE_SITE: "v${{ env.RELEASE_VERSION }}/elements" From 6c8941f2d0d012bb5e059d4849bc88891f93eb38 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Tue, 25 Nov 2025 15:24:26 +0000 Subject: [PATCH 17/20] [AUTOMATED] Release - 2.6.0-dev.dd62726 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1c2b7d53..60ad402d 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.6.0-dev.b12e1bd", + "version": "2.6.0-dev.dd62726", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js", From c15b6654134eda62b3ebf642268af52c1af462e7 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Tue, 25 Nov 2025 21:11:26 +0530 Subject: [PATCH 18/20] SK-2408 test the different files for element type --- .../collect/compose-collect-container.ts | 2 +- webpack.iframe-split.js | 29 ++++--------------- 2 files changed, 6 insertions(+), 25 deletions(-) diff --git a/src/core/external/collect/compose-collect-container.ts b/src/core/external/collect/compose-collect-container.ts index 50305d21..a0fddab9 100644 --- a/src/core/external/collect/compose-collect-container.ts +++ b/src/core/external/collect/compose-collect-container.ts @@ -7,7 +7,7 @@ import bus from 'framebus'; import sum from 'lodash/sum'; import EventEmitter from '../../../event-emitter'; import iframer, { - setAttributes, getIframeSrc, setStyles, getIframeSrcByType, + setAttributes, getIframeSrc, setStyles, getIframeSrcByType, } from '../../../iframe-libs/iframer'; import deepClone from '../../../libs/deep-clone'; import { diff --git a/webpack.iframe-split.js b/webpack.iframe-split.js index eb075a91..756d99a8 100644 --- a/webpack.iframe-split.js +++ b/webpack.iframe-split.js @@ -47,26 +47,7 @@ module.exports = () => merge(common, { optimization: { runtimeChunk: false, minimizer: [new terserWebpackPlugin()], - splitChunks: { - cacheGroups: { - // Common vendor code shared across all bundles - vendor: { - test: /[\\/]node_modules[\\/]/, - name: 'vendor', - chunks: 'all', - priority: 10, - }, - // Common internal code - common: { - minChunks: 2, - name: 'common', - chunks: 'all', - priority: 5, - reuseExistingChunk: true, - enforce: true, - }, - }, - }, + // splitChunks disabled - all dependencies bundled into each file }, module: { @@ -78,7 +59,7 @@ module.exports = () => merge(common, { new HtmlWebPackPlugin({ filename: 'collect.html', template: 'assets/iframe.html', - chunks: ['vendor', 'common', 'collect'], + chunks: ['collect'], inject: 'head', minify, }), @@ -86,7 +67,7 @@ module.exports = () => merge(common, { new HtmlWebPackPlugin({ filename: 'reveal.html', template: 'assets/iframe.html', - chunks: ['vendor', 'common', 'reveal'], + chunks: ['reveal'], inject: 'head', minify, }), @@ -94,7 +75,7 @@ module.exports = () => merge(common, { new HtmlWebPackPlugin({ filename: 'composable-reveal.html', template: 'assets/iframe.html', - chunks: ['vendor', 'common', 'composable-reveal'], + chunks: ['composable-reveal'], inject: 'head', minify, }), @@ -102,7 +83,7 @@ module.exports = () => merge(common, { new HtmlWebPackPlugin({ filename: 'controller.html', template: 'assets/iframe.html', - chunks: ['vendor', 'common', 'controller'], + chunks: ['controller'], inject: 'head', minify, }), From 9975810b7c54c4083b4382b01a130fa9e6b8b937 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Wed, 26 Nov 2025 14:52:57 +0530 Subject: [PATCH 19/20] SK-2414 dymanic build based on container type --- src/iframe-libs/iframer.ts | 41 +++++--------- webpack-plugins/dynamic-bundle-loader.js | 71 ++++++++++++++++++++++++ webpack.iframe-split.js | 41 +++++--------- 3 files changed, 100 insertions(+), 53 deletions(-) create mode 100644 webpack-plugins/dynamic-bundle-loader.js diff --git a/src/iframe-libs/iframer.ts b/src/iframe-libs/iframer.ts index ef51496d..3acd2255 100644 --- a/src/iframe-libs/iframer.ts +++ b/src/iframe-libs/iframer.ts @@ -3,10 +3,6 @@ Copyright (c) 2022 Skyflow, Inc. */ import { IFRAME_DEFAULT_STYLES, - FRAME_ELEMENT, - FRAME_REVEAL, - COMPOSABLE_REVEAL, - SKYFLOW_FRAME_CONTROLLER, } from '../core/constants'; import properties from '../properties'; @@ -49,36 +45,29 @@ export default (options = {}) => { }; /** - * Get iframe source URL based on frame type - * @param frameType - Type of frame (FRAME_ELEMENT, FRAME_REVEAL, etc.) - * @returns URL to the appropriate iframe HTML file + * Get iframe source URL - now returns single iframe.html for all types + * The iframe.html will dynamically load the appropriate bundle based on frame name + * @param frameType - Type of frame (not used anymore, kept for backwards compatibility) + * @returns URL to iframe.html (single entry point for all frame types) */ -export const getIframeSrcByType = (frameType: string): string => { +export const getIframeSrcByType = (_frameType: string): string => { const secureSite = properties.IFRAME_SECURE_SITE; + // keep param for backwards compatibility + if (_frameType) { /* intentionally unused */ } - console.log('secureSite frameType', secureSite); + // debug: secureSite and frameType - // If IFRAME_SECURE_SITE ends with .html, use monolithic bundle (backwards compatible) - // This happens in dev mode with npm run dev (not npm run dev:split) + // If IFRAME_SECURE_SITE ends with .html, return as-is (monolithic or dynamic loader) if (secureSite.endsWith('.html')) { - return secureSite; // Use monolithic iframe.html + return secureSite; } - // Otherwise, use split bundles (production or npm run dev:split) - const baseUrl = secureSite.replace(/\/$/, ''); // Remove trailing slash if present + // Append iframe.html to base URL + const baseUrl = secureSite.replace(/\/$/, ''); // Remove trailing slash + return `${baseUrl}/iframe.html`; - switch (frameType) { - case FRAME_ELEMENT: - return `${baseUrl}/collect.html`; - case FRAME_REVEAL: - return `${baseUrl}/reveal.html`; - case COMPOSABLE_REVEAL: - return `${baseUrl}/composable-reveal.html`; - case SKYFLOW_FRAME_CONTROLLER: - return `${baseUrl}/controller.html`; - default: - return secureSite; // Fallback to default - } + // Note: iframe.html will read window.name to determine which bundle to load + // This enables 1-to-many mapping: single HTML → multiple bundles }; export const getIframeSrc = () => properties.IFRAME_SECURE_SITE; diff --git a/webpack-plugins/dynamic-bundle-loader.js b/webpack-plugins/dynamic-bundle-loader.js new file mode 100644 index 00000000..19975798 --- /dev/null +++ b/webpack-plugins/dynamic-bundle-loader.js @@ -0,0 +1,71 @@ +class DynamicBundleLoaderPlugin { + constructor(options = {}) { + this.bundleMap = options.bundleMap || { + 'element': 'collect.js', + 'reveal': 'reveal.js', + 'reveal-composable': 'composable-reveal.js', + 'skyflow_controller': 'controller.js' + }; + } + + apply(compiler) { + compiler.hooks.compilation.tap('DynamicBundleLoaderPlugin', (compilation) => { + // Hook into HtmlWebpackPlugin to modify HTML before emit + const HtmlWebpackPlugin = compiler.options.plugins + .map(plugin => plugin.constructor) + .find(constructor => constructor && constructor.name === 'HtmlWebpackPlugin'); + + if (HtmlWebpackPlugin) { + HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync( + 'DynamicBundleLoaderPlugin', + (data, cb) => { + // Only inject into iframe.html + if (data.outputName === 'iframe.html') { + const loaderScript = this.generateLoaderScript(); + // Inject script before closing tag + data.html = data.html.replace('', `${loaderScript}`); + } + cb(null, data); + } + ); + } + }); + } + + generateLoaderScript() { + const bundleMapJson = JSON.stringify(this.bundleMap); + + return ``; + } +} + +module.exports = DynamicBundleLoaderPlugin; diff --git a/webpack.iframe-split.js b/webpack.iframe-split.js index 756d99a8..5e6d36a3 100644 --- a/webpack.iframe-split.js +++ b/webpack.iframe-split.js @@ -8,6 +8,7 @@ const { WebpackManifestPlugin } = require('webpack-manifest-plugin'); const terserWebpackPlugin = require('terser-webpack-plugin'); const CompressionPlugin = require('compression-webpack-plugin'); const HtmlWebPackPlugin = require('html-webpack-plugin'); +const DynamicBundleLoaderPlugin = require('./webpack-plugins/dynamic-bundle-loader'); const common = require('./webpack.common.js'); const minify = { @@ -55,37 +56,23 @@ module.exports = () => merge(common, { }, plugins: [ - // HTML file for collect elements + // Single HTML file that dynamically loads the correct JS bundle + // based on container type from window.name new HtmlWebPackPlugin({ - filename: 'collect.html', + filename: 'iframe.html', template: 'assets/iframe.html', - chunks: ['collect'], - inject: 'head', + chunks: [], // No chunks - we'll load JS dynamically via plugin + inject: false, // Don't auto-inject scripts minify, }), - // HTML file for reveal elements - new HtmlWebPackPlugin({ - filename: 'reveal.html', - template: 'assets/iframe.html', - chunks: ['reveal'], - inject: 'head', - minify, - }), - // HTML file for composable reveal elements - new HtmlWebPackPlugin({ - filename: 'composable-reveal.html', - template: 'assets/iframe.html', - chunks: ['composable-reveal'], - inject: 'head', - minify, - }), - // HTML file for controller frame - new HtmlWebPackPlugin({ - filename: 'controller.html', - template: 'assets/iframe.html', - chunks: ['controller'], - inject: 'head', - minify, + // Inject dynamic bundle loader script at build time + new DynamicBundleLoaderPlugin({ + bundleMap: { + 'element': 'collect.js', + 'reveal': 'reveal.js', + 'reveal-composable': 'composable-reveal.js', + 'skyflow_controller': 'controller.js' + } }), new CleanWebpackPlugin({ verbose: true, From 6028c55d2a4fb9b7c393a08cf8560f939f892f80 Mon Sep 17 00:00:00 2001 From: skyflow-bharti Date: Wed, 26 Nov 2025 09:27:41 +0000 Subject: [PATCH 20/20] [AUTOMATED] Release - 2.6.0-dev.9975810 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 60ad402d..dee50ae6 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "skyflow-js", "preferGlobal": true, "analyze": false, - "version": "2.6.0-dev.dd62726", + "version": "2.6.0-dev.9975810", "author": "Skyflow", "description": "Skyflow JavaScript SDK", "homepage": "https://github.com/skyflowapi/skyflow-js",