Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpack + SWC Loader #1650

Merged
merged 17 commits into from
Sep 5, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/crdt/jest.config.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
module.exports = {
preset: 'ts-jest/presets/js-with-ts-esm',
testEnvironment: 'node',
transform: {
'^.+\\.(t|j)sx?$': '@swc/jest',
},
};
3 changes: 2 additions & 1 deletion packages/crdt/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,11 @@
"uuid": "^9.0.0"
},
"devDependencies": {
"@swc/core": "^1.3.82",
"@swc/jest": "^0.2.29",
"@types/jest": "^27.5.0",
"@types/uuid": "^9.0.2",
"jest": "^27.0.0",
"ts-jest": "^27.0.0",
"ts-protoc-gen": "^0.15.0",
"typescript": "^5.0.2"
}
Expand Down
15 changes: 15 additions & 0 deletions packages/desktop-client/.swcrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"jsc": {
"target": "es2022",
"transform": {
"react": {
"runtime": "automatic"
}
},
"externalHelpers": true,
"parser": {
"syntax": "typescript",
"tsx": true
}
}
}
77 changes: 0 additions & 77 deletions packages/desktop-client/config-overrides.js

This file was deleted.

116 changes: 116 additions & 0 deletions packages/desktop-client/craco.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
const path = require('path');

const {
loaderByName,
removeLoaders,
addAfterLoader,
addPlugins,
} = require('@craco/craco');
const chokidar = require('chokidar');
const TerserPlugin = require('terser-webpack-plugin');
const { IgnorePlugin } = require('webpack');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

if (process.env.CI) {
process.env.DISABLE_ESLINT_PLUGIN = 'true';
}

// Forward Netlify env variables
if (process.env.REVIEW_ID) {
process.env.REACT_APP_REVIEW_ID = process.env.REVIEW_ID;
}

module.exports = {
webpack: {
configure: (webpackConfig, { env, paths }) => {
webpackConfig.mode =
process.env.NODE_ENV === 'development' ? 'development' : 'production';

// swc-loader
addAfterLoader(webpackConfig, loaderByName('babel-loader'), {
test: /\.m?[tj]sx?$/,
exclude: /node_modules/,
loader: require.resolve('swc-loader'),
});

// remove the babel loaders
removeLoaders(webpackConfig, loaderByName('babel-loader'));

addPlugins(webpackConfig, [
new BundleAnalyzerPlugin({
analyzerMode: 'disabled',
generateStatsFile: true,
}),
// Pikaday throws a warning if Moment.js is not installed however it doesn't
// actually require it to be installed. As we don't use Moment.js ourselves
// then we can just silence this warning.
new IgnorePlugin({
contextRegExp: /pikaday$/,
resourceRegExp: /moment$/,
}),
]);

webpackConfig.resolve.extensions = [
'.web.js',
'.web.jsx',
'.web.ts',
'.web.tsx',
'.js',
'.jsx',
'.ts',
'.tsx',
...webpackConfig.resolve.extensions,
];

if (process.env.IS_GENERIC_BROWSER) {
webpackConfig.resolve.extensions = [
'.browser.js',
'.browser.jsx',
'.browser.ts',
'.browser.tsx',
...webpackConfig.resolve.extensions,
];
}

webpackConfig.optimization = {
...webpackConfig.optimization,
minimize:
process.env.CI === 'true' || process.env.NODE_ENV !== 'development',
minimizer: [
new TerserPlugin({
minify: TerserPlugin.swcMinify,
// `terserOptions` options will be passed to `swc` (`@swc/core`)
// Link to options - https://swc.rs/docs/config-js-minify
terserOptions: {
compress: false,
mangle: true,
},
}),
],
};

return webpackConfig;
},
},
devServer: (devServerConfig, { env, paths, proxy, allowedHost }) => {
devServerConfig.onBeforeSetupMiddleware = server => {
chokidar
.watch([
path.resolve('../loot-core/lib-dist/*.js'),
path.resolve('../loot-core/lib-dist/browser/*.js'),
])
.on('all', function () {
for (const ws of server.webSocketServer.clients) {
ws.send(JSON.stringify({ type: 'static-changed' }));
}
});
};
devServerConfig.headers = {
...devServerConfig.headers,
'Cross-Origin-Opener-Policy': 'same-origin',
'Cross-Origin-Embedder-Policy': 'require-corp',
};

return devServerConfig;
},
};
21 changes: 10 additions & 11 deletions packages/desktop-client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
"build"
],
"devDependencies": {
"@craco/craco": "^7.1.0",
"@craco/types": "^7.1.0",
"@juggle/resize-observer": "^3.1.2",
"@playwright/test": "^1.37.1",
"@reach/listbox": "^0.18.0",
Expand All @@ -15,6 +17,8 @@
"@react-stately/collections": "^3.10.0",
"@react-stately/list": "^3.9.1",
"@svgr/cli": "^8.0.1",
"@swc/core": "^1.3.82",
"@swc/helpers": "^0.5.1",
"@testing-library/react": "14.0.0",
"@testing-library/user-event": "14.4.3",
"@types/react": "^18.2.0",
Expand All @@ -26,7 +30,6 @@
"@types/webpack-bundle-analyzer": "^4.6.0",
"chokidar": "^3.5.3",
"cross-env": "^7.0.3",
"customize-cra": "^1.0.0",
"date-fns": "^2.29.3",
"debounce": "^1.2.0",
"downshift": "7.6.0",
Expand All @@ -40,7 +43,6 @@
"memoize-one": "^6.0.0",
"pikaday": "1.8.0",
"react": "18.2.0",
"react-app-rewired": "^2.2.1",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💬 suggestion:react-scripts can also be removed IMO

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Craco still uses react-scripts under the hood I believe: https://craco.js.org/docs/getting-started/

"react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-dom": "18.2.0",
Expand All @@ -57,25 +59,22 @@
"redux-thunk": "^2.3.0",
"remark-gfm": "^3.0.1",
"sass": "^1.63.6",
"swc-loader": "^0.2.3",
"terser-webpack-plugin": "^5.3.9",
"uuid": "^9.0.0",
"victory": "^36.6.8",
"webpack-bundle-analyzer": "^4.9.0",
"webpack-bundle-analyzer": "^4.9.1",
"xml2js": "^0.6.2"
},
"scripts": {
"start": "cross-env PORT=3001 react-app-rewired start",
"start": "cross-env PORT=3001 craco start",
"start:browser": "cross-env ./bin/watch-browser",
"watch": "cross-env BROWSER=none yarn start",
"build": "cross-env INLINE_RUNTIME_CHUNK=false react-app-rewired build",
"build": "cross-env INLINE_RUNTIME_CHUNK=false craco build",
"build:browser": "cross-env ./bin/build-browser",
"generate:icons": "rm src/icons/*/*.js; cd src/icons && svgr --expand-props start --ext js -d . .",
"test": "react-app-rewired test",
"test": "craco test",
"e2e": "npx playwright test --browser=chromium",
"vrt": "cross-env VRT=true npx playwright test --browser=chromium"
},
"jest": {
"setupFilesAfterEnv": [
"<rootDir>/src/setupTests.js"
]
}
}
6 changes: 0 additions & 6 deletions packages/loot-core/.babelrc

