mirror of
https://github.com/kou029w/_.git
synced 2025-01-30 22:08:02 +00:00
create wmr
This commit is contained in:
parent
4a4a56578c
commit
014d0d133f
13 changed files with 229 additions and 0 deletions
4
wmr/.gitignore
vendored
Normal file
4
wmr/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
.cache
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
stats.html
|
||||||
21
wmr/package.json
Normal file
21
wmr/package.json
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
{
|
||||||
|
"scripts": {
|
||||||
|
"start": "wmr",
|
||||||
|
"build": "wmr build --prerender",
|
||||||
|
"serve": "wmr serve"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"extends": "preact"
|
||||||
|
},
|
||||||
|
"alias": {
|
||||||
|
"react": "preact/compat",
|
||||||
|
"react-dom": "preact/compat"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"preact": "^10.5.12",
|
||||||
|
"preact-iso": "^1.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"wmr": "^1.2.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
22
wmr/public/header.js
Normal file
22
wmr/public/header.js
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
import { useLocation } from "preact-iso/router";
|
||||||
|
|
||||||
|
export default function Header() {
|
||||||
|
const { url } = useLocation();
|
||||||
|
return (
|
||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
<a href="/">Home</a>
|
||||||
|
<a href="/about">About</a>
|
||||||
|
<a href="/error">Error</a>
|
||||||
|
</nav>
|
||||||
|
<label>
|
||||||
|
URL:
|
||||||
|
<input
|
||||||
|
readonly
|
||||||
|
value={url}
|
||||||
|
ref={(c) => c && (c.size = c.value.length)}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
15
wmr/public/index.html
Normal file
15
wmr/public/index.html
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>WMR App</title>
|
||||||
|
<meta name="description" content="WMR App" />
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
|
<link rel="icon" href="data:" />
|
||||||
|
<link rel="preload" as="script" href="/index.js" crossorigin />
|
||||||
|
<link rel="stylesheet" href="/style.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script type="module" src="/index.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
32
wmr/public/index.js
Normal file
32
wmr/public/index.js
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
import hydrate from "preact-iso/hydrate";
|
||||||
|
import { LocationProvider, Router } from "preact-iso/router";
|
||||||
|
import lazy, { ErrorBoundary } from "preact-iso/lazy";
|
||||||
|
import Home from "./pages/home/index.js";
|
||||||
|
import NotFound from "./pages/_404.js";
|
||||||
|
import Header from "./header.js";
|
||||||
|
|
||||||
|
const About = lazy(() => import("./pages/about/index.js"));
|
||||||
|
|
||||||
|
export function App() {
|
||||||
|
return (
|
||||||
|
<LocationProvider>
|
||||||
|
<div class="app">
|
||||||
|
<Header />
|
||||||
|
<ErrorBoundary>
|
||||||
|
<Router>
|
||||||
|
<Home path="/" />
|
||||||
|
<About path="/about" />
|
||||||
|
<NotFound default />
|
||||||
|
</Router>
|
||||||
|
</ErrorBoundary>
|
||||||
|
</div>
|
||||||
|
</LocationProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
hydrate(<App />);
|
||||||
|
|
||||||
|
export async function prerender(data) {
|
||||||
|
const { default: prerender } = await import("preact-iso/prerender");
|
||||||
|
return await prerender(<App {...data} />);
|
||||||
|
}
|
||||||
8
wmr/public/pages/_404.js
Normal file
8
wmr/public/pages/_404.js
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
const NotFound = () => (
|
||||||
|
<section>
|
||||||
|
<h1>404: Not Found</h1>
|
||||||
|
<p>It's gone :(</p>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default NotFound;
|
||||||
11
wmr/public/pages/about/index.js
Normal file
11
wmr/public/pages/about/index.js
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
import styles from "./style.module.css";
|
||||||
|
|
||||||
|
const About = ({ query }) => (
|
||||||
|
<section class={styles.about}>
|
||||||
|
<h1>About</h1>
|
||||||
|
<p>A page all about this website.</p>
|
||||||
|
<pre>{JSON.stringify(query)}</pre>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default About;
|
||||||
3
wmr/public/pages/about/style.module.css
Normal file
3
wmr/public/pages/about/style.module.css
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
.about {
|
||||||
|
background: #dbcfe7;
|
||||||
|
}
|
||||||
24
wmr/public/pages/home/index.js
Normal file
24
wmr/public/pages/home/index.js
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
import styles from "./style.module.css";
|
||||||
|
import { useState } from "preact/hooks";
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
const [count, setCount] = useState(0);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<section class={styles.home}>
|
||||||
|
<h1>Home</h1>
|
||||||
|
<p>This is the home page.</p>
|
||||||
|
<>
|
||||||
|
<button style={{ width: 30 }} onClick={() => setCount(count - 1)}>
|
||||||
|
-
|
||||||
|
</button>
|
||||||
|
<output style={{ padding: 10 }}>Count: {count}</output>
|
||||||
|
<button style={{ width: 30 }} onClick={() => setCount(count + 1)}>
|
||||||
|
+
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
4
wmr/public/pages/home/style.module.css
Normal file
4
wmr/public/pages/home/style.module.css
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
.home {
|
||||||
|
background: #f6f6f6;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
45
wmr/public/style.css
Normal file
45
wmr/public/style.css
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-height: 100%;
|
||||||
|
font-family: system-ui, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
background: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
header > nav {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
header > nav a {
|
||||||
|
padding: 10px;
|
||||||
|
color: #673ab8;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
header > nav a:hover {
|
||||||
|
background-color: #f1e9ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
header > label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px;
|
||||||
|
color: #555;
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
header input {
|
||||||
|
border: none;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 2px 5px;
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app > section {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
17
wmr/tsconfig.json
Normal file
17
wmr/tsconfig.json
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"jsx": "preserve",
|
||||||
|
"jsxFactory": "preact.h",
|
||||||
|
"jsxFragmentFactory": "preact.Fragment",
|
||||||
|
"allowJs": true,
|
||||||
|
"checkJs": true,
|
||||||
|
"strict": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"target": "esnext",
|
||||||
|
"module": "esnext",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"downlevelIteration": true
|
||||||
|
}
|
||||||
|
}
|
||||||
23
wmr/yarn.lock
Normal file
23
wmr/yarn.lock
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
|
||||||
|
# yarn lockfile v1
|
||||||
|
|
||||||
|
|
||||||
|
fsevents@^2.1.3:
|
||||||
|
version "2.3.2"
|
||||||
|
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
|
||||||
|
integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
|
||||||
|
|
||||||
|
preact-iso@^1.0.0:
|
||||||
|
version "1.1.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/preact-iso/-/preact-iso-1.1.1.tgz#959656bfee479e6a8c6707753e84d4342f61c48b"
|
||||||
|
integrity sha512-/iG9YH2nlLf3DAEXxCxka6Mux32t2cZEgfbvkNnR9ZtK0yjDRBEHI1IJS6I1AtelAFuBvoD24Ua0sc7wdZb1vg==
|
||||||
|
|
||||||
|
preact@^10.5.12:
|
||||||
|
version "10.5.13"
|
||||||
|
resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.13.tgz#85f6c9197ecd736ce8e3bec044d08fd1330fa019"
|
||||||
|
integrity sha512-q/vlKIGNwzTLu+jCcvywgGrt+H/1P/oIRSD6mV4ln3hmlC+Aa34C7yfPI4+5bzW8pONyVXYS7SvXosy2dKKtWQ==
|
||||||
|
|
||||||
|
wmr@^1.2.0:
|
||||||
|
version "1.5.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/wmr/-/wmr-1.5.1.tgz#f7630da86ff69eef935c7b8361230482d06bc880"
|
||||||
|
integrity sha512-CW+cMxaTFsCgBmcQXeuvTJ0rM5+IhOOA0f8xAZdfre63TNlEoOw0T3G8bKYRV7N+SaveF3siRFis96rSVnyMuQ==
|
||||||
Loading…
Add table
Reference in a new issue