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'