├── .github
    └── workflows
    │   └── develop.yml
├── .gitignore
├── .vscode
    └── settings.json
├── CLI.md
├── CORE.md
├── DevTools.md
├── README.md
├── ROUTER.md
├── SSR.md
├── STATE_MANAGEMENT.md
├── package.json
├── patches
    └── json2md+1.7.0.patch
├── scripts
    └── updateReadme.js
├── template
    ├── next-template
    │   ├── .gitignore
    │   ├── README.md
    │   ├── components
    │   │   ├── head.js
    │   │   └── nav.js
    │   ├── next.config.js
    │   ├── package.json
    │   ├── pages
    │   │   └── index.js
    │   ├── static
    │   │   └── favicon.ico
    │   └── yarn.lock
    ├── nuxt-template
    │   ├── .editorconfig
    │   ├── .eslintrc.js
    │   ├── .gitignore
    │   ├── .prettierrc
    │   ├── README.md
    │   ├── assets
    │   │   └── README.md
    │   ├── components
    │   │   ├── Logo.vue
    │   │   └── README.md
    │   ├── layouts
    │   │   ├── README.md
    │   │   └── default.vue
    │   ├── middleware
    │   │   └── README.md
    │   ├── nuxt.config.js
    │   ├── package.json
    │   ├── pages
    │   │   ├── README.md
    │   │   └── index.vue
    │   ├── plugins
    │   │   └── README.md
    │   ├── static
    │   │   ├── README.md
    │   │   └── favicon.ico
    │   ├── store
    │   │   └── README.md
    │   ├── stylelint.config.js
    │   └── yarn.lock
    ├── react-template
    │   ├── .gitignore
    │   ├── README.md
    │   ├── package.json
    │   ├── public
    │   │   ├── favicon.ico
    │   │   ├── index.html
    │   │   ├── logo192.png
    │   │   ├── logo512.png
    │   │   ├── manifest.json
    │   │   └── robots.txt
    │   ├── src
    │   │   ├── App.css
    │   │   ├── App.js
    │   │   ├── App.test.js
    │   │   ├── index.css
    │   │   ├── index.js
    │   │   ├── logo.svg
    │   │   ├── serviceWorker.js
    │   │   └── setupTests.js
    │   └── yarn.lock
    └── vue-template
    │   ├── .gitignore
    │   ├── README.md
    │   ├── babel.config.js
    │   ├── package.json
    │   ├── public
    │       ├── favicon.ico
    │       └── index.html
    │   ├── src
    │       ├── App.vue
    │       ├── assets
    │       │   └── logo.png
    │       ├── components
    │       │   └── HelloWorld.vue
    │       └── main.js
    │   └── yarn.lock
└── yarn.lock


/.github/workflows/develop.yml:
--------------------------------------------------------------------------------
 1 | name: 'UPDATE README'
 2 | 
 3 | on:
 4 |   schedule:
 5 |     - cron: '0 3 * * *'
 6 | 
 7 | jobs:
 8 |   update:
 9 |     runs-on: ubuntu-latest
