self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2025-11-29 22:48:10 +02:00
Code Issues Releases Activity

Chore: Resolves #11800: Web: Improve reload behavior in dev mode (#11803)

Browse Source
This commit is contained in:
Henry Heino
2025-02-11 13:15:01 -08:00
committed by GitHub
parent 3603350287
commit 91ac4f8526
5 changed files with 199 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
packages/app-mobile/web/webpack.config.ts
View File

@@ -5,129 +5,141 @@
import * as path from 'path';
import * as webpack from 'webpack';
import 'webpack-dev-server';
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const appDirectory = path.resolve(__dirname, '../');
const babelConfig = require('../babel.config');
const babelLoaderConfiguration = {
test: /\.(tsx|jsx|ts|js|mjs)$/,
exclude: [
path.resolve(appDirectory, 'ios'),
path.resolve(appDirectory, 'android'),
const buildSharedConfig = (hotReload: boolean): webpack.Configuration => {
const babelLoaderConfiguration = {
test: /\.(tsx|jsx|ts|js|mjs)$/,
exclude: [
path.resolve(appDirectory, 'ios'),
path.resolve(appDirectory, 'android'),
// Compiling these libraries with babel cause build errors.
/.*node_modules[/\\]@babel.*/,
/.*node_modules[/\\]@sqlite\.org[/\\].*/,
/.*node_modules[/\\]markdown-it-anchor[/\\].*/,
/.*node_modules[/\\]markdown-it-toc-done-right[/\\].*/,
],
// Compiling these libraries with babel cause build errors.
/.*node_modules[/\\]@babel.*/,
/.*node_modules[/\\]@sqlite\.org[/\\].*/,
/.*node_modules[/\\]markdown-it-anchor[/\\].*/,
/.*node_modules[/\\]markdown-it-toc-done-right[/\\].*/,
],
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: babelConfig.presets,
plugins: [
'react-native-web',
'@babel/plugin-transform-export-namespace-from',
...(babelConfig.plugins ?? []),
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: babelConfig.presets,
plugins: [
'react-native-web',
'@babel/plugin-transform-export-namespace-from',
...(babelConfig.plugins ?? []),
...(hotReload ? ['react-refresh/babel'] : []),
],
},
},
};
const resourceLoaderConfiguration = {
test: /\.(gif|jpe?g|png|svg|ttf)$/,
type: 'asset/resource',
};
const emptyLibraryMock = path.resolve(__dirname, 'mocks/empty.js');
return {
output: {
filename: '[name].bundle.js',
path: path.resolve(appDirectory, 'web/dist'),
},
module: {
rules: [
babelLoaderConfiguration,
resourceLoaderConfiguration,
],
},
},
};
const resourceLoaderConfiguration = {
test: /\.(gif|jpe?g|png|svg|ttf)$/,
type: 'asset/resource',
};
plugins: hotReload ? [
new ReactRefreshWebpackPlugin(),
] : [],
const emptyLibraryMock = path.resolve(__dirname, 'mocks/empty.js');
resolve: {
alias: {
'react-native$': 'react-native-web',
'crypto': path.resolve(__dirname, 'mocks/nodeCrypto.js'),
const configShared: webpack.Configuration = {
output: {
filename: '[name].bundle.js',
path: path.resolve(appDirectory, 'web/dist'),
},
module: {
rules: [
babelLoaderConfiguration,
resourceLoaderConfiguration,
],
},
// Map some modules that don't work on web to the empty dictionary.
'react-native-fingerprint-scanner': emptyLibraryMock,
'@joplin/react-native-saf-x': emptyLibraryMock,
'react-native-quick-actions': emptyLibraryMock,
'uglifycss': emptyLibraryMock,
'react-native-share': emptyLibraryMock,
'react-native-camera': emptyLibraryMock,
'react-native-zip-archive': emptyLibraryMock,
'react-native-document-picker': emptyLibraryMock,
'react-native-exit-app': emptyLibraryMock,
'expo-camera': emptyLibraryMock,
resolve: {
alias: {
'react-native$': 'react-native-web',
'crypto': path.resolve(__dirname, 'mocks/nodeCrypto.js'),
// Workaround for applying serviceworker types to a single file.
// See https://joshuatz.com/posts/2021/strongly-typed-service-workers/.
// See https://github.com/microsoft/TypeScript/issues/37053
'serviceworker': emptyLibraryMock,
},
// Prefers .web.js, .web.ts, etc. imports to other imports.
extensions: [
'.web.js',
'.js',
'.web.ts',
'.ts',
'.web.mjs',
'.mjs',
'.web.tsx',
'.tsx',
'.web.jsx',
'.jsx',
'.wasm',
],
// Map some modules that don't work on web to the empty dictionary.
'react-native-fingerprint-scanner': emptyLibraryMock,
'@joplin/react-native-saf-x': emptyLibraryMock,
'react-native-quick-actions': emptyLibraryMock,
'uglifycss': emptyLibraryMock,
'react-native-share': emptyLibraryMock,
'react-native-camera': emptyLibraryMock,
'react-native-zip-archive': emptyLibraryMock,
'react-native-document-picker': emptyLibraryMock,
'react-native-exit-app': emptyLibraryMock,
'expo-camera': emptyLibraryMock,
// Workaround for applying serviceworker types to a single file.
// See https://joshuatz.com/posts/2021/strongly-typed-service-workers/.
// See https://github.com/microsoft/TypeScript/issues/37053
'serviceworker': emptyLibraryMock,
fallback: {
'url': require.resolve('url/'),
'events': require.resolve('events/'),
'timers': require.resolve('timers-browserify'),
'path': require.resolve('path-browserify'),
'stream': require.resolve('stream-browserify'),
'crypto': require.resolve('crypto-browserify'),
},
},
// Prefers .web.js, .web.ts, etc. imports to other imports.
extensions: [
'.web.js',
'.js',
'.web.ts',
'.ts',
'.web.mjs',
'.mjs',
'.web.tsx',
'.tsx',
'.web.jsx',
'.jsx',
'.wasm',
],
};
};
fallback: {
'url': require.resolve('url/'),
'events': require.resolve('events/'),
'timers': require.resolve('timers-browserify'),
'path': require.resolve('path-browserify'),
'stream': require.resolve('stream-browserify'),
'crypto': require.resolve('crypto-browserify'),
export default (env: Record<string, boolean>) => {
const hotReload = !!env.HOT_RELOAD;
const appConfig: webpack.Configuration = {
target: 'web',
entry: {
app: path.resolve(appDirectory, 'index.web.ts'),
},
},
};
const appConfig: webpack.Configuration = {
target: 'web',
...buildSharedConfig(hotReload),
entry: {
app: path.resolve(appDirectory, 'index.web.ts'),
},
...configShared,
devServer: {
// Required by @sqlite.org/sqlite-wasm
// See https://www.npmjs.com/package/@sqlite.org/sqlite-wasm#user-content-in-a-wrapped-worker-with-opfs-if-available
headers: {
'Cross-Origin-Opener-Policy': 'same-origin',
'Cross-Origin-Embedder-Policy': 'require-corp',
devServer: {
// Required by @sqlite.org/sqlite-wasm
// See https://www.npmjs.com/package/@sqlite.org/sqlite-wasm#user-content-in-a-wrapped-worker-with-opfs-if-available
headers: {
'Cross-Origin-Opener-Policy': 'same-origin',
'Cross-Origin-Embedder-Policy': 'require-corp',
},
port: 8088,
},
port: 8088,
},
};
};
const serviceWorkerConfig: webpack.Configuration = {
target: 'webworker',
entry: {
serviceWorker: path.resolve(appDirectory, 'web/serviceWorker.ts'),
},
...configShared,
};
const serviceWorkerConfig: webpack.Configuration = {
target: 'webworker',
entry: {
serviceWorker: path.resolve(appDirectory, 'web/serviceWorker.ts'),
},
...buildSharedConfig(false),
};
export default [serviceWorkerConfig, appConfig];
return [serviceWorkerConfig, appConfig];
};