feat(core,core-react,react,source-react): add React package support

Author: nekomeowww

package.json

@@ -57,10 +57,12 @@
     "@unocss/eslint-config": "^66.6.8",
     "@unocss/eslint-plugin": "^66.6.8",
     "@unocss/preset-mini": "^66.6.8",
+    "@vitest/browser-playwright": "4.1.4",
     "bumpp": "^11.0.1",
     "changelogithub": "^14.0.0",
     "eslint": "^10.2.0",
     "eslint-plugin-format": "^2.0.1",
+    "playwright": "^1.60.0",
     "taze": "^19.11.0",
     "tsdown": "^0.21.8",
     "tsx": "^4.21.0",

packages/core-react/README.md

@@ -0,0 +1,22 @@
+# @velin-dev/core-react
+
+Core React utilities for Velin.
+
+## Usage
+
+```tsx
+import { renderComponent } from '@velin-dev/core-react'
+
+function Prompt({ name }: { name: string }) {
+  return (
+    <article>
+      <h1>{`Hello ${name}`}</h1>
+      <p>Render React components as Markdown prompts.</p>
+    </article>
+  )
+}
+
+const markdown = await renderComponent(Prompt, { name: 'Velin' })
+
+console.log(markdown)
+```

packages/core-react/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@velin-dev/core-react",
+  "type": "module",
+  "version": "0.4.1",
+  "description": "Develop prompts with Vue SFC or Markdown like pro.",
+  "author": {
+    "name": "RainbowBird",
+    "email": "rbxin2003@outlook.com",
+    "url": "https://github.com/luoling8192"
+  },
+  "contributors": [
+    {
+      "name": "Neko Ayaka",
+      "email": "neko@ayaka.moe",
+      "url": "https://github.com/nekomeowww"
+    }
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/moeru-ai/velin",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/moeru-ai/velin.git",
+    "directory": "packages/core-react"
+  },
+  "bugs": "https://github.com/moeru-ai/velin/issues",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./render-browser": {
+      "types": "./dist/render-browser/index.d.mts",
+      "import": "./dist/render-browser/index.mjs"
+    },
+    "./render-node": {
+      "types": "./dist/render-node/index.d.mts",
+      "import": "./dist/render-node/index.mjs"
+    },
+    "./render-shared": {
+      "types": "./dist/render-shared/index.d.mts",
+      "import": "./dist/render-shared/index.mjs"
+    }
+  },
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "files": [
+    "README.md",
+    "dist",
+    "package.json"
+  ],
+  "scripts": {
+    "dev": "tsdown",
+    "stub": "tsdown",
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit",
+    "attw": "attw --pack . --profile esm-only --ignore-rules cjs-resolves-to-esm"
+  },
+  "peerDependencies": {
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1"
+  },
+  "dependencies": {
+    "@velin-dev/utils": "workspace:^"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1"
+  }
+}

packages/core-react/src/index.browser.test.tsx

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest'
+
+import { renderComponent, renderElement } from './index'
+
+describe('renderElement from default entry in browser', () => {
+  it('renders a React element to Markdown', async () => {
+    await expect(renderElement(<span>Browser element</span>)).resolves.toBe('Browser element\n')
+  })
+})
+
+describe('renderComponent from default entry in browser', () => {
+  it('renders function component output to Markdown', async () => {
+    function Prompt() {
+      return <div>Hello browser</div>
+    }
+
+    await expect(renderComponent(Prompt)).resolves.toBe('Hello browser\n')
+  })
+})

packages/core-react/src/index.test.tsx

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest'
+
+import { renderComponent, renderElement } from './index'
+
+describe('renderComponent from default entry', () => {
+  it('should type-check props requirements', () => {
+    function Prompt() {
+      return <div>Hello Velin</div>
+    }
+
+    function RequiredPrompt({ name }: { name: string }) {
+      return <div>{`Hello ${name}`}</div>
+    }
+
+    void renderComponent(Prompt)
+    // @ts-expect-error required props must be provided
+    void renderComponent(RequiredPrompt)
+    void renderComponent(RequiredPrompt, { name: 'React' })
+  })
+
+  it('should render function component output to Markdown', async () => {
+    function Prompt() {
+      return <div>Hello Velin</div>
+    }
+
+    await expect(renderComponent(Prompt)).resolves.toBe('Hello Velin\n')
+  })
+})
+
+describe('renderElement from default entry', () => {
+  it('should render a React element to Markdown', async () => {
+    await expect(renderElement(<span>Element prompt</span>)).resolves.toBe('Element prompt\n')
+  })
+})

