diff --git a/build/sw_plugin.js b/build/sw_plugin.js
index 39cc31405..ee952d229 100644
--- a/build/sw_plugin.js
+++ b/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',
- apply: 'serve',
+ name: 'dev-sw-plugin', 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) {
- if (id === swMessagesName) {
- Object.values(i18nFiles).forEach((f) => {
- this.addWatchFile(f)
- })
+ resolveId: {
+ filter: { id: exactRegex(swMessagesName) },
+ handler() {
return swMessagesNameResolved
- } else {
- return null
}
},
- async load(id) {
- if (id === swMessagesNameResolved) {
+ load: {
+ filter: { id: exactRegex(swMessagesNameResolved) },
+ async handler () {
return await getSWMessagesAsText()
}
- return null
},
}
}
diff --git a/package.json b/package.json
index 9bead54f9..4376bcdcf 100644
--- a/package.json
+++ b/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"
diff --git a/src/boot/routes.js b/src/boot/routes.js
index 5c87cf586..b6ff1e193 100644
--- a/src/boot/routes.js
+++ b/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,
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 526f646ab..8b69f3d9d 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -37,7 +37,7 @@
:title="$t('emoji.add_emoji')"
@click.prevent="togglePicker"
>
-
+
import('src/components/status/status.vue'),
- ),
+ Status,
},
name: 'Quote',
props: {
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 005956ce7..af177d298 100644
--- a/src/components/status/status.js
+++ b/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 EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
-import Quote from '../quote/quote.vue'
-import StatusContent from '../status_content/status_content.vue'
-import StatusPopover from '../status_popover/status_popover.vue'
-import Timeago from '../timeago/timeago.vue'
-import UserAvatar from '../user_avatar/user_avatar.vue'
-import UserLink from '../user_link/user_link.vue'
-import UserListPopover from '../user_list_popover/user_list_popover.vue'
-import UserPopover from '../user_popover/user_popover.vue'
+import AvatarList from 'src/components/avatar_list/avatar_list.vue'
+import EmojiReactions from 'src/components/emoji_reactions/emoji_reactions.vue'
+import StatusContent from 'src/components/status_content/status_content.vue'
+import Timeago from 'src/components/timeago/timeago.vue'
+import UserAvatar from 'src/components/user_avatar/user_avatar.vue'
+import UserLink from 'src/components/user_link/user_link.vue'
+import UserListPopover from 'src/components/user_list_popover/user_list_popover.vue'
+import UserPopover from 'src/components/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: [
diff --git a/src/components/status_action_buttons/action_button.js b/src/components/status_action_buttons/action_button.js
index 5f7942162..2abf2f941 100644
--- a/src/components/status_action_buttons/action_button.js
+++ b/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,
- EmojiPicker,
+ StatusBookmarkFolderMenu: defineAsyncComponent(
+ () => import( 'src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue'),
+ ),
+ EmojiPicker: defineAsyncComponent(
+ () => import( 'src/components/emoji_picker/emoji_picker.vue'),
+ ),
Popover,
},
data: () => ({
diff --git a/src/components/status_action_buttons/action_button_container.vue b/src/components/status_action_buttons/action_button_container.vue
index 348b158a7..da0beed79 100644
--- a/src/components/status_action_buttons/action_button_container.vue
+++ b/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)"
/>
true,
active: ({ emojiPickerShown }) => emojiPickerShown,
toggleable: true,
diff --git a/src/components/status_action_buttons/status_action_buttons.vue b/src/components/status_action_buttons/status_action_buttons.vue
index 7017a8cf0..bdb95e83b 100644
--- a/src/components/status_action_buttons/status_action_buttons.vue
+++ b/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"
/>