Skip to content
This repository was archived by the owner on Sep 21, 2025. It is now read-only.

Commit 28889e4

Browse files
BrunoBernardinoBrunoBernardino
committed
Update dependencies and make React not need Babel.
1 parent b891796 commit 28889e4

File tree

16 files changed

+148
-80
lines changed

16 files changed

+148
-80
lines changed

‎.dvmrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
2.1.9
1+
2.3.6

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ It does include some examples for building complex apps, like:
1919
3. Hydration in `/ssr` (when some JS is dynamically created to update the client state once it's finished the initial load) with vanilla JS
2020
4. Using Just-In-Time-transpiled-TypeScript (inspired by [ts-serve](https://github.com/ayame113/ts-serve)) [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) for dynamic client-side updates in `/web-component` ([it doesn't work on Safari](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is))
2121
5. Using Just-In-Time-transpiled-SASS for `SCSS` → `CSS` output
22-
6. React with SSR and hydration in `/react` (and `/react/5`, for example)
22+
6. React with SSR and hydration (and no build step) in `/react` (and `/react/5`, for example)
2323
7. Also, if you want to see things like Google Sign-in or GitHub Sign-in, running PostgreSQL database migrations, filling PDFs, sending emails with attachments, dynamic sitemaps, or uploading files to AWS S3, I've also published a [Deno Code Examples repo](https://github.com/BrunoBernardino/deno-code-examples).
2424

2525
You can build pretty complex and complicated things without frameworks or loads of dependencies, but if you need a framework, I'd suggest you try [fresh](https://fresh.deno.dev/) to still be able to enjoy a lot of Deno. It's pretty nice.

‎components/Counter.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ export default function Counter({ initialValue = 0 }: { initialValue?: number })
88
}, [count]);
99

1010
return (
11-
<div>
12-
<button onClick={() => setCount(count + 1)}>
11+
<>
12+
<button onClick={() => setCount(count + 1)} type='button'>
1313
This button has been clicked {count} time{count === 1 ? '' : 's'}!
1414
</button>
15-
</div>
15+
</>
1616
);
1717
}

‎components/header.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export default function header(currentPath: string) {
55
<header>
66
<h1>
77
<a href="/">
8-
<img alt="Logo: Snail with stylized letters 'BRN'" src="/public/images/logo.svg" width="120" />
8+
<img alt="A half-full circle" src="/public/images/logo.svg" width="50" />
99
</a>
1010
</h1>
1111
<nav>

‎deno.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,13 @@
3131
"/": "./",
3232
"./": "./",
3333

34-
"react": "https://esm.sh/react@18.3.1",
35-
"react/": "https://esm.sh/react@18.3.1/",
36-
"react-dom": "https://esm.sh/react-dom@18.3.1",
37-
"react-dom/": "https://esm.sh/react-dom@18.3.1/",
34+
"react": "https://esm.sh/react@19.1.0",
35+
"react/": "https://esm.sh/react@19.1.0/",
36+
"react-dom": "https://esm.sh/react-dom@19.1.0",
37+
"react-dom/": "https://esm.sh/react-dom@19.1.0/",
3838

39-
"std/assert/equals": "jsr:@std/[email protected].11/equals",
40-
"std/http/file-server": "jsr:@std/[email protected].13/file-server",
39+
"std/assert/equals": "jsr:@std/[email protected].13/equals",
40+
"std/http/file-server": "jsr:@std/[email protected].18/file-server",
4141
"deno/emit": "jsr:@deno/[email protected]"
4242
}
4343
}

