Counter

Ein einfacher Counter zum Demonstrieren von State-Management in Islands.

Component HTML

<div class="max-w-md mx-auto">
  <h2 class="text-2xl font-bold text-gray-900 mb-6">{{title}}</h2>

  <div
    data-island="counter"
    data-island-props='{"initialCount": {{initialCount}}}'
  >
    <!-- Counter Island rendert hier -->
  </div>
</div>

Island Code

// islands/counter.js
export default class CounterIsland {
  constructor(element, props = {}) {
    this.element = element;
    this.count = props.initialCount || 0;
    this.init();
  }

  init() {
    this.render();
    this.attachEvents();
  }

  render() {
    this.element.innerHTML = `
      <div class="p-6 bg-white rounded-lg border border-gray-200">
        <div class="flex items-center justify-center gap-4 mb-4">
          <button
            class="decrement px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors"
            aria-label="Decrement"
          >
            -
          </button>
          <span class="count-display text-4xl font-bold text-gray-900 min-w-[3rem] text-center">
            ${this.count}
          </span>
          <button
            class="increment px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
            aria-label="Increment"
          >
            +
          </button>
        </div>
        <button
          class="reset w-full px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition-colors"
        >
          Reset
        </button>
      </div>
    `;
  }

  attachEvents() {
    this.element.querySelector('.increment').addEventListener('click', () => {
      this.count++;
      this.updateDisplay();
    });

    this.element.querySelector('.decrement').addEventListener('click', () => {
      this.count--;
      this.updateDisplay();
    });

    this.element.querySelector('.reset').addEventListener('click', () => {
      this.count = 0;
      this.updateDisplay();
    });
  }

  updateDisplay() {
    const display = this.element.querySelector('.count-display');
    display.textContent = this.count;
  }

  destroy() {
    // Cleanup wenn component entfernt wird
  }
}

<!-- islands/counter.svelte -->
<script>
  let { initialCount = 0 } = $props();

  let count = $state(initialCount);

  function increment() {
    count++;
  }

  function decrement() {
    count--;
  }

  function reset() {
    count = 0;
  }
</script>

<div class="p-6 bg-white rounded-lg border border-gray-200">
  <div class="flex items-center justify-center gap-4 mb-4">
    <button
      onclick={decrement}
      class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors"
      aria-label="Decrement"
    >
      -
    </button>
    <span class="text-4xl font-bold text-gray-900 min-w-[3rem] text-center">
      {count}
    </span>
    <button
      onclick={increment}
      class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
      aria-label="Increment"
    >
      +
    </button>
  </div>
  <button
    onclick={reset}
    class="w-full px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition-colors"
  >
    Reset
  </button>
</div>

// islands/counter.js
import { mount, unmount } from 'svelte';
import Component from './counter.svelte';

export default class CounterIsland {
  constructor(element, props = {}) {
    this.component = mount(Component, {
      target: element,
      props
    });
  }

  destroy() {
    if (this.component) {
      unmount(this.component);
    }
  }
}

// islands/counter.jsx
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';

function CounterComponent({ initialCount = 0 }) {
  const [count, setCount] = useState(initialCount);

  return (
    <div className="p-6 bg-white rounded-lg border border-gray-200">
      <div className="flex items-center justify-center gap-4 mb-4">
        <button
          onClick={() => setCount(count - 1)}
          className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors"
          aria-label="Decrement"
        >
          -
        </button>
        <span className="text-4xl font-bold text-gray-900 min-w-[3rem] text-center">
          {count}
        </span>
        <button
          onClick={() => setCount(count + 1)}
          className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
          aria-label="Increment"
        >
          +
        </button>
      </div>
      <button
        onClick={() => setCount(0)}
        className="w-full px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition-colors"
      >
        Reset
      </button>
    </div>
  );
}

export default class CounterIsland {
  constructor(element, props = {}) {
    this.root = createRoot(element);
    this.root.render(<CounterComponent {...props} />);
  }

  destroy() {
    this.root?.unmount();
  }
}

// islands/counter.jsx
import { h } from 'preact';
import { useState } from 'preact/hooks';
import { render } from 'preact';

function CounterComponent({ initialCount = 0 }) {
  const [count, setCount] = useState(initialCount);

  return (
    <div class="p-6 bg-white rounded-lg border border-gray-200">
      <div class="flex items-center justify-center gap-4 mb-4">
        <button
          onClick={() => setCount(count - 1)}
          class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors"
          aria-label="Decrement"
        >
          -
        </button>
        <span class="text-4xl font-bold text-gray-900 min-w-[3rem] text-center">
          {count}
        </span>
        <button
          onClick={() => setCount(count + 1)}
          class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
          aria-label="Increment"
        >
          +
        </button>
      </div>
      <button
        onClick={() => setCount(0)}
        class="w-full px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition-colors"
      >
        Reset
      </button>
    </div>
  );
}

