defunkt/forge
1
0
Fork 0
Code Issues Pull Requests Activity

tweak

Browse Source
This commit is contained in:
Chris Wanstrath 2025-12-29 15:14:40 -08:00
parent 718dc3b73d
commit 85844c9b44
2 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
README.md
View File

@ -15,13 +15,13 @@ self-contained TSX components out of discrete parts.
- Styles are global and open - anything can override anything anywhere. - Styles are global and open - anything can override anything anywhere.
- No IDE-friendly link between the class name in markup and its definition. - No IDE-friendly link between the class name in markup and its definition.
- All techniques are patterns a human must know and follow, not APIs. - Organizational techniques are patterns a human must know and follow, not APIs.
- Errors happen silently. - Errors happen silently.
## forge solutions ## forge solutions
- All styles are local to your TSX components. - All styles are local to your TSX components.
- Styles defined using TS typing. - Styles are defined using TS typing.
- Component styles are made up of independently styled "Parts". - Component styles are made up of independently styled "Parts".
- "Variants" replace inline styles with typed, declarative parameters. - "Variants" replace inline styles with typed, declarative parameters.
- Style composition is deterministic. - Style composition is deterministic.
@ -35,7 +35,12 @@ self-contained TSX components out of discrete parts.
```tsx ```tsx
import { define } from "forge" import { define } from "forge"
export const Button = define("button", { export const Container = define("Container", {
width: 600,
margin: '0 auto',
})
export const Button = define({
base: "button", base: "button",
padding: 20, padding: 20,
@ -43,7 +48,9 @@ export const Button = define("button", {
}) })
// Usage // Usage
<Container>
<Button>Click me</Button> <Button>Click me</Button>
</Container>
``` ```
### variants ### variants
@ -51,7 +58,7 @@ export const Button = define("button", {
```tsx ```tsx
import { define } from "forge" import { define } from "forge"
export const Button = define("button", { export const Button = define({
base: "button", base: "button",
padding: 20, padding: 20,

2
src/index.tsx
View File

@ -308,7 +308,7 @@ function anonName(def: TagDef): string {
const base = (def.base ?? 'div') const base = (def.base ?? 'div')
const count = (anonComponents[base] ??= 1) const count = (anonComponents[base] ??= 1)
anonComponents[base] += 1 anonComponents[base] += 1
return tagName(base) + String(count) return tagName(base) + (count === 1 ? '' : String(count))
} }
// a => Anchor, nav => Nav // a => Anchor, nav => Nav