Skip to content

Commit 278d7f9

Browse files
owjs3901owjs3901
committed
Update readme
1 parent 5931964 commit 278d7f9

Some content is hidden

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

65 files changed

+6612
-2084
lines changed

‎.changeset/blue-cheetahs-bow.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@devup-ui/wasm": patch
3+
---
4+
5+
Add script

‎.changeset/config.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@
88
"baseBranch": "main",
99
"updateInternalDependencies": "patch",
1010
"ignore": [
11-
"next-example",
12-
"vite-example",
13-
"vite-lib-example"
11+
"*-example",
12+
"*-benchmark"
1413
]
1514
}

‎README.md‎

Lines changed: 99 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,50 @@
1-
# WIP
2-
3-
Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor
4-
5-
# Devup UI
1+
<div align="center">
2+
<img src="https://raw.githubusercontent.com/dev-five-git/devup-ui/main/media/logo.svg" alt="Devup UI logo" width="300" />
3+
</div>
4+
5+
6+
<h3 align="center">
7+
Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor
8+
</h3>
9+
10+
---
11+
12+
<iframe src="https://github.com/sponsors/dev-five-git/button" title="Sponsor dev-five-git" height="32" width="114" style="border: 0; border-radius: 6px;"></iframe>
13+
14+
<div>
15+
<img src='https://img.shields.io/npm/v/@devup-ui/react'>
16+
<img src='https://img.shields.io/bundlephobia/minzip/@devup-ui/react'>
17+
<img alt="Github Checks" src="https://badgen.net/github/checks/dev-five-git/devup-ui"/>
18+
<img alt="Apache-2.0 License" src="https://img.shields.io/github/license/dev-five-git/devup-ui"/>
19+
<a href="https://www.npmjs.com/package/@devup-ui/react">
20+
<img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@devup-ui/react.svg?style=flat"/>
21+
</a>
22+
<a href="https://badgen.net/github/stars/dev-five-git/devup-ui">
23+
<img alt="Github Stars" src="https://badgen.net/github/stars/dev-five-git/devup-ui" />
24+
</a>
25+
<a href="https://discord.gg/BtNffusw">
26+
<img alt="Discord" src="https://img.shields.io/discord/1321362173619994644.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2" />
27+
</a>
28+
<a href="https://codecov.io/gh/dev-five-git/devup-ui" >
29+
<img src="https://codecov.io/gh/dev-five-git/devup-ui/graph/badge.svg?token=8I5GMB2X5B"/>
30+
</a>
31+
</div>
32+
33+
---
634

735
English | [한국어](README_ko.md)
836

937
## Install
1038

11-
> npm install @devup-ui/react
39+
```sh
40+
npm install @devup-ui/react
41+
42+
# on next.js
43+
npm install @devup-ui/next-plugin
44+
45+
# on vite
46+
npm install @devup-ui/vite-plugin
47+
```
1248

1349
## Features
1450

@@ -18,6 +54,10 @@ English | [한국어](README_ko.md)
1854
- Zero Runtime
1955
- RSC Support
2056
- Must not use JavaScript, client-side logic, or hybrid solutions
57+
- Support Library mode
58+
- Zero Cost Dynamic Theme Support based on CSS Variables
59+
- Theme with Typing
60+
- Smallest size, fastest speed
2161

2262
## Inspirations
2363

@@ -28,7 +68,17 @@ English | [한국어](README_ko.md)
2868
- Rainbow Sprinkles
2969
- Kuma UI
3070

31-
## Goal
71+
## Comparison Benchmarks
72+
73+
Next.js Build Time and Build Size (AMD Ryzen 9 9950X, 128GB RAM, Windows 11)
74+
75+
| Library | Build Time | Build Size |
76+
|-----------|------------|--------------|
77+
| kuma-ui | 20.933s | 57,295,073b |
78+
| chakra-ui | 36.961s | 129,527,610b |
79+
| devup-ui | 15.162s | 48,047,678b |
80+
81+
## How it works
3282

3383
Devup UI is a CSS in JS preprocessor that does not require runtime.
3484
Devup UI eliminates the performance degradation of the browser through the CSS in JS preprocessor.
@@ -38,7 +88,7 @@ We develop a preprocessor that considers all grammatical cases.
3888
// Before
3989
<Box bg={"red"}/>
4090
// After
41-
<Box className={"bg-red-0"}/>
91+
<Box className={"d0"}/>
4292
```
4393

4494
Variables are fully supported.
@@ -47,8 +97,8 @@ Variables are fully supported.
4797
// Before
4898
<Box bg={colorVariable}/>
4999
// After
50-
<Box className={"bg-0"} style={{
51-
"--bg-0": colorVariable
100+
<Box className={"d0"} style={{
101+
"--d0": colorVariable
52102
}}/>
53103
```
54104

