https://github.com/baseballyama/svelte-in-react-ts
Using Svelte component in React app
https://github.com/baseballyama/svelte-in-react-ts
Last synced: about 2 months ago
JSON representation
Using Svelte component in React app
- Host: GitHub
- URL: https://github.com/baseballyama/svelte-in-react-ts
- Owner: baseballyama
- Created: 2022-07-18T09:09:25.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-07-20T14:34:45.000Z (over 3 years ago)
- Last Synced: 2025-02-14T03:48:00.796Z (9 months ago)
- Language: JavaScript
- Size: 1.13 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Using Svelte from React with TypeScript
This repository was created based on [Tan Li Hau's video](https://www.youtube.com/watch?v=6MI9mirMh6w).
And I added TypeScript support.
DEMO: https://baseballyama.github.io/svelte-in-react-ts/
This repository supported below features.
- Reactive props between React and Svelte / Two-way data binding
- Reactive context between React and Svelte
- Calling Svelte functions from React
## Setup
### Install React (commit: [286de46](https://github.com/baseballyama/svelte-in-react/commit/286de46), [a722fec](https://github.com/baseballyama/svelte-in-react/commit/a722fec))
```sh
npx create-react-app svelte-in-react --template typescript
cd svelte-in-react
npm i
# to configure about Svelte, I need to modify webpack config.
npm run eject
```
### Install Svelte (commit: [4009d74](https://github.com/baseballyama/svelte-in-react/commit/4009d74))
```sh
npm install --save svelte svelte-loader svelte-preprocess
# for TypeScript.
curl https://raw.githubusercontent.com/sveltejs/language-tools/master/packages/svelte2tsx/svelte-shims.d.ts > ./src/svelte-shims.d.ts
```
And add svelte-loader config at `config/webpack.config.js`.
```js
// add this
const sveltePreprocess = require("svelte-preprocess");
module.exports = function (webpackEnv) {
module: {
rules: [
{
oneOf: [
// add this.
{
test: [/\.svelte$/],
loader: require.resolve("svelte-loader"),
options: {
preprocess: sveltePreprocess()
}
},
]
}
]
}
}
```