diff --git a/examples/config-babel/.gitignore b/examples/config-babel/.gitignore deleted file mode 100644 index e6a7fd61..00000000 --- a/examples/config-babel/.gitignore +++ /dev/null @@ -1,25 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules - -# testing -/coverage - -# production -/dist - -# misc -.DS_Store -.env.local -.env.development.local -.env.test.local -.env.production.local - -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# lock files -yarn.lock -package-lock.json diff --git a/examples/config-babel/babel.config.json b/examples/config-babel/babel.config.json deleted file mode 100644 index ab1c3115..00000000 --- a/examples/config-babel/babel.config.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "presets": [], - "plugins": [] -} diff --git a/examples/config-babel/images/babel.png b/examples/config-babel/images/babel.png deleted file mode 100644 index a9e907c4..00000000 Binary files a/examples/config-babel/images/babel.png and /dev/null differ diff --git a/examples/config-babel/images/extension_128.png b/examples/config-babel/images/extension_128.png deleted file mode 100644 index c399dc75..00000000 Binary files a/examples/config-babel/images/extension_128.png and /dev/null differ diff --git a/examples/config-babel/images/extension_16.png b/examples/config-babel/images/extension_16.png deleted file mode 100644 index 840b505e..00000000 Binary files a/examples/config-babel/images/extension_16.png and /dev/null differ diff --git a/examples/config-babel/images/extension_48.png b/examples/config-babel/images/extension_48.png deleted file mode 100644 index 9d83a03b..00000000 Binary files a/examples/config-babel/images/extension_48.png and /dev/null differ diff --git a/examples/config-babel/manifest.json b/examples/config-babel/manifest.json deleted file mode 100644 index cd570c18..00000000 --- a/examples/config-babel/manifest.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "manifest_version": 3, - "version": "0.0.1", - "name": "Config Babel Template", - "description": "An Extension.js example.", - "icons": { - "16": "images/extension_16.png", - "48": "images/extension_48.png", - "128": "images/extension_128.png" - }, - "chrome_url_overrides": { - "newtab": "newtab/index.html" - } -} diff --git a/examples/config-babel/newtab/index.html b/examples/config-babel/newtab/index.html deleted file mode 100644 index fae57949..00000000 --- a/examples/config-babel/newtab/index.html +++ /dev/null @@ -1,40 +0,0 @@ - - - - - - Babel Extension - - - - - -
-

- The Babel logo -
- Welcome to your Babel Extension -

-

- Learn more about creating cross-browser extensions at - https://extension.js.org. -