‎lib/utils.ts‎

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -32,43 +32,41 @@ function basicLayout(htmlContent: string, { currentPath, titlePrefix, descriptio
3232
}
3333

3434
return html`
35-
<!doctype html>
35+
<!DOCTYPE html>
3636
3737
<html lang="en">
38-
<head>
39-
<meta charset="utf-8">
40-
<meta name="viewport" content="width=device-width, initial-scale=1">
41-
42-
<title>${title}</title>
43-
<meta name="description" content="${description || defaultDescription}">
44-
<meta name="author" content="Bruno Bernardino">
45-
46-
<link rel="icon" href="/public/images/favicon.png" type="image/png">
47-
<link rel="apple-touch-icon" href="/public/images/favicon.png">
48-
49-
<link rel="stylesheet" href="/public/css/style.css">
50-
<link rel="stylesheet" href="/public/scss/style.scss">
51-
</head>
52-
53-
<body>
54-
${loading()}
55-
<section class="wrapper">
56-
${header(currentPath)}
57-
${htmlContent}
58-
${footer()}
59-
</section>
60-
<script src="/public/js/script.js" defer></script>
61-
</body>
38+
<head>
39+
<meta charset="utf-8">
40+
<meta name="viewport" content="width=device-width, initial-scale=1">
41+
42+
<title>${title}</title>
43+
<meta name="description" content="${description || defaultDescription}">
44+
<meta name="author" content="Bruno Bernardino">
45+
46+
<link rel="icon" href="/public/images/favicon.png" type="image/png">
47+
<link rel="apple-touch-icon" href="/public/images/favicon.png">
48+
49+
<link rel="stylesheet" href="/public/css/style.css">
50+
<link rel="stylesheet" href="/public/scss/style.scss">
51+
</head>
52+
53+
<body>
54+
${loading()}
55+
<section class="wrapper">
56+
${header(currentPath)} ${htmlContent} ${footer()}
57+
</section>
58+
<script src="/public/js/script.js" defer></script>
59+
</body>
6260
</html>
63-
`;
61+
`;
6462
}
6563

6664
export function basicLayoutResponse(htmlContent: string, options: BasicLayoutOptions, status?: number) {
6765
return new Response(basicLayout(htmlContent, options), {
6866
headers: {
6967
'content-type': 'text/html; charset=utf-8',
7068
'content-security-policy':
71-
`default-src 'self'; child-src 'none'; img-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' https://unpkg.com/@babel/[email protected]/babel.min.js https://unpkg.com/[email protected]/umd/react.production.min.js https://unpkg.com/[email protected]/umd/react-dom.production.min.js;`,
69+
`default-src 'self'; child-src 'none'; img-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' https://esm.sh;`,
7270
'x-frame-options': 'DENY',
7371
},
7472
status,

‎pages/404.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ export function pageContent() {
1010
<h1 class="main-title">
1111
404 - Not Found
1212
</h1>
13-
<p style="text-align: center; margin-top: 3rem;">The page you are looking for does not exist. <a href="/">Go home</a>.</p>
13+
<p style="text-align: center; margin-top: 3rem;">
14+
The page you are looking for does not exist. <a href="/">Go home</a>.
15+
</p>
1416
</section>
1517
`;
1618

‎pages/dynamic.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ function generateHtmlContent() {
2020
This page is dynamic (wooooo)!
2121
</h1>
2222
<p>
23-
That means you can press the button to set its value to a random positive integer (up to 10000), fetched via an API route.
23+
That means you can press the button to set its value to a random positive integer (up to 10000), fetched via an API
24+
route.
2425
</p>
2526
<p>
2627
It uses vanilla JavaScript.
@@ -30,7 +31,7 @@ function generateHtmlContent() {
3031
Click me to get a random value!
3132
</button>
3233
</section>
33-
34+
3435
<script src="/public/js/dynamic.js" defer></script>
3536
`;
3637

‎pages/form.ts‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -27,19 +27,19 @@ export async function pageAction(request: Request, match: URLPatternResult) {
2727

2828
const errorHtml = errorMessage
2929
? html`
30-
<section class="error">
31-
<h3>Error!</h3>
32-
<p>${errorMessage}</p>
33-
</section>
34-
`
30+
<section class="error">
31+
<h3>Error!</h3>
32+
<p>${errorMessage}</p>
33+
</section>
34+
`
3535
: '';
3636
const successHtml = !errorMessage
3737
? html`
38-
<section class="success">
39-
<h3>Success!</h3>
40-
<p>You submitted "${escapeHtml(submittedRandomValue)}" successfully.</p>
41-
</section>
42-
`
38+
<section class="success">
39+
<h3>Success!</h3>
40+
<p>You submitted "${escapeHtml(submittedRandomValue)}" successfully.</p>
41+
</section>
42+
`
4343
: '';
4444

4545
const htmlContent = generateHtmlContent(errorHtml || successHtml, errorMessage ? submittedRandomValue : '');
@@ -75,9 +75,9 @@ function generateHtmlContent(notificationHtml = '', randomValue = '') {
7575
<form action="/form" method="POST">
7676
<fieldset>
7777
<label for="random-value">Random Value</label>
78-
<input id="random-value" name="random-value" type="text" placeholder="something" value="${
79-
escapeHtml(randomValue)
80-
}" />
78+
<input id="random-value" name="random-value" type="text" placeholder="something" value="${escapeHtml(
79+
randomValue,
80+
)}" />
8181
</fieldset>
8282
<button type="submit">Submit it!</button>
8383
</form>

‎pages/index.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@ export function pageContent() {
1111
Welcome to a Simple Deno Website Boilerplate!
1212
</h1>
1313
<p>
14-
This is a simple boilerplate for a Deno website, deployed
15-
with Deno Deploy.
14+
This is a simple boilerplate for a Deno website, deployed with Deno Deploy.
1615
</p>
1716
<p>Click the button, have some fun.</p>
1817
<button id="counter-button">

0 commit comments

Comments
 (0)