├── .gitignore
├── LICENSE
├── README.md
├── packages
    ├── demo-todo-mvc
    │   ├── RemainingCounter.jsx
    │   ├── TodoFooter.vue
    │   ├── index.html
    │   ├── main.js
    │   ├── package.json
    │   ├── todo.vue
    │   └── vite.config.js
    └── vue-component-preview
    │   ├── README.md
    │   ├── index.d.ts
    │   ├── index.js
    │   ├── index.mjs
    │   └── package.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Tao Wen
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # About
 2 | 
 3 | render vue component in "preview" mode with mock data.
 4 | 
 5 | ```js
 6 | import preview from 'vue-component-preview'
 7 | import Todo from './todo.vue';
 8 | const TodoPreview = preview(Todo, {
 9 |   todos: [{
10 |   }],
11 |   filteredTodos: [{
12 |     id: 1,
13 |     title: 'hello',
14 |     completed: true
15 |   }],
16 |   // when data used but not provided, will callback this
17 |   __get__(p) {
18 |     console.log(p);
19 |   },
20 |   // when child component being rendered, provide its data
21 |   __render__({ componentName, componentType, counter }, props) {
22 |     return {
23 |       todos: [{
24 |             // if child render its own child, it will callback again
25 |             __render__({ componentName, componentType, counter }, props) {
26 |             }
27 |       }],
28 |     }
29 |   }
30 | })
31 | ```
32 | 
33 | when render `<TodoPreview />`, it will render the `<template>` of the `todo.vue` file, but by-passing all `<script>`.
34 | 
35 | # Motivation
36 | 
37 | * preview complex business component mixing with business logic, do not want to start backend server
38 | * implement drag&drop GUI designer with vue sfc file format


--------------------------------------------------------------------------------
/packages/demo-todo-mvc/RemainingCounter.jsx:
--------------------------------------------------------------------------------
1 | import * as vue from 'vue';
2 | 
3 | export default function(props, { slots }) {
4 |     return <span class="todo-count">{ slots.default() }</span>
5 | }


--------------------------------------------------------------------------------
/packages/demo-todo-mvc/TodoFooter.vue:
--------------------------------------------------------------------------------
 1 | <script type="javascript">
 2 | import * as vue from 'vue';
 3 | import RemainingCounter from './RemainingCounter';
 4 | 
 5 | export default vue.defineComponent({
 6 |     props: ['todos', 'visibility'],
 7 |     computed: {
 8 |         filteredTodos() {
 9 |             return filters[this.visibility](this.todos);
10 |         },
11 |         remaining() {
12 |             return filters.active(this.todos).length;
13 |         },
14 |     },
15 |     components: {
16 |         RemainingCounter
17 |     }
18 | })
19 | </script>
20 | <template>
21 |     <footer class="footer" v-show="todos.length" v-cloak>
22 |         <RemainingCounter>
23 |         <strong>{{ remaining }}</strong> {{ remaining | pluralize }} left
24 |         </RemainingCounter>
25 |         <ul class="filters">
26 |         <li>
27 |             <a href="#/all" :class="{ selected: visibility == 'all' }">All</a>
28 |         </li>
29 |         <li>
30 |             <a href="#/active" :class="{ selected: visibility == 'active' }">Active</a>
31 |         </li>
32 |         <li>
33 |             <a
34 |             href="#/completed"
35 |             :class="{ selected: visibility == 'completed' }">Completed</a>
36 |         </li>
37 |         </ul>
38 |         <slot />
39 |     </footer>
40 | </template>


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


--------------------------------------------------------------------------------
/packages/demo-todo-mvc/main.js:
--------------------------------------------------------------------------------
 1 | import * as vue from 'vue';
 2 | import preview from 'vue-component-preview';
 3 | import Todo, { filters } from './todo.vue';
 4 | 
 5 | // app Vue instance
 6 | const app = vue.createApp(preview(Todo, {
 7 |   todos: [{
 8 |   }],
 9 |   remaining: 0,
10 |   filteredTodos: [{
11 |     id: 1,
12 |     title: 'hello',
13 |     completed: true
14 |   }],
15 |   // when data used but not provided, will callback this
16 |   __get__(p) {
17 |     console.log(p);
18 |   },
19 |   // when child component being rendered, provide its data
20 |   __render__({ componentName, componentType, counter }, props) {
21 |     return {
22 |       todos: [{
23 |       }],
24 |     }
25 |   }
26 | }));
27 | 
28 | // mount
29 | const vm = app.mount("#app");
30 | 
31 | // handle routing
32 | function onHashChange() {
33 |   const visibility = window.location.hash.replace(/#\/?/, "");
34 |   if (filters[visibility]) {
35 |     vm.visibility = visibility;
36 |   } else {
37 |     window.location.hash = "";
38 |     vm.visibility = "all";
39 |   }
40 | }
41 | 
42 | window.addEventListener("hashchange", onHashChange);
43 | onHashChange();


--------------------------------------------------------------------------------
/packages/demo-todo-mvc/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name":"demo-todo-mvc",
 3 |     "private": true,
 4 |     "version":"0.0.1",
 5 |     "dependencies": {
 6 |         "vue": "^3.2.31",
 7 |         "vue-component-preview": "workspace:*"
 8 |     },
 9 |     "devDependencies": {
10 |         "vite": "^2.8.6",
11 |         "@vitejs/plugin-vue": "^2.2.0"
12 |     }
13 | }
14 | 


