Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: standardize create-vite vanilla templates #16183

Open
wants to merge 15 commits into
base: main
Choose a base branch
from
Open

refactor: standardize create-vite vanilla templates #16183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
e1bfeed
Update main.js
n-ce Mar 12, 2024
a5c8d3b
Update index.html
n-ce Mar 12, 2024
ed797b1
Update counter.js
n-ce Mar 12, 2024
1de6f01
Update index.html
n-ce Mar 12, 2024
f3b75ad
Merge branch 'vitejs:main' into main
n-ce Mar 12, 2024
d026de4
div => main
n-ce Mar 17, 2024
0132e7e
Update counter.js
n-ce Mar 17, 2024
55ba000
Update main.js
n-ce Mar 17, 2024
7f0ad9e
Update index.html
n-ce Mar 17, 2024
0975681
Update main.ts
n-ce Mar 17, 2024
edb562f
Update counter.ts
n-ce Mar 17, 2024
8090a1a
Update style.css
n-ce Mar 17, 2024
4b0863e
Update index.html
n-ce Mar 17, 2024
9067067
Update style.css
n-ce Mar 17, 2024
2df81dd
Merge branch 'vitejs:main' into main
n-ce Mar 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 27 additions & 10 deletions packages/create-vite/template-vanilla-ts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,30 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + TS</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>

<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + TS</title>
</head>

<body>
<main>
<a href="https://vitejs.dev" target="_blank">
<img id="viteLogo" class="logo" alt="Vite logo" />
</a>
<a href="https://www.typescriptlang.org/" target="_blank">
<img id="typescriptLogo" class="logo vanilla" alt="TypeScript logo" />
</a>
<h1>Vite + TypeScript</h1>
<div class="card">
<button id="counter" type="button"></button>
</div>
<p class="read-the-docs">
Click on the Vite and TypeScript logos to learn more
</p>
</main>
<script type="module" src="/src/main.ts"></script>
</body>

</html>
12 changes: 6 additions & 6 deletions packages/create-vite/template-vanilla-ts/src/counter.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
export function setupCounter(element: HTMLButtonElement) {
let counter = 0
const setCounter = (count: number) => {
counter = count
element.innerHTML = `count is ${counter}`
let count = 0
function increment() {
element.textContent = `count is ${count}`
count++
}
element.addEventListener('click', () => setCounter(counter + 1))
setCounter(0)
element.addEventListener('click', increment)
increment()
}
22 changes: 4 additions & 18 deletions packages/create-vite/template-vanilla-ts/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,8 @@ import typescriptLogo from './typescript.svg'
import viteLogo from '/vite.svg'
import { setupCounter } from './counter.ts'

document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
<div>
<a href="https://vitejs.dev" target="_blank">
<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" />
</a>
<h1>Vite + TypeScript</h1>
<div class="card">
<button id="counter" type="button"></button>
</div>
<p class="read-the-docs">
Click on the Vite and TypeScript logos to learn more
</p>
</div>
`
const getElement = (id: string) => document.getElementById(id);

setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
(<HTMLImageElement>getElement('typescriptLogo')).src = typescriptLogo;
(<HTMLImageElement>getElement('viteLogo')).src = viteLogo;
setupCounter(<HTMLButtonElement>getElement('counter'));
9 changes: 8 additions & 1 deletion packages/create-vite/template-vanilla-ts/src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ a {
color: #646cff;
text-decoration: inherit;
}

a:hover {
color: #535bf2;
}
Expand All @@ -35,7 +36,7 @@ h1 {
line-height: 1.1;
}

#app {
main {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
Expand All @@ -48,9 +49,11 @@ h1 {
will-change: filter;
transition: filter 300ms;
}

.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vanilla:hover {
filter: drop-shadow(0 0 2em #3178c6aa);
}
Expand All @@ -74,9 +77,11 @@ button {
cursor: pointer;
transition: border-color 0.25s;
}

button:hover {
border-color: #646cff;
}

button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
Expand All @@ -87,9 +92,11 @@ button:focus-visible {
color: #213547;
background-color: #ffffff;
}

a:hover {
color: #747bff;
}

button {
background-color: #f9f9f9;
}
Expand Down
12 changes: 6 additions & 6 deletions packages/create-vite/template-vanilla/counter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
export function setupCounter(element) {
let counter = 0
const setCounter = (count) => {
counter = count
element.innerHTML = `count is ${counter}`
let count = 0
function increment() {
element.textContent = `count is ${count}`
count++
}
element.addEventListener('click', () => setCounter(counter + 1))
setCounter(0)
element.addEventListener('click', increment)
increment()
}
37 changes: 27 additions & 10 deletions packages/create-vite/template-vanilla/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,30 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/main.js"></script>
</body>

<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>

<body>
<main>
<a href="https://vitejs.dev" target="_blank">
<img id="viteLogo" class="logo" alt="Vite logo" />
</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
<img id="javascriptLogo" class="logo vanilla" alt="JavaScript logo" />
</a>
<h1>Hello Vite!</h1>
<div class="card">
<button id="counter" type="button"></button>
</div>
<p class="read-the-docs">
Click on the Vite logo to learn more
</p>
</main>
<script type="module" src="/main.js"></script>
</body>

</html>
22 changes: 4 additions & 18 deletions packages/create-vite/template-vanilla/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,8 @@ 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="${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" />
</a>
<h1>Hello Vite!</h1>
<div class="card">
<button id="counter" type="button"></button>
</div>
<p class="read-the-docs">
Click on the Vite logo to learn more
</p>
</div>
`
const getElement = document.getElementById.bind(document)

setupCounter(document.querySelector('#counter'))
getElement('javascriptLogo').src = javascriptLogo
getElement('viteLogo').src = viteLogo
setupCounter(getElement('counter'))
2 changes: 1 addition & 1 deletion packages/create-vite/template-vanilla/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ h1 {
line-height: 1.1;
}

#app {
main {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
Expand Down
Loading