Use vite to replace webpack

src/assets/pleromatan_apology.png

@@ -1 +0,0 @@
-../../static/pleromatan_apology.png

src/assets/pleromatan_apology_fox.png

@@ -1 +0,0 @@
-../../static/pleromatan_apology_fox.png

src/components/rich_content/rich_content.jsx

@@ -3,7 +3,8 @@ import { getTagName, processTextForEmoji, getAttrs } from 'src/services/html_con
 import { convertHtmlToTree } from 'src/services/html_converter/html_tree_converter.service.js'
 import { convertHtmlToLines } from 'src/services/html_converter/html_line_converter.service.js'
 import StillImage from 'src/components/still-image/still-image.vue'
-import MentionsLine, { MENTIONS_LIMIT } from 'src/components/mentions_line/mentions_line.vue'
+import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
+import { MENTIONS_LIMIT } from 'src/components/mentions_line/mentions_line.js'
 import HashtagLink from 'src/components/hashtag_link/hashtag_link.vue'
 
 import './rich_content.scss'

src/components/settings_modal/tabs/appearance_tab.js

@@ -2,7 +2,8 @@ import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
-import UnitSetting, { defaultHorizontalUnits } from '../helpers/unit_setting.vue'
+import UnitSetting from '../helpers/unit_setting.vue'
+import { defaultHorizontalUnits } from '../helpers/unit_setting.js'
 import PaletteEditor from 'src/components/palette_editor/palette_editor.vue'
 import Preview from './theme_tab/theme_preview.vue'
 import FontControl from 'src/components/font_control/font_control.vue'

src/components/settings_modal/tabs/style_tab/style_tab.js

