UI framework (ichigojs)

ichigo.js (@mintjamsinc/ichigojs) is a lightweight reactive UI framework. With a Vue-like API and a virtual DOM, it is used to build MintJams CMS apps and storefronts.

Install & load

npm install @mintjamsinc/ichigojs

It ships in several bundle formats:

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

Create an app

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

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

Options: data(), computed, methods, watch, emits, logLevel. The instance offers helpers such as \$markRaw, \$nextTick, \$emit and \$ctx.

Reactivity

data — values returned from data() are automatically reactive (this.count++, this.items.push(...) repaint)
computed — dependencies are tracked and cached; both read-only and writable ({ get, set })
watch — react to changes; supports deep and immediate
$markRaw — keep third-party instances (e.g. Chart.js) non-reactive

computed: {
  fullName: {
    get() { return `\${this.firstName} \${this.lastName}`; },
    set(v) { const [f, l] = v.split(' '); this.firstName = f; this.lastName = l; }
  }
}

Directives

Directive	Purpose
`v-if` / `v-else-if` / `v-else`	conditional rendering
`v-for`	list rendering (`:key` recommended)
`v-show`	toggle visibility (`display`)
`v-bind` (`:`)	bind attributes, class, style
`v-on` (`@`)	events (modifiers `.stop` `.prevent` `.enter` …)
`v-model`	two-way binding (`.lazy` `.number` `.trim`)
`v-text` / `v-html`	text / raw HTML (`v-html` is an XSS risk)
`v-focus`	focus control (`.select` `.cursor-end`)
`v-resize` / `v-intersection` / `v-performance`	ResizeObserver / IntersectionObserver / PerformanceObserver

<input v-model.trim="message">
<li v-for="(item, i) in items" :key="item.id">{{ item.name }}</li>
<button @click="increment">+1</button>

Lifecycle hooks

On an element you can declare @mount / @mounted / @update / @updated / @unmount / @unmounted. Each hook receives \$ctx (element / vnode / userData). userData is storage unaffected by reactivity, and objects with a close() method are cleaned up automatically on teardown.

methods: {
  onMounted(\$ctx) {
    const chart = new Chart(\$ctx.element.querySelector('canvas'), { /* ... */ });
    \$ctx.userData.set('chart', chart);
  },
  onUnmount(\$ctx) { \$ctx.userData.get('chart')?.destroy(); }
}

Components

Use defineComponent to define reusable Web Components with props, slot and \$emit.

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

defineComponent('my-list', {
  template: '#my-list',
  props: ['items'],
  data() { return { items: this.items ?? [] }; }
});

<my-list :items="searchResults">
  <span slot="empty">No results.</span>
</my-list>

Emit events with this.\$emit('selected', { id: 42 }); the parent listens with @selected="onSelected" (payload in event.detail).

Tips

Updates are batched on a microtask. Run post-render work in \$nextTick.
v-component and VComponentRegistry are deprecated; use defineComponent for new code.
See the ichigojs examples for live demos.