Skip to content

Commit

Permalink
Revert the build config and dependency customization for @stlite/moun…
Browse files Browse the repository at this point in the history 
…table upon the ejected files
  • Loading branch information
@whitphx
whitphx committed Feb 13, 2023
1 parent be5b9a5 commit 4929e59
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 39 deletions.
61 changes: 40 additions & 21 deletions packages/mountable/config/webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,6 @@ const babelRuntimeRegenerator = require.resolve('@babel/runtime/regenerator', {
paths: [babelRuntimeEntry],
});

// Some apps do not need the benefits of saving a web request, so not inlining the chunk
// makes for a smoother build process.
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';

const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === 'true';
const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === 'true';

Expand Down Expand Up @@ -110,11 +106,6 @@ module.exports = function (webpackEnv) {
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
loader: MiniCssExtractPlugin.loader,
// css is located in `static/css`, use '../../' to locate index.html folder
// in production `paths.publicUrlOrPath` can be a relative path
options: paths.publicUrlOrPath.startsWith('.')
? { publicPath: '../../' }
: {},
},
{
loader: require.resolve('css-loader'),
Expand Down Expand Up @@ -209,7 +200,7 @@ module.exports = function (webpackEnv) {
// There will be one main bundle, and one file per asynchronous chunk.
// In development, it does not produce real files.
filename: isEnvProduction
? 'static/js/[name].[contenthash:8].js'
? 'stlite.js'
: isEnvDevelopment && 'static/js/bundle.js',
// There are also additional JS chunk files if you use code splitting.
chunkFilename: isEnvProduction
Expand Down Expand Up @@ -313,6 +304,8 @@ module.exports = function (webpackEnv) {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
// Stlite: To resolve the alias streamlit/frontend uses
"src": path.resolve(__dirname, "../../../streamlit/frontend/src"),
// Allows for better profiling with ReactDevTools
...(isEnvProductionProfile && {
'react-dom$': 'react-dom/profiling',
Expand All @@ -335,6 +328,11 @@ module.exports = function (webpackEnv) {
babelRuntimeRegenerator,
]),
],
mainFields: ["module", "main"],
fallback: {
tty: false,
os: false,
},
},
module: {
strictExportPresence: true,
Expand Down Expand Up @@ -405,7 +403,10 @@ module.exports = function (webpackEnv) {
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
// Stlite: Let Babel compile outside of src/.
// Ref: https://muguku.medium.com/fix-go-to-definition-and-hot-reload-in-a-react-typescript-monorepo-362908716d0e
include: undefined,
exclude: /node_modules/,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
Expand All @@ -419,8 +420,9 @@ module.exports = function (webpackEnv) {
},
],
],

plugins: [
"@emotion", // Stlite: This line has been added after ejection. The emotion babel plugin is necessary for the Streamlit frontend: https://github.com/streamlit/streamlit/blob/786da40420cd5b6d7682da42837c6ecf861e8464/frontend/craco.config.js#L44
isEnvDevelopment &&
shouldUseReactRefresh &&
require.resolve('react-refresh/babel'),
Expand Down Expand Up @@ -453,7 +455,7 @@ module.exports = function (webpackEnv) {
cacheDirectory: true,
// See #6846 for context on why cacheCompression is disabled
cacheCompression: false,

// Babel sourcemaps are needed for debugging into node_modules
// code. Without the options below, debuggers like VSCode
// show incorrect code and set breakpoints on the wrong lines.
Expand Down Expand Up @@ -560,6 +562,29 @@ module.exports = function (webpackEnv) {
// Make sure to add the new loader(s) before the "file" loader.
],
},
// Stlite: Apache Arrow uses .mjs
{
include: /node_modules/,
test: /\.mjs$/,
type: "javascript/auto",
},
// Stlite:
// Since Webpack5, Asset Modules has been introduced to cover what file-loader had done.
// However, in this project, we use the inline loader setting like `import * from "!!file-loader!/path/to/file"` to use file-loader
// but it does not turn off Asset Modules and leads to duplicate assets generated.
// To make matters worse, the actually resolved paths from such import statements point to the URL from Asset Modules, not the file-loader specified with the inline syntax,
// then we don't obtain the expected result.
// So we turn off Asset Modules here by setting `type: 'javascript/auto'`.
// See https://webpack.js.org/guides/asset-modules/
{
test: /\.whl$/i,
use: [
{
loader: "file-loader",
},
],
type: "javascript/auto",
},
].filter(Boolean),
},
plugins: [
Expand Down Expand Up @@ -589,18 +614,12 @@ module.exports = function (webpackEnv) {
: undefined
)
),
// Inlines the webpack runtime script. This script is too small to warrant
// a network request.
// https://github.com/facebook/create-react-app/issues/5358
isEnvProduction &&
shouldInlineRuntimeChunk &&
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
// Makes some environment variables available in index.html.
// The public URL is available as %PUBLIC_URL% in index.html, e.g.:
// <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
// It will be an empty string unless you specify "homepage"
// in `package.json`, in which case it will be the pathname of that URL.
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
isEnvDevelopment && new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
// This gives some necessary context to module not found errors, such as
// the requesting resource.
new ModuleNotFoundPlugin(paths.appPath),
Expand All @@ -625,7 +644,7 @@ module.exports = function (webpackEnv) {
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'static/css/[name].[contenthash:8].css',
filename: 'stlite.css',
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
}),
// Generate an asset manifest file with the following content:
Expand Down
23 changes: 15 additions & 8 deletions packages/mountable/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,16 @@
"dependencies": {
"@babel/core": "^7.16.0",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
"@stlite/common-react": "^0.24.0",
"@stlite/kernel": "^0.24.0",
"@svgr/webpack": "^5.5.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.12",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.10",
"@types/react": "^17.0.7",
"@types/react-dom": "^17.0.5",
"babel-jest": "^27.4.2",
"babel-loader": "^8.2.3",
"babel-plugin-named-asset-import": "^0.3.8",
Expand Down Expand Up @@ -65,11 +67,12 @@
"postcss-normalize": "^10.0.1",
"postcss-preset-env": "^7.0.1",
"prompts": "^2.4.2",
"react": "^18.2.0",
"react": "^17.0.2",
"react-app-polyfill": "^3.0.0",
"react-dev-utils": "^12.0.1",
"react-dom": "^18.2.0",
"react-dom": "^17.0.2",
"react-refresh": "^0.11.0",
"react-toastify": "^9.1.1",
"resolve": "^1.20.0",
"resolve-url-loader": "^4.0.0",
"sass-loader": "^12.3.0",
Expand All @@ -78,17 +81,21 @@
"style-loader": "^3.3.1",
"tailwindcss": "^3.0.2",
"terser-webpack-plugin": "^5.2.5",
"typescript": "^4.9.5",
"typescript": "^4.9.4",
"web-vitals": "^2.1.4",
"webpack": "^5.64.4",
"webpack": "5.75.0",
"webpack-dev-server": "^4.6.0",
"webpack-manifest-plugin": "^4.0.2",
"workbox-webpack-plugin": "^6.4.1"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
"build": "PUBLIC_URL=${PUBLIC_URL:-.} node scripts/build.js",
"test": "node scripts/test.js",
"fix:eslint": "eslint --fix 'src/**/*.{ts,tsx}'",
"fix:prettier": "prettier --write .",
"check:eslint": "eslint 'src/**/*.{ts,tsx}'",
"check:prettier": "prettier --check ."
},
"eslintConfig": {
"extends": [
Expand Down
11 changes: 1 addition & 10 deletions packages/mountable/scripts/build.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
const isInteractive = process.stdout.isTTY;

// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
if (!checkRequiredFiles([paths.appIndexJs])) {
process.exit(1);
}

Expand All @@ -62,8 +62,6 @@ checkBrowsers(paths.appPath, isInteractive)
// Remove all content but keep the directory so that
// if you're in it, you don't end up in Trash
fs.emptyDirSync(paths.appBuild);
// Merge with the public folder
copyPublicFolder();
// Start the webpack build
return build(previousFileSizes);
})
Expand Down Expand Up @@ -208,10 +206,3 @@ function build(previousFileSizes) {
});
});
}

function copyPublicFolder() {
fs.copySync(paths.appPublic, paths.appBuild, {
dereference: true,
filter: file => file !== paths.appHtml,
});
}

0 comments on commit 4929e59

Please sign in to comment.