diff --git a/README.md b/README.md
index 54d1f29c..acce74a4 100644
--- a/README.md
+++ b/README.md
@@ -6,8 +6,6 @@ This site is built with [VuePress](https://vuepress.vuejs.org/). Site content is
See the [Vue Docs Writing Guide](https://v3.vuejs.org/guide/writing-guide.html) for our rules and recommendations on writing and maintaining documentation.
-> The docs are in beta: The team is currently in the midst of changes and we are not ready for additional contributions yet. All content is subject to change. If you see a problem that you would like to bring to our attention, please [create an issue](https://github.com/vuejs/docs-next/issues/new) and we will get to it when we can. You may want to wait until the content is finalized, though.
-
## Developing
1. Clone repository
diff --git a/assets/lifecycle-diagram.svg b/assets/lifecycle-diagram.svg
new file mode 100644
index 00000000..04820093
--- /dev/null
+++ b/assets/lifecycle-diagram.svg
@@ -0,0 +1,185 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="840px" height="1388px" viewBox="0 0 840 1388" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Lifecycle</title>
+ <g id="Lifecycle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <text id="*-Template-compilati" font-family="Helvetica" font-size="14" font-weight="normal" fill="#848484">
+ <tspan x="231.592773" y="1303">* Template compilation is performed ahead-of-time if using</tspan>
+ <tspan x="270.755859" y="1321.5">a build step, e.g., with single-file components.</tspan>
+ </text>
+ <g id="beforeUnmount" transform="translate(72.000000, 1056.000000)">
+ <path id="Line" d="M160,18 L160,32 L146,25 L160,18 Z M340,24 L340,26 L337,26 L337,24 L340,24 Z M333,24 L333,26 L330,26 L330,24 L333,24 Z M326,24 L326,26 L323,26 L323,24 L326,24 Z M319,24 L319,26 L316,26 L316,24 L319,24 Z M312,24 L312,26 L309,26 L309,24 L312,24 Z M305,24 L305,26 L302,26 L302,24 L305,24 Z M298,24 L298,26 L295,26 L295,24 L298,24 Z M291,24 L291,26 L288,26 L288,24 L291,24 Z M284,24 L284,26 L281,26 L281,24 L284,24 Z M277,24 L277,26 L274,26 L274,24 L277,24 Z M270,24 L270,26 L267,26 L267,24 L270,24 Z M263,24 L263,26 L260,26 L260,24 L263,24 Z M256,24 L256,26 L253,26 L253,24 L256,24 Z M249,24 L249,26 L246,26 L246,24 L249,24 Z M242,24 L242,26 L239,26 L239,24 L242,24 Z M235,24 L235,26 L232,26 L232,24 L235,24 Z M228,24 L228,26 L225,26 L225,24 L228,24 Z M221,24 L221,26 L218,26 L218,24 L221,24 Z M214,24 L214,26 L211,26 L211,24 L214,24 Z M207,24 L207,26 L204,26 L204,24 L207,24 Z M200,24 L200,26 L197,26 L197,24 L200,24 Z M193,24 L193,26 L190,26 L190,24 L193,24 Z M186,24 L186,26 L183,26 L183,24 L186,24 Z M179,24 L179,26 L176,26 L176,24 L179,24 Z M172,24 L172,26 L169,26 L169,24 L172,24 Z M165,24 L165,26 L162,26 L162,24 L165,24 Z" fill="#DB5B62" fill-rule="nonzero"></path>
+ <rect id="Rectangle" stroke="#DB5B62" stroke-width="2" x="1" y="1" width="144" height="47" rx="8"></rect>
+ <text font-family="Helvetica" font-size="14" font-weight="normal" fill="#DB5B62">
+ <tspan x="25.7485352" y="30">beforeUnmount</tspan>
+ </text>
+ </g>
+ <g id="when-app.unmount()-is-called" transform="translate(355.000000, 947.000000)">
+ <line x1="58" y1="0" x2="58" y2="40" id="Line" stroke="#9AA9B2" stroke-width="2" fill="#9AA9B2" stroke-linecap="square" stroke-dasharray="1,6"></line>
+ <path id="Line" d="M59,157 L59,159 L65,159 L58,173 L51,159 L57,159 L57,157 L59,157 Z M59,150 L59,153 L57,153 L57,150 L59,150 Z M59,143 L59,146 L57,146 L57,143 L59,143 Z M59,136 L59,139 L57,139 L57,136 L59,136 Z M59,129 L59,132 L57,132 L57,129 L59,129 Z M59,122 L59,125 L57,125 L57,122 L59,122 Z M59,115 L59,118 L57,118 L57,115 L59,115 Z M59,108 L59,111 L57,111 L57,108 L59,108 Z" fill="#9AA9B2" fill-rule="nonzero"></path>
+ <text id="when-app.unmount()-i" font-family="Helvetica" font-size="14" font-weight="normal">
+ <tspan x="39.765625" y="60" fill="#8E9EA9">when </tspan>
+ <tspan x="3.97265625" y="77" fill="#8E9EA9">app.</tspan>
+ <tspan x="31.2207031" y="77" fill="#DB5B62">unmount</tspan>
+ <tspan x="85.703125" y="77" fill="#8E9EA9">() is </tspan>
+ <tspan x="38.2104492" y="94" fill="#8E9EA9">called</tspan>
+ </text>
+ </g>
+ <g id="beforeCreate" transform="translate(72.000000, 238.000000)">
+ <path id="Line" d="M160.675538,17.036435 L160.639126,31.0363877 L146.65738,24 L160.675538,17.036435 Z M336.906975,23.4948018 L338.906968,23.5000034 L339.906965,23.5026042 L339.901763,25.5025974 L338.901767,25.4999966 L337.90177,25.4973958 L336.901773,25.494795 L336.906975,23.4948018 Z M329.906999,23.4765961 L330.906995,23.4791969 L331.906992,23.4817977 L332.906989,23.4843985 L332.901787,25.4843917 L331.90179,25.4817909 L330.901794,25.4791901 L329.901797,25.4765893 L329.906999,23.4765961 Z M322.907022,23.4583904 L323.907019,23.4609912 L325.907012,23.4661928 L325.901811,25.4661861 L323.901817,25.4609844 L322.901821,25.4583836 L322.907022,23.4583904 Z M315.907046,23.4401847 L316.907043,23.4427855 L317.907039,23.4453863 L318.907036,23.4479871 L318.901834,25.4479804 L317.901838,25.4453796 L316.901841,25.4427787 L315.901844,25.4401779 L315.907046,23.4401847 Z M308.90707,23.421979 L310.907063,23.4271806 L311.90706,23.4297815 L311.901858,25.4297747 L310.901861,25.4271739 L308.901868,25.4219723 L308.90707,23.421979 Z M301.907093,23.4037733 L302.90709,23.4063741 L303.907087,23.408975 L304.907083,23.4115758 L304.901882,25.411569 L303.901885,25.4089682 L302.901888,25.4063674 L301.901892,25.4037666 L301.907093,23.4037733 Z M294.907117,23.3855676 L295.907114,23.3881685 L296.90711,23.3907693 L297.907107,23.3933701 L297.901905,25.3933633 L296.901909,25.3907625 L295.901912,25.3881617 L294.901915,25.3855609 L294.907117,23.3855676 Z M287.907141,23.367362 L288.907137,23.3699628 L290.907131,23.3751644 L290.901929,25.3751576 L288.901936,25.369956 L287.901939,25.3673552 L287.907141,23.367362 Z M280.907164,23.3491563 L281.907161,23.3517571 L282.907158,23.3543579 L283.907154,23.3569587 L283.901953,25.3569519 L282.901956,25.3543511 L281.901959,25.3517503 L280.901963,25.3491495 L280.907164,23.3491563 Z M273.907188,23.3309506 L275.907181,23.3361522 L276.907178,23.338753 L276.901976,25.3387463 L275.90198,25.3361455 L273.901986,25.3309438 L273.907188,23.3309506 Z M266.907212,23.3127449 L267.907208,23.3153457 L268.907205,23.3179465 L269.907202,23.3205473 L269.902,25.3205406 L268.902003,25.3179398 L267.902007,25.315339 L266.90201,25.3127381 L266.907212,23.3127449 Z M259.907235,23.2945392 L260.907232,23.29714 L261.907229,23.2997408 L262.907225,23.3023417 L262.902024,25.3023349 L261.902027,25.2997341 L260.90203,25.2971333 L259.902034,25.2945325 L259.907235,23.2945392 Z M252.907259,23.2763335 L253.907256,23.2789343 L255.907249,23.284136 L255.902047,25.2841292 L253.902054,25.2789276 L252.902058,25.2763268 L252.907259,23.2763335 Z M245.907283,23.2581278 L246.907279,23.2607287 L247.907276,23.2633295 L248.907273,23.2659303 L248.902071,25.2659235 L247.902074,25.2633227 L246.902078,25.2607219 L245.902081,25.2581211 L245.907283,23.2581278 Z M238.907306,23.2399222 L240.9073,23.2451238 L241.907296,23.2477246 L241.902095,25.2477178 L240.902098,25.245117 L238.902105,25.2399154 L238.907306,23.2399222 Z M231.90733,23.2217165 L232.907327,23.2243173 L233.907323,23.2269181 L234.90732,23.2295189 L234.902118,25.2295122 L233.902122,25.2269113 L232.902125,25.2243105 L231.902129,25.2217097 L231.90733,23.2217165 Z M224.907354,23.2035108 L225.90735,23.2061116 L226.907347,23.2087124 L227.907344,23.2113132 L227.902142,25.2113065 L226.902145,25.2087057 L225.902149,25.2061048 L224.902152,25.203504 L224.907354,23.2035108 Z M217.907378,23.1853051 L218.907374,23.1879059 L220.907367,23.1931075 L220.902166,25.1931008 L218.902173,25.1878992 L217.902176,25.1852983 L217.907378,23.1853051 Z M210.907401,23.1670994 L211.907398,23.1697002 L212.907394,23.172301 L213.907391,23.1749019 L213.902189,25.1748951 L212.902193,25.1722943 L211.902196,25.1696935 L210.9022,25.1670927 L210.907401,23.1670994 Z M203.907425,23.1488937 L205.907418,23.1540954 L206.907415,23.1566962 L206.902213,25.1566894 L205.902216,25.1540886 L203.902223,25.148887 L203.907425,23.1488937 Z M196.907449,23.1306881 L197.907445,23.1332889 L198.907442,23.1358897 L199.907438,23.1384905 L199.902237,25.1384837 L198.90224,25.1358829 L197.902244,25.1332821 L196.902247,25.1306813 L196.907449,23.1306881 Z M189.907472,23.1124824 L190.907469,23.1150832 L191.907465,23.117684 L192.907462,23.1202848 L192.90226,25.120278 L191.902264,25.1176772 L190.902267,25.1150764 L189.902271,25.1124756 L189.907472,23.1124824 Z M182.907496,23.0942767 L183.907493,23.0968775 L185.907486,23.1020791 L185.902284,25.1020724 L183.902291,25.0968707 L182.902294,25.0942699 L182.907496,23.0942767 Z M175.90752,23.076071 L176.907516,23.0786718 L177.907513,23.0812726 L178.907509,23.0838734 L178.902308,25.0838667 L177.902311,25.0812659 L176.902315,25.078665 L175.902318,25.0760642 L175.90752,23.076071 Z M168.907543,23.0578653 L170.907536,23.0630669 L171.907533,23.0656677 L171.902331,25.065661 L170.902335,25.0630602 L168.902342,25.0578585 L168.907543,23.0578653 Z M161.907567,23.0396596 L162.907564,23.0422604 L163.90756,23.0448612 L164.907557,23.0474621 L164.902355,25.0474553 L163.902359,25.0448545 L162.902362,25.0422537 L161.902365,25.0396529 L161.907567,23.0396596 Z" fill="#DB5B62" fill-rule="nonzero"></path>
+ <rect id="Rectangle" stroke="#DB5B62" stroke-width="2" x="1" y="1" width="144" height="47" rx="8"></rect>
+ <text font-family="Helvetica" font-size="14" font-weight="normal" fill="#DB5B62">
+ <tspan x="32.6416016" y="30">beforeCreate</tspan>
+ </text>
+ </g>
+ <g id="createApp" transform="translate(282.000000, 64.000000)">
+ <path id="Line" d="M132,65 L132,100 L138,100 L131,114 L124,100 L130,100 L130,65 L132,65 Z" fill="#9AA9B2" fill-rule="nonzero"></path>
+ <rect id="Rectangle" stroke="#2F679A" fill="#3E6B94" x="-0.5" y="-0.5" width="259" height="66" rx="8"></rect>
+ <text id="app-=-Vue.createApp(" font-family="Helvetica" font-size="14" font-weight="normal">
+ <tspan x="37.5551758" y="28" fill="#FFFFFF">app = Vue.</tspan>
+ <tspan x="105.155762" y="28" fill="#FFB196">createApp</tspan>
+ <tspan x="168.976074" y="28" fill="#FFFFFF">(</tspan>
+ <tspan x="173.638184" y="28" fill="#39DD95">options</tspan>
+ <tspan x="218.782715" y="28" fill="#FFFFFF">)</tspan>
+ <tspan x="87.3105469" y="46.5" fill="#FFFFFF">app.</tspan>
+ <tspan x="114.558594" y="46.5" fill="#FFB196">mount</tspan>
+ <tspan x="153.46875" y="46.5" fill="#FFFFFF">(</tspan>
+ <tspan x="158.130859" y="46.5" fill="#39DD95">el</tspan>
+ <tspan x="169.027344" y="46.5" fill="#FFFFFF">)</tspan>
+ </text>
+ </g>
+ <g id=""Has-template"-switch" transform="translate(169.000000, 416.000000)">
+ <path id="Line" d="M103,51 L103,104 L109,104 L102,118 L95,104 L101,104 L101,51 L103,51 Z" fill="#9AA9B2" fill-rule="nonzero"></path>
+ <path id="Line" d="M385,51 L385,104 L391,104 L384,118 L377,104 L383,104 L383,51 L385,51 Z" fill="#9AA9B2" fill-rule="nonzero"></path>
+ <path d="M384.025081,51.0038835 L102.025081,51.0038751" id="Line-2" stroke="#9AA9B2" stroke-width="2" fill="#9AA9B2" stroke-linecap="square"></path>
+ <g id="Group-3" transform="translate(243.000000, 233.000000) scale(1, -1) translate(-243.000000, -233.000000) translate(101.000000, 176.000000)" fill="#9AA9B2">
+ <line x1="1" y1="70" x2="1" y2="113" id="Line" stroke="#9AA9B2" stroke-width="2" stroke-linecap="square"></line>
+ <line x1="283" y1="71" x2="283" y2="113" id="Line" stroke="#9AA9B2" stroke-width="2" stroke-linecap="square"></line>
+ <path id="Line" d="M143,0 L150,14 L144,14 L144,69 L142,69 L142,14 L136,14 L143,0 Z" fill-rule="nonzero"></path>
+ <line x1="143.174144" y1="-71.4828355" x2="141.100671" y2="210.509542" id="Line" stroke="#9AA9B2" stroke-width="2" stroke-linecap="square" transform="translate(142.327274, 69.187466) rotate(89.578715) translate(-142.327274, -69.187466) "></line>
+ </g>
+ <g id="Compile-template" transform="translate(0.000000, 119.000000)">
+ <rect id="Rectangle" stroke="#23AC70" fill="#3AB881" x="-0.5" y="-0.5" width="207" height="58" rx="8"></rect>
+ <text id="Compile-template-int" font-family="Helvetica" font-size="14" font-weight="normal">
+ <tspan x="49.6950918" y="23.9183673" fill="#FFFFFF">Compile template</tspan>
+ <tspan x="39.5676504" y="42.4183673" fill="#FFFFFF">into render function </tspan>
+ <tspan x="163.311791" y="42.4183673" fill="#F6DA72">*</tspan>
+ </text>
+ </g>
+ <g id="Compile-el's-outerHTML" transform="translate(282.000000, 119.000000)">
+ <rect id="Rectangle" stroke="#23AC70" fill="#3AB881" x="-0.5" y="-0.5" width="207" height="58" rx="8"></rect>
+ <text id="Compile-el’s-innerHT" font-family="Helvetica" font-size="14" font-weight="normal">
+ <tspan x="29.0155147" y="23.9183673" fill="#FFFFFF">Compile el’s innerHTML</tspan>
+ <tspan x="62.7269404" y="42.4183673" fill="#FFFFFF">as template </tspan>
+ <tspan x="138.988659" y="42.4183673" fill="#F6DA72">*</tspan>
+ </text>
+ </g>
+ <g id="Has-template-option" transform="translate(149.000000, 0.000000)">
+ <path d="M95,-0.567494371 L191.057097,51 L95,102.567494 L-1.05709736,51 L95,-0.567494371 Z" id="Path" stroke="#F2781E" fill="#FF8228"></path>
+ <text id="Has-“template”-optio" font-family="Helvetica" font-size="14" font-weight="normal" fill="#FFFFFF">
+ <tspan x="82.0517578" y="37.7272727">Has</tspan>
+ <tspan x="38.0795898" y="56.2272727">“template” option?</tspan>
+ </text>
+ </g>
+ <text id="YES" font-family="Helvetica" font-size="14" font-weight="normal" fill="#8E9EA9">
+ <tspan x="61.6621094" y="69">YE</tspan>
+ <tspan x="66.3310547" y="86">S</tspan>
+ </text>
+ <text id="NO" font-family="Helvetica" font-size="14" font-weight="normal" fill="#8E9EA9">
+ <tspan x="405.5" y="69">NO</tspan>
+ </text>
+ </g>
+ <g id="created" transform="translate(72.000000, 354.000000)">
+ <path id="Line" d="M160,17 L160,31 L146,24 L160,17 Z M340,23 L340,25 L337,25 L337,23 L340,23 Z M333,23 L333,25 L330,25 L330,23 L333,23 Z M326,23 L326,25 L323,25 L323,23 L326,23 Z M319,23 L319,25 L316,25 L316,23 L319,23 Z M312,23 L312,25 L309,25 L309,23 L312,23 Z M305,23 L305,25 L302,25 L302,23 L305,23 Z M298,23 L298,25 L295,25 L295,23 L298,23 Z M291,23 L291,25 L288,25 L288,23 L291,23 Z M284,23 L284,25 L281,25 L281,23 L284,23 Z M277,23 L277,25 L274,25 L274,23 L277,23 Z M270,23 L270,25 L267,25 L267,23 L270,23 Z M263,23 L263,25 L260,25 L260,23 L263,23 Z M256,23 L256,25 L253,25 L253,23 L256,23 Z M249,23 L249,25 L246,25 L246,23 L249,23 Z M242,23 L242,25 L239,25 L239,23 L242,23 Z M235,23 L235,25 L232,25 L232,23 L235,23 Z M228,23 L228,25 L225,25 L225,23 L228,23 Z M221,23 L221,25 L218,25 L218,23 L221,23 Z M214,23 L214,25 L211,25 L211,23 L214,23 Z M207,23 L207,25 L204,25 L204,23 L207,23 Z M200,23 L200,25 L197,25 L197,23 L200,23 Z M193,23 L193,25 L190,25 L190,23 L193,23 Z M186,23 L186,25 L183,25 L183,23 L186,23 Z M179,23 L179,25 L176,25 L176,23 L179,23 Z M172,23 L172,25 L169,25 L169,23 L172,23 Z M165,23 L165,25 L162,25 L162,23 L165,23 Z" fill="#DB5B62" fill-rule="nonzero"></path>
+ <rect id="Rectangle" stroke="#DB5B62" stroke-width="2" x="1" y="1" width="144" height="47" rx="8"></rect>
+ <text font-family="Helvetica" font-size="14" font-weight="normal" fill="#DB5B62">
+ <tspan x="50.6518555" y="30">created</tspan>
+ </text>
+ </g>
+ <g id="beforeMount" transform="translate(72.000000, 640.000000)">
+ <path id="Line" d="M160.675538,18.036435 L160.639126,32.0363877 L146.65738,25 L160.675538,18.036435 Z M336.906975,24.4948018 L338.906968,24.5000034 L339.906965,24.5026042 L339.901763,26.5025974 L338.901767,26.4999966 L337.90177,26.4973958 L336.901773,26.494795 L336.906975,24.4948018 Z M329.906999,24.4765961 L330.906995,24.4791969 L331.906992,24.4817977 L332.906989,24.4843985 L332.901787,26.4843917 L331.90179,26.4817909 L330.901794,26.4791901 L329.901797,26.4765893 L329.906999,24.4765961 Z M322.907022,24.4583904 L323.907019,24.4609912 L325.907012,24.4661928 L325.901811,26.4661861 L323.901817,26.4609844 L322.901821,26.4583836 L322.907022,24.4583904 Z M315.907046,24.4401847 L316.907043,24.4427855 L317.907039,24.4453863 L318.907036,24.4479871 L318.901834,26.4479804 L317.901838,26.4453796 L316.901841,26.4427787 L315.901844,26.4401779 L315.907046,24.4401847 Z M308.90707,24.421979 L310.907063,24.4271806 L311.90706,24.4297815 L311.901858,26.4297747 L310.901861,26.4271739 L308.901868,26.4219723 L308.90707,24.421979 Z M301.907093,24.4037733 L302.90709,24.4063741 L303.907087,24.408975 L304.907083,24.4115758 L304.901882,26.411569 L303.901885,26.4089682 L302.901888,26.4063674 L301.901892,26.4037666 L301.907093,24.4037733 Z M294.907117,24.3855676 L295.907114,24.3881685 L296.90711,24.3907693 L297.907107,24.3933701 L297.901905,26.3933633 L296.901909,26.3907625 L295.901912,26.3881617 L294.901915,26.3855609 L294.907117,24.3855676 Z M287.907141,24.367362 L288.907137,24.3699628 L290.907131,24.3751644 L290.901929,26.3751576 L288.901936,26.369956 L287.901939,26.3673552 L287.907141,24.367362 Z M280.907164,24.3491563 L281.907161,24.3517571 L282.907158,24.3543579 L283.907154,24.3569587 L283.901953,26.3569519 L282.901956,26.3543511 L281.901959,26.3517503 L280.901963,26.3491495 L280.907164,24.3491563 Z M273.907188,24.3309506 L275.907181,24.3361522 L276.907178,24.338753 L276.901976,26.3387463 L275.90198,26.3361455 L273.901986,26.3309438 L273.907188,24.3309506 Z M266.907212,24.3127449 L267.907208,24.3153457 L268.907205,24.3179465 L269.907202,24.3205473 L269.902,26.3205406 L268.902003,26.3179398 L267.902007,26.315339 L266.90201,26.3127381 L266.907212,24.3127449 Z M259.907235,24.2945392 L260.907232,24.29714 L261.907229,24.2997408 L262.907225,24.3023417 L262.902024,26.3023349 L261.902027,26.2997341 L260.90203,26.2971333 L259.902034,26.2945325 L259.907235,24.2945392 Z M252.907259,24.2763335 L253.907256,24.2789343 L255.907249,24.284136 L255.902047,26.2841292 L253.902054,26.2789276 L252.902058,26.2763268 L252.907259,24.2763335 Z M245.907283,24.2581278 L246.907279,24.2607287 L247.907276,24.2633295 L248.907273,24.2659303 L248.902071,26.2659235 L247.902074,26.2633227 L246.902078,26.2607219 L245.902081,26.2581211 L245.907283,24.2581278 Z M238.907306,24.2399222 L240.9073,24.2451238 L241.907296,24.2477246 L241.902095,26.2477178 L240.902098,26.245117 L238.902105,26.2399154 L238.907306,24.2399222 Z M231.90733,24.2217165 L232.907327,24.2243173 L233.907323,24.2269181 L234.90732,24.2295189 L234.902118,26.2295122 L233.902122,26.2269113 L232.902125,26.2243105 L231.902129,26.2217097 L231.90733,24.2217165 Z M224.907354,24.2035108 L225.90735,24.2061116 L226.907347,24.2087124 L227.907344,24.2113132 L227.902142,26.2113065 L226.902145,26.2087057 L225.902149,26.2061048 L224.902152,26.203504 L224.907354,24.2035108 Z M217.907378,24.1853051 L218.907374,24.1879059 L220.907367,24.1931075 L220.902166,26.1931008 L218.902173,26.1878992 L217.902176,26.1852983 L217.907378,24.1853051 Z M210.907401,24.1670994 L211.907398,24.1697002 L212.907394,24.172301 L213.907391,24.1749019 L213.902189,26.1748951 L212.902193,26.1722943 L211.902196,26.1696935 L210.9022,26.1670927 L210.907401,24.1670994 Z M203.907425,24.1488937 L205.907418,24.1540954 L206.907415,24.1566962 L206.902213,26.1566894 L205.902216,26.1540886 L203.902223,26.148887 L203.907425,24.1488937 Z M196.907449,24.1306881 L197.907445,24.1332889 L198.907442,24.1358897 L199.907438,24.1384905 L199.902237,26.1384837 L198.90224,26.1358829 L197.902244,26.1332821 L196.902247,26.1306813 L196.907449,24.1306881 Z M189.907472,24.1124824 L190.907469,24.1150832 L191.907465,24.117684 L192.907462,24.1202848 L192.90226,26.120278 L191.902264,26.1176772 L190.902267,26.1150764 L189.902271,26.1124756 L189.907472,24.1124824 Z M182.907496,24.0942767 L183.907493,24.0968775 L185.907486,24.1020791 L185.902284,26.1020724 L183.902291,26.0968707 L182.902294,26.0942699 L182.907496,24.0942767 Z M175.90752,24.076071 L176.907516,24.0786718 L177.907513,24.0812726 L178.907509,24.0838734 L178.902308,26.0838667 L177.902311,26.0812659 L176.902315,26.078665 L175.902318,26.0760642 L175.90752,24.076071 Z M168.907543,24.0578653 L170.907536,24.0630669 L171.907533,24.0656677 L171.902331,26.065661 L170.902335,26.0630602 L168.902342,26.0578585 L168.907543,24.0578653 Z M161.907567,24.0396596 L162.907564,24.0422604 L163.90756,24.0448612 L164.907557,24.0474621 L164.902355,26.0474553 L163.902359,26.0448545 L162.902362,26.0422537 L161.902365,26.0396529 L161.907567,24.0396596 Z" fill="#DB5B62" fill-rule="nonzero"></path>
+ <rect id="Rectangle" stroke="#DB5B62" stroke-width="2" x="1" y="1" width="144" height="47" rx="8"></rect>
+ <text font-family="Helvetica" font-size="14" font-weight="normal" fill="#DB5B62">
+ <tspan x="34.6967773" y="30">beforeMount</tspan>
+ </text>
+ </g>
+ <g id="mounted" transform="translate(72.000000, 780.000000)">
+ <path id="Line" d="M160,18 L160,32 L146,25 L160,18 Z M340,24 L340,26 L337,26 L337,24 L340,24 Z M333,24 L333,26 L330,26 L330,24 L333,24 Z M326,24 L326,26 L323,26 L323,24 L326,24 Z M319,24 L319,26 L316,26 L316,24 L319,24 Z M312,24 L312,26 L309,26 L309,24 L312,24 Z M305,24 L305,26 L302,26 L302,24 L305,24 Z M298,24 L298,26 L295,26 L295,24 L298,24 Z M291,24 L291,26 L288,26 L288,24 L291,24 Z M284,24 L284,26 L281,26 L281,24 L284,24 Z M277,24 L277,26 L274,26 L274,24 L277,24 Z M270,24 L270,26 L267,26 L267,24 L270,24 Z M263,24 L263,26 L260,26 L260,24 L263,24 Z M256,24 L256,26 L253,26 L253,24 L256,24 Z M249,24 L249,26 L246,26 L246,24 L249,24 Z M242,24 L242,26 L239,26 L239,24 L242,24 Z M235,24 L235,26 L232,26 L232,24 L235,24 Z M228,24 L228,26 L225,26 L225,24 L228,24 Z M221,24 L221,26 L218,26 L218,24 L221,24 Z M214,24 L214,26 L211,26 L211,24 L214,24 Z M207,24 L207,26 L204,26 L204,24 L207,24 Z M200,24 L200,26 L197,26 L197,24 L200,24 Z M193,24 L193,26 L190,26 L190,24 L193,24 Z M186,24 L186,26 L183,26 L183,24 L186,24 Z M179,24 L179,26 L176,26 L176,24 L179,24 Z M172,24 L172,26 L169,26 L169,24 L172,24 Z M165,24 L165,26 L162,26 L162,24 L165,24 Z" fill="#DB5B62" fill-rule="nonzero"></path>
+ <rect id="Rectangle" stroke="#DB5B62" stroke-width="2" x="1" y="1" width="144" height="47" rx="8"></rect>
+ <text font-family="Helvetica" font-size="14" font-weight="normal" fill="#DB5B62">
+ <tspan x="46.7587891" y="30">mounted</tspan>
+ </text>
+ </g>
+ <g id="unmounted" transform="translate(72.000000, 1150.000000)">
+ <path id="Line" d="M160,18 L160,24 L161,24 L161,26 L160,26 L160,32 L146,25 L160,18 Z M287,24 L287,26 L284,26 L284,24 L287,24 Z M280,24 L280,26 L277,26 L277,24 L280,24 Z M273,24 L273,26 L270,26 L270,24 L273,24 Z M266,24 L266,26 L263,26 L263,24 L266,24 Z M259,24 L259,26 L256,26 L256,24 L259,24 Z M252,24 L252,26 L249,26 L249,24 L252,24 Z M245,24 L245,26 L242,26 L242,24 L245,24 Z M238,24 L238,26 L235,26 L235,24 L238,24 Z M231,24 L231,26 L228,26 L228,24 L231,24 Z M224,24 L224,26 L221,26 L221,24 L224,24 Z M217,24 L217,26 L214,26 L214,24 L217,24 Z M210,24 L210,26 L207,26 L207,24 L210,24 Z M203,24 L203,26 L200,26 L200,24 L203,24 Z M196,24 L196,26 L193,26 L193,24 L196,24 Z M189,24 L189,26 L186,26 L186,24 L189,24 Z M182,24 L182,26 L179,26 L179,24 L182,24 Z M175,24 L175,26 L172,26 L172,24 L175,24 Z M168,24 L168,26 L165,26 L165,24 L168,24 Z" fill="#DB5B62" fill-rule="nonzero"></path>
+ <rect id="Rectangle" stroke="#DB5B62" stroke-width="2" x="1" y="1" width="144" height="47" rx="8"></rect>
+ <text font-family="Helvetica" font-size="14" font-weight="normal" fill="#DB5B62">
+ <tspan x="38.9726562" y="30">unmounted</tspan>
+ </text>
+ </g>
+ <g id="Data-change-events" transform="translate(431.000000, 749.000000)">
+ <g id="beforeUpdate" transform="translate(168.000000, 0.000000)">
+ <path id="Line" d="M2.23021437,85.5046052 L3.52379767,87.0299387 L2.76113093,87.6767304 L1.23579744,88.9703137 L-0.0577858581,87.4449802 L0.704880886,86.7981885 L2.23021437,85.5046052 Z M7.56888158,80.9770637 L8.86246488,82.5023972 L8.09979814,83.1491888 L7.33713139,83.7959805 L6.57446465,84.4427721 L5.28088135,82.9174386 L6.80621484,81.6238553 L7.56888158,80.9770637 Z M12.9075488,76.4495221 L14.2011321,77.9748556 L12.6757986,79.2684389 L11.9131319,79.9152306 L10.6195486,78.3898971 L11.3822153,77.7431054 L12.144882,77.0963138 L12.9075488,76.4495221 Z M18.246216,71.9219806 L19.5397993,73.4473141 L18.7771325,74.0941057 L18.0144658,74.7408974 L17.2517991,75.387689 L15.9582158,73.8623555 L16.7208825,73.2155639 L18.246216,71.9219806 Z M23.5848832,67.394439 L24.8784665,68.9197725 L24.1157998,69.5665642 L23.353133,70.2133558 L22.5904663,70.8601475 L21.296883,69.334814 L22.0595497,68.6880223 L22.8222165,68.0412307 L23.5848832,67.394439 Z M28.9235504,62.8668975 L30.2171337,64.392231 L29.454467,65.0390226 L28.6918002,65.6858143 L27.9291335,66.3326059 L26.6355502,64.8072724 L27.3982169,64.1604808 L28.1608837,63.5136891 L28.9235504,62.8668975 Z M48,48 L41.8502071,62.3937503 L32.795124,51.7164159 L48,48 Z M34.2622176,58.3393559 L35.5558009,59.8646894 L34.7931342,60.5114811 L33.2678007,61.8050644 L31.9742174,60.2797309 L32.7368841,59.6329392 L33.4995509,58.9861476 L34.2622176,58.3393559 Z" fill="#DB5B62" fill-rule="nonzero"></path>
+ <rect id="Rectangle" stroke="#DB5B62" stroke-width="2" x="21" y="1" width="144.126761" height="46.1842105" rx="8"></rect>
+ <text font-family="Helvetica" font-size="14" font-weight="normal" fill="#DB5B62">
+ <tspan x="51.1007166" y="28.6776316">beforeUpdate</tspan>
+ </text>
+ </g>
+ <g id="updated" transform="translate(171.000000, 214.000000)">
+ <path id="Line-3" d="M40.8590548,25.6024727 L47,40 L31.797411,36.2742398 L40.8590548,25.6024727 Z M32.4824354,26.3609281 L33.2447044,27.0081884 L34.0069735,27.6554487 L34.7692426,28.3027089 L33.4747221,29.8272471 L32.712453,29.1799868 L31.9501839,28.5327266 L31.1879148,27.8854663 L32.4824354,26.3609281 Z M27.1465518,21.8301063 L27.9088209,22.4773665 L28.67109,23.1246268 L29.433359,23.7718871 L28.1388385,25.2964252 L27.3765694,24.649165 L26.6143003,24.0019047 L25.8520313,23.3546444 L27.1465518,21.8301063 Z M21.8106683,17.2992844 L22.5729373,17.9465447 L23.3352064,18.5938049 L24.0974755,19.2410652 L22.802955,20.7656034 L21.2784168,19.4710828 L20.5161477,18.8238226 L21.8106683,17.2992844 Z M16.4747847,12.7684626 L17.2370538,13.4157228 L17.9993229,14.0629831 L18.7615919,14.7102433 L17.4670714,16.2347815 L16.7048023,15.5875212 L15.1802642,14.2930007 L16.4747847,12.7684626 Z M11.1389011,8.23764069 L11.9011702,8.88490096 L12.6634393,9.53216122 L13.4257084,10.1794215 L12.1311879,11.7039596 L11.3689188,11.0566994 L9.84438062,9.76217885 L11.1389011,8.23764069 Z M5.8030176,3.70681883 L6.56528667,4.3540791 L8.08982483,5.64859963 L6.7953043,7.17313779 L6.03303522,6.52587752 L5.27076614,5.87861725 L4.50849706,5.23135699 L5.8030176,3.70681883 Z M0.467134044,-0.824003029 L1.22940312,-0.176742763 L1.9916722,0.470517503 L2.75394128,1.11777777 L1.45942075,2.64231593 L0.69715167,1.99505566 L-0.0651174085,1.34779539 L-0.827386487,0.700535129 L0.467134044,-0.824003029 Z" fill="#DB5B62" fill-rule="nonzero"></path>
+ <path d="M154.535714,41 C156.468711,41 158.218711,41.7835017 159.485462,43.0502525 C160.752213,44.3170034 161.535714,46.0670034 161.535714,48 L161.535714,48 L161.535714,83.1842105 C161.535714,85.1172072 160.752213,86.8672072 159.485462,88.133958 C158.218711,89.4007088 156.468711,90.1842105 154.535714,90.1842105 L154.535714,90.1842105 L25,90.1842105 C23.0670034,90.1842105 21.3170034,89.4007088 20.0502525,88.133958 C18.7835017,86.8672072 18,85.1172072 18,83.1842105 L18,83.1842105 L18,48 C18,46.0670034 18.7835017,44.3170034 20.0502525,43.0502525 C21.3170034,41.7835017 23.0670034,41 25,41 L25,41 Z" id="Rectangle" stroke="#DB5B62" stroke-width="2"></path>
+ <text font-family="Helvetica" font-size="14" font-weight="normal" fill="#DB5B62">
+ <tspan x="65.1324916" y="70">updated</tspan>
+ </text>
+ </g>
+ <path d="M145.784964,70 C152.466616,73.9569081 158.494513,78.8318794 163.795696,84.4111866 L163.092386,83.6753293 C167.44898,87.934196 171.29415,92.6529384 174.61292,97.7220251 C185.306671,113.181345 190.366211,132.026453 189.979405,151.003263 C190.048841,168.049014 185.666434,185.257055 176.096665,200.476481 C168.411812,212.698202 158.380429,222.576058 146.945473,229.893707 L145.875211,230.56899 L145.181736,230.99535 C140.291914,233.986352 135.183198,236.499286 129.925226,238.533164 L128.94999,238.905537 L128.669961,239.008582 C119.873695,242.284488 110.748947,244.195354 101.595813,244.789826 L101.338005,244.803797 L100.974601,244.827846 L100.019191,244.879254 L99.310322,244.910915 C98.4829308,244.947513 97.6544815,244.972266 96.8254036,244.986285 C86.3389815,245.16359 75.7519796,243.623549 65.506865,240.264645 C60.1862878,238.528952 54.9849742,236.312992 49.9703815,233.614639 L49.7124145,233.473795 C49.4011841,233.306592 49.0912803,233.136344 48.7821154,232.964239 L47.7917094,232.407205 L47.600641,232.295413 C41.4368633,228.762052 35.6203945,224.505824 30.2859096,219.549779 C24.5883135,214.279287 19.6510294,208.410897 15.5113357,202.106101 C12.1434062,196.992771 9.32117944,191.619987 7.04777091,186.071474 L6.66878326,185.135659 L6.55607392,184.846976 C2.36081839,174.232128 0.210505736,163.10909 0.0174344074,152.017809 C-0.166423858,142.464383 1.10225612,132.824765 3.90176019,123.43769 L4.29224304,122.161665 C5.95355079,116.841251 8.10029723,111.633209 10.7344851,106.605538 L10.9612327,106.177607 C11.1003816,105.913197 11.2420382,105.649247 11.3850494,105.385814 C17.8065479,93.517239 26.8861804,82.8366551 38.4737203,74.2864996 L39.2862205,73.6934456 L41.9054981,71.7572242" id="Path" stroke="#8999A4" stroke-width="2" stroke-dasharray="4"></path>
+ <g id="Virtual-DOM-re-rendered" transform="translate(88.000000, 114.000000)">
+ <rect id="Rectangle" stroke="#23AC70" fill="#3AB881" x="20.5" y="-0.5" width="139.833333" height="78" rx="8"></rect>
+ <text id="Virtual-DOM-re-rende" font-family="Helvetica" font-size="14" font-weight="normal" fill="#FFFFFF">
+ <tspan x="53.0058594" y="25.3333333">Virtual DOM</tspan>
+ <tspan x="54.4243164" y="43.8333333">re-rendered</tspan>
+ <tspan x="60.2519531" y="62.3333333">and patch</tspan>
+ </text>
+ </g>
+ <text id="when-data-change" font-family="Helvetica" font-size="14" font-weight="normal" fill="#8E9EA9">
+ <tspan x="62.1967773" y="58">when data </tspan>
+ <tspan x="71.534668" y="75">change</tspan>
+ </text>
+ </g>
+ <g id="Init-events" transform="translate(316.000000, 179.000000)">
+ <path id="Line" d="M98,57 L98,103 L104,103 L97,117 L90,103 L96,103 L96,57 L98,57 Z" fill="#9AA9B2" fill-rule="nonzero"></path>
+ <rect id="Rectangle" stroke="#23AC70" fill="#3AB881" x="-0.5" y="-0.5" width="192" height="58" rx="8"></rect>
+ <text id="Init-events-&-lifecy" font-family="Helvetica" font-size="14" font-weight="normal" fill="#FFFFFF">
+ <tspan x="87.1621094" y="24">Init </tspan>
+ <tspan x="42.4208984" y="42.5">events & lifecycle</tspan>
+ </text>
+ </g>
+ <g id="Init-injections" transform="translate(316.000000, 297.000000)">
+ <path id="Line" d="M98,57 L98,104 L104,104 L97,118 L90,104 L96,104 L96,57 L98,57 Z" fill="#9AA9B2" fill-rule="nonzero"></path>
+ <rect id="Rectangle" stroke="#23AC70" fill="#3AB881" x="-0.5" y="-0.5" width="192" height="58" rx="8"></rect>
+ <text id="Init-injections-&-re" font-family="Helvetica" font-size="14" font-weight="normal" fill="#FFFFFF">
+ <tspan x="87.1621094" y="24">Init </tspan>
+ <tspan x="31.1416016" y="42.5">injections & reactivity </tspan>
+ </text>
+ </g>
+ <g id="Create-app.$el" transform="translate(317.000000, 707.000000)">
+ <path id="Line" d="M96.4936726,56.3990486 L96.5043882,57.3989912 L97.314,132.982 L103.31401,132.918214 L96.4644301,146.992419 L89.3148141,133.068232 L95.314,133.004 L94.504503,57.4204223 L94.4937874,56.4204798 L96.4936726,56.3990486 Z" fill="#9AA9B2" fill-rule="nonzero"></path>
+ <rect id="Rectangle" stroke="#23AC70" fill="#3AB881" x="-0.5" y="-0.5" width="192" height="58" rx="8"></rect>
+ <text id="Create-app.$el-and-r" font-family="Helvetica" font-size="14" font-weight="normal" fill="#FFFFFF">
+ <tspan x="36.4555664" y="24">Create app.$el and</tspan>
+ <tspan x="41.1484375" y="42.5">replace “el” with it</tspan>
+ </text>
+ </g>
+ <g id="Mounted" transform="translate(367.000000, 855.000000)">
+ <circle id="Oval" stroke="#DC424C" fill="#DB5860" cx="46" cy="46" r="46.5"></circle>
+ <text font-family="Helvetica" font-size="14" font-weight="normal" fill="#FFFFFF">
+ <tspan x="18.7587891" y="51">Mounted</tspan>
+ </text>
+ </g>
+ <g id="Unmounted" transform="translate(360.000000, 1121.000000)">
+ <circle id="Oval" stroke="#DC424C" fill="#DB5860" cx="53" cy="53" r="53.5"></circle>
+ <text font-family="Helvetica" font-size="14" font-weight="normal" fill="#FFFFFF">
+ <tspan x="17.3105469" y="58">Unmounted</tspan>
+ </text>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/assets/scoped-slot-diagram.svg b/assets/scoped-slot-diagram.svg
new file mode 100644
index 00000000..d5b8ae3a
--- /dev/null
+++ b/assets/scoped-slot-diagram.svg
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="611px" height="615px" viewBox="0 0 611 615" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Scoped Slot</title>
+ <defs>
+ <rect id="path-1" x="58" y="54" width="499" height="507" rx="8"></rect>
+ <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-2" y="-2" width="503" height="511">
+ <rect x="56" y="52" width="503" height="511" fill="white"></rect>
+ <use xlink:href="#path-1" fill="black"></use>
+ </mask>
+ <rect id="path-3" x="0" y="0" width="319" height="129" rx="8"></rect>
+ <mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-2" y="-2" width="323" height="133">
+ <rect x="-2" y="-2" width="323" height="133" fill="white"></rect>
+ <use xlink:href="#path-3" fill="black"></use>
+ </mask>
+ <mask id="mask-6" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-2" y="-2" width="323" height="133">
+ <rect x="-2" y="-2" width="323" height="133" fill="white"></rect>
+ <use xlink:href="#path-3" fill="black"></use>
+ </mask>
+ </defs>
+ <g id="Diagrams" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="Scoped-Slot">
+ <use id="Rectangle" stroke="#23AC70" mask="url(#mask-2)" stroke-width="4" stroke-dasharray="4,4" xlink:href="#path-1"></use>
+ <g id="TodoList-Component" transform="translate(105.000000, 319.000000)">
+ <rect id="Rectangle" fill="#FF8228" x="0" y="0" width="380" height="212" rx="8"></rect>
+ <g id="Slot" transform="translate(31.000000, 57.000000)">
+ <mask id="mask-5" fill="white">
+ <use xlink:href="#path-3"></use>
+ </mask>
+ <g id="Rectangle-Copy" stroke="#FFFFFF" mask="url(#mask-4)" stroke-width="4" stroke-dasharray="2,3">
+ <use mask="url(#mask-6)" xlink:href="#path-3"></use>
+ </g>
+ <rect id="Rectangle-Copy-2" fill="#E56000" mask="url(#mask-5)" x="0" y="43" width="319" height="100"></rect>
+ </g>
+ <text id="TodoList" font-family="Helvetica" font-size="14" font-weight="normal" fill="#FFFFFF">
+ <tspan x="159.927734" y="31">TodoList</tspan>
+ </text>
+ <text id="Slot" font-family="Helvetica" font-size="14" font-weight="normal" fill="#FFFFFF">
+ <tspan x="173.937988" y="86">Slot</tspan>
+ </text>
+ </g>
+ <text id="Parent-Component" font-family="Helvetica" font-size="16" font-weight="normal" fill="#23AC70">
+ <tspan x="216.347656" y="90">Parent Component</tspan>
+ </text>
+ <g id="HTML" transform="translate(105.000000, 115.000000)">
+ <rect id="Rectangle" fill="#3E6B94" x="0" y="0" width="380" height="173" rx="2"></rect>
+ <text id="<todo-list>-<templat" font-family="Helvetica" font-size="14" font-weight="normal">
+ <tspan x="20" y="27" fill="#FFFFFF"><todo-list></tspan>
+ <tspan x="20" y="47" fill="#FFFFFF"> <template v-slot:default="</tspan>
+ <tspan x="186.058594" y="47" fill="#39DD95">slotProps</tspan>
+ <tspan x="244.416992" y="47" fill="#FFFFFF">"></tspan>
+ <tspan x="20" y="67" fill="#FFFFFF"> <span></tspan>
+ <tspan x="20" y="87" fill="#FFFFFF"> {{ </tspan>
+ <tspan x="56.5791016" y="87" fill="#39DD95">slotProps</tspan>
+ <tspan x="114.9375" y="87" fill="#FFFFFF">.item }}</tspan>
+ <tspan x="20" y="107" fill="#FFFFFF"> <span></tspan>
+ <tspan x="20" y="127" fill="#FFFFFF"> </template></tspan>
+ <tspan x="20" y="147" fill="#FFFFFF"></todo-list></tspan>
+ </text>
+ <text id="<li-v-for="item-in-i" font-family="Helvetica" font-size="14" font-weight="normal" fill="#FFFFFF">
+ <tspan x="38" y="331"> <li v-for="item in items"></tspan>
+ <tspan x="38" y="351"> <slot :item="item"></slot></tspan>
+ <tspan x="38" y="371"> </li></tspan>
+ </text>
+ </g>
+ <g id="Arrow" transform="translate(351.000000, 172.000000)">
+ <path id="Line" d="M14,22 L14,28 L49,28 L49,30 L14,30 L14,36 L0,29 L14,22 Z" fill="#FFFFFF" fill-rule="nonzero"></path>
+ <line x1="48" y1="0" x2="48" y2="29" id="Line" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square"></line>
+ </g>
+ <g id="Arrow" transform="translate(463.000000, 310.500000) scale(1, -1) translate(-463.000000, -310.500000) translate(404.000000, 157.000000)">
+ <line x1="115" y1="306" x2="82" y2="306" id="Line" stroke="#9AA9B2" stroke-width="2" stroke-linecap="square"></line>
+ <path id="Line-Copy-2" d="M70,299 L70,305 L81,305 L81,307 L70,307 L70,313 L56,306 L70,299 Z" fill="#FFFFFF" fill-rule="nonzero"></path>
+ <line x1="117" y1="1" x2="82" y2="1" id="Line" stroke="#9AA9B2" stroke-width="2" stroke-linecap="square"></line>
+ <line x1="80" y1="1" x2="0" y2="1" id="Line-Copy" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square"></line>
+ <line x1="117" y1="1" x2="117" y2="306" id="Line" stroke="#9AA9B2" stroke-width="2" stroke-linecap="square"></line>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/assets/slot-render-diagram.svg b/assets/slot-render-diagram.svg
new file mode 100644
index 00000000..eeac02d7
--- /dev/null
+++ b/assets/slot-render-diagram.svg
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="447px" height="498px" viewBox="0 0 447 498" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Slot Render Scope</title>
+ <defs>
+ <rect id="path-1" x="0" y="0" width="236" height="105" rx="8"></rect>
+ <rect id="path-3" x="58" y="54" width="329" height="390" rx="8"></rect>
+ <mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-2" y="-2" width="333" height="394">
+ <rect x="56" y="52" width="333" height="394" fill="white"></rect>
+ <use xlink:href="#path-3" fill="black"></use>
+ </mask>
+ </defs>
+ <g id="Diagrams" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="Slot-Render-Scope">
+ <g id="TodoButton-Component" transform="translate(105.000000, 312.000000)">
+ <mask id="mask-2" fill="white">
+ <use xlink:href="#path-1"></use>
+ </mask>
+ <use id="Rectangle" fill="#FF8228" xlink:href="#path-1"></use>
+ <rect id="Rectangle" stroke="#FFFFFF" stroke-width="2" mask="url(#mask-2)" x="72" y="49" width="92" height="36" rx="3"></rect>
+ <text id="Data" mask="url(#mask-2)" font-family="Helvetica" font-size="14" font-weight="normal" fill="#FFFFFF">
+ <tspan x="103.713867" y="72">Data</tspan>
+ </text>
+ <text id="TodoButton" mask="url(#mask-2)" font-family="Helvetica" font-size="14" font-weight="normal" fill="#FFFFFF">
+ <tspan x="80.0830078" y="31">TodoButton</tspan>
+ </text>
+ </g>
+ <use id="Rectangle" stroke="#23AC70" mask="url(#mask-4)" stroke-width="4" stroke-dasharray="4,4" xlink:href="#path-3"></use>
+ <text id="Parent-Component" font-family="Helvetica" font-size="16" font-weight="normal" fill="#23AC70">
+ <tspan x="155.347656" y="90">Parent Component</tspan>
+ </text>
+ <g id="HTML" transform="translate(105.000000, 193.000000)">
+ <rect id="Rectangle" fill="#3E6B94" x="0" y="0" width="236" height="88" rx="2"></rect>
+ <text id="<todo-button>-Delete" font-family="Helvetica" font-size="14" font-weight="normal">
+ <tspan x="24" y="26" fill="#FFFFFF"><todo-button></tspan>
+ <tspan x="24" y="46" fill="#FFFFFF"> Delete </tspan>
+ <tspan x="76.1376953" y="46" fill="#39DD95">{{ item }}</tspan>
+ <tspan x="129.068359" y="46" fill="#FFFFFF"></tspan>
+ <tspan x="24" y="66" fill="#FFFFFF"></todo-button></tspan>
+ </text>
+ </g>
+ <g id="Data" transform="translate(105.000000, 110.000000)">
+ <rect id="Rectangle" fill="#21BD79" x="0" y="0" width="236" height="71" rx="8"></rect>
+ <text font-family="Helvetica" font-size="14" font-weight="normal" fill="#FFFFFF">
+ <tspan x="102.713867" y="28">Data</tspan>
+ </text>
+ <text id="{-item:-'First-Item'" font-family="Helvetica" font-size="14" font-weight="normal" fill="#FFFFFF">
+ <tspan x="60.4824219" y="53">{ </tspan>
+ <tspan x="69.0478516" y="53">item: 'First Item' }</tspan>
+ </text>
+ </g>
+ <g id="Arrow" transform="translate(297.000000, 158.000000)">
+ <line x1="71" y1="78" x2="45" y2="78" id="Line" stroke="#9AA9B2" stroke-width="2" stroke-linecap="square"></line>
+ <path id="Line-Copy" d="M14,71 L14,77 L44,77 L44,79 L14,79 L14,85 L0,78 L14,71 Z" fill="#FFFFFF" fill-rule="nonzero"></path>
+ <line x1="70" y1="1" x2="45" y2="1" id="Line" stroke="#9AA9B2" stroke-width="2" stroke-linecap="square"></line>
+ <line x1="43" y1="1" x2="21" y2="1" id="Line" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square"></line>
+ <line x1="71" y1="1" x2="71" y2="78" id="Line" stroke="#9AA9B2" stroke-width="2" stroke-linecap="square"></line>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/package.json b/package.json
index a13643cb..f7e49320 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,12 @@
{
"devDependencies": {
- "node-sass": "^4.13.1",
+ "@vuepress/plugin-pwa": "^1.5.4",
+ "sass": "^1.32.0",
"sass-loader": "^8.0.2",
"vuepress": "^1.5.4"
},
"scripts": {
+ "dev": "yarn serve",
"serve": "vuepress dev src",
"build": "vuepress build src"
},
@@ -12,7 +14,7 @@
"@docsearch/css": "^1.0.0-alpha.27",
"@docsearch/js": "^1.0.0-alpha.27",
"algoliasearch": "^4.4.0",
- "axios": "^0.19.1",
+ "axios": "^0.21.1",
"intersection-observer": "^0.11.0",
"showdown": "^1.9.1"
}
diff --git a/src/.vuepress/components/MigrationBadges.vue b/src/.vuepress/components/MigrationBadges.vue
index ddc69363..02218143 100644
--- a/src/.vuepress/components/MigrationBadges.vue
+++ b/src/.vuepress/components/MigrationBadges.vue
@@ -1,5 +1,10 @@
<script>
-const validBadges = ['new', 'breaking', 'removed', 'updated']
+const validBadges = {
+ new: 'new',
+ breaking: 'breaking',
+ removed: 'removed',
+ updated: 'updated'
+}
export default {
props: {
@@ -7,9 +12,14 @@ export default {
type: Array,
default: () => [],
validator(value) {
- return value.every(badge => validBadges.includes(badge))
+ return value.every(badge => Object.keys(validBadges).includes(badge))
}
}
+ },
+ data() {
+ return {
+ validBadges
+ }
}
}
</script>
@@ -21,7 +31,7 @@ export default {
:class="`migration-badge is-${badgeType}`"
:key="`badge-type-${badgeType}`"
>
- {{ badgeType }}
+ {{ validBadges[badgeType] }}
</span>
</div>
</template>
diff --git a/src/.vuepress/components/VideoLesson.vue b/src/.vuepress/components/VideoLesson.vue
new file mode 100644
index 00000000..e18004e5
--- /dev/null
+++ b/src/.vuepress/components/VideoLesson.vue
@@ -0,0 +1,50 @@
+<script>
+export default {
+ props: {
+ href: {
+ type: String,
+ required: true
+ },
+ title: {
+ type: String,
+ default: ''
+ }
+ }
+}
+</script>
+
+<template>
+ <section class="video-lesson">
+ <a :href="href" target="_blank" rel="sponsored noopener" :title="title">
+ <slot></slot>
+ </a>
+ </section>
+</template>
+
+<style lang="scss">
+.video-lesson {
+ display: flex;
+ align-items: center;
+ background-color: #e7ecf3;
+ padding: 1em 1.25em;
+ border-radius: 2px;
+ color: #486491;
+ position: relative;
+ margin: 24px 0;
+
+ a {
+ color: #486491;
+ position: relative;
+ padding-left: 16px;
+ }
+
+ &::before {
+ content: '\f144';
+ font-family: 'FontAwesome';
+ font-size: 2em;
+ display: inline-block;
+ color: #73abfe;
+ vertical-align: middle;
+ }
+}
+</style>
diff --git a/src/.vuepress/components/common/codepen-snippet.vue b/src/.vuepress/components/common/codepen-snippet.vue
new file mode 100644
index 00000000..ed23e3a4
--- /dev/null
+++ b/src/.vuepress/components/common/codepen-snippet.vue
@@ -0,0 +1,104 @@
+<template>
+ <p
+ class="codepen"
+ :data-theme-id="theme"
+ :data-preview="preview || null"
+ :data-editable="editable || null"
+ :data-height="height"
+ :data-default-tab="tab"
+ :data-user="user"
+ :data-slug-hash="slug"
+ :data-pen-title="title"
+ :data-embed-version="version"
+ :style="`height: ${height}px`">
+ <span>See the Pen <a :href="href">{{ title }}</a>
+ by {{ name || user }} (<a :href="`https://codepen.io/${user}`">@{{user}}</a>)
+ on <a href="https://codepen.io">CodePen</a>.</span>
+ </p>
+</template>
+
+<script>
+export default {
+ props: {
+ title: {
+ type: String,
+ default: null,
+ required: true,
+ },
+
+ slug: {
+ type: String,
+ default: null,
+ required: true,
+ },
+
+ tab: {
+ type: String,
+ default: 'result',
+ },
+
+ team: {
+ type: Boolean,
+ default: true,
+ },
+
+ user: {
+ type: String,
+ default: 'Vue',
+ },
+
+ name: {
+ type: String,
+ default: null,
+ },
+
+ height: {
+ type: Number,
+ default: 300,
+ },
+
+ theme: {
+ type: String,
+ default: '39028',
+ },
+
+ preview: {
+ type: Boolean,
+ default: true,
+ },
+
+ editable: {
+ type: Boolean,
+ default: true,
+ },
+
+ version: {
+ type: String,
+ default: null,
+ }
+ },
+ mounted() {
+ const codepenScript = document.createElement('script')
+ codepenScript.setAttribute('src', 'https://static.codepen.io/assets/embed/ei.js')
+ codepenScript.async = true
+ this.$el.appendChild(codepenScript)
+ },
+ computed: {
+ href() {
+ return `https://codepen.io/${this.team ? 'team' : ''}${this.user}/pen/${this.slug}`
+ }
+ },
+}
+</script>
+
+<style lang="scss">
+.codepen {
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 2px solid;
+ margin: 1em 0;
+ padding: 1em;
+}
+</style>
diff --git a/src/.vuepress/components/common/vuemastery-video-modal.vue b/src/.vuepress/components/common/vuemastery-video-modal.vue
index e511c1ea..9c121625 100644
--- a/src/.vuepress/components/common/vuemastery-video-modal.vue
+++ b/src/.vuepress/components/common/vuemastery-video-modal.vue
@@ -1,14 +1,18 @@
<template>
<div class="overlay" v-show="isOpen">
<div ref="modal" class="modal" :class="{ open: isOpen }">
- <div class="video-space" style="padding: 56.25% 0 0 0; position: relative;">
+ <div
+ class="video-space"
+ style="padding: 56.25% 0 0 0; position: relative;"
+ >
<iframe
- src="https://player.vimeo.com/video/247494684?dnt=1"
+ src="https://player.vimeo.com/video/455611549?dnt=1"
style="height: 100%; left: 0; position: absolute; top: 0; width: 100%; margin: 0"
frameborder="0"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
+ allow="autoplay"
ref="videoIframe"
></iframe>
</div>
@@ -20,14 +24,15 @@
target="_blank"
rel="sponsored noopener"
title="Vue.js Courses on Vue Mastery"
- >Vue Mastery</a>.
- Watch Vue Mastery’s free
+ >Vue Mastery</a
+ >. Watch Vue Mastery’s free
<a
- href="https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/"
+ href="https://www.vuemastery.com/courses/intro-to-vue-3/intro-to-vue3"
target="_blank"
rel="sponsored noopener"
title="Vue.js Courses on Vue Mastery"
- >Intro to Vue course</a>.
+ >Intro to Vue course</a
+ >.
</p>
</div>
</div>
@@ -47,7 +52,7 @@ export default {
}),
methods: {
- initVideoModal () {
+ initVideoModal() {
const modalButton = document.querySelector(this.triggerSelector)
const player = new Vimeo.Player(this.$refs.videoIframe)
@@ -59,7 +64,11 @@ export default {
})
document.body.addEventListener('click', event => {
- if (this.isOpen && event.target !== modalButton && !this.$refs.modal.contains(event.target)) {
+ if (
+ this.isOpen &&
+ event.target !== modalButton &&
+ !this.$refs.modal.contains(event.target)
+ ) {
this.isOpen = false
document.body.classList.remove('stop-scroll')
player.pause()
@@ -68,7 +77,7 @@ export default {
}
},
- mounted () {
+ mounted() {
if (typeof window !== 'undefined') {
this.initVideoModal()
}
@@ -77,7 +86,7 @@ export default {
</script>
<style lang="scss">
-@import "@theme/styles/_settings.scss";
+@import '@theme/styles/_settings.scss';
.modal {
box-sizing: border-box;
diff --git a/src/.vuepress/components/community/team/members.js b/src/.vuepress/components/community/team/members.js
index 65f1fa50..c4a69770 100644
--- a/src/.vuepress/components/community/team/members.js
+++ b/src/.vuepress/components/community/team/members.js
@@ -109,14 +109,14 @@ const members = [
languages: ['hi', 'en'],
work: {
role: 'Software Engineer',
- org: 'Myntra',
- orgUrl: 'https://www.myntra.com/'
+ org: 'Grammarly',
+ orgUrl: 'https://grammarly.com/'
},
github: 'znck',
twitter: 'znck0',
- reposOfficial: ['rollup-plugin-vue', 'vue-issue-helper'],
- reposPersonal: ['keynote', 'bootstrap-for-vue', 'vue-interop'],
- links: ['https://znck.me', 'https://www.codementor.io/znck']
+ reposOfficial: ['rollup-plugin-vue', 'vue-next'],
+ reposPersonal: ['vue-developer-experience', 'prop-types', 'grammarly'],
+ links: ['https://znck.me']
},
{
name: 'Linusborg',
@@ -252,7 +252,7 @@ const members = [
languages: ['uk', 'ru', 'en'],
reposOfficial: ['vuejs.org', 'vue-cli'],
work: {
- role: 'Senior Frontend Engineer',
+ role: 'Staff Frontend Engineer',
org: 'GitLab',
orgUrl: 'https://gitlab.com/'
},
@@ -299,6 +299,16 @@ const members = [
twitter: 'KiaKing85',
reposOfficial: ['vuex'],
reposPersonal: ['vuex-orm/*']
+ },
+ {
+ name: 'Anthony Fu',
+ city: 'Taipei, Taiwan',
+ languages: ['zh', 'en'],
+ github: 'antfu',
+ twitter: 'antfu7',
+ reposOfficial: ['composition-api'],
+ reposPersonal: ['vueuse', 'vue-demi', 'vue-reactivity/*'],
+ links: ['https://antfu.me/']
}
])
)
diff --git a/src/.vuepress/components/guide/contributing/translations-data.js b/src/.vuepress/components/guide/contributing/translations-data.js
new file mode 100644
index 00000000..405530b0
--- /dev/null
+++ b/src/.vuepress/components/guide/contributing/translations-data.js
@@ -0,0 +1,22 @@
+export const labels = {
+ language: 'Language',
+ github: 'GitHub',
+ lastCommit: 'Last commit',
+ last90Days: 'Last 90 days',
+ loadDetails: 'Load Details',
+ commits: 'commits',
+ loading: 'Loading...'
+}
+
+// Repos are in alphabetical order by the language code
+// You may need to clear your sessionStorage when adding a new item to this list
+export const repos = [
+ { lang: 'en-us', owner: 'vuejs', repo: 'docs-next', branch: 'master', url: 'https://v3.vuejs.org/' },
+ { lang: 'fr', owner: 'demahom18', repo: 'docs-next', branch: 'master', url: 'https://vue3-fr.netlify.app' },
+ { lang: 'id', owner: 'vuejs-id', repo: 'docs-next', branch: 'indonesian' },
+ { lang: 'ja', owner: 'vuejs-jp', repo: 'ja.vuejs.org', branch: 'lang-ja', url: 'https://v3.ja.vuejs.org/' },
+ { lang: 'ko', owner: 'vuejs-kr', repo: 'docs-next', branch: 'rootKoKr', url: 'https://v3.ko.vuejs.org/' },
+ { lang: 'pt-br', owner: 'vuejs-br', repo: 'docs-next', branch: 'master', url: 'https://vuejsbr-docs-next.netlify.app/' },
+ { lang: 'ru', owner: 'translation-gang', repo: 'docs-next', branch: 'master', url: 'https://v3.ru.vuejs.org/' },
+ { lang: 'zh-cn', owner: 'vuejs', repo: 'docs-next-zh-cn', branch: 'master', url: 'https://v3.cn.vuejs.org/' }
+]
diff --git a/src/.vuepress/components/guide/contributing/translations.vue b/src/.vuepress/components/guide/contributing/translations.vue
new file mode 100644
index 00000000..ad041b11
--- /dev/null
+++ b/src/.vuepress/components/guide/contributing/translations.vue
@@ -0,0 +1,206 @@
+<template>
+ <table>
+ <thead>
+ <tr>
+ <th>{{ labels.language }}</th>
+ <th>{{ labels.github }}</th>
+ <th>{{ labels.lastCommit }}</th>
+ <th>{{ labels.last90Days }}</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr v-for="({ lang, owner, repo, url, count, date }, index) in merged">
+ <td>
+ <a v-if="url" :href="url" target="_blank">
+ {{ lang }} <OutboundLink />
+ </a>
+ <template v-else>
+ {{ lang }}
+ </template>
+ </td>
+ <td>
+ <a :href="`https://github.com/${owner}/${repo}/`" target="_blank">{{ owner }}/{{ repo }} <OutboundLink /></a>
+ </td>
+ <template v-if="showLoadButton">
+ <td v-if="index === 0" colspan="2" :rowspan="merged.length" class="load-cell">
+ <button @click="load">{{ labels.loadDetails }}</button>
+ </td>
+ </template>
+ <template v-else>
+ <td>{{ date }}</td>
+ <td>
+ {{ count }}{{ count === 100 ? '+' : '' }}
+ <template v-if="typeof count === 'number'">
+ {{ labels.commits }}
+ </template>
+ </td>
+ </template>
+ </tr>
+ </tbody>
+ </table>
+</template>
+
+<script>
+import { labels, repos } from './translations-data.js'
+
+const getLastDate = async ({ owner, repo, branch }) => {
+ const response = await fetch(`https://api.github.com/repos/${owner}/${repo}/branches/${branch}`)
+
+ const data = await response.json()
+
+ const dateTime = data.commit.commit.committer.date
+
+ return dateTime.split('T')[0]
+}
+
+const DATE_90_DAYS_AGO = new Date(Date.now() - 90 * 24 * 60 * 60 * 1000).toJSON().replace(/\.\d*/, '')
+
+const commitCount = async ({ owner, repo }) => {
+ const response = await fetch(`https://api.github.com/repos/${owner}/${repo}/commits?since=${DATE_90_DAYS_AGO}&per_page=100`)
+
+ const data = await response.json()
+
+ return data.length
+}
+
+export default {
+ name: 'translations',
+
+ data () {
+ const dates = {}
+
+ for (const { lang } of repos) {
+ dates[lang] = null
+ }
+
+ return {
+ showLoadButton: true,
+ dates,
+ counts: { ...dates },
+ labels,
+ repos
+ }
+ },
+
+ computed: {
+ merged () {
+ return this.repos.map(repo => ({
+ ...repo,
+ date: this.dates[repo.lang],
+ count: this.counts[repo.lang]
+ }))
+ }
+ },
+
+ mounted () {
+ let stats = null
+
+ try {
+ stats = JSON.parse(sessionStorage.getItem('translation-stats'))
+ } catch {
+ }
+
+ if (!stats) {
+ return
+ }
+
+ const { date, counts, dates } = stats
+
+ if (!date || date + 3 * 60 * 60 * 1000 < Date.now()) {
+ return
+ }
+
+ this.dates = dates
+ this.counts = counts
+ this.showLoadButton = false
+ },
+
+ methods: {
+ async load () {
+ this.showLoadButton = false
+
+ await Promise.all(this.repos.map(this.loadRepo))
+
+ this.saveStats()
+ },
+
+ async loadRepo (repo) {
+ await this.loadLastCommit(repo)
+
+ return this.loadCommitCount(repo)
+ },
+
+ async loadLastCommit (repo) {
+ const { lang } = repo
+
+ this.dates[lang] = labels.loading
+
+ let date = '-'
+
+ try {
+ date = await getLastDate(repo)
+ } catch {
+ }
+
+ this.dates[lang] = date
+ },
+
+ async loadCommitCount (repo) {
+ const { lang } = repo
+
+ const date = this.dates[lang]
+ let count = 0
+
+ if (date === '-') {
+ count = '-'
+ } else if (date > DATE_90_DAYS_AGO) {
+ this.counts[lang] = labels.loading
+
+ try {
+ count = await commitCount(repo)
+ } catch {
+ count = '-'
+ }
+ }
+
+ this.counts[lang] = count
+ },
+
+ saveStats () {
+ const data = {
+ date: Date.now(),
+ counts: this.counts,
+ dates: this.dates
+ }
+
+ // GitHub limits request rates, so we store the stats in sessionStorage
+ sessionStorage.setItem('translation-stats', JSON.stringify(data))
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@theme/styles/_settings.scss";
+
+.load-cell {
+ background: #f6f8fa;
+ text-align: center;
+
+ button {
+ padding: 4px 20px;
+ height: 50px;
+ border-radius: 9999px;
+ font-size: 1.05em;
+ font-weight: 600;
+ letter-spacing: 0.1em;
+ min-width: 8em;
+ color: #fff;
+ background-color: $green;
+ box-sizing: border-box;
+ border: 1px solid currentColor;
+ appearance: none;
+ cursor: pointer;
+ }
+}
+</style>
diff --git a/src/.vuepress/components/search/index.vue b/src/.vuepress/components/search/index.vue
new file mode 100644
index 00000000..170154c4
--- /dev/null
+++ b/src/.vuepress/components/search/index.vue
@@ -0,0 +1,258 @@
+<template>
+ <main id="search-page" class="DocSearch">
+
+ <p v-if="!isAlgoliaConfigured">
+ This search page is not available at the moment, please use the search box in the top navigation bar.
+ </p>
+
+ <template v-else>
+
+ <form role="search" class="DocSearch-Form" @submit="visitFirstResult">
+
+ <label class="DocSearch-MagnifierLabel" for="docsearch-input" id="docsearch-label">
+ <svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20">
+ <path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path>
+ </svg>
+ </label>
+
+ <input class="DocSearch-Input" id="docsearch-input" v-model="search" :placeholder="searchPlaceholder">
+
+ </form>
+
+ <div class="search-footer">
+
+ <p>
+ <template v-if="totalResults">
+ <strong>{{ totalResults }} results</strong> found in {{ queryTime }}ms
+ </template>
+ </p>
+
+ <div class="DocSearch-Logo">
+ <a href="https://www.algolia.com/docsearch" target="_blank" rel="noopener noreferrer">
+ <span class="DocSearch-Label">Search by</span>
+ <svg width="77" height="19">
+ <path d="M2.5067 0h14.0245c1.384.001 2.5058 1.1205 2.5068 2.5017V16.5c-.0014 1.3808-1.1232 2.4995-2.5068 2.5H2.5067C1.1232 18.9995.0014 17.8808 0 16.5V2.4958A2.495 2.495 0 01.735.7294 2.505 2.505 0 012.5068 0zM37.95 15.0695c-3.7068.0168-3.7068-2.986-3.7068-3.4634L34.2372.3576 36.498 0v11.1794c0 .2715 0 1.9889 1.452 1.994v1.8961zm-9.1666-1.8388c.694 0 1.2086-.0397 1.5678-.1088v-2.2934a5.3639 5.3639 0 00-1.3303-.1679 4.8283 4.8283 0 00-.758.0582 2.2845 2.2845 0 00-.688.2024c-.2029.0979-.371.2362-.4919.4142-.1268.1788-.185.2826-.185.5533 0 .5297.185.8359.5205 1.0375.3355.2016.7928.3053 1.365.3053v-.0008zm-.1969-8.1817c.7463 0 1.3768.092 1.8856.2767.5088.1838.9195.4428 1.2204.7717.3068.334.5147.7777.6423 1.251.1327.4723.196.991.196 1.5603v5.798c-.5235.1036-1.05.192-1.5787.2649-.7048.1037-1.4976.156-2.3774.156-.5832 0-1.1215-.0582-1.6016-.167a3.385 3.385 0 01-1.2432-.5364 2.6034 2.6034 0 01-.8037-.9565c-.191-.3922-.29-.9447-.29-1.5208 0-.5533.11-.905.3246-1.2863a2.7351 2.7351 0 01.8849-.9329c.376-.242.8029-.415 1.2948-.5187a7.4517 7.4517 0 011.5381-.156 7.1162 7.1162 0 011.6667.2024V8.886c0-.259-.0296-.5061-.093-.7372a1.5847 1.5847 0 00-.3245-.6158 1.5079 1.5079 0 00-.6119-.4158 2.6788 2.6788 0 00-.966-.173c-.5206 0-.9948.0634-1.4283.1384a6.5481 6.5481 0 00-1.065.259l-.2712-1.849c.2831-.0986.7048-.1964 1.2491-.2943a9.2979 9.2979 0 011.752-.1501v.0008zm44.6597 8.1193c.6947 0 1.2086-.0405 1.567-.1097v-2.2942a5.3743 5.3743 0 00-1.3303-.1679c-.2485 0-.503.0177-.7573.0582a2.2853 2.2853 0 00-.688.2024 1.2333 1.2333 0 00-.4918.4142c-.1268.1788-.1843.2826-.1843.5533 0 .5297.1843.8359.5198 1.0375.3414.2066.7927.3053 1.365.3053v.0009zm-.191-8.1767c.7463 0 1.3768.0912 1.8856.2759.5087.1847.9195.4436 1.2204.7717.3.329.5147.7786.6414 1.251a5.7248 5.7248 0 01.197 1.562v5.7972c-.3466.0742-.874.1602-1.5788.2648-.7049.1038-1.4976.1552-2.3774.1552-.5832 0-1.1215-.0573-1.6016-.167a3.385 3.385 0 01-1.2432-.5356 2.6034 2.6034 0 01-.8038-.9565c-.191-.3922-.2898-.9447-.2898-1.5216 0-.5533.1098-.905.3245-1.2854a2.7373 2.7373 0 01.8849-.9338c.376-.2412.8029-.4141 1.2947-.5178a7.4545 7.4545 0 012.325-.1097c.2781.0287.5672.081.879.156v-.3686a2.7781 2.7781 0 00-.092-.738 1.5788 1.5788 0 00-.3246-.6166 1.5079 1.5079 0 00-.612-.415 2.6797 2.6797 0 00-.966-.1729c-.5205 0-.9947.0633-1.4282.1384a6.5608 6.5608 0 00-1.065.259l-.2712-1.8498c.283-.0979.7048-.1957 1.2491-.2935a9.8597 9.8597 0 011.752-.1494zm-6.79-1.072c-.7576.001-1.373-.6103-1.3759-1.3664 0-.755.6128-1.3664 1.376-1.3664.764 0 1.3775.6115 1.3775 1.3664s-.6195 1.3664-1.3776 1.3664zm1.1393 11.1507h-2.2726V5.3409l2.2734-.3568v10.0845l-.0008.0017zm-3.984 0c-3.707.0168-3.707-2.986-3.707-3.4642L59.7069.3576 61.9685 0v11.1794c0 .2715 0 1.9889 1.452 1.994V15.0703zm-7.3512-4.979c0-.975-.2138-1.7873-.6305-2.3516-.4167-.571-.9998-.852-1.747-.852-.7454 0-1.3302.281-1.7452.852-.4166.5702-.6195 1.3765-.6195 2.3516 0 .9851.208 1.6473.6254 2.2183.4158.576.9998.8587 1.7461.8587.7454 0 1.3303-.2885 1.747-.8595.4158-.5761.6237-1.2315.6237-2.2184v.0009zm2.3132-.006c0 .7609-.1099 1.3361-.3356 1.9654a4.654 4.654 0 01-.9533 1.6076A4.214 4.214 0 0155.613 14.69c-.579.2412-1.4697.3795-1.9143.3795-.4462-.005-1.3303-.1324-1.9033-.3795a4.307 4.307 0 01-1.474-1.0316c-.4115-.4445-.7293-.9801-.9609-1.6076a5.3423 5.3423 0 01-.3465-1.9653c0-.7608.104-1.493.3356-2.1155a4.683 4.683 0 01.9719-1.5958 4.3383 4.3383 0 011.479-1.0257c.5739-.242 1.2043-.3567 1.8864-.3567.6829 0 1.3125.1197 1.8906.3567a4.1245 4.1245 0 011.4816 1.0257 4.7587 4.7587 0 01.9592 1.5958c.2426.6225.3643 1.3547.3643 2.1155zm-17.0198 0c0 .9448.208 1.9932.6238 2.431.4166.4386.955.6579 1.6142.6579.3584 0 .6998-.0523 1.0176-.1502.3186-.0978.5721-.2134.775-.3517V7.0784a8.8706 8.8706 0 00-1.4926-.1906c-.8206-.0236-1.4452.312-1.8847.8468-.4335.5365-.6533 1.476-.6533 2.3516v-.0008zm6.2863 4.4485c0 1.5385-.3938 2.662-1.1866 3.3773-.791.7136-2.0005 1.0712-3.6308 1.0712-.5958 0-1.834-.1156-2.8228-.334l.3643-1.7865c.8282.173 1.9202.2193 2.4932.2193.9077 0 1.555-.1847 1.943-.5533.388-.3686.578-.916.578-1.643v-.3687a6.8289 6.8289 0 01-.8848.3349c-.3634.1096-.786.167-1.261.167-.6246 0-1.1917-.0979-1.7055-.2944a3.5554 3.5554 0 01-1.3244-.8645c-.3642-.3796-.6541-.8579-.8561-1.4289-.2028-.571-.3068-1.59-.3068-2.339 0-.7034.1099-1.5856.3245-2.1735.2198-.5871.5316-1.0949.9542-1.515.4167-.42.9255-.743 1.5213-.98a5.5923 5.5923 0 012.052-.3855c.7353 0 1.4114.092 2.0707.2024.6592.1088 1.2204.2236 1.6776.35v8.945-.0008zM11.5026 4.2418v-.6511c-.0005-.4553-.3704-.8241-.8266-.8241H8.749c-.4561 0-.826.3688-.8265.824v.669c0 .0742.0693.1264.1445.1096a6.0346 6.0346 0 011.6768-.2362 6.125 6.125 0 011.6202.2185.1116.1116 0 00.1386-.1097zm-5.2806.852l-.3296-.3282a.8266.8266 0 00-1.168 0l-.393.3922a.8199.8199 0 000 1.164l.3237.323c.0524.0515.1268.0397.1733-.0117.191-.259.3989-.507.6305-.7372.2374-.2362.48-.4437.7462-.6335.0575-.0354.0634-.1155.017-.1687zm3.5159 2.069v2.818c0 .081.0879.1392.1622.0987l2.5102-1.2964c.0574-.0287.0752-.0987.0464-.1552a3.1237 3.1237 0 00-2.603-1.574c-.0575 0-.115.0456-.115.1097l-.0008-.0009zm.0008 6.789c-2.0933.0005-3.7915-1.6912-3.7947-3.7804C5.9468 8.0821 7.6452 6.39 9.7387 6.391c2.0932-.0005 3.7911 1.6914 3.794 3.7804a3.7783 3.7783 0 01-1.1124 2.675 3.7936 3.7936 0 01-2.6824 1.1054h.0008zM9.738 4.8002c-1.9218 0-3.6975 1.0232-4.6584 2.6841a5.359 5.359 0 000 5.3683c.9609 1.661 2.7366 2.6841 4.6584 2.6841a5.3891 5.3891 0 003.8073-1.5725 5.3675 5.3675 0 001.578-3.7987 5.3574 5.3574 0 00-1.5771-3.797A5.379 5.379 0 009.7387 4.801l-.0008-.0008z" fill="currentColor" fill-rule="evenodd"></path>
+ </svg>
+ </a>
+ </div>
+
+ </div>
+
+ <template v-if="results.length">
+
+ <div v-for="(result, i) in results" :key="i" class="search-result">
+ <a class="title" :href="result.url" v-html="result.title" />
+ <p v-if="result.summary" class="summary" v-html="result.summary" />
+ <div class="breadcrumbs">
+ <span v-for="(breadcrumb, j) in result.breadcrumbs" :key="j" class="breadcrumb" v-html="breadcrumb" />
+ </div>
+ </div>
+
+ </template>
+
+ <p v-else-if="search">No results found for query "<span v-text="search" />".</p>
+
+ <div ref="infiniteScrollAnchor"></div>
+
+ </template>
+
+ </main>
+</template>
+
+<script>
+export default {
+
+ data () {
+ return {
+ algoliaIndex: undefined,
+ infiniteScrollObserver: undefined,
+ searchPlaceholder: undefined,
+ search: '',
+ results: [],
+ totalResults: 0,
+ totalPages: 0,
+ lastPage: 0,
+ queryTime: 0
+ }
+ },
+
+ computed: {
+ algoliaOptions () {
+ return this.$themeConfig.algolia || {}
+ },
+
+ isAlgoliaConfigured () {
+ return this.algoliaOptions && this.algoliaOptions.apiKey && this.algoliaOptions.indexName
+ }
+ },
+
+ watch: {
+ $lang (newValue) {
+ this.initializeAlgoliaIndex(this.algoliaOptions, newValue)
+ },
+
+ algoliaOptions (newValue) {
+ this.initializeAlgoliaIndex(newValue, this.$lang)
+ },
+
+ search () {
+ this.refreshSearchResults()
+
+ window.history.pushState(
+ {},
+ 'Vue.js Search',
+ window.location.origin + window.location.pathname + '?q=' + encodeURIComponent(this.search)
+ )
+ }
+ },
+
+ mounted () {
+ this.search = (new URL(location)).searchParams.get('q') || '';
+
+ if (!this.isAlgoliaConfigured)
+ return;
+
+ this.searchPlaceholder = this.$themeConfig.searchPlaceholder || 'Search Vue.js'
+ this.initializeAlgoliaIndex(this.algoliaOptions, this.$lang)
+ this.initializeInfiniteScrollObserver()
+ },
+
+ destroyed () {
+ if (!this.infiniteScrollObserver)
+ return;
+
+ this.infiniteScrollObserver.disconnect()
+ },
+
+ methods: {
+ async initializeAlgoliaIndex (userOptions, lang) {
+ const { default: algoliasearch } = await import(/* webpackChunkName: "search-page" */ 'algoliasearch')
+ const client = algoliasearch(this.algoliaOptions.appId, this.algoliaOptions.apiKey);
+
+ this.algoliaIndex = client.initIndex(this.algoliaOptions.indexName);
+
+ this.refreshSearchResults()
+ },
+
+ async initializeInfiniteScrollObserver() {
+ await import(/* webpackChunkName: "search-page" */ 'intersection-observer')
+
+ this.infiniteScrollObserver = new IntersectionObserver(([{ isIntersecting }]) => {
+ if (!isIntersecting || this.totalResults === 0 || this.totalPages === this.lastPage + 1)
+ return
+
+ this.lastPage++
+ this.updateSearchResults()
+ })
+
+ this.infiniteScrollObserver.observe(this.$refs.infiniteScrollAnchor)
+ },
+
+ async updateSearchResults() {
+ if (!this.search || !this.algoliaIndex)
+ return
+
+ const response = await this.algoliaIndex.search(this.search, { page: this.lastPage })
+
+ this.results.push(...response.hits.map(hit => this.parseSearchHit(hit)))
+ this.totalResults = response.nbHits
+ this.totalPages = response.nbPages
+ this.queryTime = response.processingTimeMS
+ },
+
+ refreshSearchResults() {
+ this.results = []
+ this.totalResults = 0
+ this.totalPages = 0
+ this.lastPage = 0
+ this.queryTime = 0
+
+ this.updateSearchResults()
+ },
+
+ visitFirstResult(e) {
+ e.preventDefault()
+
+ if (this.results.length === 0)
+ return;
+
+ window.location = this.results[0].url
+ },
+
+ parseSearchHit(hit) {
+ const hierarchy = hit._highlightResult.hierarchy
+ const titles = []
+
+ let summary, levelName, level = 0
+ while ((levelName = 'lvl' + level++) in hierarchy) {
+ titles.push(hierarchy[levelName].value)
+ }
+
+ if (hit._snippetResult && hit._snippetResult.content) {
+ summary = hit._snippetResult.content.value + '...'
+ }
+
+ return {
+ title: titles.pop(),
+ url: hit.url,
+ summary: summary,
+ breadcrumbs: titles,
+ }
+ }
+ }
+}
+</script>
+
+<style lang="scss">
+@import "@theme/styles/_settings.scss";
+
+#search-page {
+
+ .search-footer {
+ display: flex;
+ height: 35px;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 12px;
+
+ p {
+ margin: 0;
+ padding: 0;
+ font-size: .9rem;
+ }
+
+ .DocSearch-Logo a:hover {
+ text-decoration: none;
+ }
+
+ }
+
+ .search-result {
+ margin-bottom: 15px;
+
+ .title {
+ display: block;
+ }
+
+ .summary {
+ padding: 0;
+ margin: 0;
+ font-size: .9rem;
+ }
+
+ .breadcrumb {
+ font-size: .9rem;
+ color: $light;
+
+ & + .breadcrumb::before {
+ content: "\203A\A0";
+ margin-left: 5px;
+ color: $light;
+ }
+
+ }
+
+ }
+
+}
+</style>
diff --git a/src/.vuepress/components/support/Coins.vue b/src/.vuepress/components/support/Coins.vue
index e239bc21..d274bbd3 100644
--- a/src/.vuepress/components/support/Coins.vue
+++ b/src/.vuepress/components/support/Coins.vue
@@ -54,13 +54,18 @@ export default {
}
}
}),
- created () {
- if (typeof window === 'undefined') return
+ mounted () {
+ this.updateType()
- this.type = window.location.hash.slice(1)
- window.addEventListener('hashchange', function () {
+ window.addEventListener('hashchange', this.updateType)
+ },
+ beforeDestroy () {
+ window.removeEventListener('hashchange', this.updateType)
+ },
+ methods: {
+ updateType () {
this.type = window.location.hash.slice(1)
- })
+ }
}
}
</script>
@@ -74,7 +79,12 @@ export default {
a {
margin: 20px;
- color: $medium;
+ color: $textColor;
+ text-decoration: none !important;
+
+ &:hover {
+ color: $accentColor;
+ }
}
svg {
diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index aff8c464..3c3a6ecf 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -1,10 +1,18 @@
const sidebar = {
- cookbook: [{
- title: 'Cookbook',
- collapsable: false,
- children: ['/cookbook/', '/cookbook/editable-svg-icons']
- }],
- guide: [{
+ cookbook: [
+ {
+ title: 'Cookbook',
+ collapsable: false,
+ children: [
+ '/cookbook/',
+ '/cookbook/editable-svg-icons',
+ '/cookbook/debugging-in-vscode',
+ '/cookbook/automatic-global-registration-of-base-components'
+ ]
+ }
+ ],
+ guide: [
+ {
title: 'Essentials',
collapsable: false,
children: [
@@ -12,6 +20,7 @@ const sidebar = {
'/guide/introduction',
'/guide/instance',
'/guide/template-syntax',
+ '/guide/data-methods',
'/guide/computed',
'/guide/class-and-style',
'/guide/conditional',
@@ -50,6 +59,16 @@ const sidebar = {
title: 'Reusability & Composition',
collapsable: false,
children: [
+ {
+ title: 'Composition API',
+ children: [
+ '/guide/composition-api-introduction',
+ '/guide/composition-api-setup',
+ '/guide/composition-api-lifecycle-hooks',
+ '/guide/composition-api-provide-inject',
+ '/guide/composition-api-template-refs'
+ ]
+ },
'/guide/mixins',
'/guide/custom-directive',
'/guide/teleport',
@@ -60,7 +79,8 @@ const sidebar = {
{
title: 'Advanced Guides',
collapsable: false,
- children: [{
+ children: [
+ {
title: 'Reactivity',
children: [
'/guide/reactivity',
@@ -68,16 +88,6 @@ const sidebar = {
'/guide/reactivity-computed-watchers'
]
},
- {
- title: 'Composition API',
- children: [
- '/guide/composition-api-introduction',
- '/guide/composition-api-setup',
- '/guide/composition-api-lifecycle-hooks',
- '/guide/composition-api-provide-inject',
- '/guide/composition-api-template-refs'
- ]
- },
'/guide/optimizations',
'/guide/change-detection'
]
@@ -88,7 +98,9 @@ const sidebar = {
children: [
'/guide/single-file-component',
'/guide/testing',
- '/guide/typescript-support'
+ '/guide/typescript-support',
+ '/guide/mobile',
+ '/guide/tooling/deployment'
]
},
{
@@ -105,39 +117,6 @@ const sidebar = {
'/guide/a11y-standards',
'/guide/a11y-resources'
]
- },
- {
- title: 'Migration from Vue 2',
- collapsable: true,
- children: [
- 'migration/introduction',
- 'migration/async-components',
- 'migration/attribute-coercion',
- 'migration/custom-directives',
- 'migration/custom-elements-interop',
- 'migration/data-option',
- 'migration/events-api',
- 'migration/filters',
- 'migration/fragments',
- 'migration/functional-components',
- 'migration/global-api',
- 'migration/global-api-treeshaking',
- 'migration/inline-template-attribute',
- 'migration/keycode-modifiers',
- 'migration/render-function-api',
- 'migration/slots-unification',
- 'migration/transition',
- 'migration/v-model'
- ]
- },
- {
- title: 'Contribute to the Docs',
- collapsable: true,
- children: [
- 'contributing/writing-guide',
- 'contributing/doc-style-guide',
- 'contributing/translations'
- ]
}
],
api: [
@@ -146,6 +125,7 @@ const sidebar = {
'/api/global-api',
{
title: 'Options',
+ path: '/api/options-api',
collapsable: false,
children: [
'/api/options-data',
@@ -163,6 +143,7 @@ const sidebar = {
'/api/built-in-components.md',
{
title: 'Reactivity API',
+ path: '/api/reactivity-api',
collapsable: false,
children: [
'/api/basic-reactivity',
@@ -172,21 +153,87 @@ const sidebar = {
},
'/api/composition-api'
],
- examples: [{
- title: 'Examples',
- collapsable: false,
- children: [
- '/examples/markdown',
- '/examples/commits',
- '/examples/grid-component',
- '/examples/tree-view',
- '/examples/svg',
- '/examples/modal',
- '/examples/elastic-header',
- '/examples/select2',
- '/examples/todomvc'
- ]
- }]
+ examples: [
+ {
+ title: 'Examples',
+ collapsable: false,
+ children: [
+ '/examples/markdown',
+ '/examples/commits',
+ '/examples/grid-component',
+ '/examples/tree-view',
+ '/examples/svg',
+ '/examples/modal',
+ '/examples/elastic-header',
+ '/examples/select2',
+ '/examples/todomvc'
+ ]
+ }
+ ],
+ migration: [
+ '/guide/migration/introduction',
+ {
+ title: 'Details',
+ collapsable: false,
+ children: [
+ '/guide/migration/array-refs',
+ '/guide/migration/async-components',
+ '/guide/migration/attribute-coercion',
+ '/guide/migration/attrs-includes-class-style',
+ '/guide/migration/children',
+ '/guide/migration/custom-directives',
+ '/guide/migration/custom-elements-interop',
+ '/guide/migration/data-option',
+ '/guide/migration/emits-option',
+ '/guide/migration/events-api',
+ '/guide/migration/filters',
+ '/guide/migration/fragments',
+ '/guide/migration/functional-components',
+ '/guide/migration/global-api',
+ '/guide/migration/global-api-treeshaking',
+ '/guide/migration/inline-template-attribute',
+ '/guide/migration/key-attribute',
+ '/guide/migration/keycode-modifiers',
+ '/guide/migration/listeners-removed',
+ '/guide/migration/mount-changes',
+ '/guide/migration/props-data',
+ '/guide/migration/props-default-this',
+ '/guide/migration/render-function-api',
+ '/guide/migration/slots-unification',
+ '/guide/migration/suspense',
+ '/guide/migration/transition',
+ '/guide/migration/transition-as-root',
+ '/guide/migration/transition-group',
+ '/guide/migration/v-on-native-modifier-removed',
+ '/guide/migration/v-model',
+ '/guide/migration/v-if-v-for',
+ '/guide/migration/v-bind',
+ '/guide/migration/vnode-lifecycle-events',
+ '/guide/migration/watch'
+ ]
+ }
+ ],
+ ssr: [
+ ['/guide/ssr/introduction', 'Introduction'],
+ '/guide/ssr/getting-started',
+ '/guide/ssr/universal',
+ '/guide/ssr/structure',
+ '/guide/ssr/build-config',
+ '/guide/ssr/server',
+ '/guide/ssr/routing',
+ '/guide/ssr/hydration'
+ ],
+ contributing: [
+ {
+ title: 'Contribute to the Docs',
+ collapsable: false,
+ children: [
+ '/guide/contributing/writing-guide',
+ '/guide/contributing/doc-style-guide',
+ '/guide/contributing/translations'
+ ]
+ }
+ ]
}
module.exports = {
@@ -196,21 +243,48 @@ module.exports = {
[
'link',
{
- href: 'https://fonts.googleapis.com/css?family=Inter:300,400,500,600|Open+Sans:400,600;display=swap',
+ href:
+ 'https://fonts.googleapis.com/css?family=Inter:300,400,500,600|Open+Sans:400,600;display=swap',
rel: 'stylesheet'
}
],
[
'link',
{
- href: 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
+ href:
+ 'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
rel: 'stylesheet'
}
],
- ['link', {
- rel: 'icon',
- href: '/logo.png'
- }],
+ [
+ 'link',
+ {
+ rel: 'icon',
+ href: '/logo.png'
+ }
+ ],
+ ['link', { rel: 'manifest', href: '/manifest.json' }],
+ ['meta', { name: 'theme-color', content: '#3eaf7c' }],
+ ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
+ [
+ 'meta',
+ { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }
+ ],
+ [
+ 'link',
+ {
+ rel: 'apple-touch-icon',
+ href: '/images/icons/apple-icon-152x152.png'
+ }
+ ],
+ [
+ 'meta',
+ {
+ name: 'msapplication-TileImage',
+ content: '/images/icons/ms-icon-144x144.png'
+ }
+ ],
+ ['meta', { name: 'msapplication-TileColor', content: '#000000' }],
[
'script',
{
@@ -227,10 +301,12 @@ module.exports = {
],
themeConfig: {
logo: '/logo.png',
- nav: [{
+ nav: [
+ {
text: 'Docs',
ariaLabel: 'Documentation Menu',
- items: [{
+ items: [
+ {
text: 'Guide',
link: '/guide/introduction'
},
@@ -245,19 +321,29 @@ module.exports = {
{
text: 'Examples',
link: '/examples/markdown'
+ },
+ {
+ text: 'Contribute',
+ link: '/guide/contributing/writing-guide'
+ },
+ {
+ text: 'Migration from Vue 2',
+ link: '/guide/migration/introduction'
}
]
},
{
text: 'API Reference',
- link: '/api/application-config'
+ link: '/api/'
},
{
text: 'Ecosystem',
- items: [{
+ items: [
+ {
text: 'Community',
ariaLabel: 'Community Menu',
- items: [{
+ items: [
+ {
text: 'Team',
link: '/community/team/'
},
@@ -277,13 +363,14 @@ module.exports = {
},
{
text: 'Official Projects',
- items: [{
+ items: [
+ {
text: 'Vue Router',
- link: 'https://router.vuejs.org/'
+ link: 'https://next.router.vuejs.org/'
},
{
text: 'Vuex',
- link: 'https://vuex.vuejs.org/'
+ link: 'https://next.vuex.vuejs.org/'
},
{
text: 'Vue CLI',
@@ -291,7 +378,8 @@ module.exports = {
},
{
text: 'Vue Test Utils',
- link: 'https://vue-test-utils.vuejs.org/'
+ link:
+ 'https://next.vue-test-utils.vuejs.org/guide/'
},
{
text: 'Devtools',
@@ -300,6 +388,10 @@ module.exports = {
{
text: 'Weekly news',
link: 'https://news.vuejs.org/'
+ },
+ {
+ text: 'Blog',
+ link: 'https://blog.vuejs.org/'
}
]
}
@@ -308,7 +400,8 @@ module.exports = {
{
text: 'Support Vue',
link: '/support-vuejs/',
- items: [{
+ items: [
+ {
text: 'One-time Donations',
link: '/support-vuejs/#one-time-donations'
},
@@ -321,6 +414,37 @@ module.exports = {
link: 'https://vue.threadless.com/'
}
]
+ },
+ {
+ text: 'Translations',
+ link: '#',
+ items: [
+ // Translation maintainers: Please include the link below to the English documentation
+ // {
+ // text: 'English',
+ // link: 'https://v3.vuejs.org/'
+ // },
+ {
+ text: '中文',
+ link: 'https://v3.cn.vuejs.org/'
+ },
+ {
+ text: '한국어',
+ link: 'https://v3.ko.vuejs.org/'
+ },
+ {
+ text: '日本語',
+ link: 'https://v3.ja.vuejs.org/'
+ },
+ {
+ text: 'Русский',
+ link: 'https://v3.ru.vuejs.org/'
+ },
+ {
+ text: 'More Translations',
+ link: '/guide/contributing/translations#community-translations'
+ }
+ ]
}
],
repo: 'vuejs/docs-next',
@@ -331,6 +455,9 @@ module.exports = {
sidebarDepth: 2,
sidebar: {
collapsable: false,
+ '/guide/migration/': sidebar.migration,
+ '/guide/contributing/': sidebar.contributing,
+ '/guide/ssr/': sidebar.ssr,
'/guide/': sidebar.guide,
'/community/': sidebar.guide,
'/cookbook/': sidebar.cookbook,
@@ -340,10 +467,31 @@ module.exports = {
smoothScroll: false,
algolia: {
indexName: 'vuejs-v3',
+ appId: 'BH4D9OD16A',
apiKey: 'bc6e8acb44ed4179c30d0a45d6140d3f'
+ },
+ carbonAds: {
+ carbon: 'CEBDT27Y',
+ custom: 'CKYD62QM',
+ placement: 'vuejsorg'
}
},
plugins: [
+ [
+ '@vuepress/last-updated',
+ {
+ transformer(timestamp) {
+ const date = new Date(timestamp)
+
+ const digits = [
+ date.getUTCFullYear(), date.getUTCMonth() + 1, date.getUTCDate(),
+ date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds()
+ ].map(num => String(num).padStart(2, '0'))
+
+ return '{0}-{1}-{2}, {3}:{4}:{5} UTC'.replace(/{(\d)}/g, (_, num) => digits[num])
+ }
+ }
+ ],
[
'@vuepress/pwa',
{
diff --git a/src/.vuepress/public/images/breakpoint_hit.png b/src/.vuepress/public/images/breakpoint_hit.png
new file mode 100644
index 00000000..35020edc
Binary files /dev/null and b/src/.vuepress/public/images/breakpoint_hit.png differ
diff --git a/src/.vuepress/public/images/breakpoint_set.png b/src/.vuepress/public/images/breakpoint_set.png
new file mode 100644
index 00000000..af5a7064
Binary files /dev/null and b/src/.vuepress/public/images/breakpoint_set.png differ
diff --git a/src/.vuepress/public/images/coin-bch.png b/src/.vuepress/public/images/coin-bch.png
new file mode 100644
index 00000000..26c2d0d3
Binary files /dev/null and b/src/.vuepress/public/images/coin-bch.png differ
diff --git a/src/.vuepress/public/images/coin-btc.png b/src/.vuepress/public/images/coin-btc.png
new file mode 100644
index 00000000..e07feece
Binary files /dev/null and b/src/.vuepress/public/images/coin-btc.png differ
diff --git a/src/.vuepress/public/images/coin-eth.png b/src/.vuepress/public/images/coin-eth.png
new file mode 100644
index 00000000..dc3ac555
Binary files /dev/null and b/src/.vuepress/public/images/coin-eth.png differ
diff --git a/src/.vuepress/public/images/coin-ltc.png b/src/.vuepress/public/images/coin-ltc.png
new file mode 100644
index 00000000..a1142e54
Binary files /dev/null and b/src/.vuepress/public/images/coin-ltc.png differ
diff --git a/src/.vuepress/public/images/config_add.png b/src/.vuepress/public/images/config_add.png
new file mode 100644
index 00000000..a99ae3e2
Binary files /dev/null and b/src/.vuepress/public/images/config_add.png differ
diff --git a/src/.vuepress/public/images/css-vs-js-ease.svg b/src/.vuepress/public/images/css-vs-js-ease.svg
index f70c500c..4fdf69cc 100644
--- a/src/.vuepress/public/images/css-vs-js-ease.svg
+++ b/src/.vuepress/public/images/css-vs-js-ease.svg
@@ -866,7 +866,7 @@
<rect class="cls-1" x="437.4" y="205.3" width="10.2" height="10.23"/>
<rect class="cls-1" x="447.6" y="205.3" width="10.2" height="10.23"/>
<rect class="cls-1" x="457.8" y="205.3" width="10.2" height="10.23"/>
- <text class="cls-2" transform="translate(61.5 261.7)"><tspan class="cls-3">C</tspan><tspan class="cls-4" x="6.6" y="0">S</tspan><tspan x="12.9" y="0">S - limi</tspan><tspan class="cls-4" x="47.8" y="0">t</tspan><tspan class="cls-5" x="51.9" y="0">ed handles</tspan></text>
+ <text class="cls-2" transform="translate(61.5 261.7)"><tspan class="cls-3">C</tspan><tspan class="cls-4" x="8.5" y="0">S</tspan><tspan x="14.5" y="0">S - limi</tspan><tspan class="cls-4" x="51.1" y="0">t</tspan><tspan class="cls-5" x="54.8" y="0">ed handles</tspan></text>
<text class="cls-2" transform="translate(312.7 261.7)">JS - multiple handles</text>
<text class="cls-6" transform="translate(97.3 228.2)">P<tspan class="cls-7" x="5.7" y="0">r</tspan><tspan x="9" y="0">og</tspan><tspan class="cls-8" x="19.5" y="0">r</tspan><tspan class="cls-9" x="22.9" y="0">ess</tspan></text>
<text class="cls-6" transform="translate(345.3 228.2)">P<tspan class="cls-7" x="5.7" y="0">r</tspan><tspan x="9" y="0">og</tspan><tspan class="cls-8" x="19.5" y="0">r</tspan><tspan class="cls-9" x="22.9" y="0">ess</tspan></text>
diff --git a/src/.vuepress/public/images/devtools-timetravel.gif b/src/.vuepress/public/images/devtools-timetravel.gif
new file mode 100644
index 00000000..83d007b8
Binary files /dev/null and b/src/.vuepress/public/images/devtools-timetravel.gif differ
diff --git a/src/.vuepress/public/images/editable-svg-icons-sizes.png b/src/.vuepress/public/images/editable-svg-icons-sizes.png
new file mode 100644
index 00000000..348d813c
Binary files /dev/null and b/src/.vuepress/public/images/editable-svg-icons-sizes.png differ
diff --git a/src/.vuepress/public/images/editable-svg-icons.jpg b/src/.vuepress/public/images/editable-svg-icons.jpg
new file mode 100644
index 00000000..fb9b8e23
Binary files /dev/null and b/src/.vuepress/public/images/editable-svg-icons.jpg differ
diff --git a/src/.vuepress/public/images/icons/android-icon-144x144.png b/src/.vuepress/public/images/icons/android-icon-144x144.png
new file mode 100644
index 00000000..c4b2a742
Binary files /dev/null and b/src/.vuepress/public/images/icons/android-icon-144x144.png differ
diff --git a/src/.vuepress/public/images/icons/android-icon-192x192.png b/src/.vuepress/public/images/icons/android-icon-192x192.png
new file mode 100644
index 00000000..9d1d5fe0
Binary files /dev/null and b/src/.vuepress/public/images/icons/android-icon-192x192.png differ
diff --git a/src/.vuepress/public/images/icons/android-icon-36x36.png b/src/.vuepress/public/images/icons/android-icon-36x36.png
new file mode 100644
index 00000000..8d8696d2
Binary files /dev/null and b/src/.vuepress/public/images/icons/android-icon-36x36.png differ
diff --git a/src/.vuepress/public/images/icons/android-icon-48x48.png b/src/.vuepress/public/images/icons/android-icon-48x48.png
new file mode 100644
index 00000000..508524ba
Binary files /dev/null and b/src/.vuepress/public/images/icons/android-icon-48x48.png differ
diff --git a/src/.vuepress/public/images/icons/android-icon-72x72.png b/src/.vuepress/public/images/icons/android-icon-72x72.png
new file mode 100644
index 00000000..7dda937b
Binary files /dev/null and b/src/.vuepress/public/images/icons/android-icon-72x72.png differ
diff --git a/src/.vuepress/public/images/icons/android-icon-96x96.png b/src/.vuepress/public/images/icons/android-icon-96x96.png
new file mode 100644
index 00000000..a4756ba4
Binary files /dev/null and b/src/.vuepress/public/images/icons/android-icon-96x96.png differ
diff --git a/src/.vuepress/public/images/icons/apple-icon-114x114.png b/src/.vuepress/public/images/icons/apple-icon-114x114.png
new file mode 100644
index 00000000..f678b645
Binary files /dev/null and b/src/.vuepress/public/images/icons/apple-icon-114x114.png differ
diff --git a/src/.vuepress/public/images/icons/apple-icon-120x120.png b/src/.vuepress/public/images/icons/apple-icon-120x120.png
new file mode 100644
index 00000000..983cb6b7
Binary files /dev/null and b/src/.vuepress/public/images/icons/apple-icon-120x120.png differ
diff --git a/src/.vuepress/public/images/icons/apple-icon-144x144.png b/src/.vuepress/public/images/icons/apple-icon-144x144.png
new file mode 100644
index 00000000..c4b2a742
Binary files /dev/null and b/src/.vuepress/public/images/icons/apple-icon-144x144.png differ
diff --git a/src/.vuepress/public/images/icons/apple-icon-152x152.png b/src/.vuepress/public/images/icons/apple-icon-152x152.png
new file mode 100644
index 00000000..a0b6ec6d
Binary files /dev/null and b/src/.vuepress/public/images/icons/apple-icon-152x152.png differ
diff --git a/src/.vuepress/public/images/icons/apple-icon-180x180.png b/src/.vuepress/public/images/icons/apple-icon-180x180.png
new file mode 100644
index 00000000..997e6156
Binary files /dev/null and b/src/.vuepress/public/images/icons/apple-icon-180x180.png differ
diff --git a/src/.vuepress/public/images/icons/apple-icon-57x57.png b/src/.vuepress/public/images/icons/apple-icon-57x57.png
new file mode 100644
index 00000000..0ec32b3f
Binary files /dev/null and b/src/.vuepress/public/images/icons/apple-icon-57x57.png differ
diff --git a/src/.vuepress/public/images/icons/apple-icon-60x60.png b/src/.vuepress/public/images/icons/apple-icon-60x60.png
new file mode 100644
index 00000000..0f272ef6
Binary files /dev/null and b/src/.vuepress/public/images/icons/apple-icon-60x60.png differ
diff --git a/src/.vuepress/public/images/icons/apple-icon-72x72.png b/src/.vuepress/public/images/icons/apple-icon-72x72.png
new file mode 100644
index 00000000..7dda937b
Binary files /dev/null and b/src/.vuepress/public/images/icons/apple-icon-72x72.png differ
diff --git a/src/.vuepress/public/images/icons/apple-icon-76x76.png b/src/.vuepress/public/images/icons/apple-icon-76x76.png
new file mode 100644
index 00000000..bb875492
Binary files /dev/null and b/src/.vuepress/public/images/icons/apple-icon-76x76.png differ
diff --git a/src/.vuepress/public/images/icons/apple-icon-precomposed.png b/src/.vuepress/public/images/icons/apple-icon-precomposed.png
new file mode 100644
index 00000000..9b0c56e1
Binary files /dev/null and b/src/.vuepress/public/images/icons/apple-icon-precomposed.png differ
diff --git a/src/.vuepress/public/images/icons/apple-icon.png b/src/.vuepress/public/images/icons/apple-icon.png
new file mode 100644
index 00000000..9b0c56e1
Binary files /dev/null and b/src/.vuepress/public/images/icons/apple-icon.png differ
diff --git a/src/.vuepress/public/images/icons/bacancy_technology.png b/src/.vuepress/public/images/icons/bacancy_technology.png
new file mode 100644
index 00000000..174019bb
Binary files /dev/null and b/src/.vuepress/public/images/icons/bacancy_technology.png differ
diff --git a/src/.vuepress/public/images/icons/favicon-16x16.png b/src/.vuepress/public/images/icons/favicon-16x16.png
new file mode 100644
index 00000000..60be03c8
Binary files /dev/null and b/src/.vuepress/public/images/icons/favicon-16x16.png differ
diff --git a/src/.vuepress/public/images/icons/favicon-32x32.png b/src/.vuepress/public/images/icons/favicon-32x32.png
new file mode 100644
index 00000000..ce327e86
Binary files /dev/null and b/src/.vuepress/public/images/icons/favicon-32x32.png differ
diff --git a/src/.vuepress/public/images/icons/favicon-96x96.png b/src/.vuepress/public/images/icons/favicon-96x96.png
new file mode 100644
index 00000000..a4756ba4
Binary files /dev/null and b/src/.vuepress/public/images/icons/favicon-96x96.png differ
diff --git a/src/.vuepress/public/images/icons/favicon.ico b/src/.vuepress/public/images/icons/favicon.ico
new file mode 100644
index 00000000..4f6c96a6
Binary files /dev/null and b/src/.vuepress/public/images/icons/favicon.ico differ
diff --git a/src/.vuepress/public/images/icons/ms-icon-144x144.png b/src/.vuepress/public/images/icons/ms-icon-144x144.png
new file mode 100644
index 00000000..c4b2a742
Binary files /dev/null and b/src/.vuepress/public/images/icons/ms-icon-144x144.png differ
diff --git a/src/.vuepress/public/images/icons/ms-icon-150x150.png b/src/.vuepress/public/images/icons/ms-icon-150x150.png
new file mode 100644
index 00000000..962e04fe
Binary files /dev/null and b/src/.vuepress/public/images/icons/ms-icon-150x150.png differ
diff --git a/src/.vuepress/public/images/icons/ms-icon-310x310.png b/src/.vuepress/public/images/icons/ms-icon-310x310.png
new file mode 100644
index 00000000..264c3f83
Binary files /dev/null and b/src/.vuepress/public/images/icons/ms-icon-310x310.png differ
diff --git a/src/.vuepress/public/images/icons/ms-icon-70x70.png b/src/.vuepress/public/images/icons/ms-icon-70x70.png
new file mode 100644
index 00000000..fde6d818
Binary files /dev/null and b/src/.vuepress/public/images/icons/ms-icon-70x70.png differ
diff --git a/src/.vuepress/public/images/lifecycle.png b/src/.vuepress/public/images/lifecycle.png
deleted file mode 100644
index 36dd7107..00000000
Binary files a/src/.vuepress/public/images/lifecycle.png and /dev/null differ
diff --git a/src/.vuepress/public/images/lifecycle.svg b/src/.vuepress/public/images/lifecycle.svg
new file mode 100644
index 00000000..e476cb08
--- /dev/null
+++ b/src/.vuepress/public/images/lifecycle.svg
@@ -0,0 +1,147 @@
+<svg width="840" height="1388" xmlns="http://www.w3.org/2000/svg">
+ <g fill="none" fill-rule="evenodd">
+ <text font-family="Inter, Roboto, sans-serif" font-size="14" fill="#848484">
+ <tspan x="231.593" y="1303">* Template compilation is performed ahead-of-time if using</tspan> <tspan x="270.756" y="1321.5">a build step, e.g., with single-file components.</tspan>
+ </text>
+ <g transform="translate(72 1056)">
+ <path d="M160 18v14l-14-7 14-7zm180 6v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3z" fill="#DB5B62" fill-rule="nonzero"/>
+ <rect stroke="#DB5B62" stroke-width="2" x="1" y="1" width="144" height="47" rx="8"/>
+ <text font-family="Inter, Roboto, sans-serif" font-size="14" fill="#DB5B62">
+ <tspan x="25.749" y="30">beforeUnmount</tspan>
+ </text>
+ </g>
+ <path stroke="#9AA9B2" stroke-width="2" fill="#9AA9B2" stroke-linecap="square" stroke-dasharray="1,6" d="M413 947v40"/>
+ <path d="M414 1104v2h6l-7 14-7-14h6v-2h2zm0-7v3h-2v-3h2zm0-7v3h-2v-3h2zm0-7v3h-2v-3h2zm0-7v3h-2v-3h2zm0-7v3h-2v-3h2zm0-7v3h-2v-3h2zm0-7v3h-2v-3h2z" fill="#9AA9B2" fill-rule="nonzero"/>
+ <text font-family="Inter, Roboto, sans-serif" font-size="14" transform="translate(355 947)">
+ <tspan x="39.766" y="60" fill="#8E9EA9">when </tspan> <tspan x="3.973" y="77" fill="#8E9EA9">app.</tspan> <tspan x="31.221" y="77" fill="#DB5B62">unmount</tspan> <tspan x="85.703" y="77" fill="#8E9EA9">() is </tspan> <tspan x="38.21" y="94" fill="#8E9EA9">called</tspan>
+ </text>
+ <g transform="translate(72 238)">
+ <path d="M160.676 17.036l-.037 14L146.657 24l14.019-6.964zm176.231 6.459l2 .005 1 .003-.005 2-1-.003-1-.003-1-.002.005-2zm-7-.018l1 .002 1 .003 1 .002-.005 2-1-.002-1-.003-1-.002.005-2zm-7-.019l1 .003 2 .005-.005 2-2-.005-1-.003.005-2zm-7-.018l1 .003 1 .002 1 .003-.005 2-1-.003-1-.002-1-.003.005-2zm-7-.018l2 .005 1 .003-.005 2-1-.003-2-.005.005-2zm-7-.018l1 .002 1 .003 1 .003-.005 2-1-.003-1-.003-1-.002.005-2zm-7-.018l1 .002 1 .003 1 .002-.005 2-1-.002-1-.003-1-.002.005-2zm-7-.019l1 .003 2 .005-.005 2-2-.005-1-.003.005-2zm-7-.018l1 .003 1 .002 1 .003-.005 2-1-.003-1-.002-1-.003.005-2zm-7-.018l2 .005 1 .003-.005 2-1-.003-2-.005.005-2zm-7-.018l1 .002 1 .003 1 .003-.005 2-1-.003-1-.003-1-.002.005-2zm-7-.018l1 .002 1 .003 1 .002-.005 2-1-.002-1-.003-1-.002.005-2zm-7-.019l1 .003 2 .005-.005 2-2-.005-1-.003.005-2zm-7-.018l1 .003 1 .002 1 .003-.005 2-1-.003-1-.002-1-.003.005-2zm-7-.018l2 .005 1 .003-.005 2-1-.003-2-.005.005-2zm-7-.018l1 .002 1 .003 1 .003-.005 2-1-.003-1-.003-1-.002.005-2zm-7-.018l1 .002 1 .003 1 .002-.005 2-1-.002-1-.003-1-.002.005-2zm-7-.019l1 .003 2 .005-.005 2-2-.005-1-.003.005-2zm-7-.018l1 .003 1 .002 1 .003-.005 2-1-.003-1-.002-1-.003.005-2zm-7-.018l2 .005 1 .003-.005 2-1-.003-2-.005.005-2zm-7-.018l1 .002 1 .003 1 .002-.005 2-1-.002-1-.003-1-.002.005-2zm-7-.019l1 .003 1 .003 1 .002-.005 2-1-.002-1-.003-1-.003.005-2zm-7-.018l1 .003 2 .005-.005 2-2-.005-1-.003.005-2zm-7-.018l1 .003 1 .002 1 .003-.005 2-1-.003-1-.002-1-.003.006-2zm-7-.018l2 .005 1 .003-.005 2-1-.003-2-.005.006-2zm-7-.018l1 .002 1 .003 1 .002-.005 2-1-.002-1-.003-1-.002.006-2z" fill="#DB5B62" fill-rule="nonzero"/>
+ <rect stroke="#DB5B62" stroke-width="2" x="1" y="1" width="144" height="47" rx="8"/>
+ <text font-family="Inter, Roboto, sans-serif" font-size="14" fill="#DB5B62">
+ <tspan x="32.642" y="30">beforeCreate</tspan>
+ </text>
+ </g>
+ <g transform="translate(282 64)">
+ <path d="M132 65v35h6l-7 14-7-14h6V65h2z" fill="#9AA9B2" fill-rule="nonzero"/>
+ <rect stroke="#2F679A" fill="#3E6B94" x="-.5" y="-.5" width="259" height="66" rx="8"/>
+ <text font-family="Inter, Roboto, sans-serif" font-size="14">
+ <tspan x="37.555" y="28" fill="#FFF">app = Vue.</tspan> <tspan x="105.156" y="28" fill="#FFB196">createApp</tspan> <tspan x="168.976" y="28" fill="#FFF">(</tspan> <tspan x="173.638" y="28" fill="#39DD95">options</tspan> <tspan x="218.783" y="28" fill="#FFF">)</tspan> <tspan x="87.311" y="46.5" fill="#FFF">app.</tspan> <tspan x="114.559" y="46.5" fill="#FFB196">mount</tspan> <tspan x="153.469" y="46.5" fill="#FFF">(</tspan> <tspan x="158.131" y="46.5" fill="#39DD95">el</tspan> <tspan x="169.027" y="46.5" fill="#FFF">)</tspan>
+ </text>
+ </g>
+ <path d="M272 467v53h6l-7 14-7-14h6v-53h2zM554 467v53h6l-7 14-7-14h6v-53h2z" fill="#9AA9B2" fill-rule="nonzero"/>
+ <path d="M553.025 467.004h-282" stroke="#9AA9B2" stroke-width="2" fill="#9AA9B2" stroke-linecap="square"/>
+ <g fill="#9AA9B2">
+ <path stroke="#9AA9B2" stroke-width="2" stroke-linecap="square" d="M271 636v-43M553 635v-42"/>
+ <path d="M413 706l7-14h-6v-55h-2v55h-6l7 14z" fill-rule="nonzero"/>
+ <path stroke="#9AA9B2" stroke-width="2" stroke-linecap="square" d="M553 637H271"/>
+ </g>
+ <g transform="translate(169 535)">
+ <rect stroke="#23AC70" fill="#3AB881" x="-.5" y="-.5" width="207" height="58" rx="8"/>
+ <text font-family="Inter, Roboto, sans-serif" font-size="14">
+ <tspan x="49.695" y="23.918" fill="#FFF">Compile template</tspan> <tspan x="39.568" y="42.418" fill="#FFF">into render function </tspan> <tspan x="163.312" y="42.418" fill="#F6DA72">*</tspan>
+ </text>
+ </g>
+ <g transform="translate(451 535)">
+ <rect stroke="#23AC70" fill="#3AB881" x="-.5" y="-.5" width="207" height="58" rx="8"/>
+ <text font-family="Inter, Roboto, sans-serif" font-size="14">
+ <tspan x="29.016" y="23.918" fill="#FFF">Compile el’s innerHTML</tspan> <tspan x="62.727" y="42.418" fill="#FFF">as template </tspan> <tspan x="138.989" y="42.418" fill="#F6DA72">*</tspan>
+ </text>
+ </g>
+ <path d="M413 415.433L509.057 467 413 518.567 316.943 467 413 415.433z" stroke="#F2781E" fill="#FF8228"/>
+ <text font-family="Inter, Roboto, sans-serif" font-size="14" fill="#FFF" transform="translate(318 416)">
+ <tspan x="82.052" y="37.727">Has</tspan> <tspan x="38.08" y="56.227">“template” option?</tspan>
+ </text>
+ <text font-family="Inter, Roboto, sans-serif" font-size="14" fill="#8E9EA9" transform="translate(169 416)">
+ <tspan x="61.662" y="69">YES</tspan>
+ </text>
+ <text font-family="Inter, Roboto, sans-serif" font-size="14" fill="#8E9EA9" transform="translate(169 416)">
+ <tspan x="405.5" y="69">NO</tspan>
+ </text>
+ <g transform="translate(72 354)">
+ <path d="M160 17v14l-14-7 14-7zm180 6v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3z" fill="#DB5B62" fill-rule="nonzero"/>
+ <rect stroke="#DB5B62" stroke-width="2" x="1" y="1" width="144" height="47" rx="8"/>
+ <text font-family="Inter, Roboto, sans-serif" font-size="14" fill="#DB5B62">
+ <tspan x="50.652" y="30">created</tspan>
+ </text>
+ </g>
+ <g transform="translate(72 640)">
+ <path d="M160.676 18.036l-.037 14L146.657 25l14.019-6.964zm176.231 6.459l2 .005 1 .003-.005 2-1-.003-1-.003-1-.002.005-2zm-7-.018l1 .002 1 .003 1 .002-.005 2-1-.002-1-.003-1-.002.005-2zm-7-.019l1 .003 2 .005-.005 2-2-.005-1-.003.005-2zm-7-.018l1 .003 1 .002 1 .003-.005 2-1-.003-1-.002-1-.003.005-2zm-7-.018l2 .005 1 .003-.005 2-1-.003-2-.005.005-2zm-7-.018l1 .002 1 .003 1 .003-.005 2-1-.003-1-.003-1-.002.005-2zm-7-.018l1 .002 1 .003 1 .002-.005 2-1-.002-1-.003-1-.002.005-2zm-7-.019l1 .003 2 .005-.005 2-2-.005-1-.003.005-2zm-7-.018l1 .003 1 .002 1 .003-.005 2-1-.003-1-.002-1-.003.005-2zm-7-.018l2 .005 1 .003-.005 2-1-.003-2-.005.005-2zm-7-.018l1 .002 1 .003 1 .003-.005 2-1-.003-1-.003-1-.002.005-2zm-7-.018l1 .002 1 .003 1 .002-.005 2-1-.002-1-.003-1-.002.005-2zm-7-.019l1 .003 2 .005-.005 2-2-.005-1-.003.005-2zm-7-.018l1 .003 1 .002 1 .003-.005 2-1-.003-1-.002-1-.003.005-2zm-7-.018l2 .005 1 .003-.005 2-1-.003-2-.005.005-2zm-7-.018l1 .002 1 .003 1 .003-.005 2-1-.003-1-.003-1-.002.005-2zm-7-.018l1 .002 1 .003 1 .002-.005 2-1-.002-1-.003-1-.002.005-2zm-7-.019l1 .003 2 .005-.005 2-2-.005-1-.003.005-2zm-7-.018l1 .003 1 .002 1 .003-.005 2-1-.003-1-.002-1-.003.005-2zm-7-.018l2 .005 1 .003-.005 2-1-.003-2-.005.005-2zm-7-.018l1 .002 1 .003 1 .002-.005 2-1-.002-1-.003-1-.002.005-2zm-7-.019l1 .003 1 .003 1 .002-.005 2-1-.002-1-.003-1-.003.005-2zm-7-.018l1 .003 2 .005-.005 2-2-.005-1-.003.005-2zm-7-.018l1 .003 1 .002 1 .003-.005 2-1-.003-1-.002-1-.003.006-2zm-7-.018l2 .005 1 .003-.005 2-1-.003-2-.005.006-2zm-7-.018l1 .002 1 .003 1 .002-.005 2-1-.002-1-.003-1-.002.006-2z" fill="#DB5B62" fill-rule="nonzero"/>
+ <rect stroke="#DB5B62" stroke-width="2" x="1" y="1" width="144" height="47" rx="8"/>
+ <text font-family="Inter, Roboto, sans-serif" font-size="14" fill="#DB5B62">
+ <tspan x="34.697" y="30">beforeMount</tspan>
+ </text>
+ </g>
+ <g transform="translate(72 780)">
+ <path d="M160 18v14l-14-7 14-7zm180 6v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3z" fill="#DB5B62" fill-rule="nonzero"/>
+ <rect stroke="#DB5B62" stroke-width="2" x="1" y="1" width="144" height="47" rx="8"/>
+ <text font-family="Inter, Roboto, sans-serif" font-size="14" fill="#DB5B62">
+ <tspan x="46.759" y="30">mounted</tspan>
+ </text>
+ </g>
+ <g transform="translate(72 1150)">
+ <path d="M160 18v6h1v2h-1v6l-14-7 14-7zm127 6v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3zm-7 0v2h-3v-2h3z" fill="#DB5B62" fill-rule="nonzero"/>
+ <rect stroke="#DB5B62" stroke-width="2" x="1" y="1" width="144" height="47" rx="8"/>
+ <text font-family="Inter, Roboto, sans-serif" font-size="14" fill="#DB5B62">
+ <tspan x="38.973" y="30">unmounted</tspan>
+ </text>
+ </g>
+ <g>
+ <g transform="translate(599 749)">
+ <path d="M2.23 85.505l1.294 1.525-.763.647-1.525 1.293-1.294-1.525.763-.647 1.525-1.293zm5.339-4.528l1.293 1.525-.762.647-.763.647-.763.647-1.293-1.526 1.525-1.293.763-.647zm5.339-4.527l1.293 1.525-1.525 1.293-.763.647-1.293-1.525.762-.647.763-.647.763-.646zm5.338-4.528l1.294 1.525-.763.647-.763.647-.762.647-1.294-1.526.763-.646 1.525-1.294zm5.339-4.528l1.293 1.526-.762.647-.763.646-.763.647-1.293-1.525.763-.647.762-.647.763-.647zm5.339-4.527l1.293 1.525-.763.647-.762.647-.763.647-1.293-1.526.762-.647.763-.646.763-.647zM48 48l-6.15 14.394-9.055-10.678L48 48zM34.262 58.34l1.294 1.525-.763.646-1.525 1.294-1.294-1.525.763-.647.763-.647.762-.647z" fill="#DB5B62" fill-rule="nonzero"/>
+ <rect stroke="#DB5B62" stroke-width="2" x="21" y="1" width="144.127" height="46.184" rx="8"/>
+ <text font-family="Inter, Roboto, sans-serif" font-size="14" fill="#DB5B62">
+ <tspan x="51.101" y="28.678">beforeUpdate</tspan>
+ </text>
+ </g>
+ <path d="M642.86 988.602L649 1003l-15.203-3.726 9.062-10.672zm-8.378.759l.763.647.762.647.762.648-1.294 1.524-.763-.647-.762-.647-.762-.648 1.294-1.524zm-5.335-4.53l.762.646.762.648.762.647-1.294 1.524-.762-.647-.763-.647-.762-.647 1.295-1.525zm-5.336-4.532l.762.648.762.647.762.647-1.294 1.525-1.525-1.295-.762-.647 1.295-1.525zm-5.336-4.53l.762.647.762.647.763.647-1.295 1.525-.762-.647-1.525-1.295 1.295-1.525zm-5.336-4.531l.762.647.762.647.763.647-1.295 1.525-.762-.647-1.525-1.295 1.295-1.524zm-5.336-4.531l.762.647 1.525 1.295-1.295 1.524-.762-.647-.762-.647-.763-.648 1.295-1.524zm-5.336-4.531l.762.647.763.648.762.647-1.295 1.524-.762-.647-.762-.647-.762-.647 1.294-1.525z" fill="#DB5B62" fill-rule="nonzero"/>
+ <path d="M756.536 1004c1.933 0 3.683.784 4.95 2.05a6.978 6.978 0 012.05 4.95h0v35.184a6.978 6.978 0 01-2.05 4.95 6.978 6.978 0 01-4.95 2.05h0H627a6.978 6.978 0 01-4.95-2.05 6.978 6.978 0 01-2.05-4.95h0V1011c0-1.933.784-3.683 2.05-4.95A6.978 6.978 0 01627 1004h0z" stroke="#DB5B62" stroke-width="2"/>
+ <text font-family="Inter, Roboto, sans-serif" font-size="14" fill="#DB5B62" transform="translate(602 963)">
+ <tspan x="65.132" y="70">updated</tspan>
+ </text>
+ <path d="M576.785 819c6.682 3.957 12.71 8.832 18.01 14.411l-.703-.736a83.825 83.825 0 0111.52 14.047c10.695 15.46 15.754 34.304 15.367 53.281.07 17.046-4.313 34.254-13.882 49.473-7.685 12.222-17.717 22.1-29.152 29.418l-1.07.675-.693.426a94.715 94.715 0 01-15.257 7.538l-.975.373-.28.103a95.235 95.235 0 01-27.074 5.78l-.258.015-.363.024-.956.051-.709.032a95.312 95.312 0 01-33.803-4.646 94.877 94.877 0 01-15.537-6.65l-.258-.141a70.875 70.875 0 01-.93-.51l-.99-.557-.191-.112a94.409 94.409 0 01-17.315-12.745 94.131 94.131 0 01-14.775-17.444 93.788 93.788 0 01-8.463-16.035l-.38-.935-.112-.289a93.703 93.703 0 01-6.539-32.83 93.654 93.654 0 013.885-28.58l.39-1.275a93.671 93.671 0 016.442-15.556l.227-.428c.14-.265.281-.529.424-.792 6.422-11.869 15.501-22.55 27.089-31.1l.812-.593 2.62-1.936" stroke="#8999A4" stroke-width="2" stroke-dasharray="4"/>
+ <g transform="translate(519 863)">
+ <rect stroke="#23AC70" fill="#3AB881" x="20.5" y="-.5" width="139.833" height="78" rx="8"/>
+ <text font-family="Inter, Roboto, sans-serif" font-size="14" fill="#FFF">
+ <tspan x="53.006" y="25.333">Virtual DOM</tspan> <tspan x="54.424" y="43.833">re-rendered</tspan> <tspan x="60.252" y="62.333">and patch</tspan>
+ </text>
+ </g>
+ <text font-family="Inter, Roboto, sans-serif" font-size="14" fill="#8E9EA9" transform="translate(431 749)">
+ <tspan x="62.197" y="58">when data </tspan> <tspan x="71.535" y="75">changes</tspan>
+ </text>
+ </g>
+ <g transform="translate(316 179)">
+ <path d="M98 57v46h6l-7 14-7-14h6V57h2z" fill="#9AA9B2" fill-rule="nonzero"/>
+ <rect stroke="#23AC70" fill="#3AB881" x="-.5" y="-.5" width="192" height="58" rx="8"/>
+ <text font-family="Inter, Roboto, sans-serif" font-size="14" fill="#FFF">
+ <tspan x="87.162" y="24">Init </tspan> <tspan x="42.421" y="42.5">events & lifecycle</tspan>
+ </text>
+ </g>
+ <g transform="translate(316 297)">
+ <path d="M98 57v47h6l-7 14-7-14h6V57h2z" fill="#9AA9B2" fill-rule="nonzero"/>
+ <rect stroke="#23AC70" fill="#3AB881" x="-.5" y="-.5" width="192" height="58" rx="8"/>
+ <text font-family="Inter, Roboto, sans-serif" font-size="14" fill="#FFF">
+ <tspan x="87.162" y="24">Init </tspan> <tspan x="31.142" y="42.5">injections & reactivity </tspan>
+ </text>
+ </g>
+ <g transform="translate(317 707)">
+ <path d="M96.494 56.399l.01 1 .81 75.583 6-.064-6.85 14.074-7.15-13.924 6-.064-.81-75.584-.01-1 2-.021z" fill="#9AA9B2" fill-rule="nonzero"/>
+ <rect stroke="#23AC70" fill="#3AB881" x="-.5" y="-.5" width="192" height="58" rx="8"/>
+ <text font-family="Inter, Roboto, sans-serif" font-size="14" fill="#FFF">
+ <tspan x="36.456" y="24">Create app.$el and</tspan> <tspan x="52.148" y="42.5">append it to el</tspan>
+ </text>
+ </g>
+ <g transform="translate(367 855)">
+ <circle stroke="#DC424C" fill="#DB5860" cx="46" cy="46" r="46.5"/>
+ <text font-family="Inter, Roboto, sans-serif" font-size="14" fill="#FFF">
+ <tspan x="18.759" y="51">Mounted</tspan>
+ </text>
+ </g>
+ <g transform="translate(360 1121)">
+ <circle stroke="#DC424C" fill="#DB5860" cx="53" cy="53" r="53.5"/>
+ <text font-family="Inter, Roboto, sans-serif" font-size="14" fill="#FFF">
+ <tspan x="17.311" y="58">Unmounted</tspan>
+ </text>
+ </g>
+ </g>
+</svg>
diff --git a/src/.vuepress/public/images/options-api.png b/src/.vuepress/public/images/options-api.png
new file mode 100644
index 00000000..b8d75fe9
Binary files /dev/null and b/src/.vuepress/public/images/options-api.png differ
diff --git a/src/.vuepress/public/images/oxford-comma.jpg b/src/.vuepress/public/images/oxford-comma.jpg
new file mode 100644
index 00000000..1f576141
Binary files /dev/null and b/src/.vuepress/public/images/oxford-comma.jpg differ
diff --git a/src/.vuepress/public/images/sponsors/laravel.png b/src/.vuepress/public/images/sponsors/laravel.png
index 1533073c..9f2576b5 100644
Binary files a/src/.vuepress/public/images/sponsors/laravel.png and b/src/.vuepress/public/images/sponsors/laravel.png differ
diff --git a/src/.vuepress/public/manifest.json b/src/.vuepress/public/manifest.json
new file mode 100644
index 00000000..d4843777
--- /dev/null
+++ b/src/.vuepress/public/manifest.json
@@ -0,0 +1,35 @@
+{
+ "name": "Vue.js",
+ "short_name": "Vue.js",
+ "start_url": ".",
+ "display": "standalone",
+ "background_color": "#3eaf7c",
+ "description": "Vue.js framework documentation",
+ "icons": [
+ {
+ "src": "images/icons/android-icon-48x48.png",
+ "sizes": "48x48",
+ "type": "image/png"
+ },
+ {
+ "src": "images/icons/android-icon-72x72.png",
+ "sizes": "72x72",
+ "type": "image/png"
+ },
+ {
+ "src": "images/icons/android-icon-96x96.png",
+ "sizes": "96x96",
+ "type": "image/png"
+ },
+ {
+ "src": "images/icons/apple-icon-144x144.png",
+ "sizes": "144x144",
+ "type": "image/png"
+ },
+ {
+ "src": "images/icons/android-icon-192x192.png",
+ "sizes": "192x192",
+ "type": "image/png"
+ }
+ ]
+}
diff --git a/src/.vuepress/styles/index.styl b/src/.vuepress/styles/index.styl
index fa83fb36..e4d5bb76 100644
--- a/src/.vuepress/styles/index.styl
+++ b/src/.vuepress/styles/index.styl
@@ -125,31 +125,6 @@
}
}
-.scrimba,
-.vueschool {
- background-color: #e7ecf3;
- padding: 1em 1.25em;
- border-radius: 2px;
- color: #486491;
- position: relative;
- margin: 24px 0;
-
- a {
- color: #486491;
- position: relative;
- padding-left :16px;
- }
-
- &::before {
- content: "\f144";
- font-family: 'FontAwesome';
- font-size: 2em;
- display: inline-block;
- color: #73abfe;
- vertical-align: middle;
- }
-}
-
.sidebar-group.is-sub-group > .sidebar-heading:not(.clickable) {
font-size: inherit;
cursor: pointer!important;
diff --git a/src/.vuepress/theme/components/BuySellAds.vue b/src/.vuepress/theme/components/BuySellAds.vue
new file mode 100644
index 00000000..17df4bd1
--- /dev/null
+++ b/src/.vuepress/theme/components/BuySellAds.vue
@@ -0,0 +1,115 @@
+<template>
+ <div class="bsa-cpc-wrapper">
+ <div class="bsa-cpc"></div>
+ </div>
+</template>
+
+<script>
+/* global _bsa */
+const ID = 'bsa-cpc-script'
+
+export default {
+ name: 'BuySellAds',
+ props: {
+ code: {
+ type: String,
+ required: true
+ },
+ placement: {
+ type: String,
+ required: true
+ }
+ },
+
+ methods: {
+ load() {
+ if (typeof _bsa !== 'undefined' && _bsa) {
+ _bsa.init('default', this.code, `placement:${this.placement}`, {
+ target: '.bsa-cpc',
+ align: 'horizontal',
+ disable_css: 'true'
+ })
+ }
+ }
+ },
+
+ mounted() {
+ if (!document.getElementById(ID)) {
+ const s = document.createElement('script')
+ s.id = ID
+ s.src = `//m.servedby-buysellads.com/monetization.js`
+ document.head.appendChild(s)
+ s.onload = () => {
+ this.load()
+ }
+ } else {
+ this.load()
+ }
+ }
+}
+</script>
+
+<style>
+.bsa-cpc-wrapper {
+ font-size: 0.95rem;
+ /* from Page.vue */
+ max-width: 50rem;
+ margin: 0px auto;
+ padding: 1rem 2rem 0;
+ margin-bottom: -1rem;
+}
+@media (max-width: 419px) {
+ .bsa-cpc-wrapper {
+ padding: 0 1.5rem;
+ }
+}
+.bsa-cpc {
+ font-size: 0.9em;
+ background-color: #f8f8f8;
+ border-radius: 6px;
+}
+
+.bsa-cpc .default-text {
+ display: inline;
+}
+
+.bsa-cpc a._default_ {
+ text-align: left;
+ display: block;
+ text-decoration: none;
+ padding: 10px 15px 12px;
+ margin-bottom: 20px;
+ color: #666;
+ font-weight: 400;
+ line-height: 18px;
+}
+.bsa-cpc a._default_ .default-image img {
+ height: 20px;
+ border-radius: 3px;
+ vertical-align: middle;
+ position: relative;
+ top: -1px;
+}
+.bsa-cpc a._default_ .default-title {
+ font-weight: 600;
+}
+.bsa-cpc a._default_ .default-description:after {
+ font-size: 0.85em;
+ content: 'Sponsored';
+ color: #1c90f3;
+ border: 1px solid #1c90f3;
+ border-radius: 3px;
+ padding: 0 4px 1px;
+ margin-left: 6px;
+}
+.bsa-cpc .default-ad {
+ display: none;
+}
+.bsa-cpc a._default_ .default-image,
+.bsa-cpc a._default_ .default-title,
+.bsa-cpc a._default_ .default-description {
+ display: inline;
+ vertical-align: middle;
+ margin-right: 6px;
+}
+</style>
diff --git a/src/.vuepress/theme/components/CarbonAds.vue b/src/.vuepress/theme/components/CarbonAds.vue
new file mode 100644
index 00000000..98e53cc3
--- /dev/null
+++ b/src/.vuepress/theme/components/CarbonAds.vue
@@ -0,0 +1,79 @@
+<template>
+ <div class="carbon-ads"></div>
+</template>
+
+<script>
+export default {
+ name: 'CarbonAds',
+ props: {
+ code: {
+ type: String,
+ required: true
+ },
+ placement: {
+ type: String,
+ required: true
+ }
+ },
+
+ mounted() {
+ const s = document.createElement('script')
+ s.id = '_carbonads_js'
+ s.src = `//cdn.carbonads.com/carbon.js?serve=${this.code}&placement=${this.placement}`
+ this.$el.appendChild(s)
+ }
+}
+</script>
+
+<style>
+.carbon-ads {
+ min-height: 102px;
+ font-size: 0.75rem;
+
+ width: 125px;
+ position: fixed;
+ z-index: 1;
+ bottom: 14px;
+ right: 14px;
+ padding: 10px;
+ border-radius: 4px;
+ background-color: rgba(255, 255, 255, 0.8);
+}
+
+@media screen and (max-width: 1376px) {
+ .carbon-ads {
+ position: relative;
+ bottom: auto;
+ right: auto;
+
+ float: right;
+ margin: 71px 12px 0 15px;
+ padding: 0 0 10px 10px;
+ z-index: 5;
+ }
+}
+
+.carbon-ads a {
+ color: #444;
+ font-weight: normal;
+ display: inline;
+}
+
+.carbon-ads .carbon-img img {
+ display: block;
+ width: 125px;
+}
+
+.carbon-ads .carbon-poweredby {
+ color: #999;
+ display: block;
+ margin-top: 0.5em;
+}
+
+@media (max-width: 719px) {
+ .carbon-ads .carbon-img img {
+ width: 100px;
+ height: 77px;
+ }
+}
+</style>
diff --git a/src/.vuepress/theme/components/Home.vue b/src/.vuepress/theme/components/Home.vue
index 730bf5dd..f28bcde0 100644
--- a/src/.vuepress/theme/components/Home.vue
+++ b/src/.vuepress/theme/components/Home.vue
@@ -39,7 +39,7 @@
<Content class="theme-default-content custom" />
- <section class="section-sponsors" ref="sponsors">
+ <section class="section-sponsors" :class="{ active: sponsorsActive }" ref="sponsors">
<div class="inner">
<PatreonSponsors :sponsors="sponsors" />
<OpenCollectiveSponsors />
@@ -85,7 +85,8 @@ export default {
},
data: () => ({
- sponsors
+ sponsors,
+ sponsorsActive: false
}),
computed: {
@@ -103,29 +104,19 @@ export default {
},
mounted() {
- if (!window) {
- return
- }
+ window.addEventListener('scroll', this.onPageScroll)
+ },
- const sponsors = this.$refs.sponsors
- let sponsorTop = sponsors.offsetTop
- let sponsorActive = false
-
- window.addEventListener('resize', () => (sponsorTop = sponsors.offsetTop))
-
- window.addEventListener('scroll', () => {
- if (window.pageYOffset > sponsorTop - 100) {
- if (!sponsorActive) {
- sponsorActive = true
- sponsors.classList.add('active')
- }
- } else {
- if (sponsorActive) {
- sponsorActive = false
- sponsors.classList.remove('active')
- }
- }
- })
+ beforeDestroy() {
+ window.removeEventListener('scroll', this.onPageScroll)
+ },
+
+ methods: {
+ onPageScroll() {
+ const sponsorTop = this.$refs.sponsors.offsetTop
+
+ this.sponsorsActive = window.pageYOffset > sponsorTop - 100
+ }
}
}
</script>
diff --git a/src/.vuepress/theme/components/Navbar.vue b/src/.vuepress/theme/components/Navbar.vue
index e5d209b3..1073cab9 100644
--- a/src/.vuepress/theme/components/Navbar.vue
+++ b/src/.vuepress/theme/components/Navbar.vue
@@ -26,7 +26,7 @@
<SearchBox
v-if="
isAlgoliaSearch === false &&
- !(
+ (
$site.themeConfig.search !== false &&
$page.frontmatter.search !== false
)
@@ -68,7 +68,7 @@ export default {
},
isAlgoliaSearch() {
- return this.algolia && this.algolia.apiKey && this.algolia.indexName
+ return !!(this.algolia && this.algolia.apiKey && this.algolia.indexName)
}
},
@@ -108,7 +108,7 @@ $navbar-horizontal-padding = 1.5rem;
padding: $navbar-vertical-padding $navbar-horizontal-padding;
line-height: $navbarHeight - 1.4rem;
- a, span, img {
+ a, img {
display: inline-block;
}
diff --git a/src/.vuepress/theme/components/Newsletter.vue b/src/.vuepress/theme/components/Newsletter.vue
index 6f90294e..9967cbce 100644
--- a/src/.vuepress/theme/components/Newsletter.vue
+++ b/src/.vuepress/theme/components/Newsletter.vue
@@ -84,6 +84,7 @@
transition: all 0.15s ease;
box-sizing: border-box;
border: 1px solid currentColor;
+ appearance: none;
}
}
</style>
diff --git a/src/.vuepress/theme/layouts/Layout.vue b/src/.vuepress/theme/layouts/Layout.vue
index 2c7250ca..e7890e08 100644
--- a/src/.vuepress/theme/layouts/Layout.vue
+++ b/src/.vuepress/theme/layouts/Layout.vue
@@ -22,9 +22,21 @@
<Page v-else :sidebar-items="sidebarItems">
<template #top>
+ <CarbonAds
+ v-if="adsConfig"
+ :key="'ca:' + $page.path"
+ :code="adsConfig.carbon"
+ :placement="adsConfig.placement"
+ />
<slot name="page-top" />
</template>
<template #bottom>
+ <BuySellAds
+ v-if="adsConfig"
+ :key="'bsa:' + $page.path"
+ :code="adsConfig.custom"
+ :placement="adsConfig.placement"
+ />
<slot name="page-bottom" />
</template>
</Page>
@@ -36,6 +48,8 @@ import Home from '@theme/components/Home.vue'
import Navbar from '@theme/components/Navbar.vue'
import Page from '@theme/components/Page.vue'
import Sidebar from '@theme/components/Sidebar.vue'
+import BuySellAds from '@theme/components/BuySellAds.vue'
+import CarbonAds from '@theme/components/CarbonAds.vue'
import { resolveSidebarItems } from '../util'
export default {
@@ -45,17 +59,19 @@ export default {
Home,
Page,
Sidebar,
- Navbar
+ Navbar,
+ BuySellAds,
+ CarbonAds
},
- data () {
+ data() {
return {
isSidebarOpen: false
}
},
computed: {
- shouldShowNavbar () {
+ shouldShowNavbar() {
const { themeConfig } = this.$site
const { frontmatter } = this.$page
if (frontmatter.navbar === false || themeConfig.navbar === false) {
@@ -70,7 +86,7 @@ export default {
)
},
- shouldShowSidebar () {
+ shouldShowSidebar() {
const { frontmatter } = this.$page
return (
!frontmatter.home &&
@@ -79,7 +95,7 @@ export default {
)
},
- sidebarItems () {
+ sidebarItems() {
return resolveSidebarItems(
this.$page,
this.$page.regularPath,
@@ -88,7 +104,7 @@ export default {
)
},
- pageClasses () {
+ pageClasses() {
const userPageClass = this.$page.frontmatter.pageClass
return [
{
@@ -98,30 +114,34 @@ export default {
},
userPageClass
]
+ },
+
+ adsConfig() {
+ return this.$site.themeConfig.carbonAds
}
},
- mounted () {
+ mounted() {
this.$router.afterEach(() => {
this.isSidebarOpen = false
})
},
methods: {
- toggleSidebar (to) {
+ toggleSidebar(to) {
this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
this.$emit('toggle-sidebar', this.isSidebarOpen)
},
// side swipe
- onTouchStart (e) {
+ onTouchStart(e) {
this.touchStart = {
x: e.changedTouches[0].clientX,
y: e.changedTouches[0].clientY
}
},
- onTouchEnd (e) {
+ onTouchEnd(e) {
const dx = e.changedTouches[0].clientX - this.touchStart.x
const dy = e.changedTouches[0].clientY - this.touchStart.y
if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
diff --git a/src/.vuepress/theme/styles/index.styl b/src/.vuepress/theme/styles/index.styl
index f92d5035..f23c9dee 100644
--- a/src/.vuepress/theme/styles/index.styl
+++ b/src/.vuepress/theme/styles/index.styl
@@ -115,7 +115,7 @@ ul, ol
padding-left 1.2em
strong
- font-weight 500
+ font-weight 600
h1, h2, h3, h4, h5, h6
font-weight 500
@@ -251,5 +251,3 @@ th, td
img
max-width: 140px;
max-height: 60px;
-
-
diff --git a/src/README.md b/src/README.md
index a497bd22..77fd39c1 100644
--- a/src/README.md
+++ b/src/README.md
@@ -11,7 +11,7 @@ actionButtons:
- text: Get Started
link: /guide/introduction
- text: GitHub
- link: https://github.com/vuejs/vue
+ link: https://github.com/vuejs/vue-next
extraClass: github grey
icon: fa fa-github
target: _blank
@@ -27,10 +27,10 @@ features:
Minimal Optimization Efforts
footer: |
Released under the <a href="https://opensource.org/licenses/MIT" target="_blank" rel="noopener">MIT License</a><br>
- Copyright © 2014-2020 Evan You
+ Copyright © 2014-2021 Evan You
socialIcons:
- type: GitHub
- link: https://github.com/vuejs/vue
+ link: https://github.com/vuejs/vue-next
- type: Twitter
link: https://twitter.com/vuejs
- type: Medium
diff --git a/src/api/application-api.md b/src/api/application-api.md
index d48aab61..2dd0d7b4 100644
--- a/src/api/application-api.md
+++ b/src/api/application-api.md
@@ -22,7 +22,7 @@ In addition, since the `createApp` method returns the application instance itsel
- **Returns:**
- The application instance if a `definition` argument was passed
- - The component definition if a `definition` argument was not passed
+ - The component definition if a `definition` argument was not passed
- **Usage:**
@@ -73,7 +73,7 @@ app.config = {...}
- **Returns:**
- The application instance if a `definition` argument was passed
- - The directive definition if a `definition` argument was not passed
+ - The directive definition if a `definition` argument was not passed
- **Usage:**
@@ -88,6 +88,8 @@ const app = createApp({})
// register
app.directive('my-directive', {
// Directive has a set of lifecycle hooks:
+ // called before bound element's attributes or event listeners are applied
+ created() {},
// called before bound element's parent component is mounted
beforeMount() {},
// called when bound element's parent component is mounted
@@ -168,7 +170,7 @@ Apart from `el`, you should treat these arguments as read-only and never modify
- **Returns:**
- - The application instance
+ - The application instance
- **Usage:**
@@ -189,7 +191,7 @@ Apart from `el`, you should treat these arguments as read-only and never modify
- **Usage:**
- Mounts a root component of the application instance on the provided DOM element.
+ The `innerHTML` of the provided DOM element will be replaced with the rendered template of the application root component.
- **Example:**
@@ -224,10 +226,10 @@ app.mount('#my-app')
- **Usage:**
Sets a value that can be injected into all components within the application. Components should use `inject` to receive the provided values.
-
+
From a `provide`/`inject` perspective, the application can be thought of as the root-level ancestor, with the root component as its only child.
- This method should not be confused with the [provide component option](options-composition.html#provide-inject) or the [provide function](composition-api.html#provide-inject) in the composition API. While those are also part of the same `provide`/`inject` mechanism, they are used to configure values provided by a component rather than an application.
+ This method should not be confused with the [provide component option](options-composition.html#provide-inject) or the [provide function](composition-api.html#provide-inject) in the composition API. While those are also part of the same `provide`/`inject` mechanism, they are used to configure values provided by a component rather than an application.
Providing values via the application is especially useful when writing plugins, as plugins typically wouldn't be able to provide values using components. It is an alternative to using [globalProperties](application-config.html#globalproperties).
@@ -259,13 +261,9 @@ app.provide('user', 'administrator')
## unmount
-- **Arguments:**
-
- - `{Element | string} rootContainer`
-
- **Usage:**
- Unmounts a root component of the application instance on the provided DOM element.
+ Unmounts a root component of the application instance.
- **Example:**
@@ -283,7 +281,7 @@ const app = createApp({})
app.mount('#my-app')
// Application will be unmounted 5 seconds after mount
-setTimeout(() => app.unmount('#my-app'), 5000)
+setTimeout(() => app.unmount(), 5000)
```
## use
@@ -300,9 +298,45 @@ setTimeout(() => app.unmount('#my-app'), 5000)
- **Usage:**
Install a Vue.js plugin. If the plugin is an Object, it must expose an `install` method. If it is a function itself, it will be treated as the install method.
-
+
The install method will be called with the application as its first argument. Any `options` passed to `use` will be passed on in subsequent arguments.
When this method is called on the same plugin multiple times, the plugin will be installed only once.
+- **Example:**
+
+ ```js
+ import { createApp } from 'vue'
+ import MyPlugin from './plugins/MyPlugin'
+
+ const app = createApp({})
+
+ app.use(MyPlugin)
+ app.mount('#app')
+ ```
+
- **See also:** [Plugins](../guide/plugins.html)
+
+## version
+
+- **Usage:**
+
+ Provides the installed version of Vue as a string. This is especially useful for community [plugins](/guide/plugins.html), where you might use different strategies for different versions.
+
+- **Example:**
+
+ ```js
+ export default {
+ install(app) {
+ const version = Number(app.version.split('.')[0])
+
+ if (version < 3) {
+ console.warn('This plugin requires Vue 3')
+ }
+
+ // ...
+ }
+ }
+ ```
+
+- **See also**: [Global API - version](/api/global-api.html#version)
diff --git a/src/api/application-config.md b/src/api/application-config.md
index b702fcd8..0f70f892 100644
--- a/src/api/application-config.md
+++ b/src/api/application-config.md
@@ -1,26 +1,14 @@
# Application Config
-`config` is an object containing Vue application global configurations. You can modify its properties listed below before mounting your application:
+Every Vue application exposes a `config` object that contains the configuration settings for that application:
```js
-const app = Vue.createApp({})
+const app = createApp({})
-app.config = {...}
+console.log(app.config)
```
-## devtools
-
-- **Type:** `boolean`
-
-- **Default:** `true` (`false` in production builds)
-
-- **Usage:**
-
-```js
-app.config.devtools = true
-```
-
-Configure whether to allow [vue-devtools](https://github.com/vuejs/vue-devtools) inspection. This option's default value is `true` in development builds and `false` in production builds. You can set it to `true` to enable inspection for production builds.
+You can modify its properties, listed below, before mounting your application.
## errorHandler
@@ -85,7 +73,7 @@ This can replace Vue 2.x `Vue.prototype` extending:
Vue.prototype.$http = () => {}
// After
-const app = Vue.createApp({})
+const app = createApp({})
app.config.globalProperties.$http = () => {}
```
@@ -106,6 +94,10 @@ Specifies a method to recognize custom elements defined outside of Vue (e.g., us
> Note that all native HTML and SVG tags don't need to be matched in this function - Vue parser performs this check automatically
+::: tip Important
+This config option is only respected when using the runtime compiler. If you are using the runtime-only build, `isCustomElement` must be passed to `@vue/compiler-dom` in the build setup instead - for example, via the [`compilerOptions` option in vue-loader](https://vue-loader.vuejs.org/options.html#compileroptions).
+:::
+
## optionMergeStrategies
- **Type:** `{ [key: string]: Function }`
@@ -115,7 +107,7 @@ Specifies a method to recognize custom elements defined outside of Vue (e.g., us
- **Usage:**
```js
-const app = Vue.createApp({
+const app = createApp({
mounted() {
console.log(this.$options.hello)
}
@@ -129,7 +121,7 @@ app.mixin({
hello: 'Vue'
})
-// 'Hello, Vue
+// 'Hello, Vue'
```
Define merging strategies for custom options.
diff --git a/src/api/basic-reactivity.md b/src/api/basic-reactivity.md
index 8fed58a1..6efea0e8 100644
--- a/src/api/basic-reactivity.md
+++ b/src/api/basic-reactivity.md
@@ -18,6 +18,44 @@ The reactive conversion is "deep"—it affects all nested properties. In the [ES
function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
```
+::: tip Note
+`reactive` will unwrap all the deep [refs](./refs-api.html#ref), while maintaining the ref reactivity
+
+```ts
+const count = ref(1)
+const obj = reactive({ count })
+
+// ref will be unwrapped
+console.log(obj.count === count.value) // true
+
+// it will update `obj.count`
+count.value++
+console.log(count.value) // 2
+console.log(obj.count) // 2
+
+// it will also update `count` ref
+obj.count++
+console.log(obj.count) // 3
+console.log(count.value) // 3
+```
+
+:::
+
+::: warning Important
+When assigning a [ref](./refs-api.html#ref) to a `reactive` property, that ref will be automatically unwrapped.
+
+```ts
+const count = ref(1)
+const obj = reactive({})
+
+obj.count = count
+
+console.log(obj.count) // 1
+console.log(obj.count === count.value) // true
+```
+
+:::
+
## `readonly`
Takes an object (reactive or plain) or a [ref](./refs-api.html#ref) and returns a readonly proxy to the original. A readonly proxy is deep: any nested property accessed will be readonly as well.
@@ -39,6 +77,19 @@ original.count++
copy.count++ // warning!
```
+As with [`reactive`](#reactive), if any property uses a `ref` it will be automatically unwrapped when it is accessed via the proxy:
+
+```js
+const raw = {
+ count: ref(123)
+}
+
+const copy = readonly(raw)
+
+console.log(raw.count.value) // 123
+console.log(copy.count) // 123
+```
+
## `isProxy`
Checks if an object is a proxy created by [`reactive`](#reactive) or [`readonly`](#readonly).
@@ -153,6 +204,8 @@ isReactive(state.nested) // false
state.nested.bar++ // non-reactive
```
+Unlike [`reactive`](#reactive), any property that uses a [`ref`](/api/refs-api.html#ref) will **not** be automatically unwrapped by the proxy.
+
## `shallowReadonly`
Creates a proxy that makes its own properties readonly, but does not perform deep readonly conversion of nested objects (exposes raw values).
@@ -171,3 +224,5 @@ state.foo++
isReadonly(state.nested) // false
state.nested.bar++ // works
```
+
+Unlike [`readonly`](#readonly), any property that uses a [`ref`](/api/refs-api.html#ref) will **not** be automatically unwrapped by the proxy.
diff --git a/src/api/built-in-components.md b/src/api/built-in-components.md
index 2920ff83..23ec5f25 100644
--- a/src/api/built-in-components.md
+++ b/src/api/built-in-components.md
@@ -1,14 +1,30 @@
# Built-In Components
+Built-in components can be used directly in templates without needing to be registered.
+
+The `<keep-alive>`, `<transition>`, `<transition-group>`, and `<teleport>` components can all be tree-shaken by bundlers, so that they are only included in the build if they're used. They can also be imported explicitly if you need direct access to the component itself:
+
+```js
+// CDN build of Vue
+const { KeepAlive, Teleport, Transition, TransitionGroup } = Vue
+```
+
+```js
+// ESM build of Vue
+import { KeepAlive, Teleport, Transition, TransitionGroup } from 'vue'
+```
+
+`<component>` and `<slot>` are component-like features of template syntax. They are not true components and they can't be imported like the components shown above.
+
## component
- **Props:**
- - `is` - `string | ComponentDefinition | ComponentConstructor`
+ - `is` - `string | Component`
- **Usage:**
- A "meta component" for rendering dynamic components. The actual component to render is determined by the `is` prop:
+ A "meta component" for rendering dynamic components. The actual component to render is determined by the `is` prop. An `is` prop as a string could be either an HTML tag name or a Component name.
```html
<!-- a dynamic component controlled by -->
@@ -17,8 +33,35 @@
<!-- can also render registered component or component passed as prop -->
<component :is="$options.components.child"></component>
+
+ <!-- can reference components by string -->
+ <component :is="condition ? 'FooComponent' : 'BarComponent'"></component>
+
+ <!-- can be used to render native HTML elements -->
+ <component :is="href ? 'a' : 'span'"></component>
+ ```
+
+ The built-in components `KeepAlive`, `Transition`, `TransitionGroup`, and `Teleport` can all be passed to `is`, but you must register them if you want to pass them by name. For example:
+
+ ```js
+ const { Transition, TransitionGroup } = Vue
+
+ const Component = {
+ components: {
+ Transition,
+ TransitionGroup
+ },
+
+ template: `
+ <component :is="isGroup ? 'TransitionGroup' : 'Transition'">
+ ...
+ </component>
+ `
+ }
```
+ Registration is not required if you pass the component itself to `is` rather than its name.
+
- **See also:** [Dynamic Components](../guide/component-dynamic-async.html)
## transition
@@ -31,7 +74,7 @@
- `css` - `boolean`. Whether to apply CSS transition classes. Defaults to `true`. If set to `false`, will only trigger JavaScript hooks registered via component events.
- `type` - `string`. Specifies the type of transition events to wait for to determine transition end timing. Available values are `"transition"` and `"animation"`. By default, it will automatically detect the type that has a longer duration.
- `mode` - `string` Controls the timing sequence of leaving/entering transitions. Available modes are `"out-in"` and `"in-out"`; defaults to simultaneous.
- - `duration` - `number | {`enter`: number,`leave`: number }`. Specifies the duration of transition. By default, Vue waits for the first `transitionend` or `animationend` event on the root transition element.
+ - `duration` - `number | { enter: number, leave: number }`. Specifies the duration of transition. By default, Vue waits for the first `transitionend` or `animationend` event on the root transition element.
- `enter-from-class` - `string`
- `leave-from-class` - `string`
- `appear-class` - `string`
@@ -80,7 +123,7 @@
```
```js
- const app = Vue.createApp({
+ const app = createApp({
...
methods: {
transitionComplete (el) {
@@ -99,7 +142,7 @@
- **Props:**
- - `tag` - `string`, defaults to `span`.
+ - `tag` - `string`, if not defined, renders without a root element.
- `move-class` - overwrite CSS class applied during moving transition.
- exposes the same props as `<transition>` except `mode`.
@@ -109,7 +152,7 @@
- **Usage:**
- `<transition-group>` serve as transition effects for **multiple** elements/components. The `<transition-group>` renders a real DOM element. By default it renders a `<span>`, and you can configure what element it should render via the `tag` attribute.
+ `<transition-group>` provides transition effects for **multiple** elements/components. By default it doesn't render a wrapper DOM element, but one can be defined via the `tag` attribute.
Note that every child in a `<transition-group>` must be [**uniquely keyed**](./special-attributes.html#key) for the animations to work properly.
@@ -165,7 +208,7 @@
- **`include` and `exclude`**
- The `include` and `exclude` props allow components to be conditionally cached. Both props can be a comma-delimited string, a RegExp or an Array:
+ The `include` and `exclude` props allow components to be conditionally cached. Both props can be a comma-delimited string, a RegExp or an array:
```html
<!-- comma-delimited string -->
diff --git a/src/api/composition-api.md b/src/api/composition-api.md
index 2494474f..4f518614 100644
--- a/src/api/composition-api.md
+++ b/src/api/composition-api.md
@@ -117,6 +117,9 @@ The component instance context is also set during the synchronous execution of l
- `errorCaptured` -> `onErrorCaptured`
- `renderTracked` -> `onRenderTracked`
- `renderTriggered` -> `onRenderTriggered`
+ - `activated` -> `onActivated`
+ - `deactivated` -> `onDeactivated`
+
- **See also**: [Composition API lifecycle hooks](../guide/composition-api-lifecycle-hooks.html)
@@ -135,6 +138,12 @@ function provide<T>(key: InjectionKey<T> | string, value: T): void
function inject<T>(key: InjectionKey<T> | string): T | undefined
// with default value
function inject<T>(key: InjectionKey<T> | string, defaultValue: T): T
+// with factory
+function inject<T>(
+ key: InjectionKey<T> | string,
+ defaultValue: () => T,
+ treatDefaultAsFactory: true
+): T
```
Vue provides an `InjectionKey` interface which is a generic type that extends `Symbol`. It can be used to sync the type of the injected value between the provider and the consumer:
@@ -158,3 +167,58 @@ const foo = inject<string>('foo') // string | undefined
- **See also**:
- [Provide / Inject](../guide/component-provide-inject.html)
- [Composition API Provide / Inject](../guide/composition-api-provide-inject.html)
+
+## `getCurrentInstance`
+
+`getCurrentInstance` enables access to an internal component instance useful for advanced usages or for library creators.
+
+```ts
+import { getCurrentInstance } from 'vue'
+
+const MyComponent = {
+ setup() {
+ const internalInstance = getCurrentInstance()
+
+ internalInstance.appContext.config.globalProperties // access to globalProperties
+ }
+}
+```
+
+`getCurrentInstance` **only** works during [setup](#setup) or [Lifecycle Hooks](#lifecycle-hooks)
+
+> When using outside of [setup](#setup) or [Lifecycle Hooks](#lifecycle-hooks), please call `getCurrentInstance()` on `setup` and use the instance instead.
+
+```ts
+const MyComponent = {
+ setup() {
+ const internalInstance = getCurrentInstance() // works
+
+ const id = useComponentId() // works
+
+ const handleClick = () => {
+ getCurrentInstance() // doesn't work
+ useComponentId() // doesn't work
+
+ internalInstance // works
+ }
+
+ onMounted(() => {
+ getCurrentInstance() // works
+ })
+
+ return () =>
+ h(
+ 'button',
+ {
+ onClick: handleClick
+ },
+ `uid: ${id}`
+ )
+ }
+}
+
+// also works if called on a composable
+function useComponentId() {
+ return getCurrentInstance().uid
+}
+```
diff --git a/src/api/computed-watch-api.md b/src/api/computed-watch-api.md
index 124a3d0a..f691c730 100644
--- a/src/api/computed-watch-api.md
+++ b/src/api/computed-watch-api.md
@@ -65,7 +65,7 @@ function watchEffect(
): StopHandle
interface WatchEffectOptions {
- flush?: 'pre' | 'post' | 'sync'
+ flush?: 'pre' | 'post' | 'sync' // default: 'pre'
onTrack?: (event: DebuggerEvent) => void
onTrigger?: (event: DebuggerEvent) => void
}
@@ -132,7 +132,7 @@ watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
**Typing:**
```ts
-// wacthing single source
+// watching single source
function watch<T>(
source: WatcherSource<T>,
callback: (
diff --git a/src/api/directives.md b/src/api/directives.md
index de4cbc21..7ef2c4bb 100644
--- a/src/api/directives.md
+++ b/src/api/directives.md
@@ -62,7 +62,7 @@
This directive triggers transitions when its condition changes.
- When used together with `v-if`, `v-for` has a higher priority than v-if. See the [list rendering guide](../guide/list.html#v-for-with-v-if) for details.
+ When used together, `v-if` has a higher priority than `v-for`. We don't recommend using these two directives together on one element — see the [list rendering guide](../guide/list.html#v-for-with-v-if) for details.
- **See also:** [Conditional Rendering - v-if](../guide/conditional.html#v-if)
@@ -197,7 +197,7 @@
<!-- shorthand -->
<button @click="doThis"></button>
- <!-- shorthand dynamic event (2.6.0+) -->
+ <!-- shorthand dynamic event -->
<button @[event]="doThis"></button>
<!-- stop propagation -->
diff --git a/src/api/global-api.md b/src/api/global-api.md
index 0df238c9..01d2ed51 100644
--- a/src/api/global-api.md
+++ b/src/api/global-api.md
@@ -1,11 +1,29 @@
+---
+sidebarDepth: 1
+---
+
# Global API
+If you're using a CDN build then the functions of the global API are accessible via the global `Vue` object. e.g.:
+
+```js
+const { createApp, h, nextTick } = Vue
+```
+
+If you're using ES modules then they can be imported directly:
+
+```js
+import { createApp, h, nextTick } from 'vue'
+```
+
+Global functions that handle reactivity, such as `reactive` and `ref`, are documented separately. See [Reactivity API](/api/reactivity-api.html) for those functions.
+
## createApp
Returns an application instance which provides an application context. The entire component tree mounted by the application instance share the same context.
```js
-const app = Vue.createApp({})
+const app = createApp({})
```
You can chain other methods after `createApp`, they can be found in [Application API](./application-api.html)
@@ -15,7 +33,7 @@ You can chain other methods after `createApp`, they can be found in [Application
The function receives a root component options object as a first parameter:
```js
-const app = Vue.createApp({
+const app = createApp({
data() {
return {
...
@@ -30,7 +48,7 @@ const app = Vue.createApp({
With the second parameter, we can pass root props to the application:
```js
-const app = Vue.createApp(
+const app = createApp(
{
props: ['username']
},
@@ -60,11 +78,11 @@ export type CreateAppFunction<HostElement> = (
## h
-Returns a returns "virtual node", usually abbreviated to **VNode**: a plain object which contains information describing to Vue what kind of node it should render on the page, including descriptions of any child nodes. It is intended for manually written [render functions](../guide/render-function.md):
+Returns a "virtual node", usually abbreviated to **VNode**: a plain object which contains information describing to Vue what kind of node it should render on the page, including descriptions of any child nodes. It is intended for manually written [render functions](../guide/render-function.md):
```js
render() {
- return Vue.h('h1', {}, 'Some title')
+ return h('h1', {}, 'Some title')
}
```
@@ -78,7 +96,7 @@ Accepts three arguments: `type`, `props` and `children`
- **Details:**
- An HTML tag name, a component or an async component. Using function returning null would render a comment. This parameter is required
+ An HTML tag name, a component, an async component, or a functional component. Using function returning null would render a comment. This parameter is required
#### props
@@ -192,12 +210,25 @@ const AsyncComp = defineAsyncComponent({
// The error component will be displayed if a timeout is
// provided and exceeded. Default: Infinity.
timeout: 3000,
- // A function that returns a boolean indicating whether the async component should retry when the loader promise rejects
- retryWhen: error => error.code !== 404,
- // Maximum allowed retries number
- maxRetries: 3,
- // Defining if component is suspensible
- suspensible: false
+ // Defining if component is suspensible. Default: true.
+ suspensible: false,
+ /**
+ *
+ * @param {*} error Error message object
+ * @param {*} retry A function that indicating whether the async component should retry when the loader promise rejects
+ * @param {*} fail End of failure
+ * @param {*} attempts Maximum allowed retries number
+ */
+ onError(error, retry, fail, attempts) {
+ if (error.message.match(/fetch/) && attempts <= 3) {
+ // retry on fetch errors, 3 max attempts
+ retry()
+ } else {
+ // Note that retry/fail are like resolve/reject of a promise:
+ // one of them must be called for the error handling to continue.
+ fail()
+ }
+ },
})
```
@@ -211,10 +242,10 @@ const AsyncComp = defineAsyncComponent({
Allows resolving a `component` by its name, if it is available in the current application instance.
-Returns a `Component` or `undefined` when not found.
+Returns a `Component` or the argument `name` when not found.
```js
-const app = Vue.createApp({})
+const app = createApp({})
app.component('MyComponent', {
/* ... */
})
@@ -229,9 +260,9 @@ render() {
### Arguments
-Accepts one argument: `component`
+Accepts one argument: `name`
-#### component
+#### name
- **Type:** `String`
@@ -279,7 +310,7 @@ Allows resolving a `directive` by its name, if it is available in the current ap
Returns a `Directive` or `undefined` when not found.
```js
-const app = Vue.createApp({})
+const app = createApp({})
app.directive('highlight', {})
```
@@ -386,7 +417,7 @@ For example, for runtime-dom, HostNode would be the DOM
Custom renderers can pass in the platform specific types like this:
-```js
+```ts
import { createRenderer } from 'vue'
const { render, createApp } = createRenderer<Node, Element>({
patchProp,
@@ -434,3 +465,88 @@ const app = createApp({
```
**See also**: [`$nextTick` instance method](instance-methods.html#nexttick)
+
+## mergeProps
+
+Takes multiple objects containing VNode props and merges them into a single object. A newly created object is returned, the objects passed as arguments are not modified.
+
+Any number of objects can be passed, with properties from later arguments taking precedence. Event listeners are handled specially, as are `class` and `style`, with the values of these properties being merged rather than overwritten.
+
+```js
+import { h, mergeProps } from 'vue'
+
+export default {
+ inheritAttrs: false,
+
+ render() {
+ const props = mergeProps({
+ // The class will be merged with any class from $attrs
+ class: 'active'
+ }, this.$attrs)
+
+ return h('div', props)
+ }
+}
+```
+
+## useCssModule
+
+:::warning
+`useCssModule` can only be used within `render` or `setup` functions.
+:::
+
+Allows CSS modules to be accessed within the [`setup`](/api/composition-api.html#setup) function of a [single-file component](/guide/single-file-component.html):
+
+```vue
+<script>
+import { h, useCssModule } from 'vue'
+
+export default {
+ setup () {
+ const style = useCssModule()
+
+ return () => h('div', {
+ class: style.success
+ }, 'Task complete!')
+ }
+}
+</script>
+
+<style module>
+.success {
+ color: #090;
+}
+</style>
+```
+
+For more information about using CSS modules, see [Vue Loader - CSS Modules](https://vue-loader.vuejs.org/guide/css-modules.html).
+
+### Arguments
+
+Accepts one argument: `name`
+
+#### name
+
+- **Type:** `String`
+
+- **Details:**
+
+ The name of the CSS module. Defaults to `'$style'`.
+
+## version
+
+Provides the installed version of Vue as a string.
+
+```js
+const version = Number(Vue.version.split('.')[0])
+
+if (version === 3) {
+ // Vue 3
+} else if (version === 2) {
+ // Vue 2
+} else {
+ // Unsupported versions of Vue
+}
+```
+
+**See also**: [Application API - version](/api/application-api.html#version)
diff --git a/src/api/index.md b/src/api/index.md
new file mode 100644
index 00000000..8daef545
--- /dev/null
+++ b/src/api/index.md
@@ -0,0 +1,15 @@
+# API
+
+The Vue.js API contains the following categories:
+
+- [Application Config](/api/application-config.html)
+- [Application API](/api/application-api.html)
+- [Global API](/api/global-api.html)
+- [Options API](/api/options-api.html)
+- [Instance Properties](/api/instance-properties.html)
+- [Instance Methods](/api/instance-methods.html)
+- [Directives](/api/directives.html)
+- [Special Attributes](/api/special-attributes.html)
+- [Built-in Components](/api/built-in-components.html)
+- [Reactivity API](/api/reactivity-api.html)
+- [Composition API](/api/composition-api.html)
diff --git a/src/api/instance-methods.md b/src/api/instance-methods.md
index f1025401..df065464 100644
--- a/src/api/instance-methods.md
+++ b/src/api/instance-methods.md
@@ -9,17 +9,18 @@
- `{Object} options (optional)`
- `{boolean} deep`
- `{boolean} immediate`
+ - `{string} flush`
- **Returns:** `{Function} unwatch`
- **Usage:**
- Watch a reactive property or a computed function on the component instance for changes. The callback gets called with the new value and the old value for the given property. We can only pass top-level `data`, `prop`, or `computed` property name as a string. For more complex expressions or nested properties, use a function instead.
+ Watch a reactive property or a computed function on the component instance for changes. The callback gets called with the new value and the old value for the given property. We can only pass top-level `data`, `props`, or `computed` property name as a string. For more complex expressions or nested properties, use a function instead.
- **Example:**
```js
- const app = Vue.createApp({
+ const app = createApp({
data() {
return {
a: 1,
@@ -58,10 +59,10 @@
})
```
- When watched value is an Object or Array, any changes to its properties or elements won't trigger the watcher because they reference the same Object/Array:
+ When watched value is an object or array, any changes to its properties or elements won't trigger the watcher because they reference the same object/array:
```js
- const app = Vue.createApp({
+ const app = createApp({
data() {
return {
article: {
@@ -80,8 +81,8 @@
})
},
methods: {
- // These methods won't trigger a watcher because we changed only a property of Object/Array,
- // not the Object/Array itself
+ // These methods won't trigger a watcher because we changed only a property of object/array,
+ // not the object/array itself
changeArticleText() {
this.article.text = 'Vue 3 is awesome'
},
@@ -89,7 +90,7 @@
this.comments.push('New comment')
},
- // These methods will trigger a watcher because we replaced Object/Array completely
+ // These methods will trigger a watcher because we replaced object/array completely
changeWholeArticle() {
this.article = { text: 'Vue 3 is awesome' }
},
@@ -103,7 +104,7 @@
`$watch` returns an unwatch function that stops firing the callback:
```js
- const app = Vue.createApp({
+ const app = createApp({
data() {
return {
a: 1
@@ -120,7 +121,9 @@
- **Option: deep**
- To also detect nested value changes inside Objects, you need to pass in `deep: true` in the options argument. Note that you don't need to do so to listen for Array mutations.
+ To also detect nested value changes inside Objects, you need to pass in `deep: true` in the options argument. This option also can be used to watch array mutations.
+
+ > Note: when mutating (rather than replacing) an Object or an Array and watch with deep option, the old value will be the same as new value because they reference the same Object/Array. Vue doesn't keep a copy of the pre-mutate value.
```js
vm.$watch('someObject', callback, {
@@ -158,7 +161,9 @@
If you still want to call an unwatch function inside the callback, you should check its availability first:
```js
- const unwatch = vm.$watch(
+ let unwatch = null
+
+ unwatch = vm.$watch(
'value',
function() {
doSomething()
@@ -170,6 +175,24 @@
)
```
+- **Option: flush**
+
+ The `flush` option allows for greater control over the timing of the callback. It can be set to `'pre'`, `'post'` or `'sync'`.
+
+ The default value is `'pre'`, which specifies that the callback should be invoked before rendering. This allows the callback to update other values before the template runs.
+
+ The value `'post'` can be used to defer the callback until after rendering. This should be used if the callback needs access to the updated DOM or child components via `$refs`.
+
+ If `flush` is set to `'sync'`, the callback will be called synchronously, as soon as the value changes.
+
+ For both `'pre'` and `'post'`, the callback is buffered using a queue. The callback will only be added to the queue once, even if the watched value changes multiple times. The interim values will be skipped and won't be passed to the callback.
+
+ Buffering the callback not only improves performance but also helps to ensure data consistency. The watchers won't be triggered until the code performing the data updates has finished.
+
+ `'sync'` watchers should be used sparingly, as they don't have these benefits.
+
+ For more information about `flush` see [Effect Flush Timing](../guide/reactivity-computed-watchers.html#effect-flush-timing).
+
- **See also:** [Watchers](../guide/computed.html#watchers)
## $emit
@@ -192,7 +215,7 @@
```
```js
- const app = Vue.createApp({
+ const app = createApp({
methods: {
sayHi() {
console.log('Hi!')
@@ -201,6 +224,7 @@
})
app.component('welcome-button', {
+ emits: ['welcome'],
template: `
<button v-on:click="$emit('welcome')">
Click me to be welcomed
@@ -215,12 +239,12 @@
```html
<div id="emit-example-argument">
- <advice-component v-on:give-advice="showAdvice"></advice-component>
+ <advice-component v-on:advise="showAdvice"></advice-component>
</div>
```
```js
- const app = Vue.createApp({
+ const app = createApp({
methods: {
showAdvice(advice) {
alert(advice)
@@ -229,6 +253,7 @@
})
app.component('advice-component', {
+ emits: ['advise'],
data() {
return {
adviceText: 'Some advice'
@@ -237,12 +262,14 @@
template: `
<div>
<input type="text" v-model="adviceText">
- <button v-on:click="$emit('give-advice', adviceText)">
+ <button v-on:click="$emit('advise', adviceText)">
Click me for sending advice
</button>
</div>
`
})
+
+ app.mount('#emit-example-argument')
```
- **See also:**
@@ -268,7 +295,7 @@
- **Example:**
```js
- Vue.createApp({
+ createApp({
// ...
methods: {
// ...
diff --git a/src/api/instance-properties.md b/src/api/instance-properties.md
index 83f786bd..acc82da6 100644
--- a/src/api/instance-properties.md
+++ b/src/api/instance-properties.md
@@ -28,6 +28,8 @@
The root DOM element that the component instance is managing.
+ For components using [fragments](../guide/migration/fragments), `$el` will be the placeholder DOM node that Vue uses to keep track of the component's position in the DOM. It is recommended to use [template refs](../guide/component-template-refs.html) for direct access to DOM elements instead of relying on `$el`.
+
## $options
- **Type:** `Object`
@@ -39,7 +41,7 @@
The instantiation options used for the current component instance. This is useful when you want to include custom properties in the options:
```js
- const app = Vue.createApp({
+ const app = createApp({
customOption: 'foo',
created() {
console.log(this.$options.customOption) // => 'foo'
@@ -100,14 +102,15 @@
```
```js
- const app = Vue.createApp({})
+ const { createApp, h } = Vue
+ const app = createApp({})
app.component('blog-post', {
render() {
- return Vue.h('div', [
- Vue.h('header', this.$slots.header()),
- Vue.h('main', this.$slots.default()),
- Vue.h('footer', this.$slots.footer())
+ return h('div', [
+ h('header', this.$slots.header()),
+ h('main', this.$slots.default()),
+ h('footer', this.$slots.footer())
])
}
})
@@ -144,3 +147,4 @@ Contains parent-scope attribute bindings and events that are not recognized (and
- **See also:**
- [Non-Prop Attributes](../guide/component-attrs.html)
+ - [Options / Misc - inheritAttrs](./options-misc.html#inheritattrs)
diff --git a/src/api/options-api.md b/src/api/options-api.md
new file mode 100644
index 00000000..858cce52
--- /dev/null
+++ b/src/api/options-api.md
@@ -0,0 +1,10 @@
+# Options API
+
+The Options API contains the following sections:
+
+- [Data](/api/options-data.html)
+- [DOM](/api/options-dom.html)
+- [Lifecycle Hooks](/api/options-lifecycle-hooks.html)
+- [Assets](/api/options-assets.html)
+- [Composition](/api/options-composition.html)
+- [Miscellaneous](/api/options-misc.html)
diff --git a/src/api/options-assets.md b/src/api/options-assets.md
index 2ac7d507..e19d4362 100644
--- a/src/api/options-assets.md
+++ b/src/api/options-assets.md
@@ -8,6 +8,23 @@
A hash of directives to be made available to the component instance.
+- **Usage:**
+
+ ```js
+ const app = createApp({})
+
+ app.component('focused-input', {
+ directives: {
+ focus: {
+ mounted(el) {
+ el.focus()
+ }
+ }
+ },
+ template: `<input v-focus>`
+ })
+ ```
+
- **See also:** [Custom Directives](../guide/custom-directive.html)
## components
@@ -18,4 +35,19 @@
A hash of components to be made available to the component instance.
+- **Usage:**
+
+ ```js
+ const Foo = {
+ template: `<div>Foo</div>`
+ }
+
+ const app = createApp({
+ components: {
+ Foo
+ },
+ template: `<Foo />`
+ })
+ ```
+
- **See also:** [Components](../guide/component-basics.html)
diff --git a/src/api/options-composition.md b/src/api/options-composition.md
index 689b01f6..ac850701 100644
--- a/src/api/options-composition.md
+++ b/src/api/options-composition.md
@@ -19,7 +19,7 @@
}
}
- Vue.createApp({
+ createApp({
created() {
console.log(2)
},
@@ -299,7 +299,7 @@ The `setup` function is a new component option. It serves as the entry point for
}
```
- `attrs` and `slots` are proxies to the corresponding values on the internal component instance. This ensures they always expose the latest values even after updates so that we can destructure them without worrying accessing a stale reference:
+ `attrs` and `slots` are proxies to the corresponding values on the internal component instance. This ensures they always expose the latest values even after updates so that we can destructure them without worrying about accessing a stale reference:
```js
const MyComponent = {
diff --git a/src/api/options-data.md b/src/api/options-data.md
index 34d854bb..7c542556 100644
--- a/src/api/options-data.md
+++ b/src/api/options-data.md
@@ -21,7 +21,7 @@
const data = { a: 1 }
// The object is added to a component instance
- const vm = Vue.createApp({
+ const vm = createApp({
data() {
return data
}
@@ -59,7 +59,7 @@
- **Example:**
```js
- const app = Vue.createApp({})
+ const app = createApp({})
// simple syntax
app.component('props-demo-simple', {
@@ -92,7 +92,7 @@
- **Details:**
- Computed properties to be mixed into the Vcomponent instance. All getters and setters have their `this` context automatically bound to the component instance.
+ Computed properties to be mixed into the component instance. All getters and setters have their `this` context automatically bound to the component instance.
Note that if you use an arrow function with a computed property, `this` won't be the component's instance, but you can still access the instance as the function's first argument:
@@ -107,7 +107,7 @@
- **Example:**
```js
- const app = Vue.createApp({
+ const app = createApp({
data() {
return { a: 1 }
},
@@ -152,7 +152,7 @@
- **Example:**
```js
- const app = Vue.createApp({
+ const app = createApp({
data() {
return { a: 1 }
},
@@ -177,12 +177,12 @@
- **Details:**
- An object where keys are expressions to watch and values are the corresponding callbacks. The value can also be a string of a method name, or an Object that contains additional options. The component instance will call `$watch()` for each entry in the object at instantiation.
+ An object where keys are reactive properties to watch — examples include [data](/api/options-data.html#data-2) or [computed](/api/options-data.html#computed) properties — and values are the corresponding callbacks. The value can also be a string of a method name, or an Object that contains additional options. The component instance will call `$watch()` for each entry in the object at instantiation. See [$watch](instance-methods.html#watch) for more information about the `deep`, `immediate` and `flush` options.
- **Example:**
```js
- const app = Vue.createApp({
+ const app = createApp({
data() {
return {
a: 1,
@@ -190,11 +190,12 @@
c: {
d: 4
},
- e: 'test',
- f: 5
+ e: 5,
+ f: 6
}
},
watch: {
+ // watching top-level property
a(val, oldVal) {
console.log(`new: ${val}, old: ${oldVal}`)
},
@@ -207,6 +208,10 @@
},
deep: true
},
+ // watching a single nested property:
+ 'c.d': function (val, oldVal) {
+ // do something
+ },
// the callback will be called immediately after the start of the observation
e: {
handler(val, oldVal) {
@@ -255,14 +260,14 @@
- **Details:**
- A list/hash of custom events that can be emitted from the component. It has an Array-based simple syntax and an alternative Object-based syntax that allows to configure an event validation.
+ A list/hash of custom events that can be emitted from the component. It has an array-based simple syntax and an alternative Object-based syntax that allows to configure an event validation.
In Object-based syntax, the value of each property can either be `null` or a validator function. The validation function will receive the additional arguments passed to the `$emit` call. For example, if `this.$emit('foo', 1)` is called, the corresponding validator for `foo` will receive the argument `1`. The validator function should return a boolean to indicate whether the event arguments are valid.
- **Usage:**
```js
- const app = Vue.createApp({})
+ const app = createApp({})
// Array syntax
app.component('todo-item', {
diff --git a/src/api/options-dom.md b/src/api/options-dom.md
index 5aca0f1a..c6eb4385 100644
--- a/src/api/options-dom.md
+++ b/src/api/options-dom.md
@@ -6,7 +6,7 @@
- **Details:**
- A string template to be used as the markup for the component instance. The template will **replace** the mounted element. Any existing markup inside the mounted element will be ignored, unless content distribution slots are present in the template.
+ A string template to be used as the markup for the component instance. The template will **replace** the `innerHTML` of mounted element. Any existing markup inside the mounted element will be ignored, unless content distribution slots are present in the template.
If the string starts with `#` it will be used as a `querySelector` and use the selected element's innerHTML as the template string. This allows the use of the common `<script type="x-template">` trick to include templates.
@@ -15,7 +15,8 @@
:::
:::tip Note
- If render function is present in the Vue option, the template will be ignored.:::
+ If render function is present in the Vue option, the template will be ignored.
+ :::
- **See also:**
- [Lifecycle Diagram](../guide/instance.html#lifecycle-diagram)
@@ -38,11 +39,12 @@
```
```js
- const app = Vue.createApp({})
+ const { createApp, h } = Vue
+ const app = createApp({})
app.component('my-title', {
render() {
- return Vue.h(
+ return h(
'h1', // tag name,
this.blogTitle // tag content
)
diff --git a/src/api/options-lifecycle-hooks.md b/src/api/options-lifecycle-hooks.md
index aa0b6612..dab2e2e3 100644
--- a/src/api/options-lifecycle-hooks.md
+++ b/src/api/options-lifecycle-hooks.md
@@ -42,9 +42,9 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
- **Details:**
- Called after the instance has been mounted, where element, passed to `Vue.createApp({}).mount()` is replaced by the newly created `vm.$el`. If the root instance is mounted to an in-document element, `vm.$el` will also be in-document when `mounted` is called.
+ Called after the instance has been mounted, where element, passed to [`app.mount`](/api/application-api.html#mount) is replaced by the newly created `vm.$el`. If the root instance is mounted to an in-document element, `vm.$el` will also be in-document when `mounted` is called.
- Note that `mounted` does **not** guarantee that all child components have also been mounted. If you want to wait until the entire view has been rendered, you can use [vm.\$nextTick](../api/instance-methods.html#nexttick) inside of `mounted`:
+ Note that `mounted` does **not** guarantee that all child components have also been mounted. If you want to wait until the entire view has been rendered, you can use [vm.$nextTick](../api/instance-methods.html#nexttick) inside of `mounted`:
```js
mounted() {
@@ -81,7 +81,7 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
The component's DOM will have been updated when this hook is called, so you can perform DOM-dependent operations here. However, in most cases you should avoid changing state inside the hook. To react to state changes, it's usually better to use a [computed property](./options-data.html#computed) or [watcher](./options-data.html#watch) instead.
- Note that `updated` does **not** guarantee that all child components have also been re-rendered. If you want to wait until the entire view has been re-rendered, you can use [vm.\$nextTick](../api/instance-methods.html#nexttick) inside of `updated`:
+ Note that `updated` does **not** guarantee that all child components have also been re-rendered. If you want to wait until the entire view has been re-rendered, you can use [vm.$nextTick](../api/instance-methods.html#nexttick) inside of `updated`:
```js
updated() {
@@ -107,7 +107,7 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
**This hook is not called during server-side rendering.**
- **See also:**
- - [Dynamic Components - keep-alive](../guide/component-basics.html#keep-alive)
+ - [Dynamic Components - keep-alive](../guide/component-dynamic-async.html#dynamic-components-with-keep-alive)
## deactivated
@@ -120,7 +120,7 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
**This hook is not called during server-side rendering.**
- **See also:**
- - [Dynamic Components - keep-alive](../guide/component-basics.html#keep-alive)
+ - [Dynamic Components - keep-alive](../guide/component-dynamic-async.html#dynamic-components-with-keep-alive)
## beforeUnmount
@@ -186,7 +186,7 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
```
```js
- const app = Vue.createApp({
+ const app = createApp({
data() {
return {
cart: 0
@@ -220,7 +220,7 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
- **Details:**
- Called when virtual DOM re-render is triggered.Similarly to [`renderTracked`](#rendertracked), receives a `debugger event` as an argument. This event tells you what operation triggered the re-rendering and the target object and key of that operation.
+ Called when virtual DOM re-render is triggered. Similarly to [`renderTracked`](#rendertracked), receives a `debugger event` as an argument. This event tells you what operation triggered the re-rendering and the target object and key of that operation.
- **Usage:**
@@ -232,7 +232,7 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
```
```js
- const app = Vue.createApp({
+ const app = createApp({
data() {
return {
cart: 0
diff --git a/src/api/options-misc.md b/src/api/options-misc.md
index 55cd1e41..1f5243ae 100644
--- a/src/api/options-misc.md
+++ b/src/api/options-misc.md
@@ -4,14 +4,35 @@
- **Type:** `string`
-- **Restriction:** only respected when used as a component option.
-
- **Details:**
- Allow the component to recursively invoke itself in its template. Note that when a component is registered globally with `Vue.createApp({}).component({})`, the global ID is automatically set as its name.
+ Allow the component to recursively invoke itself in its template. Note that when a component is registered globally with [`app.component`](/api/application-api.html#component), the global ID is automatically set as its name.
Another benefit of specifying a `name` option is debugging. Named components result in more helpful warning messages. Also, when inspecting an app in the [vue-devtools](https://github.com/vuejs/vue-devtools), unnamed components will show up as `<AnonymousComponent>`, which isn't very informative. By providing the `name` option, you will get a much more informative component tree.
+## delimiters
+
+- **Type:** `Array<string>`
+
+- **Default:** `{{ "['\u007b\u007b', '\u007d\u007d']" }}`
+
+- **Restrictions:** This option is only available in the full build, with in-browser template compilation.
+
+- **Details:**
+
+ Sets the delimiters used for text interpolation within the template.
+
+ Typically this is used to avoid conflicting with server-side frameworks that also use mustache syntax.
+
+- **Example:**
+
+ ```js
+ createApp({
+ // Delimiters changed to ES6 template string style
+ delimiters: ['${', '}']
+ })
+ ```
+
## inheritAttrs
- **Type:** `boolean`
@@ -22,14 +43,13 @@
By default, parent scope attribute bindings that are not recognized as props will "fallthrough". This means that when we have a single-root component, these bindings will be applied to the root element of the child component as normal HTML attributes. When authoring a component that wraps a target element or another component, this may not always be the desired behavior. By setting `inheritAttrs` to `false`, this default behavior can be disabled. The attributes are available via the `$attrs` instance property and can be explicitly bound to a non-root element using `v-bind`.
- Note: this option does **not** affect `class` and `style` bindings.
-
- **Usage:**
```js
app.component('base-input', {
inheritAttrs: false,
props: ['label', 'value'],
+ emits: ['input'],
template: `
<label>
{{ label }}
@@ -43,4 +63,4 @@
})
```
-- **See also:** [Disabling Attribute Inheritance](../guide/component-props.html#disabling-attribute-inheritance)
+- **See also:** [Disabling Attribute Inheritance](../guide/component-attrs.html#disabling-attribute-inheritance)
diff --git a/src/api/reactivity-api.md b/src/api/reactivity-api.md
new file mode 100644
index 00000000..90b8aecc
--- /dev/null
+++ b/src/api/reactivity-api.md
@@ -0,0 +1,7 @@
+# Reactivity API
+
+The Reactivity API contains the following sections:
+
+- [Basic Reactivity APIs](/api/basic-reactivity.html)
+- [Refs](/api/refs-api.html)
+- [Computed and watch](/api/computed-watch-api.html)
diff --git a/src/api/refs-api.md b/src/api/refs-api.md
index 46d26f49..6fcdbb67 100644
--- a/src/api/refs-api.md
+++ b/src/api/refs-api.md
@@ -38,7 +38,7 @@ foo.value = 123 // ok!
If the type of the generic is unknown, it's recommended to cast `ref` to `Ref<T>`:
-```js
+```ts
function useState<State extends string>(initial: State) {
const state = ref(initial) as Ref<State> // state.value -> State extends string
return state
@@ -49,7 +49,7 @@ function useState<State extends string>(initial: State) {
Returns the inner value if the argument is a [`ref`](#ref), otherwise return the argument itself. This is a sugar function for `val = isRef(val) ? val.value : val`.
-```js
+```ts
function useFoo(x: number | Ref<number>) {
const unwrapped = unref(x) // unwrapped is guaranteed to be number now
}
@@ -84,6 +84,8 @@ export default {
}
```
+`toRef` will return a usable ref even if the source property doesn't currently exist. This makes it especially useful when working with optional props, which wouldn't be picked up by [`toRefs`](#torefs).
+
## `toRefs`
Converts a reactive object to a plain object where each property of the resulting object is a [`ref`](#ref) pointing to the corresponding property of the original object.
@@ -140,6 +142,8 @@ export default {
}
```
+`toRefs` will only generate refs for properties that are included in the source object. To create a ref for a specific property use [`toRef`](#toref) instead.
+
## `isRef`
Checks if a value is a ref object.
@@ -213,7 +217,7 @@ isReactive(foo.value) // false
## `triggerRef`
-Execute any effects tied to a [`shallowRef`](#shallowref) manually.
+Execute any effects tied to a [`shallowRef`](#shallowref) manually.
```js
const shallow = shallowRef({
diff --git a/src/api/special-attributes.md b/src/api/special-attributes.md
index 8413e570..96ebc7ff 100644
--- a/src/api/special-attributes.md
+++ b/src/api/special-attributes.md
@@ -63,8 +63,6 @@ For example:
```html
<!-- component changes when currentView changes -->
<component :is="currentView"></component>
-
-For detailed usage, follow the links in the description above.
```
- **See also:**
diff --git a/src/coc/index.md b/src/coc/index.md
index 3447052c..fd53230a 100644
--- a/src/coc/index.md
+++ b/src/coc/index.md
@@ -1,45 +1,45 @@
-# Code Of Conduct
-
-## Our Pledge
-
-In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, political party, or sexual identity and orientation. Note, however, that religion, political party, or other ideological affiliation provide no exemptions for the behavior we outline as unacceptable in this Code of Conduct.
-
-## Our Standards
-
-Examples of behavior that contributes to creating a positive environment include:
-
-- Using welcoming and inclusive language
-- Being respectful of differing viewpoints and experiences
-- Gracefully accepting constructive criticism
-- Focusing on what is best for the community
-- Showing empathy towards other community members
-
-Examples of unacceptable behavior by participants include:
-
-- The use of sexualized language or imagery and unwelcome sexual attention or advances
-- Trolling, insulting/derogatory comments, and personal or political attacks
-- Public or private harassment
-- Publishing others' private information, such as a physical or electronic address, without explicit permission
-- Other conduct which could reasonably be considered inappropriate in a professional setting
-
-## Our Responsibilities
-
-Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
-
-Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
-
-## Scope
-
-This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at community@vuejs.org. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
-
-Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
-
-[homepage]: https://www.contributor-covenant.org
\ No newline at end of file
+# Code Of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, political party, or sexual identity and orientation. Note, however, that religion, political party, or other ideological affiliation provide no exemptions for the behavior we outline as unacceptable in this Code of Conduct.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+- Using welcoming and inclusive language
+- Being respectful of differing viewpoints and experiences
+- Gracefully accepting constructive criticism
+- Focusing on what is best for the community
+- Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+- The use of sexualized language or imagery and unwelcome sexual attention or advances
+- Trolling, insulting/derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or electronic address, without explicit permission
+- Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at community@vuejs.org. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
diff --git a/src/community/join.md b/src/community/join.md
index a6face1a..b78cbf35 100644
--- a/src/community/join.md
+++ b/src/community/join.md
@@ -1,62 +1,60 @@
-# Join the Vue.js Community!
-
-Vue's community is growing incredibly fast and if you're reading this, there's a good chance you're ready to join it. So... welcome!
-
-Now we'll answer both what the community can do for you and what you can do for the community.
-
-## Resources
-
-### Code of Conduct
-
-Our [Code of Conduct](/coc) is a guide to make it easier to enrich all of us and the technical communities in which we participate.
-
-### Get Support
-
-- [Forum](https://forum.vuejs.org/): The best place to ask questions and get answers about Vue and its ecosystem.
-- [Chat](https://chat.vuejs.org/): A place for Vue devs to meet and chat in real time.
-- [Meetups](https://events.vuejs.org/meetups): Want to find local Vue.js enthusiasts like yourself? Interested in becoming a community leader? We have the help and support you need right here!
-- [GitHub](https://github.com/vuejs): If you have a bug to report or feature to request, that's what the GitHub issues are for. We also welcome pull requests!
-
-### Explore the Ecosystem
-
-- [The Awesome Vue Page](https://github.com/vuejs/awesome-vue): See what other awesome resources have been published by other awesome people.
-- [The "Show and Tell" Subforum](https://forum.vuejs.org/c/show-and-tell): Another great place to check out what others have built with and for the growing Vue ecosystem.
-
-## What You Can Do
-
-### Contribute Code
-
-As with any project, there are rules to contributing. To ensure that we can help you or accept your pull request as quickly as possible, please read [the contributing guide](https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md).
-
-After that, you'll be ready to contribute to Vue's core repositories:
-
-- [vue](https://github.com/vuejs/vue): the core library
-- [vuex](https://github.com/vuejs/vuex): Flux-inspired state management
-- [vue-router](https://github.com/vuejs/vue-router): a routing system for SPAs
-
-...as well as many smaller official [companion libraries](https://github.com/vuejs).
-
-### Share (and Build) Your Experience
-
-Apart from answering questions and sharing resources in the forum and chat, there are a few other less obvious ways to share and expand what you know:
-
-- **Develop learning materials.** It's often said that the best way to learn is to teach. If there's something interesting you're doing with Vue, strengthen your expertise by writing a blog post, developing a workshop, or even publishing a gist that you share on social media.
-- **Watch a repo you care about.** This will send you notifications whenever there's activity in that repository, giving you insider knowledge about ongoing discussions and upcoming features. It's a fantastic way to build expertise so that you're eventually able to help address issues and pull requests.
-
-### Translate Docs
-
-Vue has already spread across the globe, with even the core team in at least half a dozen timezones. [The forum](https://forum.vuejs.org/) includes 7 languages and counting and many of our docs have [actively-maintained translations](https://github.com/vuejs?utf8=%E2%9C%93&q=vuejs.org). We're very proud of Vue's international reach, but we can do even better.
-
-I hope that right now, you're reading this sentence in your preferred language. If not, would you like to help us get there?
-
-If so, please feel free to fork the repo for [these docs](https://github.com/vuejs/vuejs.org/) or for any other officially maintained documentation, then start translating. Once you've made some progress, open an issue or pull request in the main repo and we'll put out a call for more contributors to help you out.
-
-### Become a Community Leader
-
-There's a lot you can do to help Vue grow in your community:
-
-- **Present at your local meetup.** Whether it's giving a talk or running a workshop, you can bring a lot of value to your community by helping both new and experienced Vue developers continue to grow.
-- **Start your own meetup.** If there's not already a Vue meetup in your area, you can start your own! Use the [resources at events.vuejs.org](https://events.vuejs.org/resources/#getting-started) to help you succeed!
-- **Help meetup organizers.** There can never be too much help when it comes to running an event, so offer a hand to help out local organizers to help make every event a success.
-
-If you have any questions on how you can get more involved with your local Vue community, reach out at [@Vuejs_Events](https://www.twitter.com/vuejs_events)!
\ No newline at end of file
+# Join the Vue.js Community!
+
+Vue's community is growing incredibly fast and if you're reading this, there's a good chance you're ready to join it. So... welcome!
+
+Now we'll answer both what the community can do for you and what you can do for the community.
+
+## Resources
+
+### Code of Conduct
+
+Our [Code of Conduct](/coc) is a guide to make it easier to enrich all of us and the technical communities in which we participate.
+
+### Get Support
+
+- [Forum](https://forum.vuejs.org/): The best place to ask questions and get answers about Vue and its ecosystem.
+- [Chat](https://chat.vuejs.org/): A place for Vue devs to meet and chat in real time.
+- [Meetups](https://events.vuejs.org/meetups): Want to find local Vue.js enthusiasts like yourself? Interested in becoming a community leader? We have the help and support you need right here!
+- [GitHub](https://github.com/vuejs): If you have a bug to report or feature to request, that's what the GitHub issues are for. We also welcome pull requests!
+
+### Explore the Ecosystem
+
+- [The Awesome Vue Page](https://github.com/vuejs/awesome-vue): See what other awesome resources have been published by other awesome people.
+- [The "Show and Tell" Subforum](https://forum.vuejs.org/c/show-and-tell): Another great place to check out what others have built with and for the growing Vue ecosystem.
+
+## What You Can Do
+
+### Contribute Code
+
+As with any project, there are rules to contributing. To ensure that we can help you or accept your pull request as quickly as possible, please read [the contributing guide](https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md).
+
+After that, you'll be ready to contribute to Vue's core repositories:
+
+- [vue](https://github.com/vuejs/vue): the core library
+- [vuex](https://github.com/vuejs/vuex): Flux-inspired state management
+- [vue-router](https://github.com/vuejs/vue-router): a routing system for SPAs
+
+...as well as many smaller official [companion libraries](https://github.com/vuejs).
+
+### Share (and Build) Your Experience
+
+Apart from answering questions and sharing resources in the forum and chat, there are a few other less obvious ways to share and expand what you know:
+
+- **Develop learning materials.** It's often said that the best way to learn is to teach. If there's something interesting you're doing with Vue, strengthen your expertise by writing a blog post, developing a workshop, or even publishing a gist that you share on social media.
+- **Watch a repo you care about.** This will send you notifications whenever there's activity in that repository, giving you insider knowledge about ongoing discussions and upcoming features. It's a fantastic way to build expertise so that you're eventually able to help address issues and pull requests.
+
+### Translate Docs
+
+I hope that right now, you're reading this sentence in your preferred language. If not, would you like to help us get there?
+
+See the [Translations guide](/guide/contributing/translations.html) for more details on how you can get involved.
+
+### Become a Community Leader
+
+There's a lot you can do to help Vue grow in your community:
+
+- **Present at your local meetup.** Whether it's giving a talk or running a workshop, you can bring a lot of value to your community by helping both new and experienced Vue developers continue to grow.
+- **Start your own meetup.** If there's not already a Vue meetup in your area, you can start your own! Use the [resources at events.vuejs.org](https://events.vuejs.org/resources/#getting-started) to help you succeed!
+- **Help meetup organizers.** There can never be too much help when it comes to running an event, so offer a hand to help out local organizers to help make every event a success.
+
+If you have any questions on how you can get more involved with your local Vue community, reach out at [@Vuejs_Events](https://www.twitter.com/vuejs_events)!
diff --git a/src/community/partners.md b/src/community/partners.md
index 42110202..84b90487 100644
--- a/src/community/partners.md
+++ b/src/community/partners.md
@@ -4,4 +4,4 @@ Vue Partners are premium shops that provide first-class Vue consulting and devel
## Active Partners
-<community-partners-index/>
\ No newline at end of file
+<community-partners-index/>
diff --git a/src/community/team.md b/src/community/team.md
index 78fd051c..8350415d 100644
--- a/src/community/team.md
+++ b/src/community/team.md
@@ -1,3 +1,3 @@
# Meet the Team
-<community-team-index/>
\ No newline at end of file
+<community-team-index/>
diff --git a/src/community/themes.md b/src/community/themes.md
index 0dafd6ee..e8c1aeb1 100644
--- a/src/community/themes.md
+++ b/src/community/themes.md
@@ -1,3 +1,3 @@
# Themes
-<community-themes-index/>
\ No newline at end of file
+<community-themes-index/>
diff --git a/src/cookbook/automatic-global-registration-of-base-components.md b/src/cookbook/automatic-global-registration-of-base-components.md
new file mode 100644
index 00000000..c754c25c
--- /dev/null
+++ b/src/cookbook/automatic-global-registration-of-base-components.md
@@ -0,0 +1,75 @@
+# Automatic Global Registration of Base Components
+
+## Base Example
+
+Many of your components will be relatively generic, possibly only wrapping an element like an input or a button. We sometimes refer to these as [base components](../style-guide/#base-component-names-strongly-recommended) and they tend to be used very frequently across your components.
+
+The result is that many components may include long lists of base components:
+
+```js
+import BaseButton from './BaseButton.vue'
+import BaseIcon from './BaseIcon.vue'
+import BaseInput from './BaseInput.vue'
+export default {
+ components: {
+ BaseButton,
+ BaseIcon,
+ BaseInput
+ }
+}
+```
+
+Just to support relatively little markup in a template:
+
+```html
+<BaseInput v-model="searchText" @keydown.enter="search" />
+<BaseButton @click="search">
+ <BaseIcon name="search" />
+</BaseButton>
+```
+
+Fortunately, if you're using webpack (or [Vue CLI](https://github.com/vuejs/vue-cli), which uses webpack internally), you can use `require.context` to globally register only these very common base components. Here's an example of the code you might use to globally import base components in your app's entry file (e.g. `src/main.js`):
+
+```js
+import { createApp } from 'vue'
+import upperFirst from 'lodash/upperFirst'
+import camelCase from 'lodash/camelCase'
+import App from './App.vue'
+
+const app = createApp(App)
+
+const requireComponent = require.context(
+ // The relative path of the components folder
+ './components',
+ // Whether or not to look in subfolders
+ false,
+ // The regular expression used to match base component filenames
+ /Base[A-Z]\w+\.(vue|js)$/
+)
+
+requireComponent.keys().forEach(fileName => {
+ // Get component config
+ const componentConfig = requireComponent(fileName)
+
+ // Get PascalCase name of component
+ const componentName = upperFirst(
+ camelCase(
+ // Gets the file name regardless of folder depth
+ fileName
+ .split('/')
+ .pop()
+ .replace(/\.\w+$/, '')
+ )
+ )
+
+ app.component(
+ componentName,
+ // Look for the component options on `.default`, which will
+ // exist if the component was exported with `export default`,
+ // otherwise fall back to module's root.
+ componentConfig.default || componentConfig
+ )
+})
+
+app.mount('#app')
+```
diff --git a/src/cookbook/debugging-in-vscode.md b/src/cookbook/debugging-in-vscode.md
new file mode 100644
index 00000000..842656e6
--- /dev/null
+++ b/src/cookbook/debugging-in-vscode.md
@@ -0,0 +1,124 @@
+# Debugging in VS Code
+
+Every application reaches a point where it's necessary to understand failures, small to large. In this recipe, we explore a few workflows for VS Code users who would like to debug their application in the browser.
+
+This recipe shows how to debug [Vue CLI](https://github.com/vuejs/vue-cli) applications in VS Code as they run in the browser.
+
+## Prerequisites
+
+Make sure you have VS Code and the browser of your choice installed, and the latest version of the corresponding Debugger extension installed and enabled:
+
+- [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
+- [Debugger for Firefox](https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug)
+
+Install and create a project with the [vue-cli](https://github.com/vuejs/vue-cli), following the instructions in the [Vue CLI Guide](https://cli.vuejs.org/). Change into the newly created application directory and open VS Code.
+
+### Displaying Source Code in the Browser
+
+Before you can debug your Vue components from VS Code, you need to update the generated Webpack config to build sourcemaps. We do this so that our debugger has a way to map the code within a compressed file back to its position in the original file. This ensures that you can debug an application even after your assets have been optimized by Webpack.
+
+If you use Vue CLI 2, set or update the `devtool` property inside `config/index.js`:
+
+```json
+devtool: 'source-map',
+```
+
+If you use Vue CLI 3, set or update the `devtool` property inside `vue.config.js`:
+
+```js
+module.exports = {
+ configureWebpack: {
+ devtool: 'source-map',
+ },
+}
+```
+
+### Launching the Application from VS Code
+
+::: info
+We're assuming the port to be `8080` here. If it's not the case (for instance, if `8080` has been taken and Vue CLI automatically picks another port for you), just modify the configuration accordingly.
+:::
+
+Click on the Debugging icon in the Activity Bar to bring up the Debug view, then click on the gear icon to configure a launch.json file, selecting **Chrome/Firefox: Launch** as the environment. Replace content of the generated launch.json with the corresponding configuration:
+
+
+
+```json
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "type": "chrome",
+ "request": "launch",
+ "name": "vuejs: chrome",
+ "url": "http://localhost:8080",
+ "webRoot": "${workspaceFolder}/src",
+ "breakOnLoad": true,
+ "sourceMapPathOverrides": {
+ "webpack:///src/*": "${webRoot}/*"
+ }
+ },
+ {
+ "type": "firefox",
+ "request": "launch",
+ "name": "vuejs: firefox",
+ "url": "http://localhost:8080",
+ "webRoot": "${workspaceFolder}/src",
+ "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
+ }
+ ]
+}
+```
+
+## Setting a Breakpoint
+
+1. Set a breakpoint in **src/components/HelloWorld.vue** on `line 90` where the `data` function returns a string.
+
+
+
+2. Open your favorite terminal at the root folder and serve the app using Vue CLI:
+
+```
+npm run serve
+```
+
+3. Go to the Debug view, select the **'vuejs: chrome/firefox'** configuration, then press F5 or click the green play button.
+
+4. Your breakpoint should now be hit as a new browser instance opens `http://localhost:8080`.
+
+
+
+## Alternative Patterns
+
+### Vue Devtools
+
+There are other methods of debugging, varying in complexity. The most popular and simple of which is to use the excellent Vue.js devtools [for Chrome](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) and [for Firefox](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/). Some of the benefits of working with the devtools are that they enable you to live-edit data properties and see the changes reflected immediately. The other major benefit is the ability to do time travel debugging for Vuex.
+
+
+
+Please note that if the page uses a production/minified build of Vue.js (such as the standard link from a CDN), devtools inspection is disabled by default so the Vue pane won't show up. If you switch to an unminified version, you may have to give the page a hard refresh to see them.
+
+### Simple Debugger Statement
+
+The example above has a great workflow. However, there is an alternative option where you can use the [native debugger statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) directly in your code. If you choose to work this way, it's important that you remember to remove the statements when you're done.
+
+```vue
+<script>
+export default {
+ data() {
+ return {
+ message: ''
+ }
+ },
+ mounted() {
+ const hello = 'Hello World!'
+ debugger
+ this.message = hello
+ }
+};
+</script>
+```
+
+## Acknowledgements
+
+This recipe was based on a contribution from [Kenneth Auchenberg](https://twitter.com/auchenberg), [available here](https://github.com/Microsoft/VSCode-recipes/tree/master/vuejs-cli).
diff --git a/src/cookbook/editable-svg-icons.md b/src/cookbook/editable-svg-icons.md
index f598e5e5..360a0767 100644
--- a/src/cookbook/editable-svg-icons.md
+++ b/src/cookbook/editable-svg-icons.md
@@ -18,7 +18,7 @@ First, we'll create a folder for all of the icons, and name them in a standardiz
Here's an example repo to get you going, where you can see the entire setup: [https://github.com/sdras/vue-sample-svg-icons/](https://github.com/sdras/vue-sample-svg-icons/)
-
+
We'll create a base icon (`IconBase.vue`) component that uses a slot.
@@ -88,7 +88,7 @@ Now, if we'd like to make many sizes for the icon, we can do so very easily:
</p>
```
-<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/Screen%20Shot%202018-01-01%20at%204.51.40%20PM.png" width="450" />
+<img src="/images/editable-svg-icons-sizes.png" width="450" />
## Animatable Icons
@@ -143,7 +143,7 @@ export default {
We're applying `refs` to the groups of paths we need to move, and as both sides of the scissors have to move in tandem, we'll create a function we can reuse where we'll pass in the `refs`. The use of GreenSock helps resolve animation support and `transform-origin` issues across browser.
-<p data-height="300" data-theme-id="0" data-slug-hash="dJRpgY" data-default-tab="result" data-user="Vue" data-embed-version="2" data-pen-title="Editable SVG Icon System: Animated icon" class="codepen">See the Pen <a href="https://codepen.io/team/Vue/pen/dJRpgY/">Editable SVG Icon System: Animated icon</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>) on <a href="https://codepen.io">CodePen</a>.</p><script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Editable SVG Icon System: Animated icon" slug="dJRpgY" :preview="false" :editable="false" version="2" theme="0" />
<p style="margin-top:-30px">Pretty easily accomplished! And easy to update on the fly.</p>
diff --git a/src/examples/commits.md b/src/examples/commits.md
index b4e93d17..566c489c 100644
--- a/src/examples/commits.md
+++ b/src/examples/commits.md
@@ -2,9 +2,4 @@
> This example fetches latest Vue.js commits data from GitHub’s API and displays them as a list. You can switch between the master and dev branches.
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="RwaWmzY" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Commits">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/RwaWmzY">
- Vue 3 Commits</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Vue 3 Commits" slug="RwaWmzY" tab="js,result" />
diff --git a/src/examples/elastic-header.md b/src/examples/elastic-header.md
index b18af0ad..8e2fa0c8 100644
--- a/src/examples/elastic-header.md
+++ b/src/examples/elastic-header.md
@@ -1,8 +1,3 @@
# Elastic Header Example
-<p class="codepen" data-height="474" data-theme-id="39028" data-default-tab="js,result" data-user="immarina" data-slug-hash="ZEWGmar" style="height: 474px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Markdown Editor">
- <span>See the Pen <a href="https://codepen.io/immarina/pen/ZEWGmar">
- Vue 3 Markdown Editor</a> by Vue (<a href="https://codepen.io/immarina">@immarina</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Vue 3 Elastic Draggable Header Example" slug="PoWpdWY" :height="474" tab="js,result" :preview="false" :editable="false" />
diff --git a/src/examples/grid-component.md b/src/examples/grid-component.md
index 34d53f83..fe725ebf 100644
--- a/src/examples/grid-component.md
+++ b/src/examples/grid-component.md
@@ -2,9 +2,4 @@
> This is an example of creating a reusable grid component and using it with external data.
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="zYqvQgw" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Elastic Draggable Header Example">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/zYqvQgw">
- Vue 3 Elastic Draggable Header Example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Vue 3 Grid Component Example" slug="BaKbowJ" tab="js,result" />
diff --git a/src/examples/markdown.md b/src/examples/markdown.md
index 9066e5c9..12162df1 100644
--- a/src/examples/markdown.md
+++ b/src/examples/markdown.md
@@ -2,9 +2,4 @@
> A simple Markdown editor
-<p class="codepen" data-height="474" data-theme-id="39028" data-default-tab="js,result" data-user="immarina" data-slug-hash="oNxXzyB" style="height: 474px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Markdown Editor">
- <span>See the Pen <a href="https://codepen.io/immarina/pen/oNxXzyB">
- Vue 3 Markdown Editor</a> by Vue (<a href="https://codepen.io/immarina">@immarina</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Vue 3 Markdown Editor" slug="poReOvE" :height="474" tab="js,result" :preview="false" :editable="false" />
diff --git a/src/examples/modal.md b/src/examples/modal.md
index bc314697..7479a249 100644
--- a/src/examples/modal.md
+++ b/src/examples/modal.md
@@ -2,9 +2,4 @@
> Features used: component, prop passing, content insertion, transitions.
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="css,result" data-user="Vue" data-slug-hash="BaKoeXe" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Markdown Editor">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/BaKoeXe">
- Vue 3 Markdown Editor</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Vue 3 Modal Component" slug="mdPoyvv" tab="js,result" />
diff --git a/src/examples/select2.md b/src/examples/select2.md
index 178908aa..82c4f702 100644
--- a/src/examples/select2.md
+++ b/src/examples/select2.md
@@ -2,9 +2,4 @@
> In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom component.
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="eYZpwOB" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Wrapper Component Example">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/eYZpwOB">
- Vue 3 Wrapper Component Example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Vue 3 Wrapper Component Example" slug="eYZpwOB" tab="js,result" />
diff --git a/src/examples/svg.md b/src/examples/svg.md
index 1db7833a..c3d797a3 100644
--- a/src/examples/svg.md
+++ b/src/examples/svg.md
@@ -2,9 +2,4 @@
> This example showcases a combination of custom component, computed property, two-way binding and SVG support.
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="XWdmLWM" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 SVG Graph Example">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/XWdmLWM">
- Vue 3 SVG Graph Example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Vue 3 SVG Graph Example" slug="XWdmLWM" tab="js,result" />
diff --git a/src/examples/todomvc.md b/src/examples/todomvc.md
index 2e08eccd..4e68cf64 100644
--- a/src/examples/todomvc.md
+++ b/src/examples/todomvc.md
@@ -4,13 +4,6 @@
:::warning
Note that if your web browser is configured to block 3rd-party data/cookies, the example below will not work, as the **localStorage** data will fail to be saved.
-
-Additionally, due to limitations on CodePen, hashtag navigation will not work.
:::
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="Yzqyozj" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 TodoMVC">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/Yzqyozj">
- Vue 3 TodoMVC</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Vue 3 TodoMVC" slug="Yzqyozj" tab="js,result" />
diff --git a/src/examples/tree-view.md b/src/examples/tree-view.md
index d55a1d70..1b437b77 100644
--- a/src/examples/tree-view.md
+++ b/src/examples/tree-view.md
@@ -2,9 +2,4 @@
> Example of a tree view implementation showcasing recursive usage of components.
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="WNwQqbN" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Tree View">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/WNwQqbN">
- Vue 3 Tree View</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Vue 3 Tree View" slug="WNwQqbN" tab="js,result" />
diff --git a/src/guide/a11y-basics.md b/src/guide/a11y-basics.md
index e88d3407..e55d2648 100644
--- a/src/guide/a11y-basics.md
+++ b/src/guide/a11y-basics.md
@@ -2,7 +2,7 @@
Web accessibility (also known as a11y) refers to the practice of creating websites that can be used by anyone — be that a person with a disability, a slow connection, outdated or broken hardware or simply someone in an unfavorable environment. For example, adding subtitles to a video would help both your deaf and hard-of-hearing users and your users who are in a loud environment and can't hear their phone. Similarly, making sure your text isn't too low contrast will help both your low-vision users and your users who are trying to use their phone in bright sunlight.
-Ready start but aren’t sure where?
+Ready to start but aren’t sure where?
Checkout the [Planning and managing web accessibility guide](https://www.w3.org/WAI/planning-and-managing/) provided by [World Wide Web Consortium (W3C)](https://www.w3.org/)
@@ -12,7 +12,7 @@ You should add a link at the top of each page that goes directly to the main con
Typically this is done on the top of `App.vue` as it will be the first focusable element on all your pages:
-``` html
+```html
<ul class="skip-links">
<li>
<a href="#main" ref="skipLink">Skip to main content</a>
@@ -22,7 +22,7 @@ Typically this is done on the top of `App.vue` as it will be the first focusable
To hide the link unless it is focused, you can add the following style:
-``` css
+```css
.skipLink {
white-space: nowrap;
margin: 1em auto;
@@ -42,7 +42,7 @@ To hide the link unless it is focused, you can add the following style:
Once a user changes route, bring focus back to the skip link. This can be achieved by calling focus to the `ref` provided below:
-``` vue
+```vue
<script>
export default {
watch: {
@@ -54,12 +54,7 @@ export default {
</script>
```
-<p class="codepen" data-height="350" data-theme-id="light" data-default-tab="js,result" data-user="mlama007" data-slug-hash="VwepxJa" style="height: 350px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Skip to Main">
- <span>See the Pen <a href="https://codepen.io/mlama007/pen/VwepxJa">
- Skip to Main</a> by Maria (<a href="https://codepen.io/mlama007">@mlama007</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Skip to Main" slug="GRrvQJa" :height="350" tab="js,result" theme="light" :preview="false" :editable="false" />
[Read documentation on skip link to main content](https://www.w3.org/WAI/WCAG21/Techniques/general/G1.html)
@@ -99,16 +94,16 @@ Users can navigate an application through headings. Having descriptive headings
Landmarks provide programmatic access to sections within an application. Users who rely on assistive technology can navigate to each section of the application and skip over content. You can use [ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) to help you achieve this.
-| HTML | ARIA Role | Landmark Purpose |
-| --------------- | ----------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
-| header | role="banner" | Prime heading: title of the page |
-| nav | role="navigation" | Collection of links suitable for use when navigating the document or related documents |
-| main | role="main" | The main or central content of the document. |
-| footer | role="contentinfo" | Information about the parent document: footnotes/copyrights/links to privacy statement |
-| aside | role="complementary" | Supports the main content, yet is separated and meaningful on its own content |
-| _Not available_ | role="search" | This section contains the search functionality for the application |
-| form | role="form" | Collection of form-associated elements |
-| section | role="region" | Content that is relevant and that users will likely want to navigate to. Label must be provided for this element |
+| HTML | ARIA Role | Landmark Purpose |
+| --------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| header | role="banner" | Prime heading: title of the page |
+| nav | role="navigation" | Collection of links suitable for use when navigating the document or related documents |
+| main | role="main" | The main or central content of the document. |
+| footer | role="contentinfo" | Information about the parent document: footnotes/copyrights/links to privacy statement |
+| aside | role="complementary" | Supports the main content, yet is separated and meaningful on its own content |
+| _Not available_ | role="search" | This section contains the search functionality for the application |
+| form | role="form" | Collection of form-associated elements |
+| section | role="region" | Content that is relevant and that users will likely want to navigate to. Label must be provided for this element |
:::tip Tip:
It is recommended to use landmark HTML elements with redundant landmark role attributes in order to maximize compatibility with legacy [browsers that don’t support HTML5 semantic elements](https://caniuse.com/#feat=html5semantic).
diff --git a/src/guide/a11y-resources.md b/src/guide/a11y-resources.md
index 0ee0a781..b8c59221 100644
--- a/src/guide/a11y-resources.md
+++ b/src/guide/a11y-resources.md
@@ -24,18 +24,13 @@
- Automated Tools
- [Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk)
- [WAVE](https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh)
-
- Color Tools
- [WebAim Color Contrast](https://webaim.org/resources/contrastchecker/)
- [WebAim Link Color Contrast](https://webaim.org/resources/linkcontrastchecker)
-
- Other Helpful Tools
- [HeadingMap](https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi?hl=en…)
-
- [Color Oracle](https://colororacle.org)
-
- [Focus Indicator](https://chrome.google.com/webstore/detail/focus-indicator/heeoeadndnhebmfebjccbhmccmaoedlf?hl=en-US…)
-
- [NerdeFocus](https://chrome.google.com/webstore/detail/nerdefocus/lpfiljldhgjecfepfljnbjnbjfhennpd?hl=en-US…)
## Users
@@ -45,11 +40,8 @@ The World Health Organization estimates that 15% of the world's population has s
There are a huge range of disabilities, which can be divided roughly into four categories:
- _[Visual](https://webaim.org/articles/visual/)_ - These users can benefit from the use of screen readers, screen magnification, controlling screen contrast, or braille display.
-
-- _[Auditory](https://webaim.org/articles/auditory/)_ - These users can benefit from captioning, transcripts or sign language video.
-
-- _[Motor](https://webaim.org/articles/motor/)_ - These users can benefit from a range of [assistive technologies for motor impairments](https://webaim.org/articles/motor/assistive): voice recognition software, eye tracking, single-switch access, head wand, single-switch access, sip and puff switch, oversized trackball mouse, adaptive keyboard or other assistive technologies.
-
+- _[Auditory](https://webaim.org/articles/auditory/)_ - These users can benefit from captioning, transcripts or sign language video.
+- _[Motor](https://webaim.org/articles/motor/)_ - These users can benefit from a range of [assistive technologies for motor impairments](https://webaim.org/articles/motor/assistive): voice recognition software, eye tracking, single-switch access, head wand, sip and puff switch, oversized trackball mouse, adaptive keyboard or other assistive technologies.
- _[Cognitive](https://webaim.org/articles/cognitive/)_ - These users can benefit from supplemental media, structural organization of content, clear and simple writing.
Check out the following links from WebAim to understand from users:
diff --git a/src/guide/a11y-semantics.md b/src/guide/a11y-semantics.md
index 884d34d9..86ba1a7f 100644
--- a/src/guide/a11y-semantics.md
+++ b/src/guide/a11y-semantics.md
@@ -21,12 +21,7 @@ Labels are typically placed on top or to the left of the form fields:
</form>
```
-<p class="codepen" data-height="368" data-theme-id="light" data-default-tab="js,result" data-user="mlama007" data-slug-hash="YzwpPYZ" style="height: 368px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Simple Form">
- <span>See the Pen <a href="https://codepen.io/mlama007/pen/YzwpPYZ">
- Simple Form</a> by Maria (<a href="https://codepen.io/mlama007">@mlama007</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Simple Form" slug="dyNzzWZ" :height="368" tab="js,result" theme="light" :preview="false" :editable="false" />
Notice how you can include `autocomplete='on'` on the form element and it will apply to all inputs in your form. You can also set different [values for autocomplete attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for each input.
@@ -39,12 +34,7 @@ Provide labels to describe the purpose of all form control; linking `for` and `i
<input type="text" name="name" id="name" v-model="name" />
```
-<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="mlama007" data-slug-hash="wvMrGqz" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Form Label">
- <span>See the Pen <a href="https://codepen.io/mlama007/pen/wvMrGqz">
- Form Label</a> by Maria (<a href="https://codepen.io/mlama007">@mlama007</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Form Label" slug="XWpaaaj" :height="265" tab="js,result" theme="light" :preview="false" :editable="false" />
If you inspect this element in your chrome developer tools and open the Accessibility tab inside the Elements tab, you will see how the input gets its name from the label:
@@ -60,7 +50,7 @@ Though you might have seen labels wrapping the input fields like this:
</label>
```
-Explicitly setting the labels with an matching id is better supported by assistive technology.
+Explicitly setting the labels with a matching id is better supported by assistive technology.
:::
#### aria-label
@@ -78,12 +68,7 @@ You can also give the input an accessible name with [`aria-label`](https://devel
/>
```
-<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="mlama007" data-slug-hash="jOWGqgz" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Form ARIA label">
- <span>See the Pen <a href="https://codepen.io/mlama007/pen/jOWGqgz">
- Form ARIA label</a> by Maria (<a href="https://codepen.io/mlama007">@mlama007</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Form ARIA label" slug="NWdvvYQ" :height="265" tab="js,result" theme="light" :preview="false" :editable="false" />
Feel free to inspect this element in Chrome DevTools to see how the accessible name has changed:
@@ -91,7 +76,7 @@ Feel free to inspect this element in Chrome DevTools to see how the accessible n
#### aria-labelledby
-Using [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) is similar to `aria-label` expect it is used if the label text is visible on screen. It is paired to other elements by their `id` and you can link multiple `id`s:
+Using [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) is similar to `aria-label` except it is used if the label text is visible on screen. It is paired to other elements by their `id` and you can link multiple `id`s:
```html
<form
@@ -115,18 +100,13 @@ Using [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibi
</form>
```
-<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="mlama007" data-slug-hash="ZEQXOLP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Form ARIA labelledby">
- <span>See the Pen <a href="https://codepen.io/mlama007/pen/ZEQXOLP">
- Form ARIA labelledby</a> by Maria (<a href="https://codepen.io/mlama007">@mlama007</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Form ARIA labelledby" slug="MWJvvBe" :height="265" tab="js,result" theme="light" :preview="false" :editable="false" />
#### aria-describedby
-[aria-describedby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute) is used the same way as `aria-labelledby` expect provides a description with additional information that the user might need. This can be used to describe the criteria for any input:
+[aria-describedby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute) is used the same way as `aria-labelledby` except provides a description with additional information that the user might need. This can be used to describe the criteria for any input:
```html
<form
@@ -152,14 +132,9 @@ Using [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibi
</form>
```
-<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="mlama007" data-slug-hash="JjGrKyY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Form ARIA describedby">
- <span>See the Pen <a href="https://codepen.io/mlama007/pen/JjGrKyY">
- Form ARIA describedby</a> by Maria (<a href="https://codepen.io/mlama007">@mlama007</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Form ARIA describedby" slug="gOgxxQE" :height="265" tab="js,result" theme="light" :preview="false" :editable="false" />
-You can see the description by instecting Chrome DevTools:
+You can see the description by inspecting Chrome DevTools:
@@ -169,12 +144,7 @@ Avoid using placeholders as they can confuse many users.
One of the issues with placeholders is that they don't meet the [color contrast criteria](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) by default; fixing the color contrast makes the placeholder look like pre-populated data in the input fields. Looking at the following example, you can see that the Last Name placeholder which meets the color contrast criteria looks like pre-populated data:
-<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="mlama007" data-slug-hash="PoZJzeQ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Form Placeholder">
- <span>See the Pen <a href="https://codepen.io/mlama007/pen/PoZJzeQ">
- Form Placeholder</a> by Maria (<a href="https://codepen.io/mlama007">@mlama007</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Form Placeholder" slug="ExZvvMw" :height="265" tab="js,result" theme="light" :preview="false" :editable="false" />
It is best to provide all the information the user needs to fill out forms outside any inputs.
@@ -208,12 +178,7 @@ Alternatively, you can attach the instructions to the input with [`aria-describe
</fieldset>
```
-<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="mlama007" data-slug-hash="GRoMqYy" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Form Instructions">
- <span>See the Pen <a href="https://codepen.io/mlama007/pen/GRoMqYy">
- Form Instructions</a> by Maria (<a href="https://codepen.io/mlama007">@mlama007</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Form Instructions" slug="WNREEqv" :height="265" tab="js,result" theme="light" :preview="false" :editable="false" />
### Hiding Content
@@ -247,12 +212,7 @@ We can use CSS to visually hide elements but keep them available for assistive t
}
```
-<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="mlama007" data-slug-hash="qBbpQwB" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Form Search">
- <span>See the Pen <a href="https://codepen.io/mlama007/pen/qBbpQwB">
- Form Search</a> by Maria (<a href="https://codepen.io/mlama007">@mlama007</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Form Search" slug="QWdMqWy" :height="265" tab="js,result" theme="light" :preview="false" :editable="false" />
#### aria-hidden="true"
@@ -280,12 +240,7 @@ You can also use an input to create buttons:
</form>
```
-<p class="codepen" data-height="467" data-theme-id="light" data-default-tab="js,result" data-user="mlama007" data-slug-hash="PoZEXoj" style="height: 467px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Form Buttons">
- <span>See the Pen <a href="https://codepen.io/mlama007/pen/PoZEXoj">
- Form Buttons</a> by Maria (<a href="https://codepen.io/mlama007">@mlama007</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Form Buttons" slug="JjEyrYZ" :height="467" tab="js,result" theme="light" :preview="false" :editable="false" />
#### Functional Images
@@ -321,9 +276,4 @@ You can use this technique to create functional images.
</form>
```
-<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="mlama007" data-slug-hash="NWxXeqY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Functional Images">
- <span>See the Pen <a href="https://codepen.io/mlama007/pen/NWxXeqY">
- Functional Images</a> by Maria (<a href="https://codepen.io/mlama007">@mlama007</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Functional Images" slug="jOyLGqM" :height="265" tab="js,result" theme="light" :preview="false" :editable="false" />
diff --git a/src/guide/class-and-style.md b/src/guide/class-and-style.md
index 0febb18f..6cba2ad6 100644
--- a/src/guide/class-and-style.md
+++ b/src/guide/class-and-style.md
@@ -111,7 +111,7 @@ If you would like to also toggle a class in the list conditionally, you can do i
<div :class="[isActive ? activeClass : '', errorClass]"></div>
```
-This will always apply `errorClass`, but will only apply `activeClass` when `isActive` is truthy.
+This will always apply `errorClass`, but `activeClass` will only be applied when `isActive` is truthy.
However, this can be a bit verbose if you have multiple conditional classes. That's why it's also possible to use the object syntax inside array syntax:
@@ -230,7 +230,7 @@ The array syntax for `:style` allows you to apply multiple style objects to the
### Auto-prefixing
-When you use a CSS property that requires [vendor prefixes](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) in `:style`, for example `transform`, Vue will automatically detect and add appropriate prefixes to the applied styles.
+When you use a CSS property that requires a [vendor prefix](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) in `:style`, Vue will automatically add the appropriate prefix. Vue does this by checking at runtime to see which style properties are supported in the current browser. If the browser doesn't support a particular property then various prefixed variants will be tested to try to find one that is supported.
### Multiple Values
diff --git a/src/guide/component-attrs.md b/src/guide/component-attrs.md
index d9c9476f..3f916a04 100644
--- a/src/guide/component-attrs.md
+++ b/src/guide/component-attrs.md
@@ -2,7 +2,7 @@
> This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components.
-A component non-prop attribute is an attribute or event listener that is passed to a component, but does not have a corresponding property defined in [props](component-props) or [emits](component-custom-events.html#defining-custom-events). Common examples of this include `class`, `style`, and `id` attributes.
+A component non-prop attribute is an attribute or event listener that is passed to a component, but does not have a corresponding property defined in [props](component-props) or [emits](component-custom-events.html#defining-custom-events). Common examples of this include `class`, `style`, and `id` attributes. You can access those attributes via `$attrs` property.
## Attribute Inheritance
@@ -12,7 +12,7 @@ When a component returns a single root node, non-prop attributes will automatica
app.component('date-picker', {
template: `
<div class="date-picker">
- <input type="datetime" />
+ <input type="datetime-local" />
</div>
`
})
@@ -26,7 +26,7 @@ In the event we need to define the status of the date-picker component via a `da
<!-- Rendered date-picker component -->
<div class="date-picker" data-status="activated">
- <input type="datetime" />
+ <input type="datetime-local" />
</div>
```
@@ -82,16 +82,16 @@ If you do **not** want a component to automatically inherit attributes, you can
The common scenario for disabling an attribute inheritance is when attributes need to be applied to other elements besides the root node.
-By setting the `inheritAttrs` option to `false`, this gives you access to the component's `$attrs` property, which includes all attributes not included to component `props` and `emits` properties (e.g., `class`, `style`, `v-on` listeners, etc.).
+By setting the `inheritAttrs` option to `false`, you can control to apply to other elements attributes to use the component's `$attrs` property, which includes all attributes not included to component `props` and `emits` properties (e.g., `class`, `style`, `v-on` listeners, etc.).
-Using our date-picker component example from the [previous section]('#attribute-inheritance), in the event we need to apply all non-prop attributes to the `input` element rather than the root `div` element, this can be accomplished by using the `v-bind` shortcut.
+Using our date-picker component example from the [previous section](#attribute-inheritance), in the event we need to apply all non-prop attributes to the `input` element rather than the root `div` element, this can be accomplished by using the `v-bind` shortcut.
```js{5}
app.component('date-picker', {
inheritAttrs: false,
template: `
<div class="date-picker">
- <input type="datetime" v-bind="$attrs" />
+ <input type="datetime-local" v-bind="$attrs" />
</div>
`
})
@@ -105,7 +105,7 @@ With this new configuration, our `data-status` attribute will be applied to our
<!-- Rendered date-picker component -->
<div class="date-picker">
- <input type="datetime" data-status="activated" />
+ <input type="datetime-local" data-status="activated" />
</div>
```
diff --git a/src/guide/component-basics.md b/src/guide/component-basics.md
index 4696fd30..64c2a32f 100644
--- a/src/guide/component-basics.md
+++ b/src/guide/component-basics.md
@@ -38,14 +38,9 @@ Components are reusable instances with a name: in this case, `<button-counter>`.
app.mount('#components-demo')
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="abORVEJ" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Component basics">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/abORVEJ">
- Component basics</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Component basics" slug="abORVEJ" tab="js,result" :preview="false" />
-Since components are reusable instances, they accept the same options as a root instance, such as `data`, `computed`, `watch`, `methods`, and lifecycle hooks. The only exceptions are a few root-specific options like `el`.
+Since components are reusable instances, they accept the same options as a root instance, such as `data`, `computed`, `watch`, `methods`, and lifecycle hooks.
## Reusing Components
@@ -59,12 +54,7 @@ Components can be reused as many times as you want:
</div>
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="html,result" data-user="Vue" data-slug-hash="rNVqYvM" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Component basics: reusing components">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/rNVqYvM">
- Component basics: reusing components</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Component basics: reusing components" slug="rNVqYvM" tab="result" :preview="false" />
Notice that when clicking on the buttons, each one maintains its own, separate `count`. That's because each time you use a component, a new **instance** of it is created.
@@ -76,7 +66,7 @@ It's common for an app to be organized into a tree of nested components:
For example, you might have components for a header, sidebar, and content area, each typically containing other components for navigation links, blog posts, etc.
-To use these components in templates, they must be registered so that Vue knows about them. There are two types of component registration: **global** and **local**. So far, we've only registered components globally, using `component` method of created app:
+To use these components in templates, they must be registered so that Vue knows about them. There are two types of component registration: **global** and **local**. So far, we've only registered components globally, using the `component` method of our app:
```js
const app = Vue.createApp({})
@@ -86,7 +76,7 @@ app.component('my-component-name', {
})
```
-Globally registered components can be used in the template of `app` instance created afterwards - and even inside all subcomponents of that root instance's component tree.
+Globally registered components can be used in the template of any component within the app.
That's all you need to know about registration for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Component Registration](component-registration.md).
@@ -94,7 +84,7 @@ That's all you need to know about registration for now, but once you've finished
Earlier, we mentioned creating a component for blog posts. The problem is, that component won't be useful unless you can pass data to it, such as the title and content of the specific post we want to display. That's where props come in.
-Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance. To pass a title to our blog post component, we can include it in the list of props this component accepts, using a `props` option:
+Props are custom attributes you can register on a component. To pass a title to our blog post component, we can include it in the list of props this component accepts, using the `props` option:
```js
const app = Vue.createApp({})
@@ -107,7 +97,9 @@ app.component('blog-post', {
app.mount('#blog-post-demo')
```
-A component can have as many props as you'd like and by default, any value can be passed to any prop. In the template above, you'll see that we can access this value on the component instance, just like with `data`.
+When a value is passed to a prop attribute, it becomes a property on that component instance. The value of that property is accessible within the template, just like any other component property.
+
+A component can have as many props as you like and, by default, any value can be passed to any prop.
Once a prop is registered, you can pass data to it as a custom attribute, like this:
@@ -119,12 +111,7 @@ Once a prop is registered, you can pass data to it as a custom attribute, like t
</div>
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="html,result" data-user="Vue" data-slug-hash="PoqyOaX" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Component basics: passing props">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/PoqyOaX">
- Component basics: passing props</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Component basics: passing props" slug="PoqyOaX" tab="result" :preview="false" />
In a typical app, however, you'll likely have an array of posts in `data`:
@@ -190,8 +177,12 @@ Which can be used in the template to control the font size of all blog posts:
```html
<div id="blog-posts-events-demo">
- <div v-bind:style="{ fontSize: postFontSize + 'em' }">
- <blog-post v-for="post in posts" :key="post.id" :title="title"></blog-post>
+ <div :style="{ fontSize: postFontSize + 'em' }">
+ <blog-post
+ v-for="post in posts"
+ :key="post.id"
+ :title="post.title"
+ ></blog-post>
</div>
</div>
```
@@ -220,7 +211,7 @@ The problem is, this button doesn't do anything:
</button>
```
-When we click on the button, we need to communicate to the parent that it should enlarge the text of all posts. Fortunately, component instances provide a custom events system to solve this problem. The parent can choose to listen to any event on the child component instance with `v-on` or `@`, just as we would with a native DOM event:
+When we click on the button, we need to communicate to the parent that it should enlarge the text of all posts. To solve this problem, component instances provide a custom events system. The parent can choose to listen to any event on the child component instance with `v-on` or `@`, just as we would with a native DOM event:
```html
<blog-post ... @enlarge-text="postFontSize += 0.1"></blog-post>
@@ -229,37 +220,32 @@ When we click on the button, we need to communicate to the parent that it should
Then the child component can emit an event on itself by calling the built-in [**`$emit`** method](../api/instance-methods.html#emit), passing the name of the event:
```html
-<button @click="$emit('enlarge-text')">
+<button @click="$emit('enlargeText')">
Enlarge text
</button>
```
-Thanks to the `v-on:enlarge-text="postFontSize += 0.1"` listener, the parent will receive the event and update `postFontSize` value.
+Thanks to the `@enlarge-text="postFontSize += 0.1"` listener, the parent will receive the event and update the value of `postFontSize`.
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="html,result" data-user="Vue" data-slug-hash="KKpGyrp" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Component basics: emitting events">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/KKpGyrp">
- Component basics: emitting events</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Component basics: emitting events" slug="KKpGyrp" tab="result" :preview="false" />
-We can list emitted events in the component's `emits` option.
+We can list emitted events in the component's `emits` option:
```js
app.component('blog-post', {
props: ['title'],
- emits: ['enlarge-text']
+ emits: ['enlargeText']
})
```
-This will allow you to check all the events component emits and optionally [validate them](component-custom-events.html#validate-emitted-events)
+This will allow you to check all the events that a component emits and optionally [validate them](component-custom-events.html#validate-emitted-events).
### Emitting a Value With an Event
-It's sometimes useful to emit a specific value with an event. For example, we may want the `<blog-post>` component to be in charge of how much to enlarge the text by. In those cases, we can use `$emit`'s 2nd parameter to provide this value:
+It's sometimes useful to emit a specific value with an event. For example, we may want the `<blog-post>` component to be in charge of how much to enlarge the text by. In those cases, we can pass a second parameter to `$emit` to provide this value:
```html
-<button @click="$emit('enlarge-text', 0.1)">
+<button @click="$emit('enlargeText', 0.1)">
Enlarge text
</button>
```
@@ -310,12 +296,12 @@ When used on a component, `v-model` instead does this:
```
::: warning
-Please note we used `model-value` with kebab-case here because we are working with in-DOM template. You can find a detailed explanation on kebab-cased vs camelCased attributes in the [DOM Template Parsing Caveats](#dom-template-parsing-caveats) section
+Please note we used `model-value` with kebab-case here because we are working with in-DOM templates. You can find a detailed explanation on kebab-cased vs camelCased attributes in the [DOM Template Parsing Caveats](#dom-template-parsing-caveats) section
:::
For this to actually work though, the `<input>` inside the component must:
-- Bind the `value` attribute to a `modelValue` prop
+- Bind the `value` attribute to the `modelValue` prop
- On `input`, emit an `update:modelValue` event with the new value
Here's that in action:
@@ -323,6 +309,7 @@ Here's that in action:
```js
app.component('custom-input', {
props: ['modelValue'],
+ emits: ['update:modelValue'],
template: `
<input
:value="modelValue"
@@ -338,15 +325,12 @@ Now `v-model` should work perfectly with this component:
<custom-input v-model="searchText"></custom-input>
```
-Another way of creating the `v-model` capability within a custom component is to use the ability of `computed` properties' to define a getter and setter.
-
-In the following example, we refactor the `custom-input` component using a computed property.
-
-Keep in mind, the `get` method should return the `modelValue` property, or whichever property is being using for binding, and the `set` method should fire off the corresponding `$emit` for that property.
+Another way of implementing `v-model` within this component is to use the ability of `computed` properties to define a getter and setter. The `get` method should return the `modelValue` property and the `set` method should emit the corresponding event:
```js
app.component('custom-input', {
props: ['modelValue'],
+ emits: ['update:modelValue'],
template: `
<input v-model="value">
`,
@@ -377,14 +361,9 @@ Just like with HTML elements, it's often useful to be able to pass content to a
Which might render something like:
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="jOPeaob" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Component basics: slots">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/jOPeaob">
- Component basics: slots</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Component basics: slots" slug="jOPeaob" :preview="false" />
-Fortunately, this task is made very simple by Vue's custom `<slot>` element:
+This can be achieved using Vue's custom `<slot>` element:
```js
app.component('alert-box', {
@@ -397,7 +376,7 @@ app.component('alert-box', {
})
```
-As you'll see above, we just add the slot where we want it to go -- and that's it. We're done!
+As you'll see above, we use the `<slot>` as a placeholder where we want the content to go – and that's it. We're done!
That's all you need to know about slots for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Slots](component-slots.md).
@@ -405,14 +384,9 @@ That's all you need to know about slots for now, but once you've finished readin
Sometimes, it's useful to dynamically switch between components, like in a tabbed interface:
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="oNXaoKy" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Component basics: dynamic components">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/oNXaoKy">
- Component basics: dynamic components</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Component basics: dynamic components" slug="oNXaoKy" :preview="false" />
-The above is made possible by Vue's `<component>` element with the `is` special attribute:
+The above is made possible by Vue's `<component>` element with the special `is` attribute:
```html
<!-- Component changes when currentTabComponent changes -->
@@ -426,7 +400,7 @@ In the example above, `currentTabComponent` can contain either:
See [this sandbox](https://codepen.io/team/Vue/pen/oNXaoKy) to experiment with the full code, or [this version](https://codepen.io/team/Vue/pen/oNXapXM) for an example binding to a component's options object, instead of its registered name.
-Keep in mind that this attribute can be used with regular HTML elements, however they will be treated as components, which means all attributes **will be bound as DOM attributes**. For some properties such as `value` to work as you would expect, you will need to bind them using the [`.prop` modifier](../api/directives.html#v-bind).
+You can also use the `is` attribute to create regular HTML elements.
That's all you need to know about dynamic components for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Dynamic & Async Components](./component-dynamic-async.html).
@@ -442,7 +416,7 @@ This will lead to issues when using components with elements that have such rest
</table>
```
-The custom component `<blog-post-row>` will be hoisted out as invalid content, causing errors in the eventual rendered output. Fortunately, we can use `v-is` special directive as a workaround:
+The custom component `<blog-post-row>` will be hoisted out as invalid content, causing errors in the eventual rendered output. We can use the special `v-is` directive as a workaround:
```html
<table>
@@ -451,7 +425,7 @@ The custom component `<blog-post-row>` will be hoisted out as invalid content, c
```
:::warning
-`v-is` value should be a JavaScript string literal:
+The `v-is` value is treated as a JavaScript expression, so we need to wrap the component name in quotes:
```html
<!-- Incorrect, nothing will be rendered -->
@@ -482,7 +456,7 @@ app.component('blog-post', {
<blog-post post-title="hello!"></blog-post>
```
-It should be noted that **these limitations does _not_ apply if you are using string templates from one of the following sources**:
+It should be noted that **these limitations do _not_ apply if you are using string templates from one of the following sources**:
- String templates (e.g. `template: '...'`)
- [Single-file (`.vue`) components](single-file-component.html)
diff --git a/src/guide/component-custom-events.md b/src/guide/component-custom-events.md
index 1fde36ff..f1b40e5b 100644
--- a/src/guide/component-custom-events.md
+++ b/src/guide/component-custom-events.md
@@ -4,34 +4,31 @@
## Event Names
-Unlike components and props, event names don't provide any automatic case transformation. Instead, the name of an emitted event must exactly match the name used to listen to that event. For example, if emitting a camelCased event name:
+Like components and props, event names provide an automatic case transformation. If you emit an event from the child component in camel case, you will be able to add a kebab-cased listener in the parent:
```js
this.$emit('myEvent')
```
-Listening to the kebab-cased version will have no effect:
-
```html
-<!-- Won't work -->
<my-component @my-event="doSomething"></my-component>
```
-Since event names will never be used as variable or property names in JavaScript, there is no reason to use camelCase or PascalCase. Additionally, `v-on` event listeners inside DOM templates will be automatically transformed to lowercase (due to HTML's case-insensitivity), so `@myEvent` would become `@myevent` -- making `myEvent` impossible to listen to.
-
-For these reasons, we recommend you **always use kebab-case for event names**.
+As with [props casing](/guide/component-props.html#prop-casing-camelcase-vs-kebab-case), we recommend using kebab-cased event listeners when you are using in-DOM templates. If you're using string templates, this limitation does not apply.
## Defining Custom Events
+<VideoLesson href="https://vueschool.io/lessons/defining-custom-events-emits?friend=vuejs" title="Learn how to define which events a component can emit with Vue School">Watch a free video on how to define custom events on Vue School</VideoLesson>
+
Emitted events can be defined on the component via the `emits` option.
```js
app.component('custom-form', {
- emits: ['in-focus', 'submit']
+ emits: ['inFocus', 'submit']
})
```
-In the event a native event (e.g., `click`) is defined in the `emits` option, it will be overwritten by the event in the component instead of being treated as a native listener.
+When a native event (e.g., `click`) is defined in the `emits` option, the component event will be used **instead** of a native event listener.
::: tip
It is recommended to define all emitted events in order to better document how a component should work.
@@ -39,7 +36,7 @@ It is recommended to define all emitted events in order to better document how a
### Validate Emitted Events
-Similar to prop type validation, an emitted event can be validated if it is defined with the Object syntax instead of the Array syntax.
+Similar to prop type validation, an emitted event can be validated if it is defined with the Object syntax instead of the array syntax.
To add validation, the event is assigned a function that receives the arguments passed to the `$emit` call and returns a boolean to indicate whether the event is valid or not.
@@ -60,7 +57,7 @@ app.component('custom-form', {
}
},
methods: {
- submitForm() {
+ submitForm(email, password) {
this.$emit('submit', { email, password })
}
}
@@ -72,29 +69,28 @@ app.component('custom-form', {
By default, `v-model` on a component uses `modelValue` as the prop and `update:modelValue` as the event. We can modify these names passing an argument to `v-model`:
```html
-<my-component v-model:foo="bar"></my-component>
+<my-component v-model:title="bookTitle"></my-component>
```
-In this case, child component will expect a `foo` prop and emits `update:foo` event to sync:
+In this case, child component will expect a `title` prop and emits `update:title` event to sync:
```js
-const app = Vue.createApp({})
-
app.component('my-component', {
props: {
- foo: String
+ title: String
},
+ emits: ['update:title'],
template: `
- <input
+ <input
type="text"
- :value="foo"
- @input="$emit('update:foo', $event.target.value)">
+ :value="title"
+ @input="$emit('update:title', $event.target.value)">
`
})
```
```html
-<my-component v-model:foo="bar"></my-component>
+<my-component v-model:title="bookTitle"></my-component>
```
## Multiple `v-model` bindings
@@ -111,15 +107,14 @@ Each v-model will sync to a different prop, without the need for extra options i
```
```js
-const app = Vue.createApp({})
-
app.component('user-name', {
props: {
firstName: String,
lastName: String
},
+ emits: ['update:firstName', 'update:lastName'],
template: `
- <input
+ <input
type="text"
:value="firstName"
@input="$emit('update:firstName', $event.target.value)">
@@ -132,12 +127,7 @@ app.component('user-name', {
})
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="html,result" data-user="Vue" data-slug-hash="GRoPPrM" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Multiple v-models">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/GRoPPrM">
- Multiple v-models</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Multiple v-models" slug="GRoPPrM" tab="html,result" />
## Handling `v-model` modifiers
@@ -147,10 +137,10 @@ Let's create an example custom modifier, `capitalize`, that capitalizes the firs
Modifiers added to a component `v-model` will be provided to the component via the `modelModifiers` prop. In the below example, we have created a component that contains a `modelModifiers` prop that defaults to an empty object.
-Notice that when the component's `created` lifecycle hook triggers, the `modelModifiers` prop contains `capitalize` and its value is `true` - due to it being set on the `v-model` binding `v-model.capitalize="bar"`.
+Notice that when the component's `created` lifecycle hook triggers, the `modelModifiers` prop contains `capitalize` and its value is `true` - due to it being set on the `v-model` binding `v-model.capitalize="myText"`.
```html
-<my-component v-model.capitalize="bar"></my-component>
+<my-component v-model.capitalize="myText"></my-component>
```
```js
@@ -161,8 +151,9 @@ app.component('my-component', {
default: () => ({})
}
},
+ emits: ['update:modelValue'],
template: `
- <input type="text"
+ <input type="text"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)">
`,
@@ -197,6 +188,7 @@ app.component('my-component', {
default: () => ({})
}
},
+ emits: ['update:modelValue'],
methods: {
emitValue(e) {
let value = e.target.value
@@ -218,19 +210,20 @@ app.mount('#app')
For `v-model` bindings with arguments, the generated prop name will be `arg + "Modifiers"`:
```html
-<my-component v-model:foo.capitalize="bar"></my-component>
+<my-component v-model:description.capitalize="myText"></my-component>
```
```js
app.component('my-component', {
- props: ['foo', 'fooModifiers'],
+ props: ['description', 'descriptionModifiers'],
+ emits: ['update:description'],
template: `
- <input type="text"
- :value="foo"
- @input="$emit('update:foo', $event.target.value)">
+ <input type="text"
+ :value="description"
+ @input="$emit('update:description', $event.target.value)">
`,
created() {
- console.log(this.fooModifiers) // { capitalize: true }
+ console.log(this.descriptionModifiers) // { capitalize: true }
}
})
```
diff --git a/src/guide/component-dynamic-async.md b/src/guide/component-dynamic-async.md
index 7939342e..4d8367b9 100644
--- a/src/guide/component-dynamic-async.md
+++ b/src/guide/component-dynamic-async.md
@@ -12,12 +12,7 @@ Earlier, we used the `is` attribute to switch between components in a tabbed int
When switching between these components though, you'll sometimes want to maintain their state or avoid re-rendering for performance reasons. For example, when expanding our tabbed interface a little:
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="html,result" data-user="Vue" data-slug-hash="jOPjZOe" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Dynamic components: without keep-alive">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/jOPjZOe">
- Dynamic components: without keep-alive</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Dynamic components: without keep-alive" slug="jOPjZOe" tab="html,result" />
You'll notice that if you select a post, switch to the _Archive_ tab, then switch back to _Posts_, it's no longer showing the post you selected. That's because each time you switch to a new tab, Vue creates a new instance of the `currentTabComponent`.
@@ -32,12 +27,7 @@ Recreating dynamic components is normally useful behavior, but in this case, we'
Check out the result below:
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="html,result" data-user="Vue" data-slug-hash="VwLJQvP" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Dynamic components: with keep-alive">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/VwLJQvP">
- Dynamic components: with keep-alive</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Dynamic components: with keep-alive" slug="VwLJQvP" tab="html,result" />
Now the _Posts_ tab maintains its state (the selected post) even when it's not rendered.
@@ -48,9 +38,11 @@ Check out more details on `<keep-alive>` in the [API reference](../api/built-in-
In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's needed. To make that possible, Vue has a `defineAsyncComponent` method:
```js
-const app = Vue.createApp({})
+const { createApp, defineAsyncComponent } = Vue
-const AsyncComp = Vue.defineAsyncComponent(
+const app = createApp({})
+
+const AsyncComp = defineAsyncComponent(
() =>
new Promise((resolve, reject) => {
resolve({
@@ -93,7 +85,7 @@ createApp({
### Using with Suspense
-Async components are _suspensible_ by default. This means if it has a [`<Suspense>`](TODO) in the parent chain, it will be treated as an async dependency of that `<Suspense>`. In this case, the loading state will be controlled by the `<Suspense>`, and the component's own loading, error, delay and timeout options will be ignored.
+Async components are _suspensible_ by default. This means if it has a `<Suspense>` in the parent chain, it will be treated as an async dependency of that `<Suspense>`. In this case, the loading state will be controlled by the `<Suspense>`, and the component's own loading, error, delay and timeout options will be ignored.
The async component can opt-out of `Suspense` control and let the component always control its own loading state by specifying `suspensible: false` in its options.
diff --git a/src/guide/component-edge-cases.md b/src/guide/component-edge-cases.md
index 969227fc..d68fa00f 100644
--- a/src/guide/component-edge-cases.md
+++ b/src/guide/component-edge-cases.md
@@ -1,6 +1,6 @@
# Handling Edge Cases
-> This page assumes you've already read the [Components Basics](components.md). Read that first if you are new to components.
+> This page assumes you've already read the [Components Basics](component-basics.md). Read that first if you are new to components.
:::tip Note
All the features on this page document the handling of edge cases, meaning unusual situations that sometimes require bending Vue's rules a little. Note however, that they all have disadvantages or situations where they could be dangerous. These are noted in each case, so keep them in mind when deciding to use each feature.
@@ -20,7 +20,7 @@ However, if you've ruled out the above and find yourself in this extremely rare
Rendering plain HTML elements is very fast in Vue, but sometimes you might have a component that contains **a lot** of static content. In these cases, you can ensure that it's only evaluated once and then cached by adding the `v-once` directive to the root element, like this:
-``` js
+```js
app.component('terms-of-service', {
template: `
<div v-once>
diff --git a/src/guide/component-props.md b/src/guide/component-props.md
index 30dd6bdc..e8d2ee60 100644
--- a/src/guide/component-props.md
+++ b/src/guide/component-props.md
@@ -145,7 +145,7 @@ data() {
```js
props: ['size'],
computed: {
- normalizedSize: function () {
+ normalizedSize() {
return this.size.trim().toLowerCase()
}
}
@@ -183,22 +183,22 @@ app.component('my-component', {
type: Object,
// Object or array defaults must be returned from
// a factory function
- default: function() {
+ default() {
return { message: 'hello' }
}
},
// Custom validator function
propF: {
- validator: function(value) {
+ validator(value) {
// The value must match one of these strings
- return ['success', 'warning', 'danger'].indexOf(value) !== -1
+ return ['success', 'warning', 'danger'].includes(value)
}
},
// Function with a default value
propG: {
type: Function,
// Unlike object or array default, this is not a factory function - this is a function to serve as a default value
- default: function() {
+ default() {
return 'Default function'
}
}
diff --git a/src/guide/component-provide-inject.md b/src/guide/component-provide-inject.md
index b63451a4..dcf966dc 100644
--- a/src/guide/component-provide-inject.md
+++ b/src/guide/component-provide-inject.md
@@ -59,7 +59,7 @@ app.component('todo-list', {
}
},
provide: {
- todoLength: this.todos.length // this will result in error 'Cannot read property 'length' of undefined`
+ todoLength: this.todos.length // this will result in error `Cannot read property 'length' of undefined`
},
template: `
...
@@ -107,6 +107,13 @@ app.component('todo-list', {
}
}
})
+
+app.component('todo-list-statistics', {
+ inject: ['todoLength'],
+ created() {
+ console.log(`Injected property: ${this.todoLength.value}`) // > Injected property: 5
+ }
+})
```
-In this, any change to `todos.length` will be reflected correctly in the components, where `todoLength` is injected. Read more about `reactive` provide/inject in the [Composition API section](composition-api-provide-inject.html#injection-reactivity)
+In this, any change to `todos.length` will be reflected correctly in the components, where `todoLength` is injected. Read more about `computed` in the [Computed and Watch section](reactivity-computed-watchers.html#computed-values) and `reactive` provide/inject in the [Composition API section](composition-api-provide-inject.html#reactivity).
diff --git a/src/guide/component-registration.md b/src/guide/component-registration.md
index cef7d22d..09a7b509 100644
--- a/src/guide/component-registration.md
+++ b/src/guide/component-registration.md
@@ -16,7 +16,7 @@ app.component('my-component-name', {
The component's name is the first argument of `app.component`. In the example above, the component's name is "my-component-name".
-The name you give a component may depend on where you intend to use it. When using a component directly in the DOM (as opposed to in a string template or [single-file component](../guide/single-file-component.html), we strongly recommend following the [W3C rules](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name) for custom tag names:
+The name you give a component may depend on where you intend to use it. When using a component directly in the DOM (as opposed to in a string template or [single-file component](../guide/single-file-component.html)), we strongly recommend following the [W3C rules](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name) for custom tag names:
1. All lowercase
2. Contains a hyphen (i.e., has multiple words connected with the hyphen symbol)
diff --git a/src/guide/component-slots.md b/src/guide/component-slots.md
index 5216a71b..154d4f8a 100644
--- a/src/guide/component-slots.md
+++ b/src/guide/component-slots.md
@@ -48,7 +48,7 @@ Or even other components:
<todo-button>
<!-- Use a component to add an icon -->
<font-awesome-icon name="plus"></font-awesome-icon>
- Your Profile
+ Add todo
</todo-button>
```
@@ -247,12 +247,12 @@ app.component('todo-list', {
})
```
-We might want to replace the slot to customize it on parent component:
+We might want to replace the <span v-pre>`{{ item }}`</span> with a `<slot>` to customize it on parent component:
```html
<todo-list>
<i class="fas fa-check"></i>
- <span class="green">{{ item }}<span>
+ <span class="green">{{ item }}</span>
</todo-list>
```
@@ -263,7 +263,17 @@ To make `item` available to the slot content provided by the parent, we can add
```html
<ul>
<li v-for="( item, index ) in items">
- <slot v-bind:item="item"></slot>
+ <slot :item="item"></slot>
+ </li>
+</ul>
+```
+
+You can bind as many attributes to the `slot` as you need:
+
+```html
+<ul>
+ <li v-for="( item, index ) in items">
+ <slot :item="item" :index="index" :another-attribute="anotherAttribute"></slot>
</li>
</ul>
```
@@ -274,12 +284,12 @@ Attributes bound to a `<slot>` element are called **slot props**. Now, in the pa
<todo-list>
<template v-slot:default="slotProps">
<i class="fas fa-check"></i>
- <span class="green">{{ slotProps.item }}<span>
+ <span class="green">{{ slotProps.item }}</span>
</template>
</todo-list>
```
-<img src="/images/scoped-slot.png" width="611" height="auto" style="display: block; margin: 0 auto; max-width: 100%;" loading="lazy" alt="Scoped slot diagram">
+<img src="/images/scoped-slot.png" width="611" height="auto" style="display: block; margin: 0 auto; max-width: 100%;" loading="lazy" alt="Scoped slot diagram">
In this example, we've chosen to name the object containing all our slot props `slotProps`, but you can use any name you like.
@@ -290,7 +300,7 @@ In cases like above, when _only_ the default slot is provided content, the compo
```html
<todo-list v-slot:default="slotProps">
<i class="fas fa-check"></i>
- <span class="green">{{ slotProps.item }}<span>
+ <span class="green">{{ slotProps.item }}</span>
</todo-list>
```
@@ -299,7 +309,7 @@ This can be shortened even further. Just as non-specified content is assumed to
```html
<todo-list v-slot="slotProps">
<i class="fas fa-check"></i>
- <span class="green">{{ slotProps.item }}<span>
+ <span class="green">{{ slotProps.item }}</span>
</todo-list>
```
@@ -308,10 +318,9 @@ Note that the abbreviated syntax for default slot **cannot** be mixed with named
```html
<!-- INVALID, will result in warning -->
<todo-list v-slot="slotProps">
- <todo-list v-slot:default="slotProps">
- <i class="fas fa-check"></i>
- <span class="green">{{ slotProps.item }}<span>
- </todo-list>
+ <i class="fas fa-check"></i>
+ <span class="green">{{ slotProps.item }}</span>
+
<template v-slot:other="otherSlotProps">
slotProps is NOT available here
</template>
@@ -324,13 +333,13 @@ Whenever there are multiple slots, use the full `<template>` based syntax for _a
<todo-list>
<template v-slot:default="slotProps">
<i class="fas fa-check"></i>
- <span class="green">{{ slotProps.item }}<span>
+ <span class="green">{{ slotProps.item }}</span>
</template>
<template v-slot:other="otherSlotProps">
...
</template>
-</current-user>
+</todo-list>
```
### Destructuring Slot Props
@@ -348,7 +357,7 @@ That means the value of `v-slot` can actually accept any valid JavaScript expres
```html
<todo-list v-slot="{ item }">
<i class="fas fa-check"></i>
- <span class="green">{{ item }}<span>
+ <span class="green">{{ item }}</span>
</todo-list>
```
@@ -357,7 +366,7 @@ This can make the template much cleaner, especially when the slot provides many
```html
<todo-list v-slot="{ item: todo }">
<i class="fas fa-check"></i>
- <span class="green">{{ todo }}<span>
+ <span class="green">{{ todo }}</span>
</todo-list>
```
@@ -366,7 +375,7 @@ You can even define fallbacks, to be used in case a slot prop is undefined:
```html
<todo-list v-slot="{ item = 'Placeholder' }">
<i class="fas fa-check"></i>
- <span class="green">{{ item }}<span>
+ <span class="green">{{ item }}</span>
</todo-list>
```
@@ -410,7 +419,7 @@ However, just as with other directives, the shorthand is only available when an
<todo-list #="{ item }">
<i class="fas fa-check"></i>
- <span class="green">{{ item }}<span>
+ <span class="green">{{ item }}</span>
</todo-list>
```
@@ -419,6 +428,6 @@ Instead, you must always specify the name of the slot if you wish to use the sho
```html
<todo-list #default="{ item }">
<i class="fas fa-check"></i>
- <span class="green">{{ item }}<span>
+ <span class="green">{{ item }}</span>
</todo-list>
```
diff --git a/src/guide/composition-api-introduction.md b/src/guide/composition-api-introduction.md
index 56d3cb29..24be0392 100644
--- a/src/guide/composition-api-introduction.md
+++ b/src/guide/composition-api-introduction.md
@@ -6,7 +6,9 @@
Reaching this far in the documentation, you should already be familiar with both [the basics of Vue](introduction.md) and [creating components](component-basics.md).
:::
-Creating Vue components allows us to extract repeatable parts of the interface coupled with its functionality into reusable pieces of code. This alone can get our application pretty far in terms of maintainability and flexibility. However, our collective experience has proved that this alone might not be enough, especially when your application is getting really big – think several hundreds of components. When dealing with such large applications, sharing and reusing code becomes especially important.
+<VideoLesson href="https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api" title="Learn how Composition API works in depth with Vue Mastery">Watch a free video about the Composition API on Vue Mastery</VideoLesson>
+
+Creating Vue components allows us to extract repeatable parts of the interface coupled with its functionality into reusable pieces of code. This alone can get our application pretty far in terms of maintainability and flexibility. However, our collective experience has proved that this alone might not be enough, especially when your application is getting really big – think several hundred components. When dealing with such large applications, sharing and reusing code becomes especially important.
Let’s imagine that in our app, we have a view to show a list of repositories of a certain user. On top of that, we want to apply search and filter capabilities. Our component handling this view could look like this:
@@ -16,7 +18,10 @@ Let’s imagine that in our app, we have a view to show a list of repositories o
export default {
components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
props: {
- user: { type: String }
+ user: {
+ type: String,
+ required: true
+ }
},
data () {
return {
@@ -52,7 +57,7 @@ This component has several responsibilities:
Organizing logics with component's options (`data`, `computed`, `methods`, `watch`) works in most cases. However, when our components get bigger, the list of **logical concerns** also grows. This can lead to components that are hard to read and understand, especially for people who didn't write them in the first place.
-
+
Example presenting a large component where its **logical concerns** are grouped by colors.
@@ -66,6 +71,8 @@ Now that we know the **why** we can get to the **how**. To start working with th
### `setup` Component Option
+<VideoLesson href="https://www.vuemastery.com/courses/vue-3-essentials/setup-and-reactive-references" title="Learn how setup works with Vue Mastery">Watch a free video on setup on Vue Mastery</VideoLesson>
+
The new `setup` component option is executed **before** the component is created, once the `props` are resolved, and serves as the entry point for composition API's.
::: warning
@@ -82,7 +89,10 @@ Let’s add `setup` to our component:
export default {
components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
props: {
- user: { type: String }
+ user: {
+ type: String,
+ required: true
+ }
},
setup(props) {
console.log(props) // { user: '' }
@@ -188,7 +198,10 @@ import { ref } from 'vue'
export default {
components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
props: {
- user: { type: String }
+ user: {
+ type: String,
+ required: true
+ }
},
setup (props) {
const repositories = ref([])
@@ -296,7 +309,7 @@ export default {
}
```
-For more details on `watch`, refer to our [in-depth guide]().
+For more details on `watch`, refer to our [in-depth guide](reactivity-computed-watchers.md#watch).
**Let’s now apply it to our example:**
@@ -445,7 +458,10 @@ import { toRefs } from 'vue'
export default {
components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
props: {
- user: { type: String }
+ user: {
+ type: String,
+ required: true
+ }
},
setup (props) {
const { user } = toRefs(props)
@@ -491,7 +507,10 @@ import useRepositoryFilters from '@/composables/useRepositoryFilters'
export default {
components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
props: {
- user: { type: String }
+ user: {
+ type: String,
+ required: true
+ }
},
setup(props) {
const { user } = toRefs(props)
diff --git a/src/guide/composition-api-lifecycle-hooks.md b/src/guide/composition-api-lifecycle-hooks.md
index e789456c..9745620b 100644
--- a/src/guide/composition-api-lifecycle-hooks.md
+++ b/src/guide/composition-api-lifecycle-hooks.md
@@ -2,23 +2,28 @@
> This guide assumes that you have already read the [Composition API Introduction](composition-api-introduction.html) and [Reactivity Fundamentals](reactivity-fundamentals.html). Read that first if you are new to Composition API.
+<VideoLesson href="https://www.vuemastery.com/courses/vue-3-essentials/lifecycle-hooks" title="Learn about how Lifecycle Hooks work with Vue Mastery">Watch a free video about Lifecycle Hooks on Vue Mastery</VideoLesson>
+
You can access a component's lifecycle hook by prefixing the lifecycle hook with "on".
The following table contains how the lifecycle hooks are invoked inside of [setup()](composition-api-setup.html):
-| Options API | Hook inside inside `setup` |
-| ----------------- | -------------------------- |
-| `beforeCreate` | Not needed\* |
-| `created` | Not needed\* |
-| `beforeMount` | `onBeforeMount` |
-| `mounted` | `onMounted` |
-| `beforeUpdate` | `onBeforeUpdate` |
-| `updated` | `onUpdated` |
-| `beforeUnmount` | `onBeforeUnmount` |
-| `unmounted` | `onUnmounted` |
-| `errorCaptured` | `onErrorCaptured` |
-| `renderTracked` | `onRenderTracked` |
-| `renderTriggered` | `onRenderTriggered` |
+| Options API | Hook inside `setup` |
+| ----------------- | ------------------- |
+| `beforeCreate` | Not needed\* |
+| `created` | Not needed\* |
+| `beforeMount` | `onBeforeMount` |
+| `mounted` | `onMounted` |
+| `beforeUpdate` | `onBeforeUpdate` |
+| `updated` | `onUpdated` |
+| `beforeUnmount` | `onBeforeUnmount` |
+| `unmounted` | `onUnmounted` |
+| `errorCaptured` | `onErrorCaptured` |
+| `renderTracked` | `onRenderTracked` |
+| `renderTriggered` | `onRenderTriggered` |
+| `activated` | `onActivated` |
+| `deactivated` | `onDeactivated` |
+
:::tip
Because `setup` is run around the `beforeCreate` and `created` lifecycle hooks, you do not need to explicitly define them. In other words, any code that would be written inside those hooks should be written directly in the `setup` function.
diff --git a/src/guide/composition-api-provide-inject.md b/src/guide/composition-api-provide-inject.md
index 715c35c3..8be3d50b 100644
--- a/src/guide/composition-api-provide-inject.md
+++ b/src/guide/composition-api-provide-inject.md
@@ -36,7 +36,7 @@ export default {
<!-- src/components/MyMarker.vue -->
<script>
export default {
- inject: ['location', 'longitude', 'latitude']
+ inject: ['location', 'geolocation']
}
</script>
```
@@ -60,7 +60,7 @@ Using our `MyMap` component, our provided values can be refactored as the follow
<script>
import { provide } from 'vue'
-import MyMarker from './MyMarker.vue
+import MyMarker from './MyMarker.vue'
export default {
components: {
@@ -123,7 +123,7 @@ Using our `MyMap` component, our code can be updated as follows:
<script>
import { provide, reactive, ref } from 'vue'
-import MyMarker from './MyMarker.vue
+import MyMarker from './MyMarker.vue'
export default {
components: {
@@ -159,7 +159,7 @@ For example, in the event we needed to change the user's location, we would idea
<script>
import { provide, reactive, ref } from 'vue'
-import MyMarker from './MyMarker.vue
+import MyMarker from './MyMarker.vue'
export default {
components: {
@@ -198,7 +198,7 @@ However, there are times where we need to update the data inside of the componen
<script>
import { provide, reactive, ref } from 'vue'
-import MyMarker from './MyMarker.vue
+import MyMarker from './MyMarker.vue'
export default {
components: {
@@ -254,7 +254,7 @@ Finally, we recommend using `readonly` on provided property if you want to ensur
<script>
import { provide, reactive, readonly, ref } from 'vue'
-import MyMarker from './MyMarker.vue
+import MyMarker from './MyMarker.vue'
export default {
components: {
diff --git a/src/guide/composition-api-setup.md b/src/guide/composition-api-setup.md
index 77514158..e9312fae 100644
--- a/src/guide/composition-api-setup.md
+++ b/src/guide/composition-api-setup.md
@@ -34,7 +34,7 @@ export default {
However, because `props` are reactive, you **cannot use ES6 destructuring** because it will remove props reactivity.
:::
-If you need to destructure your props, you can do this safely by utilizing the [toRefs](reactivity-fundamentals.html#destructuring-reactive-state) inside of the `setup` function.
+If you need to destructure your props, you can do this by utilizing the [toRefs](reactivity-fundamentals.html#destructuring-reactive-state) inside of the `setup` function:
```js
// MyBook.vue
@@ -42,9 +42,23 @@ If you need to destructure your props, you can do this safely by utilizing the [
import { toRefs } from 'vue'
setup(props) {
- const { title } = toRefs(props)
+ const { title } = toRefs(props)
- console.log(title.value)
+ console.log(title.value)
+}
+```
+
+If `title` is an optional prop, it could be missing from `props`. In that case, `toRefs` won't create a ref for `title`. Instead you'd need to use `toRef`:
+
+```js
+// MyBook.vue
+
+import { toRef } from 'vue'
+
+setup(props) {
+ const title = toRef(props, 'title')
+
+ console.log(title.value)
}
```
@@ -99,19 +113,22 @@ In other words, you **will not have access** to the following component options:
## Usage with Templates
-If `setup` returns an object, the properties on the object can be accessed in the component's template:
+If `setup` returns an object, the properties on the object can be accessed in the component's template, as well as the properties of the `props` passed into `setup`:
```vue-html
<!-- MyBook.vue -->
<template>
- <div>{{ readersNumber }} {{ book.title }}</div>
+ <div>{{ collectionName }}: {{ readersNumber }} {{ book.title }}</div>
</template>
<script>
import { ref, reactive } from 'vue'
export default {
- setup() {
+ props: {
+ collectionName: String
+ },
+ setup(props) {
const readersNumber = ref(0)
const book = reactive({ title: 'Vue 3 Guide' })
@@ -125,7 +142,7 @@ If `setup` returns an object, the properties on the object can be accessed in th
</script>
```
-Note that [refs](../api/refs-api.html#ref) returned from `setup` are [automatically unwrapped](../api/refs-api.html#access-in-templates) when accessed in the template so you shouldn't use `.value` in templates.
+Note that [refs](../api/refs-api.html#ref) returned from `setup` are [automatically shallow unwrapped](/guide/reactivity-fundamentals.html#ref-unwrapping) when accessed in the template so you shouldn't use `.value` in templates.
## Usage with Render Functions
diff --git a/src/guide/composition-api-template-refs.md b/src/guide/composition-api-template-refs.md
index 2147757c..681fbeb7 100644
--- a/src/guide/composition-api-template-refs.md
+++ b/src/guide/composition-api-template-refs.md
@@ -1,4 +1,4 @@
-## Template Refs
+# Template Refs
> This section uses [single-file component](single-file-component.html) syntax for code examples
@@ -35,7 +35,7 @@ Here we are exposing `root` on the render context and binding it to the div as i
Refs used as templates refs behave just like any other refs: they are reactive and can be passed into (or returned from) composition functions.
-### Usage with JSX
+## Usage with JSX
```js
export default {
@@ -53,7 +53,7 @@ export default {
}
```
-### Usage inside `v-for`
+## Usage inside `v-for`
Composition API template refs do not have special handling when used inside `v-for`. Instead, use function refs to perform custom handling:
@@ -85,3 +85,66 @@ Composition API template refs do not have special handling when used inside `v-f
}
</script>
```
+
+## Watching Template Refs
+
+Watching a template ref for changes can be an alternative to the use of lifecycle hooks that was demonstrated in the previous examples.
+
+But a key difference to lifecycle hooks is that `watch()` and `watchEffect()` effects are run *before* the DOM is mounted or updated so the template ref hasn't been updated when the watcher runs the effect:
+
+```vue
+<template>
+ <div ref="root">This is a root element</div>
+</template>
+
+<script>
+ import { ref, watchEffect } from 'vue'
+
+ export default {
+ setup() {
+ const root = ref(null)
+
+ watchEffect(() => {
+ // This effect runs before the DOM is updated, and consequently,
+ // the template ref does not hold a reference to the element yet.
+ console.log(root.value) // => null
+ })
+
+ return {
+ root
+ }
+ }
+ }
+</script>
+```
+
+Therefore, watchers that use template refs should be defined with the `flush: 'post'` option. This will run the effect *after* the DOM has been updated and ensure that the template ref stays in sync with the DOM and references the correct element.
+
+```vue
+<template>
+ <div ref="root">This is a root element</div>
+</template>
+
+<script>
+ import { ref, watchEffect } from 'vue'
+
+ export default {
+ setup() {
+ const root = ref(null)
+
+ watchEffect(() => {
+ console.log(root.value) // => <div></div>
+ },
+ {
+ flush: 'post'
+ })
+
+ return {
+ root
+ }
+ }
+ }
+</script>
+```
+
+* See also: [Computed and Watchers](./reactivity-computed-watchers.html#effect-flush-timing)
diff --git a/src/guide/computed.md b/src/guide/computed.md
index 15b4f561..ab4bb296 100644
--- a/src/guide/computed.md
+++ b/src/guide/computed.md
@@ -69,12 +69,7 @@ Vue.createApp({
Result:
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="NWqzrjr" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Computed basic example">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/NWqzrjr">
- Computed basic example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Computed basic example" slug="NWqzrjr" tab="js,result" :preview="false" />
Here we have declared a computed property `publishedBooksMessage`.
@@ -197,16 +192,11 @@ For example:
Result:
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="GRJGqXp" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Watch basic example">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/GRJGqXp">
- Watch basic example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Watch basic example" slug="GRJGqXp" tab="result" :preview="false" />
In this case, using the `watch` option allows us to perform an asynchronous operation (accessing an API) and sets a condition for performing this operation. None of that would be possible with a computed property.
-In addition to the `watch` option, you can also use the imperative [vm.\$watch API](../api/instance-methods.html#watch).
+In addition to the `watch` option, you can also use the imperative [vm.$watch API](../api/instance-methods.html#watch).
### Computed vs Watched Property
diff --git a/src/guide/conditional.md b/src/guide/conditional.md
index 46dd36c8..c35f1e2e 100644
--- a/src/guide/conditional.md
+++ b/src/guide/conditional.md
@@ -91,4 +91,4 @@ Generally speaking, `v-if` has higher toggle costs while `v-show` has higher ini
Using `v-if` and `v-for` together is **not recommended**. See the [style guide](../style-guide/#avoid-v-if-with-v-for-essential) for further information.
:::
-When used together with `v-if`, `v-for` has a higher priority than `v-if`. See the [list rendering guide](list#v-for-with-v-if) for details.
+When `v-if` and `v-for` are both used on the same element, `v-if` will be evaluated first. See the [list rendering guide](list#v-for-with-v-if) for details.
diff --git a/src/guide/contributing/doc-style-guide.md b/src/guide/contributing/doc-style-guide.md
index a465d866..27e6b0f2 100644
--- a/src/guide/contributing/doc-style-guide.md
+++ b/src/guide/contributing/doc-style-guide.md
@@ -64,6 +64,7 @@ export default {
````
**Rendered Output**
+
```js
export default {
name: 'MyComponent'
diff --git a/src/guide/contributing/translations.md b/src/guide/contributing/translations.md
index 844ea170..9e900ccb 100644
--- a/src/guide/contributing/translations.md
+++ b/src/guide/contributing/translations.md
@@ -1,11 +1,43 @@
# Translations
-Vue has spread across the globe, with the core team being in at least half a dozen different timezones. [The forum](https://forum.vuejs.org/) includes 7 languages and counting and many of our docs have [actively-maintained translations](https://github.com/vuejs?utf8=%E2%9C%93&q=vuejs.org). We'are very proud of Vue's international reach, but we can do even better.
+Vue has spread across the globe, with the core team being in at least half a dozen different timezones. The community is growing all the time and we want to make the documentation accessible to as many people as possible.
-## Can we start translating Vue 3 docs?
+Providing translations for the documentation is not something that the core team can manage alone. Thankfully, we have a great community of translators making contributions both large and small. If you've been thinking about contributing to the project, perhaps this is a good place to start?
-Yes! We are ready for translation!
+## Community translations
+
+The table below lists GitHub repositories for community translations. These are translations made by the community, for the community. Some of these translations may be incomplete but they can still make the Vue experience significantly more enjoyable for readers who prefer these languages.
+
+For completeness, we've also included the official documentation in the list.
+
+<guide-contributing-translations />
+
+Thank you to everyone who has contributed to these translations. Your hard work is very much appreciated.
## How can I get involved with translations?
-The best way to get started is to check out [this pinned issue](https://github.com/vuejs/docs-next/issues/478) that contains active discussions on the various initiatives happening in the community.
+The first step is to check whether there is an existing translation for the relevant language. In addition to the table above, a good place to start is [this pinned issue](https://github.com/vuejs/docs-next/issues/478), which is used to keep track of the various translation initiatives happening in the community.
+
+If there's already an active translation then there are various ways you can help out. The GitHub repository should be a good place to start gathering information about how a particular translation is managed and who does what. All translation repositories should allow you to file issues and open Pull Requests if you have suggestions for improving the translation.
+
+## What if there isn't an existing translation?
+
+If you want to start a new translation then please do. You don't need our permission to start but you should read the rest of this page carefully to make sure you're clear about what's involved.
+
+Before you start, you might want to check whether there was a community translation for Vue 2. [This pinned issue](https://github.com/vuejs/vuejs.org/issues/2015) from the Vue 2 documentation may help.
+
+Working on a translation is more fun, and more likely to succeed, if there are multiple contributors. Even if you don't know anyone personally who can help out you may be able to find other translators from within the Vue community.
+
+The documentation is constantly being updated. Many changes are small and don't directly impact the translations but others make important improvements that also need translating. Before you start work on a new translation you may want to take a look at the GitHub repositories for some other languages to get a sense of how they handle the update process.
+
+When you first start a translation, you may want to use a personal GitHub repository. That's fine, so long as it's publicly accessible and open to contributions from others. Make sure the *Issues* tab is enabled in the repository's settings. You can migrate the repository to a shared organization at a later stage.
+
+Once you start a translation, be sure to add it to [the pinned issue](https://github.com/vuejs/docs-next/issues/478) so that the rest of the community can find it.
+
+We also encourage you to update the root-level `README.md` at an early stage. Most translations add extra information to help potential contributors get involved.
+
+## Can I add my translation to this page?
+
+If you've translated more than half of the documentation then please open a Pull Request to add your repository to the table of community translations on this page.
+
+The official documentation is deployed on [Netlify](https://url.netlify.com/HJ8X2mxP8). We encourage you to do the same. Some community translators use their own Netlify accounts but we're happy to host community translations on our account once they're at an advanced stage.
diff --git a/src/guide/contributing/writing-guide.md b/src/guide/contributing/writing-guide.md
index d6ac6ddb..5b444770 100644
--- a/src/guide/contributing/writing-guide.md
+++ b/src/guide/contributing/writing-guide.md
@@ -8,7 +8,7 @@ Writing documentation is an exercise in empathy. We're not describing an objecti
- **Respect users' cognitive capacity (i.e. brain power).** When a user starts reading, they begin with a certain amount of limited brain power and when they run out, they stop learning.
- Cognitive capacity is **depleted faster** by complex sentences, having to learn more than one concept at a time, and abstract examples that don't directly relate to a user's work.
- Cognitive capacity is **depleted more slowly** when we help them feel consistently smart, powerful, and curious. Breaking things down into digestible pieces and minding the flow of the document can help keep them in this state.
-- **Always try to see from the user's perspective.** When we understand something thoroughly, it becomes obvious to us. This is called _the curse of knowledge_. In order to write good documentation, try to remember what you first needed to know when learning this concept. What jargon did you need to learn? What did you misunderstand? What took a long time to really grasp? Good documentation meets users where they are. It can be helpful to practice explaining the concept to people in person before
+- **Always try to see from the user's perspective.** When we understand something thoroughly, it becomes obvious to us. This is called _the curse of knowledge_. In order to write good documentation, try to remember what you first needed to know when learning this concept. What jargon did you need to learn? What did you misunderstand? What took a long time to really grasp? Good documentation meets users where they are. It can be helpful to practice explaining the concept to people in person before.
- **Describe the _problem_ first, then the solution.** Before showing how a feature works, it's important to explain why it exists. Otherwise, users won't have the context to know if this information is important to them (is it a problem they experience?) or what prior knowledge/experience to connect it to.
- **While writing, don't be afraid to ask questions**, _especially_ if you're afraid they might be "dumb". Being vulnerable is hard, but it's the only way for us to more fully understand what we need to explain.
- **Be involved in feature discussions.** The best APIs come from documentation-driven development, where we build features that are easy to explain, rather than trying to figure out how to explain them later. Asking questions (especially "dumb" questions) earlier often helps reveal confusions, inconsistencies, and problematic behavior before a breaking change would be required to fix them.
@@ -57,7 +57,7 @@ Writing documentation is an exercise in empathy. We're not describing an objecti
- **Avoid abbreviations** in writing and code examples (e.g. `attribute` is better than `attr`, `message` is better than `msg`), unless you are specifically referencing an abbreviation in an API (e.g. `$attrs`). Abbreviation symbols included on standard keyboards (e.g. `@`, `#`, `&`) are OK.
- **When referencing a directly following example, use a colon (`:`) to end a sentence**, rather than a period (`.`).
-- **Use the Oxford comma** (e.g. "a, b, and c" instead of "a, b and c"). 
+- **Use the Oxford comma** (e.g. "a, b, and c" instead of "a, b and c"). 
- Source: [The Serial (Oxford) Comma: When and Why To Use It](https://www.inkonhand.com/2015/10/the-serial-oxford-comma-when-and-why-to-use-it/)
- **When referencing the name of a project, use the name that project refers to itself as.** For example, "webpack" and "npm" should both use lowercase as that's how their documentation refers to them.
- **Use Title Case for headings** - at least for now, since it's what we use through the rest of the docs. There's research suggesting that sentence case (only first word of the heading starts with a capital) is actually superior for legibility and also reduces the cognitive overhead for documentation writers, since they don't have to try to remember whether to capitalize words like "and", "with", and "about".
diff --git a/src/guide/custom-directive.md b/src/guide/custom-directive.md
index 60fb5540..47156b48 100644
--- a/src/guide/custom-directive.md
+++ b/src/guide/custom-directive.md
@@ -4,12 +4,7 @@
In addition to the default set of directives shipped in core (like `v-model` or `v-show`), Vue also allows you to register your own custom directives. Note that in Vue, the primary form of code reuse and abstraction is components - however, there may be cases where you need some low-level DOM access on plain elements, and this is where custom directives would still be useful. An example would be focusing on an input element, like this one:
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="JjdxaJW" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Custom directives: basic example">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/JjdxaJW">
- Custom directives: basic example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Custom directives: basic example" slug="JjdxaJW" :preview="false" />
When the page loads, that element gains focus (note: `autofocus` doesn't work on mobile Safari). In fact, if you haven't clicked on anything else since visiting this page, the input above should be focused now. Also, you can click on the `Rerun` button and input will be focused.
@@ -50,7 +45,9 @@ Then in a template, you can use the new `v-focus` attribute on any element, like
A directive definition object can provide several hook functions (all optional):
-- `beforeMount`: called when the directive is first bound to the element and before parent component is mounted. This is where you can do one-time setup work.
+- `created`: called before the bound element's attributes or event listeners are applied. This is useful in cases where the directive needs to attach event listeners that must be called before normal `v-on` event listeners.
+
+- `beforeMount`: called when the directive is first bound to the element and before parent component is mounted.
- `mounted`: called when the bound element's parent component is mounted.
@@ -127,12 +124,7 @@ app.mount('#dynamic-arguments-example')
Result:
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="YzXgGmv" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Custom directives: dynamic arguments">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/YzXgGmv">
- Custom directives: dynamic arguments</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Custom directives: dynamic arguments" slug="YzXgGmv" :preview="false" />
Our custom directive is now flexible enough to support a few different use cases. To make it even more dynamic, we can also allow to modify a bound value. Let's create an additional property `pinPadding` and bind it to the `<input type="range">`
@@ -140,7 +132,7 @@ Our custom directive is now flexible enough to support a few different use cases
<div id="dynamicexample">
<h2>Scroll down the page</h2>
<input type="range" min="0" max="500" v-model="pinPadding">
- <p v-pin:[direction]="pinPadding">Stick me 200px from the {{ direction }} of the page</p>
+ <p v-pin:[direction]="pinPadding">Stick me {{ pinPadding + 'px' }} from the {{ direction || 'top' }} of the page</p>
</div>
```
@@ -173,12 +165,7 @@ app.directive('pin', {
Result:
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="rNOaZpj" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Custom directives: dynamic arguments + dynamic binding">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/rNOaZpj">
- Custom directives: dynamic arguments + dynamic binding</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Custom directives: dynamic arguments + dynamic binding" slug="rNOaZpj" :preview="false" />
## Function Shorthand
@@ -209,40 +196,22 @@ app.directive('demo', (el, binding) => {
## Usage on Components
-In 3.0, with fragments support, components can potentially have more than one root nodes. This creates an issue when a custom directive is used on a component with multiple root nodes.
-
-To explain the details of how custom directives will work on components in 3.0, we need to first understand how custom directives are compiled in 3.0. For a directive like this:
+When used on components, custom directive will always apply to component's root node, similarly to [non-prop attributes](component-attrs.html).
```vue-html
-<div v-demo="test"></div>
-```
-
-Will roughly compile into this:
-
-```js
-const vDemo = resolveDirective('demo')
-
-return withDirectives(h('div'), [[vDemo, test]])
+<my-component v-demo="test"></my-component>
```
-Where `vDemo` will be the directive object written by the user, which contains hooks like `mounted` and `updated`.
-
-`withDirectives` returns a cloned VNode with the user hooks wrapped and injected as VNode lifecycle hooks (see [Render Function](render-function.html) for more details):
-
```js
-{
- onVnodeMounted(vnode) {
- // call vDemo.mounted(...)
- }
-}
+app.component('my-component', {
+ template: `
+ <div> // v-demo directive will be applied here
+ <span>My component content</span>
+ </div>
+ `
+})
```
-**As a result, custom directives are fully included as part of a VNode's data. When a custom directive is used on a component, these `onVnodeXXX` hooks are passed down to the component as extraneous props and end up in `this.$attrs`.**
-
-This also means it's possible to directly hook into an element's lifecycle like this in the template, which can be handy when a custom directive is too involved:
-
-```vue-html
-<div @vnodeMounted="myHook" />
-```
+Unlike attributes, directives can't be passed to a different element with `v-bind="$attrs"`.
-This is consistent with the [attribute fallthrough behavior](component-attrs.html). So, the rule for custom directives on a component will be the same as other extraneous attributes: it is up to the child component to decide where and whether to apply it. When the child component uses `v-bind="$attrs"` on an inner element, it will apply any custom directives used on it as well.
+With [fragments](/guide/migration/fragments.html#overview) support, components can potentially have more than one root nodes. When applied to a multi-root component, directive will be ignored and the warning will be thrown.
diff --git a/src/guide/data-methods.md b/src/guide/data-methods.md
new file mode 100644
index 00000000..69c6a14c
--- /dev/null
+++ b/src/guide/data-methods.md
@@ -0,0 +1,125 @@
+# Data Properties and Methods
+
+## Data Properties
+
+The `data` option for a component is a function. Vue calls this function as part of creating a new component instance. It should return an object, which Vue will then wrap in its reactivity system and store on the component instance as `$data`. For convenience, any top-level properties of that object are also exposed directly via the component instance:
+
+```js
+const app = Vue.createApp({
+ data() {
+ return { count: 4 }
+ }
+})
+
+const vm = app.mount('#app')
+
+console.log(vm.$data.count) // => 4
+console.log(vm.count) // => 4
+
+// Assigning a value to vm.count will also update $data.count
+vm.count = 5
+console.log(vm.$data.count) // => 5
+
+// ... and vice-versa
+vm.$data.count = 6
+console.log(vm.count) // => 6
+```
+
+These instance properties are only added when the instance is first created, so you need to ensure they are all present in the object returned by the `data` function. Where necessary, use `null`, `undefined` or some other placeholder value for properties where the desired value isn't yet available.
+
+It is possible to add a new property directly to the component instance without including it in `data`. However, because this property isn't backed by the reactive `$data` object, it won't automatically be tracked by [Vue's reactivity system](reactivity.html).
+
+Vue uses a `$` prefix when exposing its own built-in APIs via the component instance. It also reserves the prefix `_` for internal properties. You should avoid using names for top-level `data` properties that start with either of these characters.
+
+## Methods
+
+To add methods to a component instance we use the `methods` option. This should be an object containing the desired methods:
+
+```js
+const app = Vue.createApp({
+ data() {
+ return { count: 4 }
+ },
+ methods: {
+ increment() {
+ // `this` will refer to the component instance
+ this.count++
+ }
+ }
+})
+
+const vm = app.mount('#app')
+
+console.log(vm.count) // => 4
+
+vm.increment()
+
+console.log(vm.count) // => 5
+```
+
+Vue automatically binds the `this` value for `methods` so that it always refers to the component instance. This ensures that a method retains the correct `this` value if it's used as an event listener or callback. You should avoid using arrow functions when defining `methods`, as that prevents Vue from binding the appropriate `this` value.
+
+Just like all other properties of the component instance, the `methods` are accessible from within the component's template. Inside a template they are most commonly used as event listeners:
+
+```html
+<button @click="increment">Up vote</button>
+```
+
+In the example above, the method `increment` will be called when the `<button>` is clicked.
+
+It is also possible to call a method directly from a template. As we'll see shortly, it's usually better to use a [computed property](computed.html) instead. However, using a method can be useful in scenarios where computed properties aren't a viable option. You can call a method anywhere that a template supports JavaScript expressions:
+
+```html
+<span :title="toTitleDate(date)">
+ {{ formatDate(date) }}
+</span>
+```
+
+If the methods `toTitleDate` or `formatDate` access any reactive data then it will be tracked as a rendering dependency, just as if it had been used in the template directly.
+
+Methods called from a template should not have any side effects, such as changing data or triggering asynchronous processes. If you find yourself tempted to do that you should probably use a [lifecycle hook](instance.html#lifecycle-hooks) instead.
+
+### Debouncing and Throttling
+
+Vue doesn't include built-in support for debouncing or throttling but it can be implemented using libraries such as [Lodash](https://lodash.com/).
+
+In cases where a component is only used once, the debouncing can be applied directly within `methods`:
+
+```html
+<script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>
+<script>
+ Vue.createApp({
+ methods: {
+ // Debouncing with Lodash
+ click: _.debounce(function() {
+ // ... respond to click ...
+ }, 500)
+ }
+ }).mount('#app')
+</script>
+```
+
+However, this approach is potentially problematic for components that are reused because they'll all share the same debounced function. To keep the component instances independent from each other, we can add the debounced function in the `created` lifecycle hook:
+
+```js
+app.component('save-button', {
+ created() {
+ // Debouncing with Lodash
+ this.debouncedClick = _.debounce(this.click, 500)
+ },
+ unmounted() {
+ // Cancel the timer when the component is removed
+ this.debouncedClick.cancel()
+ },
+ methods: {
+ click() {
+ // ... respond to click ...
+ }
+ },
+ template: `
+ <button @click="debouncedClick">
+ Save
+ </button>
+ `
+})
+```
diff --git a/src/guide/events.md b/src/guide/events.md
index f4b30fa2..c3913602 100644
--- a/src/guide/events.md
+++ b/src/guide/events.md
@@ -1,7 +1,5 @@
# Event Handling
-<div class="vueschool"><a href="https://vueschool.io/lessons/vuejs-user-events?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to handle events on Vue School">Learn how to handle events in a free Vue School lesson</a></div>
-
## Listening to Events
We can use the `v-on` directive, which we typically shorten to the `@` symbol, to listen to DOM events and run some JavaScript when they're triggered. The usage would be `v-on:click="methodName"` or with the shortcut, `@click="methodName"`
@@ -19,7 +17,7 @@ For example:
Vue.createApp({
data() {
return {
- counter: 1
+ counter: 0
}
}
}).mount('#basic-event')
@@ -27,12 +25,7 @@ Vue.createApp({
Result:
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="html,result" data-user="Vue" data-slug-hash="xxGadPZ" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Event handling: basic">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/xxGadPZ">
- Event handling: basic</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Event handling: basic" slug="xxGadPZ" tab="result" :preview="false" />
## Method Event Handlers
@@ -69,12 +62,7 @@ Vue.createApp({
Result:
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="jOPvmaX" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Event handling: with a method">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/jOPvmaX">
- Event handling: with a method</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Event handling: with a method" slug="jOPvmaX" tab="result" :preview="false" />
## Methods in Inline Handlers
@@ -99,12 +87,7 @@ Vue.createApp({
Result:
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="html,result" data-user="Vue" data-slug-hash="WNvgjda" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Event handling: with an inline handler">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/WNvgjda">
- Event handling: with an inline handler</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Event handling: with an inline handler" slug="WNvgjda" tab="result" :preview="false" />
Sometimes we also need to access the original DOM event in an inline statement handler. You can pass it into a method using the special `$event` variable:
diff --git a/src/guide/forms.md b/src/guide/forms.md
index a4531a61..5eccb21c 100644
--- a/src/guide/forms.md
+++ b/src/guide/forms.md
@@ -16,7 +16,7 @@ You can use the `v-model` directive to create two-way data bindings on form inpu
<span id="vmodel-ime-tip"></span>
::: tip Note
-For languages that require an [IME](https://en.wikipedia.org/wiki/Input_method) (Chinese, Japanese, Korean etc.), you'll notice that `v-model` doesn't get updated during IME composition. If you want to cater for these updates as well, use `input` event instead.
+For languages that require an [IME](https://en.wikipedia.org/wiki/Input_method) (Chinese, Japanese, Korean etc.), you'll notice that `v-model` doesn't get updated during IME composition. If you want to respond to these updates as well, use an `input` event listener and `value` binding instead of using `v-model`.
:::
### Text
@@ -26,12 +26,7 @@ For languages that require an [IME](https://en.wikipedia.org/wiki/Input_method)
<p>Message is: {{ message }}</p>
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="eYNPEqj" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Handling forms: basic v-model">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/eYNPEqj">
- Handling forms: basic v-model</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Handling forms: basic v-model" slug="eYNPEqj" :preview="false" />
### Multiline text
@@ -42,12 +37,7 @@ For languages that require an [IME](https://en.wikipedia.org/wiki/Input_method)
<textarea v-model="message" placeholder="add multiple lines"></textarea>
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="xxGyXaG" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Handling forms: textarea">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/xxGyXaG">
- Handling forms: textarea</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Handling forms: textarea" slug="xxGyXaG" :preview="false" />
Interpolation on textareas won't work. Use `v-model` instead.
@@ -68,14 +58,9 @@ Single checkbox, boolean value:
<label for="checkbox">{{ checked }}</label>
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="PoqyJVE" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Handling forms: checkbox">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/PoqyJVE">
- Handling forms: checkbox</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Handling forms: checkbox" slug="PoqyJVE" :preview="false" />
-Multiple checkboxes, bound to the same Array:
+Multiple checkboxes, bound to the same array:
```html
<div id="v-model-multiple-checkboxes">
@@ -100,12 +85,7 @@ Vue.createApp({
}).mount('#v-model-multiple-checkboxes')
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="bGdmoyj" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Handling forms: multiple checkboxes">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/bGdmoyj">
- Handling forms: multiple checkboxes</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Handling forms: multiple checkboxes" slug="bGdmoyj" :preview="false" />
### Radio
@@ -131,12 +111,7 @@ Vue.createApp({
}).mount('#v-model-radiobutton')
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="MWwPEMM" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Handling forms: radiobutton">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/MWwPEMM">
- Handling forms: radiobutton</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Handling forms: radiobutton" slug="MWwPEMM" :preview="false" />
### Select
@@ -164,18 +139,13 @@ Vue.createApp({
}).mount('#v-model-select')
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="KKpGydL" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Handling forms: select">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/KKpGydL">
- Handling forms: select</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Handling forms: select" slug="KKpGydL" :preview="false" />
:::tip Note
If the initial value of your `v-model` expression does not match any of the options, the `<select>` element will render in an "unselected" state. On iOS this will cause the user not being able to select the first item because iOS does not fire a change event in this case. It is therefore recommended to provide a disabled option with an empty value, as demonstrated in the example above.
:::
-Multiple select (bound to Array):
+Multiple select (bound to array):
```html
<select v-model="selected" multiple>
@@ -187,12 +157,7 @@ Multiple select (bound to Array):
<span>Selected: {{ selected }}</span>
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="html,result" data-user="Vue" data-slug-hash="gOpBXPz" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Handling forms: select bound to array">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/gOpBXPz">
- Handling forms: select bound to array</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Handling forms: select bound to array" slug="gOpBXPz" tab="result" :preview="false" />
Dynamic options rendered with `v-for`:
@@ -222,12 +187,7 @@ Vue.createApp({
}).mount('#v-model-select-dynamic')
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="abORVZm" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Handling forms: select with dynamic options">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/abORVZm">
- Handling forms: select with dynamic options</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Handling forms: select with dynamic options" slug="abORVZm" :preview="false" />
## Value Bindings
diff --git a/src/guide/installation.md b/src/guide/installation.md
index 504954a9..1b9296d5 100644
--- a/src/guide/installation.md
+++ b/src/guide/installation.md
@@ -1,16 +1,23 @@
# Installation
+Vue.js is built by design to be incrementally adoptable. This means that it can be integrated into a project multiple ways depending on the requirements.
+
+There are four primary ways of adding Vue.js to a project:
+
+1. Import it as a [CDN package](#cdn) on the page
+2. Download the JavaScript files and [host them yourself](#download-and-self-host)
+3. Install it using [npm](#npm)
+4. Use the official [CLI](#cli) to scaffold a project, which provides batteries-included build setups for a modern frontend workflow (e.g., hot-reload, lint-on-save, and much more)
+
## Release Notes
-Latest beta version: 3.0.0-rc.5
+Latest version: 
-Detailed release notes for each version are available on [GitHub](https://github.com/vuejs/vue-next/releases).
+Detailed release notes for each version are available on [GitHub](https://github.com/vuejs/vue-next/blob/master/CHANGELOG.md).
## Vue Devtools
-> Currently in Beta
-
-> Vue Devtools for Vue 3 requires at least `vue@^3.0.0-rc.1`
+> Currently in Beta - Vuex and Router integration is still WIP
When using Vue, we recommend also installing the [Vue Devtools](https://github.com/vuejs/vue-devtools#vue-devtools) in your browser, allowing you to inspect and debug your Vue applications in a more user-friendly interface.
@@ -30,29 +37,47 @@ For prototyping or learning purposes, you can use the latest version with:
For production, we recommend linking to a specific version number and build to avoid unexpected breakage from newer versions.
-## NPM
+## Download and Self Host
+
+If you want to avoid using build tools but can't use a CDN in production then you can download the relevant `.js` file and host it using your own web server. You can then include it using a `<script>` tag, just like with the CDN approach.
-NPM is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as [Webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/). Vue also provides accompanying tools for authoring [Single File Components](../guide/single-file-component.html).
+The files can be browsed and downloaded from a CDN such as [unpkg](https://unpkg.com/browse/vue@next/dist/) or [jsDelivr](https://cdn.jsdelivr.net/npm/vue@next/dist/). The various different files are [explained later](#explanation-of-different-builds) but you would typically want to download both a development build and a production build.
+
+## npm
+
+npm is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as [webpack](https://webpack.js.org/) or [Rollup](https://rollupjs.org/).
```bash
# latest stable
$ npm install vue@next
```
+Vue also provides accompanying tools for authoring [Single File Components](../guide/single-file-component.html) (SFCs). If you want to use SFCs then you'll also need to install `@vue/compiler-sfc`:
+
+```bash
+$ npm install -D @vue/compiler-sfc
+```
+
+If you're coming from Vue 2 then note that `@vue/compiler-sfc` replaces `vue-template-compiler`.
+
+In addition to `@vue/compiler-sfc`, you'll also need a suitable SFC loader or plugin for your chosen bundler. See the [SFC documentation](../guide/single-file-component.html) for more information.
+
+In most cases, the preferred way to create a webpack build with minimal configuration is to use Vue CLI.
+
## CLI
Vue provides an [official CLI](https://github.com/vuejs/vue-cli) for quickly scaffolding ambitious Single Page Applications. It provides batteries-included build setups for a modern frontend workflow. It takes only a few minutes to get up and running with hot-reload, lint-on-save, and production-ready builds. See [the Vue CLI docs](https://cli.vuejs.org) for more details.
::: tip
-The CLI assumes prior knowledge of Node.js and the associated build tools. If you are new to Vue or front-end build tools, we strongly suggest going through <a href="./">the guide</a> without any build tools before using the CLI.
+The CLI assumes prior knowledge of Node.js and the associated build tools. If you are new to Vue or front-end build tools, we strongly suggest going through [the guide](./introduction.html) without any build tools before using the CLI.
:::
-For Vue 3, you should use Vue CLI v4.5 available on `npm` as `@vue/cli@next`. To upgrade, you need to reinstall the latest version of `@vue/cli` globally:
+For Vue 3, you should use Vue CLI v4.5 available on `npm` as `@vue/cli`. To upgrade, you need to reinstall the latest version of `@vue/cli` globally:
```bash
-yarn global add @vue/cli@next
+yarn global add @vue/cli
# OR
-npm install -g @vue/cli@next
+npm install -g @vue/cli
```
Then in the Vue projects, run
@@ -63,14 +88,14 @@ vue upgrade --next
## Vite
-[Vite](https://github.com/vitejs/vite) is a web development build tool that allows for lighting fast serving of code due its native ES Module import approach.
+[Vite](https://github.com/vitejs/vite) is a web development build tool that allows for lightning fast serving of code due its native ES Module import approach.
Vue projects can quickly be set up with Vite by running the following commands in your terminal.
-With NPM:
+With npm:
```bash
-$ npm init vite-app <project-name>
+$ npm init @vitejs/app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev
@@ -79,15 +104,21 @@ $ npm run dev
Or with Yarn:
```bash
-$ yarn create vite-app <project-name>
+$ yarn create @vitejs/app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev
```
+It might occur, that when your username has a space in it like 'Mike Baker', Vite cannot succeed. Have a try with
+
+```bash
+$ create-vite-app <project-name>
+```
+
## Explanation of Different Builds
-In the [`dist/` directory of the NPM package](https://cdn.jsdelivr.net/npm/vue@3.0.0-rc.1/dist/) you will find many different builds of Vue.js. Here is an overview of which `dist` file should be used depending on the use-case.
+In the [`dist/` directory of the npm package](https://cdn.jsdelivr.net/npm/vue@3.0.2/dist/) you will find many different builds of Vue.js. Here is an overview of which `dist` file should be used depending on the use-case.
### From CDN or without a Bundler
@@ -104,14 +135,14 @@ In the [`dist/` directory of the NPM package](https://cdn.jsdelivr.net/npm/vue@3
Global builds are not [UMD](https://github.com/umdjs/umd) builds. They are built as [IIFEs](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) and are only meant for direct use via `<script src="...">`.
:::
-#### vue(.runtime).esm-browser(.prod).js:
+#### `vue(.runtime).esm-browser(.prod).js`:
- For usage via native ES modules imports (in browser via `<script type="module">`.
- Shares the same runtime compilation, dependency inlining and hard-coded prod/dev behavior with the global build.
### With a Bundler
-#### vue(.runtime).esm-bundler.js:
+#### `vue(.runtime).esm-bundler.js`:
- For use with bundlers like `webpack`, `rollup` and `parcel`.
- Leaves prod/dev branches with `process.env.NODE_ENV guards` (must be replaced by bundler)
diff --git a/src/guide/instance.md b/src/guide/instance.md
index fcdf03da..9d28e131 100644
--- a/src/guide/instance.md
+++ b/src/guide/instance.md
@@ -1,139 +1,104 @@
-# The Application Instance
+# Application & Component Instances
-## Creating an Instance
+## Creating an Application Instance
Every Vue application starts by creating a new **application instance** with the `createApp` function:
```js
-Vue.createApp(/* options */)
+const app = Vue.createApp({
+ /* options */
+})
```
-After the instance is created, we can _mount_ it, passing a container to `mount` method. For example, if we want to mount a Vue application on `<div id="app"></div>`, we should pass `#app`:
+The application instance is used to register 'globals' that can then be used by components within that application. We'll discuss that in detail later in the guide but as a quick example:
```js
-Vue.createApp(/* options */).mount('#app')
-```
-
-Although not strictly associated with the [MVVM pattern](https://en.wikipedia.org/wiki/Model_View_ViewModel), Vue's design was partly inspired by it. As a convention, we often use the variable `vm` (short for ViewModel) to refer to our instance.
-
-When you create an instance, you pass in an **options object**. The majority of this guide describes how you can use these options to create your desired behavior. For reference, you can also browse the full list of options in the [API reference](../api/options-data.html).
-
-A Vue application consists of a **root instance** created with `createApp`, optionally organized into a tree of nested, reusable components. For example, a `todo` app's component tree might look like this:
-
-```
-Root Instance
-└─ TodoList
- ├─ TodoItem
- │ ├─ DeleteTodoButton
- │ └─ EditTodoButton
- └─ TodoListFooter
- ├─ ClearTodosButton
- └─ TodoListStatistics
+const app = Vue.createApp({})
+app.component('SearchInput', SearchInputComponent)
+app.directive('focus', FocusDirective)
+app.use(LocalePlugin)
```
-We'll talk about [the component system](component-basics.html) in detail later. For now, just know that all Vue components are also instances, and so accept the same options object.
-
-## Data and Methods
-
-When an instance is created, it adds all the properties found in its `data` to [Vue's **reactivity system**](reactivity.html). When the values of those properties change, the view will "react", updating to match the new values.
+Most of the methods exposed by the application instance return that same instance, allowing for chaining:
```js
-// Our data object
-const data = { a: 1 }
-
-// The object is added to the root instance
-const vm = Vue.createApp({
- data() {
- return data
- }
-}).mount('#app')
-
-// Getting the property on the instance
-// returns the one from the original data
-vm.a === data.a // => true
-
-// Setting the property on the instance
-// also affects the original data
-vm.a = 2
-data.a // => 2
+Vue.createApp({})
+ .component('SearchInput', SearchInputComponent)
+ .directive('focus', FocusDirective)
+ .use(LocalePlugin)
```
-When this data changes, the view will re-render. It should be noted that properties in `data` are only **reactive** if they existed when the instance was created. That means if you add a new property, like:
+You can browse the full application API in the [API reference](../api/application-api.html).
-```js
-vm.b = 'hi'
-```
+## The Root Component
+
+The options passed to `createApp` are used to configure the **root component**. That component is used as the starting point for rendering when we **mount** the application.
-Then changes to `b` will not trigger any view updates. If you know you'll need a property later, but it starts out empty or non-existent, you'll need to set some initial value. For example:
+An application needs to be mounted into a DOM element. For example, if we want to mount a Vue application into `<div id="app"></div>`, we should pass `#app`:
```js
-data() {
- return {
- newTodoText: '',
- visitCount: 0,
- hideCompletedTodos: false,
- todos: [],
- error: null
- }
+const RootComponent = {
+ /* options */
}
+const app = Vue.createApp(RootComponent)
+const vm = app.mount('#app')
```
-The only exception to this being the use of `Object.freeze()`, which prevents existing properties from being changed, which also means the reactivity system can't _track_ changes.
+Unlike most of the application methods, `mount` does not return the application. Instead it returns the root component instance.
-```js
-const obj = {
- foo: 'bar'
-}
+Although not strictly associated with the [MVVM pattern](https://en.wikipedia.org/wiki/Model_View_ViewModel), Vue's design was partly inspired by it. As a convention, we often use the variable `vm` (short for ViewModel) to refer to a component instance.
-Object.freeze(obj)
+While all the examples on this page only need a single component, most real applications are organized into a tree of nested, reusable components. For example, a Todo application's component tree might look like this:
-const vm = Vue.createApp({
- data() {
- return obj
- }
-}).mount('#app')
```
-
-```html
-<div id="app">
- <p>{{ foo }}</p>
- <!-- this will no longer update `foo`! -->
- <button v-on:click="foo = 'baz'">Change it</button>
-</div>
+Root Component
+└─ TodoList
+ ├─ TodoItem
+ │ ├─ DeleteTodoButton
+ │ └─ EditTodoButton
+ └─ TodoListFooter
+ ├─ ClearTodosButton
+ └─ TodoListStatistics
```
-In addition to data properties, instances expose a number of useful instance properties and methods. These are prefixed with `$` to differentiate them from user-defined properties. For example:
+Each component will have its own component instance, `vm`. For some components, such as `TodoItem`, there will likely be multiple instances rendered at any one time. All of the component instances in this application will share the same application instance.
+
+We'll talk about [the component system](component-basics.html) in detail later. For now, just be aware that the root component isn't really any different from any other component. The configuration options are the same, as is the behavior of the corresponding component instance.
+
+## Component Instance Properties
+
+Earlier in the guide we met `data` properties. Properties defined in `data` are exposed via the component instance:
```js
-const vm = Vue.createApp({
+const app = Vue.createApp({
data() {
- return {
- a: 1
- }
+ return { count: 4 }
}
-}).mount('#example')
+})
-vm.$data.a // => 1
+const vm = app.mount('#app')
+
+console.log(vm.count) // => 4
```
-In the future, you can consult the [API reference](../api/instance-properties.html) for a full list of instance properties and methods.
+There are various other component options that add user-defined properties to the component instance, such as `methods`, `props`, `computed`, `inject` and `setup`. We'll discuss each of these in depth later in the guide. All of the properties of the component instance, no matter how they are defined, will be accessible in the component's template.
+
+Vue also exposes some built-in properties via the component instance, such as `$attrs` and `$emit`. These properties all have a `$` prefix to avoid conflicting with user-defined property names.
-## Instance Lifecycle Hooks
+## Lifecycle Hooks
-Each instance goes through a series of initialization steps when it's created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called **lifecycle hooks**, giving users the opportunity to add their own code at specific stages.
+Each component instance goes through a series of initialization steps when it's created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called **lifecycle hooks**, giving users the opportunity to add their own code at specific stages.
For example, the [created](../api/options-lifecycle-hooks.html#created) hook can be used to run code after an instance is created:
```js
Vue.createApp({
data() {
- return {
- a: 1
- }
+ return { count: 1 }
},
created() {
// `this` points to the vm instance
- console.log('a is: ' + this.a) // => "a is: 1"
+ console.log('count is: ' + this.count) // => "count is: 1"
}
})
```
@@ -148,4 +113,4 @@ Don't use [arrow functions](https://developer.mozilla.org/en/docs/Web/JavaScript
Below is a diagram for the instance lifecycle. You don't need to fully understand everything going on right now, but as you learn and build more, it will be a useful reference.
-<img src="/images/lifecycle.png" width="840" height="auto" style="margin: 0px auto; display: block; max-width: 100%;" loading="lazy" alt="Instance lifecycle hooks">
+<img src="/images/lifecycle.svg" width="840" height="auto" style="margin: 0px auto; display: block; max-width: 100%;" loading="lazy" alt="Instance lifecycle hooks">
diff --git a/src/guide/introduction.md b/src/guide/introduction.md
index 242b089c..30562d30 100644
--- a/src/guide/introduction.md
+++ b/src/guide/introduction.md
@@ -1,12 +1,18 @@
# Introduction
+::: tip NOTE
+Already know Vue 2 and just want to learn about what's new in Vue 3? Check out the [Migration Guide](/guide/migration/introduction.html)!
+:::
+
## What is Vue.js?
Vue (pronounced /vjuː/, like **view**) is a **progressive framework** for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with [modern tooling](../guide/single-file-component.html) and [supporting libraries](https://github.com/vuejs/awesome-vue#components--libraries).
-If you’d like to learn more about Vue before diving in, we <a id="modal-player" href="#">created a video</a> walking through the core principles and a sample project.
+If you’d like to learn more about Vue before diving in, we <a id="modal-player" class="vuemastery-trigger" href="#">created a video</a> walking through the core principles and a sample project.
+
+<VideoLesson href="https://www.vuemastery.com/courses/intro-to-vue-3/intro-to-vue3" title="Watch a free video course on Vue Mastery">Watch a free video course on Vue Mastery</VideoLesson>
-If you are an experienced frontend developer and want to know how Vue compares to other libraries/frameworks, check out the [Comparison with Other Frameworks](TODO:comparison.html).
+<common-vuemastery-video-modal/>
## Getting Started
@@ -49,7 +55,7 @@ Vue.createApp(Counter).mount('#counter')
We have already created our very first Vue app! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now **reactive**. How do we know? Take a look at the example below where `counter` property increments every second and you will see how rendered DOM changes:
```js{8-10}
-const CounterApp = {
+const Counter = {
data() {
return {
counter: 0
@@ -88,12 +94,7 @@ const AttributeBinding = {
Vue.createApp(AttributeBinding).mount('#bind-attribute')
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="KKpRVvJ" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Attribute dynamic binding">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/KKpRVvJ">
- Attribute dynamic binding</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Attribute dynamic binding" slug="KKpRVvJ" />
Here we're encountering something new. The `v-bind` attribute you're seeing is called a **directive**. Directives are prefixed with `v-` to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here we are basically saying "_keep this element's `title` attribute up-to-date with the `message` property on the current active instance._"
@@ -128,12 +129,7 @@ const EventHandling = {
Vue.createApp(EventHandling).mount('#event-handling')
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="dyoeGjW" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Event handling">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/dyoeGjW">
- Event handling</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Event handling" slug="dyoeGjW" />
Note that in this method we update the state of our app without touching the DOM - all DOM manipulations are handled by Vue, and the code you write is focused on the underlying logic.
@@ -158,12 +154,7 @@ const TwoWayBinding = {
Vue.createApp(TwoWayBinding).mount('#two-way-binding')
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="poJVgZm" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Two-way binding">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/poJVgZm">
- Two-way binding</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Two-way binding" slug="poJVgZm" />
## Conditionals and Loops
@@ -191,14 +182,9 @@ This example demonstrates that we can bind data to not only text and attributes,
You can change `seen` from `true` to `false` in the sandbox below to check the effect:
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="oNXdbpB" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Conditional rendering">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/oNXdbpB">
- Conditional rendering</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Conditional rendering" slug="oNXdbpB" tab="js,result" />
-There are quite a few other directives, each with its own special functionality. For example, the `v-for` directive can be used to display a list of items using the data from an Array:
+There are quite a few other directives, each with its own special functionality. For example, the `v-for` directive can be used to display a list of items using the data from an array:
```html
<div id="list-rendering">
@@ -226,12 +212,7 @@ const ListRendering = {
Vue.createApp(ListRendering).mount('#list-rendering')
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="mdJLVXq" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="List rendering">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/mdJLVXq">
- List rendering</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="List rendering" slug="mdJLVXq" />
## Composing with Components
@@ -315,12 +296,7 @@ app.component('todo-item', {
app.mount('#todo-list-app')
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="VwLxeEz" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Intro-Components-1">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/VwLxeEz">
- Intro-Components-1</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Intro-Components-1" slug="VwLxeEz" />
This is a contrived example, but we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the props interface. We can now further improve our `<todo-item>` component with more complex template and logic without affecting the parent app.
@@ -340,7 +316,7 @@ In a large application, it is necessary to divide the whole app into components
You may have noticed that Vue components are very similar to **Custom Elements**, which are part of the [Web Components Spec](https://www.w3.org/wiki/WebComponents/). That's because Vue's component syntax is loosely modeled after the spec. For example, Vue components implement the [Slot API](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) and the `is` special attribute. However, there are a few key differences:
-1. The Web Components Spec has been finalized but is not natively implemented in every browser. Safari 10.1+, Chrome 54+ and Firefox 63+ natively support web components. In comparison, Vue components work consistently in all supported browsers (IE11 with compatibility build and above). When needed, Vue components can also be wrapped inside a native custom element.
+1. The Web Components Spec has been finalized but is not natively implemented in every browser. Safari 10.1+, Chrome 54+ and Firefox 63+ natively support web components. In comparison, Vue components work consistently in all supported browsers (except Internet Explorer 11 - please check details [here](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0038-vue3-ie11-support.md)). When needed, Vue components can also be wrapped inside a native custom element.
[//]: # 'TODO: link to compatibility build'
diff --git a/src/guide/list.md b/src/guide/list.md
index 6ac92074..34bc3fe3 100644
--- a/src/guide/list.md
+++ b/src/guide/list.md
@@ -24,12 +24,7 @@ Vue.createApp({
Result:
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="VwLGbwa" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="v-for with Array">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/VwLGbwa">
- v-for with Array</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="v-for with Array" slug="VwLGbwa" tab="js,result" :preview="false" />
Inside `v-for` blocks we have full access to parent scope properties. `v-for` also supports an optional second argument for the index of the current item.
@@ -54,12 +49,7 @@ Vue.createApp({
Result:
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="wvaEdBP" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="v-for with Array and index">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/wvaEdBP">
- v-for with Array and index</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="v-for with Array and index" slug="wvaEdBP" tab="js,result" :preview="false" />
You can also use `of` as the delimiter instead of `in`, so that it is closer to JavaScript's syntax for iterators:
@@ -95,12 +85,7 @@ Vue.createApp({
Result:
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="NWqLjqy" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="v-for with Object">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/NWqLjqy">
- v-for with Object</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="v-for with Object" slug="NWqLjqy" tab="js,result" :preview="false" />
You can also provide a second argument for the property's name (a.k.a. key):
@@ -110,12 +95,7 @@ You can also provide a second argument for the property's name (a.k.a. key):
</li>
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="poJOPjx" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="v-for with Object and key">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/poJOPjx">
- v-for with Object and key</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="v-for with Object and key" slug="poJOPjx" tab="js,result" :preview="false" />
And another for the index:
@@ -125,12 +105,7 @@ And another for the index:
</li>
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="abOaWdo" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="v-for with Object key and index">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/abOaWdo">
- v-for with Object key and index</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="v-for with Object key and index" slug="abOaWdo" tab="js,result" :preview="false" />
:::tip Note
When iterating over an object, the order is based on the enumeration order of `Object.keys()`, which isn't guaranteed to be consistent across JavaScript engine implementations.
@@ -193,7 +168,7 @@ Sometimes we want to display a filtered or sorted version of an array without ac
For example:
```html
-<li v-for="n in evenNumbers">{{ n }}</li>
+<li v-for="n in evenNumbers" :key="n">{{ n }}</li>
```
```js
@@ -213,7 +188,7 @@ In situations where computed properties are not feasible (e.g. inside nested `v-
```html
<ul v-for="numbers in sets">
- <li v-for="n in even(numbers)">{{ n }}</li>
+ <li v-for="n in even(numbers)" :key="n">{{ n }}</li>
</ul>
```
@@ -236,18 +211,13 @@ methods: {
```html
<div id="range" class="demo">
- <span v-for="n in 10">{{ n }} </span>
+ <span v-for="n in 10" :key="n">{{ n }} </span>
</div>
```
Result:
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="html,result" data-user="Vue" data-slug-hash="NWqLjNY" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="v-for with a range">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/NWqLjNY">
- v-for with a range</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="v-for with a range" slug="NWqLjNY" tab="html,result" />
## `v-for` on a `<template>`
@@ -255,7 +225,7 @@ Similar to template `v-if`, you can also use a `<template>` tag with `v-for` to
```html
<ul>
- <template v-for="item in items">
+ <template v-for="item in items" :key="item.msg">
<li>{{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
@@ -268,25 +238,24 @@ Similar to template `v-if`, you can also use a `<template>` tag with `v-for` to
Note that it's **not** recommended to use `v-if` and `v-for` together. Refer to [style guide](../style-guide/#avoid-v-if-with-v-for-essential) for details.
:::
-When they exist on the same node, `v-for` has a higher priority than `v-if`. That means the `v-if` will be run on each iteration of the loop separately. This can be useful when you want to render nodes for only _some_ items, like below:
+When they exist on the same node, `v-if` has a higher priority than `v-for`. That means the `v-if` condition will not have access to variables from the scope of the `v-for`:
```html
+<!-- This will throw an error because property "todo" is not defined on instance. -->
+
<li v-for="todo in todos" v-if="!todo.isComplete">
- {{ todo }}
+ {{ todo.name }}
</li>
```
-The above only renders the todos that are not complete.
-
-If instead, your intent is to conditionally skip execution of the loop, you can place the `v-if` on a wrapper element (or [`<template>`](conditional#conditional-groups-with-v-if-on-lt-template-gt)). For example:
+This can be fixed by moving `v-for` to a wrapping `<template>` tag:
```html
-<ul v-if="todos.length">
- <li v-for="todo in todos">
- {{ todo }}
+<template v-for="todo in todos" :key="todo.name">
+ <li v-if="!todo.isComplete">
+ {{ todo.name }}
</li>
-</ul>
-<p v-else>No todos left!</p>
+</template>
```
## `v-for` with a Component
@@ -376,15 +345,11 @@ app.component('todo-item', {
<button @click="$emit('remove')">Remove</button>
</li>
`,
- props: ['title']
+ props: ['title'],
+ emits: ['remove']
})
app.mount('#todo-list-example')
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="abOaWpz" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="v-for with components">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/abOaWpz">
- v-for with components</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="v-for with components" slug="abOaWpz" tab="js,result" :preview="false" />
diff --git a/src/guide/migration/array-refs.md b/src/guide/migration/array-refs.md
new file mode 100644
index 00000000..d55f8ecd
--- /dev/null
+++ b/src/guide/migration/array-refs.md
@@ -0,0 +1,72 @@
+---
+title: v-for Array Refs
+badges:
+ - breaking
+---
+
+# {{ $frontmatter.title }} <MigrationBadges :badges="$frontmatter.badges" />
+
+In Vue 2, using the `ref` attribute inside `v-for` will populate the corresponding `$refs` property with an array of refs. This behavior becomes ambiguous and inefficient when there are nested `v-for`s present.
+
+In Vue 3, such usage will no longer automatically create an array in `$refs`. To retrieve multiple refs from a single binding, bind `ref` to a function which provides more flexibility (this is a new feature):
+
+```html
+<div v-for="item in list" :ref="setItemRef"></div>
+```
+
+With Options API:
+
+```js
+export default {
+ data() {
+ return {
+ itemRefs: []
+ }
+ },
+ methods: {
+ setItemRef(el) {
+ if (el) {
+ this.itemRefs.push(el)
+ }
+ }
+ },
+ beforeUpdate() {
+ this.itemRefs = []
+ },
+ updated() {
+ console.log(this.itemRefs)
+ }
+}
+```
+
+With Composition API:
+
+```js
+import { onBeforeUpdate, onUpdated } from 'vue'
+
+export default {
+ setup() {
+ let itemRefs = []
+ const setItemRef = el => {
+ if (el) {
+ itemRefs.push(el)
+ }
+ }
+ onBeforeUpdate(() => {
+ itemRefs = []
+ })
+ onUpdated(() => {
+ console.log(itemRefs)
+ })
+ return {
+ setItemRef
+ }
+ }
+}
+```
+
+Note that:
+
+- `itemRefs` doesn't have to be an array: it can also be an object where the refs are set by their iteration keys.
+
+- This also allows `itemRefs` to be made reactive and watched, if needed.
diff --git a/src/guide/migration/async-components.md b/src/guide/migration/async-components.md
index ee0b1c9f..f9032ad1 100644
--- a/src/guide/migration/async-components.md
+++ b/src/guide/migration/async-components.md
@@ -20,14 +20,14 @@ For a more in-depth explanation, read on!
Previously, async components were created by simply defining a component as a function that returned a promise, such as:
```js
-const asyncPage = () => import('./NextPage.vue')
+const asyncModal = () => import('./Modal.vue')
```
Or, for the more advanced component syntax with options:
```js
-const asyncPage = {
- component: () => import('./NextPage.vue'),
+const asyncModal = {
+ component: () => import('./Modal.vue'),
delay: 200,
timeout: 3000,
error: ErrorComponent,
@@ -45,11 +45,11 @@ import ErrorComponent from './components/ErrorComponent.vue'
import LoadingComponent from './components/LoadingComponent.vue'
// Async component without options
-const asyncPage = defineAsyncComponent(() => import('./NextPage.vue'))
+const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))
// Async component with options
-const asyncPageWithOptions = defineAsyncComponent({
- loader: () => import('./NextPage.vue'),
+const asyncModalWithOptions = defineAsyncComponent({
+ loader: () => import('./Modal.vue'),
delay: 200,
timeout: 3000,
errorComponent: ErrorComponent,
@@ -57,17 +57,21 @@ const asyncPageWithOptions = defineAsyncComponent({
})
```
+::: tip NOTE
+Vue Router supports a similar mechanism for asynchronously loading route components, known as *lazy loading*. Despite the similarities, this feature is distinct from Vue's support for async components. You should **not** use `defineAsyncComponent` when configuring route components with Vue Router. You can read more about this in the [Lazy Loading Routes](https://next.router.vuejs.org/guide/advanced/lazy-loading.html) section of the Vue Router documentation.
+:::
+
Another change that has been made from 2.x is that the `component` option is now renamed to `loader` in order to accurately communicate that a component definition cannot be provided directly.
```js{4}
import { defineAsyncComponent } from 'vue'
-const asyncPageWithOptions = defineAsyncComponent({
- loader: () => import('./NextPage.vue'),
+const asyncModalWithOptions = defineAsyncComponent({
+ loader: () => import('./Modal.vue'),
delay: 200,
timeout: 3000,
- error: ErrorComponent,
- loading: LoadingComponent
+ errorComponent: ErrorComponent,
+ loadingComponent: LoadingComponent
})
```
diff --git a/src/guide/migration/attribute-coercion.md b/src/guide/migration/attribute-coercion.md
index cd1d1695..a2800190 100644
--- a/src/guide/migration/attribute-coercion.md
+++ b/src/guide/migration/attribute-coercion.md
@@ -60,16 +60,16 @@ The following table describes the new behavior:
| Binding expression | `foo` <sup>normal</sup> | `draggable` <sup>enumerated</sup> |
| ------------------- | -------------------------- | --------------------------------- |
-| `:attr="null"` | / | / <sup>†</sup> |
+| `:attr="null"` | / | / <sup>*</sup> |
| `:attr="undefined"` | / | / |
| `:attr="true"` | `foo="true"` | `draggable="true"` |
-| `:attr="false"` | `foo="false"` <sup>†</sup> | `draggable="false"` |
-| `:attr="0"` | `foo="0"` | `draggable="0"` <sup>†</sup> |
-| `attr=""` | `foo=""` | `draggable=""` <sup>†</sup> |
-| `attr="foo"` | `foo="foo"` | `draggable="foo"` <sup>†</sup> |
-| `attr` | `foo=""` | `draggable=""` <sup>†</sup> |
+| `:attr="false"` | `foo="false"` <sup>*</sup> | `draggable="false"` |
+| `:attr="0"` | `foo="0"` | `draggable="0"` <sup>*</sup> |
+| `attr=""` | `foo=""` | `draggable=""` <sup>*</sup> |
+| `attr="foo"` | `foo="foo"` | `draggable="foo"` <sup>*</sup> |
+| `attr` | `foo=""` | `draggable=""` <sup>*</sup> |
-<small>†: changed</small>
+<small>*: changed</small>
Coercion for boolean attributes is left untouched.
diff --git a/src/guide/migration/attrs-includes-class-style.md b/src/guide/migration/attrs-includes-class-style.md
new file mode 100644
index 00000000..dbb6a5ce
--- /dev/null
+++ b/src/guide/migration/attrs-includes-class-style.md
@@ -0,0 +1,69 @@
+---
+title: $attrs includes class & style
+badges:
+ - breaking
+---
+
+# `$attrs` includes `class` & `style` <MigrationBadges :badges="$frontmatter.badges" />
+
+## Overview
+
+`$attrs` now contains _all_ attributes passed to a component, including `class` and `style`.
+
+## 2.x Behavior
+
+`class` and `style` attributes get some special handling in the Vue 2 virtual DOM implementation. For that reason, they are _not_ included in `$attrs`, while all other attributes are.
+
+A side effect of this manifests when using `inheritAttrs: false`:
+
+- Attributes in `$attrs` are no longer automatically added to the root element, leaving it to the developer to decide where to add them.
+- But `class` and `style`, not being part of `$attrs`, will still be applied to the component's root element:
+
+```vue
+<template>
+ <label>
+ <input type="text" v-bind="$attrs" />
+ </label>
+</template>
+<script>
+export default {
+ inheritAttrs: false
+}
+</script>
+```
+
+when used like this:
+
+```html
+<my-component id="my-id" class="my-class"></my-component>
+```
+
+...will generate this HTML:
+
+```html
+<label class="my-class">
+ <input type="text" id="my-id" />
+</label>
+```
+
+## 3.x Behavior
+
+`$attrs` contains _all_ attributes, which makes it easier to apply all of them to a different element. The example from above now generates the following HTML:
+
+```html
+<label>
+ <input type="text" id="my-id" class="my-class" />
+</label>
+```
+
+## Migration Strategy
+
+In components that use `inheritAttrs: false`, make sure that styling still works as intended. If you previously relied on the special behavior of `class` and `style`, some visuals might be broken as these attributes might now be applied to another element.
+
+## See also
+
+- [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
+- [Migration guide - `$listeners` removed](./listeners-removed.md)
+- [Migration guide - New Emits Option](./emits-option.md)
+- [Migration guide - `.native` modifier removed](./v-on-native-modifier-removed.md)
+- [Migration guide - Changes in the Render Functions API](./render-function-api.md)
diff --git a/src/guide/migration/children.md b/src/guide/migration/children.md
new file mode 100644
index 00000000..087a6ee9
--- /dev/null
+++ b/src/guide/migration/children.md
@@ -0,0 +1,40 @@
+---
+badges:
+ - removed
+---
+
+# $children <MigrationBadges :badges="$frontmatter.badges" />
+
+## Overview
+
+The `$children` instance property has been removed from Vue 3.0 and is no longer supported.
+
+## 2.x Syntax
+
+In 2.x, developers could access direct child components of the current instance with `this.$children`:
+
+```vue
+<template>
+ <div>
+ <img alt="Vue logo" src="./assets/logo.png">
+ <my-button>Change logo</my-button>
+ </div>
+</template>
+
+<script>
+import MyButton from './MyButton'
+
+export default {
+ components: {
+ MyButton
+ },
+ mounted() {
+ console.log(this.$children) // [VueComponent]
+ }
+}
+</script>
+```
+
+## 3.x Update
+
+In 3.x, the `$children` property is removed and no longer supported. Instead, if you need to access a child component instance, we recommend using [$refs](/guide/component-template-refs.html#template-refs).
diff --git a/src/guide/migration/custom-directives.md b/src/guide/migration/custom-directives.md
index a0a5bb96..aca9148a 100644
--- a/src/guide/migration/custom-directives.md
+++ b/src/guide/migration/custom-directives.md
@@ -7,12 +7,7 @@ badges:
## Overview
-Here is a quick summary of what has changed:
-
-- API has been renamed to better align with component lifecycle
-- Custom directives will be controlled by child component via `v-bind="$attrs"`
-
-For more information, read on!
+The hook functions for directives have been renamed to better align with the component lifecycle.
## 2.x Syntax
@@ -27,7 +22,7 @@ In Vue 2, custom directives were created by using the hooks listed below to targ
Here’s an example of this:
```html
-<p v-highlight="yellow">Highlight this text bright yellow</p>
+<p v-highlight="'yellow'">Highlight this text bright yellow</p>
```
```js
@@ -44,21 +39,23 @@ Here, in the initial setup for this element, the directive binds a style by pass
In Vue 3, however, we’ve created a more cohesive API for custom directives. As you can see, they differ greatly from our component lifecycle methods even though we’re hooking into similar events. We’ve now unified them like so:
+- **created** - new! This is called before the element's attributes or event listeners are applied.
- bind → **beforeMount**
- inserted → **mounted**
-- **beforeUpdate**: new! this is called before the element itself is updated, much like the component lifecycle hooks.
+- **beforeUpdate**: new! This is called before the element itself is updated, much like the component lifecycle hooks.
- update → removed! There were too many similarities to updated, so this is redundant. Please use updated instead.
- componentUpdated → **updated**
-- **beforeUnmount** new! similar to component lifecycle hooks, this will be called right before an element is unmounted.
+- **beforeUnmount**: new! Similar to component lifecycle hooks, this will be called right before an element is unmounted.
- unbind -> **unmounted**
The final API is as follows:
```js
const MyDirective = {
- beforeMount(el, binding, vnode, prevVnode) {},
+ created(el, binding, vnode, prevVnode) {}, // new
+ beforeMount() {},
mounted() {},
- beforeUpdate() {},
+ beforeUpdate() {}, // new
updated() {},
beforeUnmount() {}, // new
unmounted() {}
@@ -68,7 +65,7 @@ const MyDirective = {
The resulting API could be used like this, mirroring the example from earlier:
```html
-<p v-highlight="yellow">Highlight this text bright yellow</p>
+<p v-highlight="'yellow'">Highlight this text bright yellow</p>
```
```js
@@ -83,26 +80,26 @@ app.directive('highlight', {
Now that the custom directive lifecycle hooks mirror those of the components themselves, they become easier to reason about and remember!
-## Implementation Details
-
-In Vue 3, we're now supporting fragments, which allow us to return more than one DOM node per component. You can imagine how handy that is for something like a component with multiple lis or the children elements of a table:
+### Edge Case: Accessing the component instance
-```html
-<template>
- <li>Hello</li>
- <li>Vue</li>
- <li>Devs!</li>
-</template>
-```
+It's generally recommended to keep directives independent of the component instance they are used in. Accessing the instance from within a custom directive is often a sign that the directive should rather be a component itself. However, there are situations where this actually makes sense.
-As wonderfully flexible as this is, we can potentially encounter a problem with a custom directive that could have multiple root nodes.
+In Vue 2, the component instance had to be accessed through the `vnode` argument:
-As a result, custom directives are now included as part of a virtual DOM node’s data. When a custom directive is used on a component, hooks are passed down to the component as extraneous props and end up in `this.$attrs`.
+```js
+bind(el, binding, vnode) {
+ const vm = vnode.context
+}
+```
-This also means it's possible to directly hook into an element's lifecycle like this in the template, which can be handy when a custom directive is too involved:
+In Vue 3, the instance is now part of the `binding`:
-```html
-<div @vnodeMounted="myHook" />
+```js
+mounted(el, binding, vnode) {
+ const vm = binding.instance
+}
```
-This is consistent with the attribute fallthrough behavior, so when a child component uses `v-bind="$attrs"` on an inner element, it will apply any custom directives used on it as well.
+:::warning
+With [fragments](/guide/migration/fragments.html#overview) support, components can potentially have more than one root node. When applied to a multi-root component, a custom directive will be ignored and a warning will be logged.
+:::
diff --git a/src/guide/migration/custom-elements-interop.md b/src/guide/migration/custom-elements-interop.md
index 2185d338..1135dc87 100644
--- a/src/guide/migration/custom-elements-interop.md
+++ b/src/guide/migration/custom-elements-interop.md
@@ -3,11 +3,11 @@ badges:
- breaking
---
-# Custom Elements Interop changes <MigrationBadges :badges="$frontmatter.badges" />
+# Custom Elements Interop <MigrationBadges :badges="$frontmatter.badges" />
-# Overview
+## Overview
-- **BREAKING:** Custom elements whitelisting is now performed during template compilation, and should be configured via compiler options instead of runtime config.
+- **BREAKING:** The checks to determine whether tags should be treated as custom elements are now performed during template compilation, and should be configured via compiler options instead of runtime config.
- **BREAKING:** Special `is` prop usage is restricted to the reserved `<component>` tag only.
- **NEW:** There is new `v-is` directive to support 2.x use cases where `is` was used on native elements to work around native HTML parsing restrictions.
@@ -21,7 +21,7 @@ If we want to add a custom element defined outside of Vue (e.g. using the Web Co
### 2.x Syntax
-In Vue 2.x, whitelisting tags as custom elements was done via `Vue.config.ignoredElements`:
+In Vue 2.x, configuring tags as custom elements was done via `Vue.config.ignoredElements`:
```js
// This will make Vue ignore custom element defined outside of Vue
diff --git a/src/guide/migration/data-option.md b/src/guide/migration/data-option.md
index 513f3edb..3399f554 100644
--- a/src/guide/migration/data-option.md
+++ b/src/guide/migration/data-option.md
@@ -10,6 +10,8 @@ badges:
- **BREAKING**: `data` component option declaration no longer accepts a plain JavaScript `object` and expects a `function` declaration.
+- **BREAKING**: when merging multiple `data` return values from mixins or extends, the merge is now shallow instead of deep (only root-level properties are merged).
+
## 2.x Syntax
In 2.x, developers could define the `data` option with either an `object` or a `function`.
@@ -60,9 +62,60 @@ Using the example above, there would only be one possible implementation of the
</script>
```
+## Mixin Merge Behavior Change
+
+In addition, when `data()` from a component and its mixins or extends base are merged, the merge is now performed *shallowly*:
+
+```js
+const Mixin = {
+ data() {
+ return {
+ user: {
+ name: 'Jack',
+ id: 1
+ }
+ }
+ }
+}
+
+const CompA = {
+ mixins: [Mixin],
+ data() {
+ return {
+ user: {
+ id: 2
+ }
+ }
+ }
+}
+```
+
+In Vue 2.x, the resulting `$data` is:
+
+```json
+{
+ user: {
+ id: 2,
+ name: 'Jack'
+ }
+}
+```
+
+In 3.0, the result will be:
+
+```json
+{
+ user: {
+ id: 2
+ }
+}
+```
+
## Migration Strategy
For users relying on the object declaration, we recommend:
- Extracting the shared data into an external object and using it as a property in `data`
- Rewrite references to the shared data to point to a new shared object
+
+For users relying on the deep merge behavior from mixins, we recommend refactoring your code to avoid such reliance altogether, since deep merges from mixins are very implicit and can make the code logic more difficult to understand and debug.
diff --git a/src/guide/migration/emits-option.md b/src/guide/migration/emits-option.md
new file mode 100644
index 00000000..35b40aea
--- /dev/null
+++ b/src/guide/migration/emits-option.md
@@ -0,0 +1,97 @@
+---
+title: emits Option
+badges:
+ - new
+---
+
+# `emits` Option <MigrationBadges :badges="$frontmatter.badges" />
+
+## Overview
+
+Vue 3 now offers an `emits` option, similar to the existing `props` option. This option can be used to define the events that a component can emit to its parent.
+
+## 2.x Behavior
+
+In Vue 2, you can define the props that a component receives, but you can't declare which events it can emit:
+
+```vue
+<template>
+ <div>
+ <p>{{ text }}</p>
+ <button v-on:click="$emit('accepted')">OK</button>
+ </div>
+</template>
+<script>
+ export default {
+ props: ['text']
+ }
+</script>
+```
+
+## 3.x Behavior
+
+Similar to props, the events that the component emits can now be defined with the `emits` option:
+
+```vue
+<template>
+ <div>
+ <p>{{ text }}</p>
+ <button v-on:click="$emit('accepted')">OK</button>
+ </div>
+</template>
+<script>
+ export default {
+ props: ['text'],
+ emits: ['accepted']
+ }
+</script>
+```
+
+The option also accepts an object, which allows the developer to define validators for the arguments that are passed with the emitted event, similar to validators in `props` definitions.
+
+For more information on this, please read the [API documentation for this feature](../../api/options-data.md#emits).
+
+## Migration Strategy
+
+It is highly recommended that you document all of the events emitted by each of your components using `emits`.
+
+This is especially important because of [the removal of the `.native` modifier](./v-on-native-modifier-removed.md). Any listeners for events that aren't declared with `emits` will now be included in the component's `$attrs`, which by default will be bound to the component's root node.
+
+### Example
+
+For components that re-emit native events to their parent, this would now lead to two events being fired:
+
+```vue
+<template>
+ <button v-on:click="$emit('click', $event)">OK</button>
+</template>
+<script>
+export default {
+ emits: [] // without declared event
+}
+</script>
+```
+
+When a parent listens for the `click` event on the component:
+
+```html
+<my-button v-on:click="handleClick"></my-button>
+```
+
+it would now be triggered _twice_:
+
+- Once from `$emit()`.
+- Once from a native event listener applied to the root element.
+
+Here you have two options:
+
+1. Properly declare the `click` event. This is useful if you actually do add some logic to that event handler in `<my-button>`.
+2. Remove the re-emitting of the event, since the parent can now listen for the native event easily, without adding `.native`. Suitable when you really only re-emit the event anyway.
+
+## See also
+
+- [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0030-emits-option.md)
+- [Migration guide - `.native` modifier removed](./v-on-native-modifier-removed.md)
+- [Migration guide - `$listeners` removed](./listeners-removed.md)
+- [Migration guide - `$attrs` includes `class` & `style`](./attrs-includes-class-style.md)
+- [Migration guide - Changes in the Render Functions API](./render-function-api.md)
diff --git a/src/guide/migration/events-api.md b/src/guide/migration/events-api.md
index c0b5709b..0e22aeb3 100644
--- a/src/guide/migration/events-api.md
+++ b/src/guide/migration/events-api.md
@@ -58,6 +58,24 @@ We removed `$on`, `$off` and `$once` methods from the instance completely. `$emi
## Migration Strategy
-Existing event hubs can be replaced by using an external library implementing the event emitter interface, for example [mitt](https://github.com/developit/mitt).
+In Vue 3, it is no longer possible to use these APIs to listen to a component's own emitted events from within a component, there is no migration path for that use case.
-These methods can also be supported in compatibility builds.
+But the eventHub pattern can be replaced by using an external library implementing the event emitter interface, for example [mitt](https://github.com/developit/mitt) or [tiny-emitter](https://github.com/scottcorgan/tiny-emitter).
+
+Example:
+
+```js
+//eventHub.js
+import emitter from 'tiny-emitter/instance'
+
+export default {
+ $on: (...args) => emitter.on(...args),
+ $once: (...args) => emitter.once(...args),
+ $off: (...args) => emitter.off(...args),
+ $emit: (...args) => emitter.emit(...args),
+}
+```
+
+This provides the same event emitter API as in Vue 2.
+
+These methods may also be supported in a future compatibility build of Vue 3.
diff --git a/src/guide/migration/filters.md b/src/guide/migration/filters.md
index 7f8a29ba..cc58cbb5 100644
--- a/src/guide/migration/filters.md
+++ b/src/guide/migration/filters.md
@@ -7,7 +7,7 @@ badges:
## Overview
-Filters are removed from Vue 3.0 and no longer be supported.
+Filters are removed from Vue 3.0 and no longer supported.
## 2.x Syntax
@@ -72,3 +72,31 @@ Using the example above, here is one example of how it could be implemented.
## Migration Strategy
Instead of using filters, we recommend replacing them with computed properties or methods.
+
+### Global Filters
+
+If you are using filters that were globally registered and then used throughout your app, it's likely not convenient to replace them with computed properties or methods in each individual component.
+
+Instead, you can make your global filters available to all components through [globalProperties](../../api/application-config.html#globalproperties):
+
+```js
+// main.js
+const app = createApp(App)
+
+app.config.globalProperties.$filters = {
+ currencyUSD(value) {
+ return '$' + value
+ }
+}
+```
+
+Then you can fix all templates using this `$filters` object like this:
+
+```html
+<template>
+ <h1>Bank Account Balance</h1>
+ <p>{{ $filters.currencyUSD(accountBalance) }}</p>
+</template>
+```
+
+Note that with this approach, you can only use methods, not computed properties, as the latter only make sense when defined in the context of an individual component.
diff --git a/src/guide/migration/functional-components.md b/src/guide/migration/functional-components.md
index 056b8996..876195dc 100644
--- a/src/guide/migration/functional-components.md
+++ b/src/guide/migration/functional-components.md
@@ -44,8 +44,8 @@ export default {
Or, for those who preferred the `<template>` in a single-file component:
-```js
-// Vue 2 Functional Component Example with <template>
+```vue
+<!-- Vue 2 Functional Component Example with <template> -->
<template functional>
<component
:is="`h${props.level}`"
@@ -87,14 +87,14 @@ export default DynamicHeading
### Single File Components (SFCs)
-In 3.x, the performance difference between stateful and functional components has been drastically reduced and will be insignificant in most use cases. As a result, the migration path for developers using `functional` on SFCs is to remove the attribute. No additional work required.
+In 3.x, the performance difference between stateful and functional components has been drastically reduced and will be insignificant in most use cases. As a result, the migration path for developers using `functional` on SFCs is to remove the attribute and rename all references of `props` to `$props` and `attrs` to `$attrs`.
Using our `<dynamic-heading>` example from before, here is how it would look now.
-```js{1}
+```vue{1,3,4}
<template>
<component
- v-bind:is="`h${props.level}`"
+ v-bind:is="`h${$props.level}`"
v-bind="$attrs"
/>
</template>
diff --git a/src/guide/migration/global-api-treeshaking.md b/src/guide/migration/global-api-treeshaking.md
index 9555ee21..d730cf71 100644
--- a/src/guide/migration/global-api-treeshaking.md
+++ b/src/guide/migration/global-api-treeshaking.md
@@ -13,7 +13,7 @@ If you’ve ever had to manually manipulate DOM in Vue, you might have come acro
import Vue from 'vue'
Vue.nextTick(() => {
- // something something DOM-related
+ // something DOM-related
})
```
@@ -36,7 +36,7 @@ test('an async feature', async () => {
`Vue.nextTick()` is a global API exposed directly on a single Vue object – in fact, the instance method `$nextTick()` is just a handy wrapper around `Vue.nextTick()` with the callback’s `this` context automatically bound to the current instance for convenience.
-But what if you’ve never had to deal with manual DOM manipulation, nor are you using or testing async components in our app? Or, what if, for whatever reason, you prefer to use the good old `window.setTimeout()` instead? In such a case, the code for `nextTick()` will become dead code – that is, code that’s written but never used. And dead code is hardly a good thing, especially in our client-side context where every kilobyte matters.
+But what if you’ve never had to deal with manual DOM manipulation, nor are you using or testing async components in your app? Or, what if, for whatever reason, you prefer to use the good old `window.setTimeout()` instead? In such a case, the code for `nextTick()` will become dead code – that is, code that’s written but never used. And dead code is hardly a good thing, especially in our client-side context where every kilobyte matters.
Module bundlers like [webpack](https://webpack.js.org/) support [tree-shaking](https://webpack.js.org/guides/tree-shaking/), which is a fancy term for “dead code elimination.” Unfortunately, due to how the code is written in previous Vue versions, global APIs like `Vue.nextTick()` are not tree-shakeable and will be included in the final bundle regardless of where they are actually used or not.
@@ -48,7 +48,7 @@ In Vue 3, the global and internal APIs have been restructured with tree-shaking
import { nextTick } from 'vue'
nextTick(() => {
- // something something DOM-related
+ // something DOM-related
})
```
diff --git a/src/guide/migration/global-api.md b/src/guide/migration/global-api.md
index b2727957..7174a2be 100644
--- a/src/guide/migration/global-api.md
+++ b/src/guide/migration/global-api.md
@@ -5,7 +5,7 @@ badges:
# Global API <MigrationBadges :badges="$frontmatter.badges" />
-Vue 2.x has a number of global APIs and configurations that globally mutate Vue’s behavior. For instance, to create a global component, you would use the `Vue.component` API like this:
+Vue 2.x has a number of global APIs and configurations that globally mutate Vue’s behavior. For instance, to register a global component, you would use the `Vue.component` API like this:
```js
Vue.component('button-counter', {
@@ -28,18 +28,18 @@ While this approach is convenient, it leads to a couple of problems. Technically
- Global configuration makes it easy to accidentally pollute other test cases during testing. Users need to carefully store original global configuration and restore it after each test (e.g. resetting `Vue.config.errorHandler`). Some APIs like `Vue.use` and `Vue.mixin` don't even have a way to revert their effects. This makes tests involving plugins particularly tricky. In fact, vue-test-utils has to implement a special API `createLocalVue` to deal with this:
-```js
-import { createLocalVue, mount } from '@vue/test-utils'
+ ```js
+ import { createLocalVue, mount } from '@vue/test-utils'
-// create an extended `Vue` constructor
-const localVue = createLocalVue()
+ // create an extended `Vue` constructor
+ const localVue = createLocalVue()
-// install a plugin “globally” on the “local” Vue constructor
-localVue.use(MyPlugin)
+ // install a plugin “globally” on the “local” Vue constructor
+ localVue.use(MyPlugin)
-// pass the `localVue` to the mount options
-mount(Component, { localVue })
-```
+ // pass the `localVue` to the mount options
+ mount(Component, { localVue })
+ ```
- Global configuration makes it difficult to share the same copy of Vue between multiple "apps" on the same page, but with different global configurations.
@@ -65,7 +65,15 @@ import { createApp } from 'vue'
const app = createApp({})
```
-An app instance exposes a subset of the current global APIs. The rule of thumb is _any APIs that globally mutate Vue's behavior are now moved to the app instance_. Here is a table of the current global APIs and their corresponding instance APIs:
+If you're using a [CDN](/guide/installation.html#cdn) build of Vue then `createApp` is exposed via the global `Vue` object:
+
+```js
+const { createApp } = Vue
+
+const app = createApp({})
+```
+
+An app instance exposes a subset of the Vue 2 global APIs. The rule of thumb is _any APIs that globally mutate Vue's behavior are now moved to the app instance_. Here is a table of the Vue 2 global APIs and their corresponding instance APIs:
| 2.x Global API | 3.x Instance API (`app`) |
| -------------------------- | ----------------------------------------------------------------------------------------------- |
@@ -76,6 +84,7 @@ An app instance exposes a subset of the current global APIs. The rule of thumb i
| Vue.directive | app.directive |
| Vue.mixin | app.mixin |
| Vue.use | app.use ([see below](#a-note-for-plugin-authors)) |
+| Vue.prototype | app.config.globalProperties ([see below](#vue-prototype-replaced-by-config-globalproperties)) |
All other global APIs that do not globally mutate behavior are now named exports, as documented in [Global API Treeshaking](./global-api-treeshaking.html).
@@ -94,17 +103,36 @@ This config option was introduced with the intention to support native custom el
Vue.config.ignoredElements = ['my-el', /^ion-/]
// after
-const app = Vue.createApp({})
+const app = createApp({})
app.config.isCustomElement = tag => tag.startsWith('ion-')
```
::: tip Important
-In 3.0, the check of whether an element is a component or not has been moved to the template compilation phase, therefore this config option is only respected when using the runtime compiler. If you are using the runtime-only build, `isCustomElement` must be passed to `@vue/compiler-dom` in the build setup instead - for example, via the [`compilerOptions` option in vue-loader](https://vue-loader.vuejs.org/options.html#compileroptions).
+In Vue 3, the check of whether an element is a component or not has been moved to the template compilation phase, therefore this config option is only respected when using the runtime compiler. If you are using the runtime-only build, `isCustomElement` must be passed to `@vue/compiler-dom` in the build setup instead - for example, via the [`compilerOptions` option in vue-loader](https://vue-loader.vuejs.org/options.html#compileroptions).
- If `config.isCustomElement` is assigned to when using a runtime-only build, a warning will be emitted instructing the user to pass the option in the build setup instead;
- This will be a new top-level option in the Vue CLI config.
- :::
+:::
+
+### `Vue.prototype` Replaced by `config.globalProperties`
+
+In Vue 2, `Vue.prototype` was commonly used to add properties that would be accessible in all components.
+
+The equivalent in Vue 3 is [`config.globalProperties`](/api/application-config.html#globalproperties). These properties will be copied across as part of instantiating a component within the application:
+
+```js
+// before - Vue 2
+Vue.prototype.$http = () => {}
+```
+
+```js
+// after - Vue 3
+const app = createApp({})
+app.config.globalProperties.$http = () => {}
+```
+
+Using `provide` (discussed [below](#provide-inject)) should also be considered as an alternative to `globalProperties`.
### A Note for Plugin Authors
@@ -127,7 +155,7 @@ app.use(VueRouter)
## Mounting App Instance
-After being initialized with `createApp(/* options */)`, the app instance `app` can be used to mount a Vue root instance with `app.mount(domTarget)`:
+After being initialized with `createApp(/* options */)`, the app instance `app` can be used to mount a root component instance with `app.mount(domTarget)`:
```js
import { createApp } from 'vue'
@@ -178,6 +206,8 @@ export default {
}
```
+Using `provide` is especially useful when writing a plugin, as an alternative to `globalProperties`.
+
## Share Configurations Among Apps
One way to share configurations e.g. components or directives among apps is to create a factory function, like this:
@@ -189,7 +219,7 @@ import Bar from './Bar.vue'
const createMyApp = options => {
const app = createApp(options)
- app.directive('focus' /* ... */)
+ app.directive('focus', /* ... */)
return app
}
@@ -198,4 +228,4 @@ createMyApp(Foo).mount('#foo')
createMyApp(Bar).mount('#bar')
```
-Now the `focus` directive will be available in both Foo and Bar instances and their descendants.
+Now the `focus` directive will be available in both `Foo` and `Bar` instances and their descendants.
diff --git a/src/guide/migration/inline-template-attribute.md b/src/guide/migration/inline-template-attribute.md
index 1ae98103..faa79067 100644
--- a/src/guide/migration/inline-template-attribute.md
+++ b/src/guide/migration/inline-template-attribute.md
@@ -34,7 +34,7 @@ Most of the use cases for `inline-template` assumes a no-build-tool setup, where
The most straightforward workaround in such cases is using `<script>` with an alternative type:
-```js
+```html
<script type="text/html" id="my-comp-template">
<div>{{ hello }}</div>
</script>
diff --git a/src/guide/migration/introduction.md b/src/guide/migration/introduction.md
index f2b50b9e..e328afb6 100644
--- a/src/guide/migration/introduction.md
+++ b/src/guide/migration/introduction.md
@@ -1,10 +1,15 @@
# Introduction
-> There's so much here! Does that mean 3.0 is completely different, I'll have to learn the basics all over again, and migrating will be practically impossible?
+::: info
+New to Vue.js? Check out our [Essentials Guide](/guide/introduction.html) to get started.
+:::
-We're glad you asked! The answer is no. We've gone to great lengths to ensure most of the API is the same and the core concepts haven't changed. It's long because we like to offer very detailed explanations and include a lot of examples. Rest assured, **this is not something you have to read from top to bottom!**
+This guide is primarily for users with prior Vue 2 experience who want to learn about the new features and changes in Vue 3. **This is not something you have to read from top to bottom before trying out Vue 3.** While it looks like a lot has changed, a lot of what you know and love about Vue is still the same; but we wanted to be as thorough as possible and provide detailed explanations and examples for every documented change.
-Possibly the biggest change is our new [Composition API](/guide/composition-api-introduction.html), which is entirely additive- the previous Options API will continue to be supported, as the Composition API is an advanced feature.
+- [Quickstart](#quickstart)
+- [Notable New Features](#notable-new-features)
+- [Breaking Changes](#breaking-changes)
+- [Supporting Libraries](#supporting-libraries)
## Overview
@@ -13,7 +18,26 @@ Possibly the biggest change is our new [Composition API](/guide/composition-api-
Start learning Vue 3 at [Vue Mastery](https://www.vuemastery.com/courses-path/vue3).
-### New Features
+## Quickstart
+
+- Via CDN: `<script src="https://unpkg.com/vue@next"></script>`
+- In-browser playground on [Codepen](https://codepen.io/yyx990803/pen/OJNoaZL)
+- In-browser Sandbox on [CodeSandbox](https://v3.vue.new)
+- Scaffold via [Vite](https://github.com/vitejs/vite):
+
+ ```bash
+ npm init @vitejs/app hello-vue3 # OR yarn create @vitejs/app hello-vue3
+ ```
+
+- Scaffold via [vue-cli](https://cli.vuejs.org/):
+
+ ```bash
+ npm install -g @vue/cli # OR yarn global add @vue/cli
+ vue create hello-vue3
+ # select vue 3 preset
+ ```
+
+## Notable New Features
Some of the new features to keep an eye on in Vue 3 include:
@@ -21,58 +45,162 @@ Some of the new features to keep an eye on in Vue 3 include:
- [Teleport](/guide/teleport.html)
- [Fragments](/guide/migration/fragments.html)
- [Emits Component Option](/guide/component-custom-events.html)
-- `createRenderer` API from `@vue/runtime-core` to create custom renderers
+- [`createRenderer` API from `@vue/runtime-core`](https://github.com/vuejs/vue-next/tree/master/packages/runtime-core) to create custom renderers
+- [SFC Composition API Syntax Sugar (`<script setup>`)](https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md) <Badge text="experimental" type="warning" />
+- [SFC State-driven CSS Variables (`v-bind` in `<style>`)](https://github.com/vuejs/rfcs/blob/style-vars-2/active-rfcs/0000-sfc-style-variables.md) <Badge text="experimental" type="warning" />
+- [SFC `<style scoped>` can now include global rules or rules that target only slotted content](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md)
+- [Suspense](/guide/migration/suspense.html) <Badge text="experimental" type="warning" />
-### Breaking
+## Breaking Changes
+
+::: info INFO
+We are still working on a dedicated Migration Build of Vue 3 with Vue 2 compatible behavior and runtime warnings of incompatible usage. If you are planning to migrate a non-trivial Vue 2 app, we strongly recommend waiting for the Migration Build for a smoother experience.
+:::
The following consists a list of breaking changes from 2.x:
+### Global API
+
- [Global Vue API is changed to use an application instance](/guide/migration/global-api.html)
- [Global and internal APIs have been restructured to be tree-shakable](/guide/migration/global-api-treeshaking.html)
-- [`model` component option and `v-bind`'s `sync` modifier are removed in favor of `v-model` arguments](/guide/migration/v-model.html)
-- [Render function API changed](/guide/migration/render-function-api.html)
+
+### Template Directives
+
+- [`v-model` usage on components has been reworked, replacing `v-bind.sync`](/guide/migration/v-model.html)
+- [`key` usage on `<template v-for>` and non-`v-for` nodes has changed](/guide/migration/key-attribute.html)
+- [`v-if` and `v-for` precedence when used on the same element has changed](/guide/migration/v-if-v-for.html)
+- [`v-bind="object"` is now order-sensitive](/guide/migration/v-bind.html)
+- [`v-on:event.native` modifier has been removed](./v-on-native-modifier-removed.md)
+- [`ref` inside `v-for` no longer register an array of refs](/guide/migration/array-refs.html)
+
+### Components
+
- [Functional components can only be created using a plain function](/guide/migration/functional-components.html)
- [`functional` attribute on single-file component (SFC) `<template>` and `functional` component option are deprecated](/guide/migration/functional-components.html)
- [Async components now require `defineAsyncComponent` method to be created](/guide/migration/async-components.html)
-- [Component data option should always be declared as a function](/guide/migration/data-option.html)
-- [Custom elements whitelisting is now performed during template compilation](/guide/migration/custom-elements-interop.html)
-- [Special `is` prop usage is restricted to the reserved `<component>` tag only](/guide/migration/custom-elements-interop.html)
-- [`$scopedSlots` property is removed and need to be replaced with `$slots`](/guide/migration/slots-unification.html)
-- [Attributes coercion strategy changed](/guide/migration/attribute-coercion.html)
+- [Component events should now be declared with the `emits` option](./emits-option.md)
+
+### Render Function
+
+- [Render function API changed](/guide/migration/render-function-api.html)
+- [`$scopedSlots` property is removed and all slots are exposed via `$slots` as functions](/guide/migration/slots-unification.html)
+- [`$listeners` has been removed / merged into `$attrs`](./listeners-removed)
+- [`$attrs` now includes `class` and `style` attributes](./attrs-includes-class-style.md)
+
+### Custom Elements
+
+- [Custom element checks are now performed during template compilation](/guide/migration/custom-elements-interop.html)
+- [Special `is` prop usage is restricted to the reserved `<component>` tag only](/guide/migration/custom-elements-interop.html#customized-built-in-elements)
+
+### Other Minor Changes
+
+- The `destroyed` lifecycle option has been renamed to `unmounted`
+- The `beforeDestroy` lifecycle option has been renamed to `beforeUnmount`
+- [Props `default` factory function no longer has access to `this` context](/guide/migration/props-default-this.html)
- [Custom directive API changed to align with component lifecycle](/guide/migration/custom-directives.html)
-- [Some transition classes got a rename](/guide/migration/transition.md)
-- [Component watch option](/api/options-data.html#watch) and [instance method `$watch`](/api/instance-methods.html#watch) no longer supports dot-delimited string paths, use a computed function as the parameter instead
-- In Vue 2.x, application root container's `outerHTML` is replaced with root component template (or eventually compiled to a template, if root component has no template/render option). Vue 3.x now uses application container's `innerHTML` instead.
+- [The `data` option should always be declared as a function](/guide/migration/data-option.html)
+- [The `data` option from mixins is now merged shallowly](/guide/migration/data-option.html#mixin-merge-behavior-change)
+- [Attributes coercion strategy changed](/guide/migration/attribute-coercion.html)
+- [Some transition classes got a rename](/guide/migration/transition.html)
+- [`<TransitionGroup>` now renders no wrapper element by default](/guide/migration/transition-group.html)
+- [When watching an array, the callback will only trigger when the array is replaced. If you need to trigger on mutation, the `deep` option must be specified.](/guide/migration/watch.html)
+- `<template>` tags with no special directives (`v-if/else-if/else`, `v-for`, or `v-slot`) are now treated as plain elements and will result in a native `<template>` element instead of rendering its inner content.
+- [Mounted application does not replace the element it's mounted to](/guide/migration/mount-changes.html)
+- [Lifecycle `hook:` events prefix changed to `vnode-`](/guide/migration/vnode-lifecycle-events.html)
-### Removed
+### Removed APIs
- [`keyCode` support as `v-on` modifiers](/guide/migration/keycode-modifiers.html)
- [$on, $off and \$once instance methods](/guide/migration/events-api.html)
- [Filters](/guide/migration/filters.html)
- [Inline templates attributes](/guide/migration/inline-template-attribute.html)
+- [`$children` instance property](/guide/migration/children.html)
+- [`propsData` option](/guide/migration/props-data.html)
+- `$destroy` instance method. Users should no longer manually manage the lifecycle of individual Vue components.
+- Global functions `set` and `delete`, and the instance methods `$set` and `$delete`. They are no longer required with proxy-based change detection.
+
+## Supporting Libraries
+
+All of our official libraries and tools now support Vue 3, but some of them are still in beta or release candidate status. You'll find details for the individual libraries below. Most are currently distributed using the `next` dist tag on npm. We intend to switch to `latest` once all the official libraries have compatible, stable versions.
+
+### Vue CLI
+
+<a href="https://www.npmjs.com/package/@vue/cli" target="_blank" noopener noreferrer><img src="https://img.shields.io/npm/v/@vue/cli"></a>
+
+As of v4.5.0, `vue-cli` now provides the built-in option to choose Vue 3 when creating a new project. You can upgrade `vue-cli` and run `vue create` to create a Vue 3 project today.
+
+- [Documentation](https://cli.vuejs.org/)
+- [GitHub](https://github.com/vuejs/vue-cli)
+
+### Vue Router
+
+<a href="https://www.npmjs.com/package/vue-router/v/next" target="_blank" noopener noreferrer><img src="https://img.shields.io/npm/v/vue-router/next.svg"></a>
+
+Vue Router 4.0 provides Vue 3 support and has a number of breaking changes of its own. Check out its [migration guide](https://next.router.vuejs.org/guide/migration/) for full details.
+
+- [Documentation](https://next.router.vuejs.org/)
+- [GitHub](https://github.com/vuejs/vue-router-next)
+- [RFCs](https://github.com/vuejs/rfcs/pulls?q=is%3Apr+is%3Amerged+label%3Arouter)
+
+### Vuex
+
+<a href="https://www.npmjs.com/package/vuex/v/next" target="_blank" noopener noreferrer><img src="https://img.shields.io/npm/v/vuex/next.svg"></a>
-## FAQ
+Vuex 4.0 provides Vue 3 support with largely the same API as 3.x. The only breaking change is [how the plugin is installed](https://next.vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html#breaking-changes).
-### Where should I start in a migration?
+- [Documentation](https://next.vuex.vuejs.org/)
+- [GitHub](https://github.com/vuejs/vuex/tree/4.0)
-1. Start by running the migration helper (still under development) on a current project. We've carefully minified and compressed a senior Vue dev into a simple command line interface. Whenever they recognize an obsolete feature, they'll let you know, offer suggestions, and provide links to more info.
+### Devtools Extension
-2. After that, browse through the table of contents for this page in the sidebar. If you see a topic you may be affected by, but the migration helper didn't catch, check it out.
+We are working on a new version of the Devtools with a new UI and refactored internals to support multiple Vue versions. The new version is currently in beta and only supports Vue 3 (for now). Vuex and Router integration is also work in progress.
-3. If you have any tests, run them and see what still fails. If you don't have tests, just open the app in your browser and keep an eye out for warnings or errors as you navigate around.
+- For Chrome: [Install from Chrome web store](https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg?hl=en)
-4. By now, your app should be fully migrated. If you're still hungry for more though, you can read the rest of this page - or dive in to the new and improved guide from [the beginning](#overview). Many parts will be skimmable, since you're already familiar with the core concepts.
+ - Note: the beta channel may conflict with the stable version of devtools so you may need to temporarily disable the stable version for the beta channel to work properly.
-### How long will it take to migrate a Vue 2.x app to 3.0?
+- For Firefox: [Download the signed extension](https://github.com/vuejs/vue-devtools/releases/tag/v6.0.0-beta.2) (`.xpi` file under Assets)
-It depends on a few factors:
+### IDE Support
-- The size of your app (small to medium-sized apps will probably be less than a day)
+It is recommended to use [VSCode](https://code.visualstudio.com/) with our official extension [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur), which provides comprehensive IDE support for Vue 3.
-- How many times you get distracted and start playing with a cool new feature. 😉 Not judging, it also happened to us while building 3.0!
+### Other Projects
-- Which obsolete features you're using. Most can be upgraded with find-and-replace, but others might take a few minutes. If you're not currently following best practices according to [our styleguide](/style-guide/), Vue 3.0 will also try harder to force you to. This is a good thing in the long run, but could also mean a significant (though possibly overdue) refactor.
+| Project | npm | Repo |
+| --------------------- | ----------------------------- | -------------------- |
+| @vue/babel-plugin-jsx | [![rc][jsx-badge]][jsx-npm] | [[GitHub][jsx-code]] |
+| eslint-plugin-vue | [![ga][epv-badge]][epv-npm] | [[GitHub][epv-code]] |
+| @vue/test-utils | [![beta][vtu-badge]][vtu-npm] | [[GitHub][vtu-code]] |
+| vue-class-component | [![beta][vcc-badge]][vcc-npm] | [[GitHub][vcc-code]] |
+| vue-loader | [![rc][vl-badge]][vl-npm] | [[GitHub][vl-code]] |
+| rollup-plugin-vue | [![beta][rpv-badge]][rpv-npm] | [[GitHub][rpv-code]] |
-### If I upgrade to Vue 3, will I also have to upgrade Vuex and Vue Router?
+[jsx-badge]: https://img.shields.io/npm/v/@vue/babel-plugin-jsx.svg
+[jsx-npm]: https://www.npmjs.com/package/@vue/babel-plugin-jsx
+[jsx-code]: https://github.com/vuejs/jsx-next
+[vd-badge]: https://img.shields.io/npm/v/@vue/devtools/beta.svg
+[vd-npm]: https://www.npmjs.com/package/@vue/devtools/v/beta
+[vd-code]: https://github.com/vuejs/vue-devtools/tree/next
+[epv-badge]: https://img.shields.io/npm/v/eslint-plugin-vue.svg
+[epv-npm]: https://www.npmjs.com/package/eslint-plugin-vue
+[epv-code]: https://github.com/vuejs/eslint-plugin-vue
+[vtu-badge]: https://img.shields.io/npm/v/@vue/test-utils/next.svg
+[vtu-npm]: https://www.npmjs.com/package/@vue/test-utils/v/next
+[vtu-code]: https://github.com/vuejs/vue-test-utils-next
+[jsx-badge]: https://img.shields.io/npm/v/@ant-design-vue/babel-plugin-jsx.svg
+[jsx-npm]: https://www.npmjs.com/package/@ant-design-vue/babel-plugin-jsx
+[jsx-code]: https://github.com/vueComponent/jsx
+[vcc-badge]: https://img.shields.io/npm/v/vue-class-component/next.svg
+[vcc-npm]: https://www.npmjs.com/package/vue-class-component/v/next
+[vcc-code]: https://github.com/vuejs/vue-class-component/tree/next
+[vl-badge]: https://img.shields.io/npm/v/vue-loader/next.svg
+[vl-npm]: https://www.npmjs.com/package/vue-loader/v/next
+[vl-code]: https://github.com/vuejs/vue-loader/tree/next
+[rpv-badge]: https://img.shields.io/npm/v/rollup-plugin-vue/next.svg
+[rpv-npm]: https://www.npmjs.com/package/rollup-plugin-vue/v/next
+[rpv-code]: https://github.com/vuejs/rollup-plugin-vue/tree/next
-Yes, currently both [Vuex](https://github.com/vuejs/vuex/tree/4.0#vuex-4) and [Vue Router](https://github.com/vuejs/vue-router-next) are in beta
+::: info
+For additional information on Vue 3 compatibility with libraries and plugins, be sure to check out [this issue in awesome-vue](https://github.com/vuejs/awesome-vue/issues/3544).
+:::
diff --git a/src/guide/migration/key-attribute.md b/src/guide/migration/key-attribute.md
new file mode 100644
index 00000000..34bdf73f
--- /dev/null
+++ b/src/guide/migration/key-attribute.md
@@ -0,0 +1,91 @@
+---
+badges:
+ - breaking
+---
+
+# `key` attribute <MigrationBadges :badges="$frontmatter.badges" />
+
+## Overview
+
+- **NEW:** `key`s are no longer necessary on `v-if`/`v-else`/`v-else-if` branches, since Vue now automatically generates unique `key`s.
+ - **BREAKING:** If you manually provide `key`s, then each branch must use a unique `key`. You can no longer intentionally use the same `key` to force branch reuse.
+- **BREAKING:** `<template v-for>` `key` should be placed on the `<template>` tag (rather than on its children).
+
+## Background
+
+The `key` special attribute is used as a hint for Vue's virtual DOM algorithm to keep track of a node's identity. That way, Vue knows when it can reuse and patch existing nodes and when it needs to reorder or recreate them. For more information, see the following sections:
+
+- [List Rendering: Maintaining State](/guide/list.html#maintaining-state)
+- [API Reference: `key` Special Attribute](/api/special-attributes.html#key)
+
+## On conditional branches
+
+In Vue 2.x, it was recommended to use `key`s on `v-if`/`v-else`/`v-else-if` branches.
+
+```html
+<!-- Vue 2.x -->
+<div v-if="condition" key="yes">Yes</div>
+<div v-else key="no">No</div>
+```
+
+The example above still works in Vue 3.x. However, we no longer recommend using the `key` attribute on `v-if`/`v-else`/`v-else-if` branches, since unique `key`s are now automatically generated on conditional branches if you don't provide them.
+
+```html
+<!-- Vue 3.x -->
+<div v-if="condition">Yes</div>
+<div v-else>No</div>
+```
+
+The breaking change is that if you manually provide `key`s, each branch must use a unique `key`. In most cases, you can remove these `key`s.
+
+```html
+<!-- Vue 2.x -->
+<div v-if="condition" key="a">Yes</div>
+<div v-else key="a">No</div>
+
+<!-- Vue 3.x (recommended solution: remove keys) -->
+<div v-if="condition">Yes</div>
+<div v-else>No</div>
+
+<!-- Vue 3.x (alternate solution: make sure the keys are always unique) -->
+<div v-if="condition" key="a">Yes</div>
+<div v-else key="b">No</div>
+```
+
+## With `<template v-for>`
+
+In Vue 2.x, a `<template>` tag could not have a `key`. Instead, you could place the `key`s on each of its children.
+
+```html
+<!-- Vue 2.x -->
+<template v-for="item in list">
+ <div :key="'heading-' + item.id">...</div>
+ <span :key="'content-' + item.id">...</span>
+</template>
+```
+
+In Vue 3.x, the `key` should be placed on the `<template>` tag instead.
+
+```html
+<!-- Vue 3.x -->
+<template v-for="item in list" :key="item.id">
+ <div>...</div>
+ <span>...</span>
+</template>
+```
+
+Similarly, when using `<template v-for>` with a child that uses `v-if`, the `key` should be moved up to the `<template>` tag.
+
+```html
+<!-- Vue 2.x -->
+<template v-for="item in list">
+ <div v-if="item.isVisible" :key="item.id">...</div>
+ <span v-else :key="item.id">...</span>
+</template>
+
+<!-- Vue 3.x -->
+<template v-for="item in list" :key="item.id">
+ <div v-if="item.isVisible">...</div>
+ <span v-else>...</span>
+</template>
+```
diff --git a/src/guide/migration/listeners-removed.md b/src/guide/migration/listeners-removed.md
new file mode 100644
index 00000000..f6c650c5
--- /dev/null
+++ b/src/guide/migration/listeners-removed.md
@@ -0,0 +1,74 @@
+---
+title: $listeners removed
+badges:
+ - breaking
+---
+
+# `$listeners` removed <MigrationBadges :badges="$frontmatter.badges" />
+
+## Overview
+
+The `$listeners` object has been removed in Vue 3. Event listeners are now part of `$attrs`:
+
+```js
+{
+ text: 'this is an attribute',
+ onClose: () => console.log('close Event triggered')
+}
+```
+
+## 2.x Syntax
+
+In Vue 2, you can access attributes passed to your components with `this.$attrs`, and event listeners with `this.$listeners`.
+In combination with `inheritAttrs: false`, they allow the developer to apply these attributes and listeners to some other element instead of the root element:
+
+```html
+<template>
+ <label>
+ <input type="text" v-bind="$attrs" v-on="$listeners" />
+ </label>
+</template>
+<script>
+ export default {
+ inheritAttrs: false
+ }
+</script>
+```
+
+## 3.x Syntax
+
+In Vue 3's virtual DOM, event listeners are now just attributes, prefixed with `on`, and as such are part of the `$attrs` object, so `$listeners` has been removed.
+
+```vue
+<template>
+ <label>
+ <input type="text" v-bind="$attrs" />
+ </label>
+</template>
+<script>
+export default {
+ inheritAttrs: false
+}
+</script>
+```
+
+If this component received an `id` attribute and a `v-on:close` listener, the `$attrs` object will now look like this:
+
+```js
+{
+ id: 'my-input',
+ onClose: () => console.log('close Event triggered')
+}
+```
+
+## Migration Strategy
+
+Remove all usages of `$listeners`.
+
+## See also
+
+- [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
+- [Migration guide - `$attrs`includes `class` & `style` ](./attrs-includes-class-style.md)
+- [Migration guide - Changes in the Render Functions API](./render-function-api.md)
+- [Migration guide - New Emits Option](./emits-option.md)
+- [Migration guide - `.native` modifier removed](./v-on-native-modifier-removed.md)
diff --git a/src/guide/migration/mount-changes.md b/src/guide/migration/mount-changes.md
new file mode 100644
index 00000000..9b551aac
--- /dev/null
+++ b/src/guide/migration/mount-changes.md
@@ -0,0 +1,94 @@
+---
+title: 'Mount API changes'
+badges:
+ - breaking
+---
+
+# Mounted application does not replace the element <MigrationBadges :badges="$frontmatter.badges" />
+
+## Overview
+
+In Vue 2.x, when mounting an application that has a `template`, the rendered content replaces the element we mount to. In Vue 3.x, the rendered application is appended as a child of such an element, replacing element's `innerHTML`.
+
+## 2.x Syntax
+
+In Vue 2.x, we pass an HTML element selector to `new Vue()` or `$mount`:
+
+```js
+new Vue({
+ el: '#app',
+ data() {
+ return {
+ message: 'Hello Vue!'
+ }
+ },
+ template: `
+ <div id="rendered">{{ message }}</div>
+ `
+})
+
+// or
+const app = new Vue({
+ data() {
+ return {
+ message: 'Hello Vue!'
+ }
+ },
+ template: `
+ <div id="rendered">{{ message }}</div>
+ `
+})
+
+app.$mount('#app')
+```
+
+When we mount this application to the page that has a `div` with the passed selector (in our case, it's `id="app"`):
+
+```html
+<body>
+ <div id="app">
+ Some app content
+ </div>
+</body>
+```
+
+in the rendered result, the mentioned `div` will be replaced with the rendered application content:
+
+```html
+<body>
+ <div id="rendered">Hello Vue!</div>
+</body>
+```
+
+## 3.x Syntax
+
+In Vue 3.x, when we mount an application, its rendered content will replace the `innerHTML` of the element we pass to `mount`:
+
+```js
+const app = Vue.createApp({
+ data() {
+ return {
+ message: 'Hello Vue!'
+ }
+ },
+ template: `
+ <div id="rendered">{{ message }}</div>
+ `
+})
+
+app.mount('#app')
+```
+
+When this app is mounted to the page that has a `div` with `id="app"`, this will result in:
+
+```html
+<body>
+ <div id="app" data-v-app="">
+ <div id="rendered">Hello Vue!</div>
+ </div>
+</body>
+```
+
+## See also
+
+- [`mount` API](/api/application-api.html#mount)
diff --git a/src/guide/migration/props-data.md b/src/guide/migration/props-data.md
new file mode 100644
index 00000000..8c12d3ff
--- /dev/null
+++ b/src/guide/migration/props-data.md
@@ -0,0 +1,41 @@
+---
+badges:
+ - removed
+---
+
+# `propsData` <MigrationBadges :badges="$frontmatter.badges" />
+
+## Overview
+
+The `propsData` option, used to pass props to the Vue instance during its creation, is removed. To pass props to the root component of a Vue 3 application, use the second argument of [createApp](/api/global-api.html#createapp).
+
+## 2.x Syntax
+
+In 2.x, we were able to pass props to a Vue instance during its creation:
+
+```js
+const Comp = Vue.extend({
+ props: ['username'],
+ template: '<div>{{ username }}</div>'
+})
+
+new Comp({
+ propsData: {
+ username: 'Evan'
+ }
+})
+```
+
+## 3.x Update
+
+The `propsData` option has been removed. If you need to pass props to the root component instance during its creation, you should use the second argument of `createApp`:
+
+```js
+const app = createApp(
+ {
+ props: ['username'],
+ template: '<div>{{ username }}</div>'
+ },
+ { username: 'Evan' }
+)
+```
diff --git a/src/guide/migration/props-default-this.md b/src/guide/migration/props-default-this.md
new file mode 100644
index 00000000..965fd470
--- /dev/null
+++ b/src/guide/migration/props-default-this.md
@@ -0,0 +1,32 @@
+---
+title: Props Default Function this Access
+badges:
+ - breaking
+---
+
+# Props Default Function `this` Access <MigrationBadges :badges="$frontmatter.badges" />
+
+Props default value factory functions no longer have access to `this`.
+
+Instead:
+
+- Raw props received by the component are passed to the default function as argument;
+
+- The [inject](../composition-api-provide-inject.md) API can be used inside default functions.
+
+```js
+import { inject } from 'vue'
+
+export default {
+ props: {
+ theme: {
+ default (props) {
+ // `props` is the raw values passed to the component,
+ // before any type / default coercions
+ // can also use `inject` to access injected properties
+ return inject('theme', 'default-theme')
+ }
+ }
+ }
+}
+```
diff --git a/src/guide/migration/render-function-api.md b/src/guide/migration/render-function-api.md
index 2cb18a07..14544d16 100644
--- a/src/guide/migration/render-function-api.md
+++ b/src/guide/migration/render-function-api.md
@@ -103,8 +103,10 @@ In 2.x, `domProps` contained a nested list within the VNode props:
```js
// 2.x
{
- class: ['button', 'is-outlined'],
- style: { color: '#34495E' },
+ staticClass: 'button',
+ class: {'is-outlined': isOutlined },
+ staticStyle: { color: '#34495E' },
+ style: { backgroundColor: buttonColor },
attrs: { id: 'submit' },
domProps: { innerHTML: '' },
on: { click: submitForm },
@@ -119,8 +121,8 @@ In 3.x, the entire VNode props structure is flattened. Using the example from ab
```js
// 3.x Syntax
{
- class: ['button', 'is-outlined'],
- style: { color: '#34495E' },
+ class: ['button', { 'is-outlined': isOutlined }],
+ style: [{ color: '#34495E' }, { backgroundColor: buttonColor }],
id: 'submit',
innerHTML: '',
onClick: submitForm,
@@ -128,6 +130,52 @@ In 3.x, the entire VNode props structure is flattened. Using the example from ab
}
```
+## Registered Component
+
+### 2.x Syntax
+
+In 2.x, when a component has been registered, the render function would work well when passing the component's name as a string to the first argument:
+
+```js
+// 2.x
+Vue.component('button-counter', {
+ data() {
+ return {
+ count: 0
+ }
+ }
+ template: `
+ <button @click="count++">
+ Clicked {{ count }} times.
+ </button>
+ `
+})
+
+export default {
+ render(h) {
+ return h('button-counter')
+ }
+}
+```
+
+### 3.x Syntax
+
+In 3.x, with VNodes being context-free, we can no longer use a string ID to implicitly lookup registered components. Instead, we need to use an imported `resolveComponent` method:
+
+```js
+// 3.x
+import { h, resolveComponent } from 'vue'
+
+export default {
+ setup() {
+ const ButtonCounter = resolveComponent('button-counter')
+ return () => h(ButtonCounter)
+ }
+}
+```
+
+For more information, see [The Render Function Api Change RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0008-render-function-api-change.md#context-free-vnodes).
+
## Migration Strategy
### Library Authors
diff --git a/src/guide/migration/slots-unification.md b/src/guide/migration/slots-unification.md
index 2faa7251..b4b1c768 100644
--- a/src/guide/migration/slots-unification.md
+++ b/src/guide/migration/slots-unification.md
@@ -62,4 +62,4 @@ this.$slots.header()
A majority of the change has already been shipped in 2.6. As a result, the migration can happen in one step:
1. Replace all `this.$scopedSlots` occurrences with `this.$slots` in 3.x.
-2. Replace all occurences of `this.$slots.mySlot` with `this.$slots.mySlot()`
+2. Replace all occurrences of `this.$slots.mySlot` with `this.$slots.mySlot()`
diff --git a/src/guide/migration/suspense.md b/src/guide/migration/suspense.md
new file mode 100644
index 00000000..4122f423
--- /dev/null
+++ b/src/guide/migration/suspense.md
@@ -0,0 +1,107 @@
+---
+badges:
+ - new
+---
+
+# Suspense <MigrationBadges :badges="$frontmatter.badges" />
+
+:::warning Experimental
+Suspense is an experimental new feature and the API could change at any time. It is documented here so that the community can provide feedback on the current implementation.
+
+It should not be used in production applications.
+:::
+
+## Introduction
+
+It is common for components to need to perform some kind of asynchronous request before they can be rendered properly. Components often handle this locally and in many cases that is a perfectly good approach.
+
+The `<suspense>` component provides an alternative, allowing for the waiting to be handled further up the component tree rather than in each individual component.
+
+A common use case involves [async components](/guide/component-dynamic-async.html#async-components):
+
+```vue{2-4,6,17}
+<template>
+ <suspense>
+ <template #default>
+ <todo-list />
+ </template>
+ <template #fallback>
+ <div>
+ Loading...
+ </div>
+ </template>
+ </suspense>
+</template>
+
+<script>
+export default {
+ components: {
+ TodoList: defineAsyncComponent(() => import('./TodoList.vue'))
+ }
+}
+</script>
+```
+
+The `<suspense>` component has two slots. Both slots only allow for one immediate child node. The node in the `default` slot is shown if possible. If not, the node in the `fallback` slot will be shown instead.
+
+Importantly, the async component doesn't need to be the immediate child of the `<suspense>`. It can be at any depth within the component tree and doesn't need to appear in the same template as the `<suspense>` itself. The content is only considered resolved once all descendants are ready.
+
+The other way to trigger the `fallback` slot is for a descendant component to return a promise from its `setup` function. This is typically implemented using `async` rather than explicitly returning a promise:
+
+```js{2}
+export default {
+ async setup() {
+ // Be very careful using `await` inside `setup` as
+ // most Composition API functions will only work
+ // prior to the first `await`
+ const data = await loadData()
+
+ // This is implicitly wrapped in a promise because
+ // the function is `async`
+ return {
+ // ...
+ }
+ }
+}
+```
+
+## Child Updates
+
+Once a `<suspense>` has resolved the contents of its `default` slot, it can only be triggered again if the `default` root node is replaced. New components nested deeper in the tree are not sufficient to move the `<suspense>` back into a pending state.
+
+If the root node does change it will trigger the `pending` event. However, by default, it won't update the DOM to show the `fallback` content. Instead, it will continue to show the old DOM until the new components are ready. This can be controlled using the `timeout` prop. This value, expressed in milliseconds, tells the `<suspense>` component how long to wait before showing the `fallback`. A value of `0` will show it immediately when the `<suspense>` enters the pending state.
+
+## Events
+
+In addition to the `pending` event, the `<suspense>` component also has `resolve` and `fallback` events. The `resolve` event is emitted when new content has finished resolving in the `default` slot. The `fallback` event is fired when the contents of the `fallback` slot are shown.
+
+The events could be used, for example, to show a loading indicator in front of the old DOM while new components are loading.
+
+## Combining with Other Components
+
+It is common to want to use `<suspense>` in combination with the [`<transition>`](/api/built-in-components.html#transition) and [`<keep-alive>`](/api/built-in-components.html#keep-alive) components. The nesting order of these components is important to get them all working correctly.
+
+In addition, these components are often used in conjunction with the `<router-view>` component from [Vue Router](https://next.router.vuejs.org/).
+
+The following example shows how to nest these components so that they all behave as expected. For simpler combinations you can remove the components that you don't need:
+
+```html
+<router-view v-slot="{ Component }">
+ <template v-if="Component">
+ <transition mode="out-in">
+ <keep-alive>
+ <suspense>
+ <component :is="Component"></component>
+ <template #fallback>
+ <div>
+ Loading...
+ </div>
+ </template>
+ </suspense>
+ </keep-alive>
+ </transition>
+ </template>
+</router-view>
+```
+
+Vue Router has built-in support for [lazily loading components](https://next.router.vuejs.org/guide/advanced/lazy-loading.html) using dynamic imports. These are distinct from async components and currently they will not trigger `<suspense>`. However, they can still have async components as descendants and those can trigger `<suspense>` in the usual way.
diff --git a/src/guide/migration/transition-as-root.md b/src/guide/migration/transition-as-root.md
new file mode 100644
index 00000000..bb158937
--- /dev/null
+++ b/src/guide/migration/transition-as-root.md
@@ -0,0 +1,61 @@
+---
+badges:
+ - breaking
+---
+
+# Transition as Root <MigrationBadges :badges="$frontmatter.badges" />
+
+## Overview
+
+Using a `<transition>` as a component's root will no longer trigger transitions when the component is toggled from the outside.
+
+## 2.x Behavior
+
+In Vue 2, it was possible to trigger a transition from outside a component by using a `<transition>` as the component's root:
+
+```html
+<!-- modal component -->
+<template>
+ <transition>
+ <div class="modal"><slot/></div>
+ </transition>
+</template>
+```
+
+```html
+<!-- usage -->
+<modal v-if="showModal">hello</modal>
+```
+
+Toggling the value of `showModal` would trigger a transition inside the modal component.
+
+This worked by accident, not by design. A `<transition>` is supposed to be triggered by changes to its children, not by toggling the `<transition>` itself.
+
+This quirk has now been removed.
+
+## Migration Strategy
+
+A similar effect can be achieved by passing a prop to the component instead:
+
+```vue
+<template>
+ <transition>
+ <div v-if="show" class="modal"><slot/></div>
+ </transition>
+</template>
+<script>
+export default {
+ props: ['show']
+}
+</script>
+```
+
+```html
+<!-- usage -->
+<modal :show="showModal">hello</modal>
+```
+
+## See also
+
+- [Some transition classes got a rename](/guide/migration/transition.html)
+- [`<TransitionGroup>` now renders no wrapper element by default](/guide/migration/transition-group.html)
diff --git a/src/guide/migration/transition-group.md b/src/guide/migration/transition-group.md
new file mode 100644
index 00000000..392fb229
--- /dev/null
+++ b/src/guide/migration/transition-group.md
@@ -0,0 +1,41 @@
+---
+title: Transition Group Root Element
+badges:
+ - breaking
+---
+
+# {{ $frontmatter.title }} <MigrationBadges :badges="$frontmatter.badges" />
+
+## Overview
+
+`<transition-group>` no longer renders a root element by default, but can still create one with the `tag` prop.
+
+## 2.x Syntax
+
+In Vue 2, `<transition-group>`, like other custom components, needed a root element, which by default was a `<span>` but was customizable via the `tag` prop.
+
+```html
+<transition-group tag="ul">
+ <li v-for="item in items" :key="item">
+ {{ item }}
+ </li>
+</transition-group>
+```
+
+## 3.x Syntax
+
+In Vue 3, we have [fragment support](/guide/migration/fragments.html), so components no longer _need_ a root node. Consequently, `<transition-group>` no longer renders one by default.
+
+- If you already have the `tag` prop defined in your Vue 2 code, like in the example above, everything will work as before
+- If you didn't have one defined _and_ your styling or other behaviors relied on the presence of the `<span>` root element to work properly, simply add `tag="span"` to the `<transition-group>`:
+
+```html
+<transition-group tag="span">
+ <!-- -->
+</transition-group>
+```
+
+## See also
+
+- [Some transition classes got a rename](/guide/migration/transition.html)
+- [`<Transition>` as a root can no longer be toggled from the outside](/guide/migration/transition-as-root.html)
diff --git a/src/guide/migration/transition.md b/src/guide/migration/transition.md
index 89643f1b..1261c208 100644
--- a/src/guide/migration/transition.md
+++ b/src/guide/migration/transition.md
@@ -59,4 +59,9 @@ The `<transition>` component's related prop names are also changed:
1. Replace instances of `.v-enter` to `.v-enter-from`
2. Replace instances of `.v-leave` to `.v-leave-from`
-3. Replace instances of related prop names, as above.
\ No newline at end of file
+3. Replace instances of related prop names, as above.
+
+## See also
+
+- [`<Transition>` as a root can no longer be toggled from the outside](/guide/migration/transition-as-root.html)
+- [`<TransitionGroup>` now renders no wrapper element by default](/guide/migration/transition-group.html)
diff --git a/src/guide/migration/v-bind.md b/src/guide/migration/v-bind.md
new file mode 100644
index 00000000..9a56f52d
--- /dev/null
+++ b/src/guide/migration/v-bind.md
@@ -0,0 +1,46 @@
+---
+title: v-bind Merge Behavior
+badges:
+ - breaking
+---
+
+# {{ $frontmatter.title }} <MigrationBadges :badges="$frontmatter.badges" />
+
+## Overview
+
+- **BREAKING**: Order of bindings for v-bind will affect the rendering result.
+
+## Introduction
+
+When dynamically binding attributes on an element, a common scenario involves using both the `v-bind="object"` syntax as well as individual properties in the same element. However, this raises questions as far as the priority of merging.
+
+## 2.x Syntax
+
+In 2.x, if an element has both `v-bind="object"` and an identical individual property defined, the individual property would always overwrite bindings in the `object`.
+
+```html
+<!-- template -->
+<div id="red" v-bind="{ id: 'blue' }"></div>
+<!-- result -->
+<div id="red"></div>
+```
+
+## 3.x Syntax
+
+In 3x, if an element has both `v-bind="object"` and an identical individual property defined, the order of how the bindings are declared determines how they are merged. In other words, rather than assuming developers want the individual property to always override what is defined in the `object`, developers now have more control over the desired merging behavior.
+
+```html
+<!-- template -->
+<div id="red" v-bind="{ id: 'blue' }"></div>
+<!-- result -->
+<div id="blue"></div>
+
+<!-- template -->
+<div v-bind="{ id: 'blue' }" id="red"></div>
+<!-- result -->
+<div id="red"></div>
+```
+
+## Migration Strategy
+
+If you are relying on this override functionality for `v-bind`, we currently recommend ensuring that your `v-bind` attribute is defined before individual properties.
diff --git a/src/guide/migration/v-if-v-for.md b/src/guide/migration/v-if-v-for.md
new file mode 100644
index 00000000..75f52016
--- /dev/null
+++ b/src/guide/migration/v-if-v-for.md
@@ -0,0 +1,34 @@
+---
+title: v-if vs. v-for Precedence
+badges:
+ - breaking
+---
+
+# {{ $frontmatter.title }} <MigrationBadges :badges="$frontmatter.badges" />
+
+## Overview
+
+- **BREAKING**: If used on the same element, `v-if` will have higher precedence than `v-for`
+
+## Introduction
+
+Two of the most commonly used directives in Vue.js are `v-if` and `v-for`. So it's no surprise that there comes a time when developers want to use both together. While this is not a recommended practice, there may be times when this is necessary, so we wanted to provide guidance for how it works.
+
+## 2.x Syntax
+
+In 2.x, when using `v-if` and `v-for` on the same element, `v-for` would take precedence.
+
+## 3.x Syntax
+
+In 3.x, `v-if` will always have the higher precedence than `v-for`.
+
+## Migration Strategy
+
+It is recommended to avoid using both on the same element due to the syntax ambiguity.
+
+Rather than managing this at the template level, one method for accomplishing this is to create a computed property that filters out a list for the visible elements.
+
+## See also
+
+- [List Rendering - Displaying Filtered/Sorted Results](/guide/list.html#displaying-filtered-sorted-results)
+- [List Rendering - `v-for` with `v-if`](/guide/list.html#v-for-with-v-if)
diff --git a/src/guide/migration/v-model.md b/src/guide/migration/v-model.md
index c035f04c..c27a95d1 100644
--- a/src/guide/migration/v-model.md
+++ b/src/guide/migration/v-model.md
@@ -173,6 +173,7 @@ We recommend:
props: {
modelValue: String // previously was `value: String`
},
+ emits: ['update:modelValue'],
methods: {
changePageTitle(title) {
this.$emit('update:modelValue', title) // previously was `this.$emit('input', title)`
@@ -187,4 +188,4 @@ For more information on the new `v-model` syntax, see:
- [Using `v-model` on Components](../component-basics.html#using-v-model-on-components)
- [`v-model` arguments](../component-custom-events.html#v-model-arguments)
-- [Handling `v-model` modifiers](../component-custom-events.html#v-model-arguments)
+- [Handling `v-model` modifiers](../component-custom-events.html#handling-v-model-modifiers)
diff --git a/src/guide/migration/v-on-native-modifier-removed.md b/src/guide/migration/v-on-native-modifier-removed.md
new file mode 100644
index 00000000..fcaffe08
--- /dev/null
+++ b/src/guide/migration/v-on-native-modifier-removed.md
@@ -0,0 +1,57 @@
+---
+title: v-on.native modifier removed
+badges:
+ - breaking
+---
+
+# `v-on.native` modifier removed <MigrationBadges :badges="$frontmatter.badges" />
+
+## Overview
+
+The `.native` modifier for `v-on` has been removed.
+
+## 2.x Syntax
+
+Event listeners passed to a component with `v-on` are by default only triggered by emitting an event with `this.$emit`. To add a native DOM listener to the child component's root element instead, the `.native` modifier can be used:
+
+```html
+<my-component
+ v-on:close="handleComponentEvent"
+ v-on:click.native="handleNativeClickEvent"
+/>
+```
+
+## 3.x Syntax
+
+The `.native` modifier for `v-on` has been removed. At the same time, the [new `emits` option](./emits-option.md) allows the child to define which events it does indeed emit.
+
+Consequently, Vue will now add all event listeners that are _not_ defined as component-emitted events in the child as native event listeners to the child's root element (unless `inheritAttrs: false` has been set in the child's options).
+
+```html
+<my-component
+ v-on:close="handleComponentEvent"
+ v-on:click="handleNativeClickEvent"
+/>
+```
+
+`MyComponent.vue`
+
+```html
+<script>
+ export default {
+ emits: ['close']
+ }
+</script>
+```
+
+## Migration Strategy
+
+- remove all instances of the `.native` modifier.
+- ensure that all your components document their events with the `emits` option.
+
+## See also
+
+- [Relevant RFC](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md#v-on-listener-fallthrough)
+- [Migration guide - New Emits Option](./emits-option.md)
+- [Migration guide - `$listeners` removed](./listeners-removed.md)
+- [Migration guide - Changes in the Render Functions API](./render-function-api.md)
diff --git a/src/guide/migration/vnode-lifecycle-events.md b/src/guide/migration/vnode-lifecycle-events.md
new file mode 100644
index 00000000..6642f63a
--- /dev/null
+++ b/src/guide/migration/vnode-lifecycle-events.md
@@ -0,0 +1,48 @@
+---
+badges:
+ - breaking
+---
+
+# VNode Lifecycle Events <MigrationBadges :badges="$frontmatter.badges" />
+
+## Overview
+
+In Vue 2, it was possible to use events to listen for key stages in a component's lifecycle. These events had names that started with the prefix `hook:`, followed by the name of the corresponding lifecycle hook.
+
+In Vue 3, this prefix has been changed to `vnode-`. In addition, these events are now available for HTML elements as well as components.
+
+## 2.x Syntax
+
+In Vue 2, the event name is the same as the equivalent lifecycle hook, prefixed with `hook:`:
+
+```html
+<template>
+ <child-component @hook:updated="onUpdated">
+</template>
+```
+
+## 3.x Syntax
+
+In Vue 3, the event name is prefixed with `vnode-`:
+
+```html
+<template>
+ <child-component @vnode-updated="onUpdated">
+</template>
+```
+
+Or just `vnode` if you're using camel case:
+
+```html
+<template>
+ <child-component @vnodeUpdated="onUpdated">
+</template>
+```
+
+## Migration Strategy
+
+In most cases it should just require changing the prefix. The lifecycle hooks `beforeDestroy` and `destroyed` have been renamed to `beforeUnmount` and `unmounted` respectively, so the corresponding event names will also need to be updated.
+
+## See also
+
+- [Migration guide - Events API](/guide/migration/events-api.html)
diff --git a/src/guide/migration/watch.md b/src/guide/migration/watch.md
new file mode 100644
index 00000000..3a6f5795
--- /dev/null
+++ b/src/guide/migration/watch.md
@@ -0,0 +1,30 @@
+---
+title: Watch on Arrays
+badges:
+ - breaking
+---
+
+# {{ $frontmatter.title }} <MigrationBadges :badges="$frontmatter.badges" />
+
+## Overview
+
+- **BREAKING**: When watching an array, the callback will only trigger when the array is replaced. If you need to trigger on mutation, the `deep` option must be specified.
+
+## 3.x Syntax
+
+When using [the `watch` option](/api/options-data.html#watch) to watch an array, the callback will only trigger when the array is replaced. In other words, the watch callback will no longer be triggered on array mutation. To trigger on mutation, the `deep` option must be specified.
+
+```js
+watch: {
+ bookList: {
+ handler(val, oldVal) {
+ console.log('book list changed')
+ },
+ deep: true
+ },
+}
+```
+
+## Migration Strategy
+
+If you rely on watching array mutations, add the `deep` property to ensure that your callback is triggered correctly.
diff --git a/src/guide/mixins.md b/src/guide/mixins.md
index 9d1590e1..8103c019 100644
--- a/src/guide/mixins.md
+++ b/src/guide/mixins.md
@@ -2,7 +2,7 @@
## Basics
-Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be "mixed" into the component's own options.
+Mixins distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be "mixed" into the component's own options.
Example:
@@ -31,7 +31,7 @@ app.mount('#mixins-basic') // => "hello from mixin!"
When a mixin and the component itself contain overlapping options, they will be "merged" using appropriate strategies.
-For example, data objects undergo a recursive merge, with the component's data taking priority in cases of conflicts.
+For example, each mixin can have its own `data` function. Each of them will be called, with the returned objects being merged. Properties from the component's own data will take priority in cases of conflicts.
```js
const myMixin = {
@@ -213,10 +213,14 @@ app.mixin({
})
```
+## Drawbacks
+
In Vue 2, mixins were the primary tool to abstract parts of component logic into reusable chunks. However, they have a few issues:
-- Mixins are conflict-prone: Since properties from each feature are merged into the same component, you still have to know about every other feature to avoid property name conflicts and for debugging.
+- Mixins are conflict-prone: Since properties from each mixin are merged into the same component, you still have to know about every other mixin to avoid property name conflicts.
+
+- Properties seem to appear from nowhere: If a component uses multiple mixins it isn't necessarily obvious which properties came from which mixin.
-- Reusability is limited: we cannot pass any parameters to the mixin to change its logic which reduces their flexibility in terms of abstracting logic
+- Reusability is limited: we cannot pass any parameters to the mixin to change its logic, which reduces their flexibility in terms of abstracting logic.
To address these issues, we added a new way to organize code by logical concerns: the [Composition API](composition-api-introduction.html).
diff --git a/src/guide/mobile.md b/src/guide/mobile.md
new file mode 100644
index 00000000..b9b1188c
--- /dev/null
+++ b/src/guide/mobile.md
@@ -0,0 +1,23 @@
+# Mobile
+
+## Introduction
+
+While Vue.js does not natively support mobile app development, there are a number of solutions for creating native iOS and Android apps with Vue.js.
+
+## Hybrid-App Development
+
+### Capacitor
+
+[Capacitor](https://capacitorjs.com/) is a project from the [Ionic Team](https://ionic.io/) that allows developers to build native iOS, Android, and PWA apps with a single codebase by providing an API that can be run across multiple platforms.
+
+**Resources**
+
+- [Capacitor + Vue.js Guide](https://capacitorjs.com/solution/vue)
+
+### NativeScript
+
+[NativeScript](https://www.nativescript.org) powers cross-platform (truly native) mobile apps, using the web skills you already know. Combined they are a fantastic pair for developing immersive mobile experiences.
+
+**Resources**
+
+- [NativeScript + Vue.js Guide](https://nativescript.org/vue/)
diff --git a/src/guide/optimizations.md b/src/guide/optimizations.md
index a2349726..b5f6d62e 100644
--- a/src/guide/optimizations.md
+++ b/src/guide/optimizations.md
@@ -7,14 +7,11 @@
Now that we know how watchers are updating the components, you might ask how those changes eventually make it to the DOM! Perhaps you’ve heard of the Virtual DOM before, many frameworks including Vue use this paradigm to make sure our interfaces reflect the changes we’re updating in JavaScript effectively
<div class="reactivecontent">
- <iframe height="500" style="width: 100%;" scrolling="no" title="How does the Virtual DOM work?" src="https://codepen.io/sdras/embed/RwwQapa?height=500&theme-id=light&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
- See the Pen <a href='https://codepen.io/sdras/pen/RwwQapa'>How does the Virtual DOM work?</a> by Sarah Drasner
- (<a href='https://codepen.io/sdras'>@sdras</a>) on <a href='https://codepen.io'>CodePen</a>.
- </iframe>
+ <common-codepen-snippet title="How does the Virtual DOM work?" slug="KKNJKbw" tab="result" theme="light" :height="500" :editable="false" :preview="false" />
</div>
-We make a copy of the DOM in JavaScript called the Virtual DOM, we do this because touching the DOM with JavaScript is computationally expensive. While performing updates in JavaScript is cheap, finding the required DOM nodes and updating them with JS is expensive. So we batch calls, and change the DOM all at once.
+We make a copy of the DOM in JavaScript called the Virtual DOM, we do this because touching the DOM with JavaScript is computationally expensive. While performing updates in JavaScript is cheap, finding the required DOM nodes and updating them with JavaScript is expensive. So we batch calls, and change the DOM all at once.
-The Virtual DOM in is a lightweight JavaScript object, created by a render function. It takes three arguments: the element, an object with data, props, attrs and more, and an array. The array is where we pass in the children, which have all these arguments too, and then they can have children and so on, until we build a full tree of elements.
+The Virtual DOM is a lightweight JavaScript object, created by a render function. It takes three arguments: the element, an object with data, props, attrs and more, and an array. The array is where we pass in the children, which have all these arguments too, and then they can have children and so on, until we build a full tree of elements.
If we need to update the list items, we do so in JavaScript, using the reactivity we mentioned earlier. We then make all the changes to the JavaScript copy, the virtual DOM, and perform a diff between this and the actual DOM. Only then do we make our updates to just what has changed. The Virtual DOM allows us to make performant updates to our UIs!
diff --git a/src/guide/plugins.md b/src/guide/plugins.md
index e636e36b..48481a95 100644
--- a/src/guide/plugins.md
+++ b/src/guide/plugins.md
@@ -42,7 +42,7 @@ export default {
app.config.globalProperties.$translate = key => {
return key.split('.').reduce((o, i) => {
if (o) return o[i]
- }, i18n)
+ }, options)
}
}
}
@@ -67,7 +67,7 @@ export default {
app.config.globalProperties.$translate = key => {
return key.split('.').reduce((o, i) => {
if (o) return o[i]
- }, i18n)
+ }, options)
}
app.provide('i18n', options)
@@ -85,7 +85,7 @@ export default {
install: (app, options) => {
app.config.globalProperties.$translate = (key) => {
return key.split('.')
- .reduce((o, i) => { if (o) return o[i] }, i18n)
+ .reduce((o, i) => { if (o) return o[i] }, options)
}
app.provide('i18n', options)
diff --git a/src/guide/reactivity-computed-watchers.md b/src/guide/reactivity-computed-watchers.md
index 28168d9e..97f48ae2 100644
--- a/src/guide/reactivity-computed-watchers.md
+++ b/src/guide/reactivity-computed-watchers.md
@@ -63,7 +63,7 @@ stop()
### Side Effect Invalidation
-Sometimes the watched effect function will perform asynchronous side effects that need to be cleaned up when it is invalidated (i.e state changed before the effects can be completed). The effect function receives an `onInvalidate` function that can be used to register an invalidation callback. This invalidation callback is called when:
+Sometimes the watched effect function will perform asynchronous side effects that need to be cleaned up when it is invalidated (i.e. state changed before the effects can be completed). The effect function receives an `onInvalidate` function that can be used to register an invalidation callback. This invalidation callback is called when:
- the effect is about to re-run
- the watcher is stopped (i.e. when the component is unmounted if `watchEffect` is used inside `setup()` or lifecycle hooks)
@@ -83,8 +83,8 @@ We are registering the invalidation callback via a passed-in function instead of
```js
const data = ref(null)
-watchEffect(async onInvalidate => {
- onInvalidate(() => {...}) // we register cleanup function before Promise resolves
+watchEffect(async (onInvalidate) => {
+ onInvalidate(() => { /* ... */ }) // we register cleanup function before Promise resolves
data.value = await fetchData(props.id)
})
```
@@ -93,9 +93,10 @@ An async function implicitly returns a Promise, but the cleanup function needs t
### Effect Flush Timing
-Vue's reactivity system buffers invalidated effects and flushes them asynchronously to avoid unnecessary duplicate invocation when there are many state mutations happening in the same "tick". Internally, a component's `update` function is also a watched effect. When a user effect is queued, it is always invoked after all component `update` effects:
+Vue's reactivity system buffers invalidated effects and flushes them asynchronously to avoid unnecessary duplicate invocation when there are many state mutations happening in the same "tick". Internally, a component's `update` function is also a watched effect. When a user effect is queued, it is by default invoked **before** all component `update` effects:
```html
+
<template>
<div>{{ count }}</div>
</template>
@@ -120,48 +121,32 @@ Vue's reactivity system buffers invalidated effects and flushes them asynchronou
In this example:
- The count will be logged synchronously on initial run.
-- When `count` is mutated, the callback will be called **after** the component has updated.
-
-Note the first run is executed before the component is mounted. So if you wish to access the DOM (or template refs) in a watched effect, do it in the `onMounted` hook:
-
-```js
-onMounted(() => {
- watchEffect(() => {
- // access the DOM or template refs
- })
-})
-```
+- When `count` is mutated, the callback will be called **before** the component has updated.
-In cases where a watcher effect needs to be re-run synchronously or before component updates, we can pass an additional `options` object with the `flush` option (default is `'post'`):
+In cases where a watcher effect needs to be re-run **after** component updates (i.e. when working with [Template Refs](./composition-api-template-refs.md#watching-template-refs)), we can pass an additional `options` object with the `flush` option (default is `'pre'`):
```js
-// fire synchronously
+// fire after component updates so you can access the updated DOM
+// Note: this will also defer the initial run of the effect until the
+// component's first render is finished.
watchEffect(
() => {
/* ... */
},
{
- flush: 'sync'
- }
-)
-
-// fire before component updates
-watchEffect(
- () => {
- /* ... */
- },
- {
- flush: 'pre'
+ flush: 'post'
}
)
```
+The `flush` option also accepts `'sync'`, which forces the effect to always trigger synchronously. This is however inefficient and should be rarely needed.
+
### Watcher Debugging
The `onTrack` and `onTrigger` options can be used to debug a watcher's behavior.
-- `onTrack` will be called when a reactive property or ref is tracked as a dependency
-- `onTrigger` will be called when the watcher callback is triggered by the mutation of a dependency
+- `onTrack` will be called when a reactive property or ref is tracked as a dependency.
+- `onTrigger` will be called when the watcher callback is triggered by the mutation of a dependency.
Both callbacks will receive a debugger event which contains information on the dependency in question. It is recommended to place a `debugger` statement in these callbacks to interactively inspect the dependency:
@@ -216,9 +201,92 @@ watch(count, (count, prevCount) => {
A watcher can also watch multiple sources at the same time using an array:
```js
-watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
- /* ... */
+const firstName = ref('');
+const lastName = ref('');
+
+watch([firstName, lastName], (newValues, prevValues) => {
+ console.log(newValues, prevValues);
})
+
+firstName.value = "John"; // logs: ["John",""] ["", ""]
+lastName.value = "Smith"; // logs: ["John", "Smith"] ["John", ""]
+```
+
+### Watching Reactive Objects
+
+Using a watcher to compare values of an array or object that are reactive requires that it has a copy made of just the values.
+
+```js
+const numbers = reactive([1, 2, 3, 4])
+
+watch(
+ () => [...numbers],
+ (numbers, prevNumbers) => {
+ console.log(numbers, prevNumbers);
+ })
+
+numbers.push(5) // logs: [1,2,3,4,5] [1,2,3,4]
+```
+
+Attempting to check for changes of properties in a deeply nested object or array will still require the `deep` option to be true:
+
+```js
+const state = reactive({
+ id: 1,
+ attributes: {
+ name: "",
+ },
+});
+
+watch(
+ () => state,
+ (state, prevState) => {
+ console.log(
+ "not deep ",
+ state.attributes.name,
+ prevState.attributes.name
+ );
+ }
+);
+
+watch(
+ () => state,
+ (state, prevState) => {
+ console.log(
+ "deep ",
+ state.attributes.name,
+ prevState.attributes.name
+ );
+ },
+ { deep: true }
+);
+
+state.attributes.name = "Alex"; // Logs: "deep " "Alex" "Alex"
+```
+
+However, watching a reactive object or array will always return a reference to the current value of that object for both the current and previous value of the state. To fully watch deeply nested objects and arrays, a deep copy of values may be required. This can be achieved with a utility such as [lodash.cloneDeep](https://lodash.com/docs/4.17.15#cloneDeep)
+
+```js
+import _ from 'lodash';
+
+const state = reactive({
+ id: 1,
+ attributes: {
+ name: "",
+ },
+});
+
+watch(
+ () => _.cloneDeep(state),
+ (state, prevState) => {
+ console.log(
+ state.attributes.name,
+ prevState.attributes.name
+ );
+ }
+);
+
+state.attributes.name = "Alex"; // Logs: "Alex" ""
```
### Shared Behavior with `watchEffect`
diff --git a/src/guide/reactivity-fundamentals.md b/src/guide/reactivity-fundamentals.md
index b2a440b1..49caf325 100644
--- a/src/guide/reactivity-fundamentals.md
+++ b/src/guide/reactivity-fundamentals.md
@@ -45,13 +45,14 @@ console.log(count.value) // 1
### Ref Unwrapping
-When a ref is returned as a property on the render context (the object returned from [setup()](composition-api-setup.html)) and accessed in the template, it automatically unwraps to the inner value. There is no need to append `.value` in the template:
+When a ref is returned as a property on the render context (the object returned from [setup()](composition-api-setup.html)) and accessed in the template, it automatically shallow unwraps the inner value. Only the nested ref will require `.value` in the template:
```vue-html
<template>
<div>
<span>{{ count }}</span>
<button @click="count ++">Increment count</button>
+ <button @click="nested.count.value ++">Nested Increment count</button>
</div>
</template>
@@ -61,13 +62,27 @@ When a ref is returned as a property on the render context (the object returned
setup() {
const count = ref(0)
return {
- count
+ count,
+
+ nested: {
+ count
+ }
}
}
}
</script>
```
+:::tip
+If you don't need to access the actual object instance, you can wrap it in a `reactive`:
+
+```js
+nested: reactive({
+ count
+})
+```
+:::
+
### Access in Reactive Objects
When a `ref` is accessed or mutated as a property of a reactive object, it automatically unwraps to the inner value so it behaves like a normal property:
diff --git a/src/guide/reactivity.md b/src/guide/reactivity.md
index 7c8ecead..ba6ce6c3 100644
--- a/src/guide/reactivity.md
+++ b/src/guide/reactivity.md
@@ -2,74 +2,111 @@
Now it’s time to take a deep dive! One of Vue’s most distinct features is the unobtrusive reactivity system. Models are proxied JavaScript objects. When you modify them, the view updates. It makes state management simple and intuitive, but it’s also important to understand how it works to avoid some common gotchas. In this section, we are going to dig into some of the lower-level details of Vue’s reactivity system.
+<VideoLesson href="https://www.vuemastery.com/courses/vue-3-reactivity/vue3-reactivity" title="Learn how how reactivity works in depth with Vue Mastery">Watch a free video on Reactivity in Depth on Vue Mastery</VideoLesson>
+
## What is Reactivity?
-This term comes up in programming quite a bit these days, but what do people mean when they say it? Reactivity is a programming paradigm that allows us to adjust to changes in a declarative manner. The canonical example that people usually show, because it’s a great one, is an excel spreadsheet.
+This term comes up in programming quite a bit these days, but what do people mean when they say it? Reactivity is a programming paradigm that allows us to adjust to changes in a declarative manner. The canonical example that people usually show, because it’s a great one, is an Excel spreadsheet.
<video width="550" height="400" controls>
<source src="/images/reactivity-spreadsheet.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
-If you put the number two in the first cell, and the number 3 in the second and asked for the SUM, the spreadsheet would give it to you. No surprises there. But if you update that first number, the SUM automagically updates too.
+If you put the number 2 in the first cell, and the number 3 in the second and asked for the SUM, the spreadsheet would give it to you. No surprises there. But if you update that first number, the SUM automagically updates too.
-JavaScript doesn’t usually work like this -- If we were to write something comparable in JavaScript:
+JavaScript doesn’t usually work like this. If we were to write something comparable in JavaScript:
```js
-var val1 = 2
-var val2 = 3
-var sum = val1 + val2
+let val1 = 2
+let val2 = 3
+let sum = val1 + val2
-// sum
-// 5
+console.log(sum) // 5
val1 = 3
-// sum
-// 5
+console.log(sum) // Still 5
```
If we update the first value, the sum is not adjusted.
So how would we do this in JavaScript?
-- Detect when there’s a change in one of the values
-- Track the function that changes it
-- Trigger the function so it can update the final value
+As a high-level overview, there are a few things we need to be able to do:
-## How Vue Tracks These Changes
+1. **Track when a value is read.** e.g. `val1 + val2` reads both `val1` and `val2`.
+2. **Detect when a value changes.** e.g. When we assign `val1 = 3`.
+3. **Re-run the code that read the value originally.** e.g. Run `sum = val1 + val2` again to update the value of `sum`.
-When you pass a plain JavaScript object to an application or component instance as its `data` option, Vue will walk through all of its properties and convert them to [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) using a handler with getters and setters. This is an ES6-only feature, but we offer a version of Vue 3 that uses the older `Object.defineProperty` to support IE browsers. Both have the same surface API, but the Proxy version is slimmer and offers improved performance.
+We can't do this directly using the code from the previous example but we'll come back to this example later to see how to adapt it to be compatible with Vue's reactivity system.
-<div class="reactivecontent">
- <iframe height="500" style="width: 100%;" scrolling="no" title="Proxies and Vue's Reactivity Explained Visually" src="https://codepen.io/sdras/embed/zYYzjBg?height=500&theme-id=light&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
- See the Pen <a href='https://codepen.io/sdras/pen/zYYzjBg'>Proxies and Vue's Reactivity Explained Visually</a> by Sarah Drasner
- (<a href='https://codepen.io/sdras'>@sdras</a>) on <a href='https://codepen.io'>CodePen</a>.
- </iframe>
-</div>
+First, let's dig a bit deeper into how Vue implements the core reactivity requirements outlined above.
-That was rather quick and requires some knowledge of [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) to understand! So let’s dive in a bit. There’s a lot of literature on Proxies, but what you really need to know is that a **Proxy is an object that encases another object or function and allows you to intercept it.**
+## How Vue Knows What Code Is Running
-We use it like this: `new Proxy(target, handler)`
+To be able to run our sum whenever the values change, the first thing we need to do is wrap it in a function:
```js
-const dinner = {
- meal: 'tacos'
+const updateSum = () => {
+ sum = val1 + val2
}
+```
-const handler = {
- get(target, prop) {
- return target[prop]
+But how do we tell Vue about this function?
+
+Vue keeps track of which function is currently running by using an *effect*. An effect is a wrapper around the function that initiates tracking just before the function is called. Vue knows which effect is running at any given point and can run it again when required.
+
+To understand that better, let's try to implement something similar ourselves, without Vue, to see how it might work.
+
+What we need is something that can wrap our sum, like this:
+
+```js
+createEffect(() => {
+ sum = val1 + val2
+})
+```
+
+We need `createEffect` to keep track of when the sum is running. We might implement it something like this:
+
+```js
+// Maintain a stack of running effects
+const runningEffects = []
+
+const createEffect = fn => {
+ // Wrap the passed fn in an effect function
+ const effect = () => {
+ runningEffects.push(effect)
+ fn()
+ runningEffects.pop()
}
+
+ // Automatically run the effect immediately
+ effect()
}
+```
-const proxy = new Proxy(dinner, handler)
-console.log(proxy.meal)
+When our effect is called it pushes itself onto the `runningEffects` array, before calling `fn`. Anything that needs to know which effect is currently running can check that array.
-// tacos
-```
+Effects act as the starting point for many key features. For example, both component rendering and computed properties use effects internally. Any time something magically responds to data changes you can be pretty sure it has been wrapped in an effect.
+
+While Vue's public API doesn't include any way to create an effect directly, it does expose a function called `watchEffect` that behaves a lot like the `createEffect` function from our example. We'll discuss that in more detail [later in the guide](/guide/reactivity-computed-watchers.html#watcheffect).
-Ok, so far, we’re just wrapping that object and returning it. Cool, but not that useful yet. But watch this, we can also intercept this object while we wrap it in the Proxy. This interception is called a trap.
+But knowing what code is running is just one part of the puzzle. How does Vue know what values the effect uses and how does it know when they change?
+
+## How Vue Tracks These Changes
+
+We can't track reassignments of local variables like those in our earlier examples, there's just no mechanism for doing that in JavaScript. What we can track are changes to object properties.
+
+When we return a plain JavaScript object from a component's `data` function, Vue will wrap that object in a [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) with handlers for `get` and `set`. Proxies were introduced in ES6 and allow Vue 3 to avoid some of the reactivity caveats that existed in earlier versions of Vue.
+
+<div class="reactivecontent">
+ <common-codepen-snippet title="Proxies and Vue's Reactivity Explained Visually" slug="VwmxZXJ" tab="result" theme="light" :height="500" :editable="false" :preview="false" />
+</div>
+
+That was rather quick and requires some knowledge of [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) to understand! So let’s dive in a bit. There’s a lot of literature on Proxies, but what you really need to know is that a **Proxy is an object that encases another object and allows you to intercept any interactions with that object.**
+
+We use it like this: `new Proxy(target, handler)`
```js
const dinner = {
@@ -77,9 +114,9 @@ const dinner = {
}
const handler = {
- get(target, prop) {
- console.log(‘intercepted!’)
- return target[prop]
+ get(target, property) {
+ console.log('intercepted!')
+ return target[property]
}
}
@@ -90,9 +127,11 @@ console.log(proxy.meal)
// tacos
```
+Here we've intercepted attempts to read properties of the target object. A handler function like this is also known as a *trap*. There are many different types of trap available, each handling a different type of interaction.
+
Beyond a console log, we could do anything here we wish. We could even _not_ return the real value if we wanted to. This is what makes Proxies so powerful for creating APIs.
-Furthermore, there’s another feature Proxies offer us. Rather than just returning the value like this: `target[prop]`, we could take this a step further and use a feature called `Reflect`, which allows us to do proper `this` binding. It looks like this:
+One challenge with using a Proxy is the `this` binding. We'd like any methods to be bound to the Proxy, rather than the target object, so that we can intercept them too. Thankfully, ES6 introduced another new feature, called `Reflect`, that allows us to make this problem disappear with minimal effort:
```js{7}
const dinner = {
@@ -100,7 +139,7 @@ const dinner = {
}
const handler = {
- get(target, prop, receiver) {
+ get(target, property, receiver) {
return Reflect.get(...arguments)
}
}
@@ -108,11 +147,10 @@ const handler = {
const proxy = new Proxy(dinner, handler)
console.log(proxy.meal)
-// intercepted!
// tacos
```
-We mentioned before that in order to have an API that updates a final value when something changes, we’re going to have to set new values when something changes. We do this in the handler, in a function called `track`, where we pass in the `target` and `key`.
+The first step towards implementing reactivity with a Proxy is to track when a property is read. We do this in the handler, in a function called `track`, where we pass in the `target` and `property`:
```js{7}
const dinner = {
@@ -120,8 +158,8 @@ const dinner = {
}
const handler = {
- get(target, prop, receiver) {
- track(target, prop)
+ get(target, property, receiver) {
+ track(target, property)
return Reflect.get(...arguments)
}
}
@@ -129,11 +167,12 @@ const handler = {
const proxy = new Proxy(dinner, handler)
console.log(proxy.meal)
-// intercepted!
// tacos
```
-Finally, we also set new values when something changes. For this, we’re going to set the changes on our new proxy, by triggering those changes:
+The implementation of `track` isn't shown here. It will check which *effect* is currently running and record that alongside the `target` and `property`. This is how Vue knows that the property is a dependency of the effect.
+
+Finally, we need to re-run the effect when the property value changes. For this we're going to need a `set` handler on our proxy:
```js
const dinner = {
@@ -141,12 +180,12 @@ const dinner = {
}
const handler = {
- get(target, prop, receiver) {
- track(target, prop)
+ get(target, property, receiver) {
+ track(target, property)
return Reflect.get(...arguments)
},
- set(target, key, value, receiver) {
- trigger(target, key)
+ set(target, property, value, receiver) {
+ trigger(target, property)
return Reflect.set(...arguments)
}
}
@@ -154,17 +193,55 @@ const handler = {
const proxy = new Proxy(dinner, handler)
console.log(proxy.meal)
-// intercepted!
// tacos
```
-Remember this list from a few paragraphs ago? Now we have some answers to how Vue handles these changes:
+Remember this list from earlier? Now we have some answers to how Vue implements these key steps:
+
+1. **Track when a value is read**: the `track` function in the proxy's `get` handler records the property and the current effect.
+2. **Detect when that value changes**: the `set` handler is called on the proxy.
+3. **Re-run the code that read the value originally:** the `trigger` function looks up which effects depend on the property and runs them.
+
+The proxied object is invisible to the user, but under the hood it enables Vue to perform dependency-tracking and change-notification when properties are accessed or modified. One caveat is that console logging will format proxied objects differently, so you may want to install [vue-devtools](https://github.com/vuejs/vue-devtools) for a more inspection-friendly interface.
+
+If we were to rewrite our original example using a component we might do it something like this:
+
+```js
+const vm = createApp({
+ data() {
+ return {
+ val1: 2,
+ val2: 3
+ }
+ },
+ computed: {
+ sum() {
+ return this.val1 + this.val2
+ }
+ }
+}).mount('#app')
+
+console.log(vm.sum) // 5
+
+vm.val1 = 3
+
+console.log(vm.sum) // 6
+```
+
+The object returned by `data` will be wrapped in a reactive proxy and stored as `this.$data`. The properties `this.val1` and `this.val2` are aliases for `this.$data.val1` and `this.$data.val2` respectively, so they go through the same proxy.
+
+Vue will wrap the function for `sum` in an effect. When we try to access `this.sum`, it will run that effect to calculate the value. The reactive proxy around `$data` will track that the properties `val1` and `val2` were read while that effect is running.
-- <strike>Detect when there’s a change in one of the values</strike>: we no longer have to do this, as Proxies allow us to intercept it
-- **Track the function that changes it**: We do this in a getter within the proxy, called `effect`
-- **Trigger the function so it can update the final value**: We do in a setter within the proxy, called `trigger`
+As of Vue 3, our reactivity is now available in a [separate package](https://github.com/vuejs/vue-next/tree/master/packages/reactivity). The function that wraps `$data` in a proxy is called [`reactive`](/api/basic-reactivity.html#reactive). We can call this directly ourselves, allowing us to wrap an object in a reactive proxy without needing to use a component:
-The proxied object is invisible to the user, but under the hood they enable Vue to perform dependency-tracking and change-notification when properties are accessed or modified. As of Vue 3, our reactivity is now available in a [separate package](https://github.com/vuejs/vue-next/tree/master/packages/reactivity). One caveat is that browser consoles format differently when converted data objects are logged, so you may want to install [vue-devtools](https://github.com/vuejs/vue-devtools) for a more inspection-friendly interface.
+```js
+const proxy = reactive({
+ val1: 2,
+ val2: 3
+})
+```
+
+We'll explore the functionality exposed by the reactivity package over the course of the next few pages of this guide. That includes functions like `reactive` and `watchEffect` that we've already met, as well as ways to use other reactivity features, such as `computed` and `watch`, without needing to create a component.
### Proxied Objects
@@ -172,12 +249,13 @@ Vue internally tracks all objects that have been made reactive, so it always ret
When a nested object is accessed from a reactive proxy, that object is _also_ converted into a proxy before being returned:
-```js
+```js{6-7}
const handler = {
- get(target, prop, receiver) {
- track(target, prop)
+ get(target, property, receiver) {
+ track(target, property)
const value = Reflect.get(...arguments)
if (isObject(value)) {
+ // Wrap the nested object in its own reactive proxy
return reactive(value)
} else {
return value
@@ -189,7 +267,7 @@ const handler = {
### Proxy vs. original identity
-The use of Proxy does introduce a new caveat to be aware with: the proxied object is not equal to the original object in terms of identity comparison (`===`). For example:
+The use of Proxy does introduce a new caveat to be aware of: the proxied object is not equal to the original object in terms of identity comparison (`===`). For example:
```js
const obj = {}
@@ -198,10 +276,9 @@ const wrapped = new Proxy(obj, handlers)
console.log(obj === wrapped) // false
```
-The original and the wrapped version will behave the same in most cases, but be aware that they will fail
-operations that rely on strong identity comparisons, such as `.filter()` or `.map()`. This caveat is unlikely to come up when using the options API, because all reactive state is accessed from `this` and guaranteed to already be proxies.
+Other operations that rely on strict equality comparisons can also be impacted, such as `.includes()` or `.indexOf()`.
-However, when using the composition API to explicitly create reactive objects, the best practice is to never hold a reference to the original raw object and only work with the reactive version:
+The best practice here is to never hold a reference to the original raw object and only work with the reactive version:
```js
const obj = reactive({
@@ -209,21 +286,26 @@ const obj = reactive({
}) // no reference to original
```
-## Watchers
+This ensures that both equality comparisons and reactivity behave as expected.
-Every component instance has a corresponding watcher instance, which records any properties "touched" during the component’s render as dependencies. Later on when a dependency’s setter is triggered, it notifies the watcher, which in turn causes the component to re-render.
+Note that Vue does not wrap primitive values such as numbers or strings in a Proxy, so you can still use `===` directly with those values:
-<div class="reactivecontent">
- <iframe height="500" style="width: 100%;" scrolling="no" title="Second Reactivity with Proxies in Vue 3 Explainer" src="https://codepen.io/sdras/embed/GRJZddR?height=500&theme-id=light&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
- See the Pen <a href='https://codepen.io/sdras/pen/GRJZddR'>Second Reactivity with Proxies in Vue 3 Explainer</a> by Sarah Drasner
- (<a href='https://codepen.io/sdras'>@sdras</a>) on <a href='https://codepen.io'>CodePen</a>.
- </iframe>
-</div>
+```js
+const obj = reactive({
+ count: 0
+})
+
+console.log(obj.count === 0) // true
+```
+
+## How Rendering Reacts to Changes
-When you pass an object to a component instance as data, Vue converts it to a proxy. This proxy enables Vue to perform dependency-tracking and change-notification when properties are accessed or modified. Each property is considered a dependency.
+The template for a component is compiled down into a [`render`](/guide/render-function.html) function. The `render` function creates the [VNodes](/guide/render-function.html#the-virtual-dom-tree) that describe how the component should be rendered. It is wrapped in an effect, allowing Vue to track the properties that are 'touched' while it is running.
-After the first render, a component would have tracked a list of dependencies — the properties it accessed during the render. Conversely, the component becomes a subscriber to each of these properties. When a proxy intercepts a set operation, the property will notify all of its subscribed components to re-render.
+A `render` function is conceptually very similar to a `computed` property. Vue doesn't track exactly how dependencies are used, it only knows that they were used at some point while the function was running. If any of those properties subsequently changes, it will trigger the effect to run again, re-running the `render` function to generate new VNodes. These are then used to make the necessary changes to the DOM.
-[//]: # 'TODO: Insert diagram'
+<div class="reactivecontent">
+ <common-codepen-snippet title="Second Reactivity with Proxies in Vue 3 Explainer" slug="wvgqyJK" tab="result" theme="light" :height="500" :editable="false" :preview="false" />
+</div>
> If you are using Vue 2.x and below, you may be interested in some of the change detection caveats that exist for those versions, [explored in more detail here](change-detection.md).
diff --git a/src/guide/render-function.md b/src/guide/render-function.md
index ff2365b7..fda002f2 100644
--- a/src/guide/render-function.md
+++ b/src/guide/render-function.md
@@ -21,7 +21,9 @@ Anchored headings are used very frequently, we should create a component:
The component must generate a heading based on the `level` prop, and we quickly arrive at this:
```js
-const app = Vue.createApp({})
+const { createApp } = Vue
+
+const app = createApp({})
app.component('anchored-heading', {
template: `
@@ -58,12 +60,12 @@ This template doesn't feel great. It's not only verbose, but we're duplicating `
While templates work great for most components, it's clear that this isn't one of them. So let's try rewriting it with a `render()` function:
```js
-const app = Vue.createApp({})
+const { createApp, h } = Vue
+
+const app = createApp({})
app.component('anchored-heading', {
render() {
- const { h } = Vue
-
return h(
'h' + this.level, // tag name
{}, // props/attributes
@@ -111,7 +113,7 @@ Or in a render function:
```js
render() {
- return Vue.h('h1', {}, this.blogTitle)
+ return h('h1', {}, this.blogTitle)
}
```
@@ -122,7 +124,7 @@ And in both cases, Vue automatically keeps the page updated, even when `blogTitl
Vue keeps the page updated by building a **virtual DOM** to keep track of the changes it needs to make to the real DOM. Taking a closer look at this line:
```js
-return Vue.h('h1', {}, this.blogTitle)
+return h('h1', {}, this.blogTitle)
```
What is the `h()` function returning? It's not _exactly_ a real DOM element. It returns a plain object which contains information describing to Vue what kind of node it should render on the page, including descriptions of any child nodes. We call this node description a "virtual node", usually abbreviated to **VNode**. "Virtual DOM" is what we call the entire tree of VNodes, built by a tree of Vue components.
@@ -134,9 +136,9 @@ The `h()` function is a utility to create VNodes. It could perhaps more accurate
```js
// @returns {VNode}
h(
- // {String | Object | Function } tag
- // An HTML tag name, a component or an async component.
- // Using function returning null would render a comment.
+ // {String | Object | Function} tag
+ // An HTML tag name, a component, an async component, or a
+ // functional component.
//
// Required.
'div',
@@ -164,12 +166,16 @@ h(
)
```
+If there are no props then the children can usually be passed as the second argument. In cases where that would be ambiguous, `null` can be passed as the second argument to keep the children as the third argument.
+
## Complete Example
With this knowledge, we can now finish the component we started:
```js
-const app = Vue.createApp({})
+const { createApp, h } = Vue
+
+const app = createApp({})
/** Recursively get text from children nodes */
function getChildrenTextContent(children) {
@@ -192,8 +198,8 @@ app.component('anchored-heading', {
.replace(/\W+/g, '-') // replace non-word characters with dash
.replace(/(^-|-$)/g, '') // remove leading and trailing dashes
- return Vue.h('h' + this.level, [
- Vue.h(
+ return h('h' + this.level, [
+ h(
'a',
{
name: headingId,
@@ -220,8 +226,8 @@ All VNodes in the component tree must be unique. That means the following render
```js
render() {
- const myParagraphVNode = Vue.h('p', 'hi')
- return Vue.h('div', [
+ const myParagraphVNode = h('p', 'hi')
+ return h('div', [
// Yikes - duplicate VNodes!
myParagraphVNode, myParagraphVNode
])
@@ -232,14 +238,59 @@ If you really want to duplicate the same element/component many times, you can d
```js
render() {
- return Vue.h('div',
- Array.apply(null, { length: 20 }).map(() => {
- return Vue.h('p', 'hi')
+ return h('div',
+ Array.from({ length: 20 }).map(() => {
+ return h('p', 'hi')
})
)
}
```
+## Creating Component VNodes
+
+To create a VNode for a component, the first argument passed to `h` should be the component itself:
+
+```js
+render() {
+ return h(ButtonCounter)
+}
+```
+
+If we need to resolve a component by name then we can call `resolveComponent`:
+
+```js
+const { h, resolveComponent } = Vue
+
+// ...
+
+render() {
+ const ButtonCounter = resolveComponent('ButtonCounter')
+ return h(ButtonCounter)
+}
+```
+
+`resolveComponent` is the same function that templates use internally to resolve components by name.
+
+A `render` function will normally only need to use `resolveComponent` for components that are [registered globally](/guide/component-registration.html#global-registration). [Local component registration](/guide/component-registration.html#local-registration) can usually be skipped altogether. Consider the following example:
+
+```js
+// We can simplify this
+components: {
+ ButtonCounter
+},
+render() {
+ return h(resolveComponent('ButtonCounter'))
+}
+```
+
+Rather than registering a component by name and then looking it up we can use it directly instead:
+
+```js
+render() {
+ return h(ButtonCounter)
+}
+```
+
## Replacing Template Features with Plain JavaScript
### `v-if` and `v-for`
@@ -259,23 +310,26 @@ This could be rewritten with JavaScript's `if`/`else` and `map()` in a render fu
props: ['items'],
render() {
if (this.items.length) {
- return Vue.h('ul', this.items.map((item) => {
- return Vue.h('li', item.name)
+ return h('ul', this.items.map((item) => {
+ return h('li', item.name)
}))
} else {
- return Vue.h('p', 'No items found.')
+ return h('p', 'No items found.')
}
}
```
+In a template it can be useful to use a `<template>` tag to hold a `v-if` or `v-for` directive. When migrating to a `render` function, the `<template>` tag is no longer required and can be discarded.
+
### `v-model`
The `v-model` directive is expanded to `modelValue` and `onUpdate:modelValue` props during template compilation—we will have to provide these props ourselves:
```js
props: ['modelValue'],
+emits: ['update:modelValue'],
render() {
- return Vue.h(SomeComponent, {
+ return h(SomeComponent, {
modelValue: this.modelValue,
'onUpdate:modelValue': value => this.$emit('update:modelValue', value)
})
@@ -288,7 +342,7 @@ We have to provide a proper prop name for the event handler, e.g., to handle `cl
```js
render() {
- return Vue.h('div', {
+ return h('div', {
onClick: $event => console.log('clicked', $event.target)
})
}
@@ -296,53 +350,43 @@ render() {
#### Event Modifiers
-For the `.passive`, `.capture`, and `.once` event modifiers, Vue offers object syntax of the handler:
+For the `.passive`, `.capture`, and `.once` event modifiers, they can be concatenated after the event name using camel case.
For example:
-```javascript
+```js
render() {
- return Vue.h('input', {
- onClick: {
- handler: this.doThisInCapturingMode,
- capture: true
- },
- onKeyup: {
- handler: this.doThisOnce,
- once: true
- },
- onMouseover: {
- handler: this.doThisOnceInCapturingMode,
- once: true,
- capture: true
- },
+ return h('input', {
+ onClickCapture: this.doThisInCapturingMode,
+ onKeyupOnce: this.doThisOnce,
+ onMouseoverOnceCapture: this.doThisOnceInCapturingMode
})
}
```
For all other event and key modifiers, no special API is necessary, because we can use event methods in the handler:
-| Modifier(s) | Equivalent in Handler |
-| ----------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
-| `.stop` | `event.stopPropagation()` |
-| `.prevent` | `event.preventDefault()` |
-| `.self` | `if (event.target !== event.currentTarget) return` |
-| Keys:<br>`.enter`, `.13` | `if (event.keyCode !== 13) return` (change `13` to [another key code](http://keycode.info/) for other key modifiers) |
-| Modifiers Keys:<br>`.ctrl`, `.alt`, `.shift`, `.meta` | `if (!event.ctrlKey) return` (change `ctrlKey` to `altKey`, `shiftKey`, or `metaKey`, respectively) |
+| Modifier(s) | Equivalent in Handler |
+| ---------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
+| `.stop` | `event.stopPropagation()` |
+| `.prevent` | `event.preventDefault()` |
+| `.self` | `if (event.target !== event.currentTarget) return` |
+| Keys:<br>e.g. `.enter` | `if (event.key !== 'Enter') return`<br><br>Change `'Enter'` to the appropriate [key](http://keycode.info/) |
+| Modifier Keys:<br>`.ctrl`, `.alt`, `.shift`, `.meta` | `if (!event.ctrlKey) return`<br><br>Likewise for `altKey`, `shiftKey`, and `metaKey` |
Here's an example with all of these modifiers used together:
```js
render() {
- return Vue.h('input', {
+ return h('input', {
onKeyUp: event => {
// Abort if the element emitting the event is not
// the element the event is bound to
if (event.target !== event.currentTarget) return
// Abort if the key that went up is not the enter
- // key (13) and the shift key was not held down
- // at the same time
- if (!event.shiftKey || event.keyCode !== 13) return
+ // key and the shift key was not held down at the
+ // same time
+ if (!event.shiftKey || event.key !== 'Enter') return
// Stop event propagation
event.stopPropagation()
// Prevent the default keyup handler for this element
@@ -355,12 +399,12 @@ render() {
### Slots
-You can access slot contents as Arrays of VNodes from [`this.$slots`](../api/instance-properties.html#slots):
+We can access slot contents as arrays of VNodes from [`this.$slots`](../api/instance-properties.html#slots):
```js
render() {
// `<div><slot></slot></div>`
- return Vue.h('div', {}, this.$slots.default())
+ return h('div', this.$slots.default())
}
```
@@ -368,38 +412,201 @@ render() {
props: ['message'],
render() {
// `<div><slot :text="message"></slot></div>`
- return Vue.h('div', {}, this.$slots.default({
+ return h('div', this.$slots.default({
text: this.message
}))
}
```
-To pass slots to a child component using render functions:
+For component VNodes, we need to pass the children to `h` as an object rather than an array. Each property is used to populate the slot of the same name:
```js
render() {
// `<div><child v-slot="props"><span>{{ props.text }}</span></child></div>`
- return Vue.h('div', [
- Vue.h('child', {}, {
+ return h('div', [
+ h(
+ resolveComponent('child'),
+ null,
// pass `slots` as the children object
// in the form of { name: props => VNode | Array<VNode> }
- default: (props) => Vue.h('span', props.text)
- })
+ {
+ default: (props) => h('span', props.text)
+ }
+ )
+ ])
+}
+```
+
+The slots are passed as functions, allowing the child component to control the creation of each slot's contents. Any reactive data should be accessed within the slot function to ensure that it's registered as a dependency of the child component and not the parent. Conversely, calls to `resolveComponent` should be made outside the slot function, otherwise they'll resolve relative to the wrong component:
+
+```js
+// `<MyButton><MyIcon :name="icon" />{{ text }}</MyButton>`
+render() {
+ // Calls to resolveComponent should be outside the slot function
+ const Button = resolveComponent('MyButton')
+ const Icon = resolveComponent('MyIcon')
+
+ return h(
+ Button,
+ null,
+ {
+ // Use an arrow function to preserve the `this` value
+ default: (props) => {
+ // Reactive properties should be read inside the slot function
+ // so that they become dependencies of the child's rendering
+ return [
+ h(Icon, { name: this.icon }),
+ this.text
+ ]
+ }
+ }
+ )
+}
+```
+
+If a component receives slots from its parent, they can be passed on directly to a child component:
+
+```js
+render() {
+ return h(Panel, null, this.$slots)
+}
+```
+
+They can also be passed individually or wrapped as appropriate:
+
+```js
+render() {
+ return h(
+ Panel,
+ null,
+ {
+ // If we want to pass on a slot function we can
+ header: this.$slots.header,
+
+ // If we need to manipulate the slot in some way
+ // then we need to wrap it in a new function
+ default: (props) => {
+ const children = this.$slots.default ? this.$slots.default(props) : []
+
+ return children.concat(h('div', 'Extra child'))
+ }
+ }
+ )
+}
+```
+
+### `<component>` and `is`
+
+Behind the scenes, templates use `resolveDynamicComponent` to implement the `is` attribute. We can use the same function if we need all the flexibility provided by `is` in our `render` function:
+
+```js
+const { h, resolveDynamicComponent } = Vue
+
+// ...
+
+// `<component :is="name"></component>`
+render() {
+ const Component = resolveDynamicComponent(this.name)
+ return h(Component)
+}
+```
+
+Just like `is`, `resolveDynamicComponent` supports passing a component name, an HTML element name, or a component options object.
+
+However, that level of flexibility is usually not required. It's often possible to replace `resolveDynamicComponent` with a more direct alternative.
+
+For example, if we only need to support component names then `resolveComponent` can be used instead.
+
+If the VNode is always an HTML element then we can pass its name directly to `h`:
+
+```js
+// `<component :is="bold ? 'strong' : 'em'"></component>`
+render() {
+ return h(this.bold ? 'strong' : 'em')
+}
+```
+
+Similarly, if the value passed to `is` is a component options object then there's no need to resolve anything, it can be passed directly as the first argument of `h`.
+
+Much like a `<template>` tag, a `<component>` tag is only required in templates as a syntactical placeholder and should be discarded when migrating to a `render` function.
+
+### Custom Directives
+
+Custom directives can be applied to a VNode using [`withDirectives`](/api/global-api.html#withdirectives):
+
+```js
+const { h, resolveDirective, withDirectives } = Vue
+
+// ...
+
+// <div v-pin:top.animate="200"></div>
+render () {
+ const pin = resolveDirective('pin')
+
+ return withDirectives(h('div'), [
+ [pin, 200, 'top', { animate: true }]
])
}
```
+[`resolveDirective`](/api/global-api.html#resolvedirective) is the same function that templates use internally to resolve directives by name. That is only necessary if you don't already have direct access to the directive's definition object.
+
+### Built-in Components
+
+[Built-in components](/api/built-in-components.html) such as `<keep-alive>`, `<transition>`, `<transition-group>`, and `<teleport>` are not registered globally by default. This allows bundlers to perform tree-shaking, so that the components are only included in the build if they are used. However, that also means we can't access them using `resolveComponent` or `resolveDynamicComponent`.
+
+Templates have special handling for those components, automatically importing them when they are used. When we're writing our own `render` functions, we need to import them ourselves:
+
+```js
+const { h, KeepAlive, Teleport, Transition, TransitionGroup } = Vue
+
+// ...
+
+render () {
+ return h(Transition, { mode: 'out-in' }, /* ... */)
+}
+```
+
+## Return Values for Render Functions
+
+In all of the examples we've seen so far, the `render` function has returned a single root VNode. However, there are alternatives.
+
+Returning a string will create a text VNode, without any wrapping element:
+
+```js
+render() {
+ return 'Hello world!'
+}
+```
+
+We can also return an array of children, without wrapping them in a root node. This creates a fragment:
+
+```js
+// Equivalent to a template of `Hello<br>world!`
+render() {
+ return [
+ 'Hello',
+ h('br'),
+ 'world!'
+ ]
+}
+```
+
+If a component needs to render nothing, perhaps because data is still loading, it can just return `null`. This will be rendered as a comment node in the DOM.
+
## JSX
If we're writing a lot of `render` functions, it might feel painful to write something like this:
```js
-Vue.h(
- 'anchored-heading',
+h(
+ resolveComponent('anchored-heading'),
{
level: 1
},
- [Vue.h('span', 'Hello'), ' world!']
+ {
+ default: () => [h('span', 'Hello'), ' world!']
+ }
)
```
@@ -429,6 +636,31 @@ app.mount('#demo')
For more on how JSX maps to JavaScript, see the [usage docs](https://github.com/vuejs/jsx-next#installation).
+## Functional Components
+
+Functional components are an alternative form of component that don't have any state of their own. They are rendered without creating a component instance, bypassing the usual component lifecycle.
+
+To create a functional component we use a plain function, rather than an options object. The function is effectively the `render` function for the component. As there is no `this` reference for a functional component, Vue will pass in the `props` as the first argument:
+
+```js
+const FunctionalComponent = (props, context) => {
+ // ...
+}
+```
+
+The second argument, `context`, contains three properties: `attrs`, `emit`, and `slots`. These are equivalent to the instance properties [`$attrs`](/api/instance-properties.html#attrs), [`$emit`](/api/instance-methods.html#emit), and [`$slots`](/api/instance-properties.html#slots) respectively.
+
+Most of the usual configuration options for components are not available for functional components. However, it is possible to define [`props`](/api/options-data.html#props) and [`emits`](/api/options-data.html#emits) by adding them as properties:
+
+```js
+FunctionalComponent.props = ['value']
+FunctionalComponent.emits = ['click']
+```
+
+If the `props` option is not specified, then the `props` object passed to the function will contain all attributes, the same as `attrs`. The prop names will not be normalized to camelCase unless the `props` option is specified.
+
+Functional components can be registered and consumed just like normal components. If you pass a function as the first argument to `h`, it will be treated as a functional component.
+
## Template Compilation
You may be interested to know that Vue's templates actually compile to render functions. This is an implementation detail you usually don't need to know about, but if you'd like to see how specific template features are compiled, you may find it interesting. Below is a little demo using `Vue.compile` to live-compile a template string:
diff --git a/src/guide/routing.md b/src/guide/routing.md
index 6c1b0bec..0bca2d5b 100644
--- a/src/guide/routing.md
+++ b/src/guide/routing.md
@@ -2,13 +2,15 @@
## Official Router
-For most Single Page Applications, it's recommended to use the officially-supported [vue-router library](https://github.com/vuejs/vue-router). For more details, see vue-router's [documentation](https://router.vuejs.org/).
+For most Single Page Applications, it's recommended to use the officially-supported [vue-router library](https://github.com/vuejs/vue-router-next). For more details, see vue-router's [documentation](https://next.router.vuejs.org/).
## Simple Routing from Scratch
If you only need very simple routing and do not wish to involve a full-featured router library, you can do so by dynamically rendering a page-level component like this:
```js
+const { createApp, h } = Vue
+
const NotFoundComponent = { template: '<p>Page not found</p>' }
const HomeComponent = { template: '<p>Home page</p>' }
const AboutComponent = { template: '<p>About page</p>' }
@@ -30,11 +32,11 @@ const SimpleRouter = {
},
render() {
- return Vue.h(this.CurrentComponent)
+ return h(this.CurrentComponent)
}
}
-Vue.createApp(SimpleRouter).mount('#app')
+createApp(SimpleRouter).mount('#app')
```
Combined with the [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API), you can build a very basic but fully-functional client-side router. To see that in practice, check out [this example app](https://github.com/phanan/vue-3.0-simple-routing-example).
diff --git a/src/guide/single-file-component.md b/src/guide/single-file-component.md
index 28a65d8f..df5927be 100644
--- a/src/guide/single-file-component.md
+++ b/src/guide/single-file-component.md
@@ -35,7 +35,7 @@ One important thing to note is that **separation of concerns is not equal to sep
Even if you don't like the idea of Single-File Components, you can still leverage its hot-reloading and pre-compilation features by separating your JavaScript and CSS into separate files:
-``` html
+```html
<!-- my-component.vue -->
<template>
<div>This will be pre-compiled</div>
@@ -54,7 +54,7 @@ If you want to dive right in and start playing with single-file components, chec
With `.vue` components, we're entering the realm of advanced JavaScript applications. That means learning to use a few additional tools if you haven't already:
-- **Node Package Manager (NPM)**: Read the [Getting Started guide](https://docs.npmjs.com/packages-and-modules/getting-packages-from-the-registry) section about how to get packages from the registry.
+- **Node Package Manager (npm)**: Read the [Getting Started guide](https://docs.npmjs.com/packages-and-modules/getting-packages-from-the-registry) section about how to get packages from the registry.
- **Modern JavaScript with ES2015/16**: Read through Babel's [Learn ES2015 guide](https://babeljs.io/docs/en/learn). You don't have to memorize every feature right now, but keep this page as a reference you can come back to.
@@ -65,3 +65,110 @@ After you've taken a day to dive into these resources, we recommend checking out
The CLI takes care of most of the tooling configurations for you, but also allows fine-grained customization through its own [config options](https://cli.vuejs.org/config/).
In case you prefer setting up your own build setup from scratch, you will need to manually configure webpack with [vue-loader](https://vue-loader.vuejs.org). To learn more about webpack itself, check out [their official docs](https://webpack.js.org/configuration/) and [webpack learning academy](https://webpack.academy/p/the-core-concepts).
+
+### Building with rollup
+
+Most of the time when developing a third-party library we want to build it in a way that allows the consumers of the library to [tree shake](https://webpack.js.org/guides/tree-shaking/) it. To enable tree-shaking we need to build `esm` modules. Since webpack and, in turn, vue-cli do not support building `esm` modules we need to rely on [rollup](https://rollupjs.org/).
+
+#### Installing Rollup
+
+We will need to install Rollup and a few dependencies:
+
+```bash
+npm install --save-dev rollup @rollup/plugin-commonjs rollup-plugin-vue
+```
+
+These are the minimal amount of rollup plugins that we need to use to compile the code in an `esm` module. We may want to also add [rollup-plugin-babel](https://github.com/rollup/plugins/tree/master/packages/babel) to transpile their code and [node-resolve](https://github.com/rollup/plugins/tree/master/packages/node-resolve) if we use dependencies that we want to bundle with our library.
+
+#### Configuring Rollup
+
+To configure our build with Rollup we will need to create a `rollup.config.js` file in the root of our project:
+
+```bash
+touch rollup.config.js
+```
+
+Once the file is created we will need to open it with our editor of choice and add the following code.
+
+```js
+// import our third party plugins
+import commonjs from 'rollup-plugin-commonjs'
+import VuePlugin from 'rollup-plugin-vue'
+import pkg from './package.json' // import our package.json file to re-use the naming
+
+export default {
+ // this is the file containing all our exported components/functions
+ input: 'src/index.js',
+ // this is an array of outputted formats
+ output: [
+ {
+ file: pkg.module, // the name of our esm library
+ format: 'esm', // the format of choice
+ sourcemap: true, // ask rollup to include sourcemaps
+ }
+ ],
+ // this is an array of the plugins that we are including
+ plugins: [
+ commonjs(),
+ VuePlugin()
+ ],
+ // ask rollup to not bundle Vue in the library
+ external: ['vue']
+}
+```
+
+#### Configuring package.json
+
+To take advantage of our newly created `esm` module we need to add a few fields in our `package.json` file:
+
+```json
+ "scripts": {
+ ...
+ "build": "rollup -c rollup.config.js",
+ ...
+ },
+ "module": "dist/my-library-name.esm.js",
+ "files": [
+ "dist/",
+ ],
+ ```
+
+Here we are specifying:
+
+- how to build our package
+- what files we want to bundle in our package
+- what file represents our `esm` module
+
+#### Bundling `umd` and `cjs` modules
+
+To also build `umd` and `cjs` modules we can simply add a few lines of configuration to our `rollup.config.js` and `package.json`
+
+##### rollup.config.js
+
+```js
+output: [
+ ...
+ {
+ file: pkg.main,
+ format: 'cjs',
+ sourcemap: true,
+ },
+ {
+ file: pkg.unpkg,
+ format: 'umd',
+ name: 'MyLibraryName',
+ sourcemap: true,
+ globals: {
+ vue: 'Vue',
+ },
+ },
+]
+```
+
+##### package.json
+
+```json
+"module": "dist/my-library-name.esm.js",
+"main": "dist/my-library-name.cjs.js",
+"unpkg": "dist/my-library-name.global.js",
+```
diff --git a/src/guide/ssr.md b/src/guide/ssr.md
index 5f8235f5..aadb1014 100644
--- a/src/guide/ssr.md
+++ b/src/guide/ssr.md
@@ -2,7 +2,7 @@
## The Complete SSR Guide
-We have created a standalone guide for creating server-rendered Vue applications. This is a very in-depth guide for those who are already familiar with client-side Vue development, server-side Node.js development and webpack. Check it out at [ssr.vuejs.org](https://ssr.vuejs.org/).
+We have created a standalone guide for creating server-rendered Vue applications. This is a very in-depth guide for those who are already familiar with client-side Vue development, server-side Node.js development and webpack. Check it out [here](/guide/ssr/introduction.html).
## Nuxt.js
@@ -11,3 +11,13 @@ Properly configuring all the discussed aspects of a production-ready server-rend
## Quasar Framework SSR + PWA
[Quasar Framework](https://quasar.dev) will generate an SSR app (with optional PWA handoff) that leverages its best-in-class build system, sensible configuration and developer extensibility to make designing and building your idea a breeze. With over one hundred specific "Material Design 2.0"-compliant components, you can decide which ones to execute on the server, which are available in the browser, and even manage the `<meta>` tags of your site. Quasar is a node.js and webpack based development environment that supercharges and streamlines rapid development of SPA, PWA, SSR, Electron, Capacitor and Cordova apps—all from one codebase.
+
+## Vite SSR
+
+[Vite](https://vitejs.dev/) is a new breed of frontend build tool that significantly improves the frontend development experience. It consists of two major parts:
+
+- A dev server that serves your source files over native ES modules, with rich built-in features and astonishingly fast Hot Module Replacement (HMR).
+
+- A build command that bundles your code with [Rollup](https://rollupjs.org/), pre-configured to output highly optimized static assets for production.
+
+Vite also provides built-in [support for server-side rendering](https://vitejs.dev/guide/ssr.html). You can find an example project with Vue [here](https://github.com/vitejs/vite/tree/main/packages/playground/ssr-vue)
diff --git a/src/guide/ssr/build-config.md b/src/guide/ssr/build-config.md
new file mode 100644
index 00000000..34360942
--- /dev/null
+++ b/src/guide/ssr/build-config.md
@@ -0,0 +1,106 @@
+# Build Configuration
+
+The webpack config for an SSR project will be similar to a client-only project. If you're not familiar with configuring webpack, you can find more information in the documentation for [Vue CLI](https://cli.vuejs.org/guide/webpack.html#working-with-webpack) or [configuring Vue Loader manually](https://vue-loader.vuejs.org/guide/#manual-setup).
+
+## Key Differences with Client-Only Builds
+
+1. We need to create a [webpack manifest](https://webpack.js.org/concepts/manifest/) for our server-side code. This is a JSON file that webpack keeps to track how all the modules map to the output bundles.
+
+2. We should [externalize application dependencies](https://webpack.js.org/configuration/externals/). This makes the server build much faster and generates a smaller bundle file. When doing this, we have to exclude dependencies that need to be processed by webpack (like `.css`. or `.vue` files).
+
+3. We need to change webpack [target](https://webpack.js.org/concepts/targets/) to Node.js. This allows webpack to handle dynamic imports in a Node-appropriate fashion, and also tells `vue-loader` to emit server-oriented code when compiling Vue components.
+
+4. When building a server entry, we would need to define an environment variable to indicate we are working with SSR. It might be helpful to add a few `scripts` to the project's `package.json`:
+
+```json
+"scripts": {
+ "build:client": "vue-cli-service build --dest dist/client",
+ "build:server": "SSR=1 vue-cli-service build --dest dist/server",
+ "build": "npm run build:client && npm run build:server",
+}
+```
+
+## Example Configuration
+
+Below is a sample `vue.config.js` that adds SSR rendering to a Vue CLI project, but it can be adapted for any webpack build.
+
+```js
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin')
+const nodeExternals = require('webpack-node-externals')
+const webpack = require('webpack')
+
+module.exports = {
+ chainWebpack: webpackConfig => {
+ // We need to disable cache loader, otherwise the client build
+ // will used cached components from the server build
+ webpackConfig.module.rule('vue').uses.delete('cache-loader')
+ webpackConfig.module.rule('js').uses.delete('cache-loader')
+ webpackConfig.module.rule('ts').uses.delete('cache-loader')
+ webpackConfig.module.rule('tsx').uses.delete('cache-loader')
+
+ if (!process.env.SSR) {
+ // Point entry to your app's client entry file
+ webpackConfig
+ .entry('app')
+ .clear()
+ .add('./src/entry-client.js')
+ return
+ }
+
+ // Point entry to your app's server entry file
+ webpackConfig
+ .entry('app')
+ .clear()
+ .add('./src/entry-server.js')
+
+ // This allows webpack to handle dynamic imports in a Node-appropriate
+ // fashion, and also tells `vue-loader` to emit server-oriented code when
+ // compiling Vue components.
+ webpackConfig.target('node')
+ // This tells the server bundle to use Node-style exports
+ webpackConfig.output.libraryTarget('commonjs2')
+
+ webpackConfig
+ .plugin('manifest')
+ .use(new WebpackManifestPlugin({ fileName: 'ssr-manifest.json' }))
+
+ // https://webpack.js.org/configuration/externals/#function
+ // https://github.com/liady/webpack-node-externals
+ // Externalize app dependencies. This makes the server build much faster
+ // and generates a smaller bundle file.
+
+ // Do not externalize dependencies that need to be processed by webpack.
+ // You should also whitelist deps that modify `global` (e.g. polyfills)
+ webpackConfig.externals(nodeExternals({ allowlist: /\.(css|vue)$/ }))
+
+ webpackConfig.optimization.splitChunks(false).minimize(false)
+
+ webpackConfig.plugins.delete('preload')
+ webpackConfig.plugins.delete('prefetch')
+ webpackConfig.plugins.delete('progress')
+ webpackConfig.plugins.delete('friendly-errors')
+
+ webpackConfig.plugin('limit').use(
+ new webpack.optimize.LimitChunkCountPlugin({
+ maxChunks: 1
+ })
+ )
+ }
+}
+```
+
+## Externals Caveats
+
+Notice that in the `externals` option we are whitelisting CSS files. This is because CSS imported from dependencies should still be handled by webpack. If you are importing any other types of files that also rely on webpack (e.g. `*.vue`, `*.sass`), you should add them to the whitelist as well.
+
+If you are using `runInNewContext: 'once'` or `runInNewContext: true`, then you also need to whitelist polyfills that modify `global`, e.g. `babel-polyfill`. This is because when using the new context mode, **code inside a server bundle has its own `global` object.** Since you don't really need it on the server, it's actually easier to just import it in the client entry.
+
+## Generating `clientManifest`
+
+In addition to the server bundle, we can also generate a client build manifest. With the client manifest and the server bundle, the renderer now has information of both the server _and_ client builds. This way it can automatically infer and inject [preload / prefetch directives](https://css-tricks.com/prefetching-preloading-prebrowsing/), `<link>` and `<script>` tags into the rendered HTML.
+
+The benefits are two-fold:
+
+1. It can replace `html-webpack-plugin` for injecting the correct asset URLs when there are hashes in your generated filenames.
+
+2. When rendering a bundle that leverages webpack's on-demand code splitting features, we can ensure the optimal chunks are preloaded / prefetched, and also intelligently inject `<script>` tags for needed async chunks to avoid waterfall requests on the client, thus improving TTI (time-to-interactive).
diff --git a/src/guide/ssr/getting-started.md b/src/guide/ssr/getting-started.md
new file mode 100644
index 00000000..6533105c
--- /dev/null
+++ b/src/guide/ssr/getting-started.md
@@ -0,0 +1,99 @@
+# Getting Started
+
+> This guide is currently under active development
+
+## Installation
+
+In order to create a server-side rendered application, we need to install the `@vue/server-renderer` package:
+
+```bash
+npm install @vue/server-renderer
+## OR
+yarn add @vue/server-renderer
+```
+
+#### Notes
+
+- It's recommended to use Node.js version 12+.
+- `@vue/server-renderer` and `vue` must have matching versions.
+- `@vue/server-renderer` relies on some Node.js native modules and therefore can only be used in Node.js. We may provide a simpler build that can be run in other JavaScript runtimes in the future.
+
+## Rendering a Vue Application
+
+Unlike a client-only Vue application, which is created using `createApp`, an SSR application needs to be created using `createSSRApp`:
+
+```js
+const { createSSRApp } = require('vue')
+
+const app = createSSRApp({
+ data() {
+ return {
+ user: 'John Doe'
+ }
+ },
+ template: `<div>Current user is: {{ user }}</div>`
+})
+```
+
+Now, we can use the `renderToString` function to render our application instance to a string. This function returns a Promise which resolves to the rendered HTML.
+
+```js{2,13}
+const { createSSRApp } = require('vue')
+const { renderToString } = require('@vue/server-renderer')
+
+const app = createSSRApp({
+ data() {
+ return {
+ user: 'John Doe'
+ }
+ },
+ template: `<div>Current user is: {{ user }}</div>`
+})
+
+const appContent = await renderToString(app)
+```
+
+## Integrating with a Server
+
+To run an application, in this example we will use [Express](https://expressjs.com/):
+
+```bash
+npm install express
+## OR
+yarn add express
+```
+
+```js
+// server.js
+
+const { createSSRApp } = require('vue')
+const { renderToString } = require('@vue/server-renderer')
+const server = require('express')()
+
+server.get('*', async (req, res) => {
+ const app = createSSRApp({
+ data() {
+ return {
+ user: 'John Doe'
+ }
+ },
+ template: `<div>Current user is: {{ user }}</div>`
+ })
+
+ const appContent = await renderToString(app)
+ const html = `
+ <html>
+ <body>
+ <h1>My First Heading</h1>
+ <div id="app">${appContent}</div>
+ </body>
+ </html>
+ `
+
+ res.end(html)
+})
+
+server.listen(8080)
+```
+
+Now, when running this Node.js script, we can see a static HTML page on `localhost:8080`. However, this code is not _hydrated_: Vue hasn't yet taken over the static HTML sent by the server to turn it into dynamic DOM that can react to client-side data changes. This will be covered in the [Client Side Hydration](hydration.html) section.
diff --git a/src/guide/ssr/hydration.md b/src/guide/ssr/hydration.md
new file mode 100644
index 00000000..7bbf11d6
--- /dev/null
+++ b/src/guide/ssr/hydration.md
@@ -0,0 +1,33 @@
+# Client Side Hydration
+
+Hydration refers to the client-side process during which Vue takes over the static HTML sent by the server and turns it into dynamic DOM that can react to client-side data changes.
+
+In `entry-client.js`, we are simply mounting the app with this line:
+
+```js
+app.mount('#app')
+```
+
+Since the server has already rendered the markup, we obviously do not want to throw that away and re-create all the DOM elements. Instead, we want to "hydrate" the static markup and make it interactive.
+
+Vue provides a `createSSRApp` method for use in client-side code (in this case, in our `entry-client.js`) to tell Vue to hydrate the existing static HTML instead of re-creating all the DOM elements.
+
+### Hydration Caveats
+
+Vue will assert the client-side generated virtual DOM tree matches the DOM structure rendered from the server. If there is a mismatch, it will bail hydration, discard existing DOM and render from scratch. There will be a warning in the browser console but your site will still work.
+
+The first key way to ensure that SSR is working to ensuring your application state is the same on client and server. Take special care not to depend on APIs specific to the browser (like window width, device capability or localStorage) or server (such as Node built-ins), and take care where the same code will give different results when run in different places (such as when using timezones, timestamps, normalizing URLs or generating random numbers). See [Writing Universal Code](./universal.md) for more details.
+
+A second key thing to be aware of when using SSR + client hydration is that invalid HTML may be altered by the browser. For example, when you write this in a Vue template:
+
+```html
+<table>
+ <tr>
+ <td>hi</td>
+ </tr>
+</table>
+```
+
+The browser will automatically inject `<tbody>` inside `<table>`, however, the virtual DOM generated by Vue does not contain `<tbody>`, so it will cause a mismatch. To ensure correct matching, make sure to write valid HTML in your templates.
+
+You might consider using a HTML validator like [the W3C Markup Validation Service](https://validator.w3.org/) or [HTML-validate](https://html-validate.org/) to check your templates in development.
diff --git a/src/guide/ssr/introduction.md b/src/guide/ssr/introduction.md
new file mode 100644
index 00000000..86a50a41
--- /dev/null
+++ b/src/guide/ssr/introduction.md
@@ -0,0 +1,47 @@
+# Server-Side Rendering Guide
+
+> This guide is currently under active development
+
+## What is Server-Side Rendering (SSR)?
+
+Vue.js is a framework for building client-side applications. By default, Vue components produce and manipulate DOM in the browser as output. However, it is also possible to render the same components into HTML strings on the server, send them directly to the browser, and finally "hydrate" the static markup into a fully interactive application on the client.
+
+A server-rendered Vue.js application can also be considered "isomorphic" or "universal". This means that the majority of your app's code runs on both the server **and** the client.
+
+## Why SSR?
+
+Compared to a traditional SPA (Single-Page Application), the advantage of SSR primarily lies in:
+
+- Better search engine optimization (SEO), as the search engine crawlers will directly see the fully rendered page.
+
+ Note that as of now, Google and Bing can index synchronous JavaScript applications just fine. Synchronous being the key word there. If your app starts with a loading spinner, then fetches content via API call, the crawler will not wait for you to finish. This means if you have content fetched asynchronously on pages where SEO is important, SSR might be necessary.
+
+- Faster time-to-content, especially on the slow Internet connection or slow devices. Server-rendered markup doesn't need to wait until all JavaScript has been downloaded and executed to be displayed, so your user will see a fully-rendered page sooner. This generally results in better user experience, and can be critical for applications where time-to-content is directly associated with the conversion rate.
+
+There are also some trade-offs to consider when using SSR:
+
+- Development constraints. Browser-specific code can only be used inside certain lifecycle hooks; some external libraries may need special treatment to be able to run in a server-rendered app.
+
+- More involved build setup and deployment requirements. Unlike a fully static SPA that can be deployed on any static file server, a server-rendered app requires an environment where a Node.js server can run.
+
+- More server-side load. Rendering a full app in Node.js is going to be more CPU-intensive than just serving static files, so if you expect high traffic, be prepared for corresponding server load and wisely employ caching strategies.
+
+Before using SSR for your application, the first question you should ask is whether you actually need it. It mostly depends on how important time-to-content is for your application. For example, if you are building an internal dashboard where an extra few hundred milliseconds on the initial load doesn't matter that much, SSR would be overkill. However, in cases where time-to-content is absolutely critical, SSR can help you achieve the best possible initial load performance.
+
+## SSR vs Prerendering
+
+If you're only investigating SSR to improve the SEO of a handful of marketing pages (e.g. `/`, `/about`, `/contact`, etc), then you probably want **prerendering** instead. Rather than using a web server to compile HTML on-the-fly, prerendering generates static HTML files for specific routes at build time. The advantage is setting up prerendering is much simpler and allows you to keep your frontend as a fully static site.
+
+If you're using [webpack](https://webpack.js.org/), you can add prerendering with the [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin). It's been extensively tested with Vue apps.
+
+## About This Guide
+
+[//]: # 'TODO: This guide is focused on server-rendered Single-Page Applications using Node.js as the server. Mixing Vue SSR with other backend setups is a topic of its own and briefly discussed in a [dedicated section].'
+
+This guide will be very in-depth and assumes you are already familiar with Vue.js itself, and have a decent working knowledge of Node.js and webpack.
+
+[//]: # 'If you prefer a higher-level solution that provides a smooth out-of-the-box experience, you should probably give [Nuxt.js](https://nuxtjs.org/) a try. It's built upon the same Vue stack but abstracts away a lot of the boilerplate, and provides some extra features such as static site generation. However, it may not suit your use case if you need more direct control of your app's structure. Regardless, it would still be beneficial to read through this guide to understand better how things work together.'
+
+[//]: # 'TODO: As you read along, it would be helpful to refer to the official [HackerNews Demo](https://github.com/vuejs/vue-hackernews-2.0/), which makes use of most of the techniques covered in this guide'
+
+Finally, note that the solutions in this guide are not definitive - we've found them to be working well for us, but that doesn't mean they cannot be improved. They might get revised in the future - and feel free to contribute by submitting pull requests!
diff --git a/src/guide/ssr/routing.md b/src/guide/ssr/routing.md
new file mode 100644
index 00000000..28c897b8
--- /dev/null
+++ b/src/guide/ssr/routing.md
@@ -0,0 +1,121 @@
+# Routing and Code-Splitting
+
+## Routing with `vue-router`
+
+You may have noticed that our server code uses a `*` handler which accepts arbitrary URLs. This allows us to pass the visited URL into our Vue app, and reuse the same routing config for both client and server!
+
+It is recommended to use the official [vue-router](https://github.com/vuejs/vue-router-next) library for this purpose. Let's first create a file where we create the router. Note that similar to application instance, we also need a fresh router instance for each request, so the file exports a `createRouter` function:
+
+```js
+// router.js
+import { createRouter, createMemoryHistory, createWebHistory } from 'vue-router'
+import MyUser from './components/MyUser.vue'
+
+const isServer = typeof window === 'undefined'
+
+const history = isServer ? createMemoryHistory() : createWebHistory()
+
+const routes = [{ path: '/user', component: MyUser }]
+
+export default function() {
+ return createRouter({ routes, history })
+}
+```
+
+And update our `app.js`, client and server entries:
+
+```js
+// app.js
+import { createSSRApp } from 'vue'
+import App from './App.vue'
+import createRouter from './router'
+
+export default function(args) {
+ const app = createSSRApp(App)
+ const router = createRouter()
+
+ app.use(router)
+
+ return {
+ app,
+ router
+ }
+}
+```
+
+```js
+// entry-client.js
+const { app, router } = createApp({
+ /*...*/
+})
+```
+
+```js
+// entry-server.js
+const { app, router } = createApp({
+ /*...*/
+})
+```
+
+## Code-Splitting
+
+Code-splitting, or lazy-loading part of your app, helps reduce the size of assets that need to be downloaded by the browser for the initial render, and can greatly improve TTI (time-to-interactive) for apps with large bundles. The key is "loading just what is needed" for the initial screen.
+
+Vue Router provides [lazy-loading support](https://next.router.vuejs.org/guide/advanced/lazy-loading.html), allowing [webpack to code-split at that point](https://webpack.js.org/guides/code-splitting-async/). All you need to do is:
+
+```js
+// change this...
+import MyUser from './components/MyUser.vue'
+const routes = [{ path: '/user', component: MyUser }]
+
+// to this:
+const routes = [
+ { path: '/user', component: () => import('./components/MyUser.vue') }
+]
+```
+
+On both client and server we need to wait for router to resolve async route components ahead of time in order to properly invoke in-component hooks. For this we will be using [router.isReady](https://next.router.vuejs.org/api/#isready) method Let's update our client entry:
+
+```js
+// entry-client.js
+import createApp from './app'
+
+const { app, router } = createApp({
+ /* ... */
+})
+
+router.isReady().then(() => {
+ app.mount('#app')
+})
+```
+
+We also need to update our `server.js` script:
+
+```js
+// server.js
+const path = require('path')
+
+const appPath = path.join(__dirname, './dist', 'server', manifest['app.js'])
+const createApp = require(appPath).default
+
+server.get('*', async (req, res) => {
+ const { app, router } = createApp()
+
+ router.push(req.url)
+ await router.isReady()
+
+ const appContent = await renderToString(app)
+
+ fs.readFile(path.join(__dirname, '/dist/client/index.html'), (err, html) => {
+ if (err) {
+ throw err
+ }
+
+ html = html
+ .toString()
+ .replace('<div id="app">', `<div id="app">${appContent}`)
+ res.setHeader('Content-Type', 'text/html')
+ res.send(html)
+ })
+})
+```
diff --git a/src/guide/ssr/server.md b/src/guide/ssr/server.md
new file mode 100644
index 00000000..0a8b304c
--- /dev/null
+++ b/src/guide/ssr/server.md
@@ -0,0 +1,101 @@
+# Server Configuration
+
+The [code structure](./structure.html) and [webpack configuration](./build-config.html) we've described also require some changes to our Express server code.
+
+- we need to create an application with a built `app.js` from the resulting bundle. A path to it can be found using the webpack manifest:
+
+ ```js
+ // server.js
+ const path = require('path')
+ const manifest = require('./dist/server/ssr-manifest.json')
+
+ const appPath = path.join(__dirname, './dist', 'server', manifest['app.js'])
+ const createApp = require(appPath).default
+ ```
+
+- we have to define correct paths to all the assets:
+
+ ```js
+ // server.js
+ server.use(
+ '/img',
+ express.static(path.join(__dirname, './dist/client', 'img'))
+ )
+ server.use('/js', express.static(path.join(__dirname, './dist/client', 'js')))
+ server.use(
+ '/css',
+ express.static(path.join(__dirname, './dist/client', 'css'))
+ )
+ server.use(
+ '/favicon.ico',
+ express.static(path.join(__dirname, './dist/client', 'favicon.ico'))
+ )
+ ```
+
+- we need to replace the `index.html` content with our server-side rendered application content:
+
+ ```js
+ // server.js
+ const indexTemplate = fs.readFileSync(
+ path.join(__dirname, '/dist/client/index.html'),
+ 'utf-8'
+ )
+
+ server.get('*', async (req, res) => {
+ const { app } = createApp()
+
+ const appContent = await renderToString(app)
+
+ const html = indexTemplate
+ .toString()
+ .replace('<div id="app">', `<div id="app">${appContent}`)
+
+ res.setHeader('Content-Type', 'text/html')
+ res.send(html)
+ })
+ ```
+
+Below you can find a full code for our Express server:
+
+```js
+const path = require('path')
+const express = require('express')
+const fs = require('fs')
+const { renderToString } = require('@vue/server-renderer')
+const manifest = require('./dist/server/ssr-manifest.json')
+
+const server = express()
+
+const appPath = path.join(__dirname, './dist', 'server', manifest['app.js'])
+const createApp = require(appPath).default
+
+server.use('/img', express.static(path.join(__dirname, './dist/client', 'img')))
+server.use('/js', express.static(path.join(__dirname, './dist/client', 'js')))
+server.use('/css', express.static(path.join(__dirname, './dist/client', 'css')))
+server.use(
+ '/favicon.ico',
+ express.static(path.join(__dirname, './dist/client', 'favicon.ico'))
+)
+
+server.get('*', async (req, res) => {
+ const { app } = await createApp()
+
+ const appContent = await renderToString(app)
+
+ fs.readFile(path.join(__dirname, '/dist/client/index.html'), (err, html) => {
+ if (err) {
+ throw err
+ }
+
+ html = html
+ .toString()
+ .replace('<div id="app">', `<div id="app">${appContent}`)
+ res.setHeader('Content-Type', 'text/html')
+ res.send(html)
+ })
+})
+
+console.log('You can navigate to http://localhost:8080')
+
+server.listen(8080)
+```
diff --git a/src/guide/ssr/structure.md b/src/guide/ssr/structure.md
new file mode 100644
index 00000000..1fe86d67
--- /dev/null
+++ b/src/guide/ssr/structure.md
@@ -0,0 +1,136 @@
+# Source Code Structure
+
+## Avoid Stateful Singletons
+
+When writing client-only code, we can assume that our code will be evaluated in a fresh context every time. However, a Node.js server is a long-running process. When our code is first imported by the process, it will be evaluated once and then stay in memory. This means that if you create a singleton object, it will be shared between every incoming request, with the risk of cross-request state pollution.
+
+Therefore, we need to **create a new root Vue instance for each request.** In order to do that, we need to write a factory function that can be repeatedly executed to create fresh app instances for each request:
+
+```js
+// app.js
+const { createSSRApp } = require('vue')
+
+function createApp() {
+ return createSSRApp({
+ data() {
+ return {
+ user: 'John Doe'
+ }
+ },
+ template: `<div>Current user is: {{ user }}</div>`
+ })
+}
+```
+
+And our server code now becomes:
+
+```js
+// server.js
+const { renderToString } = require('@vue/server-renderer')
+const server = require('express')()
+const { createApp } = require('src/app.js')
+
+server.get('*', async (req, res) => {
+ const app = createApp()
+
+ const appContent = await renderToString(app)
+ const html = `
+ <html>
+ <body>
+ <h1>My First Heading</h1>
+ <div id="app">${appContent}</div>
+ </body>
+ </html>
+ `
+
+ res.end(html)
+})
+
+server.listen(8080)
+```
+
+The same rule applies to other instances as well (such as the router or store). Instead of exporting the router or store directly from a module and importing it across your app, you should create a fresh instance in `createApp` and inject it from the root Vue instance.
+
+## Introducing a Build Step
+
+So far, we haven't discussed how to deliver the same Vue app to the client yet. To do that, we need to use webpack to bundle our Vue app.
+
+- We need to process the server code with webpack. For example, `.vue` files need to be processed with `vue-loader`, and many webpack-specific features such as importing files via `file-loader` or importing CSS via `css-loader` do not work directly in Node.js.
+
+- Similarly, we need a separate client-side build because although the latest version of Node.js fully supports ES2015 features, older browsers will require the code to be transpiled.
+
+So the basic idea is that we will use webpack to bundle our app for both client and server. The server bundle will be required on the server and used to render static HTML, while the client bundle will be sent to the browser to hydrate the static markup.
+
+
+
+We will discuss the details of the setup in later sections - for now, let's just assume we've got the build setup figured out and we can write our Vue app code with webpack enabled.
+
+## Code Structure with webpack
+
+Now that we are using webpack to process the app for both server and client, the majority of our source code can be written in a universal fashion, with access to all the webpack-powered features. At the same time, there are a number of things you should keep in mind when [writing universal code](./universal.html).
+
+A simple project would look like this:
+
+```bash
+src
+├── components
+│ ├── MyUser.vue
+│ └── MyTable.vue
+├── App.vue
+├── app.js # universal entry
+├── entry-client.js # runs in browser only
+└── entry-server.js # runs on server only
+```
+
+### `app.js`
+
+`app.js` is the universal entry to our app. In a client-only app, we would create the Vue application instance right in this file and mount directly to DOM. However, for SSR that responsibility is moved into the client-only entry file. `app.js` instead creates an application instance and exports it:
+
+```js
+import { createSSRApp } from 'vue'
+import App from './App.vue'
+
+// export a factory function for creating a root component
+export default function(args) {
+ const app = createSSRApp(App)
+
+ return {
+ app
+ }
+}
+```
+
+### `entry-client.js`
+
+The client entry creates the application using the root component factory and mounts it to the DOM:
+
+```js
+import createApp from './app'
+
+// client-specific bootstrapping logic...
+
+const { app } = createApp({
+ // here we can pass additional arguments to app factory
+})
+
+// this assumes App.vue template root element has `id="app"`
+app.mount('#app')
+```
+
+### `entry-server.js`
+
+The server entry uses a default export which is a function that can be called repeatedly for each render. At this moment, it doesn't do much other than returning the app instance - but later we will perform server-side route matching and data pre-fetching logic here.
+
+```js
+import createApp from './app'
+
+export default function() {
+ const { app } = createApp({
+ /*...*/
+ })
+
+ return {
+ app
+ }
+}
+```
diff --git a/src/guide/ssr/universal.md b/src/guide/ssr/universal.md
new file mode 100644
index 00000000..3aa55270
--- /dev/null
+++ b/src/guide/ssr/universal.md
@@ -0,0 +1,29 @@
+# Writing Universal Code
+
+Before going further, let's take a moment to discuss the constraints when writing "universal" code - that is, code that runs on both the server and the client. Due to use case and platform API differences, the behavior of our code will not be exactly the same when running in different environments. Here we will go over the key things you need to be aware of.
+
+## Data Reactivity on the Server
+
+In a client-only app, every user will be using a fresh instance of the app in their browser. For server-side rendering we want the same: each request should have a fresh, isolated app instance so that there is no cross-request state pollution.
+
+Because the actual rendering process needs to be deterministic, we will also be "pre-fetching" data on the server - this means our application state will be already resolved when we start rendering. This means data reactivity is unnecessary on the server, so it is disabled by default. Disabling data reactivity also avoids the performance cost of converting data into reactive objects.
+
+## Component Lifecycle Hooks
+
+Since there are no dynamic updates, the only [lifecycle hooks](/guide/instance.html#lifecycle-hooks) that will be called during SSR are `beforeCreate` and `created`. This means any code inside other lifecycle hooks such as `beforeMount` or `mounted` will only be executed on the client.
+
+Another thing to note is that you should avoid code that produces global side effects in `beforeCreate` and `created`, for example setting up timers with `setInterval`. In client-side only code we may setup a timer and then tear it down in `beforeUnmount` or `unmounted`. However, because the destroy hooks will not be called during SSR, the timers will stay around forever. To avoid this, move your side-effect code into `beforeMount` or `mounted` instead.
+
+## Access to Platform-Specific APIs
+
+Universal code cannot assume access to platform-specific APIs, so if your code directly uses browser-only globals like `window` or `document`, they will throw errors when executed in Node.js, and vice-versa.
+
+For tasks shared between server and client but using different platform APIs, it's recommended to wrap the platform-specific implementations inside a universal API, or use libraries that do this for you. For example, [axios](https://github.com/axios/axios) is an HTTP client that exposes the same API for both server and client.
+
+For browser-only APIs, the common approach is to lazily access them inside client-only lifecycle hooks.
+
+Note that if a 3rd party library is not written with universal usage in mind, it could be tricky to integrate it into an server-rendered app. You _might_ be able to get it working by mocking some of the globals, but it would be hacky and may interfere with the environment detection code of other libraries.
+
+## Custom Directives
+
+Most [custom directives](/guide/custom-directive.html#custom-directives) directly manipulate the DOM, which will cause errors during SSR. We recommend to prefer using components as the abstraction mechanism instead of directives.
diff --git a/src/guide/state-management.md b/src/guide/state-management.md
index 35fc5be1..366df48c 100644
--- a/src/guide/state-management.md
+++ b/src/guide/state-management.md
@@ -2,7 +2,7 @@
## Official Flux-Like Implementation
-Large applications can often grow in complexity, due to multiple pieces of state scattered across many components and the interactions between them. To solve this problem, Vue offers [vuex](https://github.com/vuejs/vuex), our own Elm-inspired state management library. It even integrates into [vue-devtools](https://github.com/vuejs/vue-devtools), providing zero-setup access to [time travel debugging](https://raw.githubusercontent.com/vuejs/vue-devtools/master/media/demo.gif).
+Large applications can often grow in complexity, due to multiple pieces of state scattered across many components and the interactions between them. To solve this problem, Vue offers [Vuex](https://next.vuex.vuejs.org/), our own Elm-inspired state management library. It even integrates into [vue-devtools](https://github.com/vuejs/vue-devtools), providing zero-setup access to [time travel debugging](https://raw.githubusercontent.com/vuejs/vue-devtools/master/media/demo.gif).
### Information for React Developers
@@ -13,17 +13,19 @@ If you're coming from React, you may be wondering how vuex compares to [redux](h
It is often overlooked that the source of truth in Vue applications is the reactive `data` object - a component instance only proxies access to it. Therefore, if you have a piece of state that should be shared by multiple instances, you can use a [reactive](/guide/reactivity-fundamentals.html#declaring-reactive-state) method to make an object reactive:
```js
-const sourceOfTruth = Vue.reactive({
+const { createApp, reactive } = Vue
+
+const sourceOfTruth = reactive({
message: 'Hello'
})
-const appA = Vue.createApp({
+const appA = createApp({
data() {
return sourceOfTruth
}
}).mount('#app-a')
-const appB = Vue.createApp({
+const appB = createApp({
data() {
return sourceOfTruth
}
@@ -39,7 +41,7 @@ const appB = Vue.createApp({
Now whenever `sourceOfTruth` is mutated, both `appA` and `appB` will update their views automatically. We have a single source of truth now, but debugging would be a nightmare. Any piece of data could be changed by any part of our app at any time, without leaving a trace.
```js
-const appB = Vue.createApp({
+const appB = createApp({
data() {
return sourceOfTruth
},
@@ -55,7 +57,7 @@ To help solve this problem, we can adopt a **store pattern**:
const store = {
debug: true,
- state: Vue.reactive({
+ state: reactive({
message: 'Hello!'
}),
@@ -88,7 +90,7 @@ In addition, each instance/component can still own and manage its own private st
```
```js
-const appA = Vue.createApp({
+const appA = createApp({
data() {
return {
privateState: {},
@@ -100,7 +102,7 @@ const appA = Vue.createApp({
}
}).mount('#app-a')
-const appB = Vue.createApp({
+const appB = createApp({
data() {
return {
privateState: {},
@@ -116,6 +118,6 @@ const appB = Vue.createApp({
You should never replace the original state object in your actions - the components and the store need to share reference to the same object in order for mutations to be observed.
:::
-As we continue developing the convention where components are never allowed to directly mutate state that belongs to a store, but should instead dispatch events that notify the store to perform actions, we eventually arrive at the [Flux](https://facebook.github.io/flux/) architecture. The benefit of this convention is we can record all state mutations happening to the store and implement advanced debugging helpers such as mutation logs, snapshots, and history re-rolls / time travel.
+As we continue developing the convention, where components are never allowed to directly mutate state that belongs to a store but should instead dispatch events that notify the store to perform actions, we eventually arrive at the [Flux](https://facebook.github.io/flux/) architecture. The benefit of this convention is we can record all state mutations happening to the store and implement advanced debugging helpers such as mutation logs, snapshots, and history re-rolls / time travel.
-This brings us full circle back to [Vuex](https://github.com/vuejs/vuex), so if you've read this far it's probably time to try it out!
+This brings us full circle back to [Vuex](https://next.vuex.vuejs.org/), so if you've read this far it's probably time to try it out!
diff --git a/src/guide/teleport.md b/src/guide/teleport.md
index 6a94a442..c47ff0c5 100644
--- a/src/guide/teleport.md
+++ b/src/guide/teleport.md
@@ -1,8 +1,10 @@
# Teleport
+<VideoLesson href="https://vueschool.io/lessons/vue-3-teleport?friend=vuejs" title="Learn how to use teleport with Vue School">Learn how to use teleport with a free lesson on Vue School</VideoLesson>
+
Vue encourages us to build our UIs by encapsulating UI and related behavior into components. We can nest them inside one another to build a tree that makes up an application UI.
-However, sometimes a part of a component's template belongs to this component logically, while from a technical point of view, it would be preferable to move this part of the template somewhere else in the DOM, outside of the Vue app.
+However, sometimes a part of a component's template belongs to this component logically, while from a technical point of view, it would be preferable to move this part of the template somewhere else in the DOM, outside of the Vue app.
A common scenario for this is creating a component that includes a full-screen modal. In most cases, you'd want the modal's logic to live within the component, but the positioning of the modal quickly becomes difficult to solve through CSS, or requires a change in component composition.
@@ -19,7 +21,7 @@ Consider the following HTML structure.
</body>
```
-Let's take a look at `modal-button`.
+Let's take a look at `modal-button`.
The component will have a `button` element to trigger the opening of the modal, and a `div` element with a class of `.modal`, which will contain the modal's content and a button to self-close.
@@ -42,7 +44,7 @@ app.component('modal-button', {
</div>
`,
data() {
- return {
+ return {
modalOpen: false
}
}
@@ -53,7 +55,7 @@ When using this component inside the initial HTML structure, we can see a proble
Teleport provides a clean way to allow us to control under which parent in our DOM we want a piece of HTML to be rendered, without having to resort to global state or splitting this into two components.
-Let's modify our `modal-button` to use `<teleport>` and tell Vue "**teleport** this HTML **to** the "**body**" tag".
+Let's modify our `modal-button` to use `<teleport>` and tell Vue "**teleport** this HTML **to** the "**body**" tag".
```js
app.component('modal-button', {
@@ -75,7 +77,7 @@ app.component('modal-button', {
</teleport>
`,
data() {
- return {
+ return {
modalOpen: false
}
}
@@ -84,12 +86,7 @@ app.component('modal-button', {
As a result, once we click the button to open the modal, Vue will correctly render the modal's content as a child of the `body` tag.
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="gOPNvjR" data-preview="true" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Vue 3 Teleport">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/gOPNvjR">
- Vue 3 Teleport</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Vue 3 Teleport" slug="gOPNvjR" tab="js,result" />
## Using with Vue components
@@ -143,4 +140,4 @@ A common use case scenario would be a reusable `<Modal>` component of which ther
</div>
```
-You can check `<teleport>` component options in the [API reference](../api/built-in-components.html#teleport)
+You can check `<teleport>` component options in the [API reference](../api/built-in-components.html#teleport).
diff --git a/src/guide/template-syntax.md b/src/guide/template-syntax.md
index 33473734..9b2c55a5 100644
--- a/src/guide/template-syntax.md
+++ b/src/guide/template-syntax.md
@@ -1,6 +1,6 @@
# Template Syntax
-Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying application instance's data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
+Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data. All Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
Under the hood, Vue compiles the templates into Virtual DOM render functions. Combined with the reactivity system, Vue is able to intelligently figure out the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.
@@ -16,7 +16,7 @@ The most basic form of data binding is text interpolation using the "Mustache" s
<span>Message: {{ msg }}</span>
```
-The mustache tag will be replaced with the value of the `msg` property on the corresponding data object. It will also be updated whenever the data object's `msg` property changes.
+The mustache tag will be replaced with the value of the `msg` property from the corresponding component instance. It will also be updated whenever the `msg` property changes.
You can also perform one-time interpolations that do not update on data change by using the [v-once directive](../api/directives.html#v-once), but keep in mind this will also affect any other bindings on the same node:
@@ -33,12 +33,7 @@ The double mustaches interprets the data as plain text, not HTML. In order to ou
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="yLNEJJM" data-editable="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Rendering v-html">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/yLNEJJM">
- Rendering v-html</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Rendering v-html" slug="yLNEJJM" :preview="false" />
The contents of the `span` will be replaced with the value of the `rawHtml` property, interpreted as plain HTML - data bindings are ignored. Note that you cannot use `v-html` to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.
@@ -48,27 +43,32 @@ Dynamically rendering arbitrary HTML on your website can be very dangerous becau
### Attributes
-Mustaches cannot be used inside HTML attributes. Instead, use a [`v-bind` directive](../api/#v-bind):
+Mustaches cannot be used inside HTML attributes. Instead, use a [`v-bind` directive](../api/directives.html#v-bind):
```html
<div v-bind:id="dynamicId"></div>
```
-In the case of boolean attributes, where their mere existence implies `true`, `v-bind` works a little differently. In this example:
+If the bound value is `null` or `undefined` then the attribute will not be included on the rendered element.
+
+In the case of boolean attributes, where their mere existence implies `true`, `v-bind` works a little differently. For example:
```html
<button v-bind:disabled="isButtonDisabled">Button</button>
```
-If `isButtonDisabled` has the value of `null` or `undefined`, the `disabled` attribute will not even be included in the rendered `<button>` element.
+The `disabled` attribute will be included if `isButtonDisabled` has a truthy value. It will also be included if the value is an empty string, maintaining consistency with `<button disabled="">`. For other falsy values the attribute will be omitted.
### Using JavaScript Expressions
So far we've only been binding to simple property keys in our templates. But Vue.js actually supports the full power of JavaScript expressions inside all data bindings:
```html
-{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('')
-}}
+{{ number + 1 }}
+
+{{ ok ? 'YES' : 'NO' }}
+
+{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
```
@@ -123,7 +123,7 @@ in the "Dynamic Argument Expression Constraints" section below.
<a v-bind:[attributeName]="url"> ... </a>
```
-Here `attributeName` will be dynamically evaluated as a JavaScript expression, and its evaluated value will be used as the final value for the argument. For example, if your application instance has a data property, `attributeName`, whose value is `"href"`, then this binding will be equivalent to `v-bind:href`.
+Here `attributeName` will be dynamically evaluated as a JavaScript expression, and its evaluated value will be used as the final value for the argument. For example, if your component instance has a data property, `attributeName`, whose value is `"href"`, then this binding will be equivalent to `v-bind:href`.
Similarly, you can use dynamic arguments to bind a handler to a dynamic event name:
@@ -169,7 +169,7 @@ The `v-` prefix serves as a visual cue for identifying Vue-specific attributes i
<!-- shorthand -->
<a @click="doSomething"> ... </a>
-<!-- shorthand with dynamic argument (2.6.0+) -->
+<!-- shorthand with dynamic argument -->
<a @[event]="doSomething"> ... </a>
```
@@ -206,4 +206,4 @@ Unless you have a "someattr" property in your instance, your code won't work.
#### JavaScript Expressions
-Template expressions are sandboxed and only have access to a [whitelist of globals](https://github.com/vuejs/vue-next/blob/master/packages/shared/src/globalsWhitelist.ts#L3) such as `Math` and `Date`. You should not attempt to access user defined globals in template expressions.
+Template expressions are sandboxed and only have access to a [restricted list of globals](https://github.com/vuejs/vue-next/blob/master/packages/shared/src/globalsWhitelist.ts#L3) such as `Math` and `Date`. You should not attempt to access user defined globals in template expressions.
diff --git a/src/guide/testing.md b/src/guide/testing.md
index 0b76f781..ade7ba49 100644
--- a/src/guide/testing.md
+++ b/src/guide/testing.md
@@ -38,7 +38,7 @@ While there are many tools in the ecosystem, here are some common unit testing t
#### Jest
-Jest is a JavaScript test framework that is focused on simplicity. One of its unique features is the ability to take snapshots of tests in order to provide an alternative means of verifying units of your application.
+Jest is a JavaScript test framework that is focused on simplicity. One of its unique features is the ability to take snapshots of tests in order to provide an alternative means of verifying units of your application.
**Resources:**
@@ -66,7 +66,7 @@ The following section provides guidelines on things to keep in mind when evaluat
#### Optimal compatibility with the Vue ecosystem
-It should be no surprise that one of the first criteria is that a component testing library should have is being as compatible with the Vue ecosystem as possible. While this may seem comprehensive, some key integration areas to keep in mind include single file components (SFCs), Vuex, Vue Router, and any other Vue specific plugins that your application relies on.
+It should be no surprise that one of the first criteria is that a component testing library should have is being as compatible with the Vue ecosystem as possible. While this may seem comprehensive, some key integration areas to keep in mind include single file components (SFCs), Vuex, Vue Router, and any other Vue specific plugins that your application relies on.
#### First-class error reporting
@@ -86,9 +86,9 @@ Its guiding principle is that the more tests resemble the way software is used,
#### Vue Test Utils
-Vue Test Utils is the official low-level component testing library that was written to provide users access to Vue specific APIs. If you are new to testing Vue applications, we would recommend using Vue Testing Library, which is an abstraction over Vue Test Utils.
+Vue Test Utils is the official low-level component testing library that was written to provide users access to Vue specific APIs. If you are new to testing Vue applications, we would recommend using Vue Testing Library, which is an abstraction over Vue Test Utils.
-**Resources**
+**Resources:**
- [Official Vue Test Utils Documentation](https://vue-test-utils.vuejs.org)
- [Vue Testing Handbook](https://lmiller1990.github.io/vue-testing-handbook/v3/#what-is-this-guide) by Lachlan Miller
@@ -107,10 +107,10 @@ While end-to-end (E2E) testing on the web has gained a negative reputation for u
#### Cross-browser testing
-One of the primary benefits that end-to-end (E2E) testing is known for is its ability to test your application across multiple browsers. While it may seem desirable to have 100% cross-browser coverage, it is important to note that cross browser testing has diminishing returns on a team's resources due the additional time and machine power required to run them consistently. As a result, it is important to be mindful of this trade-off when choosing the amount of cross-browser testing your application needs.
+One of the primary benefits that end-to-end (E2E) testing is known for is its ability to test your application across multiple browsers. While it may seem desirable to have 100% cross-browser coverage, it is important to note that cross browser testing has diminishing returns on a team's resources due the additional time and machine power required to run them consistently. As a result, it is important to be mindful of this trade-off when choosing the amount of cross-browser testing your application needs.
::: tip
-A recent development in for catching browser-specific issues is using application monitoring and error reporting tools (e.g., Sentry, LogRocket, etc.) for browsers that are not as commonly used (e.g., < IE11, older Safari versions, etc.).
+A recent development in for catching browser-specific issues is using application monitoring and error reporting tools (e.g., Sentry, LogRocket, etc.) for browsers that are not as commonly used (e.g., < IE11, older Safari versions, etc.).
:::
#### Faster feedback loops
@@ -119,7 +119,7 @@ One of the primary problems with end-to-end (E2E) tests and development is that
#### First class debugging experience
-While developers have traditionally relied on scanning logs in a terminal window to help determine what went wrong in a test, modern end-to-end (E2E) test frameworks allow developers to leverage tools that they are already familiar with, e.g. browser developer tools.
+While developers have traditionally relied on scanning logs in a terminal window to help determine what went wrong in a test, modern end-to-end (E2E) test frameworks allow developers to leverage tools that they are already familiar with, e.g. browser developer tools.
#### Visibility in headless mode
@@ -133,7 +133,7 @@ While there are many tools in the ecosystem, here are some common end-to-end (E2
Cypress.io is a testing framework that aims to enhance developer productivity by enabling developers to reliably test their applications while providing a first class developer experience.
-**Resources**
+**Resources:**
- [Cypress' Official Website](https://www.cypress.io)
- [Official Vue CLI Cypress Plugin](https://cli.vuejs.org/core-plugins/e2e-cypress.html)
diff --git a/src/guide/tooling/deployment.md b/src/guide/tooling/deployment.md
new file mode 100644
index 00000000..c721f010
--- /dev/null
+++ b/src/guide/tooling/deployment.md
@@ -0,0 +1,116 @@
+# Production Deployment
+
+::: info
+Most of the tips below are enabled by default if you are using [Vue CLI](https://cli.vuejs.org). This section is only relevant if you are using a custom build setup.
+:::
+
+## Turn on Production Mode
+
+During development, Vue provides a lot of warnings to help you with common errors and pitfalls. However, these warning strings become useless in production and bloat your app's payload size. In addition, some of these warning checks have small runtime costs that can be avoided in [production mode](https://cli.vuejs.org/guide/mode-and-env.html#modes).
+
+### Without Build Tools
+
+If you are using the full build, i.e. directly including Vue via a script tag without a build tool, make sure to use the minified version for production. This can be found in the [Installation guide](/guide/installation.html#cdn).
+
+### With Build Tools
+
+When using a build tool like Webpack or Browserify, the production mode will be determined by `process.env.NODE_ENV` inside Vue's source code, and it will be in development mode by default. Both build tools provide ways to overwrite this variable to enable Vue's production mode, and warnings will be stripped by minifiers during the build. Vue CLI has this pre-configured for you, but it would be beneficial to know how it is done:
+
+#### Webpack
+
+In Webpack 4+, you can use the `mode` option:
+
+```js
+module.exports = {
+ mode: 'production'
+}
+```
+
+#### Browserify
+
+- Run your bundling command with the actual `NODE_ENV` environment variable set to `"production"`. This tells `vueify` to avoid including hot-reload and development related code.
+
+- Apply a global [envify](https://github.com/hughsk/envify) transform to your bundle. This allows the minifier to strip out all the warnings in Vue's source code wrapped in env variable conditional blocks. For example:
+
+ ```bash
+ NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
+ ```
+
+- Or, using [envify](https://github.com/hughsk/envify) with Gulp:
+
+ ```js
+ // Use the envify custom module to specify environment variables
+ const envify = require('envify/custom')
+
+ browserify(browserifyOptions)
+ .transform(vueify)
+ .transform(
+ // Required in order to process node_modules files
+ { global: true },
+ envify({ NODE_ENV: 'production' })
+ )
+ .bundle()
+ ```
+
+- Or, using [envify](https://github.com/hughsk/envify) with Grunt and [grunt-browserify](https://github.com/jmreidy/grunt-browserify):
+
+ ```js
+ // Use the envify custom module to specify environment variables
+ const envify = require('envify/custom')
+
+ browserify: {
+ dist: {
+ options: {
+ // Function to deviate from grunt-browserify's default order
+ configure: (b) =>
+ b
+ .transform('vueify')
+ .transform(
+ // Required in order to process node_modules files
+ { global: true },
+ envify({ NODE_ENV: 'production' })
+ )
+ .bundle()
+ }
+ }
+ }
+ ```
+
+#### Rollup
+
+Use [@rollup/plugin-replace](https://github.com/rollup/plugins/tree/master/packages/replace):
+
+```js
+const replace = require('@rollup/plugin-replace')
+
+rollup({
+ // ...
+ plugins: [
+ replace({
+ 'process.env.NODE_ENV': JSON.stringify( 'production' )
+ })
+ ]
+}).then(...)
+```
+
+## Pre-Compiling Templates
+
+When using in-DOM templates or in-JavaScript template strings, the template-to-render-function compilation is performed on the fly. This is usually fast enough in most cases, but is best avoided if your application is performance-sensitive.
+
+The easiest way to pre-compile templates is using [Single-File Components](/guide/single-file-component.html) - the associated build setups automatically performs pre-compilation for you, so the built code contains the already compiled render functions instead of raw template strings.
+
+If you are using Webpack, and prefer separating JavaScript and template files, you can use [vue-template-loader](https://github.com/ktsn/vue-template-loader), which also transforms the template files into JavaScript render functions during the build step.
+
+## Extracting Component CSS
+
+When using Single-File Components, the CSS inside components are injected dynamically as `<style>` tags via JavaScript. This has a small runtime cost, and if you are using server-side rendering it will cause a "flash of unstyled content". Extracting the CSS across all components into the same file will avoid these issues, and also result in better CSS minification and caching.
+
+Refer to the respective build tool documentations to see how it's done:
+
+- [Webpack + vue-loader](https://vue-loader.vuejs.org/en/configurations/extract-css.html) (the `vue-cli` webpack template has this pre-configured)
+- [Browserify + vueify](https://github.com/vuejs/vueify#css-extraction)
+- [Rollup + rollup-plugin-vue](https://rollup-plugin-vue.vuejs.org/)
+
+## Tracking Runtime Errors
+
+If a runtime error occurs during a component's render, it will be passed to the global `app.config.errorHandler` config function if it has been set. It might be a good idea to leverage this hook together with an error-tracking service like [Sentry](https://sentry.io), which provides [an official integration](https://sentry.io/for/vue/) for Vue.
diff --git a/src/guide/transitions-enterleave.md b/src/guide/transitions-enterleave.md
index ab99f7b5..c180e96d 100644
--- a/src/guide/transitions-enterleave.md
+++ b/src/guide/transitions-enterleave.md
@@ -7,7 +7,7 @@ Vue provides a variety of ways to apply transition effects when items are insert
- use JavaScript to directly manipulate the DOM during transition hooks
- integrate 3rd-party JavaScript animation libraries
-On this page, we'll only cover entering, leaving, and list transitions, but you can see the next section for [managing state transitions](transitions-state.html).
+On this page, we'll only cover entering, and leaving, but you can see the next sections for [list transitions](transitions-list.html) and [managing state transitions](transitions-state.html).
## Transitioning Single Elements/Components
@@ -56,12 +56,7 @@ Vue.createApp(Demo).mount('#demo')
}
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="html,result" data-user="Vue" data-slug-hash="3466d06fb252a53c5bc0a0edb0f1588a" data-preview="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Simple Transition Component">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/3466d06fb252a53c5bc0a0edb0f1588a">
- Simple Transition Component</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Simple Transition Component" slug="3466d06fb252a53c5bc0a0edb0f1588a" tab="html,result" :editable="false" />
When an element wrapped in a `transition` component is inserted or removed, this is what happens:
@@ -75,17 +70,17 @@ When an element wrapped in a `transition` component is inserted or removed, this
There are six classes applied for enter/leave transitions.
-1. `v-enter-from`: Starting state for enter. Added before element is inserted, removed one frame after element is inserted.
+1. `v-enter-from`: Starting state for enter. Added before the element is inserted, removed one frame after the element is inserted.
-2. `v-enter-active`: Active state for enter. Applied during the entire entering phase. Added before element is inserted, removed when transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition.
+2. `v-enter-active`: Active state for enter. Applied during the entire entering phase. Added before the element is inserted, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the entering transition.
-3. `v-enter-to`: **Only available in versions 2.1.8+.** Ending state for enter. Added one frame after element is inserted (at the same time `v-enter` is removed), removed when transition/animation finishes.
+3. `v-enter-to`: Ending state for enter. Added one frame after the element is inserted (at the same time `v-enter-from` is removed), removed when the transition/animation finishes.
4. `v-leave-from`: Starting state for leave. Added immediately when a leaving transition is triggered, removed after one frame.
-5. `v-leave-active`: Active state for leave. Applied during the entire leaving phase. Added immediately when leave transition is triggered, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the leaving transition.
+5. `v-leave-active`: Active state for leave. Applied during the entire leaving phase. Added immediately when a leave transition is triggered, removed when the transition/animation finishes. This class can be used to define the duration, delay and easing curve for the leaving transition.
-6. `v-leave-to`: **Only available in versions 2.1.8+.** Ending state for leave. Added one frame after a leaving transition is triggered (at the same time `v-leave` is removed), removed when the transition/animation finishes.
+6. `v-leave-to`: Ending state for leave. Added one frame after a leaving transition is triggered (at the same time `v-leave-from` is removed), removed when the transition/animation finishes.
@@ -139,12 +134,7 @@ Vue.createApp(Demo).mount('#demo')
}
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-preview="true" data-default-tab="css,result" data-user="Vue" data-slug-hash="0dfa7869450ef43d6f7bd99022bc53e2" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Different Enter and Leave Transitions">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/0dfa7869450ef43d6f7bd99022bc53e2">
- Different Enter and Leave Transitions</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Different Enter and Leave Transitions" slug="0dfa7869450ef43d6f7bd99022bc53e2" tab="css,result" :editable="false" />
### CSS Animations
@@ -153,7 +143,7 @@ CSS animations are applied in the same way as CSS transitions, the difference be
Here's an example, omitting prefixed CSS rules for the sake of brevity:
```html
-<div id="example-2">
+<div id="demo">
<button @click="show = !show">Toggle show</button>
<transition name="bounce">
<p v-if="show">
@@ -189,7 +179,7 @@ Vue.createApp(Demo).mount('#demo')
transform: scale(0);
}
50% {
- transform: scale(1.5);
+ transform: scale(1.25);
}
100% {
transform: scale(1);
@@ -197,12 +187,7 @@ Vue.createApp(Demo).mount('#demo')
}
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-preview="true" data-default-tab="html,result" data-user="Vue" data-slug-hash="8627c50c5514752acd73d19f5e33a781" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS Animation Transition Example">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/8627c50c5514752acd73d19f5e33a781">
- CSS Animation Transition Example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="CSS Animation Transition Example" slug="8627c50c5514752acd73d19f5e33a781" tab="html,result" :editable="false" />
### Custom Transition Classes
@@ -210,10 +195,10 @@ You can also specify custom transition classes by providing the following attrib
- `enter-from-class`
- `enter-active-class`
-- `enter-to-class` (2.1.8+)
+- `enter-to-class`
- `leave-from-class`
- `leave-active-class`
-- `leave-to-class` (2.1.8+)
+- `leave-to-class`
These will override the conventional class names. This is especially useful when you want to combine Vue's transition system with an existing CSS animation library, such as [Animate.css](https://daneden.github.io/animate.css/).
@@ -261,9 +246,7 @@ However, in some cases you may want to have both on the same element, for exampl
### Explicit Transition Durations
-TODO: validate and provide an example
-
-> New in 2.2.0+
+<!-- TODO: validate and provide an example -->
In most cases, Vue can automatically figure out when the transition has finished. By default, Vue waits for the first `transitionend` or `animationend` event on the root transition element. However, this may not always be desired - for example, we may have a choreographed transition sequence where some nested inner elements have a delayed transition or a longer transition duration than the root transition element.
@@ -347,7 +330,7 @@ methods: {
These hooks can be used in combination with CSS transitions/animations or on their own.
-When using JavaScript-only transitions, **the `done` callbacks are required for the `enter` and `leave` hooks**. Otherwise, the hooks will be called synchronously and the transition will finish immediately. Adding `:css="false"` will also let know Vue to skip CSS detection. Aside from being slightly more performant, this also prevents CSS rules from accidentally interfering with the transition.
+When using JavaScript-only transitions, **the `done` callbacks are required for the `enter` and `leave` hooks**. Otherwise, the hooks will be called synchronously and the transition will finish immediately. Adding `:css="false"` will also let Vue know to skip CSS detection. Aside from being slightly more performant, this also prevents CSS rules from accidentally interfering with the transition.
Now let's dive into an example. Here's a JavaScript transition using [GreenSock](https://greensock.com/):
@@ -418,12 +401,7 @@ const Demo = {
Vue.createApp(Demo).mount('#demo')
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-preview="true" data-default-tab="js,result" data-user="Vue" data-slug-hash="68ce1b8c41d0a6e71ff58df80fd85ae5" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="JavaScript Hooks Transition">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/68ce1b8c41d0a6e71ff58df80fd85ae5">
- JavaScript Hooks Transition</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="JavaScript Hooks Transition" slug="68ce1b8c41d0a6e71ff58df80fd85ae5" tab="js,result" :editable="false" />
## Transitions on Initial Render
@@ -448,19 +426,19 @@ We discuss [transitioning between components](#transitioning-between-components)
</transition>
```
-It's actually possible to transition between any number of elements, either by using multiple `v-if`s or binding a single element to a dynamic property. For example:
+It's actually possible to transition between any number of elements, either by using `v-if`/`v-else-if`/`v-else` or binding a single element to a dynamic property. For example:
-TODO: rewrite example and put in codepen example
+<!-- TODO: rewrite example and put in codepen example -->
```html
<transition>
<button v-if="docState === 'saved'" key="saved">
Edit
</button>
- <button v-if="docState === 'edited'" key="edited">
+ <button v-else-if="docState === 'edited'" key="edited">
Save
</button>
- <button v-if="docState === 'editing'" key="editing">
+ <button v-else-if="docState === 'editing'" key="editing">
Cancel
</button>
</transition>
@@ -493,23 +471,13 @@ computed: {
There's still one problem though. Try clicking the button below:
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="Rwrqzpr" data-preview="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Transition Modes Button Problem">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/Rwrqzpr">
- Transition Modes Button Problem</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Transition Modes Button Problem" slug="Rwrqzpr" :editable="false" />
As it's transitioning between the "on" button and the "off" button, both buttons are rendered - one transitioning out while the other transitions in. This is the default behavior of `<transition>` - entering and leaving happens simultaneously.
Sometimes this works great, like when transitioning items are absolutely positioned on top of each other:
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="abdQgLr" data-preview="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Transition Modes Button Problem- positioning">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/abdQgLr">
- Transition Modes Button Problem- positioning</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Transition Modes Button Problem- positioning" slug="abdQgLr" :editable="false" />
Sometimes this isn't an option, though, or we're dealing with more complex movement where in and out states need to be coordinated, so Vue offers an extremely useful utility called **transition modes**:
@@ -528,41 +496,34 @@ Now let's update the transition for our on/off buttons with `out-in`:
</transition>
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="ZEQmdvq" data-preview="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Transition Modes Button Problem- solved">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/ZEQmdvq">
- Transition Modes Button Problem- solved</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Transition Modes Button Problem- solved" slug="ZEQmdvq" :editable="false" />
With one attribute addition, we've fixed that original transition without having to add any special styling.
-We can use this to coordinate more expressive movement, such as a folding card, as demonstrated below. It's actually two elements transitioning between eachother, but since the beginning and end states are scaling the same: horizontally to 0, it appears like one fluid movement. This type of slight-of-hand can be very useful for realistic UI microinteractions:
+We can use this to coordinate more expressive movement, such as a folding card, as demonstrated below. It's actually two elements transitioning between each other, but since the beginning and end states are scaling the same: horizontally to 0, it appears like one fluid movement. This type of sleight-of-hand can be very useful for realistic UI microinteractions:
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="76e344bf057bd58b5936bba260b787a8" data-preview="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Transition Modes Flip Cards">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/76e344bf057bd58b5936bba260b787a8">
- Transition Modes Flip Cards</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Transition Modes Flip Cards" slug="76e344bf057bd58b5936bba260b787a8" :editable="false" />
## Transitioning Between Components
Transitioning between components is even simpler - we don't even need the `key` attribute. Instead, we wrap a [dynamic component](component-basics.html#dynamic-components):
-TODO: update to Vue 3
-
```html
-<transition name="component-fade" mode="out-in">
- <component :is="view"></component>
-</transition>
+<div id="demo">
+ <input v-model="view" type="radio" value="v-a" id="a"><label for="a">A</label>
+ <input v-model="view" type="radio" value="v-b" id="b"><label for="b">B</label>
+ <transition name="component-fade" mode="out-in">
+ <component :is="view"></component>
+ </transition>
+</div>
```
```js
-new Vue({
- el: '#transition-components-demo',
- data: {
- view: 'v-a'
+const Demo = {
+ data() {
+ return {
+ view: 'v-a'
+ }
},
components: {
'v-a': {
@@ -572,7 +533,9 @@ new Vue({
template: '<div>Component B</div>'
}
}
-})
+}
+
+Vue.createApp(Demo).mount('#demo')
```
```css
@@ -580,10 +543,11 @@ new Vue({
.component-fade-leave-active {
transition: opacity 0.3s ease;
}
-.component-fade-enter, .component-fade-leave-to
-/* .component-fade-leave-active below version 2.1.8 */ {
+
+.component-fade-enter-from,
+.component-fade-leave-to {
opacity: 0;
}
```
-TODO: example
+<common-codepen-snippet title="Transitioning between components" slug="WNwVxZw" tab="html,result" theme="39028" />
diff --git a/src/guide/transitions-list.md b/src/guide/transitions-list.md
index 3c46039d..d22ff248 100644
--- a/src/guide/transitions-list.md
+++ b/src/guide/transitions-list.md
@@ -7,12 +7,12 @@ So far, we've managed transitions for:
So what about for when we have a whole list of items we want to render simultaneously, for example with `v-for`? In this case, we'll use the `<transition-group>` component. Before we dive into an example though, there are a few things that are important to know about this component:
-- Unlike `<transition>`, it renders an actual element: a `<span>` by default. You can change the element that's rendered with the `tag` attribute.
+- By default, it doesn't render a wrapper element, but you can specify an element to be rendered with the `tag` attribute.
- [Transition modes](/guide/transitions-enterleave#transition-modes) are not available, because we are no longer alternating between mutually exclusive elements.
- Elements inside are **always required** to have a unique `key` attribute.
- CSS transition classes will be applied to inner elements and not to the group/container itself.
-### List Entering/Leaving Transitions
+## List Entering/Leaving Transitions
Now let's dive into an example, transitioning entering and leaving using the same CSS classes we've used previously:
@@ -68,16 +68,11 @@ Vue.createApp(Demo).mount('#list-demo')
}
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="e1cea580e91d6952eb0ae17bfb7c379d" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Transition List">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/e1cea580e91d6952eb0ae17bfb7c379d">
- Transition List</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Transition List" slug="e1cea580e91d6952eb0ae17bfb7c379d" tab="js,result" :editable="false" :preview="false" />
There's one problem with this example. When you add or remove an item, the ones around it instantly snap into their new place instead of smoothly transitioning. We'll fix that later.
-### List Move Transitions
+## List Move Transitions
The `<transition-group>` component has another trick up its sleeve. It can not only animate entering and leaving, but also changes in position. The only new concept you need to know to use this feature is the addition of **the `v-move` class**, which is added when items are changing positions. Like the other classes, its prefix will match the value of a provided `name` attribute and you can also manually specify a class with the `move-class` attribute.
@@ -119,12 +114,7 @@ Vue.createApp(Demo).mount('#flip-list-demo')
}
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="html,result" data-user="Vue" data-slug-hash="049211673d3c185fde6b6eceb8baebec" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Transition-group example">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/049211673d3c185fde6b6eceb8baebec">
- Transition-group example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Transition-group example" slug="049211673d3c185fde6b6eceb8baebec" tab="html,result" :editable="false" :preview="false" />
This might seem like magic, but under the hood, Vue is using an animation technique called [FLIP](https://aerotwist.com/blog/flip-your-animations/) to smoothly transition elements from their old position to their new position using transforms.
@@ -190,12 +180,7 @@ Vue.createApp(Demo).mount('#list-complete-demo')
}
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="373b4429eb5769ae2e6d097fd954fd08" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Transition-group example">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/373b4429eb5769ae2e6d097fd954fd08">
- Transition-group example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Transition-group example" slug="373b4429eb5769ae2e6d097fd954fd08" tab="js,result" :editable="false" :preview="false" />
::: tip
One important note is that these FLIP transitions do not work with elements set to `display: inline`. As an alternative, you can use `display: inline-block` or place elements in a flex context.
@@ -205,7 +190,7 @@ These FLIP animations are also not limited to a single axis. Items in a multidim
TODO: example
-### Staggering List Transitions
+## Staggering List Transitions
By communicating with JavaScript transitions through data attributes, it's also possible to stagger transitions in a list:
@@ -282,12 +267,7 @@ const Demo = {
Vue.createApp(Demo).mount('#demo')
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="c2fc5107bd3025ceadea049b3ee44ec0" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Staggered Lists">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/c2fc5107bd3025ceadea049b3ee44ec0">
- Staggered Lists</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Staggered Lists" slug="c2fc5107bd3025ceadea049b3ee44ec0" tab="js,result" :editable="false" :preview="false" />
## Reusable Transitions
@@ -320,7 +300,7 @@ Vue.component('my-special-transition', {
})
```
-And [functional components](render-function.html#Functional-Components) are especially well-suited to this task:
+And [functional components](render-function.html#functional-components) are especially well-suited to this task:
```js
Vue.component('my-special-transition', {
diff --git a/src/guide/transitions-overview.md b/src/guide/transitions-overview.md
index 18f686be..eb98a33e 100644
--- a/src/guide/transitions-overview.md
+++ b/src/guide/transitions-overview.md
@@ -70,16 +70,11 @@ const Demo = {
Vue.createApp(Demo).mount('#demo')
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="css,result" data-user="Vue" data-slug-hash="ff45b91caf7a98c8c9077ad8ab539260" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Create animation with a class">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/ff45b91caf7a98c8c9077ad8ab539260">
- Create animation with a class</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Create animation with a class" slug="ff45b91caf7a98c8c9077ad8ab539260" tab="css,result" :editable="false" :preview="false" />
-# Transitions with Style Bindings
+## Transitions with Style Bindings
-Some transition affects can be applied by interpolating values, for instance by binding a style to an element while an interaction occurs. Take this example for instance:
+Some transition effects can be applied by interpolating values, for instance by binding a style to an element while an interaction occurs. Take this example for instance:
```html
<div id="demo">
@@ -117,12 +112,7 @@ const Demo = {
Vue.createApp(Demo).mount('#demo')
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="result" data-user="Vue" data-slug-hash="JjGezQY" data-preview="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Interpolation with style bindings">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/JjGezQY">
- Interpolation with style bindings</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Interpolation with style bindings" slug="JjGezQY" :editable="false" />
In this example, we are creating animation through the use of interpolation, attached to the mouse movement. The CSS transition is applied to the element as well, to let the element know what kind of easing to use while it's updating.
@@ -162,7 +152,7 @@ You may also find that entrances look better with slightly more time than an exi
## Easing
-Easing is an important way to convey depth in an animation. One of the most common mistakes newcomers to animation have is to use `ease-in` for entrances, and `ease-out` for exits. You'll actually need the opposite.
+Easing is an important way to convey depth in an animation. One of the most common mistakes newcomers to animation make is to use `ease-in` for entrances, and `ease-out` for exits. You'll actually need the opposite.
If we were to apply these states to a transition, it would look something like this:
@@ -175,26 +165,16 @@ If we were to apply these states to a transition, it would look something like t
.button:hover {
background: #3eaf7c;
- /* applied to the hover state, so this trnaisition will be applied when a hover is triggered */
+ /* applied to the hover state, so this transition will be applied when a hover is triggered */
transition: background 0.35s ease-out;
}
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="css,result" data-user="Vue" data-slug-hash="996a9665131e7902327d350ca8a655ac" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Transition Ease Example">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/996a9665131e7902327d350ca8a655ac">
- Transition Ease Example</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Transition Ease Example" slug="996a9665131e7902327d350ca8a655ac" tab="css,result" :editable="false" :preview="false" />
Easing can also convey the quality of material being animated. Take this pen for example, which ball do you think is hard and which is soft?
-<p class="codepen" data-height="500" data-theme-id="39028" data-default-tab="result" data-user="sdras" data-slug-hash="zxJWBJ" data-preview="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Bouncing Ball Demo">
- <span>See the Pen <a href="https://codepen.io/sdras/pen/zxJWBJ">
- Bouncing Ball Demo</a> by Sarah Drasner (<a href="https://codepen.io/sdras">@sdras</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Bouncing Ball Demo" slug="wvgqyyW" :height="500" :editable="false" />
You can get a lot of unique effects and make your animation very stylish by adjusting your easing. CSS allows you to modify this by adjusting a cubic bezier property, [this playground](https://cubic-bezier.com/#.17,.67,.83,.67) by Lea Verou is very helpful for exploring this.
diff --git a/src/guide/transitions-state.md b/src/guide/transitions-state.md
index abcf4de3..7310b381 100644
--- a/src/guide/transitions-state.md
+++ b/src/guide/transitions-state.md
@@ -45,12 +45,7 @@ const Demo = {
Vue.createApp(Demo).mount('#animated-number-demo')
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="22903bc3b53eb5b7817378ecb985ce96" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Transitioning State 1">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/22903bc3b53eb5b7817378ecb985ce96">
- Transitioning State 1</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Transitioning State 1" slug="22903bc3b53eb5b7817378ecb985ce96" tab="js,result" :editable="false" :preview="false" />
When you update the number, the change is animated below the input.
@@ -58,12 +53,7 @@ When you update the number, the change is animated below the input.
As with Vue's transition components, the data backing state transitions can be updated in real time, which is especially useful for prototyping! Even using a simple SVG polygon, you can achieve many effects that would be difficult to conceive of until you've played with the variables a little.
-<p class="codepen" data-height="500" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="a8e00648d4df6baa1b19fb6c31c8d17e" data-preview="true" style="height: 493px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Updating SVG">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/a8e00648d4df6baa1b19fb6c31c8d17e">
- Updating SVG</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Updating SVG" slug="a8e00648d4df6baa1b19fb6c31c8d17e" :height="500" tab="js,result" :editable="false" />
## Organizing Transitions into Components
@@ -138,14 +128,9 @@ app.component('animated-integer', {
app.mount('#app')
```
-<p class="codepen" data-height="300" data-theme-id="39028" data-default-tab="js,result" data-user="Vue" data-slug-hash="e9ef8ac7e32e0d0337e03d20949b4d17" data-preview="true" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="State Transition Components">
- <span>See the Pen <a href="https://codepen.io/team/Vue/pen/e9ef8ac7e32e0d0337e03d20949b4d17">
- State Transition Components</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>)
- on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="State Transition Components" slug="e9ef8ac7e32e0d0337e03d20949b4d17" tab="js,result" :editable="false" />
-Now we can compose multiple states with these child components. It's exciting- we can use any combination of transition strategies that have been covered on this page, along with those offered by Vue's [built-in transition system](transitions.html). Together, there are very few limits to what can be accomplished.
+Now we can compose multiple states with these child components. It's exciting- we can use any combination of transition strategies that have been covered on this page, along with those offered by Vue's [built-in transition system](transitions-enterleave.html). Together, there are very few limits to what can be accomplished.
You can see how we could use this for data visualization, for physics effects, for character animations and interactions, the sky's the limit.
@@ -157,5 +142,4 @@ Vue can help. Since SVGs are just data, we only need examples of what these crea
Sarah Drasner demonstrates this in the demo below, using a combination of timed and interactivity-driven state changes:
-<p data-height="400" data-theme-id="light" data-slug-hash="YZBGNp" data-default-tab="result" data-user="sdras" data-embed-version="2" data-pen-title="Vue-controlled Wall-E" class="codepen">See the Pen <a href="https://codepen.io/sdras/pen/YZBGNp/">Vue-controlled Wall-E</a> by Sarah Drasner (<a href="https://codepen.io/sdras">@sdras</a>) on <a href="https://codepen.io">CodePen</a>.</p>
-<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
+<common-codepen-snippet title="Vue-controlled Wall-E" slug="YZBGNp" :height="400" :team="false" user="sdras" name="Sarah Drasner" :editable="false" :preview="false" version="2" theme="light" />
diff --git a/src/guide/typescript-support.md b/src/guide/typescript-support.md
index 1ca8d6f8..53e2593f 100644
--- a/src/guide/typescript-support.md
+++ b/src/guide/typescript-support.md
@@ -4,7 +4,7 @@
## Official Declaration in NPM Packages
-A static type system can help prevent many potential runtime errors as applications grow, which is why Vue 3 is written in TypeScript. This means you don't need any additional tooling to use TypeScript with Vue - it has a first-class citizen support.
+A static type system can help prevent many potential runtime errors as applications grow, which is why Vue 3 is written in TypeScript. This means you don't need any additional tooling to use TypeScript with Vue - it has first-class citizen support.
## Recommended Configuration
@@ -26,6 +26,31 @@ Note that you have to include `strict: true` (or at least `noImplicitThis: true`
See [TypeScript compiler options docs](https://www.typescriptlang.org/docs/handbook/compiler-options.html) for more details.
+## Webpack Configuration
+
+If you are using a custom Webpack configuration `ts-loader` needs to be configured to parse `<script lang="ts">` blocks in `.vue` files:
+
+```js{10}
+// webpack.config.js
+module.exports = {
+ ...
+ module: {
+ rules: [
+ {
+ test: /\.tsx?$/,
+ loader: 'ts-loader',
+ options: {
+ appendTsSuffixTo: [/\.vue$/],
+ },
+ exclude: /node_modules/,
+ },
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ }
+ ...
+```
+
## Development Tooling
### Project Creation
@@ -34,7 +59,7 @@ See [TypeScript compiler options docs](https://www.typescriptlang.org/docs/handb
```bash
# 1. Install Vue CLI, if it's not already installed
-npm install --global @vue/cli@next
+npm install --global @vue/cli
# 2. Create a new project, then choose the "Manually select features" option
vue create my-project-name
@@ -51,13 +76,21 @@ Make sure that `script` part of the component has TypeScript set as a language:
</script>
```
+Or, if you want to combine TypeScript with a [JSX `render` function](/guide/render-function.html#jsx):
+
+```html
+<script lang="tsx">
+ ...
+</script>
+```
+
### Editor Support
-For developing Vue applications with TypeScript, we strongly recommend using [Visual Studio Code](https://code.visualstudio.com/), which provides great out-of-the-box support for TypeScript. If you are using [single-file components](./single-file-components.html) (SFCs), get the awesome [Vetur extension](https://github.com/vuejs/vetur), which provides TypeScript inference inside SFCs and many other great features.
+For developing Vue applications with TypeScript, we strongly recommend using [Visual Studio Code](https://code.visualstudio.com/), which provides great out-of-the-box support for TypeScript. If you are using [single-file components](./single-file-component.html) (SFCs), get the awesome [Vetur extension](https://github.com/vuejs/vetur), which provides TypeScript inference inside SFCs and many other great features.
[WebStorm](https://www.jetbrains.com/webstorm/) also provides out-of-the-box support for both TypeScript and Vue.
-## Defining Vue components
+## Defining Vue Components
To let TypeScript properly infer types inside Vue component options, you need to define components with `defineComponent` global method:
@@ -69,6 +102,18 @@ const Component = defineComponent({
})
```
+If you're using [single-file components](/guide/single-file-component.html) then this would typically be written as:
+
+```vue
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+ // type inference enabled
+})
+</script>
+```
+
## Using with Options API
TypeScript should be able to infer most of the types without defining types explicitly. For example, if you have a component with a number `count` property, you will have an error if you try to call a string-specific method on it:
@@ -86,7 +131,7 @@ const Component = defineComponent({
})
```
-If you have a complex type or interface, you can cast it using [type assertion](https://www.typescriptlang.org/docs/handbook/basic-types.html#type-assertions):
+If you have a complex type or interface, you can cast it using [type assertion](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#type-assertions):
```ts
interface Book {
@@ -108,9 +153,55 @@ const Component = defineComponent({
})
```
+### Augmenting Types for `globalProperties`
+
+Vue 3 provides a [`globalProperties` object](../api/application-config.html#globalproperties) that can be used to add a global property that can be accessed in any component instance. For example, a [plugin](./plugins.html#writing-a-plugin) might want to inject a shared global object or function.
+
+```ts
+// User Definition
+import axios from 'axios'
+
+const app = Vue.createApp({})
+app.config.globalProperties.$http = axios
+
+// Plugin for validating some data
+export default {
+ install(app, options) {
+ app.config.globalProperties.$validate = (data: object, rule: object) => {
+ // check whether the object meets certain rules
+ }
+ }
+}
+```
+
+In order to tell TypeScript about these new properties, we can use [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation).
+
+In the above example, we could add the following type declaration:
+
+```ts
+import axios from 'axios'
+
+declare module '@vue/runtime-core' {
+ export interface ComponentCustomProperties {
+ $http: typeof axios
+ $validate: (data: object, rule: object) => boolean
+ }
+}
+```
+
+We can put this type declaration in the same file, or in a project-wide `*.d.ts` file (for example, in the `src/typings` folder that is automatically loaded by TypeScript). For library/plugin authors, this file should be specified in the `types` property in `package.json`.
+
+::: warning Make sure the declaration file is a TypeScript module
+In order to take advantage of module augmentation, you will need to ensure there is at least one top-level `import` or `export` in your file, even if it is just `export {}`.
+
+[In TypeScript](https://www.typescriptlang.org/docs/handbook/modules.html), any file containing a top-level `import` or `export` is considered a 'module'. If type declaration is made outside of a module, it will overwrite the original types rather than augmenting them.
+:::
+
+For more information about the `ComponentCustomProperties` type, see its [definition in `@vue/runtime-core`](https://github.com/vuejs/vue-next/blob/2587f36fe311359e2e34f40e8e47d2eebfab7f42/packages/runtime-core/src/componentOptions.ts#L64-L80) and [the TypeScript unit tests](https://github.com/vuejs/vue-next/blob/master/test-dts/componentTypeExtensions.test-d.tsx) to learn more.
+
### Annotating Return Types
-Because of the circular nature of Vue’s declaration files, TypeScript may have difficulties inferring the types of computed. For this reason, you may need to annotate the return type computed properties.
+Because of the circular nature of Vue’s declaration files, TypeScript may have difficulties inferring the types of computed. For this reason, you may need to annotate the return type of computed properties.
```ts
import { defineComponent } from 'vue'
@@ -125,17 +216,17 @@ const Component = defineComponent({
// needs an annotation
greeting(): string {
return this.message + '!'
- }
+ },
// in a computed with a setter, getter needs to be annotated
greetingUppercased: {
get(): string {
- return this.greeting.toUpperCase();
+ return this.greeting.toUpperCase()
},
set(newValue: string) {
- this.message = newValue.toUpperCase();
- },
- },
+ this.message = newValue.toUpperCase()
+ }
+ }
}
})
```
@@ -147,11 +238,12 @@ Vue does a runtime validation on props with a `type` defined. To provide these t
```ts
import { defineComponent, PropType } from 'vue'
-interface ComplexMessage {
+interface Book {
title: string
- okMessage: string
- cancelMessage: string
+ author: string
+ year: number
}
+
const Component = defineComponent({
props: {
name: String,
@@ -159,18 +251,76 @@ const Component = defineComponent({
callback: {
type: Function as PropType<() => void>
},
- message: {
- type: Object as PropType<ComplexMessage>,
- required: true,
- validator(message: ComplexMessage) {
- return !!message.title
+ book: {
+ type: Object as PropType<Book>,
+ required: true
+ }
+ }
+})
+```
+
+::: warning
+Because of a [design limitation](https://github.com/microsoft/TypeScript/issues/38845) in TypeScript when it comes
+to type inference of function expressions, you have to be careful with `validator` and `default` values for objects and arrays:
+:::
+
+```ts
+import { defineComponent, PropType } from 'vue'
+
+interface Book {
+ title: string
+ year?: number
+}
+
+const Component = defineComponent({
+ props: {
+ bookA: {
+ type: Object as PropType<Book>,
+ // Make sure to use arrow functions
+ default: () => ({
+ title: 'Arrow Function Expression'
+ }),
+ validator: (book: Book) => !!book.title
+ },
+ bookB: {
+ type: Object as PropType<Book>,
+ // Or provide an explicit this parameter
+ default(this: void) {
+ return {
+ title: 'Function Expression'
+ }
+ },
+ validator(this: void, book: Book) {
+ return !!book.title
}
}
}
})
```
-If you find validator not getting type inference or member completion isn’t working, annotating the argument with the expected type may help address these problems.
+### Annotating Emits
+
+We can annotate a payload for the emitted event. Also, all non-declared emitted events will throw a type error when called:
+
+```ts
+const Component = defineComponent({
+ emits: {
+ addBook(payload: { bookName: string }) {
+ // perform runtime validation
+ return payload.bookName.length > 0
+ }
+ },
+ methods: {
+ onSubmit() {
+ this.$emit('addBook', {
+ bookName: 123 // Type error!
+ })
+
+ this.$emit('non-declared-event') // Type error!
+ }
+ }
+})
+```
## Using with Composition API
@@ -194,7 +344,7 @@ const Component = defineComponent({
})
```
-### Typing `ref`s
+### Typing `refs`
Refs infer the type from the initial value:
@@ -210,7 +360,7 @@ const Component = defineComponent({
})
```
-Sometimes we may need to specify complex types for a ref's inner value. We can do that simply passing a generic argument when calling ref to override the default inference:
+Sometimes we may need to specify complex types for a ref's inner value. We can do that by simply passing a generic argument when calling ref to override the default inference:
```ts
const year = ref<string | number>('2020') // year's type: Ref<string | number>
@@ -222,6 +372,77 @@ year.value = 2020 // ok!
If the type of the generic is unknown, it's recommended to cast `ref` to `Ref<T>`.
:::
+### Typing Template Refs
+
+Sometimes you might need to annotate a template ref for a child component in order to call its public method. For example, we have a `MyModal` child component with a method that opens the modal:
+
+```ts
+import { defineComponent, ref } from 'vue'
+
+const MyModal = defineComponent({
+ setup() {
+ const isContentShown = ref(false)
+ const open = () => (isContentShown.value = true)
+
+ return {
+ isContentShown,
+ open
+ }
+ }
+})
+```
+
+We want to call this method via a template ref from the parent component:
+
+```ts
+import { defineComponent, ref } from 'vue'
+
+const MyModal = defineComponent({
+ setup() {
+ const isContentShown = ref(false)
+ const open = () => (isContentShown.value = true)
+
+ return {
+ isContentShown,
+ open
+ }
+ }
+})
+
+const app = defineComponent({
+ components: {
+ MyModal
+ },
+ template: `
+ <button @click="openModal">Open from parent</button>
+ <my-modal ref="modal" />
+ `,
+ setup() {
+ const modal = ref()
+ const openModal = () => {
+ modal.value.open()
+ }
+
+ return { modal, openModal }
+ }
+})
+```
+
+While this will work, there is no type information about `MyModal` and its available methods. To fix this, you should use `InstanceType` when creating a ref:
+
+```ts
+setup() {
+ const modal = ref<InstanceType<typeof MyModal>>()
+ const openModal = () => {
+ modal.value?.open()
+ }
+
+ return { modal, openModal }
+}
+```
+
+Please note that you would also need to use [optional chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) or any other way to check that `modal.value` is not undefined.
+
### Typing `reactive`
When typing a `reactive` property, we can use interfaces:
diff --git a/src/search/README.md b/src/search/README.md
new file mode 100644
index 00000000..b785ff9f
--- /dev/null
+++ b/src/search/README.md
@@ -0,0 +1,3 @@
+# Search Vue.js
+
+<search-index/>
diff --git a/src/style-guide/README.md b/src/style-guide/README.md
index 34c9e917..e233abfb 100644
--- a/src/style-guide/README.md
+++ b/src/style-guide/README.md
@@ -38,18 +38,18 @@ Some features of Vue exist to accommodate rare edge cases or smoother migrations
**Component names should always be multi-word, except for root `App` components, and built-in components provided by Vue, such as `<transition>` or `<component>`.**
-This [prevents conflicts](http://w3c.github.io/webcomponents/spec/custom/#valid-custom-element-name) with existing and future HTML elements, since all HTML elements are a single word.
+This [prevents conflicts](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name) with existing and future HTML elements, since all HTML elements are a single word.
<div class="style-example style-example-bad">
<h4>Bad</h4>
-``` js
+```js
app.component('todo', {
// ...
})
```
-``` js
+```js
export default {
name: 'Todo',
// ...
@@ -60,13 +60,13 @@ export default {
<div class="style-example style-example-good">
<h4>Good</h4>
-``` js
+```js
app.component('todo-item', {
// ...
})
```
-``` js
+```js
export default {
name: 'TodoItem',
// ...
@@ -81,7 +81,7 @@ export default {
In committed code, prop definitions should always be as detailed as possible, specifying at least type(s).
::: details Detailed Explanation
-Detailed [prop definitions](https://vuejs.org/v2/guide/components.html#Prop-Validation) have two advantages:
+Detailed [prop definitions](/guide/component-props.html#prop-validation) have two advantages:
- They document the API of the component, so that it's easy to see how the component is meant to be used.
- In development, Vue will warn you if a component is ever provided incorrectly formatted props, helping you catch potential sources of error.
@@ -90,7 +90,7 @@ Detailed [prop definitions](https://vuejs.org/v2/guide/components.html#Prop-Vali
<div class="style-example style-example-bad">
<h4>Bad</h4>
-``` js
+```js
// This is only OK when prototyping
props: ['status']
```
@@ -99,13 +99,13 @@ props: ['status']
<div class="style-example style-example-good">
<h4>Good</h4>
-``` js
+```js
props: {
status: String
}
```
-``` js
+```js
// Even better!
props: {
status: {
@@ -134,7 +134,7 @@ props: {
::: details Detailed Explanation
Let's say you have a list of todos:
-``` js
+```js
data() {
return {
todos: [
@@ -161,7 +161,7 @@ In our experience, it's better to _always_ add a unique key, so that you and you
<div class="style-example style-example-bad">
<h4>Bad</h4>
-``` html
+```html
<ul>
<li v-for="todo in todos">
{{ todo.text }}
@@ -173,7 +173,7 @@ In our experience, it's better to _always_ add a unique key, so that you and you
<div class="style-example style-example-good">
<h4>Good</h4>
-``` html
+```html
<ul>
<li
v-for="todo in todos"
@@ -196,9 +196,9 @@ There are two common cases where this can be tempting:
- To avoid rendering a list if it should be hidden (e.g. `v-for="user in users" v-if="shouldShowUsers"`). In these cases, move the `v-if` to a container element (e.g. `ul`, `ol`).
::: details Detailed Explanation
-When Vue processes directives, `v-for` has a higher priority than `v-if`, so that this template:
+When Vue processes directives, `v-if` has a higher priority than `v-for`, so that this template:
-``` html
+```html
<ul>
<li
v-for="user in users"
@@ -210,21 +210,11 @@ When Vue processes directives, `v-for` has a higher priority than `v-if`, so tha
</ul>
```
-Will be evaluated similar to:
+Will throw an error, because the `v-if` directive will be evaluated first and the iteration variable `user` does not exist at this moment.
-``` js
-this.users.map(user => {
- if (user.isActive) {
- return user.name
- }
-})
-```
-
-So even if we only render elements for a small fraction of users, we have to iterate over the entire list every time we re-render, whether or not the set of active users has changed.
+This could be fixed by iterating over a computed property instead, like this:
-By iterating over a computed property instead, like this:
-
-``` js
+```js
computed: {
activeUsers() {
return this.users.filter(user => user.isActive)
@@ -232,7 +222,7 @@ computed: {
}
```
-``` html
+```html
<ul>
<li
v-for="user in activeUsers"
@@ -243,46 +233,24 @@ computed: {
</ul>
```
-We get the following benefits:
-
-- The filtered list will _only_ be re-evaluated if there are relevant changes to the `users` array, making filtering much more efficient.
-- Using `v-for="user in activeUsers"`, we _only_ iterate over active users during render, making rendering much more efficient.
-- Logic is now decoupled from the presentation layer, making maintenance (change/extension of logic) much easier.
-
-We get similar benefits from updating:
+Alternatively, we can use a `<template>` tag with `v-for` to wrap the `<li>` element:
-``` html
+```html
<ul>
- <li
- v-for="user in users"
- v-if="shouldShowUsers"
- :key="user.id"
- >
- {{ user.name }}
- </li>
+ <template v-for="user in users" :key="user.id">
+ <li v-if="user.isActive">
+ {{ user.name }}
+ </li>
+ </template>
</ul>
```
-to:
-
-``` html
-<ul v-if="shouldShowUsers">
- <li
- v-for="user in users"
- :key="user.id"
- >
- {{ user.name }}
- </li>
-</ul>
-```
-
-By moving the `v-if` to a container element, we're no longer checking `shouldShowUsers` for _every_ user in the list. Instead, we check it once and don't even evaluate the `v-for` if `shouldShowUsers` is false.
:::
<div class="style-example style-example-bad">
<h4>Bad</h4>
-``` html
+```html
<ul>
<li
v-for="user in users"
@@ -293,24 +261,12 @@ By moving the `v-if` to a container element, we're no longer checking `shouldSho
</li>
</ul>
```
-
-``` html
-<ul>
- <li
- v-for="user in users"
- v-if="shouldShowUsers"
- :key="user.id"
- >
- {{ user.name }}
- </li>
-</ul>
-```
</div>
<div class="style-example style-example-good">
<h4>Good</h4>
-``` html
+```html
<ul>
<li
v-for="user in activeUsers"
@@ -321,14 +277,13 @@ By moving the `v-if` to a container element, we're no longer checking `shouldSho
</ul>
```
-``` html
-<ul v-if="shouldShowUsers">
- <li
- v-for="user in users"
- :key="user.id"
- >
- {{ user.name }}
- </li>
+```html
+<ul>
+ <template v-for="user in users" :key="user.id">
+ <li v-if="user.isActive">
+ {{ user.name }}
+ </li>
+ </template>
</ul>
```
</div>
@@ -337,7 +292,7 @@ By moving the `v-if` to a container element, we're no longer checking `shouldSho
**For applications, styles in a top-level `App` component and in layout components may be global, but all other components should always be scoped.**
-This is only relevant for [single-file components](../guide/single-file-components.html). It does _not_ require that the [`scoped` attribute](https://vue-loader.vuejs.org/en/features/scoped-css.html) be used. Scoping could be through [CSS modules](https://vue-loader.vuejs.org/en/features/css-modules.html), a class-based strategy such as [BEM](http://getbem.com/), or another library/convention.
+This is only relevant for [single-file components](../guide/single-file-component.html). It does _not_ require that the [`scoped` attribute](https://vue-loader.vuejs.org/en/features/scoped-css.html) be used. Scoping could be through [CSS modules](https://vue-loader.vuejs.org/en/features/css-modules.html), a class-based strategy such as [BEM](http://getbem.com/), or another library/convention.
**Component libraries, however, should prefer a class-based strategy instead of using the `scoped` attribute.**
@@ -352,7 +307,7 @@ Beyond the `scoped` attribute, using unique class names can help ensure that 3rd
<div class="style-example style-example-bad">
<h4>Bad</h4>
-``` html
+```html
<template>
<button class="btn btn-close">×</button>
</template>
@@ -368,7 +323,7 @@ Beyond the `scoped` attribute, using unique class names can help ensure that 3rd
<div class="style-example style-example-good">
<h4>Good</h4>
-``` html
+```html
<template>
<button class="button button-close">×</button>
</template>
@@ -386,7 +341,7 @@ Beyond the `scoped` attribute, using unique class names can help ensure that 3rd
</style>
```
-``` html
+```html
<template>
<button :class="[$style.button, $style.buttonClose]">×</button>
</template>
@@ -404,7 +359,7 @@ Beyond the `scoped` attribute, using unique class names can help ensure that 3rd
</style>
```
-``` html
+```html
<template>
<button class="c-Button c-Button--close">×</button>
</template>
@@ -438,7 +393,7 @@ Instead, we recommend combining the two prefixes into `$_`, as a convention for
<div class="style-example style-example-bad">
<h4>Bad</h4>
-``` js
+```js
const myGreatMixin = {
// ...
methods: {
@@ -449,7 +404,7 @@ const myGreatMixin = {
}
```
-``` js
+```js
const myGreatMixin = {
// ...
methods: {
@@ -460,7 +415,7 @@ const myGreatMixin = {
}
```
-``` js
+```js
const myGreatMixin = {
// ...
methods: {
@@ -471,7 +426,7 @@ const myGreatMixin = {
}
```
-``` js
+```js
const myGreatMixin = {
// ...
methods: {
@@ -487,7 +442,7 @@ const myGreatMixin = {
<div class="style-example style-example-good">
<h4>Good</h4>
-``` js
+```js
const myGreatMixin = {
// ...
methods: {
@@ -498,7 +453,7 @@ const myGreatMixin = {
}
```
-``` js
+```js
// Even better!
const myGreatMixin = {
// ...
@@ -529,7 +484,7 @@ This helps you to more quickly find a component when you need to edit it or revi
<div class="style-example style-example-bad">
<h4>Bad</h4>
-``` js
+```js
app.component('TodoList', {
// ...
})
@@ -558,7 +513,7 @@ components/
### Single-file component filename casing <sup data-p="b">strongly recommended</sup>
-**Filenames of [single-file components](../guide/single-file-components.html) should either be always PascalCase or always kebab-case.**
+**Filenames of [single-file components](../guide/single-file-component.html) should either be always PascalCase or always kebab-case.**
PascalCase works best with autocompletion in code editors, as it's consistent with how we reference components in JS(X) and templates, wherever possible. However, mixed case filenames can sometimes create issues on case-insensitive file systems, which is why kebab-case is also perfectly acceptable.
@@ -613,7 +568,7 @@ Some advantages of this convention:
- Since these components are so frequently used, you may want to simply make them global instead of importing them everywhere. A prefix makes this possible with Webpack:
- ``` js
+ ```js
const requireComponent = require.context("./src", true, /Base[A-Z]\w+\.(vue|js)$/)
requireComponent.keys().forEach(function (fileName) {
let baseComponentConfig = requireComponent(fileName)
@@ -839,7 +794,7 @@ components/
### Self-closing components <sup data-p="b">strongly recommended</sup>
-**Components with no content should be self-closing in [single-file components](../guide/single-file-components.html), string templates, and [JSX](../guide/render-function.html#JSX) - but never in DOM templates.**
+**Components with no content should be self-closing in [single-file components](../guide/single-file-component.html), string templates, and [JSX](../guide/render-function.html#jsx) - but never in DOM templates.**
Components that self-close communicate that they not only have no content, but are **meant** to have no content. It's the difference between a blank page in a book and one labeled "This page intentionally left blank." Your code is also cleaner without the unnecessary closing tag.
@@ -848,12 +803,12 @@ Unfortunately, HTML doesn't allow custom elements to be self-closing - only [off
<div class="style-example style-example-bad">
<h4>Bad</h4>
-``` html
+```html
<!-- In single-file components, string templates, and JSX -->
<MyComponent></MyComponent>
```
-``` html
+```html
<!-- In DOM templates -->
<my-component/>
```
@@ -862,12 +817,12 @@ Unfortunately, HTML doesn't allow custom elements to be self-closing - only [off
<div class="style-example style-example-good">
<h4>Good</h4>
-``` html
+```html
<!-- In single-file components, string templates, and JSX -->
<MyComponent/>
```
-``` html
+```html
<!-- In DOM templates -->
<my-component></my-component>
```
@@ -875,7 +830,7 @@ Unfortunately, HTML doesn't allow custom elements to be self-closing - only [off
### Component name casing in templates <sup data-p="b">strongly recommended</sup>
-**In most projects, component names should always be PascalCase in [single-file components](../guide/single-file-components.html) and string templates - but kebab-case in DOM templates.**
+**In most projects, component names should always be PascalCase in [single-file components](../guide/single-file-component.html) and string templates - but kebab-case in DOM templates.**
PascalCase has a few advantages over kebab-case:
@@ -890,17 +845,17 @@ Also note that if you've already invested heavily in kebab-case, consistency wit
<div class="style-example style-example-bad">
<h4>Bad</h4>
-``` html
+```html
<!-- In single-file components and string templates -->
<mycomponent/>
```
-``` html
+```html
<!-- In single-file components and string templates -->
<myComponent/>
```
-``` html
+```html
<!-- In DOM templates -->
<MyComponent></MyComponent>
```
@@ -909,19 +864,19 @@ Also note that if you've already invested heavily in kebab-case, consistency wit
<div class="style-example style-example-good">
<h4>Good</h4>
-``` html
+```html
<!-- In single-file components and string templates -->
<MyComponent/>
```
-``` html
+```html
<!-- In DOM templates -->
<my-component></my-component>
```
OR
-``` html
+```html
<!-- Everywhere -->
<my-component></my-component>
```
@@ -929,7 +884,7 @@ OR
### Component name casing in JS/JSX <sup data-p="b">strongly recommended</sup>
-**Component names in JS/[JSX](../guide/render-function.html#JSX) should always be PascalCase, though they may be kebab-case inside strings for simpler applications that only use global component registration through `app.component`.**
+**Component names in JS/[JSX](../guide/render-function.html#jsx) should always be PascalCase, though they may be kebab-case inside strings for simpler applications that only use global component registration through `app.component`.**
::: details Detailed Explanation
In JavaScript, PascalCase is the convention for classes and prototype constructors - essentially, anything that can have distinct instances. Vue components also have instances, so it makes sense to also use PascalCase. As an added benefit, using PascalCase within JSX (and templates) allows readers of the code to more easily distinguish between components and HTML elements.
@@ -937,30 +892,30 @@ In JavaScript, PascalCase is the convention for classes and prototype constructo
However, for applications that use **only** global component definitions via `app.component`, we recommend kebab-case instead. The reasons are:
- It's rare that global components are ever referenced in JavaScript, so following a convention for JavaScript makes less sense.
-- These applications always include many in-DOM templates, where [kebab-case **must** be used](#Component-name-casing-in-templates-strongly-recommended).
+- These applications always include many in-DOM templates, where [kebab-case **must** be used](#component-name-casing-in-templates-strongly-recommended).
:::
<div class="style-example style-example-bad">
<h4>Bad</h4>
-``` js
+```js
app.component('myComponent', {
// ...
})
```
-``` js
+```js
import myComponent from './MyComponent.vue'
```
-``` js
+```js
export default {
name: 'myComponent',
// ...
}
```
-``` js
+```js
export default {
name: 'my-component',
// ...
@@ -971,23 +926,23 @@ export default {
<div class="style-example style-example-good">
<h4>Good</h4>
-``` js
+```js
app.component('MyComponent', {
// ...
})
```
-``` js
+```js
app.component('my-component', {
// ...
})
```
-``` js
+```js
import MyComponent from './MyComponent.vue'
```
-``` js
+```js
export default {
name: 'MyComponent',
// ...
@@ -1023,20 +978,20 @@ components/
### Prop name casing <sup data-p="b">strongly recommended</sup>
-**Prop names should always use camelCase during declaration, but kebab-case in templates and [JSX](../guide/render-function.html#JSX).**
+**Prop names should always use camelCase during declaration, but kebab-case in templates and [JSX](../guide/render-function.html#jsx).**
We're simply following the conventions of each language. Within JavaScript, camelCase is more natural. Within HTML, kebab-case is.
<div class="style-example style-example-bad">
<h4>Bad</h4>
-``` js
+```js
props: {
'greeting-text': String
}
```
-``` html
+```html
<WelcomeMessage greetingText="hi"/>
```
</div>
@@ -1044,13 +999,13 @@ props: {
<div class="style-example style-example-good">
<h4>Good</h4>
-``` js
+```js
props: {
greetingText: String
}
```
-``` html
+```html
<WelcomeMessage greeting-text="hi"/>
```
</div>
@@ -1059,16 +1014,16 @@ props: {
**Elements with multiple attributes should span multiple lines, with one attribute per line.**
-In JavaScript, splitting objects with multiple properties over multiple lines is widely considered a good convention, because it's much easier to read. Our templates and [JSX](../guide/render-function.html#JSX) deserve the same consideration.
+In JavaScript, splitting objects with multiple properties over multiple lines is widely considered a good convention, because it's much easier to read. Our templates and [JSX](../guide/render-function.html#jsx) deserve the same consideration.
<div class="style-example style-example-bad">
<h4>Bad</h4>
-``` html
+```html
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
```
-``` html
+```html
<MyComponent foo="a" bar="b" baz="c"/>
```
</div>
@@ -1076,14 +1031,14 @@ In JavaScript, splitting objects with multiple properties over multiple lines is
<div class="style-example style-example-good">
<h4>Good</h4>
-``` html
+```html
<img
src="https://vuejs.org/images/logo.png"
alt="Vue Logo"
>
```
-``` html
+```html
<MyComponent
foo="a"
bar="b"
@@ -1101,7 +1056,7 @@ Complex expressions in your templates make them less declarative. We should stri
<div class="style-example style-example-bad">
<h4>Bad</h4>
-``` html
+```html
{{
fullName.split(' ').map((word) => {
return word[0].toUpperCase() + word.slice(1)
@@ -1113,12 +1068,12 @@ Complex expressions in your templates make them less declarative. We should stri
<div class="style-example style-example-good">
<h4>Good</h4>
-``` html
+```html
<!-- In a template -->
{{ normalizedFullName }}
```
-``` js
+```js
// The complex expression has been moved to a computed property
computed: {
normalizedFullName() {
@@ -1155,7 +1110,7 @@ Simpler, well-named computed properties are:
<div class="style-example style-example-bad">
<h4>Bad</h4>
-``` js
+```js
computed: {
price() {
const basePrice = this.manufactureCost / (1 - this.profitMargin)
@@ -1171,7 +1126,7 @@ computed: {
<div class="style-example style-example-good">
<h4>Good</h4>
-``` js
+```js
computed: {
basePrice() {
return this.manufactureCost / (1 - this.profitMargin)
@@ -1197,11 +1152,11 @@ While attribute values without any spaces are not required to have quotes in HTM
<div class="style-example style-example-bad">
<h4>Bad</h4>
-``` html
+```html
<input type=text>
```
-``` html
+```html
<AppSidebar :style={width:sidebarWidth+'px'}>
```
</div>
@@ -1209,11 +1164,11 @@ While attribute values without any spaces are not required to have quotes in HTM
<div class="style-example style-example-good">
<h4>Good</h4>
-``` html
+```html
<input type="text">
```
-``` html
+```html
<AppSidebar :style="{ width: sidebarWidth + 'px' }">
```
</div>
@@ -1225,21 +1180,21 @@ While attribute values without any spaces are not required to have quotes in HTM
<div class="style-example style-example-bad">
<h4>Bad</h4>
-``` html
+```html
<input
v-bind:value="newTodoText"
:placeholder="newTodoInstructions"
>
```
-``` html
+```html
<input
v-on:input="onInput"
@focus="onFocus"
>
```
-``` html
+```html
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
@@ -1253,35 +1208,35 @@ While attribute values without any spaces are not required to have quotes in HTM
<div class="style-example style-example-good">
<h4>Good</h4>
-``` html
+```html
<input
:value="newTodoText"
:placeholder="newTodoInstructions"
>
```
-``` html
+```html
<input
v-bind:value="newTodoText"
v-bind:placeholder="newTodoInstructions"
>
```
-``` html
+```html
<input
@input="onInput"
@focus="onFocus"
>
```
-``` html
+```html
<input
v-on:input="onInput"
v-on:focus="onFocus"
>
```
-``` html
+```html
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
@@ -1291,7 +1246,7 @@ While attribute values without any spaces are not required to have quotes in HTM
</template>
```
-``` html
+```html
<template #header>
<h1>Here might be a page title</h1>
</template>
@@ -1302,7 +1257,6 @@ While attribute values without any spaces are not required to have quotes in HTM
```
</div>
-
## Priority C Rules: Recommended <span class="hide-from-sidebar">(Minimizing Arbitrary Choices and Cognitive Overhead)</span>
### Component/instance options order <sup data-p="c">recommended</sup>
@@ -1314,28 +1268,31 @@ This is the default order we recommend for component options. They're split into
1. **Global Awareness** (requires knowledge beyond the component)
- `name`
-2. **Template Dependencies** (assets used in the template)
+2. **Template Modifiers** (changes the way templates are compiled)
+ - `delimiters`
+
+3. **Template Dependencies** (assets used in the template)
- `components`
- `directives`
-3. **Composition** (merges properties into the options)
+4. **Composition** (merges properties into the options)
- `extends`
- `mixins`
- `provide`/`inject`
-4. **Interface** (the interface to the component)
+5. **Interface** (the interface to the component)
- `inheritAttrs`
- `props`
- `emits`
-5. **Composition API** (the entry point for using the Composition API)
+6. **Composition API** (the entry point for using the Composition API)
- `setup`
-6. **Local State** (local reactive properties)
+7. **Local State** (local reactive properties)
- `data`
- `computed`
-7. **Events** (callbacks triggered by reactive events)
+8. **Events** (callbacks triggered by reactive events)
- `watch`
- Lifecycle Events (in the order they are called)
- `beforeCreate`
@@ -1352,10 +1309,10 @@ This is the default order we recommend for component options. They're split into
- `renderTracked`
- `renderTriggered`
-8. **Non-Reactive Properties** (instance properties independent of the reactivity system)
+9. **Non-Reactive Properties** (instance properties independent of the reactivity system)
- `methods`
-9. **Rendering** (the declarative description of the component output)
+10. **Rendering** (the declarative description of the component output)
- `template`/`render`
### Element attribute order <sup data-p="c">recommended</sup>
@@ -1409,7 +1366,7 @@ When components begin to feel cramped or difficult to read, adding spaces betwee
<div class="style-example style-example-good">
<h4>Good</h4>
-``` js
+```js
props: {
value: {
type: String,
@@ -1436,7 +1393,7 @@ computed: {
}
```
-``` js
+```js
// No spaces are also fine, as long as the component
// is still easy to read and navigate.
props: {
@@ -1444,21 +1401,17 @@ props: {
type: String,
required: true
},
-
focused: {
type: Boolean,
default: false
},
-
label: String,
icon: String
},
-
computed: {
formattedValue() {
// ...
},
-
inputClasses() {
// ...
}
@@ -1468,18 +1421,18 @@ computed: {
### Single-file component top-level element order <sup data-p="c">recommended</sup>
-**[Single-file components](../guide/single-file-components.html) should always order `<script>`, `<template>`, and `<style>` tags consistently, with `<style>` last, because at least one of the other two is always necessary.**
+**[Single-file components](../guide/single-file-component.html) should always order `<script>`, `<template>`, and `<style>` tags consistently, with `<style>` last, because at least one of the other two is always necessary.**
<div class="style-example style-example-bad">
<h4>Bad</h4>
-``` html
+```html
<style>/* ... */</style>
<script>/* ... */</script>
<template>...</template>
```
-``` html
+```html
<!-- ComponentA.vue -->
<script>/* ... */</script>
<template>...</template>
@@ -1495,7 +1448,7 @@ computed: {
<div class="style-example style-example-good">
<h4>Good</h4>
-``` html
+```html
<!-- ComponentA.vue -->
<script>/* ... */</script>
<template>...</template>
@@ -1507,7 +1460,7 @@ computed: {
<style>/* ... */</style>
```
-``` html
+```html
<!-- ComponentA.vue -->
<template>...</template>
<script>/* ... */</script>
@@ -1520,6 +1473,8 @@ computed: {
```
</div>
+## Priority D Rules: Use with Caution <span class="hide-from-sidebar">(Potentially Dangerous Patterns)</span>
+
### Element selectors with `scoped` <sup data-p="d">use with caution</sup>
**Element selectors should be avoided with `scoped`.**
@@ -1535,7 +1490,7 @@ The problem is that large numbers of [element-attribute selectors](http://steves
<div class="style-example style-example-bad">
<h4>Bad</h4>
-``` html
+```html
<template>
<button>×</button>
</template>
@@ -1551,7 +1506,7 @@ button {
<div class="style-example style-example-good">
<h4>Good</h4>
-``` html
+```html
<template>
<button class="btn btn-close">×</button>
</template>
@@ -1575,7 +1530,7 @@ The problem is, there are also many _simple_ cases where these patterns may offe
<div class="style-example style-example-bad">
<h4>Bad</h4>
-``` js
+```js
app.component('TodoItem', {
props: {
todo: {
@@ -1588,7 +1543,7 @@ app.component('TodoItem', {
})
```
-``` js
+```js
app.component('TodoItem', {
props: {
todo: {
@@ -1618,7 +1573,7 @@ app.component('TodoItem', {
<div class="style-example style-example-good">
<h4>Good</h4>
-``` js
+```js
app.component('TodoItem', {
props: {
todo: {
@@ -1627,6 +1582,8 @@ app.component('TodoItem', {
}
},
+ emits: ['input'],
+
template: `
<input
:value="todo.text"
@@ -1636,7 +1593,7 @@ app.component('TodoItem', {
})
```
-``` js
+```js
app.component('TodoItem', {
props: {
todo: {
@@ -1645,6 +1602,8 @@ app.component('TodoItem', {
}
},
+ emits: ['delete'],
+
template: `
<span>
{{ todo.text }}
@@ -1659,16 +1618,16 @@ app.component('TodoItem', {
### Non-flux state management <sup data-p="d">use with caution</sup>
-**[Vuex](https://github.com/vuejs/vuex) should be preferred for global state management, instead of `this.$root` or a global event bus.**
+**[Vuex](https://next.vuex.vuejs.org/) should be preferred for global state management, instead of `this.$root` or a global event bus.**
-Managing state on `this.$root` and/or using a [global event bus](https://vuejs.org/v2/guide/migration.html#dispatch-and-broadcast-replaced) can be convenient for very simple cases, but it is not appropriate for most applications.
+Managing state on `this.$root` and/or using a global event bus can be convenient for very simple cases, but it is not appropriate for most applications.
-Vuex is the [official flux-like implementation](https://vuejs.org/v2/guide/state-management.html#Official-Flux-Like-Implementation) for Vue, and offers not only a central place to manage state, but also tools for organizing, tracking, and debugging state changes. It integrates well in the Vue ecosystem (including full [Vue DevTools](https://vuejs.org/v2/guide/installation.html#Vue-Devtools) support).
+Vuex is the [official flux-like implementation](/guide/state-management.html#official-flux-like-implementation) for Vue, and offers not only a central place to manage state, but also tools for organizing, tracking, and debugging state changes. It integrates well in the Vue ecosystem (including full [Vue DevTools](/guide/installation.html#vue-devtools) support).
<div class="style-example style-example-bad">
<h4>Bad</h4>
-``` js
+```js
// main.js
import { createApp } from 'vue'
import mitt from 'mitt'
@@ -1697,7 +1656,7 @@ const app = createApp({
<div class="style-example style-example-good">
<h4>Good</h4>
-``` js
+```js
// store/modules/todos.js
export default {
state: {
@@ -1718,7 +1677,7 @@ export default {
}
```
-``` html
+```html
<!-- TodoItem.vue -->
<template>
<span>
diff --git a/yarn.lock b/yarn.lock
index 935e9a0b..35482d34 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -106,345 +106,371 @@
"@algolia/logger-common" "4.4.0"
"@algolia/requester-common" "4.4.0"
-"@babel/code-frame@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.3.tgz#33e25903d7481181534e12ec0a25f16b6fcf419e"
- integrity sha512-a9gxpmdXtZEInkCSHUJDLHZVBgb1QS0jhss4cPP93EW7s+uC5bikET2twEF3KV+7rDblJcmNvTR7VJejqd2C2g==
- dependencies:
- "@babel/highlight" "^7.8.3"
-
-"@babel/compat-data@^7.8.6":
- version "7.8.6"
- resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.8.6.tgz#7eeaa0dfa17e50c7d9c0832515eee09b56f04e35"
- integrity sha512-CurCIKPTkS25Mb8mz267vU95vy+TyUpnctEX2lV33xWNmHAfjruztgiPBbXZRh3xZZy1CYvGx6XfxyTVS+sk7Q==
- dependencies:
- browserslist "^4.8.5"
- invariant "^2.2.4"
- semver "^5.5.0"
-
-"@babel/core@^7.8.4":
- version "7.8.7"
- resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.8.7.tgz#b69017d221ccdeb203145ae9da269d72cf102f3b"
- integrity sha512-rBlqF3Yko9cynC5CCFy6+K/w2N+Sq/ff2BPy+Krp7rHlABIr5epbA7OxVeKoMHB39LZOp1UY5SuLjy6uWi35yA==
- dependencies:
- "@babel/code-frame" "^7.8.3"
- "@babel/generator" "^7.8.7"
- "@babel/helpers" "^7.8.4"
- "@babel/parser" "^7.8.7"
- "@babel/template" "^7.8.6"
- "@babel/traverse" "^7.8.6"
- "@babel/types" "^7.8.7"
+"@babel/code-frame@^7.10.4":
+ version "7.10.4"
+ resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
+ integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
+ dependencies:
+ "@babel/highlight" "^7.10.4"
+
+"@babel/compat-data@^7.12.5", "@babel/compat-data@^7.12.7":
+ version "7.12.7"
+ resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.12.7.tgz#9329b4782a7d6bbd7eef57e11addf91ee3ef1e41"
+ integrity sha512-YaxPMGs/XIWtYqrdEOZOCPsVWfEoriXopnsz3/i7apYPXQ3698UFhS6dVT1KN5qOsWmVgw/FOrmQgpRaZayGsw==
+
+"@babel/core@^7.11.0", "@babel/core@^7.8.4":
+ version "7.12.9"
+ resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.9.tgz#fd450c4ec10cdbb980e2928b7aa7a28484593fc8"
+ integrity sha512-gTXYh3M5wb7FRXQy+FErKFAv90BnlOuNn1QkCK2lREoPAjrQCO49+HVSrFoe5uakFAF5eenS75KbO2vQiLrTMQ==
+ dependencies:
+ "@babel/code-frame" "^7.10.4"
+ "@babel/generator" "^7.12.5"
+ "@babel/helper-module-transforms" "^7.12.1"
+ "@babel/helpers" "^7.12.5"
+ "@babel/parser" "^7.12.7"
+ "@babel/template" "^7.12.7"
+ "@babel/traverse" "^7.12.9"
+ "@babel/types" "^7.12.7"
convert-source-map "^1.7.0"
debug "^4.1.0"
gensync "^1.0.0-beta.1"
- json5 "^2.1.0"
- lodash "^4.17.13"
+ json5 "^2.1.2"
+ lodash "^4.17.19"
resolve "^1.3.2"
semver "^5.4.1"
source-map "^0.5.0"
-"@babel/generator@^7.8.6", "@babel/generator@^7.8.7":
- version "7.8.8"
- resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.8.8.tgz#cdcd58caab730834cee9eeadb729e833b625da3e"
- integrity sha512-HKyUVu69cZoclptr8t8U5b6sx6zoWjh8jiUhnuj3MpZuKT2dJ8zPTuiy31luq32swhI0SpwItCIlU8XW7BZeJg==
+"@babel/generator@^7.12.5":
+ version "7.12.5"
+ resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.12.5.tgz#a2c50de5c8b6d708ab95be5e6053936c1884a4de"
+ integrity sha512-m16TQQJ8hPt7E+OS/XVQg/7U184MLXtvuGbCdA7na61vha+ImkyyNM/9DDA0unYCVZn3ZOhng+qz48/KBOT96A==
dependencies:
- "@babel/types" "^7.8.7"
+ "@babel/types" "^7.12.5"
jsesc "^2.5.1"
- lodash "^4.17.13"
source-map "^0.5.0"
-"@babel/helper-annotate-as-pure@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.8.3.tgz#60bc0bc657f63a0924ff9a4b4a0b24a13cf4deee"
- integrity sha512-6o+mJrZBxOoEX77Ezv9zwW7WV8DdluouRKNY/IR5u/YTMuKHgugHOzYWlYvYLpLA9nPsQCAAASpCIbjI9Mv+Uw==
- dependencies:
- "@babel/types" "^7.8.3"
-
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.8.3.tgz#c84097a427a061ac56a1c30ebf54b7b22d241503"
- integrity sha512-5eFOm2SyFPK4Rh3XMMRDjN7lBH0orh3ss0g3rTYZnBQ+r6YPj7lgDyCvPphynHvUrobJmeMignBr6Acw9mAPlw==
- dependencies:
- "@babel/helper-explode-assignable-expression" "^7.8.3"
- "@babel/types" "^7.8.3"
-
-"@babel/helper-call-delegate@^7.8.7":
- version "7.8.7"
- resolved "https://registry.yarnpkg.com/@babel/helper-call-delegate/-/helper-call-delegate-7.8.7.tgz#28a279c2e6c622a6233da548127f980751324cab"
- integrity sha512-doAA5LAKhsFCR0LAFIf+r2RSMmC+m8f/oQ+URnUET/rWeEzC0yTRmAGyWkD4sSu3xwbS7MYQ2u+xlt1V5R56KQ==
- dependencies:
- "@babel/helper-hoist-variables" "^7.8.3"
- "@babel/traverse" "^7.8.3"
- "@babel/types" "^7.8.7"
-
-"@babel/helper-compilation-targets@^7.8.4", "@babel/helper-compilation-targets@^7.8.7":
- version "7.8.7"
- resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.8.7.tgz#dac1eea159c0e4bd46e309b5a1b04a66b53c1dde"
- integrity sha512-4mWm8DCK2LugIS+p1yArqvG1Pf162upsIsjE7cNBjez+NjliQpVhj20obE520nao0o14DaTnFJv+Fw5a0JpoUw==
- dependencies:
- "@babel/compat-data" "^7.8.6"
- browserslist "^4.9.1"
- invariant "^2.2.4"
- levenary "^1.1.1"
- semver "^5.5.0"
-
-"@babel/helper-create-class-features-plugin@^7.8.3":
- version "7.8.6"
- resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.8.6.tgz#243a5b46e2f8f0f674dc1387631eb6b28b851de0"
- integrity sha512-klTBDdsr+VFFqaDHm5rR69OpEQtO2Qv8ECxHS1mNhJJvaHArR6a1xTf5K/eZW7eZpJbhCx3NW1Yt/sKsLXLblg==
- dependencies:
- "@babel/helper-function-name" "^7.8.3"
- "@babel/helper-member-expression-to-functions" "^7.8.3"
- "@babel/helper-optimise-call-expression" "^7.8.3"
- "@babel/helper-plugin-utils" "^7.8.3"
- "@babel/helper-replace-supers" "^7.8.6"
- "@babel/helper-split-export-declaration" "^7.8.3"
-
-"@babel/helper-create-regexp-features-plugin@^7.8.3", "@babel/helper-create-regexp-features-plugin@^7.8.8":
- version "7.8.8"
- resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.8.8.tgz#5d84180b588f560b7864efaeea89243e58312087"
- integrity sha512-LYVPdwkrQEiX9+1R29Ld/wTrmQu1SSKYnuOk3g0CkcZMA1p0gsNxJFj/3gBdaJ7Cg0Fnek5z0DsMULePP7Lrqg==
- dependencies:
- "@babel/helper-annotate-as-pure" "^7.8.3"
- "@babel/helper-regex" "^7.8.3"
- regexpu-core "^4.7.0"
-
-"@babel/helper-define-map@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.8.3.tgz#a0655cad5451c3760b726eba875f1cd8faa02c15"
- integrity sha512-PoeBYtxoZGtct3md6xZOCWPcKuMuk3IHhgxsRRNtnNShebf4C8YonTSblsK4tvDbm+eJAw2HAPOfCr+Q/YRG/g==
- dependencies:
- "@babel/helper-function-name" "^7.8.3"
- "@babel/types" "^7.8.3"
- lodash "^4.17.13"
-
-"@babel/helper-explode-assignable-expression@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.8.3.tgz#a728dc5b4e89e30fc2dfc7d04fa28a930653f982"
- integrity sha512-N+8eW86/Kj147bO9G2uclsg5pwfs/fqqY5rwgIL7eTBklgXjcOJ3btzS5iM6AitJcftnY7pm2lGsrJVYLGjzIw==
- dependencies:
- "@babel/traverse" "^7.8.3"
- "@babel/types" "^7.8.3"
-
-"@babel/helper-function-name@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.8.3.tgz#eeeb665a01b1f11068e9fb86ad56a1cb1a824cca"
- integrity sha512-BCxgX1BC2hD/oBlIFUgOCQDOPV8nSINxCwM3o93xP4P9Fq6aV5sgv2cOOITDMtCfQ+3PvHp3l689XZvAM9QyOA==
- dependencies:
- "@babel/helper-get-function-arity" "^7.8.3"
- "@babel/template" "^7.8.3"
- "@babel/types" "^7.8.3"
-
-"@babel/helper-get-function-arity@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz#b894b947bd004381ce63ea1db9f08547e920abd5"
- integrity sha512-FVDR+Gd9iLjUMY1fzE2SR0IuaJToR4RkCDARVfsBBPSP53GEqSFjD8gNyxg246VUyc/ALRxFaAK8rVG7UT7xRA==
- dependencies:
- "@babel/types" "^7.8.3"
-
-"@babel/helper-hoist-variables@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.8.3.tgz#1dbe9b6b55d78c9b4183fc8cdc6e30ceb83b7134"
- integrity sha512-ky1JLOjcDUtSc+xkt0xhYff7Z6ILTAHKmZLHPxAhOP0Nd77O+3nCsd6uSVYur6nJnCI029CrNbYlc0LoPfAPQg==
- dependencies:
- "@babel/types" "^7.8.3"
-
-"@babel/helper-member-expression-to-functions@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.8.3.tgz#659b710498ea6c1d9907e0c73f206eee7dadc24c"
- integrity sha512-fO4Egq88utkQFjbPrSHGmGLFqmrshs11d46WI+WZDESt7Wu7wN2G2Iu+NMMZJFDOVRHAMIkB5SNh30NtwCA7RA==
- dependencies:
- "@babel/types" "^7.8.3"
-
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.8.3.tgz#7fe39589b39c016331b6b8c3f441e8f0b1419498"
- integrity sha512-R0Bx3jippsbAEtzkpZ/6FIiuzOURPcMjHp+Z6xPe6DtApDJx+w7UYyOLanZqO8+wKR9G10s/FmHXvxaMd9s6Kg==
- dependencies:
- "@babel/types" "^7.8.3"
-
-"@babel/helper-module-transforms@^7.8.3":
- version "7.8.6"
- resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.8.6.tgz#6a13b5eecadc35692047073a64e42977b97654a4"
- integrity sha512-RDnGJSR5EFBJjG3deY0NiL0K9TO8SXxS9n/MPsbPK/s9LbQymuLNtlzvDiNS7IpecuL45cMeLVkA+HfmlrnkRg==
- dependencies:
- "@babel/helper-module-imports" "^7.8.3"
- "@babel/helper-replace-supers" "^7.8.6"
- "@babel/helper-simple-access" "^7.8.3"
- "@babel/helper-split-export-declaration" "^7.8.3"
- "@babel/template" "^7.8.6"
- "@babel/types" "^7.8.6"
- lodash "^4.17.13"
-
-"@babel/helper-optimise-call-expression@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.8.3.tgz#7ed071813d09c75298ef4f208956006b6111ecb9"
- integrity sha512-Kag20n86cbO2AvHca6EJsvqAd82gc6VMGule4HwebwMlwkpXuVqrNRj6CkCV2sKxgi9MyAUnZVnZ6lJ1/vKhHQ==
+"@babel/helper-annotate-as-pure@^7.10.4":
+ version "7.10.4"
+ resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz#5bf0d495a3f757ac3bda48b5bf3b3ba309c72ba3"
+ integrity sha512-XQlqKQP4vXFB7BN8fEEerrmYvHp3fK/rBkRFz9jaJbzK0B1DSfej9Kc7ZzE8Z/OnId1jpJdNAZ3BFQjWG68rcA==
dependencies:
- "@babel/types" "^7.8.3"
-
-"@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
- integrity sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==
+ "@babel/types" "^7.10.4"
-"@babel/helper-regex@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.8.3.tgz#139772607d51b93f23effe72105b319d2a4c6965"
- integrity sha512-BWt0QtYv/cg/NecOAZMdcn/waj/5P26DR4mVLXfFtDokSR6fyuG0Pj+e2FqtSME+MqED1khnSMulkmGl8qWiUQ==
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.10.4":
+ version "7.10.4"
+ resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.10.4.tgz#bb0b75f31bf98cbf9ff143c1ae578b87274ae1a3"
+ integrity sha512-L0zGlFrGWZK4PbT8AszSfLTM5sDU1+Az/En9VrdT8/LmEiJt4zXt+Jve9DCAnQcbqDhCI+29y/L93mrDzddCcg==
dependencies:
- lodash "^4.17.13"
+ "@babel/helper-explode-assignable-expression" "^7.10.4"
+ "@babel/types" "^7.10.4"
-"@babel/helper-remap-async-to-generator@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.8.3.tgz#273c600d8b9bf5006142c1e35887d555c12edd86"
- integrity sha512-kgwDmw4fCg7AVgS4DukQR/roGp+jP+XluJE5hsRZwxCYGg+Rv9wSGErDWhlI90FODdYfd4xG4AQRiMDjjN0GzA==
- dependencies:
- "@babel/helper-annotate-as-pure" "^7.8.3"
- "@babel/helper-wrap-function" "^7.8.3"
- "@babel/template" "^7.8.3"
- "@babel/traverse" "^7.8.3"
- "@babel/types" "^7.8.3"
-
-"@babel/helper-replace-supers@^7.8.3", "@babel/helper-replace-supers@^7.8.6":
- version "7.8.6"
- resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.8.6.tgz#5ada744fd5ad73203bf1d67459a27dcba67effc8"
- integrity sha512-PeMArdA4Sv/Wf4zXwBKPqVj7n9UF/xg6slNRtZW84FM7JpE1CbG8B612FyM4cxrf4fMAMGO0kR7voy1ForHHFA==
- dependencies:
- "@babel/helper-member-expression-to-functions" "^7.8.3"
- "@babel/helper-optimise-call-expression" "^7.8.3"
- "@babel/traverse" "^7.8.6"
- "@babel/types" "^7.8.6"
-
-"@babel/helper-simple-access@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.8.3.tgz#7f8109928b4dab4654076986af575231deb639ae"
- integrity sha512-VNGUDjx5cCWg4vvCTR8qQ7YJYZ+HBjxOgXEl7ounz+4Sn7+LMD3CFrCTEU6/qXKbA2nKg21CwhhBzO0RpRbdCw==
- dependencies:
- "@babel/template" "^7.8.3"
- "@babel/types" "^7.8.3"
-
-"@babel/helper-split-export-declaration@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.8.3.tgz#31a9f30070f91368a7182cf05f831781065fc7a9"
- integrity sha512-3x3yOeyBhW851hroze7ElzdkeRXQYQbFIb7gLK1WQYsw2GWDay5gAJNw1sWJ0VFP6z5J1whqeXH/WCdCjZv6dA==
- dependencies:
- "@babel/types" "^7.8.3"
-
-"@babel/helper-wrap-function@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.8.3.tgz#9dbdb2bb55ef14aaa01fe8c99b629bd5352d8610"
- integrity sha512-LACJrbUET9cQDzb6kG7EeD7+7doC3JNvUgTEQOx2qaO1fKlzE/Bf05qs9w1oXQMmXlPO65lC3Tq9S6gZpTErEQ==
+"@babel/helper-compilation-targets@^7.12.5", "@babel/helper-compilation-targets@^7.9.6":
+ version "7.12.5"
+ resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.12.5.tgz#cb470c76198db6a24e9dbc8987275631e5d29831"
+ integrity sha512-+qH6NrscMolUlzOYngSBMIOQpKUGPPsc61Bu5W10mg84LxZ7cmvnBHzARKbDoFxVvqqAbj6Tg6N7bSrWSPXMyw==
dependencies:
- "@babel/helper-function-name" "^7.8.3"
- "@babel/template" "^7.8.3"
- "@babel/traverse" "^7.8.3"
- "@babel/types" "^7.8.3"
-
-"@babel/helpers@^7.8.4":
- version "7.8.4"
- resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.8.4.tgz#754eb3ee727c165e0a240d6c207de7c455f36f73"
- integrity sha512-VPbe7wcQ4chu4TDQjimHv/5tj73qz88o12EPkO2ValS2QiQS/1F2SsjyIGNnAD0vF/nZS6Cf9i+vW6HIlnaR8w==
- dependencies:
- "@babel/template" "^7.8.3"
- "@babel/traverse" "^7.8.4"
- "@babel/types" "^7.8.3"
+ "@babel/compat-data" "^7.12.5"
+ "@babel/helper-validator-option" "^7.12.1"
+ browserslist "^4.14.5"
+ semver "^5.5.0"
-"@babel/highlight@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.8.3.tgz#28f173d04223eaaa59bc1d439a3836e6d1265797"
- integrity sha512-PX4y5xQUvy0fnEVHrYOarRPXVWafSjTW9T0Hab8gVIawpl2Sj0ORyrygANq+KjcNlSSTw0YCLSNA8OyZ1I4yEg==
- dependencies:
+"@babel/helper-create-class-features-plugin@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.12.1.tgz#3c45998f431edd4a9214c5f1d3ad1448a6137f6e"
+ integrity sha512-hkL++rWeta/OVOBTRJc9a5Azh5mt5WgZUGAKMD8JM141YsE08K//bp1unBBieO6rUKkIPyUE0USQ30jAy3Sk1w==
+ dependencies:
+ "@babel/helper-function-name" "^7.10.4"
+ "@babel/helper-member-expression-to-functions" "^7.12.1"
+ "@babel/helper-optimise-call-expression" "^7.10.4"
+ "@babel/helper-replace-supers" "^7.12.1"
+ "@babel/helper-split-export-declaration" "^7.10.4"
+
+"@babel/helper-create-regexp-features-plugin@^7.12.1":
+ version "7.12.7"
+ resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.12.7.tgz#2084172e95443fa0a09214ba1bb328f9aea1278f"
+ integrity sha512-idnutvQPdpbduutvi3JVfEgcVIHooQnhvhx0Nk9isOINOIGYkZea1Pk2JlJRiUnMefrlvr0vkByATBY/mB4vjQ==
+ dependencies:
+ "@babel/helper-annotate-as-pure" "^7.10.4"
+ regexpu-core "^4.7.1"
+
+"@babel/helper-define-map@^7.10.4":
+ version "7.10.5"
+ resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.10.5.tgz#b53c10db78a640800152692b13393147acb9bb30"
+ integrity sha512-fMw4kgFB720aQFXSVaXr79pjjcW5puTCM16+rECJ/plGS+zByelE8l9nCpV1GibxTnFVmUuYG9U8wYfQHdzOEQ==
+ dependencies:
+ "@babel/helper-function-name" "^7.10.4"
+ "@babel/types" "^7.10.5"
+ lodash "^4.17.19"
+
+"@babel/helper-explode-assignable-expression@^7.10.4":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.12.1.tgz#8006a466695c4ad86a2a5f2fb15b5f2c31ad5633"
+ integrity sha512-dmUwH8XmlrUpVqgtZ737tK88v07l840z9j3OEhCLwKTkjlvKpfqXVIZ0wpK3aeOxspwGrf/5AP5qLx4rO3w5rA==
+ dependencies:
+ "@babel/types" "^7.12.1"
+
+"@babel/helper-function-name@^7.10.4":
+ version "7.10.4"
+ resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz#d2d3b20c59ad8c47112fa7d2a94bc09d5ef82f1a"
+ integrity sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==
+ dependencies:
+ "@babel/helper-get-function-arity" "^7.10.4"
+ "@babel/template" "^7.10.4"
+ "@babel/types" "^7.10.4"
+
+"@babel/helper-get-function-arity@^7.10.4":
+ version "7.10.4"
+ resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz#98c1cbea0e2332f33f9a4661b8ce1505b2c19ba2"
+ integrity sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==
+ dependencies:
+ "@babel/types" "^7.10.4"
+
+"@babel/helper-hoist-variables@^7.10.4":
+ version "7.10.4"
+ resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.10.4.tgz#d49b001d1d5a68ca5e6604dda01a6297f7c9381e"
+ integrity sha512-wljroF5PgCk2juF69kanHVs6vrLwIPNp6DLD+Lrl3hoQ3PpPPikaDRNFA+0t81NOoMt2DL6WW/mdU8k4k6ZzuA==
+ dependencies:
+ "@babel/types" "^7.10.4"
+
+"@babel/helper-member-expression-to-functions@^7.12.1":
+ version "7.12.7"
+ resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.7.tgz#aa77bd0396ec8114e5e30787efa78599d874a855"
+ integrity sha512-DCsuPyeWxeHgh1Dus7APn7iza42i/qXqiFPWyBDdOFtvS581JQePsc1F/nD+fHrcswhLlRc2UpYS1NwERxZhHw==
+ dependencies:
+ "@babel/types" "^7.12.7"
+
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.12.5", "@babel/helper-module-imports@^7.8.3":
+ version "7.12.5"
+ resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz#1bfc0229f794988f76ed0a4d4e90860850b54dfb"
+ integrity sha512-SR713Ogqg6++uexFRORf/+nPXMmWIn80TALu0uaFb+iQIUoR7bOC7zBWyzBs5b3tBBJXuyD0cRu1F15GyzjOWA==
+ dependencies:
+ "@babel/types" "^7.12.5"
+
+"@babel/helper-module-transforms@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.12.1.tgz#7954fec71f5b32c48e4b303b437c34453fd7247c"
+ integrity sha512-QQzehgFAZ2bbISiCpmVGfiGux8YVFXQ0abBic2Envhej22DVXV9nCFaS5hIQbkyo1AdGb+gNME2TSh3hYJVV/w==
+ dependencies:
+ "@babel/helper-module-imports" "^7.12.1"
+ "@babel/helper-replace-supers" "^7.12.1"
+ "@babel/helper-simple-access" "^7.12.1"
+ "@babel/helper-split-export-declaration" "^7.11.0"
+ "@babel/helper-validator-identifier" "^7.10.4"
+ "@babel/template" "^7.10.4"
+ "@babel/traverse" "^7.12.1"
+ "@babel/types" "^7.12.1"
+ lodash "^4.17.19"
+
+"@babel/helper-optimise-call-expression@^7.10.4":
+ version "7.12.7"
+ resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.7.tgz#7f94ae5e08721a49467346aa04fd22f750033b9c"
+ integrity sha512-I5xc9oSJ2h59OwyUqjv95HRyzxj53DAubUERgQMrpcCEYQyToeHA+NEcUEsVWB4j53RDeskeBJ0SgRAYHDBckw==
+ dependencies:
+ "@babel/types" "^7.12.7"
+
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+ version "7.10.4"
+ resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375"
+ integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==
+
+"@babel/helper-remap-async-to-generator@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.12.1.tgz#8c4dbbf916314f6047dc05e6a2217074238347fd"
+ integrity sha512-9d0KQCRM8clMPcDwo8SevNs+/9a8yWVVmaE80FGJcEP8N1qToREmWEGnBn8BUlJhYRFz6fqxeRL1sl5Ogsed7A==
+ dependencies:
+ "@babel/helper-annotate-as-pure" "^7.10.4"
+ "@babel/helper-wrap-function" "^7.10.4"
+ "@babel/types" "^7.12.1"
+
+"@babel/helper-replace-supers@^7.12.1":
+ version "7.12.5"
+ resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.12.5.tgz#f009a17543bbbbce16b06206ae73b63d3fca68d9"
+ integrity sha512-5YILoed0ZyIpF4gKcpZitEnXEJ9UoDRki1Ey6xz46rxOzfNMAhVIJMoune1hmPVxh40LRv1+oafz7UsWX+vyWA==
+ dependencies:
+ "@babel/helper-member-expression-to-functions" "^7.12.1"
+ "@babel/helper-optimise-call-expression" "^7.10.4"
+ "@babel/traverse" "^7.12.5"
+ "@babel/types" "^7.12.5"
+
+"@babel/helper-simple-access@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.12.1.tgz#32427e5aa61547d38eb1e6eaf5fd1426fdad9136"
+ integrity sha512-OxBp7pMrjVewSSC8fXDFrHrBcJATOOFssZwv16F3/6Xtc138GHybBfPbm9kfiqQHKhYQrlamWILwlDCeyMFEaA==
+ dependencies:
+ "@babel/types" "^7.12.1"
+
+"@babel/helper-skip-transparent-expression-wrappers@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.12.1.tgz#462dc63a7e435ade8468385c63d2b84cce4b3cbf"
+ integrity sha512-Mf5AUuhG1/OCChOJ/HcADmvcHM42WJockombn8ATJG3OnyiSxBK/Mm5x78BQWvmtXZKHgbjdGL2kin/HOLlZGA==
+ dependencies:
+ "@babel/types" "^7.12.1"
+
+"@babel/helper-split-export-declaration@^7.10.4", "@babel/helper-split-export-declaration@^7.11.0":
+ version "7.11.0"
+ resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz#f8a491244acf6a676158ac42072911ba83ad099f"
+ integrity sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==
+ dependencies:
+ "@babel/types" "^7.11.0"
+
+"@babel/helper-validator-identifier@^7.10.4":
+ version "7.10.4"
+ resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
+ integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
+
+"@babel/helper-validator-option@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.12.1.tgz#175567380c3e77d60ff98a54bb015fe78f2178d9"
+ integrity sha512-YpJabsXlJVWP0USHjnC/AQDTLlZERbON577YUVO/wLpqyj6HAtVYnWaQaN0iUN+1/tWn3c+uKKXjRut5115Y2A==
+
+"@babel/helper-wrap-function@^7.10.4":
+ version "7.12.3"
+ resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.12.3.tgz#3332339fc4d1fbbf1c27d7958c27d34708e990d9"
+ integrity sha512-Cvb8IuJDln3rs6tzjW3Y8UeelAOdnpB8xtQ4sme2MSZ9wOxrbThporC0y/EtE16VAtoyEfLM404Xr1e0OOp+ow==
+ dependencies:
+ "@babel/helper-function-name" "^7.10.4"
+ "@babel/template" "^7.10.4"
+ "@babel/traverse" "^7.10.4"
+ "@babel/types" "^7.10.4"
+
+"@babel/helpers@^7.12.5":
+ version "7.12.5"
+ resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.12.5.tgz#1a1ba4a768d9b58310eda516c449913fe647116e"
+ integrity sha512-lgKGMQlKqA8meJqKsW6rUnc4MdUk35Ln0ATDqdM1a/UpARODdI4j5Y5lVfUScnSNkJcdCRAaWkspykNoFg9sJA==
+ dependencies:
+ "@babel/template" "^7.10.4"
+ "@babel/traverse" "^7.12.5"
+ "@babel/types" "^7.12.5"
+
+"@babel/highlight@^7.10.4":
+ version "7.10.4"
+ resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
+ integrity sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==
+ dependencies:
+ "@babel/helper-validator-identifier" "^7.10.4"
chalk "^2.0.0"
- esutils "^2.0.2"
js-tokens "^4.0.0"
-"@babel/parser@^7.8.6", "@babel/parser@^7.8.7":
- version "7.8.8"
- resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.8.8.tgz#4c3b7ce36db37e0629be1f0d50a571d2f86f6cd4"
- integrity sha512-mO5GWzBPsPf6865iIbzNE0AvkKF3NE+2S3eRUpE+FE07BOAkXh6G+GW/Pj01hhXjve1WScbaIO4UlY1JKeqCcA==
+"@babel/parser@^7.12.7":
+ version "7.12.7"
+ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.7.tgz#fee7b39fe809d0e73e5b25eecaf5780ef3d73056"
+ integrity sha512-oWR02Ubp4xTLCAqPRiNIuMVgNO5Aif/xpXtabhzW2HWUD47XJsAB4Zd/Rg30+XeQA3juXigV7hlquOTmwqLiwg==
-"@babel/plugin-proposal-async-generator-functions@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.8.3.tgz#bad329c670b382589721b27540c7d288601c6e6f"
- integrity sha512-NZ9zLv848JsV3hs8ryEh7Uaz/0KsmPLqv0+PdkDJL1cJy0K4kOCFa8zc1E3mp+RHPQcpdfb/6GovEsW4VDrOMw==
+"@babel/plugin-proposal-async-generator-functions@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.12.1.tgz#dc6c1170e27d8aca99ff65f4925bd06b1c90550e"
+ integrity sha512-d+/o30tJxFxrA1lhzJqiUcEJdI6jKlNregCv5bASeGf2Q4MXmnwH7viDo7nhx1/ohf09oaH8j1GVYG/e3Yqk6A==
dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
- "@babel/helper-remap-async-to-generator" "^7.8.3"
+ "@babel/helper-plugin-utils" "^7.10.4"
+ "@babel/helper-remap-async-to-generator" "^7.12.1"
"@babel/plugin-syntax-async-generators" "^7.8.0"
-"@babel/plugin-proposal-class-properties@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.8.3.tgz#5e06654af5cd04b608915aada9b2a6788004464e"
- integrity sha512-EqFhbo7IosdgPgZggHaNObkmO1kNUe3slaKu54d5OWvy+p9QIKOzK1GAEpAIsZtWVtPXUHSMcT4smvDrCfY4AA==
+"@babel/plugin-proposal-class-properties@^7.12.1", "@babel/plugin-proposal-class-properties@^7.8.3":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.12.1.tgz#a082ff541f2a29a4821065b8add9346c0c16e5de"
+ integrity sha512-cKp3dlQsFsEs5CWKnN7BnSHOd0EOW8EKpEjkoz1pO2E5KzIDNV9Ros1b0CnmbVgAGXJubOYVBOGCT1OmJwOI7w==
dependencies:
- "@babel/helper-create-class-features-plugin" "^7.8.3"
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-create-class-features-plugin" "^7.12.1"
+ "@babel/helper-plugin-utils" "^7.10.4"
"@babel/plugin-proposal-decorators@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.8.3.tgz#2156860ab65c5abf068c3f67042184041066543e"
- integrity sha512-e3RvdvS4qPJVTe288DlXjwKflpfy1hr0j5dz5WpIYYeP7vQZg2WfAEIp8k5/Lwis/m5REXEteIz6rrcDtXXG7w==
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.12.1.tgz#59271439fed4145456c41067450543aee332d15f"
+ integrity sha512-knNIuusychgYN8fGJHONL0RbFxLGawhXOJNLBk75TniTsZZeA+wdkDuv6wp4lGwzQEKjZi6/WYtnb3udNPmQmQ==
dependencies:
- "@babel/helper-create-class-features-plugin" "^7.8.3"
- "@babel/helper-plugin-utils" "^7.8.3"
- "@babel/plugin-syntax-decorators" "^7.8.3"
+ "@babel/helper-create-class-features-plugin" "^7.12.1"
+ "@babel/helper-plugin-utils" "^7.10.4"
+ "@babel/plugin-syntax-decorators" "^7.12.1"
-"@babel/plugin-proposal-dynamic-import@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.8.3.tgz#38c4fe555744826e97e2ae930b0fb4cc07e66054"
- integrity sha512-NyaBbyLFXFLT9FP+zk0kYlUlA8XtCUbehs67F0nnEg7KICgMc2mNkIeu9TYhKzyXMkrapZFwAhXLdnt4IYHy1w==
+"@babel/plugin-proposal-dynamic-import@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.12.1.tgz#43eb5c2a3487ecd98c5c8ea8b5fdb69a2749b2dc"
+ integrity sha512-a4rhUSZFuq5W8/OO8H7BL5zspjnc1FLd9hlOxIK/f7qG4a0qsqk8uvF/ywgBA8/OmjsapjpvaEOYItfGG1qIvQ==
dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-plugin-utils" "^7.10.4"
"@babel/plugin-syntax-dynamic-import" "^7.8.0"
-"@babel/plugin-proposal-json-strings@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.8.3.tgz#da5216b238a98b58a1e05d6852104b10f9a70d6b"
- integrity sha512-KGhQNZ3TVCQG/MjRbAUwuH+14y9q0tpxs1nWWs3pbSleRdDro9SAMMDyye8HhY1gqZ7/NqIc8SKhya0wRDgP1Q==
+"@babel/plugin-proposal-export-namespace-from@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.12.1.tgz#8b9b8f376b2d88f5dd774e4d24a5cc2e3679b6d4"
+ integrity sha512-6CThGf0irEkzujYS5LQcjBx8j/4aQGiVv7J9+2f7pGfxqyKh3WnmVJYW3hdrQjyksErMGBPQrCnHfOtna+WLbw==
dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-plugin-utils" "^7.10.4"
+ "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+
+"@babel/plugin-proposal-json-strings@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.12.1.tgz#d45423b517714eedd5621a9dfdc03fa9f4eb241c"
+ integrity sha512-GoLDUi6U9ZLzlSda2Df++VSqDJg3CG+dR0+iWsv6XRw1rEq+zwt4DirM9yrxW6XWaTpmai1cWJLMfM8qQJf+yw==
+ dependencies:
+ "@babel/helper-plugin-utils" "^7.10.4"
"@babel/plugin-syntax-json-strings" "^7.8.0"
-"@babel/plugin-proposal-nullish-coalescing-operator@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.8.3.tgz#e4572253fdeed65cddeecfdab3f928afeb2fd5d2"
- integrity sha512-TS9MlfzXpXKt6YYomudb/KU7nQI6/xnapG6in1uZxoxDghuSMZsPb6D2fyUwNYSAp4l1iR7QtFOjkqcRYcUsfw==
+"@babel/plugin-proposal-logical-assignment-operators@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.12.1.tgz#f2c490d36e1b3c9659241034a5d2cd50263a2751"
+ integrity sha512-k8ZmVv0JU+4gcUGeCDZOGd0lCIamU/sMtIiX3UWnUc5yzgq6YUGyEolNYD+MLYKfSzgECPcqetVcJP9Afe/aCA==
dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-plugin-utils" "^7.10.4"
+ "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.12.1.tgz#3ed4fff31c015e7f3f1467f190dbe545cd7b046c"
+ integrity sha512-nZY0ESiaQDI1y96+jk6VxMOaL4LPo/QDHBqL+SF3/vl6dHkTwHlOI8L4ZwuRBHgakRBw5zsVylel7QPbbGuYgg==
+ dependencies:
+ "@babel/helper-plugin-utils" "^7.10.4"
"@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
-"@babel/plugin-proposal-object-rest-spread@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.8.3.tgz#eb5ae366118ddca67bed583b53d7554cad9951bb"
- integrity sha512-8qvuPwU/xxUCt78HocNlv0mXXo0wdh9VT1R04WU8HGOfaOob26pF+9P5/lYjN/q7DHOX1bvX60hnhOvuQUJdbA==
+"@babel/plugin-proposal-numeric-separator@^7.12.7":
+ version "7.12.7"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.12.7.tgz#8bf253de8139099fea193b297d23a9d406ef056b"
+ integrity sha512-8c+uy0qmnRTeukiGsjLGy6uVs/TFjJchGXUeBqlG4VWYOdJWkhhVPdQ3uHwbmalfJwv2JsV0qffXP4asRfL2SQ==
dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-plugin-utils" "^7.10.4"
+ "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
+"@babel/plugin-proposal-object-rest-spread@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.12.1.tgz#def9bd03cea0f9b72283dac0ec22d289c7691069"
+ integrity sha512-s6SowJIjzlhx8o7lsFx5zmY4At6CTtDvgNQDdPzkBQucle58A6b/TTeEBYtyDgmcXjUTM+vE8YOGHZzzbc/ioA==
+ dependencies:
+ "@babel/helper-plugin-utils" "^7.10.4"
"@babel/plugin-syntax-object-rest-spread" "^7.8.0"
+ "@babel/plugin-transform-parameters" "^7.12.1"
-"@babel/plugin-proposal-optional-catch-binding@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.8.3.tgz#9dee96ab1650eed88646ae9734ca167ac4a9c5c9"
- integrity sha512-0gkX7J7E+AtAw9fcwlVQj8peP61qhdg/89D5swOkjYbkboA2CVckn3kiyum1DE0wskGb7KJJxBdyEBApDLLVdw==
+"@babel/plugin-proposal-optional-catch-binding@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.12.1.tgz#ccc2421af64d3aae50b558a71cede929a5ab2942"
+ integrity sha512-hFvIjgprh9mMw5v42sJWLI1lzU5L2sznP805zeT6rySVRA0Y18StRhDqhSxlap0oVgItRsB6WSROp4YnJTJz0g==
dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-plugin-utils" "^7.10.4"
"@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
-"@babel/plugin-proposal-optional-chaining@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.8.3.tgz#ae10b3214cb25f7adb1f3bc87ba42ca10b7e2543"
- integrity sha512-QIoIR9abkVn+seDE3OjA08jWcs3eZ9+wJCKSRgo3WdEU2csFYgdScb+8qHB3+WXsGJD55u+5hWCISI7ejXS+kg==
+"@babel/plugin-proposal-optional-chaining@^7.12.7":
+ version "7.12.7"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.12.7.tgz#e02f0ea1b5dc59d401ec16fb824679f683d3303c"
+ integrity sha512-4ovylXZ0PWmwoOvhU2vhnzVNnm88/Sm9nx7V8BPgMvAzn5zDou3/Awy0EjglyubVHasJj+XCEkr/r1X3P5elCA==
dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-plugin-utils" "^7.10.4"
+ "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
"@babel/plugin-syntax-optional-chaining" "^7.8.0"
-"@babel/plugin-proposal-unicode-property-regex@^7.8.3":
- version "7.8.8"
- resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.8.8.tgz#ee3a95e90cdc04fe8cd92ec3279fa017d68a0d1d"
- integrity sha512-EVhjVsMpbhLw9ZfHWSx2iy13Q8Z/eg8e8ccVWt23sWQK5l1UdkoLJPN5w69UA4uITGBnEZD2JOe4QOHycYKv8A==
+"@babel/plugin-proposal-private-methods@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.12.1.tgz#86814f6e7a21374c980c10d38b4493e703f4a389"
+ integrity sha512-mwZ1phvH7/NHK6Kf8LP7MYDogGV+DKB1mryFOEwx5EBNQrosvIczzZFTUmWaeujd5xT6G1ELYWUz3CutMhjE1w==
dependencies:
- "@babel/helper-create-regexp-features-plugin" "^7.8.8"
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-create-class-features-plugin" "^7.12.1"
+ "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-proposal-unicode-property-regex@^7.12.1", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.12.1.tgz#2a183958d417765b9eae334f47758e5d6a82e072"
+ integrity sha512-MYq+l+PvHuw/rKUz1at/vb6nCnQ2gmJBNaM62z0OgH7B2W1D9pvkpYtlti9bGtizNIU1K3zm4bZF9F91efVY0w==
+ dependencies:
+ "@babel/helper-create-regexp-features-plugin" "^7.12.1"
+ "@babel/helper-plugin-utils" "^7.10.4"
"@babel/plugin-syntax-async-generators@^7.8.0":
version "7.8.4"
@@ -453,12 +479,19 @@
dependencies:
"@babel/helper-plugin-utils" "^7.8.0"
-"@babel/plugin-syntax-decorators@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.8.3.tgz#8d2c15a9f1af624b0025f961682a9d53d3001bda"
- integrity sha512-8Hg4dNNT9/LcA1zQlfwuKR8BUc/if7Q7NkTam9sGTcJphLwpf2g4S42uhspQrIrR+dpzE0dtTqBVFoHl8GtnnQ==
+"@babel/plugin-syntax-class-properties@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.1.tgz#bcb297c5366e79bebadef509549cd93b04f19978"
+ integrity sha512-U40A76x5gTwmESz+qiqssqmeEsKvcSyvtgktrm0uzcARAmM9I1jR221f6Oq+GmHrcD+LvZDag1UTOTe2fL3TeA==
dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-decorators@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.12.1.tgz#81a8b535b284476c41be6de06853a8802b98c5dd"
+ integrity sha512-ir9YW5daRrTYiy9UJ2TzdNIJEZu8KclVzDcfSt4iEmOtwQ4llPtWInNKJyKnVXp1vE4bbVd5S31M/im3mYMO1w==
+ dependencies:
+ "@babel/helper-plugin-utils" "^7.10.4"
"@babel/plugin-syntax-dynamic-import@^7.8.0", "@babel/plugin-syntax-dynamic-import@^7.8.3":
version "7.8.3"
@@ -467,6 +500,13 @@
dependencies:
"@babel/helper-plugin-utils" "^7.8.0"
+"@babel/plugin-syntax-export-namespace-from@^7.8.3":
+ version "7.8.3"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz#028964a9ba80dbc094c915c487ad7c4e7a66465a"
+ integrity sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==
+ dependencies:
+ "@babel/helper-plugin-utils" "^7.8.3"
+
"@babel/plugin-syntax-json-strings@^7.8.0":
version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
@@ -474,12 +514,19 @@
dependencies:
"@babel/helper-plugin-utils" "^7.8.0"
-"@babel/plugin-syntax-jsx@^7.2.0", "@babel/plugin-syntax-jsx@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.8.3.tgz#521b06c83c40480f1e58b4fd33b92eceb1d6ea94"
- integrity sha512-WxdW9xyLgBdefoo0Ynn3MRSkhe5tFVxxKNVdnZSh318WrG2e2jH+E9wd/++JsqcLJZPfz87njQJ8j2Upjm0M0A==
+"@babel/plugin-syntax-jsx@^7.0.0", "@babel/plugin-syntax-jsx@^7.2.0", "@babel/plugin-syntax-jsx@^7.8.3":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.1.tgz#9d9d357cc818aa7ae7935917c1257f67677a0926"
+ integrity sha512-1yRi7yAtB0ETgxdY9ti/p2TivUxJkTdhu/ZbF9MshVGqOx1TdB3b7xCXs49Fupgg50N45KcAsRP/ZqWjs9SRjg==
dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
+ version "7.10.4"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
+ integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
+ dependencies:
+ "@babel/helper-plugin-utils" "^7.10.4"
"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0":
version "7.8.3"
@@ -488,6 +535,13 @@
dependencies:
"@babel/helper-plugin-utils" "^7.8.0"
+"@babel/plugin-syntax-numeric-separator@^7.10.4":
+ version "7.10.4"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
+ integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
+ dependencies:
+ "@babel/helper-plugin-utils" "^7.10.4"
+
"@babel/plugin-syntax-object-rest-spread@^7.8.0":
version "7.8.3"
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
@@ -509,369 +563,400 @@
dependencies:
"@babel/helper-plugin-utils" "^7.8.0"
-"@babel/plugin-syntax-top-level-await@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.8.3.tgz#3acdece695e6b13aaf57fc291d1a800950c71391"
- integrity sha512-kwj1j9lL/6Wd0hROD3b/OZZ7MSrZLqqn9RAZ5+cYYsflQ9HZBIKCUkr3+uL1MEJ1NePiUbf98jjiMQSv0NMR9g==
+"@babel/plugin-syntax-top-level-await@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.12.1.tgz#dd6c0b357ac1bb142d98537450a319625d13d2a0"
+ integrity sha512-i7ooMZFS+a/Om0crxZodrTzNEPJHZrlMVGMTEpFAj6rYY/bKCddB0Dk/YxfPuYXOopuhKk/e1jV6h+WUU9XN3A==
dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-plugin-utils" "^7.10.4"
-"@babel/plugin-transform-arrow-functions@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.8.3.tgz#82776c2ed0cd9e1a49956daeb896024c9473b8b6"
- integrity sha512-0MRF+KC8EqH4dbuITCWwPSzsyO3HIWWlm30v8BbbpOrS1B++isGxPnnuq/IZvOX5J2D/p7DQalQm+/2PnlKGxg==
+"@babel/plugin-transform-arrow-functions@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.12.1.tgz#8083ffc86ac8e777fbe24b5967c4b2521f3cb2b3"
+ integrity sha512-5QB50qyN44fzzz4/qxDPQMBCTHgxg3n0xRBLJUmBlLoU/sFvxVWGZF/ZUfMVDQuJUKXaBhbupxIzIfZ6Fwk/0A==
dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-plugin-utils" "^7.10.4"
-"@babel/plugin-transform-async-to-generator@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.8.3.tgz#4308fad0d9409d71eafb9b1a6ee35f9d64b64086"
- integrity sha512-imt9tFLD9ogt56Dd5CI/6XgpukMwd/fLGSrix2httihVe7LOGVPhyhMh1BU5kDM7iHD08i8uUtmV2sWaBFlHVQ==
+"@babel/plugin-transform-async-to-generator@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.12.1.tgz#3849a49cc2a22e9743cbd6b52926d30337229af1"
+ integrity sha512-SDtqoEcarK1DFlRJ1hHRY5HvJUj5kX4qmtpMAm2QnhOlyuMC4TMdCRgW6WXpv93rZeYNeLP22y8Aq2dbcDRM1A==
dependencies:
- "@babel/helper-module-imports" "^7.8.3"
- "@babel/helper-plugin-utils" "^7.8.3"
- "@babel/helper-remap-async-to-generator" "^7.8.3"
+ "@babel/helper-module-imports" "^7.12.1"
+ "@babel/helper-plugin-utils" "^7.10.4"
+ "@babel/helper-remap-async-to-generator" "^7.12.1"
-"@babel/plugin-transform-block-scoped-functions@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.8.3.tgz#437eec5b799b5852072084b3ae5ef66e8349e8a3"
- integrity sha512-vo4F2OewqjbB1+yaJ7k2EJFHlTP3jR634Z9Cj9itpqNjuLXvhlVxgnjsHsdRgASR8xYDrx6onw4vW5H6We0Jmg==
+"@babel/plugin-transform-block-scoped-functions@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.12.1.tgz#f2a1a365bde2b7112e0a6ded9067fdd7c07905d9"
+ integrity sha512-5OpxfuYnSgPalRpo8EWGPzIYf0lHBWORCkj5M0oLBwHdlux9Ri36QqGW3/LR13RSVOAoUUMzoPI/jpE4ABcHoA==
dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-plugin-utils" "^7.10.4"
-"@babel/plugin-transform-block-scoping@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.8.3.tgz#97d35dab66857a437c166358b91d09050c868f3a"
- integrity sha512-pGnYfm7RNRgYRi7bids5bHluENHqJhrV4bCZRwc5GamaWIIs07N4rZECcmJL6ZClwjDz1GbdMZFtPs27hTB06w==
+"@babel/plugin-transform-block-scoping@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.12.1.tgz#f0ee727874b42a208a48a586b84c3d222c2bbef1"
+ integrity sha512-zJyAC9sZdE60r1nVQHblcfCj29Dh2Y0DOvlMkcqSo0ckqjiCwNiUezUKw+RjOCwGfpLRwnAeQ2XlLpsnGkvv9w==
dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
- lodash "^4.17.13"
+ "@babel/helper-plugin-utils" "^7.10.4"
-"@babel/plugin-transform-classes@^7.8.6":
- version "7.8.6"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.8.6.tgz#77534447a477cbe5995ae4aee3e39fbc8090c46d"
- integrity sha512-k9r8qRay/R6v5aWZkrEclEhKO6mc1CCQr2dLsVHBmOQiMpN6I2bpjX3vgnldUWeEI1GHVNByULVxZ4BdP4Hmdg==
+"@babel/plugin-transform-classes@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.12.1.tgz#65e650fcaddd3d88ddce67c0f834a3d436a32db6"
+ integrity sha512-/74xkA7bVdzQTBeSUhLLJgYIcxw/dpEpCdRDiHgPJ3Mv6uC11UhjpOhl72CgqbBCmt1qtssCyB2xnJm1+PFjog==
dependencies:
- "@babel/helper-annotate-as-pure" "^7.8.3"
- "@babel/helper-define-map" "^7.8.3"
- "@babel/helper-function-name" "^7.8.3"
- "@babel/helper-optimise-call-expression" "^7.8.3"
- "@babel/helper-plugin-utils" "^7.8.3"
- "@babel/helper-replace-supers" "^7.8.6"
- "@babel/helper-split-export-declaration" "^7.8.3"
+ "@babel/helper-annotate-as-pure" "^7.10.4"
+ "@babel/helper-define-map" "^7.10.4"
+ "@babel/helper-function-name" "^7.10.4"
+ "@babel/helper-optimise-call-expression" "^7.10.4"
+ "@babel/helper-plugin-utils" "^7.10.4"
+ "@babel/helper-replace-supers" "^7.12.1"
+ "@babel/helper-split-export-declaration" "^7.10.4"
globals "^11.1.0"
-"@babel/plugin-transform-computed-properties@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.8.3.tgz#96d0d28b7f7ce4eb5b120bb2e0e943343c86f81b"
- integrity sha512-O5hiIpSyOGdrQZRQ2ccwtTVkgUDBBiCuK//4RJ6UfePllUTCENOzKxfh6ulckXKc0DixTFLCfb2HVkNA7aDpzA==
+"@babel/plugin-transform-computed-properties@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.12.1.tgz#d68cf6c9b7f838a8a4144badbe97541ea0904852"
+ integrity sha512-vVUOYpPWB7BkgUWPo4C44mUQHpTZXakEqFjbv8rQMg7TC6S6ZhGZ3otQcRH6u7+adSlE5i0sp63eMC/XGffrzg==
dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-plugin-utils" "^7.10.4"
-"@babel/plugin-transform-destructuring@^7.8.3":
- version "7.8.8"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.8.8.tgz#fadb2bc8e90ccaf5658de6f8d4d22ff6272a2f4b"
- integrity sha512-eRJu4Vs2rmttFCdhPUM3bV0Yo/xPSdPw6ML9KHs/bjB4bLA5HXlbvYXPOD5yASodGod+krjYx21xm1QmL8dCJQ==
+"@babel/plugin-transform-destructuring@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.12.1.tgz#b9a570fe0d0a8d460116413cb4f97e8e08b2f847"
+ integrity sha512-fRMYFKuzi/rSiYb2uRLiUENJOKq4Gnl+6qOv5f8z0TZXg3llUwUhsNNwrwaT/6dUhJTzNpBr+CUvEWBtfNY1cw==
dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-plugin-utils" "^7.10.4"
-"@babel/plugin-transform-dotall-regex@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.8.3.tgz#c3c6ec5ee6125c6993c5cbca20dc8621a9ea7a6e"
- integrity sha512-kLs1j9Nn4MQoBYdRXH6AeaXMbEJFaFu/v1nQkvib6QzTj8MZI5OQzqmD83/2jEM1z0DLilra5aWO5YpyC0ALIw==
+"@babel/plugin-transform-dotall-regex@^7.12.1", "@babel/plugin-transform-dotall-regex@^7.4.4":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.12.1.tgz#a1d16c14862817b6409c0a678d6f9373ca9cd975"
+ integrity sha512-B2pXeRKoLszfEW7J4Hg9LoFaWEbr/kzo3teWHmtFCszjRNa/b40f9mfeqZsIDLLt/FjwQ6pz/Gdlwy85xNckBA==
dependencies:
- "@babel/helper-create-regexp-features-plugin" "^7.8.3"
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-create-regexp-features-plugin" "^7.12.1"
+ "@babel/helper-plugin-utils" "^7.10.4"
-"@babel/plugin-transform-duplicate-keys@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.8.3.tgz#8d12df309aa537f272899c565ea1768e286e21f1"
- integrity sha512-s8dHiBUbcbSgipS4SMFuWGqCvyge5V2ZeAWzR6INTVC3Ltjig/Vw1G2Gztv0vU/hRG9X8IvKvYdoksnUfgXOEQ==
+"@babel/plugin-transform-duplicate-keys@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.12.1.tgz#745661baba295ac06e686822797a69fbaa2ca228"
+ integrity sha512-iRght0T0HztAb/CazveUpUQrZY+aGKKaWXMJ4uf9YJtqxSUe09j3wteztCUDRHs+SRAL7yMuFqUsLoAKKzgXjw==
dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-plugin-utils" "^7.10.4"
-"@babel/plugin-transform-exponentiation-operator@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.8.3.tgz#581a6d7f56970e06bf51560cd64f5e947b70d7b7"
- integrity sha512-zwIpuIymb3ACcInbksHaNcR12S++0MDLKkiqXHl3AzpgdKlFNhog+z/K0+TGW+b0w5pgTq4H6IwV/WhxbGYSjQ==
+"@babel/plugin-transform-exponentiation-operator@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.12.1.tgz#b0f2ed356ba1be1428ecaf128ff8a24f02830ae0"
+ integrity sha512-7tqwy2bv48q+c1EHbXK0Zx3KXd2RVQp6OC7PbwFNt/dPTAV3Lu5sWtWuAj8owr5wqtWnqHfl2/mJlUmqkChKug==
dependencies:
- "@babel/helper-builder-binary-assignment-operator-visitor" "^7.8.3"
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-builder-binary-assignment-operator-visitor" "^7.10.4"
+ "@babel/helper-plugin-utils" "^7.10.4"
-"@babel/plugin-transform-for-of@^7.8.6":
- version "7.8.6"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.8.6.tgz#a051bd1b402c61af97a27ff51b468321c7c2a085"
- integrity sha512-M0pw4/1/KI5WAxPsdcUL/w2LJ7o89YHN3yLkzNjg7Yl15GlVGgzHyCU+FMeAxevHGsLVmUqbirlUIKTafPmzdw==
+"@babel/plugin-transform-for-of@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.12.1.tgz#07640f28867ed16f9511c99c888291f560921cfa"
+ integrity sha512-Zaeq10naAsuHo7heQvyV0ptj4dlZJwZgNAtBYBnu5nNKJoW62m0zKcIEyVECrUKErkUkg6ajMy4ZfnVZciSBhg==
dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-plugin-utils" "^7.10.4"
-"@babel/plugin-transform-function-name@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.8.3.tgz#279373cb27322aaad67c2683e776dfc47196ed8b"
- integrity sha512-rO/OnDS78Eifbjn5Py9v8y0aR+aSYhDhqAwVfsTl0ERuMZyr05L1aFSCJnbv2mmsLkit/4ReeQ9N2BgLnOcPCQ==
+"@babel/plugin-transform-function-name@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.12.1.tgz#2ec76258c70fe08c6d7da154003a480620eba667"
+ integrity sha512-JF3UgJUILoFrFMEnOJLJkRHSk6LUSXLmEFsA23aR2O5CSLUxbeUX1IZ1YQ7Sn0aXb601Ncwjx73a+FVqgcljVw==
dependencies:
- "@babel/helper-function-name" "^7.8.3"
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-function-name" "^7.10.4"
+ "@babel/helper-plugin-utils" "^7.10.4"
-"@babel/plugin-transform-literals@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.8.3.tgz#aef239823d91994ec7b68e55193525d76dbd5dc1"
- integrity sha512-3Tqf8JJ/qB7TeldGl+TT55+uQei9JfYaregDcEAyBZ7akutriFrt6C/wLYIer6OYhleVQvH/ntEhjE/xMmy10A==
+"@babel/plugin-transform-literals@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.12.1.tgz#d73b803a26b37017ddf9d3bb8f4dc58bfb806f57"
+ integrity sha512-+PxVGA+2Ag6uGgL0A5f+9rklOnnMccwEBzwYFL3EUaKuiyVnUipyXncFcfjSkbimLrODoqki1U9XxZzTvfN7IQ==
dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-plugin-utils" "^7.10.4"
-"@babel/plugin-transform-member-expression-literals@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.8.3.tgz#963fed4b620ac7cbf6029c755424029fa3a40410"
- integrity sha512-3Wk2EXhnw+rP+IDkK6BdtPKsUE5IeZ6QOGrPYvw52NwBStw9V1ZVzxgK6fSKSxqUvH9eQPR3tm3cOq79HlsKYA==
+"@babel/plugin-transform-member-expression-literals@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.12.1.tgz#496038602daf1514a64d43d8e17cbb2755e0c3ad"
+ integrity sha512-1sxePl6z9ad0gFMB9KqmYofk34flq62aqMt9NqliS/7hPEpURUCMbyHXrMPlo282iY7nAvUB1aQd5mg79UD9Jg==
dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-plugin-utils" "^7.10.4"
-"@babel/plugin-transform-modules-amd@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.8.3.tgz#65606d44616b50225e76f5578f33c568a0b876a5"
- integrity sha512-MadJiU3rLKclzT5kBH4yxdry96odTUwuqrZM+GllFI/VhxfPz+k9MshJM+MwhfkCdxxclSbSBbUGciBngR+kEQ==
+"@babel/plugin-transform-modules-amd@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.12.1.tgz#3154300b026185666eebb0c0ed7f8415fefcf6f9"
+ integrity sha512-tDW8hMkzad5oDtzsB70HIQQRBiTKrhfgwC/KkJeGsaNFTdWhKNt/BiE8c5yj19XiGyrxpbkOfH87qkNg1YGlOQ==
dependencies:
- "@babel/helper-module-transforms" "^7.8.3"
- "@babel/helper-plugin-utils" "^7.8.3"
- babel-plugin-dynamic-import-node "^2.3.0"
+ "@babel/helper-module-transforms" "^7.12.1"
+ "@babel/helper-plugin-utils" "^7.10.4"
+ babel-plugin-dynamic-import-node "^2.3.3"
-"@babel/plugin-transform-modules-commonjs@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.8.3.tgz#df251706ec331bd058a34bdd72613915f82928a5"
- integrity sha512-JpdMEfA15HZ/1gNuB9XEDlZM1h/gF/YOH7zaZzQu2xCFRfwc01NXBMHHSTT6hRjlXJJs5x/bfODM3LiCk94Sxg==
+"@babel/plugin-transform-modules-commonjs@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.12.1.tgz#fa403124542636c786cf9b460a0ffbb48a86e648"
+ integrity sha512-dY789wq6l0uLY8py9c1B48V8mVL5gZh/+PQ5ZPrylPYsnAvnEMjqsUXkuoDVPeVK+0VyGar+D08107LzDQ6pag==
dependencies:
- "@babel/helper-module-transforms" "^7.8.3"
- "@babel/helper-plugin-utils" "^7.8.3"
- "@babel/helper-simple-access" "^7.8.3"
- babel-plugin-dynamic-import-node "^2.3.0"
+ "@babel/helper-module-transforms" "^7.12.1"
+ "@babel/helper-plugin-utils" "^7.10.4"
+ "@babel/helper-simple-access" "^7.12.1"
+ babel-plugin-dynamic-import-node "^2.3.3"
-"@babel/plugin-transform-modules-systemjs@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.8.3.tgz#d8bbf222c1dbe3661f440f2f00c16e9bb7d0d420"
- integrity sha512-8cESMCJjmArMYqa9AO5YuMEkE4ds28tMpZcGZB/jl3n0ZzlsxOAi3mC+SKypTfT8gjMupCnd3YiXCkMjj2jfOg==
+"@babel/plugin-transform-modules-systemjs@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.12.1.tgz#663fea620d593c93f214a464cd399bf6dc683086"
+ integrity sha512-Hn7cVvOavVh8yvW6fLwveFqSnd7rbQN3zJvoPNyNaQSvgfKmDBO9U1YL9+PCXGRlZD9tNdWTy5ACKqMuzyn32Q==
dependencies:
- "@babel/helper-hoist-variables" "^7.8.3"
- "@babel/helper-module-transforms" "^7.8.3"
- "@babel/helper-plugin-utils" "^7.8.3"
- babel-plugin-dynamic-import-node "^2.3.0"
+ "@babel/helper-hoist-variables" "^7.10.4"
+ "@babel/helper-module-transforms" "^7.12.1"
+ "@babel/helper-plugin-utils" "^7.10.4"
+ "@babel/helper-validator-identifier" "^7.10.4"
+ babel-plugin-dynamic-import-node "^2.3.3"
-"@babel/plugin-transform-modules-umd@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.8.3.tgz#592d578ce06c52f5b98b02f913d653ffe972661a"
- integrity sha512-evhTyWhbwbI3/U6dZAnx/ePoV7H6OUG+OjiJFHmhr9FPn0VShjwC2kdxqIuQ/+1P50TMrneGzMeyMTFOjKSnAw==
+"@babel/plugin-transform-modules-umd@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.12.1.tgz#eb5a218d6b1c68f3d6217b8fa2cc82fec6547902"
+ integrity sha512-aEIubCS0KHKM0zUos5fIoQm+AZUMt1ZvMpqz0/H5qAQ7vWylr9+PLYurT+Ic7ID/bKLd4q8hDovaG3Zch2uz5Q==
dependencies:
- "@babel/helper-module-transforms" "^7.8.3"
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-module-transforms" "^7.12.1"
+ "@babel/helper-plugin-utils" "^7.10.4"
-"@babel/plugin-transform-named-capturing-groups-regex@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.8.3.tgz#a2a72bffa202ac0e2d0506afd0939c5ecbc48c6c"
- integrity sha512-f+tF/8UVPU86TrCb06JoPWIdDpTNSGGcAtaD9mLP0aYGA0OS0j7j7DHJR0GTFrUZPUU6loZhbsVZgTh0N+Qdnw==
+"@babel/plugin-transform-named-capturing-groups-regex@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.12.1.tgz#b407f5c96be0d9f5f88467497fa82b30ac3e8753"
+ integrity sha512-tB43uQ62RHcoDp9v2Nsf+dSM8sbNodbEicbQNA53zHz8pWUhsgHSJCGpt7daXxRydjb0KnfmB+ChXOv3oADp1Q==
dependencies:
- "@babel/helper-create-regexp-features-plugin" "^7.8.3"
+ "@babel/helper-create-regexp-features-plugin" "^7.12.1"
-"@babel/plugin-transform-new-target@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.8.3.tgz#60cc2ae66d85c95ab540eb34babb6434d4c70c43"
- integrity sha512-QuSGysibQpyxexRyui2vca+Cmbljo8bcRckgzYV4kRIsHpVeyeC3JDO63pY+xFZ6bWOBn7pfKZTqV4o/ix9sFw==
+"@babel/plugin-transform-new-target@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.12.1.tgz#80073f02ee1bb2d365c3416490e085c95759dec0"
+ integrity sha512-+eW/VLcUL5L9IvJH7rT1sT0CzkdUTvPrXC2PXTn/7z7tXLBuKvezYbGdxD5WMRoyvyaujOq2fWoKl869heKjhw==
dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-plugin-utils" "^7.10.4"
-"@babel/plugin-transform-object-super@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.8.3.tgz#ebb6a1e7a86ffa96858bd6ac0102d65944261725"
- integrity sha512-57FXk+gItG/GejofIyLIgBKTas4+pEU47IXKDBWFTxdPd7F80H8zybyAY7UoblVfBhBGs2EKM+bJUu2+iUYPDQ==
+"@babel/plugin-transform-object-super@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.12.1.tgz#4ea08696b8d2e65841d0c7706482b048bed1066e"
+ integrity sha512-AvypiGJH9hsquNUn+RXVcBdeE3KHPZexWRdimhuV59cSoOt5kFBmqlByorAeUlGG2CJWd0U+4ZtNKga/TB0cAw==
dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
- "@babel/helper-replace-supers" "^7.8.3"
+ "@babel/helper-plugin-utils" "^7.10.4"
+ "@babel/helper-replace-supers" "^7.12.1"
-"@babel/plugin-transform-parameters@^7.8.7":
- version "7.8.8"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.8.8.tgz#0381de466c85d5404565243660c4496459525daf"
- integrity sha512-hC4Ld/Ulpf1psQciWWwdnUspQoQco2bMzSrwU6TmzRlvoYQe4rQFy9vnCZDTlVeCQj0JPfL+1RX0V8hCJvkgBA==
+"@babel/plugin-transform-parameters@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.12.1.tgz#d2e963b038771650c922eff593799c96d853255d"
+ integrity sha512-xq9C5EQhdPK23ZeCdMxl8bbRnAgHFrw5EOC3KJUsSylZqdkCaFEXxGSBuTSObOpiiHHNyb82es8M1QYgfQGfNg==
dependencies:
- "@babel/helper-call-delegate" "^7.8.7"
- "@babel/helper-get-function-arity" "^7.8.3"
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-plugin-utils" "^7.10.4"
-"@babel/plugin-transform-property-literals@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.8.3.tgz#33194300d8539c1ed28c62ad5087ba3807b98263"
- integrity sha512-uGiiXAZMqEoQhRWMK17VospMZh5sXWg+dlh2soffpkAl96KAm+WZuJfa6lcELotSRmooLqg0MWdH6UUq85nmmg==
+"@babel/plugin-transform-property-literals@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.12.1.tgz#41bc81200d730abb4456ab8b3fbd5537b59adecd"
+ integrity sha512-6MTCR/mZ1MQS+AwZLplX4cEySjCpnIF26ToWo942nqn8hXSm7McaHQNeGx/pt7suI1TWOWMfa/NgBhiqSnX0cQ==
dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-plugin-utils" "^7.10.4"
-"@babel/plugin-transform-regenerator@^7.8.7":
- version "7.8.7"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.8.7.tgz#5e46a0dca2bee1ad8285eb0527e6abc9c37672f8"
- integrity sha512-TIg+gAl4Z0a3WmD3mbYSk+J9ZUH6n/Yc57rtKRnlA/7rcCvpekHXe0CMZHP1gYp7/KLe9GHTuIba0vXmls6drA==
+"@babel/plugin-transform-regenerator@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.12.1.tgz#5f0a28d842f6462281f06a964e88ba8d7ab49753"
+ integrity sha512-gYrHqs5itw6i4PflFX3OdBPMQdPbF4bj2REIUxlMRUFk0/ZOAIpDFuViuxPjUL7YC8UPnf+XG7/utJvqXdPKng==
dependencies:
regenerator-transform "^0.14.2"
-"@babel/plugin-transform-reserved-words@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.8.3.tgz#9a0635ac4e665d29b162837dd3cc50745dfdf1f5"
- integrity sha512-mwMxcycN3omKFDjDQUl+8zyMsBfjRFr0Zn/64I41pmjv4NJuqcYlEtezwYtw9TFd9WR1vN5kiM+O0gMZzO6L0A==
+"@babel/plugin-transform-reserved-words@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.12.1.tgz#6fdfc8cc7edcc42b36a7c12188c6787c873adcd8"
+ integrity sha512-pOnUfhyPKvZpVyBHhSBoX8vfA09b7r00Pmm1sH+29ae2hMTKVmSp4Ztsr8KBKjLjx17H0eJqaRC3bR2iThM54A==
dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-plugin-utils" "^7.10.4"
-"@babel/plugin-transform-runtime@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.8.3.tgz#c0153bc0a5375ebc1f1591cb7eea223adea9f169"
- integrity sha512-/vqUt5Yh+cgPZXXjmaG9NT8aVfThKk7G4OqkVhrXqwsC5soMn/qTCxs36rZ2QFhpfTJcjw4SNDIZ4RUb8OL4jQ==
+"@babel/plugin-transform-runtime@^7.11.0":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.12.1.tgz#04b792057eb460389ff6a4198e377614ea1e7ba5"
+ integrity sha512-Ac/H6G9FEIkS2tXsZjL4RAdS3L3WHxci0usAnz7laPWUmFiGtj7tIASChqKZMHTSQTQY6xDbOq+V1/vIq3QrWg==
dependencies:
- "@babel/helper-module-imports" "^7.8.3"
- "@babel/helper-plugin-utils" "^7.8.3"
+ "@babel/helper-module-imports" "^7.12.1"
+ "@babel/helper-plugin-utils" "^7.10.4"
resolve "^1.8.1"
semver "^5.5.1"
-"@babel/plugin-transform-shorthand-properties@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.8.3.tgz#28545216e023a832d4d3a1185ed492bcfeac08c8"
- integrity sha512-I9DI6Odg0JJwxCHzbzW08ggMdCezoWcuQRz3ptdudgwaHxTjxw5HgdFJmZIkIMlRymL6YiZcped4TTCB0JcC8w==
- dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-spread@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.8.3.tgz#9c8ffe8170fdfb88b114ecb920b82fb6e95fe5e8"
- integrity sha512-CkuTU9mbmAoFOI1tklFWYYbzX5qCIZVXPVy0jpXgGwkplCndQAa58s2jr66fTeQnA64bDox0HL4U56CFYoyC7g==
- dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-sticky-regex@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.8.3.tgz#be7a1290f81dae767475452199e1f76d6175b100"
- integrity sha512-9Spq0vGCD5Bb4Z/ZXXSK5wbbLFMG085qd2vhL1JYu1WcQ5bXqZBAYRzU1d+p79GcHs2szYv5pVQCX13QgldaWw==
- dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
- "@babel/helper-regex" "^7.8.3"
-
-"@babel/plugin-transform-template-literals@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.8.3.tgz#7bfa4732b455ea6a43130adc0ba767ec0e402a80"
- integrity sha512-820QBtykIQOLFT8NZOcTRJ1UNuztIELe4p9DCgvj4NK+PwluSJ49we7s9FB1HIGNIYT7wFUJ0ar2QpCDj0escQ==
- dependencies:
- "@babel/helper-annotate-as-pure" "^7.8.3"
- "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-typeof-symbol@^7.8.4":
- version "7.8.4"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.8.4.tgz#ede4062315ce0aaf8a657a920858f1a2f35fc412"
- integrity sha512-2QKyfjGdvuNfHsb7qnBBlKclbD4CfshH2KvDabiijLMGXPHJXGxtDzwIF7bQP+T0ysw8fYTtxPafgfs/c1Lrqg==
- dependencies:
- "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/plugin-transform-unicode-regex@^7.8.3":
- version "7.8.3"
- resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.8.3.tgz#0cef36e3ba73e5c57273effb182f46b91a1ecaad"
- integrity sha512-+ufgJjYdmWfSQ+6NS9VGUR2ns8cjJjYbrbi11mZBTaWm+Fui/ncTLFF28Ei1okavY+xkojGr1eJxNsWYeA5aZw==
- dependencies:
- "@babel/helper-create-regexp-features-plugin" "^7.8.3"
- "@babel/helper-plugin-utils" "^7.8.3"
-
-"@babel/preset-env@^7.8.4":
- version "7.8.7"
- resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.8.7.tgz#1fc7d89c7f75d2d70c2b6768de6c2e049b3cb9db"
- integrity sha512-BYftCVOdAYJk5ASsznKAUl53EMhfBbr8CJ1X+AJLfGPscQkwJFiaV/Wn9DPH/7fzm2v6iRYJKYHSqyynTGw0nw==
- dependencies:
- "@babel/compat-data" "^7.8.6"
- "@babel/helper-compilation-targets" "^7.8.7"
- "@babel/helper-module-imports" "^7.8.3"
- "@babel/helper-plugin-utils" "^7.8.3"
- "@babel/plugin-proposal-async-generator-functions" "^7.8.3"
- "@babel/plugin-proposal-dynamic-import" "^7.8.3"
- "@babel/plugin-proposal-json-strings" "^7.8.3"
- "@babel/plugin-proposal-nullish-coalescing-operator" "^7.8.3"
- "@babel/plugin-proposal-object-rest-spread" "^7.8.3"
- "@babel/plugin-proposal-optional-catch-binding" "^7.8.3"
- "@babel/plugin-proposal-optional-chaining" "^7.8.3"
- "@babel/plugin-proposal-unicode-property-regex" "^7.8.3"
+"@babel/plugin-transform-shorthand-properties@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.12.1.tgz#0bf9cac5550fce0cfdf043420f661d645fdc75e3"
+ integrity sha512-GFZS3c/MhX1OusqB1MZ1ct2xRzX5ppQh2JU1h2Pnfk88HtFTM+TWQqJNfwkmxtPQtb/s1tk87oENfXJlx7rSDw==
+ dependencies:
+ "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-spread@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.12.1.tgz#527f9f311be4ec7fdc2b79bb89f7bf884b3e1e1e"
+ integrity sha512-vuLp8CP0BE18zVYjsEBZ5xoCecMK6LBMMxYzJnh01rxQRvhNhH1csMMmBfNo5tGpGO+NhdSNW2mzIvBu3K1fng==
+ dependencies:
+ "@babel/helper-plugin-utils" "^7.10.4"
+ "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
+
+"@babel/plugin-transform-sticky-regex@^7.12.7":
+ version "7.12.7"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.12.7.tgz#560224613ab23987453948ed21d0b0b193fa7fad"
+ integrity sha512-VEiqZL5N/QvDbdjfYQBhruN0HYjSPjC4XkeqW4ny/jNtH9gcbgaqBIXYEZCNnESMAGs0/K/R7oFGMhOyu/eIxg==
+ dependencies:
+ "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-template-literals@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.12.1.tgz#b43ece6ed9a79c0c71119f576d299ef09d942843"
+ integrity sha512-b4Zx3KHi+taXB1dVRBhVJtEPi9h1THCeKmae2qP0YdUHIFhVjtpqqNfxeVAa1xeHVhAy4SbHxEwx5cltAu5apw==
+ dependencies:
+ "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-typeof-symbol@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.12.1.tgz#9ca6be343d42512fbc2e68236a82ae64bc7af78a"
+ integrity sha512-EPGgpGy+O5Kg5pJFNDKuxt9RdmTgj5sgrus2XVeMp/ZIbOESadgILUbm50SNpghOh3/6yrbsH+NB5+WJTmsA7Q==
+ dependencies:
+ "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-unicode-escapes@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.12.1.tgz#5232b9f81ccb07070b7c3c36c67a1b78f1845709"
+ integrity sha512-I8gNHJLIc7GdApm7wkVnStWssPNbSRMPtgHdmH3sRM1zopz09UWPS4x5V4n1yz/MIWTVnJ9sp6IkuXdWM4w+2Q==
+ dependencies:
+ "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-unicode-regex@^7.12.1":
+ version "7.12.1"
+ resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.12.1.tgz#cc9661f61390db5c65e3febaccefd5c6ac3faecb"
+ integrity sha512-SqH4ClNngh/zGwHZOOQMTD+e8FGWexILV+ePMyiDJttAWRh5dhDL8rcl5lSgU3Huiq6Zn6pWTMvdPAb21Dwdyg==
+ dependencies:
+ "@babel/helper-create-regexp-features-plugin" "^7.12.1"
+ "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/preset-env@^7.11.0":
+ version "7.12.7"
+ resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.12.7.tgz#54ea21dbe92caf6f10cb1a0a576adc4ebf094b55"
+ integrity sha512-OnNdfAr1FUQg7ksb7bmbKoby4qFOHw6DKWWUNB9KqnnCldxhxJlP+21dpyaWFmf2h0rTbOkXJtAGevY3XW1eew==
+ dependencies:
+ "@babel/compat-data" "^7.12.7"
+ "@babel/helper-compilation-targets" "^7.12.5"
+ "@babel/helper-module-imports" "^7.12.5"
+ "@babel/helper-plugin-utils" "^7.10.4"
+ "@babel/helper-validator-option" "^7.12.1"
+ "@babel/plugin-proposal-async-generator-functions" "^7.12.1"
+ "@babel/plugin-proposal-class-properties" "^7.12.1"
+ "@babel/plugin-proposal-dynamic-import" "^7.12.1"
+ "@babel/plugin-proposal-export-namespace-from" "^7.12.1"
+ "@babel/plugin-proposal-json-strings" "^7.12.1"
+ "@babel/plugin-proposal-logical-assignment-operators" "^7.12.1"
+ "@babel/plugin-proposal-nullish-coalescing-operator" "^7.12.1"
+ "@babel/plugin-proposal-numeric-separator" "^7.12.7"
+ "@babel/plugin-proposal-object-rest-spread" "^7.12.1"
+ "@babel/plugin-proposal-optional-catch-binding" "^7.12.1"
+ "@babel/plugin-proposal-optional-chaining" "^7.12.7"
+ "@babel/plugin-proposal-private-methods" "^7.12.1"
+ "@babel/plugin-proposal-unicode-property-regex" "^7.12.1"
"@babel/plugin-syntax-async-generators" "^7.8.0"
+ "@babel/plugin-syntax-class-properties" "^7.12.1"
"@babel/plugin-syntax-dynamic-import" "^7.8.0"
+ "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
"@babel/plugin-syntax-json-strings" "^7.8.0"
+ "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
"@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+ "@babel/plugin-syntax-numeric-separator" "^7.10.4"
"@babel/plugin-syntax-object-rest-spread" "^7.8.0"
"@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
"@babel/plugin-syntax-optional-chaining" "^7.8.0"
- "@babel/plugin-syntax-top-level-await" "^7.8.3"
- "@babel/plugin-transform-arrow-functions" "^7.8.3"
- "@babel/plugin-transform-async-to-generator" "^7.8.3"
- "@babel/plugin-transform-block-scoped-functions" "^7.8.3"
- "@babel/plugin-transform-block-scoping" "^7.8.3"
- "@babel/plugin-transform-classes" "^7.8.6"
- "@babel/plugin-transform-computed-properties" "^7.8.3"
- "@babel/plugin-transform-destructuring" "^7.8.3"
- "@babel/plugin-transform-dotall-regex" "^7.8.3"
- "@babel/plugin-transform-duplicate-keys" "^7.8.3"
- "@babel/plugin-transform-exponentiation-operator" "^7.8.3"
- "@babel/plugin-transform-for-of" "^7.8.6"
- "@babel/plugin-transform-function-name" "^7.8.3"
- "@babel/plugin-transform-literals" "^7.8.3"
- "@babel/plugin-transform-member-expression-literals" "^7.8.3"
- "@babel/plugin-transform-modules-amd" "^7.8.3"
- "@babel/plugin-transform-modules-commonjs" "^7.8.3"
- "@babel/plugin-transform-modules-systemjs" "^7.8.3"
- "@babel/plugin-transform-modules-umd" "^7.8.3"
- "@babel/plugin-transform-named-capturing-groups-regex" "^7.8.3"
- "@babel/plugin-transform-new-target" "^7.8.3"
- "@babel/plugin-transform-object-super" "^7.8.3"
- "@babel/plugin-transform-parameters" "^7.8.7"
- "@babel/plugin-transform-property-literals" "^7.8.3"
- "@babel/plugin-transform-regenerator" "^7.8.7"
- "@babel/plugin-transform-reserved-words" "^7.8.3"
- "@babel/plugin-transform-shorthand-properties" "^7.8.3"
- "@babel/plugin-transform-spread" "^7.8.3"
- "@babel/plugin-transform-sticky-regex" "^7.8.3"
- "@babel/plugin-transform-template-literals" "^7.8.3"
- "@babel/plugin-transform-typeof-symbol" "^7.8.4"
- "@babel/plugin-transform-unicode-regex" "^7.8.3"
- "@babel/types" "^7.8.7"
- browserslist "^4.8.5"
- core-js-compat "^3.6.2"
- invariant "^2.2.2"
- levenary "^1.1.1"
+ "@babel/plugin-syntax-top-level-await" "^7.12.1"
+ "@babel/plugin-transform-arrow-functions" "^7.12.1"
+ "@babel/plugin-transform-async-to-generator" "^7.12.1"
+ "@babel/plugin-transform-block-scoped-functions" "^7.12.1"
+ "@babel/plugin-transform-block-scoping" "^7.12.1"
+ "@babel/plugin-transform-classes" "^7.12.1"
+ "@babel/plugin-transform-computed-properties" "^7.12.1"
+ "@babel/plugin-transform-destructuring" "^7.12.1"
+ "@babel/plugin-transform-dotall-regex" "^7.12.1"
+ "@babel/plugin-transform-duplicate-keys" "^7.12.1"
+ "@babel/plugin-transform-exponentiation-operator" "^7.12.1"
+ "@babel/plugin-transform-for-of" "^7.12.1"
+ "@babel/plugin-transform-function-name" "^7.12.1"
+ "@babel/plugin-transform-literals" "^7.12.1"
+ "@babel/plugin-transform-member-expression-literals" "^7.12.1"
+ "@babel/plugin-transform-modules-amd" "^7.12.1"
+ "@babel/plugin-transform-modules-commonjs" "^7.12.1"
+ "@babel/plugin-transform-modules-systemjs" "^7.12.1"
+ "@babel/plugin-transform-modules-umd" "^7.12.1"
+ "@babel/plugin-transform-named-capturing-groups-regex" "^7.12.1"
+ "@babel/plugin-transform-new-target" "^7.12.1"
+ "@babel/plugin-transform-object-super" "^7.12.1"
+ "@babel/plugin-transform-parameters" "^7.12.1"
+ "@babel/plugin-transform-property-literals" "^7.12.1"
+ "@babel/plugin-transform-regenerator" "^7.12.1"
+ "@babel/plugin-transform-reserved-words" "^7.12.1"
+ "@babel/plugin-transform-shorthand-properties" "^7.12.1"
+ "@babel/plugin-transform-spread" "^7.12.1"
+ "@babel/plugin-transform-sticky-regex" "^7.12.7"
+ "@babel/plugin-transform-template-literals" "^7.12.1"
+ "@babel/plugin-transform-typeof-symbol" "^7.12.1"
+ "@babel/plugin-transform-unicode-escapes" "^7.12.1"
+ "@babel/plugin-transform-unicode-regex" "^7.12.1"
+ "@babel/preset-modules" "^0.1.3"
+ "@babel/types" "^7.12.7"
+ core-js-compat "^3.7.0"
semver "^5.5.0"
-"@babel/runtime@^7.8.4":
- version "7.8.7"
- resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.7.tgz#8fefce9802db54881ba59f90bb28719b4996324d"
- integrity sha512-+AATMUFppJDw6aiR5NVPHqIQBlV/Pj8wY/EZH+lmvRdUo9xBaz/rF3alAwFJQavvKfeOlPE7oaaDHVbcySbCsg==
+"@babel/preset-modules@^0.1.3":
+ version "0.1.4"
+ resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.4.tgz#362f2b68c662842970fdb5e254ffc8fc1c2e415e"
+ integrity sha512-J36NhwnfdzpmH41M1DrnkkgAqhZaqr/NBdPfQ677mLzlaXo+oDiv1deyCDtgAhz8p328otdob0Du7+xgHGZbKg==
+ dependencies:
+ "@babel/helper-plugin-utils" "^7.0.0"
+ "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
+ "@babel/plugin-transform-dotall-regex" "^7.4.4"
+ "@babel/types" "^7.4.4"
+ esutils "^2.0.2"
+
+"@babel/runtime@^7.11.0", "@babel/runtime@^7.8.4":
+ version "7.12.5"
+ resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
+ integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
dependencies:
regenerator-runtime "^0.13.4"
-"@babel/template@^7.8.3", "@babel/template@^7.8.6":
- version "7.8.6"
- resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.6.tgz#86b22af15f828dfb086474f964dcc3e39c43ce2b"
- integrity sha512-zbMsPMy/v0PWFZEhQJ66bqjhH+z0JgMoBWuikXybgG3Gkd/3t5oQ1Rw2WQhnSrsOmsKXnZOx15tkC4qON/+JPg==
- dependencies:
- "@babel/code-frame" "^7.8.3"
- "@babel/parser" "^7.8.6"
- "@babel/types" "^7.8.6"
-
-"@babel/traverse@^7.8.3", "@babel/traverse@^7.8.4", "@babel/traverse@^7.8.6":
- version "7.8.6"
- resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.8.6.tgz#acfe0c64e1cd991b3e32eae813a6eb564954b5ff"
- integrity sha512-2B8l0db/DPi8iinITKuo7cbPznLCEk0kCxDoB9/N6gGNg/gxOXiR/IcymAFPiBwk5w6TtQ27w4wpElgp9btR9A==
- dependencies:
- "@babel/code-frame" "^7.8.3"
- "@babel/generator" "^7.8.6"
- "@babel/helper-function-name" "^7.8.3"
- "@babel/helper-split-export-declaration" "^7.8.3"
- "@babel/parser" "^7.8.6"
- "@babel/types" "^7.8.6"
+"@babel/runtime@^7.3.4":
+ version "7.11.2"
+ resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
+ integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
+ dependencies:
+ regenerator-runtime "^0.13.4"
+
+"@babel/template@^7.10.4", "@babel/template@^7.12.7":
+ version "7.12.7"
+ resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.7.tgz#c817233696018e39fbb6c491d2fb684e05ed43bc"
+ integrity sha512-GkDzmHS6GV7ZeXfJZ0tLRBhZcMcY0/Lnb+eEbXDBfCAcZCjrZKe6p3J4we/D24O9Y8enxWAg1cWwof59yLh2ow==
+ dependencies:
+ "@babel/code-frame" "^7.10.4"
+ "@babel/parser" "^7.12.7"
+ "@babel/types" "^7.12.7"
+
+"@babel/traverse@^7.0.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.12.5", "@babel/traverse@^7.12.9":
+ version "7.12.9"
+ resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.9.tgz#fad26c972eabbc11350e0b695978de6cc8e8596f"
+ integrity sha512-iX9ajqnLdoU1s1nHt36JDI9KG4k+vmI8WgjK5d+aDTwQbL2fUnzedNedssA645Ede3PM2ma1n8Q4h2ohwXgMXw==
+ dependencies:
+ "@babel/code-frame" "^7.10.4"
+ "@babel/generator" "^7.12.5"
+ "@babel/helper-function-name" "^7.10.4"
+ "@babel/helper-split-export-declaration" "^7.11.0"
+ "@babel/parser" "^7.12.7"
+ "@babel/types" "^7.12.7"
debug "^4.1.0"
globals "^11.1.0"
- lodash "^4.17.13"
+ lodash "^4.17.19"
-"@babel/types@^7.8.3", "@babel/types@^7.8.6", "@babel/types@^7.8.7":
- version "7.8.7"
- resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.7.tgz#1fc9729e1acbb2337d5b6977a63979b4819f5d1d"
- integrity sha512-k2TreEHxFA4CjGkL+GYjRyx35W0Mr7DP5+9q6WMkyKXB+904bYmG40syjMFV0oLlhhFCwWl0vA0DyzTDkwAiJw==
+"@babel/types@^7.0.0", "@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.11.0", "@babel/types@^7.12.1", "@babel/types@^7.12.5", "@babel/types@^7.12.7", "@babel/types@^7.4.4":
+ version "7.12.7"
+ resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.7.tgz#6039ff1e242640a29452c9ae572162ec9a8f5d13"
+ integrity sha512-MNyI92qZq6jrQkXvtIiykvl4WtoRrVV9MPn+ZfsoEENjiWcBQ3ZSHrkxnJWgWtLX3XXqX5hrSQ+X69wkmesXuQ==
dependencies:
- esutils "^2.0.2"
- lodash "^4.17.13"
+ "@babel/helper-validator-identifier" "^7.10.4"
+ lodash "^4.17.19"
to-fast-properties "^2.0.0"
"@docsearch/css@^1.0.0-alpha.27":
@@ -907,6 +992,38 @@
resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.0.0-alpha.27.tgz#29de9939274887363f6e3f41078b2ee3e9c56493"
integrity sha512-Mp4lhlLd8vuLOCXtuw8UTUaJXGRrXYL7AN/ZmhaMwqyL9e9XSqLlcv82EWP0NAMcoz/I1E1C709h4jnbnN4llw==
+"@hapi/address@2.x.x":
+ version "2.1.4"
+ resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
+ integrity sha512-QD1PhQk+s31P1ixsX0H0Suoupp3VMXzIVMSwobR3F3MSUO2YCV0B7xqLcUw/Bh8yuvd3LhpyqLQWTNcRmp6IdQ==
+
+"@hapi/bourne@1.x.x":
+ version "1.3.2"
+ resolved "https://registry.yarnpkg.com/@hapi/bourne/-/bourne-1.3.2.tgz#0a7095adea067243ce3283e1b56b8a8f453b242a"
+ integrity sha512-1dVNHT76Uu5N3eJNTYcvxee+jzX4Z9lfciqRRHCU27ihbUcYi+iSc2iml5Ke1LXe1SyJCLA0+14Jh4tXJgOppA==
+
+"@hapi/hoek@8.x.x", "@hapi/hoek@^8.3.0":
+ version "8.5.1"
+ resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-8.5.1.tgz#fde96064ca446dec8c55a8c2f130957b070c6e06"
+ integrity sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow==
+
+"@hapi/joi@^15.0.0":
+ version "15.1.1"
+ resolved "https://registry.yarnpkg.com/@hapi/joi/-/joi-15.1.1.tgz#c675b8a71296f02833f8d6d243b34c57b8ce19d7"
+ integrity sha512-entf8ZMOK8sc+8YfeOlM8pCfg3b5+WZIKBfUaaJT8UsjAAPjartzxIYm3TIbjvA4u+u++KbcXD38k682nVHDAQ==
+ dependencies:
+ "@hapi/address" "2.x.x"
+ "@hapi/bourne" "1.x.x"
+ "@hapi/hoek" "8.x.x"
+ "@hapi/topo" "3.x.x"
+
+"@hapi/topo@3.x.x":
+ version "3.1.6"
+ resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-3.1.6.tgz#68d935fa3eae7fdd5ab0d7f953f3205d8b2bfc29"
+ integrity sha512-tAag0jEcjwH+P2quUfipd7liWCNX2F8NvYjQp2wtInsZxnMlypdw0FtAOLxtvvkO+GSRRbmNi8m/5y42PQJYCQ==
+ dependencies:
+ "@hapi/hoek" "^8.3.0"
+
"@mrmlnc/readdir-enhanced@^2.2.1":
version "2.2.1"
resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -932,128 +1049,159 @@
dependencies:
defer-to-connect "^1.0.1"
-"@types/color-name@^1.1.1":
- version "1.1.1"
- resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
- integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
-
-"@types/events@*":
- version "3.0.0"
- resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
- integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==
-
"@types/glob@^7.1.1":
- version "7.1.1"
- resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.1.tgz#aa59a1c6e3fbc421e07ccd31a944c30eba521575"
- integrity sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w==
+ version "7.1.3"
+ resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.3.tgz#e6ba80f36b7daad2c685acd9266382e68985c183"
+ integrity sha512-SEYeGAIQIQX8NN6LDKprLjbrd5dARM5EXsd8GI/A5l0apYI1fGMWgPHSe4ZKL4eozlAyI+doUE9XbYS4xCkQ1w==
dependencies:
- "@types/events" "*"
"@types/minimatch" "*"
"@types/node" "*"
+"@types/json-schema@^7.0.5":
+ version "7.0.6"
+ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
+ integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==
+
"@types/minimatch@*":
version "3.0.3"
resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
"@types/node@*":
- version "13.9.1"
- resolved "https://registry.yarnpkg.com/@types/node/-/node-13.9.1.tgz#96f606f8cd67fb018847d9b61e93997dabdefc72"
- integrity sha512-E6M6N0blf/jiZx8Q3nb0vNaswQeEyn0XlupO+xN6DtJ6r6IT4nXrTry7zhIfYvFCl3/8Cu6WIysmUBKiqV0bqQ==
+ version "14.14.10"
+ resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.10.tgz#5958a82e41863cfc71f2307b3748e3491ba03785"
+ integrity sha512-J32dgx2hw8vXrSbu4ZlVhn1Nm3GbeCFNw2FWL8S5QKucHGY0cyNwjdQdO+KMBZ4wpmC7KhLCiNsdk1RFRIYUQQ==
"@types/q@^1.5.1":
- version "1.5.2"
- resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
- integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==
+ version "1.5.4"
+ resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
+ integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
-"@vue/babel-helper-vue-jsx-merge-props@^1.0.0":
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.0.0.tgz#048fe579958da408fb7a8b2a3ec050b50a661040"
- integrity sha512-6tyf5Cqm4m6v7buITuwS+jHzPlIPxbFzEhXR5JGZpbrvOcp1hiQKckd305/3C7C36wFekNTQSxAtgeM0j0yoUw==
+"@vue/babel-helper-vue-jsx-merge-props@^1.2.1":
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz#31624a7a505fb14da1d58023725a4c5f270e6a81"
+ integrity sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA==
-"@vue/babel-plugin-transform-vue-jsx@^1.1.2":
- version "1.1.2"
- resolved "https://registry.yarnpkg.com/@vue/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-1.1.2.tgz#c0a3e6efc022e75e4247b448a8fc6b86f03e91c0"
- integrity sha512-YfdaoSMvD1nj7+DsrwfTvTnhDXI7bsuh+Y5qWwvQXlD24uLgnsoww3qbiZvWf/EoviZMrvqkqN4CBw0W3BWUTQ==
+"@vue/babel-helper-vue-transform-on@^1.0.0-rc.2":
+ version "1.0.0-rc.2"
+ resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.0-rc.2.tgz#7246341f666e7c6e65b13da420e2ce85714fbbca"
+ integrity sha512-1+7CwjQ0Kasml6rHoNQUmbISwqLNNfFVBUcZl6QBremUl296ZmLrVQPqJP5pyAAWjZke5bpI1hlj+LVVuT7Jcg==
+
+"@vue/babel-plugin-jsx@^1.0.0-0":
+ version "1.0.0-rc.3"
+ resolved "https://registry.yarnpkg.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.0.0-rc.3.tgz#ab477ee95c764fbe68842a2eddd474f122e70ac6"
+ integrity sha512-/Ibq0hoKsidnHWPhgRpjcjYhYcHpqEm2fiKVAPO88OXZNHGwaGgS4yXkC6TDEvlZep4mBDo+2S5T81wpbVh90Q==
+ dependencies:
+ "@babel/helper-module-imports" "^7.0.0"
+ "@babel/plugin-syntax-jsx" "^7.0.0"
+ "@babel/traverse" "^7.0.0"
+ "@babel/types" "^7.0.0"
+ "@vue/babel-helper-vue-transform-on" "^1.0.0-rc.2"
+ camelcase "^6.0.0"
+ html-tags "^3.1.0"
+ svg-tags "^1.0.0"
+
+"@vue/babel-plugin-transform-vue-jsx@^1.2.1":
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/@vue/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-1.2.1.tgz#646046c652c2f0242727f34519d917b064041ed7"
+ integrity sha512-HJuqwACYehQwh1fNT8f4kyzqlNMpBuUK4rSiSES5D4QsYncv5fxFsLyrxFPG2ksO7t5WP+Vgix6tt6yKClwPzA==
dependencies:
"@babel/helper-module-imports" "^7.0.0"
"@babel/plugin-syntax-jsx" "^7.2.0"
- "@vue/babel-helper-vue-jsx-merge-props" "^1.0.0"
+ "@vue/babel-helper-vue-jsx-merge-props" "^1.2.1"
html-tags "^2.0.0"
lodash.kebabcase "^4.1.1"
svg-tags "^1.0.0"
"@vue/babel-preset-app@^4.1.2":
- version "4.2.3"
- resolved "https://registry.yarnpkg.com/@vue/babel-preset-app/-/babel-preset-app-4.2.3.tgz#608b2c9f7ca677e793833662fc727ff9137a9a35"
- integrity sha512-Xlc8d9Ebgu9pNZMUxKZWVP2CctVZzfX3LAxjBDWAAIiVpdXX4IkQQCevDhgiANFzlmE3KXtiSgPGs57Sso2g7Q==
+ version "4.5.9"
+ resolved "https://registry.yarnpkg.com/@vue/babel-preset-app/-/babel-preset-app-4.5.9.tgz#a4ef1830a21301e4f77d7cd4a04555d8a01eaf33"
+ integrity sha512-d2H4hFnJsGnZtJAAZIbo1dmQJ2SI1MYix1Tc9/etlnJtCDPRHeCNodCSeuLgDwnoAyT3unzyHmTtaO56KRDuOQ==
dependencies:
- "@babel/core" "^7.8.4"
- "@babel/helper-compilation-targets" "^7.8.4"
+ "@babel/core" "^7.11.0"
+ "@babel/helper-compilation-targets" "^7.9.6"
"@babel/helper-module-imports" "^7.8.3"
"@babel/plugin-proposal-class-properties" "^7.8.3"
"@babel/plugin-proposal-decorators" "^7.8.3"
"@babel/plugin-syntax-dynamic-import" "^7.8.3"
"@babel/plugin-syntax-jsx" "^7.8.3"
- "@babel/plugin-transform-runtime" "^7.8.3"
- "@babel/preset-env" "^7.8.4"
- "@babel/runtime" "^7.8.4"
+ "@babel/plugin-transform-runtime" "^7.11.0"
+ "@babel/preset-env" "^7.11.0"
+ "@babel/runtime" "^7.11.0"
+ "@vue/babel-plugin-jsx" "^1.0.0-0"
"@vue/babel-preset-jsx" "^1.1.2"
- babel-plugin-dynamic-import-node "^2.3.0"
- core-js "^3.6.4"
- core-js-compat "^3.6.4"
+ babel-plugin-dynamic-import-node "^2.3.3"
+ core-js "^3.6.5"
+ core-js-compat "^3.6.5"
+ semver "^6.1.0"
"@vue/babel-preset-jsx@^1.1.2":
- version "1.1.2"
- resolved "https://registry.yarnpkg.com/@vue/babel-preset-jsx/-/babel-preset-jsx-1.1.2.tgz#2e169eb4c204ea37ca66c2ea85a880bfc99d4f20"
- integrity sha512-zDpVnFpeC9YXmvGIDSsKNdL7qCG2rA3gjywLYHPCKDT10erjxF4U+6ay9X6TW5fl4GsDlJp9bVfAVQAAVzxxvQ==
+ version "1.2.4"
+ resolved "https://registry.yarnpkg.com/@vue/babel-preset-jsx/-/babel-preset-jsx-1.2.4.tgz#92fea79db6f13b01e80d3a0099e2924bdcbe4e87"
+ integrity sha512-oRVnmN2a77bYDJzeGSt92AuHXbkIxbf/XXSE3klINnh9AXBmVS1DGa1f0d+dDYpLfsAKElMnqKTQfKn7obcL4w==
+ dependencies:
+ "@vue/babel-helper-vue-jsx-merge-props" "^1.2.1"
+ "@vue/babel-plugin-transform-vue-jsx" "^1.2.1"
+ "@vue/babel-sugar-composition-api-inject-h" "^1.2.1"
+ "@vue/babel-sugar-composition-api-render-instance" "^1.2.4"
+ "@vue/babel-sugar-functional-vue" "^1.2.2"
+ "@vue/babel-sugar-inject-h" "^1.2.2"
+ "@vue/babel-sugar-v-model" "^1.2.3"
+ "@vue/babel-sugar-v-on" "^1.2.3"
+
+"@vue/babel-sugar-composition-api-inject-h@^1.2.1":
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/@vue/babel-sugar-composition-api-inject-h/-/babel-sugar-composition-api-inject-h-1.2.1.tgz#05d6e0c432710e37582b2be9a6049b689b6f03eb"
+ integrity sha512-4B3L5Z2G+7s+9Bwbf+zPIifkFNcKth7fQwekVbnOA3cr3Pq71q71goWr97sk4/yyzH8phfe5ODVzEjX7HU7ItQ==
dependencies:
- "@vue/babel-helper-vue-jsx-merge-props" "^1.0.0"
- "@vue/babel-plugin-transform-vue-jsx" "^1.1.2"
- "@vue/babel-sugar-functional-vue" "^1.1.2"
- "@vue/babel-sugar-inject-h" "^1.1.2"
- "@vue/babel-sugar-v-model" "^1.1.2"
- "@vue/babel-sugar-v-on" "^1.1.2"
+ "@babel/plugin-syntax-jsx" "^7.2.0"
-"@vue/babel-sugar-functional-vue@^1.1.2":
- version "1.1.2"
- resolved "https://registry.yarnpkg.com/@vue/babel-sugar-functional-vue/-/babel-sugar-functional-vue-1.1.2.tgz#f7e24fba09e6f1ee70104560a8808057555f1a9a"
- integrity sha512-YhmdJQSVEFF5ETJXzrMpj0nkCXEa39TvVxJTuVjzvP2rgKhdMmQzlJuMv/HpadhZaRVMCCF3AEjjJcK5q/cYzQ==
+"@vue/babel-sugar-composition-api-render-instance@^1.2.4":
+ version "1.2.4"
+ resolved "https://registry.yarnpkg.com/@vue/babel-sugar-composition-api-render-instance/-/babel-sugar-composition-api-render-instance-1.2.4.tgz#e4cbc6997c344fac271785ad7a29325c51d68d19"
+ integrity sha512-joha4PZznQMsxQYXtR3MnTgCASC9u3zt9KfBxIeuI5g2gscpTsSKRDzWQt4aqNIpx6cv8On7/m6zmmovlNsG7Q==
dependencies:
"@babel/plugin-syntax-jsx" "^7.2.0"
-"@vue/babel-sugar-inject-h@^1.1.2":
- version "1.1.2"
- resolved "https://registry.yarnpkg.com/@vue/babel-sugar-inject-h/-/babel-sugar-inject-h-1.1.2.tgz#8a5276b6d8e2ed16ffc8078aad94236274e6edf0"
- integrity sha512-VRSENdTvD5htpnVp7i7DNuChR5rVMcORdXjvv5HVvpdKHzDZAYiLSD+GhnhxLm3/dMuk8pSzV+k28ECkiN5m8w==
+"@vue/babel-sugar-functional-vue@^1.2.2":
+ version "1.2.2"
+ resolved "https://registry.yarnpkg.com/@vue/babel-sugar-functional-vue/-/babel-sugar-functional-vue-1.2.2.tgz#267a9ac8d787c96edbf03ce3f392c49da9bd2658"
+ integrity sha512-JvbgGn1bjCLByIAU1VOoepHQ1vFsroSA/QkzdiSs657V79q6OwEWLCQtQnEXD/rLTA8rRit4rMOhFpbjRFm82w==
dependencies:
"@babel/plugin-syntax-jsx" "^7.2.0"
-"@vue/babel-sugar-v-model@^1.1.2":
- version "1.1.2"
- resolved "https://registry.yarnpkg.com/@vue/babel-sugar-v-model/-/babel-sugar-v-model-1.1.2.tgz#1ff6fd1b800223fc9cb1e84dceb5e52d737a8192"
- integrity sha512-vLXPvNq8vDtt0u9LqFdpGM9W9IWDmCmCyJXuozlq4F4UYVleXJ2Fa+3JsnTZNJcG+pLjjfnEGHci2339Kj5sGg==
+"@vue/babel-sugar-inject-h@^1.2.2":
+ version "1.2.2"
+ resolved "https://registry.yarnpkg.com/@vue/babel-sugar-inject-h/-/babel-sugar-inject-h-1.2.2.tgz#d738d3c893367ec8491dcbb669b000919293e3aa"
+ integrity sha512-y8vTo00oRkzQTgufeotjCLPAvlhnpSkcHFEp60+LJUwygGcd5Chrpn5480AQp/thrxVm8m2ifAk0LyFel9oCnw==
dependencies:
"@babel/plugin-syntax-jsx" "^7.2.0"
- "@vue/babel-helper-vue-jsx-merge-props" "^1.0.0"
- "@vue/babel-plugin-transform-vue-jsx" "^1.1.2"
+
+"@vue/babel-sugar-v-model@^1.2.3":
+ version "1.2.3"
+ resolved "https://registry.yarnpkg.com/@vue/babel-sugar-v-model/-/babel-sugar-v-model-1.2.3.tgz#fa1f29ba51ebf0aa1a6c35fa66d539bc459a18f2"
+ integrity sha512-A2jxx87mySr/ulAsSSyYE8un6SIH0NWHiLaCWpodPCVOlQVODCaSpiR4+IMsmBr73haG+oeCuSvMOM+ttWUqRQ==
+ dependencies:
+ "@babel/plugin-syntax-jsx" "^7.2.0"
+ "@vue/babel-helper-vue-jsx-merge-props" "^1.2.1"
+ "@vue/babel-plugin-transform-vue-jsx" "^1.2.1"
camelcase "^5.0.0"
html-tags "^2.0.0"
svg-tags "^1.0.0"
-"@vue/babel-sugar-v-on@^1.1.2":
- version "1.1.2"
- resolved "https://registry.yarnpkg.com/@vue/babel-sugar-v-on/-/babel-sugar-v-on-1.1.2.tgz#b2ef99b8f2fab09fbead25aad70ef42e1cf5b13b"
- integrity sha512-T8ZCwC8Jp2uRtcZ88YwZtZXe7eQrJcfRq0uTFy6ShbwYJyz5qWskRFoVsdTi9o0WEhmQXxhQUewodOSCUPVmsQ==
+"@vue/babel-sugar-v-on@^1.2.3":
+ version "1.2.3"
+ resolved "https://registry.yarnpkg.com/@vue/babel-sugar-v-on/-/babel-sugar-v-on-1.2.3.tgz#342367178586a69f392f04bfba32021d02913ada"
+ integrity sha512-kt12VJdz/37D3N3eglBywV8GStKNUhNrsxChXIV+o0MwVXORYuhDTHJRKPgLJRb/EY3vM2aRFQdxJBp9CLikjw==
dependencies:
"@babel/plugin-syntax-jsx" "^7.2.0"
- "@vue/babel-plugin-transform-vue-jsx" "^1.1.2"
+ "@vue/babel-plugin-transform-vue-jsx" "^1.2.1"
camelcase "^5.0.0"
"@vue/component-compiler-utils@^3.1.0":
- version "3.1.1"
- resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.1.1.tgz#d4ef8f80292674044ad6211e336a302e4d2a6575"
- integrity sha512-+lN3nsfJJDGMNz7fCpcoYIORrXo0K3OTsdr8jCM7FuqdI4+70TY6gxY6viJ2Xi1clqyPg7LpeOWwjF31vSMmUw==
+ version "3.2.0"
+ resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.2.0.tgz#8f85182ceed28e9b3c75313de669f83166d11e5d"
+ integrity sha512-lejBLa7xAMsfiZfNp7Kv51zOzifnb29FwdnMLa96z26kXErPFioSf9BMcePVIQ6/Gc6/mC0UrPpxAWIHyae0vw==
dependencies:
consolidate "^0.15.1"
hash-sum "^1.0.2"
@@ -1061,22 +1209,23 @@
merge-source-map "^1.1.0"
postcss "^7.0.14"
postcss-selector-parser "^6.0.2"
- prettier "^1.18.2"
source-map "~0.6.1"
vue-template-es2015-compiler "^1.9.0"
+ optionalDependencies:
+ prettier "^1.18.2"
-"@vuepress/core@1.5.4":
- version "1.5.4"
- resolved "https://registry.yarnpkg.com/@vuepress/core/-/core-1.5.4.tgz#036d28d6cc8a0928913116de5ebe80b0b4a9ac1b"
- integrity sha512-RaHJiX0Yno4S3zoV64JNd3xE55sza8rayyWvXAJY381XVMxKrsLBrgW6ntNYSkzGnZcxi6fwMV/CVOUhEtkEkA==
+"@vuepress/core@1.7.1":
+ version "1.7.1"
+ resolved "https://registry.yarnpkg.com/@vuepress/core/-/core-1.7.1.tgz#e92faad0e9445fdd775f8e0d65e927bc35e80571"
+ integrity sha512-M5sxZq30Ke1vXa4ZZjk6185fwtpiJOqzXNnzcIe0GxtvtaF8Yij6b+KqQKlUJnnUXm+CKxiLCr8PTzDY26N7yw==
dependencies:
"@babel/core" "^7.8.4"
"@vue/babel-preset-app" "^4.1.2"
- "@vuepress/markdown" "1.5.4"
- "@vuepress/markdown-loader" "1.5.4"
- "@vuepress/plugin-last-updated" "1.5.4"
- "@vuepress/plugin-register-components" "1.5.4"
- "@vuepress/shared-utils" "1.5.4"
+ "@vuepress/markdown" "1.7.1"
+ "@vuepress/markdown-loader" "1.7.1"
+ "@vuepress/plugin-last-updated" "1.7.1"
+ "@vuepress/plugin-register-components" "1.7.1"
+ "@vuepress/shared-utils" "1.7.1"
autoprefixer "^9.5.1"
babel-loader "^8.0.4"
cache-loader "^3.0.0"
@@ -1098,7 +1247,7 @@
url-loader "^1.0.1"
vue "^2.6.10"
vue-loader "^15.7.1"
- vue-router "^3.1.3"
+ vue-router "^3.4.5"
vue-server-renderer "^2.6.10"
vue-template-compiler "^2.6.10"
vuepress-html-webpack-plugin "^3.2.0"
@@ -1109,21 +1258,21 @@
webpack-merge "^4.1.2"
webpackbar "3.2.0"
-"@vuepress/markdown-loader@1.5.4":
- version "1.5.4"
- resolved "https://registry.yarnpkg.com/@vuepress/markdown-loader/-/markdown-loader-1.5.4.tgz#9ba49bbe9c94ed792714589aef6a20c7ed0ac822"
- integrity sha512-3R5quGIXQm7gfPWN67SVZ9OBA7VrGEEXJjjV01MYkbfhqVGgO6lBRq73Og0XdKs4RPx4nqJUPthhL8FJVNRTIg==
+"@vuepress/markdown-loader@1.7.1":
+ version "1.7.1"
+ resolved "https://registry.yarnpkg.com/@vuepress/markdown-loader/-/markdown-loader-1.7.1.tgz#f3ab20965d5dec6e2fc2d11c78ef1a9f08d62f72"
+ integrity sha512-GM1F/tRhP9qZydTC89FXJPlLH+BmZijMKom5BYLAMEXsU20A9kABTRoatPjOUbZuKT+gn03JgG97qVd8xa/ETw==
dependencies:
- "@vuepress/markdown" "1.5.4"
+ "@vuepress/markdown" "1.7.1"
loader-utils "^1.1.0"
lru-cache "^5.1.1"
-"@vuepress/markdown@1.5.4":
- version "1.5.4"
- resolved "https://registry.yarnpkg.com/@vuepress/markdown/-/markdown-1.5.4.tgz#d9736db430034b7b6058696c4da1cc211032bbea"
- integrity sha512-bgrR9LTcAa2O0WipTbH3OFKeAfXc/2oU6cUIoMkyihSKUo1Mr5yt1XKM7vHe1uFEZygNr8EAemep8chsuVuISA==
+"@vuepress/markdown@1.7.1":
+ version "1.7.1"
+ resolved "https://registry.yarnpkg.com/@vuepress/markdown/-/markdown-1.7.1.tgz#56f60c2362fd82b8f2702eefa366c0d5b02fdcbd"
+ integrity sha512-Ava9vJECHG1+RC53ut1dXSze35IH5tc3qesC06Ny37WS93iDSQy09j8y+a0Lugy12j1369+QQeRFWa40tdHczA==
dependencies:
- "@vuepress/shared-utils" "1.5.4"
+ "@vuepress/shared-utils" "1.7.1"
markdown-it "^8.4.1"
markdown-it-anchor "^5.0.2"
markdown-it-chain "^1.3.0"
@@ -1131,38 +1280,47 @@
markdown-it-table-of-contents "^0.4.0"
prismjs "^1.13.0"
-"@vuepress/plugin-active-header-links@1.5.4":
- version "1.5.4"
- resolved "https://registry.yarnpkg.com/@vuepress/plugin-active-header-links/-/plugin-active-header-links-1.5.4.tgz#ffbfbce0d5932091043b766757683ca3b5420aef"
- integrity sha512-FI1Dr/44HVqxLMRSuaVEEwegGVEGFlaWYE3nsXwL7klKr6c+2kXHEw9rSQlAxzJyzVfovTk4dd+s/AMOKuLGZQ==
+"@vuepress/plugin-active-header-links@1.7.1":
+ version "1.7.1"
+ resolved "https://registry.yarnpkg.com/@vuepress/plugin-active-header-links/-/plugin-active-header-links-1.7.1.tgz#5a16281bebb977fc1c2b93d992b1a3b7ff840641"
+ integrity sha512-Wgf/oB9oPZLnYoLjQ/xbQc4Qa3RU5tXAo2dB4Xl/7bUL6SqBxO866kX3wPxKdSOIL58tq8iH9XbUe3Sxi8/ISQ==
dependencies:
lodash.debounce "^4.0.8"
-"@vuepress/plugin-last-updated@1.5.4":
- version "1.5.4"
- resolved "https://registry.yarnpkg.com/@vuepress/plugin-last-updated/-/plugin-last-updated-1.5.4.tgz#6f3f9fe720ce7f883c37ddc71ac02fe8f36bbfe4"
- integrity sha512-9kezBCxPM+cevKRNML6Q7v6qkI8NQvKbVkwohlzsElM8FBmjlZmgFyZje66ksTnb/U6ogazCCq9jdOyipNcQ2A==
+"@vuepress/plugin-last-updated@1.7.1":
+ version "1.7.1"
+ resolved "https://registry.yarnpkg.com/@vuepress/plugin-last-updated/-/plugin-last-updated-1.7.1.tgz#668c55daa6b8bc1d8ee42cdb4169cf67c01b6e97"
+ integrity sha512-VW5jhBuO0WRHDsBmFsKC6QtEyBLCgyhuH9nQ65aairCn3tdoJPz0uQ4g3lr/boVbgsPexO677Sn3dRPgYqnMug==
dependencies:
cross-spawn "^6.0.5"
-"@vuepress/plugin-nprogress@1.5.4":
- version "1.5.4"
- resolved "https://registry.yarnpkg.com/@vuepress/plugin-nprogress/-/plugin-nprogress-1.5.4.tgz#b818ebcac5addb6488bf50eb21585450f52ae40c"
- integrity sha512-2bGKoO/o2e5mIfOU80q+AkxOK5wVijA/+8jGjSQVf2ccMpJw+Ly1mMi69r81Q0QkEihgfI9VN42a5+a6LUgPBw==
+"@vuepress/plugin-nprogress@1.7.1":
+ version "1.7.1"
+ resolved "https://registry.yarnpkg.com/@vuepress/plugin-nprogress/-/plugin-nprogress-1.7.1.tgz#101ebf720eaa635a473e16ca16e7b4a7850331fa"
+ integrity sha512-KtqfI3RitbsEbm22EhbooTvhjfMf6zttKlbND7LcyJwP3MEPVYyzQJuET03hk9z4SgCfNV2r/W3sYyejzzTMog==
dependencies:
nprogress "^0.2.0"
-"@vuepress/plugin-register-components@1.5.4":
+"@vuepress/plugin-pwa@^1.5.4":
version "1.5.4"
- resolved "https://registry.yarnpkg.com/@vuepress/plugin-register-components/-/plugin-register-components-1.5.4.tgz#2f62d0790471ef53935ff2c808d8045c0473067f"
- integrity sha512-Y1U9j6unZp1ZhnHjQ9yOPY+vxldUA3C1EwT6UgI75j5gxa5Hz6NakoIo6mbhaYHlGmx33o/MXrxufLPapo/YlQ==
+ resolved "https://registry.yarnpkg.com/@vuepress/plugin-pwa/-/plugin-pwa-1.5.4.tgz#97fe6d917f8815cdea7a8025e065c5a08480cd94"
+ integrity sha512-d3XWS0Zbae1c6IDU64BpIAIr78A7kTZTA7qkqk1H5sbO1SqlXMWQVMsiFZuraxiEY2uDc0N5j3Yr4Kkmo+0o0w==
dependencies:
"@vuepress/shared-utils" "1.5.4"
+ register-service-worker "^1.7.0"
+ workbox-build "^4.3.1"
-"@vuepress/plugin-search@1.5.4":
- version "1.5.4"
- resolved "https://registry.yarnpkg.com/@vuepress/plugin-search/-/plugin-search-1.5.4.tgz#3360445e9ecf8bdcb5497ab1c0f46d8aecc9ab6c"
- integrity sha512-wikU9XYiZ3Olbii0lI+56mcSdpzHHkduVBMB4MNEV5iob23qDxGPmvfZirjsZV20w1UnLRptERyHtZkTLW9Mbg==
+"@vuepress/plugin-register-components@1.7.1":
+ version "1.7.1"
+ resolved "https://registry.yarnpkg.com/@vuepress/plugin-register-components/-/plugin-register-components-1.7.1.tgz#1ff58e931e8c27d64f9b86f2df879ddaceccdebe"
+ integrity sha512-MlFdH6l3rTCJlGMvyssXVG998cq5LSMzxCuQLYcRdtHQT4HbikIcV4HSPGarWInD1mP12+qX/PvKUawGwp1eVg==
+ dependencies:
+ "@vuepress/shared-utils" "1.7.1"
+
+"@vuepress/plugin-search@1.7.1":
+ version "1.7.1"
+ resolved "https://registry.yarnpkg.com/@vuepress/plugin-search/-/plugin-search-1.7.1.tgz#f52b6e77af30f452213bc677741cefe8a8309be2"
+ integrity sha512-OmiGM5eYg9c+uC50b6/cSxAhqxfD7AIui6JEztFGeECrlP33RLHmteXK9YBBZjp5wTNmoYs+NXI/cWggYUPW8Q==
"@vuepress/shared-utils@1.5.4":
version "1.5.4"
@@ -1179,165 +1337,179 @@
toml "^3.0.0"
upath "^1.1.0"
-"@vuepress/theme-default@1.5.4":
- version "1.5.4"
- resolved "https://registry.yarnpkg.com/@vuepress/theme-default/-/theme-default-1.5.4.tgz#77db27fe7c3ced15a970644df0202b0effbe865f"
- integrity sha512-kHst1yXzqTiocVU7w9x4cfJ08vR9ZbREC6kTRtH1ytQSEUL5tM0b9HFicfg1kDp7YNq2qntRro+WmfjU9Ps/eg==
+"@vuepress/shared-utils@1.7.1", "@vuepress/shared-utils@^1.2.0":
+ version "1.7.1"
+ resolved "https://registry.yarnpkg.com/@vuepress/shared-utils/-/shared-utils-1.7.1.tgz#028bc6003247bb4c60cdc96f231eecfb55e7b85d"
+ integrity sha512-ydB2ZKsFZE6hFRb9FWqzZksxAPIMJjtBawk50RP6F+YX5HbID/HlyYYZM9aDSbk6RTkjgB5UzJjggA2xM8POlw==
dependencies:
- "@vuepress/plugin-active-header-links" "1.5.4"
- "@vuepress/plugin-nprogress" "1.5.4"
- "@vuepress/plugin-search" "1.5.4"
+ chalk "^2.3.2"
+ escape-html "^1.0.3"
+ fs-extra "^7.0.1"
+ globby "^9.2.0"
+ gray-matter "^4.0.1"
+ hash-sum "^1.0.2"
+ semver "^6.0.0"
+ toml "^3.0.0"
+ upath "^1.1.0"
+
+"@vuepress/theme-default@1.7.1":
+ version "1.7.1"
+ resolved "https://registry.yarnpkg.com/@vuepress/theme-default/-/theme-default-1.7.1.tgz#36fee5bb5165798c0082c512cbf4d94352260d97"
+ integrity sha512-a9HeTrlcWQj3ONHiABmlN2z9TyIxKfQtLsA8AL+WgjN3PikhFuZFIJGzfr+NLt67Y9oiI+S9ZfiaVyvWM+7bWQ==
+ dependencies:
+ "@vuepress/plugin-active-header-links" "1.7.1"
+ "@vuepress/plugin-nprogress" "1.7.1"
+ "@vuepress/plugin-search" "1.7.1"
docsearch.js "^2.5.2"
lodash "^4.17.15"
- stylus "^0.54.5"
+ stylus "^0.54.8"
stylus-loader "^3.0.2"
vuepress-plugin-container "^2.0.2"
vuepress-plugin-smooth-scroll "^0.0.3"
-"@webassemblyjs/ast@1.8.5":
- version "1.8.5"
- resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"
- integrity sha512-aJMfngIZ65+t71C3y2nBBg5FFG0Okt9m0XEgWZ7Ywgn1oMAT8cNwx00Uv1cQyHtidq0Xn94R4TAywO+LCQ+ZAQ==
- dependencies:
- "@webassemblyjs/helper-module-context" "1.8.5"
- "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
- "@webassemblyjs/wast-parser" "1.8.5"
-
-"@webassemblyjs/floating-point-hex-parser@1.8.5":
- version "1.8.5"
- resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.8.5.tgz#1ba926a2923613edce496fd5b02e8ce8a5f49721"
- integrity sha512-9p+79WHru1oqBh9ewP9zW95E3XAo+90oth7S5Re3eQnECGq59ly1Ri5tsIipKGpiStHsUYmY3zMLqtk3gTcOtQ==
-
-"@webassemblyjs/helper-api-error@1.8.5":
- version "1.8.5"
- resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.8.5.tgz#c49dad22f645227c5edb610bdb9697f1aab721f7"
- integrity sha512-Za/tnzsvnqdaSPOUXHyKJ2XI7PDX64kWtURyGiJJZKVEdFOsdKUCPTNEVFZq3zJ2R0G5wc2PZ5gvdTRFgm81zA==
-
-"@webassemblyjs/helper-buffer@1.8.5":
- version "1.8.5"
- resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.8.5.tgz#fea93e429863dd5e4338555f42292385a653f204"
- integrity sha512-Ri2R8nOS0U6G49Q86goFIPNgjyl6+oE1abW1pS84BuhP1Qcr5JqMwRFT3Ah3ADDDYGEgGs1iyb1DGX+kAi/c/Q==
-
-"@webassemblyjs/helper-code-frame@1.8.5":
- version "1.8.5"
- resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.8.5.tgz#9a740ff48e3faa3022b1dff54423df9aa293c25e"
- integrity sha512-VQAadSubZIhNpH46IR3yWO4kZZjMxN1opDrzePLdVKAZ+DFjkGD/rf4v1jap744uPVU6yjL/smZbRIIJTOUnKQ==
- dependencies:
- "@webassemblyjs/wast-printer" "1.8.5"
-
-"@webassemblyjs/helper-fsm@1.8.5":
- version "1.8.5"
- resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.8.5.tgz#ba0b7d3b3f7e4733da6059c9332275d860702452"
- integrity sha512-kRuX/saORcg8se/ft6Q2UbRpZwP4y7YrWsLXPbbmtepKr22i8Z4O3V5QE9DbZK908dh5Xya4Un57SDIKwB9eow==
-
-"@webassemblyjs/helper-module-context@1.8.5":
- version "1.8.5"
- resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.8.5.tgz#def4b9927b0101dc8cbbd8d1edb5b7b9c82eb245"
- integrity sha512-/O1B236mN7UNEU4t9X7Pj38i4VoU8CcMHyy3l2cV/kIF4U5KoHXDVqcDuOs1ltkac90IM4vZdHc52t1x8Yfs3g==
- dependencies:
- "@webassemblyjs/ast" "1.8.5"
- mamacro "^0.0.3"
-
-"@webassemblyjs/helper-wasm-bytecode@1.8.5":
- version "1.8.5"
- resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.8.5.tgz#537a750eddf5c1e932f3744206551c91c1b93e61"
- integrity sha512-Cu4YMYG3Ddl72CbmpjU/wbP6SACcOPVbHN1dI4VJNJVgFwaKf1ppeFJrwydOG3NDHxVGuCfPlLZNyEdIYlQ6QQ==
-
-"@webassemblyjs/helper-wasm-section@1.8.5":
- version "1.8.5"
- resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.8.5.tgz#74ca6a6bcbe19e50a3b6b462847e69503e6bfcbf"
- integrity sha512-VV083zwR+VTrIWWtgIUpqfvVdK4ff38loRmrdDBgBT8ADXYsEZ5mPQ4Nde90N3UYatHdYoDIFb7oHzMncI02tA==
- dependencies:
- "@webassemblyjs/ast" "1.8.5"
- "@webassemblyjs/helper-buffer" "1.8.5"
- "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
- "@webassemblyjs/wasm-gen" "1.8.5"
-
-"@webassemblyjs/ieee754@1.8.5":
- version "1.8.5"
- resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.8.5.tgz#712329dbef240f36bf57bd2f7b8fb9bf4154421e"
- integrity sha512-aaCvQYrvKbY/n6wKHb/ylAJr27GglahUO89CcGXMItrOBqRarUMxWLJgxm9PJNuKULwN5n1csT9bYoMeZOGF3g==
+"@webassemblyjs/ast@1.9.0":
+ version "1.9.0"
+ resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
+ integrity sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==
+ dependencies:
+ "@webassemblyjs/helper-module-context" "1.9.0"
+ "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+ "@webassemblyjs/wast-parser" "1.9.0"
+
+"@webassemblyjs/floating-point-hex-parser@1.9.0":
+ version "1.9.0"
+ resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz#3c3d3b271bddfc84deb00f71344438311d52ffb4"
+ integrity sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA==
+
+"@webassemblyjs/helper-api-error@1.9.0":
+ version "1.9.0"
+ resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz#203f676e333b96c9da2eeab3ccef33c45928b6a2"
+ integrity sha512-NcMLjoFMXpsASZFxJ5h2HZRcEhDkvnNFOAKneP5RbKRzaWJN36NC4jqQHKwStIhGXu5mUWlUUk7ygdtrO8lbmw==
+
+"@webassemblyjs/helper-buffer@1.9.0":
+ version "1.9.0"
+ resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz#a1442d269c5feb23fcbc9ef759dac3547f29de00"
+ integrity sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA==
+
+"@webassemblyjs/helper-code-frame@1.9.0":
+ version "1.9.0"
+ resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.9.0.tgz#647f8892cd2043a82ac0c8c5e75c36f1d9159f27"
+ integrity sha512-ERCYdJBkD9Vu4vtjUYe8LZruWuNIToYq/ME22igL+2vj2dQ2OOujIZr3MEFvfEaqKoVqpsFKAGsRdBSBjrIvZA==
+ dependencies:
+ "@webassemblyjs/wast-printer" "1.9.0"
+
+"@webassemblyjs/helper-fsm@1.9.0":
+ version "1.9.0"
+ resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.9.0.tgz#c05256b71244214671f4b08ec108ad63b70eddb8"
+ integrity sha512-OPRowhGbshCb5PxJ8LocpdX9Kl0uB4XsAjl6jH/dWKlk/mzsANvhwbiULsaiqT5GZGT9qinTICdj6PLuM5gslw==
+
+"@webassemblyjs/helper-module-context@1.9.0":
+ version "1.9.0"
+ resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.9.0.tgz#25d8884b76839871a08a6c6f806c3979ef712f07"
+ integrity sha512-MJCW8iGC08tMk2enck1aPW+BE5Cw8/7ph/VGZxwyvGbJwjktKkDK7vy7gAmMDx88D7mhDTCNKAW5tED+gZ0W8g==
+ dependencies:
+ "@webassemblyjs/ast" "1.9.0"
+
+"@webassemblyjs/helper-wasm-bytecode@1.9.0":
+ version "1.9.0"
+ resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.9.0.tgz#4fed8beac9b8c14f8c58b70d124d549dd1fe5790"
+ integrity sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw==
+
+"@webassemblyjs/helper-wasm-section@1.9.0":
+ version "1.9.0"
+ resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.9.0.tgz#5a4138d5a6292ba18b04c5ae49717e4167965346"
+ integrity sha512-XnMB8l3ek4tvrKUUku+IVaXNHz2YsJyOOmz+MMkZvh8h1uSJpSen6vYnw3IoQ7WwEuAhL8Efjms1ZWjqh2agvw==
+ dependencies:
+ "@webassemblyjs/ast" "1.9.0"
+ "@webassemblyjs/helper-buffer" "1.9.0"
+ "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+ "@webassemblyjs/wasm-gen" "1.9.0"
+
+"@webassemblyjs/ieee754@1.9.0":
+ version "1.9.0"
+ resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.9.0.tgz#15c7a0fbaae83fb26143bbacf6d6df1702ad39e4"
+ integrity sha512-dcX8JuYU/gvymzIHc9DgxTzUUTLexWwt8uCTWP3otys596io0L5aW02Gb1RjYpx2+0Jus1h4ZFqjla7umFniTg==
dependencies:
"@xtuc/ieee754" "^1.2.0"
-"@webassemblyjs/leb128@1.8.5":
- version "1.8.5"
- resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.8.5.tgz#044edeb34ea679f3e04cd4fd9824d5e35767ae10"
- integrity sha512-plYUuUwleLIziknvlP8VpTgO4kqNaH57Y3JnNa6DLpu/sGcP6hbVdfdX5aHAV716pQBKrfuU26BJK29qY37J7A==
+"@webassemblyjs/leb128@1.9.0":
+ version "1.9.0"
+ resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.9.0.tgz#f19ca0b76a6dc55623a09cffa769e838fa1e1c95"
+ integrity sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw==
dependencies:
"@xtuc/long" "4.2.2"
-"@webassemblyjs/utf8@1.8.5":
- version "1.8.5"
- resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.8.5.tgz#a8bf3b5d8ffe986c7c1e373ccbdc2a0915f0cedc"
- integrity sha512-U7zgftmQriw37tfD934UNInokz6yTmn29inT2cAetAsaU9YeVCveWEwhKL1Mg4yS7q//NGdzy79nlXh3bT8Kjw==
-
-"@webassemblyjs/wasm-edit@1.8.5":
- version "1.8.5"
- resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.8.5.tgz#962da12aa5acc1c131c81c4232991c82ce56e01a"
- integrity sha512-A41EMy8MWw5yvqj7MQzkDjU29K7UJq1VrX2vWLzfpRHt3ISftOXqrtojn7nlPsZ9Ijhp5NwuODuycSvfAO/26Q==
- dependencies:
- "@webassemblyjs/ast" "1.8.5"
- "@webassemblyjs/helper-buffer" "1.8.5"
- "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
- "@webassemblyjs/helper-wasm-section" "1.8.5"
- "@webassemblyjs/wasm-gen" "1.8.5"
- "@webassemblyjs/wasm-opt" "1.8.5"
- "@webassemblyjs/wasm-parser" "1.8.5"
- "@webassemblyjs/wast-printer" "1.8.5"
-
-"@webassemblyjs/wasm-gen@1.8.5":
- version "1.8.5"
- resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.8.5.tgz#54840766c2c1002eb64ed1abe720aded714f98bc"
- integrity sha512-BCZBT0LURC0CXDzj5FXSc2FPTsxwp3nWcqXQdOZE4U7h7i8FqtFK5Egia6f9raQLpEKT1VL7zr4r3+QX6zArWg==
- dependencies:
- "@webassemblyjs/ast" "1.8.5"
- "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
- "@webassemblyjs/ieee754" "1.8.5"
- "@webassemblyjs/leb128" "1.8.5"
- "@webassemblyjs/utf8" "1.8.5"
-
-"@webassemblyjs/wasm-opt@1.8.5":
- version "1.8.5"
- resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.8.5.tgz#b24d9f6ba50394af1349f510afa8ffcb8a63d264"
- integrity sha512-HKo2mO/Uh9A6ojzu7cjslGaHaUU14LdLbGEKqTR7PBKwT6LdPtLLh9fPY33rmr5wcOMrsWDbbdCHq4hQUdd37Q==
- dependencies:
- "@webassemblyjs/ast" "1.8.5"
- "@webassemblyjs/helper-buffer" "1.8.5"
- "@webassemblyjs/wasm-gen" "1.8.5"
- "@webassemblyjs/wasm-parser" "1.8.5"
-
-"@webassemblyjs/wasm-parser@1.8.5":
- version "1.8.5"
- resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.8.5.tgz#21576f0ec88b91427357b8536383668ef7c66b8d"
- integrity sha512-pi0SYE9T6tfcMkthwcgCpL0cM9nRYr6/6fjgDtL6q/ZqKHdMWvxitRi5JcZ7RI4SNJJYnYNaWy5UUrHQy998lw==
- dependencies:
- "@webassemblyjs/ast" "1.8.5"
- "@webassemblyjs/helper-api-error" "1.8.5"
- "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
- "@webassemblyjs/ieee754" "1.8.5"
- "@webassemblyjs/leb128" "1.8.5"
- "@webassemblyjs/utf8" "1.8.5"
-
-"@webassemblyjs/wast-parser@1.8.5":
- version "1.8.5"
- resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.8.5.tgz#e10eecd542d0e7bd394f6827c49f3df6d4eefb8c"
- integrity sha512-daXC1FyKWHF1i11obK086QRlsMsY4+tIOKgBqI1lxAnkp9xe9YMcgOxm9kLe+ttjs5aWV2KKE1TWJCN57/Btsg==
- dependencies:
- "@webassemblyjs/ast" "1.8.5"
- "@webassemblyjs/floating-point-hex-parser" "1.8.5"
- "@webassemblyjs/helper-api-error" "1.8.5"
- "@webassemblyjs/helper-code-frame" "1.8.5"
- "@webassemblyjs/helper-fsm" "1.8.5"
+"@webassemblyjs/utf8@1.9.0":
+ version "1.9.0"
+ resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.9.0.tgz#04d33b636f78e6a6813227e82402f7637b6229ab"
+ integrity sha512-GZbQlWtopBTP0u7cHrEx+73yZKrQoBMpwkGEIqlacljhXCkVM1kMQge/Mf+csMJAjEdSwhOyLAS0AoR3AG5P8w==
+
+"@webassemblyjs/wasm-edit@1.9.0":
+ version "1.9.0"
+ resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.9.0.tgz#3fe6d79d3f0f922183aa86002c42dd256cfee9cf"
+ integrity sha512-FgHzBm80uwz5M8WKnMTn6j/sVbqilPdQXTWraSjBwFXSYGirpkSWE2R9Qvz9tNiTKQvoKILpCuTjBKzOIm0nxw==
+ dependencies:
+ "@webassemblyjs/ast" "1.9.0"
+ "@webassemblyjs/helper-buffer" "1.9.0"
+ "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+ "@webassemblyjs/helper-wasm-section" "1.9.0"
+ "@webassemblyjs/wasm-gen" "1.9.0"
+ "@webassemblyjs/wasm-opt" "1.9.0"
+ "@webassemblyjs/wasm-parser" "1.9.0"
+ "@webassemblyjs/wast-printer" "1.9.0"
+
+"@webassemblyjs/wasm-gen@1.9.0":
+ version "1.9.0"
+ resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.9.0.tgz#50bc70ec68ded8e2763b01a1418bf43491a7a49c"
+ integrity sha512-cPE3o44YzOOHvlsb4+E9qSqjc9Qf9Na1OO/BHFy4OI91XDE14MjFN4lTMezzaIWdPqHnsTodGGNP+iRSYfGkjA==
+ dependencies:
+ "@webassemblyjs/ast" "1.9.0"
+ "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+ "@webassemblyjs/ieee754" "1.9.0"
+ "@webassemblyjs/leb128" "1.9.0"
+ "@webassemblyjs/utf8" "1.9.0"
+
+"@webassemblyjs/wasm-opt@1.9.0":
+ version "1.9.0"
+ resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.9.0.tgz#2211181e5b31326443cc8112eb9f0b9028721a61"
+ integrity sha512-Qkjgm6Anhm+OMbIL0iokO7meajkzQD71ioelnfPEj6r4eOFuqm4YC3VBPqXjFyyNwowzbMD+hizmprP/Fwkl2A==
+ dependencies:
+ "@webassemblyjs/ast" "1.9.0"
+ "@webassemblyjs/helper-buffer" "1.9.0"
+ "@webassemblyjs/wasm-gen" "1.9.0"
+ "@webassemblyjs/wasm-parser" "1.9.0"
+
+"@webassemblyjs/wasm-parser@1.9.0":
+ version "1.9.0"
+ resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.9.0.tgz#9d48e44826df4a6598294aa6c87469d642fff65e"
+ integrity sha512-9+wkMowR2AmdSWQzsPEjFU7njh8HTO5MqO8vjwEHuM+AMHioNqSBONRdr0NQQ3dVQrzp0s8lTcYqzUdb7YgELA==
+ dependencies:
+ "@webassemblyjs/ast" "1.9.0"
+ "@webassemblyjs/helper-api-error" "1.9.0"
+ "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
+ "@webassemblyjs/ieee754" "1.9.0"
+ "@webassemblyjs/leb128" "1.9.0"
+ "@webassemblyjs/utf8" "1.9.0"
+
+"@webassemblyjs/wast-parser@1.9.0":
+ version "1.9.0"
+ resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.9.0.tgz#3031115d79ac5bd261556cecc3fa90a3ef451914"
+ integrity sha512-qsqSAP3QQ3LyZjNC/0jBJ/ToSxfYJ8kYyuiGvtn/8MK89VrNEfwj7BPQzJVHi0jGTRK2dGdJ5PRqhtjzoww+bw==
+ dependencies:
+ "@webassemblyjs/ast" "1.9.0"
+ "@webassemblyjs/floating-point-hex-parser" "1.9.0"
+ "@webassemblyjs/helper-api-error" "1.9.0"
+ "@webassemblyjs/helper-code-frame" "1.9.0"
+ "@webassemblyjs/helper-fsm" "1.9.0"
"@xtuc/long" "4.2.2"
-"@webassemblyjs/wast-printer@1.8.5":
- version "1.8.5"
- resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.8.5.tgz#114bbc481fd10ca0e23b3560fa812748b0bae5bc"
- integrity sha512-w0U0pD4EhlnvRyeJzBqaVSJAo9w/ce7/WPogeXLzGkO6hzhr4GnQIZ4W4uUt5b9ooAaXPtnXlj0gzsXEOUNYMg==
+"@webassemblyjs/wast-printer@1.9.0":
+ version "1.9.0"
+ resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.9.0.tgz#4935d54c85fef637b00ce9f52377451d00d47899"
+ integrity sha512-2J0nE95rHXHyQ24cWjMKJ1tqB/ds8z/cyeOZxJhcb+rW+SQASVjuznUSmdz5GpVJTzU8JkhYut0D3siFDD6wsA==
dependencies:
- "@webassemblyjs/ast" "1.8.5"
- "@webassemblyjs/wast-parser" "1.8.5"
+ "@webassemblyjs/ast" "1.9.0"
+ "@webassemblyjs/wast-parser" "1.9.0"
"@xtuc/long" "4.2.2"
"@xtuc/ieee754@^1.2.0":
@@ -1363,10 +1535,10 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
mime-types "~2.1.24"
negotiator "0.6.2"
-acorn@^6.2.1:
- version "6.4.1"
- resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474"
- integrity sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==
+acorn@^6.4.1:
+ version "6.4.2"
+ resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6"
+ integrity sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==
agentkeepalive@^2.2.0:
version "2.2.0"
@@ -1378,12 +1550,22 @@ ajv-errors@^1.0.0:
resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
integrity sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==
-ajv-keywords@^3.1.0, ajv-keywords@^3.4.1:
- version "3.4.1"
- resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.1.tgz#ef916e271c64ac12171fd8384eaae6b2345854da"
- integrity sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==
+ajv-keywords@^3.1.0, ajv-keywords@^3.4.1, ajv-keywords@^3.5.2:
+ version "3.5.2"
+ resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
+ integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
-ajv@^6.1.0, ajv@^6.10.2, ajv@^6.12.0, ajv@^6.5.5:
+ajv@^6.1.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4:
+ version "6.12.6"
+ resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+ integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+ dependencies:
+ fast-deep-equal "^3.1.1"
+ fast-json-stable-stringify "^2.0.0"
+ json-schema-traverse "^0.4.1"
+ uri-js "^4.2.2"
+
+ajv@^6.12.0:
version "6.12.0"
resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.0.tgz#06d60b96d87b8454a5adaba86e7854da629db4b7"
integrity sha512-D6gFiFA0RRLyUbvijN74DWAjXSFxWKaWP7mldxkVhyhAV3+SWA9HEJPHQ2c9soIeTFJqcSdFDGFgdqs1iUU2Hw==
@@ -1439,11 +1621,6 @@ alphanum-sort@^1.0.0:
resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
-amdefine@>=0.0.4:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
- integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
-
ansi-align@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.0.tgz#b536b371cf687caaef236c18d3e21fe3797467cb"
@@ -1473,11 +1650,6 @@ ansi-regex@^2.0.0:
resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
integrity sha1-w7M6te42DYbg5ijwRorn7yfWVN8=
-ansi-regex@^3.0.0:
- version "3.0.0"
- resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
- integrity sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=
-
ansi-regex@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
@@ -1501,11 +1673,10 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
color-convert "^1.9.0"
ansi-styles@^4.1.0:
- version "4.2.1"
- resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.2.1.tgz#90ae75c424d008d2624c5bf29ead3177ebfcf359"
- integrity sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==
+ version "4.3.0"
+ resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+ integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
dependencies:
- "@types/color-name" "^1.1.1"
color-convert "^2.0.1"
anymatch@^2.0.0:
@@ -1516,19 +1687,19 @@ anymatch@^2.0.0:
micromatch "^3.1.4"
normalize-path "^2.1.1"
-aproba@^1.0.3, aproba@^1.1.1:
+anymatch@~3.1.1:
+ version "3.1.1"
+ resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
+ integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
+ dependencies:
+ normalize-path "^3.0.0"
+ picomatch "^2.0.4"
+
+aproba@^1.1.1:
version "1.2.0"
resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
-are-we-there-yet@~1.1.2:
- version "1.1.5"
- resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
- integrity sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==
- dependencies:
- delegates "^1.0.0"
- readable-stream "^2.0.6"
-
argparse@^1.0.7:
version "1.0.10"
resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
@@ -1551,11 +1722,6 @@ arr-union@^3.1.0:
resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
-array-find-index@^1.0.1:
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
- integrity sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=
-
array-flatten@1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
@@ -1583,14 +1749,15 @@ array-unique@^0.3.2:
resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
-asn1.js@^4.0.0:
- version "4.10.1"
- resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.10.1.tgz#b9c2bf5805f1e64aadeed6df3a2bfafb5a73f5a0"
- integrity sha512-p32cOF5q0Zqs9uBiONKYLm6BClCoBCM5O9JfeUSlnQLBTxYdTK+pW+nXflm8UkKd2UYlEbYz5qEi0JuZR9ckSw==
+asn1.js@^5.2.0:
+ version "5.4.1"
+ resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07"
+ integrity sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==
dependencies:
bn.js "^4.0.0"
inherits "^2.0.1"
minimalistic-assert "^1.0.0"
+ safer-buffer "^2.1.0"
asn1@~0.2.3:
version "0.2.4"
@@ -1622,11 +1789,6 @@ async-each@^1.0.1:
resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==
-async-foreach@^0.1.3:
- version "0.1.3"
- resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
- integrity sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=
-
async-limiter@~1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
@@ -1657,17 +1819,17 @@ autocomplete.js@0.36.0:
immediate "^3.2.3"
autoprefixer@^9.5.1:
- version "9.7.4"
- resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.7.4.tgz#f8bf3e06707d047f0641d87aee8cfb174b2a5378"
- integrity sha512-g0Ya30YrMBAEZk60lp+qfX5YQllG+S5W3GYCFvyHTvhOki0AEQJLPEcIuGRsqVwLi8FvXPVtwTGhfr38hVpm0g==
+ version "9.8.6"
+ resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
+ integrity sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==
dependencies:
- browserslist "^4.8.3"
- caniuse-lite "^1.0.30001020"
- chalk "^2.4.2"
+ browserslist "^4.12.0"
+ caniuse-lite "^1.0.30001109"
+ colorette "^1.2.1"
normalize-range "^0.1.2"
num2fraction "^1.2.2"
- postcss "^7.0.26"
- postcss-value-parser "^4.0.2"
+ postcss "^7.0.32"
+ postcss-value-parser "^4.1.0"
aws-sign2@~0.7.0:
version "0.7.0"
@@ -1675,43 +1837,76 @@ aws-sign2@~0.7.0:
integrity sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=
aws4@^1.8.0:
- version "1.9.1"
- resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.9.1.tgz#7e33d8f7d449b3f673cd72deb9abdc552dbe528e"
- integrity sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==
+ version "1.11.0"
+ resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
+ integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
-axios@^0.19.1:
- version "0.19.2"
- resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
- integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==
+axios@^0.21.1:
+ version "0.21.1"
+ resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
+ integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
dependencies:
- follow-redirects "1.5.10"
+ follow-redirects "^1.10.0"
+
+babel-extract-comments@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz#0a2aedf81417ed391b85e18b4614e693a0351a21"
+ integrity sha512-qWWzi4TlddohA91bFwgt6zO/J0X+io7Qp184Fw0m2JYRSTZnJbFR8+07KmzudHCZgOiKRCrjhylwv9Xd8gfhVQ==
+ dependencies:
+ babylon "^6.18.0"
babel-loader@^8.0.4:
- version "8.0.6"
- resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.6.tgz#e33bdb6f362b03f4bb141a0c21ab87c501b70dfb"
- integrity sha512-4BmWKtBOBm13uoUwd08UwjZlaw3O9GWf456R9j+5YykFZ6LUIjIKLc0zEZf+hauxPOJs96C8k6FvYD09vWzhYw==
+ version "8.2.2"
+ resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.2.tgz#9363ce84c10c9a40e6c753748e1441b60c8a0b81"
+ integrity sha512-JvTd0/D889PQBtUXJ2PXaKU/pjZDMtHA9V2ecm+eNRmmBCMR09a+fmpGTNwnJtFmFl5Ei7Vy47LjBb+L0wQ99g==
dependencies:
- find-cache-dir "^2.0.0"
- loader-utils "^1.0.2"
- mkdirp "^0.5.1"
- pify "^4.0.1"
+ find-cache-dir "^3.3.1"
+ loader-utils "^1.4.0"
+ make-dir "^3.1.0"
+ schema-utils "^2.6.5"
-babel-plugin-dynamic-import-node@^2.3.0:
- version "2.3.0"
- resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.0.tgz#f00f507bdaa3c3e3ff6e7e5e98d90a7acab96f7f"
- integrity sha512-o6qFkpeQEBxcqt0XYlWzAVxNCSCZdUgcR8IRlhD/8DylxjjO4foPcvTW0GGKa/cVt3rvxZ7o5ippJ+/0nvLhlQ==
+babel-plugin-dynamic-import-node@^2.3.3:
+ version "2.3.3"
+ resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
+ integrity sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==
dependencies:
object.assign "^4.1.0"
+babel-plugin-syntax-object-rest-spread@^6.8.0:
+ version "6.13.0"
+ resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
+ integrity sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=
+
+babel-plugin-transform-object-rest-spread@^6.26.0:
+ version "6.26.0"
+ resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"
+ integrity sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=
+ dependencies:
+ babel-plugin-syntax-object-rest-spread "^6.8.0"
+ babel-runtime "^6.26.0"
+
+babel-runtime@^6.26.0:
+ version "6.26.0"
+ resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+ integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
+ dependencies:
+ core-js "^2.4.0"
+ regenerator-runtime "^0.11.0"
+
+babylon@^6.18.0:
+ version "6.18.0"
+ resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
+ integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
+
balanced-match@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
base64-js@^1.0.2:
- version "1.3.1"
- resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
- integrity sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==
+ version "1.5.1"
+ resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+ integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
base@^0.11.1:
version "0.11.2"
@@ -1753,6 +1948,11 @@ binary-extensions@^1.0.0:
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
integrity sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==
+binary-extensions@^2.0.0:
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.1.0.tgz#30fa40c9e7fe07dbc895678cd287024dea241dd9"
+ integrity sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==
+
bindings@^1.5.0:
version "1.5.0"
resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
@@ -1760,22 +1960,20 @@ bindings@^1.5.0:
dependencies:
file-uri-to-path "1.0.0"
-block-stream@*:
- version "0.0.9"
- resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
- integrity sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=
- dependencies:
- inherits "~2.0.0"
-
bluebird@^3.1.1, bluebird@^3.5.5:
version "3.7.2"
resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
-bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
- version "4.11.9"
- resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.9.tgz#26d556829458f9d1e81fc48952493d0ba3507828"
- integrity sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9:
+ version "4.12.0"
+ resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
+ integrity sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==
+
+bn.js@^5.0.0, bn.js@^5.1.1:
+ version "5.1.3"
+ resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.1.3.tgz#beca005408f642ebebea80b042b4d18d2ac0ee6b"
+ integrity sha512-GkTiFpjFtUzU9CbMeJ5iazkCzGL3jrhzerzZIuqLABjbwRaFt33I9tUdSNryIptM+RxDet6OKm2WnLXzW51KsQ==
body-parser@1.19.0:
version "1.19.0"
@@ -1848,7 +2046,14 @@ braces@^2.3.1, braces@^2.3.2:
split-string "^3.0.2"
to-regex "^3.0.1"
-brorand@^1.0.1:
+braces@~3.0.2:
+ version "3.0.2"
+ resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+ integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+ dependencies:
+ fill-range "^7.0.1"
+
+brorand@^1.0.1, brorand@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
@@ -1884,26 +2089,28 @@ browserify-des@^1.0.0:
inherits "^2.0.1"
safe-buffer "^5.1.2"
-browserify-rsa@^4.0.0:
- version "4.0.1"
- resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.0.1.tgz#21e0abfaf6f2029cf2fafb133567a701d4135524"
- integrity sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=
+browserify-rsa@^4.0.0, browserify-rsa@^4.0.1:
+ version "4.1.0"
+ resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.1.0.tgz#b2fd06b5b75ae297f7ce2dc651f918f5be158c8d"
+ integrity sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==
dependencies:
- bn.js "^4.1.0"
+ bn.js "^5.0.0"
randombytes "^2.0.1"
browserify-sign@^4.0.0:
- version "4.0.4"
- resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.0.4.tgz#aa4eb68e5d7b658baa6bf6a57e630cbd7a93d298"
- integrity sha1-qk62jl17ZYuqa/alfmMMvXqT0pg=
- dependencies:
- bn.js "^4.1.1"
- browserify-rsa "^4.0.0"
- create-hash "^1.1.0"
- create-hmac "^1.1.2"
- elliptic "^6.0.0"
- inherits "^2.0.1"
- parse-asn1 "^5.0.0"
+ version "4.2.1"
+ resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.2.1.tgz#eaf4add46dd54be3bb3b36c0cf15abbeba7956c3"
+ integrity sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==
+ dependencies:
+ bn.js "^5.1.1"
+ browserify-rsa "^4.0.1"
+ create-hash "^1.2.0"
+ create-hmac "^1.1.7"
+ elliptic "^6.5.3"
+ inherits "^2.0.4"
+ parse-asn1 "^5.1.5"
+ readable-stream "^3.6.0"
+ safe-buffer "^5.2.0"
browserify-zlib@^0.2.0:
version "0.2.0"
@@ -1912,14 +2119,16 @@ browserify-zlib@^0.2.0:
dependencies:
pako "~1.0.5"
-browserslist@^4.0.0, browserslist@^4.8.3, browserslist@^4.8.5, browserslist@^4.9.1:
- version "4.9.1"
- resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.9.1.tgz#01ffb9ca31a1aef7678128fc6a2253316aa7287c"
- integrity sha512-Q0DnKq20End3raFulq6Vfp1ecB9fh8yUNV55s8sekaDDeqBaCtWlRHCUdaWyUeSSBJM7IbM6HcsyaeYqgeDhnw==
+browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.14.7:
+ version "4.16.6"
+ resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.6.tgz#d7901277a5a88e554ed305b183ec9b0c08f66fa2"
+ integrity sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==
dependencies:
- caniuse-lite "^1.0.30001030"
- electron-to-chromium "^1.3.363"
- node-releases "^1.1.50"
+ caniuse-lite "^1.0.30001219"
+ colorette "^1.2.2"
+ electron-to-chromium "^1.3.723"
+ escalade "^3.1.1"
+ node-releases "^1.1.71"
buffer-from@^1.0.0:
version "1.1.1"
@@ -1966,14 +2175,14 @@ bytes@3.1.0:
integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
cac@^6.5.6:
- version "6.5.7"
- resolved "https://registry.yarnpkg.com/cac/-/cac-6.5.7.tgz#3359494ced169f58f4ccdaa64f9b760badddde7a"
- integrity sha512-DjjOqLvoX/oO/snovTNm553kRYWTmIIQBfHQ2UqktbCudoHJuxzvRhjwdCHkXrQwp/lnu3bYyZ+LfaHtwk0Wjw==
+ version "6.6.1"
+ resolved "https://registry.yarnpkg.com/cac/-/cac-6.6.1.tgz#3dde3f6943f45d42a56729ea3573c08b3e7b6a6d"
+ integrity sha512-uhki4T3Ax68hw7Dufi0bATVAF8ayBSwOKUEJHjObPrUN4tlQ8Lf7oljpTje/mArLxYN0D743c2zJt4C1bVTCqg==
cacache@^12.0.2, cacache@^12.0.3:
- version "12.0.3"
- resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.3.tgz#be99abba4e1bf5df461cd5a2c1071fc432573390"
- integrity sha512-kqdmfXEGFepesTuROHMs3MpFLWrPkSSpRqOw80RCflZXy/khxaArvFrQ7uJxSUduzAufc6G0g1VUCOZXxWavPw==
+ version "12.0.4"
+ resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.4.tgz#668bcbd105aeb5f1d92fe25570ec9525c8faa40c"
+ integrity sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==
dependencies:
bluebird "^3.5.5"
chownr "^1.1.1"
@@ -2031,6 +2240,14 @@ cacheable-request@^6.0.0:
normalize-url "^4.1.0"
responselike "^1.0.2"
+call-bind@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.0.tgz#24127054bb3f9bdcb4b1fb82418186072f77b8ce"
+ integrity sha512-AEXsYIyyDY3MCzbwdhzG3Jx1R0J2wetQyUynn6dYHAO+bg8l1k7jwZtRv4ryryFs7EP+NDlikJlVe59jr0cM2w==
+ dependencies:
+ function-bind "^1.1.1"
+ get-intrinsic "^1.0.0"
+
call-me-maybe@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.1.tgz#26d208ea89e37b5cbde60250a15f031c16a4d66b"
@@ -2063,29 +2280,16 @@ camel-case@3.0.x:
no-case "^2.2.0"
upper-case "^1.1.1"
-camelcase-keys@^2.0.0:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
- integrity sha1-MIvur/3ygRkFHvodkyITyRuPkuc=
- dependencies:
- camelcase "^2.0.0"
- map-obj "^1.0.0"
-
-camelcase@^2.0.0:
- version "2.1.1"
- resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
- integrity sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=
-
-camelcase@^3.0.0:
- version "3.0.0"
- resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
- integrity sha1-MvxLn82vhF/N9+c7uXysImHwqwo=
-
camelcase@^5.0.0, camelcase@^5.2.0, camelcase@^5.3.1:
version "5.3.1"
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
+camelcase@^6.0.0:
+ version "6.2.0"
+ resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
+ integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
+
caniuse-api@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -2096,17 +2300,17 @@ caniuse-api@^3.0.0:
lodash.memoize "^4.1.2"
lodash.uniq "^4.5.0"
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001020, caniuse-lite@^1.0.30001030:
- version "1.0.30001035"
- resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001035.tgz#2bb53b8aa4716b2ed08e088d4dc816a5fe089a1e"
- integrity sha512-C1ZxgkuA4/bUEdMbU5WrGY4+UhMFFiXrgNAfxiMIqWgFTWfv/xsZCS2xEHT2LMq7xAZfuAnu6mcqyDl0ZR6wLQ==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001219:
+ version "1.0.30001228"
+ resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001228.tgz#bfdc5942cd3326fa51ee0b42fbef4da9d492a7fa"
+ integrity sha512-QQmLOGJ3DEgokHbMSA8cj2a+geXqmnpyOFT0lhQV6P3/YOJvGDEwoedcwxEQ30gJIwIIunHIicunJ2rzK5gB2A==
caseless@~0.12.0:
version "0.12.0"
resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
-chalk@^1.1.1, chalk@^1.1.3:
+chalk@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
@@ -2134,7 +2338,22 @@ chalk@^3.0.0:
ansi-styles "^4.1.0"
supports-color "^7.1.0"
-chokidar@^2.0.2, chokidar@^2.0.3, chokidar@^2.1.8:
+"chokidar@>=2.0.0 <4.0.0", chokidar@^3.4.1:
+ version "3.4.3"
+ resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.3.tgz#c1df38231448e45ca4ac588e6c79573ba6a57d5b"
+ integrity sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==
+ dependencies:
+ anymatch "~3.1.1"
+ braces "~3.0.2"
+ glob-parent "~5.1.0"
+ is-binary-path "~2.1.0"
+ is-glob "~4.0.1"
+ normalize-path "~3.0.0"
+ readdirp "~3.5.0"
+ optionalDependencies:
+ fsevents "~2.1.2"
+
+chokidar@^2.0.3, chokidar@^2.1.8:
version "2.1.8"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
integrity sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==
@@ -2201,9 +2420,9 @@ clean-css@4.2.x:
source-map "~0.6.0"
cli-boxes@^2.2.0:
- version "2.2.0"
- resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-2.2.0.tgz#538ecae8f9c6ca508e3c3c95b453fe93cb4c168d"
- integrity sha512-gpaBrMAizVEANOpfZp/EEUixTXDyGt7DFzdK5hU+UbWt/J0lB0w20ncZj59Z9a93xHb9u12zF5BS6i9RKbtg4w==
+ version "2.2.1"
+ resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-2.2.1.tgz#ddd5035d25094fce220e9cab40a45840a440318f"
+ integrity sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==
clipboard@^2.0.0:
version "2.0.6"
@@ -2214,24 +2433,6 @@ clipboard@^2.0.0:
select "^1.1.2"
tiny-emitter "^2.0.0"
-cliui@^3.2.0:
- version "3.2.0"
- resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
- integrity sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=
- dependencies:
- string-width "^1.0.1"
- strip-ansi "^3.0.1"
- wrap-ansi "^2.0.0"
-
-cliui@^4.0.0:
- version "4.1.0"
- resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.1.0.tgz#348422dbe82d800b3022eef4f6ac10bf2e4d1b49"
- integrity sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==
- dependencies:
- string-width "^2.1.1"
- strip-ansi "^4.0.0"
- wrap-ansi "^2.0.0"
-
cliui@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
@@ -2266,11 +2467,6 @@ coa@^2.0.2:
chalk "^2.4.1"
q "^1.1.2"
-code-point-at@^1.0.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
- integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
-
collection-visit@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@@ -2303,21 +2499,26 @@ color-name@^1.0.0, color-name@~1.1.4:
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
-color-string@^1.5.2:
- version "1.5.3"
- resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.3.tgz#c9bbc5f01b58b5492f3d6857459cb6590ce204cc"
- integrity sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==
+color-string@^1.5.4:
+ version "1.5.4"
+ resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.4.tgz#dd51cd25cfee953d138fe4002372cc3d0e504cb6"
+ integrity sha512-57yF5yt8Xa3czSEW1jfQDE79Idk0+AkN/4KWad6tbdxUmAs3MvjxlWSWD4deYytcRfoZ9nhKyFl1kj5tBvidbw==
dependencies:
color-name "^1.0.0"
simple-swizzle "^0.2.2"
color@^3.0.0:
- version "3.1.2"
- resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
- integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==
+ version "3.1.3"
+ resolved "https://registry.yarnpkg.com/color/-/color-3.1.3.tgz#ca67fb4e7b97d611dcde39eceed422067d91596e"
+ integrity sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==
dependencies:
color-convert "^1.9.1"
- color-string "^1.5.2"
+ color-string "^1.5.4"
+
+colorette@^1.2.1, colorette@^1.2.2:
+ version "1.2.2"
+ resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
+ integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
combined-stream@^1.0.6, combined-stream@~1.0.6:
version "1.0.8"
@@ -2341,6 +2542,11 @@ commander@~2.19.0:
resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
+common-tags@^1.8.0:
+ version "1.8.0"
+ resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
+ integrity sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw==
+
commondir@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -2404,20 +2610,15 @@ connect-history-api-fallback@^1.5.0, connect-history-api-fallback@^1.6.0:
integrity sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==
consola@^2.6.0:
- version "2.11.3"
- resolved "https://registry.yarnpkg.com/consola/-/consola-2.11.3.tgz#f7315836224c143ac5094b47fd4c816c2cd1560e"
- integrity sha512-aoW0YIIAmeftGR8GSpw6CGQluNdkWMWh3yEFjH/hmynTYnMtibXszii3lxCXmk8YxJtI3FAK5aTiquA5VH68Gw==
+ version "2.15.0"
+ resolved "https://registry.yarnpkg.com/consola/-/consola-2.15.0.tgz#40fc4eefa4d2f8ef2e2806147f056ea207fcc0e9"
+ integrity sha512-vlcSGgdYS26mPf7qNi+dCisbhiyDnrN1zaRbw3CSuc2wGOMEGGPsp46PdRG5gqXwgtJfjxDkxRNAgRPr1B77vQ==
console-browserify@^1.1.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
integrity sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==
-console-control-strings@^1.0.0, console-control-strings@~1.1.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
- integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=
-
consolidate@^0.15.1:
version "0.15.1"
resolved "https://registry.yarnpkg.com/consolidate/-/consolidate-0.15.1.tgz#21ab043235c71a07d45d9aad98593b0dba56bab7"
@@ -2477,9 +2678,9 @@ copy-descriptor@^0.1.0:
integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
copy-webpack-plugin@^5.0.2:
- version "5.1.1"
- resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-5.1.1.tgz#5481a03dea1123d88a988c6ff8b78247214f0b88"
- integrity sha512-P15M5ZC8dyCjQHWwd4Ia/dm0SgVvZJMYeykVIVYXbGyqO4dWB5oyPHp9i7wjwo5LhtlhKbiBCdS2NvM07Wlybg==
+ version "5.1.2"
+ resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-5.1.2.tgz#8a889e1dcafa6c91c6cd4be1ad158f1d3823bae2"
+ integrity sha512-Uh7crJAco3AjBvgAy9Z75CjK8IG+gxaErro71THQ+vv/bl4HaQcpkexAY8KVW/T6D2W2IRr+couF/knIRkZMIQ==
dependencies:
cacache "^12.0.3"
find-cache-dir "^2.1.0"
@@ -2491,21 +2692,26 @@ copy-webpack-plugin@^5.0.2:
normalize-path "^3.0.0"
p-limit "^2.2.1"
schema-utils "^1.0.0"
- serialize-javascript "^2.1.2"
+ serialize-javascript "^4.0.0"
webpack-log "^2.0.0"
-core-js-compat@^3.6.2, core-js-compat@^3.6.4:
- version "3.6.4"
- resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.4.tgz#938476569ebb6cda80d339bcf199fae4f16fff17"
- integrity sha512-zAa3IZPvsJ0slViBQ2z+vgyyTuhd3MFn1rBQjZSKVEgB0UMYhUkCj9jJUVPgGTGqWvsBVmfnruXgTcNyTlEiSA==
+core-js-compat@^3.6.5, core-js-compat@^3.7.0:
+ version "3.8.0"
+ resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.8.0.tgz#3248c6826f4006793bd637db608bca6e4cd688b1"
+ integrity sha512-o9QKelQSxQMYWHXc/Gc4L8bx/4F7TTraE5rhuN8I7mKBt5dBIUpXpIR3omv70ebr8ST5R3PqbDQr+ZI3+Tt1FQ==
dependencies:
- browserslist "^4.8.3"
+ browserslist "^4.14.7"
semver "7.0.0"
-core-js@^3.6.4:
- version "3.6.4"
- resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.4.tgz#440a83536b458114b9cb2ac1580ba377dc470647"
- integrity sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw==
+core-js@^2.4.0:
+ version "2.6.11"
+ resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
+ integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
+
+core-js@^3.6.4, core-js@^3.6.5:
+ version "3.8.0"
+ resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.8.0.tgz#0fc2d4941cadf80538b030648bb64d230b4da0ce"
+ integrity sha512-W2VYNB0nwQQE7tKS7HzXd7r2y/y2SVJl4ga6oH/dnaLFzM0o2lB2P3zCkWj5Wc/zyMYjtgd5Hmhk0ObkQFZOIA==
core-util-is@1.0.2, core-util-is@~1.0.0:
version "1.0.2"
@@ -2523,14 +2729,14 @@ cosmiconfig@^5.0.0:
parse-json "^4.0.0"
create-ecdh@^4.0.0:
- version "4.0.3"
- resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.3.tgz#c9111b6f33045c4697f144787f9254cdc77c45ff"
- integrity sha512-GbEHQPMOswGpKXM9kCWVrremUcBmjteUaQ01T9rkKCPDXfUHX0IoP9LpHYo2NPFampa4e+/pFDc3jQdxrxQLaw==
+ version "4.0.4"
+ resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
+ integrity sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==
dependencies:
bn.js "^4.1.0"
- elliptic "^6.0.0"
+ elliptic "^6.5.3"
-create-hash@^1.1.0, create-hash@^1.1.2:
+create-hash@^1.1.0, create-hash@^1.1.2, create-hash@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
integrity sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==
@@ -2541,7 +2747,7 @@ create-hash@^1.1.0, create-hash@^1.1.2:
ripemd160 "^2.0.1"
sha.js "^2.4.0"
-create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
+create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
version "1.1.7"
resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.7.tgz#69170c78b3ab957147b2b8b04572e47ead2243ff"
integrity sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==
@@ -2553,14 +2759,6 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
safe-buffer "^5.0.1"
sha.js "^2.4.8"
-cross-spawn@^3.0.0:
- version "3.0.1"
- resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
- integrity sha1-ElYDfsufDF9549bvE14wdwGEuYI=
- dependencies:
- lru-cache "^4.0.1"
- which "^1.2.9"
-
cross-spawn@^6.0.0, cross-spawn@^6.0.5:
version "6.0.5"
resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -2664,15 +2862,23 @@ css-tree@1.0.0-alpha.37:
mdn-data "2.0.4"
source-map "^0.6.1"
+css-tree@^1.1.2:
+ version "1.1.2"
+ resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.2.tgz#9ae393b5dafd7dae8a622475caec78d3d8fbd7b5"
+ integrity sha512-wCoWush5Aeo48GLhfHPbmvZs59Z+M7k5+B1xDnXbdWNcEF423DoFdqSWE0PM5aNk5nI5cp1q7ms36zGApY/sKQ==
+ dependencies:
+ mdn-data "2.0.14"
+ source-map "^0.6.1"
+
css-what@2.1:
version "2.1.3"
resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
css-what@^3.2.1:
- version "3.2.1"
- resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.2.1.tgz#f4a8f12421064621b456755e34a03a2c22df5da1"
- integrity sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==
+ version "3.4.2"
+ resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
+ integrity sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==
css@^2.0.0:
version "2.2.4"
@@ -2758,18 +2964,11 @@ cssnano@^4.1.10:
postcss "^7.0.0"
csso@^4.0.2:
- version "4.0.2"
- resolved "https://registry.yarnpkg.com/csso/-/csso-4.0.2.tgz#e5f81ab3a56b8eefb7f0092ce7279329f454de3d"
- integrity sha512-kS7/oeNVXkHWxby5tHVxlhjizRCSv8QdU7hB2FpdAibDU8FjTAolhNjKNTiLzXtUrKT6HwClE81yXwEk1309wg==
- dependencies:
- css-tree "1.0.0-alpha.37"
-
-currently-unhandled@^0.4.1:
- version "0.4.1"
- resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
- integrity sha1-mI3zP+qxke95mmE2nddsF635V+o=
+ version "4.2.0"
+ resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
+ integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
dependencies:
- array-find-index "^1.0.1"
+ css-tree "^1.1.2"
cyclist@^1.0.1:
version "1.0.1"
@@ -2795,28 +2994,28 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
dependencies:
ms "2.0.0"
-debug@=3.1.0, debug@~3.1.0:
- version "3.1.0"
- resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
- integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
- dependencies:
- ms "2.0.0"
-
debug@^3.1.1, debug@^3.2.5:
- version "3.2.6"
- resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
- integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
+ version "3.2.7"
+ resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+ integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
dependencies:
ms "^2.1.1"
debug@^4.1.0, debug@^4.1.1:
- version "4.1.1"
- resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
- integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
+ version "4.3.1"
+ resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
+ integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==
dependencies:
- ms "^2.1.1"
+ ms "2.1.2"
-decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
+debug@~3.1.0:
+ version "3.1.0"
+ resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+ integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+ dependencies:
+ ms "2.0.0"
+
+decamelize@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
@@ -2920,11 +3119,6 @@ delegate@^3.1.2:
resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
-delegates@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
- integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=
-
depd@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
@@ -3013,9 +3207,9 @@ dom-serializer@0:
entities "^2.0.0"
dom-walk@^0.1.0:
- version "0.1.1"
- resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
- integrity sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg=
+ version "0.1.2"
+ resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
+ integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
domain-browser@^1.1.1:
version "1.2.0"
@@ -3028,9 +3222,9 @@ domelementtype@1, domelementtype@^1.3.1:
integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
domelementtype@^2.0.1:
- version "2.0.1"
- resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.0.1.tgz#1f8bdfe91f5a78063274e803b4bdcedf6e94f94d"
- integrity sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.1.0.tgz#a851c080a6d1c3d94344aed151d99f669edf585e"
+ integrity sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w==
domhandler@^2.3.0:
version "2.4.2"
@@ -3056,9 +3250,9 @@ domutils@^1.5.1, domutils@^1.7.0:
domelementtype "1"
dot-prop@^5.2.0:
- version "5.2.0"
- resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.2.0.tgz#c34ecc29556dc45f1f4c22697b6f4904e0cc4fcb"
- integrity sha512-uEUyaDKoSQ1M4Oq8l45hSE26SnTxL6snNnqvK/VWx5wJhmff5z0FUVJDKDanor/6w3kzE3i7XZOk+7wC0EXr1A==
+ version "5.3.0"
+ resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
+ integrity sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==
dependencies:
is-obj "^2.0.0"
@@ -3090,23 +3284,23 @@ ee-first@1.1.1:
resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
-electron-to-chromium@^1.3.363:
- version "1.3.376"
- resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.376.tgz#7cb7b5205564a06c8f8ecfbe832cbd47a1224bb1"
- integrity sha512-cv/PYVz5szeMz192ngilmezyPNFkUjuynuL2vNdiqIrio440nfTDdc0JJU0TS2KHLSVCs9gBbt4CFqM+HcBnjw==
+electron-to-chromium@^1.3.723:
+ version "1.3.737"
+ resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.737.tgz#196f2e9656f4f3c31930750e1899c091b72d36b5"
+ integrity sha512-P/B84AgUSQXaum7a8m11HUsYL8tj9h/Pt5f7Hg7Ty6bm5DxlFq+e5+ouHUoNQMsKDJ7u4yGfI8mOErCmSH9wyg==
-elliptic@^6.0.0:
- version "6.5.3"
- resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.3.tgz#cb59eb2efdaf73a0bd78ccd7015a62ad6e0f93d6"
- integrity sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==
+elliptic@^6.5.3:
+ version "6.5.4"
+ resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
+ integrity sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==
dependencies:
- bn.js "^4.4.0"
- brorand "^1.0.1"
+ bn.js "^4.11.9"
+ brorand "^1.1.0"
hash.js "^1.0.0"
- hmac-drbg "^1.0.0"
- inherits "^2.0.1"
- minimalistic-assert "^1.0.0"
- minimalistic-crypto-utils "^1.0.0"
+ hmac-drbg "^1.0.1"
+ inherits "^2.0.4"
+ minimalistic-assert "^1.0.1"
+ minimalistic-crypto-utils "^1.0.1"
emoji-regex@^7.0.1:
version "7.0.3"
@@ -3140,10 +3334,10 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0:
dependencies:
once "^1.4.0"
-enhanced-resolve@^4.1.0:
- version "4.1.1"
- resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.1.1.tgz#2937e2b8066cd0fe7ce0990a98f0d71a35189f66"
- integrity sha512-98p2zE+rL7/g/DzMHMTF4zZlCgeVdJ7yr6xzEpJRYwFYrGi9ANdn5DnJURg6RpBkyk60XYDnWIv51VfIhfNGuA==
+enhanced-resolve@^4.3.0:
+ version "4.3.0"
+ resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.3.0.tgz#3b806f3bfafc1ec7de69551ef93cca46c1704126"
+ integrity sha512-3e87LvavsdxyoCfGusJnrZ5G8SLPOFeHSNpZI/ATL9a5leXo2k0w6MKnbqhdBad9qTobSfB20Ld7UmgoNbAZkQ==
dependencies:
graceful-fs "^4.1.2"
memory-fs "^0.5.0"
@@ -3155,9 +3349,9 @@ entities@^1.1.1, entities@~1.1.1:
integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
entities@^2.0.0:
- version "2.0.0"
- resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.0.tgz#68d6084cab1b079767540d80e56a39b423e4abf4"
- integrity sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw==
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
+ integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
envify@^4.0.0:
version "4.1.0"
@@ -3168,9 +3362,9 @@ envify@^4.0.0:
through "~2.3.4"
envinfo@^7.2.0:
- version "7.5.0"
- resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.5.0.tgz#91410bb6db262fb4f1409bd506e9ff57e91023f4"
- integrity sha512-jDgnJaF/Btomk+m3PZDTTCb5XIIIX3zYItnCRfF73zVgvinLoRomuhi75Y4su0PtQxWz4v66XnLLckyvyJTOIQ==
+ version "7.7.3"
+ resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.7.3.tgz#4b2d8622e3e7366afb8091b23ed95569ea0208cc"
+ integrity sha512-46+j5QxbPWza0PB1i15nZx0xQ4I/EfQxg9J8Had3b408SV63nEtor2e+oiY63amTo9KTuh2a3XLObNwduxYwwA==
errno@^0.1.3, errno@~0.1.7:
version "0.1.7"
@@ -3179,7 +3373,7 @@ errno@^0.1.3, errno@~0.1.7:
dependencies:
prr "~1.0.1"
-error-ex@^1.2.0, error-ex@^1.3.1:
+error-ex@^1.3.1:
version "1.3.2"
resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
@@ -3187,21 +3381,39 @@ error-ex@^1.2.0, error-ex@^1.3.1:
is-arrayish "^0.2.1"
es-abstract@^1.17.0-next.1, es-abstract@^1.17.2:
- version "1.17.4"
- resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.4.tgz#e3aedf19706b20e7c2594c35fc0d57605a79e184"
- integrity sha512-Ae3um/gb8F0mui/jPL+QiqmglkUsaQf7FwBEHYIFkztkneosu9imhqHpBzQ3h1vit8t5iQ74t6PEVvphBZiuiQ==
+ version "1.17.7"
+ resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.7.tgz#a4de61b2f66989fc7421676c1cb9787573ace54c"
+ integrity sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==
dependencies:
es-to-primitive "^1.2.1"
function-bind "^1.1.1"
has "^1.0.3"
has-symbols "^1.0.1"
- is-callable "^1.1.5"
- is-regex "^1.0.5"
- object-inspect "^1.7.0"
+ is-callable "^1.2.2"
+ is-regex "^1.1.1"
+ object-inspect "^1.8.0"
object-keys "^1.1.1"
- object.assign "^4.1.0"
- string.prototype.trimleft "^2.1.1"
- string.prototype.trimright "^2.1.1"
+ object.assign "^4.1.1"
+ string.prototype.trimend "^1.0.1"
+ string.prototype.trimstart "^1.0.1"
+
+es-abstract@^1.18.0-next.1:
+ version "1.18.0-next.1"
+ resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.1.tgz#6e3a0a4bda717e5023ab3b8e90bec36108d22c68"
+ integrity sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==
+ dependencies:
+ es-to-primitive "^1.2.1"
+ function-bind "^1.1.1"
+ has "^1.0.3"
+ has-symbols "^1.0.1"
+ is-callable "^1.2.2"
+ is-negative-zero "^2.0.0"
+ is-regex "^1.1.1"
+ object-inspect "^1.8.0"
+ object-keys "^1.1.1"
+ object.assign "^4.1.1"
+ string.prototype.trimend "^1.0.1"
+ string.prototype.trimstart "^1.0.1"
es-to-primitive@^1.2.1:
version "1.2.1"
@@ -3217,6 +3429,11 @@ es6-promise@^4.1.0:
resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
+escalade@^3.1.1:
+ version "3.1.1"
+ resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
+ integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+
escape-goat@^2.0.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/escape-goat/-/escape-goat-2.1.1.tgz#1b2dc77003676c457ec760b2dc68edb648188675"
@@ -3232,6 +3449,11 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
+escape-string-regexp@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
+ integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
+
eslint-scope@^4.0.3:
version "4.0.3"
resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.3.tgz#ca03833310f6889a3264781aa82e63eb9cfe7848"
@@ -3246,17 +3468,22 @@ esprima@^4.0.0:
integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
esrecurse@^4.1.0:
- version "4.2.1"
- resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.1.tgz#007a3b9fdbc2b3bb87e4879ea19c92fdbd3942cf"
- integrity sha512-64RBB++fIOAXPw3P9cy89qfMlvZEXZkqqJkjqqXIvzP5ezRZjW+lPWjw35UX/3EhUPFYbg5ER4JYgDw4007/DQ==
+ version "4.3.0"
+ resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+ integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
dependencies:
- estraverse "^4.1.0"
+ estraverse "^5.2.0"
-estraverse@^4.1.0, estraverse@^4.1.1:
+estraverse@^4.1.1:
version "4.3.0"
resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+estraverse@^5.2.0:
+ version "5.2.0"
+ resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
+ integrity sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==
+
esutils@^2.0.2:
version "2.0.3"
resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
@@ -3278,9 +3505,9 @@ events@^1.1.0:
integrity sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=
events@^3.0.0:
- version "3.1.0"
- resolved "https://registry.yarnpkg.com/events/-/events-3.1.0.tgz#84279af1b34cb75aa88bf5ff291f6d0bd9b31a59"
- integrity sha512-Rv+u8MLHNOdMjTAFeT3nCjHn2aGlx435FP/sDHNaRhDEMwyI/aB22Kj2qIN8R0cw3z28psEQLYwxVKLsKrMgWg==
+ version "3.2.0"
+ resolved "https://registry.yarnpkg.com/events/-/events-3.2.0.tgz#93b87c18f8efcd4202a461aec4dfc0556b639379"
+ integrity sha512-/46HWwbfCX2xTawVfkKLGxMifJYQBWMwY1mjywRtb4c9x8l5NP3KoJtnIOiL1hfdRkIuYhETxQlo62IF8tcnlg==
eventsource@^1.0.7:
version "1.0.7"
@@ -3404,9 +3631,9 @@ extsprintf@^1.2.0:
integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
fast-deep-equal@^3.1.1:
- version "3.1.1"
- resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.1.tgz#545145077c501491e33b15ec408c294376e94ae4"
- integrity sha512-8UEa58QDLauDNfpbrX55Q9jrGHThw2ZMdOky5Gl1CDtVeJDPVrG4Jxx1N8jw2gkWaff5UUuX1KJd+9zGe2B+ZA==
+ version "3.1.3"
+ resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+ integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
fast-glob@^2.2.6:
version "2.2.7"
@@ -3440,9 +3667,9 @@ faye-websocket@~0.11.1:
websocket-driver ">=0.5.1"
figgy-pudding@^3.5.1:
- version "3.5.1"
- resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
- integrity sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==
+ version "3.5.2"
+ resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
+ integrity sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==
figures@^3.0.0:
version "3.2.0"
@@ -3474,6 +3701,13 @@ fill-range@^4.0.0:
repeat-string "^1.6.1"
to-regex-range "^2.1.0"
+fill-range@^7.0.1:
+ version "7.0.1"
+ resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+ integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+ dependencies:
+ to-regex-range "^5.0.1"
+
finalhandler@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
@@ -3487,7 +3721,7 @@ finalhandler@~1.1.2:
statuses "~1.5.0"
unpipe "~1.0.0"
-find-cache-dir@^2.0.0, find-cache-dir@^2.1.0:
+find-cache-dir@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz#8d0f94cd13fe43c6c7c261a0d86115ca918c05f7"
integrity sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==
@@ -3496,13 +3730,14 @@ find-cache-dir@^2.0.0, find-cache-dir@^2.1.0:
make-dir "^2.0.0"
pkg-dir "^3.0.0"
-find-up@^1.0.0:
- version "1.1.2"
- resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
- integrity sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=
+find-cache-dir@^3.3.1:
+ version "3.3.1"
+ resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.1.tgz#89b33fad4a4670daa94f855f7fbe31d6d84fe880"
+ integrity sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==
dependencies:
- path-exists "^2.0.0"
- pinkie-promise "^2.0.0"
+ commondir "^1.0.1"
+ make-dir "^3.0.2"
+ pkg-dir "^4.1.0"
find-up@^3.0.0:
version "3.0.0"
@@ -3511,6 +3746,14 @@ find-up@^3.0.0:
dependencies:
locate-path "^3.0.0"
+find-up@^4.0.0:
+ version "4.1.0"
+ resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
+ integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+ dependencies:
+ locate-path "^5.0.0"
+ path-exists "^4.0.0"
+
flush-write-stream@^1.0.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
@@ -3519,17 +3762,10 @@ flush-write-stream@^1.0.0:
inherits "^2.0.3"
readable-stream "^2.3.6"
-follow-redirects@1.5.10:
- version "1.5.10"
- resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
- integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
- dependencies:
- debug "=3.1.0"
-
-follow-redirects@^1.0.0:
- version "1.13.0"
- resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"
- integrity sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==
+follow-redirects@^1.0.0, follow-redirects@^1.10.0:
+ version "1.13.1"
+ resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.1.tgz#5f69b813376cee4fd0474a3aba835df04ab763b7"
+ integrity sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg==
for-in@^1.0.2:
version "1.0.2"
@@ -3580,6 +3816,15 @@ from2@^2.1.0:
inherits "^2.0.1"
readable-stream "^2.0.0"
+fs-extra@^4.0.2:
+ version "4.0.3"
+ resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
+ integrity sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==
+ dependencies:
+ graceful-fs "^4.1.2"
+ jsonfile "^4.0.0"
+ universalify "^0.1.0"
+
fs-extra@^7.0.1:
version "7.0.1"
resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
@@ -3605,68 +3850,46 @@ fs.realpath@^1.0.0:
integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
fsevents@^1.2.7:
- version "1.2.11"
- resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.11.tgz#67bf57f4758f02ede88fb2a1712fef4d15358be3"
- integrity sha512-+ux3lx6peh0BpvY0JebGyZoiR4D+oYzdPZMKJwkZ+sFkNJzpL7tXc/wehS49gUAxg3tmMHPHZkA8JU2rhhgDHw==
+ version "1.2.13"
+ resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.13.tgz#f325cb0455592428bcf11b383370ef70e3bfcc38"
+ integrity sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==
dependencies:
bindings "^1.5.0"
nan "^2.12.1"
-fstream@^1.0.0, fstream@^1.0.12:
- version "1.0.12"
- resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.12.tgz#4e8ba8ee2d48be4f7d0de505455548eae5932045"
- integrity sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==
- dependencies:
- graceful-fs "^4.1.2"
- inherits "~2.0.0"
- mkdirp ">=0.5 0"
- rimraf "2"
+fsevents@~2.1.2:
+ version "2.1.3"
+ resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
+ integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
function-bind@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
-gauge@~2.7.3:
- version "2.7.4"
- resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
- integrity sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=
- dependencies:
- aproba "^1.0.3"
- console-control-strings "^1.0.0"
- has-unicode "^2.0.0"
- object-assign "^4.1.0"
- signal-exit "^3.0.0"
- string-width "^1.0.1"
- strip-ansi "^3.0.1"
- wide-align "^1.1.0"
-
-gaze@^1.0.0:
- version "1.1.3"
- resolved "https://registry.yarnpkg.com/gaze/-/gaze-1.1.3.tgz#c441733e13b927ac8c0ff0b4c3b033f28812924a"
- integrity sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==
- dependencies:
- globule "^1.0.0"
-
gensync@^1.0.0-beta.1:
- version "1.0.0-beta.1"
- resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269"
- integrity sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==
-
-get-caller-file@^1.0.1:
- version "1.0.3"
- resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.3.tgz#f978fa4c90d1dfe7ff2d6beda2a515e713bdcf4a"
- integrity sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==
+ version "1.0.0-beta.2"
+ resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
+ integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
get-caller-file@^2.0.1:
version "2.0.5"
resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
-get-stdin@^4.0.1:
- version "4.0.1"
- resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
- integrity sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=
+get-intrinsic@^1.0.0:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.0.1.tgz#94a9768fcbdd0595a1c9273aacf4c89d075631be"
+ integrity sha512-ZnWP+AmS1VUaLgTRy47+zKtjTxz+0xMpx3I52i+aalBK1QP19ggLF3Db89KJX7kjfOfP2eoa01qc++GwPgufPg==
+ dependencies:
+ function-bind "^1.1.1"
+ has "^1.0.3"
+ has-symbols "^1.0.1"
+
+get-own-enumerable-property-symbols@^3.0.0:
+ version "3.0.2"
+ resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
+ integrity sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==
get-stream@^4.0.0, get-stream@^4.1.0:
version "4.1.0"
@@ -3676,9 +3899,9 @@ get-stream@^4.0.0, get-stream@^4.1.0:
pump "^3.0.0"
get-stream@^5.1.0:
- version "5.1.0"
- resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.1.0.tgz#01203cdc92597f9b909067c3e656cc1f4d3c4dc9"
- integrity sha512-EXr1FOzrzTfGeL0gQdeFEvOMm2mzMOglyiOXSTpPC+iAjAKftbr3jpCMWynogwYnM+eSj9sHGc6wjIcDvYiygw==
+ version "5.2.0"
+ resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.2.0.tgz#4966a1795ee5ace65e706c4b7beb71257d6e22d3"
+ integrity sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==
dependencies:
pump "^3.0.0"
@@ -3702,12 +3925,19 @@ glob-parent@^3.1.0:
is-glob "^3.1.0"
path-dirname "^1.0.0"
+glob-parent@~5.1.0:
+ version "5.1.1"
+ resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
+ integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
+ dependencies:
+ is-glob "^4.0.1"
+
glob-to-regexp@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=
-glob@^7.0.0, glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@~7.1.1:
+glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
version "7.1.6"
resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
@@ -3776,15 +4006,6 @@ globby@^9.2.0:
pify "^4.0.1"
slash "^2.0.0"
-globule@^1.0.0:
- version "1.3.1"
- resolved "https://registry.yarnpkg.com/globule/-/globule-1.3.1.tgz#90a25338f22b7fbeb527cee63c629aea754d33b9"
- integrity sha512-OVyWOHgw29yosRHCHo7NncwR1hW5ew0W/UrvtwvjefVJeQ26q4/8r8FmPsSF1hJ93IgWkyv16pCTz6WblMzm/g==
- dependencies:
- glob "~7.1.1"
- lodash "~4.17.12"
- minimatch "~3.0.2"
-
good-listener@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
@@ -3810,9 +4031,9 @@ got@^9.6.0:
url-parse-lax "^3.0.0"
graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6:
- version "4.2.3"
- resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
- integrity sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==
+ version "4.2.4"
+ resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
+ integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
gray-matter@^4.0.1:
version "4.0.2"
@@ -3825,9 +4046,9 @@ gray-matter@^4.0.1:
strip-bom-string "^1.0.0"
handle-thing@^2.0.0:
- version "2.0.0"
- resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754"
- integrity sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ==
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
+ integrity sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==
har-schema@^2.0.0:
version "2.0.0"
@@ -3835,11 +4056,11 @@ har-schema@^2.0.0:
integrity sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=
har-validator@~5.1.3:
- version "5.1.3"
- resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.3.tgz#1ef89ebd3e4996557675eed9893110dc350fa080"
- integrity sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==
+ version "5.1.5"
+ resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.5.tgz#1f0803b9f8cb20c0fa13822df1ecddb36bde1efd"
+ integrity sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==
dependencies:
- ajv "^6.5.5"
+ ajv "^6.12.3"
har-schema "^2.0.0"
has-ansi@^2.0.0:
@@ -3859,16 +4080,11 @@ has-flag@^4.0.0:
resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
-has-symbols@^1.0.0, has-symbols@^1.0.1:
+has-symbols@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8"
integrity sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==
-has-unicode@^2.0.0:
- version "2.0.1"
- resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
- integrity sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=
-
has-value@^0.3.1:
version "0.3.1"
resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
@@ -3913,12 +4129,13 @@ has@^1.0.0, has@^1.0.3:
function-bind "^1.1.1"
hash-base@^3.0.0:
- version "3.0.4"
- resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.0.4.tgz#5fc8686847ecd73499403319a6b0a3f3f6ae4918"
- integrity sha1-X8hoaEfs1zSZQDMZprCj8/auSRg=
+ version "3.1.0"
+ resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.1.0.tgz#55c381d9e06e1d2997a883b4a3fddfe7f0d3af33"
+ integrity sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==
dependencies:
- inherits "^2.0.1"
- safe-buffer "^5.0.1"
+ inherits "^2.0.4"
+ readable-stream "^3.6.0"
+ safe-buffer "^5.2.0"
hash-sum@^1.0.2:
version "1.0.2"
@@ -3943,7 +4160,7 @@ hex-color-regex@^1.1.0:
resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
-hmac-drbg@^1.0.0:
+hmac-drbg@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
integrity sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=
@@ -3960,11 +4177,6 @@ hogan.js@^3.0.2:
mkdirp "0.3.0"
nopt "1.0.10"
-hosted-git-info@^2.1.4:
- version "2.8.8"
- resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
- integrity sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==
-
hpack.js@^2.1.6:
version "2.1.6"
resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
@@ -3990,10 +4202,10 @@ html-comment-regex@^1.1.0:
resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"
integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
-html-entities@^1.2.1:
- version "1.2.1"
- resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
- integrity sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=
+html-entities@^1.3.1:
+ version "1.3.1"
+ resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.3.1.tgz#fb9a1a4b5b14c5daba82d3e34c6ae4fe701a0e44"
+ integrity sha512-rhE/4Z3hIhzHAUKbW8jVcCyuT5oJCXXqhN/6mXXVCpzTmvJnoH2HL/bt3EZ6p55jbFJBeAe1ZNpL5BugLujxNA==
html-minifier@^3.2.3:
version "3.5.21"
@@ -4013,6 +4225,11 @@ html-tags@^2.0.0:
resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b"
integrity sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=
+html-tags@^3.1.0:
+ version "3.1.0"
+ resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
+ integrity sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==
+
htmlparser2@^3.3.0:
version "3.10.1"
resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
@@ -4067,10 +4284,10 @@ http-errors@~1.7.2:
statuses ">= 1.5.0 < 2"
toidentifier "1.0.0"
-"http-parser-js@>=0.4.0 <0.4.11":
- version "0.4.10"
- resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.10.tgz#92c9c1374c35085f75db359ec56cc257cbb93fa4"
- integrity sha1-ksnBN0w1CF912zWexWzCV8u5P6Q=
+http-parser-js@>=0.5.1:
+ version "0.5.2"
+ resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.2.tgz#da2e31d237b393aae72ace43882dd7e270a8ff77"
+ integrity sha512-opCO9ASqg5Wy2FNo7A0sxy71yGbbkJJXLdgMK04Tcypw9jr2MgWbyubb0+WdmDmGnFflO7fRbqbaihh/ENDlRQ==
http-proxy-middleware@0.19.1:
version "0.19.1"
@@ -4125,9 +4342,9 @@ icss-utils@^4.1.0:
postcss "^7.0.14"
ieee754@^1.1.4:
- version "1.1.13"
- resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"
- integrity sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==
+ version "1.2.1"
+ resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
+ integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
iferr@^0.1.5:
version "0.1.5"
@@ -4145,9 +4362,9 @@ ignore@^4.0.3:
integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
immediate@^3.2.3:
- version "3.2.3"
- resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.2.3.tgz#d140fa8f614659bd6541233097ddaac25cdd991c"
- integrity sha1-0UD6j2FGWb1lQSMwl92qwlzdmRw=
+ version "3.3.0"
+ resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.3.0.tgz#1aef225517836bcdf7f2a2de2600c79ff0269266"
+ integrity sha512-HR7EVodfFUdQCTIeySw+WDRFJlPcLOJbXfwwZ7Oom6tjsvZ3bOkCDJHehQC3nxJrv7+f9XecwazynjU8e4Vw3Q==
import-cwd@^2.0.0:
version "2.1.0"
@@ -4189,18 +4406,6 @@ imurmurhash@^0.1.4:
resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
-in-publish@^2.0.0:
- version "2.0.0"
- resolved "https://registry.yarnpkg.com/in-publish/-/in-publish-2.0.0.tgz#e20ff5e3a2afc2690320b6dc552682a9c7fadf51"
- integrity sha1-4g/146KvwmkDILbcVSaCqcf631E=
-
-indent-string@^2.1.0:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
- integrity sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=
- dependencies:
- repeating "^2.0.0"
-
indexes-of@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
@@ -4219,7 +4424,7 @@ inflight@^1.0.4:
once "^1.3.0"
wrappy "1"
-inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
+inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
version "2.0.4"
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -4235,9 +4440,9 @@ inherits@2.0.3:
integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
ini@^1.3.5, ini@~1.3.0:
- version "1.3.5"
- resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
- integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
+ version "1.3.8"
+ resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
+ integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
internal-ip@^4.3.0:
version "4.3.0"
@@ -4252,23 +4457,6 @@ intersection-observer@^0.11.0:
resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.11.0.tgz#f4ea067070326f68393ee161cc0a2ca4c0040c6f"
integrity sha512-KZArj2QVnmdud9zTpKf279m2bbGfG+4/kn16UU0NL3pTVl52ZHiJ9IRNSsnn6jaHrL9EGLFM5eWjTx2fz/+zoQ==
-invariant@^2.2.2, invariant@^2.2.4:
- version "2.2.4"
- resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
- integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
- dependencies:
- loose-envify "^1.0.0"
-
-invert-kv@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
- integrity sha1-EEqOSqym09jNFXqO+L+rLXo//bY=
-
-invert-kv@^2.0.0:
- version "2.0.0"
- resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-2.0.0.tgz#7393f5afa59ec9ff5f67a27620d11c226e3eec02"
- integrity sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==
-
ip-regex@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
@@ -4330,15 +4518,22 @@ is-binary-path@^1.0.0:
dependencies:
binary-extensions "^1.0.0"
+is-binary-path@~2.1.0:
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+ integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+ dependencies:
+ binary-extensions "^2.0.0"
+
is-buffer@^1.1.5:
version "1.1.6"
resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
-is-callable@^1.1.4, is-callable@^1.1.5:
- version "1.1.5"
- resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
- integrity sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==
+is-callable@^1.1.4, is-callable@^1.2.2:
+ version "1.2.2"
+ resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.2.tgz#c7c6715cd22d4ddb48d3e19970223aceabb080d9"
+ integrity sha512-dnMqspv5nU3LoewK2N/y7KLtxtakvTuaCsU9FU50/QDmdbHNy/4/JuRtMHqRU22o3q+W89YQndQEeCVwK+3qrA==
is-ci@^2.0.0:
version "2.0.0"
@@ -4359,6 +4554,13 @@ is-color-stop@^1.0.0:
rgb-regex "^1.0.1"
rgba-regex "^1.0.0"
+is-core-module@^2.1.0:
+ version "2.2.0"
+ resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.2.0.tgz#97037ef3d52224d85163f5597b2b63d9afed981a"
+ integrity sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==
+ dependencies:
+ has "^1.0.3"
+
is-data-descriptor@^0.1.4:
version "0.1.4"
resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
@@ -4418,18 +4620,6 @@ is-extglob@^2.1.0, is-extglob@^2.1.1:
resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
-is-finite@^1.0.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.1.0.tgz#904135c77fb42c0641d6aa1bcdbc4daa8da082f3"
- integrity sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==
-
-is-fullwidth-code-point@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
- integrity sha1-754xOG8DGn8NZDr4L95QxFfvAMs=
- dependencies:
- number-is-nan "^1.0.0"
-
is-fullwidth-code-point@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
@@ -4447,7 +4637,7 @@ is-glob@^3.1.0:
dependencies:
is-extglob "^2.1.0"
-is-glob@^4.0.0, is-glob@^4.0.1:
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
@@ -4455,13 +4645,18 @@ is-glob@^4.0.0, is-glob@^4.0.1:
is-extglob "^2.1.1"
is-installed-globally@^0.3.1:
- version "0.3.1"
- resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.3.1.tgz#679afef819347a72584617fd19497f010b8ed35f"
- integrity sha512-oiEcGoQbGc+3/iijAijrK2qFpkNoNjsHOm/5V5iaeydyrS/hnwaRCEgH5cpW0P3T1lSjV5piB7S5b5lEugNLhg==
+ version "0.3.2"
+ resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.3.2.tgz#fd3efa79ee670d1187233182d5b0a1dd00313141"
+ integrity sha512-wZ8x1js7Ia0kecP/CHM/3ABkAmujX7WPvQk6uu3Fly/Mk44pySulQpnHG46OMjHGXApINnV4QhY3SWnECO2z5g==
dependencies:
global-dirs "^2.0.1"
is-path-inside "^3.0.1"
+is-negative-zero@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
+ integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=
+
is-npm@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d"
@@ -4474,6 +4669,16 @@ is-number@^3.0.0:
dependencies:
kind-of "^3.0.2"
+is-number@^7.0.0:
+ version "7.0.0"
+ resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+ integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-obj@^1.0.1:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
+ integrity sha1-PkcprB9f3gJc19g6iW2rn09n2w8=
+
is-obj@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
@@ -4515,12 +4720,17 @@ is-plain-object@^2.0.3, is-plain-object@^2.0.4:
dependencies:
isobject "^3.0.1"
-is-regex@^1.0.4, is-regex@^1.0.5:
- version "1.0.5"
- resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.5.tgz#39d589a358bf18967f726967120b8fc1aed74eae"
- integrity sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==
+is-regex@^1.0.4, is-regex@^1.1.1:
+ version "1.1.1"
+ resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
+ integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==
dependencies:
- has "^1.0.3"
+ has-symbols "^1.0.1"
+
+is-regexp@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
+ integrity sha1-/S2INUXEa6xaYz57mgnof6LLUGk=
is-resolvable@^1.0.0:
version "1.1.0"
@@ -4551,11 +4761,6 @@ is-typedarray@^1.0.0, is-typedarray@~1.0.0:
resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
-is-utf8@^0.2.0:
- version "0.2.1"
- resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
- integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
-
is-windows@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -4613,20 +4818,15 @@ javascript-stringify@^2.0.1:
resolved "https://registry.yarnpkg.com/javascript-stringify/-/javascript-stringify-2.0.1.tgz#6ef358035310e35d667c675ed63d3eb7c1aa19e5"
integrity sha512-yV+gqbd5vaOYjqlbk16EG89xB5udgjqQF3C5FAORDg4f/IS1Yc5ERCv5e/57yBcfJYw05V5JyIXabhwb75Xxow==
-js-base64@^2.1.8:
- version "2.5.2"
- resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.2.tgz#313b6274dda718f714d00b3330bbae6e38e90209"
- integrity sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ==
-
-"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
+js-tokens@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
js-yaml@^3.11.0, js-yaml@^3.13.1:
- version "3.13.1"
- resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
- integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
+ version "3.14.0"
+ resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.0.tgz#a7a34170f26a21bb162424d8adacb4113a69e482"
+ integrity sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==
dependencies:
argparse "^1.0.7"
esprima "^4.0.0"
@@ -4688,12 +4888,12 @@ json5@^1.0.1:
dependencies:
minimist "^1.2.0"
-json5@^2.1.0:
- version "2.1.1"
- resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.1.tgz#81b6cb04e9ba496f1c7005d07b4368a2638f90b6"
- integrity sha512-l+3HXD0GEI3huGq1njuqtzYK8OYJyXMkOLtQ53pjWh89tvWS2h6l+1zMkYWqlb57+SiQodKZyvMEFb2X+KrFhQ==
+json5@^2.1.2:
+ version "2.1.3"
+ resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
+ integrity sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==
dependencies:
- minimist "^1.2.0"
+ minimist "^1.2.5"
jsonfile@^4.0.0:
version "4.0.0"
@@ -4763,32 +4963,6 @@ latest-version@^5.0.0:
dependencies:
package-json "^6.3.0"
-lcid@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/lcid/-/lcid-1.0.0.tgz#308accafa0bc483a3867b4b6f2b9506251d1b835"
- integrity sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=
- dependencies:
- invert-kv "^1.0.0"
-
-lcid@^2.0.0:
- version "2.0.0"
- resolved "https://registry.yarnpkg.com/lcid/-/lcid-2.0.0.tgz#6ef5d2df60e52f82eb228a4c373e8d1f397253cf"
- integrity sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==
- dependencies:
- invert-kv "^2.0.0"
-
-leven@^3.1.0:
- version "3.1.0"
- resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
- integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
-
-levenary@^1.1.1:
- version "1.1.1"
- resolved "https://registry.yarnpkg.com/levenary/-/levenary-1.1.1.tgz#842a9ee98d2075aa7faeedbe32679e9205f46f77"
- integrity sha512-mkAdOIt79FD6irqjYSs4rdbnlT5vRonMEvBVPVb3XmevfS8kgRXwfes0dhPdEtzTWD/1eNE/Bm/G1iRt6DcnQQ==
- dependencies:
- leven "^3.1.0"
-
linkify-it@^2.0.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.2.0.tgz#e3b54697e78bf915c70a38acd78fd09e0058b1cf"
@@ -4796,17 +4970,6 @@ linkify-it@^2.0.0:
dependencies:
uc.micro "^1.0.1"
-load-json-file@^1.0.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
- integrity sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=
- dependencies:
- graceful-fs "^4.1.2"
- parse-json "^2.2.0"
- pify "^2.0.0"
- pinkie-promise "^2.0.0"
- strip-bom "^2.0.0"
-
load-script@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
@@ -4827,7 +4990,7 @@ loader-utils@^0.2.16:
json5 "^0.5.0"
object-assign "^4.0.1"
-loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
+loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
@@ -4844,6 +5007,13 @@ locate-path@^3.0.0:
p-locate "^3.0.0"
path-exists "^3.0.0"
+locate-path@^5.0.0:
+ version "5.0.0"
+ resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
+ integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+ dependencies:
+ p-locate "^4.1.0"
+
lodash._reinterpolate@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -4869,7 +5039,7 @@ lodash.memoize@^4.1.2:
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
-lodash.template@^4.5.0:
+lodash.template@^4.4.0, lodash.template@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"
integrity sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==
@@ -4889,30 +5059,15 @@ lodash.uniq@^4.5.0:
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
-lodash@^4.0.0, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.3, lodash@^4.17.5, lodash@~4.17.12:
- version "4.17.19"
- resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
- integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
-
-loglevel@^1.6.6:
- version "1.6.7"
- resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.7.tgz#b3e034233188c68b889f5b862415306f565e2c56"
- integrity sha512-cY2eLFrQSAfVPhCgH1s7JI73tMbg9YC3v3+ZHVW67sBS7UxWzNEk/ZBbSfLykBWHp33dqqtOv82gjhKEi81T/A==
-
-loose-envify@^1.0.0:
- version "1.4.0"
- resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
- integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
- dependencies:
- js-tokens "^3.0.0 || ^4.0.0"
+lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.3, lodash@^4.17.5:
+ version "4.17.21"
+ resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+ integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
-loud-rejection@^1.0.0:
- version "1.6.0"
- resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
- integrity sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=
- dependencies:
- currently-unhandled "^0.4.1"
- signal-exit "^3.0.0"
+loglevel@^1.6.8:
+ version "1.7.1"
+ resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197"
+ integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
lower-case@^1.1.1:
version "1.1.4"
@@ -4929,7 +5084,7 @@ lowercase-keys@^2.0.0:
resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz#2603e78b7b4b0006cbca2fbcc8a3202558ac9479"
integrity sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==
-lru-cache@^4.0.1, lru-cache@^4.1.2:
+lru-cache@^4.1.2:
version "4.1.5"
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
@@ -4952,35 +5107,18 @@ make-dir@^2.0.0:
pify "^4.0.1"
semver "^5.6.0"
-make-dir@^3.0.0:
- version "3.0.2"
- resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.0.2.tgz#04a1acbf22221e1d6ef43559f43e05a90dbb4392"
- integrity sha512-rYKABKutXa6vXTXhoV18cBE7PaewPXHe/Bdq4v+ZLMhxbWApkFFplT0LcbMW+6BbjnQXzZ/sAvSE/JdguApG5w==
+make-dir@^3.0.0, make-dir@^3.0.2, make-dir@^3.1.0:
+ version "3.1.0"
+ resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
+ integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
dependencies:
semver "^6.0.0"
-mamacro@^0.0.3:
- version "0.0.3"
- resolved "https://registry.yarnpkg.com/mamacro/-/mamacro-0.0.3.tgz#ad2c9576197c9f1abf308d0787865bd975a3f3e4"
- integrity sha512-qMEwh+UujcQ+kbz3T6V+wAmO2U8veoq2w+3wY8MquqwVA3jChfwY+Tk52GZKDfACEPjuZ7r2oJLejwpt8jtwTA==
-
-map-age-cleaner@^0.1.1:
- version "0.1.3"
- resolved "https://registry.yarnpkg.com/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz#7d583a7306434c055fe474b0f45078e6e1b4b92a"
- integrity sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==
- dependencies:
- p-defer "^1.0.0"
-
map-cache@^0.2.2:
version "0.2.2"
resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
integrity sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=
-map-obj@^1.0.0, map-obj@^1.0.1:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
- integrity sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=
-
map-visit@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
@@ -4989,9 +5127,9 @@ map-visit@^1.0.0:
object-visit "^1.0.0"
markdown-it-anchor@^5.0.2:
- version "5.2.5"
- resolved "https://registry.yarnpkg.com/markdown-it-anchor/-/markdown-it-anchor-5.2.5.tgz#dbf13cfcdbffd16a510984f1263e1d479a47d27a"
- integrity sha512-xLIjLQmtym3QpoY9llBgApknl7pxAcN3WDRc2d3rwpl+/YvDZHPmKscGs+L6E05xf2KrCXPBvosWt7MZukwSpQ==
+ version "5.3.0"
+ resolved "https://registry.yarnpkg.com/markdown-it-anchor/-/markdown-it-anchor-5.3.0.tgz#d549acd64856a8ecd1bea58365ef385effbac744"
+ integrity sha512-/V1MnLL/rgJ3jkMWo84UR+K+jF1cxNG1a+KwqeXqTIJ+jtA8aWSHuigx8lTzauiIjBDbwF3NcWQMotd0Dm39jA==
markdown-it-chain@^1.3.0:
version "1.3.0"
@@ -5035,6 +5173,11 @@ md5.js@^1.3.4:
inherits "^2.0.1"
safe-buffer "^5.1.2"
+mdn-data@2.0.14:
+ version "2.0.14"
+ resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
+ integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
+
mdn-data@2.0.4:
version "2.0.4"
resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
@@ -5050,15 +5193,6 @@ media-typer@0.3.0:
resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
-mem@^4.0.0:
- version "4.3.0"
- resolved "https://registry.yarnpkg.com/mem/-/mem-4.3.0.tgz#461af497bc4ae09608cdb2e60eefb69bff744178"
- integrity sha512-qX2bG48pTqYRVmDB37rn/6PT7LcR8T7oAX3bf99u1Tt1nzxYfxkgqDwUwolPlXweM0XzBOBFzSx4kfp7KP1s/w==
- dependencies:
- map-age-cleaner "^0.1.1"
- mimic-fn "^2.0.0"
- p-is-promise "^2.0.0"
-
memory-fs@^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -5075,22 +5209,6 @@ memory-fs@^0.5.0:
errno "^0.1.3"
readable-stream "^2.0.1"
-meow@^3.7.0:
- version "3.7.0"
- resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
- integrity sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=
- dependencies:
- camelcase-keys "^2.0.0"
- decamelize "^1.1.2"
- loud-rejection "^1.0.0"
- map-obj "^1.0.1"
- minimist "^1.1.3"
- normalize-package-data "^2.3.4"
- object-assign "^4.0.1"
- read-pkg-up "^1.0.1"
- redent "^1.0.0"
- trim-newlines "^1.0.0"
-
merge-descriptors@1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
@@ -5104,9 +5222,9 @@ merge-source-map@^1.1.0:
source-map "^0.6.1"
merge2@^1.2.3:
- version "1.3.0"
- resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.3.0.tgz#5b366ee83b2f1582c48f87e47cf1a9352103ca81"
- integrity sha512-2j4DAdlBOkiSZIsaXk4mTE3sRS02yBHAtfy127xRV3bQUFqXkjHCHLW6Scv7DwNRbIWNHH8zpnz9zMaKXIdvYw==
+ version "1.4.1"
+ resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+ integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
methods@~1.1.2:
version "1.1.2"
@@ -5140,17 +5258,22 @@ miller-rabin@^4.0.0:
bn.js "^4.0.0"
brorand "^1.0.1"
-mime-db@1.43.0, "mime-db@>= 1.43.0 < 2":
- version "1.43.0"
- resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.43.0.tgz#0a12e0502650e473d735535050e7c8f4eb4fae58"
- integrity sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ==
+mime-db@1.44.0:
+ version "1.44.0"
+ resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.44.0.tgz#fa11c5eb0aca1334b4233cb4d52f10c5a6272f92"
+ integrity sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==
+
+"mime-db@>= 1.43.0 < 2":
+ version "1.45.0"
+ resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.45.0.tgz#cceeda21ccd7c3a745eba2decd55d4b73e7879ea"
+ integrity sha512-CkqLUxUk15hofLoLyljJSrukZi8mAtgd+yE5uO4tqRZsdsAJKv0O+rFMhVDRJgozy+yG6md5KwuXhD4ocIoP+w==
mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
- version "2.1.26"
- resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.26.tgz#9c921fc09b7e149a65dfdc0da4d20997200b0a06"
- integrity sha512-01paPWYgLrkqAyrlDorC1uDwl2p3qZT7yl806vW7DvDoxwXi46jsjFbg+WdwotBIk6/MbEhO/dh5aZ5sNj/dWQ==
+ version "2.1.27"
+ resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.27.tgz#47949f98e279ea53119f5722e0f34e529bec009f"
+ integrity sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==
dependencies:
- mime-db "1.43.0"
+ mime-db "1.44.0"
mime@1.6.0:
version "1.6.0"
@@ -5158,14 +5281,9 @@ mime@1.6.0:
integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
mime@^2.0.3, mime@^2.4.4:
- version "2.4.4"
- resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.4.tgz#bd7b91135fc6b01cde3e9bae33d659b63d8857e5"
- integrity sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA==
-
-mimic-fn@^2.0.0:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
- integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
+ version "2.4.6"
+ resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.6.tgz#e5b407c90db442f2beb5b162373d07b69affa4d1"
+ integrity sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA==
mimic-response@^1.0.0, mimic-response@^1.0.1:
version "1.0.1"
@@ -5194,24 +5312,19 @@ minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
-minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
+minimalistic-crypto-utils@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
-minimatch@^3.0.4, minimatch@~3.0.2:
+minimatch@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
dependencies:
brace-expansion "^1.1.7"
-minimist@0.0.8:
- version "0.0.8"
- resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
- integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=
-
-minimist@^1.1.3, minimist@^1.2.0:
+minimist@^1.2.0, minimist@^1.2.5:
version "1.2.5"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
@@ -5245,12 +5358,17 @@ mkdirp@0.3.0:
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.3.0.tgz#1bbf5ab1ba827af23575143490426455f481fe1e"
integrity sha1-G79asbqCevI1dRQ0kEJkVfSB/h4=
-"mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1, mkdirp@~0.5.x:
- version "0.5.1"
- resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
- integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=
+mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1:
+ version "0.5.5"
+ resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
+ integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
dependencies:
- minimist "0.0.8"
+ minimist "^1.2.5"
+
+mkdirp@~1.0.4:
+ version "1.0.4"
+ resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
+ integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
move-concurrently@^1.0.1:
version "1.0.1"
@@ -5274,7 +5392,7 @@ ms@2.1.1:
resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
-ms@^2.1.1:
+ms@2.1.2, ms@^2.1.1:
version "2.1.2"
resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
@@ -5292,10 +5410,10 @@ multicast-dns@^6.0.1:
dns-packet "^1.3.1"
thunky "^1.0.2"
-nan@^2.12.1, nan@^2.13.2:
- version "2.14.0"
- resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
- integrity sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==
+nan@^2.12.1:
+ version "2.14.2"
+ resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
+ integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==
nanomatch@^1.2.9:
version "1.2.13"
@@ -5320,9 +5438,9 @@ negotiator@0.6.2:
integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
neo-async@^2.5.0, neo-async@^2.6.1:
- version "2.6.1"
- resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
- integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
+ version "2.6.2"
+ resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
+ integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
nice-try@^1.0.4:
version "1.0.5"
@@ -5336,28 +5454,10 @@ no-case@^2.2.0:
dependencies:
lower-case "^1.1.1"
-node-forge@0.9.0:
- version "0.9.0"
- resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.9.0.tgz#d624050edbb44874adca12bb9a52ec63cb782579"
- integrity sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==
-
-node-gyp@^3.8.0:
- version "3.8.0"
- resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.8.0.tgz#540304261c330e80d0d5edce253a68cb3964218c"
- integrity sha512-3g8lYefrRRzvGeSowdJKAKyks8oUpLEd/DyPV4eMhVlhJ0aNaZqIrNUIPuEWWTAoPqyFkfGrM67MC69baqn6vA==
- dependencies:
- fstream "^1.0.0"
- glob "^7.0.3"
- graceful-fs "^4.1.2"
- mkdirp "^0.5.0"
- nopt "2 || 3"
- npmlog "0 || 1 || 2 || 3 || 4"
- osenv "0"
- request "^2.87.0"
- rimraf "2"
- semver "~5.3.0"
- tar "^2.0.0"
- which "1"
+node-forge@^0.10.0:
+ version "0.10.0"
+ resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3"
+ integrity sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==
node-libs-browser@^2.2.1:
version "2.2.1"
@@ -5388,35 +5488,10 @@ node-libs-browser@^2.2.1:
util "^0.11.0"
vm-browserify "^1.0.1"
-node-releases@^1.1.50:
- version "1.1.52"
- resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.52.tgz#bcffee3e0a758e92e44ecfaecd0a47554b0bcba9"
- integrity sha512-snSiT1UypkgGt2wxPqS6ImEUICbNCMb31yaxWrOLXjhlt2z2/IBpaOxzONExqSm4y5oLnAqjjRWu+wsDzK5yNQ==
- dependencies:
- semver "^6.3.0"
-
-node-sass@^4.13.1:
- version "4.13.1"
- resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.13.1.tgz#9db5689696bb2eec2c32b98bfea4c7a2e992d0a3"
- integrity sha512-TTWFx+ZhyDx1Biiez2nB0L3YrCZ/8oHagaDalbuBSlqXgUPsdkUSzJsVxeDO9LtPB49+Fh3WQl3slABo6AotNw==
- dependencies:
- async-foreach "^0.1.3"
- chalk "^1.1.1"
- cross-spawn "^3.0.0"
- gaze "^1.0.0"
- get-stdin "^4.0.1"
- glob "^7.0.3"
- in-publish "^2.0.0"
- lodash "^4.17.15"
- meow "^3.7.0"
- mkdirp "^0.5.1"
- nan "^2.13.2"
- node-gyp "^3.8.0"
- npmlog "^4.0.0"
- request "^2.88.0"
- sass-graph "^2.2.4"
- stdout-stream "^1.4.0"
- "true-case-path" "^1.0.2"
+node-releases@^1.1.71:
+ version "1.1.72"
+ resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.72.tgz#14802ab6b1039a79a0c7d662b610a5bbd76eacbe"
+ integrity sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw==
nopt@1.0.10:
version "1.0.10"
@@ -5425,23 +5500,6 @@ nopt@1.0.10:
dependencies:
abbrev "1"
-"nopt@2 || 3":
- version "3.0.6"
- resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
- integrity sha1-xkZdvwirzU2zWTF/eaxopkayj/k=
- dependencies:
- abbrev "1"
-
-normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
- version "2.5.0"
- resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
- integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
- dependencies:
- hosted-git-info "^2.1.4"
- resolve "^1.10.0"
- semver "2 || 3 || 4 || 5"
- validate-npm-package-license "^3.0.1"
-
normalize-path@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
@@ -5449,7 +5507,7 @@ normalize-path@^2.1.1:
dependencies:
remove-trailing-separator "^1.0.1"
-normalize-path@^3.0.0:
+normalize-path@^3.0.0, normalize-path@~3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
@@ -5485,16 +5543,6 @@ npm-run-path@^2.0.0:
dependencies:
path-key "^2.0.0"
-"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0:
- version "4.1.2"
- resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
- integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
- dependencies:
- are-we-there-yet "~1.1.2"
- console-control-strings "~1.1.0"
- gauge "~2.7.3"
- set-blocking "~2.0.0"
-
nprogress@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
@@ -5512,11 +5560,6 @@ num2fraction@^1.2.2:
resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
-number-is-nan@^1.0.0:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
- integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
-
oauth-sign@~0.9.0:
version "0.9.0"
resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
@@ -5536,15 +5579,18 @@ object-copy@^0.1.0:
define-property "^0.2.5"
kind-of "^3.0.3"
-object-inspect@^1.7.0:
- version "1.7.0"
- resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
- integrity sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==
+object-inspect@^1.8.0:
+ version "1.9.0"
+ resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.9.0.tgz#c90521d74e1127b67266ded3394ad6116986533a"
+ integrity sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==
object-is@^1.0.1:
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.2.tgz#6b80eb84fe451498f65007982f035a5b445edec4"
- integrity sha512-Epah+btZd5wrrfjkJZq1AOB9O6OxUQto45hzFd7lXGrpHPGE0W1k+426yrZV+k6NJOzLNNW/nVsmZdIWsAqoOQ==
+ version "1.1.4"
+ resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.4.tgz#63d6c83c00a43f4cbc9434eb9757c8a5b8565068"
+ integrity sha512-1ZvAZ4wlF7IyPVOcE1Omikt7UpaFlOQq0HlSti+ZvDH3UiD2brwGMwDbyV43jao2bKJ+4+WdPJHSd7kgzKYVqg==
+ dependencies:
+ call-bind "^1.0.0"
+ define-properties "^1.1.3"
object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.1.0, object-keys@^1.1.1:
version "1.1.1"
@@ -5558,23 +5604,24 @@ object-visit@^1.0.0:
dependencies:
isobject "^3.0.0"
-object.assign@^4.1.0:
- version "4.1.0"
- resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
- integrity sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==
+object.assign@^4.1.0, object.assign@^4.1.1:
+ version "4.1.2"
+ resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.2.tgz#0ed54a342eceb37b38ff76eb831a0e788cb63940"
+ integrity sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==
dependencies:
- define-properties "^1.1.2"
- function-bind "^1.1.1"
- has-symbols "^1.0.0"
- object-keys "^1.0.11"
+ call-bind "^1.0.0"
+ define-properties "^1.1.3"
+ has-symbols "^1.0.1"
+ object-keys "^1.1.1"
object.getownpropertydescriptors@^2.0.3, object.getownpropertydescriptors@^2.1.0:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.0.tgz#369bf1f9592d8ab89d712dced5cb81c7c5352649"
- integrity sha512-Z53Oah9A3TdLoblT7VKJaTDdXdT+lQO+cNpKVnya5JDe9uLvzu1YyY1yFDFrcxrlRgWrEFH0jJtD/IbuwjcEVg==
+ version "2.1.1"
+ resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.1.tgz#0dfda8d108074d9c563e80490c883b6661091544"
+ integrity sha512-6DtXgZ/lIZ9hqx4GtZETobXLR/ZLaa0aqV0kzbn80Rf8Z2e/XFnhA0I7p07N2wH8bBBltr2xQPi6sbKWAY2Eng==
dependencies:
+ call-bind "^1.0.0"
define-properties "^1.1.3"
- es-abstract "^1.17.0-next.1"
+ es-abstract "^1.18.0-next.1"
object.pick@^1.3.0:
version "1.3.0"
@@ -5584,13 +5631,13 @@ object.pick@^1.3.0:
isobject "^3.0.1"
object.values@^1.1.0:
- version "1.1.1"
- resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.1.tgz#68a99ecde356b7e9295a3c5e0ce31dc8c953de5e"
- integrity sha512-WTa54g2K8iu0kmS/us18jEmdv1a4Wi//BZ/DTVYEcH0XhLM5NYdpDHja3gt57VrZLcNAO2WGA+KpWsDBaHt6eA==
+ version "1.1.2"
+ resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.2.tgz#7a2015e06fcb0f546bd652486ce8583a4731c731"
+ integrity sha512-MYC0jvJopr8EK6dPBiO8Nb9mvjdypOachO5REGk6MXzujbBrAisKo3HmdEI6kZDL6fC31Mwee/5YbtMebixeag==
dependencies:
+ call-bind "^1.0.0"
define-properties "^1.1.3"
- es-abstract "^1.17.0-next.1"
- function-bind "^1.1.1"
+ es-abstract "^1.18.0-next.1"
has "^1.0.3"
obuf@^1.0.0, obuf@^1.1.2:
@@ -5618,9 +5665,9 @@ once@^1.3.0, once@^1.3.1, once@^1.4.0:
wrappy "1"
opencollective-postinstall@^2.0.2:
- version "2.0.2"
- resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz#5657f1bede69b6e33a45939b061eb53d3c6c3a89"
- integrity sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw==
+ version "2.0.3"
+ resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz#7a0fff978f6dbfa4d006238fbac98ed4198c3259"
+ integrity sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==
opn@^5.5.0:
version "5.5.0"
@@ -5630,9 +5677,9 @@ opn@^5.5.0:
is-wsl "^1.1.0"
optimize-css-assets-webpack-plugin@^5.0.1:
- version "5.0.3"
- resolved "https://registry.yarnpkg.com/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.3.tgz#e2f1d4d94ad8c0af8967ebd7cf138dcb1ef14572"
- integrity sha512-q9fbvCRS6EYtUKKSwI87qm2IxlyJK5b4dygW1rKUBT6mMDhdG5e5bZT63v6tnJR9F9FB/H5a0HTmtw+laUBxKA==
+ version "5.0.4"
+ resolved "https://registry.yarnpkg.com/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.4.tgz#85883c6528aaa02e30bbad9908c92926bb52dc90"
+ integrity sha512-wqd6FdI2a5/FdoiCNNkEvLeA//lHHfG24Ln2Xm2qqdIk4aOlsR18jwpyOihqQ8849W3qu2DX8fOYxpvTMj+93A==
dependencies:
cssnano "^4.1.10"
last-call-webpack-plugin "^3.0.0"
@@ -5649,64 +5696,20 @@ os-browserify@^0.3.0:
resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=
-os-homedir@^1.0.0:
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
- integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
-
-os-locale@^1.4.0:
- version "1.4.0"
- resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
- integrity sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=
- dependencies:
- lcid "^1.0.0"
-
-os-locale@^3.0.0:
- version "3.1.0"
- resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.1.0.tgz#a802a6ee17f24c10483ab9935719cef4ed16bf1a"
- integrity sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==
- dependencies:
- execa "^1.0.0"
- lcid "^2.0.0"
- mem "^4.0.0"
-
-os-tmpdir@^1.0.0:
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
- integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=
-
-osenv@0:
- version "0.1.5"
- resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
- integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==
- dependencies:
- os-homedir "^1.0.0"
- os-tmpdir "^1.0.0"
-
p-cancelable@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-1.1.0.tgz#d078d15a3af409220c886f1d9a0ca2e441ab26cc"
integrity sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==
-p-defer@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
- integrity sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=
-
p-finally@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=
-p-is-promise@^2.0.0:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/p-is-promise/-/p-is-promise-2.1.0.tgz#918cebaea248a62cf7ffab8e3bca8c5f882fc42e"
- integrity sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg==
-
-p-limit@^2.0.0, p-limit@^2.2.1:
- version "2.2.2"
- resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.2.2.tgz#61279b67721f5287aa1c13a9a7fbbc48c9291b1e"
- integrity sha512-WGR+xHecKTr7EbUEhyLSh5Dube9JtdiG78ufaeLxTgpudf/20KqyMioIUZJAezlTIi6evxuoUs9YXc11cU+yzQ==
+p-limit@^2.0.0, p-limit@^2.2.0, p-limit@^2.2.1:
+ version "2.3.0"
+ resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
+ integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
dependencies:
p-try "^2.0.0"
@@ -5717,6 +5720,13 @@ p-locate@^3.0.0:
dependencies:
p-limit "^2.0.0"
+p-locate@^4.1.0:
+ version "4.1.0"
+ resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
+ integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+ dependencies:
+ p-limit "^2.2.0"
+
p-map@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
@@ -5765,25 +5775,17 @@ param-case@2.1.x:
dependencies:
no-case "^2.2.0"
-parse-asn1@^5.0.0:
- version "5.1.5"
- resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.5.tgz#003271343da58dc94cace494faef3d2147ecea0e"
- integrity sha512-jkMYn1dcJqF6d5CpU689bq7w/b5ALS9ROVSpQDPrZsqqesUJii9qutvoT5ltGedNXMO2e16YUWIghG9KxaViTQ==
+parse-asn1@^5.0.0, parse-asn1@^5.1.5:
+ version "5.1.6"
+ resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.6.tgz#385080a3ec13cb62a62d39409cb3e88844cdaed4"
+ integrity sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==
dependencies:
- asn1.js "^4.0.0"
+ asn1.js "^5.2.0"
browserify-aes "^1.0.0"
- create-hash "^1.1.0"
evp_bytestokey "^1.0.0"
pbkdf2 "^3.0.3"
safe-buffer "^5.1.1"
-parse-json@^2.2.0:
- version "2.2.0"
- resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
- integrity sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=
- dependencies:
- error-ex "^1.2.0"
-
parse-json@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
@@ -5812,18 +5814,16 @@ path-dirname@^1.0.0:
resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
integrity sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=
-path-exists@^2.0.0:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
- integrity sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=
- dependencies:
- pinkie-promise "^2.0.0"
-
path-exists@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
+path-exists@^4.0.0:
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+ integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
path-is-absolute@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
@@ -5849,15 +5849,6 @@ path-to-regexp@0.1.7:
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
-path-type@^1.0.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
- integrity sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=
- dependencies:
- graceful-fs "^4.1.2"
- pify "^2.0.0"
- pinkie-promise "^2.0.0"
-
path-type@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
@@ -5866,9 +5857,9 @@ path-type@^3.0.0:
pify "^3.0.0"
pbkdf2@^3.0.3:
- version "3.0.17"
- resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.17.tgz#976c206530617b14ebb32114239f7b09336e93a6"
- integrity sha512-U/il5MsrZp7mGg3mSQfn742na2T+1/vHDCG5/iTI3X9MKUuYUZVLQhyRsg06mCgDBTd57TxzgZt7P+fYfjRLtA==
+ version "3.1.1"
+ resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.1.1.tgz#cb8724b0fada984596856d1a6ebafd3584654b94"
+ integrity sha512-4Ejy1OPxi9f2tt1rRV7Go7zmfDQ+ZectEQz3VGUQhgq62HtIRPDyG/JtnwIxs6x3uNMwo2V7q1fMvKjb+Tnpqg==
dependencies:
create-hash "^1.1.2"
create-hmac "^1.1.4"
@@ -5881,6 +5872,11 @@ performance-now@^2.1.0:
resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
+picomatch@^2.0.4, picomatch@^2.2.1:
+ version "2.2.2"
+ resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
+ integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
+
pify@^2.0.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -5915,14 +5911,21 @@ pkg-dir@^3.0.0:
dependencies:
find-up "^3.0.0"
-portfinder@^1.0.13, portfinder@^1.0.25:
- version "1.0.25"
- resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.25.tgz#254fd337ffba869f4b9d37edc298059cb4d35eca"
- integrity sha512-6ElJnHBbxVA1XSLgBp7G1FiCkQdlqGzuF7DswL5tcea+E8UpuvPU7beVAjjRwCioTS9ZluNbu+ZyRvgTsmqEBg==
+pkg-dir@^4.1.0:
+ version "4.2.0"
+ resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
+ integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+ dependencies:
+ find-up "^4.0.0"
+
+portfinder@^1.0.13, portfinder@^1.0.26:
+ version "1.0.28"
+ resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
+ integrity sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==
dependencies:
async "^2.6.2"
debug "^3.1.1"
- mkdirp "^0.5.1"
+ mkdirp "^0.5.5"
posix-character-classes@^0.1.0:
version "0.1.1"
@@ -5930,9 +5933,9 @@ posix-character-classes@^0.1.0:
integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
postcss-calc@^7.0.1:
- version "7.0.2"
- resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.2.tgz#504efcd008ca0273120568b0792b16cdcde8aac1"
- integrity sha512-rofZFHUg6ZIrvRwPeFktv06GdbDYLcGqh9EwiMutZg+a0oePCCw1zHOEiji6LCpyRcjTREtPASuUqeAvYlEVvQ==
+ version "7.0.5"
+ resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.5.tgz#f8a6e99f12e619c2ebc23cf6c486fdc15860933e"
+ integrity sha512-1tKHutbGtLtEZF6PT4JSihCHfIVldU72mZ8SdZHIYriIZ9fh9k9aWSppaT8rHsyI3dX+KSR+W+Ix9BMY3AODrg==
dependencies:
postcss "^7.0.27"
postcss-selector-parser "^6.0.2"
@@ -5986,9 +5989,9 @@ postcss-discard-overridden@^4.0.1:
postcss "^7.0.0"
postcss-load-config@^2.0.0:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.1.0.tgz#c84d692b7bb7b41ddced94ee62e8ab31b417b003"
- integrity sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==
+ version "2.1.2"
+ resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.1.2.tgz#c5ea504f2c4aef33c7359a34de3573772ad7502a"
+ integrity sha512-/rDeGV6vMUo3mwJZmeHfEDvwnTKKqQ0S7OHUi/kJvvtx3aWtyWG2/0ZWnzCt2keEclwN6Tf0DST2v9kITdOKYw==
dependencies:
cosmiconfig "^5.0.0"
import-cwd "^2.0.0"
@@ -6082,9 +6085,9 @@ postcss-modules-local-by-default@^2.0.6:
postcss-value-parser "^3.3.1"
postcss-modules-scope@^2.1.0:
- version "2.1.1"
- resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.1.1.tgz#33d4fc946602eb5e9355c4165d68a10727689dba"
- integrity sha512-OXRUPecnHCg8b9xWvldG/jUpRIGPNRka0r4D4j0ESUU2/5IOnpsjfPPmDprM3Ih8CgZ8FXjWqaniK5v4rWt3oQ==
+ version "2.2.0"
+ resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.2.0.tgz#385cae013cc7743f5a7d7602d1073a89eaae62ee"
+ integrity sha512-YyEgsTMRpNd+HmyC7H/mh3y+MeFWevy7V1evVhJWewmMbjDHIbZbOXICC2y+m1xI1UVfIT1HMW/O04Hxyu9oXQ==
dependencies:
postcss "^7.0.6"
postcss-selector-parser "^6.0.0"
@@ -6224,13 +6227,14 @@ postcss-selector-parser@^3.0.0:
uniq "^1.0.1"
postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
- version "6.0.2"
- resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c"
- integrity sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==
+ version "6.0.4"
+ resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz#56075a1380a04604c38b063ea7767a129af5c2b3"
+ integrity sha512-gjMeXBempyInaBqpp8gODmwZ52WaYsVOsfr4L4lDQ7n3ncD6mEyySiDtgzCT+NYC0mmeOLvtsF8iaEf0YT6dBw==
dependencies:
cssesc "^3.0.0"
indexes-of "^1.0.1"
uniq "^1.0.1"
+ util-deprecate "^1.0.2"
postcss-svgo@^4.0.2:
version "4.0.2"
@@ -6256,15 +6260,15 @@ postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0, postcss-value-parser@^
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
-postcss-value-parser@^4.0.2:
- version "4.0.3"
- resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.3.tgz#651ff4593aa9eda8d5d0d66593a2417aeaeb325d"
- integrity sha512-N7h4pG+Nnu5BEIzyeaaIYWs0LI5XC40OrRh5L60z0QjFsqGWcHcbkBvpe1WYpcIS9yQ8sOi/vIPt1ejQCrMVrg==
+postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
+ version "4.1.0"
+ resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
+ integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.5, postcss@^7.0.6:
- version "7.0.27"
- resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.27.tgz#cc67cdc6b0daa375105b7c424a85567345fc54d9"
- integrity sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ==
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
+ version "7.0.35"
+ resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
+ integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==
dependencies:
chalk "^2.4.2"
source-map "^0.6.1"
@@ -6285,13 +6289,18 @@ prettier@^1.18.2:
resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
+pretty-bytes@^5.1.0:
+ version "5.4.1"
+ resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.4.1.tgz#cd89f79bbcef21e3d21eb0da68ffe93f803e884b"
+ integrity sha512-s1Iam6Gwz3JI5Hweaz4GoCD1WUNUIyzePFy5+Js2hjwGVt2Z79wNN+ZKOZ2vB6C+Xs6njyB84Z1IthQg8d9LxA==
+
pretty-error@^2.0.2:
- version "2.1.1"
- resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"
- integrity sha1-X0+HyPkeWuPzuoerTPXgOxoX8aM=
+ version "2.1.2"
+ resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.2.tgz#be89f82d81b1c86ec8fdfbc385045882727f93b6"
+ integrity sha512-EY5oDzmsX5wvuynAByrmY0P0hcp+QpnAKbJng2A2MPjVKXCxrDSUkzghVJ4ZGPIv+JC4gX8fPUWscC0RtjsWGw==
dependencies:
- renderkid "^2.0.1"
- utila "~0.4"
+ lodash "^4.17.20"
+ renderkid "^2.0.4"
pretty-time@^1.1.0:
version "1.1.0"
@@ -6299,17 +6308,12 @@ pretty-time@^1.1.0:
integrity sha512-28iF6xPQrP8Oa6uxE6a1biz+lWeTOAPKggvjB8HAs6nVMKZwf5bG++632Dx614hIWgUPkgivRfG+a8uAXGTIbA==
prismjs@^1.13.0:
- version "1.21.0"
- resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.21.0.tgz#36c086ec36b45319ec4218ee164c110f9fc015a3"
- integrity sha512-uGdSIu1nk3kej2iZsLyDoJ7e9bnPzIgY0naW/HdknGj61zScaprVEVGHrPoXqI+M9sP0NDnTK2jpkvmldpuqDw==
+ version "1.23.0"
+ resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.23.0.tgz#d3b3967f7d72440690497652a9d40ff046067f33"
+ integrity sha512-c29LVsqOaLbBHuIbsTxaKENh1N2EQBOHaWv7gkHN4dgRbxSREqDnDbtFJYdpPauS4YCplMSNCABQ6Eeor69bAA==
optionalDependencies:
clipboard "^2.0.0"
-private@^0.1.8:
- version "0.1.8"
- resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
- integrity sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==
-
process-nextick-args@~2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -6344,9 +6348,9 @@ pseudomap@^1.0.2:
integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
psl@^1.1.28:
- version "1.7.0"
- resolved "https://registry.yarnpkg.com/psl/-/psl-1.7.0.tgz#f1c4c47a8ef97167dea5d6bbf4816d736e884a3c"
- integrity sha512-5NsSEDv8zY70ScRnOTn7bK7eanl2MvFrOrS/R6x+dBt5g1ghnj9Zv90kO8GwT8gxcu2ANyFprnFYB85IogIJOQ==
+ version "1.8.0"
+ resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
+ integrity sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==
public-encrypt@^4.0.0:
version "4.0.3"
@@ -6401,9 +6405,9 @@ punycode@^2.1.0, punycode@^2.1.1:
integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
pupa@^2.0.1:
- version "2.0.1"
- resolved "https://registry.yarnpkg.com/pupa/-/pupa-2.0.1.tgz#dbdc9ff48ffbea4a26a069b6f9f7abb051008726"
- integrity sha512-hEJH0s8PXLY/cdXh66tNEQGndDrIKNqNC5xmrysZy3i5C3oEoLna7YAOad+7u125+zH1HNXUmGEkrhb3c2VriA==
+ version "2.1.1"
+ resolved "https://registry.yarnpkg.com/pupa/-/pupa-2.1.1.tgz#f5e8fd4afc2c5d97828faa523549ed8744a20d62"
+ integrity sha512-l1jNAspIBSFqbT+y+5FosojNpVpF94nlI+wDUpqP9enwOTfHx9f0gh5nB96vl+6yTpsJsypeNrwfzPrKuHB41A==
dependencies:
escape-goat "^2.0.0"
@@ -6442,11 +6446,11 @@ querystring@0.2.0:
integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
querystringify@^2.1.1:
- version "2.1.1"
- resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e"
- integrity sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==
+ version "2.2.0"
+ resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
+ integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
-randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
+randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
@@ -6486,24 +6490,7 @@ rc@^1.2.8:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
-read-pkg-up@^1.0.1:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
- integrity sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=
- dependencies:
- find-up "^1.0.0"
- read-pkg "^1.0.0"
-
-read-pkg@^1.0.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
- integrity sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=
- dependencies:
- load-json-file "^1.0.0"
- normalize-package-data "^2.3.2"
- path-type "^1.0.0"
-
-"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
+"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
version "2.3.7"
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -6516,7 +6503,7 @@ read-pkg@^1.0.0:
string_decoder "~1.1.1"
util-deprecate "~1.0.1"
-readable-stream@^3.0.6, readable-stream@^3.1.1:
+readable-stream@^3.0.6, readable-stream@^3.1.1, readable-stream@^3.6.0:
version "3.6.0"
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
@@ -6534,13 +6521,12 @@ readdirp@^2.2.1:
micromatch "^3.1.10"
readable-stream "^2.0.2"
-redent@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
- integrity sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=
+readdirp@~3.5.0:
+ version "3.5.0"
+ resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e"
+ integrity sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==
dependencies:
- indent-string "^2.1.0"
- strip-indent "^1.0.1"
+ picomatch "^2.2.1"
reduce@^1.0.1:
version "1.0.2"
@@ -6557,22 +6543,26 @@ regenerate-unicode-properties@^8.2.0:
regenerate "^1.4.0"
regenerate@^1.4.0:
- version "1.4.0"
- resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
- integrity sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==
+ version "1.4.2"
+ resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
+ integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
+
+regenerator-runtime@^0.11.0:
+ version "0.11.1"
+ resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+ integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
regenerator-runtime@^0.13.4:
- version "0.13.5"
- resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697"
- integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==
+ version "0.13.7"
+ resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
+ integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
regenerator-transform@^0.14.2:
- version "0.14.3"
- resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.3.tgz#54aebff2ef58c0ae61e695ad1b9a9d65995fff78"
- integrity sha512-zXHNKJspmONxBViAb3ZUmFoFPnTBs3zFhCEZJiwp/gkNzxVbTqNJVjYKx6Qk1tQ1P4XLf4TbH9+KBB7wGoAaUw==
+ version "0.14.5"
+ resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.5.tgz#c98da154683671c9c4dcb16ece736517e1b7feb4"
+ integrity sha512-eOf6vka5IO151Jfsw2NO9WpGX58W6wWmefK3I1zEGr0lOD0u8rwPaNqQL1aRxUaxLeKO3ArNh3VYg1KbaD+FFw==
dependencies:
"@babel/runtime" "^7.8.4"
- private "^0.1.8"
regex-not@^1.0.0, regex-not@^1.0.2:
version "1.0.2"
@@ -6590,10 +6580,10 @@ regexp.prototype.flags@^1.2.0:
define-properties "^1.1.3"
es-abstract "^1.17.0-next.1"
-regexpu-core@^4.7.0:
- version "4.7.0"
- resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938"
- integrity sha512-TQ4KXRnIn6tz6tjnrXEkD/sshygKH/j5KzK86X8MkeHyZ8qst/LZ89j3X4/8HEIfHANTFIP/AbXakeRhWIl5YQ==
+regexpu-core@^4.7.1:
+ version "4.7.1"
+ resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.1.tgz#2dea5a9a07233298fbf0db91fa9abc4c6e0f8ad6"
+ integrity sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==
dependencies:
regenerate "^1.4.0"
regenerate-unicode-properties "^8.2.0"
@@ -6602,10 +6592,15 @@ regexpu-core@^4.7.0:
unicode-match-property-ecmascript "^1.0.4"
unicode-match-property-value-ecmascript "^1.2.0"
+register-service-worker@^1.7.0:
+ version "1.7.1"
+ resolved "https://registry.yarnpkg.com/register-service-worker/-/register-service-worker-1.7.1.tgz#6308347ac6c0af0f6c0b22ea5d59d25e836bc932"
+ integrity sha512-IdTfUZ4u8iJL8o1w8es8l6UMGPmkwHolUdT+UmM1UypC80IB4KbpuIlvwWVj8UDS7eJwkEYRcKRgfRX+oTmJsw==
+
registry-auth-token@^4.0.0:
- version "4.1.1"
- resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-4.1.1.tgz#40a33be1e82539460f94328b0f7f0f84c16d9479"
- integrity sha512-9bKS7nTl9+/A1s7tnPeGrUpRcVY+LUh7bfFgzpndALdPfXQBfQV77rQVtqgUV3ti4vc/Ik81Ex8UJDWDQ12zQA==
+ version "4.2.1"
+ resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-4.2.1.tgz#6d7b4006441918972ccd5fedcd41dc322c79b250"
+ integrity sha512-6gkSb4U6aWJB4SF2ZvLb76yCBjcvufXBqvvEx1HbmKPkutswjW1xNVRY0+daljIYRbogN7O0etYSlbiaEQyMyw==
dependencies:
rc "^1.2.8"
@@ -6617,9 +6612,9 @@ registry-url@^5.0.0:
rc "^1.2.8"
regjsgen@^0.5.1:
- version "0.5.1"
- resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.1.tgz#48f0bf1a5ea205196929c0d9798b42d1ed98443c"
- integrity sha512-5qxzGZjDs9w4tzT3TPhCJqWdCc3RLYwy9J2NB0nm5Lz+S273lvWcpjaTGHsT1dc6Hhfq41uSEOw8wBmxrKOuyg==
+ version "0.5.2"
+ resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.2.tgz#92ff295fb1deecbf6ecdab2543d207e91aa33733"
+ integrity sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==
regjsparser@^0.6.4:
version "0.6.4"
@@ -6638,16 +6633,16 @@ remove-trailing-separator@^1.0.1:
resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
integrity sha1-wkvOKig62tW8P1jg1IJJuSN52O8=
-renderkid@^2.0.1:
- version "2.0.3"
- resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.3.tgz#380179c2ff5ae1365c522bf2fcfcff01c5b74149"
- integrity sha512-z8CLQp7EZBPCwCnncgf9C4XAi3WR0dv+uWu/PjIyhhAb5d6IJ/QZqlHFprHeKT+59//V6BNUsLbvN8+2LarxGA==
+renderkid@^2.0.4:
+ version "2.0.4"
+ resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.4.tgz#d325e532afb28d3f8796ffee306be8ffd6fc864c"
+ integrity sha512-K2eXrSOJdq+HuKzlcjOlGoOarUu5SDguDEhE7+Ah4zuOWL40j8A/oHvLlLob9PSTNvVnBd+/q0Er1QfpEuem5g==
dependencies:
css-select "^1.1.0"
dom-converter "^0.2"
htmlparser2 "^3.3.0"
+ lodash "^4.17.20"
strip-ansi "^3.0.0"
- utila "^0.4.0"
repeat-element@^1.1.2:
version "1.1.3"
@@ -6659,14 +6654,7 @@ repeat-string@^1.6.1:
resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
-repeating@^2.0.0:
- version "2.0.1"
- resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"
- integrity sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=
- dependencies:
- is-finite "^1.0.0"
-
-request@^2.87.0, request@^2.88.0:
+request@^2.87.0:
version "2.88.2"
resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
@@ -6697,11 +6685,6 @@ require-directory@^2.1.1:
resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
-require-main-filename@^1.0.1:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
- integrity sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=
-
require-main-filename@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
@@ -6729,11 +6712,12 @@ resolve-url@^0.2.1:
resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
-resolve@^1.10.0, resolve@^1.2.0, resolve@^1.3.2, resolve@^1.8.1:
- version "1.15.1"
- resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.15.1.tgz#27bdcdeffeaf2d6244b95bb0f9f4b4653451f3e8"
- integrity sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==
+resolve@^1.2.0, resolve@^1.3.2, resolve@^1.8.1:
+ version "1.19.0"
+ resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.19.0.tgz#1af5bf630409734a067cae29318aac7fa29a267c"
+ integrity sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==
dependencies:
+ is-core-module "^2.1.0"
path-parse "^1.0.6"
responselike@^1.0.2:
@@ -6763,7 +6747,7 @@ rgba-regex@^1.0.0:
resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
-rimraf@2, rimraf@^2.5.4, rimraf@^2.6.3:
+rimraf@^2.5.4, rimraf@^2.6.3:
version "2.7.1"
resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
@@ -6790,10 +6774,10 @@ safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
-safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
- version "5.2.0"
- resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519"
- integrity sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==
+safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@^5.2.0, safe-buffer@~5.2.0:
+ version "5.2.1"
+ resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+ integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
safe-regex@^1.1.0:
version "1.1.0"
@@ -6807,16 +6791,6 @@ safe-regex@^1.1.0:
resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
-sass-graph@^2.2.4:
- version "2.2.4"
- resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.2.4.tgz#13fbd63cd1caf0908b9fd93476ad43a51d1e0b49"
- integrity sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=
- dependencies:
- glob "^7.0.0"
- lodash "^4.0.0"
- scss-tokenizer "^0.2.3"
- yargs "^7.0.0"
-
sass-loader@^8.0.2:
version "8.0.2"
resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-8.0.2.tgz#debecd8c3ce243c76454f2e8290482150380090d"
@@ -6828,6 +6802,13 @@ sass-loader@^8.0.2:
schema-utils "^2.6.1"
semver "^6.3.0"
+sass@^1.32.0:
+ version "1.32.0"
+ resolved "https://registry.yarnpkg.com/sass/-/sass-1.32.0.tgz#10101a026c13080b14e2b374d4e15ee24400a4d3"
+ integrity sha512-fhyqEbMIycQA4blrz/C0pYhv2o4x2y6FYYAH0CshBw3DXh5D5wyERgxw0ptdau1orc/GhNrhF7DFN2etyOCEng==
+ dependencies:
+ chokidar ">=2.0.0 <4.0.0"
+
sax@~1.2.4:
version "1.2.4"
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@@ -6850,13 +6831,14 @@ schema-utils@^2.6.1:
ajv "^6.12.0"
ajv-keywords "^3.4.1"
-scss-tokenizer@^0.2.3:
- version "0.2.3"
- resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
- integrity sha1-jrBtualyMzOCTT9VMGQRSYR85dE=
+schema-utils@^2.6.5:
+ version "2.7.1"
+ resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
+ integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==
dependencies:
- js-base64 "^2.1.8"
- source-map "^0.4.2"
+ "@types/json-schema" "^7.0.5"
+ ajv "^6.12.4"
+ ajv-keywords "^3.5.2"
section-matter@^1.0.0:
version "1.0.0"
@@ -6877,11 +6859,11 @@ select@^1.1.2:
integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
selfsigned@^1.10.7:
- version "1.10.7"
- resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.7.tgz#da5819fd049d5574f28e88a9bcc6dbc6e6f3906b"
- integrity sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==
+ version "1.10.8"
+ resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.8.tgz#0d17208b7d12c33f8eac85c41835f27fc3d81a30"
+ integrity sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==
dependencies:
- node-forge "0.9.0"
+ node-forge "^0.10.0"
semver-diff@^3.1.1:
version "3.1.1"
@@ -6890,26 +6872,21 @@ semver-diff@^3.1.1:
dependencies:
semver "^6.3.0"
-"semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
- version "5.7.1"
- resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
- integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
-
semver@7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
-semver@^6.0.0, semver@^6.2.0, semver@^6.3.0:
+semver@^5.1.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
+ version "5.7.1"
+ resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+ integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+
+semver@^6.0.0, semver@^6.1.0, semver@^6.2.0, semver@^6.3.0:
version "6.3.0"
resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
-semver@~5.3.0:
- version "5.3.0"
- resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
- integrity sha1-myzl094C0XxgEq0yaqa00M9U+U8=
-
send@0.17.1:
version "0.17.1"
resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
@@ -6929,10 +6906,19 @@ send@0.17.1:
range-parser "~1.2.1"
statuses "~1.5.0"
-serialize-javascript@^2.1.2:
- version "2.1.2"
- resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
- integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==
+serialize-javascript@^3.1.0:
+ version "3.1.0"
+ resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-3.1.0.tgz#8bf3a9170712664ef2561b44b691eafe399214ea"
+ integrity sha512-JIJT1DGiWmIKhzRsG91aS6Ze4sFUrYbltlkg2onR5OrnNM02Kl/hnY/T4FN2omvyeBbQmMJv+K4cPOpGzOTFBg==
+ dependencies:
+ randombytes "^2.1.0"
+
+serialize-javascript@^4.0.0:
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
+ integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==
+ dependencies:
+ randombytes "^2.1.0"
serve-index@^1.9.1:
version "1.9.1"
@@ -6957,7 +6943,7 @@ serve-static@1.14.1:
parseurl "~1.3.3"
send "0.17.1"
-set-blocking@^2.0.0, set-blocking@~2.0.0:
+set-blocking@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
@@ -7022,9 +7008,9 @@ showdown@^1.9.1:
yargs "^14.2"
signal-exit@^3.0.0, signal-exit@^3.0.2:
- version "3.0.2"
- resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
- integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
+ version "3.0.3"
+ resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
+ integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
simple-swizzle@^0.2.2:
version "0.2.2"
@@ -7090,13 +7076,14 @@ sockjs-client@1.4.0:
json3 "^3.3.2"
url-parse "^1.4.3"
-sockjs@0.3.19:
- version "0.3.19"
- resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.19.tgz#d976bbe800af7bd20ae08598d582393508993c0d"
- integrity sha512-V48klKZl8T6MzatbLlzzRNhMepEys9Y4oGFpypBFFn1gLI/QQ9HtLLyWJNbPlwGLelOVOEijUbTTJeLLI59jLw==
+sockjs@0.3.20:
+ version "0.3.20"
+ resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.20.tgz#b26a283ec562ef8b2687b44033a4eeceac75d855"
+ integrity sha512-SpmVOVpdq0DJc0qArhF3E5xsxvaiqGNb73XfgBpK1y3UD5gs8DSo8aCTsuT5pX8rssdc2NDIzANwP9eCAiSdTA==
dependencies:
faye-websocket "^0.10.0"
- uuid "^3.0.1"
+ uuid "^3.4.0"
+ websocket-driver "0.6.5"
sort-keys@^2.0.0:
version "2.0.0"
@@ -7122,9 +7109,9 @@ source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
urix "^0.1.0"
source-map-support@~0.5.12:
- version "0.5.16"
- resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.16.tgz#0ae069e7fe3ba7538c64c98515e35339eac5a042"
- integrity sha512-efyLRJDr68D9hBBNIPWFjhpFzURh+KJykQwvMyW5UiZzYwoF6l4YMMDIJJEyFWxWCqfyxLzz6tSfUFR+kXXsVQ==
+ version "0.5.19"
+ resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
+ integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
dependencies:
buffer-from "^1.0.0"
source-map "^0.6.0"
@@ -7139,13 +7126,6 @@ source-map@0.5.6:
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
integrity sha1-dc449SvwczxafwwRjYEzSiu19BI=
-source-map@^0.4.2:
- version "0.4.4"
- resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
- integrity sha1-66T12pwNyZneaAMti092FzZSA2s=
- dependencies:
- amdefine ">=0.0.4"
-
source-map@^0.5.0, source-map@^0.5.6:
version "0.5.7"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
@@ -7161,32 +7141,6 @@ source-map@^0.7.3:
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
-spdx-correct@^3.0.0:
- version "3.1.0"
- resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.0.tgz#fb83e504445268f154b074e218c87c003cd31df4"
- integrity sha512-lr2EZCctC2BNR7j7WzJ2FpDznxky1sjfxvvYEyzxNyb6lZXHODmEoJeFu4JupYlkfha1KZpJyoqiJ7pgA1qq8Q==
- dependencies:
- spdx-expression-parse "^3.0.0"
- spdx-license-ids "^3.0.0"
-
-spdx-exceptions@^2.1.0:
- version "2.2.0"
- resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz#2ea450aee74f2a89bfb94519c07fcd6f41322977"
- integrity sha512-2XQACfElKi9SlVb1CYadKDXvoajPgBVPn/gOQLrTvHdElaVhr7ZEbqJaRnJLVNeaI4cMEAgVCeBMKF6MWRDCRA==
-
-spdx-expression-parse@^3.0.0:
- version "3.0.0"
- resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz#99e119b7a5da00e05491c9fa338b7904823b41d0"
- integrity sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==
- dependencies:
- spdx-exceptions "^2.1.0"
- spdx-license-ids "^3.0.0"
-
-spdx-license-ids@^3.0.0:
- version "3.0.5"
- resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.5.tgz#3694b5804567a458d3c8045842a6358632f62654"
- integrity sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==
-
spdy-transport@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-3.0.0.tgz#00d4863a6400ad75df93361a1608605e5dcdcf31"
@@ -7199,10 +7153,10 @@ spdy-transport@^3.0.0:
readable-stream "^3.0.6"
wbuf "^1.7.3"
-spdy@^4.0.1:
- version "4.0.1"
- resolved "https://registry.yarnpkg.com/spdy/-/spdy-4.0.1.tgz#6f12ed1c5db7ea4f24ebb8b89ba58c87c08257f2"
- integrity sha512-HeZS3PBdMA+sZSu0qwpCxl3DeALD5ASx8pAX0jZdKXSpPWbQ6SYGnlg3BBmYLx5LtiZrmkAZfErCm2oECBcioA==
+spdy@^4.0.2:
+ version "4.0.2"
+ resolved "https://registry.yarnpkg.com/spdy/-/spdy-4.0.2.tgz#b74f466203a3eda452c02492b91fb9e84a27677b"
+ integrity sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==
dependencies:
debug "^4.1.0"
handle-thing "^2.0.0"
@@ -7238,9 +7192,9 @@ sshpk@^1.7.0:
tweetnacl "~0.14.0"
ssri@^6.0.1:
- version "6.0.1"
- resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.1.tgz#2a3c41b28dd45b62b63676ecb74001265ae9edd8"
- integrity sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==
+ version "6.0.2"
+ resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.2.tgz#157939134f20464e7301ddba3e90ffa8f7728ac5"
+ integrity sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==
dependencies:
figgy-pudding "^3.5.1"
@@ -7250,9 +7204,11 @@ stable@^0.1.8:
integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
stack-utils@^1.0.1:
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.2.tgz#33eba3897788558bebfc2db059dc158ec36cebb8"
- integrity sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA==
+ version "1.0.4"
+ resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.4.tgz#4b600971dcfc6aed0cbdf2a8268177cc916c87c8"
+ integrity sha512-IPDJfugEGbfizBwBZRZ3xpccMdRyP5lqsBWXGQWimVjua/ccLCeMOAVjlc1R7LxFjo5sEDhyNIXd8mo/AiDS9w==
+ dependencies:
+ escape-string-regexp "^2.0.0"
static-extend@^0.1.1:
version "0.1.2"
@@ -7274,13 +7230,6 @@ std-env@^2.2.1:
dependencies:
ci-info "^1.6.0"
-stdout-stream@^1.4.0:
- version "1.4.1"
- resolved "https://registry.yarnpkg.com/stdout-stream/-/stdout-stream-1.4.1.tgz#5ac174cdd5cd726104aa0c0b2bd83815d8d535de"
- integrity sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==
- dependencies:
- readable-stream "^2.0.1"
-
stream-browserify@^2.0.1:
version "2.0.2"
resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"
@@ -7318,23 +7267,6 @@ strict-uri-encode@^1.0.0:
resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
-string-width@^1.0.1, string-width@^1.0.2:
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
- integrity sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=
- dependencies:
- code-point-at "^1.0.0"
- is-fullwidth-code-point "^1.0.0"
- strip-ansi "^3.0.0"
-
-"string-width@^1.0.2 || 2", string-width@^2.0.0, string-width@^2.1.1:
- version "2.1.1"
- resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
- integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
- dependencies:
- is-fullwidth-code-point "^2.0.0"
- strip-ansi "^4.0.0"
-
string-width@^3.0.0, string-width@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
@@ -7353,21 +7285,21 @@ string-width@^4.0.0, string-width@^4.1.0:
is-fullwidth-code-point "^3.0.0"
strip-ansi "^6.0.0"
-string.prototype.trimleft@^2.1.1:
- version "2.1.1"
- resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.1.tgz#9bdb8ac6abd6d602b17a4ed321870d2f8dcefc74"
- integrity sha512-iu2AGd3PuP5Rp7x2kEZCrB2Nf41ehzh+goo8TV7z8/XDBbsvc6HQIlUl9RjkZ4oyrW1XM5UwlGl1oVEaDjg6Ag==
+string.prototype.trimend@^1.0.1:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.3.tgz#a22bd53cca5c7cf44d7c9d5c732118873d6cd18b"
+ integrity sha512-ayH0pB+uf0U28CtjlLvL7NaohvR1amUvVZk+y3DYb0Ey2PUV5zPkkKy9+U1ndVEIXO8hNg18eIv9Jntbii+dKw==
dependencies:
+ call-bind "^1.0.0"
define-properties "^1.1.3"
- function-bind "^1.1.1"
-string.prototype.trimright@^2.1.1:
- version "2.1.1"
- resolved "https://registry.yarnpkg.com/string.prototype.trimright/-/string.prototype.trimright-2.1.1.tgz#440314b15996c866ce8a0341894d45186200c5d9"
- integrity sha512-qFvWL3/+QIgZXVmJBfpHmxLB7xsUXz6HsUmP8+5dRaC3Q7oKUv9Vo6aMCRZC1smrtyECFsIT30PqBJ1gTjAs+g==
+string.prototype.trimstart@^1.0.1:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.3.tgz#9b4cb590e123bb36564401d59824298de50fd5aa"
+ integrity sha512-oBIBUy5lea5tt0ovtOFiEQaBkoBBkyJhZXzJYrSmDo5IUUqbOPvVezuRs/agBIdZ2p2Eo1FD6bD9USyBLfl3xg==
dependencies:
+ call-bind "^1.0.0"
define-properties "^1.1.3"
- function-bind "^1.1.1"
string_decoder@^1.0.0, string_decoder@^1.1.1:
version "1.3.0"
@@ -7383,6 +7315,15 @@ string_decoder@~1.1.1:
dependencies:
safe-buffer "~5.1.0"
+stringify-object@^3.3.0:
+ version "3.3.0"
+ resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.3.0.tgz#703065aefca19300d3ce88af4f5b3956d7556629"
+ integrity sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==
+ dependencies:
+ get-own-enumerable-property-symbols "^3.0.0"
+ is-obj "^1.0.1"
+ is-regexp "^1.0.0"
+
strip-ansi@^3.0.0, strip-ansi@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
@@ -7390,13 +7331,6 @@ strip-ansi@^3.0.0, strip-ansi@^3.0.1:
dependencies:
ansi-regex "^2.0.0"
-strip-ansi@^4.0.0:
- version "4.0.0"
- resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
- integrity sha1-qEeQIusaw2iocTibY1JixQXuNo8=
- dependencies:
- ansi-regex "^3.0.0"
-
strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
version "5.2.0"
resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
@@ -7416,25 +7350,19 @@ strip-bom-string@^1.0.0:
resolved "https://registry.yarnpkg.com/strip-bom-string/-/strip-bom-string-1.0.0.tgz#e5211e9224369fbb81d633a2f00044dc8cedad92"
integrity sha1-5SEekiQ2n7uB1jOi8ABE3IztrZI=
-strip-bom@^2.0.0:
- version "2.0.0"
- resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
- integrity sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=
+strip-comments@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-1.0.2.tgz#82b9c45e7f05873bee53f37168af930aa368679d"
+ integrity sha512-kL97alc47hoyIQSV165tTt9rG5dn4w1dNnBhOQ3bOU1Nc1hel09jnXANaHJ7vzHLd4Ju8kseDGzlev96pghLFw==
dependencies:
- is-utf8 "^0.2.0"
+ babel-extract-comments "^1.0.0"
+ babel-plugin-transform-object-rest-spread "^6.26.0"
strip-eof@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
integrity sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=
-strip-indent@^1.0.1:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
- integrity sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=
- dependencies:
- get-stdin "^4.0.1"
-
strip-json-comments@~2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
@@ -7458,18 +7386,18 @@ stylus-loader@^3.0.2:
lodash.clonedeep "^4.5.0"
when "~3.6.x"
-stylus@^0.54.5:
- version "0.54.7"
- resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.54.7.tgz#c6ce4793965ee538bcebe50f31537bfc04d88cd2"
- integrity sha512-Yw3WMTzVwevT6ZTrLCYNHAFmanMxdylelL3hkWNgPMeTCpMwpV3nXjpOHuBXtFv7aiO2xRuQS6OoAdgkNcSNug==
+stylus@^0.54.8:
+ version "0.54.8"
+ resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.54.8.tgz#3da3e65966bc567a7b044bfe0eece653e099d147"
+ integrity sha512-vr54Or4BZ7pJafo2mpf0ZcwA74rpuYCZbxrHBsH8kbcXOwSfvBFwsRfpGO5OD5fhG5HDCFW737PKaawI7OqEAg==
dependencies:
css-parse "~2.0.0"
debug "~3.1.0"
- glob "^7.1.3"
- mkdirp "~0.5.x"
+ glob "^7.1.6"
+ mkdirp "~1.0.4"
safer-buffer "^2.1.2"
sax "~1.2.4"
- semver "^6.0.0"
+ semver "^6.3.0"
source-map "^0.7.3"
supports-color@^2.0.0:
@@ -7492,9 +7420,9 @@ supports-color@^6.1.0:
has-flag "^3.0.0"
supports-color@^7.1.0:
- version "7.1.0"
- resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
- integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==
+ version "7.2.0"
+ resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+ integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
dependencies:
has-flag "^4.0.0"
@@ -7527,39 +7455,30 @@ tapable@^1.0.0, tapable@^1.1.3:
resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
-tar@^2.0.0:
- version "2.2.2"
- resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.2.tgz#0ca8848562c7299b8b446ff6a4d60cdbb23edc40"
- integrity sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==
- dependencies:
- block-stream "*"
- fstream "^1.0.12"
- inherits "2"
-
term-size@^2.1.0:
- version "2.2.0"
- resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.2.0.tgz#1f16adedfe9bdc18800e1776821734086fcc6753"
- integrity sha512-a6sumDlzyHVJWb8+YofY4TW112G6p2FCPEAFk+59gIYHv3XHRhm9ltVQ9kli4hNWeQBwSpe8cRN25x0ROunMOw==
+ version "2.2.1"
+ resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.2.1.tgz#2a6a54840432c2fb6320fea0f415531e90189f54"
+ integrity sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==
terser-webpack-plugin@^1.4.3:
- version "1.4.3"
- resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz#5ecaf2dbdc5fb99745fd06791f46fc9ddb1c9a7c"
- integrity sha512-QMxecFz/gHQwteWwSo5nTc6UaICqN1bMedC5sMtUc7y3Ha3Q8y6ZO0iCR8pq4RJC8Hjf0FEPEHZqcMB/+DFCrA==
+ version "1.4.5"
+ resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz#a217aefaea330e734ffacb6120ec1fa312d6040b"
+ integrity sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==
dependencies:
cacache "^12.0.2"
find-cache-dir "^2.1.0"
is-wsl "^1.1.0"
schema-utils "^1.0.0"
- serialize-javascript "^2.1.2"
+ serialize-javascript "^4.0.0"
source-map "^0.6.1"
terser "^4.1.2"
webpack-sources "^1.4.0"
worker-farm "^1.7.0"
terser@^4.1.2:
- version "4.6.6"
- resolved "https://registry.yarnpkg.com/terser/-/terser-4.6.6.tgz#da2382e6cafbdf86205e82fb9a115bd664d54863"
- integrity sha512-4lYPyeNmstjIIESr/ysHg2vUPRGf2tzF9z2yYwnowXVuVzLEamPN1Gfrz7f8I9uEPuHcbFlW4PLIAsJoxXyJ1g==
+ version "4.8.0"
+ resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
+ integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
dependencies:
commander "^2.20.0"
source-map "~0.6.1"
@@ -7589,9 +7508,9 @@ thunky@^1.0.2:
integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
timers-browserify@^2.0.4:
- version "2.0.11"
- resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.11.tgz#800b1f3eee272e5bc53ee465a04d0e804c31211f"
- integrity sha512-60aV6sgJ5YEbzUdn9c8kYGIqOubPoUdqQCul3SBAsRCZ40s6Y5cMcrW4dt3/k/EsbLVJNl9n6Vz3fTc+k2GeKQ==
+ version "2.0.12"
+ resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.12.tgz#44a45c11fbf407f34f97bccd1577c652361b00ee"
+ integrity sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==
dependencies:
setimmediate "^1.0.4"
@@ -7640,6 +7559,13 @@ to-regex-range@^2.1.0:
is-number "^3.0.0"
repeat-string "^1.6.1"
+to-regex-range@^5.0.1:
+ version "5.0.1"
+ resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+ integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+ dependencies:
+ is-number "^7.0.0"
+
to-regex@^3.0.1, to-regex@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
@@ -7673,22 +7599,10 @@ tough-cookie@~2.5.0:
psl "^1.1.28"
punycode "^2.1.1"
-trim-newlines@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
- integrity sha1-WIeWa7WCpFA6QetST301ARgVphM=
-
-"true-case-path@^1.0.2":
- version "1.0.3"
- resolved "https://registry.yarnpkg.com/true-case-path/-/true-case-path-1.0.3.tgz#f813b5a8c86b40da59606722b144e3225799f47d"
- integrity sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew==
- dependencies:
- glob "^7.1.2"
-
tslib@^1.9.0:
- version "1.11.1"
- resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
- integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
+ version "1.14.1"
+ resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+ integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
tty-browserify@0.0.0:
version "0.0.0"
@@ -7843,9 +7757,9 @@ upath@^1.1.0, upath@^1.1.1:
integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
update-notifier@^4.0.0:
- version "4.1.0"
- resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-4.1.0.tgz#4866b98c3bc5b5473c020b1250583628f9a328f3"
- integrity sha512-w3doE1qtI0/ZmgeoDoARmI5fjDoT93IfKgEGqm26dGUOh8oNpaSTsGNdYRN/SjOuo10jcJGwkEL3mroKzktkew==
+ version "4.1.3"
+ resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-4.1.3.tgz#be86ee13e8ce48fb50043ff72057b5bd598e1ea3"
+ integrity sha512-Yld6Z0RyCYGB6ckIjffGOSOmHXj1gMeE7aROz4MG+XMkmixBX4jUngrGXNYz7wPKBmtoD4MnBa2Anu7RSKht/A==
dependencies:
boxen "^4.2.0"
chalk "^3.0.0"
@@ -7867,9 +7781,9 @@ upper-case@^1.1.1:
integrity sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=
uri-js@^4.2.2:
- version "4.2.2"
- resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
- integrity sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==
+ version "4.4.0"
+ resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.0.tgz#aa714261de793e8a82347a7bcc9ce74e86f28602"
+ integrity sha512-B0yRTzYdUCCn9n+F4+Gh4yIDtMQcaJsmYBDsTSG8g/OejKBodLQ2IHfN3bM7jUsRXndopT7OIXWdYqc1fjmV6g==
dependencies:
punycode "^2.1.0"
@@ -7895,9 +7809,9 @@ url-parse-lax@^3.0.0:
prepend-http "^2.0.0"
url-parse@^1.4.3:
- version "1.4.7"
- resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.4.7.tgz#a8a83535e8c00a316e403a5db4ac1b9b853ae278"
- integrity sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==
+ version "1.5.1"
+ resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.1.tgz#d5fa9890af8a5e1f274a2c98376510f6425f6e3b"
+ integrity sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==
dependencies:
querystringify "^2.1.1"
requires-port "^1.0.0"
@@ -7915,7 +7829,7 @@ use@^3.1.0:
resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
-util-deprecate@^1.0.1, util-deprecate@~1.0.1:
+util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
@@ -7952,7 +7866,7 @@ util@^0.11.0:
dependencies:
inherits "2.0.3"
-utila@^0.4.0, utila@~0.4:
+utila@~0.4:
version "0.4.0"
resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
integrity sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=
@@ -7962,19 +7876,11 @@ utils-merge@1.0.1:
resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
-uuid@^3.0.1, uuid@^3.3.2:
+uuid@^3.3.2, uuid@^3.4.0:
version "3.4.0"
resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
-validate-npm-package-license@^3.0.1:
- version "3.0.4"
- resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
- integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
- dependencies:
- spdx-correct "^3.0.0"
- spdx-expression-parse "^3.0.0"
-
vary@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@@ -8005,9 +7911,9 @@ vue-hot-reload-api@^2.3.0:
integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
vue-loader@^15.7.1:
- version "15.9.0"
- resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.9.0.tgz#5d4b0378a4606188fc83e587ed23c94bc3a10998"
- integrity sha512-FeDHvTSpwyLeF7LIV1PYkvqUQgTJ8UmOxhSlCyRSxaXCKk+M6NF4tDQsLsPPNeDPyR7TfRQ8MLg6v+8PsDV9xQ==
+ version "15.9.5"
+ resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.9.5.tgz#7a960dc420a3439deaacdda038fdcdbf7c432706"
+ integrity sha512-oeMOs2b5o5gRqkxfds10bCx6JeXYTwivRgbb8hzOrcThD2z1+GqEKE3EX9A2SGbsYDf4rXwRg6D5n1w0jO5SwA==
dependencies:
"@vue/component-compiler-utils" "^3.1.0"
hash-sum "^1.0.2"
@@ -8015,15 +7921,15 @@ vue-loader@^15.7.1:
vue-hot-reload-api "^2.3.0"
vue-style-loader "^4.1.0"
-vue-router@^3.1.3:
- version "3.1.6"
- resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.1.6.tgz#45f5a3a3843e31702c061dd829393554e4328f89"
- integrity sha512-GYhn2ynaZlysZMkFE5oCHRUTqE8BWs/a9YbKpNLi0i7xD6KG1EzDqpHQmv1F5gXjr8kL5iIVS8EOtRaVUEXTqA==
+vue-router@^3.4.5:
+ version "3.4.9"
+ resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.4.9.tgz#c016f42030ae2932f14e4748b39a1d9a0e250e66"
+ integrity sha512-CGAKWN44RqXW06oC+u4mPgHLQQi2t6vLD/JbGRDAXm0YpMv0bgpKuU5bBd7AvMgfTz9kXVRIWKHqRwGEb8xFkA==
vue-server-renderer@^2.6.10:
- version "2.6.11"
- resolved "https://registry.yarnpkg.com/vue-server-renderer/-/vue-server-renderer-2.6.11.tgz#be8c9abc6aacc309828a755c021a05fc474b4bc3"
- integrity sha512-V3faFJHr2KYfdSIalL+JjinZSHYUhlrvJ9pzCIjjwSh77+pkrsXpK4PucdPcng57+N77pd1LrKqwbqjQdktU1A==
+ version "2.6.12"
+ resolved "https://registry.yarnpkg.com/vue-server-renderer/-/vue-server-renderer-2.6.12.tgz#a8cb9c49439ef205293cb41c35d0d2b0541653a5"
+ integrity sha512-3LODaOsnQx7iMFTBLjki8xSyOxhCtbZ+nQie0wWY4iOVeEtTg1a3YQAjd82WvKxrWHHTshjvLb7OXMc2/dYuxw==
dependencies:
chalk "^1.1.3"
hash-sum "^1.0.2"
@@ -8031,7 +7937,7 @@ vue-server-renderer@^2.6.10:
lodash.template "^4.5.0"
lodash.uniq "^4.5.0"
resolve "^1.2.0"
- serialize-javascript "^2.1.2"
+ serialize-javascript "^3.1.0"
source-map "0.5.6"
vue-style-loader@^4.1.0:
@@ -8043,9 +7949,9 @@ vue-style-loader@^4.1.0:
loader-utils "^1.0.2"
vue-template-compiler@^2.6.10:
- version "2.6.11"
- resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz#c04704ef8f498b153130018993e56309d4698080"
- integrity sha512-KIq15bvQDrcCjpGjrAhx4mUlyyHfdmTaoNfeoATHLAiWB+MU3cx4lOzMwrnUh9cCxy0Lt1T11hAFY6TQgroUAA==
+ version "2.6.12"
+ resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz#947ed7196744c8a5285ebe1233fe960437fcc57e"
+ integrity sha512-OzzZ52zS41YUbkCBfdXShQTe69j1gQDZ9HIX8miuC9C3rBCk9wIRjLiZZLrmX9V+Ftq/YEyv1JaVr5Y/hNtByg==
dependencies:
de-indent "^1.0.2"
he "^1.1.0"
@@ -8056,9 +7962,9 @@ vue-template-es2015-compiler@^1.9.0:
integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
vue@^2.6.10:
- version "2.6.11"
- resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
- integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==
+ version "2.6.12"
+ resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
+ integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==
vuepress-html-webpack-plugin@^3.2.0:
version "3.2.0"
@@ -8074,10 +7980,11 @@ vuepress-html-webpack-plugin@^3.2.0:
util.promisify "1.0.0"
vuepress-plugin-container@^2.0.2:
- version "2.1.2"
- resolved "https://registry.yarnpkg.com/vuepress-plugin-container/-/vuepress-plugin-container-2.1.2.tgz#688c1e5a9709a1b8658605bcaee580b3abb19d16"
- integrity sha512-Df5KoIDMYiFg45GTfFw2hIiLGSsjhms4f3ppl2UIBf5nWMxi2lfifcoo8MooMSfxboxRZjoDccqQfu0fypaKrQ==
+ version "2.1.5"
+ resolved "https://registry.yarnpkg.com/vuepress-plugin-container/-/vuepress-plugin-container-2.1.5.tgz#37fff05662fedbd63ffd3a5463b2592c7a7f3133"
+ integrity sha512-TQrDX/v+WHOihj3jpilVnjXu9RcTm6m8tzljNJwYhxnJUW0WWQ0hFLcDTqTBwgKIFdEiSxVOmYE+bJX/sq46MA==
dependencies:
+ "@vuepress/shared-utils" "^1.2.0"
markdown-it-container "^2.0.0"
vuepress-plugin-smooth-scroll@^0.0.3:
@@ -8088,25 +7995,34 @@ vuepress-plugin-smooth-scroll@^0.0.3:
smoothscroll-polyfill "^0.4.3"
vuepress@^1.5.4:
- version "1.5.4"
- resolved "https://registry.yarnpkg.com/vuepress/-/vuepress-1.5.4.tgz#282d2412c1c7269d8bd93b83d421ef53b77b45f6"
- integrity sha512-F25r65BzxDFAJmWIN9s9sQSndLIf1ldAKEwkeXCqE4p2lsx/eVvQJL3DzOeeR2WgCFOkhFMKWIV+CthTGdNTZg==
+ version "1.7.1"
+ resolved "https://registry.yarnpkg.com/vuepress/-/vuepress-1.7.1.tgz#bb0e139d8c407a0b5aa962cf9577832a5808937e"
+ integrity sha512-AdA3do1L4DNzeF8sMTE+cSUJ5hR/6f3YujU8DVowi/vFOg/SX2lJF8urvDkZUSXzaAT6aSgkI9L+B6D+i7SJjA==
dependencies:
- "@vuepress/core" "1.5.4"
- "@vuepress/theme-default" "1.5.4"
+ "@vuepress/core" "1.7.1"
+ "@vuepress/theme-default" "1.7.1"
cac "^6.5.6"
envinfo "^7.2.0"
opencollective-postinstall "^2.0.2"
update-notifier "^4.0.0"
-watchpack@^1.6.0:
- version "1.6.0"
- resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"
- integrity sha512-i6dHe3EyLjMmDlU1/bGQpEw25XSjkJULPuAVKCbNRefQVq48yXKUpwg538F7AZTf9kyr57zj++pQFltUa5H7yA==
+watchpack-chokidar2@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"
+ integrity sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==
+ dependencies:
+ chokidar "^2.1.8"
+
+watchpack@^1.7.4:
+ version "1.7.5"
+ resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.7.5.tgz#1267e6c55e0b9b5be44c2023aed5437a2c26c453"
+ integrity sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==
dependencies:
- chokidar "^2.0.2"
graceful-fs "^4.1.2"
neo-async "^2.5.0"
+ optionalDependencies:
+ chokidar "^3.4.1"
+ watchpack-chokidar2 "^2.0.1"
wbuf@^1.1.0, wbuf@^1.7.3:
version "1.7.3"
@@ -8124,9 +8040,9 @@ webpack-chain@^4.9.0:
javascript-stringify "^1.6.0"
webpack-chain@^6.0.0:
- version "6.4.0"
- resolved "https://registry.yarnpkg.com/webpack-chain/-/webpack-chain-6.4.0.tgz#22f0b27b6a9bc9ee3cba4f9e6513cf66394034e2"
- integrity sha512-f97PYqxU+9/u0IUqp/ekAHRhBD1IQwhBv3wlJo2nvyELpr2vNnUqO3XQEk+qneg0uWGP54iciotszpjfnEExFA==
+ version "6.5.1"
+ resolved "https://registry.yarnpkg.com/webpack-chain/-/webpack-chain-6.5.1.tgz#4f27284cbbb637e3c8fbdef43eef588d4d861206"
+ integrity sha512-7doO/SRtLu8q5WM0s7vPKPWX580qhi0/yBHkOxNkv50f6qB76Zy9o2wRTrrPULqYTvQlVHuvbA8v+G5ayuUDsA==
dependencies:
deepmerge "^1.5.2"
javascript-stringify "^2.0.1"
@@ -8143,9 +8059,9 @@ webpack-dev-middleware@^3.7.2:
webpack-log "^2.0.0"
webpack-dev-server@^3.5.1:
- version "3.10.3"
- resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.10.3.tgz#f35945036813e57ef582c2420ef7b470e14d3af0"
- integrity sha512-e4nWev8YzEVNdOMcNzNeCN947sWJNd43E5XvsJzbAL08kGc2frm1tQ32hTJslRS+H65LCb/AaUCYU7fjHCpDeQ==
+ version "3.11.0"
+ resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.11.0.tgz#8f154a3bce1bcfd1cc618ef4e703278855e7ff8c"
+ integrity sha512-PUxZ+oSTxogFQgkTtFndEtJIPNmml7ExwufBZ9L2/Xyyd5PnOL5UreWe5ZT7IU25DSdykL9p1MLQzmLh2ljSeg==
dependencies:
ansi-html "0.0.7"
bonjour "^3.5.0"
@@ -8155,31 +8071,31 @@ webpack-dev-server@^3.5.1:
debug "^4.1.1"
del "^4.1.1"
express "^4.17.1"
- html-entities "^1.2.1"
+ html-entities "^1.3.1"
http-proxy-middleware "0.19.1"
import-local "^2.0.0"
internal-ip "^4.3.0"
ip "^1.1.5"
is-absolute-url "^3.0.3"
killable "^1.0.1"
- loglevel "^1.6.6"
+ loglevel "^1.6.8"
opn "^5.5.0"
p-retry "^3.0.1"
- portfinder "^1.0.25"
+ portfinder "^1.0.26"
schema-utils "^1.0.0"
selfsigned "^1.10.7"
semver "^6.3.0"
serve-index "^1.9.1"
- sockjs "0.3.19"
+ sockjs "0.3.20"
sockjs-client "1.4.0"
- spdy "^4.0.1"
+ spdy "^4.0.2"
strip-ansi "^3.0.1"
supports-color "^6.1.0"
url "^0.11.0"
webpack-dev-middleware "^3.7.2"
webpack-log "^2.0.0"
ws "^6.2.1"
- yargs "12.0.5"
+ yargs "^13.3.2"
webpack-log@^2.0.0:
version "2.0.0"
@@ -8205,32 +8121,32 @@ webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1:
source-map "~0.6.1"
webpack@^4.8.1:
- version "4.42.0"
- resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.42.0.tgz#b901635dd6179391d90740a63c93f76f39883eb8"
- integrity sha512-EzJRHvwQyBiYrYqhyjW9AqM90dE4+s1/XtCfn7uWg6cS72zH+2VPFAlsnW0+W0cDi0XRjNKUMoJtpSi50+Ph6w==
- dependencies:
- "@webassemblyjs/ast" "1.8.5"
- "@webassemblyjs/helper-module-context" "1.8.5"
- "@webassemblyjs/wasm-edit" "1.8.5"
- "@webassemblyjs/wasm-parser" "1.8.5"
- acorn "^6.2.1"
+ version "4.44.2"
+ resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.44.2.tgz#6bfe2b0af055c8b2d1e90ed2cd9363f841266b72"
+ integrity sha512-6KJVGlCxYdISyurpQ0IPTklv+DULv05rs2hseIXer6D7KrUicRDLFb4IUM1S6LUAKypPM/nSiVSuv8jHu1m3/Q==
+ dependencies:
+ "@webassemblyjs/ast" "1.9.0"
+ "@webassemblyjs/helper-module-context" "1.9.0"
+ "@webassemblyjs/wasm-edit" "1.9.0"
+ "@webassemblyjs/wasm-parser" "1.9.0"
+ acorn "^6.4.1"
ajv "^6.10.2"
ajv-keywords "^3.4.1"
chrome-trace-event "^1.0.2"
- enhanced-resolve "^4.1.0"
+ enhanced-resolve "^4.3.0"
eslint-scope "^4.0.3"
json-parse-better-errors "^1.0.2"
loader-runner "^2.4.0"
loader-utils "^1.2.3"
memory-fs "^0.4.1"
micromatch "^3.1.10"
- mkdirp "^0.5.1"
+ mkdirp "^0.5.3"
neo-async "^2.6.1"
node-libs-browser "^2.2.1"
schema-utils "^1.0.0"
tapable "^1.1.3"
terser-webpack-plugin "^1.4.3"
- watchpack "^1.6.0"
+ watchpack "^1.7.4"
webpack-sources "^1.4.1"
webpackbar@3.2.0:
@@ -8247,12 +8163,19 @@ webpackbar@3.2.0:
text-table "^0.2.0"
wrap-ansi "^5.1.0"
+websocket-driver@0.6.5:
+ version "0.6.5"
+ resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.6.5.tgz#5cb2556ceb85f4373c6d8238aa691c8454e13a36"
+ integrity sha1-XLJVbOuF9Dc8bYI4qmkchFThOjY=
+ dependencies:
+ websocket-extensions ">=0.1.1"
+
websocket-driver@>=0.5.1:
- version "0.7.3"
- resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.3.tgz#a2d4e0d4f4f116f1e6297eba58b05d430100e9f9"
- integrity sha512-bpxWlvbbB459Mlipc5GBzzZwhoZgGEZLuqPaR0INBGnPAY1vdBX6hPnoFXiw+3yWxDuHyQjO2oXTMyS8A5haFg==
+ version "0.7.4"
+ resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.4.tgz#89ad5295bbf64b480abcba31e4953aca706f5760"
+ integrity sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==
dependencies:
- http-parser-js ">=0.4.0 <0.4.11"
+ http-parser-js ">=0.5.1"
safe-buffer ">=5.1.0"
websocket-extensions ">=0.1.1"
@@ -8266,30 +8189,18 @@ when@~3.6.x:
resolved "https://registry.yarnpkg.com/when/-/when-3.6.4.tgz#473b517ec159e2b85005497a13983f095412e34e"
integrity sha1-RztRfsFZ4rhQBUl6E5g/CVQS404=
-which-module@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
- integrity sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=
-
which-module@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
-which@1, which@^1.2.9:
+which@^1.2.9:
version "1.3.1"
resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
dependencies:
isexe "^2.0.0"
-wide-align@^1.1.0:
- version "1.1.3"
- resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
- integrity sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==
- dependencies:
- string-width "^1.0.2 || 2"
-
widest-line@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-3.1.0.tgz#8292333bbf66cb45ff0de1603b136b7ae1496eca"
@@ -8297,6 +8208,132 @@ widest-line@^3.1.0:
dependencies:
string-width "^4.0.0"
+workbox-background-sync@^4.3.1:
+ version "4.3.1"
+ resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-4.3.1.tgz#26821b9bf16e9e37fd1d640289edddc08afd1950"
+ integrity sha512-1uFkvU8JXi7L7fCHVBEEnc3asPpiAL33kO495UMcD5+arew9IbKW2rV5lpzhoWcm/qhGB89YfO4PmB/0hQwPRg==
+ dependencies:
+ workbox-core "^4.3.1"
+
+workbox-broadcast-update@^4.3.1:
+ version "4.3.1"
+ resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-4.3.1.tgz#e2c0280b149e3a504983b757606ad041f332c35b"
+ integrity sha512-MTSfgzIljpKLTBPROo4IpKjESD86pPFlZwlvVG32Kb70hW+aob4Jxpblud8EhNb1/L5m43DUM4q7C+W6eQMMbA==
+ dependencies:
+ workbox-core "^4.3.1"
+
+workbox-build@^4.3.1:
+ version "4.3.1"
+ resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-4.3.1.tgz#414f70fb4d6de47f6538608b80ec52412d233e64"
+ integrity sha512-UHdwrN3FrDvicM3AqJS/J07X0KXj67R8Cg0waq1MKEOqzo89ap6zh6LmaLnRAjpB+bDIz+7OlPye9iii9KBnxw==
+ dependencies:
+ "@babel/runtime" "^7.3.4"
+ "@hapi/joi" "^15.0.0"
+ common-tags "^1.8.0"
+ fs-extra "^4.0.2"
+ glob "^7.1.3"
+ lodash.template "^4.4.0"
+ pretty-bytes "^5.1.0"
+ stringify-object "^3.3.0"
+ strip-comments "^1.0.2"
+ workbox-background-sync "^4.3.1"
+ workbox-broadcast-update "^4.3.1"
+ workbox-cacheable-response "^4.3.1"
+ workbox-core "^4.3.1"
+ workbox-expiration "^4.3.1"
+ workbox-google-analytics "^4.3.1"
+ workbox-navigation-preload "^4.3.1"
+ workbox-precaching "^4.3.1"
+ workbox-range-requests "^4.3.1"
+ workbox-routing "^4.3.1"
+ workbox-strategies "^4.3.1"
+ workbox-streams "^4.3.1"
+ workbox-sw "^4.3.1"
+ workbox-window "^4.3.1"
+
+workbox-cacheable-response@^4.3.1:
+ version "4.3.1"
+ resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-4.3.1.tgz#f53e079179c095a3f19e5313b284975c91428c91"
+ integrity sha512-Rp5qlzm6z8IOvnQNkCdO9qrDgDpoPNguovs0H8C+wswLuPgSzSp9p2afb5maUt9R1uTIwOXrVQMmPfPypv+npw==
+ dependencies:
+ workbox-core "^4.3.1"
+
+workbox-core@^4.3.1:
+ version "4.3.1"
+ resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-4.3.1.tgz#005d2c6a06a171437afd6ca2904a5727ecd73be6"
+ integrity sha512-I3C9jlLmMKPxAC1t0ExCq+QoAMd0vAAHULEgRZ7kieCdUd919n53WC0AfvokHNwqRhGn+tIIj7vcb5duCjs2Kg==
+
+workbox-expiration@^4.3.1:
+ version "4.3.1"
+ resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-4.3.1.tgz#d790433562029e56837f341d7f553c4a78ebe921"
+ integrity sha512-vsJLhgQsQouv9m0rpbXubT5jw0jMQdjpkum0uT+d9tTwhXcEZks7qLfQ9dGSaufTD2eimxbUOJfWLbNQpIDMPw==
+ dependencies:
+ workbox-core "^4.3.1"
+
+workbox-google-analytics@^4.3.1:
+ version "4.3.1"
+ resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-4.3.1.tgz#9eda0183b103890b5c256e6f4ea15a1f1548519a"
+ integrity sha512-xzCjAoKuOb55CBSwQrbyWBKqp35yg1vw9ohIlU2wTy06ZrYfJ8rKochb1MSGlnoBfXGWss3UPzxR5QL5guIFdg==
+ dependencies:
+ workbox-background-sync "^4.3.1"
+ workbox-core "^4.3.1"
+ workbox-routing "^4.3.1"
+ workbox-strategies "^4.3.1"
+
+workbox-navigation-preload@^4.3.1:
+ version "4.3.1"
+ resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-4.3.1.tgz#29c8e4db5843803b34cd96dc155f9ebd9afa453d"
+ integrity sha512-K076n3oFHYp16/C+F8CwrRqD25GitA6Rkd6+qAmLmMv1QHPI2jfDwYqrytOfKfYq42bYtW8Pr21ejZX7GvALOw==
+ dependencies:
+ workbox-core "^4.3.1"
+
+workbox-precaching@^4.3.1:
+ version "4.3.1"
+ resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-4.3.1.tgz#9fc45ed122d94bbe1f0ea9584ff5940960771cba"
+ integrity sha512-piSg/2csPoIi/vPpp48t1q5JLYjMkmg5gsXBQkh/QYapCdVwwmKlU9mHdmy52KsDGIjVaqEUMFvEzn2LRaigqQ==
+ dependencies:
+ workbox-core "^4.3.1"
+
+workbox-range-requests@^4.3.1:
+ version "4.3.1"
+ resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-4.3.1.tgz#f8a470188922145cbf0c09a9a2d5e35645244e74"
+ integrity sha512-S+HhL9+iTFypJZ/yQSl/x2Bf5pWnbXdd3j57xnb0V60FW1LVn9LRZkPtneODklzYuFZv7qK6riZ5BNyc0R0jZA==
+ dependencies:
+ workbox-core "^4.3.1"
+
+workbox-routing@^4.3.1:
+ version "4.3.1"
+ resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-4.3.1.tgz#a675841af623e0bb0c67ce4ed8e724ac0bed0cda"
+ integrity sha512-FkbtrODA4Imsi0p7TW9u9MXuQ5P4pVs1sWHK4dJMMChVROsbEltuE79fBoIk/BCztvOJ7yUpErMKa4z3uQLX+g==
+ dependencies:
+ workbox-core "^4.3.1"
+
+workbox-strategies@^4.3.1:
+ version "4.3.1"
+ resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-4.3.1.tgz#d2be03c4ef214c115e1ab29c9c759c9fe3e9e646"
+ integrity sha512-F/+E57BmVG8dX6dCCopBlkDvvhg/zj6VDs0PigYwSN23L8hseSRwljrceU2WzTvk/+BSYICsWmRq5qHS2UYzhw==
+ dependencies:
+ workbox-core "^4.3.1"
+
+workbox-streams@^4.3.1:
+ version "4.3.1"
+ resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-4.3.1.tgz#0b57da70e982572de09c8742dd0cb40a6b7c2cc3"
+ integrity sha512-4Kisis1f/y0ihf4l3u/+ndMkJkIT4/6UOacU3A4BwZSAC9pQ9vSvJpIi/WFGQRH/uPXvuVjF5c2RfIPQFSS2uA==
+ dependencies:
+ workbox-core "^4.3.1"
+
+workbox-sw@^4.3.1:
+ version "4.3.1"
+ resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-4.3.1.tgz#df69e395c479ef4d14499372bcd84c0f5e246164"
+ integrity sha512-0jXdusCL2uC5gM3yYFT6QMBzKfBr2XTk0g5TPAV4y8IZDyVNDyj1a8uSXy3/XrvkVTmQvLN4O5k3JawGReXr9w==
+
+workbox-window@^4.3.1:
+ version "4.3.1"
+ resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-4.3.1.tgz#ee6051bf10f06afa5483c9b8dfa0531994ede0f3"
+ integrity sha512-C5gWKh6I58w3GeSc0wp2Ne+rqVw8qwcmZnQGpjiek8A2wpbxSJb1FdCoQVO+jDJs35bFgo/WETgl1fqgsxN0Hg==
+ dependencies:
+ workbox-core "^4.3.1"
+
worker-farm@^1.7.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"
@@ -8304,14 +8341,6 @@ worker-farm@^1.7.0:
dependencies:
errno "~0.1.7"
-wrap-ansi@^2.0.0:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
- integrity sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=
- dependencies:
- string-width "^1.0.1"
- strip-ansi "^3.0.1"
-
wrap-ansi@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
@@ -8353,15 +8382,10 @@ xtend@^4.0.0, xtend@~4.0.1:
resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
-y18n@^3.2.1:
- version "3.2.1"
- resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
- integrity sha1-bRX7qITAhnnA136I53WegR4H+kE=
-
-"y18n@^3.2.1 || ^4.0.0", y18n@^4.0.0:
- version "4.0.0"
- resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
- integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
+y18n@^4.0.0:
+ version "4.0.1"
+ resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.1.tgz#8db2b83c31c5d75099bb890b23f3094891e247d4"
+ integrity sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ==
yallist@^2.1.2:
version "2.1.2"
@@ -8373,10 +8397,10 @@ yallist@^3.0.2:
resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
-yargs-parser@^11.1.1:
- version "11.1.1"
- resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-11.1.1.tgz#879a0865973bca9f6bab5cbdf3b1c67ec7d3bcf4"
- integrity sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==
+yargs-parser@^13.1.2:
+ version "13.1.2"
+ resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.2.tgz#130f09702ebaeef2650d54ce6e3e5706f7a4fb38"
+ integrity sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==
dependencies:
camelcase "^5.0.0"
decamelize "^1.2.0"
@@ -8389,30 +8413,21 @@ yargs-parser@^15.0.1:
camelcase "^5.0.0"
decamelize "^1.2.0"
-yargs-parser@^5.0.0:
- version "5.0.0"
- resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.0.tgz#275ecf0d7ffe05c77e64e7c86e4cd94bf0e1228a"
- integrity sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=
- dependencies:
- camelcase "^3.0.0"
-
-yargs@12.0.5:
- version "12.0.5"
- resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.5.tgz#05f5997b609647b64f66b81e3b4b10a368e7ad13"
- integrity sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==
+yargs@^13.3.2:
+ version "13.3.2"
+ resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
+ integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==
dependencies:
- cliui "^4.0.0"
- decamelize "^1.2.0"
+ cliui "^5.0.0"
find-up "^3.0.0"
- get-caller-file "^1.0.1"
- os-locale "^3.0.0"
+ get-caller-file "^2.0.1"
require-directory "^2.1.1"
- require-main-filename "^1.0.1"
+ require-main-filename "^2.0.0"
set-blocking "^2.0.0"
- string-width "^2.0.0"
+ string-width "^3.0.0"
which-module "^2.0.0"
- y18n "^3.2.1 || ^4.0.0"
- yargs-parser "^11.1.1"
+ y18n "^4.0.0"
+ yargs-parser "^13.1.2"
yargs@^14.2:
version "14.2.3"
@@ -8431,25 +8446,6 @@ yargs@^14.2:
y18n "^4.0.0"
yargs-parser "^15.0.1"
-yargs@^7.0.0:
- version "7.1.0"
- resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"
- integrity sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=
- dependencies:
- camelcase "^3.0.0"
- cliui "^3.2.0"
- decamelize "^1.1.1"
- get-caller-file "^1.0.1"
- os-locale "^1.4.0"
- read-pkg-up "^1.0.1"
- require-directory "^2.1.1"
- require-main-filename "^1.0.1"
- set-blocking "^2.0.0"
- string-width "^1.0.2"
- which-module "^1.0.0"
- y18n "^3.2.1"
- yargs-parser "^5.0.0"
-
zepto@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/zepto/-/zepto-1.2.0.tgz#e127bd9e66fd846be5eab48c1394882f7c0e4f98"