基础图形

<script lang="ts">
  import Counter from './Counter.svelte'
  let count = $state(0)
  function addCount() {
    count += 1;
  }
</script>

<main>
  <h1>Vite + Svelte</h1>
  <button onclick={addCount}>add</button>
  <div class="card">
    <Counter />
  </div>
  <p>parent count:{count}</p>
</main>

<style>
  p{
    color:red;
  }
</style>

<script lang="ts">
  let count: number = $state(0)
  const increment = () => {
    count += 1
  }
</script>

<button onclick={increment}>
  count is {count}
</button>

import 'svelte/internal/disclose-version'
import * as $ from 'svelte/internal/client'
import Counter from './Counter.svelte'

function addCount(_, count) {
  $.set(count, $.get(count) + 1)
}

var root = $.from_html(
  `<main><h1>Vite + Svelte</h1> <button>add</button> <div class="card"><!></div> <p class="svelte-b8fwxh"> </p></main>`
)

export default function App($$anchor) {
  let count = $.state(0)
  var main = root()
  var button = $.sibling($.child(main), 2)

  button.__click = [addCount, count]

  var div = $.sibling(button, 2)
  var node = $.child(div)

  Counter(node, {})
  $.reset(div)

  var p = $.sibling(div, 2)
  var text = $.child(p)

  $.reset(p)
  $.reset(main)
  $.template_effect(() => $.set_text(text, `parent count:${$.get(count) ?? ''}`))
  $.append($$anchor, main)
}

$.delegate(['click'])

import 'svelte/internal/disclose-version'
import * as $ from 'svelte/internal/client'

const increment = (_, count) => {
  $.set(count, $.get(count) + 1)
}

var root = $.from_html(`<button> </button>`)

export default function Counter($$anchor) {
  let count = $.state(0)
  var button = root()

  button.__click = [increment, count]

  var text = $.child(button)

  $.reset(button)
  $.template_effect(() => $.set_text(text, `count is ${$.get(count) ?? ''}`))
  $.append($$anchor, button)
}

$.delegate(['click'])

export function delegate(events) {
  for (var i = 0; i < events.length; i++) {
    all_registered_events.add(events[i])
  }

  for (var fn of root_event_handles) {
    fn(events)
  }
}

event_handle(array_from(all_registered_events))
root_event_handles.add(event_handle)

var event_handle = (events) => {
  for (var i = 0; i < events.length; i++) {
    var event_name = events[i]

    if (registered_events.has(event_name)) continue
    registered_events.add(event_name)

    var passive = is_passive_event(event_name)

    target.addEventListener(event_name, handle_event_propagation, { passive })

    var n = document_listeners.get(event_name)

    if (n === undefined) {
      document.addEventListener(event_name, handle_event_propagation, { passive })
      document_listeners.set(event_name, 1)
    } else {
      document_listeners.set(event_name, n + 1)
    }
  }
}