Installation #

FicusJS can be installed in a number of ways.

CDN #

We recommend using native ES modules in the browser.

<script type="module">
  import { createCustomElement } from 'https://cdn.skypack.dev/ficusjs@5/custom-element'
</script>

FicusJS is available on Skypack.

NPM #

FicusJS works nicely with build tools such as Webpack or Rollup. If you are using a NodeJS tool, you can install the NPM package.

npm install ficusjs

Available builds #

FicusJS only provides ES module builds. For legacy browsers or alternative modules such as CommonJS, it is recommended to use a build tool to transpile the code.

The following builds are available.

All features #

import {
  // components
  createCustomElement,
  createComponent,

  // extending components
  ExtensionBuilder,
  withBreakpointRender,
  withEventBus,
  withI18n,
  withLazyRender,
  withLocalState,
  withStateMachine,
  withStore,
  withStyles,
  withWorkerStore,
  withXStateService,

  // extending components - DEPRECATED
  withStateTransactions,

  // event bus
  createEventBus,
  getEventBus,

  // app state
  createAppState,
  getAppState,
  createPersist,

  // stores - DEPRECATED
  createStore,
  getStore,

  // i18n
  createI18n,
  getI18n,

  // finite state machines and statecharts
  assign,
  createMachine,
  createXStateService,
  getXStateService,
  interpret,

  // modules
  use
} from 'https://cdn.skypack.dev/ficusjs@5'

Custom elements #

import { createCustomElement } from 'https://cdn.skypack.dev/ficusjs@5/custom-element'

Components #

import { createComponent } from 'https://cdn.skypack.dev/ficusjs@5/component'

Extending components #

import { ExtensionBuilder } from 'https://cdn.skypack.dev/ficusjs@5/extension-builder'
import { withBreakpointRender } from 'https://cdn.skypack.dev/ficusjs@5/with-breakpoint-render'
import { withEventBus } from 'https://cdn.skypack.dev/ficusjs@5/with-event-bus'
import { withI18n } from 'https://cdn.skypack.dev/ficusjs@5/with-i18n'
import { withLazyRender } from 'https://cdn.skypack.dev/ficusjs@5/with-lazy-render'
import { withLocalState } from 'https://cdn.skypack.dev/ficusjs@5/with-local-state'
import { withStateMachine } from 'https://cdn.skypack.dev/ficusjs@5/with-state-machine'
import { withStore } from 'https://cdn.skypack.dev/ficusjs@5/with-store'
import { withStyles } from 'https://cdn.skypack.dev/ficusjs@5/with-styles'
import { withWorkerStore } from 'https://cdn.skypack.dev/ficusjs@5/with-worker-store'
import { withXStateService } from 'https://cdn.skypack.dev/ficusjs@5/with-xstate-service'

Extending components DEPRECATED #

import { withStateTransactions } from 'https://cdn.skypack.dev/ficusjs@5/with-state-transactions'

Event bus #

import { createEventBus, getEventBus } from 'https://cdn.skypack.dev/ficusjs@5/event-bus'

Application state #

import { createAppState, getAppState, createPersist } from 'https://cdn.skypack.dev/ficusjs@5/app-state'

Stores DEPRECATED #

import { createStore, getStore } from 'https://cdn.skypack.dev/ficusjs@5/store'

Internationalization (i18n) #

import { createI18n, getI18n } from 'https://cdn.skypack.dev/ficusjs@5/i18n'

Finite state machines and statecharts #

import { assign, createMachine, createXStateService, getXStateService, interpret, wrapXStateService } from 'https://cdn.skypack.dev/ficusjs@5/xstate-service'