--------------------------------------------------------------------------------
/packages/demo-todo-mvc/todo.vue:
--------------------------------------------------------------------------------
  1 | <script type="javascript">
  2 | import * as vue from 'vue';
  3 | import TodoFooter from './TodoFooter.vue';
  4 | // Full spec-compliant TodoMVC with localStorage persistence
  5 | // and hash-based routing in ~120 effective lines of JavaScript.
  6 | 
  7 | // localStorage persistence
  8 | const STORAGE_KEY = "todos-vuejs-2.0";
  9 | const todoStorage = {
 10 |   fetch() {
 11 |     const todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]");
 12 |     todos.forEach((todo, index) => {
 13 |       todo.id = index;
 14 |     });
 15 |     todoStorage.uid = todos.length;
 16 |     return todos;
 17 |   },
 18 |   save(todos) {
 19 |     localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
 20 |   }
 21 | };
 22 | 
 23 | // visibility filters
 24 | export const filters = {
 25 |   all(todos) {
 26 |     return todos;
 27 |   },
 28 |   active(todos) {
 29 |     return todos.filter((todo) => !todo.completed);
 30 |   },
 31 |   completed(todos) {
 32 |     return todos.filter((todo)=> todo.completed);
 33 |   }
 34 | }
 35 | 
 36 | export default vue.defineComponent({
 37 |     // app initial state
 38 |     data() {
 39 |         return {
 40 |             todos: todoStorage.fetch(),
 41 |             newTodo: "",
 42 |             editedTodo: null,
 43 |             visibility: "all"
 44 |         };
 45 |     },
 46 |     // watch todos change for localStorage persistence
 47 |     watch: {
 48 |         todos: {
 49 |             handler(todos) {
 50 |                 todoStorage.save(todos);
 51 |             },
 52 |             deep: true
 53 |         }
 54 |     },
 55 |     // computed properties
 56 |     // http://vuejs.org/guide/computed.html
 57 |     computed: {
 58 |         filteredTodos() {
 59 |             return filters[this.visibility](this.todos);
 60 |         },
 61 |         remaining() {
 62 |             return filters.active(this.todos).length;
 63 |         },
 64 |         allDone: {
 65 |             get() {
 66 |                 return this.remaining === 0;
 67 |             },
 68 |             set(value) {
 69 |                 this.todos.forEach((todo) => {
 70 |                     todo.completed = value;
 71 |                 });
 72 |             }
 73 |         }
 74 |     },
 75 |     // methods that implement data logic.
 76 |     // note there's no DOM manipulation here at all.
 77 |     methods: {
 78 |         pluralize(n) {
 79 |             return n === 1 ? "item" : "items";
 80 |         },
 81 |         addTodo() {
 82 |             var value = this.newTodo && this.newTodo.trim();
 83 |             if (!value) {
 84 |                 return;
 85 |             }
 86 |             this.todos.push({
 87 |                 id: todoStorage.uid++,
 88 |                 title: value,
 89 |                 completed: false
 90 |             });
 91 |             this.newTodo = "";
 92 |         },
 93 |         removeTodo(todo) {
 94 |             this.todos.splice(this.todos.indexOf(todo), 1);
 95 |         },
 96 |         editTodo(todo) {
 97 |             this.beforeEditCache = todo.title;
 98 |             this.editedTodo = todo;
 99 |         },
100 |         doneEdit(todo) {
101 |             if (!this.editedTodo) {
102 |                 return;
103 |             }
104 |             this.editedTodo = null;
105 |             todo.title = todo.title.trim();
106 |             if (!todo.title) {
107 |                 this.removeTodo(todo);
108 |             }
109 |         },
110 |         cancelEdit(todo) {
111 |             this.editedTodo = null;
112 |             todo.title = this.beforeEditCache;
113 |         },
114 |         removeCompleted() {
115 |             this.todos = filters.active(this.todos);
116 |         }
117 |     },
118 |     // a custom directive to wait for the DOM to be updated
119 |     // before focusing on the input field.
120 |     // http://vuejs.org/guide/custom-directive.html
121 |     directives: {
122 |         "todo-focus": {
123 |             updated(el, binding) {
124 |                 if (binding.value) {
125 |                     el.focus();
126 |                 }
127 |             }
128 |         }
129 |     },
130 |     components: { TodoFooter }
131 | })
132 | </script>
133 | <template>
134 |     <section class="todoapp">
135 |     <header class="header">
136 |         <h1>todos</h1>
137 |         <input
138 |             class="new-todo"
139 |             autofocus
140 |             autocomplete="off"
141 |             placeholder="What needs to be done?"
142 |             v-model="newTodo"
143 |             @keyup.enter="addTodo"
144 |             />
145 |     </header>
146 |     <section class="main" v-show="todos.length" v-cloak>
147 |         <input
148 |             id="toggle-all"
149 |             class="toggle-all"
150 |             type="checkbox"
151 |             v-model="allDone"
152 |             />
153 |         <label for="toggle-all"></label>
154 |         <ul class="todo-list">
155 |         <li
156 |             v-for="todo in filteredTodos"
157 |             class="todo"
158 |             :key="todo.id"
159 |             :class="{ completed: todo.completed, editing: todo == editedTodo }"
160 |             >
161 |             <div class="view">
162 |             <input class="toggle" type="checkbox" v-model="todo.completed" />
163 |             <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
164 |             <button class="destroy" @click="removeTodo(todo)"></button>
165 |             </div>
166 |             <input
167 |                 class="edit"
168 |                 type="text"
169 |                 v-model="todo.title"
170 |                 v-todo-focus="todo == editedTodo"
171 |                 @blur="doneEdit(todo)"
172 |                 @keyup.enter="doneEdit(todo)"
173 |                 @keyup.esc="cancelEdit(todo)"
174 |                 />
175 |         </li>
176 |         </ul>
177 |     </section>
178 | 	<TodoFooter :todos="todos" :visibility="visibility">
179 |         <button
180 |                 class="clear-completed"
181 |                 @click="removeCompleted"
182 |                 v-show="todos.length > remaining"
183 |                 >
184 |         Clear completed
185 |         </button>
186 | 	</TodoFooter>
187 |     </section>
188 |     <footer class="info">
189 |     <p>Double-click to edit a todo</p>
190 |     <p>Written by <a href="http://evanyou.me">Evan You</a></p>
191 |     <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
192 |     </footer>
193 | </template>
194 | <style>
195 | html,
196 | body {
197 | 	margin: 0;
198 | 	padding: 0;
199 | }
200 | 
201 | button {
202 | 	margin: 0;
203 | 	padding: 0;
204 | 	border: 0;
205 | 	background: none;
206 | 	font-size: 100%;
207 | 	vertical-align: baseline;
208 | 	font-family: inherit;
209 | 	font-weight: inherit;
210 | 	color: inherit;
211 | 	-webkit-appearance: none;
212 | 	appearance: none;
213 | 	-webkit-font-smoothing: antialiased;
214 | 	-moz-osx-font-smoothing: grayscale;
215 | }
216 | 
217 | body {
218 | 	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
219 | 	line-height: 1.4em;
220 | 	background: #f5f5f5;
221 | 	color: #4d4d4d;
222 | 	min-width: 230px;
223 | 	max-width: 550px;
224 | 	margin: 0 auto;
225 | 	-webkit-font-smoothing: antialiased;
226 | 	-moz-osx-font-smoothing: grayscale;
227 | 	font-weight: 300;
228 | }
229 | 
230 | :focus {
231 | 	outline: 0;
232 | }
233 | 
234 | .hidden {
235 | 	display: none;
236 | }
237 | 
238 | .todoapp {
239 | 	background: #fff;
240 | 	margin: 130px 0 40px 0;
241 | 	position: relative;
242 | 	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
243 | 	            0 25px 50px 0 rgba(0, 0, 0, 0.1);
244 | }
245 | 
246 | .todoapp input::-webkit-input-placeholder {
247 | 	font-style: italic;
248 | 	font-weight: 300;
249 | 	color: #e6e6e6;
250 | }
251 | 
252 | .todoapp input::-moz-placeholder {
253 | 	font-style: italic;
254 | 	font-weight: 300;
255 | 	color: #e6e6e6;
256 | }
257 | 
258 | .todoapp input::input-placeholder {
259 | 	font-style: italic;
260 | 	font-weight: 300;
261 | 	color: #e6e6e6;
262 | }
263 | 
264 | .todoapp h1 {
265 | 	position: absolute;
266 | 	top: -155px;
267 | 	width: 100%;
268 | 	font-size: 100px;
269 | 	font-weight: 100;
270 | 	text-align: center;
271 | 	color: rgba(175, 47, 47, 0.15);
272 | 	-webkit-text-rendering: optimizeLegibility;
273 | 	-moz-text-rendering: optimizeLegibility;
274 | 	text-rendering: optimizeLegibility;
275 | }
276 | 
277 | .new-todo,
278 | .edit {
279 | 	position: relative;
280 | 	margin: 0;
281 | 	width: 100%;
282 | 	font-size: 24px;
283 | 	font-family: inherit;
284 | 	font-weight: inherit;
285 | 	line-height: 1.4em;
286 | 	border: 0;
287 | 	color: inherit;
288 | 	padding: 6px;
289 | 	border: 1px solid #999;
290 | 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
291 | 	box-sizing: border-box;
292 | 	-webkit-font-smoothing: antialiased;
293 | 	-moz-osx-font-smoothing: grayscale;
294 | }
295 | 
296 | .new-todo {
297 | 	padding: 16px 16px 16px 60px;
298 | 	border: none;
299 | 	background: rgba(0, 0, 0, 0.003);
300 | 	box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
301 | }
302 | 
303 | .main {
304 | 	position: relative;
305 | 	z-index: 2;
306 | 	border-top: 1px solid #e6e6e6;
307 | }
308 | 
309 | .toggle-all {
310 | 	width: 1px;
311 | 	height: 1px;
312 | 	border: none; /* Mobile Safari */
313 | 	opacity: 0;
314 | 	position: absolute;
315 | 	right: 100%;
316 | 	bottom: 100%;
317 | }
318 | 
319 | .toggle-all + label {
320 | 	width: 60px;
321 | 	height: 34px;
322 | 	font-size: 0;
323 | 	position: absolute;
324 | 	top: -52px;
325 | 	left: -13px;
326 | 	-webkit-transform: rotate(90deg);
327 | 	transform: rotate(90deg);
328 | }
329 | 
330 | .toggle-all + label:before {
331 | 	content: '❯';
332 | 	font-size: 22px;
333 | 	color: #e6e6e6;
334 | 	padding: 10px 27px 10px 27px;
335 | }
336 | 
337 | .toggle-all:checked + label:before {
338 | 	color: #737373;
339 | }
340 | 
341 | .todo-list {
342 | 	margin: 0;
343 | 	padding: 0;
344 | 	list-style: none;
345 | }
346 | 
347 | .todo-list li {
348 | 	position: relative;
349 | 	font-size: 24px;
350 | 	border-bottom: 1px solid #ededed;
351 | }
352 | 
353 | .todo-list li:last-child {
354 | 	border-bottom: none;
355 | }
356 | 
357 | .todo-list li.editing {
358 | 	border-bottom: none;
359 | 	padding: 0;
360 | }
361 | 
362 | .todo-list li.editing .edit {
363 | 	display: block;
364 | 	width: calc(100% - 43px);
365 | 	padding: 12px 16px;
366 | 	margin: 0 0 0 43px;
367 | }
368 | 
369 | .todo-list li.editing .view {
370 | 	display: none;
371 | }
372 | 
373 | .todo-list li .toggle {
374 | 	text-align: center;
375 | 	width: 40px;
376 | 	/* auto, since non-WebKit browsers doesn't support input styling */
377 | 	height: auto;
378 | 	position: absolute;
379 | 	top: 0;
380 | 	bottom: 0;
381 | 	margin: auto 0;
382 | 	border: none; /* Mobile Safari */
383 | 	-webkit-appearance: none;
384 | 	appearance: none;
385 | }
386 | 
387 | .todo-list li .toggle {
388 | 	opacity: 0;
389 | }
390 | 
391 | .todo-list li .toggle + label {
392 | 	/*
393 | 		Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
394 | 		IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
395 | 	*/
396 | 	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
397 | 	background-repeat: no-repeat;
398 | 	background-position: center left;
399 | }
400 | 
401 | .todo-list li .toggle:checked + label {
402 | 	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
403 | }
404 | 
405 | .todo-list li label {
406 | 	word-break: break-all;
407 | 	padding: 15px 15px 15px 60px;
408 | 	display: block;
409 | 	line-height: 1.2;
410 | 	transition: color 0.4s;
411 | }
412 | 
413 | .todo-list li.completed label {
414 | 	color: #d9d9d9;
415 | 	text-decoration: line-through;
416 | }
417 | 
418 | .todo-list li .destroy {
419 | 	display: none;
420 | 	position: absolute;
421 | 	top: 0;
422 | 	right: 10px;
423 | 	bottom: 0;
424 | 	width: 40px;
425 | 	height: 40px;
426 | 	margin: auto 0;
427 | 	font-size: 30px;
428 | 	color: #cc9a9a;
429 | 	margin-bottom: 11px;
430 | 	transition: color 0.2s ease-out;
431 | }
432 | 
433 | .todo-list li .destroy:hover {
434 | 	color: #af5b5e;
435 | }
436 | 
437 | .todo-list li .destroy:after {
438 | 	content: '×';
439 | }
440 | 
441 | .todo-list li:hover .destroy {
442 | 	display: block;
443 | }
444 | 
445 | .todo-list li .edit {
446 | 	display: none;
447 | }
448 | 
449 | .todo-list li.editing:last-child {
450 | 	margin-bottom: -1px;
451 | }
452 | 
453 | .footer {
454 | 	color: #777;
455 | 	padding: 10px 15px;
456 | 	height: 20px;
457 | 	text-align: center;
458 | 	border-top: 1px solid #e6e6e6;
459 | }
460 | 
461 | .footer:before {
462 | 	content: '';
463 | 	position: absolute;
464 | 	right: 0;
465 | 	bottom: 0;
466 | 	left: 0;
467 | 	height: 50px;
468 | 	overflow: hidden;
469 | 	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
470 | 	            0 8px 0 -3px #f6f6f6,
471 | 	            0 9px 1px -3px rgba(0, 0, 0, 0.2),
472 | 	            0 16px 0 -6px #f6f6f6,
473 | 	            0 17px 2px -6px rgba(0, 0, 0, 0.2);
474 | }
475 | 
476 | .todo-count {
477 | 	float: left;
478 | 	text-align: left;
479 | }
480 | 
481 | .todo-count strong {
482 | 	font-weight: 300;
483 | }
484 | 
485 | .filters {
486 | 	margin: 0;
487 | 	padding: 0;
488 | 	list-style: none;
489 | 	position: absolute;
490 | 	right: 0;
491 | 	left: 0;
492 | }
493 | 
494 | .filters li {
495 | 	display: inline;
496 | }
497 | 
498 | .filters li a {
499 | 	color: inherit;
500 | 	margin: 3px;
501 | 	padding: 3px 7px;
502 | 	text-decoration: none;
503 | 	border: 1px solid transparent;
504 | 	border-radius: 3px;
505 | }
506 | 
507 | .filters li a:hover {
508 | 	border-color: rgba(175, 47, 47, 0.1);
509 | }
510 | 
511 | .filters li a.selected {
512 | 	border-color: rgba(175, 47, 47, 0.2);
513 | }
514 | 
515 | .clear-completed,
516 | html .clear-completed:active {
517 | 	float: right;
518 | 	position: relative;
519 | 	line-height: 20px;
520 | 	text-decoration: none;
521 | 	cursor: pointer;
522 | }
523 | 
524 | .clear-completed:hover {
525 | 	text-decoration: underline;
526 | }
527 | 
528 | .info {
529 | 	margin: 65px auto 0;
530 | 	color: #bfbfbf;
531 | 	font-size: 10px;
532 | 	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
533 | 	text-align: center;
534 | }
535 | 
536 | .info p {
537 | 	line-height: 1;
538 | }
539 | 
540 | .info a {
541 | 	color: inherit;
542 | 	text-decoration: none;
543 | 	font-weight: 400;
544 | }
545 | 
546 | .info a:hover {
547 | 	text-decoration: underline;
548 | }
549 | 
550 | /*
551 | 	Hack to remove background from Mobile Safari.
552 | 	Can't use it globally since it destroys checkboxes in Firefox
553 | */
554 | @media screen and (-webkit-min-device-pixel-ratio:0) {
555 | 	.toggle-all,
556 | 	.todo-list li .toggle {
557 | 		background: none;
558 | 	}
559 | 
560 | 	.todo-list li .toggle {
561 | 		height: 40px;
562 | 	}
563 | }
564 | 
565 | @media (max-width: 430px) {
566 | 	.footer {
567 | 		height: 50px;
568 | 	}
569 | 
570 | 	.filters {
571 | 		bottom: 10px;
572 | 	}
573 | }
574 | [v-cloak] {
575 |         display: none;
576 |       }
577 | </style>


