tonyketcham/p5-svelte

Easily add p5 sketches to a Svelte project 🍛 🌱

Digital and analogue forager + maker 👩‍🌾

• 🔭 Currently working on Modyfi, Flatbread, Puerh.wtf and a hodgepodge of web projects
• 🌱 Learnin GraphQL's underbelly, how to maintain and market open source projects, and whatever sidequest I'm on this week
• 💬 Talk to me about craft tea, JAMstack, UI/UX, rogue gardening, graphic design, photography, 3D printing, and cat
• 😄 Pronouns: he/they

p5-svelte's Issues

Support dynamic resizing of the p5 figure

The current implementation does not allow responsive resizing of the canvas/figure element.

This could perhaps be added using a default prop. However, I'm not too sure if the figure DOM element holds the same attributes as the canvas element. We're currently limited to a figure AFAIK since changing the element to a canvas does not work with the action.

Docs site shows incorrect import statement in examples

Describe the bug
In doc site examples (see Vectors, etc.) the P5 component import statement is the relative path to where P5.svelte lives inside the repo rather than the user-facing import path of p5-svelte.

Currently

import P5 from "$lib/P5.svelte";

Should change to

import P5 from "p5-svelte";

The requested module '{p5 module}' does not provide an export named 'default'

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Create a new sveltekit project with the latest version of p5-svelte and p5
2. Set up the p5 component as listed in the sapper instructions
3. observe how nothing appears in the browser and the devtools console has an error about module exports

Expected behavior
The p5 canvas running properly

Screenshots

Desktop

• OS: Windows 11
• Browser Chrome
• Version 92.0.4515.159

Add docs example with p5.SVG

Pen plotters + p5 + Svelte would be a great example that some may find inspiring. That was one of the founding pieces of inspiration for starting this project and I was disappointed that p5.SVG didn't support ESM/instance mode so I couldn't get an SVG runtime for p5 working w/ p5-svelte.

In a recent release, p5.SVG added support for those pieces 🥳

Typescript: Uncaught ReferenceError: p5 is not defined

Describe the bug
Typescript project fails to load p5 on component mount saying the p5 variable, which must be the one passed from the component to the sketch function is undefined. Used the commands yarn add p5-svelte and yarn add p5 -D

To Reproduce
Create a new Typescript project and copy the example into App component

Expected behavior
p5.js to load.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome, Firefox

TypeScript: p5 re-exported as a type narrows the original aliases

Describe the bug
When accessing nested properties on the re-exported p5 type, it throws a type error that p5 is not a namespace.

Potential fix
In types.d.ts:

import type p5 from 'p5';

export type { default as p5} from 'p5';

/**
 * A p5 instance, re-exported from `@types/p5`.
 */


/**
 * A closure representing a p5 sketch in [Instance Mode](https://github.com/processing/p5.js/wiki/Global-and-instance-mode).
 *
 * Within the closure you can set optional `preload()`, `setup()`, and/or `draw()` properties on the given p5 instance.
 */
export type Sketch = (sketch: p5) => void;

Native p5 classes (like p5.Vector) are undefined

Describe the bug
Good evening! I've been trying to get some of the p5-sound classes, like p5.Amplitude(), to work with this library. Unfortunately they remain undefined.

I noticed in the closed issues and 3.0 release that there was an attempt to fix the constructor issue. It doesn't seem to be working, based on everything I tried and the repl below.

(Thank you for making this library, btw!)

To Reproduce
See the undefined in the console here:
https://svelte.dev/repl/24a6a55ff03c4a65bf1b24fb58d4d575?version=3.31.2

Deprecated package.json svelte field

Deprecated package.json svelte field

Using the svelte field in package.json to point at .svelte source files is deprecated and you must use a svelte export condition. vite-plugin-svelte 3 still resolves it as a fallback, but in a future major release this is going to be removed and without exports condition resolving the library is going to fail.

https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition

Example:

// package.json
  "files": ["dist"],
  "svelte": "dist/index.js",
+ "exports": {
+   ".": {
+     "svelte": "./dist/index.js"
+   }
  }

You can also add individual exports of .svelte files in the exports map which gives users a choice to also use deep imports. See the faq about vite and prebundling why they can be useful at times.

Library authors are highly encouraged to update their packages to add the new exports condition as outlined above. Check out svelte-package which already supports it.

For backwards compatibility, you can keep the svelte field in addition to the exports condition. But make sure that both always resolve to the same files.

Repro steps

Steps to reproduce the behavior:

1. Scaffold a project with sveltekit@latest
2. Install p5-svelte@latest
3. Run npm run dev

Expected behavior

There's no warning about something that's gonna be deprecated in the future... 👀

Screenshot

Desktop

• OS: linux
• Browser: n/a
• Version 3.1.2

p5.saveCanvas function in p5-svelte can not run

• some error info is below:

p5.min.js:2 Uncaught TypeError: e3.includes is not a function
    at i (p5.min.js:2:659907)
    at v.default.downloadFile (p5.min.js:2:669704)
    at p5.min.js:2:624649

• OS: mac
• Browser:chrome
• p5-svelte version 3.1.2

How to use the preload function?

Hi all,

thanks so much for all this effort! I am quite new here. I just wanted to ask if there is any way to use the p5.preload function ?

thanks a lot:)
Robin

Error: Invalid value "iife" for option "output.format"

Describe the bug
I tried to import using NPM and got an error. I deleted the p5 packages and installed pnpm.
When I run my svelte app I get the errors below.

---

[!] Error: Invalid value "iife" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds.
https://rollupjs.org/guide/en/#outputformat
Error: Invalid value "iife" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds.
at error (/Users/williamturner/Desktop/new_svelte/my-svelte-project/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:198:30)
at validateOptionsForMultiChunkOutput (/Users/williamturner/Desktop/new_svelte/my-svelte-project/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:16076:16)
at Bundle.generate (/Users/williamturner/Desktop/new_svelte/my-svelte-project/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:15910:17)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at /Users/williamturner/Desktop/new_svelte/my-svelte-project/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:23833:27
at catchUnfinishedHookActions (/Users/williamturner/Desktop/new_svelte/my-svelte-project/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:23247:20)
at async Promise.all (index 0)
at Task.run (/Users/williamturner/Desktop/new_svelte/my-svelte-project/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/watch.js:246:32)
at Watcher.run (/Users/williamturner/Desktop/new_svelte/my-svelte-project/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/watch.js:173:13)

Support for SvelteKit, better abstractions for Sapper

The Problem

Using this component in SvelteKit & Sapper is incredibly verbose and negates the core point of this component - to abstract away the complexity of mounting p5 to a Svelte project. This component should be functionally hot-swappable between SvelteKit, Sapper, etc. with no special user config required.

The Fix

The user should have an elegantly simple way to drop p5-svelte into any Svelte project. The API needs to be consistent as well as expanded to optionally allow direct access to the p5 instance running under the hood. The installation method needs to be redone to be universally adaptable while increasing both functionality and simplicity without introducing breaking changes.

Cannot access p5's Vector

Describe the bug
I am unable to access p5's native Vector (https://p5js.org/reference/#/p5.Vector), for the purpose of calling its static methods such as p5.Vector.fromAngle(angle)

Issue probably applies to all p5's native classes.

To Reproduce
Steps to reproduce the behavior:

1. Create sveltekit app (may also apply to sapper)
2. Follow the setup suggested here #6 (comment)
3. Attempt to access p5.Vector or P5.Vector
4. Both result in undefined

Expected behavior
Rather than undefined, p5.Vector should be p5's native Vector

Best practice to import a P5.js library

hey there, nice integration, thanks

just wondering what would the best way to go about importing a 3rd party library to use with this component, for e.g. https://antiboredom.github.io/p5.riso?

Improve doc site readability

The typography of the docs site is rather inaccessible without strong contrasting styles between headings and paragraph copy. The spacing between copy and figures also feels too compact and could benefit from more negative space.

missing native mouse function for canvas

p5 thinks of the entire window as the sketch.

p5.mouseDragged = ( ) => { ... }

