refactor: adjust folder structure for compiler (#1099)

* chore: adjust folder structure * chore: add correct path * chore: remove whitespace * chore: cleanup naming * chore: renaming
Frontify · Sep 4, 2024 · bc8b414 · bc8b414
1 parent e6a9db1
commit bc8b414
Show file tree

Hide file tree

Showing 8 changed files with 175 additions and 149 deletions.
diff --git a/CODEOWNERS b/CODEOWNERS
@@ -141,11 +141,14 @@ packages/app-bridge/src/window.d.ts @Frontify/content-and-blocks @Frontify/theme
 packages/cli/src/commands/ @Frontify/content-and-blocks @Frontify/themes-and-navigation @Frontify/apps-and-integrations
 packages/cli/src/errors/ @Frontify/content-and-blocks @Frontify/themes-and-navigation @Frontify/apps-and-integrations
 packages/cli/src/utils/ @Frontify/content-and-blocks @Frontify/themes-and-navigation @Frontify/apps-and-integrations
+packages/cli/src/utils/compiler/compilePlatformApp.ts @Frontify/apps-and-integrations
+packages/cli/src/utils/compiler/compileTheme.ts @Frontify/themes-and-navigation
+packages/cli/src/utils/compiler/compileBlock.ts @Frontify/content-and-blocks
 packages/cli/src/servers/blockDevelopmentServer.ts @Frontify/content-and-blocks
 packages/cli/src/servers/platformAppDevelopmentServer.ts @Frontify/apps-and-integrations
 packages/cli/src/servers/themeDevelopmentServer.ts @Frontify/themes-and-navigation
 
-## Templates
+## Templates
 packages/cli/templates/content-block-css @Frontify/content-and-blocks
 packages/cli/templates/content-block-css-modules @Frontify/content-and-blocks
 packages/cli/templates/content-block-tailwind @Frontify/content-and-blocks

diff --git a/packages/cli/src/utils/compiler.ts b/packages/cli/src/utils/compiler.ts
diff --git a/packages/cli/src/utils/compiler/compileBlock.ts b/packages/cli/src/utils/compiler/compileBlock.ts
@@ -0,0 +1,48 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import react from '@vitejs/plugin-react';
+import { build } from 'vite';
+import { viteExternalsPlugin } from 'vite-plugin-externals';
+
+import { getAppBridgeVersion } from '../appBridgeVersion';
+
+import { type CompilerOptions } from './compilerOptions';
+
+export const compileBlock = async ({ projectPath, entryFile, outputName }: CompilerOptions) => {
+    const appBridgeVersion = getAppBridgeVersion(projectPath);
+    return build({
+        plugins: [
+            react(),
+            viteExternalsPlugin({
+                react: 'React',
+                'react-dom': 'ReactDOM',
+            }),
+        ],
+        define: {
+            'process.env.NODE_ENV': JSON.stringify('production'),
+        },
+        root: projectPath,
+        build: {
+            lib: {
+                name: outputName,
+                entry: entryFile,
+                formats: ['iife'],
+                fileName: () => 'index.js',
+            },
+            rollupOptions: {
+                external: ['react', 'react-dom'],
+                output: {
+                    globals: {
+                        react: 'React',
+                        'react-dom': 'ReactDOM',
+                    },
+                    footer: `
+                        window.${outputName} = ${outputName};
+                        window.${outputName}.dependencies = window.${outputName}.packages || {};
+                        window.${outputName}.dependencies['@frontify/app-bridge'] = '${appBridgeVersion}';
+                    `,
+                },
+            },
+        },
+    });
+};
diff --git a/packages/cli/src/utils/compiler/compilePlatformApp.ts b/packages/cli/src/utils/compiler/compilePlatformApp.ts
@@ -0,0 +1,63 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import react from '@vitejs/plugin-react';
+import { build } from 'vite';
+import { viteExternalsPlugin } from 'vite-plugin-externals';
+
+import { getAppBridgeVersion } from '../appBridgeVersion';
+
+import { type CompilerOptions } from './compilerOptions';
+
+export const compilePlatformApp = async ({ outputName, entryFile, projectPath = '' }: CompilerOptions) => {
+    const appBridgeVersion = getAppBridgeVersion(projectPath);
+
+    const settings = await build({
+        plugins: [
+            react(),
+            viteExternalsPlugin({
+                react: 'React',
+                'react-dom': 'ReactDOM',
+            }),
+        ],
+        root: projectPath,
+        define: {
+            'process.env.NODE_ENV': JSON.stringify('production'),
+        },
+        build: {
+            lib: {
+                entry: entryFile,
+                name: outputName,
+                formats: ['iife'],
+                fileName: () => 'index.js',
+            },
+            rollupOptions: {
+                external: ['react', 'react-dom'],
+                output: {
+                    globals: {
+                        react: 'React',
+                        'react-dom': 'ReactDOM',
+                    },
+                    entryFileNames: 'settings.js',
+                    footer: `
+                        window.${outputName} = ${outputName};
+                        window.${outputName}.dependencies = window.${outputName}.packages || {};
+                        window.${outputName}.dependencies['@frontify/app-bridge'] = '${appBridgeVersion}';
+                    `,
+                },
+            },
+        },
+    });
+
+    const app = await build({
+        plugins: [react()],
+        root: projectPath,
+        define: {
+            'process.env.NODE_ENV': JSON.stringify('production'),
+        },
+        base: '/__DYNAMIC_SEGMENT__/',
+        build: {
+            emptyOutDir: false,
+        },
+    });
+    return { app, settings };
+};
diff --git a/packages/cli/src/utils/compiler/compileTheme.ts b/packages/cli/src/utils/compiler/compileTheme.ts
@@ -0,0 +1,48 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import react from '@vitejs/plugin-react';
+import { build } from 'vite';
+import { viteExternalsPlugin } from 'vite-plugin-externals';
+
+import { getAppBridgeThemeVersion } from '../appBridgeThemeVersion';
+
+import { type CompilerOptions } from './compilerOptions';
+
+export const compileTheme = async ({ projectPath, entryFile, outputName }: CompilerOptions) => {
+    const appBridgeVersion = getAppBridgeThemeVersion(projectPath);
+    return build({
+        plugins: [
+            react(),
+            viteExternalsPlugin({
+                react: 'React',
+                'react-dom': 'ReactDOM',
+            }),
+        ],
+        define: {
+            'process.env.NODE_ENV': JSON.stringify('production'),
+        },
+        root: projectPath,
+        build: {
+            lib: {
+                name: outputName,
+                entry: entryFile,
+                formats: ['iife'],
+                fileName: () => 'index.js',
+            },
+            rollupOptions: {
+                external: ['react', 'react-dom'],
+                output: {
+                    globals: {
+                        react: 'React',
+                        'react-dom': 'ReactDOM',
+                    },
+                    footer: `
+                        window.${outputName} = ${outputName};
+                        window.${outputName}.dependencies = window.${outputName}.packages || {};
+                        window.${outputName}.dependencies['@frontify/app-bridge-theme'] = '${appBridgeVersion}';
+                    `,
+                },
+            },
+        },
+    });
+};
diff --git a/packages/cli/src/utils/compiler/compilerOptions.ts b/packages/cli/src/utils/compiler/compilerOptions.ts
@@ -0,0 +1,7 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export type CompilerOptions = {
+    projectPath: string;
+    entryFile: string;
+    outputName: string;
+};
diff --git a/packages/cli/src/utils/index.ts b/packages/cli/src/utils/index.ts
@@ -1,7 +1,7 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 export * from './appBridgeVersion';
-export * from './compiler';
+export * from './compiler/compilerOptions';
 export * from './configuration';
 export * from './date';
 export * from './file';
@@ -15,3 +15,6 @@ export * from './reactiveJson';
 export * from './url';
 export * from './user';
 export * from './zip';
+export { compilePlatformApp } from './compiler/compilePlatformApp';
+export { compileBlock } from './compiler/compileBlock';
+export { compileTheme } from './compiler/compileTheme';
diff --git a/packages/cli/tests/utils/compiler.spec.ts b/packages/cli/tests/utils/compiler.spec.ts
@@ -2,7 +2,7 @@
 
 import { beforeEach, describe, expect, test } from 'vitest';
 
-import { compileBlock, compilePlatformApp, compileTheme } from '../../src/utils/compiler';
+import { compileBlock, compilePlatformApp, compileTheme } from '../../src/utils';
 
 const rootPath = `${__dirname}/../files/compile-test-files`;
 const outputFile = `${__dirname}/../files/compile-test-files/dist/index.js`;