perf: optimize client builds (#643)

* wip: create get-client-build-details

* feat: first version of new WC compiler

* fix: fix some tests

* feat: improve generate entrypoint code

* refactor: refactor generateEntryPointCode module

* refactor: improve generate-entrypoint-code

* reformat: add comments

* feat: improve getTempPageName

* refactor: move logic to preEntrypointAnalysis

* perf: convert analysis to concurrent

* test: cover pre-entrypoint-analysis tests

* feat: move file system temp entrypoint logic to module

* feat: improve pre-entrypoint-analysis

* fix: solve layout

* test: fix test

* test: fix tests

* fix: improve current get-client-code-in-page

* docs: modify plugins docs + fix type

* feat: add get-client-build-details

* feat: add runBuild helper

* refactor: change param name

* feat: integrate runBuild helper to get-client-code-in-page

* test: cover runBuild

* feat: add dependecy graph to client build

* feat: integrate analysis

* fix: change to concurrent code

* feat(build): adapt i18n key analysis to work in the new build

* feat: adapt i18n bridge to new build

* fix: return i18n size in build-time

* reformat: rename getClientCodeInPage to layoutBuild

* refactor: move clientPageBuild to module

* refactor: move clientBuild

* docs: remove comments

* perf: optimize actions

* docs: clean comments

* feat(dx): improve build log feedback

* feat(dx): improve build log feedback

* feat(dx): fix log

* fix: fix integrations with plugins

.gitignore

@@ -8,6 +8,7 @@ _brisa
 **/out/*
 **/out-*/*
 **/dist/*
+**/.temp-test-files/*
 packages/brisa/index.js
 packages/brisa/out
 packages/brisa/jsx-runtime/

docs/building-your-application/configuring/plugins.md

@@ -19,7 +19,7 @@ import type { Configuration } from "brisa";
 import { MyPlugin } from "my-plugin";
 
 export default {
-  extendPlugins(plugins, { dev, isServer, entrypoint }) {
+  extendPlugins(plugins, { dev, isServer }) {
     return [...plugins, MyPlugin];
   },
 } satisfies Configuration;
@@ -32,15 +32,10 @@ export default {
 
 **Options:**
 
-| Field      | Type                  | Description                                          |
-| ---------- | --------------------- | ---------------------------------------------------- |
-| dev        | `boolean`             | Indicates whether it's a development build.          |
-| isServer   | `boolean`             | Indicates whether it's a server build.               |
-| entrypoint | `string \| undefined` | Entry point for client builds, optional for servers. |
-
-> [!NOTE]
->
-> On the server it is only executed once and the build is with all the entrypoints, while on the client a separate build is made for each page, that's why on the client there is the `entrypoint` field in the options.
+| Field    | Type      | Description                                 |
+| -------- | --------- | ------------------------------------------- |
+| dev      | `boolean` | Indicates whether it's a development build. |
+| isServer | `boolean` | Indicates whether it's a server build.      |
 
 A plugin is defined as simple JavaScript object containing a name property and a setup function. Example of one:
 

packages/brisa/src/cli/build-standalone/index.ts

@@ -164,11 +164,10 @@ async function compileStandaloneWebComponents(standaloneWC: string[]) {
                 let code = await Bun.file(path).text();
 
                 try {
-                  const res = clientBuildPlugin(code, path, {
+                  code = clientBuildPlugin(code, path, {
                     forceTranspilation: true,
                     customElementSelectorToDefine: webComponentsSelector[path],
                   });
-                  code = res.code;
                 } catch (error) {
                   console.log(LOG_PREFIX.ERROR, `Error transforming ${path}`);
                   console.log(LOG_PREFIX.ERROR, (error as Error).message);
@@ -184,7 +183,7 @@ async function compileStandaloneWebComponents(standaloneWC: string[]) {
         },
         createContextPlugin(),
       ],
-      { dev: !IS_PRODUCTION, isServer: false, entrypoint: '' },
+      { dev: !IS_PRODUCTION, isServer: false },
     ),
   });
 }

packages/brisa/src/cli/build.ts

@@ -5,6 +5,7 @@ import { getConstants } from '@/constants';
 import byteSizeToString from '@/utils/byte-size-to-string';
 import { logTable, generateStaticExport } from './build-utils';
 import compileBrisaInternalsToDoBuildPortable from '@/utils/compile-serve-internals-into-build';
+import { log } from '@/utils/log/log-build';
 
 const outputText = {
   bun: 'Bun.js Web Service App',
@@ -16,7 +17,6 @@ const outputText = {
 };
 
 export default async function build() {
-  const log = process.env.QUIET_MODE === 'true' ? () => {} : console.log;
   const constants = getConstants();
   const {
     IS_PRODUCTION,

packages/brisa/src/core/test/run-web-components/index.ts

@@ -1,7 +1,7 @@
 import { join } from 'node:path';
 import fs from 'node:fs';
 import { getConstants } from '@/constants';
-import { transformToWebComponents } from '@/utils/get-client-code-in-page';
+import { transformToWebComponents } from '@/utils/client-build/layout-build';
 import getWebComponentsList from '@/utils/get-web-components-list';
 import getImportableFilepath from '@/utils/get-importable-filepath';
 
@@ -29,7 +29,7 @@ export default async function runWebComponents() {
   }
 
   const res = await transformToWebComponents({
-    pagePath: '__tests__',
+    layoutPath: '__tests__',
     webComponentsList: allWebComponents,
     integrationsPath,
     useContextProvider: true,

packages/brisa/src/types/index.d.ts

@@ -866,16 +866,10 @@ export type JSXComponent<
   error?: JSXComponent<T & { error: unknown }>;
 };
 
-export type ExtendPluginOptions =
-  | {
-      dev: boolean;
-      isServer: true;
-    }
-  | {
-      dev: boolean;
-      isServer: false;
-      entrypoint: string;
-    };
+export type ExtendPluginOptions = {
+  dev: boolean;
+  isServer: boolean;
+};
 
 export type ExtendPlugins = (
   plugins: BunPlugin[],

packages/brisa/src/utils/ast/index.ts

@@ -4,10 +4,14 @@ import { type ESTree, parseScript } from 'meriyah';
 import { logError } from '../log/log-build';
 
 export default function AST(loader: JavaScriptLoader = 'tsx') {
-  const transpiler =
-    typeof Bun !== 'undefined'
-      ? new Bun.Transpiler({ loader })
-      : { transformSync: (code: string) => code };
+  const isBun = typeof Bun !== 'undefined';
+  const defaultTranspiler = { transformSync: (code: string) => code };
+
+  const minifier = isBun
+    ? new Bun.Transpiler({ loader, minifyWhitespace: true })
+    : defaultTranspiler;
+
+  const transpiler = isBun ? new Bun.Transpiler({ loader }) : defaultTranspiler;
 
   return {
     parseCodeToAST(code: string): ESTree.Program {
@@ -28,5 +32,8 @@ export default function AST(loader: JavaScriptLoader = 'tsx') {
     generateCodeFromAST(ast: ESTree.Program) {
       return generate(ast, { indent: '  ' });
     },
+    minify(code: string) {
+      return minifier.transformSync(code);
+    },
   };
 }

packages/brisa/src/utils/brisa-error-dialog/inject-code.ts

@@ -28,7 +28,7 @@ export async function injectBrisaDialogErrorCode() {
               // https://github.com/oven-sh/bun/issues/7611
               await Bun.readableStreamToText(Bun.file(path).stream()),
               internalComponentId,
-            ).code,
+            ),
             loader,
           }));
         },