Skip to content

Commit 56e72f1

Browse files
TechQueryTechQuery
committed
[refactor] add Async loading of Upstream page
[optimize] upgrade Upstream packages
1 parent f6bcb3b commit 56e72f1

7 files changed

Lines changed: 91 additions & 49 deletions

File tree

‎.npmrc‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎package.json‎

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,29 +20,28 @@
2020
"url": "https://github.com/EasyWebApp/EasyWebApp.github.io/issues"
2121
},
2222
"dependencies": {
23-
"boot-cell": "^1.3.0",
24-
"bootstrap-icons": "^1.1.0",
25-
"cell-router": "^2.0.1",
23+
"boot-cell": "^1.7.0",
24+
"cell-router": "^2.0.3",
2625
"classnames": "^2.2.6",
27-
"github-web-widget": "^3.0.0-beta.5",
26+
"github-web-widget": "^3.0.0-beta.8",
2827
"koajax": "^0.6.4",
29-
"marked": "^1.2.5",
28+
"marked": "^1.2.7",
3029
"prismjs": "^1.22.0",
31-
"web-cell": "^2.2.0",
32-
"web-utility": "^1.9.0"
30+
"web-cell": "^2.3.0-beta.4",
31+
"web-utility": "^2.2.1"
3332
},
3433
"devDependencies": {
35-
"@babel/core": "^7.12.7",
34+
"@babel/core": "^7.12.10",
3635
"@types/classnames": "^2.2.11",
3736
"autoprefixer": "^9.8.6",
38-
"husky": "^4.3.0",
39-
"less": "^3.12.2",
40-
"lint-staged": "^10.5.1",
37+
"husky": "^4.3.6",
38+
"less": "^4.0.0",
39+
"lint-staged": "^10.5.3",
4140
"parcel-bundler": "^1.12.4",
4241
"postcss-modules": "^3.2.2",
43-
"prettier": "^2.2.0",
44-
"typescript": "^4.1.2",
45-
"workbox-cli": "^4.3.1"
42+
"prettier": "^2.2.1",
43+
"typescript": "^4.1.3",
44+
"workbox-cli": "^6.0.2"
4645
},
4746
"prettier": {
4847
"tabWidth": 4,
@@ -63,7 +62,7 @@
6362
},
6463
"scripts": {
6564
"test": "lint-staged",
66-
"start": "workbox generateSW && parcel source/index.html --open",
65+
"start": "parcel source/index.html --open",
6766
"pack-dist": "parcel build source/index.html --public-url .",
6867
"pack-sw": "rm -f dist/sw.js.map && workbox generateSW",
6968
"build": "rm -rf dist/ && npm run pack-dist && npm run pack-sw"

‎source/index.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,14 @@ import { PageFrame } from './page';
55

66
const { serviceWorker } = window.navigator;
77

8-
serviceWorker
9-
?.register('/sw.js')
10-
.then(serviceWorkerUpdate)
11-
.then(worker => {
12-
if (window.confirm('检测到新版本，是否立即启用？'))
13-
worker.postMessage({ type: 'SKIP_WAITING' });
14-
});
8+
if (process.env.NODE_ENV !== 'development')
9+
serviceWorker
10+
?.register('/sw.js')
11+
.then(serviceWorkerUpdate)
12+
.then(worker => {
13+
if (window.confirm('检测到新版本，是否立即启用？'))
14+
worker.postMessage({ type: 'SKIP_WAITING' });
15+
});
1516

1617
serviceWorker?.addEventListener('controllerchange', () =>
1718
window.location.reload()

‎source/page/Main.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export function MainPage() {
5050
<p>让 Web 组件像细胞、蜂巢、元素一般简单而可靠</p>
5151

5252
<div className="mt-4">
53-
<Button className="mr-3" href="#Demo">
53+
<Button className="mr-3" color="primary" href="#Demo">
5454
在线体验
5555
</Button>
5656
<TooltipBox text="需先登录 GitHub">

‎source/page/Upstream.tsx‎

Lines changed: 44 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,50 @@
1-
import { createCell } from 'web-cell';
1+
import { component, mixin, createCell } from 'web-cell';
2+
import { EdgeEvent, EdgeDetector } from 'boot-cell/source/Content/EdgeDetector';
23
import { GithubIssue } from 'github-web-widget/source/Issue';
34

45
import { upstream } from './data';
56

6-
export function UpstreamPage() {
7-
return (
8-
<div className="container pt-5" id="Upstream">
9-
<h2 className="display-4 text-center">反哺上游生态</h2>
10-
<p className="lead text-center">Feedback upstream</p>
7+
interface UpstreamPageState {
8+
list: typeof upstream;
9+
}
10+
11+
@component({
12+
tagName: 'upstream-page',
13+
renderTarget: 'children'
14+
})
15+
export class UpstreamPage extends mixin<{}, UpstreamPageState>() {
16+
private pendingList = upstream.slice(2);
17+
18+
state = { list: upstream.slice(0, 2) };
19+
20+
showMore = ({ detail }: EdgeEvent) => {
21+
if (detail === 'bottom' && this.pendingList[0])
22+
this.setState({
23+
list: [...this.state.list, this.pendingList.shift()]
24+
});
25+
};
26+
27+
render(_, { list }: UpstreamPageState) {
28+
return (
29+
<EdgeDetector
30+
className="container pt-5"
31+
onTouchEdge={this.showMore}
32+
>
33+
<h2 className="display-4 text-center">反哺上游生态</h2>
34+
<p className="lead text-center">Feedback upstream</p>
1135

12-
{upstream.map(({ org, repo, issue, pull }) => (
13-
<GithubIssue
14-
owner={org}
15-
repository={repo}
16-
issue={issue}
17-
pull={pull}
18-
/>
19-
))}
20-
</div>
21-
);
36+
{list.map(({ org, repo, issue, pull }) => (
37+
<GithubIssue
38+
owner={org}
39+
repository={repo}
40+
issue={issue}
41+
pull={pull}
42+
/>
43+
))}
44+
<p slot="bottom" className="text-center mt-2">
45+
{this.pendingList[0] ? '加载更多...' : '没有更多数据了'}
46+
</p>
47+
</EdgeDetector>
48+
);
49+
}
2250
}

‎source/page/data.ts‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export const footer = [
3838
{
3939
title: 'Web components',
4040
href:
41-
'https://developer.mozilla.org/en-US/docs/Web/Web_Components'
41+
'https://developer.mozilla.org/zh-CN/docs/Web/Web_Components'
4242
},
4343
{
4444
title: 'Custom elements',
@@ -52,20 +52,21 @@ export const footer = [
5252
},
5353
{
5454
title: 'Element Internals',
55-
href: 'https://web.dev/more-capable-form-controls/'
55+
href:
56+
'https://tech-query.me/programming/more-capable-form-controls/'
5657
},
5758
{
5859
title: 'CSS variables',
5960
href:
60-
'https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables'
61+
'https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_variables'
6162
},
6263
{
6364
title: 'ECMAScript 6+',
6465
href: 'http://es6-features.org/'
6566
},
6667
{
6768
title: 'TypeScript 4+',
68-
href: 'https://www.typescriptlang.org/'
69+
href: 'https://www.typescriptlang.org/zh/'
6970
}
7071
]
7172
},
@@ -113,7 +114,7 @@ export const feature = [
113114
summary: '声明式组件代码，简洁、优雅，一键享受 ECMAScript 成熟提案语法',
114115
logo:
115116
'https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/typescript/typescript.png',
116-
link: 'https://www.typescriptlang.org/'
117+
link: 'https://www.typescriptlang.org/zh/'
117118
},
118119
{
119120
title: '虚拟 DOM 引擎采用 SnabbDOM',
@@ -125,13 +126,13 @@ export const feature = [
125126
title: '工具链采用零配置的 Parcel',
126127
summary: '项目启动分分钟，在线演示也只需一条网址',
127128
logo: 'https://github.com/parcel-bundler.png',
128-
link: 'https://parceljs.org/'
129+
link: 'https://zh.parceljs.org/'
129130
},
130131
{
131132
title: '官方适配 MobX 状态管理库',
132133
summary: '一致的装饰器风格，简洁的响应式更新',
133134
logo: 'https://github.com/mobxjs.png',
134-
link: 'https://mobx.js.org/'
135+
link: 'https://cn.mobx.js.org/'
135136
},
136137
{
137138
title: '简洁的官方路由库',
@@ -186,6 +187,16 @@ export const upstream = [
186187
repo: 'element-internals-polyfill',
187188
issue: 13
188189
},
190+
{
191+
org: 'calebdwilliams',
192+
repo: 'element-internals-polyfill',
193+
issue: 17
194+
},
195+
{
196+
org: 'GoogleChrome',
197+
repo: 'web.dev',
198+
pull: 4400
199+
},
189200
{
190201
org: 'tc39',
191202
repo: 'proposal-decorators',
@@ -211,6 +222,11 @@ export const upstream = [
211222
repo: 'ts-node',
212223
issue: 990
213224
},
225+
{
226+
org: 'TypeStrong',
227+
repo: 'typedoc',
228+
issue: 1401
229+
},
214230
{
215231
org: 'jsdom',
216232
repo: 'jsdom',

‎workbox-config.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,8 @@ module.exports = {
44
'**/*.{html,css,js,json,webmanifest,ico,gif,jpg,jpeg,png,webp}'
55
],
66
swDest: 'dist/sw.js',
7-
importWorkboxFrom: 'disabled',
87
importScripts: [
9-
'https://cdn.jsdelivr.net/npm/workbox-sw@4.3.1/build/workbox-sw.min.js'
8+
'https://cdn.jsdelivr.net/npm/workbox-sw@6.0.2/build/workbox-sw.min.js'
109
],
1110
clientsClaim: true,
1211
cleanupOutdatedCaches: true

0 commit comments

Comments
 (0)