From b9556e487f32a3d8c03f9871041ded8ebc026528 Mon Sep 17 00:00:00 2001 From: Prashant Pandey Date: Mon, 18 Mar 2024 11:39:51 +0530 Subject: [PATCH 1/4] ID:FPCO-30358;DONE:50;HOURS:32 --- src/helper/build.ts | 46 ++++++++++++++++++++++++++++++++ src/helper/theme.react.config.ts | 10 ++++--- src/lib/Theme.ts | 25 +++++++++++++++-- 3 files changed, 75 insertions(+), 6 deletions(-) diff --git a/src/helper/build.ts b/src/helper/build.ts index c2c56877..0255b699 100755 --- a/src/helper/build.ts +++ b/src/helper/build.ts @@ -6,8 +6,25 @@ import webpack from 'webpack'; import createBaseWebpackConfig from '../helper/theme.react.config'; import fs from 'fs'; import rimraf from 'rimraf'; +import Logger from '../lib/Logger'; export const THEME_ENTRY_FILE = path.join('theme', 'index.js'); +export const CDN_ENTRY_FILE = path.join('theme', 'cdn_index.js'); + +export const dynamicCDNScript = ({ namespaceNormalizedPath, assetNormalizedBasePath }) => { + return `function getCDNurl() { + \n let cdnUrl; + \n try{ + \n if(fynd_platform_cdn) { + \n cdnUrl = fynd_platform_cdn + '${namespaceNormalizedPath}' + \n } else { + \n throw new Error("undefiend variable")} + \n } catch(error){ + \n cdnUrl = '${assetNormalizedBasePath}'} + \n return cdnUrl; + \n } + \n __webpack_public_path__ = getCDNurl()` +} export function build({ buildFolder, @@ -75,6 +92,7 @@ interface DevReactBuild { imageCdnUrl?: string; localThemePort?: string; isHMREnabled: boolean; + namespace?: string; } export function devBuild({ buildFolder, imageCdnUrl, isProd }: DevBuild) { @@ -129,6 +147,7 @@ export async function devReactBuild({ localThemePort, imageCdnUrl, isHMREnabled, + namespace }: DevReactBuild) { const buildPath = path.join(process.cwd(), buildFolder); try { @@ -159,10 +178,37 @@ export async function devReactBuild({ ctx, webpackConfigFromTheme, ); + const assetNormalizedBasePath = + assetBasePath[assetBasePath.length - 1] === '/' + ? assetBasePath + : assetBasePath + '/'; return new Promise((resolve, reject) => { + + if(!runOnLocal) { + fs.stat(CDN_ENTRY_FILE, function (err, stat) { + if (err == null) { + //deleting file if exist + fs.unlink(CDN_ENTRY_FILE, function (err) { + if (err) return console.log(err); + Logger.debug(' \n Existing file deleted successfully'); + }); + } + fs.appendFileSync(CDN_ENTRY_FILE, dynamicCDNScript({ namespaceNormalizedPath: namespace, assetNormalizedBasePath })); + + }); + } + webpack(baseWebpackConfig, (err, stats) => { console.log(err); console.log(stats.toString()); + + if(!runOnLocal) { + fs.unlink(CDN_ENTRY_FILE, function (err) { + if (err) return console.log(err); + Logger.debug(' \n file deleted successfully'); + }); + } + if (err || stats.hasErrors()) { reject(); } diff --git a/src/helper/theme.react.config.ts b/src/helper/theme.react.config.ts index aebb8b0d..906f34ee 100644 --- a/src/helper/theme.react.config.ts +++ b/src/helper/theme.react.config.ts @@ -5,8 +5,8 @@ import webpack, { Configuration } from 'webpack'; import fs from 'fs'; import { mergeWithRules, merge } from 'webpack-merge'; import { getLocalBaseUrl } from './serve.utils'; +import { CDN_ENTRY_FILE } from './build'; const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); - const context = process.cwd(); // const themeConfigPath = path.join(context, 'webpack.config.js'); // const isWebpackExtendedInTheme = fs.existsSync(themeConfigPath); @@ -47,7 +47,9 @@ const baseConfig = (ctx) => { require.resolve('webpack-hot-middleware/client'), path.resolve(context, 'theme/index.jsx'), ] - : [path.resolve(context, 'theme/index.jsx')], + : [ + path.resolve(context, CDN_ENTRY_FILE), + path.resolve(context, 'theme/index.jsx')], }, devtool: isLocal ? 'source-map' : false, optimization: { @@ -198,8 +200,8 @@ const baseConfig = (ctx) => { output: { path: buildPath, filename: isLocal - ? 'themeBundle.umd.js' - : 'themeBundle.[contenthash].umd.js', + ? `themeBundle.umd.js` + : `themeBundle.[contenthash].umd.js`, publicPath: isLocal ? localBasePath : assetNormalizedBasePath, chunkFilename: isLocal ? '[name].themeBundle.umd.js' diff --git a/src/lib/Theme.ts b/src/lib/Theme.ts index 55123c24..a846cd65 100644 --- a/src/lib/Theme.ts +++ b/src/lib/Theme.ts @@ -839,7 +839,7 @@ export default class Theme { const imageCdnUrl = await Theme.getImageCdnBaseUrl(); const assetBasePath = await Theme.getAssetCdnBaseUrl(); - + const namespace = await Theme.getAssetCdnNamespace() Logger.info('Building Theme for Production...'); await devReactBuild({ buildFolder: Theme.BUILD_FOLDER, @@ -847,11 +847,11 @@ export default class Theme { assetBasePath, imageCdnUrl, isHMREnabled: false, + namespace }); Logger.info('Uploading theme assets/images'); await Theme.assetsImageUploader(); - Logger.info('Uploading theme assets/fonts'); await Theme.assetsFontsUploader(); @@ -1584,6 +1584,25 @@ export default class Theme { settingLoader, ); } + private static getAssetCdnNamespace = async () => { + try { + let startData = { + file_name: 'test.jpg', + content_type: 'image/jpeg', + size: '1', + }; + let startAssetData = ( + await UploadService.startUpload(startData, 'application-theme-images') + ).data; + const url_path = startAssetData.cdn.absolute_url; + const filename = startAssetData.file_name; + const absolute_url = url_path.replace(`${filename}`, "") + return new URL(absolute_url).pathname + } catch (err) { + console.log(err); + throw new CommandError(`Failed in getting image CDN base url`, err.code); + } + }; private static assetsImageUploader = async () => { try { @@ -2605,6 +2624,7 @@ export default class Theme { const imageCdnUrl = await Theme.getImageCdnBaseUrl(); const assetCdnUrl = await Theme.getAssetCdnBaseUrl(); + const namespace = await Theme.getAssetCdnNamespace(); Logger.info('Building Assets for React Theme'); await devReactBuild({ @@ -2613,6 +2633,7 @@ export default class Theme { assetBasePath: assetCdnUrl, imageCdnUrl, isHMREnabled: false, + namespace }); await Theme.createReactSectionsIndexFile(); From 5559127c5fdf532ec7bbbdff299fc20cad3e8ee6 Mon Sep 17 00:00:00 2001 From: Prashant Pandey Date: Mon, 18 Mar 2024 12:40:48 +0530 Subject: [PATCH 2/4] ID: FPCO-30358;DONE:50,Hours:32; Dynamic CDN namesapce removal --- src/helper/build.ts | 8 +++----- src/lib/Theme.ts | 24 +----------------------- 2 files changed, 4 insertions(+), 28 deletions(-) diff --git a/src/helper/build.ts b/src/helper/build.ts index 0255b699..f586f8e2 100755 --- a/src/helper/build.ts +++ b/src/helper/build.ts @@ -11,12 +11,12 @@ import Logger from '../lib/Logger'; export const THEME_ENTRY_FILE = path.join('theme', 'index.js'); export const CDN_ENTRY_FILE = path.join('theme', 'cdn_index.js'); -export const dynamicCDNScript = ({ namespaceNormalizedPath, assetNormalizedBasePath }) => { +export const dynamicCDNScript = ({ assetNormalizedBasePath }) => { return `function getCDNurl() { \n let cdnUrl; \n try{ \n if(fynd_platform_cdn) { - \n cdnUrl = fynd_platform_cdn + '${namespaceNormalizedPath}' + \n cdnUrl = fynd_platform_cdn \n } else { \n throw new Error("undefiend variable")} \n } catch(error){ @@ -92,7 +92,6 @@ interface DevReactBuild { imageCdnUrl?: string; localThemePort?: string; isHMREnabled: boolean; - namespace?: string; } export function devBuild({ buildFolder, imageCdnUrl, isProd }: DevBuild) { @@ -147,7 +146,6 @@ export async function devReactBuild({ localThemePort, imageCdnUrl, isHMREnabled, - namespace }: DevReactBuild) { const buildPath = path.join(process.cwd(), buildFolder); try { @@ -193,7 +191,7 @@ export async function devReactBuild({ Logger.debug(' \n Existing file deleted successfully'); }); } - fs.appendFileSync(CDN_ENTRY_FILE, dynamicCDNScript({ namespaceNormalizedPath: namespace, assetNormalizedBasePath })); + fs.appendFileSync(CDN_ENTRY_FILE, dynamicCDNScript({assetNormalizedBasePath })); }); } diff --git a/src/lib/Theme.ts b/src/lib/Theme.ts index a846cd65..295c8efb 100644 --- a/src/lib/Theme.ts +++ b/src/lib/Theme.ts @@ -839,7 +839,6 @@ export default class Theme { const imageCdnUrl = await Theme.getImageCdnBaseUrl(); const assetBasePath = await Theme.getAssetCdnBaseUrl(); - const namespace = await Theme.getAssetCdnNamespace() Logger.info('Building Theme for Production...'); await devReactBuild({ buildFolder: Theme.BUILD_FOLDER, @@ -847,7 +846,6 @@ export default class Theme { assetBasePath, imageCdnUrl, isHMREnabled: false, - namespace }); Logger.info('Uploading theme assets/images'); @@ -1584,25 +1582,7 @@ export default class Theme { settingLoader, ); } - private static getAssetCdnNamespace = async () => { - try { - let startData = { - file_name: 'test.jpg', - content_type: 'image/jpeg', - size: '1', - }; - let startAssetData = ( - await UploadService.startUpload(startData, 'application-theme-images') - ).data; - const url_path = startAssetData.cdn.absolute_url; - const filename = startAssetData.file_name; - const absolute_url = url_path.replace(`${filename}`, "") - return new URL(absolute_url).pathname - } catch (err) { - console.log(err); - throw new CommandError(`Failed in getting image CDN base url`, err.code); - } - }; + private static assetsImageUploader = async () => { try { @@ -2624,7 +2604,6 @@ export default class Theme { const imageCdnUrl = await Theme.getImageCdnBaseUrl(); const assetCdnUrl = await Theme.getAssetCdnBaseUrl(); - const namespace = await Theme.getAssetCdnNamespace(); Logger.info('Building Assets for React Theme'); await devReactBuild({ @@ -2633,7 +2612,6 @@ export default class Theme { assetBasePath: assetCdnUrl, imageCdnUrl, isHMREnabled: false, - namespace }); await Theme.createReactSectionsIndexFile(); From 637f4bf5cc1344046d5a20d568fd240209c2aa5c Mon Sep 17 00:00:00 2001 From: Prashant Pandey Date: Mon, 18 Mar 2024 13:13:10 +0530 Subject: [PATCH 3/4] ID:FPCO-30358;DONE:50;HOURS:32. CDN_ENTRY_FILE path change --- src/helper/build.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/helper/build.ts b/src/helper/build.ts index f586f8e2..c98478f9 100755 --- a/src/helper/build.ts +++ b/src/helper/build.ts @@ -9,7 +9,7 @@ import rimraf from 'rimraf'; import Logger from '../lib/Logger'; export const THEME_ENTRY_FILE = path.join('theme', 'index.js'); -export const CDN_ENTRY_FILE = path.join('theme', 'cdn_index.js'); +export const CDN_ENTRY_FILE = path.join('.fdk', 'cdn_index.js'); export const dynamicCDNScript = ({ assetNormalizedBasePath }) => { return `function getCDNurl() { From 15becaa4814e42c0444c04c35507eb62f9d2ddf5 Mon Sep 17 00:00:00 2001 From: Prashant Pandey Date: Mon, 18 Mar 2024 15:34:45 +0530 Subject: [PATCH 4/4] ID:FPCO-30358;DONE:100;HOURS:38;dynamic cdn support added for vue theme --- src/helper/build.ts | 37 +++++++++++++++++++++++++++++-------- src/lib/Theme.ts | 4 ++-- 2 files changed, 31 insertions(+), 10 deletions(-) diff --git a/src/helper/build.ts b/src/helper/build.ts index c98478f9..8d416953 100755 --- a/src/helper/build.ts +++ b/src/helper/build.ts @@ -8,22 +8,28 @@ import fs from 'fs'; import rimraf from 'rimraf'; import Logger from '../lib/Logger'; -export const THEME_ENTRY_FILE = path.join('theme', 'index.js'); +export const VUE_THEME_ENTRY_FILE = path.join("..",'theme', 'index.js'); +export const DEV_VUE_THEME_ENTRY_FILE = path.join('theme', 'index.js'); + export const CDN_ENTRY_FILE = path.join('.fdk', 'cdn_index.js'); -export const dynamicCDNScript = ({ assetNormalizedBasePath }) => { +export const dynamicCDNScript = ({assetNormalizedBasePath,vueJs }) => { return `function getCDNurl() { \n let cdnUrl; \n try{ \n if(fynd_platform_cdn) { - \n cdnUrl = fynd_platform_cdn + \n cdnUrl = fynd_platform_cdn \n } else { \n throw new Error("undefiend variable")} \n } catch(error){ \n cdnUrl = '${assetNormalizedBasePath}'} \n return cdnUrl; \n } - \n __webpack_public_path__ = getCDNurl()` + \n __webpack_public_path__ = getCDNurl() ${vueJs ? `\n + import bundle from '${VUE_THEME_ENTRY_FILE}' + \n export default bundle; + ` + : ''}` } export function build({ @@ -40,13 +46,24 @@ export function build({ 'bin', 'vue-cli-service.js', ); - const spinner = new Spinner('Building assets using vue-cli-service'); + + fs.stat(CDN_ENTRY_FILE, function (err, stat) { + if (err == null) { + //deleting file if exist + fs.unlink(CDN_ENTRY_FILE, function (err) { + if (err) return console.log(err); + Logger.debug(' \n Existing file deleted successfully'); + }); + } + fs.appendFileSync(CDN_ENTRY_FILE, dynamicCDNScript({ assetNormalizedBasePath:(imageCdnUrl|| assetCdnUrl),vueJs: true })); + }); + const spinner = new Spinner('Building assets using vue-cli-service'); return new Promise((resolve, reject) => { spinner.start(); const isNodeVersionIsGreaterThan18 = +process.version.split('.')[0].slice(1) >= 18; let b = exec( - `node ${VUE_CLI_PATH} build --target lib --dest ${buildFolder} --name themeBundle --filename ${assetHash}_themeBundle ${THEME_ENTRY_FILE}`, + `node ${VUE_CLI_PATH} build --target lib --dest ${buildFolder} --name themeBundle --filename ${assetHash}_themeBundle ${CDN_ENTRY_FILE}`, { cwd: process.cwd(), env: { @@ -70,6 +87,10 @@ export function build({ b.stdout.pipe(process.stdout); b.stderr.pipe(process.stderr); b.on('exit', function (code) { + fs.unlink(CDN_ENTRY_FILE, function (err) { + if (err) return console.log(err); + Logger.debug(' \n Existing file deleted successfully'); + }); if (!code) { spinner.succeed(); return resolve(true); @@ -108,7 +129,7 @@ export function devBuild({ buildFolder, imageCdnUrl, isProd }: DevBuild) { return new Promise((resolve, reject) => { let b = exec( - `node ${VUE_CLI_PATH} build --target lib --dest ${buildFolder} --name themeBundle ${THEME_ENTRY_FILE}`, + `node ${VUE_CLI_PATH} build --target lib --dest ${buildFolder} --name themeBundle ${DEV_VUE_THEME_ENTRY_FILE}`, { cwd: process.cwd(), env: { @@ -191,7 +212,7 @@ export async function devReactBuild({ Logger.debug(' \n Existing file deleted successfully'); }); } - fs.appendFileSync(CDN_ENTRY_FILE, dynamicCDNScript({assetNormalizedBasePath })); + fs.appendFileSync(CDN_ENTRY_FILE, dynamicCDNScript({assetNormalizedBasePath, vueJs: false })); }); } diff --git a/src/lib/Theme.ts b/src/lib/Theme.ts index 295c8efb..2cfab298 100644 --- a/src/lib/Theme.ts +++ b/src/lib/Theme.ts @@ -32,7 +32,7 @@ import ThemeService from './api/services/theme.service'; import UploadService from './api/services/upload.service'; import ExtensionService from './api/services/extension.service'; import { - THEME_ENTRY_FILE, + DEV_VUE_THEME_ENTRY_FILE, build, devBuild, devReactBuild, @@ -766,7 +766,7 @@ export default class Theme { spaces: 2, }, ); - if (!fs.existsSync(path.join(process.cwd(), THEME_ENTRY_FILE))) { + if (!fs.existsSync(path.join(process.cwd(), DEV_VUE_THEME_ENTRY_FILE))) { Logger.info('Restructuring folder structure'); let restructureSpinner = new Spinner( 'Restructuring folder structure',