P5 Svelte Versions Save

A major pain-point while writing sketches with p5-svelte has been the lack of passthrough to p5's types. You and your editor were both flying blind. It was up to you to install and import p5's types - a bit of a clunky DX.

This PR integrates p5's types throughout the <P5/> component (+ the docs site 🖍️ ) and exposes a new Sketch type representing the p5 sketch in instance mode. This gives your editor prying eyes into p5's type system, supports autocomplete, and inline documentation of all the p5 goodies to make your life a little easier.

We've also re-exported the p5 type directly from p5 to give you a convenient single point of entry into the p5.js type system in advanced, modular sketches.

😤 Before

https://user-images.githubusercontent.com/43280336/161372626-32634e5b-37b1-4f56-b708-518200b1021f.mov

🧙‍♀️ After

https://user-images.githubusercontent.com/43280336/161373024-01c1a01d-b9ea-4ce4-8787-c42329a50ff6.mov

Here are the updated component props & their types:

// Component props
export let target: HTMLElement = undefined;
export let sketch: Sketch = undefined;
export let parentDivStyle: string = 'display: block;';
export let debug = false;

Mildly breaking changes

• Removes project prop. Closes #124
  • Will only affect strict CI/CD pipelines, doesn't actually break anything in the Svelte compiler or runtime.
  • Also niche and unlikely to affect users since this prop offered no utility.

Doc updates

• A new page has been added to the docs section on TypeScript & Intellisense.
• Introduces a bit of renovation and TLC to the docs site to improve readability & styling DRYness. Closes #122
• Lil typos and inconsistency fixes. Closes #121, #123
• New section in the README on valid component props

Check out all the updates on the p5-svelte docs site!

A new look & more examples

We now have updated branding around p5-svelte thanks to the great work of @rbrdl who made the new logo, redesigned the docs site theme, and added more examples to explore p5-svelte with!

Feel-good thoughts

I'm delighted by the growing community around the project and some of the amazing work I've come across that's created with this project!

If you'd like to contribute to the project, we welcome more examples especially those highlighting how powerful Svelte's reactivity system can be leveraged in p5-svelte. We'd also like to increase the third-party library compatibility with p5-svelte, adapting great projects like p5.riso and more.

This release involved a heavy refactor under the hood! p5-svelte should play nicely in whatever framework you use it in now - Svelte, SvelteKit, etc.

🐪 Breaking Changes

There were no breaking changes for typical use-cases but some popular bug workarounds are now obsolete and may no longer work as expected.

• Importing p5-svelte within onMount is no longer necessary for Sapper/SvelteKit.
• Internal p5 classes that were not previously exposed in p5 instance mode now work as expected (i.e. p5.Vector)

Other new things

Debug mode

You can access the internals of your p5 instance and the available native classes that p5-svelte automatically makes available to your project via passing the debug prop:

<P5 {sketch} debug/>

Events on the <P5/> component

p5-svelte now fires off a few events you can listen to on a <P5/> component.

• ref dispatches a reference to the DOM element target which the p5 instance mounts to.
• init fires on init of the p5 project instance, dispatching a reference to that p5 project instance object.

🌵 Docs

There's now a documentation site that'll be continually built out with installation tutorials and usage examples: https://p5-svelte.netlify.app/

Sapper installation and example now included!

Rollup was previously bundling the minified p5 lib with the compiled js which is totally unnecessary given that p5 is a peer dependency.

Now that's not a problem. The new unpacked size of the build is optimized down to only 26.4 kB. Just for comparison, it was previously 1.25 MB. That's a whopping 97.89% savings in bundle size!

• chore: package.json, rollup.config.js cleanup 4ed82e6
• Reduce bundle size by explicitly removing p5 from bundle 26f3356
• Other commits of me goofin around tryna get even more bundle savings but I took it too far and reverted

You no longer need to manually declare p5 as a dependency. Now simply installing this component will ensure that p5 is automatically installed alongside it. npm install p5-svelte or yarn add p5-svelte is all ya need!

• Updated documentation for v2.2.0 a3fc789
• Merge pull request #3 from tonyketcham/next e20716c
• Merge branch 'master' into next ffa1c32
• Update package.json 4591612
• Update README.md f62f84e

https://github.com/tonyketcham/p5-svelte/compare/v2.2.0-0...v2.2.0

• Testing using peerDeps 90c8348

https://github.com/tonyketcham/p5-svelte/compare/v2.1.0...v2.2.0-0

The component now shouldn't come with any CSS to fight. I discovered that the browser liked to give the P5 component's figure element some annoying default margin and display: block, so I baked in an override that sets it to display: inline and margin: 0.

Now you should have smooth sailing to wrap any additive styles you want around the P5 component!

• Add: document using Svelte's reactivity system b22b710
• Merge branch 'master' of https://github.com/tonyketcham/p5-svelte d63918f
• Update: remove default styles on the p5 figure 50a20df
• Add: Node.js CI build badge 044233f
• Create node.js.yml 196a416
• Add: npm package version badge a99650d
• Make the README look so cute 552c55b
• Add gif example to README 9898859

https://github.com/tonyketcham/p5-svelte/compare/v2.0.1...v2.1.0

• Updated documentation with usage examples and instruction
• Fix: typo 9eeac68
• Create FUNDING.yml a2978d5
• Fix: updated the install script 8aeb5ef

Restructured the default export of the component such that it can be simply used with a custom sketch.

Here's an example:

yarn add p5-svelte

src/App.svelte:

<script>
  import P5 from 'p5-svelte';

  const sketch = (p5) => {
    let x = 0;
    let y = 0;
    let size = 15;
    let threshold = 0;

    p5.setup = () => {
      p5.createCanvas(400, 400);
    };

    p5.draw = () => {
      p5.stroke(1);
      threshold = p5.random(0.75);

      if (threshold < 0.1) p5.line(x, y, x + size, y + size);
      else if (0.505 > threshold > 0.5) p5.line(x, y, x, y + size);
      else p5.line(x, y + size, x + size, y);

      x = x + size;
      if (x > p5.width) {
        x = 0;
        y = y + size;
      }
    };
  };
</script>

<P5 {sketch} />

1fbb635: 2.0.0 6c96029: Add: accept a p5 sketch as a prop e6be1a4: Add: output.globals for p5 module