@spon/core

@spon/core

Using version 1.x

There are breaking changes between 2x and 1x. Please see the v1 branch for v1 docs.

2x has a smaller scope than 1x. withPlugins and eventBus has been moved to @spon/plugins and connect has been moved to @spon/connect. Refs, createNode, and addEventPromise have been removed from version 2x

Installation

npm install @spon/core or yarn add @spon/core

@spon/core is a little framework used to asynchronous load javascript modules based on dom attributes.

Getting started

Add the following code to your main javascript entry point (app.js)

import { loadApp, loadModule } from '@spon/core'
import logger from './behaviours/logger'

// load from data-behaviours
loadApp(name => import(`./behaviours/${name}`), document.body)

// load from file
loadModule({
	module: logger, // required
	id: 'hello', // required
	node: document.getElementById('logger') // default undefined,
	keepAlive: true // default undefined
})

Create a html file with the following snippet

<div data-behaviour="example" id="required-id">...</div>

js/behaviours/example

/**
 * @function example
 * @param {Object} props
 * @property {HTMLElement} props.node
 * @return {Function} a function to unmount
 */
function example({ node }) {
	return () => {
		console.log('i am called when the module is destroyed')
	}
}

export default example

You can also set the module to only load at certain breakpoints:

<div data-behaviour="example" id="required-id" data-query="(max-width: 1024px)">
	...
</div>

example() will only be called when the viewport is smaller than 1024px. Once the module is mounted and the viewport increases to greater than 1024 the returned function will be called. Use this to remove any event listeners or destroy any custom modules

/**
 * @function example
 * @param {Object} props
 * @property {HTMLElement} props.node
 * @return {Function} a function to unmount
 */
function example({ node }) {
	const slide = new SomeSlideLibrary(node)

	return () => {
		slide.destroy()
	}
}

export default example

Behaviours with the 'data-keep-alive' attribute will not be destroyed when navigating betweeen pages. This is only valid if you are using ajax pagaination.

Usage with @spon/plugins and/or @spon/connect

Example:

./store/indx.js

import { init } from '@rematch/core'
import connectStore from '@spon/connect'

const store = init({
	models: {
		count: {
			state: 0,
			reducers: {
				increment(state, payload) {
					return state + payload
				}
			}
		}
	}
})

// this creates a function that is used to bind modules to the store
export const connect = connectStore(store)

export default store

import { connect } from './store'
import { domEvents, withPlugins } from '@spon/plugins'

/* eslint-disable no-console */
function counter({ node, name, plugins: { addEvents }, store, render }) {
	addEvents({
		'click button': () => {
			store.increment(1)
		}
	})

	render(
		({ current }) => {
			node.textContent = current.count
		},
		['count']
	)

	return () => {
		console.log(`destroy: ${name}`)
	}
}

const mapState = store => {
	return {
		count: store.count
	}
}
const mapDispatch = ({ count }) => ({ ...count })

export default withPlugins(domEvents)(
	connect({ mapState, mapDispatch })(counter)
)

Just plugins

export default withPlugins(domEvents)(counter)

Just connect

export default connect(domEvents)(counter)