Skip to content

Commit c885679

Browse files
kazuponkazupon
committed
chore: update playground browser
1 parent 15e6ea9 commit c885679

File tree

10 files changed

+210
-482
lines changed

10 files changed

+210
-482
lines changed

‎playground/browser/browser.test.mjs‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import assert from 'node:assert'
2+
import { exec } from 'node:child_process'
3+
import process from 'node:process'
24
import test from 'node:test'
3-
import { createServer } from 'node:http'
45
import playwright from 'playwright'
5-
import handler from 'serve-handler'
6-
import process from 'node:process'
76

87
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
98

@@ -12,15 +11,13 @@ function getText(page, selector, options) {
1211
}
1312

1413
test('browser integration test', async () => {
15-
const server = createServer((request, response) => {
16-
return handler(request, response)
17-
})
18-
server.listen(3000, () => {
19-
console.log('Running at http://localhost:3000')
20-
})
14+
const controller = new AbortController()
15+
const { signal } = controller
16+
const server = exec('pnpm run dev --port 3000', { signal, cwd: import.meta.dirname })
2117

2218
const cleanup = () => {
23-
server.close()
19+
controller.abort()
20+
server.kill()
2421
}
2522
process.on('SIGINT', cleanup)
2623
process.on('SIGTERM', cleanup)
@@ -31,10 +28,11 @@ test('browser integration test', async () => {
3128
const browser = await playwright['chromium'].launch({ headless: true })
3229
const page = await browser.newPage({})
3330
await page.goto('http://localhost:3000')
34-
const data = await getText(page, '#app')
31+
const data = await getText(page, '#is-locale')
3532

3633
assert(data === `isLocale('en-US'): true`)
3734

3835
browser.close()
39-
server.close()
36+
controller.abort()
37+
server.kill()
4038
})

‎playground/browser/index.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
56
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Browser example</title>
7+
<title>browser1</title>
78
</head>
89
<body>
910
<div id="app"></div>
10-
<script type="module" src="./index.js"></script>
11+
<script type="module" src="/src/main.js"></script>
1112
</body>
1213
</html>

‎playground/browser/index.js‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎playground/browser/package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
{
22
"name": "example-browser",
33
"private": true,
4-
"version": "0.0.0",
54
"type": "module",
65
"scripts": {
7-
"dev": "pnpx serve -l 3000",
6+
"dev": "vite",
7+
"build": "vite build",
8+
"preview": "vite preview",
89
"test": "node --test"
910
},
10-
"devDependencies": {
11-
"serve": "^14.2.1",
12-
"serve-handler": "^6.1.5"
13-
},
1411
"dependencies": {
1512
"@intlify/utils": "workspace:*"
13+
},
14+
"devDependencies": {
15+
"vite": "^7.1.7"
1616
}
1717
}

‎playground/browser/public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎playground/browser/src/counter.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export function setupCounter(element) {
2+
let counter = 0
3+
const setCounter = count => {
4+
counter = count
5+
element.innerHTML = `count is ${counter}`
6+
}
7+
element.addEventListener('click', () => setCounter(counter + 1))
8+
setCounter(0)
9+
}

‎playground/browser/src/javascript.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎playground/browser/src/main.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { isLocale } from '@intlify/utils'
2+
import { setupCounter } from './counter.js'
3+
import javascriptLogo from './javascript.svg'
4+
import './style.css'
5+
import viteLogo from '/vite.svg'
6+
7+
document.querySelector('#app').innerHTML = `
8+
<p id="is-locale">isLocale('en-US'): ${isLocale(new Intl.Locale('en-US'))}</p>
9+
<div>
10+
<a href="https://vite.dev" target="_blank">
11+
<img src="${viteLogo}" class="logo" alt="Vite logo" />
12+
</a>
13+
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
14+
<img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
15+
</a>
16+
<h1>Hello Vite!</h1>
17+
<div class="card">
18+
<button id="counter" type="button"></button>
19+
</div>
20+
<p class="read-the-docs">
21+
Click on the Vite logo to learn more
22+
</p>
23+
</div>
24+
`
25+
26+
setupCounter(document.querySelector('#counter'))

‎playground/browser/src/style.css‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
:root {
2+
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
3+
line-height: 1.5;
4+
font-weight: 400;
5+
6+
color-scheme: light dark;
7+
color: rgba(255, 255, 255, 0.87);
8+
background-color: #242424;
9+
10+
font-synthesis: none;
11+
text-rendering: optimizeLegibility;
12+
-webkit-font-smoothing: antialiased;
13+
-moz-osx-font-smoothing: grayscale;
14+
}
15+
16+
a {
17+
font-weight: 500;
18+
color: #646cff;
19+
text-decoration: inherit;
20+
}
21+
a:hover {
22+
color: #535bf2;
23+
}
24+
25+
body {
26+
margin: 0;
27+
display: flex;
28+
place-items: center;
29+
min-width: 320px;
30+
min-height: 100vh;
31+
}
32+
33+
h1 {
34+
font-size: 3.2em;
35+
line-height: 1.1;
36+
}
37+
38+
#app {
39+
max-width: 1280px;
40+
margin: 0 auto;
41+
padding: 2rem;
42+
text-align: center;
43+
}
44+
45+
.logo {
46+
height: 6em;
47+
padding: 1.5em;
48+
will-change: filter;
49+
transition: filter 300ms;
50+
}
51+
.logo:hover {
52+
filter: drop-shadow(0 0 2em #646cffaa);
53+
}
54+
.logo.vanilla:hover {
55+
filter: drop-shadow(0 0 2em #f7df1eaa);
56+
}
57+
58+
.card {
59+
padding: 2em;
60+
}
61+
62+
.read-the-docs {
63+
color: #888;
64+
}
65+
66+
button {
67+
border-radius: 8px;
68+
border: 1px solid transparent;
69+
padding: 0.6em 1.2em;
70+
font-size: 1em;
71+
font-weight: 500;
72+
font-family: inherit;
73+
background-color: #1a1a1a;
74+
cursor: pointer;
75+
transition: border-color 0.25s;
76+
}
77+
button:hover {
78+
border-color: #646cff;
79+
}
80+
button:focus,
81+
button:focus-visible {
82+
outline: 4px auto -webkit-focus-ring-color;
83+
}
84+
85+
@media (prefers-color-scheme: light) {
86+
:root {
87+
color: #213547;
88+
background-color: #ffffff;
89+
}
90+
a:hover {
91+
color: #747bff;
92+
}
93+
button {
94+
background-color: #f9f9f9;
95+
}
96+
}

0 commit comments

Comments
 (0)