diff --git a/app/javascript/entrypoints/ui.js b/app/javascript/entrypoints/ui.js new file mode 100644 index 000000000..a17e3593f --- /dev/null +++ b/app/javascript/entrypoints/ui.js @@ -0,0 +1,3 @@ +export function greet() { + return 'Hello'; +} diff --git a/package.json b/package.json index d09360953..2b7478da4 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "dev": "overmind start -f ./Procfile.dev", "ruby:prettier": "bundle exec rubocop -a", "build:sdk": "BUILD_MODE=library vite build", + "build:ui": "BUILD_MODE=ui vite build", "prepare": "husky install", "size": "size-limit", "story:dev": "histoire dev", diff --git a/vite.config.ts b/vite.config.ts index 8af1a9538..112fb3111 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -24,6 +24,7 @@ import path from 'path'; import vue from '@vitejs/plugin-vue'; const isLibraryMode = process.env.BUILD_MODE === 'library'; +const uiMode = process.env.BUILD_MODE === 'ui'; const isTestMode = process.env.TEST === 'true'; const vueOptions = { @@ -38,10 +39,38 @@ let plugins = [ruby(), vue(vueOptions)]; if (isLibraryMode) { plugins = []; +} else if (uiMode) { + plugins = [vue()]; } else if (isTestMode) { plugins = [vue(vueOptions)]; } +let lib = undefined; +if (isLibraryMode) { + lib = { + entry: path.resolve(__dirname, './app/javascript/entrypoints/sdk.js'), + formats: ['iife'], // IIFE format for single file + name: 'sdk', + }; +} else if (uiMode) { + lib = { + entry: path.resolve(__dirname, './app/javascript/entrypoints/ui.js'), + formats: ['iife'], // IIFE format for single file + name: 'ui', + }; +} + +const chunkBuilder = chunkInfo => { + if (chunkInfo.name === 'sdk') { + return 'js/sdk.js'; + } + + if (chunkInfo.name === 'ui') { + return `js/ui.js`; + } + return '[name].js'; +}; + export default defineConfig({ plugins: plugins, build: { @@ -49,27 +78,16 @@ export default defineConfig({ output: { // [NOTE] when not in library mode, no new keys will be addedd or overwritten // setting dir: isLibraryMode ? 'public/packs' : undefined will not work - ...(isLibraryMode + ...(isLibraryMode || uiMode ? { dir: 'public/packs', - entryFileNames: chunkInfo => { - if (chunkInfo.name === 'sdk') { - return 'js/sdk.js'; - } - return '[name].js'; - }, + entryFileNames: chunkBuilder, } : {}), - inlineDynamicImports: isLibraryMode, // Disable code-splitting for SDK + inlineDynamicImports: isLibraryMode || uiMode, // Disable code-splitting for SDK }, }, - lib: isLibraryMode - ? { - entry: path.resolve(__dirname, './app/javascript/entrypoints/sdk.js'), - formats: ['iife'], // IIFE format for single file - name: 'sdk', - } - : undefined, + lib, }, resolve: { alias: {