Export renderer for rough

[pearmini]

close: https://github.com/charming-art/charming/issues/357

Notebook

https://observablehq.com/d/b6425f1783511b82

Test

import * as cm from "../../src/index.js";
import roughjs from "roughjs";

const roughSvg = roughjs.svg(cm.svg("svg").node());

function changed(oldAttrs, newAttrs) {
  return Object.keys(newAttrs).some((key) => oldAttrs[key] !== newAttrs[key]);
}

class RoughRenderer extends cm.Renderer {
  create() {
    return cm.svg("g").node();
  }
  attrs(node, attrs) {
    const {cx, cy, ...rest} = attrs;
    node.setAttribute("transform", `translate(${cx}, ${cy})`);
    if (changed(node.__attrs__ || {}, rest)) {
      const {r, ...options} = rest;
      const g = roughSvg.circle(0, 0, (rest.r || 0) * 2, options);
      node.replaceChildren(...g.children);
    }
    node.__attrs__ = rest;
  }
}

export function rough() {
  const app = cm.app({
    renderer: new RoughRenderer(),
    loop: true,
    draw: () => [
      cm.svg("circle", {
        cx: Math.abs(Math.sin(Date.now() / 1000) * 200),
        cy: 50,
        r: 40,
        fill: "steelblue",
        fillWeight: 3,
      }),
    ],
  });

  return app.render();
}

[cloudflare-workers-and-pages]

Deploying charming with    Cloudflare Pages

Latest commit:	eeb8a53
Status:	✅  Deploy successful!
Preview URL:	https://cda2f2c9.charming-a13.pages.dev
Branch Preview URL:	https://rough.charming-a13.pages.dev

View logs

[Copilot]

Pull Request Overview

This PR introduces updates to improve the rendering system by integrating a new TestRenderer and propagating a renderer instance throughout the rendering pipeline while closing issue 357. Key changes include:

• Adding tests for a custom TestRenderer that validates element creation and attribute/event assignment.
• Refactoring core rendering files (renderer.js, render.js, and mark.js) to use a centralized Renderer instance.
• Updating exports in index.js to include the Renderer class.

Reviewed Changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
test/renderer.spec.js	Adds a TestRenderer with customized element creation logic.
test/mark.spec.js	Updates tests to validate inclusion of the Renderer instance.
src/renderer.js	Introduces a Renderer class with methods for element creation, events, and attributes handling.
src/render.js	Modifies render() to accept and pass a renderer instance in the context.
src/mark.js	Updates attribute/event application to use the renderer's methods, avoiding direct DOM event listener management.
src/index.js	Exports the Renderer class for broader usage.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (1)

src/mark.js:30

• [nitpick] Avoid shadowing the 'options' parameter within the decorator loop by using a different variable name to improve clarity.

for (const [type, decorator] of decorators) {