forked from
fogtype.com/_
プレイグラウンド、サンドボックス、使い捨てスクリプト置き場
create wmr
Kohei Watanabe
(Apr 20, 2021, 7:11 PM +0900)
014d0d13
4a4a5657
+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==