10 | 
11 |     steps:
12 |       - uses: actions/checkout@v2
13 |       - uses: actions/setup-node@v1
14 |         with:
15 |           node-version: 12
16 |       - run: yarn install
17 |       - run: yarn sync
18 |       - name: Commit files
19 |         run: |
20 |           git config --local user.email "action@github.com"
21 |           git config --local user.name "GitHub Action"
22 |           git commit -m "update readme" -a
23 |       - name: Push changes
24 |         uses: ad-m/github-push-action@master
25 |         with:
26 |           github_token: ${{ secrets.GITHUB_TOKEN }}
27 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/*
2 | 
3 | output/*


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "editor.formatOnSave": true
3 | }


--------------------------------------------------------------------------------
/CLI.md:
--------------------------------------------------------------------------------
 1 | # CLI
 2 | 
 3 | ### React.js: create-react-app
 4 | 
 5 | ```zsh
 6 | npx create-react-app react-template
 7 | npx create-react-app react-template --template typescript
 8 | ```
 9 | 
10 | ### Next.js: create-next-app
11 | 
12 | ```zsh
13 | npx create-next-app next-template
14 | npx create-next-app --example with-typescript next-template
15 | ```
16 | 
17 | ### Vue.js: vue-cli
18 | 
19 | ```zsh
20 | yarn global add @vue/cli
21 | vue create vue-template
22 | ```
23 | 
24 | ### Nuxt.js: create-nuxt-app
25 | 
26 | ```zsh
27 | npx create-nuxt-app nuxt-template
28 | ```
29 | 
30 | ---
31 | 
32 | ## Reference
33 | 
34 | - [create-react-app](https://create-react-app.dev/docs/getting-started/)
35 | - [create-next-app](https://nextjs.org/blog/create-next-app)
36 | - [vue-cli](https://cli.vuejs.org/)
37 | - [create-nuxt-app](https://github.com/nuxt/create-nuxt-app)
38 | 


--------------------------------------------------------------------------------
/CORE.md:
--------------------------------------------------------------------------------
  1 | # CORE: React.js & Vue.js
  2 | 
  3 | ## Render
  4 | 
  5 | ### React.js
  6 | 
  7 | ```javascript
  8 | ReactDOM.render(<App />, document.getElementById("root"));
  9 | ```
 10 | 
 11 | ### Vue.js
 12 | 
 13 | ```javascript
 14 | new Vue({
 15 |   render: (h) => h(App),
 16 | }).$mount("#root");
 17 | ```
 18 | 
 19 | ## Basic-Component
 20 | 
 21 | ### React.js
 22 | 
 23 | #### Class component
 24 | 
 25 | ```javascript
 26 | class MyReactComponent extends React.Component {
 27 |   render() {
 28 |     return <h1>Hello world</h1>;
 29 |   }
 30 | }
 31 | ```
 32 | 
 33 | #### Function component
 34 | 
 35 | ```javascript
 36 | function MyReactComponent() {
 37 |   return <h1>Hello world</h1>;
 38 | }
 39 | ```
 40 | 
 41 | ### Vue.js
 42 | 
 43 | ```html
 44 | <template>
 45 |   <h1>Hello World</h1>
 46 | </template>
 47 | <script>
 48 |   export default {
 49 |     name: "MyVueComponent",
 50 |   };
 51 | </script>
 52 | ```
 53 | 
 54 | ## Prop
 55 | 
 56 | ### React.js
 57 | 
 58 | ```javascript
 59 | function MyReactComponent(props) {
 60 |   const { name, mark } = props;
 61 | 
 62 |   return <h1>Hello {name}{mark}</h1>;
 63 | }
 64 | 
 65 | MyReactComponent.propTypes = {
 66 |   name: PropTypes.string.isRequired,
 67 |   mark: PropTypes.string,
 68 | }
 69 | MyReactComponent.defaultProps = {
 70 |   mark: '!',
 71 | }
 72 | ...
 73 | 
 74 | <MyReactComponent name="world">
 75 | ```
 76 | 
 77 | ### Vue.js
 78 | 
 79 | ```html
 80 | <template>
 81 |   <h1>Hello {{ name }}</h1>
 82 | </template>
 83 | <script>
 84 |   export default {
 85 |     name: "MyVueComponent",
 86 |     props: {
 87 |       name: {
 88 |         type: String,
 89 |         required: true,
 90 |       },
 91 |       mark: {
 92 |         type: String,
 93 |         default: "!",
 94 |       },
 95 |     },
 96 |   };
 97 | </script>
 98 | 
 99 | ...
100 | 
101 | <MyVueComponent name="World" />
102 | ```
103 | 
104 | ## Event-Binding
105 | 
106 | ### React.js
107 | 
108 | #### Class component
109 | 
110 | ```javascript
111 | class MyReactComponent extends React.Component {
112 |   save = () => {
113 |     console.log("save");
114 |   };
115 | 
116 |   render() {
117 |     return <button onClick={this.save}>Save</button>;
118 |   }
119 | }
120 | ```
121 | 
122 | #### Function component
123 | 
124 | ```javascript
125 | function MyReactComponent() {
126 |   const save = () => {
127 |     console.log("save");
128 |   };
129 | 
130 |   return <button onClick={save}>Save</button>;
131 | }
132 | ```
133 | 
134 | ### Vue.js
135 | 
136 | ```html
137 | <template>
138 |   <button @click="save()">Save</button>
139 | </template>
140 | <script>
141 |   export default {
142 |     methods: {
143 |       save() {
144 |         console.log("save");
145 |       },
146 |     },
147 |   };
148 | </script>
149 | ```
150 | 
151 | ## Custom-Event
152 | 
153 | ### React.js
154 | 
155 | ```javascript
156 | function MyItem({ item, handleDelete }) {
157 |   return <button onClick={() => handleDelete(item)}>{item.name}</button>;
158 | 
159 |   /*
160 |    * Apply useCallback hook to prevent generate new function every rendering.
161 |    *
162 |    * const handleClick = useCallback(() => handleDelete(item), [item, handleDelete]);
163 |    *
164 |    * return <button onClick={handleClick}>{item.name}</button>;
165 |   */
166 | }
167 | 
168 | ...
169 | 
170 | function App() {
171 |   const handleDelete = () => { ... }
172 | 
173 |   return <MyItem item={...} handleDelete={handleDelete} />
174 | }
175 | 
176 | ```
177 | 
178 | ### Vue.js
179 | 
180 | ```html
181 | <template>
182 |   <button @click="deleteItem()">{{item.name}}</button>
183 | </template>
184 | <script>
185 |   export default {
186 |     name: "my-item",
187 |     props: {
188 |       item: Object,
189 |     },
190 |     methods: {
191 |       deleteItem() {
192 |         this.$emit("delete", this.item);
193 |       },
194 |     },
195 |   };
196 | </script>
197 | 
198 | ...
199 | 
200 | <template>
201 |   <MyItem :item="item" @delete="handleDelete" />
202 | </template>
203 | <script>
204 |   export default {
205 |     components: {
206 |       MyItem,
207 |     },
208 |     methods: {
209 |       handleDelete(item) { ... }
210 |     },
211 |   };
212 | </script>
213 | ```
214 | 
215 | ## State
216 | 
217 | ### React.js
218 | 
219 | #### Class component
220 | 
221 | ```javascript
222 | class MyReactComponent extends React.Component {
223 |   state = {
224 |     name: 'world,
225 |   }
226 |   render() {
227 |     return <h1>Hello { this.state.name }</h1>;
228 |   }
229 | }
230 | ```
231 | 
232 | #### Function component
233 | 
234 | ```javascript
235 | function MyReactComponent() {
236 |   const [name, setName] = useState("world");
237 | 
238 |   return <h1>Hello {name}</h1>;
239 | }
240 | ```
241 | 
242 | ### Vue.js
243 | 
244 | ```html
245 | <template>
246 |   <h1>Hello {{ name }}</h1>
247 |   <!-- use component state as prop -->
248 |   <my-vue-component :name="name">
249 | </template>
250 | <script>
251 |   export default {
252 |     data() {
253 |       return { name: "world" };
254 |     },
255 |   };
256 | </script>
257 | ```
258 | 
259 | ## Change-State
260 | 
261 | ### React.js
262 | 
263 | #### Class component
264 | 
265 | ```javascript
266 | class MyReactComponent extends React.Component {
267 |   state = {
268 |     count: 0,
269 |   };
270 | 
271 |   increaseCount = () => {
272 |     this.setState({ count: this.state.count + 1 });
273 |     // get current state before update to make sure we didn't use the stale value
274 |     // this.setState(currentState => ({ count: currentState.count + 1 }));
275 |   };
276 | 
277 |   render() {
278 |     return (
279 |       <div>
280 |         <span>{this.state.count}</span>
281 |         <button onClick={this.increaseCount}>Add</button>
282 |       </div>
283 |     );
284 |   }
285 | }
286 | ```
287 | 
288 | #### Function component
289 | 
290 | ```javascript
291 | function MyReactComponent() {
292 |   const [count, setCount] = useState(0);
293 | 
294 |   const increaseCount = () => {
295 |     setCount(count + 1);
296 |     // setCount(currentCount => currentCount + 1);
297 |   };
298 | 
299 |   return (
300 |     <div>
301 |       <span>{count}</span>
302 |       <button onClick={increaseCount}>Add</button>
303 |     </div>
304 |   );
305 | }
306 | ```
307 | 
308 | ### Vue.js
309 | 
310 | ```html
311 | <template>
312 |   <div>
313 |     <span>{{count}}</span>
314 |     <button @click="increaseCount()">Add</button>
315 |   </div>
316 | </template>
317 | <script>
318 |   export default {
319 |     data() {
320 |       return { count: 0 };
321 |     },
322 |     methods: {
323 |       increaseCount() {
324 |         this.count = this.count + 1;
325 |       },
326 |     },
327 |   };
328 | </script>
329 | ```
330 | 
331 | ## Two-Way-Binding
332 | 
333 | ### React.js
334 | 
335 | _React didn't have two-way binding, so we need to handle the data flow on our own_
336 | 
337 | ```javascript
338 | function MyReactComponent() {
339 |   const [content, setContent] = useState("");
340 | 
341 |   return (
342 |     <input
343 |       type="text"
344 |       value={content}
345 |       onChange={(e) => setContent(e.target.value)}
346 |     />
347 |   );
348 | }
349 | ```
350 | 
351 | ### Vue.js
352 | 
353 | ```html
354 | <template>
355 |   <input type="text" v-model="content" />
356 | </template>
357 | <script>
358 |   export default {
359 |     data() {
360 |       return { content: "" };
361 |     },
362 |   };
363 | </script>
364 | ```
365 | 
366 | ## Compute
367 | 
368 | ### React.js
369 | 
370 | _React.js don't have `compute` property, but we can achieve this through react hook easily_
371 | 
372 | ```javascript
373 | function DisplayName({ firstName, lastName }) {
374 |   const displayName = useMemo(() => {
375 |     return `${firstName} ${lastName}`;
376 |   }, [firstName, lastName]);
377 | 
378 |   return <div>{displayName}</div>;
379 | }
380 | 
381 | ...
382 | 
383 | <DisplayName firstName="Hello" lastName="World" />
384 | ```
385 | 
386 | ### Vue.js
387 | 
388 | ```html
389 | <template>
390 |   <div>{{displayName}}</div>
391 | </template>
392 | <script>
393 |   export default {
394 |     name: "display-name",
395 |     props: {
396 |       firstName: String,
397 |       lastName: String,
398 |     },
399 |     computed: {
400 |       displayName: function () {
401 |         return `${this.firstName} ${this.lastName}`;
402 |       },
403 |     },
404 |   };
405 | </script>
406 | 
407 | ...
408 | 
409 | <DisplayName firstName="Hello" lastName="World" />
410 | ```
411 | 
412 | ## Watch
413 | 
414 | _React.js don't have `watch` property, but we can achieve this through react hook easily_
415 | 
416 | ```javascript
417 | function MyReactComponent() {
418 |   const [count, setCount] = useState(0);
419 | 
420 |   const increaseCount = () => {
421 |     setCount((currentCount) => currentCount + 1);
422 |   };
423 | 
424 |   useEffect(() => {
425 |     localStorage.setItem("my_count", newCount);
426 |   }, [count]);
427 | 
428 |   return (
429 |     <div>
430 |       <span>{count}</span>
431 |       <button onClick={increaseCount}>Add</button>
432 |     </div>
433 |   );
434 | }
435 | ```
436 | 
437 | ### Vue.js
438 | 
439 | ```html
440 | <template>
441 |   <div>
442 |     <span>{{count}}</span>
443 |     <button @click="increaseCount()">Add</button>
444 |   </div>
445 | </template>
446 | <script>
447 |   export default {
448 |     data() {
449 |       return { count: 0 };
450 |     },
451 |     methods: {
452 |       increaseCount() {
453 |         this.count = this.count + 1;
454 |       },
455 |     },
456 |     watch: {
457 |       count: function (newCount, oldCount) {
458 |         localStorage.setItem("my_count", newCount);
459 |       },
460 |     },
461 |   };
462 | </script>
463 | ```
464 | 
465 | ## Children-and-Slot
466 | 
467 | ### React.js
468 | 
469 | ```javascript
470 | function MyReactComponent({ children }) {
471 |   return <div>{children}</div>;
472 | }
473 | 
474 | ...
475 | 
476 | <MyReactComponent>Hello World</MyReactComponent>
477 | ```
478 | 
479 | ### Vue.js
480 | 
481 | ```html
482 | <template>
483 |   <div>
484 |     <slot />
485 |   </div>
486 | </template>
487 | <script>
488 |   export default {
489 |     name: "my-vue-component",
490 |   };
491 | </script>
492 | 
493 | ...
494 | 
495 | <MyVueComponent>Hello World</MyVueComponent>
496 | ```
497 | 
498 | ## Render-HTML
499 | 
500 | ### React.js
501 | 
502 | ```javascript
503 | function MyReactComponent() {
504 |   return <div dangerouslySetInnerHTML={{ __html: "<pre>...</pre>" }} />;
505 | }
506 | ```
507 | 
508 | ### Vue.js
509 | 
510 | ```html
511 | <template>
512 |   <div v-html="html"></div>
513 | </template>
514 | <script>
515 |   export default {
516 |     data() {
517 |       return {
518 |         html: "<pre>...</pre>",
519 |       };
520 |     },
521 |   };
522 | </script>
523 | ```
524 | 
525 | ## Conditional-Rendering
526 | 
527 | ### React.js
528 | 
529 | ```javascript
530 | function MyReactComponent() {
531 |   const [isLoading, setLoading] = useState(true);
532 | 
533 |   return (
534 |     <div>
535 |       {isLoading && <span>Loading...</span>}
536 |       {isLoading ? <div>is loading</div> : <div>is loaded</div>}
537 |     </div>
538 |   );
539 | }
540 | ```
541 | 
542 | ### Vue.js
543 | 
544 | ```html
545 | <template>
546 |   <div>
547 |     <!--v-show: always render but change css base on the condition-->
548 |     <span v-show="loading">Loading...</span>
549 |     <div>
550 |       <div v-if="loading">is loading</div>
551 |       <div v-else>is loaded</div>
552 |     </div>
553 |   </div>
554 | </template>
555 | <script>
556 |   export default {
557 |     data() {
558 |       return { loading: true };
559 |     },
560 |   };
561 | </script>
562 | ```
563 | 
564 | ## List-Rendering
565 | 
566 | ### React.js
567 | 
568 | ```javascript
569 | function MyReactComponent({ items }) {
570 |   return (
571 |     <ul>
572 |       {items.map((item) => (
573 |         <li key={item.id}>
574 |           {item.name}: {item.desc}
575 |         </li>
576 |       ))}
577 |     </ul>
578 |   );
579 | }
580 | ```
581 | 
582 | ### Vue.js
583 | 
584 | ```html
585 | <template>
586 |   <ul>
587 |     <li v-for="item in items" :key="item.id">
588 |       {{item.name}}: {{item.desc}}
589 |     </li>
590 |   </ul>
591 | </template>
592 | <script>
593 |   export default {
594 |     props: {
595 |       items: Array,
596 |     },
597 |   };
598 | </script>
599 | ```
600 | 
601 | ## Render-Props
602 | 
603 | ### React.js
604 | 
605 | ```javascript
606 | function Modal({children, isOpen}) {
607 |   const [isModalOpen, toggleModalOpen] = useState(isOpen);
608 | 
609 |   return (
610 |     <div className={isModalOpen ? 'open' : 'close'}>
611 |       {type children === 'function' ? children(toggleModalOpen) : children}
612 |     </div>)
613 |   ;
614 | }
615 | 
616 | Modal.propTypes = {
617 |   isOpen: PropTypes.bool,
618 |   children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
619 | }
620 | Modal.defaultProps = {
621 |   isOpen: false,
622 | }
623 | 
624 | ...
625 | 
626 | <Modal isOpen>
627 |   {(toggleModalOpen) => {
628 |     <div>
629 |       <div>...</div>
630 |       <button onClick={() => toggleModalOpen(false)}>Cancel</button>
631 |     </div>
632 |   }}
633 | </Modal>
634 | ```
635 | 
636 | ### Vue.js (slot)
637 | 
638 | ```html
639 | <template>
640 |   <div v-show="isModalOpen">
641 |     <slot v-bind:toggleModal="toggleModalOpen" />
642 |   </div>
643 | </template>
644 | <script>
645 |   export default {
646 |     name: "modal",
647 |     props: {
648 |       isOpen: {
649 |         type: Boolean,
650 |         default: false,
651 |       },
652 |     },
653 |     data() {
654 |       return {
655 |         isModalOpen: this.isOpen,
656 |       };
657 |     },
658 |     methods: {
659 |       toggleModalOpen(state) {
660 |         this.isModalOpen = state;
661 |       },
662 |     },
663 |   };
664 | </script>
665 | 
666 | ...
667 | 
668 | <Modal isOpen>
669 |   <template v-slot="slotProps">
670 |     <div>...</div>
671 |     <button @click="slotProps.toggleModal(false)">Close</button>
672 |   </template>
673 | </Modal>
674 | ```
675 | 
676 | ## Lifecycle
677 | 
678 | ### React.js
679 | 
680 | - http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
681 | 
682 | #### Class component
683 | 
684 | ```javascript
685 | class MyReactComponent extends React.Component {
686 |   static getDerivedStateFromProps(props, state) {}
687 |   componentDidMount() {}
688 |   shouldComponentUpdate(nextProps, nextState) {}
689 |   getSnapshotBeforeUpdate(prevProps, prevState) {}
690 |   componentDidUpdate(prevProps, prevState) {}
691 |   componentWillUnmount() {}
692 | 
693 |   render() {
694 |     return <div>Hello World</div>;
695 |   }
696 | }
697 | ```
698 | 
699 | #### Function component
700 | 
701 | ```javascript
702 | function MyReactComponent() {
703 |   // componentDidMount
704 |   useEffect(() => {}, []);
705 | 
706 | 
707 |   // componentDidUpdate + componentDidMount
708 |   useEffect(() => {});
709 | 
710 |   // componentWillUnmount
711 |   useEffect(() => {
712 |     return () => {...}
713 |   }, []);
714 | 
715 |   // runs synchronously after a render but before the screen is updated
716 |   useLayoutEffect(() => {}, []);
717 | 
718 |   return <div>Hello World</div>;
719 | }
720 | ```
721 | 
722 | ### Vue.js
723 | 
724 | - https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
725 | 
726 | ```html
727 | <template>
728 |   <div>Hello World</div>
729 | </template>
730 | <script>
731 |   export default {
732 |     beforeCreate() {},
733 |     created() {},
734 |     beforeMount() {},
735 |     mounted() {},
736 |     beforeUpdate() {},
737 |     updated() {},
738 |     beforeDestroy() {},
739 |     destroyed() {},
740 |   };
741 | </script>
742 | ```
743 | 
744 | ## Error-Handling
745 | 
746 | ### React.js
747 | 
748 | ```javascript
749 | class ErrorBoundary extends React.Component {
750 |   state = { hasError: false };
751 | 
752 |   static getDerivedStateFromError(error) {
753 |     // Update state so the next render will show the fallback UI.
754 |     return { hasError: true };
755 |   }
756 | 
757 |   componentDidCatch(error, errorInfo) {}
758 | 
759 |   render() {
760 |     if (this.state.hasError) return <h1>Something went wrong.</h1>;
761 |     return this.props.children;
762 |   }
763 | }
764 | 
765 | ...
766 | 
767 | <ErrorBoundary>
768 |   <App />
769 | </ErrorBoundary>
770 | ```
771 | 
772 | ### Vue.js
773 | 
774 | ```javascript
775 | const vm = new Vue({
776 |   data: {
777 |     error: "",
778 |   },
779 |   errorCaptured: function(err, component, details) {
780 |     error = err.toString();
781 |   }
782 | }
783 | ```
784 | 
785 | ## Ref
786 | 
787 | ### React.js
788 | 
789 | #### Class component
790 | 
791 | ```javascript
792 | class AutofocusInput extends React.Component {
793 |   constructor(props) {
794 |     super(props);
795 |     this.ref = React.createRef();
796 |   }
797 | 
798 |   state = {
799 |     content: "",
800 |   };
801 | 
802 |   componentDidMount() {
803 |     this.ref.current.focus();
804 |   }
805 | 
806 |   setContent = (e) => {
807 |     this.setState({ content: e.target.value });
808 |   };
809 | 
810 |   render() {
811 |     return (
812 |       <input
813 |         ref={this.ref}
814 |         type="text"
815 |         value={this.state.content}
816 |         onChange={this.setContent}
817 |       />
818 |     );
819 |   }
820 | }
821 | ```
822 | 
823 | #### Function component
824 | 
825 | ```javascript
826 | function AutofocusInput() {
827 |   const [content, setContent] = useState("");
828 |   const ref = useRef(null);
829 | 
830 |   useEffect(() => {
831 |     if (ref && ref.current) {
832 |       ref.current.focus();
833 |     }
834 |   }, []);
835 | 
836 |   return (
837 |     <input
838 |       ref={ref}
839 |       type="text"
840 |       value={content}
841 |       onChange={(e) => setContent(e.target.value)}
842 |     />
843 |   );
844 | }
845 | ```
846 | 
847 | ### Vue.js
848 | 
849 | ```html
850 | <template>
851 |   <input ref="input" type="text" v-model="content" />
852 | </template>
853 | <script>
854 |   export default {
855 |     name: "autofocus-input",
856 |     data() {
857 |       return { content: "" };
858 |     },
859 |     mounted() {
860 |       this.$refs.input.focus();
861 |     },
862 |   };
863 | </script>
864 | ```
865 | 
866 | ## Performance-Optimization
867 | 
868 | ### React.js
869 | 
870 | #### PureComponent
871 | 
872 | ```javascript
873 | class MyReactComponent extends React.PureComponent {
874 |   ...
875 | }
876 | ```
877 | 
878 | #### shouldComponentUpdate
879 | 
880 | ```javascript
881 | class MyReactComponent extends React.Component {
882 |   shouldComponentUpdate(nextProps) {...}
883 | 
884 |   ...
885 | }
886 | ```
887 | 
888 | ### React.memo
889 | 
890 | ```javascript
891 | export default React.memo(
892 |   MyReactComponent,
893 |   (prevProps, nextProps) => {
894 |     ...
895 |   }
896 | );
897 | ```
898 | 
899 | ### useMemo
900 | 
901 | ```javascript
902 | export default function MyReactComponent() {
903 |   return React.useMemo(() => {
904 |     return <div>...</div>;
905 |   }, []);
906 | }
907 | ```
908 | 
909 | ### useCallback
910 | 
911 | ```javascript
912 | function MyItem({ item, handleDelete }) {
913 |   const handleClick = useCallback(() => handleDelete(item), [
914 |     item,
915 |     handleDelete,
916 |   ]);
917 | 
918 |   return <button onClick={handleClick}>{item.name}</button>;
919 | }
920 | ```
921 | 
922 | ### Vue.js
923 | 
924 | #### v:once
925 | 
926 | ```html
927 | <span v-once>This will never change: {{msg}}</span>
928 | ```
929 | 
930 | #### functional component
931 | 
932 | - https://vuejs.org/v2/guide/render-function.html#Functional-Components
933 | 
934 | ```html
935 | <template functional>
936 |   <h1>Hello {{ name }}</h1>
937 | </template>
938 | <script>
939 |   export default {
940 |     name: "MyVueComponent",
941 |     props: {
942 |       name: String,
943 |     },
944 |   };
945 | </script>
946 | ```
947 | 
948 | #### keep-alive component
949 | 
950 | - https://vuejs.org/v2/api/#keep-alives
951 | 
952 | ```html
953 | <keep-alive>
954 |   <component :is="view"></component>
955 | </keep-alive>
956 | ```
957 | 
958 | ---
959 | 
960 | ## Reference
961 | 
962 | - [React.js](https://reactjs.org/docs/getting-started.html)
963 | - [Vue.js](https://vuejs.org/v2/guide/#Getting-Started)
964 | - [Vue and React Side by Side](https://medium.com/myriatek/vue-and-react-side-by-side-55d02b9fb222)
965 | - [I created the exact same app in React and Vue. Here are the differences](https://medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-2019-edition-42ba2cab9e56)
966 | - [Few Tips to Optimizing Performance of React Project](https://dev.to/oahehc/few-tips-to-optimizing-performance-of-react-project-5h25)
967 | - [5 Extremely Easy ways to drastically improve your VueJS app’s speed](https://dev.to/veebuv/5-extremely-easy-ways-to-drastically-improve-your-vuejs-app-s-speed-5k0)
968 | 


--------------------------------------------------------------------------------
/DevTools.md:
--------------------------------------------------------------------------------
 1 | # DevTools
 2 | 
 3 | ### React.js
 4 | 
 5 | - React: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
 6 | - Redux: https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd
 7 | 
 8 | ### Vue.js
 9 | 
10 | - Vue & Vuex: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
11 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React-Vue-Comparison
  2 | 
  3 | 
  4 | This repo is for someone who already familiar with React.js or Vue.js, and wants to find out the relative syntax in another framework.
  5 | 
  6 |  |  | ⭐️ | VERSION | OPEN ISSUES & PR | DOWNLOADS/wk | 
  7 |  | :--- | ---: | :---: | ---: | ---: | 
  8 |  | React: [npm](https://www.npmjs.com/package/react) [gh](https://github.com/facebook/react) [doc](https://reactjs.org/docs/getting-started.html) | 197,796 | 18.2.0 | 1,090 | 14,355,288
  9 | Vue: [npm](https://www.npmjs.com/package/vue) [gh](https://github.com/vuejs/vue) [doc](https://vuejs.org/v2/guide/l) | 200,728 | 3.2.45 | 587 | 3,150,797
 10 | Next.js: [npm](https://www.npmjs.com/package/next) [gh](https://github.com/vercel/next.js) [doc](https://nextjs.org/docs/getting-started) | 96,491 | 13.0.3 | 1,555 | 2,871,321
 11 | Nuxt.js: [npm](https://www.npmjs.com/package/nuxt) [gh](https://github.com/nuxt/nuxt.js) [doc](https://nuxtjs.org/guide) | 41,606 | 3.0.0 | 511 | 401,488
 12 | React-Router: [npm](https://www.npmjs.com/package/react-router) [gh](https://github.com/remix-run/react-router) [doc](https://reactrouter.com/) | 48,817 | 6.4.3 | 118 | 7,118,939
 13 | Vue-Router: [npm](https://www.npmjs.com/package/vue-router) [gh](https://github.com/vuejs/vue-router) [doc](https://router.vuejs.org/guide) | 18,903 | 4.1.6 | 109 | 1,946,617
 14 | redux: [npm](https://www.npmjs.com/package/redux) [gh](https://github.com/reduxjs/redux) [doc](https://redux.js.org/introduction/getting-started) | 58,890 | 4.2.0 | 56 | 6,901,716
 15 | react-redux: [npm](https://www.npmjs.com/package/react-redux) [gh](https://github.com/reduxjs/react-redux) [doc](https://react-redux.js.org/introduction/quick-start) | 22,456 | 8.0.5 | 13 | 5,212,531
 16 | vuex: [npm](https://www.npmjs.com/package/vuex) [gh](https://github.com/vuejs/vuex) [doc](https://vuex.vuejs.org/guide/) | 27,876 | 4.1.0 | 118 | 1,485,136 | 
 17 | 
 18 | 
 19 | _Update: 2022/11/17_
 20 | 
 21 | 
 22 | ---
 23 | 
 24 | ## Contents
 25 | 
 26 | ### [React.js vs Vue.js](/CORE.md)
 27 | 
 28 | 
 29 |  - [Render](/CORE.md#render)
 30 |  - [Basic-Component](/CORE.md#basic-component)
 31 |  - [Prop](/CORE.md#prop)
 32 |  - [Event-Binding](/CORE.md#event-binding)
 33 |  - [Custom-Event](/CORE.md#custom-event)
 34 |  - [State](/CORE.md#state)
 35 |  - [Change-State](/CORE.md#change-state)
 36 |  - [Two-Way-Binding(Vue.js only)](/CORE.md#two-way-binding)
 37 |  - [Compute](/CORE.md#compute)
 38 |  - [Watch](/CORE.md#watch)
 39 |  - [Children-and-Slot](/CORE.md#children-and-slot)
 40 |  - [Render-HTML](/CORE.md#render-html)
 41 |  - [Conditional-Rendering](/CORE.md#conditional-rendering)
 42 |  - [List-Rendering](/CORE.md#list-rendering)
 43 |  - [Render-Props](/CORE.md#render-props)
 44 |  - [Lifecycle](/CORE.md#lifecycle)
 45 |  - [Error-Handling](/CORE.md#error-handling)
 46 |  - [Ref](/CORE.md#ref)
 47 |  - [Performance-Optimization](/CORE.md#performance-optimization)
 48 | 
 49 | ### [Next.js vs Nuxt.js](/SSR.md)
 50 | 
 51 | 
 52 |  - [Assets](/SSR.md#assets)
 53 |  - [Basic-Routes](/SSR.md#basic-routes)
 54 |  - [Dynamic-Routes](/SSR.md#dynamic-routes)
 55 |  - [Link](/SSR.md#link)
 56 |  - [Fetch-On-Server](/SSR.md#fetch-on-server)
 57 |  - [Layout](/SSR.md#layout)
 58 |  - [Error-Page](/SSR.md#error-page)
 59 |  - [Meta-Tag](/SSR.md#meta-tag)
 60 |  - [Context](/SSR.md#context)
 61 | 
 62 | ### Tools
 63 | 
 64 | 
 65 |  - [CLI](/CLI.md)
 66 |  - [DevTools](/DevTools.md)
 67 | 
 68 | ### [React-Router vs Vue-Router](/ROUTER.md)
 69 | 
 70 | 
 71 |  - [Basic-Routing](/ROUTER.md#Basic-Routing)
 72 |  - [Dynamic-Routing](/ROUTER.md#Dynamic-Routing)
 73 |  - [Nested-Routing](/ROUTER.md#Nested-Routing)
 74 |  - [Link](/ROUTER.md#Link)
 75 |  - [NavLink](/ROUTER.md#NavLink)
 76 |  - [Get-Location](/ROUTER.md#Get-Location)
 77 |  - [Push](/ROUTER.md#Push)
 78 |  - [Replace](/ROUTER.md#Replace)
 79 |  - [Redirect](/ROUTER.md#Redirect)
 80 |  - [Event](/ROUTER.md#Event)
 81 |  - [Scroll](/ROUTER.md#Scroll)
 82 |  - [Lazy-Loading-and-Code-Splitting](/ROUTER.md#Lazy-Loading-and-Code-Splitting)
 83 | 
 84 | ### [Redux vs Vuex](/STATE_MANAGEMENT.md)
 85 | 
 86 | 
 87 |  - [Create-Store](/STATE_MANAGEMENT.md#Create-Store)
 88 |  - [Action](/STATE_MANAGEMENT.md#Action)
 89 |  - [Async-Action](/STATE_MANAGEMENT.md#Async-Action)
 90 |  - [Reducer | Mutation](/STATE_MANAGEMENT.md#Reducer-or-Mutation)
 91 |  - [Combine-Reducers | Modules](/STATE_MANAGEMENT.md#Combine-Reducers-or-Modules)
 92 |  - [Connect-with-Component](/STATE_MANAGEMENT.md#Connect-with-Component)
 93 |  - [Middleware | Plugin](/STATE_MANAGEMENT.md#Middleware-or-Plugin)
 94 |  - [Selector | Getter](/STATE_MANAGEMENT.md#Selector-or-Getter)
 95 |  - [DevTools](/STATE_MANAGEMENT.md#DevTools)
 96 | 
 97 | 
 98 | ---
 99 | 
100 | ## Reference
101 | 
102 | 
103 |  - [React.js](https://reactjs.org/docs/getting-started.html)
104 |  - [Next.js](https://nextjs.org/docs/getting-started)
105 |  - [React Router](https://reacttraining.com/react-router/web/guides/quick-start)
106 |  - [Vue.js](https://vuejs.org/v2/guide/#Getting-Started)
107 |  - [Nuxt.js](https://nuxtjs.org/guide/installation)
108 |  - [Vue Router](https://router.vuejs.org/guide/)
109 |  - [Redux](https://redux.js.org/introduction/getting-started)
110 |  - [React-Redux](https://react-redux.js.org/introduction/quick-start)
111 |  - [Reselect](https://github.com/reduxjs/reselect)
112 |  - [Vuex](https://vuex.vuejs.org/guide/)
113 | 


--------------------------------------------------------------------------------
/ROUTER.md:
--------------------------------------------------------------------------------
  1 | # Router: React-Router & Vue-Router
  2 | 
  3 | ## Basic-Routing
  4 | 
  5 | ### React-Router
  6 | 
  7 | ```js
  8 | import { BrowserRouter, Switch, Route } from 'react-router-dom';
  9 | 
 10 | export default function App() {
 11 |   return (
 12 |     <BrowserRouter>
 13 |       <div>
 14 |         <Switch>
 15 |           <Route path="/about" component={About} />
 16 |           <Route path="/" component={Home} />
 17 |         </Switch>
 18 |       </div>
 19 |     </BrowserRouter>
 20 |   );
 21 | }
 22 | ```
 23 | 
 24 | ### Vue-Router
 25 | 
 26 | ```js
 27 | const routes = [
 28 |   { path: '/foo', component: Foo },
 29 |   { path: '/bar', component: Bar },
 30 | ];
 31 | const router = new VueRouter({
 32 |   mode: 'history',
 33 |   routes,
 34 | });
 35 | const app = new Vue({ router }).$mount('#app');
 36 | ```
 37 | 
 38 | ```html
 39 | <div id="app">
 40 |   <router-view></router-view>
 41 | </div>
 42 | ```
 43 | 
 44 | ## Dynamic-Routing
 45 | 
 46 | ### React-Router
 47 | 
 48 | ```js
 49 | import { BrowserRouter, Route } from 'react-router-dom';
 50 | 
 51 | function App() {
 52 |   return (
 53 |     <BrowserRouter>
 54 |       <div>
 55 |         <Route path="/contact/:id" component={Contact} />
 56 |       </div>
 57 |     </BrowserRouter>
 58 |   );
 59 | }
 60 | 
 61 | ...
 62 | 
 63 | import { useParams } from 'react-router-dom';
 64 | 
 65 | function Contact() {
 66 |   let { id } = useParams();
 67 | 
 68 |   return ...;
 69 | }
 70 | ```
 71 | 
 72 | ### Vue-Router
 73 | 
 74 | ```js
 75 | const router = new VueRouter({
 76 |   mode: 'history',
 77 |   routes: [{ path: '/contact/:id', component: Contact }],
 78 | });
 79 | 
 80 | export default {
 81 |   computed: {
 82 |     id() {
 83 |       return this.$route.params.id;
 84 |     },
 85 |   },
 86 | };
 87 | ```
 88 | 
 89 | ## Nested-Routing
 90 | 
 91 | ### React-Router
 92 | 
 93 | ```js
 94 | import { BrowserRouter, Route } from 'react-router-dom';
 95 | 
 96 | const App = () => (
 97 |   <BrowserRouter>
 98 |     <div>
 99 |       <Route path="/tacos" component={Tacos} />
100 |     </div>
101 |   </BrowserRouter>
102 | );
103 | 
104 | ...
105 | 
106 | import { Route } from 'react-router-dom';
107 | 
108 | const Tacos = ({ match }) => (
109 |   <div>
110 |     {/* here's a nested Route, match.url helps us make a relative path */}
111 |     <Route path={match.url + '/carnitas'} component={Carnitas} />
112 |   </div>
113 | );
114 | ```
115 | 
116 | ### Vue-Router
117 | 
118 | ```js
119 | const router = new VueRouter({
120 |   routes: [
121 |     {
122 |       path: '/user/:id',
123 |       component: User,
124 |       children: [
125 |         {
126 |           path: 'profile',
127 |           component: UserProfile,
128 |         },
129 |         {
130 |           path: 'posts',
131 |           component: UserPosts,
132 |         },
133 |       ],
134 |     },
135 |   ],
136 | });
137 | 
138 | const User = {
139 |   template: `
140 |     <div class="user">
141 |       <h2>User {{ $route.params.id }}</h2>
142 |       <router-view></router-view>
143 |     </div>
144 |   `,
145 | };
146 | ```
147 | 
148 | ## Link
149 | 
150 | ### React-Router
151 | 
152 | ```js
153 | <Link
154 |   to={{
155 |     pathname: '/courses',
156 |     search: '?sort=name',
157 |     hash: '#the-hash',
158 |     state: { fromDashboard: true },
159 |   }}
160 | >
161 |   courses
162 | </Link>
163 | ```
164 | 
165 | ### Vue-Router
166 | 
167 | ```html
168 | <router-link to="/courses">courses</router-link>
169 | ```
170 | 
171 | ## NavLink
172 | 
173 | NavLink is used to display different style when current URL match to the link.
174 | 
175 | ### React-Router
176 | 
177 | ```js
178 | <NavLink to="/react" activeClassName="react">
179 |   React
180 | </NavLink>
181 | ```
182 | 
183 | ### Vue-Router
184 | 
185 | `router-link` automatically gets the .router-link-active class when its target route is matched.
186 | 
187 | ```html
188 | <router-link to="/vue">vue</router-link>
189 | ```
190 | 
191 | ## Get-Location
192 | 
193 | ### React-Router
194 | 
195 | #### Function component
196 | 
197 | ```js
198 | import { useLocation } from "react-router-dom";
199 | 
200 | function App() {
201 |   const location = useLocation();
202 | 
203 |   return ...;
204 | }
205 | ```
206 | 
207 | #### Class component
208 | 
209 | ```js
210 | import { withRouter } from "react-router";
211 | 
212 | class App extends React.Component {
213 |   static propTypes = {
214 |     location: PropTypes.object.isRequired
215 |   };
216 | 
217 |   render() {
218 |     const { location } = this.props;
219 | 
220 |     return ...;
221 |   }
222 | }
223 | export default withRouter(App);
224 | ```
225 | 
226 | ### Vue-Router
227 | 
228 | ```js
229 | export default {
230 |   computed: {
231 |     path() {
232 |       return this.$route.path;
233 |     },
234 |     params() {
235 |       return this.$route.params;
236 |     },
237 |     query() {
238 |       return this.$route.query;
239 |     },
240 |     hash() {
241 |       return this.$route.hash;
242 |     },
243 |     fullPath() {
244 |       return this.$route.fullPath;
245 |     },
246 |   },
247 | };
248 | ```
249 | 
250 | ## Push
251 | 
252 | ### React-Router
253 | 
254 | ```js
255 | import { useHistory } from 'react-router-dom';
256 | 
257 | function HomeButton() {
258 |   const history = useHistory();
259 | 
260 |   function handleClick() {
261 |     history.push('/home');
262 |   }
263 | 
264 |   return (
265 |     <button type="button" onClick={handleClick}>
266 |       Go home
267 |     </button>
268 |   );
269 | }
270 | ```
271 | 
272 | ### Vue-Router
273 | 
274 | ```js
275 | export default {
276 |   methods: {
277 |     toHome() {
278 |       this.$router.push('/home');
279 |     },
280 |     toUser(id) {
281 |       this.$router.push({ name: 'user', params: { userId: id } });
282 |     },
283 |     toRegister(id) {
284 |       // /register?plan=private
285 |       this.$router.push({ path: 'register', query: { plan: 'private' } });
286 |     },
287 |   },
288 | };
289 | ```
290 | 
291 | ## Replace
292 | 
293 | replacing the current entry instead of push a new entry onto the history stack.
294 | 
295 | ### React-Router
296 | 
297 | ```js
298 | <Link to="/courses" replace />;
299 | 
300 | // or
301 | 
302 | const history = useHistory();
303 | 
304 | function handleClick() {
305 |   history.replace('/courses');
306 | }
307 | ```
308 | 
309 | ### Vue-Router
310 | 
311 | ```html
312 | <router-link :to="/courses" replace />
313 | ```
314 | 
315 | or
316 | 
317 | ```js
318 | export default {
319 |   methods: {
320 |     toHome() {
321 |       this.$router.replace('/home');
322 |     },
323 |   },
324 | };
325 | ```
326 | 
327 | ## Redirect
328 | 
329 | ### React-Router
330 | 
331 | ```html
332 | <Redirect to="/login" />
333 | <Redirect from="/invoices" to="/invoices/dashboard" />
334 | // push a new entry onto the history instead of replacing the current one.
335 | <Redirect push to="/somewhere/else" />
336 | ```
337 | 
338 | ### Vue-Router
339 | 
340 | ```js
341 | const router = new VueRouter({
342 |   routes: [{ path: '/a', redirect: { name: 'foo' } }],
343 | });
344 | ```
345 | 
346 | ## Event
347 | 
348 | ### React-Router
349 | 
350 | #### Function component
351 | 
352 | ```js
353 | import { useHistory } from 'react-router-dom';
354 | 
355 | function App() {
356 |   const history = useHistory();
357 | 
358 |   useEffect(() => {
359 |     const unlisten = this.props.history.listen(...);
360 |     return () => unlisten();
361 |   }, [])
362 | 
363 |   return ...;
364 | }
365 | ```
366 | 
367 | #### Class component
368 | 
369 | ```js
370 | import { withRouter } from "react-router";
371 | 
372 | class App extends React.Component {
373 |   static propTypes = {
374 |     history: PropTypes.object.isRequired
375 |   };
376 | 
377 |   componentDidMount() {
378 |     this.unlisten = this.props.history.listen(...);
379 |   }
380 | 
381 |   componentWillUnmount() {
382 |     if (this.unlisten && typeof this.unlisten === 'function') {
383 |       this.unlisten();
384 |     }
385 |   }
386 | 
387 |   render() {
388 |     return ...;
389 |   }
390 | }
391 | export default withRouter(App);
392 | ```
393 | 
394 | ### Vue-Router
395 | 
396 | #### global
397 | 
398 | ```js
399 | const router = new VueRouter({ ... })
400 | 
401 | router.beforeEach((to, from, next) => { ... })
402 | router.afterEach((to, from) => { ... })
403 | ```
404 | 
405 | #### by route
406 | 
407 | ```js
408 | const router = new VueRouter({
409 |   routes: [
410 |     {
411 |       path: '/foo',
412 |       component: Foo,
413 |       beforeEnter: (to, from, next) => { ... }
414 |     }
415 |   ]
416 | })
417 | ```
418 | 
419 | ### by component
420 | 
421 | ```js
422 | const Foo = {
423 |   template: `...`,
424 |   beforeRouteEnter (to, from, next) { ... },
425 |   beforeRouteUpdate (to, from, next) { ... },
426 |   beforeRouteLeave (to, from, next) { ... },
427 | }
428 | ```
429 | 
430 | ## Scroll
431 | 
432 | ### React-Router
433 | 
434 | Because browsers are starting to handle the `default case` and apps have varying scrolling needs, `React-Router` don’t ship with default scroll management.  
435 | _https://reacttraining.com/react-router/web/guides/scroll-restoration_
436 | 
437 | ```js
438 | export default function ScrollToTop() {
439 |   const { pathname } = useLocation();
440 | 
441 |   useEffect(() => {
442 |     window.scrollTo(0, 0);
443 |   }, [pathname]);
444 | 
445 |   return null;
446 | }
447 | ```
448 | 
449 | ### Vue-Router
450 | 
451 | ```js
452 | const router = new VueRouter({
453 |   routes: [...],
454 |   scrollBehavior (to, from, savedPosition) {
455 |     // return desired position
456 |     if (savedPosition) {
457 |       return savedPosition
458 |     } else {
459 |       return { x: 0, y: 0 }
460 |     }
461 |   }
462 | })
463 | ```
464 | 
465 | ## Lazy-Loading-and-Code-Splitting
466 | 
467 | _If you are using Babel, you will need to add the [syntax-dynamic-import](https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import/) plugin so that Babel can properly parse the syntax._
468 | 
469 | ### React-Router
470 | 
471 | _https://github.com/gregberge/loadable-components_
472 | 
473 | ```js
474 | import loadable from '@loadable/component';
475 | 
476 | const LoadableComponent = loadable(() => import('./Dashboard.js'), {
477 |   fallback: <Loading />,
478 | });
479 | ```
480 | 
481 | ### Vue-Router
482 | 
483 | ```js
484 | const Foo = () => import('./Foo.vue');
485 | 
486 | const router = new VueRouter({
487 |   routes: [{ path: '/foo', component: Foo }],
488 | });
489 | ```
490 | 


--------------------------------------------------------------------------------
/SSR.md:
--------------------------------------------------------------------------------
  1 | # SSR: Next.js & Nuxt.js
  2 | 
  3 | ## Assets
  4 | 
  5 | ### Next.js
  6 | 
  7 | ```js
  8 | /*
  9 | |- public/
 10 | |-- my-image.png
 11 | */
 12 | function MyImage() {
 13 |   return <img src="/my-image.png" alt="my image" />;
 14 | }
 15 | ```
 16 | 
 17 | ### Nuxt.js
 18 | 
 19 | #### assets
 20 | 
 21 | _By default, Nuxt uses vue-loader, file-loader and url-loader for strong assets serving._
 22 | 
 23 | ```html
 24 | <!--
 25 | |- assets/
 26 |   |- image.png
 27 | -->
 28 | <img src="~/assets/image.png" alt="image" />
 29 | ```
 30 | 
 31 | #### static
 32 | 
 33 | _automatically served_
 34 | 
 35 | ```html
 36 | <!--
 37 | |- static/
 38 |   |- image.png
 39 | -->
 40 | <img src="/image.png" alt="image" />
 41 | ```
 42 | 
 43 | ## Basic-Routes
 44 | 
 45 | ### Next.js
 46 | 
 47 | ```
 48 | |- pages/
 49 |   |- index.js        → href="/"
 50 |   |- blog/index.js   → href="/blog"
 51 | ```
 52 | 
 53 | ### Nuxt.js
 54 | 
 55 | ```
 56 | |- pages/
 57 |   |- index.vue       → href="/"
 58 |   |- blog/index.vue  → href="/blog"
 59 | ```
 60 | 
 61 | ## Dynamic-Routes
 62 | 
 63 | ### Next.js
 64 | 
 65 | ```
 66 | |- pages/
 67 |   |- blog/[slug].js           → href="/blog/:slug" (eg. /blog/hello-world)
 68 |   |- [username]/[option].js   → href="/:username/:option" (eg. /foo/settings)
 69 |   |- post/[...all].js         → href="/post/*" (eg. /post/2020/id/title)
 70 | ```
 71 | 
 72 | ### Nuxt.js
 73 | 
 74 | ```
 75 | |- pages/
 76 |   |- blog/[slug].vue         → href="/blog/:slug" (eg. /blog/hello-world)
 77 |   |- _username/_option.vue   → href="/:username/:option" (eg. /foo/settings)
 78 | ```
 79 | 
 80 | ## Link
 81 | 
 82 | ### Next.js
 83 | 
 84 | ```js
 85 | import Link from "next/link";
 86 | 
 87 | function Home() {
 88 |   return (
 89 |     <Link href="/">
 90 |       <a>Home</a>
 91 |     </Link>
 92 |   );
 93 | }
 94 | ```
 95 | 
 96 | ### Nuxt.js
 97 | 
 98 | ```html
 99 | <template>
100 |   <nuxt-link to="/">Home page</nuxt-link>
101 | </template>
102 | ```
103 | 
104 | ## Fetch-On-Server
105 | 
106 | ### Next.js
107 | 
108 | _getInitialProps can only be used in the default export of every page_
109 | 
110 | #### < Next.js 9.3
111 | 
112 | ##### class component
113 | 
114 | ```js
115 | import fetch from "isomorphic-unfetch";
116 | 
117 | export default class Page extends React.Component {
118 |   static async getInitialProps(ctx) {
119 |     const res = await fetch(`https://.../data`);
120 |     const data = await res.json();
121 | 
122 |     return { props: { data } };
123 |   }
124 | 
125 |   render() {
126 |     // Render data...
127 |   }
128 | }
129 | ```
130 | 
131 | ##### function component
132 | 
133 | ```js
134 | import fetch from "isomorphic-unfetch";
135 | 
136 | function Page({ data }) {
137 |   // Render data...
138 | }
139 | 
140 | Page.getInitialProps = async (ctx) => {
141 |   const res = await fetch(`https://.../data`);
142 |   const data = await res.json();
143 | 
144 |   return { props: { data } };
145 | };
146 | ```
147 | 
148 | #### >= Next.js 9.3
149 | 
150 | ```js
151 | import fetch from "isomorphic-unfetch";
152 | 
153 | function Page({ data }) {
154 |   // Render data...
155 | }
156 | 
157 | export async function getServerSideProps() {
158 |   const res = await fetch(`https://.../data`);
159 |   const data = await res.json();
160 | 
161 |   return { props: { data } };
162 | }
163 | 
164 | export default Page;
165 | ```
166 | 
167 | ### Nuxt.js
168 | 
169 | ```html
170 | <template>
171 |   <div v-if="$fetchState.error">Something went wrong 😭</div>
172 |   <div v-if="$fetchState.pending">Loading...</div>
173 |   <div v-else>
174 |     <h1>{{ post.title }}</h1>
175 |     <pre>{{ post.body }}</pre>
176 |     <button @click="$fetch">Refresh</button>
177 |   </div>
178 | </template>
179 | 
180 | <script>
181 |   import fetch from "node-fetch";
182 | 
183 |   export default {
184 |     data() {
185 |       return {
186 |         post: {},
187 |       };
188 |     },
189 |     async fetch() {
190 |       this.post = await this.$http.$get("xxx");
191 |     },
192 |     fetchOnServer: true,
193 |   };
194 | </script>
195 | ```
196 | 
197 | ## Layout
198 | 
199 | ### Next.js
200 | 
201 | `./pages/_app.js`: automatically apply to all pages
202 | 
203 | ```js
204 | export default function MyApp({ Component, pageProps }) {
205 |   return (
206 |     <React.Fragment>
207 |       <MyHeader />
208 |       <Component {...pageProps} />
209 |       <MyFooter />
210 |     </React.Fragment>
211 |   );
212 | }
213 | ```
214 | 
215 | ### Nuxt.js
216 | 
217 | `layouts/with-header-footer.vue`: create layout
218 | 
219 | ```html
220 | <template>
221 |   <div>
222 |     <MyHeader />
223 |     <nuxt />
224 |     <MyFooter />
225 |   </div>
226 | </template>
227 | ```
228 | 
229 | `pages/index.vue`: apply layout
230 | 
231 | ```html
232 | <template>
233 |   <!-- Your template -->
234 | </template>
235 | <script>
236 |   export default {
237 |     layout: "with-header-footer",
238 |   };
239 | </script>
240 | ```
241 | 
242 | ## Error-Page
243 | 
244 | ### Next.js
245 | 
246 | `pages/_error.js`
247 | 
248 | ```js
249 | function Error({ statusCode }) {
250 |   return (
251 |     <p>
252 |       {statusCode
253 |         ? `An error ${statusCode} occurred on server`
254 |         : "An error occurred on client"}
255 |     </p>
256 |   );
257 | }
258 | 
259 | Error.getInitialProps = ({ res, err }) => {
260 |   const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
261 |   return { statusCode };
262 | };
263 | 
264 | export default Error;
265 | ```
266 | 
267 | ### Nuxt.js
268 | 
269 | `layouts/error.vue`
270 | 
271 | ```html
272 | <template>
273 |   <div class="container">
274 |     <h1 v-if="error.statusCode === 404">Page not found</h1>
275 |     <h1 v-else>An error occurred</h1>
276 |     <nuxt-link to="/">Home page</nuxt-link>
277 |   </div>
278 | </template>
279 | 
280 | <script>
281 |   export default {
282 |     props: ["error"],
283 |     layout: "blog", // you can set a custom layout for the error page
284 |   };
285 | </script>
286 | ```
287 | 
288 | ## Meta-Tag
289 | 
290 | ### Next.js
291 | 
292 | ```js
293 | import Head from "next/head";
294 | 
295 | function IndexPage() {
296 |   return (
297 |     <div>
298 |       <Head>
299 |         <title>My page title</title>
300 |         <meta name="viewport" content="initial-scale=1.0, width=device-width" />
301 |       </Head>
302 |       <p>Hello world!</p>
303 |     </div>
304 |   );
305 | }
306 | ```
307 | 
308 | ### Nuxt.js
309 | 
310 | ```html
311 | <template>
312 |   <h1>{{ title }}</h1>
313 | </template>
314 | 
315 | <script>
316 |   export default {
317 |     data() {
318 |       return {
319 |         title: "Hello World!",
320 |       };
321 |     },
322 |     head() {
323 |       return {
324 |         title: this.title,
325 |         meta: [
326 |           // To avoid duplicated meta tags when used in child component, set up an unique identifier with the hid key
327 |           {
328 |             hid: "description",
329 |             name: "description",
330 |             content: "My custom description",
331 |           },
332 |         ],
333 |       };
334 |     },
335 |   };
336 | </script>
337 | ```
338 | 
339 | ## Context
340 | 
341 | ### Next.js
342 | 
343 | _getInitialProps can only be used in the default export of every page_
344 | 
345 | ```js
346 | function Page({ data }) {
347 |   // Render data...
348 | }
349 | 
350 | Page.getInitialProps = async (context) => {
351 |   const { pathname, query, asPath, req, res, err } = context;
352 |   // pathname - Current route. That is the path of the page in /pages
353 |   // query - Query string section of URL parsed as an object
354 |   // asPath - String of the actual path (including the query) shown in the browser
355 |   // req - HTTP request object (server only)
356 |   // res - HTTP response object (server only)
357 |   // err - Error object if any error is encountered during the rendering
358 | 
359 |   return { props: { project: "next" } };
360 | };
361 | ```
362 | 
363 | ### Nuxt.js
364 | 
365 | ```js
366 | export default {
367 |   asyncData(context) {
368 |     // Universal keys
369 |     const {
370 |       app,
371 |       store,
372 |       route,
373 |       params,
374 |       query,
375 |       env,
376 |       isDev,
377 |       isHMR,
378 |       redirect,
379 |       error,
380 |     } = context;
381 |     // Server-side
382 |     if (process.server) {
383 |       const { req, res, beforeNuxtRender } = context;
384 |     }
385 |     // Client-side
386 |     if (process.client) {
387 |       const { from, nuxtState } = context;
388 |     }
389 | 
390 |     return { project: "nuxt" };
391 |   },
392 | };
393 | ```
394 | 
395 | ---
396 | 
397 | ## Reference
398 | 
399 | - [Next.js](https://nextjs.org/docs/getting-started)
400 | - [Nuxt.js](https://nuxtjs.org/guide/installation)
401 | 


--------------------------------------------------------------------------------
/STATE_MANAGEMENT.md:
--------------------------------------------------------------------------------
  1 | # State Management: Redux & Vuex
  2 | 
  3 | ## Create Store
  4 | 
  5 | ### Redux: https://redux.js.org/basics/store
  6 | 
  7 | ```js
  8 | import React from 'react';
  9 | import { render } from 'react-dom';
 10 | import { Provider } from 'react-redux';
 11 | import { createStore } from 'redux';
 12 | import todoApp from './reducers';
 13 | import App from './components/App';
 14 | 
 15 | const store = createStore(todoApp);
 16 | 
 17 | render(
 18 |   <Provider store={store}>
 19 |     <App />
 20 |   </Provider>,
 21 |   document.getElementById('root')
 22 | );
 23 | ```
 24 | 
 25 | ### Vuex: https://vuex.vuejs.org/guide/
 26 | 
 27 | ```js
 28 | const store = new Vuex.Store({
 29 |   state: { ... },
 30 |   mutations: { ... }
 31 | })
 32 | 
 33 | ...
 34 | 
 35 | new Vue({
 36 |   el: '#app',
 37 |   store,
 38 | });
 39 | ```
 40 | 
 41 | ## Action
 42 | 
 43 | ### Redux: https://redux.js.org/basics/actions
 44 | 
 45 | ```js
 46 | const ADD_TODO = 'ADD_TODO';
 47 | 
 48 | function addTodo(text) {
 49 |   return {
 50 |     type: ADD_TODO,
 51 |     text,
 52 |   };
 53 | }
 54 | ```
 55 | 
 56 | ### Vuex: https://vuex.vuejs.org/guide/actions.html
 57 | 
 58 | ```js
 59 | const store = new Vuex.Store({
 60 |   actions: {
 61 |     increment(context) {
 62 |       context.commit('increment'); // commit a mutation to trigger state update
 63 |     },
 64 |   },
 65 | });
 66 | ```
 67 | 
 68 | ## Async-Action
 69 | 
 70 | ### Redux(redux-thunk): https://redux.js.org/advanced/async-actions
 71 | 
 72 | ```js
 73 | // apply redux-thunk
 74 | import thunkMiddleware from 'redux-thunk'
 75 | 
 76 | const store = createStore(
 77 |   rootReducer,
 78 |   applyMiddleware(thunkMiddleware)
 79 | )
 80 | 
 81 | ...
 82 | 
 83 | export function fetchPosts() {
 84 |   return function (dispatch) {
 85 |     dispatch(requestPosts())
 86 |     return fetch('xxx')
 87 |       .then(response => response.json())
 88 |       .then(json => dispatch(receivePosts(json)))
 89 |   }
 90 | }
 91 | ```
 92 | 
 93 | ### Vuex: https://vuex.vuejs.org/guide/actions.html
 94 | 
 95 | ```js
 96 | actions: {
 97 |   async fetchPosts ({ commit }) {
 98 |     commit('requestPosts');
 99 |     const res = await fetch('xxx');
100 |     commit('receivePosts', res);
101 |   },
102 | }
103 | ```
104 | 
105 | ## Reducer-or-Mutation
106 | 
107 | ### Redux(reducer): https://redux.js.org/basics/reducers
108 | 
109 | ```js
110 | const initialState = {
111 |   todos: [],
112 | };
113 | 
114 | function todoApp(state = initialState, action) {
115 |   switch (action.type) {
116 |     case ADD_TODO:
117 |       return {
118 |         ...state,
119 |         todos: [
120 |           ...state.todos,
121 |           {
122 |             text: action.text,
123 |             completed: false,
124 |           },
125 |         ],
126 |       };
127 | 
128 |     default:
129 |       return state;
130 |   }
131 | }
132 | ```
133 | 
134 | ### Vuex(mutation): https://vuex.vuejs.org/guide/mutations.html
135 | 
136 | ```js
137 | const store = new Vuex.Store({
138 |   mutations: {
139 |     addTodo(state, payload) {
140 |       state.todos = [...state.todos, { text: payload.text, completed: false }];
141 |     },
142 |   },
143 | });
144 | ```
145 | 
146 | ## Combine-Reducers-or-Modules
147 | 
148 | ### Redux(combine-reducers): https://redux.js.org/api/combinereducers
149 | 
150 | ```js
151 | import { combineReducers } from 'redux';
152 | 
153 | const reducers = combineReducers({
154 |   reducerA,
155 |   reducerB,
156 | });
157 | 
158 | export default reducers;
159 | ```
160 | 
161 | ### Vuex(modules): https://vuex.vuejs.org/guide/modules.html
162 | 
163 | ```js
164 | const moduleA = {
165 |   state: { ... },
166 |   mutations: { ... },
167 |   actions: { ... },
168 |   getters: { ... }
169 | }
170 | 
171 | const moduleB = {
172 |   state: { ... },
173 |   mutations: { ... },
174 |   actions: { ... }
175 | }
176 | 
177 | const store = new Vuex.Store({
178 |   modules: {
179 |     a: moduleA,
180 |     b: moduleB
181 |   }
182 | })
183 | ```
184 | 
185 | ## Connect-with-Component
186 | 
187 | ### Redux: https://redux.js.org/basics/usage-with-react
188 | 
189 | ```js
190 | import { connect } from 'react-redux';
191 | import { addTodo } from '../actions';
192 | import TargetComp from '../components/TargetComp';
193 | 
194 | // state
195 | const mapStateToProps = (state, ownProps) => {
196 |   return {
197 |     todos: state.todos,
198 |   };
199 | };
200 | 
201 | // action
202 | const mapDispatchToProps = (dispatch, ownProps) => {
203 |   return {
204 |     addTodo: text => {
205 |       dispatch(addTodo(text));
206 |     },
207 |   };
208 | };
209 | 
210 | const TargetContainer = connect(mapStateToProps, mapDispatchToProps)(TargetComp);
211 | 
212 | export default TargetContainer;
213 | ```
214 | 
215 | ### Vuex
216 | 
217 | #### state: https://vuex.vuejs.org/guide/state.html
218 | 
219 | ```js
220 | import { mapState } from 'vuex';
221 | 
222 | export default {
223 |   computed: {
224 |     ...mapState(['count']),
225 |   },
226 | };
227 | ```
228 | 
229 | #### action: https://vuex.vuejs.org/guide/actions.html
230 | 
231 | ```js
232 | import { mapActions } from 'vuex';
233 | 
234 | export default {
235 |   methods: {
236 |     ...mapActions(['increment']),
237 |   },
238 | };
239 | ```
240 | 
241 | ## Middleware-or-Plugin
242 | 
243 | ### Redux(middleware): https://redux.js.org/advanced/middleware
244 | 
245 | ```js
246 | import { createStore, combineReducers, applyMiddleware } from 'redux';
247 | 
248 | const logger = store => next => action => {
249 |   console.log('dispatching', action);
250 |   let result = next(action);
251 |   console.log('next state', store.getState());
252 |   return result;
253 | };
254 | const todoApp = combineReducers(reducers);
255 | const store = createStore(todoApp, applyMiddleware(logger));
256 | ```
257 | 
258 | ### Vuex(plugin): https://vuex.vuejs.org/guide/plugins.html
259 | 
260 | ```js
261 | const myPluginWithSnapshot = store => {
262 |   let prevState = _.cloneDeep(store.state)
263 |   store.subscribe((mutation, state) => {
264 |     let nextState = _.cloneDeep(state)
265 | 
266 |     // compare `prevState` and `nextState`...
267 | 
268 |     // save state for next mutation
269 |     prevState = nextState
270 |   })
271 | }
272 | 
273 | const store = new Vuex.Store({
274 |   ...,
275 |   plugins: process.env.NODE_ENV !== 'production' ? [myPluginWithSnapshot] : [],
276 | })
277 | ```
278 | 
279 | ## Selector-or-Getter
280 | 
281 | ### Redux(reselect): https://redux.js.org/recipes/computing-derived-data
282 | 
283 | ```js
284 | import { createSelector } from 'reselect'
285 | 
286 | const getTodos = state => state.todos
287 | 
288 | export const getDoneTodos = createSelector(
289 |   [getTodos],
290 |   todos.filter(t => t.completed),
291 | )
292 | 
293 | ...
294 | 
295 | import { connect } from 'react-redux'
296 | import TodoList from '../components/TodoList'
297 | import { getDoneTodos } from '../selectors'
298 | 
299 | const mapStateToProps = state => {
300 |   return {
301 |     doneTodos: getDoneTodos(state)
302 |   }
303 | }
304 | 
305 | const DoneTodoList = connect(mapStateToProps)(TodoList)
306 | 
307 | export default DoneTodoList
308 | ```
309 | 
310 | ### Vuex: https://vuex.vuejs.org/guide/getters.html
311 | 
312 | ```js
313 | const store = new Vuex.Store({
314 |   state: { ... },
315 |   getters: {
316 |     doneTodos: state => {
317 |       return state.todos.filter(t => t.completed)
318 |     }
319 |   }
320 | })
321 | 
322 | ...
323 | 
324 | import { mapGetters } from 'vuex'
325 | 
326 | export default {
327 |   computed: {
328 |     ...mapGetters(['doneTodos'])
329 |   }
330 | }
331 | ```
332 | 
333 | ## DevTools
334 | 
335 | ### Redux
336 | 
337 | https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd
338 | 
339 | ### Vuex
340 | 
341 | https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
342 | 
343 | ---
344 | 
345 | ## Reference
346 | 
347 | - [Redux](https://redux.js.org/introduction/getting-started)
348 | - [React-Redux](https://react-redux.js.org/introduction/quick-start)
349 | - [Reselect](https://github.com/reduxjs/reselect)
350 | - [Vuex](https://vuex.vuejs.org/guide/)
351 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-vue-comparison",
 3 |   "version": "1.0.0",
 4 |   "description": "This repo is for someone who already familiar with React.js or Vue.js, and wants to find out the relative syntax in another framework.",
 5 |   "scripts": {
 6 |     "postinstall": "patch-package",
 7 |     "sync": "node scripts/updateReadme.js"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/oahehc/react-vue-comparison.git"
12 |   },
13 |   "keywords": [
14 |     "react",
15 |     "vue",
16 |     "nextjs",
17 |     "nuxtjs"
18 |   ],
19 |   "author": "oahehc@gmail.com",
20 |   "license": "MIT",
21 |   "bugs": {
22 |     "url": "https://github.com/oahehc/react-vue-comparison/issues"
23 |   },
24 |   "homepage": "https://github.com/oahehc/react-vue-comparison#readme",
25 |   "dependencies": {
26 |     "axios": "^0.19.2",
27 |     "json2md": "^1.7.0",
28 |     "patch-package": "^6.2.2",
29 |     "postinstall-postinstall": "^2.1.0",
30 |     "puppeteer": "^3.3.0"
31 |   },
32 |   "prettier": {
33 |     "printWidth": 120,
34 |     "singleQuote": true,
35 |     "trailingComma": "es5",
36 |     "arrowParens": "avoid"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/patches/json2md+1.7.0.patch:
--------------------------------------------------------------------------------
 1 | diff --git a/node_modules/json2md/.DS_Store b/node_modules/json2md/.DS_Store
 2 | new file mode 100644
 3 | index 0000000..949796c
 4 | Binary files /dev/null and b/node_modules/json2md/.DS_Store differ
 5 | diff --git a/node_modules/json2md/lib/converters.js b/node_modules/json2md/lib/converters.js
 6 | index 9ed0b4f..1359a5f 100644
 7 | --- a/node_modules/json2md/lib/converters.js
 8 | +++ b/node_modules/json2md/lib/converters.js
 9 | @@ -117,7 +117,19 @@ converters.table = function (input, json2md) {
10 |      }
11 |  
12 |      var header = " | " + input.headers.join(" | ") + " | ",
13 | -        spaces = " | " + input.headers.map(function () {
14 | +        spaces = " | " + input.headers.map(function (_, index) {
15 | +        if (input.aligns && input.aligns[index]) {
16 | +          switch (input.aligns[index]) {
17 | +            case "center":
18 | +              return ":---:";
19 | +            case "right":
20 | +              return "---:";
21 | +            case "left":
22 | +              return ":---";
23 | +            default:
24 | +              return "---";
25 | +          }
26 | +        }
27 |          return "---";
28 |      }).join(" | ") + " | ",
29 |          data = " | " + input.rows.map(function (r) {
30 | 


--------------------------------------------------------------------------------
/scripts/updateReadme.js:
--------------------------------------------------------------------------------
  1 | const fs = require('fs');
  2 | const path = require('path');
  3 | const axios = require('axios');
  4 | const puppeteer = require('puppeteer');
  5 | const json2md = require('json2md');
  6 | 
  7 | // README default content
  8 | const title = [
  9 |   { h1: 'React-Vue-Comparison' },
 10 |   {
 11 |     p:
 12 |       'This repo is for someone who already familiar with React.js or Vue.js, and wants to find out the relative syntax in another framework.',
 13 |   },
 14 | ];
 15 | const contents = [
 16 |   { h2: 'Contents' },
 17 |   { h3: '[React.js vs Vue.js](/CORE.md)' },
 18 |   {
 19 |     ul: [
 20 |       '[Render](/CORE.md#render)',
 21 |       '[Basic-Component](/CORE.md#basic-component)',
 22 |       '[Prop](/CORE.md#prop)',
 23 |       '[Event-Binding](/CORE.md#event-binding)',
 24 |       '[Custom-Event](/CORE.md#custom-event)',
 25 |       '[State](/CORE.md#state)',
 26 |       '[Change-State](/CORE.md#change-state)',
 27 |       '[Two-Way-Binding(Vue.js only)](/CORE.md#two-way-binding)',
 28 |       '[Compute](/CORE.md#compute)',
 29 |       '[Watch](/CORE.md#watch)',
 30 |       '[Children-and-Slot](/CORE.md#children-and-slot)',
 31 |       '[Render-HTML](/CORE.md#render-html)',
 32 |       '[Conditional-Rendering](/CORE.md#conditional-rendering)',
 33 |       '[List-Rendering](/CORE.md#list-rendering)',
 34 |       '[Render-Props](/CORE.md#render-props)',
 35 |       '[Lifecycle](/CORE.md#lifecycle)',
 36 |       '[Error-Handling](/CORE.md#error-handling)',
 37 |       '[Ref](/CORE.md#ref)',
 38 |       '[Performance-Optimization](/CORE.md#performance-optimization)',
 39 |     ],
 40 |   },
 41 |   { h3: '[Next.js vs Nuxt.js](/SSR.md)' },
 42 |   {
 43 |     ul: [
 44 |       '[Assets](/SSR.md#assets)',
 45 |       '[Basic-Routes](/SSR.md#basic-routes)',
 46 |       '[Dynamic-Routes](/SSR.md#dynamic-routes)',
 47 |       '[Link](/SSR.md#link)',
 48 |       '[Fetch-On-Server](/SSR.md#fetch-on-server)',
 49 |       '[Layout](/SSR.md#layout)',
 50 |       '[Error-Page](/SSR.md#error-page)',
 51 |       '[Meta-Tag](/SSR.md#meta-tag)',
 52 |       '[Context](/SSR.md#context)',
 53 |     ],
 54 |   },
 55 |   { h3: 'Tools' },
 56 |   {
 57 |     ul: ['[CLI](/CLI.md)', '[DevTools](/DevTools.md)'],
 58 |   },
 59 |   { h3: '[React-Router vs Vue-Router](/ROUTER.md)' },
 60 |   {
 61 |     ul: [
 62 |       '[Basic-Routing](/ROUTER.md#Basic-Routing)',
 63 |       '[Dynamic-Routing](/ROUTER.md#Dynamic-Routing)',
 64 |       '[Nested-Routing](/ROUTER.md#Nested-Routing)',
 65 |       '[Link](/ROUTER.md#Link)',
 66 |       '[NavLink](/ROUTER.md#NavLink)',
 67 |       '[Get-Location](/ROUTER.md#Get-Location)',
 68 |       '[Push](/ROUTER.md#Push)',
 69 |       '[Replace](/ROUTER.md#Replace)',
 70 |       '[Redirect](/ROUTER.md#Redirect)',
 71 |       '[Event](/ROUTER.md#Event)',
 72 |       '[Scroll](/ROUTER.md#Scroll)',
 73 |       '[Lazy-Loading-and-Code-Splitting](/ROUTER.md#Lazy-Loading-and-Code-Splitting)',
 74 |     ],
 75 |   },
 76 |   { h3: '[Redux vs Vuex](/STATE_MANAGEMENT.md)' },
 77 |   {
 78 |     ul: [
 79 |       '[Create-Store](/STATE_MANAGEMENT.md#Create-Store)',
 80 |       '[Action](/STATE_MANAGEMENT.md#Action)',
 81 |       '[Async-Action](/STATE_MANAGEMENT.md#Async-Action)',
 82 |       '[Reducer | Mutation](/STATE_MANAGEMENT.md#Reducer-or-Mutation)',
 83 |       '[Combine-Reducers | Modules](/STATE_MANAGEMENT.md#Combine-Reducers-or-Modules)',
 84 |       '[Connect-with-Component](/STATE_MANAGEMENT.md#Connect-with-Component)',
 85 |       '[Middleware | Plugin](/STATE_MANAGEMENT.md#Middleware-or-Plugin)',
 86 |       '[Selector | Getter](/STATE_MANAGEMENT.md#Selector-or-Getter)',
 87 |       '[DevTools](/STATE_MANAGEMENT.md#DevTools)',
 88 |     ],
 89 |   },
 90 |   { p: '---' },
 91 | ];
 92 | const reference = [
 93 |   { h2: 'Reference' },
 94 |   {
 95 |     ul: [
 96 |       '[React.js](https://reactjs.org/docs/getting-started.html)',
 97 |       '[Next.js](https://nextjs.org/docs/getting-started)',
 98 |       '[React Router](https://reacttraining.com/react-router/web/guides/quick-start)',
 99 |       '[Vue.js](https://vuejs.org/v2/guide/#Getting-Started)',
100 |       '[Nuxt.js](https://nuxtjs.org/guide/installation)',
101 |       '[Vue Router](https://router.vuejs.org/guide/)',
102 |       '[Redux](https://redux.js.org/introduction/getting-started)',
103 |       '[React-Redux](https://react-redux.js.org/introduction/quick-start)',
104 |       '[Reselect](https://github.com/reduxjs/reselect)',
105 |       '[Vuex](https://vuex.vuejs.org/guide/)',
106 |     ],
107 |   },
108 | ];
109 | 
110 | const repos = {
111 |   react: {
112 |     name: 'React',
113 |     ghApi: 'https://api.github.com/search/repositories?q=react+in:name+user:facebook',
114 |     npmUrl: 'https://www.npmjs.com/package/react',
115 |     ghUrl: 'https://github.com/facebook/react',
116 |     doc: 'https://reactjs.org/docs/getting-started.html',
117 |   },
118 |   vue: {
119 |     name: 'Vue',
120 |     ghApi: 'https://api.github.com/search/repositories?q=vue+in:name+user:vuejs',
121 |     npmUrl: 'https://www.npmjs.com/package/vue',
122 |     ghUrl: 'https://github.com/vuejs/vue',
123 |     doc: 'https://vuejs.org/v2/guide/l',
124 |   },
125 |   'next.js': {
126 |     name: 'Next.js',
127 |     ghApi: 'https://api.github.com/search/repositories?q=next+in:name+user:vercel',
128 |     npmUrl: 'https://www.npmjs.com/package/next',
129 |     ghUrl: 'https://github.com/vercel/next.js',
130 |     doc: 'https://nextjs.org/docs/getting-started',
131 |   },
132 |   'nuxt.js': {
133 |     name: 'Nuxt.js',
134 |     ghApi: 'https://api.github.com/search/repositories?q=nuxt+in:name+user:nuxt',
135 |     npmUrl: 'https://www.npmjs.com/package/nuxt',
136 |     ghUrl: 'https://github.com/nuxt/nuxt.js',
137 |     doc: 'https://nuxtjs.org/guide',
138 |   },
139 |   'react-router': {
140 |     name: 'React-Router',
141 |     ghApi: 'https://api.github.com/search/repositories?q=react-router+in:name+user:remix-run',
142 |     npmUrl: 'https://www.npmjs.com/package/react-router',
143 |     ghUrl: 'https://github.com/remix-run/react-router',
144 |     doc: 'https://reactrouter.com/',
145 |   },
146 |   'vue-router': {
147 |     name: 'Vue-Router',
148 |     ghApi: 'https://api.github.com/search/repositories?q=vue-router+in:name+user:vuejs',
149 |     npmUrl: 'https://www.npmjs.com/package/vue-router',
150 |     ghUrl: 'https://github.com/vuejs/vue-router',
151 |     doc: 'https://router.vuejs.org/guide',
152 |   },
153 |   redux: {
154 |     name: 'redux',
155 |     ghApi: 'https://api.github.com/search/repositories?q=redux+in:name+user:reduxjs',
156 |     npmUrl: 'https://www.npmjs.com/package/redux',
157 |     ghUrl: 'https://github.com/reduxjs/redux',
158 |     doc: 'https://redux.js.org/introduction/getting-started',
159 |   },
160 |   'react-redux': {
161 |     name: 'react-redux',
162 |     ghApi: 'https://api.github.com/search/repositories?q=react-redux+in:name+user:reduxjs',
163 |     npmUrl: 'https://www.npmjs.com/package/react-redux',
164 |     ghUrl: 'https://github.com/reduxjs/react-redux',
165 |     doc: 'https://react-redux.js.org/introduction/quick-start',
166 |   },
167 |   vuex: {
168 |     name: 'vuex',
169 |     ghApi: 'https://api.github.com/search/repositories?q=vuex+in:name+user:vuejs',
170 |     npmUrl: 'https://www.npmjs.com/package/vuex',
171 |     ghUrl: 'https://github.com/vuejs/vuex',
172 |     doc: 'https://vuex.vuejs.org/guide/',
173 |   },
174 | };
175 | 
176 | function getToday() {
177 |   const now = new Date();
178 |   return `${now.getFullYear()}/${now.getMonth() + 1}/${now.getDate()}`;
179 | }
180 | function logger(...args) {
181 |   console.log(`[${new Date().toISOString()}] `, ...args);
182 | }
183 | function getRowTitle(key) {
184 |   if (!repos[key]) return '';
185 | 
186 |   const info = repos[key];
187 |   return `${info.name}: [npm](${info.npmUrl}) [gh](${info.ghUrl}) [doc](${info.doc})`;
188 | }
189 | 
190 | function generateTable(info) {
191 |   return [
192 |     {
193 |       table: {
194 |         headers: ['', '⭐️', 'VERSION', 'OPEN ISSUES & PR', 'DOWNLOADS/wk'],
195 |         aligns: ['left', 'right', 'center', 'right', 'right'],
196 |         rows: Object.keys(repos).map(key => [
197 |           getRowTitle(key),
198 |           info[key].stars,
199 |           info[key].version,
200 |           info[key].issues,
201 |           info[key].wkDownload,
202 |         ]),
203 |       },
204 |     },
205 |     { p: `_Update: ${getToday()}_` },
206 |     { p: '---' },
207 |   ];
208 | }
209 | function generateMD(table) {
210 |   const readme = [...title, ...table, ...contents, ...reference];
211 |   return json2md(readme);
212 | }
213 | 
214 | (async function load() {
215 |   const output = Object.keys(repos).reduce((res, name) => ({
216 |     ...res,
217 |     [name]: {
218 |       stars: '?',
219 |       version: '?',
220 |       issues: '?',
221 |       wkDownload: '?',
222 |     }
223 |   }), {})
224 | 
225 |   try {
226 |     logger('load GitHub Info');
227 |     const requests = Object.values(repos).map(({ ghApi }) => axios.get(ghApi));
228 |     const results = await Promise.all(requests);
229 |     results.forEach(({ data }) => {
230 |       if (data && data.items && data.items[0]) {
231 |         const { name, stargazers_count, open_issues_count } = data.items[0];
232 |         if (name) {
233 |           output[name] = {
234 |             stars: Number(stargazers_count).toLocaleString(),
235 |             issues: Number(open_issues_count).toLocaleString(),
236 |           };
237 |         }
238 |       }
239 |     });
240 |   } catch (e) {
241 |     logger('get github info fail:', e);
242 |   }
243 | 
244 |   try {
245 |     logger('load NPM Info');
246 |     const browser = await puppeteer.launch({ headless: true });
247 |     const page = await browser.newPage();
248 |     for (let k in repos) {
249 |       const repo = repos[k];
250 |       await page.goto(repo.npmUrl);
251 | 
252 |       const info = await page.evaluate(() => {
253 |         function getElementByTitle(title, selector) {
254 |           const elements = document.querySelectorAll(selector);
255 |           let ele = null;
256 |           for (let i = 0; i < elements.length; i++) {
257 |             if (elements[i].textContent.includes(title)) {
258 |               ele = elements[i];
259 |               break;
260 |             }
261 |           }
262 |           return ele;
263 |         }
264 | 
265 |         const wkDownloadTitle = getElementByTitle("Weekly Downloads", "h3");
266 |         let wkDownload = "?";
267 |         if (wkDownloadTitle && wkDownloadTitle.nextSibling) {
268 |           const ele = wkDownloadTitle.nextSibling.querySelector('p');
269 |           if (ele) {
270 |             wkDownload = ele.innerText;
271 |           }
272 |         }
273 |         const versionTitle = getElementByTitle("Version", "h3");
274 |         let version = "?";
275 |         if (versionTitle && versionTitle.nextSibling) {
276 |           version = versionTitle.nextSibling.innerText;
277 |         }
278 |         return {
279 |           wkDownload,
280 |           version,
281 |         };
282 |       });
283 | 
284 |       if (output[k]) {
285 |         output[k] = {
286 |           ...output[k],
287 |           ...info,
288 |         };
289 |       }
290 |     }
291 |     await browser.close();
292 | 
293 |     logger('generate README');
294 |     const table = generateTable(output);
295 |     const filePath = path.resolve(__dirname, `../README.md`);
296 |     fs.writeFile(filePath, generateMD(table), 'utf8', err => {
297 |       if (err) throw err;
298 |       logger('finish');
299 |     });
300 |   } catch (e) {
301 |     logger('get npm info fail:', e);
302 |   }
303 | })();


--------------------------------------------------------------------------------
/template/next-template/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | /dist
12 | /.next
13 | 
14 | # misc
15 | .DS_Store
16 | .env
17 | npm-debug.log*
18 | yarn-debug.log*
19 | yarn-error.log*
20 | 


--------------------------------------------------------------------------------
/template/next-template/README.md:
--------------------------------------------------------------------------------
  1 | This project was bootstrapped with [Create Next App](https://github.com/segmentio/create-next-app).
  2 | 
  3 | Find the most recent version of this guide at [here](https://github.com/segmentio/create-next-app/blob/master/lib/templates/default/README.md). And check out [Next.js repo](https://github.com/zeit/next.js) for the most up-to-date info.
  4 | 
  5 | ## Table of Contents
  6 | 
  7 | - [Questions? Feedback?](#questions-feedback)
  8 | - [Folder Structure](#folder-structure)
  9 | - [Available Scripts](#available-scripts)
 10 |   - [npm run dev](#npm-run-dev)
 11 |   - [npm run build](#npm-run-build)
 12 |   - [npm run start](#npm-run-start)
 13 | - [Using CSS](#using-css)
 14 | - [Adding Components](#adding-components)
 15 | - [Fetching Data](#fetching-data)
 16 | - [Custom Server](#custom-server)
 17 | - [Syntax Highlighting](#syntax-highlighting)
 18 | - [Using the `static` Folder](#using-the-static-folder)
 19 | - [Deploy to Now](#deploy-to-now)
 20 | - [Something Missing?](#something-missing)
 21 | 
 22 | ## Questions? Feedback?
 23 | 
 24 | Check out [Next.js FAQ & docs](https://github.com/zeit/next.js#faq) or [let us know](https://github.com/segmentio/create-next-app/issues) your feedback.
 25 | 
 26 | ## Folder Structure
 27 | 
 28 | After creating an app, it should look something like:
 29 | 
 30 | ```
 31 | .
 32 | ├── README.md
 33 | ├── components
 34 | │   ├── head.js
 35 | │   └── nav.js
 36 | ├── next.config.js
 37 | ├── node_modules
 38 | │   ├── [...]
 39 | ├── package.json
 40 | ├── pages
 41 | │   └── index.js
 42 | ├── static
 43 | │   └── favicon.ico
 44 | └── yarn.lock
 45 | ```
 46 | 
 47 | Routing in Next.js is based on the file system, so `./pages/index.js` maps to the `/` route and
 48 | `./pages/about.js` would map to `/about`.
 49 | 
 50 | The `./static` directory maps to `/static` in the `next` server, so you can put all your
 51 | other static resources like images or compiled CSS in there.
 52 | 
 53 | Out of the box, we get:
 54 | 
 55 | - Automatic transpilation and bundling (with webpack and babel)
 56 | - Hot code reloading
 57 | - Server rendering and indexing of `./pages`
 58 | - Static file serving. `./static/` is mapped to `/static/`
 59 | 
 60 | Read more about [Next's Routing](https://github.com/zeit/next.js#routing)
 61 | 
 62 | ## Available Scripts
 63 | 
 64 | In the project directory, you can run:
 65 | 
 66 | ### `npm run dev`
 67 | 
 68 | Runs the app in the development mode.<br>
 69 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 70 | 
 71 | The page will reload if you make edits.<br>
 72 | You will also see any errors in the console.
 73 | 
 74 | ### `npm run build`
 75 | 
 76 | Builds the app for production to the `.next` folder.<br>
 77 | It correctly bundles React in production mode and optimizes the build for the best performance.
 78 | 
 79 | ### `npm run start`
 80 | 
 81 | Starts the application in production mode.
 82 | The application should be compiled with \`next build\` first.
 83 | 
 84 | See the section in Next docs about [deployment](https://github.com/zeit/next.js/wiki/Deployment) for more information.
 85 | 
 86 | ## Using CSS
 87 | 
 88 | [`styled-jsx`](https://github.com/zeit/styled-jsx) is bundled with next to provide support for isolated scoped CSS. The aim is to support "shadow CSS" resembling of Web Components, which unfortunately [do not support server-rendering and are JS-only](https://github.com/w3c/webcomponents/issues/71).
 89 | 
 90 | ```jsx
 91 | export default () => (
 92 |   <div>
 93 |     Hello world
 94 |     <p>scoped!</p>
 95 |     <style jsx>{`
 96 |       p {
 97 |         color: blue;
 98 |       }
 99 |       div {
100 |         background: red;
101 |       }
102 |       @media (max-width: 600px) {
103 |         div {
104 |           background: blue;
105 |         }
106 |       }
107 |     `}</style>
108 |   </div>
109 | )
110 | ```
111 | 
112 | Read more about [Next's CSS features](https://github.com/zeit/next.js#css).
113 | 
114 | ## Adding Components
115 | 
116 | We recommend keeping React components in `./components` and they should look like:
117 | 
118 | ### `./components/simple.js`
119 | 
120 | ```jsx
121 | const Simple = () => <div>Simple Component</div>
122 | 
123 | export default Simple // don't forget to export default!
124 | ```
125 | 
126 | ### `./components/complex.js`
127 | 
128 | ```jsx
129 | import { Component } from 'react'
130 | 
131 | class Complex extends Component {
132 |   state = {
133 |     text: 'World'
134 |   }
135 | 
136 |   render() {
137 |     const { text } = this.state
138 |     return <div>Hello {text}</div>
139 |   }
140 | }
141 | 
142 | export default Complex // don't forget to export default!
143 | ```
144 | 
145 | ## Fetching Data
146 | 
147 | You can fetch data in `pages` components using `getInitialProps` like this:
148 | 
149 | ### `./pages/stars.js`
150 | 
151 | ```jsx
152 | const Page = props => <div>Next stars: {props.stars}</div>
153 | 
154 | Page.getInitialProps = async ({ req }) => {
155 |   const res = await fetch('https://api.github.com/repos/zeit/next.js')
156 |   const json = await res.json()
157 |   const stars = json.stargazers_count
158 |   return { stars }
159 | }
160 | 
161 | export default Page
162 | ```
163 | 
164 | For the initial page load, `getInitialProps` will execute on the server only. `getInitialProps` will only be executed on the client when navigating to a different route via the `Link` component or using the routing APIs.
165 | 
166 | _Note: `getInitialProps` can **not** be used in children components. Only in `pages`._
167 | 
168 | Read more about [fetching data and the component lifecycle](https://github.com/zeit/next.js#fetching-data-and-component-lifecycle)
169 | 
170 | ## Custom Server
171 | 
172 | Want to start a new app with a custom server? Run `create-next-app --example customer-server custom-app`
173 | 
174 | Typically you start your next server with `next start`. It's possible, however, to start a server 100% programmatically in order to customize routes, use route patterns, etc
175 | 
176 | This example makes `/a` resolve to `./pages/b`, and `/b` resolve to `./pages/a`:
177 | 
178 | ```jsx
179 | const { createServer } = require('http')
180 | const { parse } = require('url')
181 | const next = require('next')
182 | 
183 | const dev = process.env.NODE_ENV !== 'production'
184 | const app = next({ dev })
185 | const handle = app.getRequestHandler()
186 | 
187 | app.prepare().then(() => {
188 |   createServer((req, res) => {
189 |     // Be sure to pass `true` as the second argument to `url.parse`.
190 |     // This tells it to parse the query portion of the URL.
191 |     const parsedUrl = parse(req.url, true)
192 |     const { pathname, query } = parsedUrl
193 | 
194 |     if (pathname === '/a') {
195 |       app.render(req, res, '/b', query)
196 |     } else if (pathname === '/b') {
197 |       app.render(req, res, '/a', query)
198 |     } else {
199 |       handle(req, res, parsedUrl)
200 |     }
201 |   }).listen(3000, err => {
202 |     if (err) throw err
203 |     console.log('> Ready on http://localhost:3000')
204 |   })
205 | })
206 | ```
207 | 
208 | Then, change your `start` script to `NODE_ENV=production node server.js`.
209 | 
210 | Read more about [custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing)
211 | 
212 | ## Syntax Highlighting
213 | 
214 | To configure the syntax highlighting in your favorite text editor, head to the [relevant Babel documentation page](https://babeljs.io/docs/editors) and follow the instructions. Some of the most popular editors are covered.
215 | 
216 | ## Deploy to Now
217 | 
218 | [now](https://zeit.co/now) offers a zero-configuration single-command deployment.
219 | 
220 | 1.  Install the `now` command-line tool either via the recommended [desktop tool](https://zeit.co/download) or via node with `npm install -g now`.
221 | 
222 | 2.  Run `now` from your project directory. You will see a **now.sh** URL in your output like this:
223 | 
224 |     ```
225 |     > Ready! https://your-project-dirname-tpspyhtdtk.now.sh (copied to clipboard)
226 |     ```
227 | 
228 |     Paste that URL into your browser when the build is complete, and you will see your deployed app.
229 | 
230 | You can find more details about [`now` here](https://zeit.co/now).
231 | 
232 | ## Something Missing?
233 | 
234 | If you have ideas for how we could improve this readme or the project in general, [let us know](https://github.com/segmentio/create-next-app/issues) or [contribute some!](https://github.com/segmentio/create-next-app/edit/master/lib/templates/default/README.md)
235 | 


--------------------------------------------------------------------------------
/template/next-template/components/head.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import NextHead from 'next/head'
 3 | import { string } from 'prop-types'
 4 | 
 5 | const defaultDescription = ''
 6 | const defaultOGURL = ''
 7 | const defaultOGImage = ''
 8 | 
 9 | const Head = props => (
10 |   <NextHead>
11 |     <meta charSet="UTF-8" />
12 |     <title>{props.title || ''}</title>
13 |     <meta
14 |       name="description"
15 |       content={props.description || defaultDescription}
16 |     />
17 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
18 |     <link rel="icon" sizes="192x192" href="/static/touch-icon.png" />
19 |     <link rel="apple-touch-icon" href="/static/touch-icon.png" />
20 |     <link rel="mask-icon" href="/static/favicon-mask.svg" color="#49B882" />
21 |     <link rel="icon" href="/static/favicon.ico" />
22 |     <meta property="og:url" content={props.url || defaultOGURL} />
23 |     <meta property="og:title" content={props.title || ''} />
24 |     <meta
25 |       property="og:description"
26 |       content={props.description || defaultDescription}
27 |     />
28 |     <meta name="twitter:site" content={props.url || defaultOGURL} />
29 |     <meta name="twitter:card" content="summary_large_image" />
30 |     <meta name="twitter:image" content={props.ogImage || defaultOGImage} />
31 |     <meta property="og:image" content={props.ogImage || defaultOGImage} />
32 |     <meta property="og:image:width" content="1200" />
33 |     <meta property="og:image:height" content="630" />
34 |   </NextHead>
35 | )
36 | 
37 | Head.propTypes = {
38 |   title: string,
39 |   description: string,
40 |   url: string,
41 |   ogImage: string
42 | }
43 | 
44 | export default Head
45 | 


--------------------------------------------------------------------------------
/template/next-template/components/nav.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Link from 'next/link'
 3 | 
 4 | const links = [
 5 |   { href: 'https://github.com/segmentio/create-next-app', label: 'Github' }
 6 | ].map(link => {
 7 |   link.key = `nav-link-${link.href}-${link.label}`
 8 |   return link
 9 | })
10 | 
11 | const Nav = () => (
12 |   <nav>
13 |     <ul>
14 |       <li>
15 |         <Link prefetch href="/">
16 |           <a>Home</a>
17 |         </Link>
18 |       </li>
19 |       <ul>
20 |         {links.map(({ key, href, label }) => (
21 |           <li key={key}>
22 |             <Link href={href}>
23 |               <a>{label}</a>
24 |             </Link>
25 |           </li>
26 |         ))}
27 |       </ul>
28 |     </ul>
29 | 
30 |     <style jsx>{`
31 |       :global(body) {
32 |         margin: 0;
33 |         font-family: -apple-system, BlinkMacSystemFont, Avenir Next, Avenir,
34 |           Helvetica, sans-serif;
35 |       }
36 |       nav {
37 |         text-align: center;
38 |       }
39 |       ul {
40 |         display: flex;
41 |         justify-content: space-between;
42 |       }
43 |       nav > ul {
44 |         padding: 4px 16px;
45 |       }
46 |       li {
47 |         display: flex;
48 |         padding: 6px 8px;
49 |       }
50 |       a {
51 |         color: #067df7;
52 |         text-decoration: none;
53 |         font-size: 13px;
54 |       }
55 |     `}</style>
56 |   </nav>
57 | )
58 | 
59 | export default Nav
60 | 


--------------------------------------------------------------------------------
/template/next-template/next.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   webpack: config => {
 3 |     // Fixes npm packages that depend on `fs` module
 4 |     config.node = {
 5 |       fs: 'empty'
 6 |     }
 7 | 
 8 |     return config
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/template/next-template/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "create-next-example-app",
 3 |   "scripts": {
 4 |     "dev": "next",
 5 |     "build": "next build",
 6 |     "start": "next start"
 7 |   },
 8 |   "dependencies": {
 9 |     "next": "^9.3.5",
10 |     "react": "^16.13.1",
11 |     "react-dom": "^16.13.1"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/template/next-template/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Link from 'next/link'
 3 | import Head from '../components/head'
 4 | import Nav from '../components/nav'
 5 | 
 6 | const Home = () => (
 7 |   <div>
 8 |     <Head title="Home" />
 9 |     <Nav />
10 | 
11 |     <div className="hero">
12 |       <h1 className="title">Welcome to Next!</h1>
13 |       <p className="description">
14 |         To get started, edit <code>pages/index.js</code> and save to reload.
15 |       </p>
16 | 
17 |       <div className="row">
18 |         <Link href="https://github.com/zeit/next.js#getting-started">
19 |           <a className="card">
20 |             <h3>Getting Started &rarr;</h3>
21 |             <p>Learn more about Next on Github and in their examples</p>
22 |           </a>
23 |         </Link>
24 |         <Link href="https://open.segment.com/create-next-app">
25 |           <a className="card">
26 |             <h3>Examples &rarr;</h3>
27 |             <p>
28 |               Find other example boilerplates on the{' '}
29 |               <code>create-next-app</code> site
30 |             </p>
31 |           </a>
32 |         </Link>
33 |         <Link href="https://github.com/segmentio/create-next-app">
34 |           <a className="card">
35 |             <h3>Create Next App &rarr;</h3>
36 |             <p>Was this tool helpful? Let us know how we can improve it</p>
37 |           </a>
38 |         </Link>
39 |       </div>
40 |     </div>
41 | 
42 |     <style jsx>{`
43 |       .hero {
44 |         width: 100%;
45 |         color: #333;
46 |       }
47 |       .title {
48 |         margin: 0;
49 |         width: 100%;
50 |         padding-top: 80px;
51 |         line-height: 1.15;
52 |         font-size: 48px;
53 |       }
54 |       .title,
55 |       .description {
56 |         text-align: center;
57 |       }
58 |       .row {
59 |         max-width: 880px;
60 |         margin: 80px auto 40px;
61 |         display: flex;
62 |         flex-direction: row;
63 |         justify-content: space-around;
64 |       }
65 |       .card {
66 |         padding: 18px 18px 24px;
67 |         width: 220px;
68 |         text-align: left;
69 |         text-decoration: none;
70 |         color: #434343;
71 |         border: 1px solid #9b9b9b;
72 |       }
73 |       .card:hover {
74 |         border-color: #067df7;
75 |       }
76 |       .card h3 {
77 |         margin: 0;
78 |         color: #067df7;
79 |         font-size: 18px;
80 |       }
81 |       .card p {
82 |         margin: 0;
83 |         padding: 12px 0 0;
84 |         font-size: 13px;
85 |         color: #333;
86 |       }
87 |     `}</style>
88 |   </div>
89 | )
90 | 
91 | export default Home
92 | 


--------------------------------------------------------------------------------
/template/next-template/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oahehc/react-vue-comparison/fc756310e517a237130073651ea8a31239389c9a/template/next-template/static/favicon.ico


--------------------------------------------------------------------------------
/template/nuxt-template/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/template/nuxt-template/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     node: true
 6 |   },
 7 |   parserOptions: {
 8 |     parser: 'babel-eslint'
 9 |   },
10 |   extends: [
11 |     '@nuxtjs',
12 |     'prettier',
13 |     'prettier/vue',
14 |     'plugin:prettier/recommended',
15 |     'plugin:nuxt/recommended'
16 |   ],
17 |   plugins: [
18 |     'prettier'
19 |   ],
20 |   // add your custom rules here
21 |   rules: {
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/template/nuxt-template/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | /logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE / Editor
81 | .idea
82 | 
83 | # Service worker
84 | sw.*
85 | 
86 | # macOS
87 | .DS_Store
88 | 
89 | # Vim swap files
90 | *.swp
91 | 


--------------------------------------------------------------------------------
/template/nuxt-template/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "arrowParens": "always",
4 |   "singleQuote": true
5 | }
6 | 


--------------------------------------------------------------------------------
/template/nuxt-template/README.md:
--------------------------------------------------------------------------------
 1 | # nuxt-template
 2 | 
 3 | > My glorious Nuxt.js project
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ```bash
 8 | # install dependencies
 9 | $ yarn install
10 | 
11 | # serve with hot reload at localhost:3000
12 | $ yarn dev
13 | 
14 | # build for production and launch server
15 | $ yarn build
16 | $ yarn start
17 | 
18 | # generate static project
19 | $ yarn generate
20 | ```
21 | 
22 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
23 | 


--------------------------------------------------------------------------------
/template/nuxt-template/assets/README.md:
--------------------------------------------------------------------------------
1 | # ASSETS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
8 | 


--------------------------------------------------------------------------------
/template/nuxt-template/components/Logo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     class="NuxtLogo"
 4 |     width="245"
 5 |     height="180"
 6 |     viewBox="0 0 452 342"
 7 |     xmlns="http://www.w3.org/2000/svg"
 8 |   >
 9 |     <g fill="none" fill-rule="evenodd">
10 |       <path
11 |         d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
12 |         fill="#00C58E"
13 |       />
14 |       <path
15 |         d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
16 |         fill="#108775"
17 |       />
18 |       <path
19 |         d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
20 |         fill="#2F495E"
21 |         fill-rule="nonzero"
22 |       />
23 |     </g>
24 |   </svg>
25 | </template>
26 | <style>
27 | .NuxtLogo {
28 |   animation: 1s appear;
29 |   margin: auto;
30 | }
31 | 
32 | @keyframes appear {
33 |   0% {
34 |     opacity: 0;
35 |   }
36 |   100% {
37 |     opacity: 1;
38 |   }
39 | }
40 | </style>
41 | 


--------------------------------------------------------------------------------
/template/nuxt-template/components/README.md:
--------------------------------------------------------------------------------
1 | # COMPONENTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | The components directory contains your Vue.js Components.
6 | 
7 | _Nuxt.js doesn't supercharge these components._
8 | 


--------------------------------------------------------------------------------
/template/nuxt-template/layouts/README.md:
--------------------------------------------------------------------------------
1 | # LAYOUTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your Application Layouts.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).
8 | 


--------------------------------------------------------------------------------
/template/nuxt-template/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <nuxt />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style>
 8 | html {
 9 |   font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
10 |     Roboto, 'Helvetica Neue', Arial, sans-serif;
11 |   font-size: 16px;
12 |   word-spacing: 1px;
13 |   -ms-text-size-adjust: 100%;
14 |   -webkit-text-size-adjust: 100%;
15 |   -moz-osx-font-smoothing: grayscale;
16 |   -webkit-font-smoothing: antialiased;
17 |   box-sizing: border-box;
18 | }
19 | 
20 | *,
21 | *:before,
22 | *:after {
23 |   box-sizing: border-box;
24 |   margin: 0;
25 | }
26 | 
27 | .button--green {
28 |   display: inline-block;
29 |   border-radius: 4px;
30 |   border: 1px solid #3b8070;
31 |   color: #3b8070;
32 |   text-decoration: none;
33 |   padding: 10px 30px;
34 | }
35 | 
36 | .button--green:hover {
37 |   color: #fff;
38 |   background-color: #3b8070;
39 | }
40 | 
41 | .button--grey {
42 |   display: inline-block;
43 |   border-radius: 4px;
44 |   border: 1px solid #35495e;
45 |   color: #35495e;
46 |   text-decoration: none;
47 |   padding: 10px 30px;
48 |   margin-left: 15px;
49 | }
50 | 
51 | .button--grey:hover {
52 |   color: #fff;
53 |   background-color: #35495e;
54 | }
55 | </style>
56 | 


--------------------------------------------------------------------------------
/template/nuxt-template/middleware/README.md:
--------------------------------------------------------------------------------
1 | # MIDDLEWARE
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your application middleware.
6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
7 | 
8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).
9 | 


--------------------------------------------------------------------------------
/template/nuxt-template/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   mode: 'universal',
 3 |   /*
 4 |    ** Headers of the page
 5 |    */
 6 |   head: {
 7 |     title: process.env.npm_package_name || '',
 8 |     meta: [
 9 |       { charset: 'utf-8' },
10 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
11 |       {
12 |         hid: 'description',
13 |         name: 'description',
14 |         content: process.env.npm_package_description || ''
15 |       }
16 |     ],
17 |     link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
18 |   },
19 |   /*
20 |    ** Customize the progress-bar color
21 |    */
22 |   loading: { color: '#fff' },
23 |   /*
24 |    ** Global CSS
25 |    */
26 |   css: [],
27 |   /*
28 |    ** Plugins to load before mounting the App
29 |    */
30 |   plugins: [],
31 |   /*
32 |    ** Nuxt.js dev-modules
33 |    */
34 |   buildModules: [
35 |     // Doc: https://github.com/nuxt-community/eslint-module
36 |     '@nuxtjs/eslint-module',
37 |     // Doc: https://github.com/nuxt-community/stylelint-module
38 |     '@nuxtjs/stylelint-module'
39 |   ],
40 |   /*
41 |    ** Nuxt.js modules
42 |    */
43 |   modules: [],
44 |   /*
45 |    ** Build configuration
46 |    */
47 |   build: {
48 |     /*
49 |      ** You can extend webpack config here
50 |      */
51 |     extend(config, ctx) {}
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/template/nuxt-template/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-template",
 3 |   "version": "1.0.0",
 4 |   "description": "My glorious Nuxt.js project",
 5 |   "author": "oahehc",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "nuxt",
 9 |     "build": "nuxt build",
10 |     "start": "nuxt start",
11 |     "generate": "nuxt generate",
12 |     "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
13 |   },
14 |   "lint-staged": {
15 |     "*.{js,vue}": "yarn lint",
16 |     "*.{css,vue}": "stylelint"
17 |   },
18 |   "husky": {
19 |     "hooks": {
20 |       "pre-commit": "lint-staged"
21 |     }
22 |   },
23 |   "dependencies": {
24 |     "nuxt": "^2.0.0"
25 |   },
26 |   "devDependencies": {
27 |     "@nuxtjs/eslint-config": "^2.0.0",
28 |     "@nuxtjs/eslint-module": "^1.0.0",
29 |     "babel-eslint": "^10.0.1",
30 |     "eslint": "^6.1.0",
31 |     "eslint-plugin-nuxt": ">=0.4.2",
32 |     "eslint-config-prettier": "^6.10.0",
33 |     "eslint-plugin-prettier": "^3.1.2",
34 |     "prettier": "^1.19.1",
35 |     "husky": "^4.0.0",
36 |     "lint-staged": "^10.0.0",
37 |     "@nuxtjs/stylelint-module": "^3.1.0",
38 |     "stylelint": "^10.1.0"
39 |   }
40 | }


--------------------------------------------------------------------------------
/template/nuxt-template/pages/README.md:
--------------------------------------------------------------------------------
1 | # PAGES
2 | 
3 | This directory contains your Application Views and Routes.
4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application.
5 | 
6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).
7 | 


--------------------------------------------------------------------------------
/template/nuxt-template/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <div>
 4 |       <logo />
 5 |       <h1 class="title">
 6 |         nuxt-template
 7 |       </h1>
 8 |       <h2 class="subtitle">
 9 |         My glorious Nuxt.js project
10 |       </h2>
11 |       <div class="links">
12 |         <a href="https://nuxtjs.org/" target="_blank" class="button--green">
13 |           Documentation
14 |         </a>
15 |         <a
16 |           href="https://github.com/nuxt/nuxt.js"
17 |           target="_blank"
18 |           class="button--grey"
19 |         >
20 |           GitHub
21 |         </a>
22 |       </div>
23 |     </div>
24 |   </div>
25 | </template>
26 | 
27 | <script>
28 | import Logo from '~/components/Logo.vue'
29 | 
30 | export default {
31 |   components: {
32 |     Logo
33 |   }
34 | }
35 | </script>
36 | 
37 | <style>
38 | .container {
39 |   margin: 0 auto;
40 |   min-height: 100vh;
41 |   display: flex;
42 |   justify-content: center;
43 |   align-items: center;
44 |   text-align: center;
45 | }
46 | 
47 | .title {
48 |   font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
49 |     'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
50 |   display: block;
51 |   font-weight: 300;
52 |   font-size: 100px;
53 |   color: #35495e;
54 |   letter-spacing: 1px;
55 | }
56 | 
57 | .subtitle {
58 |   font-weight: 300;
59 |   font-size: 42px;
60 |   color: #526488;
61 |   word-spacing: 5px;
62 |   padding-bottom: 15px;
63 | }
64 | 
65 | .links {
66 |   padding-top: 15px;
67 | }
68 | </style>
69 | 


--------------------------------------------------------------------------------
/template/nuxt-template/plugins/README.md:
--------------------------------------------------------------------------------
1 | # PLUGINS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).
8 | 


--------------------------------------------------------------------------------
/template/nuxt-template/static/README.md:
--------------------------------------------------------------------------------
 1 | # STATIC
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your static files.
 6 | Each file inside this directory is mapped to `/`.
 7 | Thus you'd want to delete this README.md before deploying to production.
 8 | 
 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`.
10 | 
11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).
12 | 


--------------------------------------------------------------------------------
/template/nuxt-template/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oahehc/react-vue-comparison/fc756310e517a237130073651ea8a31239389c9a/template/nuxt-template/static/favicon.ico


--------------------------------------------------------------------------------
/template/nuxt-template/store/README.md:
--------------------------------------------------------------------------------
 1 | # STORE
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your Vuex Store files.
 6 | Vuex Store option is implemented in the Nuxt.js framework.
 7 | 
 8 | Creating a file in this directory automatically activates the option in the framework.
 9 | 
10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
11 | 


--------------------------------------------------------------------------------
/template/nuxt-template/stylelint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   // add your custom config here
3 |   // https://stylelint.io/user-guide/configuration
4 |   rules: {}
5 | }
6 | 


--------------------------------------------------------------------------------
/template/react-template/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/template/react-template/README.md:
--------------------------------------------------------------------------------
 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 2 | 
 3 | ## Available Scripts
 4 | 
 5 | In the project directory, you can run:
 6 | 
 7 | ### `yarn start`
 8 | 
 9 | Runs the app in the development mode.<br />
10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
11 | 
12 | The page will reload if you make edits.<br />
13 | You will also see any lint errors in the console.
14 | 
15 | ### `yarn test`
16 | 
17 | Launches the test runner in the interactive watch mode.<br />
18 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
19 | 
20 | ### `yarn build`
21 | 
22 | Builds the app for production to the `build` folder.<br />
23 | It correctly bundles React in production mode and optimizes the build for the best performance.
24 | 
25 | The build is minified and the filenames include the hashes.<br />
26 | Your app is ready to be deployed!
27 | 
28 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
29 | 
30 | ### `yarn eject`
31 | 
32 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
33 | 
34 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
35 | 
36 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
37 | 
38 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
39 | 
40 | ## Learn More
41 | 
42 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
43 | 
44 | To learn React, check out the [React documentation](https://reactjs.org/).
45 | 
46 | ### Code Splitting
47 | 
48 | This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
49 | 
50 | ### Analyzing the Bundle Size
51 | 
52 | This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
53 | 
54 | ### Making a Progressive Web App
55 | 
56 | This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
57 | 
58 | ### Advanced Configuration
59 | 
60 | This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
61 | 
62 | ### Deployment
63 | 
64 | This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
65 | 
66 | ### `yarn build` fails to minify
67 | 
68 | This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
69 | 


--------------------------------------------------------------------------------
/template/react-template/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cra-template",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^4.2.4",
 7 |     "@testing-library/react": "^9.3.2",
 8 |     "@testing-library/user-event": "^7.1.2",
 9 |     "react": "^16.13.1",
10 |     "react-dom": "^16.13.1",
11 |     "react-scripts": "3.4.1"
12 |   },
13 |   "scripts": {
14 |     "start": "react-scripts start",
15 |     "build": "react-scripts build",
16 |     "test": "react-scripts test",
17 |     "eject": "react-scripts eject"
18 |   },
19 |   "eslintConfig": {
20 |     "extends": "react-app"
21 |   },
22 |   "browserslist": {
23 |     "production": [
24 |       ">0.2%",
25 |       "not dead",
26 |       "not op_mini all"
27 |     ],
28 |     "development": [
29 |       "last 1 chrome version",
30 |       "last 1 firefox version",
31 |       "last 1 safari version"
32 |     ]
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/template/react-template/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oahehc/react-vue-comparison/fc756310e517a237130073651ea8a31239389c9a/template/react-template/public/favicon.ico


--------------------------------------------------------------------------------
/template/react-template/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/template/react-template/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oahehc/react-vue-comparison/fc756310e517a237130073651ea8a31239389c9a/template/react-template/public/logo192.png


--------------------------------------------------------------------------------
/template/react-template/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oahehc/react-vue-comparison/fc756310e517a237130073651ea8a31239389c9a/template/react-template/public/logo512.png


--------------------------------------------------------------------------------
/template/react-template/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/template/react-template/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/template/react-template/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   height: 40vmin;
 7 |   pointer-events: none;
 8 | }
 9 | 