@@ -58,7 +108,44 @@ Various expressions and responsiveness are also fully supported.
58108
// Before
59109
<Box bg={["red", "blue", a > b ? "yellow" : variable]}/>
60110
// After
61-
<Box className={`bg-red-0 bg-blue-1 ${a > b ? "bg-yellow-2" : "bg-2"}`} style={{
62-
"--bg-2": variable
111+
<Box className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
112+
"--d2": variable
63113
}}/>
64114
```
115+
116+
Support Theme with Typing
117+
118+
`devup.json`
119+
120+
```json
121+
{
122+
"theme": {
123+
"colors": {
124+
"default": {
125+
"text": "#000"
126+
},
127+
"dark": {
128+
"text": "white"
129+
}
130+
}
131+
}
132+
}
133+
```
134+
135+
```jsx
136+
// Type Safe
137+
<Text color="$text"/>
138+
```
139+
140+
Support Responsive And Pseudo Selector
141+
142+
You can use responsive and pseudo selector.
143+
144+
```jsx
145+
// Responsive with Selector
146+
<Box _hover={{bg: ["red", "blue"]}}/>
147+
148+
// Same
149+
<Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
150+
151+
```

‎README_ko.md‎

Lines changed: 98 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,50 @@
1-
Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor
1+
<div align="center">
2+
<img src="https://raw.githubusercontent.com/dev-five-git/devup-ui/main/media/logo.svg" alt="Devup UI logo" width="300" />
3+
</div>
24

3-
# Devup UI
5+
6+
<h3 align="center">
7+
Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor
8+
</h3>
9+
10+
---
11+
12+
<iframe src="https://github.com/sponsors/dev-five-git/button" title="Sponsor dev-five-git" height="32" width="114" style="border: 0; border-radius: 6px;"></iframe>
13+
14+
<div>
15+
<img src='https://img.shields.io/npm/v/@devup-ui/react'>
16+
<img src='https://img.shields.io/bundlephobia/minzip/@devup-ui/react'>
17+
<img alt="Github Checks" src="https://badgen.net/github/checks/dev-five-git/devup-ui"/>
18+
<img alt="Apache-2.0 License" src="https://img.shields.io/github/license/dev-five-git/devup-ui"/>
19+
<a href="https://www.npmjs.com/package/@devup-ui/react">
20+
<img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@devup-ui/react.svg?style=flat"/>
21+
</a>
22+
<a href="https://badgen.net/github/stars/dev-five-git/devup-ui">
23+
<img alt="Github Stars" src="https://badgen.net/github/stars/dev-five-git/devup-ui" />
24+
</a>
25+
<a href="https://discord.gg/BtNffusw">
26+
<img alt="Discord" src="https://img.shields.io/discord/1321362173619994644.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2" />
27+
</a>
28+
<a href="https://codecov.io/gh/dev-five-git/devup-ui" >
29+
<img src="https://codecov.io/gh/dev-five-git/devup-ui/graph/badge.svg?token=8I5GMB2X5B"/>
30+
</a>
31+
</div>
32+
33+
---
434

535
[English](README.md) | 한국어
636

7-
## Install
37+
## 설치
38+
39+
```sh
40+
npm install @devup-ui/react
841

9-
> npm install @devup-ui/react
42+
# on next.js
43+
npm install @devup-ui/next-plugin
44+
45+
# on vite
46+
npm install @devup-ui/vite-plugin
47+
```
1048

1149
## 기능
1250

@@ -17,6 +55,9 @@ Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor
1755
- RSC Support - Devup UI 는 RSC를 지원합니다.
1856
- Must not use JavaScript, client-side logic, or hybrid solutions - Devup UI 는 JavaScript, 클라이언트 사이드 로직, 혼합 솔루션을 사용하지
1957
않습니다.
58+
- 라이브러리 모드 지원
59+
- 타이핑 지원되는 테마
60+
- 가장 작은 크기, 가장 빠른 속도
2061

2162
## 영감
2263

@@ -27,7 +68,17 @@ Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor
2768
- Rainbow Sprinkles - 전체적인 시스템적인 부분에서 영감을 받았습니다.
2869
- Kuma UI - 문법적인 부분과 방법론에서 영감을 받았습니다.
2970

30-
## 목표
71+
## 비교 벤치마크
72+
73+
Next.js Build Time and Build Size (AMD Ryzen 9 9950X, 128GB RAM, Windows 11)
74+
75+
| Library | 빌드 시간 | 빌드 사이즈 |
76+
|-----------|---------|--------------|
77+
| kuma-ui | 20.933s | 57,295,073b |
78+
| chakra-ui | 36.961s | 129,527,610b |
79+
| devup-ui | 15.162s | 48,047,678b |
80+
81+
## 작동 원리
3182

3283
Devup UI는 런타임이 필요 없는 CSS in JS 전처리기입니다.
3384
Devup UI는 CSS in JS 전처리기를 통하여 브라우저의 성능 저하를 원천적으로 제거합니다.
@@ -37,7 +88,7 @@ Devup UI는 CSS in JS 전처리기를 통하여 브라우저의 성능 저하를
3788
// Before
3889
<Box bg={"red"}/>
3990
// After
40-
<Box className={"bg-red-0"}/>
91+
<Box className={"d0"}/>
4192
```
4293

4394
변수 사용도 완전히 지원합니다.
@@ -46,8 +97,8 @@ Devup UI는 CSS in JS 전처리기를 통하여 브라우저의 성능 저하를
4697
// Before
4798
<Box bg={colorVariable}/>
4899
// After
49-
<Box className={"bg-0"} style={{
50-
"--bg-0": colorVariable
100+
<Box className={"d0"} style={{
101+
"--d0": colorVariable
51102
}}/>
52103
```
53104

@@ -57,7 +108,44 @@ Devup UI는 CSS in JS 전처리기를 통하여 브라우저의 성능 저하를
57108
// Before
58109
<Box bg={["red", "blue", a > b ? "yellow" : variable]}/>
59110
// After
60-
<Box className={`bg-red-0 bg-blue-1 ${a > b ? "bg-yellow-2" : "bg-2"}`} style={{
61-
"--bg-2": variable
111+
<Box className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
112+
"--d2": variable
62113
}}/>
63114
```
115+
116+
타이핑이 되는 테마를 지원합니다.
117+
118+
`devup.json`
119+
120+
```json
121+
{
122+
"theme": {
123+
"colors": {
124+
"default": {
125+
"text": "#000"
126+
},
127+
"dark": {
128+
"text": "white"
129+
}
130+
}
131+
}
132+
}
133+
```
134+
135+
```jsx
136+
// Type Safe
137+
<Text color="$text"/>
138+
```
139+
140+
반응형과 가상 선택자도 지원합니다.
141+
142+
물론 동시 사용도 가능합니다.
143+
144+
```jsx
145+
// Responsive with Selector
146+
<Box _hover={{bg: ["red", "blue"]}}/>
147+
148+
// Same
149+
<Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
150+
151+
```

‎benchmark.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/* eslint-disable no-console */
2+
import { existsSync, readdirSync, rmSync, statSync } from 'node:fs'
3+
import { join } from 'node:path'
4+
5+
import { execSync } from 'child_process'
6+
7+
function clearBuildFile() {
8+
if (existsSync('./benchmark/next-kuma-ui/.next'))
9+
rmSync('./benchmark/next-kuma-ui/.next', {
10+
recursive: true,
11+
force: true,
12+
})
13+
if (existsSync('./benchmark/next-chakra-ui/.next'))
14+
rmSync('./benchmark/next-chakra-ui/.next', {
15+
recursive: true,
16+
force: true,
17+
})
18+
if (existsSync('./benchmark/next-devup-ui/.next'))
19+
rmSync('./benchmark/next-devup-ui/.next', {
20+
recursive: true,
21+
force: true,
22+
})
23+
}
24+
25+
function checkDirSize(path) {
26+
let totalSize = 0
27+
28+
function calculateSize(directory) {
29+
const entries = readdirSync(directory)
30+
for (const entry of entries) {
31+
const entryPath = join(directory, entry)
32+
if (statSync(entryPath).isDirectory()) {
33+
calculateSize(entryPath) // 재귀적으로 하위 폴더 크기 계산
34+
} else {
35+
const stats = statSync(entryPath)
36+
totalSize += stats.size // 파일 크기 합산
37+
}
38+
}
39+
}
40+
41+
calculateSize(path)
42+
return totalSize
43+
}
44+
45+
clearBuildFile()
46+
47+
console.time('kuma-ui')
48+
execSync('pnpm -F next-kuma-ui-benchmark build', {
49+
stdio: 'inherit',
50+
})
51+
console.timeEnd('kuma-ui')
52+
console.info('kuma-ui', checkDirSize('./benchmark/next-kuma-ui/.next'))
53+
54+
console.time('chakra-ui')
55+
execSync('pnpm -F next-chakra-ui-benchmark build', {
56+
stdio: 'inherit',
57+
})
58+
console.timeEnd('chakra-ui')
59+
console.info('chakra-ui', checkDirSize('./benchmark/next-chakra-ui/.next'))
60+
61+
console.time('devup-ui')
62+
execSync('pnpm -F next-devup-ui-benchmark build', {
63+
stdio: 'inherit',
64+
})
65+
console.timeEnd('devup-ui')
66+
console.info('devup-ui', checkDirSize('./benchmark/next-devup-ui/.next'))

0 commit comments

Comments
 (0)