efficient html canvas-based code text editor

Examples

import { add, sub } from 'canvy'

console.log(add(1, 2)) // => 3
console.log(sub(2, 5)) // => -3

const h = (canvy.args: unknown[]) => args

console.log(<foo bar="baz" />)
// => [ 'foo', { bar: 'baz' } ]

/** @jsxImportSource sigl */
import $ from 'sigl'

import { CanvyElement, EditorScene, File } from 'canvy'

const scene = new EditorScene(document.body)

const Canvy = $.element(CanvyElement)

const canvy = {
  current: null as null | CanvyElement,
}

$.render(
  <Canvy
    ref={canvy}
    scene={scene}
    files={[
      new File({
        value: `\\ hello

\\ world

f()=sin(330);
`,
      }),
    ]}
  />,
  document.body
)

queueMicrotask(() => {
  canvy.current!.$.effect(({ worker }) => {
    worker.postMessage({
      call: 'onmarkers',
      markers: [
        { index: 4, size: 4 },
        { index: 10, size: 3 },
      ],
    })
  })
})

API