Svelte Redux-Zero State Machine

Screen.js

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 })
		},
	},

}

StateMachine.js

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
	},
}