forked from
fogtype.com/_
プレイグラウンド、サンドボックス、使い捨てスクリプト置き場
delete wmr
Kohei Watanabe
(Oct 13, 2021, 5:43 PM +0900)
d2ab002e
e6d2afa1
-229
-21
wmr/package.json
-21
wmr/package.json
···
1
-
{
2
-
"scripts": {
3
-
"start": "wmr",
4
-
"build": "wmr build --prerender",
5
-
"serve": "wmr serve"
6
-
},
7
-
"eslintConfig": {
8
-
"extends": "preact"
9
-
},
10
-
"alias": {
11
-
"react": "preact/compat",
12
-
"react-dom": "preact/compat"
13
-
},
14
-
"dependencies": {
15
-
"preact": "^10.5.12",
16
-
"preact-iso": "^1.0.0"
17
-
},
18
-
"devDependencies": {
19
-
"wmr": "^1.2.0"
20
-
}
21
-
}
-22
wmr/public/header.js
-22
wmr/public/header.js
···
1
-
import { useLocation } from "preact-iso/router";
2
-
3
-
export default function Header() {
4
-
const { url } = useLocation();
5
-
return (
6
-
<header>
7
-
<nav>
8
-
<a href="/">Home</a>
9
-
<a href="/about">About</a>
10
-
<a href="/error">Error</a>
11
-
</nav>
12
-
<label>
13
-
URL:
14
-
<input
15
-
readonly
16
-
value={url}
17
-
ref={(c) => c && (c.size = c.value.length)}
18
-
/>
19
-
</label>
20
-
</header>
21
-
);
22
-
}
-15
wmr/public/index.html
-15
wmr/public/index.html
···
1
-
<!DOCTYPE html>
2
-
<html lang="en">
3
-
<head>
4
-
<meta charset="utf-8" />
5
-
<title>WMR App</title>
6
-
<meta name="description" content="WMR App" />
7
-
<meta name="viewport" content="width=device-width,initial-scale=1" />
8
-
<link rel="icon" href="data:" />
9
-
<link rel="preload" as="script" href="/index.js" crossorigin />
10
-
<link rel="stylesheet" href="/style.css" />
11
-
</head>
12
-
<body>
13
-
<script type="module" src="/index.js"></script>
14
-
</body>
15
-
</html>
-32
wmr/public/index.js
-32
wmr/public/index.js
···
1
-
import hydrate from "preact-iso/hydrate";
2
-
import { LocationProvider, Router } from "preact-iso/router";
3
-
import lazy, { ErrorBoundary } from "preact-iso/lazy";
4
-
import Home from "./pages/home/index.js";
5
-
import NotFound from "./pages/_404.js";
6
-
import Header from "./header.js";
7
-
8
-
const About = lazy(() => import("./pages/about/index.js"));
9
-
10
-
export function App() {
11
-
return (
12
-
<LocationProvider>
13
-
<div class="app">
14
-
<Header />
15
-
<ErrorBoundary>
16
-
<Router>
17
-
<Home path="/" />
18
-
<About path="/about" />
19
-
<NotFound default />
20
-
</Router>
21
-
</ErrorBoundary>
22
-
</div>
23
-
</LocationProvider>
24
-
);
25
-
}
26
-
27
-
hydrate(<App />);
28
-
29
-
export async function prerender(data) {
30
-
const { default: prerender } = await import("preact-iso/prerender");
31
-
return await prerender(<App {...data} />);
32
-
}
-8
wmr/public/pages/_404.js
-8
wmr/public/pages/_404.js
-11
wmr/public/pages/about/index.js
-11
wmr/public/pages/about/index.js
-24
wmr/public/pages/home/index.js
-24
wmr/public/pages/home/index.js
···
1
-
import styles from "./style.module.css";
2
-
import { useState } from "preact/hooks";
3
-
4
-
export default function Home() {
5
-
const [count, setCount] = useState(0);
6
-
7
-
return (
8
-
<>
9
-
<section class={styles.home}>
10
-
<h1>Home</h1>
11
-
<p>This is the home page.</p>
12
-
<>
13
-
<button style={{ width: 30 }} onClick={() => setCount(count - 1)}>
14
-
-
15
-
</button>
16
-
<output style={{ padding: 10 }}>Count: {count}</output>
17
-
<button style={{ width: 30 }} onClick={() => setCount(count + 1)}>
18
-
+
19
-
</button>
20
-
</>
21
-
</section>
22
-
</>
23
-
);
24
-
}
-4
wmr/public/pages/home/style.module.css
-4
wmr/public/pages/home/style.module.css
-45
wmr/public/style.css
-45
wmr/public/style.css
···
1
-
html,
2
-
body {
3
-
margin: 0;
4
-
min-height: 100%;
5
-
font-family: system-ui, sans-serif;
6
-
}
7
-
8
-
header {
9
-
display: flex;
10
-
background: #ddd;
11
-
}
12
-
13
-
header > nav {
14
-
flex: 1;
15
-
display: flex;
16
-
}
17
-
18
-
header > nav a {
19
-
padding: 10px;
20
-
color: #673ab8;
21
-
text-decoration: none;
22
-
}
23
-
24
-
header > nav a:hover {
25
-
background-color: #f1e9ff;
26
-
}
27
-
28
-
header > label {
29
-
display: flex;
30
-
align-items: center;
31
-
padding: 10px;
32
-
color: #555;
33
-
font-size: 80%;
34
-
}
35
-
36
-
header input {
37
-
border: none;
38
-
border-radius: 3px;
39
-
padding: 2px 5px;
40
-
font-size: 100%;
41
-
}
42
-
43
-
.app > section {
44
-
padding: 20px;
45
-
}
-17
wmr/tsconfig.json
-17
wmr/tsconfig.json
···
1
-
{
2
-
"compilerOptions": {
3
-
"jsx": "preserve",
4
-
"jsxFactory": "preact.h",
5
-
"jsxFragmentFactory": "preact.Fragment",
6
-
"allowJs": true,
7
-
"checkJs": true,
8
-
"strict": true,
9
-
"noEmit": true,
10
-
"moduleResolution": "node",
11
-
"target": "esnext",
12
-
"module": "esnext",
13
-
"resolveJsonModule": true,
14
-
"allowSyntheticDefaultImports": true,
15
-
"downlevelIteration": true
16
-
}
17
-
}
-23
wmr/yarn.lock
-23
wmr/yarn.lock
···
1
-
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2
-
# yarn lockfile v1
3
-
4
-
5
-
fsevents@^2.1.3:
6
-
version "2.3.2"
7
-
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
8
-
integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
9
-
10
-
preact-iso@^1.0.0:
11
-
version "1.1.1"
12
-
resolved "https://registry.yarnpkg.com/preact-iso/-/preact-iso-1.1.1.tgz#959656bfee479e6a8c6707753e84d4342f61c48b"
13
-
integrity sha512-/iG9YH2nlLf3DAEXxCxka6Mux32t2cZEgfbvkNnR9ZtK0yjDRBEHI1IJS6I1AtelAFuBvoD24Ua0sc7wdZb1vg==
14
-
15
-
preact@^10.5.12:
16
-
version "10.5.13"
17
-
resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.13.tgz#85f6c9197ecd736ce8e3bec044d08fd1330fa019"
18
-
integrity sha512-q/vlKIGNwzTLu+jCcvywgGrt+H/1P/oIRSD6mV4ln3hmlC+Aa34C7yfPI4+5bzW8pONyVXYS7SvXosy2dKKtWQ==
19
-
20
-
wmr@^1.2.0:
21
-
version "1.5.1"
22
-
resolved "https://registry.yarnpkg.com/wmr/-/wmr-1.5.1.tgz#f7630da86ff69eef935c7b8361230482d06bc880"
23
-
integrity sha512-CW+cMxaTFsCgBmcQXeuvTJ0rM5+IhOOA0f8xAZdfre63TNlEoOw0T3G8bKYRV7N+SaveF3siRFis96rSVnyMuQ==