Skip to content

Commit b406993

Browse files
fusionstringsfusionstrings
authored
Refactor (#3)
* rewrite * Add standard web components HTML file and update routing * Refactor standard web components to enhance shadow DOM handling and implement signal-based state management for Counter and Button elements * Remove unused index.html file to streamline project structure * Add Document component and update routing; replace Home with Document in main.tsx * refactor: remove unused components and streamline imports - Deleted unused Preact components: ButtonPreact, CounterPreact, Button, Counter, and their associated templates. - Simplified main.ts by removing unnecessary imports and routes. - Updated standard-web-components.html to include a form for the counter element. - Removed importmap.js and wrangler.jsonc as they are no longer needed. - Cleaned up CSS files related to buttons and counters. - Adjusted types/elements.ts to reflect the removal of unused elements. * feat: update button component to increment counter on click - Modified Button component to use a local handleClick function that increments the counter value. - Removed the onClick prop in favor of the new functionality. chore: update deno.json to use unstable-bundle flag - Changed the bundle command to include the --unstable-bundle flag for compatibility. docs: add link to Preact Web Components in index.html - Added a new navigation link for Preact Web Components in the main index.html file. * feat: enhance element-counter and element-button with hydrate attribute for improved hydration support
1 parent ca8be9c commit b406993

327 files changed

Lines changed: 1331 additions & 46556 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎build/main.js‎

Lines changed: 1 addition & 1209 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

templates/button.css renamed to components/button.css

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,4 @@ button {
99
font-size: 16px;
1010
margin: 4px 2px;
1111
cursor: pointer;
12-
}
13-
body{
14-
background-color: #b02fc7;
1512
}

‎components/button.tsx‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,23 @@
11
/** @jsxImportSource preact */
2-
import type { JSX } from "preact";
2+
import type { ComponentChildren } from "preact";
3+
import { count } from "#signals/counter";
34

45
function Button(
5-
{ onClick, children = "Click Me !" }: {
6-
onClick?: JSX.MouseEventHandler<HTMLButtonElement> | undefined;
7-
children?: JSX.Element | string;
6+
{ children = "Increment" }: {
7+
children?: ComponentChildren;
88
},
99
) {
10+
const handleClick = () => {
11+
count.value++;
12+
};
13+
1014
return (
11-
<button type="button" onClick={onClick}>
12-
<slot>{children}</slot>
13-
</button>
15+
<>
16+
<link rel="stylesheet" href="/components/button.css" />
17+
<button type="button" onClick={handleClick}>
18+
{children}
19+
</button>
20+
</>
1421
);
1522
}
1623

‎components/button2.tsx‎

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

‎components/counter.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
element-counter2 {
1+
div {
22
display: block;
33
font-family: system-ui, sans-serif;
44
border: 2px solid #ccc;
@@ -7,4 +7,5 @@ element-counter2 {
77
margin: 16px 0;
88
text-align: center;
99
background-color: #f9f9f9;
10+
font-size: xx-large;
1011
}

‎components/counter.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
/** @jsxImportSource preact */
22
import { count } from "#signals/counter";
3+
34
function Counter() {
45
return (
5-
<div>
6-
{count}
7-
</div>
6+
<>
7+
<link rel="stylesheet" href="/components/counter.css" />
8+
<div>
9+
{count}
10+
</div>
11+
</>
812
);
913
}
1014

‎components/counter2.tsx‎

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

‎components/document.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/** @jsxImportSource preact */
2+
3+
import { Button } from "#components/button";
4+
import { Counter } from "#components/counter";
5+
6+
function Document() {
7+
return (
8+
<html lang="en">
9+
<head>
10+
<meta charset="UTF-8" />
11+
<meta
12+
name="viewport"
13+
content="width=device-width, initial-scale=1.0"
14+
/>
15+
<title>Elements</title>
16+
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
17+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
18+
<link rel="shortcut icon" href="/favicon.ico" />
19+
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
20+
<link rel="manifest" href="/site.webmanifest" />
21+
<script type="module" src="/dom/main.js"></script>
22+
</head>
23+
<body>
24+
<header>
25+
<nav>
26+
<ul>
27+
<li><a href="/">Home</a></li>
28+
<li><a href="/standard-web-components">Standard Web Components</a></li>
29+
</ul>
30+
</nav>
31+
</header>
32+
<main>
33+
<h1>Preact Web Components Study</h1>
34+
35+
<form onSubmit={(event) => event.preventDefault()}>
36+
<fieldset>
37+
<legend>Counter Form</legend>
38+
<p>
39+
Current count: <element-counter hydrate>
40+
<template shadowrootmode="open"><Counter>0</Counter></template>
41+
</element-counter>
42+
</p>
43+
<element-button hydrate><template shadowrootmode="open"><Button>Increment</Button></template>Add</element-button>
44+
</fieldset>
45+
</form>
46+
</main>
47+
</body>
48+
</html>
49+
)
50+
}
51+
52+
export { Document }

‎components/dsd-button.tsx‎

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

‎components/dsd-counter.tsx‎

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

0 commit comments

Comments
 (0)