Skip to content

Commit 9a6b0bd

Browse files
charlzyxcharlzyx
committed
refactor: 💡 error handler, and docs update
1 parent 2d44710 commit 9a6b0bd

39 files changed

+1166
-350
lines changed

‎.env

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ PORT=4567
44
CACHE_DIR=./.cache
55
# CACHE_MAX_SIZE=4
66
NPM_REGISTRY=https://registry.npmmirror.com/
7-
ESM_ORIGIN=http://bunpkg.com
7+
ESM_ORIGIN=https://bunpkg.com
88
# NPM_MAX_TGZ_SIZE=100
99
# NPM_AUTH_TOKEN=
1010
# JWT_SECRET=

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
/.pnp
66
.pnp.js
77
.cache/
8+
docs/dist
89

910
# testing
1011
/coverage

‎README.md

+221-26
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,251 @@
1-
# BUNPKG
1+
---
2+
layout: landing
3+
---
24

3-
> bunpkg is an alternative for, powered by bun! friendly for private deploy and file cache supported.
5+
import { HomePage } from 'vocs/components'
6+
import { MetaBrowser } from '../components/MetaBrowser'
7+
import { Codebox } from '../components/Codebox'
48

5-
## Diff unpkg
9+
<HomePage.Root>
10+
<HomePage.Tagline>bunpkg 是受到 [unpkg](https://unpkg.com) 启发而开发的一个 NPM CDN 加速服务器, <br />
11+
自部署更加友好, 并提供了额外本地文件缓存等功能</HomePage.Tagline>
12+
<HomePage.Tagline>bunpkg is an alternative for unpkg. <br />but friendly for self-host deploy and file cache supported </HomePage.Tagline>
13+
</HomePage.Root>
14+
15+
- 💎 本地文件缓存: 压缩包(tgz) 和访问过的文件会使用 LRU 策略进行缓存, 并使用 sqlite 进行持久化
16+
> Local File Cache: tarboll and visited file LRU cache, powered by sqlite
17+
- 🌈 支持私有仓库: 通过自定义的 `Authorization: Bearer ${TOKEN}` 来支持私有 NPM 仓库认证
18+
> Private Package Supported: Agent with npmAuthToken for private npm packages.
19+
- 🚀 运行在 [Bun](https:bun.sh) 环境中, 超快乐!
20+
> Powered by [Bun](https://bun.sh)! is fast!
21+
22+
## 演练场 LiveDemo
23+
24+
<MetaBrowser></MetaBrowser>
25+
26+
## 使用示例 Usages
27+
28+
### /npm/package@version/file
29+
30+
<Codebox title="加载托管在 npm 上的任意文件">
31+
https://bunpkg.com/npm/package@version/file
32+
</Codebox>
33+
34+
<Codebox title="举个例子">
35+
https://bunpkg.com/npm/[email protected]/dist/jquery.min.js
36+
</Codebox>
37+
38+
<Codebox title="版本简写: 使用 range 代替具体的版本">
39+
https://bunpkg.com/npm/[email protected]/dist/jquery.min.js
40+
https://bunpkg.com/npm/jquery@3/dist/jquery.min.js
41+
</Codebox>
42+
43+
<Codebox title="省略版本: 将会获取 @latest, 生产环境不推荐使用 ">
44+
https://bunpkg.com/npm/jquery/dist/jquery.min.js
45+
</Codebox>
46+
<Codebox title="省略文件名称: 会跟据 package.json 查找口文件, 生产环境不推荐使用">
47+
https://bunpkg.com/npm/jquery
48+
</Codebox>
49+
50+
### /meta/package@version
51+
52+
获取包的文件列表和对应版本的 package.json
53+
54+
<Codebox title="举个例子">
55+
https://bunpkg.com/meta/[email protected]
56+
https://bunpkg.com/meta/jquery@3
57+
https://bunpkg.com/meta/jquery
58+
</Codebox>
59+
60+
### /esm/package@version/file
61+
62+
!IMOPRTANT 这是一个非常实验性的功能，避免在生产环境中使用
63+
64+
如果不是 js 代码， 将会回退到 npm 版本
65+
66+
<Codebox title="使用 ESM 格式加载托管在 npm 上的文件">
67+
https://bunpkg.com/esm/package@version/file
68+
</Codebox>
69+
70+
<Codebox title="举个例子">
71+
https://bunpkg.com/esm/[email protected]/dist/index.mjs
72+
</Codebox>
73+
74+
<Codebox title="版本简写: 使用 range 代替具体的版本">
75+
https://bunpkg.com/esm/[email protected]/dist/index.mjs
76+
https://bunpkg.com/esm/ofetch@1/dist/index.mjs
77+
</Codebox>
78+
79+
<Codebox title="省略版本: 将会获取 @latest, 生产环境不推荐使用 ">
80+
https://bunpkg.com/esm/ofetch/dist/index.mjs
81+
</Codebox>
82+
83+
<Codebox title="省略文件名称: 会跟据 package.json 查找口文件, 生产环境不推荐使用">
84+
https://bunpkg.com/esm/ofetch
85+
</Codebox>
86+
87+
### 请求参数 Query Parameters
88+
89+
`?purge`
90+
91+
删除当前 url 路径的缓存
92+
<Codebox title="举个例子">
93+
https://bunpkg.com/esm/[email protected]/dist/index.mjs?purge
94+
</Codebox>
95+
96+
## 与 UNPKG 的对比
697

798
| feture | bunpkg | unpkg |
899
| ----------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | -------- |
9100
| 302 supported, example [npmmirror.com](https://registry.npmmirror.com/react/-/react-18.2.0.tgz) | ✅ | 🚫 |
10101
| Local File Cache | ✅ does nginx better, aha? | 🚫 |
11102
| private Authorization header | ✅ | 🚫 |
12-
| Browser UI | 🚫 | ✅ |
13103
| esm | ✅ by [Bun.Transpiler](https://bun.sh/docs/api/transpiler#scanimports) | ✅ babel |
14104

15-
## .env
105+
### HTTP 缓存表现 HTTP Cache Behavior
106+
107+
CDN 根据包含 npm 包版本的永久 URL 缓存文件。这是因为 npm 不允许包作者覆盖已经以相同版本号发布的不同包。
16108

17-
> maybe?: config file and persistence
109+
> The CDN caches files based on their permanent URL, which includes the npm package version. This works because npm does not allow package authors to overwrite a package that has already been published with a different one at the same version number.
110+
111+
浏览器被指示（通过 Cache-Control 标头）无限期（1 年）缓存资产。
112+
113+
> Browsers are instructed (via the Cache-Control header) to cache assets indefinitely (1 year).
114+
115+
未指定包版本号的 URL 会重定向到指定包版本号的 URL。如果未指定版本，这是最新版本，如果给出了 semver 版本，则是最大满意版本。重定向在 CDN 中缓存 10 分钟，在浏览器中缓存 1 分钟。
116+
117+
> URLs that do not specify a package version number redirect to one that does. This is the latest version when no version is specified, or the maxSatisfying version when a semver version is given. Redirects are cached for 10 minutes at the CDN, 1 minute in browsers.
118+
119+
如果您希望用户在您剪切新版本时能够使用最新版本，最好的策略是将版本号直接放在您的安装说明中的 URL 中。这也将更快地加载，因为我们不必解析最新版本并重定向它们。
120+
121+
> If you want users to be able to use the latest version when you cut a new release, the best policy is to put the version number in the URL directly in your installation instructions. This will also load more quickly because we won't have to resolve the latest version and redirect them.
122+
123+
### 磁盘缓存表现 Disk Cache Behavior
124+
125+
使用 CACHE_DIR=./cache 或重新映射 docker volumns /cache 来观察 tarboll 和文件缓存；sqlite 的文件缓存管理器，使用 LRU 算法；
126+
127+
> Use `CACHE_DIR=./cache` or remap docker volumns `/cache` to watch how tarboll and file cache; File Cache Manager by sqlite, with LRU algorithm;
128+
129+
tarboll 和文件对半共享的默认限制为 4Gib 。您可以通过配置更改它
130+
131+
> Default limit is `4Gib` for tarboll and files shared. Your Can change it by Config
132+
133+
## 配置项 Config
134+
135+
- .env
136+
137+
默认值
18138

19139
```bash
20-
NPM_REGISTRY_URL=https://registry.npmmirror.com/
21140
PORT=4567
22-
HOST_NAME=127.0.0.1
23-
CORS_ORIGIN=*
24-
ORIGIN=
25-
CACHE_DIR=/cache
26-
CACHE_GIB=4
27-
NPM_AUTH_TOKEN=
141+
# HOST=0.0.0.0
142+
# CORS_ORIGIN=*
143+
CACHE_DIR=./.cache
144+
# CACHE_MAX_SIZE=4
145+
NPM_REGISTRY=https://registry.npmmirror.com/
146+
ESM_ORIGIN=https://bunpkg.com
147+
# NPM_MAX_TGZ_SIZE=100
148+
# NPM_AUTH_TOKEN=
149+
# JWT_SECRET=
150+
```
151+
152+
- bun.config.ts
153+
154+
```ts
155+
import path from "node:path";
156+
import { cors } from "@elysiajs/cors";
157+
158+
export const BunPkgConfig = {
159+
/** 服务器相关 */
160+
server: {
161+
/**
162+
* 端口号
163+
* @default process.env.PORT || 4567
164+
*/
165+
port: 4567,
166+
/**
167+
* 主机名
168+
* @default process.env.HOST || '0.0.0.0'
169+
*/
170+
// host: "0.0.0.0",
171+
/**
172+
* 跨域配置
173+
* @default {origin: process.env.CORS_ORIGIN } || Paramaters<typeof cors[0]>
174+
* @docuemnt see more https://elysiajs.com/plugins/cors.html#config
175+
*/
176+
cors: {
177+
origin: "*",
178+
},
179+
},
180+
/** 缓存配置 */
181+
cache: {
182+
/**
183+
* 缓存硬盘占用空间最大值 (Gib)
184+
* @default process.env.CACHE_MAX_SIZE || 4
185+
*/
186+
maxSize: 4,
187+
/**
188+
* 磁盘缓存目录位置
189+
* @default process.env.CACHE_DIR || '/cache'
190+
*/
191+
dir: "/cache",
192+
},
193+
/** NPM 配置 */
194+
npm: {
195+
/**
196+
* 上游 NPM 源地址
197+
* @default process.env.NPM_REGISTRY || 'https://registry.npmjs.org/'
198+
*/
199+
registry: "https://registry.npmjs.org/",
200+
/**
201+
* 私有 npm 认证头
202+
* Authorization: Bearer ${authToken}
203+
*/
204+
// authToken: "",
205+
/**
206+
* 支持最大 npm tgz 压缩包尺寸 (mib)
207+
* @default 100 (Mib)
208+
* @default process.env.NPM_MAX_TGZ_SIZE || 100
209+
**/
210+
maxTgzSize: 100,
211+
},
212+
esm: {
213+
/**
214+
* ESM 前缀配置
215+
* @default process.env.ESM_ORIGIN
216+
*/
217+
origin: "",
218+
},
219+
/**
220+
* 是否开启 JWT 认证, 只有有当前配置项并添加了 secret 的情况下才会开启
221+
* seemore https://elysiajs.com/plugins/jwt.html
222+
*/
223+
jwt: {
224+
// /**
225+
// * 认证密钥
226+
// * @default process.env.JWT_SECRET
227+
// **/
228+
// secret: "",
229+
},
230+
};
28231
```
29232

30233
## docker
31234

32235
```bash
33-
# docker mode env is limited to
34-
# NPM_REGISTRY_URL=https://registry.npmmirror.com/
35-
# CORS_ORIGIN=*
36-
# ORIGIN=*
37-
# CACHE_GIB=4
38-
# NPM_AUTH_TOKEN=
39236
docker run -i -t -p 4567:4567 chaogpt/bunpkg
40-
docker run --env-file .env -i -t -p 4567:4567 -v /cache:./cache chaogpt/bunpkg
237+
docker run --env-file .env \
238+
-i -t -p 4567:4567 \
239+
-v /cache:./cache \
240+
-v bunpkg.config.ts:/app/bunpkg.config.ts chaogpt/bunpkg
41241
```
42242

43243
## Roadmap
44244

45245
- [x] Persistence Cache (by sqlite)
46-
- [] More Private Config , like [esm.sh](https://github.com/esm-dev/esm.sh/blob/main/config.example.jsonc)
246+
- [x] Browser UI
47247
- [] Live Config Manager
48248
- [] Data Statistics
49-
- [] Browser UI
50249

51250
## Dev
52251

@@ -56,10 +255,6 @@ bun dev
56255
# open http://localhost:4567
57256
```
58257

59-
## ScreenShot
60-
61-
![bunpkg](./bunpkg.png)
62-
63258
## Powered by
64259

65260
- [Elysia](https://elysiajs.com/)

‎bun.lockb

3 KB
Binary file not shown.

‎docs/components/Codebox/index.tsx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React, { useEffect, useRef, useState } from "react";
2+
import "./style.css";
3+
4+
const holder = "https://bunpkg.com";
5+
const relink = (div?: HTMLDivElement | null) => {
6+
if (!div) return;
7+
div.querySelectorAll("a").forEach((link) => {
8+
const is = link.href.startsWith(holder);
9+
if (is) {
10+
link.href = link.href.replace(holder, window.location.origin);
11+
link.innerHTML = link.innerHTML.replace(holder, window.location.origin);
12+
}
13+
});
14+
};
15+
16+
export const Codebox: React.FC<{ title: string; children: string }> = (
17+
props,
18+
) => {
19+
const [box, setBox] = useState<HTMLDivElement | null>(null);
20+
21+
useEffect(() => {
22+
relink(box);
23+
}, [box]);
24+
25+
return (
26+
<div ref={(dom) => setBox(dom)} className="code-box">
27+
<div className="code-title">{props.title}</div>
28+
<pre className="code-body">{props.children}</pre>
29+
</div>
30+
);
31+
};

‎docs/components/Codebox/style.css

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
2+
.code-box {
3+
border-radius: var(--vocs-borderRadius_4);
4+
color: var(--vocs-color_text2);
5+
font-family: var(--vocs-fontFamily_mono);
6+
overflow: hidden;
7+
}
8+
9+
.code-box .code-title {
10+
padding: var(--vocs-space_8) var(--vocs-space_22);
11+
background-color: var(--vocs-color_codeTitleBackground);
12+
}
13+
14+
.code-box .code-body {
15+
padding: var(--vocs-space_8) var(--vocs-space_22);
16+
background-color: var(--vocs-color_codeBlockBackground);
17+
}
18+
19+

‎docs/components/Flex.tsx

+11-2
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,24 @@ export const Flex: React.FC<
55
flex?: React.CSSProperties["flex"];
66
justify?: React.CSSProperties["justifyContent"];
77
align?: React.CSSProperties["alignItems"];
8+
center?: boolean;
89
className?: string;
910
}>
1011
> = (props) => {
1112
const flexProps: React.CSSProperties = useMemo(() => {
1213
return {
1314
display: "flex",
1415
flex: props.flex,
15-
justifyContent: props.justify,
16-
alignItems: props.align,
16+
justifyContent: props.justify
17+
? props.justify
18+
: props.center
19+
? "center"
20+
: undefined,
21+
alignItems: props.align
22+
? props.align
23+
: props.center
24+
? "center"
25+
: undefined,
1726
};
1827
}, [props]);
1928

0 commit comments

Comments
 (0)