|
| 1 | +# CodePress Engine |
| 2 | + |
| 3 | +[](https://www.npmjs.com/package/@codepress/codepress-engine) |
| 4 | +[](https://nodejs.org) |
| 5 | + |
| 6 | +Instrumentation engine for the [CodePress](https://codepress.dev) visual editor. Ships Babel and SWC plugins, a webpack plugin, a development server, and a CLI for React and Next.js projects. |
| 7 | + |
| 8 | +## Installation |
| 9 | + |
| 10 | +```bash |
| 11 | +npm install @codepress/codepress-engine |
| 12 | +``` |
| 13 | + |
| 14 | +## Next.js Setup |
| 15 | + |
| 16 | +```js |
| 17 | +// next.config.mjs |
| 18 | +import { createSWCPlugin } from "@codepress/codepress-engine/swc"; |
| 19 | +import CodePressWebpackPlugin from "@codepress/codepress-engine/webpack-plugin"; |
| 20 | + |
| 21 | +const nextConfig = { |
| 22 | + experimental: { |
| 23 | + swcPlugins: [createSWCPlugin()], |
| 24 | + }, |
| 25 | + webpack: (config, { isServer, dev }) => { |
| 26 | + config.plugins.push(new CodePressWebpackPlugin({ isServer, dev })); |
| 27 | + return config; |
| 28 | + }, |
| 29 | +}; |
| 30 | + |
| 31 | +export default nextConfig; |
| 32 | +``` |
| 33 | + |
| 34 | +## Babel Setup |
| 35 | + |
| 36 | +```js |
| 37 | +// babel.config.mjs |
| 38 | +export default { |
| 39 | + plugins: ["@codepress/codepress-engine"], |
| 40 | +}; |
| 41 | +``` |
| 42 | + |
| 43 | +## Vite Setup |
| 44 | + |
| 45 | +```js |
| 46 | +// vite.config.ts |
| 47 | +import { codepressVitePlugin } from "@codepress/codepress-engine/vite-plugin"; |
| 48 | + |
| 49 | +export default { |
| 50 | + plugins: [codepressVitePlugin()], |
| 51 | +}; |
| 52 | +``` |
| 53 | + |
| 54 | +## Local Development Server |
| 55 | + |
| 56 | +Run the CodePress dev server alongside your app for local visual editing: |
| 57 | + |
| 58 | +```bash |
| 59 | +npx codepress && npm start |
| 60 | +``` |
| 61 | + |
| 62 | +See `npx codepress help` for all available commands. |
| 63 | + |
| 64 | +## Package Exports |
| 65 | + |
| 66 | +| Export | Description | |
| 67 | +| -------------------------------------------- | ---------------------------------------- | |
| 68 | +| `@codepress/codepress-engine` | Main entry (Babel plugin) | |
| 69 | +| `@codepress/codepress-engine/babel` | Babel plugin (CommonJS) | |
| 70 | +| `@codepress/codepress-engine/swc` | SWC plugin factory & WASM helpers | |
| 71 | +| `@codepress/codepress-engine/webpack-plugin` | Webpack plugin for production module map | |
| 72 | +| `@codepress/codepress-engine/vite-plugin` | Vite plugin | |
| 73 | +| `@codepress/codepress-engine/esbuild` | esbuild plugin | |
| 74 | +| `@codepress/codepress-engine/server` | Fastify development server | |
| 75 | +| `@codepress/codepress-engine/cli` | CLI (`codepress` binary) | |
| 76 | + |
| 77 | +## How It Works |
| 78 | + |
| 79 | +1. **Build time** — The Babel or SWC plugin injects `codepress-data-fp` attributes into JSX elements, encoding source file paths and line numbers |
| 80 | +2. **Runtime** — The CodePress browser extension reads these attributes to identify source locations when you select an element |
| 81 | +3. **Editing** — Changes flow to either the local dev server (writes to disk) or the CodePress backend (commits to GitHub) |
| 82 | +4. **Production** — The webpack plugin creates a module map enabling hot module replacement in production builds |
| 83 | + |
| 84 | +## Reporting Bugs |
| 85 | + |
| 86 | +Found a bug? [Open an issue](https://github.com/quantfive/codepress-engine/issues/new?template=bug_report.yml) on this repository. |
| 87 | + |
| 88 | +## License |
| 89 | + |
| 90 | +Copyright (c) 2025 CodePress. All rights reserved. See [LICENSE](LICENSE) for details. |
0 commit comments