Use your Svelte components from React & Vue.

Overview

vite-plugin-svelte-bridge

Use your Svelte componentes from React & Vue.

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

Setup

Install the package:

pnpm install -D vite-plugin-svelte-bridge

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

// 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
"exports": {
  ".": "./dist/index.js",
  "./react/*": "./dist/react/*",
  "./vue/*": "./dist/vue/*"
}
  1. Specify which components should be wrapped:
"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:

pnpm install -D my-svelte-lib

Then import the component from the react/ folder:

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

export default function App() {
  return <MyComponent prop={42} onClick={() => alert('clicked')}/>
}

Vue

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

pnpm install -D my-svelte-lib

Then import the component from the vue/ folder:

">

<script setup>
  import MyComponent from 'my-svelte-lib/vue/MyComponent.vue'
script>

<template>
  <MyComponent prop={42} @click="alert('clicked')"/>
template>

Caveats

The following features are not supported (yet?):

  • Slots
  • 2-way data binding
  • Types
  • Angular, Solid.js

License

MIT

You might also like...
dataminr-react-components - Collection of reusable React Components and utility functions.

react-components A collection of reusable React components with their own Flux lifecycle. What's inside react-components? Table Component From a simpl

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web Fluent UI web represents a collection of utilities, React components, and web components for building web applications. This repo is hom

🧩 Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.
🧩 Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.

🧩 Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.

Nextjs-components - A collection of React components
Nextjs-components - A collection of React components

nextjs-components A collection of React components, transcribed from https://vercel.com/design. 1 Motivation TBD Todo's Unit test coverage Unit tests

A React Higher Order Component library to assign class names to components, looks like styled-components

Claas A React Higher Order Component library to assign classNames to components, looks like styled-components Why I always liked to use Tailwind and w

Mintlify Components - Open-source library of UI components made with React and TailwindCSS

Mintlify Components Open-source library of UI components made with React and TailwindCSS. Checkout Mintlify.com to see the components in action. Mintl

React utility component primitives & UI framework for use with Tailwind CSS

Tailwind React UI NB: As the 0.#.# version number suggests this is still very much work in progress, so semantic versioning will not be followed until

🍿⚛Official React library to use Popper, the positioning library

React Popper React wrapper around Popper. important note: Popper is not a tooltip library, it's a positioning engine to be used to build features such

Simple, Easy To Use and Customisable ScrollSpy component for react with callback, typescript, auto-update URL hash and throttle support among others.
Simple, Easy To Use and Customisable ScrollSpy component for react with callback, typescript, auto-update URL hash and throttle support among others.

React UI ScrollSpy ✨ Installation npm install --save react-ui-scrollspy OR yarn add react-ui-scrollspy 🎞 Demo Try it your self here! ⚙️ Usage In your

Owner
Joshua Nussbaum
Joshua Nussbaum
Unified interface for defining components for Vue and React using a single code base

Inkline - Paper Unified interface for defining components for Vue and React using a single code base. Inkline is written and maintained by @alexgrozav

Inkline 38 Sep 16, 2022
React micro-frontends component that loads vue

React micro-frontends component that loads vue

第一名的小蝌蚪 816 Sep 17, 2022
Example Projects With Angular, Vue And React

About The Baloise Design System consists of reusable components and a clearly defined visual style, that can be assembled together to build any number

Baloise Group 1 Dec 9, 2021
DevExtreme - a set of enterprise-ready UI component suites for Angular, React, Vue, and jQuery

DevExtreme DevExtreme is a set of enterprise-ready UI component suites for Angular, React, Vue, and jQuery. It is everything you need to create respon

Developer Express Inc. 1.6k Sep 27, 2022
An opinionated UI Workbench featuring tools like react, styled components, typescript, webpack, jest and storybook all bundled into an easy to use interface

An opinionated UI Workbench featuring tools like react, styled components, typescript, webpack, jest and storybook all bundled into an easy to use interface

Alex Wright 17 Dec 18, 2021
A small Angular library that lets you use React components inside Angular projects

React in Angular and Angular in React This is a small Angular library that lets you use React components inside Angular projects. <react-wrapper [comp

BubblyDoo 7 Aug 23, 2022
⚡️ Simple, Modular & Accessible UI Components for your React Applications

Build Accessible React Apps with Speed ⚡️ Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to

Chakra UI 28.8k Sep 30, 2022
Build your frontend faster with Formation—20+ react-based UI components.

Build your frontend faster with Formation—20+ react-based UI components. Free and open-source.

Josh Schneider 139 Sep 6, 2022
Easily create styled, strictly typed React components and simplify your component code

Slicknode Stylemapper Easily create styled, strictly typed React components and simplify your component code. Stylemapper is a small, flexible and zer

Slicknode 23 Sep 22, 2022
Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System

Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by Reakit System.

Timeless 196 Aug 11, 2022