App.html

<h1>Hello {chart.title} (svelte 2)!</h1>

<input type="text" bind:value="chart.title" />

<div class="svelte3-here" style="border:2px solid red"></div>


<script>
	import AppV3 from './bundle.js';
	let app;
	
	export default {
		 oncreate() {
			 const props = this.get();
			 console.log('svelte2 create', props);
			 app = new AppV3({
				 target: document.querySelector('.svelte3-here'),
				 props
			 });
	
			 app.$on('change', () => {
				 // since the state is the same object
				 // we only need to force an update
				 this.set(this.get())
			 });
			 
		 },
		onstate({ current }) {
			if (app) {
				app.$set(current);
			}
		}
	}
</script>

bundle.js

// this bundle is generated from the following Svelte 3 source:
/*
<script>
	import { beforeUpdate, createEventDispatcher } from 'svelte';
	const dispatch = createEventDispatcher();

	beforeUpdate(() => {
		dispatch('change');
	});
	export let chart = {
		title: 'world'
	}
</script>

<h1>Hello {chart.title} (svelte3)!</h1>
<input type="text" bind:value={chart.title} />
*/

function t(){}function n(t){return t()}function e(){return Object.create(null)}function o(t){t.forEach(n)}function r(t){return"function"==typeof t}function c(t,n){return t!=t?n==n:t!==n||t&&"object"==typeof t||"function"==typeof t}function u(t,n){t.appendChild(n)}function i(t,n,e){t.insertBefore(n,e||null)}function a(t){t.parentNode.removeChild(t)}function l(t){return document.createElement(t)}function f(t){return document.createTextNode(t)}function s(t,n){t.value=null==n?"":n}let d;function p(t){d=t}function h(){if(!d)throw new Error("Function called outside component initialization");return d}function m(){const t=h();return(n,e)=>{const o=t.$$.callbacks[n];if(o){const r=function(t,n){const e=document.createEvent("CustomEvent");return e.initCustomEvent(t,!1,!1,n),e}(n,e);o.slice().forEach(n=>{n.call(t,r)})}}}const $=[],g=[],y=[],v=[],b=Promise.resolve();let x=!1;function _(t){y.push(t)}let E=!1;const w=new Set;function k(){if(!E){E=!0;do{for(let t=0;t<$.length;t+=1){const n=$[t];p(n),A(n.$$)}for($.length=0;g.length;)g.pop()();for(let t=0;t<y.length;t+=1){const n=y[t];w.has(n)||(w.add(n),n())}y.length=0}while($.length);for(;v.length;)v.pop()();x=!1,E=!1,w.clear()}}function A(t){if(null!==t.fragment){t.update(),o(t.before_update);const n=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,n),t.after_update.forEach(_)}}const C=new Set;function N(t,n){-1===t.$$.dirty[0]&&($.push(t),x||(x=!0,b.then(k)),t.$$.dirty.fill(0)),t.$$.dirty[n/31|0]|=1<<n%31}function j(c,u,i,l,f,s,h=[-1]){const m=d;p(c);const $=u.props||{},g=c.$$={fragment:null,ctx:null,props:s,update:t,not_equal:f,bound:e(),on_mount:[],on_destroy:[],before_update:[],after_update:[],context:new Map(m?m.$$.context:[]),callbacks:e(),dirty:h};let y=!1;if(g.ctx=i?i(c,$,(t,n,...e)=>{const o=e.length?e[0]:n;return g.ctx&&f(g.ctx[t],g.ctx[t]=o)&&(g.bound[t]&&g.bound[t](o),y&&N(c,t)),n}):[],g.update(),y=!0,o(g.before_update),g.fragment=!!l&&l(g.ctx),u.target){if(u.hydrate){const t=function(t){return Array.from(t.childNodes)}(u.target);g.fragment&&g.fragment.l(t),t.forEach(a)}else g.fragment&&g.fragment.c();u.intro&&((v=c.$$.fragment)&&v.i&&(C.delete(v),v.i(b))),function(t,e,c){const{fragment:u,on_mount:i,on_destroy:a,after_update:l}=t.$$;u&&u.m(e,c),_(()=>{const e=i.map(n).filter(r);a?a.push(...e):o(e),t.$$.on_mount=[]}),l.forEach(_)}(c,u.target,u.anchor),k()}var v,b;p(m)}function L(n){let e,o,r,c,d,p,h,m,$=n[0].title+"";return{c(){var t,n,u;e=l("h1"),o=f("Hello "),r=f($),c=f(" (svelte3)!"),d=f(" "),p=l("input"),t=p,n="type",null==(u="text")?t.removeAttribute(n):t.getAttribute(n)!==u&&t.setAttribute(n,u)},m(t,a){var l,f,$,g;i(t,e,a),u(e,o),u(e,r),u(e,c),i(t,d,a),i(t,p,a),s(p,n[0].title),h||(l=p,f="input",$=n[1],l.addEventListener(f,$,g),m=()=>l.removeEventListener(f,$,g),h=!0)},p(t,[n]){1&n&&$!==($=t[0].title+"")&&function(t,n){n=""+n,t.data!==n&&(t.data=n)}(r,$),1&n&&p.value!==t[0].title&&s(p,t[0].title)},i:t,o:t,d(t){t&&a(e),t&&a(d),t&&a(p),h=!1,m()}}}function O(t,n,e){const o=m();var r;r=()=>{o("change")},h().$$.before_update.push(r);let{chart:c={title:"world"}}=n;return t.$set=t=>{"chart"in t&&e(0,c=t.chart)},[c,function(){c.title=this.value,e(0,c)}]}export default class extends class{$destroy(){!function(t,n){const e=t.$$;null!==e.fragment&&(o(e.on_destroy),e.fragment&&e.fragment.d(n),e.on_destroy=e.fragment=null,e.ctx=[])}(this,1),this.$destroy=t}$on(t,n){const e=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return e.push(n),()=>{const t=e.indexOf(n);-1!==t&&e.splice(t,1)}}$set(){}}{constructor(t){super(),j(this,t,O,L,c,{chart:0})}}
//# sourceMappingURL=bundle.js.map

data.json

{
  "chart": {
    "title": "world"
  }
}