--------------------------------------------------------------------------------
/packages/demo-todo-mvc/vite.config.js:
--------------------------------------------------------------------------------
 1 | import vue from '@vitejs/plugin-vue'
 2 | /**
 3 |  * @type {import('vite').UserConfig}
 4 |  */
 5 |  const config = {
 6 |     plugins: [vue()],
 7 |     esbuild: {
 8 |       jsxFactory: 'vue.h',
 9 |       jsxFragment: 'vue.Fragment'
10 |     }
11 |   }
12 |   
13 |   export default config


--------------------------------------------------------------------------------
/packages/vue-component-preview/README.md:
--------------------------------------------------------------------------------
 1 | # About
 2 | 
 3 | render vue component in "preview" mode with mock data.
 4 | 
 5 | ```js
 6 | import preview from 'vue-component-preview'
 7 | import Todo from './todo.vue';
 8 | const TodoPreview = preview(Todo, {
 9 |   todos: [{
10 |   }],
11 |   filteredTodos: [{
12 |     id: 1,
13 |     title: 'hello',
14 |     completed: true
15 |   }],
16 |   // when data used but not provided, will callback this
17 |   __get__(p) {
18 |     console.log(p);
19 |   },
20 |   // when child component being rendered, provide its data
21 |   __render__({ componentName, componentType, counter }, props) {
22 |     return {
23 |       todos: [{
24 |             // if child render its own child, it will callback again
25 |             __render__({ componentName, componentType, counter }, props) {
26 |             }
27 |       }],
28 |     }
29 |   }
30 | })
31 | ```
32 | 
33 | when render `<TodoPreview />`, it will render the `<template>` of the `todo.vue` file, but by-passing all `<script>`.
34 | 
35 | # Motivation
36 | 
37 | * preview complex business component mixing with business logic, do not want to start backend server
38 | * implement drag&drop GUI designer with vue sfc file format


