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 swap code it loaded. So in a production build the plugin builds everything under your entry a second way, one that can be swapped 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. Approved fixes then arrive over a WebSocket and are applied in place. Under vite dev the plugin does nothing.

• React ships as its development build. React can only swap a component in place in that build, so the plugin uses it for React itself. Your app and every other library still build for production, and you don't set NODE_ENV. Expect about 60 KB more JavaScript after gzip, and React's development warnings in the console.
• 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 @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.