Weird framework idea

app.component.html

<button data-on-click="updateCount()">Count</button>
<p>Count: {{count.value}}</p>
<p>Double: {{double.value}}</p>
<p data-if="count.value % 2 === 0">{{count.value}} is even</p>
<p data-if="count.value % 2 !== 0">{{count.value}} is odd</p>
<Child/>

app.component.ts

import {createState, Component, registerComponent} from "./framework.ts";

@Component({
  selector: "App",
  templateUrl: "./app.component.html",
  imports: [
    ChildComponent
  ]
})
function AppComponent() {
  // Setup function only runs once
  let count = createState(
    0
  );

  effect(() => {
    document.title = `Count: ${count.value}`;
  })

  const double = computed(() => count.value * 2);

  function updateCount() {
    count.value++;
  }

  return {
    count,
    double,
    updateCount
  }
}

registerComponent(AppComponent);