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
Screen.Recording.2022-04-02.at.2.42.50.AM.mov
🧙♀️ After
Screen.Recording.2022-04-02.at.2.53.15.AM.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
projectprop. 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
docssection 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!