From df12c408021f2277fd44733a0b9ae1140a1fb6f4 Mon Sep 17 00:00:00 2001 From: David Lechner Date: Tue, 10 May 2022 20:27:58 -0500 Subject: [PATCH] drop craco Since we aren't using react-scripts any more, craco doesn't do anything. This merges the craco config into the config created by `yarn eject`. --- .eslintrc.js | 1 + config/jest/babelTransform.js | 1 + craco.config.js => config/licenses.js | 158 +++++------------------ config/webpack.config.js | 45 ++++++- package.json | 3 +- yarn.lock | 177 +------------------------- 6 files changed, 83 insertions(+), 302 deletions(-) rename craco.config.js => config/licenses.js (64%) diff --git a/.eslintrc.js b/.eslintrc.js index ed955390..44fe2e4f 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -30,6 +30,7 @@ module.exports = { react: { version: 'detect' }, }, ignorePatterns: [ + 'config/**/*.js', 'test/env.js', '.eslintrc.js', '.prettierrc.js', diff --git a/config/jest/babelTransform.js b/config/jest/babelTransform.js index 5b391e40..833fc209 100644 --- a/config/jest/babelTransform.js +++ b/config/jest/babelTransform.js @@ -16,6 +16,7 @@ const hasJsxRuntime = (() => { })(); module.exports = babelJest.createTransformer({ + plugins: ['@shopify/react-i18n/babel'], presets: [ [ require.resolve('babel-preset-react-app'), diff --git a/craco.config.js b/config/licenses.js similarity index 64% rename from craco.config.js rename to config/licenses.js index 051d45e2..1adcd0fd 100644 --- a/craco.config.js +++ b/config/licenses.js @@ -1,15 +1,14 @@ -// Configuration file to override create-react-app. -// -// https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#configuration +// SPDX-License-Identifier: MIT +// Copyright (c) 2021-2022 The Pybricks Authors + +// This module provides the license config object for LicenseWebpackPlugin. -const { addBeforeLoader, loaderByName } = require('@craco/craco'); -const CopyPlugin = require('copy-webpack-plugin'); -const LicensePlugin = require('license-webpack-plugin').LicenseWebpackPlugin; -const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); const satisfies = require('spdx-satisfies'); const path = require('path'); const fs = require('fs'); +const projectDir = path.resolve(__dirname, '..'); + // Permissive licenses can be added here. We would like to avoid copyleft. const approvedLicenses = ['0BSD', 'Apache-2.0', 'BSD-3-Clause', 'ISC', 'MIT']; @@ -26,12 +25,15 @@ function personToString(person) { } let str = person.name; + if (person.email) { str += ` <${person.email}>`; } + if (person.url) { str += ` (${person.url})`; } + return str; } @@ -39,7 +41,7 @@ function personToString(person) { // license here e.g. from the README. const dexieLicense = fs.readFileSync( - path.join(__dirname, 'node_modules', 'dexie', 'LICENSE'), + path.join(projectDir, 'node_modules', 'dexie', 'LICENSE'), { encoding: 'utf-8' }, ); @@ -214,124 +216,32 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.`, }; module.exports = { - babel: { - plugins: ['@shopify/react-i18n/babel'], + outputFilename: 'static/oss-licenses.json', + perChunkOutput: false, + renderLicenses: (modules) => { + return JSON.stringify( + modules + .map((m) => ({ + name: m.packageJson.name, + version: m.packageJson.version, + author: personToString(m.packageJson.author), + license: m.licenseId, + licenseText: m.licenseText, + })) + .sort((a, b) => a.name.localeCompare(b.name, 'en')), + ); }, - webpack: { - plugins: [ - new CopyPlugin({ - patterns: [ - { - from: 'public/manifest.json', - transform(content, path) { - return content - .toString() - .replace( - /%\w+%/g, - (m) => process.env[m.slice(1, m.length - 1)] || '', - ); - }, - }, - ], - }), - new CopyPlugin({ - patterns: [ - { - from: 'node_modules/@pybricks/ide-docs/html', - to: 'static/docs', - }, - ], - }), - new LicensePlugin({ - outputFilename: 'static/oss-licenses.json', - perChunkOutput: false, - renderLicenses: (modules) => { - return JSON.stringify( - modules - .map((m) => ({ - name: m.packageJson.name, - version: m.packageJson.version, - author: personToString(m.packageJson.author), - license: m.licenseId, - licenseText: m.licenseText, - })) - .sort((a, b) => a.name.localeCompare(b.name, 'en')), - ); - }, - licenseTextOverrides, - additionalModules: [ - { name: '@pybricks/pybricks-code', directory: __dirname }, - { - name: '@pybricks/ide-docs', - directory: path.join( - __dirname, - 'node_modules', - '@pybricks', - 'ide-docs', - ), - }, - ], - unacceptableLicenseTest: (licenseType) => - !satisfies(licenseType, `(${approvedLicenses.join(' OR ')})`), - handleMissingLicenseText: (packageName, licenseType) => { - throw new Error( - `missing license text for ${packageName} (${licenseType})`, - ); - }, - }), - new MonacoWebpackPlugin({ - languages: ['python'], - filename: '[name].worker.[contenthash].js', - }), - ], - }, - plugins: [ + licenseTextOverrides, + additionalModules: [ + { name: '@pybricks/pybricks-code', directory: projectDir }, { - plugin: { - overrideWebpackConfig: ({ - webpackConfig, - cracoConfig, - pluginOptions, - context: { env, paths }, - }) => { - // work around @shopify/* webpack compatibility - // https://github.com/Shopify/quilt/issues/1722#issuecomment-789883471 - webpackConfig.module.rules.push({ - test: /\.mjs$/, - include: /node_modules/, - type: 'javascript/auto', - }); - - // work around default handling of .wasm files - // https://github.com/webpack/webpack/issues/7352 - addBeforeLoader(webpackConfig, loaderByName('file-loader'), { - test: /\.wasm$/, - type: 'javascript/auto', - loader: 'file-loader', - options: { - name: 'static/[name].[hash:8].[ext]', - }, - }); - - return webpackConfig; - }, - overrideJestConfig: ({ - jestConfig, - cracoConfig, - pluginOptions, - context: { env, paths, resolve, rootDir }, - }) => { - const index = jestConfig.transformIgnorePatterns.indexOf( - '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$', - ); - // https://github.com/react-monaco-editor/react-monaco-editor/issues/306#issuecomment-701025628 - // https://github.com/GoogleChromeLabs/browser-fs-access/issues/42 - jestConfig.transformIgnorePatterns[index] = - '[/\\\\]node_modules[/\\\\](?!(monaco-editor|react-monaco-editor|browser-fs-access)[/\\\\]).+\\.(js|jsx|mjs|cjs|ts|tsx)$'; - return jestConfig; - }, - }, - options: {}, + name: '@pybricks/ide-docs', + directory: path.join(projectDir, 'node_modules', '@pybricks', 'ide-docs'), }, ], + unacceptableLicenseTest: (licenseType) => + !satisfies(licenseType, `(${approvedLicenses.join(' OR ')})`), + handleMissingLicenseText: (packageName, licenseType) => { + throw new Error(`missing license text for ${packageName} (${licenseType})`); + }, }; diff --git a/config/webpack.config.js b/config/webpack.config.js index 207d075f..06c9670e 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -4,6 +4,9 @@ const fs = require('fs'); const path = require('path'); const webpack = require('webpack'); const resolve = require('resolve'); +const CopyPlugin = require('copy-webpack-plugin'); +const LicensePlugin = require('license-webpack-plugin').LicenseWebpackPlugin; +const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin'); @@ -293,7 +296,8 @@ module.exports = function (webpackEnv) { ], }, resolve: { - // This allows you to set a fallback for where webpack should look for modules. + // work around emscripten referencing node.js modules + fallback: { crypto: false, fs: false, path: false }, // We placed these paths second because we want `node_modules` to "win" // if there are any conflicts. This matches Node resolution mechanism. // https://github.com/facebook/create-react-app/issues/253 @@ -421,6 +425,7 @@ module.exports = function (webpackEnv) { ], plugins: [ + require.resolve('@shopify/react-i18n/babel'), isEnvDevelopment && shouldUseReactRefresh && require.resolve('react-refresh/babel'), @@ -543,6 +548,16 @@ module.exports = function (webpackEnv) { 'sass-loader' ), }, + // Adds support for wasm that runs as an application. + // https://github.com/webpack/webpack/issues/7352 + { + test: /\.wasm$/, + type: 'javascript/auto', + loader: 'file-loader', + options: { + name: 'static/[name].[hash:8].[ext]', + }, + }, // "file" loader makes sure those assets get served by WebpackDevServer. // When you `import` an asset, you get its (virtual) filename. // In production, they would get copied to the `build` folder. @@ -563,6 +578,34 @@ module.exports = function (webpackEnv) { ].filter(Boolean), }, plugins: [ + new CopyPlugin({ + patterns: [ + { + from: 'public/manifest.json', + transform(content, path) { + return content + .toString() + .replace( + /%\w+%/g, + (m) => process.env[m.slice(1, m.length - 1)] || '', + ); + }, + }, + ], + }), + new CopyPlugin({ + patterns: [ + { + from: 'node_modules/@pybricks/ide-docs/html', + to: 'static/docs', + }, + ], + }), + new LicensePlugin(require('./licenses')), + new MonacoWebpackPlugin({ + languages: ['python'], + filename: '[name].worker.[contenthash].js', + }), // Generates an `index.html` file with the