Core guide

This covers the core of ichigo.js: reactivity, directives, lifecycle hooks and components.

Create an app

import { VDOM } from '@mintjamsinc/ichigojs';
VDOM.createApp({ data() { return { /* ... */ }; }, methods: { /* ... */ } }).mount('#app');

Options: data() / computed / methods / watch / emits / logLevel. Helpers include \$markRaw / \$nextTick / \$emit / \$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 (deep / immediate)
$markRaw — keep third-party instances 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
`v-bind` (`:`)	attributes, class, style
`v-on` (`@`)	events (modifiers `.stop` `.prevent` `.enter` `.ctrl`, …)
`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`	the various observers

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

Lifecycle hooks

On an element you can declare @mount / @mounted / @update / @updated / @unmount / @unmounted. Each receives \$ctx (element / vnode / userData); objects with a close() method stored in userData 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

Define Web Components with defineComponent.

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" (event.detail).

Tips

Updates are batched on a microtask. Run post-render work in \$nextTick.
v-component and VComponentRegistry are deprecated; use defineComponent.