Skip to content

Commit 29c9605

Browse files
bdmacbdmac
authored
Update preact app to be node 19 compatible
1 parent 734268c commit 29c9605

File tree

18 files changed

+7113
-33088
lines changed

18 files changed

+7113
-33088
lines changed

‎package-lock.json‎

Lines changed: 6801 additions & 32904 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 36 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,38 @@
11
{
2-
"private": true,
3-
"name": "codespaces-preact",
4-
"version": "0.0.0",
5-
"license": "MIT",
6-
"scripts": {
7-
"build": "preact build",
8-
"serve": "sirv build --port 8080 --cors --single",
9-
"dev": "preact watch",
10-
"lint": "eslint src",
11-
"test": "jest"
12-
},
13-
"eslintConfig": {
14-
"extends": "preact",
15-
"ignorePatterns": [
16-
"build/"
17-
]
18-
},
19-
"devDependencies": {
20-
"enzyme": "^3.11.0",
21-
"enzyme-adapter-preact-pure": "^4.1.0",
22-
"eslint-config-preact": "^1.3.0",
23-
"jest-preset-preact": "^4.0.5",
24-
"preact-cli": "^3.4.4",
25-
"sirv-cli": "^2.0.2"
26-
},
27-
"dependencies": {
28-
"preact": "^10.11.3",
29-
"preact-render-to-string": "^5.2.6",
30-
"preact-router": "^4.1.0"
31-
},
32-
"jest": {
33-
"preset": "jest-preset-preact",
34-
"setupFiles": [
35-
"<rootDir>/tests/__mocks__/browserMocks.js",
36-
"<rootDir>/tests/__mocks__/setupTests.js"
37-
]
38-
}
2+
"private": true,
3+
"scripts": {
4+
"build": "preact build",
5+
"serve": "sirv build --port 8080 --cors --single",
6+
"dev": "preact watch",
7+
"lint": "eslint src",
8+
"test": "jest"
9+
},
10+
"eslintConfig": {
11+
"extends": "preact",
12+
"ignorePatterns": [
13+
"build/"
14+
]
15+
},
16+
"devDependencies": {
17+
"enzyme": "^3.11.0",
18+
"enzyme-adapter-preact-pure": "^4.0.0",
19+
"eslint": "^8.30.0",
20+
"eslint-config-preact": "^1.3.0",
21+
"jest": "^27.0.0",
22+
"jest-preset-preact": "^4.0.5",
23+
"preact-cli": "^4.0.0-next.1",
24+
"sirv-cli": "^2.0.2"
25+
},
26+
"dependencies": {
27+
"preact": "^10.11.3",
28+
"preact-render-to-string": "^5.2.6",
29+
"preact-router": "^3.2.1"
30+
},
31+
"jest": {
32+
"preset": "jest-preset-preact",
33+
"setupFiles": [
34+
"<rootDir>/tests/__mocks__/browserMocks.js",
35+
"<rootDir>/tests/__mocks__/setupTests.js"
36+
]
37+
}
3938
}

‎preact.config.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
1-
export default (config, env, helpers, options) => {
2-
if (!env.isProd) {
1+
/**
2+
* Function that mutates the original webpack config.
3+
* Supports asynchronous changes when a promise is returned (or it's an async function).
4+
* You can find more info here: https://github.com/preactjs/preact-cli#webpack
5+
*
6+
* @param {import('preact-cli').Config} config - original webpack config
7+
* @param {import('preact-cli').Env} env - current environment and options pass to the CLI
8+
* @param {import('preact-cli').Helpers} helpers - object with useful helpers for working with the webpack config
9+
*/
10+
export default (config, env, helpers) => {
11+
if (!env.isProd) {
312
// Let Webpack infer the protocol & host but insist we don't want a port
413
config.devServer.client.webSocketURL = 'auto://0.0.0.0/ws'
514
}

‎src/assets/preact-logo-inverse.svg‎

Lines changed: 14 additions & 0 deletions
Loading

‎src/assets/preact-logo.svg‎

Lines changed: 14 additions & 0 deletions
Loading

‎src/components/app.js‎

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

‎src/components/header/index.js‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
1-
import { h } from 'preact';
21
import { Link } from 'preact-router/match';
3-
import style from './style.css';
2+
import style from './style.module.css';
43

5-
const Header = () => (
6-
<header class={style.header}>
7-
<h1>Preact App</h1>
8-
<nav>
9-
<Link activeClassName={style.active} href="/">Home</Link>
10-
<Link activeClassName={style.active} href="/profile">Me</Link>
11-
<Link activeClassName={style.active} href="/profile/octocat">Octocat</Link>
12-
</nav>
13-
</header>
14-
);
15-
16-
export default Header;
4+
export function Header() {
5+
return (
6+
<header class={style.header}>
7+
<a href="/" class={style.logo}>
8+
<img src="../../assets/preact-logo-inverse.svg" alt="Preact Logo" height="32" width="32" />
9+
<h1>Preact CLI</h1>
10+
</a>
11+
<nav>
12+
<Link activeClassName={style.active} href="/">
13+
Home
14+
</Link>
15+
<Link activeClassName={style.active} href="/profile">
16+
Me
17+
</Link>
18+
<Link activeClassName={style.active} href="/profile/octocat">
19+
Octocat
20+
</Link>
21+
</nav>
22+
</header>
23+
);
24+
}

‎src/components/header/style.css‎

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

‎src/components/header/style.module.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
.header {
2+
position: fixed;
3+
left: 0;
4+
top: 0;
5+
6+
display: flex;
7+
justify-content: space-between;
8+
9+
width: 100%;
10+
height: 3.5rem;
11+
12+
background: #673ab8;
13+
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
14+
z-index: 50;
15+
}
16+
17+
.header a {
18+
display: inline-block;
19+
padding: 0 1rem;
20+
color: #fff;
21+
text-decoration: none;
22+
line-height: 3.5rem;
23+
}
24+
25+
.header a:hover,
26+
.header a:active {
27+
background: rgba(0, 0, 0, 0.2);
28+
}
29+
30+
.header a.logo {
31+
display: flex;
32+
align-items: center;
33+
padding: 0.5rem 1rem;
34+
}
35+
36+
.logo h1 {
37+
padding: 0 0.5rem;
38+
font-size: 1.5rem;
39+
line-height: 2rem;
40+
font-weight: 400;
41+
}
42+
43+
@media (max-width: 639px) {
44+
.logo h1 {
45+
display: none;
46+
}
47+
}
48+
49+
.header nav a.active {
50+
background: rgba(0, 0, 0, 0.4);
51+
}

‎src/index.js‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,24 @@
1-
import './style';
2-
import App from './components/app';
1+
import { Router } from 'preact-router';
32

4-
export default App;
3+
import { Header } from './components/header';
4+
5+
// Code-splitting is automated for `routes` directory
6+
import Home from './routes/home';
7+
import Profile from './routes/profile';
8+
9+
import './style/index.css';
10+
11+
export default function App() {
12+
return (
13+
<div id="app">
14+
<Header />
15+
<main>
16+
<Router>
17+
<Home path="/" />
18+
<Profile path="/profile/" user="me" />
19+
<Profile path="/profile/:user" />
20+
</Router>
21+
</main>
22+
</div>
23+
);
24+
}

0 commit comments

Comments
 (0)