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@6/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@6'

Custom elements

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

Components

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

Extending components

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

Extending components DEPRECATED

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

Event bus

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

Application state

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

Stores DEPRECATED

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

Internationalization (i18n)

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

Finite state machines and statecharts

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