https://github.com/joshnuss/svelte-bridge

Use your Svelte components from React & Vue.
https://github.com/joshnuss/svelte-bridge

react svelte vite vue

Last synced: about 2 months ago
JSON representation

Use your Svelte components from React & Vue.

• Host: GitHub
• URL: https://github.com/joshnuss/svelte-bridge
• Owner: joshnuss
• Created: 2022-08-05T01:11:43.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-08-12T19:30:38.000Z (over 2 years ago)
• Last Synced: 2024-10-14T22:21:33.060Z (2 months ago)
• Topics: react, svelte, vite, vue
• Language: JavaScript
• Homepage:
• Size: 17.6 KB
• Stars: 42
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vite-plugin-svelte-bridge

Write Svelte components and use them from React & Vue.

This plugin generates wrapper components in `dist/react` and `dist/vue` at build time.

## Setup

Install the package:

```bash

pnpm install -D vite-plugin-svelte-bridge

```

Add `react` and `vue` plugins to `vite.config.js`:

```javascript

// vite.config.js

import { defineConfig } from 'vite'

import { svelte } from '@sveltejs/vite-plugin-svelte'

import { react, vue } from 'vite-plugin-svelte-bridge'

export default defineConfig({

  plugins: [ svelte(), react(), vue() ]

})

```

Update `package.json`:

1. Add `dist/react` and `dist/vue` to the `exports` section

```javascript

"exports": {

  ".": "./dist/index.js",

  "./react/*": "./dist/react/*",

  "./vue/*": "./dist/vue/*"

}

```

2. Specify which components should be wrapped:

```javascript

"bridge": {

  "MyComponent": "src/lib/MyComponent.svelte"

}

```

Running `vite build` will generate a `dist/react/MyComponent.jsx` and a `dist/vue/MyComponent.vue`.

## Usage

### React

To access a component from a React project, install the package:

```bash

pnpm install -D my-svelte-lib

```

Then import the component from the `react/` folder:

```jsx

// in src/App.jsx

import MyComponent from 'my-svelte-lib/react/MyComponent.jsx'

export default function App() {

  return  alert('clicked')}/>

}

```

### Vue

To access a component from a Vue project, install the package:

```bash

pnpm install -D my-svelte-lib

```

Then import the component from the `vue/` folder:

```vue

  import MyComponent from 'my-svelte-lib/vue/MyComponent.vue'

  

```

## Caveats

The following features are not supported (yet?):

- Slots

- 2-way data binding

- Types

- Angular, Solid.js

## License

MIT