├── .gitignore
├── .vscode
    └── extensions.json
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── public
    ├── logo.png
    └── logo.svg
├── src
    ├── App.vue
    ├── P5Plugin.ts
    ├── components
    │   ├── P5.vue
    │   └── index.ts
    ├── env.d.ts
    └── main.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | yarn.lock
26 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar"]
3 | }
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | > 🔍 Seeking New Maintainer 🔍
  2 | >
  3 | > This repository is currently not under active development and is searching for a new maintainer to take over and drive its future growth. If you're interested in becoming the new steward of this project, please get in touch. Your contribution can help keep this project alive and valuable for the community.
  4 | 
  5 | <br>
  6 | 
  7 | <div align="center">
  8 | <img src="https://github.com/Nico-Mayer/p5vue/blob/main/public/logo.svg" alt="logo" width="200" />
  9 | </div>
 10 | 
 11 | <h1 align="center">p5vue</h1>
 12 | 
 13 | <p align="center">
 14 | <a href="https://www.npmjs.com/package/p5vue">
 15 | 	<img src="https://img.shields.io/npm/v/p5vue" alt="NPM version">
 16 | </a>
 17 | </p>
 18 | <p>
 19 | 	This npm package provides a  Vue 3 <code>P5</code> componente which accepts a <code>sketch</code/> property, making it extremely easy to get one or more <a href="https://p5js.org/">p5</a> sketches running in Vue without scoping issues.
 20 | </p>
 21 | <br/>
 22 | 
 23 | Compatible with **_Vue 3_** & **_Nuxt Js_**.
 24 | 
 25 | <br/>
 26 | 
 27 | <p align="center">
 28 | 	<a href="https://p5vue-homepage.vercel.app/" target="_blank">📘 Docs + Examples</a>
 29 | </p>
 30 | 
 31 | ## Usage
 32 | 
 33 | ### Install:
 34 | 
 35 | ```fish
 36 | npm i p5vue
 37 | ```
 38 | 
 39 | <p>
 40 | Depending on your environment, you may be alerted upon installing <code>p5vue</code> that <code>p5</code> is a required peer dependency which you must install yourself.
 41 | If this is the case:
 42 | </p>
 43 | 
 44 | ```fish
 45 | npm i -D p5
 46 | ```
 47 | 
 48 | Now add `p5vue` to your project:
 49 | 
 50 | - Import the Plugin to your main.js file
 51 | 
 52 |   ```javascript
 53 |   // main.js || main.ts
 54 |   import { createApp } from "vue"
 55 |   import App from "./App.vue"
 56 | 
 57 |   import p5vue from "p5vue"
 58 | 
 59 |   createApp(App).use(p5vue).mount("#app")
 60 |   ```
 61 | 
 62 | - Use the <code>P5</code> component inside the app
 63 | 
 64 |   ```vue
 65 |   <script setup>
 66 |   import p5 from "p5"
 67 | 
 68 |   const sketch = (p5) => {
 69 |     p5.setup = () => {
 70 |       p5.createCanvas(500, 500)
 71 |     }
 72 | 
 73 |     p5.draw = () => {
 74 |       p5.background("#fff000")
 75 |     }
 76 |   }
 77 |   </script>
 78 | 
 79 |   <template>
 80 |     <P5 :sketch="sketch" />
 81 |   </template>
 82 |   ```
 83 | 
 84 | ## Nuxt 3 Setup
 85 | 
 86 | <details>
 87 | <summary>Setup for Nuxt 3 with SSR</summary>
 88 | 
 89 | ##### To set the plugin up for Nuxt 3 we have to use some tricks to get it workin.
 90 | 
 91 | - Install p5vue
 92 |   ```fish
 93 |   npm i p5vue
 94 |   ```
 95 | - Add Plugin to nuxt
 96 | 
 97 |   - Crate a plugins folder in your root directory `~/plugins`
 98 |   - add a `p5vue.client.ts` file in the plugins folder
 99 |   - Add the plugin to Nuxt like this:
100 | 
101 |     ```javascript
102 |     // p5vue.client.ts
103 | 
104 |     import { defineNuxtPlugin } from "#app"
105 |     //@ts-ignore
106 |     import p5vue from "p5vue"
107 |     export default defineNuxtPlugin((nuxtApp) => {
108 |       nuxtApp.vueApp.use(p5vue)
109 |     })
110 |     ```
111 | 
112 |   - Create a `P5Wrapper.client.vue` file in `~/components`
113 | 
114 |     ```vue
115 |     // P5Wrapper.client.vue
116 | 
117 |     <script setup lang="ts">
118 |     const props = defineProps(["sketch"])
119 |     const sketch = props.sketch
120 |     </script>
121 | 
122 |     <template>
123 |       <P5 :sketch="sketch" />
124 |     </template>
125 |     ```
126 | 
127 |     We need this wrapper component to ensure p5 only loads on client side.
128 | 
129 |   - Now we can use our custom Wrapper inside the complete Nuxt App like this:
130 | 
131 |     ```vue
132 |     // App.vue
133 | 
134 |     <script setup lang="ts">
135 |     import p5 from "p5"
136 | 
137 |     const sketch = (p5: p5) => {
138 |       p5.setup = () => {
139 |         p5.createCanvas(500, 500)
140 |       }
141 | 
142 |       p5.draw = () => {
143 |         p5.background("#fff000")
144 |       }
145 |     }
146 |     </script>
147 |     <template>
148 |       <P5Wrapper :sketch="sketch" />
149 |     </template>
150 |     ```
151 | 
152 | </details>
153 | 
154 | ## Typescript:
155 | 
156 | Typescript inst fully supported yet.
157 | To get the Plugin working without type errors do this:
158 | 
159 | - ```typescript
160 |   // main.ts
161 |   import { createApp } from "vue"
162 |   import App from "./App.vue"
163 |   // @ts-ignore
164 |   import p5vue from "p5vue"
165 | 
166 |   createApp(App).use(p5vue).mount("#app")
167 |   ```
168 | 
169 | - ```vue
170 |   // Add the p5 type in function argument
171 |   <script setup>
172 |   import p5 from "p5"
173 | 
174 |   const sketch = (p5: p5) => {
175 |     p5.setup = () => {
176 |       p5.createCanvas(500, 500)
177 |     }
178 | 
179 |     p5.draw = () => {
180 |       p5.background("#fff000")
181 |     }
182 |   }
183 |   </script>
184 | 
185 |   <template>
186 |     <P5 :sketch="sketch" />
187 |   </template>
188 |   ```
189 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite App</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.ts"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
   1 | {
   2 |   "name": "p5vue",
   3 |   "version": "0.0.3",
   4 |   "lockfileVersion": 2,
   5 |   "requires": true,
   6 |   "packages": {
   7 |     "": {
   8 |       "name": "p5vue",
   9 |       "version": "0.0.3",
  10 |       "license": "Apache-2.0",
  11 |       "dependencies": {
  12 |         "@types/p5": "^1.4.2",
  13 |         "p5": "^1.4.1",
  14 |         "vue": "^3.2.25"
  15 |       },
  16 |       "devDependencies": {
  17 |         "@vitejs/plugin-vue": "^2.3.3",
  18 |         "rollup-plugin-typescript2": "^0.32.1",
  19 |         "typescript": "^4.5.4",
  20 |         "vite": "^2.9.9",
  21 |         "vue-tsc": "^0.34.7"
  22 |       }
  23 |     },
  24 |     "node_modules/@babel/parser": {
  25 |       "version": "7.18.5",
  26 |       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.5.tgz",
  27 |       "integrity": "sha512-YZWVaglMiplo7v8f1oMQ5ZPQr0vn7HPeZXxXWsxXJRjGVrzUFn9OxFQl1sb5wzfootjA/yChhW84BV+383FSOw==",
  28 |       "license": "MIT",
  29 |       "bin": {
  30 |         "parser": "bin/babel-parser.js"
  31 |       },
  32 |       "engines": {
  33 |         "node": ">=6.0.0"
  34 |       }
  35 |     },
  36 |     "node_modules/@rollup/pluginutils": {
  37 |       "version": "4.2.1",
  38 |       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
  39 |       "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
  40 |       "dev": true,
  41 |       "dependencies": {
  42 |         "estree-walker": "^2.0.1",
  43 |         "picomatch": "^2.2.2"
  44 |       },
  45 |       "engines": {
  46 |         "node": ">= 8.0.0"
  47 |       }
  48 |     },
  49 |     "node_modules/@types/p5": {
  50 |       "version": "1.4.2",
  51 |       "resolved": "https://registry.npmjs.org/@types/p5/-/p5-1.4.2.tgz",
  52 |       "integrity": "sha512-tzJ2PdmeXlX8tidbA1/pQEhs0MHVWam0K4ux5ri0GrZXhBU3QrpTpSVzNaBDuo6KheryHdH8wR82x1nPvxo42g=="
  53 |     },
  54 |     "node_modules/@vitejs/plugin-vue": {
  55 |       "version": "2.3.3",
  56 |       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.3.tgz",
  57 |       "integrity": "sha512-SmQLDyhz+6lGJhPELsBdzXGc+AcaT8stgkbiTFGpXPe8Tl1tJaBw1A6pxDqDuRsVkD8uscrkx3hA7QDOoKYtyw==",
  58 |       "dev": true,
  59 |       "license": "MIT",
  60 |       "engines": {
  61 |         "node": ">=12.0.0"
  62 |       },
  63 |       "peerDependencies": {
  64 |         "vite": "^2.5.10",
  65 |         "vue": "^3.2.25"
  66 |       }
  67 |     },
  68 |     "node_modules/@volar/code-gen": {
  69 |       "version": "0.34.17",
  70 |       "resolved": "https://registry.npmjs.org/@volar/code-gen/-/code-gen-0.34.17.tgz",
  71 |       "integrity": "sha512-rHR7BA71BJ/4S7xUOPMPiB7uk6iU9oTWpEMZxFi5VGC9iJmDncE82WzU5iYpcbOBCVHsOjMh0+5CGMgdO6SaPA==",
  72 |       "dev": true,
  73 |       "license": "MIT",
  74 |       "dependencies": {
  75 |         "@volar/source-map": "0.34.17"
  76 |       }
  77 |     },
  78 |     "node_modules/@volar/source-map": {
  79 |       "version": "0.34.17",
  80 |       "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-0.34.17.tgz",
  81 |       "integrity": "sha512-3yn1IMXJGGWB/G817/VFlFMi8oh5pmE7VzUqvgMZMrppaZpKj6/juvJIEiXNxRsgWc0RxIO8OSp4htdPUg1Raw==",
  82 |       "dev": true,
  83 |       "license": "MIT"
  84 |     },
  85 |     "node_modules/@volar/vue-code-gen": {
  86 |       "version": "0.34.17",
  87 |       "resolved": "https://registry.npmjs.org/@volar/vue-code-gen/-/vue-code-gen-0.34.17.tgz",
  88 |       "integrity": "sha512-17pzcK29fyFWUc+C82J3JYSnA+jy3QNrIldb9kPaP9Itbik05ZjEIyEue9FjhgIAuHeYSn4LDM5s6nGjxyfhsQ==",
  89 |       "dev": true,
  90 |       "license": "MIT",
  91 |       "dependencies": {
  92 |         "@volar/code-gen": "0.34.17",
  93 |         "@volar/source-map": "0.34.17",
  94 |         "@vue/compiler-core": "^3.2.36",
  95 |         "@vue/compiler-dom": "^3.2.36",
  96 |         "@vue/shared": "^3.2.36"
  97 |       }
  98 |     },
  99 |     "node_modules/@volar/vue-typescript": {
 100 |       "version": "0.34.17",
 101 |       "resolved": "https://registry.npmjs.org/@volar/vue-typescript/-/vue-typescript-0.34.17.tgz",
 102 |       "integrity": "sha512-U0YSVIBPRWVPmgJHNa4nrfq88+oS+tmyZNxmnfajIw9A/GOGZQiKXHC0k09SVvbYXlsjgJ6NIjhm9NuAhGRQjg==",
 103 |       "dev": true,
 104 |       "license": "MIT",
 105 |       "dependencies": {
 106 |         "@volar/code-gen": "0.34.17",
 107 |         "@volar/source-map": "0.34.17",
 108 |         "@volar/vue-code-gen": "0.34.17",
 109 |         "@vue/compiler-sfc": "^3.2.36",
 110 |         "@vue/reactivity": "^3.2.36"
 111 |       }
 112 |     },
 113 |     "node_modules/@vue/compiler-core": {
 114 |       "version": "3.2.37",
 115 |       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.37.tgz",
 116 |       "integrity": "sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==",
 117 |       "license": "MIT",
 118 |       "dependencies": {
 119 |         "@babel/parser": "^7.16.4",
 120 |         "@vue/shared": "3.2.37",
 121 |         "estree-walker": "^2.0.2",
 122 |         "source-map": "^0.6.1"
 123 |       }
 124 |     },
 125 |     "node_modules/@vue/compiler-dom": {
 126 |       "version": "3.2.37",
 127 |       "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz",
 128 |       "integrity": "sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==",
 129 |       "license": "MIT",
 130 |       "dependencies": {
 131 |         "@vue/compiler-core": "3.2.37",
 132 |         "@vue/shared": "3.2.37"
 133 |       }
 134 |     },
 135 |     "node_modules/@vue/compiler-sfc": {
 136 |       "version": "3.2.37",
 137 |       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.37.tgz",
 138 |       "integrity": "sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==",
 139 |       "license": "MIT",
 140 |       "dependencies": {
 141 |         "@babel/parser": "^7.16.4",
 142 |         "@vue/compiler-core": "3.2.37",
 143 |         "@vue/compiler-dom": "3.2.37",
 144 |         "@vue/compiler-ssr": "3.2.37",
 145 |         "@vue/reactivity-transform": "3.2.37",
 146 |         "@vue/shared": "3.2.37",
 147 |         "estree-walker": "^2.0.2",
 148 |         "magic-string": "^0.25.7",
 149 |         "postcss": "^8.1.10",
 150 |         "source-map": "^0.6.1"
 151 |       }
 152 |     },
 153 |     "node_modules/@vue/compiler-ssr": {
 154 |       "version": "3.2.37",
 155 |       "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.37.tgz",
 156 |       "integrity": "sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==",
 157 |       "license": "MIT",
 158 |       "dependencies": {
 159 |         "@vue/compiler-dom": "3.2.37",
 160 |         "@vue/shared": "3.2.37"
 161 |       }
 162 |     },
 163 |     "node_modules/@vue/reactivity": {
 164 |       "version": "3.2.37",
 165 |       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.37.tgz",
 166 |       "integrity": "sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==",
 167 |       "license": "MIT",
 168 |       "dependencies": {
 169 |         "@vue/shared": "3.2.37"
 170 |       }
 171 |     },
 172 |     "node_modules/@vue/reactivity-transform": {
 173 |       "version": "3.2.37",
 174 |       "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.37.tgz",
 175 |       "integrity": "sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==",
 176 |       "license": "MIT",
 177 |       "dependencies": {
 178 |         "@babel/parser": "^7.16.4",
 179 |         "@vue/compiler-core": "3.2.37",
 180 |         "@vue/shared": "3.2.37",
 181 |         "estree-walker": "^2.0.2",
 182 |         "magic-string": "^0.25.7"
 183 |       }
 184 |     },
 185 |     "node_modules/@vue/runtime-core": {
 186 |       "version": "3.2.37",
 187 |       "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.37.tgz",
 188 |       "integrity": "sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ==",
 189 |       "license": "MIT",
 190 |       "dependencies": {
 191 |         "@vue/reactivity": "3.2.37",
 192 |         "@vue/shared": "3.2.37"
 193 |       }
 194 |     },
 195 |     "node_modules/@vue/runtime-dom": {
 196 |       "version": "3.2.37",
 197 |       "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.37.tgz",
 198 |       "integrity": "sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==",
 199 |       "license": "MIT",
 200 |       "dependencies": {
 201 |         "@vue/runtime-core": "3.2.37",
 202 |         "@vue/shared": "3.2.37",
 203 |         "csstype": "^2.6.8"
 204 |       }
 205 |     },
 206 |     "node_modules/@vue/server-renderer": {
 207 |       "version": "3.2.37",
 208 |       "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.37.tgz",
 209 |       "integrity": "sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==",
 210 |       "license": "MIT",
 211 |       "dependencies": {
 212 |         "@vue/compiler-ssr": "3.2.37",
 213 |         "@vue/shared": "3.2.37"
 214 |       },
 215 |       "peerDependencies": {
 216 |         "vue": "3.2.37"
 217 |       }
 218 |     },
 219 |     "node_modules/@vue/shared": {
 220 |       "version": "3.2.37",
 221 |       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
 222 |       "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==",
 223 |       "license": "MIT"
 224 |     },
 225 |     "node_modules/commondir": {
 226 |       "version": "1.0.1",
 227 |       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
 228 |       "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
 229 |       "dev": true
 230 |     },
 231 |     "node_modules/csstype": {
 232 |       "version": "2.6.20",
 233 |       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
 234 |       "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==",
 235 |       "license": "MIT"
 236 |     },
 237 |     "node_modules/esbuild": {
 238 |       "version": "0.14.45",
 239 |       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.45.tgz",
 240 |       "integrity": "sha512-JOxGUD8jcs8xE8DjyGWC8by/vLMCXTJ/wuauWipL5kJRZx1dhpqIntb31QHjA45GZJWaXv7SjC/Zwu1bCkXWtQ==",
 241 |       "dev": true,
 242 |       "hasInstallScript": true,
 243 |       "license": "MIT",
 244 |       "bin": {
 245 |         "esbuild": "bin/esbuild"
 246 |       },
 247 |       "engines": {
 248 |         "node": ">=12"
 249 |       },
 250 |       "optionalDependencies": {
 251 |         "esbuild-android-64": "0.14.45",
 252 |         "esbuild-android-arm64": "0.14.45",
 253 |         "esbuild-darwin-64": "0.14.45",
 254 |         "esbuild-darwin-arm64": "0.14.45",
 255 |         "esbuild-freebsd-64": "0.14.45",
 256 |         "esbuild-freebsd-arm64": "0.14.45",
 257 |         "esbuild-linux-32": "0.14.45",
 258 |         "esbuild-linux-64": "0.14.45",
 259 |         "esbuild-linux-arm": "0.14.45",
 260 |         "esbuild-linux-arm64": "0.14.45",
 261 |         "esbuild-linux-mips64le": "0.14.45",
 262 |         "esbuild-linux-ppc64le": "0.14.45",
 263 |         "esbuild-linux-riscv64": "0.14.45",
 264 |         "esbuild-linux-s390x": "0.14.45",
 265 |         "esbuild-netbsd-64": "0.14.45",
 266 |         "esbuild-openbsd-64": "0.14.45",
 267 |         "esbuild-sunos-64": "0.14.45",
 268 |         "esbuild-windows-32": "0.14.45",
 269 |         "esbuild-windows-64": "0.14.45",
 270 |         "esbuild-windows-arm64": "0.14.45"
 271 |       }
 272 |     },
 273 |     "node_modules/esbuild-windows-64": {
 274 |       "version": "0.14.45",
 275 |       "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.45.tgz",
 276 |       "integrity": "sha512-t6bxFZcp9bLmSs+1pCNL/BW2bq3QEQHxU4HoiMEyWfF8QBU8iNXFI1iLGdyCzB1Ue2739h55tpOvojFrfyNPWA==",
 277 |       "cpu": [
 278 |         "x64"
 279 |       ],
 280 |       "dev": true,
 281 |       "license": "MIT",
 282 |       "optional": true,
 283 |       "os": [
 284 |         "win32"
 285 |       ],
 286 |       "engines": {
 287 |         "node": ">=12"
 288 |       }
 289 |     },
 290 |     "node_modules/estree-walker": {
 291 |       "version": "2.0.2",
 292 |       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
 293 |       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
 294 |       "license": "MIT"
 295 |     },
 296 |     "node_modules/find-cache-dir": {
 297 |       "version": "3.3.2",
 298 |       "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
 299 |       "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
 300 |       "dev": true,
 301 |       "dependencies": {
 302 |         "commondir": "^1.0.1",
 303 |         "make-dir": "^3.0.2",
 304 |         "pkg-dir": "^4.1.0"
 305 |       },
 306 |       "engines": {
 307 |         "node": ">=8"
 308 |       },
 309 |       "funding": {
 310 |         "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
 311 |       }
 312 |     },
 313 |     "node_modules/find-up": {
 314 |       "version": "4.1.0",
 315 |       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
 316 |       "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
 317 |       "dev": true,
 318 |       "dependencies": {
 319 |         "locate-path": "^5.0.0",
 320 |         "path-exists": "^4.0.0"
 321 |       },
 322 |       "engines": {
 323 |         "node": ">=8"
 324 |       }
 325 |     },
 326 |     "node_modules/fs-extra": {
 327 |       "version": "10.1.0",
 328 |       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
 329 |       "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
 330 |       "dev": true,
 331 |       "dependencies": {
 332 |         "graceful-fs": "^4.2.0",
 333 |         "jsonfile": "^6.0.1",
 334 |         "universalify": "^2.0.0"
 335 |       },
 336 |       "engines": {
 337 |         "node": ">=12"
 338 |       }
 339 |     },
 340 |     "node_modules/function-bind": {
 341 |       "version": "1.1.1",
 342 |       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
 343 |       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
 344 |       "dev": true,
 345 |       "license": "MIT"
 346 |     },
 347 |     "node_modules/graceful-fs": {
 348 |       "version": "4.2.10",
 349 |       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
 350 |       "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
 351 |       "dev": true
 352 |     },
 353 |     "node_modules/has": {
 354 |       "version": "1.0.3",
 355 |       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
 356 |       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
 357 |       "dev": true,
 358 |       "license": "MIT",
 359 |       "dependencies": {
 360 |         "function-bind": "^1.1.1"
 361 |       },
 362 |       "engines": {
 363 |         "node": ">= 0.4.0"
 364 |       }
 365 |     },
 366 |     "node_modules/is-core-module": {
 367 |       "version": "2.9.0",
 368 |       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz",
 369 |       "integrity": "sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==",
 370 |       "dev": true,
 371 |       "license": "MIT",
 372 |       "dependencies": {
 373 |         "has": "^1.0.3"
 374 |       },
 375 |       "funding": {
 376 |         "url": "https://github.com/sponsors/ljharb"
 377 |       }
 378 |     },
 379 |     "node_modules/jsonfile": {
 380 |       "version": "6.1.0",
 381 |       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
 382 |       "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
 383 |       "dev": true,
 384 |       "dependencies": {
 385 |         "universalify": "^2.0.0"
 386 |       },
 387 |       "optionalDependencies": {
 388 |         "graceful-fs": "^4.1.6"
 389 |       }
 390 |     },
 391 |     "node_modules/locate-path": {
 392 |       "version": "5.0.0",
 393 |       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
 394 |       "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
 395 |       "dev": true,
 396 |       "dependencies": {
 397 |         "p-locate": "^4.1.0"
 398 |       },
 399 |       "engines": {
 400 |         "node": ">=8"
 401 |       }
 402 |     },
 403 |     "node_modules/magic-string": {
 404 |       "version": "0.25.9",
 405 |       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
 406 |       "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
 407 |       "license": "MIT",
 408 |       "dependencies": {
 409 |         "sourcemap-codec": "^1.4.8"
 410 |       }
 411 |     },
 412 |     "node_modules/make-dir": {
 413 |       "version": "3.1.0",
 414 |       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
 415 |       "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
 416 |       "dev": true,
 417 |       "dependencies": {
 418 |         "semver": "^6.0.0"
 419 |       },
 420 |       "engines": {
 421 |         "node": ">=8"
 422 |       },
 423 |       "funding": {
 424 |         "url": "https://github.com/sponsors/sindresorhus"
 425 |       }
 426 |     },
 427 |     "node_modules/nanoid": {
 428 |       "version": "3.3.4",
 429 |       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
 430 |       "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
 431 |       "license": "MIT",
 432 |       "bin": {
 433 |         "nanoid": "bin/nanoid.cjs"
 434 |       },
 435 |       "engines": {
 436 |         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
 437 |       }
 438 |     },
 439 |     "node_modules/p-limit": {
 440 |       "version": "2.3.0",
 441 |       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
 442 |       "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
 443 |       "dev": true,
 444 |       "dependencies": {
 445 |         "p-try": "^2.0.0"
 446 |       },
 447 |       "engines": {
 448 |         "node": ">=6"
 449 |       },
 450 |       "funding": {
 451 |         "url": "https://github.com/sponsors/sindresorhus"
 452 |       }
 453 |     },
 454 |     "node_modules/p-locate": {
 455 |       "version": "4.1.0",
 456 |       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
 457 |       "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
 458 |       "dev": true,
 459 |       "dependencies": {
 460 |         "p-limit": "^2.2.0"
 461 |       },
 462 |       "engines": {
 463 |         "node": ">=8"
 464 |       }
 465 |     },
 466 |     "node_modules/p-try": {
 467 |       "version": "2.2.0",
 468 |       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
 469 |       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
 470 |       "dev": true,
 471 |       "engines": {
 472 |         "node": ">=6"
 473 |       }
 474 |     },
 475 |     "node_modules/p5": {
 476 |       "version": "1.4.1",
 477 |       "resolved": "https://registry.npmjs.org/p5/-/p5-1.4.1.tgz",
 478 |       "integrity": "sha512-3/X+qb0bK2Cg8nuZNpZZvzxkeUSRghOf0S+l8c+U8yIkUTVSbbcV0R8y96rx3InVBVhk8cH9kFC93VlZZElqSw=="
 479 |     },
 480 |     "node_modules/path-exists": {
 481 |       "version": "4.0.0",
 482 |       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
 483 |       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
 484 |       "dev": true,
 485 |       "engines": {
 486 |         "node": ">=8"
 487 |       }
 488 |     },
 489 |     "node_modules/path-parse": {
 490 |       "version": "1.0.7",
 491 |       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
 492 |       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
 493 |       "dev": true,
 494 |       "license": "MIT"
 495 |     },
 496 |     "node_modules/picocolors": {
 497 |       "version": "1.0.0",
 498 |       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
 499 |       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
 500 |       "license": "ISC"
 501 |     },
 502 |     "node_modules/picomatch": {
 503 |       "version": "2.3.1",
 504 |       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
 505 |       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
 506 |       "dev": true,
 507 |       "engines": {
 508 |         "node": ">=8.6"
 509 |       },
 510 |       "funding": {
 511 |         "url": "https://github.com/sponsors/jonschlinkert"
 512 |       }
 513 |     },
 514 |     "node_modules/pkg-dir": {
 515 |       "version": "4.2.0",
 516 |       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
 517 |       "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
 518 |       "dev": true,
 519 |       "dependencies": {
 520 |         "find-up": "^4.0.0"
 521 |       },
 522 |       "engines": {
 523 |         "node": ">=8"
 524 |       }
 525 |     },
 526 |     "node_modules/postcss": {
 527 |       "version": "8.4.14",
 528 |       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
 529 |       "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
 530 |       "funding": [
 531 |         {
 532 |           "type": "opencollective",
 533 |           "url": "https://opencollective.com/postcss/"
 534 |         },
 535 |         {
 536 |           "type": "tidelift",
 537 |           "url": "https://tidelift.com/funding/github/npm/postcss"
 538 |         }
 539 |       ],
 540 |       "license": "MIT",
 541 |       "dependencies": {
 542 |         "nanoid": "^3.3.4",
 543 |         "picocolors": "^1.0.0",
 544 |         "source-map-js": "^1.0.2"
 545 |       },
 546 |       "engines": {
 547 |         "node": "^10 || ^12 || >=14"
 548 |       }
 549 |     },
 550 |     "node_modules/resolve": {
 551 |       "version": "1.22.0",
 552 |       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
 553 |       "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==",
 554 |       "dev": true,
 555 |       "license": "MIT",
 556 |       "dependencies": {
 557 |         "is-core-module": "^2.8.1",
 558 |         "path-parse": "^1.0.7",
 559 |         "supports-preserve-symlinks-flag": "^1.0.0"
 560 |       },
 561 |       "bin": {
 562 |         "resolve": "bin/resolve"
 563 |       },
 564 |       "funding": {
 565 |         "url": "https://github.com/sponsors/ljharb"
 566 |       }
 567 |     },
 568 |     "node_modules/rollup": {
 569 |       "version": "2.75.6",
 570 |       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.75.6.tgz",
 571 |       "integrity": "sha512-OEf0TgpC9vU6WGROJIk1JA3LR5vk/yvqlzxqdrE2CzzXnqKXNzbAwlWUXis8RS3ZPe7LAq+YUxsRa0l3r27MLA==",
 572 |       "dev": true,
 573 |       "license": "MIT",
 574 |       "bin": {
 575 |         "rollup": "dist/bin/rollup"
 576 |       },
 577 |       "engines": {
 578 |         "node": ">=10.0.0"
 579 |       },
 580 |       "optionalDependencies": {
 581 |         "fsevents": "~2.3.2"
 582 |       }
 583 |     },
 584 |     "node_modules/rollup-plugin-typescript2": {
 585 |       "version": "0.32.1",
 586 |       "resolved": "https://registry.npmjs.org/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.32.1.tgz",
 587 |       "integrity": "sha512-RanO8bp1WbeMv0bVlgcbsFNCn+Y3rX7wF97SQLDxf0fMLsg0B/QFF005t4AsGUcDgF3aKJHoqt4JF2xVaABeKw==",
 588 |       "dev": true,
 589 |       "dependencies": {
 590 |         "@rollup/pluginutils": "^4.1.2",
 591 |         "find-cache-dir": "^3.3.2",
 592 |         "fs-extra": "^10.0.0",
 593 |         "resolve": "^1.20.0",
 594 |         "tslib": "^2.4.0"
 595 |       },
 596 |       "peerDependencies": {
 597 |         "rollup": ">=1.26.3",
 598 |         "typescript": ">=2.4.0"
 599 |       }
 600 |     },
 601 |     "node_modules/semver": {
 602 |       "version": "6.3.0",
 603 |       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
 604 |       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
 605 |       "dev": true,
 606 |       "bin": {
 607 |         "semver": "bin/semver.js"
 608 |       }
 609 |     },
 610 |     "node_modules/source-map": {
 611 |       "version": "0.6.1",
 612 |       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
 613 |       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
 614 |       "license": "BSD-3-Clause",
 615 |       "engines": {
 616 |         "node": ">=0.10.0"
 617 |       }
 618 |     },
 619 |     "node_modules/source-map-js": {
 620 |       "version": "1.0.2",
 621 |       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
 622 |       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
 623 |       "license": "BSD-3-Clause",
 624 |       "engines": {
 625 |         "node": ">=0.10.0"
 626 |       }
 627 |     },
 628 |     "node_modules/sourcemap-codec": {
 629 |       "version": "1.4.8",
 630 |       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
 631 |       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
 632 |       "license": "MIT"
 633 |     },
 634 |     "node_modules/supports-preserve-symlinks-flag": {
 635 |       "version": "1.0.0",
 636 |       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
 637 |       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
 638 |       "dev": true,
 639 |       "license": "MIT",
 640 |       "engines": {
 641 |         "node": ">= 0.4"
 642 |       },
 643 |       "funding": {
 644 |         "url": "https://github.com/sponsors/ljharb"
 645 |       }
 646 |     },
 647 |     "node_modules/tslib": {
 648 |       "version": "2.4.0",
 649 |       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
 650 |       "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
 651 |       "dev": true
 652 |     },
 653 |     "node_modules/typescript": {
 654 |       "version": "4.7.3",
 655 |       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.3.tgz",
 656 |       "integrity": "sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==",
 657 |       "dev": true,
 658 |       "license": "Apache-2.0",
 659 |       "bin": {
 660 |         "tsc": "bin/tsc",
 661 |         "tsserver": "bin/tsserver"
 662 |       },
 663 |       "engines": {
 664 |         "node": ">=4.2.0"
 665 |       }
 666 |     },
 667 |     "node_modules/universalify": {
 668 |       "version": "2.0.0",
 669 |       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
 670 |       "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
 671 |       "dev": true,
 672 |       "engines": {
 673 |         "node": ">= 10.0.0"
 674 |       }
 675 |     },
 676 |     "node_modules/vite": {
 677 |       "version": "2.9.12",
 678 |       "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.12.tgz",
 679 |       "integrity": "sha512-suxC36dQo9Rq1qMB2qiRorNJtJAdxguu5TMvBHOc/F370KvqAe9t48vYp+/TbPKRNrMh/J55tOUmkuIqstZaew==",
 680 |       "dev": true,
 681 |       "license": "MIT",
 682 |       "dependencies": {
 683 |         "esbuild": "^0.14.27",
 684 |         "postcss": "^8.4.13",
 685 |         "resolve": "^1.22.0",
 686 |         "rollup": "^2.59.0"
 687 |       },
 688 |       "bin": {
 689 |         "vite": "bin/vite.js"
 690 |       },
 691 |       "engines": {
 692 |         "node": ">=12.2.0"
 693 |       },
 694 |       "optionalDependencies": {
 695 |         "fsevents": "~2.3.2"
 696 |       },
 697 |       "peerDependencies": {
 698 |         "less": "*",
 699 |         "sass": "*",
 700 |         "stylus": "*"
 701 |       },
 702 |       "peerDependenciesMeta": {
 703 |         "less": {
 704 |           "optional": true
 705 |         },
 706 |         "sass": {
 707 |           "optional": true
 708 |         },
 709 |         "stylus": {
 710 |           "optional": true
 711 |         }
 712 |       }
 713 |     },
 714 |     "node_modules/vue": {
 715 |       "version": "3.2.37",
 716 |       "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.37.tgz",
 717 |       "integrity": "sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==",
 718 |       "license": "MIT",
 719 |       "dependencies": {
 720 |         "@vue/compiler-dom": "3.2.37",
 721 |         "@vue/compiler-sfc": "3.2.37",
 722 |         "@vue/runtime-dom": "3.2.37",
 723 |         "@vue/server-renderer": "3.2.37",
 724 |         "@vue/shared": "3.2.37"
 725 |       }
 726 |     },
 727 |     "node_modules/vue-tsc": {
 728 |       "version": "0.34.17",
 729 |       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.34.17.tgz",
 730 |       "integrity": "sha512-jzUXky44ZLHC4daaJag7FQr3idlPYN719/K1eObGljz5KaS2UnVGTU/XSYCd7d6ampYYg4OsyalbHyJIxV0aEQ==",
 731 |       "dev": true,
 732 |       "license": "MIT",
 733 |       "dependencies": {
 734 |         "@volar/vue-typescript": "0.34.17"
 735 |       },
 736 |       "bin": {
 737 |         "vue-tsc": "bin/vue-tsc.js"
 738 |       },
 739 |       "peerDependencies": {
 740 |         "typescript": "*"
 741 |       }
 742 |     }
 743 |   },
 744 |   "dependencies": {
 745 |     "@babel/parser": {
 746 |       "version": "7.18.5",
 747 |       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.5.tgz",
 748 |       "integrity": "sha512-YZWVaglMiplo7v8f1oMQ5ZPQr0vn7HPeZXxXWsxXJRjGVrzUFn9OxFQl1sb5wzfootjA/yChhW84BV+383FSOw=="
 749 |     },
 750 |     "@rollup/pluginutils": {
 751 |       "version": "4.2.1",
 752 |       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
 753 |       "integrity": "sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==",
 754 |       "dev": true,
 755 |       "requires": {
 756 |         "estree-walker": "^2.0.1",
 757 |         "picomatch": "^2.2.2"
 758 |       }
 759 |     },
 760 |     "@types/p5": {
 761 |       "version": "1.4.2",
 762 |       "resolved": "https://registry.npmjs.org/@types/p5/-/p5-1.4.2.tgz",
 763 |       "integrity": "sha512-tzJ2PdmeXlX8tidbA1/pQEhs0MHVWam0K4ux5ri0GrZXhBU3QrpTpSVzNaBDuo6KheryHdH8wR82x1nPvxo42g=="
 764 |     },
 765 |     "@vitejs/plugin-vue": {
 766 |       "version": "2.3.3",
 767 |       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-2.3.3.tgz",
 768 |       "integrity": "sha512-SmQLDyhz+6lGJhPELsBdzXGc+AcaT8stgkbiTFGpXPe8Tl1tJaBw1A6pxDqDuRsVkD8uscrkx3hA7QDOoKYtyw==",
 769 |       "dev": true,
 770 |       "requires": {}
 771 |     },
 772 |     "@volar/code-gen": {
 773 |       "version": "0.34.17",
 774 |       "resolved": "https://registry.npmjs.org/@volar/code-gen/-/code-gen-0.34.17.tgz",
 775 |       "integrity": "sha512-rHR7BA71BJ/4S7xUOPMPiB7uk6iU9oTWpEMZxFi5VGC9iJmDncE82WzU5iYpcbOBCVHsOjMh0+5CGMgdO6SaPA==",
 776 |       "dev": true,
 777 |       "requires": {
 778 |         "@volar/source-map": "0.34.17"
 779 |       }
 780 |     },
 781 |     "@volar/source-map": {
 782 |       "version": "0.34.17",
 783 |       "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-0.34.17.tgz",
 784 |       "integrity": "sha512-3yn1IMXJGGWB/G817/VFlFMi8oh5pmE7VzUqvgMZMrppaZpKj6/juvJIEiXNxRsgWc0RxIO8OSp4htdPUg1Raw==",
 785 |       "dev": true
 786 |     },
 787 |     "@volar/vue-code-gen": {
 788 |       "version": "0.34.17",
 789 |       "resolved": "https://registry.npmjs.org/@volar/vue-code-gen/-/vue-code-gen-0.34.17.tgz",
 790 |       "integrity": "sha512-17pzcK29fyFWUc+C82J3JYSnA+jy3QNrIldb9kPaP9Itbik05ZjEIyEue9FjhgIAuHeYSn4LDM5s6nGjxyfhsQ==",
 791 |       "dev": true,
 792 |       "requires": {
 793 |         "@volar/code-gen": "0.34.17",
 794 |         "@volar/source-map": "0.34.17",
 795 |         "@vue/compiler-core": "^3.2.36",
 796 |         "@vue/compiler-dom": "^3.2.36",
 797 |         "@vue/shared": "^3.2.36"
 798 |       }
 799 |     },
 800 |     "@volar/vue-typescript": {
 801 |       "version": "0.34.17",
 802 |       "resolved": "https://registry.npmjs.org/@volar/vue-typescript/-/vue-typescript-0.34.17.tgz",
 803 |       "integrity": "sha512-U0YSVIBPRWVPmgJHNa4nrfq88+oS+tmyZNxmnfajIw9A/GOGZQiKXHC0k09SVvbYXlsjgJ6NIjhm9NuAhGRQjg==",
 804 |       "dev": true,
 805 |       "requires": {
 806 |         "@volar/code-gen": "0.34.17",
 807 |         "@volar/source-map": "0.34.17",
 808 |         "@volar/vue-code-gen": "0.34.17",
 809 |         "@vue/compiler-sfc": "^3.2.36",
 810 |         "@vue/reactivity": "^3.2.36"
 811 |       }
 812 |     },
 813 |     "@vue/compiler-core": {
 814 |       "version": "3.2.37",
 815 |       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.37.tgz",
 816 |       "integrity": "sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==",
 817 |       "requires": {
 818 |         "@babel/parser": "^7.16.4",
 819 |         "@vue/shared": "3.2.37",
 820 |         "estree-walker": "^2.0.2",
 821 |         "source-map": "^0.6.1"
 822 |       }
 823 |     },
 824 |     "@vue/compiler-dom": {
 825 |       "version": "3.2.37",
 826 |       "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz",
 827 |       "integrity": "sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==",
 828 |       "requires": {
 829 |         "@vue/compiler-core": "3.2.37",
 830 |         "@vue/shared": "3.2.37"
 831 |       }
 832 |     },
 833 |     "@vue/compiler-sfc": {
 834 |       "version": "3.2.37",
 835 |       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.37.tgz",
 836 |       "integrity": "sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==",
 837 |       "requires": {
 838 |         "@babel/parser": "^7.16.4",
 839 |         "@vue/compiler-core": "3.2.37",
 840 |         "@vue/compiler-dom": "3.2.37",
 841 |         "@vue/compiler-ssr": "3.2.37",
 842 |         "@vue/reactivity-transform": "3.2.37",
 843 |         "@vue/shared": "3.2.37",
 844 |         "estree-walker": "^2.0.2",
 845 |         "magic-string": "^0.25.7",
 846 |         "postcss": "^8.1.10",
 847 |         "source-map": "^0.6.1"
 848 |       }
 849 |     },
 850 |     "@vue/compiler-ssr": {
 851 |       "version": "3.2.37",
 852 |       "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.37.tgz",
 853 |       "integrity": "sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==",
 854 |       "requires": {
 855 |         "@vue/compiler-dom": "3.2.37",
 856 |         "@vue/shared": "3.2.37"
 857 |       }
 858 |     },
 859 |     "@vue/reactivity": {
 860 |       "version": "3.2.37",
 861 |       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.37.tgz",
 862 |       "integrity": "sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==",
 863 |       "requires": {
 864 |         "@vue/shared": "3.2.37"
 865 |       }
 866 |     },
 867 |     "@vue/reactivity-transform": {
 868 |       "version": "3.2.37",
 869 |       "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.37.tgz",
 870 |       "integrity": "sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==",
 871 |       "requires": {
 872 |         "@babel/parser": "^7.16.4",
 873 |         "@vue/compiler-core": "3.2.37",
 874 |         "@vue/shared": "3.2.37",
 875 |         "estree-walker": "^2.0.2",
 876 |         "magic-string": "^0.25.7"
 877 |       }
 878 |     },
 879 |     "@vue/runtime-core": {
 880 |       "version": "3.2.37",
 881 |       "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.37.tgz",
 882 |       "integrity": "sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ==",
 883 |       "requires": {
 884 |         "@vue/reactivity": "3.2.37",
 885 |         "@vue/shared": "3.2.37"
 886 |       }
 887 |     },
 888 |     "@vue/runtime-dom": {
 889 |       "version": "3.2.37",
 890 |       "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.37.tgz",
 891 |       "integrity": "sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==",
 892 |       "requires": {
 893 |         "@vue/runtime-core": "3.2.37",
 894 |         "@vue/shared": "3.2.37",
 895 |         "csstype": "^2.6.8"
 896 |       }
 897 |     },
 898 |     "@vue/server-renderer": {
 899 |       "version": "3.2.37",
 900 |       "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.37.tgz",
 901 |       "integrity": "sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==",
 902 |       "requires": {
 903 |         "@vue/compiler-ssr": "3.2.37",
 904 |         "@vue/shared": "3.2.37"
 905 |       }
 906 |     },
 907 |     "@vue/shared": {
 908 |       "version": "3.2.37",
 909 |       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
 910 |       "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
 911 |     },
 912 |     "commondir": {
 913 |       "version": "1.0.1",
 914 |       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
 915 |       "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
 916 |       "dev": true
 917 |     },
 918 |     "csstype": {
 919 |       "version": "2.6.20",
 920 |       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
 921 |       "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
 922 |     },
 923 |     "esbuild": {
 924 |       "version": "0.14.45",
 925 |       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.14.45.tgz",
 926 |       "integrity": "sha512-JOxGUD8jcs8xE8DjyGWC8by/vLMCXTJ/wuauWipL5kJRZx1dhpqIntb31QHjA45GZJWaXv7SjC/Zwu1bCkXWtQ==",
 927 |       "dev": true,
 928 |       "requires": {
 929 |         "esbuild-android-64": "0.14.45",
 930 |         "esbuild-android-arm64": "0.14.45",
 931 |         "esbuild-darwin-64": "0.14.45",
 932 |         "esbuild-darwin-arm64": "0.14.45",
 933 |         "esbuild-freebsd-64": "0.14.45",
 934 |         "esbuild-freebsd-arm64": "0.14.45",
 935 |         "esbuild-linux-32": "0.14.45",
 936 |         "esbuild-linux-64": "0.14.45",
 937 |         "esbuild-linux-arm": "0.14.45",
 938 |         "esbuild-linux-arm64": "0.14.45",
 939 |         "esbuild-linux-mips64le": "0.14.45",
 940 |         "esbuild-linux-ppc64le": "0.14.45",
 941 |         "esbuild-linux-riscv64": "0.14.45",
 942 |         "esbuild-linux-s390x": "0.14.45",
 943 |         "esbuild-netbsd-64": "0.14.45",
 944 |         "esbuild-openbsd-64": "0.14.45",
 945 |         "esbuild-sunos-64": "0.14.45",
 946 |         "esbuild-windows-32": "0.14.45",
 947 |         "esbuild-windows-64": "0.14.45",
 948 |         "esbuild-windows-arm64": "0.14.45"
 949 |       }
 950 |     },
 951 |     "esbuild-windows-64": {
 952 |       "version": "0.14.45",
 953 |       "resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.45.tgz",
 954 |       "integrity": "sha512-t6bxFZcp9bLmSs+1pCNL/BW2bq3QEQHxU4HoiMEyWfF8QBU8iNXFI1iLGdyCzB1Ue2739h55tpOvojFrfyNPWA==",
 955 |       "dev": true,
 956 |       "optional": true
 957 |     },
 958 |     "estree-walker": {
 959 |       "version": "2.0.2",
 960 |       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
 961 |       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
 962 |     },
 963 |     "find-cache-dir": {
 964 |       "version": "3.3.2",
 965 |       "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
 966 |       "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
 967 |       "dev": true,
 968 |       "requires": {
 969 |         "commondir": "^1.0.1",
 970 |         "make-dir": "^3.0.2",
 971 |         "pkg-dir": "^4.1.0"
 972 |       }
 973 |     },
 974 |     "find-up": {
 975 |       "version": "4.1.0",
 976 |       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
 977 |       "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
 978 |       "dev": true,
 979 |       "requires": {
 980 |         "locate-path": "^5.0.0",
 981 |         "path-exists": "^4.0.0"
 982 |       }
 983 |     },
 984 |     "fs-extra": {
 985 |       "version": "10.1.0",
 986 |       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
 987 |       "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
 988 |       "dev": true,
 989 |       "requires": {
 990 |         "graceful-fs": "^4.2.0",
 991 |         "jsonfile": "^6.0.1",
 992 |         "universalify": "^2.0.0"
 993 |       }
 994 |     },
 995 |     "function-bind": {
 996 |       "version": "1.1.1",
 997 |       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
 998 |       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
 999 |       "dev": true
1000 |     },
1001 |     "graceful-fs": {
1002 |       "version": "4.2.10",
1003 |       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
1004 |       "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
1005 |       "dev": true
1006 |     },
1007 |     "has": {
1008 |       "version": "1.0.3",
1009 |       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
1010 |       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
1011 |       "dev": true,
1012 |       "requires": {
1013 |         "function-bind": "^1.1.1"
1014 |       }
1015 |     },
1016 |     "is-core-module": {
1017 |       "version": "2.9.0",
1018 |       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz",
1019 |       "integrity": "sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==",
1020 |       "dev": true,
1021 |       "requires": {
1022 |         "has": "^1.0.3"
1023 |       }
1024 |     },
1025 |     "jsonfile": {
1026 |       "version": "6.1.0",
1027 |       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
1028 |       "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
1029 |       "dev": true,
1030 |       "requires": {
1031 |         "graceful-fs": "^4.1.6",
1032 |         "universalify": "^2.0.0"
1033 |       }
1034 |     },
1035 |     "locate-path": {
1036 |       "version": "5.0.0",
1037 |       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
1038 |       "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
1039 |       "dev": true,
1040 |       "requires": {
1041 |         "p-locate": "^4.1.0"
1042 |       }
1043 |     },
1044 |     "magic-string": {
1045 |       "version": "0.25.9",
1046 |       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
1047 |       "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
1048 |       "requires": {
1049 |         "sourcemap-codec": "^1.4.8"
1050 |       }
1051 |     },
1052 |     "make-dir": {
1053 |       "version": "3.1.0",
1054 |       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
1055 |       "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
1056 |       "dev": true,
1057 |       "requires": {
1058 |         "semver": "^6.0.0"
1059 |       }
1060 |     },
1061 |     "nanoid": {
1062 |       "version": "3.3.4",
1063 |       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
1064 |       "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
1065 |     },
1066 |     "p-limit": {
1067 |       "version": "2.3.0",
1068 |       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
1069 |       "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
1070 |       "dev": true,
1071 |       "requires": {
1072 |         "p-try": "^2.0.0"
1073 |       }
1074 |     },
1075 |     "p-locate": {
1076 |       "version": "4.1.0",
1077 |       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
1078 |       "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
1079 |       "dev": true,
1080 |       "requires": {
1081 |         "p-limit": "^2.2.0"
1082 |       }
1083 |     },
1084 |     "p-try": {
1085 |       "version": "2.2.0",
1086 |       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
1087 |       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
1088 |       "dev": true
1089 |     },
1090 |     "p5": {
1091 |       "version": "1.4.1",
1092 |       "resolved": "https://registry.npmjs.org/p5/-/p5-1.4.1.tgz",
1093 |       "integrity": "sha512-3/X+qb0bK2Cg8nuZNpZZvzxkeUSRghOf0S+l8c+U8yIkUTVSbbcV0R8y96rx3InVBVhk8cH9kFC93VlZZElqSw=="
1094 |     },
1095 |     "path-exists": {
1096 |       "version": "4.0.0",
1097 |       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
1098 |       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
1099 |       "dev": true
1100 |     },
1101 |     "path-parse": {
1102 |       "version": "1.0.7",
1103 |       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
1104 |       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
1105 |       "dev": true
1106 |     },
1107 |     "picocolors": {
1108 |       "version": "1.0.0",
1109 |       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
1110 |       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
1111 |     },
1112 |     "picomatch": {
1113 |       "version": "2.3.1",
1114 |       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
1115 |       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
1116 |       "dev": true
1117 |     },
1118 |     "pkg-dir": {
1119 |       "version": "4.2.0",
1120 |       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
1121 |       "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
1122 |       "dev": true,
1123 |       "requires": {
1124 |         "find-up": "^4.0.0"
1125 |       }
1126 |     },
1127 |     "postcss": {
1128 |       "version": "8.4.14",
1129 |       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
1130 |       "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
1131 |       "requires": {
1132 |         "nanoid": "^3.3.4",
1133 |         "picocolors": "^1.0.0",
1134 |         "source-map-js": "^1.0.2"
1135 |       }
1136 |     },
1137 |     "resolve": {
1138 |       "version": "1.22.0",
1139 |       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
1140 |       "integrity": "sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==",
1141 |       "dev": true,
1142 |       "requires": {
1143 |         "is-core-module": "^2.8.1",
1144 |         "path-parse": "^1.0.7",
1145 |         "supports-preserve-symlinks-flag": "^1.0.0"
1146 |       }
1147 |     },
1148 |     "rollup": {
1149 |       "version": "2.75.6",
1150 |       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.75.6.tgz",
1151 |       "integrity": "sha512-OEf0TgpC9vU6WGROJIk1JA3LR5vk/yvqlzxqdrE2CzzXnqKXNzbAwlWUXis8RS3ZPe7LAq+YUxsRa0l3r27MLA==",
1152 |       "dev": true,
1153 |       "requires": {
1154 |         "fsevents": "~2.3.2"
1155 |       }
1156 |     },
1157 |     "rollup-plugin-typescript2": {
1158 |       "version": "0.32.1",
1159 |       "resolved": "https://registry.npmjs.org/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.32.1.tgz",
1160 |       "integrity": "sha512-RanO8bp1WbeMv0bVlgcbsFNCn+Y3rX7wF97SQLDxf0fMLsg0B/QFF005t4AsGUcDgF3aKJHoqt4JF2xVaABeKw==",
1161 |       "dev": true,
1162 |       "requires": {
1163 |         "@rollup/pluginutils": "^4.1.2",
1164 |         "find-cache-dir": "^3.3.2",
1165 |         "fs-extra": "^10.0.0",
1166 |         "resolve": "^1.20.0",
1167 |         "tslib": "^2.4.0"
1168 |       }
1169 |     },
1170 |     "semver": {
1171 |       "version": "6.3.0",
1172 |       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
1173 |       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
1174 |       "dev": true
1175 |     },
1176 |     "source-map": {
1177 |       "version": "0.6.1",
1178 |       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
1179 |       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
1180 |     },
1181 |     "source-map-js": {
1182 |       "version": "1.0.2",
1183 |       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
1184 |       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
1185 |     },
1186 |     "sourcemap-codec": {
1187 |       "version": "1.4.8",
1188 |       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
1189 |       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
1190 |     },
1191 |     "supports-preserve-symlinks-flag": {
1192 |       "version": "1.0.0",
1193 |       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
1194 |       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
1195 |       "dev": true
1196 |     },
1197 |     "tslib": {
1198 |       "version": "2.4.0",
1199 |       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
1200 |       "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
1201 |       "dev": true
1202 |     },
1203 |     "typescript": {
1204 |       "version": "4.7.3",
1205 |       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.3.tgz",
1206 |       "integrity": "sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==",
1207 |       "dev": true
1208 |     },
1209 |     "universalify": {
1210 |       "version": "2.0.0",
1211 |       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
1212 |       "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
1213 |       "dev": true
1214 |     },
1215 |     "vite": {
1216 |       "version": "2.9.12",
1217 |       "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.12.tgz",
1218 |       "integrity": "sha512-suxC36dQo9Rq1qMB2qiRorNJtJAdxguu5TMvBHOc/F370KvqAe9t48vYp+/TbPKRNrMh/J55tOUmkuIqstZaew==",
1219 |       "dev": true,
1220 |       "requires": {
1221 |         "esbuild": "^0.14.27",
1222 |         "fsevents": "~2.3.2",
1223 |         "postcss": "^8.4.13",
1224 |         "resolve": "^1.22.0",
1225 |         "rollup": "^2.59.0"
1226 |       }
1227 |     },
1228 |     "vue": {
1229 |       "version": "3.2.37",
1230 |       "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.37.tgz",
1231 |       "integrity": "sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==",
1232 |       "requires": {
1233 |         "@vue/compiler-dom": "3.2.37",
1234 |         "@vue/compiler-sfc": "3.2.37",
1235 |         "@vue/runtime-dom": "3.2.37",
1236 |         "@vue/server-renderer": "3.2.37",
1237 |         "@vue/shared": "3.2.37"
1238 |       }
1239 |     },
1240 |     "vue-tsc": {
1241 |       "version": "0.34.17",
1242 |       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.34.17.tgz",
1243 |       "integrity": "sha512-jzUXky44ZLHC4daaJag7FQr3idlPYN719/K1eObGljz5KaS2UnVGTU/XSYCd7d6ampYYg4OsyalbHyJIxV0aEQ==",
1244 |       "dev": true,
1245 |       "requires": {
1246 |         "@volar/vue-typescript": "0.34.17"
1247 |       }
1248 |     }
1249 |   }
1250 | }
1251 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "p5vue",
 3 |   "version": "0.0.7",
 4 |   "type": "module",
 5 |   "exports": {
 6 |     ".": "./dist/index.js",
 7 |     "./styles": "./dist/style.css"
 8 |   },
 9 |   "browser": {
10 |     "./styles.css": "./dist/style.css"
11 |   },
12 |   "license": "Apache-2.0",
13 |   "files": [
14 |     "dist"
15 |   ],
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "https://github.com/Nico-Mayer/vueP5.git"
19 |   },
20 |   "scripts": {
21 |     "dev": "vite",
22 |     "build": "vue-tsc --noEmit && vite build",
23 |     "preview": "vite preview"
24 |   },
25 |   "dependencies": {
26 |     "@types/p5": "^1.4.2",
27 |     "p5": "^1.4.1",
28 |     "vue": "^3.2.25"
29 |   },
30 |   "devDependencies": {
31 |     "@vitejs/plugin-vue": "^2.3.3",
32 |     "rollup-plugin-typescript2": "^0.32.1",
33 |     "typescript": "^4.5.4",
34 |     "vite": "^2.9.9",
35 |     "vue-tsc": "^0.34.7"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nico-Mayer/p5-vue/e1318154a8a746b7c277408481c9a05e266bb464/public/logo.png


--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="700" height="700" viewBox="0 0 700 700" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0_1_2)">
 3 | <path d="M136.837 152.261L294.721 529.833L387.473 491.049L333.586 362.182L388.58 339.186C432.904 320.651 459.837 295.889 469.379 264.897C478.692 233.359 475.797 199.532 460.695 163.416C445.365 126.754 423.318 100.935 394.555 85.9612C365.564 70.4399 328.907 71.9464 284.583 90.4806L136.837 152.261ZM319.514 328.528L243.661 147.13L281.418 131.341C314.251 117.612 343.366 141.118 368.765 201.858C393.935 262.05 390.103 299.011 357.271 312.74L319.514 328.528Z" fill="#41B883"/>
 4 | <rect x="236" y="125" width="166" height="207" fill="#41B883"/>
 5 | <path d="M212 155H250.182L317 262.368L383.818 155H422L317 325L212 155ZM294.73 155L317 190.789L339.27 155H377.785L317 253.421L256.215 155H294.73Z" fill="white"/>
 6 | </g>
 7 | <defs>
 8 | <clipPath id="clip0_1_2">
 9 | <rect width="700" height="700" fill="white"/>
10 | </clipPath>
11 | </defs>
12 | </svg>
13 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | // This starter template is using Vue 3 <script setup> SFCs
 3 | // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
 4 | import p5 from "p5"
 5 | import { ref } from "vue"
 6 | let mounted = ref(true)
 7 | 
 8 | function unmountSketch() {
 9 |   mounted.value = false
10 | }
11 | 
12 | const sketch = (p5: p5) => {
13 |   p5.setup = () => {
14 |     p5.createCanvas(500, 500)
15 |   }
16 |   p5.draw = () => {
17 |     p5.background(100)
18 |   }
19 | }
20 | </script>
21 | 
22 | <template>
23 |   <button @click="unmountSketch">Unmount</button>
24 |   <P5 :sketch="sketch" v-if="mounted" />
25 | </template>
26 | 


--------------------------------------------------------------------------------
/src/P5Plugin.ts:
--------------------------------------------------------------------------------
 1 | import type { App } from "vue"
 2 | import { P5 } from "./components"
 3 | 
 4 | export default {
 5 |   install: (app: App) => {
 6 |     app.component("P5", P5)
 7 |   },
 8 | }
 9 | 
10 | export { P5 }
11 | 


--------------------------------------------------------------------------------
/src/components/P5.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref, onMounted,  onUnmounted } from "vue"
 3 | import p5 from "p5"
 4 | const canvas = ref()
 5 | const { sketch } = defineProps(["sketch"])
 6 | 
 7 | const id = Date.now().toString()
 8 | 
 9 | onMounted(() => {
10 |   const newP5 = new p5(sketch, canvas.value)
11 | })
12 | 
13 | </script>
14 | 
15 | <template>
16 |   <div ref="canvas" :id="id"></div>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
1 | export { default as P5 } from "./P5.vue"
2 | 