export default class CounterIsland {
  constructor(element, props = {}) {
    this.element = element;
    render(<CounterComponent {...props} />, element);
  }

  destroy() {
    render(null, this.element);
  }
}

// islands/counter.js
import { createApp } from 'vue';

const CounterComponent = {
  props: {
    initialCount: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      count: this.initialCount
    };
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
    reset() {
      this.count = 0;
    }
  },
  template: `
    <div class="p-6 bg-white rounded-lg border border-gray-200">
      <div class="flex items-center justify-center gap-4 mb-4">
        <button
          @click="decrement"
          class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors"
          aria-label="Decrement"
        >
          -
        </button>
        <span class="text-4xl font-bold text-gray-900 min-w-[3rem] text-center">
          {{ count }}
        </span>
        <button
          @click="increment"
          class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
          aria-label="Increment"
        >
          +
        </button>
      </div>
      <button
        @click="reset"
        class="w-full px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition-colors"
      >
        Reset
      </button>
    </div>
  `
};

export default class CounterIsland {
  constructor(element, props = {}) {
    this.app = createApp(CounterComponent, props);
    this.app.mount(element);
  }

  destroy() {
    this.app?.unmount();
  }
}

// islands/counter.js
import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';

@customElement('counter-component')
class CounterComponent extends LitElement {
  static styles = css`
    :host {
      display: block;
    }
  `;

  @property({ type: Number })
  count = 0;

  constructor() {
    super();
  }

  connectedCallback() {
    super.connectedCallback();
    this.count = this.initialCount || 0;
  }

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }

  reset() {
    this.count = 0;
  }

  render() {
    return html`
      <div class="p-6 bg-white rounded-lg border border-gray-200">
        <div class="flex items-center justify-center gap-4 mb-4">
          <button
            @click=${this.decrement}
            class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors"
            aria-label="Decrement"
          >
            -
          </button>
          <span class="text-4xl font-bold text-gray-900 min-w-[3rem] text-center">
            ${this.count}
          </span>
          <button
            @click=${this.increment}
            class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
            aria-label="Increment"
          >
            +
          </button>
        </div>
        <button
          @click=${this.reset}
          class="w-full px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition-colors"
        >
          Reset
        </button>
      </div>
    `;
  }
}

export default class CounterIsland {
  constructor(element, props = {}) {
    const component = document.createElement('counter-component');
    component.initialCount = props.initialCount || 0;
    element.appendChild(component);
    this.element = element;
  }

  destroy() {
    this.element.innerHTML = '';
  }
}

<!-- islands/counter.html -->
<div
  x-data="{
    count: $el.dataset.initialCount ? parseInt($el.dataset.initialCount) : 0
  }"
  class="p-6 bg-white rounded-lg border border-gray-200"
>
  <div class="flex items-center justify-center gap-4 mb-4">
    <button
      @click="count--"
      class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors"
      aria-label="Decrement"
    >
      -
    </button>
    <span
      x-text="count"
      class="text-4xl font-bold text-gray-900 min-w-[3rem] text-center"
    ></span>
    <button
      @click="count++"
      class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
      aria-label="Increment"
    >
      +
    </button>
  </div>
  <button
    @click="count = 0"
    class="w-full px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition-colors"
  >
    Reset
  </button>
</div>

// islands/counter.js
export default class CounterIsland {
  constructor(element, props = {}) {
    element.dataset.initialCount = props.initialCount || 0;
    element.innerHTML = `
      <div
        x-data="{
          count: ${props.initialCount || 0}
        }"
        class="p-6 bg-white rounded-lg border border-gray-200"
      >
        <div class="flex items-center justify-center gap-4 mb-4">
          <button
            @click="count--"
            class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 transition-colors"
            aria-label="Decrement"
          >
            -
          </button>
          <span
            x-text="count"
            class="text-4xl font-bold text-gray-900 min-w-[3rem] text-center"
          ></span>
          <button
            @click="count++"
            class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
            aria-label="Increment"
          >
            +
          </button>
        </div>
        <button
          @click="count = 0"
          class="w-full px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition-colors"
        >
          Reset
        </button>
      </div>
    `;
  }

  destroy() {
    // Alpine cleanup happens automatically
  }
}

Was du lernst

• State Management: Reaktive Variablen verwalten
• Event Handling: Button-Clicks verarbeiten
• DOM Updates: UI basierend auf State aktualisieren
• Framework-Vergleich: Unterschiede zwischen Vanilla JS, Svelte, React und Vue