ficusjs

library6.3.0jsnpmunverified

FicusJS is a set of lightweight functions for building modern web applications using web components. The current stable version is 6.3.0, released regularly with active maintenance. It provides features like fast custom elements, renderers (htm, lit-html, uhtml, Preact), local state, finite state machines, application stores, event bus, i18n, and more. Key differentiators: small footprint, no build step required, works with native ES modules, and ships TypeScript types. It is designed to be extensible and framework-agnostic, supporting multiple rendering libraries.

web-framework

npm install ficusjs

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · FICUSJS

ficusjs

web-frameworkjavascriptv6.3.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

createCustomElement

✓ import { createCustomElement } from 'ficusjs'

✗ const createCustomElement = require('ficusjs')

Package is ESM-only; use import statements. CommonJS require not supported.

createStore

✓ import { createStore } from 'ficusjs'

✗ import createStore from 'ficusjs/create-store'

Path exports are not provided; all exports are from the main entry point.

html

✓ import { html } from '@ficusjs/renderers'

✗ import { html } from 'ficusjs'

Renderers are in separate packages like @ficusjs/renderers. html is not directly exported from ficusjs.

Creates a custom element with a local store and htm renderer, incrementing a counter on button click.

import { createCustomElement, withStore } from 'ficusjs' import { html, renderer } from '@ficusjs/renderers' const store = { state: { count: 0 }, increment() { this.state.count++ this.emit() } } createCustomElement('my-counter', withStore(store, { renderer, render() { return html` <div> <p>Count: ${this.state.count}</p> <button onclick="${() => this.store.increment()}">+1</button> </div> ` } }))

Debug

Known issues

breakingIn v6.0.0, the package switched to pure ESM. CommonJS require() will fail.

fix

Use ES import syntax (import { ... } from 'ficusjs') or upgrade to a build pipeline that supports ESM.

affects: >=6.0.0

breakingIn v6.0.0, renderers were moved to separate packages (@ficusjs/renderers). Direct import from 'ficusjs' no longer works.

fix

Install @ficusjs/renderers and import from there.

affects: >=6.0.0

deprecatedThe 'withState' mixin is deprecated since v5.2.0, use 'withStore' instead.

fix

Replace withStore mixin for state management.

affects: >=5.2.0

breakingIn v4.0.0, the `createCustomElement` signature changed: the second argument is now an object instead of a function.

fix

Use createCustomElement('tag', { ... }) instead of createCustomElement('tag', () => ({ ... })).

affects: >=4.0.0

gotchaWhen using TypeScript, you must set 'skipLibCheck': true or manually configure types. The package exports types but may have strict dependencies.

fix

Add `"skipLibCheck": true` to tsconfig.json or install @types/ficusjs if needed.

affects: >=5.0.0

Errors

Common errors & fixes

ERR_REQUIRE_ESM: require() of ES Module <path>/ficusjs/index.js from <path> not supported.

The package is ESM-only since v6; using require() to load it.

fix

Replace require() with ES import syntax, or use dynamic import().

'html' is not exported from 'ficusjs'

Renderers were moved to separate packages in v6.

fix

Import html from '@ficusjs/renderers' instead.

Property 'store' does not exist on type 'CustomElement'

In TypeScript, the store mixin adds 'store' to the element but types may not reflect it automatically.

fix

Define a custom interface extending the mixin return type, or use type assertion.

Upgrade

Version history

6.3.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/ficusjs/ficusjs ↗

packagehttps://www.npmjs.com/package/ficusjs ↗

homepagehttps://ficusjs.org ↗