This file was deleted.

10 changes: 10 additions & 0 deletions packages/loot-core/.swcrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"jsc": {
"target": "es2022",
"externalHelpers": true,
"parser": {
"syntax": "typescript",
"tsx": true
}
}
}
2 changes: 1 addition & 1 deletion packages/loot-core/jest.config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
module.exports = {
preset: 'ts-jest/presets/js-with-ts-esm',
moduleFileExtensions: [
'testing.js',
'testing.ts',
Expand All @@ -21,5 +20,6 @@ module.exports = {
transformIgnorePatterns: ['/node_modules/'],
transform: {
'\\.pegjs$': '<rootDir>/peg-transform.mjs',
'^.+\\.(t|j)sx?$': '@swc/jest',
},
};
2 changes: 1 addition & 1 deletion packages/loot-core/jest.web.config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
module.exports = {
preset: 'ts-jest/presets/js-with-ts-esm',
moduleFileExtensions: [
'testing.js',
'testing.ts',
Expand All @@ -18,5 +17,6 @@ module.exports = {
transformIgnorePatterns: ['/node_modules/(?!absurd-sql)'],
transform: {
'\\.pegjs$': '<rootDir>/peg-transform.mjs',
'^.+\\.(t|j)sx?$': '@swc/jest',
},
};
19 changes: 9 additions & 10 deletions packages/loot-core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
"author": "",
"license": "ISC",
"dependencies": {
"@babel/register": "^7.22.5",
"@jlongster/sql.js": "^1.6.7",
"@rschedule/core": "^1.2.0",
"@rschedule/ical-tools": "^1.2.0",
Expand Down Expand Up @@ -44,19 +43,18 @@
"devDependencies": {
"@actual-app/api": "*",
"@actual-app/crdt": "*",
"@babel/core": "~7.22.5",
"@babel/preset-env": "^7.22.5",
"@babel/preset-typescript": "^7.22.5",
"@swc/core": "^1.3.82",
"@swc/helpers": "^0.5.1",
"@swc/jest": "^0.2.29",
"@types/better-sqlite3": "^7.6.4",
"@types/jest": "^27.5.0",
"@types/jlongster__sql.js": "npm:@types/sql.js@latest",
"@types/pegjs": "^0.10.3",
"@types/react-redux": "^7.1.25",
"@types/uuid": "^9.0.2",
"@types/webpack": "^5.28.0",
"@types/webpack": "^5.28.2",
"@types/webpack-bundle-analyzer": "^4.6.0",
"adm-zip": "^0.5.9",
"babel-loader": "^9.1.2",
"buffer": "^6.0.3",
"cross-env": "^7.0.3",
"date-fns": "^2.29.3",
Expand All @@ -73,14 +71,15 @@
"slash": "3.0.0",
"snapshot-diff": "^0.10.0",
"source-map": "^0.7.3",
"swc-loader": "^0.2.3",
"terser-webpack-plugin": "^5.3.9",
"throttleit": "^1.0.0",
"ts-jest": "^27.0.0",
"ts-node": "^10.7.0",
"typescript": "^4.6.4",
"uuid": "^9.0.0",
"webpack": "^5.86.0",
"webpack-bundle-analyzer": "^4.9.0",
"webpack-cli": "^5.1.3",
"webpack": "^5.88.2",
"webpack-bundle-analyzer": "^4.9.1",
"webpack-cli": "^5.1.4",
"ws": "^4.1.0",
"yargs": "^9.0.1"
}
Expand Down
Loading