{"id":25578,"library":"ficusjs","title":"FicusJS","description":"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.","status":"active","version":"6.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/ficusjs/ficusjs","tags":["javascript","ficusjs","frontend","web-components","typescript"],"install":[{"cmd":"npm install ficusjs","lang":"bash","label":"npm"},{"cmd":"yarn add ficusjs","lang":"bash","label":"yarn"},{"cmd":"pnpm add ficusjs","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Package is ESM-only; use import statements. CommonJS require not supported.","wrong":"const createCustomElement = require('ficusjs')","symbol":"createCustomElement","correct":"import { createCustomElement } from 'ficusjs'"},{"note":"Path exports are not provided; all exports are from the main entry point.","wrong":"import createStore from 'ficusjs/create-store'","symbol":"createStore","correct":"import { createStore } from 'ficusjs'"},{"note":"Renderers are in separate packages like @ficusjs/renderers. html is not directly exported from ficusjs.","wrong":"import { html } from 'ficusjs'","symbol":"html","correct":"import { html } from '@ficusjs/renderers'"}],"quickstart":{"code":"import { createCustomElement, withStore } from 'ficusjs'\nimport { html, renderer } from '@ficusjs/renderers'\n\nconst store = {\n  state: { count: 0 },\n  increment() {\n    this.state.count++\n    this.emit()\n  }\n}\n\ncreateCustomElement('my-counter', withStore(store, {\n  renderer,\n  render() {\n    return html`\n      <div>\n        <p>Count: ${this.state.count}</p>\n        <button onclick=\"${() => this.store.increment()}\">+1</button>\n      </div>\n    `\n  }\n}))","lang":"typescript","description":"Creates a custom element with a local store and htm renderer, incrementing a counter on button click."},"warnings":[{"fix":"Use ES import syntax (import { ... } from 'ficusjs') or upgrade to a build pipeline that supports ESM.","message":"In v6.0.0, the package switched to pure ESM. CommonJS require() will fail.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Install @ficusjs/renderers and import from there.","message":"In v6.0.0, renderers were moved to separate packages (@ficusjs/renderers). Direct import from 'ficusjs' no longer works.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Replace withStore mixin for state management.","message":"The 'withState' mixin is deprecated since v5.2.0, use 'withStore' instead.","severity":"deprecated","affected_versions":">=5.2.0"},{"fix":"Use createCustomElement('tag', { ... }) instead of createCustomElement('tag', () => ({ ... })).","message":"In v4.0.0, the `createCustomElement` signature changed: the second argument is now an object instead of a function.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Add `\"skipLibCheck\": true` to tsconfig.json or install @types/ficusjs if needed.","message":"When using TypeScript, you must set 'skipLibCheck': true or manually configure types. The package exports types but may have strict dependencies.","severity":"gotcha","affected_versions":">=5.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Replace require() with ES import syntax, or use dynamic import().","cause":"The package is ESM-only since v6; using require() to load it.","error":"ERR_REQUIRE_ESM: require() of ES Module <path>/ficusjs/index.js from <path> not supported."},{"fix":"Import html from '@ficusjs/renderers' instead.","cause":"Renderers were moved to separate packages in v6.","error":"'html' is not exported from 'ficusjs'"},{"fix":"Define a custom interface extending the mixin return type, or use type assertion.","cause":"In TypeScript, the store mixin adds 'store' to the element but types may not reflect it automatically.","error":"Property 'store' does not exist on type 'CustomElement'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}