Packages
live_svelte
0.1.0-rc2
0.18.0
0.18.0-rc0
0.17.4
0.17.3
0.17.2
0.17.1
0.17.0
0.16.0
0.15.0
0.15.0-rc.6
0.15.0-rc.5
0.15.0-rc.4
0.15.0-rc.3
0.15.0-rc.2
0.15.0-rc.1
0.14.1
0.14.0
0.13.3
0.13.3-rc.1
0.13.2
0.13.1
0.13.0
0.12.0
0.11.0
0.10.2
0.10.1
0.10.0
0.9.0
0.9.0-rc2
0.9.0-rc1
0.9.0-rc0
0.8.0
0.7.1
0.7.0
0.6.0
0.5.1
0.5.0
0.5.0-rc0
0.4.2
0.4.2-rc0
0.4.1
0.4.1-rc0
0.4.0
0.3.5
0.3.5-rc1
0.3.5-rc0
0.3.4
0.3.3
0.3.2
0.3.1
0.3.0
0.3.0-rc1
0.3.0-rc0
0.2.0
0.2.0-rc1
0.2.0-rc0
0.1.0
0.1.0-rc5
0.1.0-rc4
0.1.0-rc3
0.1.0-rc2
0.1.0-rc1
0.1.0-rc0
E2E reactivity for Svelte and LiveView
Current section
Files
Jump to
Current section
Files
assets/js/hooks.js
import * as Components from '../svelte/components/**/*'
let { default: modules, filenames } = Components
filenames = filenames
.map(name => name.replace('../svelte/components/', ''))
.map(name => name.replace('.svelte', ''))
components = Object.assign({}, ...modules.map((m, index) => ({[filenames[index]]: m.default})))
function parsedProps(el) {
const props = el.getAttribute('data-props')
return props ? JSON.parse(props) : {}
}
const SvelteComponent = {
mounted() {
const componentName = this.el.getAttribute('data-name')
if (!componentName) {
throw new Error('Component name must be provided')
}
const requiredApp = components[componentName]
if (!requiredApp) {
throw new Error(`Unable to find ${componentName} component. Did you forget to import it into hooks.js?`)
}
const pushEvent = (event, data, callback) => {
this.pushEvent(event, data, callback)
}
const goto = href => {
liveSocket.pushHistoryPatch(href, 'push', this.el)
}
this._instance = new requiredApp({
target: this.el,
props: {...parsedProps(this.el), pushEvent, goto},
hydrate: true
})
},
updated() {
const pushEvent = (event, data, callback) => {
this.pushEvent(event, data, callback)
}
const goto = href => {
liveSocket.pushHistoryPatch(href, 'push', this.el)
}
this._instance.$$set({...parsedProps(this.el), pushEvent, goto})
},
destroyed() {
this._instance?.$destroy()
}
}
export default {
SvelteComponent
}