Merge branch 'optimize' into shigusegubu-themes3

build/sw_plugin.js

@@ -3,6 +3,7 @@ import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import * as esbuild from 'esbuild'
 import { build } from 'vite'
+import { exactRegex } from '@rolldown/pluginutils'
 
 import {
   generateServiceWorkerMessages,
@@ -15,22 +16,15 @@ const getSWMessagesAsText = async () => {
 }
 const projectRoot = dirname(dirname(fileURLToPath(import.meta.url)))
 
-const swEnvName = 'virtual:pleroma-fe/service_worker_env'
-const swEnvNameResolved = '\0' + swEnvName
 const getDevSwEnv = () => `self.serviceWorkerOption = { assets: [] };`
 const getProdSwEnv = ({ assets }) =>
   `self.serviceWorkerOption = { assets: ${JSON.stringify(assets)} };`
 
-export const devSwPlugin = ({ swSrc, swDest, transformSW, alias }) => {
+export const devSwPlugin = ({ swSrc, swDest }) => {
   const swFullSrc = resolve(projectRoot, swSrc)
-  const esbuildAlias = {}
-  Object.entries(alias).forEach(([source, dest]) => {
-    esbuildAlias[source] = dest.startsWith('/') ? projectRoot + dest : dest
-  })
 
   return {
-    name: 'dev-sw-plugin',
+    name: 'dev-sw-plugin', apply: 'serve',
-    apply: 'serve',
     configResolved() {
       /* no-op */
     },
@@ -38,174 +32,35 @@ export const devSwPlugin = ({ swSrc, swDest, transformSW, alias }) => {
       const name = id.startsWith('/') ? id.slice(1) : id
       if (name === swDest) {
         return swFullSrc
-      } else if (name === swEnvName) {
-        return swEnvNameResolved
       }
       return null
     },
     async load(id) {
       if (id === swFullSrc) {
         return readFile(swFullSrc, 'utf-8')
-      } else if (id === swEnvNameResolved) {
-        return getDevSwEnv()
       }
       return null
     },
-    /**
-     * vite does not bundle the service worker
-     * during dev, and firefox does not support ESM as service worker
-     * https://bugzilla.mozilla.org/show_bug.cgi?id=1360870
-     */
-    async transform(code, id) {
-      if (id === swFullSrc && transformSW) {
-        const res = await esbuild.build({
-          entryPoints: [swSrc],
-          bundle: true,
-          write: false,
-          outfile: 'sw-pleroma.js',
-          alias: esbuildAlias,
-          plugins: [
-            {
-              name: 'vite-like-root-resolve',
-              setup(b) {
-                b.onResolve({ filter: new RegExp(/^\//) }, (args) => ({
-                  path: resolve(projectRoot, args.path.slice(1)),
-                }))
-              },
-            },
-            {
-              name: 'sw-messages',
-              setup(b) {
-                b.onResolve(
-                  { filter: new RegExp('^' + swMessagesName + '$') },
-                  (args) => ({
-                    path: args.path,
-                    namespace: 'sw-messages',
-                  }),
-                )
-                b.onLoad(
-                  { filter: /.*/, namespace: 'sw-messages' },
-                  async () => ({
-                    contents: await getSWMessagesAsText(),
-                  }),
-                )
-              },
-            },
-            {
-              name: 'sw-env',
-              setup(b) {
-                b.onResolve(
-                  { filter: new RegExp('^' + swEnvName + '$') },
-                  (args) => ({
-                    path: args.path,
-                    namespace: 'sw-env',
-                  }),
-                )
-                b.onLoad({ filter: /.*/, namespace: 'sw-env' }, () => ({
-                  contents: getDevSwEnv(),
-                }))
-              },
-            },
-          ],
-        })
-        const text = res.outputFiles[0].text
-        return text
-      }
-    },
   }
 }
 
-// Idea taken from
-// https://github.com/vite-pwa/vite-plugin-pwa/blob/main/src/plugins/build.ts
-// rollup does not support compiling to iife if we want to code-split;
-// however, we must compile the service worker to iife because of browser support.
-// Run another vite build just for the service worker targeting iife at
-// the end of the build.
-export const buildSwPlugin = ({ swSrc, swDest }) => {
-  let config
-  return {
-    name: 'build-sw-plugin',
-    enforce: 'post',
-    apply: 'build',
-    configResolved(resolvedConfig) {
-      config = {
-        define: resolvedConfig.define,
-        resolve: resolvedConfig.resolve,
-        plugins: [swMessagesPlugin()],
-        publicDir: false,
-        build: {
-          ...resolvedConfig.build,
-          lib: {
-            entry: swSrc,
-            formats: ['iife'],
-            name: 'sw_pleroma',
-          },
-          emptyOutDir: false,
-          rolldownOptions: {
-            output: {
-              entryFileNames: swDest,
-            },
-          },
-        },
-        configFile: false,
-      }
-    },
-    generateBundle: {
-      order: 'post',
-      sequential: true,
-      async handler(_, bundle) {
-        const assets = Object.keys(bundle)
-          .filter((name) => !/\.map$/.test(name))
-          .map((name) => '/' + name)
-        config.plugins.push({
-          name: 'build-sw-env-plugin',
-          resolveId(id) {
-            if (id === swEnvName) {
-              return swEnvNameResolved
-            }
-            return null
-          },
-          load(id) {
-            if (id === swEnvNameResolved) {
-              return getProdSwEnv({ assets })
-            }
-            return null
-          },
-        })
-      },
-    },
-    closeBundle: {
-      order: 'post',
-      sequential: true,
-      async handler() {
-        console.info('Building service worker for production')
-        await build(config)
-      },
-    },
-  }
-}
-
-const swMessagesName = 'virtual:pleroma-fe/service_worker_messages'
-const swMessagesNameResolved = '\0' + swMessagesName
-
 export const swMessagesPlugin = () => {
+  const swMessagesName = 'virtual:pleroma-fe/service_worker_messages'
+  const swMessagesNameResolved = '\0' + swMessagesName
+
   return {
     name: 'sw-messages-plugin',
-    resolveId(id) {
+    resolveId: {
-      if (id === swMessagesName) {
+      filter: { id: exactRegex(swMessagesName) },
-        Object.values(i18nFiles).forEach((f) => {
+      handler() {
-          this.addWatchFile(f)
-        })
         return swMessagesNameResolved
-      } else {
-        return null
       }
     },
-    async load(id) {
+    load: {
-      if (id === swMessagesNameResolved) {
+      filter: { id: exactRegex(swMessagesNameResolved) },
+      async handler () {
         return await getSWMessagesAsText()
       }
-      return null
     },
   }
 }

package.json

@@ -97,6 +97,7 @@
     "lodash": "4.17.21",
     "msw": "2.10.5",
     "nightwatch": "3.12.2",
+    "oxc": "^1.0.1",
     "playwright": "1.57.0",
     "postcss": "8.5.6",
     "postcss-html": "^1.5.0",
@@ -116,6 +117,7 @@
     "stylelint-config-standard": "38.0.0",
     "vite": "^8.0.0",
     "vite-plugin-eslint2": "^5.1.0",
+    "vite-plugin-pwa": "^1.3.0",
     "vite-plugin-stylelint": "^6.1.0",
     "vitest": "^3.0.7",
     "vue-eslint-parser": "10.2.0"

src/boot/routes.js

@@ -1,17 +1,16 @@
-import { defineAsyncComponent } from 'vue'
-
-import About from 'src/components/about/about.vue'
 import BookmarkTimeline from 'src/components/bookmark_timeline/bookmark_timeline.vue'
 import BubbleTimeline from 'src/components/bubble_timeline/bubble_timeline.vue'
 import ConversationPage from 'src/components/conversation-page/conversation-page.vue'
 import DMs from 'src/components/dm_timeline/dm_timeline.vue'
 import FriendsTimeline from 'src/components/friends_timeline/friends_timeline.vue'
-import NavPanel from 'src/components/nav_panel/nav_panel.vue'
 import PublicAndExternalTimeline from 'src/components/public_and_external_timeline/public_and_external_timeline.vue'
 import PublicTimeline from 'src/components/public_timeline/public_timeline.vue'
-import QuotesTimeline from 'src/components/quotes_timeline/quotes_timeline.vue'
 import RemoteUserResolver from 'src/components/remote_user_resolver/remote_user_resolver.vue'
 import TagTimeline from 'src/components/tag_timeline/tag_timeline.vue'
+import { defineAsyncComponent } from 'vue'
+
+import NavPanel from 'src/components/nav_panel/nav_panel.vue'
+import QuotesTimeline from 'src/components/quotes_timeline/quotes_timeline.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
@@ -142,14 +141,14 @@ export default (store) => {
       name: 'login',
       path: '/login',
       component: defineAsyncComponent(
-        () => import('src/components/auth_form/auth_form.js'),
+        () => import( 'src/components/auth_form/auth_form.js'),
       ),
     },
     {
       name: 'shout-panel',
       path: '/shout-panel',
       component: defineAsyncComponent(
-        () => import('src/components/shout_panel/shout_panel.vue'),
+        () => import( 'src/components/shout_panel/shout_panel.vue'),
       ),
       props: () => ({ floating: false }),
     },
@@ -165,7 +164,7 @@ export default (store) => {
       name: 'search',
       path: '/search',
       component: defineAsyncComponent(
-        () => import('src/components/search/search.vue'),
+        () => import( 'src/components/search/search.vue'),
       ),
       props: (route) => ({ query: route.query.query }),
     },
@@ -173,24 +172,29 @@ export default (store) => {
       name: 'who-to-follow',
       path: '/who-to-follow',
       component: defineAsyncComponent(
-        () => import('src/components/who_to_follow/who_to_follow.vue'),
+        () => import( 'src/components/who_to_follow/who_to_follow.vue'),
       ),
       beforeEnter: validateAuthenticatedRoute,
     },
-    { name: 'about', path: '/about', component: About },
+    {
+      name: 'about',
+      path: '/about',
+      component: defineAsyncComponent(
+        () => import( 'src/components/about/about.vue'),
+      ),
+    },
     {
       name: 'announcements',
       path: '/announcements',
       component: defineAsyncComponent(
-        () =>
+        () => import( 'src/components/announcements_page/announcements_page.vue'),
-          import('src/components/announcements_page/announcements_page.vue'),
       ),
     },
     {
       name: 'drafts',
       path: '/drafts',
       component: defineAsyncComponent(
-        () => import('src/components/drafts/drafts.vue'),
+        () => import( 'src/components/drafts/drafts.vue'),
       ),
     },
     {
@@ -211,28 +215,28 @@ export default (store) => {
       name: 'lists',
       path: '/lists',
       component: defineAsyncComponent(
-        () => import('src/components/lists/lists.vue'),
+        () => import( 'src/components/lists/lists.vue'),
       ),
     },
     {
       name: 'lists-timeline',
       path: '/lists/:id',
       component: defineAsyncComponent(
-        () => import('src/components/lists_timeline/lists_timeline.vue'),
+        () => import( 'src/components/lists_timeline/lists_timeline.vue'),
       ),
     },
     {
       name: 'lists-edit',
       path: '/lists/:id/edit',
       component: defineAsyncComponent(
-        () => import('src/components/lists_edit/lists_edit.vue'),
+        () => import( 'src/components/lists_edit/lists_edit.vue'),
       ),
     },
     {
       name: 'lists-new',
       path: '/lists/new',
       component: defineAsyncComponent(
-        () => import('src/components/lists_edit/lists_edit.vue'),
+        () => import( 'src/components/lists_edit/lists_edit.vue'),
       ),
     },
     {
@@ -246,17 +250,14 @@ export default (store) => {
       name: 'bookmark-folders',
       path: '/bookmark_folders',
       component: defineAsyncComponent(
-        () => import('src/components/bookmark_folders/bookmark_folders.vue'),
+        () => import( 'src/components/bookmark_folders/bookmark_folders.vue'),
       ),
     },
     {
       name: 'bookmark-folder-new',
       path: '/bookmarks/new-folder',
       component: defineAsyncComponent(
-        () =>
+        () => import( 'src/components/bookmark_folder_edit/bookmark_folder_edit.vue'),
-          import(
-            'src/components/bookmark_folder_edit/bookmark_folder_edit.vue'
-          ),
       ),
     },
     {
@@ -268,10 +269,7 @@ export default (store) => {
       name: 'bookmark-folder-edit',
       path: '/bookmarks/:id/edit',
       component: defineAsyncComponent(
-        () =>
+        () => import( 'src/components/bookmark_folder_edit/bookmark_folder_edit.vue'),
-          import(
-            'src/components/bookmark_folder_edit/bookmark_folder_edit.vue'
-          ),
       ),
     },
   ]
@@ -282,7 +280,7 @@ export default (store) => {
         name: 'chat',
         path: '/users/:username/chats/:recipient_id',
         component: defineAsyncComponent(
-          () => import('src/components/chat/chat.vue'),
+          () => import( 'src/components/chat/chat.vue'),
         ),
         meta: { dontScroll: false },
         beforeEnter: validateAuthenticatedRoute,
@@ -291,7 +289,7 @@ export default (store) => {
         name: 'chats',
         path: '/users/:username/chats',
         component: defineAsyncComponent(
-          () => import('src/components/chat_list/chat_list.vue'),
+          () => import( 'src/components/chat_list/chat_list.vue'),
         ),
         meta: { dontScroll: false },
         beforeEnter: validateAuthenticatedRoute,

src/components/emoji_input/emoji_input.vue

@@ -37,7 +37,7 @@
         :title="$t('emoji.add_emoji')"
         @click.prevent="togglePicker"
       >
-        <FAIcon :icon="['far', 'smile-beam']" />
+        <FAIcon :icon="['far', 'face-smile-beam']" />
       </button>
       <EmojiPicker
         v-if="enableEmojiPicker"

src/components/quote/quote.js

@@ -1,5 +1,6 @@
 import { defineAsyncComponent } from 'vue'
 
+import Status from '../status/status.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 
@@ -7,10 +8,7 @@ library.add(faCircleNotch)
 
 export default {
   components: {
-    // Quote and Status depend on each other, dynamic import to break this circular dependency
+    Status,
-    Status: defineAsyncComponent(
-      () => import('src/components/status/status.vue'),
-    ),
   },
   name: 'Quote',
   props: {

src/components/status/status.js

@@ -10,16 +10,14 @@ import {
   highlightClass,
   highlightStyle,
 } from '../../services/user_highlighter/user_highlighter.js'
-import AvatarList from '../avatar_list/avatar_list.vue'
+import AvatarList from 'src/components/avatar_list/avatar_list.vue'
-import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
+import EmojiReactions from 'src/components/emoji_reactions/emoji_reactions.vue'
-import Quote from '../quote/quote.vue'
+import StatusContent from 'src/components/status_content/status_content.vue'
-import StatusContent from '../status_content/status_content.vue'
+import Timeago from 'src/components/timeago/timeago.vue'
-import StatusPopover from '../status_popover/status_popover.vue'
+import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
-import Timeago from '../timeago/timeago.vue'
+import UserLink from 'src/components/user_link/user_link.vue'
-import UserAvatar from '../user_avatar/user_avatar.vue'
+import UserListPopover from 'src/components/user_list_popover/user_list_popover.vue'
-import UserLink from '../user_link/user_link.vue'
+import UserPopover from 'src/components/user_popover/user_popover.vue'
-import UserListPopover from '../user_list_popover/user_list_popover.vue'
-import UserPopover from '../user_popover/user_popover.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
@@ -123,7 +121,9 @@ const Status = {
     UserAvatar,
     AvatarList,
     Timeago,
-    StatusPopover,
+    StatusPopover: defineAsyncComponent(
+      () => import( 'src/components/status_popover/status_popover.vue')
+    ),
     UserListPopover,
     EmojiReactions,
     StatusContent,
@@ -132,7 +132,9 @@ const Status = {
     MentionsLine,
     UserPopover,
     UserLink,
-    Quote,
+    Quote: defineAsyncComponent(
+      () => import('src/components/quote/quote.vue')
+    ),
     StatusActionButtons,
   },
   props: [

src/components/status_action_buttons/action_button.js

@@ -1,15 +1,15 @@
-import EmojiPicker from 'src/components/emoji_picker/emoji_picker.vue'
 import Popover from 'src/components/popover/popover.vue'
-import StatusBookmarkFolderMenu from 'src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
+import { defineAsyncComponent } from 'vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBookmark as faBookmarkRegular,
   faStar as faStarRegular,
+  faFaceSmileBeam,
 } from '@fortawesome/free-regular-svg-icons'
 import {
   faBookmark,
@@ -24,7 +24,6 @@ import {
   faReply,
   faRetweet,
   faShareAlt,
-  faSmileBeam,
   faStar,
   faThumbtack,
   faTimes,
@@ -45,7 +44,7 @@ library.add(
   faRetweet,
   faStar,
   faStarRegular,
-  faSmileBeam,
+  faFaceSmileBeam,
 
   faBookmark,
   faBookmarkRegular,
@@ -69,8 +68,12 @@ export default {
     'outerClose',
   ],
   components: {
-    StatusBookmarkFolderMenu,
+    StatusBookmarkFolderMenu: defineAsyncComponent(
-    EmojiPicker,
+      () => import( 'src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue'),
+    ),
+    EmojiPicker: defineAsyncComponent(
+      () => import( 'src/components/emoji_picker/emoji_picker.vue'),
+    ),
     Popover,
   },
   data: () => ({

src/components/status_action_buttons/action_button_container.vue

@@ -79,7 +79,7 @@
       :button="button"
       :status="status"
       v-bind="$attrs"
-      @emojiPickerShown="e => $emit('emojiPickerShown', e)"
+      @emoji-picker-shown="e => $emit('emojiPickerShown', e)"
     />
     <teleport to="#modal">
       <MuteConfirm

src/components/status_action_buttons/buttons_definitions.js

@@ -96,7 +96,7 @@ export const BUTTONS = [
     // =========
     name: 'emoji',
     label: 'tool_tip.add_reaction',
-    icon: ['far', 'smile-beam'],
+    icon: ['far', 'face-smile-beam'],
     interactive: () => true,
     active: ({ emojiPickerShown }) => emojiPickerShown,
     toggleable: true,

src/components/status_action_buttons/status_action_buttons.vue

@@ -20,7 +20,7 @@
           :get-component="getComponent"
           :close="() => { /* no-op */ }"
           :do-action="doAction"
-          @emojiPickerShown="onEmojiPickerShown"
+          @emoji-picker-shown="onEmojiPickerShown"
         />
         <button
           v-if="showPin && currentUser"

src/components/status_popover/status_popover.js

@@ -1,7 +1,7 @@
 import { find } from 'lodash'
-import { defineAsyncComponent } from 'vue'
 
 import Popover from 'src/components/popover/popover.vue'
+import Status from '../status/status.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
@@ -22,9 +22,7 @@ const StatusPopover = {
     },
   },
   components: {
-    Status: defineAsyncComponent(
+    Status,
-      () => import('src/components/status/status.vue'),
-    ),
     Popover,
   },
   methods: {

src/i18n/messages.js

@@ -20,6 +20,7 @@ const languageFileMap = import.meta.glob(['./*.json', '!./en.json'])
 
 const loadLanguageFile = (code) => {
   const jsonName = langCodeToJsonName(code)
+  if (jsonName === 'en') return Promise.resolve({ default: enMessages })
   return languageFileMap[`./${jsonName}.json`]()
 }
 

src/services/sw/sw.js

@@ -18,7 +18,8 @@ function isPushSupported() {
 function getOrCreateServiceWorker() {
   if (!isSWSupported()) return
   const swType = process.env.HAS_MODULE_SERVICE_WORKER ? 'module' : 'classic'
-  return navigator.serviceWorker
+  return navigator
+    .serviceWorker
     .register('/sw-pleroma.js', { type: swType })
     .catch((err) =>
       console.error('Unable to get or create a service worker.', err),

src/sw.js

@@ -1,7 +1,5 @@
 /* eslint-env serviceworker */
 
-import 'virtual:pleroma-fe/service_worker_env'
-
 import { createI18n } from 'vue-i18n'
 
 import { storage } from 'src/lib/storage.js'

vite.config.js

@@ -11,12 +11,12 @@ import { configDefaults } from 'vitest/config'
 import { getCommitHash } from './build/commit_hash.js'
 import copyPlugin from './build/copy_plugin.js'
 import emojisPlugin from './build/emojis_plugin.js'
-import mswPlugin from './build/msw_plugin.js'
 import {
-  buildSwPlugin,
   devSwPlugin,
   swMessagesPlugin,
 } from './build/sw_plugin.js'
+import { VitePWA } from 'vite-plugin-pwa'
+
 
 const localConfigPath = '<projectRoot>/config/local.json'
 const normalizeTarget = (target) => {
@@ -142,9 +142,6 @@ export default defineConfig(async ({ mode, command }) => {
           // outDir: 'custom-dir', // optional, defaults to Vite's build.outDir
         },
       }),
-      devSwPlugin({ swSrc, swDest, transformSW, alias }),
-      buildSwPlugin({ swSrc, swDest }),
-      swMessagesPlugin(),
       emojisPlugin(),
       copyPlugin({
         inUrl: '/static/ruffle',
@@ -163,7 +160,8 @@ export default defineConfig(async ({ mode, command }) => {
           'node_modules/.cache/stylelintcache',
         ),
       }),
-      ...(mode === 'test' ? [mswPlugin()] : []),
+      swMessagesPlugin(),
+      devSwPlugin({ swSrc, swDest }),
     ],
     optimizeDeps: {
       // For unknown reasons, during vitest, vite will re-optimize the following
@@ -208,6 +206,7 @@ export default defineConfig(async ({ mode, command }) => {
         devtools: {}, // enable devtools mode
         input: {
           main: 'index.html',
+          sw: 'src/sw.js',
         },
         output: {
           entryFileNames(chunkInfo) {