@li3/browser

Browser APIs used to declare Li3 components

Using it with HTML

<template component="my-counter">
  <div>
    Count: {{ count }}
    <button on-click="add()">+</button>
    <button on-click="remove()">-</button>
  </div>
  <script setup>
    import { ref } from "@li3/browser";

    export default function () {
      const count = ref(0);

      return {
        count,
        add() {
          count.value++;
        },
        remove() {
          count.value--;
        },
      };
    }
  </script>
</template>
Copy

Using it with ESM

import { ref, createComponent } from "@li3/browser";

export const template = `
<div>
  Count: {{ count }}
  <button on-click="add()">+</button>
  <button on-click="remove()">-</button>
</div>
`;

export function setup() {
  const count = ref(0);

  return {
    count,
    add() {
      count.value++;
    },
    remove() {
      count.value--;
    },
  };
}

createComponent("my-counter", { template, setup });
Copy