Skip to main content

Get Started

Simply create a html file and fill it with this content:

<html>
  <head>
    <title>Domy is awesome !</title>
    <script src="https://unpkg.com/@domyjs/core@1.x.x"></script>
  </head>
  <body>
    <p>Count: {{ count }}</p>
    <button @click="count++">Increment</button>
    <button @click="count--">Decrement</button>
  </body>
  <script>
    const { signal, watch } = DOMY;
    DOMY.createApp(() => {
      const count = signal(0);

      watch(
        ({ prevValue, newValue }) => {
          if (newValue < 0) count.value = prevValue;
        },
        () => count
      );

      return {
        count
      };
    }).mount();
  </script>
</html>

Open your file in the browser and see the following result !

Explanation​

Let's break down what's happening in the example above:

1. The Template Syntax​

<p>Count: {{ count }}</p>
<button @click="count++">Increment</button>
<button @click="count--">Decrement</button>
  • {{ count }}: This is a placeholder that DOMY automatically replaces with the current value of count. It updates automatically whenever count changes.
  • @click="...": This is a DOMY directive that binds a click event to the button. When the button is clicked, the expression is evaluated.

2. The App Logic​

const { signal, watch } = DOMY;
  • signal(...): Creates a reactive value. Here, count is initialized to 0. Changing count.value automatically updates all parts of the DOM that reference it.
  • watch(...): Observes changes to one or more signals and lets you react when a value changes.

3. Preventing Negative Values​

watch(
  ({ prevValue, newValue }) => {
    if (newValue < 0) count.value = prevValue;
  },
  () => count
);
  • This watcher monitors count. If the new value is less than 0, it reverts to the previous value. This effectively prevents the counter from going negative.

4. Mounting the App​

DOMY.createApp(() => {
  ...
}).mount();
  • This defines and mounts your app. Everything returned from the createApp function becomes available in the template (HTML) via reactivity.

Advanced Features​

Scope data on current element​

Use d-scope to define data that's only accessible within a specific element:

<div d-scope="{ msg: 'Hello World!' }">
  <p>{{ msg }}</p>
</div>
<p>{{ msg }}</p>
DOMY.createApp(() => ({ msg: 'Bye World!' })).mount();

Conditional Rendering​

Use d-if, d-else-if, and d-else for conditionals:

<div d-scope="{ loggedIn: false }">
  <button @click="loggedIn = !loggedIn">Toggle Login</button>

  <p d-if="loggedIn">Welcome back!</p>
  <p d-else>You are logged out.</p>
</div>

Only one conditional block will show depending on the expression.

Loops with d-for​

Use d-for to loop through arrays. Use d-key to help DOMY efficiently update the DOM:

<div d-scope="{ items: ['Apple', 'Banana', 'Cherry'] }">
  <ul>
    <li d-for="item of items" d-key="item">{{ item }}</li>
  </ul>
</div>

You can also access the index:

<li d-for="item, index of items" d-key="item">{{ index }} - {{ item }}</li>

Dynamic Attributes and Events​

Bind attributes dynamically using the : shorthand for d-bind: prefix. Create event with @ shorthand for d-on: prefix:

<div d-scope="{ active: true }">
  <button @click="active = !active" :style="{ color: active ? 'green' : 'red' }">Toggle Me</button>
  <!-- 
   Same as: 
   <button d-on:click="active = !active" d-bind:style="{ color: active ? 'green' : 'red' }">Toggle Me</button>
  -->
</div>

You can dynamically control any HTML attribute (styles, classes, ARIA attributes, etc.).

Forms with d-model​

Use d-model to bind inputs easily:

<div d-scope="{ filter: 'ba', items: ['bar', 'foo', 'baz'] }">
  <p>Current filter: {{ filter }}</p>
  <input type="text" d-model="filter" />
  <ul>
    <li d-for="item of items" d-key="item" d-show="item.startsWith(filter)">{{ item }}</li>
  </ul>
</div>

d-show hides or shows the element without removing it from the DOM (unlike d-if).

Components​

Create reusable components with DOMY.createComponent:

<counter d-for="i of [1,2,3]" d-key="i" :id="i"></counter>
const { signal } = DOMY;

const counter = DOMY.createComponent({
  props: ['!id'],
  html: `
    <div>
      <p>My component number: {{ $props.id }}</p>
      <p>Count: {{ count }}</p>
      <button @click="count++">Increment</button>
    </div
    >`,
  app: () => {
    const count = signal(0);
    return {
      count
    };
  }
});

DOMY.createApp().components({ counter }).mount();
  • The !id mean the id prop is required
  • Access props using the useProps hook or the $props helper.

Going Further​

These were just a few examples to get you started. To level up with DOMY, check out how to use plugins, explore the different directives, helpers, and hooks.

$ Happy Codding!