svelte-paperscript
v0.1.1
Published
Write PaperScript directly in your Svelte components
Downloads
13
Maintainers
Readme
svelte-paperscript
Write PaperScript code directly in your Svelte components! This preprocessor compiles PaperScript code to JavaScript, allowing you to use operator overloading and the global Paper.js API namespace in your Svelte components.
Installation
npm install --save-dev svelte-paperscript@latest
Add the preprocessor to your Svelte configuration. For example, in a project built with Vite, like a SvelteKit project, use spread-syntax to add the preprocessor to the preprocess
array in svelte.config.js
:
// svelte.config.js
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
import { paperscriptPreprocess } from "svelte-paperscript";
export default {
// https://svelte.dev/docs#compile-time-svelte-preprocess
preprocess: [
...paperscriptPreprocess({
sourceMap: false, // default: true
}),
vitePreprocess(),
],
};
Usage
To make a PaperScript component, create a .svelte
file containing a <script>
tag with lang="paperscript"
and a <canvas>
tag. You can then write your PaperScript code in the <script>
tag.
<script lang="paperscript">
// PaperScript code goes here
var path = new Path.Circle({
center: [80, 50],
radius: 30,
fillColor: 'red'
});
</script>
<canvas class="my-canvas" resize></canvas>
<style>
.my-canvas {
width: 100%;
height: 100%;
}
</style>
When Svelte compiles the component, the preprocessor will compile the PaperScript code to JavaScript and bind it to the canvas
element.
Yes, your linter will complain about everything in the
<script>
tag, as well as the optionalresize
attribute on the<canvas>
tag.
You may not have more than one canvas
per PaperScript component. If you need multiple canvases, you can use multiple components.
Canvas configuration
All Paper.js canvas configuration options (e.g. resize
) can be set on the <canvas>
tag as attributes. See the Paper.js documentation for a list of available options.