--------------------------------------------------------------------------------
/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 
3 | declare module '*.vue' {
4 |   import type { DefineComponent } from 'vue'
5 |   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
6 |   const component: DefineComponent<{}, {}, any>
7 |   export default component
8 | }
9 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from "vue"
2 | import App from "./App.vue"
3 | import vuep5 from "./P5Plugin"
4 | 
5 | createApp(App).use(vuep5).mount("#app")
6 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "esnext",
 4 |     "useDefineForClassFields": true,
 5 |     "module": "esnext",
 6 |     "moduleResolution": "node",
 7 |     "strict": true,
 8 |     "jsx": "preserve",
 9 |     "sourceMap": true,
10 |     "resolveJsonModule": true,
11 |     "isolatedModules": true,
12 |     "esModuleInterop": true,
13 |     "lib": ["esnext", "dom"],
14 |     "skipLibCheck": true
15 |   },
16 |   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
17 |   "references": [{ "path": "./tsconfig.node.json" }]
18 | }
19 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "composite": true,
4 |     "module": "esnext",
5 |     "moduleResolution": "node"
6 |   },
7 |   "include": ["vite.config.ts"]
8 | }
9 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "vite"
 2 | import vue from "@vitejs/plugin-vue"
 3 | import typescript2 from "rollup-plugin-typescript2"
 4 | 
 5 | // https://vitejs.dev/config/
 6 | export default defineConfig({
 7 |   plugins: [
 8 |     vue(),
 9 |     typescript2({
10 |       check: false,
11 |       include: ["src/components/*.vue"],
12 |       tsconfigOverride: {
13 |         compilerOptions: {
14 |           sourceMap: true,
15 |           declaration: true,
16 |           declarationMap: true,
17 |         },
18 |         exclude: ["vite.config.js"],
19 |       },
20 |     }),
21 |   ],
22 |   build: {
23 |     cssCodeSplit: false,
24 |     lib: {
25 |       entry: "./src/P5Plugin.ts",
26 |       formats: ["es", "cjs"],
27 |       name: "vueP5",
28 |       fileName: (format) => (format === "es" ? "index.js" : "index.cjs"),
29 |     },
30 |     rollupOptions: {
31 |       external: ["vue"],
32 |       output: {
33 |         globals: {
34 |           vue: "Vue",
35 |         },
36 |       },
37 |     },
38 |   },
39 | })
40 | 


--------------------------------------------------------------------------------