10 | @media (prefers-reduced-motion: no-preference) {
11 |   .App-logo {
12 |     animation: App-logo-spin infinite 20s linear;
13 |   }
14 | }
15 | 
16 | .App-header {
17 |   background-color: #282c34;
18 |   min-height: 100vh;
19 |   display: flex;
20 |   flex-direction: column;
21 |   align-items: center;
22 |   justify-content: center;
23 |   font-size: calc(10px + 2vmin);
24 |   color: white;
25 | }
26 | 
27 | .App-link {
28 |   color: #61dafb;
29 | }
30 | 
31 | @keyframes App-logo-spin {
32 |   from {
33 |     transform: rotate(0deg);
34 |   }
35 |   to {
36 |     transform: rotate(360deg);
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/template/react-template/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import logo from './logo.svg';
 3 | import './App.css';
 4 | 
 5 | function App() {
 6 |   return (
 7 |     <div className="App">
 8 |       <header className="App-header">
 9 |         <img src={logo} className="App-logo" alt="logo" />
10 |         <p>
11 |           Edit <code>src/App.js</code> and save to reload.
12 |         </p>
13 |         <a
14 |           className="App-link"
15 |           href="https://reactjs.org"
16 |           target="_blank"
17 |           rel="noopener noreferrer"
18 |         >
19 |           Learn React
20 |         </a>
21 |       </header>
22 |     </div>
23 |   );
24 | }
25 | 
26 | export default App;
27 | 


--------------------------------------------------------------------------------
/template/react-template/src/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render } from '@testing-library/react';
 3 | import App from './App';
 4 | 
 5 | test('renders learn react link', () => {
 6 |   const { getByText } = render(<App />);
 7 |   const linkElement = getByText(/learn react/i);
 8 |   expect(linkElement).toBeInTheDocument();
 9 | });
10 | 


--------------------------------------------------------------------------------
/template/react-template/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/template/react-template/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | import * as serviceWorker from './serviceWorker';
 6 | 
 7 | ReactDOM.render(
 8 |   <React.StrictMode>
 9 |     <App />
10 |   </React.StrictMode>,
11 |   document.getElementById('root')
12 | );
13 | 
14 | // If you want your app to work offline and load faster, you can change
15 | // unregister() to register() below. Note this comes with some pitfalls.
16 | // Learn more about service workers: https://bit.ly/CRA-PWA
17 | serviceWorker.unregister();
18 | 


--------------------------------------------------------------------------------
/template/react-template/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2 |     <g fill="#61DAFB">
3 |         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4 |         <circle cx="420.9" cy="296.5" r="45.7"/>
5 |         <path d="M520.5 78.1z"/>
6 |     </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/template/react-template/src/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read https://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.0/8 are considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | export function register(config) {
 24 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return;
 32 |     }
 33 | 
 34 |     window.addEventListener('load', () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config);
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             'This web app is being served cache-first by a service ' +
 46 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 47 |           );
 48 |         });
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config);
 52 |       }
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then(registration => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing;
 63 |         if (installingWorker == null) {
 64 |           return;
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === 'installed') {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 'New content is available and will be used when all ' +
 74 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 75 |               );
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration);
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log('Content is cached for offline use.');
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration);
 90 |               }
 91 |             }
 92 |           }
 93 |         };
 94 |       };
 95 |     })
 96 |     .catch(error => {
 97 |       console.error('Error during service worker registration:', error);
 98 |     });
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl, {
104 |     headers: { 'Service-Worker': 'script' },
105 |   })
106 |     .then(response => {
107 |       // Ensure service worker exists, and that we really are getting a JS file.
108 |       const contentType = response.headers.get('content-type');
109 |       if (
110 |         response.status === 404 ||
111 |         (contentType != null && contentType.indexOf('javascript') === -1)
112 |       ) {
113 |         // No service worker found. Probably a different app. Reload the page.
114 |         navigator.serviceWorker.ready.then(registration => {
115 |           registration.unregister().then(() => {
116 |             window.location.reload();
117 |           });
118 |         });
119 |       } else {
120 |         // Service worker found. Proceed as normal.
121 |         registerValidSW(swUrl, config);
122 |       }
123 |     })
124 |     .catch(() => {
125 |       console.log(
126 |         'No internet connection found. App is running in offline mode.'
127 |       );
128 |     });
129 | }
130 | 
131 | export function unregister() {
132 |   if ('serviceWorker' in navigator) {
133 |     navigator.serviceWorker.ready
134 |       .then(registration => {
135 |         registration.unregister();
136 |       })
137 |       .catch(error => {
138 |         console.error(error.message);
139 |       });
140 |   }
141 | }
142 | 


