Skip to content

Commit ab246e9

Browse files
TechQueryTechQuery
committed
[ Optimize ] Upgrade to DOM Renderer 1.0
1 parent da2fc25 commit ab246e9

File tree

8 files changed

+114
-94
lines changed

8 files changed

+114
-94
lines changed

‎README.markdown‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
**Web Component** set for GitHub based on [WebCell](https://web-cell.dev/)
44

5+
[![NPM Dependency](https://david-dm.org/TechQuery/GitHub-Web-Widget.svg)](https://david-dm.org/TechQuery/GitHub-Web-Widget)
6+
[![](https://data.jsdelivr.com/v1/package/npm/github-web-widget/badge?style=rounded)](https://www.jsdelivr.com/package/npm/github-web-widget)
7+
8+
[![NPM](https://nodei.co/npm/github-web-widget.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/github-web-widget/)
59

610

711
## What does it look like?

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "github-web-widget",
3-
"version": "2.4.0",
3+
"version": "2.4.1",
44
"description": "Web Component set for GitHub based on WebCell",
55
"keywords": [
66
"github",
@@ -41,10 +41,10 @@
4141
}
4242
},
4343
"dependencies": {
44-
"dom-renderer": "^0.9.0",
45-
"highlight.js": "^9.15.6",
44+
"dom-renderer": "^1.0.2",
45+
"highlight.js": "^9.15.8",
4646
"marked": "^0.6.2",
47-
"web-cell": "^1.1.0"
47+
"web-cell": "^1.2.0"
4848
},
4949
"peerDependencies": {
5050
"@babel/polyfill": "^7.4.4",

‎source/EventFlow/index.html‎

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -30,25 +30,31 @@ <h4>
3030
view.type.replace('Event', '') ]}
3131

3232
<span data-view="payload">
33-
<a target="_blank" href="${host.detailURLOf( view )}">
34-
${ (view.ref || view.master_branch) || (view.issue
35-
|| view.pull_request || '').title || (view.release
36-
|| '').name || (view.member || '').login }
37-
</a>
38-
<ol data-view="pages">
39-
<template>
40-
<li>
41-
${scope.method[ view.action ]}
42-
<a
43-
target="_blank"
44-
href="${view.html_url}"
45-
title="${view.summary || view.sha}"
46-
>
47-
${view.title}
48-
</a>
49-
</li>
50-
</template>
51-
</ol>
33+
<template>
34+
<a
35+
target="_blank"
36+
href="${host.detailURLOf( view )}"
37+
>
38+
${ (view.ref || view.master_branch) ||
39+
(view.issue || view.pull_request || '').title ||
40+
(view.release || '').name || (view.member ||
41+
'').login }
42+
</a>
43+
<ol data-view="pages">
44+
<template>
45+
<li>
46+
${scope.method[ view.action ]}
47+
<a
48+
target="_blank"
49+
href="${view.html_url}"
50+
title="${view.summary || view.sha}"
51+
>
52+
${view.title}
53+
</a>
54+
</li>
55+
</template>
56+
</ol>
57+
</template>
5258
</span>
5359
</div>
5460
</li>

‎source/EventFlow/index.js‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,7 @@ import style from './index.less';
99
@component({ template, style })
1010
export default class GithubEventFlow extends GithubElement {
1111
constructor() {
12-
super().nextPage = 1;
13-
14-
this.ready.then(() =>
15-
new IntersectionObserver(entry => {
16-
for (let item of entry)
17-
if (item.isIntersecting)
18-
return this.viewChangedCallback(this.view.data);
19-
}).observe(this.view.root.lastElementChild)
20-
);
12+
super().nextPage = '';
2113
}
2214

2315
@mapProperty
@@ -42,28 +34,38 @@ export default class GithubEventFlow extends GithubElement {
4234
path = `orgs/${org}/events`;
4335
}
4436

45-
if (path) return `https://api.github.com/${path}?page=${this.nextPage}`;
37+
return path && 'https://api.github.com/' + path;
4638
}
4739

48-
async viewChangedCallback({ user, org, repo }) {
49-
if (!user && !org && !repo) return;
40+
async showMore() {
41+
const {
42+
headers: { Link = {} },
43+
body
44+
} = await request(this.nextPage);
45+
46+
this.nextPage = (Link.next || '').URI;
5047

51-
const list = await this.getData();
48+
if (!body[0]) throw RangeError('No more event');
5249

53-
if (list[0]) this.view.events = list;
50+
await this.view.render({ events: body });
5451
}
5552

56-
async getData() {
57-
const {
58-
headers: { Link },
59-
body
60-
} = await request(this.URL);
53+
async viewChangedCallback({ user, org, repo }) {
54+
if (!user && !org && !repo) return;
6155

62-
const { next } = Link || '';
56+
this.nextPage = this.URL;
6357

64-
this.nextPage = next ? +next[1] : this.nextPage + 1;
58+
await this.showMore();
6559

66-
return body;
60+
new IntersectionObserver((entry, observer) => {
61+
for (let item of entry)
62+
if (item.isIntersecting)
63+
try {
64+
return this.nextPage && this.showMore();
65+
} catch (error) {
66+
return observer.disconnect();
67+
}
68+
}).observe(this.view.root.lastElementChild);
6769
}
6870

6971
detailURLOf(event) {

‎source/Issue/index.html‎

Lines changed: 52 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,62 @@
11
<template>
22
<div class="table-row">
33
<aside data-view="owner">
4-
<img class="logo big" src="${view.avatar_url}" />
4+
<template>
5+
<img class="logo big" src="${view.avatar_url}" />
56

6-
<a target="_blank" href="${view.html_url}">
7-
<strong>${view.login}</strong>
8-
</a>
7+
<a target="_blank" href="${view.html_url}">
8+
<strong>${view.login}</strong>
9+
</a>
10+
</template>
911
</aside>
1012

1113
<div data-view="detail">
12-
<h1>
13-
<span class="${view.state}">${view.state}</span>
14-
<a target="_blank" href="${view.html_url}">${view.title}</a>
15-
</h1>
16-
<main>
17-
<details>
18-
<summary>
19-
<img class="logo" src="${view.user.avatar_url}" />
20-
<a target="_blank" href="${view.html_url}">
21-
<strong>${view.user.login}</strong>
22-
</a>
23-
opened this at
24-
<time datetime="${view.created_at}">
25-
${new Date(view.created_at).toLocaleString()}
26-
</time>
27-
</summary>
28-
<mark-down class="markdown-body">${view.body}</mark-down>
29-
</details>
30-
<div data-view="comment">
31-
<template>
32-
<details>
33-
<summary>
34-
<img
35-
class="logo"
36-
src="${view.user.avatar_url}"
37-
/>
38-
<a target="_blank" href="${view.html_url}">
39-
<strong>${view.user.login}</strong>
40-
</a>
41-
commented at
42-
<time datetime="${view.created_at}">
43-
${new
44-
Date(view.created_at).toLocaleString()}
45-
</time>
46-
</summary>
47-
<mark-down class="markdown-body">
48-
${view.body}
49-
</mark-down>
50-
</details>
51-
</template>
52-
</div>
53-
</main>
14+
<template>
15+
<h1>
16+
<span class="${view.state}">${view.state}</span>
17+
<a target="_blank" href="${view.html_url}">${view.title}</a>
18+
</h1>
19+
<main>
20+
<details>
21+
<summary>
22+
<img class="logo" src="${view.user.avatar_url}" />
23+
<a target="_blank" href="${view.html_url}">
24+
<strong>${view.user.login}</strong>
25+
</a>
26+
opened this at
27+
<time datetime="${view.created_at}">
28+
${new Date(view.created_at).toLocaleString()}
29+
</time>
30+
</summary>
31+
<mark-down class="markdown-body"
32+
>${view.body}</mark-down
33+
>
34+
</details>
35+
<div data-view="comment">
36+
<template>
37+
<details>
38+
<summary>
39+
<img
40+
class="logo"
41+
src="${view.user.avatar_url}"
42+
/>
43+
<a target="_blank" href="${view.html_url}">
44+
<strong>${view.user.login}</strong>
45+
</a>
46+
commented at
47+
<time datetime="${view.created_at}">
48+
${new
49+
Date(view.created_at).toLocaleString()}
50+
</time>
51+
</summary>
52+
<mark-down class="markdown-body">
53+
${view.body}
54+
</mark-down>
55+
</details>
56+
</template>
57+
</div>
58+
</main>
59+
</template>
5460
</div>
5561
</div>
5662
</template>

‎source/Issue/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ export default class GithubIssue extends GithubElement {
2121
attributeChangedCallback() {}
2222

2323
async viewChangedCallback({ user, org, repo, issue, pull }) {
24+
(issue = parseInt(issue)), (pull = parseInt(pull));
25+
2426
if (!(user || org) || !repo || !(issue || pull)) return;
2527

2628
const [detail, owner] = await Promise.all([
@@ -36,6 +38,6 @@ export default class GithubIssue extends GithubElement {
3638

3739
if (detail.merged) detail.state = 'merged';
3840

39-
this.view.render({ owner, detail });
41+
await this.view.render({ owner, detail });
4042
}
4143
}

‎source/Profile/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ export default class GithubProfile extends GithubElement {
6262
const data = await this.fetch(user ? `users/${user}` : `orgs/${org}`),
6363
{ view } = this;
6464

65-
view.render(data);
65+
await view.render(data);
6666

6767
const repos = GithubProfile.filterRepo(
6868
await this.fetch(`${data.repos_url}?sort=updated`)

‎source/Repository/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,6 @@ export default class GithubRepository extends GithubElement {
3535

3636
const data = await this.fetch(`repos/${user || org}/${repo}`);
3737

38-
this.view.render(data);
38+
await this.view.render(data);
3939
}
4040
}

0 commit comments

Comments
 (0)