docs-image/middleware-mode.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 826.3986994587049 226.11544497291266" width="826.3986994587049" height="226.11544497291266">
  <!-- svg-source:excalidraw -->

  <defs>
    <style class="style-fonts">
      @font-face {
        font-family: "Virgil";
        src: url("https://excalidraw.com/Virgil.woff2");
      }
      @font-face {
        font-family: "Cascadia";
        src: url("https://excalidraw.com/Cascadia.woff2");
      }
    </style>
  </defs>
  <rect x="0" y="0" width="826.3986994587049" height="226.11544497291266" fill="#ffffff"></rect><g stroke-linecap="round" transform="translate(10 19.928645542689765) rotate(0 76 94)"><path d="M-0.38 0.27 C36.46 -1.34, 72.39 1.47, 153.76 -0.05 M-0.49 -0.52 C59.76 0.67, 120.73 0.48, 152.75 -0.52 M153.17 1.91 C152 49.99, 154.55 98.3, 152.7 187.8 M151.79 -0.14 C153.52 60.01, 153.37 118.77, 151.81 188.13 M153.96 186.54 C119.48 187.41, 90.09 186.51, -1.85 187.62 M151.7 187.62 C117.56 188.05, 85.42 187.33, -0.44 188.98 M1.48 187.98 C-0.87 147.87, 0.13 106.33, -1.58 -0.3 M0.41 187.26 C1.03 137.92, 0.67 86.35, -0.93 -0.27" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(15 101.42864554268976) rotate(0 71 12.5)"><text x="71" y="18" font-family="Virgil, Segoe UI Emoji" font-size="20px" fill="#000000" text-anchor="middle" style="white-space: pre;" direction="ltr">Browser</text></g><g stroke-linecap="round" transform="translate(406.199951171875 16.72866385323664) rotate(0 57.5 95.5)"><path d="M0.66 -1.54 C33.8 1.12, 67.76 -0.2, 116.89 -0.33 M-0.19 0.39 C33.26 0.8, 65.61 0.07, 114.57 0.42 M114.2 1.66 C117.88 58.02, 116.82 112.57, 115.31 192.21 M115.38 0.66 C114.82 45.99, 114.4 92, 114.07 191.48 M113.97 191.67 C91.13 189.94, 63.29 189.78, -1.57 189.21 M114.2 191.22 C82.45 190.06, 48.06 191.55, -0.84 191.68 M0.41 191.44 C-0.01 138.93, -3 87.59, -0.57 -0.87 M0.22 191.97 C-0.94 134.41, -1.72 76.61, -0.78 -0.9" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(428.199951171875 87.22866385323664) rotate(0 35.5 25)"><text x="35.5" y="18" font-family="Virgil, Segoe UI Emoji" font-size="20px" fill="#000000" text-anchor="middle" style="white-space: pre;" direction="ltr">Custom</text><text x="35.5" y="43" font-family="Virgil, Segoe UI Emoji" font-size="20px" fill="#000000" text-anchor="middle" style="white-space: pre;" direction="ltr">Server</text></g><g stroke-linecap="round"><g transform="translate(180.94714430808642 45.47555566885603) rotate(0 105.11512679050742 -0.47881746454254426)"><path d="M-0.92 0.48 C34.24 0.44, 175.94 0.18, 211.15 0.13 M0.79 -0.31 C35.85 -0.71, 175.81 -1.23, 210.6 -1.44" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(180.94714430808642 45.47555566885603) rotate(0 105.11512679050742 -0.47881746454254426)"><path d="M28.05 -8.56 C20.21 -6.86, 11.52 -3.92, -1.28 -0.51 M28.08 -9.62 C20.98 -7.68, 12.8 -4.17, -0.97 1.07" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(180.94714430808642 45.47555566885603) rotate(0 105.11512679050742 -0.47881746454254426)"><path d="M28.09 11.96 C20.17 7.23, 11.47 3.74, -1.28 -0.51 M28.12 10.9 C21.04 7.75, 12.86 6.15, -0.97 1.07" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(180.94714430808642 45.47555566885603) rotate(0 105.11512679050742 -0.47881746454254426)"><path d="M183.26 10.23 C193 5.87, 201.95 2.33, 210.24 -2.42 M183.3 9.16 C190.22 5.74, 196.04 4.1, 210.56 -0.85" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(180.94714430808642 45.47555566885603) rotate(0 105.11512679050742 -0.47881746454254426)"><path d="M183.17 -10.29 C193 -8.22, 201.98 -5.34, 210.24 -2.42 M183.2 -11.36 C190.11 -9.68, 195.95 -6.22, 210.56 -0.85" stroke="#000000" stroke-width="1" fill="none"></path></g></g><mask></mask><g stroke-linecap="round"><g transform="translate(179.9197584879853 126.71945762020493) rotate(0 105.39520981513061 1.9227715601351747)"><path d="M0.48 0.76 C35.67 1.28, 176.33 1.99, 211.52 2.21 M-0.73 0.12 C34.36 0.92, 175.76 3.21, 211.12 3.73" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(179.9197584879853 126.71945762020493) rotate(0 105.39520981513061 1.9227715601351747)"><path d="M30.01 -7.54 C19.21 -3.94, 9.5 -2.84, -0.51 -0.27 M28.95 -8.55 C20.33 -6.66, 13.34 -3.46, 1.07 1.72" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(179.9197584879853 126.71945762020493) rotate(0 105.39520981513061 1.9227715601351747)"><path d="M29.87 12.98 C19.26 9.74, 9.61 4.01, -0.51 -0.27 M28.8 11.97 C20.14 8.09, 13.19 5.54, 1.07 1.72" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(179.9197584879853 126.71945762020493) rotate(0 105.39520981513061 1.9227715601351747)"><path d="M184.04 15.3 C192.25 12.05, 201.4 6.53, 210.14 2.7 M182.98 14.29 C190.17 10.12, 199.07 7.75, 211.71 4.68" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(179.9197584879853 126.71945762020493) rotate(0 105.39520981513061 1.9227715601351747)"><path d="M184.37 -5.22 C192.3 -1.63, 201.35 -0.32, 210.14 2.7 M183.3 -6.23 C190.48 -4.63, 199.3 -1.25, 211.71 4.68" stroke="#000000" stroke-width="1" fill="none"></path></g></g><mask></mask><g stroke-linecap="round"><g transform="translate(176.68315565062733 192.7453215910366) rotate(0 107.74691052309663 1.584343684517421)"><path d="M0.76 1.05 C36.88 1.41, 179.98 2.57, 215.79 2.61 M-0.3 0.56 C35.74 0.57, 178.99 0.76, 214.83 1.08" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(176.68315565062733 192.7453215910366) rotate(0 107.74691052309663 1.584343684517421)"><path d="M30.79 -9.03 C24.65 -6.9, 16.1 -5.31, -0.27 0.67 M29.78 -9.5 C19.09 -5.1, 9.88 -1.52, 1.72 0.66" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(176.68315565062733 192.7453215910366) rotate(0 107.74691052309663 1.584343684517421)"><path d="M30.63 11.49 C24.44 9.04, 15.92 6.05, -0.27 0.67 M29.62 11.02 C18.81 8.46, 9.65 5.06, 1.72 0.66" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(176.68315565062733 192.7453215910366) rotate(0 107.74691052309663 1.584343684517421)"><path d="M188.35 11.17 C194.74 8.44, 198.79 5.53, 213.8 0.7 M187.34 10.69 C195.66 8.14, 205.63 4.86, 215.78 0.68" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(176.68315565062733 192.7453215910366) rotate(0 107.74691052309663 1.584343684517421)"><path d="M188.44 -9.35 C194.89 -7.5, 198.93 -5.84, 213.8 0.7 M187.43 -9.83 C195.89 -5.42, 205.83 -1.72, 215.78 0.68" stroke="#000000" stroke-width="1" fill="none"></path></g></g><mask></mask><g transform="translate(185.23343958822238 151.8757206344187) rotate(0 96 12.5)"><text x="0" y="18" font-family="Virgil, Segoe UI Emoji" font-size="20px" fill="#000000" text-anchor="start" style="white-space: pre;" direction="ltr">WebSocket for HMR</text></g><g transform="translate(259.2000296456473 10) rotate(0 27.5 12.5)"><text x="0" y="18" font-family="Virgil, Segoe UI Emoji" font-size="20px" fill="#000000" text-anchor="start" style="white-space: pre;" direction="ltr">HTML</text></g><g transform="translate(245.0428902762278 81.8001708984375) rotate(0 46.5 12.5)"><text x="0" y="18" font-family="Virgil, Segoe UI Emoji" font-size="20px" fill="#000000" text-anchor="start" style="white-space: pre;" direction="ltr">JS / CSS</text></g><g stroke-linecap="round" transform="translate(670.3986994587049 14.115444972912655) rotate(0 73 101)"><path d="M-0.6 -1.43 C30.94 -0.51, 60.6 0.7, 147.99 -1.06 M0.46 -0.18 C34.25 -0.74, 68.92 -0.71, 145.09 0.14 M146.65 -0.52 C143.29 78.27, 143.47 160.85, 146.99 202.26 M146.56 0.44 C148.08 75.36, 148.4 152.18, 145.95 201.36 M144.5 201.69 C106.04 201.26, 65.39 203.38, 1.01 201.36 M146.29 202.41 C115.29 202.64, 86.35 202.29, 0.48 201.59 M-1.19 201.46 C-1.07 148.01, 0.32 97.37, 0.88 -1.76 M-0.32 202.45 C1.29 145.26, 1.42 88.29, -0.32 0.74" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(675.3986994587049 102.61544497291266) rotate(0 68 12.5)"><text x="68" y="18" font-family="Virgil, Segoe UI Emoji" font-size="20px" fill="#000000" text-anchor="middle" style="white-space: pre;" direction="ltr">Vite</text></g><g stroke-linecap="round"><g transform="translate(537.3452821532869 117.85415001827005) rotate(0 58.55770427392747 -1.59543338556648)"><path d="M-0.9 -0.06 C18.66 -0.56, 98.3 -2.58, 118.02 -3.13 M0.82 -1.13 C20.24 -1.5, 98.21 -1.78, 117.53 -2.03" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(537.3452821532869 117.85415001827005) rotate(0 58.55770427392747 -1.59543338556648)"><path d="M26.92 -9.56 C15.69 -6.91, 5.32 -2.3, -0.96 0.14 M27.31 -10.98 C18.67 -7, 10.02 -5.42, -1.27 -0.65" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(537.3452821532869 117.85415001827005) rotate(0 58.55770427392747 -1.59543338556648)"><path d="M27.44 10.95 C16.04 6.31, 5.49 3.62, -0.96 0.14 M27.84 9.53 C19.19 7.36, 10.39 2.79, -1.27 -0.65" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(537.3452821532869 117.85415001827005) rotate(0 58.55770427392747 -1.59543338556648)"><path d="M89.33 9.92 C98.03 5.37, 107.58 2.35, 117.47 -1.83 M89.72 8.51 C98.04 6.43, 106.2 1.57, 117.16 -2.62" stroke="#000000" stroke-width="1" fill="none"></path></g><g transform="translate(537.3452821532869 117.85415001827005) rotate(0 58.55770427392747 -1.59543338556648)"><path d="M89.17 -10.6 C97.91 -7.86, 107.52 -3.58, 117.47 -1.83 M89.56 -12.01 C97.77 -7.94, 105.98 -6.64, 117.16 -2.62" stroke="#000000" stroke-width="1" fill="none"></path></g></g><mask></mask><g transform="translate(557.015435814274 61.29768153599343) rotate(0 35 12.5)"><text x="0" y="18" font-family="Virgil, Segoe UI Emoji" font-size="20px" fill="#000000" text-anchor="start" style="white-space: pre;" direction="ltr">(by JS)</text></g></svg>