Rollup

@codespark/plugin-rollup is a Rollup plugin that performs static analysis on your source code during the build process. It automatically collects dependencies and local definitions used by createWorkspace calls, enabling seamless workspace creation from React components without runtime overhead.

Installation

npm install @codespark/plugin-rollup

Usage

Add the plugin to your Rollup configuration:

import codespark from '@codespark/plugin-rollup';

export default {
  plugins: [codespark()]
};

With Vite

Since Vite uses Rollup under the hood, you can use this plugin directly in your Vite configuration:

import codespark from '@codespark/plugin-rollup';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [codespark()]
});

Options

codespark({
  enabled: true,
  methods: ['createWorkspace'],
  importSource: ['@codespark/react']
})

How It Works

The plugin operates during Rollup's transform phase and performs the following steps:

1. AST Parsing

The plugin parses JavaScript/TypeScript files (.js, .jsx, .ts, .tsx) using Babel parser with JSX and TypeScript support.

2. Import Detection

It identifies imports from @codespark/react that match the configured method names (default: createWorkspace).

3. Call Expression Transformation

When a createWorkspace call is detected, the plugin analyzes its argument:

• JSX Elements: <Button /> or <div>content</div>
• Component References: Button or MyComponent
• Function Expressions: () => <button>Click</button>

4. Dependency Collection

For each detected call, the plugin collects:

• Entry Code: The source code passed to createWorkspace
• Local Definitions: Variables, functions, or classes defined in the same file that the entry code depends on
• External Imports: Third-party package imports (e.g., react, lodash)
• Internal Files: Local file imports that need to be bundled

5. Code Injection

The plugin transforms the original call:

// Before transformation
createWorkspace(<Button />, { name: 'example.tsx' })

// After transformation
createWorkspace.call(
  { __scanned: { entry: {...}, files: {...} } },
  <Button />,
  { name: 'example.tsx' }
)

The __scanned context contains all collected dependency information, which createWorkspace uses at runtime to construct the workspace with proper file structure.

Example

Consider a documentation page with an interactive component demo:

export default function Button() {
  return ...
}

import { createWorkspace } from '@codespark/react';
import { Codespark } from '@codespark/react';

import Button from './components/button';

const ButtonDemo = () => <Button variant="primary">Click me</Button>;
const workspace = createWorkspace(ButtonDemo, { name: 'demo.tsx' });

export default function ButtonDocs() {
  return <Codespark workspace={workspace} />;
}

At build time, the plugin will:

1. Detect the createWorkspace(ButtonDemo, ...) call
2. Analyze ButtonDemo and find it uses Button from ./components/button
3. Collect the Button component source code
4. Inject the collected information into the createWorkspace call

The resulting workspace will contain both the demo code and the Button component source, enabling the live preview to render correctly.