Skip to content

Clarify the arrow function anti-example and document addon state - #9194

Draft
MannXo wants to merge 2 commits into
processing:mainfrom
MannXo:fix/9171-creating-libraries-doc
Draft

MannXo wants to merge 2 commits into
processing:mainfrom
MannXo:fix/9171-creating-libraries-doc

Conversation

@MannXo

@MannXo MannXo commented Sep 18, 2026

Copy link
Copy Markdown

Addresses #9171

I have used "addresses" rather than "resolves" deliberately, because one of the three points in the issue cannot be fixed in this repo. Details below.

Changes:

Moving the anti-example inside the details tag. The details tag held the explanation of why arrow functions do not work here, but the anti-example itself sat outside it. With the section collapsed, which is how a reader first sees it, you got two code blocks in sequence with nothing marking the first as the one not to copy, and the wrong one came first. Moving the closing tag down puts the example with its explanation.

A new "Adding state to your addon" section. This covers both kinds of state. For the kind push() and pop() leave alone, it shows a default on fn with writes through this, and explains why a variable in the addon function's own scope is not the same thing: that function runs once at registration, so two sketches on a page would share it. For the kind push() and pop() restore, it shows this._renderer.states.setValue() and explains why assigning directly leaks past the pop() that should undo it, which is that setValue is what records the previous value into the diff that pop() reads back.

I put the section with the other reference material after "Accessing custom actions" rather than inside the numbered steps, so the build-along tutorial stays unbroken.

On the first point in the issue, the jsx comments. I think the source here is already correct and the problem is one layer out. In contributor_docs/creating_libraries.md those are written as real HTML comments at lines 86, 91 and 94, inside a fenced html block. What turns them into {/* Other tags */} on the live site is the website build: p5.js-website/src/scripts/builders/contribute.ts has convertMarkdownCommentsToMDX, which rewrites every match of /<!--([\S\s]*?)-->/g so MDX does not choke on HTML comments. It runs over the whole document with no awareness of fenced code blocks, so an example that legitimately contains an HTML comment gets rewritten along with the real ones. So there is nothing to change here for that point, and the fix wants to go to p5.js-website. Happy to open that separately.

One thing I could not work out, and would like your steer on. For the push/pop half I have documented reading and writing an existing key with setValue(), since that is what the diff relies on. What I could not establish is how an addon should register a new key with a default. Renderer.states is a static that each renderer copies at construction (p5.Renderer.js:93), so extending it would have to happen before any renderer is created, and I could not find an addon doing that anywhere. Is that supported, or should addon drawing state live somewhere else? Happy to add that to the section once I know.

Opening as a draft per your suggestion, mostly for that question.

AI disclosure

I used Claude Code assistively on this one. It helped me trace how States, push() and pop() fit together in the source, and it drafted wording for the new section which I then read through and edited before submitting. The behaviour the section describes is checked against src/core/States.js and src/core/p5.Renderer.js rather than assumed, and I take responsibility for what is here. Happy to rework any of the wording.

PR Checklist

Contributor docs only, so no reference entry or unit test applies. npm test passes locally as well (2387 passed).

… tag

The details tag held the explanation of why arrow functions are wrong
here, but the anti-example itself sat outside it. With the details
collapsed a reader saw two code blocks and nothing marking the first as
the one not to copy.
Covers both kinds: per-sketch state defaulted on fn and written through
this, and renderer state written with states.setValue() so that push()
and pop() can restore it. Notes why a variable in the addon function's
scope is shared across sketches, and why assigning to states directly
leaks past the pop() that should undo it.
@welcome

welcome Bot commented Sep 18, 2026

Copy link
Copy Markdown

🎉 Thanks for opening this pull request! For guidance on contributing, check out our contributor guidelines and other resources for contributors!
🤔 Please ensure that your PR links to an issue, which has been approved for work by a maintainer; otherwise, there might already be someone working on it, or still ongoing discussion about implementation. You are welcome to join the discussion in an Issue if you're not sure!
🌸 Once your PR is merged, be sure to add yourself to the list of contributors on the readme page !

Thank You!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant