diff --git a/CODEOWNERS b/CODEOWNERS index 479ad82c7..6bbb6f112 100644 --- 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 deleted file mode 100644 index 3624611b6..000000000 --- a/packages/cli/src/utils/compiler.ts +++ /dev/null @@ -1,146 +0,0 @@ -/* (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 { getAppBridgeVersion } from './appBridgeVersion'; - -export type CompilerOptions = { - projectPath: string; - entryFile: string; - outputName: string; -}; - -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}'; - `, - }, - }, - }, - }); -}; - -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}'; - `, - }, - }, - }, - }); -}; - -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/compileBlock.ts b/packages/cli/src/utils/compiler/compileBlock.ts new file mode 100644 index 000000000..3e797683e --- /dev/null +++ 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 new file mode 100644 index 000000000..f5e634ef1 --- /dev/null +++ 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 new file mode 100644 index 000000000..4dc78a483 --- /dev/null +++ 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 new file mode 100644 index 000000000..d3ed10136 --- /dev/null +++ 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 index ec56395fc..5d4d6f4bf 100644 --- 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 index fb32b504f..4f89fdd6f 100644 --- 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`;