packages/core-react/src/index.ts

@@ -0,0 +1 @@
+export { renderComponent, renderElement } from './render-shared'

packages/core-react/src/render-browser/index.browser.test.tsx

@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest'
+
+import { ImportedPrompt } from '../testdata/imported-prompt'
+import { renderComponent, renderElement } from './index'
+
+describe('renderElement from render-browser', () => {
+  it('renders a React element to Markdown', async () => {
+    await expect(renderElement(<span>Browser element</span>)).resolves.toBe('Browser element\n')
+  })
+})
+
+describe('renderComponent from render-browser', () => {
+  it('renders function component output to Markdown', async () => {
+    function Prompt() {
+      return <div>Hello browser</div>
+    }
+
+    await expect(renderComponent(Prompt)).resolves.toBe('Hello browser\n')
+  })
+
+  it('converts nested HTML to Markdown', async () => {
+    function Prompt() {
+      return (
+        <section>
+          <h1>Browser Plan</h1>
+          <ul>
+            <li>Render</li>
+            <li>Convert</li>
+          </ul>
+        </section>
+      )
+    }
+
+    const result = await renderComponent(Prompt)
+
+    expect(result).toContain('# Browser Plan')
+    expect(result).toContain('- Render')
+    expect(result).toContain('- Convert')
+  })
+
+  it('renders an imported component with React imports', async () => {
+    await expect(renderComponent(ImportedPrompt, { name: 'browser import' })).resolves.toBe(
+      '# Imported\n\n**BROWSER IMPORT**\n',
+    )
+  })
+})

packages/core-react/src/render-browser/index.ts

@@ -0,0 +1 @@
+export { renderComponent, renderElement } from '../render-shared'

packages/core-react/src/render-node/index.test.tsx

@@ -0,0 +1,77 @@
+import { describe, expect, it } from 'vitest'
+
+import { ImportedPrompt } from '../testdata/imported-prompt'
+import { renderComponent, renderElement } from './index'
+
+describe('renderComponent from render-node', () => {
+  it('should type-check props requirements', () => {
+    function Prompt() {
+      return <div>Hello Velin</div>
+    }
+
+    function RequiredPrompt({ name }: { name: string }) {
+      return <div>{`Hello ${name}`}</div>
+    }
+
+    void renderComponent(Prompt)
+    // @ts-expect-error required props must be provided
+    void renderComponent(RequiredPrompt)
+    void renderComponent(RequiredPrompt, { name: 'React' })
+  })
+
+  it('should render function component output to Markdown', async () => {
+    function Prompt() {
+      return <div>Hello Velin</div>
+    }
+
+    await expect(renderComponent(Prompt)).resolves.toBe('Hello Velin\n')
+  })
+
+  it('should pass props to the component', async () => {
+    function Prompt({ name }: { name: string }) {
+      return <div>{`Hello ${name}`}</div>
+    }
+
+    await expect(renderComponent(Prompt, { name: 'React' })).resolves.toBe('Hello React\n')
+  })
+
+  it('should convert nested HTML to Markdown', async () => {
+    function Prompt() {
+      return (
+        <section>
+          <h1>Plan</h1>
+          <ul>
+            <li>Render</li>
+            <li>Convert</li>
+          </ul>
+        </section>
+      )
+    }
+
+    const result = await renderComponent(Prompt)
+
+    expect(result).toContain('# Plan')
+    expect(result).toContain('- Render')
+    expect(result).toContain('- Convert')
+  })
+
+  it('should render null output to empty Markdown', async () => {
+    function Prompt() {
+      return null
+    }
+
+    await expect(renderComponent(Prompt)).resolves.toBe('')
+  })
+
+  it('should render an imported component with React imports', async () => {
+    await expect(renderComponent(ImportedPrompt, { name: 'node import' })).resolves.toBe(
+      '# Imported\n\n**NODE IMPORT**\n',
+    )
+  })
+})
+
+describe('renderElement from render-node', () => {
+  it('should render a React element to Markdown', async () => {
+    await expect(renderElement(<span>Element prompt</span>)).resolves.toBe('Element prompt\n')
+  })
+})

packages/core-react/src/render-node/index.ts

@@ -0,0 +1 @@
+export { renderComponent, renderElement } from '../render-shared'