--------------------------------------------------------------------------------
/packages/vue-component-preview/index.d.ts:
--------------------------------------------------------------------------------
1 | export default function<T>(app: T, dataProvider: Function | Object): T;


--------------------------------------------------------------------------------
/packages/vue-component-preview/index.js:
--------------------------------------------------------------------------------
 1 | const { defineComponent } = require('@vue/runtime-core');
 2 | 
 3 | function wrapProxy(data) {
 4 |     if (typeof data !== 'object') { return data; }
 5 |     return new Proxy({}, {
 6 |         get(target, p, receiver) {
 7 |             if (data[p] !== undefined) { return wrapProxy(data[p]); }
 8 |             if (data.__get__) { return wrapProxy(data.__get__(p)); }
 9 |         }
10 |     })
11 | }
12 | function preview(app, dataProvider) {
13 |     return defineComponent({
14 |         render() {
15 |             const data = typeof dataProvider === 'function' ? dataProvider(this.$props) : dataProvider;
16 |             const proxyToUse = wrapProxy({...data, $slots: this.$slots});
17 |             const wrappedComponents = {};
18 |             const counters = {};
19 |             for (const [componentName, componentType] of Object.entries(app.components || {})) {
20 |                 wrappedComponents[componentName] = preview(componentType, (props) => {
21 |                     const counter = counters[componentName] = counters[componentName] || 0;
22 |                     counters[componentName]++;
23 |                     if (data.__render__) {
24 |                         return data.__render__({ counter, componentName, componentType }, props);
25 |                     }
26 |                 });
27 |             }
28 |             this.$.components = wrappedComponents;
29 |             this.$.directives = app.directives;
30 |             if (typeof app === 'function') {
31 |                 return app(this.$props, { slots: this.$slots });
32 |             } else {
33 |                 return app.render.call(proxyToUse, proxyToUse, {}, {}, {}, data, {});
34 |             }
35 |         }
36 |     })
37 | }
38 | exports = preview;
39 | exports.default = preview;


