Skip to content

Instantly share code, notes, and snippets.

@arxpoetica
Last active Nov 23, 2017
Embed
What would you like to do?
Svelte Redux-Zero State Machine
import StateMachine from './StateMachine'
export default {
data() {
return {
screenWidth: 0,
screenHeight: 0,
}
},
computed: {
aspect: (aspectIntWidth, aspectIntHeight) => aspectIntWidth / aspectIntHeight,
letterbox: (screenWidth, screenHeight, aspect) => screenWidth / aspect > screenHeight ? false : true,
classes: (hasAspect, letterbox) => hasAspect ? (letterbox ? 'letterbox' : 'windowbox') : '',
},
oncreate() {
StateMachine.connect(this, [
'hasAspect',
'aspectIntWidth',
'aspectIntHeight',
])
this.setDimensions()
this.observe('hasAspect', () => this.setDimensions(), { defer: true })
},
methods: {
setDimensions() {
this.set({
screenWidth: this.refs.screen.offsetWidth,
screenHeight: this.refs.screen.offsetHeight,
})
StateMachine.setState({ aspectWidth: this.refs.aspect.offsetWidth })
StateMachine.setState({ aspectHeight: this.refs.aspect.offsetHeight })
},
},
}
import createStore from 'redux-zero'
import { connect, getActions } from 'redux-zero/svelte'
const initialState = {
scrubPosition: 0,
isScrubbing: false,
scrubMax: 1000,
hasAspect: true,
aspectIntWidth: 16,
aspectIntHeight: 9,
}
const Store = createStore(initialState)
export default {
// Store, // <-- uncomment if we want to expose the Store to the State Machine
getState: Store.getState,
setState: Store.setState,
subscribe: Store.subscribe,
connect: (component, properties) => {
return connect(component, Store, state => {
const mappedProperties = {}
for (let property in properties) {
const key = properties[property]
mappedProperties[key] = state[key]
}
return mappedProperties
})
},
bindAction: actions => {
return getActions(Store, (/* Store */) => ({
method: actions,
})).method
},
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment