Skip to content

Commit 7c5a9eb

Browse files
clemgbldclemgbld
authored
refactor(files): migrated to lit.js (#558)
1 parent 678ecb0 commit 7c5a9eb

8 files changed

Lines changed: 292 additions & 67 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@
119119
"lit": "^3.3.1",
120120
"ms": "^2.1.3",
121121
"open": "^10.1.0",
122-
"pino": "^9.3.2",
122+
"pino": "9.7.0",
123123
"pino-pretty": "^13.0.0",
124124
"polka": "^0.5.2",
125125
"sade": "^1.8.1",

‎public/common/utils.js‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -214,13 +214,11 @@ export function toggle(expandable, parentNode, hideItemsLength) {
214214
continue;
215215
}
216216

217-
if (node !== this) {
218-
if (expandable.isClosed) {
219-
node.classList.remove("hidden");
220-
}
221-
else if (id >= hideItemsLength) {
222-
node.classList.add("hidden");
223-
}
217+
if (!expandable.isClosed) {
218+
node.classList.remove("hidden");
219+
}
220+
else if (id >= hideItemsLength) {
221+
node.classList.add("hidden");
224222
}
225223
}
226224
}

‎public/components/expandable/expandable.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,20 +42,20 @@ span.expandable nsecure-icon {
4242

4343
constructor() {
4444
super();
45-
this.isClosed = false;
45+
this.isClosed = true;
4646
this.onToggle = () => void 0;
4747
}
4848

4949
render() {
5050
const lang = currentLang();
5151

5252
return html`
53-
<span data-value=${this.isClosed ? "opened" : "closed"} @click=${this.#handleClick} class="expandable">
53+
<span data-value=${this.isClosed ? "closed" : "opened"} @click=${this.#handleClick} class="expandable">
5454
${when(this.isClosed,
55-
() => html`<nsecure-icon name="minus"></nsecure-icon>
56-
<p>${window.i18n[lang].home.showLess}</p>`,
5755
() => html`<nsecure-icon name="plus"></nsecure-icon>
58-
<p>${window.i18n[lang].home.showMore}</p>`
56+
<p>${window.i18n[lang].home.showMore}</p>`,
57+
() => html`<nsecure-icon name="minus"></nsecure-icon>
58+
<p>${window.i18n[lang].home.showLess}</p>`
5959
)}
6060
</span>
6161
`;

‎public/components/items-list/items-list.js‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
// Import Third-party Dependencies
2+
import { LitElement, html, css, nothing } from "lit";
3+
import { repeat } from "lit/directives/repeat.js";
4+
import { when } from "lit/directives/when.js";
5+
6+
// Import Internal Dependencies
7+
import { selectVisibleItems } from "./view-model.js";
8+
import "../expandable/expandable.js";
9+
10+
class ItemsList extends LitElement {
11+
static styles = css`
12+
.list-item{
13+
display: flex;
14+
flex-wrap: wrap;
15+
margin-top: 5px;
16+
margin-bottom: 5px;
17+
margin-left: -5px;
18+
flex-direction: column;
19+
padding: 0;
20+
list-style: none;
21+
}
22+
23+
.line {
24+
flex-direction: row;
25+
}
26+
27+
.line > li {
28+
flex-basis: 25px;
29+
justify-content: start;
30+
}
31+
32+
.list-item > li {
33+
padding-left: 10px;
34+
padding-top: 5px;
35+
padding-bottom: 5px;
36+
width: 96%;
37+
border-radius: 4px;
38+
font-size: 13px;
39+
letter-spacing: 0.7px;
40+
display: flex;
41+
align-items: center;
42+
justify-content: center;
43+
flex-grow: 1;
44+
color: #CFD8DC;
45+
margin-left: 5px;
46+
margin-top: 5px;
47+
justify-content: flex-start;
48+
}
49+
50+
.clickable:hover {
51+
background: var(--secondary-darker);
52+
color: #FFF;
53+
cursor: pointer;
54+
}
55+
56+
`;
57+
58+
static properties = {
59+
items: { type: Array },
60+
isClosed: { type: Boolean },
61+
itemsToShowLength: { type: Number },
62+
onClickItem: { type: Function },
63+
variant: { type: String }
64+
};
65+
66+
constructor() {
67+
super();
68+
this.items = [];
69+
this.isClosed = true;
70+
this.itemsToShowLength = 5;
71+
this.onClickItem = null;
72+
this.variant = "column";
73+
this.shouldShowEveryItems = false;
74+
}
75+
76+
render() {
77+
const hasExpandable = !this.shouldShowEveryItems && this.items.length > this.itemsToShowLength;
78+
79+
return html`
80+
<ul class="list-item ${this.variant}">
81+
${repeat(selectVisibleItems({
82+
items: this.items,
83+
isClosed: this.isClosed,
84+
itemsToShowLength: this.itemsToShowLength,
85+
shouldShowEveryItems: this.shouldShowEveryItems
86+
}),
87+
(item) => item,
88+
(item) => (typeof this.onClickItem === "function"
89+
? html`<li class="clickable" @click=${() => {
90+
this.onClickItem(item);
91+
}}>${item}</li>`
92+
: html`<li>${item}</li>`))
93+
}
94+
</ul>
95+
${when(hasExpandable,
96+
() => html`<expandable-span .isClosed=${this.isClosed} .onToggle=${() => {
97+
this.isClosed = !this.isClosed;
98+
}}></expandable-span>`,
99+
() => nothing
100+
)
101+
}
102+
`;
103+
}
104+
}
105+
106+
customElements.define("items-list", ItemsList);

‎public/components/items-list/view-model.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export function selectVisibleItems({
2+
items, isClosed, itemsToShowLength, shouldShowEveryItems = false
3+
}) {
4+
const nonEmptyItems = items.filter((item) => item.trim() !== "");
5+
6+
if (shouldShowEveryItems) {
7+
return nonEmptyItems;
8+
}
9+
10+
return isClosed ? nonEmptyItems.slice(0, itemsToShowLength) : nonEmptyItems;
11+
}

‎public/components/package/package.js‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
import "../bundlephobia/bundlephobia.js";
33
import { PackageHeader } from "./header/header.js";
44
import * as Pannels from "./pannels/index.js";
5-
import * as utils from "../../common/utils.js";
65
import { EVENTS } from "../../core/events.js";
76

87
export class PackageInfo {
@@ -89,15 +88,11 @@ export class PackageInfo {
8988
}
9089

9190
const panFiles = packageHTMLElement.querySelector("#pan-files");
92-
93-
const bundlephobia = utils.createDOMElement("bundle-phobia", {
94-
attributes: {
95-
name: this.dependencyVersion.name,
96-
version: this.dependencyVersion.version
97-
}
98-
});
99-
100-
panFiles.appendChild(bundlephobia);
91+
const files = document.createElement("package-files");
92+
files.package = this;
93+
files.id = "pan-files";
94+
files.classList.add("package-container");
95+
panFiles.parentElement.replaceChild(files, panFiles);
10196
}
10297

10398
/**
@@ -165,7 +160,6 @@ export class PackageInfo {
165160
if (window.settings.config.disableExternalRequests === false) {
166161
new Pannels.Scorecard(this).generate(clone);
167162
}
168-
new Pannels.Files(this).generate(clone);
169163

170164
return clone;
171165
}

‎public/components/package/pannels/files/files.js‎

Lines changed: 113 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,123 @@
1+
// Import Third-party Dependencies
2+
import { LitElement, html, css, nothing } from "lit";
3+
import { when } from "lit/directives/when.js";
4+
15
// Import Internal Dependencies
2-
import * as utils from "../../../../common/utils.js";
6+
import { currentLang } from "../../../../common/utils.js";
7+
import "../../../bundlephobia/bundlephobia.js";
8+
import "../../../items-list/items-list.js";
39

4-
export class Files {
5-
constructor(pkg) {
6-
this.package = pkg;
10+
class Files extends LitElement {
11+
static styles = css`
12+
:host{
13+
display: block;
714
}
815
9-
/**
10-
* @param {!HTMLTemplateElement} clone
11-
*/
12-
generate(clone) {
16+
.head-title {
17+
background: var(--primary-darker);
18+
height: 28px;
19+
flex-shrink: 0;
20+
display: flex;
21+
align-items: center;
22+
border-bottom: 2px solid var(--primary-lighter);
23+
border-radius: 2px 2px 0 0;
24+
}
25+
26+
.head-title.no-margin {
27+
margin-top: 0;
28+
}
29+
30+
.head-title>p {
31+
text-shadow: 1px 1px 5px rgb(20 20 20 / 50%);
32+
font-size: 18px;
33+
font-variant: small-caps;
34+
35+
/* lowercase is needed with small-caps font variant */
36+
text-transform: lowercase;
37+
font-family: mononoki;
38+
font-weight: bold;
39+
letter-spacing: 1px;
40+
padding: 0 10px;
41+
}
42+
`;
43+
static properties = {
44+
package: { type: Object }
45+
};
46+
47+
render() {
48+
const { package_info: { title } } = window.i18n[currentLang()];
1349
const { name, version, composition } = this.package.dependencyVersion;
1450

15-
function onclick(_, fileName) {
16-
if (fileName === "../" || fileName === "./") {
17-
return;
18-
}
51+
return html`
52+
${when(
53+
composition.extensions.length > 0,
54+
() => html`
55+
<div class="head-title no-margin">
56+
<p>${title.files_extensions}</p>
57+
</div>
58+
<items-list variant="line" .shouldShowEveryItems=${true} .items=${composition.extensions}></items-list>
59+
`,
60+
() => nothing
61+
)}
1962
20-
const cleanedFile = fileName.startsWith("./") ? fileName.slice(2) : fileName;
21-
window
22-
.open(`https://unpkg.com/${name}@${version}/${cleanedFile}`, "_blank")
23-
.focus();
24-
}
63+
${when(
64+
composition.files.length > 0,
65+
() => html`
66+
<div class="head-title no-margin">
67+
<p>${title.files}</p>
68+
</div>
69+
<items-list
70+
.itemsToShowLength=${3}
71+
.items=${composition.files}
72+
.onClickItem=${this.openFile}
73+
></items-list>
74+
`,
75+
() => nothing
76+
)}
2577
26-
utils.createItemsList(
27-
clone.getElementById("extensions"),
28-
composition.extensions
29-
);
30-
31-
utils.createItemsList(
32-
clone.getElementById("tarballfiles"),
33-
composition.files,
34-
{ onclick, hideItems: true, hideItemsLength: 3 }
35-
);
36-
37-
utils.createItemsList(
38-
clone.getElementById("minifiedfiles"),
39-
composition.minified,
40-
{ onclick, hideItems: true }
41-
);
42-
43-
utils.createItemsList(
44-
clone.getElementById("internaldep"),
45-
composition.required_files,
46-
{
47-
onclick,
48-
hideItems: true,
49-
hideItemsLength: 3
50-
}
51-
);
78+
${when(
79+
composition.required_files.length > 0,
80+
() => html`
81+
<div class="head-title">
82+
<p>${title.required_files}</p>
83+
</div>
84+
<items-list
85+
.itemsToShowLength=${3}
86+
.items=${composition.required_files}
87+
.onClickItem=${this.openFile}
88+
></items-list>
89+
`,
90+
() => nothing
91+
)}
92+
93+
${when(
94+
composition.minified.length > 0,
95+
() => html`
96+
<div class="head-title">
97+
<p>${title.minified_files}</p>
98+
</div>
99+
<items-list
100+
.items=${composition.minified}
101+
.onClickItem=${this.openFile}
102+
></items-list>
103+
`,
104+
() => nothing
105+
)}
106+
<bundle-phobia name=${name} version=${version}></bundle-phobia>
107+
`;
52108
}
109+
110+
openFile = (fileName) => {
111+
const { name, version } = this.package.dependencyVersion;
112+
if (fileName === "../" || fileName === "./") {
113+
return;
114+
}
115+
116+
const cleanedFile = fileName.startsWith("./") ? fileName.slice(2) : fileName;
117+
window
118+
.open(`https://unpkg.com/${name}@${version}/${cleanedFile}`, "_blank")
119+
.focus();
120+
};
53121
}
122+
123+
customElements.define("package-files", Files);

0 commit comments

Comments
 (0)