Skip to content

Commit a786f31

Browse files
ruibabyruibaby
committed
Refactor conditional rendering to use lit 'when' directive
1 parent 2f09775 commit a786f31

8 files changed

Lines changed: 129 additions & 129 deletions

File tree

‎packages/comment-widget/src/base-comment-item.ts‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import { consume } from '@lit/context';
99
import { configMapDataContext } from './context';
1010
import type { ConfigMapData } from './types';
1111
import './comment-content';
12+
import { ifDefined } from 'lit/directives/if-defined.js';
13+
import { when } from 'lit/directives/when.js';
1214

1315
export class BaseCommentItem extends LitElement {
1416
@property({ type: String })
@@ -45,35 +47,35 @@ export class BaseCommentItem extends LitElement {
4547
<user-avatar
4648
src="${this.userAvatar || ''}"
4749
alt="${this.userDisplayName || ''}"
48-
href=${this.userWebsite}
50+
href=${ifDefined(this.userWebsite)}
4951
></user-avatar>
5052
</div>
5153
<div class="item-main flex-[1_1_auto] min-w-0 w-full">
5254
<div class="item-meta flex items-center gap-3 flex-wrap">
53-
${
54-
this.userWebsite
55-
? html`<a
55+
${when(
56+
this.userWebsite,
57+
() => html`
58+
<a
5659
class="item-author font-medium text-sm text-text-1 hover:underline"
5760
target="_blank"
58-
href=${this.userWebsite}
61+
href=${ifDefined(this.userWebsite)}
5962
rel="noopener noreferrer"
6063
>
6164
${this.userDisplayName}
62-
</a>`
63-
: html`<span class="item-author font-medium text-sm text-text-1">${this.userDisplayName}</span>`
64-
}
65+
</a>
66+
`,
67+
() => html`
68+
<span class="item-author font-medium text-sm text-text-1">${this.userDisplayName}</span>
69+
`
70+
)}
71+
72+
${when(this.ua && this.configMapData?.basic.showCommenterDevice, () => html`<commenter-ua-bar .ua=${this.ua}></commenter-ua-bar>`)}
6573
66-
${this.ua && this.configMapData?.basic.showCommenterDevice ? html`<commenter-ua-bar .ua=${this.ua}></commenter-ua-bar>` : ''}
67-
6874
<time class="item-meta-info text-xs text-text-3" title=${formatDate(this.creationTime)}>
6975
${timeAgo(this.creationTime)}
7076
</time>
7177
72-
${
73-
!this.approved
74-
? html`<div class="item-meta-info text-xs text-text-3">${msg('Reviewing')}</div>`
75-
: ''
76-
}
78+
${when(!this.approved, () => html`<div class="item-meta-info text-xs text-text-3">${msg('Reviewing')}</div>`)}
7779
</div>
7880
7981
<div class="item-content mt-2.5 space-y-2.5"><slot name="pre-content"></slot><comment-content .content=${this.content}></comment-content></div>

‎packages/comment-widget/src/base-form.ts‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import type { ToastManager } from './lit-toast';
2020
import baseStyles from './styles/base';
2121
import type { ConfigMapData } from './types';
2222
import './comment-editor';
23+
import { when } from 'lit/directives/when.js';
2324
import { ofetch } from 'ofetch';
2425
import type { CommentEditor } from './comment-editor';
2526
import { cleanHtml } from './utils/html';
@@ -150,13 +151,9 @@ export class BaseForm extends LitElement {
150151

151152
renderAccountInfo() {
152153
return html`<div class="form-account flex items-center gap-2">
153-
<div class="form-account-avatar avatar">
154-
${
155-
this.currentUser?.spec.avatar
156-
? html`<img src=${this.currentUser.spec.avatar} class="size-full object-cover" />`
157-
: ''
158-
}
159-
</div>
154+
<div class="form-account-avatar avatar">
155+
${when(this.currentUser?.spec.avatar, () => html`<img src=${this.currentUser?.spec.avatar || ''} class="size-full object-cover" />`)}
156+
</div>
160157
<span class="form-account-name text-base text-text-1 font-semibold">
161158
${this.currentUser?.spec.displayName || this.currentUser?.metadata.name}
162159
</span>
@@ -193,9 +190,11 @@ export class BaseForm extends LitElement {
193190
return html`
194191
<form class="form w-full flex flex-col gap-4" @submit="${this.onSubmit}">
195192
<comment-editor ${ref(this.editorRef)} .placeholder=${this.configMapData?.editor?.placeholder}></comment-editor>
196-
${
197-
!this.currentUser && this.allowAnonymousComments
198-
? html`<div class="form-inputs grid grid-cols-1 md:grid-cols-4 gap-2 items-center">
193+
194+
${when(
195+
!this.currentUser && this.allowAnonymousComments,
196+
() => html`
197+
<div class="form-inputs grid grid-cols-1 md:grid-cols-4 gap-2 items-center">
199198
<input
200199
name="displayName"
201200
value=${this.customAccount.displayName}
@@ -220,28 +219,29 @@ export class BaseForm extends LitElement {
220219
class="input"
221220
/>
222221
<a tabindex="-1" href=${this.loginUrl} rel="nofollow" class="form-login-link text-text-3 hover:text-text-1 text-xs transition-all select-none">${msg('(Or login)')}</a>
223-
</div>`
224-
: ''
225-
}
222+
</div>
223+
`
224+
)}
226225
227226
<div class="form__footer">
228227
${this.currentUser ? this.renderAccountInfo() : ''}
229-
${
230-
!this.currentUser && !this.allowAnonymousComments
231-
? html`<button
228+
${when(
229+
!this.currentUser && !this.allowAnonymousComments,
230+
() => html`
231+
<button
232232
@click=${this.handleOpenLoginPage}
233233
class="form-login text-xs text-text-3 hover:text-text-1 px-3 transition-all py-2 rounded-base border border-muted-3 opacity-100 hover:border-muted-4 hover:opacity-70 border-solid"
234234
type="button"
235235
tabindex="-1"
236236
>
237237
${msg('Login')}
238-
</button> `
239-
: ''
240-
}
238+
</button>
239+
`
240+
)}
241241
<div class="form-actions justify-end flex gap-2 flex-wrap items-center">
242-
${
243-
this.showCaptcha && this.captcha
244-
? html`
242+
${when(
243+
this.showCaptcha && this.captcha,
244+
() => html`
245245
<div class="form-captcha gap-2 flex items-center">
246246
<img
247247
@click=${this.handleFetchCaptcha}
@@ -256,20 +256,20 @@ export class BaseForm extends LitElement {
256256
class="input "
257257
/>
258258
</div>
259-
`
260-
: ''
261-
}
259+
`
260+
)}
262261
263262
<button
264263
.disabled=${this.submitting}
265264
type="submit"
266265
class="form-submit outline-none focus:shadow-input h-12 text-sm inline-flex border border-primary-1 border-solid items-center justify-center gap-2 bg-primary-1 text-white px-3 rounded-base hover:opacity-80 transition-all"
267266
>
268-
${
269-
this.submitting
270-
? html`<icon-loading></icon-loading>`
271-
: html`<i class="i-mingcute-send-line size-5" aria-hidden="true"></i>`
272-
}
267+
${when(
268+
this.submitting,
269+
() => html`<icon-loading></icon-loading>`,
270+
() =>
271+
html`<i class="i-mingcute-send-line size-5" aria-hidden="true"></i>`
272+
)}
273273
${msg('Submit')}
274274
</button>
275275
</div>

‎packages/comment-widget/src/comment-editor.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import './emoji-button';
77
import contentStyles from './styles/content.css?inline';
88
import './comment-editor-skeleton';
99
import { property } from 'lit/decorators.js';
10+
import { ifDefined } from 'lit/directives/if-defined.js';
11+
import { when } from 'lit/directives/when.js';
1012
import baseStyles from './styles/base';
1113
import { cleanHtml } from './utils/html';
1214

@@ -169,7 +171,8 @@ export class CommentEditor extends LitElement {
169171
}
170172

171173
protected override render() {
172-
return html` ${this.loading ? html`<comment-editor-skeleton></comment-editor-skeleton>` : ''}
174+
return html`
175+
${when(this.loading, () => html`<comment-editor-skeleton></comment-editor-skeleton>`)}
173176
<div
174177
class="border rounded-base border-solid border-muted-1 focus-within:border-primary-1 focus-within:shadow-input transition-all"
175178
?hidden=${this.loading}
@@ -203,8 +206,8 @@ export class CommentEditor extends LitElement {
203206
return html`
204207
<li>
205208
<div
206-
aria-label=${item.displayName?.()}
207-
title=${item.displayName?.()}
209+
aria-label=${ifDefined(item.displayName?.())}
210+
title=${ifDefined(item.displayName?.())}
208211
@click=${() => item.run?.(editor)}
209212
role="button"
210213
class="size-7 hover:bg-muted-3 active:bg-muted-2 ${isActive ? 'bg-muted-3 text-text-1' : 'text-text-3 hover:text-text-1'} rounded-base flex items-center justify-center cursor-pointer transition-all"

‎packages/comment-widget/src/comment-item.ts‎

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import './base-comment-item';
88
import { consume } from '@lit/context';
99
import { msg } from '@lit/localize';
1010
import { createRef, type Ref, ref } from 'lit/directives/ref.js';
11+
import { when } from 'lit/directives/when.js';
1112
import { ofetch } from 'ofetch';
1213
import { getPolicyInstance } from './avatar/avatar-policy';
1314
import type { CommentReplies } from './comment-replies';
@@ -123,11 +124,13 @@ export class CommentItem extends LitElement {
123124
>
124125
<button slot="action" class="icon-button group -ml-2" type="button" @click="${this.handleUpvote}" aria-label=${msg('Upvote')}>
125126
<div class="icon-button-icon">
126-
${
127-
this.upvoted
128-
? html`<i slot="icon" class="i-mingcute-heart-fill size-4 text-red-500" aria-hidden="true"></i>`
129-
: html`<i slot="icon" class="i-mingcute-heart-line size-4" aria-hidden="true"></i>`
130-
}
127+
${when(
128+
this.upvoted,
129+
() =>
130+
html`<i slot="icon" class="i-mingcute-heart-fill size-4 text-red-500" aria-hidden="true"></i>`,
131+
() =>
132+
html`<i slot="icon" class="i-mingcute-heart-line size-4" aria-hidden="true"></i>`
133+
)}
131134
</div>
132135
<span class="icon-button-text">${`${this.upvoteCount || 0}`}</span>
133136
</button>
@@ -144,38 +147,39 @@ export class CommentItem extends LitElement {
144147
<span class="icon-button-text">${this.comment?.status?.visibleReplyCount || 0}</span>
145148
</button>`
146149
}
147-
${
148-
this.configMapData?.basic.withReplies
149-
? html`
150+
151+
${when(
152+
this.configMapData?.basic.withReplies,
153+
() => html`
150154
<button slot="action" class="icon-button group" type="button" @click="${this.handleToggleReplyForm}" aria-label=${this.showReplyForm ? msg('Cancel reply') : msg('Add reply')}>
151155
<div class="icon-button-icon ">
152156
<i slot="icon" class="i-tabler:message-circle-plus size-4" aria-hidden="true"></i>
153157
</div>
154158
<span class="icon-button-text">${this.showReplyForm ? msg('Cancel reply') : msg('Add reply')}</span>
155-
</button>`
156-
: ''
157-
}
159+
</button>
160+
`
161+
)}
158162
159163
<div slot="footer">
160-
${
161-
this.showReplyForm
162-
? html`<div class="mt-2">
164+
${when(
165+
this.showReplyForm,
166+
() => html`
167+
<div class="mt-2">
163168
<reply-form
164169
@reload=${this.onReplyCreated}
165170
.comment=${this.comment}
166171
></reply-form>
167-
</div>`
168-
: ''
169-
}
170-
${
171-
this.showReplies
172-
? html`<comment-replies
172+
</div>
173+
`
174+
)}
175+
${when(
176+
this.showReplies,
177+
() => html`<comment-replies
173178
${ref(this.commentRepliesRef)}
174179
.comment="${this.comment}"
175180
.showReplyForm=${this.showReplyForm}
176181
></comment-replies>`
177-
: ``
178-
}
182+
)}
179183
</div>
180184
</base-comment-item>`;
181185
}

‎packages/comment-widget/src/comment-list.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import type { ConfigMapData } from './types';
1919
import './comment-pagination';
2020
import './comment-item';
2121
import './loading-block';
22+
import { when } from 'lit/directives/when.js';
2223
import { ofetch } from 'ofetch';
2324
import baseStyles from './styles/base';
2425

@@ -160,18 +161,17 @@ export class CommentList extends LitElement {
160161
</div>
161162
`
162163
}
163-
${
164-
this.shouldDisplayPagination
165-
? html`
166-
<comment-pagination
164+
${when(
165+
this.shouldDisplayPagination,
166+
() => html`<comment-pagination
167167
.total=${this.comments.total}
168168
.page=${this.comments.page}
169169
.size=${this.comments.size}
170170
@page-change=${this.onPageChange}
171171
></comment-pagination>
172172
`
173-
: ''
174-
}`;
173+
)}
174+
`;
175175
}
176176

177177
static override styles = [

‎packages/comment-widget/src/comment-replies.ts‎

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import './reply-item';
88
import './loading-block';
99
import './reply-form';
1010
import { msg } from '@lit/localize';
11+
import { when } from 'lit/directives/when.js';
1112
import { ofetch } from 'ofetch';
1213
import type { ToastManager } from './lit-toast';
1314
import baseStyles from './styles/base';
@@ -49,10 +50,9 @@ export class CommentReplies extends LitElement {
4950

5051
override render() {
5152
return html` <div class="replies-main">
52-
${
53-
this.replies.length
54-
? html`
55-
<div class="replies-list mt-3">
53+
${when(
54+
this.replies.length,
55+
() => html`<div class="replies-list mt-3">
5656
${repeat(
5757
this.replies,
5858
(item) => item.metadata.name,
@@ -66,18 +66,15 @@ export class CommentReplies extends LitElement {
6666
@reload=${this.fetchReplies}
6767
></reply-item>`
6868
)}
69-
</div>
70-
`
71-
: ''
72-
}
73-
${this.loading ? html` <loading-block></loading-block>` : ''}
74-
${
75-
this.hasNext && !this.loading
76-
? html` <div class="replies-next flex justify-center my-2">
69+
</div>`
70+
)}
71+
${when(this.loading, () => html` <loading-block></loading-block>`)}
72+
${when(
73+
this.hasNext && !this.loading,
74+
() => html`<div class="replies-next flex justify-center my-2">
7775
<button class="replies-next-button pagination-button" @click=${this.fetchNext}>${msg('Load more')}</button>
7876
</div>`
79-
: ''
80-
}
77+
)}
8178
</div>`;
8279
}
8380

@@ -142,13 +139,13 @@ export class CommentReplies extends LitElement {
142139
// TODO: Fix ts error
143140
// Needs @halo-dev/api-client@2.14.0
144141
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
145-
// @ts-ignore
142+
// @ts-expect-error
146143
this.replies = this.comment?.replies.items;
147144
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
148-
// @ts-ignore
145+
// @ts-expect-error
149146
this.page = this.comment?.replies.page;
150147
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
151-
// @ts-ignore
148+
// @ts-expect-error
152149
this.hasNext = this.comment?.replies.hasNext;
153150
} else {
154151
this.fetchReplies();

0 commit comments

Comments
 (0)