Skip to content

Commit 22fc184

Browse files
andersonlealandersonleal
authored
feat(snap): migrate plugin template from Vite to tsdown (#1010)
1 parent 7f436fc commit 22fc184

File tree

11 files changed

+200
-89
lines changed

11 files changed

+200
-89
lines changed

‎packages/snap/src/create/templates/plugin/README.md.txt‎

Lines changed: 57 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
# {{PROJECT_NAME}}
1+
# @motiadev/plugin-example
22

3-
A minimal plugin demonstrating the Motia plugin system.
3+
A minimal example plugin demonstrating the Motia plugin system.
44

55
## Overview
66

77
This plugin serves as a reference implementation showing how to create custom workbench plugins for Motia. It demonstrates:
88

99
- Basic plugin structure and configuration
10-
- Creating custom workbench tabs
11-
- Using Motia's UI component library
12-
- Building with Vite and TypeScript
10+
- Creating custom workbench tabs with position control
11+
- Using Motia's UI component library (`@motiadev/ui`)
12+
- Building with tsdown and TypeScript
13+
- Tailwind CSS v4 styling with PostCSS
14+
- React Compiler optimization via Babel
1315

1416
## Installation
1517

@@ -35,30 +37,73 @@ pnpm run clean
3537
To use this plugin in your Motia project, import it in your `motia.config.ts`:
3638

3739
```typescript
38-
import examplePlugin from '{{PROJECT_NAME}}/plugin'
40+
import examplePlugin from '@motiadev/plugin-example/plugin'
3941

4042
export default {
4143
plugins: [examplePlugin],
4244
}
4345
```
4446

47+
## Plugin Configuration
48+
49+
The plugin exports a function that receives the `MotiaPluginContext` and returns a `MotiaPlugin` object:
50+
51+
```typescript
52+
import type { MotiaPlugin, MotiaPluginContext } from '@motiadev/core'
53+
54+
export default function plugin(_motia: MotiaPluginContext): MotiaPlugin {
55+
return {
56+
workbench: [
57+
{
58+
packageName: '@motiadev/plugin-example',
59+
cssImports: ['@motiadev/plugin-example/dist/index.css'],
60+
label: 'Example',
61+
position: 'bottom',
62+
componentName: 'ExamplePage',
63+
labelIcon: 'sparkles',
64+
},
65+
],
66+
}
67+
}
68+
```
69+
70+
### Workbench Options
71+
72+
| Option | Description |
73+
| --------------- | ------------------------------------------ |
74+
| `packageName` | The npm package name for dynamic imports |
75+
| `cssImports` | Array of CSS files to load with the plugin |
76+
| `label` | Display name shown in the workbench tab |
77+
| `position` | Tab position: `'top'` or `'bottom'` |
78+
| `componentName` | Name of the exported React component |
79+
| `labelIcon` | Lucide icon name for the tab |
80+
4581
## Structure
4682

4783
```
48-
{{PROJECT_NAME}}/
84+
plugin-example/
4985
├── src/
5086
│ ├── components/
5187
│ │ └── example-page.tsx # Main UI component
52-
│ ├── index.ts # Package entry point
88+
│ ├── index.ts # Package entry point (exports components)
5389
│ ├── plugin.ts # Plugin definition
54-
│ └── styles.css # Tailwind styles
90+
│ └── styles.css # Tailwind CSS styles
91+
├── dist/ # Build output
5592
├── package.json
5693
├── tsconfig.json
57-
├── vite.config.ts
94+
├── tsdown.config.ts # Build configuration
95+
├── postcss.config.js # PostCSS/Tailwind config
5896
└── README.md
5997
```
6098

61-
## Learn More
99+
## Features Demonstrated
62100

63-
For detailed documentation on creating plugins, see the [Motia Plugins Guide](https://motia.dev/docs/development-guide/plugins).
101+
- **Custom Workbench Tab**: Adds an "Example" tab to the bottom panel
102+
- **UI Components**: Uses `Badge` and `Button` from `@motiadev/ui`
103+
- **Icons**: Integrates Lucide React icons
104+
- **Responsive Layout**: Grid-based responsive design with Tailwind CSS
105+
- **Type Safety**: Full TypeScript support with proper type declarations
106+
107+
## Learn More
64108

109+
For detailed documentation on creating plugins, see the [Plugins Guide](../../packages/docs/content/docs/development-guide/plugins.mdx).

‎packages/snap/src/create/templates/plugin/package.json.txt‎

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,55 @@
11
{
22
"name": "{{PROJECT_NAME}}",
3-
"version": "0.0.1",
3+
"version": "0.14.0-beta.164",
44
"type": "module",
55
"main": "./dist/index.js",
66
"types": "./dist/index.d.ts",
77
"exports": {
88
".": {
9-
"types": "./dist/index.d.ts",
10-
"import": "./dist/index.js",
11-
"require": "./dist/index.cjs"
9+
"development": "./src/index.ts",
10+
"default": "./dist/index.js"
1211
},
1312
"./plugin": {
14-
"types": "./dist/plugin.d.ts",
15-
"import": "./dist/plugin.js",
16-
"require": "./dist/plugin.cjs"
13+
"development": "./src/plugin.ts",
14+
"default": "./dist/plugin.js"
1715
},
18-
"./styles.css": "./dist/styles.css"
16+
"./package.json": "./package.json"
1917
},
2018
"files": [
2119
"dist"
2220
],
2321
"scripts": {
24-
"build": "vite build",
25-
"dev": "vite build --watch",
22+
"build": "tsdown",
23+
"dev": "tsdown --watch",
2624
"clean": "rm -rf dist"
2725
},
2826
"dependencies": {
29-
"lucide-react": "^0.548.0"
27+
"lucide-react": "^0.555.0",
28+
"react": "^19.2.0"
3029
},
31-
"devDependencies": {
30+
"peerDependencies": {
3231
"@motiadev/core": "latest",
33-
"@motiadev/ui": "latest",
34-
"@tailwindcss/postcss": "^4.1.16",
35-
"@tailwindcss/vite": "^4.1.16",
36-
"@types/node": "^24.9.2",
37-
"@types/react": "^19.2.2",
38-
"@vitejs/plugin-react": "^5.1.0",
39-
"postcss": "^8.5.6",
40-
"react": "^19.2.0",
41-
"tailwindcss": "^4.1.16",
32+
"@motiadev/ui": "latest"
33+
},
34+
"devDependencies": {
35+
"@rollup/plugin-babel": "^6.1.0",
36+
"@tailwindcss/postcss": "^4.1.17",
37+
"rollup-plugin-postcss": "^4.0.2",
38+
"@types/node": "^24.10.1",
39+
"@types/react": "^19.2.7",
40+
"babel-plugin-react-compiler": "^1.0.0",
41+
"publint": "^0.3.15",
42+
"tailwindcss": "^4.1.17",
43+
"tsdown": "^0.16.8",
4244
"typescript": "^5.9.3",
43-
"vite": "^7.1.12",
44-
"vite-plugin-dts": "^4.5.4"
45+
"unplugin-unused": "^0.5.6"
46+
},
47+
"module": "./dist/index.js",
48+
"publishConfig": {
49+
"exports": {
50+
".": "./dist/index.js",
51+
"./plugin": "./dist/plugin.js",
52+
"./package.json": "./package.json"
53+
}
4554
}
4655
}
47-

‎packages/snap/src/create/templates/plugin/src/components/example-page.tsx.txt‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,5 +60,4 @@ export const ExamplePage: React.FC = () => {
6060
</div>
6161
</div>
6262
)
63-
}
64-
63+
}

‎packages/snap/src/create/templates/plugin/src/index.ts.txt‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,2 @@
1-
import './styles.css'
2-
31
export { ExamplePage } from './components/example-page'
42

‎packages/snap/src/create/templates/plugin/tsdown.config.ts.txt‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import pluginBabel from '@rollup/plugin-babel'
2+
import postcss from 'rollup-plugin-postcss'
3+
import { defineConfig } from 'tsdown'
4+
5+
export default defineConfig([
6+
// Main JavaScript/TypeScript build
7+
{
8+
entry: {
9+
index: './src/index.ts',
10+
plugin: './src/plugin.ts',
11+
},
12+
format: 'esm',
13+
platform: 'browser',
14+
external: [/^react($|\/)/, 'react/jsx-runtime'],
15+
dts: {
16+
build: true,
17+
},
18+
exports: {
19+
devExports: 'development',
20+
},
21+
clean: true,
22+
publint: true,
23+
unused: true,
24+
outDir: 'dist',
25+
plugins: [
26+
pluginBabel({
27+
babelHelpers: 'bundled',
28+
parserOpts: {
29+
sourceType: 'module',
30+
plugins: ['jsx', 'typescript'],
31+
},
32+
plugins: ['babel-plugin-react-compiler'],
33+
extensions: ['.js', '.jsx', '.ts', '.tsx'],
34+
}),
35+
],
36+
},
37+
// Separate CSS build
38+
{
39+
entry: {
40+
index: './src/styles.css',
41+
},
42+
format: 'esm',
43+
platform: 'browser',
44+
outDir: 'dist',
45+
clean: false,
46+
plugins: [
47+
postcss({
48+
extract: true,
49+
minimize: process.env.NODE_ENV === 'prod',
50+
}),
51+
],
52+
},
53+
])

‎packages/snap/src/create/templates/plugin/vite.config.ts.txt‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎plugins/plugin-example/README.md‎

Lines changed: 55 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# @motiadev/plugin-example
1+
# {{PROJECT_NAME}}
22

33
A minimal example plugin demonstrating the Motia plugin system.
44

@@ -7,9 +7,11 @@ A minimal example plugin demonstrating the Motia plugin system.
77
This plugin serves as a reference implementation showing how to create custom workbench plugins for Motia. It demonstrates:
88

99
- Basic plugin structure and configuration
10-
- Creating custom workbench tabs
11-
- Using Motia's UI component library
12-
- Building with Vite and TypeScript
10+
- Creating custom workbench tabs with position control
11+
- Using Motia's UI component library (`@motiadev/ui`)
12+
- Building with tsdown and TypeScript
13+
- Tailwind CSS v4 styling with PostCSS
14+
- React Compiler optimization via Babel
1315

1416
## Installation
1517

@@ -35,29 +37,73 @@ pnpm run clean
3537
To use this plugin in your Motia project, import it in your `motia.config.ts`:
3638

3739
```typescript
38-
import examplePlugin from '@motiadev/plugin-example/plugin'
40+
import examplePlugin from '{{PROJECT_NAME}}/plugin'
3941

4042
export default {
4143
plugins: [examplePlugin],
4244
}
4345
```
4446

47+
## Plugin Configuration
48+
49+
The plugin exports a function that receives the `MotiaPluginContext` and returns a `MotiaPlugin` object:
50+
51+
```typescript
52+
import type { MotiaPlugin, MotiaPluginContext } from '@motiadev/core'
53+
54+
export default function plugin(_motia: MotiaPluginContext): MotiaPlugin {
55+
return {
56+
workbench: [
57+
{
58+
packageName: '@motiadev/plugin-example',
59+
cssImports: ['@motiadev/plugin-example/dist/index.css'],
60+
label: 'Example',
61+
position: 'bottom',
62+
componentName: 'ExamplePage',
63+
labelIcon: 'sparkles',
64+
},
65+
],
66+
}
67+
}
68+
```
69+
70+
### Workbench Options
71+
72+
| Option | Description |
73+
| --------------- | ------------------------------------------ |
74+
| `packageName` | The npm package name for dynamic imports |
75+
| `cssImports` | Array of CSS files to load with the plugin |
76+
| `label` | Display name shown in the workbench tab |
77+
| `position` | Tab position: `'top'` or `'bottom'` |
78+
| `componentName` | Name of the exported React component |
79+
| `labelIcon` | Lucide icon name for the tab |
80+
4581
## Structure
4682

4783
```
48-
plugin-example/
84+
{{PROJECT_NAME}}/
4985
├── src/
5086
│ ├── components/
5187
│ │ └── example-page.tsx # Main UI component
52-
│ ├── index.ts # Package entry point
88+
│ ├── index.ts # Package entry point (exports components)
5389
│ ├── plugin.ts # Plugin definition
54-
│ └── styles.css # Tailwind styles
90+
│ └── styles.css # Tailwind CSS styles
91+
├── dist/ # Build output
5592
├── package.json
5693
├── tsconfig.json
57-
├── vite.config.ts
94+
├── tsdown.config.ts # Build configuration
95+
├── postcss.config.js # PostCSS/Tailwind config
5896
└── README.md
5997
```
6098

99+
## Features Demonstrated
100+
101+
- **Custom Workbench Tab**: Adds an "Example" tab to the bottom panel
102+
- **UI Components**: Uses `Badge` and `Button` from `@motiadev/ui`
103+
- **Icons**: Integrates Lucide React icons
104+
- **Responsive Layout**: Grid-based responsive design with Tailwind CSS
105+
- **Type Safety**: Full TypeScript support with proper type declarations
106+
61107
## Learn More
62108

63109
For detailed documentation on creating plugins, see the [Plugins Guide](../../packages/docs/content/docs/development-guide/plugins.mdx).

‎plugins/plugin-example/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@
3232
"@motiadev/ui": "workspace:*"
3333
},
3434
"devDependencies": {
35-
"@bosh-code/tsdown-plugin-inject-css": "^2.0.0",
3635
"@rollup/plugin-babel": "^6.1.0",
3736
"@tailwindcss/postcss": "^4.1.17",
3837
"rollup-plugin-postcss": "^4.0.2",

‎plugins/plugin-example/src/lucide.d.ts‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

0 commit comments

Comments
 (0)