--------------------------------------------------------------------------------
/packages/vue-component-preview/index.mjs:
--------------------------------------------------------------------------------
 1 | import { defineComponent } from '@vue/runtime-core';
 2 | 
 3 | function wrapProxy(data) {
 4 |     if (typeof data !== 'object') { return data; }
 5 |     return new Proxy({}, {
 6 |         get(target, p, receiver) {
 7 |             if (data[p] !== undefined) { return wrapProxy(data[p]); }
 8 |             if (data.__get__) { return wrapProxy(data.__get__(p)); }
 9 |         }
10 |     })
11 | }
12 | function preview(app, dataProvider) {
13 |     return defineComponent({
14 |         render() {
15 |             const data = typeof dataProvider === 'function' ? dataProvider(this.$props) : dataProvider;
16 |             const proxyToUse = wrapProxy({...data, $slots: this.$slots});
17 |             const wrappedComponents = {};
18 |             const counters = {};
19 |             for (const [componentName, componentType] of Object.entries(app.components || {})) {
20 |                 wrappedComponents[componentName] = preview(componentType, (props) => {
21 |                     const counter = counters[componentName] = counters[componentName] || 0;
22 |                     counters[componentName]++;
23 |                     if (data.__render__) {
24 |                         return data.__render__({ counter, componentName, componentType }, props);
25 |                     }
26 |                 });
27 |             }
28 |             this.$.components = wrappedComponents;
29 |             this.$.directives = app.directives;
30 |             if (typeof app === 'function') {
31 |                 return app(this.$props, { slots: this.$slots });
32 |             } else {
33 |                 return app.render.call(proxyToUse, proxyToUse, {}, {}, {}, data, {});
34 |             }
35 |         }
36 |     })
37 | }
38 | 
39 | export default preview;


--------------------------------------------------------------------------------
/packages/vue-component-preview/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name":"vue-component-preview",
 3 |     "version":"1.0.1",
 4 |     "license": "MIT",
 5 |     "main": "./index.js",
 6 |     "module": "./index.mjs",
 7 |     "types": "./index.d.ts",
 8 |     "dependencies": {
 9 |         "@vue/runtime-core": "^3.2.31"
10 |     }
11 | }
12 | 


--------------------------------------------------------------------------------
/pnpm-lock.yaml:
--------------------------------------------------------------------------------
  1 | lockfileVersion: 5.3
  2 | 
  3 | importers:
  4 | 
  5 |   packages/demo-todo-mvc:
  6 |     specifiers:
  7 |       '@vitejs/plugin-vue': ^2.2.0
  8 |       vite: ^2.8.6
  9 |       vue: ^3.2.31
 10 |       vue-component-preview: workspace:*
 11 |     dependencies:
 12 |       vue: 3.2.31
 13 |       vue-component-preview: link:../vue-component-preview
 14 |     devDependencies:
 15 |       '@vitejs/plugin-vue': 2.2.4_vite@2.8.6+vue@3.2.31
 16 |       vite: 2.8.6
 17 | 
 18 |   packages/vue-component-preview:
 19 |     specifiers:
 20 |       '@vue/runtime-core': ^3.2.31
 21 |       '@vue/runtime-dom': ^3.2.31
 22 |     dependencies:
 23 |       '@vue/runtime-core': 3.2.31
 24 |       '@vue/runtime-dom': 3.2.31
 25 | 
 26 | packages:
 27 | 
 28 |   /@babel/parser/7.17.7:
 29 |     resolution: {integrity: sha512-bm3AQf45vR4gKggRfvJdYJ0gFLoCbsPxiFLSH6hTVYABptNHY6l9NrhnucVjQ/X+SPtLANT9lc0fFhikj+VBRA==}
 30 |     engines: {node: '>=6.0.0'}
 31 |     hasBin: true
 32 |     dev: false
 33 | 
 34 |   /@vitejs/plugin-vue/2.2.4_vite@2.8.6+vue@3.2.31:
 35 |     resolution: {integrity: sha512-ev9AOlp0ljCaDkFZF3JwC/pD2N4Hh+r5srl5JHM6BKg5+99jiiK0rE/XaRs3pVm1wzyKkjUy/StBSoXX5fFzcw==}
 36 |     engines: {node: '>=12.0.0'}
 37 |     peerDependencies:
 38 |       vite: ^2.5.10
 39 |       vue: ^3.2.25
 40 |     dependencies:
 41 |       vite: 2.8.6
 42 |       vue: 3.2.31
 43 |     dev: true
 44 | 
 45 |   /@vue/compiler-core/3.2.31:
 46 |     resolution: {integrity: sha512-aKno00qoA4o+V/kR6i/pE+aP+esng5siNAVQ422TkBNM6qA4veXiZbSe8OTXHXquEi/f6Akc+nLfB4JGfe4/WQ==}
 47 |     dependencies:
 48 |       '@babel/parser': 7.17.7
 49 |       '@vue/shared': 3.2.31
 50 |       estree-walker: 2.0.2
 51 |       source-map: 0.6.1
 52 |     dev: false
 53 | 
 54 |   /@vue/compiler-dom/3.2.31:
 55 |     resolution: {integrity: sha512-60zIlFfzIDf3u91cqfqy9KhCKIJgPeqxgveH2L+87RcGU/alT6BRrk5JtUso0OibH3O7NXuNOQ0cDc9beT0wrg==}
 56 |     dependencies:
 57 |       '@vue/compiler-core': 3.2.31
 58 |       '@vue/shared': 3.2.31
 59 |     dev: false
 60 | 
 61 |   /@vue/compiler-sfc/3.2.31:
 62 |     resolution: {integrity: sha512-748adc9msSPGzXgibHiO6T7RWgfnDcVQD+VVwYgSsyyY8Ans64tALHZANrKtOzvkwznV/F4H7OAod/jIlp/dkQ==}
 63 |     dependencies:
 64 |       '@babel/parser': 7.17.7
 65 |       '@vue/compiler-core': 3.2.31
 66 |       '@vue/compiler-dom': 3.2.31
 67 |       '@vue/compiler-ssr': 3.2.31
 68 |       '@vue/reactivity-transform': 3.2.31
 69 |       '@vue/shared': 3.2.31
 70 |       estree-walker: 2.0.2
 71 |       magic-string: 0.25.9
 72 |       postcss: 8.4.12
 73 |       source-map: 0.6.1
 74 |     dev: false
 75 | 
 76 |   /@vue/compiler-ssr/3.2.31:
 77 |     resolution: {integrity: sha512-mjN0rqig+A8TVDnsGPYJM5dpbjlXeHUm2oZHZwGyMYiGT/F4fhJf/cXy8QpjnLQK4Y9Et4GWzHn9PS8AHUnSkw==}
 78 |     dependencies:
 79 |       '@vue/compiler-dom': 3.2.31
 80 |       '@vue/shared': 3.2.31
 81 |     dev: false
 82 | 
 83 |   /@vue/reactivity-transform/3.2.31:
 84 |     resolution: {integrity: sha512-uS4l4z/W7wXdI+Va5pgVxBJ345wyGFKvpPYtdSgvfJfX/x2Ymm6ophQlXXB6acqGHtXuBqNyyO3zVp9b1r0MOA==}
 85 |     dependencies:
 86 |       '@babel/parser': 7.17.7
 87 |       '@vue/compiler-core': 3.2.31
 88 |       '@vue/shared': 3.2.31
 89 |       estree-walker: 2.0.2
 90 |       magic-string: 0.25.9
 91 |     dev: false
 92 | 
 93 |   /@vue/reactivity/3.2.31:
 94 |     resolution: {integrity: sha512-HVr0l211gbhpEKYr2hYe7hRsV91uIVGFYNHj73njbARVGHQvIojkImKMaZNDdoDZOIkMsBc9a1sMqR+WZwfSCw==}
 95 |     dependencies:
 96 |       '@vue/shared': 3.2.31
 97 |     dev: false
 98 | 
 99 |   /@vue/runtime-core/3.2.31:
