From e44a754ce097e4ca8230a1cbe07947acc719d796 Mon Sep 17 00:00:00 2001 From: Alexandra Bri Date: Mon, 17 Jun 2024 15:33:59 +0300 Subject: [PATCH 1/6] [Fix] Debug hotjar --- src/components/itemBrowser/ItemBrowser.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/itemBrowser/ItemBrowser.tsx b/src/components/itemBrowser/ItemBrowser.tsx index 73c23cee..9eb047d0 100644 --- a/src/components/itemBrowser/ItemBrowser.tsx +++ b/src/components/itemBrowser/ItemBrowser.tsx @@ -53,13 +53,6 @@ type ItemBrowserProps = { const SKELETONS = [...Array.from(Array(10).keys())]; -const getPreviewThumbnail = (type: PreviewType, path?: string): string | undefined => { - if (type === PreviewType.COLLECTION) - return 'https://cdnepgrafxstudioprd.azureedge.net/shared/assets/folder-padded.png'; - - return path; -}; - function ItemBrowser< T extends { id: string; @@ -94,6 +87,13 @@ function ItemBrowser< } = useVariablePanelContext(); const isMobileSize = useMobileSize(); + const getPreviewThumbnail = useCallback((type: PreviewType, path?: string): string | undefined => { + if (type === PreviewType.COLLECTION) + return 'https://cdnepgrafxstudioprd.azureedge.net/shared/assets/folder-padded.png'; + + return path; + }, []); + const onScroll = () => { setNextPageToken((t) => { return { token: t.token, requested: t.token !== null }; From effed711cc34e3bb48b4794f6657a0ad2bcd1fc0 Mon Sep 17 00:00:00 2001 From: Alexandra Bri Date: Mon, 17 Jun 2024 17:52:34 +0300 Subject: [PATCH 2/6] debug hotjar --- src/components/itemBrowser/ItemBrowser.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/itemBrowser/ItemBrowser.tsx b/src/components/itemBrowser/ItemBrowser.tsx index 9eb047d0..5a47c909 100644 --- a/src/components/itemBrowser/ItemBrowser.tsx +++ b/src/components/itemBrowser/ItemBrowser.tsx @@ -390,8 +390,8 @@ function ItemBrowser< ); } -function toNavigationStack(path: string): string[] { +const toNavigationStack = (path: string): string[] => { return path.replaceAll('\\', '/').replace(/^\/+/, '').split('/'); -} +}; export default ItemBrowser; From 602c0f07635929284ddd89099422a4b4dec8772f Mon Sep 17 00:00:00 2001 From: Alexandra Bri Date: Mon, 17 Jun 2024 18:28:33 +0300 Subject: [PATCH 3/6] debug hotjar --- .eslintrc.cjs | 1 + src/components/itemBrowser/ItemBrowser.tsx | 8 +++++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index ede710a9..8aeddef1 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -68,6 +68,7 @@ module.exports = { 'no-param-reassign': ['error', { props: true, ignorePropertyModificationsFor: ['state'] }], 'no-shadow': 'off', '@typescript-eslint/no-shadow': ['error'], + 'react/function-component-definition': 0, radix: 0, }, }; diff --git a/src/components/itemBrowser/ItemBrowser.tsx b/src/components/itemBrowser/ItemBrowser.tsx index 5a47c909..69deb0be 100644 --- a/src/components/itemBrowser/ItemBrowser.tsx +++ b/src/components/itemBrowser/ItemBrowser.tsx @@ -53,7 +53,7 @@ type ItemBrowserProps = { const SKELETONS = [...Array.from(Array(10).keys())]; -function ItemBrowser< +const ItemBrowser = < T extends { id: string; type: MediaType; @@ -61,7 +61,9 @@ function ItemBrowser< relativePath: string; extension: string | null; }, ->(props: React.PropsWithChildren>) { +>( + props: React.PropsWithChildren>, +) => { const { isPanelOpen, connectorId, height, queryCall, previewCall, onSelect, convertToPreviewType } = props; const [breadcrumbStack, setBreadcrumbStack] = useState([]); const [nextPageToken, setNextPageToken] = useState<{ token: string | null; requested: boolean }>({ @@ -388,7 +390,7 @@ function ItemBrowser< ); -} +}; const toNavigationStack = (path: string): string[] => { return path.replaceAll('\\', '/').replace(/^\/+/, '').split('/'); From 35946ff99d6734ef57cdd305b2294a46fb63eed9 Mon Sep 17 00:00:00 2001 From: Alexandra Bri Date: Mon, 17 Jun 2024 18:44:11 +0300 Subject: [PATCH 4/6] debug hotjar --- .eslintrc.cjs | 1 - src/components/itemBrowser/ItemBrowser.tsx | 26 ++++++++++------------ vite.config.ts | 1 + 3 files changed, 13 insertions(+), 15 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 8aeddef1..ede710a9 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -68,7 +68,6 @@ module.exports = { 'no-param-reassign': ['error', { props: true, ignorePropertyModificationsFor: ['state'] }], 'no-shadow': 'off', '@typescript-eslint/no-shadow': ['error'], - 'react/function-component-definition': 0, radix: 0, }, }; diff --git a/src/components/itemBrowser/ItemBrowser.tsx b/src/components/itemBrowser/ItemBrowser.tsx index 69deb0be..73c23cee 100644 --- a/src/components/itemBrowser/ItemBrowser.tsx +++ b/src/components/itemBrowser/ItemBrowser.tsx @@ -53,7 +53,14 @@ type ItemBrowserProps = { const SKELETONS = [...Array.from(Array(10).keys())]; -const ItemBrowser = < +const getPreviewThumbnail = (type: PreviewType, path?: string): string | undefined => { + if (type === PreviewType.COLLECTION) + return 'https://cdnepgrafxstudioprd.azureedge.net/shared/assets/folder-padded.png'; + + return path; +}; + +function ItemBrowser< T extends { id: string; type: MediaType; @@ -61,9 +68,7 @@ const ItemBrowser = < relativePath: string; extension: string | null; }, ->( - props: React.PropsWithChildren>, -) => { +>(props: React.PropsWithChildren>) { const { isPanelOpen, connectorId, height, queryCall, previewCall, onSelect, convertToPreviewType } = props; const [breadcrumbStack, setBreadcrumbStack] = useState([]); const [nextPageToken, setNextPageToken] = useState<{ token: string | null; requested: boolean }>({ @@ -89,13 +94,6 @@ const ItemBrowser = < } = useVariablePanelContext(); const isMobileSize = useMobileSize(); - const getPreviewThumbnail = useCallback((type: PreviewType, path?: string): string | undefined => { - if (type === PreviewType.COLLECTION) - return 'https://cdnepgrafxstudioprd.azureedge.net/shared/assets/folder-padded.png'; - - return path; - }, []); - const onScroll = () => { setNextPageToken((t) => { return { token: t.token, requested: t.token !== null }; @@ -390,10 +388,10 @@ const ItemBrowser = < ); -}; +} -const toNavigationStack = (path: string): string[] => { +function toNavigationStack(path: string): string[] { return path.replaceAll('\\', '/').replace(/^\/+/, '').split('/'); -}; +} export default ItemBrowser; diff --git a/vite.config.ts b/vite.config.ts index 6bf54c24..be4ba443 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -27,6 +27,7 @@ export default defineConfig({ entryFileNames: 'bundle.js', chunkFileNames: 'bundle.js', assetFileNames: 'main.[ext]', + format: 'iife', }, }, }, From e4d49601b558fe704333fc0045316eaf67b3f5aa Mon Sep 17 00:00:00 2001 From: Alexandra Bri Date: Mon, 17 Jun 2024 18:49:05 +0300 Subject: [PATCH 5/6] debug hotjar --- vite.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vite.config.ts b/vite.config.ts index be4ba443..17652ded 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -21,7 +21,7 @@ export default defineConfig({ rollupOptions: { input: { index: './src/main.tsx', - bootstrap: './src/_dev-execution/bootstrap.ts', + // bootstrap: './src/_dev-execution/bootstrap.ts', }, output: { entryFileNames: 'bundle.js', From e95911ed92b9efea0da4c2576f89cf0c9736a74b Mon Sep 17 00:00:00 2001 From: Alexandra Bri Date: Tue, 18 Jun 2024 11:03:47 +0300 Subject: [PATCH 6/6] Use iife to format the bundle --- vite.config.ts | 61 ++++++++++++++++++++++++++++---------------------- 1 file changed, 34 insertions(+), 27 deletions(-) diff --git a/vite.config.ts b/vite.config.ts index 17652ded..94663bfd 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -3,32 +3,39 @@ import react from '@vitejs/plugin-react-swc'; import EnvironmentPlugin from 'vite-plugin-environment'; // https://vitejs.dev/config/ -export default defineConfig({ - plugins: [react(), EnvironmentPlugin(['NODE_ENV', 'PREVIEW_ERROR_URL'])], - server: { - port: 3002, - }, - base: './', - optimizeDeps: { - include: ['@chili-publish/grafx-shared-components', '@chili-publish/studio-sdk'], - }, - resolve: { - // force Vite to always resolve listed dependencies to the same copy (from project root). - dedupe: ['react', 'react-dom'], - }, - build: { - emptyOutDir: true, - rollupOptions: { - input: { - index: './src/main.tsx', - // bootstrap: './src/_dev-execution/bootstrap.ts', - }, - output: { - entryFileNames: 'bundle.js', - chunkFileNames: 'bundle.js', - assetFileNames: 'main.[ext]', - format: 'iife', +export default ({ mode }) => { + return defineConfig({ + plugins: [react(), EnvironmentPlugin(['NODE_ENV', 'PREVIEW_ERROR_URL'])], + server: { + port: 3002, + }, + base: './', + optimizeDeps: { + include: ['@chili-publish/grafx-shared-components', '@chili-publish/studio-sdk'], + }, + resolve: { + // force Vite to always resolve listed dependencies to the same copy (from project root). + dedupe: ['react', 'react-dom'], + }, + build: { + emptyOutDir: true, + rollupOptions: { + input: + mode === 'development' + ? { + index: './src/main.tsx', + bootstrap: './src/_dev-execution/bootstrap.ts', + } + : { + index: './src/main.tsx', + }, + output: { + entryFileNames: 'bundle.js', + chunkFileNames: 'bundle.js', + assetFileNames: 'main.[ext]', + format: 'iife', + }, }, }, - }, -}); + }); +};