@devup-ui/webpack-plugin 1.0.40 → 1.0.42
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 +166 -0
- package/dist/plugin.cjs +1 -1
- package/dist/plugin.js +44 -48
- package/package.json +4 -4
package/README.md
ADDED
|
@@ -0,0 +1,166 @@
|
|
|
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
|
+
<h3 align="center">
|
|
6
|
+
Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor
|
|
7
|
+
</h3>
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
<div>
|
|
12
|
+
<img src='https://img.shields.io/npm/v/@devup-ui/react'>
|
|
13
|
+
<img src='https://img.shields.io/bundlephobia/minzip/@devup-ui/react'>
|
|
14
|
+
<img alt="Github Checks" src="https://badgen.net/github/checks/dev-five-git/devup-ui"/>
|
|
15
|
+
<img alt="Apache-2.0 License" src="https://img.shields.io/github/license/dev-five-git/devup-ui"/>
|
|
16
|
+
<a href="https://www.npmjs.com/package/@devup-ui/react">
|
|
17
|
+
<img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@devup-ui/react.svg?style=flat"/>
|
|
18
|
+
</a>
|
|
19
|
+
<a href="https://badgen.net/github/stars/dev-five-git/devup-ui">
|
|
20
|
+
<img alt="Github Stars" src="https://badgen.net/github/stars/dev-five-git/devup-ui" />
|
|
21
|
+
</a>
|
|
22
|
+
<a href="https://discord.gg/8zjcGc7cWh">
|
|
23
|
+
<img alt="Discord" src="https://img.shields.io/discord/1321362173619994644.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2" />
|
|
24
|
+
</a>
|
|
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"/>
|
|
27
|
+
</a>
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
English | [한국어](README_ko.md)
|
|
33
|
+
|
|
34
|
+
## Install
|
|
35
|
+
|
|
36
|
+
```sh
|
|
37
|
+
npm install @devup-ui/react
|
|
38
|
+
|
|
39
|
+
# on next.js
|
|
40
|
+
npm install @devup-ui/next-plugin
|
|
41
|
+
|
|
42
|
+
# on vite
|
|
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
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
## Features
|
|
53
|
+
|
|
54
|
+
- Preprocessor
|
|
55
|
+
- Zero Config
|
|
56
|
+
- Zero FOUC
|
|
57
|
+
- Zero Runtime
|
|
58
|
+
- RSC Support
|
|
59
|
+
- Must not use JavaScript, client-side logic, or hybrid solutions
|
|
60
|
+
- Support Library mode
|
|
61
|
+
- Zero Cost Dynamic Theme Support based on CSS Variables
|
|
62
|
+
- Theme with Typing
|
|
63
|
+
- Smallest size, fastest speed
|
|
64
|
+
|
|
65
|
+
## Inspirations
|
|
66
|
+
|
|
67
|
+
- Styled System
|
|
68
|
+
- Chakra UI
|
|
69
|
+
- Theme UI
|
|
70
|
+
- Vanilla Extract
|
|
71
|
+
- Rainbow Sprinkles
|
|
72
|
+
- Kuma UI
|
|
73
|
+
|
|
74
|
+
## Comparison Benchmarks
|
|
75
|
+
|
|
76
|
+
Next.js Build Time and Build Size (github action - ubuntu-latest)
|
|
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 |
|
|
89
|
+
|
|
90
|
+
## How it works
|
|
91
|
+
|
|
92
|
+
Devup UI is a CSS in JS preprocessor that does not require runtime.
|
|
93
|
+
Devup UI eliminates the performance degradation of the browser through the CSS in JS preprocessor.
|
|
94
|
+
We develop a preprocessor that considers all grammatical cases.
|
|
95
|
+
|
|
96
|
+
```tsx
|
|
97
|
+
const before = <Box bg="red" />
|
|
98
|
+
|
|
99
|
+
const after = <div className="d0" />
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
Variables are fully supported.
|
|
103
|
+
|
|
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
|
+
)
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
Various expressions and responsiveness are also fully supported.
|
|
118
|
+
|
|
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
|
+
)
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
Support Theme with Typing
|
|
133
|
+
|
|
134
|
+
`devup.json`
|
|
135
|
+
|
|
136
|
+
```json
|
|
137
|
+
{
|
|
138
|
+
"theme": {
|
|
139
|
+
"colors": {
|
|
140
|
+
"default": {
|
|
141
|
+
"text": "#000"
|
|
142
|
+
},
|
|
143
|
+
"dark": {
|
|
144
|
+
"text": "white"
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
```tsx
|
|
152
|
+
// Type Safe
|
|
153
|
+
<Text color="$text" />
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
Support Responsive And Pseudo Selector
|
|
157
|
+
|
|
158
|
+
You can use responsive and pseudo selector.
|
|
159
|
+
|
|
160
|
+
```tsx
|
|
161
|
+
// Responsive with Selector
|
|
162
|
+
const box = <Box _hover={{ bg: ['red', 'blue'] }} />
|
|
163
|
+
|
|
164
|
+
// Same
|
|
165
|
+
const box = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
|
|
166
|
+
```
|
package/dist/plugin.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("node:fs"),l=require("node:fs/promises"),c=require("node:module"),o=require("node:path"),i=require("@devup-ui/wasm");var p=typeof document<"u"?document.currentScript:null;class f{options;sheetFile;classMapFile;fileMapFile;constructor({package:s="@devup-ui/react",devupFile:n="devup.json",distDir:t="df",cssDir:a=o.resolve(t,"devup-ui"),watch:r=!1,debug:u=!1,include:h=[],singleCss:d=!1}={}){this.options={package:s,cssDir:a,devupFile:n,distDir:t,watch:r,debug:u,include:h,singleCss:d},this.sheetFile=o.join(this.options.distDir,"sheet.json"),this.classMapFile=o.join(this.options.distDir,"classMap.json"),this.fileMapFile=o.join(this.options.distDir,"fileMap.json")}writeDataFiles(){try{const s=e.existsSync(this.options.devupFile)?e.readFileSync(this.options.devupFile,"utf-8"):void 0;if(s){i.registerTheme(JSON.parse(s)?.theme??{});const n=i.getThemeInterface(this.options.package,"DevupThemeColors","DevupThemeTypography","DevupTheme");n&&e.writeFileSync(o.join(this.options.distDir,"theme.d.ts"),n,{encoding:"utf-8"})}else i.registerTheme({})}catch(s){console.error(s),i.registerTheme({})}e.existsSync(this.options.cssDir)||e.mkdirSync(this.options.cssDir,{recursive:!0}),this.options.watch&&e.writeFileSync(o.join(this.options.cssDir,"devup-ui.css"),i.getCss(null,!1))}apply(s){i.setDebug(this.options.debug);const n=e.existsSync(this.options.devupFile);if(e.existsSync(this.options.distDir)||e.mkdirSync(this.options.distDir,{recursive:!0}),e.writeFileSync(o.join(this.options.distDir,".gitignore"),"*","utf-8"),this.options.watch)try{e.existsSync(this.sheetFile)&&i.importSheet(JSON.parse(e.readFileSync(this.sheetFile,"utf-8"))),e.existsSync(this.classMapFile)&&i.importClassMap(JSON.parse(e.readFileSync(this.classMapFile,"utf-8"))),e.existsSync(this.fileMapFile)&&i.importFileMap(JSON.parse(e.readFileSync(this.fileMapFile,"utf-8")))}catch(t){console.error(t),i.importSheet({}),i.importClassMap({}),i.importFileMap({})}if(this.writeDataFiles(),this.options.watch){let t=null;s.hooks.watchRun.tapPromise("DevupUIWebpackPlugin",async()=>{if(n){const r=(await l.stat(this.options.devupFile)).mtimeMs;t&&t!==r&&this.writeDataFiles(),t=r}})}n&&s.hooks.afterCompile.tap("DevupUIWebpackPlugin",t=>{t.fileDependencies.add(o.resolve(this.options.devupFile))}),s.options.plugins.push(new s.webpack.DefinePlugin({"process.env.DEVUP_UI_DEFAULT_THEME":JSON.stringify(i.getDefaultTheme())})),this.options.watch||s.hooks.done.tapPromise("DevupUIWebpackPlugin",async t=>{t.hasErrors()||await l.writeFile(o.join(this.options.cssDir,"devup-ui.css"),i.getCss(null,!1),"utf-8")}),s.options.module.rules.push({test:/\.(tsx|ts|js|mjs|jsx)$/,exclude:new RegExp(`node_modules(?!.*(${["@devup-ui",...this.options.include].join("|").replaceAll("/","[\\/\\\\_]")})([\\/\\\\.]|$))`),enforce:"pre",use:[{loader:c.createRequire(typeof document>"u"?require("url").pathToFileURL(__filename).href:p&&p.tagName.toUpperCase()==="SCRIPT"&&p.src||new URL("plugin.cjs",document.baseURI).href).resolve("@devup-ui/webpack-plugin/loader"),options:{package:this.options.package,cssDir:this.options.cssDir,sheetFile:this.sheetFile,classMapFile:this.classMapFile,fileMapFile:this.fileMapFile,watch:this.options.watch,singleCss:this.options.singleCss}}]},{test:this.options.cssDir,enforce:"pre",use:[{loader:c.createRequire(typeof document>"u"?require("url").pathToFileURL(__filename).href:p&&p.tagName.toUpperCase()==="SCRIPT"&&p.src||new URL("plugin.cjs",document.baseURI).href).resolve("@devup-ui/webpack-plugin/css-loader"),options:{watch:this.options.watch}}]})}}exports.DevupUIWebpackPlugin=f;
|
package/dist/plugin.js
CHANGED
|
@@ -1,94 +1,90 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
import { existsSync as t, readFileSync as a, writeFileSync as r, mkdirSync as h } from "node:fs";
|
|
2
|
+
import { stat as w, writeFile as M } from "node:fs/promises";
|
|
3
|
+
import { createRequire as c } from "node:module";
|
|
4
|
+
import { resolve as u, join as o } from "node:path";
|
|
5
|
+
import { registerTheme as l, getThemeInterface as k, getCss as f, setDebug as y, importSheet as d, importClassMap as m, importFileMap as F, getDefaultTheme as T } from "@devup-ui/wasm";
|
|
6
|
+
class U {
|
|
7
|
+
options;
|
|
8
|
+
sheetFile;
|
|
9
|
+
classMapFile;
|
|
10
|
+
fileMapFile;
|
|
10
11
|
constructor({
|
|
11
12
|
package: s = "@devup-ui/react",
|
|
12
13
|
devupFile: e = "devup.json",
|
|
13
14
|
distDir: i = "df",
|
|
14
|
-
cssDir:
|
|
15
|
-
watch:
|
|
16
|
-
debug:
|
|
17
|
-
include:
|
|
18
|
-
singleCss:
|
|
15
|
+
cssDir: n = u(i, "devup-ui"),
|
|
16
|
+
watch: p = !1,
|
|
17
|
+
debug: D = !1,
|
|
18
|
+
include: v = [],
|
|
19
|
+
singleCss: g = !1
|
|
19
20
|
} = {}) {
|
|
20
|
-
a(this, "options");
|
|
21
|
-
a(this, "sheetFile");
|
|
22
|
-
a(this, "classMapFile");
|
|
23
|
-
a(this, "fileMapFile");
|
|
24
21
|
this.options = {
|
|
25
22
|
package: s,
|
|
26
|
-
cssDir:
|
|
23
|
+
cssDir: n,
|
|
27
24
|
devupFile: e,
|
|
28
25
|
distDir: i,
|
|
29
|
-
watch:
|
|
30
|
-
debug:
|
|
31
|
-
include:
|
|
32
|
-
singleCss:
|
|
26
|
+
watch: p,
|
|
27
|
+
debug: D,
|
|
28
|
+
include: v,
|
|
29
|
+
singleCss: g
|
|
33
30
|
}, this.sheetFile = o(this.options.distDir, "sheet.json"), this.classMapFile = o(this.options.distDir, "classMap.json"), this.fileMapFile = o(this.options.distDir, "fileMap.json");
|
|
34
31
|
}
|
|
35
32
|
writeDataFiles() {
|
|
36
|
-
var s;
|
|
37
33
|
try {
|
|
38
|
-
const
|
|
39
|
-
if (
|
|
40
|
-
|
|
41
|
-
const
|
|
34
|
+
const s = t(this.options.devupFile) ? a(this.options.devupFile, "utf-8") : void 0;
|
|
35
|
+
if (s) {
|
|
36
|
+
l(JSON.parse(s)?.theme ?? {});
|
|
37
|
+
const e = k(
|
|
42
38
|
this.options.package,
|
|
43
39
|
"DevupThemeColors",
|
|
44
40
|
"DevupThemeTypography",
|
|
45
41
|
"DevupTheme"
|
|
46
42
|
);
|
|
47
|
-
|
|
43
|
+
e && r(
|
|
48
44
|
o(this.options.distDir, "theme.d.ts"),
|
|
49
|
-
|
|
45
|
+
e,
|
|
50
46
|
{
|
|
51
47
|
encoding: "utf-8"
|
|
52
48
|
}
|
|
53
49
|
);
|
|
54
50
|
} else
|
|
55
|
-
|
|
56
|
-
} catch (
|
|
57
|
-
console.error(
|
|
51
|
+
l({});
|
|
52
|
+
} catch (s) {
|
|
53
|
+
console.error(s), l({});
|
|
58
54
|
}
|
|
59
|
-
t(this.options.cssDir) ||
|
|
55
|
+
t(this.options.cssDir) || h(this.options.cssDir, { recursive: !0 }), this.options.watch && r(
|
|
60
56
|
o(this.options.cssDir, "devup-ui.css"),
|
|
61
|
-
|
|
57
|
+
f(null, !1)
|
|
62
58
|
);
|
|
63
59
|
}
|
|
64
60
|
apply(s) {
|
|
65
|
-
|
|
61
|
+
y(this.options.debug);
|
|
66
62
|
const e = t(this.options.devupFile);
|
|
67
|
-
if (t(this.options.distDir) ||
|
|
63
|
+
if (t(this.options.distDir) || h(this.options.distDir, { recursive: !0 }), r(o(this.options.distDir, ".gitignore"), "*", "utf-8"), this.options.watch)
|
|
68
64
|
try {
|
|
69
|
-
t(this.sheetFile) &&
|
|
65
|
+
t(this.sheetFile) && d(JSON.parse(a(this.sheetFile, "utf-8"))), t(this.classMapFile) && m(JSON.parse(a(this.classMapFile, "utf-8"))), t(this.fileMapFile) && F(JSON.parse(a(this.fileMapFile, "utf-8")));
|
|
70
66
|
} catch (i) {
|
|
71
|
-
console.error(i),
|
|
67
|
+
console.error(i), d({}), m({}), F({});
|
|
72
68
|
}
|
|
73
69
|
if (this.writeDataFiles(), this.options.watch) {
|
|
74
70
|
let i = null;
|
|
75
71
|
s.hooks.watchRun.tapPromise("DevupUIWebpackPlugin", async () => {
|
|
76
72
|
if (e) {
|
|
77
|
-
const
|
|
78
|
-
i && i !==
|
|
73
|
+
const p = (await w(this.options.devupFile)).mtimeMs;
|
|
74
|
+
i && i !== p && this.writeDataFiles(), i = p;
|
|
79
75
|
}
|
|
80
76
|
});
|
|
81
77
|
}
|
|
82
78
|
e && s.hooks.afterCompile.tap("DevupUIWebpackPlugin", (i) => {
|
|
83
|
-
i.fileDependencies.add(
|
|
79
|
+
i.fileDependencies.add(u(this.options.devupFile));
|
|
84
80
|
}), s.options.plugins.push(
|
|
85
81
|
new s.webpack.DefinePlugin({
|
|
86
|
-
"process.env.DEVUP_UI_DEFAULT_THEME": JSON.stringify(
|
|
82
|
+
"process.env.DEVUP_UI_DEFAULT_THEME": JSON.stringify(T())
|
|
87
83
|
})
|
|
88
84
|
), this.options.watch || s.hooks.done.tapPromise("DevupUIWebpackPlugin", async (i) => {
|
|
89
|
-
i.hasErrors() || await
|
|
85
|
+
i.hasErrors() || await M(
|
|
90
86
|
o(this.options.cssDir, "devup-ui.css"),
|
|
91
|
-
|
|
87
|
+
f(null, !1),
|
|
92
88
|
"utf-8"
|
|
93
89
|
);
|
|
94
90
|
}), s.options.module.rules.push(
|
|
@@ -100,7 +96,7 @@ class N {
|
|
|
100
96
|
enforce: "pre",
|
|
101
97
|
use: [
|
|
102
98
|
{
|
|
103
|
-
loader:
|
|
99
|
+
loader: c(import.meta.url).resolve(
|
|
104
100
|
"@devup-ui/webpack-plugin/loader"
|
|
105
101
|
),
|
|
106
102
|
options: {
|
|
@@ -120,7 +116,7 @@ class N {
|
|
|
120
116
|
enforce: "pre",
|
|
121
117
|
use: [
|
|
122
118
|
{
|
|
123
|
-
loader:
|
|
119
|
+
loader: c(import.meta.url).resolve(
|
|
124
120
|
"@devup-ui/webpack-plugin/css-loader"
|
|
125
121
|
),
|
|
126
122
|
options: {
|
|
@@ -133,5 +129,5 @@ class N {
|
|
|
133
129
|
}
|
|
134
130
|
}
|
|
135
131
|
export {
|
|
136
|
-
|
|
132
|
+
U as DevupUIWebpackPlugin
|
|
137
133
|
};
|
package/package.json
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"webpack"
|
|
19
19
|
],
|
|
20
20
|
"type": "module",
|
|
21
|
-
"version": "1.0.
|
|
21
|
+
"version": "1.0.42",
|
|
22
22
|
"publishConfig": {
|
|
23
23
|
"access": "public"
|
|
24
24
|
},
|
|
@@ -45,17 +45,17 @@
|
|
|
45
45
|
"dist"
|
|
46
46
|
],
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@devup-ui/wasm": "1.0.
|
|
48
|
+
"@devup-ui/wasm": "1.0.41"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"@devup-ui/wasm": "*"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
|
-
"vite": "^7.1.
|
|
54
|
+
"vite": "^7.1.7",
|
|
55
55
|
"@types/webpack": "^5.28.5",
|
|
56
56
|
"vite-plugin-dts": "^4.5.4",
|
|
57
57
|
"vitest": "^3.2.4",
|
|
58
|
-
"typescript": "^5.9.
|
|
58
|
+
"typescript": "^5.9.3"
|
|
59
59
|
},
|
|
60
60
|
"scripts": {
|
|
61
61
|
"lint": "eslint",
|