Creating a module

A module is a set of functions for creating components, stores and/or events.
This ensures just the definitions will be shared without the overhead of bundling the FicusJS runtime.

Modules should be minified to optimise load.

A single Javascript file exports a named object module exposing a create method.
The shared module create method will be invoked by the use function in the context of the running application and is passed a single object argument.

It is the responsibility of the create method to use the object argument to create components, stores or events (anything required by the module).

// Export a module object that is invoked by the `use` function
export const module = {
  create (helpers) {
    // create stuff here
  }
}

Async create method

You can return a Promise from the create method that contains async operations.

// use async/await
export const module = {
  async create (helpers) {
    await asyncFunction()
  }
}

// return a Promise
export const module = {
  create (helpers) {
    return asyncFunction()
  }
}

If returning a Promise, the calling module must handle the response before continuing execution.

When using the all features build

When using the all features build dist/index.mjs, the helpers object will contain the following properties.

Additional arguments provided in the helpers object will be passed to the module. For example; the html tagged template literal can be passed for module components to return HTML content.

// Export a module object that is invoked by the `use` function
export const module = {
  create (helpers) {
    // create stuff here
  }
}

The following example creates a component, a store and imports another module for use internally.

import { module as anotherModule } from './path/to/another-module.esm.js'

function createSharedComponent (renderer, html, getStore) {
  return {
    renderer,
    store: getStore('test.store'),
    render () {
      if (this.store.state.hideComponent) {
        return ''
      }
      return html`<span>Shared component</span>`
    }
  }
}

// Export a module object that is invoked by the `use` function
export const module = {
  create ({ createComponent, renderer, html, createStore, getStore, use }) {
    // create stores
    createStore('test.store', { /* store options */ })

    // create components
    createComponent('shared-component', createSharedComponent(renderer, html, getStore))

    // import and use another module
    use(anotherModule, { renderer, html })
  }
}

When using the component build only

When using the component only dist/component.mjs without stores and events, the helpers object argument will contain the following properties:

Additional arguments provided in the helpers object will be passed to the module. For example; the html tagged template literal can be passed for module components to return HTML content.

// Export a module object that is invoked by the `use` function
export const module = {
  create (helpers) {
    // create components here
  }
}