Overview & install

ichigo.js (@mintjamsinc/ichigojs) is a lightweight reactive UI framework. With a Vue-like API and a virtual DOM, you build UIs with declarative templates and automatic dependency tracking.

In MintJams it is used across the front end: the Webtop standard and custom apps, the Commerce storefront, and task forms.

Features

  • reactive data / computed / watch (batched on a microtask)
  • a rich set of directives (v-if / v-for / v-model / v-bind / v-on, and more)
  • lifecycle hooks and userData (hold third-party instances with auto-cleanup)
  • reusable Web Components via defineComponent (props / slot / \$emit)
  • full TypeScript support and a small bundle

Install

npm install @mintjamsinc/ichigojs

Bundle formats:

  • ESM — import { VDOM } from '@mintjamsinc/ichigojs';
  • CommonJS — const { VDOM } = require('@mintjamsinc/ichigojs');
  • UMD — load <script src=".../dist/ichigo.umd.js"> and use window.ichigo

A minimal example

<div id="app">
  <h1>{{ message }}</h1>
  <input v-model="message">
  <p>Count: {{ count }}</p>
  <button @click="increment">Increment</button>
</div>

import { VDOM } from '@mintjamsinc/ichigojs';

VDOM.createApp({
  data() { return { message: 'Hello ichigo.js!', count: 0 }; },
  methods: { increment() { this.count++; } }
}).mount('#app');

Next steps