Update build config to output ESM for better code splitting (#183)

Changed to use ESM format for loading scripts to get better code splitting support. This PR is mainly to prepare for adding future features, such as rich text editor.

```release-note
None
```

Author: ruibaby

build.gradle

@@ -48,6 +48,6 @@ build {
 }
 
 halo {
-    version = "2.20"
+    version = "2.21"
     debug = true
 }

packages/comment-widget/package.json

@@ -31,15 +31,15 @@
     "dev": "tsc -w"
   },
   "dependencies": {
-    "@emoji-mart/data": "^1.1.2",
-    "@halo-dev/api-client": "^2.14.0",
-    "@lit/context": "^1.1.0",
+    "@emoji-mart/data": "^1.2.1",
+    "@halo-dev/api-client": "^2.21.1",
+    "@lit/context": "^1.1.6",
     "@lit/localize": "^0.12.2",
-    "dayjs": "^1.11.10",
-    "emoji-mart": "^5.5.2",
-    "es-toolkit": "^1.39.7",
-    "javascript-time-ago": "^2.5.9",
-    "lit": "^3.1.2"
+    "dayjs": "^1.11.13",
+    "emoji-mart": "^5.6.0",
+    "es-toolkit": "^1.39.8",
+    "javascript-time-ago": "^2.5.11",
+    "lit": "^3.3.1"
   },
   "devDependencies": {
     "@lit/localize-tools": "^0.8.0",

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

@@ -23,7 +23,6 @@ import {
   baseUrlContext,
   captchaEnabledContext,
   currentUserContext,
-  emojiDataUrlContext,
   groupContext,
   kindContext,
   nameContext,
@@ -88,10 +87,6 @@ export class CommentWidget extends LitElement {
   @property({ type: String, attribute: 'avatar-policy' })
   avatarPolicy = '';
 
-  @provide({ context: emojiDataUrlContext })
-  @property({ type: String, attribute: 'emoji-data-url' })
-  emojiDataUrl = 'https://unpkg.com/@emoji-mart/data';
-
   @provide({ context: currentUserContext })
   @state()
   currentUser: User | undefined;

packages/comment-widget/src/context/index.ts

@@ -34,10 +34,6 @@ export const currentUserContext = createContext<User | undefined>(
   Symbol('currentUser')
 );
 
-export const emojiDataUrlContext = createContext<string>(
-  Symbol('emojiDataUrl')
-);
-
 export const toastContext = createContext<ToastManager | undefined>(
   Symbol('toastContext')
 );

packages/comment-widget/src/emoji-button.ts

@@ -9,13 +9,11 @@ import es from '@emoji-mart/data/i18n/es.json';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 //@ts-ignore
 import zh from '@emoji-mart/data/i18n/zh.json';
-import { consume } from '@lit/context';
 import { msg } from '@lit/localize';
 import { Picker } from 'emoji-mart';
 import { css, html, LitElement } from 'lit';
 import { state } from 'lit/decorators.js';
 import { createRef, type Ref, ref } from 'lit/directives/ref.js';
-import { emojiDataUrlContext } from './context';
 import { getLocale } from './locale';
 import baseStyles from './styles/base';
 import varStyles from './styles/var';
@@ -37,10 +35,6 @@ export class EmojiButton extends LitElement {
   @state()
   emojiPicker: Picker | null = null;
 
-  @consume({ context: emojiDataUrlContext })
-  @state()
-  emojiDataUrl = '';
-
   emojiPickerWrapperRef: Ref<HTMLDivElement> = createRef<HTMLDivElement>();
 
   constructor() {
@@ -78,8 +72,9 @@ export class EmojiButton extends LitElement {
 
     this.emojiLoading = true;
 
-    const response = await fetch(this.emojiDataUrl);
-    const data = await response.json();
+    const { default: data } = await import(
+      /* webpackChunkName: "emoji-mart-data" */ '@emoji-mart/data'
+    );
 
     const emojiPicker = new Picker({
       data,
@@ -91,7 +86,6 @@ export class EmojiButton extends LitElement {
       i18n: localeMap[getLocale()],
     });
 
-    // TODO: fix this ts error
     this.emojiPickerWrapperRef.value?.appendChild(
       emojiPicker as unknown as Node
     );
@@ -101,7 +95,11 @@ export class EmojiButton extends LitElement {
   }
 
   override render() {
-    return html`<button class="emoji-button" type="button" aria-label=${msg('Select emoticon')}>
+    return html`<button
+      class="emoji-button"
+      type="button"
+      aria-label=${msg('Select emoticon')}
+    >
       ${
         this.emojiLoading
           ? html`<icon-loading></icon-loading>`

packages/comment-widget/tsconfig.json

@@ -16,7 +16,7 @@
     "noFallthroughCasesInSwitch": true,
     "noImplicitAny": true,
     "noImplicitThis": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true,
     "forceConsistentCasingInFileNames": true,

packages/widget/package.json

@@ -1,14 +1,12 @@
 {
-  "license": "GPL-3.0",
   "scripts": {
-    "build": "tsc && vite build",
-    "dev": "vite"
+    "build": "tsc && rslib build",
+    "dev": "rslib build --watch"
   },
   "dependencies": {
-    "@emoji-mart/data": "^1.1.2",
     "@halo-dev/comment-widget": "workspace:*"
   },
   "devDependencies": {
-    "rollup-plugin-copy-merge": "^1.0.2"
+    "@rslib/core": "^0.11.1"
   }
 }

packages/widget/rslib.config.mjs

@@ -0,0 +1,32 @@
+import { fileURLToPath } from 'node:url';
+import { defineConfig } from '@rslib/core';
+
+const PLUGIN_NAME = 'PluginCommentWidget';
+
+export default defineConfig({
+  lib: [
+    {
+      format: 'esm',
+      autoExternal: false,
+    },
+  ],
+  output: {
+    target: 'web',
+    minify: true,
+    cleanDistPath: true,
+    filename: {
+      js: (pathData) => {
+        if (pathData.chunk.name === 'index') {
+          return 'comment-widget.js';
+        }
+        return '[name].[contenthash:8].js';
+      },
+    },
+    publicPath: `/plugins/${PLUGIN_NAME}/assets/static/`,
+    distPath: {
+      root: fileURLToPath(
+        new URL('../../src/main/resources/static', import.meta.url)
+      ),
+    },
+  },
+});

packages/widget/src/env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="@rslib/core/types" />

packages/widget/src/index.ts

@@ -37,8 +37,6 @@ export function init(el: string, props: Props) {
   commentWidget.replySize = props.replySize || 10;
   commentWidget.withReplies = props.withReplies || false;
   commentWidget.withReplySize = props.withReplySize || 10;
-  commentWidget.emojiDataUrl =
-    '/plugins/PluginCommentWidget/assets/static/emoji/native.json';
   commentWidget.useAvatarProvider = props.useAvatarProvider || false;
   commentWidget.avatarProvider = props.avatarProvider || '';
   commentWidget.avatarProviderMirror = props.avatarProviderMirror || '';