-
- - - diff --git a/examples/config-babel/newtab/scripts.js b/examples/config-babel/newtab/scripts.js deleted file mode 100644 index f6c62d62..00000000 --- a/examples/config-babel/newtab/scripts.js +++ /dev/null @@ -1,11 +0,0 @@ -function getManifest() { - return chrome.runtime.getManifest() -} - -const manifest = getManifest() - -console.table({ - name: manifest.name, - version: manifest.version, - description: manifest.description -}) diff --git a/examples/config-babel/newtab/styles.css b/examples/config-babel/newtab/styles.css deleted file mode 100644 index 8443a38a..00000000 --- a/examples/config-babel/newtab/styles.css +++ /dev/null @@ -1,22 +0,0 @@ -body { - display: flex; - justify-content: center; - align-items: center; - height: calc(100vh - 26px); -} - -h1 { - font-size: 4.7em; -} - -.babel:hover { - filter: grayscale(1); - transition: - filter 2s, - border-color 2s; -} - -.new:hover { - filter: grayscale(0); - border-color: aquamarine; -} diff --git a/examples/config-babel/package.json b/examples/config-babel/package.json deleted file mode 100644 index a5881a38..00000000 --- a/examples/config-babel/package.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "private": true, - "name": "config-babel", - "description": "An Extension.js example.", - "version": "0.0.1", - "author": { - "name": "Cezar Augusto", - "email": "boss@cezaraugusto.net", - "url": "https://cezaraugusto.com" - }, - "devDependencies": { - "stylelint": "^16.7.0" - } -} diff --git a/examples/content-preact/package.json b/examples/content-preact/package.json index 2c0df32e..a63f7688 100644 --- a/examples/content-preact/package.json +++ b/examples/content-preact/package.json @@ -15,7 +15,6 @@ "tailwindcss": "^3.4.1" }, "devDependencies": { - "@babel/plugin-transform-react-jsx": "^7.25.2", "typescript": "5.3.3" } } diff --git a/examples/data.ts b/examples/data.ts index 3c93a28a..8854908c 100644 --- a/examples/data.ts +++ b/examples/data.ts @@ -21,15 +21,6 @@ const JS_TEMPLATES: Template[] = [ configFiles: undefined }, // { - // name: 'config-babel', - // uiContext: ['newTab'], - // uiFramework: undefined, - // css: 'css', - // hasBackground: false, - // hasEnv: false, - // configFiles: ['babel.config.json'] - // }, - // { // name: 'content-extension-config', // uiContext: ['content'], // uiFramework: 'react', diff --git a/examples/new-preact/package.json b/examples/new-preact/package.json index 594e7d27..a6a1d26a 100644 --- a/examples/new-preact/package.json +++ b/examples/new-preact/package.json @@ -14,7 +14,6 @@ "sakura.css": "^1.5.0" }, "devDependencies": { - "@babel/plugin-transform-react-jsx": "^7.25.2", "typescript": "5.3.3" } } diff --git a/examples/types.ts b/examples/types.ts index 4977dd72..47e96b59 100644 --- a/examples/types.ts +++ b/examples/types.ts @@ -3,7 +3,6 @@ export type ConfigFiles = | 'postcss.config.js' | 'tailwind.config.js' | 'tsconfig.json' - | 'babel.config.js' | 'stylelint.config.json' | 'extension.config.js' diff --git a/programs/create/create.spec.ts b/programs/create/create.spec.ts index 5e027144..95d625a7 100644 --- a/programs/create/create.spec.ts +++ b/programs/create/create.spec.ts @@ -77,8 +77,8 @@ describe('extension create', () => { ? 'ts' : 'tsx' : template.configFiles?.includes('tsconfig.json') - ? 'ts' - : 'js' + ? 'ts' + : 'js' template.uiContext?.forEach((context: string) => { // Expect [context]/index.html for all contexts except 'content' diff --git a/programs/develop/package.json b/programs/develop/package.json index 53cad7fd..b6093de2 100644 --- a/programs/develop/package.json +++ b/programs/develop/package.json @@ -88,15 +88,12 @@ "typescript": "5.3.3" }, "optionalDependencies": { - "@babel/core": "^7.24.9", "@prefresh/core": "^1.5.2", "@prefresh/utils": "^1.2.0", "@prefresh/webpack": "^4.0.1", "@rspack/plugin-preact-refresh": "^1.0.0", "@rspack/plugin-react-refresh": "^1.0.0", "@vue/compiler-sfc": "^3.4.34", - "babel-loader": "^9.1.3", - "babel-preset-modern-browser-extension": "^0.7.0", "less": "^4.2.0", "less-loader": "^12.2.0", "postcss-flexbugs-fixes": "^5.0.2", diff --git a/programs/develop/webpack/plugin-js-frameworks/index.ts b/programs/develop/webpack/plugin-js-frameworks/index.ts index be0b2262..897e7a7b 100644 --- a/programs/develop/webpack/plugin-js-frameworks/index.ts +++ b/programs/develop/webpack/plugin-js-frameworks/index.ts @@ -2,7 +2,6 @@ import path from 'path' import {type Compiler} from '@rspack/core' import {PluginInterface} from '../webpack-types' import {type DevOptions} from '../../commands/dev' -import {maybeUseBabel} from './js-tools/babel' import {isUsingPreact, maybeUsePreact} from './js-tools/preact' import {isUsingReact, maybeUseReact} from './js-tools/react' import {maybeUseVue} from './js-tools/vue' @@ -25,13 +24,11 @@ export class JsFrameworksPlugin { private async configureOptions(compiler: Compiler) { const projectPath = path.dirname(this.manifestPath) - const maybeInstallBabel = await maybeUseBabel(compiler, projectPath) const maybeInstallReact = await maybeUseReact(projectPath) const maybeInstallPreact = await maybeUsePreact(projectPath) const maybeInstallVue = await maybeUseVue(projectPath) compiler.options.resolve.alias = { - ...(maybeInstallBabel?.alias || {}), ...(maybeInstallReact?.alias || {}), ...(maybeInstallPreact?.alias || {}), ...(maybeInstallVue?.alias || {}), @@ -89,7 +86,6 @@ export class JsFrameworksPlugin { } } }, - // ...(maybeInstallBabel?.loaders || []), ...(maybeInstallReact?.loaders || []), ...(maybeInstallPreact?.loaders || []), ...(maybeInstallVue?.loaders || []), diff --git a/programs/develop/webpack/plugin-js-frameworks/js-tools/babel.ts b/programs/develop/webpack/plugin-js-frameworks/js-tools/babel.ts deleted file mode 100644 index cfe7c0ca..00000000 --- a/programs/develop/webpack/plugin-js-frameworks/js-tools/babel.ts +++ /dev/null @@ -1,173 +0,0 @@ -// ██████╗ ███████╗██╗ ██╗███████╗██╗ ██████╗ ██████╗ -// ██╔══██╗██╔════╝██║ ██║██╔════╝██║ ██╔═══██╗██╔══██╗ -// ██║ ██║█████╗ ██║ ██║█████╗ ██║ ██║ ██║██████╔╝ -// ██║ ██║██╔══╝ ╚██╗ ██╔╝██╔══╝ ██║ ██║ ██║██╔═══╝ -// ██████╔╝███████╗ ╚████╔╝ ███████╗███████╗╚██████╔╝██║ -// ╚═════╝ ╚══════╝ ╚═══╝ ╚══════╝╚══════╝ ╚═════╝ ╚═╝ - -import path from 'path' -import fs from 'fs' -import {Compiler} from '@rspack/core' -import * as messages from '../../lib/messages' -import {installOptionalDependencies} from '../../lib/utils' -import {isUsingPreact} from './preact' -import {DevOptions} from '../../../commands/dev' -import {isUsingTypeScript, maybeUseTypeScript} from './typescript' -import {JsFramework} from '../../webpack-types' - -let userMessageDelivered = false - -const babelConfigFiles = [ - '.babelrc', - '.babelrc.json', - '.babelrc.js', - '.babelrc.cjs', - 'babel.config.json', - 'babel.config.js', - 'babel.config.cjs' -] - -export function isUsingBabel(projectPath: string): boolean { - const packageJsonPath = path.join(projectPath, 'package.json') - const manifestJsonPath = path.join(projectPath, 'manifest.json') - - if (!fs.existsSync(packageJsonPath)) { - return false - } - - const packageJson = require(packageJsonPath) - - const babelAsDevDep = - packageJson.devDependencies && packageJson.devDependencies['babel-core'] - - const babelAsDep = - packageJson.dependencies && packageJson.dependencies['babel-core'] - - const isUsingBabel = - babelConfigFiles.some((file) => - fs.existsSync(path.join(projectPath, file)) - ) || - !!babelAsDevDep || - !!babelAsDep - - if (isUsingBabel) { - if (!userMessageDelivered) { - const manifest = require(manifestJsonPath) - const manifestName = manifest.name || 'Extension.js' - if (process.env.EXTENSION_ENV === 'development') { - if (process.env.EXTENSION_ENV === 'development') { - console.log(messages.isUsingIntegration(manifestName, 'Babel')) - } - } - - userMessageDelivered = true - } - } - - return isUsingBabel -} - -export function getBabelConfigFile(projectPath: string) { - for (const file of babelConfigFiles) { - const configFile = path.join(projectPath, file) - - if (fs.existsSync(configFile)) { - return configFile - } - } - - return undefined -} - -export function babelConfig( - projectPath: string, - opts: { - mode: DevOptions['mode'] - typescript: boolean - } -) { - const presetModernExtensions = - require('babel-preset-modern-browser-extension').default - - return { - // When set, the given directory will be used to cache the results - // of the loader. Future webpack builds will attempt to read from - // the cache to avoid needing to run the potentially expensive Babel - // recompilation process on each run. If the value is set to true in - // options ({cacheDirectory: true}), the loader will use the default - // cache directory in node_modules/.cache/babel-loader or fallback to - // the default OS temporary file directory if no node_modules folder - // could be found in any root directory. - cacheDirectory: false, - // When set, each Babel transform output will be compressed with Gzip. - // If you want to opt-out of cache compression, set it to false -- your - // project may benefit from this if it transpiles thousands of files. - cacheCompression: false, - babelrc: false, - configFile: getBabelConfigFile(projectPath), - compact: opts.mode === 'production', - overrides: [presetModernExtensions(opts).overrides], - presets: [...presetModernExtensions(opts).presets], - plugins: [ - ...presetModernExtensions(opts).plugins, - process.env.NODE_ENV !== 'test' && - opts.mode === 'development' && - isUsingPreact(projectPath) && - require.resolve('react-refresh/babel') - ].filter(Boolean) - } -} - -export async function maybeUseBabel( - compiler: Compiler, - projectPath: string -): Promise { - if (!isUsingBabel(projectPath)) return undefined - - try { - require.resolve('babel-loader') - } catch (e) { - const babelDependencies = [ - '@babel/core', - 'babel-loader', - 'babel-preset-modern-browser-extension' - ] - - const manifest = require(path.join(projectPath, 'manifest.json')) - const manifestName = manifest.name || 'Extension.js' - - await installOptionalDependencies(manifestName, 'Babel', babelDependencies) - - // The compiler will exit after installing the dependencies - // as it can't read the new dependencies without a restart. - console.log(messages.youAreAllSet(manifestName, 'Babel')) - process.exit(0) - } - - // Prevent users from running ts/tsx files when not using TypeScript - const files = isUsingTypeScript(projectPath) - ? /\.(js|mjs|jsx|mjsx|ts|mts|tsx|mtsx)$/ - : /\.(js|mjs|jsx|mjsx)$/ - - const mode = compiler.options.mode - const maybeInstallTypeScript = await maybeUseTypeScript(projectPath) - - return { - plugins: undefined, - loaders: [ - // https://webpack.js.org/loaders/babel-loader/ - // https://babeljs.io/docs/en/babel-loader - { - test: files, - include: projectPath, - exclude: [/[\\/]node_modules[\\/]/], - loader: require.resolve('babel-loader'), - options: babelConfig(projectPath, { - mode, - typescript: maybeInstallTypeScript - }) - } - ], - alias: undefined - } -} diff --git a/yarn.lock b/yarn.lock index 08a0da9f..e69bb2e5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2164,25 +2164,12 @@ resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33" integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg== -"@pmmmwh/react-refresh-webpack-plugin@^0.5.15": - version "0.5.15" - resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.15.tgz#f126be97c30b83ed777e2aeabd518bc592e6e7c4" - integrity sha512-LFWllMA55pzB9D34w/wXUCf8+c+IYKuJDgxiZ3qMhl64KRMBHYM1I3VdGaD2BV5FNPV2/S2596bppxHbv2ZydQ== - dependencies: - ansi-html "^0.0.9" - core-js-pure "^3.23.3" - error-stack-parser "^2.0.6" - html-entities "^2.1.0" - loader-utils "^2.0.4" - schema-utils "^4.2.0" - source-map "^0.7.3" - "@polka/url@^1.0.0-next.20": version "1.0.0-next.25" resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.25.tgz#f077fdc0b5d0078d30893396ff4827a13f99e817" integrity sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ== -"@prefresh/core@^1.5.0": +"@prefresh/core@^1.5.0", "@prefresh/core@^1.5.2": version "1.5.2" resolved "https://registry.yarnpkg.com/@prefresh/core/-/core-1.5.2.tgz#750e1936d82f3b0a1199d3cda5c35e3443128490" integrity sha512-A/08vkaM1FogrCII5PZKCrygxSsc11obExBScm3JF1CryK2uDS3ZXeni7FeKCx1nYdUkj4UcJxzPzc1WliMzZA== @@ -2384,6 +2371,11 @@ resolved "https://registry.yarnpkg.com/@rspack/lite-tapable/-/lite-tapable-1.0.0.tgz#160883693462f164d0e6ede22f32614673ef6429" integrity sha512-7MZf4lburSUZoEenwazwUDKHhqyfnLCGnQ/tKcUtztfmVzfjZfRn/EaiT0AKkYGnL2U8AGsw89oUeVyvaOLVCw== +"@rspack/plugin-preact-refresh@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@rspack/plugin-preact-refresh/-/plugin-preact-refresh-1.0.0.tgz#f52cc960c41a7c2f28e84c8249dc212ae45799e8" + integrity sha512-FCdZTM0Z5/Am8jgTLyOQA5IDSysQNw19u87mRVem8r9tgzaEiGUv9Q7IIRnpCqNwzofeh/I/Qx/SneS7UpLQeQ== + "@rspack/plugin-react-refresh@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@rspack/plugin-react-refresh/-/plugin-react-refresh-1.0.0.tgz#7e0cc22b157d25131be4283667cdbb86960a3650" @@ -3257,11 +3249,6 @@ ansi-html-community@^0.0.8: resolved "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz#69fbc4d6ccbe383f9736934ae34c3f8290f1bf41" integrity sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw== -ansi-html@^0.0.9: - version "0.0.9" - resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.9.tgz#6512d02342ae2cc68131952644a129cb734cd3f0" - integrity sha512-ozbS3LuenHVxNRh/wdnN16QapUHzauqSomAl1jwwJRRsGwFwtj644lIhxfWu0Fy0acCij2+AEgHvjscq3dlVXg== - ansi-regex@^5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304" @@ -3960,11 +3947,6 @@ core-js-compat@^3.37.1, core-js-compat@^3.38.0: dependencies: browserslist "^4.23.3" -core-js-pure@^3.23.3: - version "3.38.1" - resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.38.1.tgz#e8534062a54b7221344884ba9b52474be495ada3" - integrity sha512-BY8Etc1FZqdw1glX0XNOq2FDwfrg/VGqoZOZCdaL+UmdaqDwQwYXkMJT4t6In+zfEfOJDcM9T0KdbBeJg8KKCQ== - core-util-is@~1.0.0: version "1.0.3" resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85" @@ -6135,7 +6117,7 @@ loader-utils@^1.0.2: emojis-list "^3.0.0" json5 "^1.0.1" -loader-utils@^2.0.0, loader-utils@^2.0.4: +loader-utils@^2.0.0: version "2.0.4" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c" integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw== @@ -7181,6 +7163,11 @@ postcss@^8.2.14, postcss@^8.4.23, postcss@^8.4.33, postcss@^8.4.40, postcss@^8.4 picocolors "^1.0.1" source-map-js "^1.2.0" +preact@^10.23.2: + version "10.23.2" + resolved "https://registry.yarnpkg.com/preact/-/preact-10.23.2.tgz#52deec92796ae0f0cc6b034d9c66e0fbc1b837dc" + integrity sha512-kKYfePf9rzKnxOAKDpsWhg/ysrHPqT+yQ7UW4JjdnqjFIeNUnNcEJvhuA8fDenxAGWzUqtd51DfVg7xp/8T9NA== + preferred-pm@^3.0.0: version "3.1.4" resolved "https://registry.yarnpkg.com/preferred-pm/-/preferred-pm-3.1.4.tgz#b99cf3da129cdb63555649b226b7530e82769769" @@ -7315,11 +7302,6 @@ react-is@^18.0.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e" integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg== -react-refresh-typescript@^2.0.9: - version "2.0.9" - resolved "https://registry.yarnpkg.com/react-refresh-typescript/-/react-refresh-typescript-2.0.9.tgz#f8a86efcb34f8d717100230564b9b57477d74b10" - integrity sha512-chAnOO4vpxm/3WkgOVmti+eN8yUtkJzeGkOigV6UA9eDFz12W34e/SsYe2H5+RwYJ3+sfSZkVbiXcG1chEBxlg== - react-refresh@^0.14.2: version "0.14.2" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.2.tgz#3833da01ce32da470f1f936b9d477da5c7028bf9"