From 25de264abb217c4e30723c372eeb9555135690df Mon Sep 17 00:00:00 2001 From: tusooa Date: Fri, 28 Feb 2025 10:52:04 -0500 Subject: [PATCH 01/12] Use vite to replace webpack --- .gitignore | 2 +- build/service_worker_messages.js | 24 + build/sw_plugin.js | 128 +++ build/update-emoji.js | 42 +- static/.gitkeep => changelog.d/vite.skip | 0 index.html | 3 +- package.json | 10 +- postcss.config.js | 6 +- {static => public/static}/.gitignore | 0 public/static/.gitkeep | 0 {static => public/static}/aurora_borealis.jpg | Bin {static => public/static}/config.json | 0 {static => public/static}/logo.svg | 0 {static => public/static}/palettes/index.json | 0 .../static}/pleromatan_apology.png | Bin .../static}/pleromatan_apology_fox.png | Bin .../static}/pleromatan_apology_fox_small.webp | Bin .../static}/pleromatan_apology_small.webp | Bin {static => public/static}/pleromatan_orz.png | Bin .../static}/pleromatan_orz_fox.png | Bin {static => public/static}/styles.json | 0 .../static}/styles/Breezy DX.iss | 0 .../static}/styles/Redmond DX.iss | 0 {static => public/static}/styles/index.json | 0 .../static}/terms-of-service.html | 0 .../static}/themes/breezy-dark.json | 0 .../static}/themes/breezy-light.json | 0 {static => public/static}/themes/mammal.json | 0 {static => public/static}/themes/paper.json | 0 .../static}/themes/pleroma-dark.json | 0 .../static}/themes/pleroma-light.json | 0 .../static}/themes/redmond-xx-se.json | 0 .../static}/themes/redmond-xx.json | 0 .../static}/themes/redmond-xxi.json | 0 src/assets/pleromatan_apology.png | 1 - src/assets/pleromatan_apology_fox.png | 1 - src/components/rich_content/rich_content.jsx | 3 +- .../settings_modal/tabs/appearance_tab.js | 3 +- .../tabs/style_tab/style_tab.js | 9 +- .../status_bookmark_folder_menu.vue | 2 +- src/components/timeline_menu/timeline_menu.js | 4 +- .../update_notification.js | 5 +- src/i18n/languages.js | 2 +- src/i18n/messages.js | 12 +- src/modules/instance.js | 6 +- .../entity_normalizer.service.js | 6 +- src/services/sw/sw.js | 11 +- .../theme_data/theme_data_3.service.js | 9 +- src/sw.js | 4 +- vite.config.js | 135 +++ yarn.lock | 861 +++++++++++++++++- 51 files changed, 1210 insertions(+), 79 deletions(-) create mode 100644 build/service_worker_messages.js create mode 100644 build/sw_plugin.js rename static/.gitkeep => changelog.d/vite.skip (100%) rename {static => public/static}/.gitignore (100%) create mode 100644 public/static/.gitkeep rename {static => public/static}/aurora_borealis.jpg (100%) rename {static => public/static}/config.json (100%) rename {static => public/static}/logo.svg (100%) rename {static => public/static}/palettes/index.json (100%) rename {static => public/static}/pleromatan_apology.png (100%) rename {static => public/static}/pleromatan_apology_fox.png (100%) rename {static => public/static}/pleromatan_apology_fox_small.webp (100%) rename {static => public/static}/pleromatan_apology_small.webp (100%) rename {static => public/static}/pleromatan_orz.png (100%) rename {static => public/static}/pleromatan_orz_fox.png (100%) rename {static => public/static}/styles.json (100%) rename {static => public/static}/styles/Breezy DX.iss (100%) rename {static => public/static}/styles/Redmond DX.iss (100%) rename {static => public/static}/styles/index.json (100%) rename {static => public/static}/terms-of-service.html (100%) rename {static => public/static}/themes/breezy-dark.json (100%) rename {static => public/static}/themes/breezy-light.json (100%) rename {static => public/static}/themes/mammal.json (100%) rename {static => public/static}/themes/paper.json (100%) rename {static => public/static}/themes/pleroma-dark.json (100%) rename {static => public/static}/themes/pleroma-light.json (100%) rename {static => public/static}/themes/redmond-xx-se.json (100%) rename {static => public/static}/themes/redmond-xx.json (100%) rename {static => public/static}/themes/redmond-xxi.json (100%) delete mode 120000 src/assets/pleromatan_apology.png delete mode 120000 src/assets/pleromatan_apology_fox.png create mode 100644 vite.config.js diff --git a/.gitignore b/.gitignore index 0d5befd28..2da6efb0b 100644 --- a/.gitignore +++ b/.gitignore @@ -7,5 +7,5 @@ test/e2e/reports selenium-debug.log .idea/ config/local.json -static/emoji.json +src/assets/emoji.json logs/ diff --git a/build/service_worker_messages.js b/build/service_worker_messages.js new file mode 100644 index 000000000..167b9d39a --- /dev/null +++ b/build/service_worker_messages.js @@ -0,0 +1,24 @@ +import { languages, langCodeToJsonName } from '../src/i18n/languages.js' +import { readFile } from 'node:fs/promises' +import { dirname, resolve } from 'node:path' +import { fileURLToPath } from 'node:url' + +export const generateServiceWorkerMessages = async () => { + const i18nDir = resolve( + dirname(dirname(fileURLToPath(import.meta.url))), + 'src/i18n' + ) + const msgArray = await Promise.all(languages.map(async lang => { + const name = langCodeToJsonName(lang) + const file = resolve(i18nDir, name + '.json') + const fileContent = await readFile(file, 'utf-8') + const msg = { + notifications: JSON.parse(fileContent).notifications || {} + } + return [lang, msg] + })) + return msgArray.reduce((acc, [lang, msg]) => { + acc[lang] = msg + return acc + }, {}) +} diff --git a/build/sw_plugin.js b/build/sw_plugin.js new file mode 100644 index 000000000..a4f08660d --- /dev/null +++ b/build/sw_plugin.js @@ -0,0 +1,128 @@ +import { fileURLToPath } from 'node:url' +import { dirname } from 'node:path' +import { readFile } from 'node:fs/promises' +import { build } from 'vite' +import { generateServiceWorkerMessages } from './service_worker_messages.js' + +const projectRoot = dirname(dirname(fileURLToPath(import.meta.url))) + +export const devSwPlugin = ({ + swSrc, + swDest, +}) => { + return { + name: 'dev-sw-plugin', + apply: 'serve', + resolveId (id) { + const name = id.startsWith('/') ? id.slice(1) : id + if (name === swDest) { + return swSrc + } + return null + }, + async load (id) { + if (id === swSrc) { + return readFile(swSrc, 'utf-8') + } + 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 === swSrc) { + // console.log('load virtual') + // const res = await build({ + // entryPoints: [swSrc], + // bundle: true, + // write: false, + // outfile: 'sw-pleroma.js', + // alias: { + // 'src': projectRoot + '/src', + // }, + // define: { + // 'import.meta.glob': 'require' + // } + // }) + // console.log('res', res) + // const text = res.outputFiles[0].text + // console.log('text', 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, + rollupOptions: { + output: { + entryFileNames: swDest + } + } + }, + configFile: false + } + }, + closeBundle: { + order: 'post', + sequential: true, + async handler () { + console.log('Building service worker for production') + await build(config) + } + } + } +} + +const swMessagesName = 'virtual:pleroma-fe/service_worker_messages' +const swMessagesNameResolved = '\0' + swMessagesName + +export const swMessagesPlugin = () => { + return { + name: 'sw-messages-plugin', + resolveId (id) { + if (id === swMessagesName) { + return swMessagesNameResolved + } else { + return null + } + }, + async load (id) { + if (id === swMessagesNameResolved) { + const messages = await generateServiceWorkerMessages() + return `export default ${JSON.stringify(messages, undefined, 2)}` + } + return null + } + } +} diff --git a/build/update-emoji.js b/build/update-emoji.js index 9f4b4e67a..5d578ba61 100644 --- a/build/update-emoji.js +++ b/build/update-emoji.js @@ -1,27 +1,23 @@ -module.exports = { - updateEmoji () { - const emojis = require('@kazvmoe-infra/unicode-emoji-json/data-by-group') - const fs = require('fs') +import emojis from '@kazvmoe-infra/unicode-emoji-json/data-by-group.json' with { type: 'json' } +import fs from 'fs' - Object.keys(emojis) - .map(k => { - emojis[k].map(e => { - delete e.unicode_version - delete e.emoji_version - delete e.skin_tone_support_unicode_version - }) - }) +Object.keys(emojis) + .map(k => { + emojis[k].map(e => { + delete e.unicode_version + delete e.emoji_version + delete e.skin_tone_support_unicode_version + }) + }) - const res = {} - Object.keys(emojis) - .map(k => { - const groupId = k.replace('&', 'and').replace(/ /g, '-').toLowerCase() - res[groupId] = emojis[k] - }) +const res = {} +Object.keys(emojis) + .map(k => { + const groupId = k.replace('&', 'and').replace(/ /g, '-').toLowerCase() + res[groupId] = emojis[k] + }) - console.info('Updating emojis...') - fs.writeFileSync('static/emoji.json', JSON.stringify(res)) - console.info('Done.') - } -} +console.info('Updating emojis...') +fs.writeFileSync('src/assets/emoji.json', JSON.stringify(res)) +console.info('Done.') diff --git a/static/.gitkeep b/changelog.d/vite.skip similarity index 100% rename from static/.gitkeep rename to changelog.d/vite.skip diff --git a/index.html b/index.html index 7fe3d3806..a2f928361 100644 --- a/index.html +++ b/index.html @@ -167,6 +167,7 @@ -
+
+ diff --git a/package.json b/package.json index 87f7317fb..2d3164585 100644 --- a/package.json +++ b/package.json @@ -5,8 +5,8 @@ "author": "Pleroma contributors ", "private": false, "scripts": { - "dev": "node build/dev-server.js", - "build": "node build/build.js", + "dev": "node build/update-emoji.js && vite dev", + "build": "node build/update-emoji.js && vite build", "unit": "karma start test/unit/karma.conf.js --single-run", "unit:watch": "karma start test/unit/karma.conf.js --single-run=false", "e2e": "node test/e2e/runner.js", @@ -27,6 +27,7 @@ "@ruffle-rs/ruffle": "0.1.0-nightly.2025.1.13", "@vuelidate/core": "2.0.3", "@vuelidate/validators": "2.0.4", + "@web3-storage/parse-link-header": "^3.1.0", "body-scroll-lock": "3.1.5", "chromatism": "3.0.0", "click-outside-vue3": "4.0.1", @@ -58,6 +59,8 @@ "@babel/register": "7.25.9", "@intlify/vue-i18n-loader": "5.0.1", "@ungap/event-target": "0.2.4", + "@vitejs/plugin-vue": "^5.2.1", + "@vitejs/plugin-vue-jsx": "^4.1.1", "@vue/babel-helper-vue-jsx-merge-props": "1.4.0", "@vue/babel-plugin-jsx": "1.2.5", "@vue/compiler-sfc": "3.5.13", @@ -123,6 +126,8 @@ "stylelint-config-standard": "29.0.0", "stylelint-rscss": "0.4.0", "stylelint-webpack-plugin": "^3.3.0", + "vite": "^6.1.0", + "vite-plugin-pwa": "^0.21.1", "vue-loader": "17.4.2", "vue-style-loader": "4.1.3", "webpack": "5.97.1", @@ -130,6 +135,7 @@ "webpack-hot-middleware": "2.26.1", "webpack-merge": "0.20.0" }, + "type": "module", "engines": { "node": ">= 16.0.0" }, diff --git a/postcss.config.js b/postcss.config.js index 88752c6cb..95ebbf2a6 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,5 +1,7 @@ -module.exports = { +import autoprefixer from 'autoprefixer' + +export default { plugins: [ - require('autoprefixer') + autoprefixer ] } diff --git a/static/.gitignore b/public/static/.gitignore similarity index 100% rename from static/.gitignore rename to public/static/.gitignore diff --git a/public/static/.gitkeep b/public/static/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/static/aurora_borealis.jpg b/public/static/aurora_borealis.jpg similarity index 100% rename from static/aurora_borealis.jpg rename to public/static/aurora_borealis.jpg diff --git a/static/config.json b/public/static/config.json similarity index 100% rename from static/config.json rename to public/static/config.json diff --git a/static/logo.svg b/public/static/logo.svg similarity index 100% rename from static/logo.svg rename to public/static/logo.svg diff --git a/static/palettes/index.json b/public/static/palettes/index.json similarity index 100% rename from static/palettes/index.json rename to public/static/palettes/index.json diff --git a/static/pleromatan_apology.png b/public/static/pleromatan_apology.png similarity index 100% rename from static/pleromatan_apology.png rename to public/static/pleromatan_apology.png diff --git a/static/pleromatan_apology_fox.png b/public/static/pleromatan_apology_fox.png similarity index 100% rename from static/pleromatan_apology_fox.png rename to public/static/pleromatan_apology_fox.png diff --git a/static/pleromatan_apology_fox_small.webp b/public/static/pleromatan_apology_fox_small.webp similarity index 100% rename from static/pleromatan_apology_fox_small.webp rename to public/static/pleromatan_apology_fox_small.webp diff --git a/static/pleromatan_apology_small.webp b/public/static/pleromatan_apology_small.webp similarity index 100% rename from static/pleromatan_apology_small.webp rename to public/static/pleromatan_apology_small.webp diff --git a/static/pleromatan_orz.png b/public/static/pleromatan_orz.png similarity index 100% rename from static/pleromatan_orz.png rename to public/static/pleromatan_orz.png diff --git a/static/pleromatan_orz_fox.png b/public/static/pleromatan_orz_fox.png similarity index 100% rename from static/pleromatan_orz_fox.png rename to public/static/pleromatan_orz_fox.png diff --git a/static/styles.json b/public/static/styles.json similarity index 100% rename from static/styles.json rename to public/static/styles.json diff --git a/static/styles/Breezy DX.iss b/public/static/styles/Breezy DX.iss similarity index 100% rename from static/styles/Breezy DX.iss rename to public/static/styles/Breezy DX.iss diff --git a/static/styles/Redmond DX.iss b/public/static/styles/Redmond DX.iss similarity index 100% rename from static/styles/Redmond DX.iss rename to public/static/styles/Redmond DX.iss diff --git a/static/styles/index.json b/public/static/styles/index.json similarity index 100% rename from static/styles/index.json rename to public/static/styles/index.json diff --git a/static/terms-of-service.html b/public/static/terms-of-service.html similarity index 100% rename from static/terms-of-service.html rename to public/static/terms-of-service.html diff --git a/static/themes/breezy-dark.json b/public/static/themes/breezy-dark.json similarity index 100% rename from static/themes/breezy-dark.json rename to public/static/themes/breezy-dark.json diff --git a/static/themes/breezy-light.json b/public/static/themes/breezy-light.json similarity index 100% rename from static/themes/breezy-light.json rename to public/static/themes/breezy-light.json diff --git a/static/themes/mammal.json b/public/static/themes/mammal.json similarity index 100% rename from static/themes/mammal.json rename to public/static/themes/mammal.json diff --git a/static/themes/paper.json b/public/static/themes/paper.json similarity index 100% rename from static/themes/paper.json rename to public/static/themes/paper.json diff --git a/static/themes/pleroma-dark.json b/public/static/themes/pleroma-dark.json similarity index 100% rename from static/themes/pleroma-dark.json rename to public/static/themes/pleroma-dark.json diff --git a/static/themes/pleroma-light.json b/public/static/themes/pleroma-light.json similarity index 100% rename from static/themes/pleroma-light.json rename to public/static/themes/pleroma-light.json diff --git a/static/themes/redmond-xx-se.json b/public/static/themes/redmond-xx-se.json similarity index 100% rename from static/themes/redmond-xx-se.json rename to public/static/themes/redmond-xx-se.json diff --git a/static/themes/redmond-xx.json b/public/static/themes/redmond-xx.json similarity index 100% rename from static/themes/redmond-xx.json rename to public/static/themes/redmond-xx.json diff --git a/static/themes/redmond-xxi.json b/public/static/themes/redmond-xxi.json similarity index 100% rename from static/themes/redmond-xxi.json rename to public/static/themes/redmond-xxi.json diff --git a/src/assets/pleromatan_apology.png b/src/assets/pleromatan_apology.png deleted file mode 120000 index a7f6191f6..000000000 --- a/src/assets/pleromatan_apology.png +++ /dev/null @@ -1 +0,0 @@ -../../static/pleromatan_apology.png \ No newline at end of file diff --git a/src/assets/pleromatan_apology_fox.png b/src/assets/pleromatan_apology_fox.png deleted file mode 120000 index b3db4af3f..000000000 --- a/src/assets/pleromatan_apology_fox.png +++ /dev/null @@ -1 +0,0 @@ -../../static/pleromatan_apology_fox.png \ No newline at end of file diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx index 99d7daca8..9466603cd 100644 --- a/src/components/rich_content/rich_content.jsx +++ b/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' diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js index aee6a3993..da72c8f55 100644 --- a/src/components/settings_modal/tabs/appearance_tab.js +++ b/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' diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js index cb5059d66..d2162c30c 100644 --- a/src/components/settings_modal/tabs/style_tab/style_tab.js +++ b/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 diff --git a/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue index 25dc7e23f..e210fdaf1 100644 --- a/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue +++ b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue @@ -22,4 +22,4 @@ - +