100 |     resolution: {integrity: sha512-Kcog5XmSY7VHFEMuk4+Gap8gUssYMZ2+w+cmGI6OpZWYOEIcbE0TPzzPHi+8XTzAgx1w/ZxDFcXhZeXN5eKWsA==}
101 |     dependencies:
102 |       '@vue/reactivity': 3.2.31
103 |       '@vue/shared': 3.2.31
104 |     dev: false
105 | 
106 |   /@vue/runtime-dom/3.2.31:
107 |     resolution: {integrity: sha512-N+o0sICVLScUjfLG7u9u5XCjvmsexAiPt17GNnaWHJUfsKed5e85/A3SWgKxzlxx2SW/Hw7RQxzxbXez9PtY3g==}
108 |     dependencies:
109 |       '@vue/runtime-core': 3.2.31
110 |       '@vue/shared': 3.2.31
111 |       csstype: 2.6.20
112 |     dev: false
113 | 
114 |   /@vue/server-renderer/3.2.31_vue@3.2.31:
115 |     resolution: {integrity: sha512-8CN3Zj2HyR2LQQBHZ61HexF5NReqngLT3oahyiVRfSSvak+oAvVmu8iNLSu6XR77Ili2AOpnAt1y8ywjjqtmkg==}
116 |     peerDependencies:
117 |       vue: 3.2.31
118 |     dependencies:
119 |       '@vue/compiler-ssr': 3.2.31
120 |       '@vue/shared': 3.2.31
121 |       vue: 3.2.31
122 |     dev: false
123 | 
124 |   /@vue/shared/3.2.31:
125 |     resolution: {integrity: sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ==}
126 |     dev: false
127 | 
128 |   /csstype/2.6.20:
129 |     resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==}
130 |     dev: false
131 | 
132 |   /esbuild-android-64/0.14.27:
133 |     resolution: {integrity: sha512-LuEd4uPuj/16Y8j6kqy3Z2E9vNY9logfq8Tq+oTE2PZVuNs3M1kj5Qd4O95ee66yDGb3isaOCV7sOLDwtMfGaQ==}
134 |     engines: {node: '>=12'}
135 |     cpu: [x64]
136 |     os: [android]
137 |     requiresBuild: true
138 |     dev: true
139 |     optional: true
140 | 
141 |   /esbuild-android-arm64/0.14.27:
142 |     resolution: {integrity: sha512-E8Ktwwa6vX8q7QeJmg8yepBYXaee50OdQS3BFtEHKrzbV45H4foMOeEE7uqdjGQZFBap5VAqo7pvjlyA92wznQ==}
143 |     engines: {node: '>=12'}
144 |     cpu: [arm64]
145 |     os: [android]
146 |     requiresBuild: true
147 |     dev: true
148 |     optional: true
149 | 
150 |   /esbuild-darwin-64/0.14.27:
151 |     resolution: {integrity: sha512-czw/kXl/1ZdenPWfw9jDc5iuIYxqUxgQ/Q+hRd4/3udyGGVI31r29LCViN2bAJgGvQkqyLGVcG03PJPEXQ5i2g==}
152 |     engines: {node: '>=12'}
153 |     cpu: [x64]
154 |     os: [darwin]
155 |     requiresBuild: true
156 |     dev: true
157 |     optional: true
158 | 
159 |   /esbuild-darwin-arm64/0.14.27:
160 |     resolution: {integrity: sha512-BEsv2U2U4o672oV8+xpXNxN9bgqRCtddQC6WBh4YhXKDcSZcdNh7+6nS+DM2vu7qWIWNA4JbRG24LUUYXysimQ==}
161 |     engines: {node: '>=12'}
162 |     cpu: [arm64]
163 |     os: [darwin]
164 |     requiresBuild: true
165 |     dev: true
166 |     optional: true
167 | 
168 |   /esbuild-freebsd-64/0.14.27:
169 |     resolution: {integrity: sha512-7FeiFPGBo+ga+kOkDxtPmdPZdayrSzsV9pmfHxcyLKxu+3oTcajeZlOO1y9HW+t5aFZPiv7czOHM4KNd0tNwCA==}
170 |     engines: {node: '>=12'}
171 |     cpu: [x64]
172 |     os: [freebsd]
173 |     requiresBuild: true
174 |     dev: true
175 |     optional: true
176 | 
177 |   /esbuild-freebsd-arm64/0.14.27:
178 |     resolution: {integrity: sha512-8CK3++foRZJluOWXpllG5zwAVlxtv36NpHfsbWS7TYlD8S+QruXltKlXToc/5ZNzBK++l6rvRKELu/puCLc7jA==}
179 |     engines: {node: '>=12'}
180 |     cpu: [arm64]
181 |     os: [freebsd]
182 |     requiresBuild: true
183 |     dev: true
184 |     optional: true
185 | 
186 |   /esbuild-linux-32/0.14.27:
187 |     resolution: {integrity: sha512-qhNYIcT+EsYSBClZ5QhLzFzV5iVsP1YsITqblSaztr3+ZJUI+GoK8aXHyzKd7/CKKuK93cxEMJPpfi1dfsOfdw==}
188 |     engines: {node: '>=12'}
189 |     cpu: [ia32]
190 |     os: [linux]
191 |     requiresBuild: true
192 |     dev: true
193 |     optional: true
194 | 
195 |   /esbuild-linux-64/0.14.27:
196 |     resolution: {integrity: sha512-ESjck9+EsHoTaKWlFKJpPZRN26uiav5gkI16RuI8WBxUdLrrAlYuYSndxxKgEn1csd968BX/8yQZATYf/9+/qg==}
197 |     engines: {node: '>=12'}
198 |     cpu: [x64]
199 |     os: [linux]
200 |     requiresBuild: true
201 |     dev: true
202 |     optional: true
203 | 
204 |   /esbuild-linux-arm/0.14.27:
205 |     resolution: {integrity: sha512-JnnmgUBdqLQO9hoNZQqNHFWlNpSX82vzB3rYuCJMhtkuaWQEmQz6Lec1UIxJdC38ifEghNTBsF9bbe8dFilnCw==}
206 |     engines: {node: '>=12'}
207 |     cpu: [arm]
208 |     os: [linux]
209 |     requiresBuild: true
210 |     dev: true
211 |     optional: true
212 | 
213 |   /esbuild-linux-arm64/0.14.27:
214 |     resolution: {integrity: sha512-no6Mi17eV2tHlJnqBHRLekpZ2/VYx+NfGxKcBE/2xOMYwctsanCaXxw4zapvNrGE9X38vefVXLz6YCF8b1EHiQ==}
215 |     engines: {node: '>=12'}
216 |     cpu: [arm64]
217 |     os: [linux]
218 |     requiresBuild: true
219 |     dev: true
220 |     optional: true
221 | 
222 |   /esbuild-linux-mips64le/0.14.27:
223 |     resolution: {integrity: sha512-NolWP2uOvIJpbwpsDbwfeExZOY1bZNlWE/kVfkzLMsSgqeVcl5YMen/cedRe9mKnpfLli+i0uSp7N+fkKNU27A==}
224 |     engines: {node: '>=12'}
225 |     cpu: [mips64el]
226 |     os: [linux]
227 |     requiresBuild: true
228 |     dev: true
229 |     optional: true
230 | 
231 |   /esbuild-linux-ppc64le/0.14.27:
232 |     resolution: {integrity: sha512-/7dTjDvXMdRKmsSxKXeWyonuGgblnYDn0MI1xDC7J1VQXny8k1qgNp6VmrlsawwnsymSUUiThhkJsI+rx0taNA==}
233 |     engines: {node: '>=12'}
234 |     cpu: [ppc64]
235 |     os: [linux]
236 |     requiresBuild: true
237 |     dev: true
238 |     optional: true
239 | 
240 |   /esbuild-linux-riscv64/0.14.27:
241 |     resolution: {integrity: sha512-D+aFiUzOJG13RhrSmZgrcFaF4UUHpqj7XSKrIiCXIj1dkIkFqdrmqMSOtSs78dOtObWiOrFCDDzB24UyeEiNGg==}
242 |     engines: {node: '>=12'}
243 |     cpu: [riscv64]
244 |     os: [linux]
245 |     requiresBuild: true
246 |     dev: true
247 |     optional: true
248 | 
249 |   /esbuild-linux-s390x/0.14.27:
250 |     resolution: {integrity: sha512-CD/D4tj0U4UQjELkdNlZhQ8nDHU5rBn6NGp47Hiz0Y7/akAY5i0oGadhEIg0WCY/HYVXFb3CsSPPwaKcTOW3bg==}
251 |     engines: {node: '>=12'}
252 |     cpu: [s390x]
253 |     os: [linux]
254 |     requiresBuild: true
255 |     dev: true
256 |     optional: true
257 | 
258 |   /esbuild-netbsd-64/0.14.27:
259 |     resolution: {integrity: sha512-h3mAld69SrO1VoaMpYl3a5FNdGRE/Nqc+E8VtHOag4tyBwhCQXxtvDDOAKOUQexBGca0IuR6UayQ4ntSX5ij1Q==}
260 |     engines: {node: '>=12'}
261 |     cpu: [x64]
262 |     os: [netbsd]
263 |     requiresBuild: true
264 |     dev: true
265 |     optional: true
266 | 
267 |   /esbuild-openbsd-64/0.14.27:
268 |     resolution: {integrity: sha512-xwSje6qIZaDHXWoPpIgvL+7fC6WeubHHv18tusLYMwL+Z6bEa4Pbfs5IWDtQdHkArtfxEkIZz77944z8MgDxGw==}
269 |     engines: {node: '>=12'}
270 |     cpu: [x64]
271 |     os: [openbsd]
272 |     requiresBuild: true
273 |     dev: true
274 |     optional: true
275 | 
276 |   /esbuild-sunos-64/0.14.27:
277 |     resolution: {integrity: sha512-/nBVpWIDjYiyMhuqIqbXXsxBc58cBVH9uztAOIfWShStxq9BNBik92oPQPJ57nzWXRNKQUEFWr4Q98utDWz7jg==}
278 |     engines: {node: '>=12'}
279 |     cpu: [x64]
280 |     os: [sunos]
281 |     requiresBuild: true
282 |     dev: true
283 |     optional: true
284 | 
285 |   /esbuild-windows-32/0.14.27:
286 |     resolution: {integrity: sha512-Q9/zEjhZJ4trtWhFWIZvS/7RUzzi8rvkoaS9oiizkHTTKd8UxFwn/Mm2OywsAfYymgUYm8+y2b+BKTNEFxUekw==}
287 |     engines: {node: '>=12'}
288 |     cpu: [ia32]
289 |     os: [win32]
290 |     requiresBuild: true
291 |     dev: true
292 |     optional: true
293 | 
294 |   /esbuild-windows-64/0.14.27:
295 |     resolution: {integrity: sha512-b3y3vTSl5aEhWHK66ngtiS/c6byLf6y/ZBvODH1YkBM+MGtVL6jN38FdHUsZasCz9gFwYs/lJMVY9u7GL6wfYg==}
296 |     engines: {node: '>=12'}
297 |     cpu: [x64]
298 |     os: [win32]
299 |     requiresBuild: true
300 |     dev: true
301 |     optional: true
302 | 
303 |   /esbuild-windows-arm64/0.14.27:
304 |     resolution: {integrity: sha512-I/reTxr6TFMcR5qbIkwRGvldMIaiBu2+MP0LlD7sOlNXrfqIl9uNjsuxFPGEG4IRomjfQ5q8WT+xlF/ySVkqKg==}
305 |     engines: {node: '>=12'}
306 |     cpu: [arm64]
307 |     os: [win32]
308 |     requiresBuild: true
309 |     dev: true
310 |     optional: true
311 | 
312 |   /esbuild/0.14.27:
313 |     resolution: {integrity: sha512-MZQt5SywZS3hA9fXnMhR22dv0oPGh6QtjJRIYbgL1AeqAoQZE+Qn5ppGYQAoHv/vq827flj4tIJ79Mrdiwk46Q==}
314 |     engines: {node: '>=12'}
315 |     hasBin: true
316 |     requiresBuild: true
317 |     optionalDependencies:
318 |       esbuild-android-64: 0.14.27
319 |       esbuild-android-arm64: 0.14.27
320 |       esbuild-darwin-64: 0.14.27
321 |       esbuild-darwin-arm64: 0.14.27
322 |       esbuild-freebsd-64: 0.14.27
323 |       esbuild-freebsd-arm64: 0.14.27
324 |       esbuild-linux-32: 0.14.27
325 |       esbuild-linux-64: 0.14.27
326 |       esbuild-linux-arm: 0.14.27
327 |       esbuild-linux-arm64: 0.14.27
328 |       esbuild-linux-mips64le: 0.14.27
329 |       esbuild-linux-ppc64le: 0.14.27
330 |       esbuild-linux-riscv64: 0.14.27
331 |       esbuild-linux-s390x: 0.14.27
332 |       esbuild-netbsd-64: 0.14.27
333 |       esbuild-openbsd-64: 0.14.27
334 |       esbuild-sunos-64: 0.14.27
335 |       esbuild-windows-32: 0.14.27
336 |       esbuild-windows-64: 0.14.27
337 |       esbuild-windows-arm64: 0.14.27
338 |     dev: true
339 | 
340 |   /estree-walker/2.0.2:
341 |     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
342 |     dev: false
343 | 
344 |   /fsevents/2.3.2:
345 |     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
346 |     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
347 |     os: [darwin]
348 |     requiresBuild: true
349 |     dev: true
350 |     optional: true
351 | 
352 |   /function-bind/1.1.1:
353 |     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
354 |     dev: true
355 | 
356 |   /has/1.0.3:
357 |     resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
358 |     engines: {node: '>= 0.4.0'}
359 |     dependencies:
360 |       function-bind: 1.1.1
361 |     dev: true
362 | 
363 |   /is-core-module/2.8.1:
364 |     resolution: {integrity: sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==}
365 |     dependencies:
366 |       has: 1.0.3
367 |     dev: true
368 | 
369 |   /magic-string/0.25.9:
370 |     resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
371 |     dependencies:
372 |       sourcemap-codec: 1.4.8
373 |     dev: false
374 | 
375 |   /nanoid/3.3.1:
376 |     resolution: {integrity: sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==}
377 |     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
378 |     hasBin: true
379 | 
380 |   /path-parse/1.0.7:
381 |     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
382 |     dev: true
383 | 
384 |   /picocolors/1.0.0:
385 |     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
386 | 
387 |   /postcss/8.4.12:
388 |     resolution: {integrity: sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==}
389 |     engines: {node: ^10 || ^12 || >=14}
390 |     dependencies:
391 |       nanoid: 3.3.1
392 |       picocolors: 1.0.0
393 |       source-map-js: 1.0.2
394 | 
395 |   /resolve/1.22.0:
396 |     resolution: {integrity: sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==}
397 |     hasBin: true
398 |     dependencies:
399 |       is-core-module: 2.8.1
400 |       path-parse: 1.0.7
401 |       supports-preserve-symlinks-flag: 1.0.0
402 |     dev: true
403 | 
404 |   /rollup/2.70.1:
405 |     resolution: {integrity: sha512-CRYsI5EuzLbXdxC6RnYhOuRdtz4bhejPMSWjsFLfVM/7w/85n2szZv6yExqUXsBdz5KT8eoubeyDUDjhLHEslA==}
406 |     engines: {node: '>=10.0.0'}
407 |     hasBin: true
408 |     optionalDependencies:
409 |       fsevents: 2.3.2
410 |     dev: true
411 | 
412 |   /source-map-js/1.0.2:
413 |     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
414 |     engines: {node: '>=0.10.0'}
415 | 
416 |   /source-map/0.6.1:
417 |     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
418 |     engines: {node: '>=0.10.0'}
419 |     dev: false
420 | 
421 |   /sourcemap-codec/1.4.8:
422 |     resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
423 |     dev: false
424 | 
425 |   /supports-preserve-symlinks-flag/1.0.0:
426 |     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
427 |     engines: {node: '>= 0.4'}
428 |     dev: true
429 | 
430 |   /vite/2.8.6:
431 |     resolution: {integrity: sha512-e4H0QpludOVKkmOsRyqQ7LTcMUDF3mcgyNU4lmi0B5JUbe0ZxeBBl8VoZ8Y6Rfn9eFKYtdXNPcYK97ZwH+K2ug==}
432 |     engines: {node: '>=12.2.0'}
433 |     hasBin: true
434 |     peerDependencies:
435 |       less: '*'
436 |       sass: '*'
437 |       stylus: '*'
438 |     peerDependenciesMeta:
439 |       less:
440 |         optional: true
441 |       sass:
442 |         optional: true
443 |       stylus:
444 |         optional: true
445 |     dependencies:
446 |       esbuild: 0.14.27
447 |       postcss: 8.4.12
448 |       resolve: 1.22.0
449 |       rollup: 2.70.1
450 |     optionalDependencies:
451 |       fsevents: 2.3.2
452 |     dev: true
453 | 
454 |   /vue/3.2.31:
455 |     resolution: {integrity: sha512-odT3W2tcffTiQCy57nOT93INw1auq5lYLLYtWpPYQQYQOOdHiqFct9Xhna6GJ+pJQaF67yZABraH47oywkJgFw==}
456 |     dependencies:
457 |       '@vue/compiler-dom': 3.2.31
458 |       '@vue/compiler-sfc': 3.2.31
459 |       '@vue/runtime-dom': 3.2.31
460 |       '@vue/server-renderer': 3.2.31_vue@3.2.31
461 |       '@vue/shared': 3.2.31
462 |     dev: false
463 | 


--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 |   - 'packages/*'


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