jonobr1 / jonobr1/react-two.js

[Bug] Normalize Canvas renderer aliases and define constructor-prop updates

Open
#32 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
15
Forks
2
Avg merge
7h 7m
Merged PRs (30d)
3

Description

Summary

Make every renderer value accepted by the Canvas TypeScript API work at runtime, and define what happens when Two.js constructor options change after mount.

Current behavior

The React prop types accept both short aliases and Two.js renderer names:

  • canvas / CanvasRenderer
  • svg / SVGRenderer
  • webgl / WebGLRenderer

The short aliases are currently passed directly to new Two(...). Two.js expects renderer class names (or values from Two.Types), so a value such as type="canvas" fails with Two[this.type] is not a constructor. The README currently demonstrates type="webgl".

Additionally, the Two.js instance is constructed once. Later changes to type, ratio, overdraw, smoothing, or autostart are not applied and do not warn.

This issue does not propose restoring the removed container prop; the current styling API is intentional.

Acceptance criteria

  • Normalize canvas, svg, and webgl to their Two.Types values before construction, or remove unsupported aliases from the public type and documentation.
  • Test every documented renderer spelling.
  • Decide which constructor props are mutable, which recreate the Two.js instance, and which require a React key remount.
  • Apply mutable changes such as play/pause behavior when appropriate.
  • Warn in development when an immutable constructor prop changes without a remount.
  • Preserve children and clean up the old renderer when recreation is supported.
  • Update the README renderer examples to use tested values.
  • Add coverage for renderer selection and post-mount option changes.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the Canvas TypeScript API and the README renderer example, then trace where the Two.js instance is constructed and how options are handled after mount. Define the mutable, recreating, and remount-only behaviors before implementing them. Done means every documented renderer spelling is tested, option changes have defined behavior and warnings where needed, cleanup preserves children, and README examples match the tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.