├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── demo ├── README.md ├── package-lock.json ├── package.json ├── public │ ├── bundle.css │ ├── bundle.js │ └── index.html ├── src │ ├── SvelteThing.html │ └── main.js └── webpack.config.js ├── index.js ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # react-svelte changelog 2 | 3 | ## 1.0.2 4 | 5 | * Destroy in `componentWillUnmount` 6 | 7 | ## 1.0.1 8 | 9 | * Remove JSX 10 | 11 | ## 1.0.0 12 | 13 | * First release -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2018 Rich Harris 2 | 3 | Permission is hereby granted by the authors of this software, to any person, to use the software for any purpose, free of charge, including the rights to run, read, copy, change, distribute and sell it, and including usage rights to any patents the authors may hold on it, subject to the following conditions: 4 | 5 | This license, or a link to its text, must be included with all copies of the software and any derivative works. 6 | 7 | Any modification to the software submitted to the authors may be incorporated into the software under the terms of this license. 8 | 9 | The software is provided "as is", without warranty of any kind, including but not limited to the warranties of title, fitness, merchantability and non-infringement. The authors have no obligation to provide support or updates for the software, and may not be held liable for any damages, claims or other liability arising from its use. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-svelte 2 | 3 | Use Svelte components inside React apps. 4 | 5 | ```jsx 6 | import { render } from 'react-dom'; 7 | import SvelteComponent from 'react-svelte'; 8 | import Widget from './Widget.html'; 9 | 10 | function MyReactApp(props) { 11 | return ( 12 |
13 |

this is a Svelte component inside a React app:

14 | 15 |
16 | ) 17 | } 18 | 19 | render(, document.querySelector('main')); 20 | ``` 21 | 22 | Demo [here](https://react-svelte.surge.sh), source code for the demo [here](demo). 23 | 24 | 25 | ## Why not just compile Svelte components to custom elements? 26 | 27 | Because React's support for custom elements is [somewhat lacking](https://custom-elements-everywhere.com/). 28 | 29 | 30 | ## Limitations 31 | 32 | This is a fairly basic integration, some things don't currently work and possibly never will: 33 | 34 | * the value of `this` is fixed; changing it after the initial render will have no effect 35 | * you can't use `` 36 | 37 | 38 | ## License 39 | 40 | [LIL](LICENSE) -------------------------------------------------------------------------------- /demo/README.md: -------------------------------------------------------------------------------- 1 | # svelte app 2 | 3 | This is a project template for [Svelte](https://svelte.technology) apps. It lives at https://github.com/sveltejs/template-webpack. 4 | 5 | To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit): 6 | 7 | ```bash 8 | npm install -g degit # you only need to do this once 9 | 10 | degit sveltejs/template-webpack svelte-app 11 | cd svelte-app 12 | ``` 13 | 14 | *Note that you will need to have [Node.js](https://nodejs.org) installed.* 15 | 16 | 17 | ## Get started 18 | 19 | Install the dependencies... 20 | 21 | ```bash 22 | cd svelte-app 23 | npm install 24 | ``` 25 | 26 | ...then start webpack: 27 | 28 | ```bash 29 | npm run dev 30 | ``` 31 | 32 | Navigate to [localhost:8080](http://localhost:8080). You should see your app running. Edit a component file in `src`, save it, and the page should reload with your changes. 33 | 34 | 35 | ## Deploying to the web 36 | 37 | ### With [now](https://zeit.co/now) 38 | 39 | Install `now` if you haven't already: 40 | 41 | ```bash 42 | npm install -g now 43 | ``` 44 | 45 | Then, from within your project folder: 46 | 47 | ```bash 48 | now 49 | ``` 50 | 51 | As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon. 52 | 53 | ### With [surge](https://surge.sh/) 54 | 55 | Install `surge` if you haven't already: 56 | 57 | ```bash 58 | npm install -g surge 59 | ``` 60 | 61 | Then, from within your project folder: 62 | 63 | ```bash 64 | npm run build 65 | surge public 66 | ``` 67 | -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-app", 3 | "version": "1.0.0", 4 | "devDependencies": { 5 | "buble": "^0.19.3", 6 | "buble-loader": "^0.5.1", 7 | "cross-env": "^5.1.5", 8 | "css-loader": "^0.28.11", 9 | "mini-css-extract-plugin": "^0.4.0", 10 | "serve": "^6.5.5", 11 | "style-loader": "^0.21.0", 12 | "svelte": "^2.0.0", 13 | "svelte-loader": "2.9.0", 14 | "webpack": "^4.8.3", 15 | "webpack-cli": "^2.0.14", 16 | "webpack-serve": "^1.0.2" 17 | }, 18 | "scripts": { 19 | "build": "cross-env NODE_ENV=production webpack", 20 | "dev": "webpack-serve --content public --hot" 21 | }, 22 | "dependencies": { 23 | "react": "^16.4.2", 24 | "react-dom": "^16.4.2", 25 | "react-svelte": "^1.0.1" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /demo/public/bundle.css: -------------------------------------------------------------------------------- 1 | h1.svelte-i7qo5m{color:purple} 2 | -------------------------------------------------------------------------------- /demo/public/bundle.js: -------------------------------------------------------------------------------- 1 | !function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=6)}([function(e,t,n){"use strict";e.exports=n(7)},function(e,t,n){"use strict"; 2 | /* 3 | object-assign 4 | (c) Sindre Sorhus 5 | @license MIT 6 | */var r=Object.getOwnPropertySymbols,o=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(e){r[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var n,i,l=function(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(e),u=1;uO.length&&O.push(e)}function U(e,t,n,r){var o=typeof e;"undefined"!==o&&"boolean"!==o||(e=null);var a=!1;if(null===e)a=!0;else switch(o){case"string":case"number":a=!0;break;case"object":switch(e.$$typeof){case u:case c:a=!0}}if(a)return n(r,e,""===t?"."+F(e,0):t),1;if(a=0,t=""===t?".":t+":",Array.isArray(e))for(var i=0;ithis.eventPool.length&&this.eventPool.push(e)}function xe(e){e.eventPool=[],e.getPooled=we,e.release=_e}i(ke.prototype,{preventDefault:function(){this.defaultPrevented=!0;var e=this.nativeEvent;e&&(e.preventDefault?e.preventDefault():"unknown"!=typeof e.returnValue&&(e.returnValue=!1),this.isDefaultPrevented=l.thatReturnsTrue)},stopPropagation:function(){var e=this.nativeEvent;e&&(e.stopPropagation?e.stopPropagation():"unknown"!=typeof e.cancelBubble&&(e.cancelBubble=!0),this.isPropagationStopped=l.thatReturnsTrue)},persist:function(){this.isPersistent=l.thatReturnsTrue},isPersistent:l.thatReturnsFalse,destructor:function(){var e,t=this.constructor.Interface;for(e in t)this[e]=null;for(t=0;t=Pe),Re=String.fromCharCode(32),Me={beforeInput:{phasedRegistrationNames:{bubbled:"onBeforeInput",captured:"onBeforeInputCapture"},dependencies:["compositionend","keypress","textInput","paste"]},compositionEnd:{phasedRegistrationNames:{bubbled:"onCompositionEnd",captured:"onCompositionEndCapture"},dependencies:"blur compositionend keydown keypress keyup mousedown".split(" ")},compositionStart:{phasedRegistrationNames:{bubbled:"onCompositionStart",captured:"onCompositionStartCapture"},dependencies:"blur compositionstart keydown keypress keyup mousedown".split(" ")},compositionUpdate:{phasedRegistrationNames:{bubbled:"onCompositionUpdate",captured:"onCompositionUpdateCapture"},dependencies:"blur compositionupdate keydown keypress keyup mousedown".split(" ")}},Ue=!1;function Fe(e,t){switch(e){case"keyup":return-1!==Te.indexOf(t.keyCode);case"keydown":return 229!==t.keyCode;case"keypress":case"mousedown":case"blur":return!0;default:return!1}}function Ie(e){return"object"==typeof(e=e.detail)&&"data"in e?e.data:null}var De=!1;var ze={eventTypes:Me,extractEvents:function(e,t,n,r){var o=void 0,a=void 0;if(Se)e:{switch(e){case"compositionstart":o=Me.compositionStart;break e;case"compositionend":o=Me.compositionEnd;break e;case"compositionupdate":o=Me.compositionUpdate;break e}o=void 0}else De?Fe(e,n)&&(o=Me.compositionEnd):"keydown"===e&&229===n.keyCode&&(o=Me.compositionStart);return o?(Oe&&(De||o!==Me.compositionStart?o===Me.compositionEnd&&De&&(a=ve()):(me._root=r,me._startText=ge(),De=!0)),o=Ce.getPooled(o,t,n,r),a?o.data=a:null!==(a=Ie(n))&&(o.data=a),ee(o),a=o):a=null,(e=Ne?function(e,t){switch(e){case"compositionend":return Ie(t);case"keypress":return 32!==t.which?null:(Ue=!0,Re);case"textInput":return(e=t.data)===Re&&Ue?null:e;default:return null}}(e,n):function(e,t){if(De)return"compositionend"===e||!Se&&Fe(e,t)?(e=ve(),me._root=null,me._startText=null,me._fallbackText=null,De=!1,e):null;switch(e){case"paste":return null;case"keypress":if(!(t.ctrlKey||t.altKey||t.metaKey)||t.ctrlKey&&t.altKey){if(t.char&&1