@@ -221,12 +221,15 @@ export default {
 
     // ## Components stuff
     // Getting existing components
-    const componentsContext = require.context('src', true, /\.style.js(on)?$/)
-    const componentKeysAll = componentsContext.keys()
+    const componentsContext = import.meta.glob(
+      ['/src/**/*.style.js', '/src/**/*.style.json'],
+      { eager: true }
+    )
+    const componentKeysAll = Object.keys(componentsContext)
     const componentsMap = new Map(
       componentKeysAll
         .map(
-          key => [key, componentsContext(key).default]
+          key => [key, componentsContext[key].default]
         ).filter(([, component]) => !component.virtual && !component.notEditable)
     )
     exports.componentsMap = componentsMap

src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue

@@ -22,4 +22,4 @@
 </template>
 
 <script src="./status_bookmark_folder_menu.js"></script>
-<stlye src="./status_bookmark_folder_menu.scss" />
+<style src="./status_bookmark_folder_menu.scss" />

src/components/timeline_menu/timeline_menu.js

@@ -1,8 +1,8 @@
 import Popover from '../popover/popover.vue'
 import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
 import { mapState } from 'vuex'
-import { ListsMenuContent } from '../lists_menu/lists_menu_content.vue'
-import { BookmarkFoldersMenuContent } from '../bookmark_folders_menu/bookmark_folders_menu_content.vue'
+import ListsMenuContent from '../lists_menu/lists_menu_content.vue'
+import BookmarkFoldersMenuContent from '../bookmark_folders_menu/bookmark_folders_menu_content.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { TIMELINES } from 'src/components/navigation/navigation.js'
 import { filterNavigation } from 'src/components/navigation/filter.js'

src/components/update_notification/update_notification.js

@@ -1,7 +1,5 @@
 import Modal from 'src/components/modal/modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import pleromaTan from 'src/assets/pleromatan_apology.png'
-import pleromaTanFox from 'src/assets/pleromatan_apology_fox.png'
 import pleromaTanMask from 'src/assets/pleromatan_apology_mask.png'
 import pleromaTanFoxMask from 'src/assets/pleromatan_apology_fox_mask.png'
 
@@ -14,6 +12,9 @@ library.add(
 
 export const CURRENT_UPDATE_COUNTER = 1
 
+const pleromaTan = '/static/pleromatan_apology.png'
+const pleromaTanFox = '/static/pleromatan_apology_fox.png'
+
 const UpdateNotification = {
   data () {
     return {

src/i18n/languages.js

@@ -46,7 +46,7 @@ const ensureFinalFallback = codes => {
   return codeList.includes('en') ? codeList : codeList.concat(['en'])
 }
 
-module.exports = {
+export {
   languages,
   langCodeToJsonName,
   langCodeToCldrName,

src/i18n/messages.js

@@ -9,23 +9,23 @@
 
 import { isEqual } from 'lodash'
 import { languages, langCodeToJsonName } from './languages.js'
+import enMessages from './en.json'
 
 const ULTIMATE_FALLBACK_LOCALE = 'en'
 
 const hasLanguageFile = (code) => languages.includes(code)
 
+const languageFileMap = import.meta.glob('./*.json')
+
 const loadLanguageFile = (code) => {
-  return import(
-    /* webpackInclude: /\.json$/ */
-    /* webpackChunkName: "i18n/[request]" */
-    `./${langCodeToJsonName(code)}.json`
-  )
+  const jsonName = langCodeToJsonName(code)
+  return languageFileMap[`./${jsonName}.json`]()
 }
 
 const messages = {
   languages,
   default: {
-    en: require('./en.json').default
+    en: enMessages
   },
   setLanguage: async (i18n, language) => {
     const languages = (Array.isArray(language) ? language : [language]).filter(k => k)

src/modules/instance.js

@@ -179,9 +179,9 @@ const defaultState = {
 }
 
 const loadAnnotations = (lang) => {
+  const code = langCodeToCldrName(lang)
   return import(
-    /* webpackChunkName: "emoji-annotations/[request]" */
-    `@kazvmoe-infra/unicode-emoji-json/annotations/${langCodeToCldrName(lang)}.json`
+    `../../node_modules/@kazvmoe-infra/unicode-emoji-json/annotations/${code}.json`
   )
     .then(k => k.default)
 }
@@ -304,7 +304,7 @@ const instance = {
     },
     async getStaticEmoji ({ commit }) {
       try {
-        const values = (await import(/* webpackChunkName: 'emoji' */ '../../static/emoji.json')).default
+        const values = (await import('/src/assets/emoji.json')).default
 
         const emoji = Object.keys(values).reduce((res, groupId) => {
           res[groupId] = values[groupId].map(e => ({

src/services/entity_normalizer/entity_normalizer.service.js

@@ -1,5 +1,5 @@
 import escape from 'escape-html'
-import parseLinkHeader from 'parse-link-header'
+import { parseLinkHeader } from '@web3-storage/parse-link-header'
 import { isStatusNotification } from '../notification_utils/notification_utils.js'
 import punycode from 'punycode.js'
 
@@ -484,8 +484,8 @@ export const parseLinkHeaderPagination = (linkHeader, opts = {}) => {
   const flakeId = opts.flakeId
   const parsedLinkHeader = parseLinkHeader(linkHeader)
   if (!parsedLinkHeader) return
-  const maxId = parsedLinkHeader.next.max_id
-  const minId = parsedLinkHeader.prev.min_id
+  const maxId = parsedLinkHeader.next?.max_id
+  const minId = parsedLinkHeader.prev?.min_id
 
   return {
     maxId: flakeId ? maxId : parseInt(maxId, 10),

src/services/sw/sw.js

@@ -1,5 +1,3 @@
-import runtime from 'serviceworker-webpack5-plugin/lib/runtime'
-
 function urlBase64ToUint8Array (base64String) {
   const padding = '='.repeat((4 - base64String.length % 4) % 4)
   const base64 = (base64String + padding)
@@ -19,7 +17,8 @@ function isPushSupported () {
 }
 
 function getOrCreateServiceWorker () {
-  return runtime.register()
+  const swType = process.env.HAS_MODULE_SERVICE_WORKER ? 'module' : 'classic'
+  return navigator.serviceWorker.register('/sw-pleroma.js', { type: swType })
     .catch((err) => console.error('Unable to get or create a service worker.', err))
 }
 
@@ -98,14 +97,14 @@ export async function initServiceWorker (store) {
 
 export async function showDesktopNotification (content) {
   if (!isSWSupported) return
-  const { active: sw } = await window.navigator.serviceWorker.getRegistration()
+  const { active: sw } = (await window.navigator.serviceWorker.getRegistration()) || {}
   if (!sw) return console.error('No serviceworker found!')
   sw.postMessage({ type: 'desktopNotification', content })
 }
 
 export async function closeDesktopNotification ({ id }) {
   if (!isSWSupported) return
-  const { active: sw } = await window.navigator.serviceWorker.getRegistration()
+  const { active: sw } = (await window.navigator.serviceWorker.getRegistration()) || {}
   if (!sw) return console.error('No serviceworker found!')
   if (id >= 0) {
     sw.postMessage({ type: 'desktopNotificationClose', content: { id } })
@@ -116,7 +115,7 @@ export async function closeDesktopNotification ({ id }) {
 
 export async function updateFocus () {
   if (!isSWSupported) return
-  const { active: sw } = await window.navigator.serviceWorker.getRegistration()
+  const { active: sw } = (await window.navigator.serviceWorker.getRegistration()) || {}
   if (!sw) return console.error('No serviceworker found!')
   sw.postMessage({ type: 'updateFocus' })
 }

src/services/theme_data/theme_data_3.service.js

@@ -146,9 +146,12 @@ const getTextColorAlpha = (directives, intendedTextColor, dynamicVars, staticVar
 }
 
 // Loading all style.js[on] files dynamically
-const componentsContext = require.context('src', true, /\.style.js(on)?$/)
-componentsContext.keys().forEach(key => {
-  const component = componentsContext(key).default
+const componentsContext = import.meta.glob(
+  ['/src/**/*.style.js', '/src/**/*.style.json'],
+  { eager: true }
+)
+Object.keys(componentsContext).forEach(key => {
+  const component = componentsContext[key].default
   if (components[component.name] != null) {
     console.warn(`Component in file ${key} is trying to override existing component ${component.name}! You have collisions/duplicates!`)
   }

src/sw.js

@@ -4,7 +4,7 @@ import { storage } from 'src/lib/storage.js'
 import { parseNotification } from './services/entity_normalizer/entity_normalizer.service.js'
 import { prepareNotificationObject } from './services/notification_utils/notification_utils.js'
 import { createI18n } from 'vue-i18n'
-import messages from './i18n/service_worker_messages.js'
+import messages from 'virtual:pleroma-fe/service_worker_messages'
 
 const i18n = createI18n({
   // By default, use the browser locale, we will update it if neccessary
@@ -139,3 +139,5 @@ self.addEventListener('notificationclick', (event) => {
     if (clients.openWindow) return clients.openWindow('/')
   }))
 })
+
+console.log('sw here')