--------------------------------------------------------------------------------
/template/react-template/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect';
6 | 


--------------------------------------------------------------------------------
/template/vue-template/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/template/vue-template/README.md:
--------------------------------------------------------------------------------
 1 | # vue-template
 2 | 
 3 | ## Project setup
 4 | ```
 5 | yarn install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | yarn serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | yarn build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | yarn lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/template/vue-template/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/template/vue-template/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-template",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.4",
12 |     "vue": "^2.6.11"
13 |   },
14 |   "devDependencies": {
15 |     "@vue/cli-plugin-babel": "~4.3.0",
16 |     "@vue/cli-plugin-eslint": "~4.3.0",
17 |     "@vue/cli-service": "~4.3.0",
18 |     "babel-eslint": "^10.1.0",
19 |     "eslint": "^6.7.2",
20 |     "eslint-plugin-vue": "^6.2.2",
21 |     "vue-template-compiler": "^2.6.11"
22 |   },
23 |   "eslintConfig": {
24 |     "root": true,
25 |     "env": {
26 |       "node": true
27 |     },
28 |     "extends": [
29 |       "plugin:vue/essential",
30 |       "eslint:recommended"
31 |     ],
32 |     "parserOptions": {
33 |       "parser": "babel-eslint"
34 |     },
35 |     "rules": {}
36 |   },
37 |   "browserslist": [
38 |     "> 1%",
39 |     "last 2 versions",
40 |     "not dead"
41 |   ]
42 | }
43 | 


--------------------------------------------------------------------------------
/template/vue-template/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oahehc/react-vue-comparison/fc756310e517a237130073651ea8a31239389c9a/template/vue-template/public/favicon.ico


--------------------------------------------------------------------------------
/template/vue-template/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/template/vue-template/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <img alt="Vue logo" src="./assets/logo.png">
 4 |     <HelloWorld msg="Welcome to Your Vue.js App"/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import HelloWorld from './components/HelloWorld.vue'
10 | 
11 | export default {
12 |   name: 'App',
13 |   components: {
14 |     HelloWorld
15 |   }
16 | }
17 | </script>
18 | 
19 | <style>
20 | #app {
21 |   font-family: Avenir, Helvetica, Arial, sans-serif;
22 |   -webkit-font-smoothing: antialiased;
23 |   -moz-osx-font-smoothing: grayscale;
24 |   text-align: center;
25 |   color: #2c3e50;
26 |   margin-top: 60px;
27 | }
28 | </style>
29 | 


--------------------------------------------------------------------------------
/template/vue-template/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oahehc/react-vue-comparison/fc756310e517a237130073651ea8a31239389c9a/template/vue-template/src/assets/logo.png


--------------------------------------------------------------------------------
/template/vue-template/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hello">
 3 |     <h1>{{ msg }}</h1>
 4 |     <p>
 5 |       For a guide and recipes on how to configure / customize this project,<br>
 6 |       check out the
 7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
 8 |     </p>
 9 |     <h3>Installed CLI Plugins</h3>
10 |     <ul>
11 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
12 |       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
13 |     </ul>
14 |     <h3>Essential Links</h3>
15 |     <ul>
16 |       <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
17 |       <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
18 |       <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
19 |       <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
20 |       <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
21 |     </ul>
22 |     <h3>Ecosystem</h3>
23 |     <ul>
24 |       <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
25 |       <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
26 |       <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
27 |       <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
28 |       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
29 |     </ul>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 | export default {
35 |   name: 'HelloWorld',
36 |   props: {
37 |     msg: String
38 |   }
39 | }
40 | </script>
41 | 
42 | <!-- Add "scoped" attribute to limit CSS to this component only -->
43 | <style scoped>
44 | h3 {
45 |   margin: 40px 0 0;
46 | }
47 | ul {
48 |   list-style-type: none;
49 |   padding: 0;
50 | }
51 | li {
52 |   display: inline-block;
53 |   margin: 0 10px;
54 | }
55 | a {
56 |   color: #42b983;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/template/vue-template/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App),
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
   1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
   2 | # yarn lockfile v1
   3 | 
   4 | 
   5 | "@types/node@*":
   6 |   version "14.0.13"
   7 |   resolved "https://registry.npmjs.org/@types/node/-/node-14.0.13.tgz#ee1128e881b874c371374c1f72201893616417c9"
   8 |   integrity sha512-rouEWBImiRaSJsVA+ITTFM6ZxibuAlTuNOCyxVbwreu6k6+ujs7DfnU9o+PShFhET78pMBl3eH+AGSI5eOTkPA==
   9 | 
  10 | "@types/yauzl@^2.9.1":
  11 |   version "2.9.1"
  12 |   resolved "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.9.1.tgz#d10f69f9f522eef3cf98e30afb684a1e1ec923af"
  13 |   integrity sha512-A1b8SU4D10uoPjwb0lnHmmu8wZhR9d+9o2PKBQT2jU5YPTKsxac6M2qGAdY7VcL+dHHhARVUDmeg0rOrcd9EjA==
  14 |   dependencies:
  15 |     "@types/node" "*"
  16 | 
  17 | "@yarnpkg/lockfile@^1.1.0":
  18 |   version "1.1.0"
  19 |   resolved "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31"
  20 |   integrity sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==
  21 | 
  22 | agent-base@5:
  23 |   version "5.1.1"
  24 |   resolved "https://registry.npmjs.org/agent-base/-/agent-base-5.1.1.tgz#e8fb3f242959db44d63be665db7a8e739537a32c"
  25 |   integrity sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==
  26 | 
  27 | ansi-styles@^3.2.1:
  28 |   version "3.2.1"
  29 |   resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
  30 |   integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
  31 |   dependencies:
  32 |     color-convert "^1.9.0"
  33 | 
  34 | arr-diff@^4.0.0:
  35 |   version "4.0.0"
  36 |   resolved "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
  37 |   integrity sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=
  38 | 
  39 | arr-flatten@^1.1.0:
  40 |   version "1.1.0"
  41 |   resolved "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
  42 |   integrity sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==
  43 | 
  44 | arr-union@^3.1.0:
  45 |   version "3.1.0"
  46 |   resolved "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
  47 |   integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
  48 | 
  49 | array-unique@^0.3.2:
  50 |   version "0.3.2"
  51 |   resolved "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
  52 |   integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
  53 | 
  54 | assign-symbols@^1.0.0:
  55 |   version "1.0.0"
  56 |   resolved "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
  57 |   integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
  58 | 
  59 | atob@^2.1.2:
  60 |   version "2.1.2"
  61 |   resolved "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
  62 |   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
  63 | 
  64 | axios@^0.19.2:
  65 |   version "0.19.2"
  66 |   resolved "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
  67 |   integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==
  68 |   dependencies:
  69 |     follow-redirects "1.5.10"
  70 | 
  71 | balanced-match@^1.0.0:
  72 |   version "1.0.0"
  73 |   resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
  74 |   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
  75 | 
  76 | base64-js@^1.0.2:
  77 |   version "1.3.1"
  78 |   resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
  79 |   integrity sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==
  80 | 
  81 | base@^0.11.1:
  82 |   version "0.11.2"
  83 |   resolved "https://registry.npmjs.org/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
  84 |   integrity sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==
  85 |   dependencies:
  86 |     cache-base "^1.0.1"
  87 |     class-utils "^0.3.5"
  88 |     component-emitter "^1.2.1"
  89 |     define-property "^1.0.0"
  90 |     isobject "^3.0.1"
  91 |     mixin-deep "^1.2.0"
  92 |     pascalcase "^0.1.1"
  93 | 
  94 | bl@^4.0.1:
  95 |   version "4.0.2"
  96 |   resolved "https://registry.npmjs.org/bl/-/bl-4.0.2.tgz#52b71e9088515d0606d9dd9cc7aa48dc1f98e73a"
  97 |   integrity sha512-j4OH8f6Qg2bGuWfRiltT2HYGx0e1QcBTrK9KAHNMwMZdQnDZFk0ZSYIpADjYCB3U12nicC5tVJwSIhwOWjb4RQ==
  98 |   dependencies:
  99 |     buffer "^5.5.0"
 100 |     inherits "^2.0.4"
 101 |     readable-stream "^3.4.0"
 102 | 
 103 | brace-expansion@^1.1.7:
 104 |   version "1.1.11"
 105 |   resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
 106 |   integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
 107 |   dependencies:
 108 |     balanced-match "^1.0.0"
 109 |     concat-map "0.0.1"
 110 | 
 111 | braces@^2.3.1:
 112 |   version "2.3.2"
 113 |   resolved "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
 114 |   integrity sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==
 115 |   dependencies:
 116 |     arr-flatten "^1.1.0"
 117 |     array-unique "^0.3.2"
 118 |     extend-shallow "^2.0.1"
 119 |     fill-range "^4.0.0"
 120 |     isobject "^3.0.1"
 121 |     repeat-element "^1.1.2"
 122 |     snapdragon "^0.8.1"
 123 |     snapdragon-node "^2.0.1"
 124 |     split-string "^3.0.2"
 125 |     to-regex "^3.0.1"
 126 | 
 127 | buffer-crc32@~0.2.3:
 128 |   version "0.2.13"
 129 |   resolved "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
 130 |   integrity sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=
 131 | 
 132 | buffer@^5.2.1, buffer@^5.5.0:
 133 |   version "5.6.0"
 134 |   resolved "https://registry.npmjs.org/buffer/-/buffer-5.6.0.tgz#a31749dc7d81d84db08abf937b6b8c4033f62786"
 135 |   integrity sha512-/gDYp/UtU0eA1ys8bOs9J6a+E/KWIY+DZ+Q2WESNUA0jFRsJOc0SNUO6xJ5SGA1xueg3NL65W6s+NY5l9cunuw==
 136 |   dependencies:
 137 |     base64-js "^1.0.2"
 138 |     ieee754 "^1.1.4"
 139 | 
 140 | cache-base@^1.0.1:
 141 |   version "1.0.1"
 142 |   resolved "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
 143 |   integrity sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==
 144 |   dependencies:
 145 |     collection-visit "^1.0.0"
 146 |     component-emitter "^1.2.1"
 147 |     get-value "^2.0.6"
 148 |     has-value "^1.0.0"
 149 |     isobject "^3.0.1"
 150 |     set-value "^2.0.0"
 151 |     to-object-path "^0.3.0"
 152 |     union-value "^1.0.0"
 153 |     unset-value "^1.0.0"
 154 | 
 155 | chalk@^2.4.2:
 156 |   version "2.4.2"
 157 |   resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
 158 |   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
 159 |   dependencies:
 160 |     ansi-styles "^3.2.1"
 161 |     escape-string-regexp "^1.0.5"
 162 |     supports-color "^5.3.0"
 163 | 
 164 | chownr@^1.1.1:
 165 |   version "1.1.4"
 166 |   resolved "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
 167 |   integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
 168 | 
 169 | ci-info@^2.0.0:
 170 |   version "2.0.0"
 171 |   resolved "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
 172 |   integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
 173 | 
 174 | class-utils@^0.3.5:
 175 |   version "0.3.6"
 176 |   resolved "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
 177 |   integrity sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==
 178 |   dependencies:
 179 |     arr-union "^3.1.0"
 180 |     define-property "^0.2.5"
 181 |     isobject "^3.0.0"
 182 |     static-extend "^0.1.1"
 183 | 
 184 | collection-visit@^1.0.0:
 185 |   version "1.0.0"
 186 |   resolved "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
 187 |   integrity sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=
 188 |   dependencies:
 189 |     map-visit "^1.0.0"
 190 |     object-visit "^1.0.0"
 191 | 
 192 | color-convert@^1.9.0:
 193 |   version "1.9.3"
 194 |   resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
 195 |   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
 196 |   dependencies:
 197 |     color-name "1.1.3"
 198 | 
 199 | color-name@1.1.3:
 200 |   version "1.1.3"
 201 |   resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
 202 |   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 203 | 
 204 | component-emitter@^1.2.1:
 205 |   version "1.3.0"
 206 |   resolved "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
 207 |   integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
 208 | 
 209 | concat-map@0.0.1:
 210 |   version "0.0.1"
 211 |   resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
 212 |   integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
 213 | 
 214 | copy-descriptor@^0.1.0:
 215 |   version "0.1.1"
 216 |   resolved "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
 217 |   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 218 | 
 219 | cross-spawn@^6.0.5:
 220 |   version "6.0.5"
 221 |   resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
 222 |   integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
 223 |   dependencies:
 224 |     nice-try "^1.0.4"
 225 |     path-key "^2.0.1"
 226 |     semver "^5.5.0"
 227 |     shebang-command "^1.2.0"
 228 |     which "^1.2.9"
 229 | 
 230 | debug@4, debug@^4.1.0, debug@^4.1.1:
 231 |   version "4.1.1"
 232 |   resolved "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
 233 |   integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
 234 |   dependencies:
 235 |     ms "^2.1.1"
 236 | 
 237 | debug@=3.1.0:
 238 |   version "3.1.0"
 239 |   resolved "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
 240 |   integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
 241 |   dependencies:
 242 |     ms "2.0.0"
 243 | 
 244 | debug@^2.2.0, debug@^2.3.3:
 245 |   version "2.6.9"
 246 |   resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
 247 |   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
 248 |   dependencies:
 249 |     ms "2.0.0"
 250 | 
 251 | decode-uri-component@^0.2.0:
 252 |   version "0.2.0"
 253 |   resolved "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
 254 |   integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
 255 | 
 256 | define-property@^0.2.5:
 257 |   version "0.2.5"
 258 |   resolved "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
 259 |   integrity sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=
 260 |   dependencies:
 261 |     is-descriptor "^0.1.0"
 262 | 
 263 | define-property@^1.0.0:
 264 |   version "1.0.0"
 265 |   resolved "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
 266 |   integrity sha1-dp66rz9KY6rTr56NMEybvnm/sOY=
 267 |   dependencies:
 268 |     is-descriptor "^1.0.0"
 269 | 
 270 | define-property@^2.0.2:
 271 |   version "2.0.2"
 272 |   resolved "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz#d459689e8d654ba77e02a817f8710d702cb16e9d"
 273 |   integrity sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==
 274 |   dependencies:
 275 |     is-descriptor "^1.0.2"
 276 |     isobject "^3.0.1"
 277 | 
 278 | end-of-stream@^1.1.0, end-of-stream@^1.4.1:
 279 |   version "1.4.4"
 280 |   resolved "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
 281 |   integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
 282 |   dependencies:
 283 |     once "^1.4.0"
 284 | 
 285 | escape-string-regexp@^1.0.5:
 286 |   version "1.0.5"
 287 |   resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 288 |   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 289 | 
 290 | expand-brackets@^2.1.4:
 291 |   version "2.1.4"
 292 |   resolved "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
 293 |   integrity sha1-t3c14xXOMPa27/D4OwQVGiJEliI=
 294 |   dependencies:
 295 |     debug "^2.3.3"
 296 |     define-property "^0.2.5"
 297 |     extend-shallow "^2.0.1"
 298 |     posix-character-classes "^0.1.0"
 299 |     regex-not "^1.0.0"
 300 |     snapdragon "^0.8.1"
 301 |     to-regex "^3.0.1"
 302 | 
 303 | extend-shallow@^2.0.1:
 304 |   version "2.0.1"
 305 |   resolved "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
 306 |   integrity sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=
 307 |   dependencies:
 308 |     is-extendable "^0.1.0"
 309 | 
 310 | extend-shallow@^3.0.0, extend-shallow@^3.0.2:
 311 |   version "3.0.2"
 312 |   resolved "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
 313 |   integrity sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=
 314 |   dependencies:
 315 |     assign-symbols "^1.0.0"
 316 |     is-extendable "^1.0.1"
 317 | 
 318 | extglob@^2.0.4:
 319 |   version "2.0.4"
 320 |   resolved "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
 321 |   integrity sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==
 322 |   dependencies:
 323 |     array-unique "^0.3.2"
 324 |     define-property "^1.0.0"
 325 |     expand-brackets "^2.1.4"
 326 |     extend-shallow "^2.0.1"
 327 |     fragment-cache "^0.2.1"
 328 |     regex-not "^1.0.0"
 329 |     snapdragon "^0.8.1"
 330 |     to-regex "^3.0.1"
 331 | 
 332 | extract-zip@^2.0.0:
 333 |   version "2.0.1"
 334 |   resolved "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz#663dca56fe46df890d5f131ef4a06d22bb8ba13a"
 335 |   integrity sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==
 336 |   dependencies:
 337 |     debug "^4.1.1"
 338 |     get-stream "^5.1.0"
 339 |     yauzl "^2.10.0"
 340 |   optionalDependencies:
 341 |     "@types/yauzl" "^2.9.1"
 342 | 
 343 | fd-slicer@~1.1.0:
 344 |   version "1.1.0"
 345 |   resolved "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
 346 |   integrity sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=
 347 |   dependencies:
 348 |     pend "~1.2.0"
 349 | 
 350 | fill-range@^4.0.0:
 351 |   version "4.0.0"
 352 |   resolved "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
 353 |   integrity sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=
 354 |   dependencies:
 355 |     extend-shallow "^2.0.1"
 356 |     is-number "^3.0.0"
 357 |     repeat-string "^1.6.1"
 358 |     to-regex-range "^2.1.0"
 359 | 
 360 | find-yarn-workspace-root@^1.2.1:
 361 |   version "1.2.1"
 362 |   resolved "https://registry.npmjs.org/find-yarn-workspace-root/-/find-yarn-workspace-root-1.2.1.tgz#40eb8e6e7c2502ddfaa2577c176f221422f860db"
 363 |   integrity sha512-dVtfb0WuQG+8Ag2uWkbG79hOUzEsRrhBzgfn86g2sJPkzmcpGdghbNTfUKGTxymFrY/tLIodDzLoW9nOJ4FY8Q==
 364 |   dependencies:
 365 |     fs-extra "^4.0.3"
 366 |     micromatch "^3.1.4"
 367 | 
 368 | follow-redirects@1.5.10:
 369 |   version "1.5.10"
 370 |   resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
 371 |   integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
 372 |   dependencies:
 373 |     debug "=3.1.0"
 374 | 
 375 | for-in@^1.0.2:
 376 |   version "1.0.2"
 377 |   resolved "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
 378 |   integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
 379 | 
 380 | fragment-cache@^0.2.1:
 381 |   version "0.2.1"
 382 |   resolved "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
 383 |   integrity sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=
 384 |   dependencies:
 385 |     map-cache "^0.2.2"
 386 | 
 387 | fs-constants@^1.0.0:
 388 |   version "1.0.0"
 389 |   resolved "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
 390 |   integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
 391 | 
 392 | fs-extra@^4.0.3:
 393 |   version "4.0.3"
 394 |   resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
 395 |   integrity sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==
 396 |   dependencies:
 397 |     graceful-fs "^4.1.2"
 398 |     jsonfile "^4.0.0"
 399 |     universalify "^0.1.0"
 400 | 
 401 | fs-extra@^7.0.1:
 402 |   version "7.0.1"
 403 |   resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
 404 |   integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==
 405 |   dependencies:
 406 |     graceful-fs "^4.1.2"
 407 |     jsonfile "^4.0.0"
 408 |     universalify "^0.1.0"
 409 | 
 410 | fs.realpath@^1.0.0:
 411 |   version "1.0.0"
 412 |   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
 413 |   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 414 | 
 415 | get-stream@^5.1.0:
 416 |   version "5.1.0"
 417 |   resolved "https://registry.npmjs.org/get-stream/-/get-stream-5.1.0.tgz#01203cdc92597f9b909067c3e656cc1f4d3c4dc9"
 418 |   integrity sha512-EXr1FOzrzTfGeL0gQdeFEvOMm2mzMOglyiOXSTpPC+iAjAKftbr3jpCMWynogwYnM+eSj9sHGc6wjIcDvYiygw==
 419 |   dependencies:
 420 |     pump "^3.0.0"
 421 | 
 422 | get-value@^2.0.3, get-value@^2.0.6:
 423 |   version "2.0.6"
 424 |   resolved "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
 425 |   integrity sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=
 426 | 
 427 | glob@^7.1.3:
 428 |   version "7.1.6"
 429 |   resolved "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
 430 |   integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
 431 |   dependencies:
 432 |     fs.realpath "^1.0.0"
 433 |     inflight "^1.0.4"
 434 |     inherits "2"
 435 |     minimatch "^3.0.4"
 436 |     once "^1.3.0"
 437 |     path-is-absolute "^1.0.0"
 438 | 
 439 | graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6:
 440 |   version "4.2.4"
 441 |   resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
 442 |   integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
 443 | 
 444 | has-flag@^3.0.0:
 445 |   version "3.0.0"
 446 |   resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
 447 |   integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
 448 | 
 449 | has-value@^0.3.1:
 450 |   version "0.3.1"
 451 |   resolved "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
 452 |   integrity sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=
 453 |   dependencies:
 454 |     get-value "^2.0.3"
 455 |     has-values "^0.1.4"
 456 |     isobject "^2.0.0"
 457 | 
 458 | has-value@^1.0.0:
 459 |   version "1.0.0"
 460 |   resolved "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177"
 461 |   integrity sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=
 462 |   dependencies:
 463 |     get-value "^2.0.6"
 464 |     has-values "^1.0.0"
 465 |     isobject "^3.0.0"
 466 | 
 467 | has-values@^0.1.4:
 468 |   version "0.1.4"
 469 |   resolved "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
 470 |   integrity sha1-bWHeldkd/Km5oCCJrThL/49it3E=
 471 | 
 472 | has-values@^1.0.0:
 473 |   version "1.0.0"
 474 |   resolved "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
 475 |   integrity sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=
 476 |   dependencies:
 477 |     is-number "^3.0.0"
 478 |     kind-of "^4.0.0"
 479 | 
 480 | https-proxy-agent@^4.0.0:
 481 |   version "4.0.0"
 482 |   resolved "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz#702b71fb5520a132a66de1f67541d9e62154d82b"
 483 |   integrity sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==
 484 |   dependencies:
 485 |     agent-base "5"
 486 |     debug "4"
 487 | 
 488 | ieee754@^1.1.4:
 489 |   version "1.1.13"
 490 |   resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"
 491 |   integrity sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==
 492 | 
 493 | indento@^1.1.7:
 494 |   version "1.1.12"
 495 |   resolved "https://registry.npmjs.org/indento/-/indento-1.1.12.tgz#e95942e88e528655df33f129b6826019a1a221fd"
 496 |   integrity sha512-hWlFlRL6dd06MU5SsOZZ6kzO7t/7ZjcxWh1Yf/MjGtyKQMC8SPS5GbZ2XqMBGaGn+HM2QQawYxSLtS7Zv0w0BQ==
 497 | 
 498 | inflight@^1.0.4:
 499 |   version "1.0.6"
 500 |   resolved "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
 501 |   integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
 502 |   dependencies:
 503 |     once "^1.3.0"
 504 |     wrappy "1"
 505 | 
 506 | inherits@2, inherits@^2.0.3, inherits@^2.0.4:
 507 |   version "2.0.4"
 508 |   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
 509 |   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 510 | 
 511 | is-accessor-descriptor@^0.1.6:
 512 |   version "0.1.6"
 513 |   resolved "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
 514 |   integrity sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=
 515 |   dependencies:
 516 |     kind-of "^3.0.2"
 517 | 
 518 | is-accessor-descriptor@^1.0.0:
 519 |   version "1.0.0"
 520 |   resolved "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz#169c2f6d3df1f992618072365c9b0ea1f6878656"
 521 |   integrity sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==
 522 |   dependencies:
 523 |     kind-of "^6.0.0"
 524 | 
 525 | is-buffer@^1.1.5:
 526 |   version "1.1.6"
 527 |   resolved "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
 528 |   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 529 | 
 530 | is-ci@^2.0.0:
 531 |   version "2.0.0"
 532 |   resolved "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
 533 |   integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
 534 |   dependencies:
 535 |     ci-info "^2.0.0"
 536 | 
 537 | is-data-descriptor@^0.1.4:
 538 |   version "0.1.4"
 539 |   resolved "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
 540 |   integrity sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=
 541 |   dependencies:
 542 |     kind-of "^3.0.2"
 543 | 
 544 | is-data-descriptor@^1.0.0:
 545 |   version "1.0.0"
 546 |   resolved "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz#d84876321d0e7add03990406abbbbd36ba9268c7"
 547 |   integrity sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==
 548 |   dependencies:
 549 |     kind-of "^6.0.0"
 550 | 
 551 | is-descriptor@^0.1.0:
 552 |   version "0.1.6"
 553 |   resolved "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
 554 |   integrity sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==
 555 |   dependencies:
 556 |     is-accessor-descriptor "^0.1.6"
 557 |     is-data-descriptor "^0.1.4"
 558 |     kind-of "^5.0.0"
 559 | 
 560 | is-descriptor@^1.0.0, is-descriptor@^1.0.2:
 561 |   version "1.0.2"
 562 |   resolved "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz#3b159746a66604b04f8c81524ba365c5f14d86ec"
 563 |   integrity sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==
 564 |   dependencies:
 565 |     is-accessor-descriptor "^1.0.0"
 566 |     is-data-descriptor "^1.0.0"
 567 |     kind-of "^6.0.2"
 568 | 
 569 | is-extendable@^0.1.0, is-extendable@^0.1.1:
 570 |   version "0.1.1"
 571 |   resolved "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
 572 |   integrity sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=
 573 | 
 574 | is-extendable@^1.0.1:
 575 |   version "1.0.1"
 576 |   resolved "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
 577 |   integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
 578 |   dependencies:
 579 |     is-plain-object "^2.0.4"
 580 | 
 581 | is-number@^3.0.0:
 582 |   version "3.0.0"
 583 |   resolved "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
 584 |   integrity sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=
 585 |   dependencies:
 586 |     kind-of "^3.0.2"
 587 | 
 588 | is-plain-object@^2.0.3, is-plain-object@^2.0.4:
 589 |   version "2.0.4"
 590 |   resolved "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
 591 |   integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
 592 |   dependencies:
 593 |     isobject "^3.0.1"
 594 | 
 595 | is-windows@^1.0.2:
 596 |   version "1.0.2"
 597 |   resolved "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
 598 |   integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
 599 | 
 600 | isarray@1.0.0:
 601 |   version "1.0.0"
 602 |   resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
 603 |   integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
 604 | 
 605 | isexe@^2.0.0:
 606 |   version "2.0.0"
 607 |   resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
 608 |   integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
 609 | 
 610 | isobject@^2.0.0:
 611 |   version "2.1.0"
 612 |   resolved "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
 613 |   integrity sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=
 614 |   dependencies:
 615 |     isarray "1.0.0"
 616 | 
 617 | isobject@^3.0.0, isobject@^3.0.1:
 618 |   version "3.0.1"
 619 |   resolved "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
 620 |   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 621 | 
 622 | json2md@^1.7.0:
 623 |   version "1.7.0"
 624 |   resolved "https://registry.npmjs.org/json2md/-/json2md-1.7.0.tgz#aaf4bad77ec8c0e623169a288add12b6493e180e"
 625 |   integrity sha512-g/lg6H3sEeyqCTqNLn8DTsqAa2wwqUI0Y7MnZ8d6wJLMJLgsMp5mBO9hPIPPuFjv/C1vYBoKAZG8TdTfcIGZCA==
 626 |   dependencies:
 627 |     indento "^1.1.7"
 628 | 
 629 | jsonfile@^4.0.0:
 630 |   version "4.0.0"
 631 |   resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
 632 |   integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=
 633 |   optionalDependencies:
 634 |     graceful-fs "^4.1.6"
 635 | 
 636 | kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
 637 |   version "3.2.2"
 638 |   resolved "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
 639 |   integrity sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=
 640 |   dependencies:
 641 |     is-buffer "^1.1.5"
 642 | 
 643 | kind-of@^4.0.0:
 644 |   version "4.0.0"
 645 |   resolved "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz#20813df3d712928b207378691a45066fae72dd57"
 646 |   integrity sha1-IIE989cSkosgc3hpGkUGb65y3Vc=
 647 |   dependencies:
 648 |     is-buffer "^1.1.5"
 649 | 
 650 | kind-of@^5.0.0:
 651 |   version "5.1.0"
 652 |   resolved "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
 653 |   integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
 654 | 
 655 | kind-of@^6.0.0, kind-of@^6.0.2:
 656 |   version "6.0.3"
 657 |   resolved "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
 658 |   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 659 | 
 660 | klaw-sync@^6.0.0:
 661 |   version "6.0.0"
 662 |   resolved "https://registry.npmjs.org/klaw-sync/-/klaw-sync-6.0.0.tgz#1fd2cfd56ebb6250181114f0a581167099c2b28c"
 663 |   integrity sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==
 664 |   dependencies:
 665 |     graceful-fs "^4.1.11"
 666 | 
 667 | map-cache@^0.2.2:
 668 |   version "0.2.2"
 669 |   resolved "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
 670 |   integrity sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=
 671 | 
 672 | map-visit@^1.0.0:
 673 |   version "1.0.0"
 674 |   resolved "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
 675 |   integrity sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=
 676 |   dependencies:
 677 |     object-visit "^1.0.0"
 678 | 
 679 | micromatch@^3.1.4:
 680 |   version "3.1.10"
 681 |   resolved "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
 682 |   integrity sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==
 683 |   dependencies:
 684 |     arr-diff "^4.0.0"
 685 |     array-unique "^0.3.2"
 686 |     braces "^2.3.1"
 687 |     define-property "^2.0.2"
 688 |     extend-shallow "^3.0.2"
 689 |     extglob "^2.0.4"
 690 |     fragment-cache "^0.2.1"
 691 |     kind-of "^6.0.2"
 692 |     nanomatch "^1.2.9"
 693 |     object.pick "^1.3.0"
 694 |     regex-not "^1.0.0"
 695 |     snapdragon "^0.8.1"
 696 |     to-regex "^3.0.2"
 697 | 
 698 | mime@^2.0.3:
 699 |   version "2.4.6"
 700 |   resolved "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz#e5b407c90db442f2beb5b162373d07b69affa4d1"
 701 |   integrity sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA==
 702 | 
 703 | minimatch@^3.0.4:
 704 |   version "3.0.4"
 705 |   resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
 706 |   integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
 707 |   dependencies:
 708 |     brace-expansion "^1.1.7"
 709 | 
 710 | minimist@^1.2.0:
 711 |   version "1.2.5"
 712 |   resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
 713 |   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 714 | 
 715 | mixin-deep@^1.2.0:
 716 |   version "1.3.2"
 717 |   resolved "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
 718 |   integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==
 719 |   dependencies:
 720 |     for-in "^1.0.2"
 721 |     is-extendable "^1.0.1"
 722 | 
 723 | mkdirp-classic@^0.5.2:
 724 |   version "0.5.3"
 725 |   resolved "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz#fa10c9115cc6d8865be221ba47ee9bed78601113"
 726 |   integrity sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==
 727 | 
 728 | ms@2.0.0:
 729 |   version "2.0.0"
 730 |   resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
 731 |   integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
 732 | 
 733 | ms@^2.1.1:
 734 |   version "2.1.2"
 735 |   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
 736 |   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 737 | 
 738 | nanomatch@^1.2.9:
 739 |   version "1.2.13"
 740 |   resolved "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
 741 |   integrity sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==
 742 |   dependencies:
 743 |     arr-diff "^4.0.0"
 744 |     array-unique "^0.3.2"
 745 |     define-property "^2.0.2"
 746 |     extend-shallow "^3.0.2"
 747 |     fragment-cache "^0.2.1"
 748 |     is-windows "^1.0.2"
 749 |     kind-of "^6.0.2"
 750 |     object.pick "^1.3.0"
 751 |     regex-not "^1.0.0"
 752 |     snapdragon "^0.8.1"
 753 |     to-regex "^3.0.1"
 754 | 
 755 | nice-try@^1.0.4:
 756 |   version "1.0.5"
 757 |   resolved "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
 758 |   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 759 | 
 760 | object-copy@^0.1.0:
 761 |   version "0.1.0"
 762 |   resolved "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
 763 |   integrity sha1-fn2Fi3gb18mRpBupde04EnVOmYw=
 764 |   dependencies:
 765 |     copy-descriptor "^0.1.0"
 766 |     define-property "^0.2.5"
 767 |     kind-of "^3.0.3"
 768 | 
 769 | object-visit@^1.0.0:
 770 |   version "1.0.1"
 771 |   resolved "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
 772 |   integrity sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=
 773 |   dependencies:
 774 |     isobject "^3.0.0"
 775 | 
 776 | object.pick@^1.3.0:
 777 |   version "1.3.0"
 778 |   resolved "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
 779 |   integrity sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=
 780 |   dependencies:
 781 |     isobject "^3.0.1"
 782 | 
 783 | once@^1.3.0, once@^1.3.1, once@^1.4.0:
 784 |   version "1.4.0"
 785 |   resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
 786 |   integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
 787 |   dependencies:
 788 |     wrappy "1"
 789 | 
 790 | os-tmpdir@~1.0.2:
 791 |   version "1.0.2"
 792 |   resolved "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
 793 |   integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
 794 | 
 795 | pascalcase@^0.1.1:
 796 |   version "0.1.1"
 797 |   resolved "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
 798 |   integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=
 799 | 
 800 | patch-package@^6.2.2:
 801 |   version "6.2.2"
 802 |   resolved "https://registry.npmjs.org/patch-package/-/patch-package-6.2.2.tgz#71d170d650c65c26556f0d0fbbb48d92b6cc5f39"
 803 |   integrity sha512-YqScVYkVcClUY0v8fF0kWOjDYopzIM8e3bj/RU1DPeEF14+dCGm6UeOYm4jvCyxqIEQ5/eJzmbWfDWnUleFNMg==
 804 |   dependencies:
 805 |     "@yarnpkg/lockfile" "^1.1.0"
 806 |     chalk "^2.4.2"
 807 |     cross-spawn "^6.0.5"
 808 |     find-yarn-workspace-root "^1.2.1"
 809 |     fs-extra "^7.0.1"
 810 |     is-ci "^2.0.0"
 811 |     klaw-sync "^6.0.0"
 812 |     minimist "^1.2.0"
 813 |     rimraf "^2.6.3"
 814 |     semver "^5.6.0"
 815 |     slash "^2.0.0"
 816 |     tmp "^0.0.33"
 817 | 
 818 | path-is-absolute@^1.0.0:
 819 |   version "1.0.1"
 820 |   resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
 821 |   integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
 822 | 
 823 | path-key@^2.0.1:
 824 |   version "2.0.1"
 825 |   resolved "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
 826 |   integrity sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=
 827 | 
 828 | pend@~1.2.0:
 829 |   version "1.2.0"
 830 |   resolved "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
 831 |   integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
 832 | 
 833 | posix-character-classes@^0.1.0:
 834 |   version "0.1.1"
 835 |   resolved "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
 836 |   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 837 | 
 838 | postinstall-postinstall@^2.1.0:
 839 |   version "2.1.0"
 840 |   resolved "https://registry.npmjs.org/postinstall-postinstall/-/postinstall-postinstall-2.1.0.tgz#4f7f77441ef539d1512c40bd04c71b06a4704ca3"
 841 |   integrity sha512-7hQX6ZlZXIoRiWNrbMQaLzUUfH+sSx39u8EJ9HYuDc1kLo9IXKWjM5RSquZN1ad5GnH8CGFM78fsAAQi3OKEEQ==
 842 | 
 843 | progress@^2.0.1:
 844 |   version "2.0.3"
 845 |   resolved "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
 846 |   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 847 | 
 848 | proxy-from-env@^1.0.0:
 849 |   version "1.1.0"
 850 |   resolved "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
 851 |   integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
 852 | 
 853 | pump@^3.0.0:
 854 |   version "3.0.0"
 855 |   resolved "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
 856 |   integrity sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==
 857 |   dependencies:
 858 |     end-of-stream "^1.1.0"
 859 |     once "^1.3.1"
 860 | 
 861 | puppeteer@^3.3.0:
 862 |   version "3.3.0"
 863 |   resolved "https://registry.npmjs.org/puppeteer/-/puppeteer-3.3.0.tgz#95839af9fdc0aa4de7e5ee073a4c0adeb9e2d3d7"
 864 |   integrity sha512-23zNqRltZ1PPoK28uRefWJ/zKb5Jhnzbbwbpcna2o5+QMn17F0khq5s1bdH3vPlyj+J36pubccR8wiNA/VE0Vw==
 865 |   dependencies:
 866 |     debug "^4.1.0"
 867 |     extract-zip "^2.0.0"
 868 |     https-proxy-agent "^4.0.0"
 869 |     mime "^2.0.3"
 870 |     progress "^2.0.1"
 871 |     proxy-from-env "^1.0.0"
 872 |     rimraf "^3.0.2"
 873 |     tar-fs "^2.0.0"
 874 |     unbzip2-stream "^1.3.3"
 875 |     ws "^7.2.3"
 876 | 
 877 | readable-stream@^3.1.1, readable-stream@^3.4.0:
 878 |   version "3.6.0"
 879 |   resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
 880 |   integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
 881 |   dependencies:
 882 |     inherits "^2.0.3"
 883 |     string_decoder "^1.1.1"
 884 |     util-deprecate "^1.0.1"
 885 | 
 886 | regex-not@^1.0.0, regex-not@^1.0.2:
 887 |   version "1.0.2"
 888 |   resolved "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
 889 |   integrity sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==
 890 |   dependencies:
 891 |     extend-shallow "^3.0.2"
 892 |     safe-regex "^1.1.0"
 893 | 
 894 | repeat-element@^1.1.2:
 895 |   version "1.1.3"
 896 |   resolved "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce"
 897 |   integrity sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==
 898 | 
 899 | repeat-string@^1.6.1:
 900 |   version "1.6.1"
 901 |   resolved "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
 902 |   integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
 903 | 
 904 | resolve-url@^0.2.1:
 905 |   version "0.2.1"
 906 |   resolved "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
 907 |   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 908 | 
 909 | ret@~0.1.10:
 910 |   version "0.1.15"
 911 |   resolved "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
 912 |   integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
 913 | 
 914 | rimraf@^2.6.3:
 915 |   version "2.7.1"
 916 |   resolved "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
 917 |   integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
 918 |   dependencies:
 919 |     glob "^7.1.3"
 920 | 
 921 | rimraf@^3.0.2:
 922 |   version "3.0.2"
 923 |   resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
 924 |   integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
 925 |   dependencies:
 926 |     glob "^7.1.3"
 927 | 
 928 | safe-buffer@~5.2.0:
 929 |   version "5.2.1"
 930 |   resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
 931 |   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 932 | 
 933 | safe-regex@^1.1.0:
 934 |   version "1.1.0"
 935 |   resolved "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
 936 |   integrity sha1-QKNmnzsHfR6UPURinhV91IAjvy4=
 937 |   dependencies:
 938 |     ret "~0.1.10"
 939 | 
 940 | semver@^5.5.0, semver@^5.6.0:
 941 |   version "5.7.1"
 942 |   resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
 943 |   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 944 | 
 945 | set-value@^2.0.0, set-value@^2.0.1:
 946 |   version "2.0.1"
 947 |   resolved "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
 948 |   integrity sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==
 949 |   dependencies:
 950 |     extend-shallow "^2.0.1"
 951 |     is-extendable "^0.1.1"
 952 |     is-plain-object "^2.0.3"
 953 |     split-string "^3.0.1"
 954 | 
 955 | shebang-command@^1.2.0:
 956 |   version "1.2.0"
 957 |   resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
 958 |   integrity sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=
 959 |   dependencies:
 960 |     shebang-regex "^1.0.0"
 961 | 
 962 | shebang-regex@^1.0.0:
 963 |   version "1.0.0"
 964 |   resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
 965 |   integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
 966 | 
 967 | slash@^2.0.0:
 968 |   version "2.0.0"
 969 |   resolved "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
 970 |   integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
 971 | 
 972 | snapdragon-node@^2.0.1:
 973 |   version "2.1.1"
 974 |   resolved "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
 975 |   integrity sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==
 976 |   dependencies:
 977 |     define-property "^1.0.0"
 978 |     isobject "^3.0.0"
 979 |     snapdragon-util "^3.0.1"
 980 | 
 981 | snapdragon-util@^3.0.1:
 982 |   version "3.0.1"
 983 |   resolved "https://registry.npmjs.org/snapdragon-util/-/snapdragon-util-3.0.1.tgz#f956479486f2acd79700693f6f7b805e45ab56e2"
 984 |   integrity sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==
 985 |   dependencies:
 986 |     kind-of "^3.2.0"
 987 | 
 988 | snapdragon@^0.8.1:
 989 |   version "0.8.2"
 990 |   resolved "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz#64922e7c565b0e14204ba1aa7d6964278d25182d"
 991 |   integrity sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==
 992 |   dependencies:
 993 |     base "^0.11.1"
 994 |     debug "^2.2.0"
 995 |     define-property "^0.2.5"
 996 |     extend-shallow "^2.0.1"
 997 |     map-cache "^0.2.2"
 998 |     source-map "^0.5.6"
 999 |     source-map-resolve "^0.5.0"
1000 |     use "^3.1.0"
1001 | 
1002 | source-map-resolve@^0.5.0:
1003 |   version "0.5.3"
1004 |   resolved "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
1005 |   integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==
1006 |   dependencies:
1007 |     atob "^2.1.2"
1008 |     decode-uri-component "^0.2.0"
1009 |     resolve-url "^0.2.1"
1010 |     source-map-url "^0.4.0"
1011 |     urix "^0.1.0"
1012 | 
1013 | source-map-url@^0.4.0:
1014 |   version "0.4.0"
1015 |   resolved "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
1016 |   integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=
1017 | 
1018 | source-map@^0.5.6:
1019 |   version "0.5.7"
1020 |   resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
1021 |   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
1022 | 
1023 | split-string@^3.0.1, split-string@^3.0.2:
1024 |   version "3.1.0"
1025 |   resolved "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
1026 |   integrity sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==
1027 |   dependencies:
1028 |     extend-shallow "^3.0.0"
1029 | 
1030 | static-extend@^0.1.1:
1031 |   version "0.1.2"
1032 |   resolved "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
1033 |   integrity sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=
1034 |   dependencies:
1035 |     define-property "^0.2.5"
1036 |     object-copy "^0.1.0"
1037 | 
1038 | string_decoder@^1.1.1:
1039 |   version "1.3.0"
1040 |   resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
1041 |   integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
1042 |   dependencies:
1043 |     safe-buffer "~5.2.0"
1044 | 
1045 | supports-color@^5.3.0:
1046 |   version "5.5.0"
1047 |   resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
1048 |   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
1049 |   dependencies:
1050 |     has-flag "^3.0.0"
1051 | 
1052 | tar-fs@^2.0.0:
1053 |   version "2.1.0"
1054 |   resolved "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.0.tgz#d1cdd121ab465ee0eb9ccde2d35049d3f3daf0d5"
1055 |   integrity sha512-9uW5iDvrIMCVpvasdFHW0wJPez0K4JnMZtsuIeDI7HyMGJNxmDZDOCQROr7lXyS+iL/QMpj07qcjGYTSdRFXUg==
1056 |   dependencies:
1057 |     chownr "^1.1.1"
1058 |     mkdirp-classic "^0.5.2"
1059 |     pump "^3.0.0"
1060 |     tar-stream "^2.0.0"
1061 | 
1062 | tar-stream@^2.0.0:
1063 |   version "2.1.2"
1064 |   resolved "https://registry.npmjs.org/tar-stream/-/tar-stream-2.1.2.tgz#6d5ef1a7e5783a95ff70b69b97455a5968dc1325"
1065 |   integrity sha512-UaF6FoJ32WqALZGOIAApXx+OdxhekNMChu6axLJR85zMMjXKWFGjbIRe+J6P4UnRGg9rAwWvbTT0oI7hD/Un7Q==
1066 |   dependencies:
1067 |     bl "^4.0.1"
1068 |     end-of-stream "^1.4.1"
1069 |     fs-constants "^1.0.0"
1070 |     inherits "^2.0.3"
1071 |     readable-stream "^3.1.1"
1072 | 
1073 | through@^2.3.8:
1074 |   version "2.3.8"
1075 |   resolved "https://registry.npmjs.org/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
1076 |   integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
1077 | 
1078 | tmp@^0.0.33:
1079 |   version "0.0.33"
1080 |   resolved "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
1081 |   integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
1082 |   dependencies:
1083 |     os-tmpdir "~1.0.2"
1084 | 
1085 | to-object-path@^0.3.0:
1086 |   version "0.3.0"
1087 |   resolved "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
1088 |   integrity sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=
1089 |   dependencies:
1090 |     kind-of "^3.0.2"
1091 | 
1092 | to-regex-range@^2.1.0:
1093 |   version "2.1.1"
1094 |   resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"
1095 |   integrity sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=
1096 |   dependencies:
1097 |     is-number "^3.0.0"
1098 |     repeat-string "^1.6.1"
1099 | 
1100 | to-regex@^3.0.1, to-regex@^3.0.2:
1101 |   version "3.0.2"
1102 |   resolved "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
1103 |   integrity sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==
1104 |   dependencies:
1105 |     define-property "^2.0.2"
1106 |     extend-shallow "^3.0.2"
1107 |     regex-not "^1.0.2"
1108 |     safe-regex "^1.1.0"
1109 | 
1110 | unbzip2-stream@^1.3.3:
1111 |   version "1.4.3"
1112 |   resolved "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz#b0da04c4371311df771cdc215e87f2130991ace7"
1113 |   integrity sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==
1114 |   dependencies:
1115 |     buffer "^5.2.1"
1116 |     through "^2.3.8"
1117 | 
1118 | union-value@^1.0.0:
1119 |   version "1.0.1"
1120 |   resolved "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"
1121 |   integrity sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==
1122 |   dependencies:
1123 |     arr-union "^3.1.0"
1124 |     get-value "^2.0.6"
1125 |     is-extendable "^0.1.1"
1126 |     set-value "^2.0.1"
1127 | 
1128 | universalify@^0.1.0:
1129 |   version "0.1.2"
1130 |   resolved "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
1131 |   integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
1132 | 
1133 | unset-value@^1.0.0:
1134 |   version "1.0.0"
1135 |   resolved "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
1136 |   integrity sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=
1137 |   dependencies:
1138 |     has-value "^0.3.1"
1139 |     isobject "^3.0.0"
1140 | 
1141 | urix@^0.1.0:
1142 |   version "0.1.0"
1143 |   resolved "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
1144 |   integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
1145 | 
1146 | use@^3.1.0:
1147 |   version "3.1.1"
1148 |   resolved "https://registry.npmjs.org/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
1149 |   integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
1150 | 
1151 | util-deprecate@^1.0.1:
1152 |   version "1.0.2"
1153 |   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
1154 |   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
1155 | 
1156 | which@^1.2.9:
1157 |   version "1.3.1"
1158 |   resolved "https://registry.npmjs.org/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
1159 |   integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
1160 |   dependencies:
1161 |     isexe "^2.0.0"
1162 | 
1163 | wrappy@1:
1164 |   version "1.0.2"
1165 |   resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
1166 |   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
1167 | 
1168 | ws@^7.2.3:
1169 |   version "7.3.0"
1170 |   resolved "https://registry.npmjs.org/ws/-/ws-7.3.0.tgz#4b2f7f219b3d3737bc1a2fbf145d825b94d38ffd"
1171 |   integrity sha512-iFtXzngZVXPGgpTlP1rBqsUK82p9tKqsWRPg5L56egiljujJT3vGAYnHANvFxBieXrTFavhzhxW52jnaWV+w2w==
1172 | 
1173 | yauzl@^2.10.0:
1174 |   version "2.10.0"
1175 |   resolved "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
1176 |   integrity sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=
1177 |   dependencies:
1178 |     buffer-crc32 "~0.2.3"
1179 |     fd-slicer "~1.1.0"
1180 | 


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