to inhibit this behavior, the developers of P5 allow you to directly use these functions on the canvas.
link from another issue from p5.js. Copying the suggested codeblock from original answer.
(processing/p5.js#1437)

function setup() {
  var c = createCanvas(100, 100);
  c.mousePressed(doStuff);
}

function doStuff() {
  console.log('clicked on canvas');
}

I noticed this functionally does work on the p5-svelte for mousePressed, mouseReleased, mouseClicked except for mouseDragged.

here's my example block:

p5.setup = () => {
      let canvas = p5.createCanvas(width, height);
      canvas.mousePressed(() => {
        ...
      });
      // Here
      canvas.mouseDragged(() => {
        ...
      });

      canvas.mouseReleased(() => {
        ...
      });

      canvas.mouseClicked(() => {
        ...
      });
    };

I'm not sure if this was intended or if I'm not properly implementing this. If this isn't integrated, I'd like to request this functionality.

Memory leak when leaving the canvas page

Describe the bug
When there is a p5 component on a page and we navigate to another page, the canvas does not seem to be cleaned up. When we return to the page, another canvas is instantiated. If we browse several pages each containing a canvas, the performance is greatly degraded.

To Reproduce
This issue can be demonstrated on the site of p5-svelte:

1. Go to https://p5-svelte.netlify.app/
2. Click on the "Docs" button at the top (to navigate to https://p5-svelte.netlify.app/docs/get-started)
3. Click on the "p5-svelte" button to go back to the main page
4. Repeat the step 2. and 3. several times

You should notice a decrease in the framerate of the main demo (the update of the fractal canopy become jerky).

This can be measured more accurately using the p5.frameRate() function.

With one of my sites in svelte-kit (ssr), I noticed an increase (invariant of the drawing process) of on average 10ms per frame (60fps, so 16ms => 26ms => 36ms...)

Expected behavior
One should be able to navigate between pages without performance impact. The drawing process should be cleared after leaving the page.

Screenshots

Chrome recorded performances on https://p5-svelte.netlify.app/, the green curve represents the DOM nodes that are still held in memory

Desktop

• OS: Windows 11
• Browser: Chrome (v109.0.5414.75), Firefox (v108.0.2)
• Version: 3.1.2

`init` event in docs typo - should be `instance`

The docs incorrectly state an init event is fired on init containing the project instance.

Under the hood the event is actually passed as instance.

Example does not work.

npm install p5-svelte

Error: 'default' is not exported by node_modules/p5/lib/p5.min.js, imported by node_modules/p5-svelte/src/p5/action.js

P5 component prop `project` just gets overwritten on instance init

Describe the bug
Passing in a p5 instance to the project prop does nothing and just gets overwritten when the p5 sketch initializes:

<P5 {sketch} {project} />

It should be made private to the P5.svelte component and an experiment on feature/linked-instances may lead to a future PR introducing the ability to create multiple viewports of the same sketch via passing around a p5 project, presuming that is supported in p5's instance mode.

p5.loadSound is not defined.

Describe the bug
I'm unable to use the p5 sound library.

To Reproduce
Setup everything as the repository says. I'm not having any issues with the p5 default library, only with p5.sound.

Errors
There's an error as "loadSound" could not be called as a function
p5.loadSound is not a function

Version
"p5": "^1.4.0", "p5-svelte": "^2.2.2"

Decrease bundle size

Other p5 wrappers on npm have remarkably small unpacked bundle sizes. Currently, with p5-svelte the entire p5 minified library is being bundled into the index.js file by Rollup.

I would think just keeping p5 as a peer dependency would work. However, perhaps CommonJS from @rollup/plugin-commonjs is what is bundling the library.

When I try building p5-svelte without CommonJS, the build fails with an error:

src/index.js → dist/index.mjs, dist/index.js...
[!] Error: 'default' is not exported by node_modules/p5/lib/p5.min.js, imported by src/p5/action.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
src/p5/action.js (1:7)
1: import p5 from 'p5';
          ^
2: 
3: export default function _p5(node, workspace) {
Error: 'default' is not exported by node_modules/p5/lib/p5.min.js, imported by src/p5/action.js
    at error (/p5-svelte/node_modules/rollup/dist/shared/rollup.js:5265:30)
    at Module.error (/p5-svelte/node_modules/rollup/dist/shared/rollup.js:9858:16)
    at handleMissingExport (/p5-svelte/node_modules/rollup/dist/shared/rollup.js:9747:28)
    at Module.traceVariable (p5-svelte/node_modules/rollup/dist/shared/rollup.js:10251:24)
    at ModuleScope.findVariable (/p5-svelte/node_modules/rollup/dist/shared/rollup.js:8770:39)
    at FunctionScope.findVariable (/p5-svelte/node_modules/rollup/dist/shared/rollup.js:2782:38)
    at ChildScope.findVariable (/p5-svelte/node_modules/rollup/dist/shared/rollup.js:2782:38)
    at Identifier$1.bind (/p5-svelte/node_modules/rollup/dist/shared/rollup.js:4138:40)
    at NewExpression.bind (/p5-svelte/node_modules/rollup/dist/shared/rollup.js:2868:23)
    at NewExpression.bind (/p5-svelte/node_modules/rollup/dist/shared/rollup.js:8035:15)

npm ERR! code 1
npm ERR! path /p5-svelte
npm ERR! command failed
npm ERR! command sh -c rollup -c