import { compmd } from "@compmd/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [compmd()],
});

import { init, OpenDocument } from "@compmd/processor";
import { createSandbox } from "@compmd/sandbox";
import { request, sandbox } from "virtual:compmd";
import text from "./notes.comp.md?raw";

await init();

// The document, open with what the app gives it: its packs, from compmd.config.json.
let inputs: Record<string, unknown> = {};
const open = () =>
  new OpenDocument({ ...request, path: "notes.comp.md", files: { "notes.comp.md": text }, now: new Date().toISOString(), inputs });
let opened = open();

// Its page, in a sandboxed frame.
const page = document.getElementById("page") as HTMLElement;
const view = createSandbox(sandbox).open(page, { components: opened.components });
view.render(opened.expanded);

// A reader changed an input: open the document again with its new value.
view.on("set", ({ input, value }) => {
  inputs = { ...inputs, [input]: value };
  opened.free();
  opened = open();
  view.render(opened.expanded);
});

{
  "$schema": "../vite/compmd.config.schema.json",
  "packs": {
    "./app": { "trust": "trusted", "ambient": true }
  },
  "libraries": ["d3"]
}

---
md:
  import:
    - from: ./Stars.svelte
      names: [{ name: Stars, as: stars }, { name: Stars, as: rating }]
  export:
    pack: "@site/app"
    version: "1.0.0"
    names: [stars, rating]
---

```compmd component=stars signature
params:
  value: input<number>
  of: number = 5
```

```compmd component=rating signature
params:
  value: number
  of: number = 5
  readonly: boolean = true
```

<!-- A rating of `of` stars, `value` of them filled. As `stars`, a click sets the input `value` is bound to; as `rating`,
     `readonly`, it only shows a value, from data. -->
<script lang="ts">
  interface Props {
    value: number;
    of: number;
    readonly?: boolean;
    compmd: { set(param: string, value: unknown): void; fallback: { text: string } };
  }

  let { value, of, readonly = false, compmd }: Props = $props();
</script>

{#if readonly}
  <span class="stars" role="img" aria-label="Rated {value} of {of}">
    {#each { length: of } as _, i (i)}<span aria-hidden="true">{i < value ? "★" : "☆"}</span>{/each}
  </span>
{:else}
  <span class="stars" role="radiogroup" aria-label={compmd.fallback.text}>
    {#each { length: of } as _, i (i)}
      <button type="button" role="radio" aria-checked={i + 1 === value} aria-label="{i + 1} of {of}" onclick={() => compmd.set("value", i + 1)}>
        {i < value ? "★" : "☆"}
      </button>
    {/each}
  </span>
{/if}

<style>
  .stars button,
  .stars > span {
    padding: 0 2px;
    border: 0;
    background: none;
    color: var(--accent, #3557c4);
    font-size: 1.6rem;
    line-height: 1;
  }

  .stars button {
    cursor: pointer;
  }
</style>

import { init, OpenDocument } from "@compmd/processor";
import { createPage } from "@compmd/render";

await init();

const open = new OpenDocument({ path: "notes.comp.md", files: { "notes.comp.md": "# Hello world\n" }, now: new Date().toISOString() });
const page = createPage(document.body);
page.render(open.expanded);

// The reader selected `world` and typed `there`: only the heading is processed and rendered again.
page.splice([open.edit(8, 13, "there").splice]);