eklbaoa - Code Examples

Code Examples

Hands-on examples demonstrating eklbaoa's component system, reactivity, and routing in action.

1. Basic Components

Creating a Button Component

components/Button.js


eklbaoa.createComponent("btn-primary", {
  template: "<button 
    class='bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded transition-colors' 
    @click='handleClick'>
    {{ label }}
  </button>",
  props: ["label"],
  methods: {
    handleClick() {
      this.$emit("click");
    }
  }
});

Usage: <btn-primary label="Submit" @click="submitForm" />

2. Reactive State

Reactive Counter


const count = ref(0)

function increment() {
  count.value++
}

Counter: {{ count }}

Form Validation


const email = ref('')
const isValid = computed(() => {
  return /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email.value)
})

3. Routing

src/router.js


eklbaoa.router({
  routes: [
    { path: '/', component: HomePage },
    { path: '/about', component: AboutPage },
    { path: '/contact', component: ContactPage },
    { path: '*', component: NotFound }
  ],
  historyMode: 'html5'
});

Navigation: <router-link to="/about">About</router-link>

4. API Integration

Fetch Data Example


onMounted(async () => {
  const response = await fetch('https://api.eklbaoa.dev/data');
  posts.value = await response.json();
})

Form Submission


async function submitForm(data) {
  const response = await fetch('https://api.eklbaoa.dev/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  });
  return await response.json();
}

Bonus: Component Composition

Parent Component

Parent.js


eklbaoa.createComponent("parent-container", {
  template: "<div>
    <child-component 
      :items='items' 
      @update:selection='handleChildUpdate' 
    />
  </div>",
 
  data: { items: [1, 2, 3] },
  methods: {
    handleChildUpdate(newValue) {
      this.selectedItem = newValue;
    }
  }
});

Child Component

Child.js


eklbaoa.createComponent("child-component", {
  props: ['items'],
  events: ['update:selection'],
  template: "<div>
    {{#each items}}<button 
      @click='selectItem(})'
      class='mx-1 px-2 py-1 bg-gray-200 rounded hover:bg-gray-300'
    >{{this}}</button}
  </div>",
 
  methods: {
    selectItem(value) {
      this.$emit('update:selection', value);
    }
  }
});