Code fixes

1. Add the bundler plugin

The plugin is the whole integration. Point entry at your root component and give it your site's key. Your src/main.tsx stays exactly as it is.

$ npm install -D @sarcio/vite-plugin

// vite.config.tsimport { sarcio } from '@sarcio/vite-plugin';import react from '@vitejs/plugin-react';import { defineConfig } from 'vite';
export default defineConfig({  plugins: [    react(),    sarcio({ entry: 'src/App.tsx', siteKey: 'pk_your_site' })  ]});

$ npm install -D @sarcio/webpack-plugin

// webpack.config.mjsimport { SarcioWebpackPlugin } from '@sarcio/webpack-plugin';
export default {  plugins: [    new SarcioWebpackPlugin({      entry: './src/App.tsx',      siteKey: 'pk_your_site'    })  ]};

2. What the plugin does to your build

Sarcio can only replace code it loaded. So in a production build the plugin builds everything under your entry a second way, one that can be replaced a file at a time, and has the page run that. Wherever the rest of your app imports one of those files, such as import App from './App' in src/main.tsx, it gets the fixable one. Under vite dev the plugin does nothing.

• Fixes load with the page. As the page starts, it fetches the fixes already live and waits for them before your app renders, for two seconds at most. Expect a few KB more JavaScript after gzip. React and everything else stay your normal production build.
• A fix that goes live reloads open pages. When a fix goes live or is retired, every open page that runs the code it changes reloads to pick it up, so whatever a visitor had typed there starts afresh.
• The page waits with a top-level await. Vite 7 and 8 and webpack 5.83 handle that as they are; on Vite 5 or 6 the plugin sets a build target that supports it, unless you set build.target yourself, in which case it must be es2022 or later.
• Under the entry, import only your own .ts, .tsx, .js and .jsx files by relative path, plus npm packages. Keep stylesheet and asset imports in src/main.tsx.
• A fix can use any npm package your app already imports, not a new one.

3. Tell the site its entry

Under Sites → Manage → Repository & source, set Module entry to the same file as the plugin's entry (src/App.tsx). In a monorepo, set Module app root to the app's directory. From then on, this site's reports draft code fixes.

Deploy, then run your first fix. To build fixes in your own pipeline, see remote builds.

Angular

Angular uses its own plugin, added to a customized application builder's esbuild plugins:

$ npm install -D @sarcio/angular

// in your customized application builder's esbuild pluginsimport { sarcioAngularEsbuildPlugin } from '@sarcio/angular';
plugins: [sarcioAngularEsbuildPlugin({ outDir: 'dist/app' })];

A code fix re-creates dynamically created components with their state carried over. Anything else reloads the page. The startup wiring depends on how your app creates components, so email support@sarcio.io and we will set it up with you.