From fcda74322c3fed75a490657a50b4968416d8fad2 Mon Sep 17 00:00:00 2001
From: Alex Palmer <XanderXAJ@users.noreply.github.com>
Date: Sat, 11 Mar 2023 15:51:29 +0000
Subject: [PATCH 1/2] fix(create-vite): fix broken vite logo in react when base
 changed

After using create-vite to generate a React project, in a production build the Vite logo will break when setting the base URL to anything except the default `/`.

This occurs because the `img` `src` directly refers to the generated `/vite.svg` and React does not preprocess `src` attributes to add the configured `base`.

As suggested in #7358 (found via #10601), the solution is to import `vite.svg` in the same way as `react.svg` already is. This MR implements that solution in to the templates to prevent confusion in the future.

Note: If using `npm run dev` from the generated `package.json`, the issue will not show up. However, the issue will show up when using `npm run build` followed by `npm run preview`.

```shell
npm run build -- --base /test
npm run preview -- --base /test

npm run dev -- --base /test
```
---
 packages/create-vite/template-react-ts/src/App.tsx | 3 ++-
 packages/create-vite/template-react/src/App.jsx    | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/create-vite/template-react-ts/src/App.tsx b/packages/create-vite/template-react-ts/src/App.tsx
index cd201360b421e4..776eaa027ab01e 100644
--- a/packages/create-vite/template-react-ts/src/App.tsx
+++ b/packages/create-vite/template-react-ts/src/App.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import reactLogo from './assets/react.svg'
+import viteLogo from '/vite.svg'
 import './App.css'
 
 function App() {
@@ -9,7 +10,7 @@ function App() {
     <div className="App">
       <div>
         <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" className="logo" alt="Vite logo" />
+          <img src={viteLogo} className="logo" alt="Vite logo" />
         </a>
         <a href="https://reactjs.org" target="_blank">
           <img src={reactLogo} className="logo react" alt="React logo" />
diff --git a/packages/create-vite/template-react/src/App.jsx b/packages/create-vite/template-react/src/App.jsx
index ef0adc0d53eba9..2ba469dc82918f 100644
--- a/packages/create-vite/template-react/src/App.jsx
+++ b/packages/create-vite/template-react/src/App.jsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import reactLogo from './assets/react.svg'
+import viteLogo from '/vite.svg'
 import './App.css'
 
 function App() {
@@ -9,7 +10,7 @@ function App() {
     <div className="App">
       <div>
         <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" className="logo" alt="Vite logo" />
+          <img src={viteLogo} className="logo" alt="Vite logo" />
         </a>
         <a href="https://reactjs.org" target="_blank">
           <img src={reactLogo} className="logo react" alt="React logo" />

From 8281c0fb9b3f24db5193ed65ce58cc4958643f37 Mon Sep 17 00:00:00 2001
From: Alex Palmer <XanderXAJ@users.noreply.github.com>
Date: Sat, 11 Mar 2023 18:36:37 +0000
Subject: [PATCH 2/2] fix(create-vite): fix broken Vite logo when base is
 configured

---
 packages/create-vite/template-lit-ts/src/my-element.ts | 3 ++-
 packages/create-vite/template-lit/src/my-element.js    | 3 ++-
 packages/create-vite/template-preact-ts/src/app.tsx    | 3 ++-
 packages/create-vite/template-preact/src/app.jsx       | 3 ++-
 packages/create-vite/template-svelte-ts/src/App.svelte | 9 +++++----
 packages/create-vite/template-svelte/src/App.svelte    | 7 ++++---
 packages/create-vite/template-vanilla-ts/src/main.ts   | 3 ++-
 packages/create-vite/template-vanilla/main.js          | 3 ++-
 8 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/packages/create-vite/template-lit-ts/src/my-element.ts b/packages/create-vite/template-lit-ts/src/my-element.ts
index 8649da3b8b20a7..010d1481d3d867 100644
--- a/packages/create-vite/template-lit-ts/src/my-element.ts
+++ b/packages/create-vite/template-lit-ts/src/my-element.ts
@@ -1,6 +1,7 @@
 import { LitElement, css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import litLogo from './assets/lit.svg'
+import viteLogo from '/vite.svg'
 
 /**
  * An example element.
@@ -26,7 +27,7 @@ export class MyElement extends LitElement {
     return html`
       <div>
         <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" class="logo" alt="Vite logo" />
+          <img src=${viteLogo} class="logo" alt="Vite logo" />
         </a>
         <a href="https://lit.dev" target="_blank">
           <img src=${litLogo} class="logo lit" alt="Lit logo" />
diff --git a/packages/create-vite/template-lit/src/my-element.js b/packages/create-vite/template-lit/src/my-element.js
index c7fc6f7e3a313e..e00405cc057123 100644
--- a/packages/create-vite/template-lit/src/my-element.js
+++ b/packages/create-vite/template-lit/src/my-element.js
@@ -1,5 +1,6 @@
 import { LitElement, css, html } from 'lit'
 import litLogo from './assets/lit.svg'
+import viteLogo from '/vite.svg'
 
 /**
  * An example element.
@@ -32,7 +33,7 @@ export class MyElement extends LitElement {
     return html`
       <div>
         <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" class="logo" alt="Vite logo" />
+          <img src=${viteLogo} class="logo" alt="Vite logo" />
         </a>
         <a href="https://lit.dev" target="_blank">
           <img src=${litLogo} class="logo lit" alt="Lit logo" />
diff --git a/packages/create-vite/template-preact-ts/src/app.tsx b/packages/create-vite/template-preact-ts/src/app.tsx
index ccde5b9f39b1d0..b1f47a1d03fd31 100644
--- a/packages/create-vite/template-preact-ts/src/app.tsx
+++ b/packages/create-vite/template-preact-ts/src/app.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'preact/hooks'
 import preactLogo from './assets/preact.svg'
+import viteLogo from '/vite.svg'
 import './app.css'
 
 export function App() {
@@ -9,7 +10,7 @@ export function App() {
     <>
       <div>
         <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" class="logo" alt="Vite logo" />
+          <img src={viteLogo} class="logo" alt="Vite logo" />
         </a>
         <a href="https://preactjs.com" target="_blank">
           <img src={preactLogo} class="logo preact" alt="Preact logo" />
diff --git a/packages/create-vite/template-preact/src/app.jsx b/packages/create-vite/template-preact/src/app.jsx
index 2679f488673db1..343021ac1211cd 100644
--- a/packages/create-vite/template-preact/src/app.jsx
+++ b/packages/create-vite/template-preact/src/app.jsx
@@ -1,5 +1,6 @@
 import { useState } from 'preact/hooks'
 import preactLogo from './assets/preact.svg'
+import viteLogo from '/vite.svg'
 import './app.css'
 
 export function App() {
@@ -9,7 +10,7 @@ export function App() {
     <>
       <div>
         <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" class="logo" alt="Vite logo" />
+          <img src={viteLogo} class="logo" alt="Vite logo" />
         </a>
         <a href="https://preactjs.com" target="_blank">
           <img src={preactLogo} class="logo preact" alt="Preact logo" />
diff --git a/packages/create-vite/template-svelte-ts/src/App.svelte b/packages/create-vite/template-svelte-ts/src/App.svelte
index 7ffd3bc08bfffb..e8b590f1f50599 100644
--- a/packages/create-vite/template-svelte-ts/src/App.svelte
+++ b/packages/create-vite/template-svelte-ts/src/App.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
   import svelteLogo from './assets/svelte.svg'
+  import viteLogo from '/vite.svg'
   import Counter from './lib/Counter.svelte'
 </script>
 
 <main>
   <div>
-    <a href="https://vitejs.dev" target="_blank" rel="noreferrer"> 
-      <img src="/vite.svg" class="logo" alt="Vite Logo" />
+    <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
+      <img src={viteLogo} class="logo" alt="Vite Logo" />
     </a>
-    <a href="https://svelte.dev" target="_blank" rel="noreferrer"> 
+    <a href="https://svelte.dev" target="_blank" rel="noreferrer">
       <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
     </a>
   </div>
@@ -43,4 +44,4 @@
   .read-the-docs {
     color: #888;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/create-vite/template-svelte/src/App.svelte b/packages/create-vite/template-svelte/src/App.svelte
index 5a186956d302e4..1f31354ec8cfeb 100644
--- a/packages/create-vite/template-svelte/src/App.svelte
+++ b/packages/create-vite/template-svelte/src/App.svelte
@@ -1,14 +1,15 @@
 <script>
   import svelteLogo from './assets/svelte.svg'
+  import viteLogo from '/vite.svg'
   import Counter from './lib/Counter.svelte'
 </script>
 
 <main>
   <div>
-    <a href="https://vitejs.dev" target="_blank" rel="noreferrer"> 
-      <img src="/vite.svg" class="logo" alt="Vite Logo" />
+    <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
+      <img src={viteLogo} class="logo" alt="Vite Logo" />
     </a>
-    <a href="https://svelte.dev" target="_blank" rel="noreferrer"> 
+    <a href="https://svelte.dev" target="_blank" rel="noreferrer">
       <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
     </a>
   </div>
diff --git a/packages/create-vite/template-vanilla-ts/src/main.ts b/packages/create-vite/template-vanilla-ts/src/main.ts
index df7c82c3cae37d..76dbee315d13f3 100644
--- a/packages/create-vite/template-vanilla-ts/src/main.ts
+++ b/packages/create-vite/template-vanilla-ts/src/main.ts
@@ -1,11 +1,12 @@
 import './style.css'
 import typescriptLogo from './typescript.svg'
+import viteLogo from '/vite.svg'
 import { setupCounter } from './counter'
 
 document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
   <div>
     <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
+      <img src=${viteLogo} class="logo" alt="Vite logo" />
     </a>
     <a href="https://www.typescriptlang.org/" target="_blank">
       <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
diff --git a/packages/create-vite/template-vanilla/main.js b/packages/create-vite/template-vanilla/main.js
index 727b4ea209e978..5e9d9424f21c9a 100644
--- a/packages/create-vite/template-vanilla/main.js
+++ b/packages/create-vite/template-vanilla/main.js
@@ -1,11 +1,12 @@
 import './style.css'
 import javascriptLogo from './javascript.svg'
+import viteLogo from '/vite.svg'
 import { setupCounter } from './counter.js'
 
 document.querySelector('#app').innerHTML = `
   <div>
     <a href="https://vitejs.dev" target="_blank">
-      <img src="/vite.svg" class="logo" alt="Vite logo" />
+      <img src=${viteLogo} class="logo" alt="Vite logo" />
     </a>
     <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
       <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />