@devup-ui/react 1.0.18 → 1.0.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
<img src="https://raw.githubusercontent.com/dev-five-git/devup-ui/main/media/logo.svg" alt="Devup UI logo" width="300" />
|
|
3
3
|
</div>
|
|
4
4
|
|
|
5
|
-
|
|
6
5
|
<h3 align="center">
|
|
7
6
|
Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor
|
|
8
7
|
</h3>
|
|
@@ -23,8 +22,8 @@
|
|
|
23
22
|
<a href="https://discord.gg/8zjcGc7cWh">
|
|
24
23
|
<img alt="Discord" src="https://img.shields.io/discord/1321362173619994644.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2" />
|
|
25
24
|
</a>
|
|
26
|
-
<a href="https://codecov.io/gh/dev-five-git/devup-ui" >
|
|
27
|
-
<img src="https://codecov.io/gh/dev-five-git/devup-ui/graph/badge.svg?token=8I5GMB2X5B"/>
|
|
25
|
+
<a href="https://codecov.io/gh/dev-five-git/devup-ui" >
|
|
26
|
+
<img src="https://codecov.io/gh/dev-five-git/devup-ui/graph/badge.svg?token=8I5GMB2X5B"/>
|
|
28
27
|
</a>
|
|
29
28
|
</div>
|
|
30
29
|
|
|
@@ -42,6 +41,12 @@ npm install @devup-ui/next-plugin
|
|
|
42
41
|
|
|
43
42
|
# on vite
|
|
44
43
|
npm install @devup-ui/vite-plugin
|
|
44
|
+
|
|
45
|
+
# on rsbuild
|
|
46
|
+
npm install @devup-ui/rsbuild-plugin
|
|
47
|
+
|
|
48
|
+
# on webpack
|
|
49
|
+
npm install @devup-ui/webpack-plugin
|
|
45
50
|
```
|
|
46
51
|
|
|
47
52
|
## Features
|
|
@@ -68,13 +73,19 @@ npm install @devup-ui/vite-plugin
|
|
|
68
73
|
|
|
69
74
|
## Comparison Benchmarks
|
|
70
75
|
|
|
71
|
-
Next.js Build Time and Build Size (
|
|
76
|
+
Next.js Build Time and Build Size (github action - ubuntu-latest)
|
|
72
77
|
|
|
73
|
-
| Library
|
|
74
|
-
|
|
75
|
-
|
|
|
76
|
-
|
|
|
77
|
-
|
|
|
78
|
+
| Library | Version | Build Time | Build Size |
|
|
79
|
+
| ---------------------- | ------- | ---------- | ----------------- |
|
|
80
|
+
| tailwindcss | 4.1.13 | 20.22s | 57,415,796 bytes |
|
|
81
|
+
| styleX | 0.15.4 | 38.97s | 76,257,820 bytes |
|
|
82
|
+
| vanilla-extract | 1.17.4 | 20.09s | 59,366,237 bytes |
|
|
83
|
+
| kuma-ui | 1.5.9 | 21.61s | 67,422,085 bytes |
|
|
84
|
+
| panda-css | 1.3.1 | 22.01s | 62,431,065 bytes |
|
|
85
|
+
| chakra-ui | 3.27.0 | 29.99s | 210,122,493 bytes |
|
|
86
|
+
| mui | 7.3.2 | 22.21s | 94,231,958 bytes |
|
|
87
|
+
| devup-ui(per-file css) | 1.0.18 | 18.23s | 57,440,953 bytes |
|
|
88
|
+
| devup-ui(single css) | 1.0.18 | 18.35s | 57,409,008 bytes |
|
|
78
89
|
|
|
79
90
|
## How it works
|
|
80
91
|
|
|
@@ -82,30 +93,40 @@ Devup UI is a CSS in JS preprocessor that does not require runtime.
|
|
|
82
93
|
Devup UI eliminates the performance degradation of the browser through the CSS in JS preprocessor.
|
|
83
94
|
We develop a preprocessor that considers all grammatical cases.
|
|
84
95
|
|
|
85
|
-
```
|
|
86
|
-
const before = <Box bg=
|
|
96
|
+
```tsx
|
|
97
|
+
const before = <Box bg="red" />
|
|
87
98
|
|
|
88
|
-
const after = <div className="d0"/>
|
|
99
|
+
const after = <div className="d0" />
|
|
89
100
|
```
|
|
90
101
|
|
|
91
102
|
Variables are fully supported.
|
|
92
103
|
|
|
93
|
-
```
|
|
94
|
-
const before = <Box bg={colorVariable}/>
|
|
95
|
-
|
|
96
|
-
const after =
|
|
97
|
-
|
|
98
|
-
|
|
104
|
+
```tsx
|
|
105
|
+
const before = <Box bg={colorVariable} />
|
|
106
|
+
|
|
107
|
+
const after = (
|
|
108
|
+
<div
|
|
109
|
+
className="d0"
|
|
110
|
+
style={{
|
|
111
|
+
'--d0': colorVariable,
|
|
112
|
+
}}
|
|
113
|
+
/>
|
|
114
|
+
)
|
|
99
115
|
```
|
|
100
116
|
|
|
101
117
|
Various expressions and responsiveness are also fully supported.
|
|
102
118
|
|
|
103
|
-
```
|
|
104
|
-
const before = <Box bg={[
|
|
105
|
-
|
|
106
|
-
const after =
|
|
107
|
-
|
|
108
|
-
}}
|
|
119
|
+
```tsx
|
|
120
|
+
const before = <Box bg={['red', 'blue', a > b ? 'yellow' : variable]} />
|
|
121
|
+
|
|
122
|
+
const after = (
|
|
123
|
+
<div
|
|
124
|
+
className={`d0 d1 ${a > b ? 'd2' : 'd3'}`}
|
|
125
|
+
style={{
|
|
126
|
+
'--d2': variable,
|
|
127
|
+
}}
|
|
128
|
+
/>
|
|
129
|
+
)
|
|
109
130
|
```
|
|
110
131
|
|
|
111
132
|
Support Theme with Typing
|
|
@@ -127,19 +148,19 @@ Support Theme with Typing
|
|
|
127
148
|
}
|
|
128
149
|
```
|
|
129
150
|
|
|
130
|
-
```
|
|
151
|
+
```tsx
|
|
131
152
|
// Type Safe
|
|
132
|
-
<Text color="$text"/>
|
|
153
|
+
<Text color="$text" />
|
|
133
154
|
```
|
|
134
155
|
|
|
135
156
|
Support Responsive And Pseudo Selector
|
|
136
157
|
|
|
137
158
|
You can use responsive and pseudo selector.
|
|
138
159
|
|
|
139
|
-
```
|
|
160
|
+
```tsx
|
|
140
161
|
// Responsive with Selector
|
|
141
|
-
const box = <Box _hover={{bg: [
|
|
162
|
+
const box = <Box _hover={{ bg: ['red', 'blue'] }} />
|
|
142
163
|
|
|
143
164
|
// Same
|
|
144
|
-
const box = <Box _hover={[{bg:
|
|
165
|
+
const box = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
|
|
145
166
|
```
|
|
@@ -27,9 +27,19 @@ export interface DevupComponentProps<T extends React.ElementType> extends DevupP
|
|
|
27
27
|
}
|
|
28
28
|
export type DevupComponentBaseProps<T extends React.ElementType> = DevupElementTypeProps<T> & DevupComponentAdditionalProps<T>;
|
|
29
29
|
export type DevupElementTypeProps<T extends React.ElementType> = T extends string ? React.ComponentProps<T> : object;
|
|
30
|
-
export type DevupComponentAdditionalProps<T extends React.ElementType, P extends React.ComponentProps<T> = React.ComponentProps<T>> = Partial<P> extends P ? {
|
|
31
|
-
props?: P
|
|
30
|
+
export type DevupComponentAdditionalProps<T extends React.ElementType, P extends React.ComponentProps<T> = React.ComponentProps<T>> = (Partial<P> extends P ? {
|
|
31
|
+
props?: FilterChildren<P>;
|
|
32
32
|
} : {
|
|
33
|
-
props: P
|
|
34
|
-
}
|
|
33
|
+
props: FilterChildren<P>;
|
|
34
|
+
}) & (P extends {
|
|
35
|
+
children: infer U;
|
|
36
|
+
} ? {
|
|
37
|
+
children: U;
|
|
38
|
+
} : P extends {
|
|
39
|
+
children?: infer U;
|
|
40
|
+
} ? {
|
|
41
|
+
children?: U;
|
|
42
|
+
} : object);
|
|
43
|
+
type FilterChildren<T> = Omit<T, 'children'>;
|
|
44
|
+
export {};
|
|
35
45
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/props/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAC1D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAA;AAC1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAClD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AACvD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AACzD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAA;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAA;AAC9C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAA;AACtD,OAAO,KAAK,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAA;AAC7E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAA;AAE9C,MAAM,WAAW,mBACf,SAAQ,sBAAsB,EAC5B,kBAAkB,EAClB,oBAAoB,EACpB,qBAAqB,EACrB,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACtB,oBAAoB,EACpB,gBAAgB,EAChB,gBAAgB;CAAG;AAEvB,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAClC;KACG,CAAC,IAAI,MAAM,UAAU,CAAC,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;CACzD,EACD,mBAAmB,CACpB,CAAA;AAED,MAAM,WAAW,UAAW,SAAQ,gBAAgB,EAAE,kBAAkB;CAAG;AAE3E,MAAM,WAAW,mBACf,SAAQ,UAAU,EAChB,uBAAuB;CAAG;AAE9B,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,CAC9D,SAAQ,mBAAmB;IAC3B,EAAE,CAAC,EAAE,CAAC,CAAA;IACN,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAA;CAC/C;AACD,MAAM,MAAM,uBAAuB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAC7D,qBAAqB,CAAC,CAAC,CAAC,GAAG,6BAA6B,CAAC,CAAC,CAAC,CAAA;AAE7D,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAC3D,CAAC,SAAS,MAAM,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,MAAM,CAAA;AAErD,MAAM,MAAM,6BAA6B,CACvC,CAAC,SAAS,KAAK,CAAC,WAAW,EAC3B,CAAC,SAAS,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/props/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -2,5 +2,6 @@ import { Property } from 'csstype';
|
|
|
2
2
|
import { ResponsiveValue } from '../responsive-value';
|
|
3
3
|
export interface DevupUiPositionProps {
|
|
4
4
|
pos?: ResponsiveValue<Property.Position>;
|
|
5
|
+
positioning?: ResponsiveValue<'top' | 'right' | 'bottom' | 'left' | 'top-right' | 'top-left' | 'bottom-left' | 'bottom-right'>;
|
|
5
6
|
}
|
|
6
7
|
//# sourceMappingURL=position.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../src/types/props/position.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAE1D,MAAM,WAAW,oBAAoB;IACnC,GAAG,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../src/types/props/position.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAE1D,MAAM,WAAW,oBAAoB;IACnC,GAAG,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;IACxC,WAAW,CAAC,EAAE,eAAe,CACzB,KAAK,GACL,OAAO,GACP,QAAQ,GACR,MAAM,GACN,WAAW,GACX,UAAU,GACV,aAAa,GACb,cAAc,CACjB,CAAA;CACF"}
|
package/package.json
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"css-in-js-framework",
|
|
17
17
|
"react"
|
|
18
18
|
],
|
|
19
|
-
"version": "1.0.
|
|
19
|
+
"version": "1.0.20",
|
|
20
20
|
"type": "module",
|
|
21
21
|
"publishConfig": {
|
|
22
22
|
"access": "public"
|
|
@@ -40,9 +40,9 @@
|
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"rollup-plugin-preserve-directives": "^0.4.0",
|
|
43
|
-
"vite": "^7.1.
|
|
43
|
+
"vite": "^7.1.7",
|
|
44
44
|
"vite-plugin-dts": "^4.5.4",
|
|
45
|
-
"typescript": "^5.9.
|
|
45
|
+
"typescript": "^5.9.3",
|
|
46
46
|
"@types/react": "^19"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|