fix: make Docusaurus PnP strict mode compatible (#6047)

Co-authored-by: Kristoffer K. <merceyz@users.noreply.github.com>

.github/workflows/tests-e2e.yml

@@ -72,17 +72,17 @@ jobs:
           KEEP_CONTAINER: true
       - name: Install test-website project with Yarn Berry and nodeLinker = ${{ matrix.nodeLinker }}
         run: |
-          # we have to switch to berry first before setting the version we want
           yarn set version berry
-          # temporary using canary for #5342
-          yarn set version canary
 
           yarn config set nodeLinker ${{ matrix.nodeLinker }}
-          yarn config set pnpMode loose
           yarn config set npmRegistryServer http://localhost:4873
           yarn config set unsafeHttpWhitelist --json '["localhost"]'
           yarn config set enableGlobalCache true
 
+          # Patch package so that peer deps are provided. This has been fixed in terser by making acorn a direct dependency
+          # TODO watch out for the next terser release. Commit: https://github.com/terser/terser/commit/05b23eeb682d732484ad51b19bf528258fd5dc2a
+          yarn config set packageExtensions --json '{"terser-webpack-plugin@*": {"dependencies": {"acorn": "^8.6.0"}}, "html-minifier-terser@*": {"dependencies": {"acorn": "^8.6.0"}}}'
+
           yarn install
         working-directory: ../test-website
         env:

packages/create-docusaurus/templates/classic-typescript/package.json

@@ -18,13 +18,10 @@
     "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/preset-classic": "2.0.0-beta.9",
     "@mdx-js/react": "^1.6.21",
-    "@svgr/webpack": "^6.0.0",
     "clsx": "^1.1.1",
-    "file-loader": "^6.2.0",
     "prism-react-renderer": "^1.2.1",
     "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react-dom": "^17.0.1"
-    "url-loader": "^4.1.1"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.0.0-beta.9",

packages/create-docusaurus/templates/classic/package.json

@@ -17,13 +17,10 @@
     "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/preset-classic": "2.0.0-beta.9",
     "@mdx-js/react": "^1.6.21",
-    "@svgr/webpack": "^6.0.0",
     "clsx": "^1.1.1",
-    "file-loader": "^6.2.0",
     "prism-react-renderer": "^1.2.1",
     "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react-dom": "^17.0.1"
-    "url-loader": "^4.1.1"
   },
   "browserslist": {
     "production": [

packages/create-docusaurus/templates/facebook/package.json

@@ -21,12 +21,9 @@
     "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/preset-classic": "2.0.0-beta.9",
     "@mdx-js/react": "^1.6.21",
-    "@svgr/webpack": "^6.0.0",
     "clsx": "^1.1.1",
-    "file-loader": "^6.2.0",
     "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react-dom": "^17.0.1"
-    "url-loader": "^4.1.1"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.16.3",

packages/docusaurus-mdx-loader/package.json

@@ -20,7 +20,6 @@
   "dependencies": {
     "@babel/parser": "^7.16.4",
     "@babel/traverse": "^7.16.3",
-    "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/utils": "2.0.0-beta.9",
     "@mdx-js/mdx": "^1.6.21",
     "@mdx-js/react": "^1.6.21",
@@ -32,6 +31,7 @@
     "mdast-util-to-string": "^2.0.0",
     "remark-emoji": "^2.1.0",
     "stringify-object": "^3.3.0",
+    "tslib": "^2.3.1",
     "unist-util-visit": "^2.0.2",
     "url-loader": "^4.1.1",
     "webpack": "^5.61.0"

packages/docusaurus-mdx-loader/src/index.ts

@@ -13,6 +13,7 @@ import {
   parseFrontMatter,
   parseMarkdownContentTitle,
   escapePath,
+  getFileLoaderUtils,
 } from '@docusaurus/utils';
 import stringifyObject from 'stringify-object';
 import headings from './remark/headings';
@@ -20,7 +21,6 @@ import toc from './remark/toc';
 import unwrapMdxCodeBlocks from './remark/unwrapMdxCodeBlocks';
 import transformImage from './remark/transformImage';
 import transformLinks from './remark/transformLinks';
-import {getFileLoaderUtils} from '@docusaurus/core/lib/webpack/utils';
 import type {RemarkAndRehypePluginOptions} from '@docusaurus/mdx-loader';
 import type {LoaderContext} from 'webpack';
 

packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__snapshots__/index.test.ts.snap

@@ -12,17 +12,17 @@ exports[`transformImage plugin pathname protocol 1`] = `
 exports[`transformImage plugin transform md images to <img /> 1`] = `
 "![img](https://example.com/img.png)
 
-<img src={require(\\"!url-loader?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=file-loader!./static/img.png\\").default} />
+<img src={require(\\"![CWD]/node_modules/url-loader/dist/cjs.js?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=[CWD]/node_modules/file-loader/dist/cjs.js!./static/img.png\\").default} />
 
-<img alt={\\"img\\"} src={require(\\"!url-loader?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=file-loader!./static/img.png\\").default} />
+<img alt={\\"img\\"} src={require(\\"![CWD]/node_modules/url-loader/dist/cjs.js?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=[CWD]/node_modules/file-loader/dist/cjs.js!./static/img.png\\").default} />
 
-<img alt={\\"img from second static folder\\"} src={require(\\"!url-loader?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=file-loader!packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__fixtures__/static2/img2.png\\").default} />
+<img alt={\\"img from second static folder\\"} src={require(\\"![CWD]/node_modules/url-loader/dist/cjs.js?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=[CWD]/node_modules/file-loader/dist/cjs.js!packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__fixtures__/static2/img2.png\\").default} />
 
-<img alt={\\"img from second static folder\\"} src={require(\\"!url-loader?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=file-loader!./static2/img2.png\\").default} />
+<img alt={\\"img from second static folder\\"} src={require(\\"![CWD]/node_modules/url-loader/dist/cjs.js?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=[CWD]/node_modules/file-loader/dist/cjs.js!./static2/img2.png\\").default} />
 
-<img alt={\\"img\\"} src={require(\\"!url-loader?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=file-loader!./static/img.png\\").default} title=\\"Title\\" /> <img alt={\\"img\\"} src={require(\\"!url-loader?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=file-loader!packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__fixtures__/static/img.png\\").default} />
+<img alt={\\"img\\"} src={require(\\"![CWD]/node_modules/url-loader/dist/cjs.js?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=[CWD]/node_modules/file-loader/dist/cjs.js!./static/img.png\\").default} title=\\"Title\\" /> <img alt={\\"img\\"} src={require(\\"![CWD]/node_modules/url-loader/dist/cjs.js?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=[CWD]/node_modules/file-loader/dist/cjs.js!packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/__fixtures__/static/img.png\\").default} />
 
-<img alt={\\"img with &quot;quotes&quot;\\"} src={require(\\"!url-loader?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=file-loader!./static/img.png\\").default} title=\\"&#39;Quoted&#39; title\\" />
+<img alt={\\"img with &quot;quotes&quot;\\"} src={require(\\"![CWD]/node_modules/url-loader/dist/cjs.js?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=[CWD]/node_modules/file-loader/dist/cjs.js!./static/img.png\\").default} title=\\"&#39;Quoted&#39; title\\" />
 
 ## Heading
 

packages/docusaurus-mdx-loader/src/remark/transformImage/__tests__/index.test.ts

@@ -11,6 +11,7 @@ import mdx from 'remark-mdx';
 import vfile from 'to-vfile';
 import plugin from '../index';
 import headings from '../../headings/index';
+import {posixPath} from '@docusaurus/utils';
 
 const processFixture = async (name, options) => {
   const filePath = path.join(__dirname, `__fixtures__/${name}.md`);
@@ -21,7 +22,9 @@ const processFixture = async (name, options) => {
     .use(plugin, {...options, filePath})
     .process(file);
 
-  return result.toString();
+  return result
+    .toString()
+    .replace(new RegExp(posixPath(process.cwd()), 'g'), '[CWD]');
 };
 
 const staticDirs = [

packages/docusaurus-mdx-loader/src/remark/transformImage/index.ts

@@ -10,11 +10,11 @@ import path from 'path';
 import url from 'url';
 import fs from 'fs-extra';
 import escapeHtml from 'escape-html';
-import {getFileLoaderUtils} from '@docusaurus/core/lib/webpack/utils';
 import {
   posixPath,
   escapePath,
   toMessageRelativeFilePath,
+  getFileLoaderUtils,
 } from '@docusaurus/utils';
 import type {Plugin, Transformer} from 'unified';
 import type {Image, Literal} from 'mdast';

packages/docusaurus-mdx-loader/src/remark/transformLinks/__tests__/__snapshots__/index.test.ts.snap

@@ -10,13 +10,13 @@ exports[`transformAsset plugin pathname protocol 1`] = `
 exports[`transformAsset plugin transform md links to <a /> 1`] = `
 "[asset](https://example.com/asset.pdf)
 
-<a target=\\"_blank\\" href={require('!file-loader?name=assets/files/[name]-[hash].[ext]!./asset.pdf').default}></a>
+<a target=\\"_blank\\" href={require('![CWD]/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[hash].[ext]!./asset.pdf').default}></a>
 
-<a target=\\"_blank\\" href={require('!file-loader?name=assets/files/[name]-[hash].[ext]!./asset.pdf').default}>asset</a>
+<a target=\\"_blank\\" href={require('![CWD]/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[hash].[ext]!./asset.pdf').default}>asset</a>
 
-<a target=\\"_blank\\" href={require('!file-loader?name=assets/files/[name]-[hash].[ext]!./asset.pdf').default + '#page=2'}>asset with hash</a>
+<a target=\\"_blank\\" href={require('![CWD]/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[hash].[ext]!./asset.pdf').default + '#page=2'}>asset with hash</a>
 
-<a target=\\"_blank\\" href={require('!file-loader?name=assets/files/[name]-[hash].[ext]!./asset.pdf').default} title=\\"Title\\">asset</a>
+<a target=\\"_blank\\" href={require('![CWD]/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[hash].[ext]!./asset.pdf').default} title=\\"Title\\">asset</a>
 
 ## Heading
 
@@ -28,20 +28,20 @@ exports[`transformAsset plugin transform md links to <a /> 1`] = `
 
 [assets](/github/!file-loader!/assets.pdf)
 
-<a target=\\"_blank\\" href={require('!file-loader?name=assets/files/[name]-[hash].[ext]!./asset.pdf').default}>asset</a>
+<a target=\\"_blank\\" href={require('![CWD]/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[hash].[ext]!./asset.pdf').default}>asset</a>
 
-<a target=\\"_blank\\" href={require('!file-loader?name=assets/files/[name]-[hash].[ext]!./static2/asset2.pdf').default}>asset2</a>
+<a target=\\"_blank\\" href={require('![CWD]/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[hash].[ext]!./static2/asset2.pdf').default}>asset2</a>
 
-<a target=\\"_blank\\" href={require('!file-loader?name=assets/files/[name]-[hash].[ext]!./static/staticAsset.pdf').default}>staticAsset.pdf</a>
+<a target=\\"_blank\\" href={require('![CWD]/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[hash].[ext]!./static/staticAsset.pdf').default}>staticAsset.pdf</a>
 
-<a target=\\"_blank\\" href={require('!file-loader?name=assets/files/[name]-[hash].[ext]!./static/staticAsset.pdf').default}>@site/static/staticAsset.pdf</a>
+<a target=\\"_blank\\" href={require('![CWD]/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[hash].[ext]!./static/staticAsset.pdf').default}>@site/static/staticAsset.pdf</a>
 
-<a target=\\"_blank\\" href={require('!file-loader?name=assets/files/[name]-[hash].[ext]!./static/staticAsset.pdf').default + '#page=2'} title=\\"Title\\">@site/static/staticAsset.pdf</a>
+<a target=\\"_blank\\" href={require('![CWD]/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[hash].[ext]!./static/staticAsset.pdf').default + '#page=2'} title=\\"Title\\">@site/static/staticAsset.pdf</a>
 
-<a target=\\"_blank\\" href={require('!file-loader?name=assets/files/[name]-[hash].[ext]!./static/staticAsset.pdf').default}>Just staticAsset.pdf</a>, and <a target=\\"_blank\\" href={require('!file-loader?name=assets/files/[name]-[hash].[ext]!./static/staticAsset.pdf').default}><strong>awesome</strong> staticAsset 2.pdf &#39;It is really &quot;AWESOME&quot;&#39;</a>, but also <a target=\\"_blank\\" href={require('!file-loader?name=assets/files/[name]-[hash].[ext]!./static/staticAsset.pdf').default}>coded <code>staticAsset 3.pdf</code></a>
+<a target=\\"_blank\\" href={require('![CWD]/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[hash].[ext]!./static/staticAsset.pdf').default}>Just staticAsset.pdf</a>, and <a target=\\"_blank\\" href={require('![CWD]/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[hash].[ext]!./static/staticAsset.pdf').default}><strong>awesome</strong> staticAsset 2.pdf &#39;It is really &quot;AWESOME&quot;&#39;</a>, but also <a target=\\"_blank\\" href={require('![CWD]/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[hash].[ext]!./static/staticAsset.pdf').default}>coded <code>staticAsset 3.pdf</code></a>
 
-<a target=\\"_blank\\" href={require('!file-loader?name=assets/files/[name]-[hash].[ext]!./static/staticAssetImage.png').default}><img alt={\\"Clickable Docusaurus logo\\"} src={require(\\"!url-loader?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=file-loader!./static/staticAssetImage.png\\").default} /></a>
+<a target=\\"_blank\\" href={require('![CWD]/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[hash].[ext]!./static/staticAssetImage.png').default}><img alt={\\"Clickable Docusaurus logo\\"} src={require(\\"![CWD]/node_modules/url-loader/dist/cjs.js?limit=10000&name=assets/images/[name]-[hash].[ext]&fallback=[CWD]/node_modules/file-loader/dist/cjs.js!./static/staticAssetImage.png\\").default} /></a>
 
-<a target=\\"_blank\\" href={require('!file-loader?name=assets/files/[name]-[hash].[ext]!./asset.pdf').default}><span style={{color: \\"red\\"}}>Stylized link to asset file</span></a>
+<a target=\\"_blank\\" href={require('![CWD]/node_modules/file-loader/dist/cjs.js?name=assets/files/[name]-[hash].[ext]!./asset.pdf').default}><span style={{color: \\"red\\"}}>Stylized link to asset file</span></a>
 "
 `;

packages/docusaurus-mdx-loader/src/remark/transformLinks/__tests__/index.test.ts

@@ -11,6 +11,7 @@ import mdx from 'remark-mdx';
 import vfile from 'to-vfile';
 import plugin from '..';
 import transformImage from '../../transformImage';
+import {posixPath} from '@docusaurus/utils';
 
 const processFixture = async (name: string, options?) => {
   const filePath = path.join(__dirname, `__fixtures__/${name}.md`);
@@ -30,7 +31,9 @@ const processFixture = async (name: string, options?) => {
     })
     .process(file);
 
-  return result.toString();
+  return result
+    .toString()
+    .replace(new RegExp(posixPath(process.cwd()), 'g'), '[CWD]');
 };
 
 describe('transformAsset plugin', () => {

packages/docusaurus-mdx-loader/src/remark/transformLinks/index.ts

@@ -9,6 +9,7 @@ import {
   toMessageRelativeFilePath,
   posixPath,
   escapePath,
+  getFileLoaderUtils,
 } from '@docusaurus/utils';
 import visit from 'unist-util-visit';
 import path from 'path';
@@ -16,7 +17,6 @@ import url from 'url';
 import fs from 'fs-extra';
 import escapeHtml from 'escape-html';
 import {stringifyContent} from '../utils';
-import {getFileLoaderUtils} from '@docusaurus/core/lib/webpack/utils';
 import type {Plugin, Transformer} from 'unified';
 import type {Link, Literal} from 'mdast';
 

packages/docusaurus-plugin-client-redirects/package.json

@@ -18,7 +18,6 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/utils": "2.0.0-beta.9",
     "@docusaurus/utils-common": "2.0.0-beta.9",
     "@docusaurus/utils-validation": "2.0.0-beta.9",
@@ -29,9 +28,11 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
+    "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/types": "2.0.0-beta.9"
   },
   "peerDependencies": {
+    "@docusaurus/core": "2.0.0-beta.9",
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"
   },

packages/docusaurus-plugin-client-redirects/src/normalizePluginOptions.ts

@@ -7,7 +7,7 @@
 
 import {PluginOptions, RedirectOption, UserPluginOptions} from './types';
 import {Joi, PathnameSchema} from '@docusaurus/utils-validation';
-import {DEFAULT_PLUGIN_ID} from '@docusaurus/core/lib/constants';
+import {DEFAULT_PLUGIN_ID} from '@docusaurus/utils';
 
 export const DefaultPluginOptions: PluginOptions = {
   id: DEFAULT_PLUGIN_ID, // TODO temporary

packages/docusaurus-plugin-content-blog/package.json

@@ -18,7 +18,6 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/mdx-loader": "2.0.0-beta.9",
     "@docusaurus/utils": "2.0.0-beta.9",
     "@docusaurus/utils-validation": "2.0.0-beta.9",
@@ -37,9 +36,11 @@
     "webpack": "^5.61.0"
   },
   "devDependencies": {
+    "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/types": "2.0.0-beta.9"
   },
   "peerDependencies": {
+    "@docusaurus/core": "2.0.0-beta.9",
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"
   },

packages/docusaurus-plugin-content-blog/src/index.ts

@@ -16,8 +16,8 @@ import {
   posixPath,
   addTrailingPathSeparator,
   createAbsoluteFilePathMatcher,
+  DEFAULT_PLUGIN_ID,
 } from '@docusaurus/utils';
-import {DEFAULT_PLUGIN_ID} from '@docusaurus/core/lib/constants';
 import {translateContent, getTranslationFiles} from './translations';
 
 import {

packages/docusaurus-plugin-content-docs/package.json

@@ -18,7 +18,6 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/mdx-loader": "2.0.0-beta.9",
     "@docusaurus/utils": "2.0.0-beta.9",
     "@docusaurus/utils-validation": "2.0.0-beta.9",
@@ -38,6 +37,7 @@
     "webpack": "^5.61.0"
   },
   "devDependencies": {
+    "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/module-type-aliases": "2.0.0-beta.9",
     "@docusaurus/types": "2.0.0-beta.9",
     "@types/js-yaml": "^4.0.0",
@@ -47,6 +47,7 @@
     "utility-types": "^3.10.0"
   },
   "peerDependencies": {
+    "@docusaurus/core": "2.0.0-beta.9",
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"
   },

packages/docusaurus-plugin-content-docs/src/__tests__/cli.test.ts

@@ -14,7 +14,7 @@ import {
   getVersionsFilePath,
   getVersionedSidebarsDirPath,
 } from '../versions';
-import {DEFAULT_PLUGIN_ID} from '@docusaurus/core/lib/constants';
+import {DEFAULT_PLUGIN_ID} from '@docusaurus/utils';
 
 const fixtureDir = path.join(__dirname, '__fixtures__');
 

packages/docusaurus-plugin-content-docs/src/__tests__/docs.test.ts

@@ -26,10 +26,9 @@ import type {
   DocNavLink,
 } from '../types';
 import type {LoadContext} from '@docusaurus/types';
-import {DEFAULT_PLUGIN_ID} from '@docusaurus/core/lib/constants';
 import {DEFAULT_OPTIONS} from '../options';
 import {Optional} from 'utility-types';
-import {createSlugger, posixPath} from '@docusaurus/utils';
+import {createSlugger, posixPath, DEFAULT_PLUGIN_ID} from '@docusaurus/utils';
 import {createSidebarsUtils} from '../sidebars/utils';
 
 const fixtureDir = path.join(__dirname, '__fixtures__');

packages/docusaurus-plugin-content-docs/src/__tests__/index.test.ts

@@ -15,9 +15,8 @@ import pluginContentDocs from '../index';
 import {loadContext} from '@docusaurus/core/src/server/index';
 import {applyConfigureWebpack} from '@docusaurus/core/src/webpack/utils';
 import type {RouteConfig} from '@docusaurus/types';
-import {posixPath} from '@docusaurus/utils';
+import {posixPath, DEFAULT_PLUGIN_ID} from '@docusaurus/utils';
 import {sortConfig} from '@docusaurus/core/src/server/plugins';
-import {DEFAULT_PLUGIN_ID} from '@docusaurus/core/lib/constants';
 
 import * as cliDocs from '../cli';
 import {OptionsSchema} from '../options';

packages/docusaurus-plugin-content-docs/src/__tests__/versions.test.ts

@@ -13,7 +13,7 @@ import {
   readVersionsMetadata,
 } from '../versions';
 import {DEFAULT_OPTIONS} from '../options';
-import {DEFAULT_PLUGIN_ID} from '@docusaurus/core/lib/constants';
+import {DEFAULT_PLUGIN_ID} from '@docusaurus/utils';
 import {PluginOptions, VersionMetadata} from '../types';
 import type {I18n} from '@docusaurus/types';
 

packages/docusaurus-plugin-content-docs/src/cli.ts

@@ -14,7 +14,7 @@ import fs from 'fs-extra';
 import path from 'path';
 import type {PathOptions, SidebarOptions} from './types';
 import {loadSidebarsFile, resolveSidebarPathOption} from './sidebars';
-import {DEFAULT_PLUGIN_ID} from '@docusaurus/core/lib/constants';
+import {DEFAULT_PLUGIN_ID} from '@docusaurus/utils';
 
 function createVersionedSidebarFile({
   siteDir,

packages/docusaurus-plugin-content-docs/src/index.ts

@@ -7,7 +7,6 @@
 
 import path from 'path';
 
-import {DEFAULT_PLUGIN_ID} from '@docusaurus/core/lib/constants';
 import {
   normalizeUrl,
   docuHash,
@@ -17,6 +16,7 @@ import {
   addTrailingPathSeparator,
   createAbsoluteFilePathMatcher,
   createSlugger,
+  DEFAULT_PLUGIN_ID,
 } from '@docusaurus/utils';
 import type {LoadContext, Plugin} from '@docusaurus/types';
 import {loadSidebars} from './sidebars';

packages/docusaurus-plugin-content-docs/src/versions.ts

@@ -21,9 +21,13 @@ import {
   CURRENT_VERSION_NAME,
 } from './constants';
 
-import {DEFAULT_PLUGIN_ID} from '@docusaurus/core/lib/constants';
 import type {LoadContext} from '@docusaurus/types';
-import {getPluginI18nPath, normalizeUrl, posixPath} from '@docusaurus/utils';
+import {
+  getPluginI18nPath,
+  normalizeUrl,
+  posixPath,
+  DEFAULT_PLUGIN_ID,
+} from '@docusaurus/utils';
 import {difference} from 'lodash';
 import {resolveSidebarPathOption} from './sidebars';
 

packages/docusaurus-plugin-content-pages/package.json

@@ -18,7 +18,6 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/mdx-loader": "2.0.0-beta.9",
     "@docusaurus/utils": "2.0.0-beta.9",
     "@docusaurus/utils-validation": "2.0.0-beta.9",
@@ -28,9 +27,11 @@
     "webpack": "^5.61.0"
   },
   "devDependencies": {
+    "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/types": "2.0.0-beta.9"
   },
   "peerDependencies": {
+    "@docusaurus/core": "2.0.0-beta.9",
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"
   },

packages/docusaurus-plugin-content-pages/src/index.ts

@@ -18,6 +18,7 @@ import {
   Globby,
   createAbsoluteFilePathMatcher,
   normalizeUrl,
+  DEFAULT_PLUGIN_ID,
 } from '@docusaurus/utils';
 import {
   LoadContext,
@@ -29,7 +30,6 @@ import {
 import {Configuration} from 'webpack';
 import admonitions from 'remark-admonitions';
 import {PluginOptionSchema} from './pluginOptionSchema';
-import {DEFAULT_PLUGIN_ID} from '@docusaurus/core/lib/constants';
 
 import {
   PluginOptions,

packages/docusaurus-plugin-debug/package.json

@@ -18,16 +18,17 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/utils": "2.0.0-beta.9",
     "fs-extra": "^10.0.0",
     "react-json-view": "^1.21.3",
     "tslib": "^2.3.1"
   },
   "devDependencies": {
+    "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/types": "2.0.0-beta.9"
   },
   "peerDependencies": {
+    "@docusaurus/core": "2.0.0-beta.9",
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"
   },

packages/docusaurus-plugin-google-analytics/package.json

@@ -18,13 +18,14 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/utils-validation": "2.0.0-beta.9"
   },
   "devDependencies": {
+    "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/types": "2.0.0-beta.9"
   },
   "peerDependencies": {
+    "@docusaurus/core": "2.0.0-beta.9",
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"
   },

packages/docusaurus-plugin-google-gtag/package.json

@@ -18,13 +18,14 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/utils-validation": "2.0.0-beta.9"
   },
   "devDependencies": {
+    "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/types": "2.0.0-beta.9"
   },
   "peerDependencies": {
+    "@docusaurus/core": "2.0.0-beta.9",
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"
   },

packages/docusaurus-plugin-ideal-image/package.json

@@ -21,7 +21,6 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/lqip-loader": "2.0.0-beta.9",
     "@docusaurus/responsive-loader": "1.5.0",
     "@endiliey/react-ideal-image": "^0.0.11",
@@ -31,10 +30,12 @@
     "webpack": "^5.61.0"
   },
   "devDependencies": {
+    "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/types": "2.0.0-beta.9",
     "fs-extra": "^10.0.0"
   },
   "peerDependencies": {
+    "@docusaurus/core": "2.0.0-beta.9",
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"
   },

packages/docusaurus-plugin-pwa/package.json

@@ -23,7 +23,6 @@
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
     "@babel/plugin-proposal-optional-chaining": "^7.16.0",
     "@babel/preset-env": "^7.16.4",
-    "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/theme-common": "2.0.0-beta.9",
     "@docusaurus/theme-translations": "2.0.0-beta.9",
     "@docusaurus/utils": "2.0.0-beta.9",
@@ -44,6 +43,7 @@
   },
   "peerDependencies": {
     "@babel/core": "^7.0.0",
+    "@docusaurus/core": "2.0.0-beta.9",
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"
   }

packages/docusaurus-plugin-sitemap/package.json

@@ -18,7 +18,6 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/utils": "2.0.0-beta.9",
     "@docusaurus/utils-common": "2.0.0-beta.9",
     "@docusaurus/utils-validation": "2.0.0-beta.9",
@@ -27,9 +26,11 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
+    "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/types": "2.0.0-beta.9"
   },
   "peerDependencies": {
+    "@docusaurus/core": "2.0.0-beta.9",
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"
   },

packages/docusaurus-preset-classic/package.json

@@ -18,7 +18,6 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/plugin-content-blog": "2.0.0-beta.9",
     "@docusaurus/plugin-content-docs": "2.0.0-beta.9",
     "@docusaurus/plugin-content-pages": "2.0.0-beta.9",
@@ -30,6 +29,7 @@
     "@docusaurus/theme-search-algolia": "2.0.0-beta.9"
   },
   "peerDependencies": {
+    "@docusaurus/core": "2.0.0-beta.9",
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"
   },

packages/docusaurus-theme-classic/package.json

@@ -23,7 +23,6 @@
     "update-code-translations": "node -e 'require(\"./update-code-translations.js\").run()'"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/plugin-content-blog": "2.0.0-beta.9",
     "@docusaurus/plugin-content-docs": "2.0.0-beta.9",
     "@docusaurus/plugin-content-pages": "2.0.0-beta.9",
@@ -56,6 +55,7 @@
     "utility-types": "^3.10.0"
   },
   "peerDependencies": {
+    "@docusaurus/core": "2.0.0-beta.9",
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"
   },

packages/docusaurus-theme-common/package.json

@@ -18,7 +18,6 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/plugin-content-blog": "2.0.0-beta.9",
     "@docusaurus/plugin-content-docs": "2.0.0-beta.9",
     "@docusaurus/plugin-content-pages": "2.0.0-beta.9",
@@ -35,6 +34,7 @@
     "lodash": "^4.17.20"
   },
   "peerDependencies": {
+    "@docusaurus/core": "2.0.0-beta.9",
     "prism-react-renderer": "^1.2.1",
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"

packages/docusaurus-theme-live-codeblock/package.json

@@ -17,7 +17,6 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/theme-translations": "2.0.0-beta.9",
     "@docusaurus/utils-validation": "2.0.0-beta.9",
     "@docusaurus/utils": "2.0.0-beta.9",
@@ -29,10 +28,12 @@
     "react-live": "2.2.3"
   },
   "devDependencies": {
+    "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/types": "2.0.0-beta.9",
     "@types/buble": "^0.20.1"
   },
   "peerDependencies": {
+    "@docusaurus/core": "2.0.0-beta.9",
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"
   },

packages/docusaurus-theme-live-codeblock/src/theme/Playground/index.js

@@ -13,7 +13,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import usePrismTheme from '@theme/hooks/usePrismTheme';
 import styles from './styles.module.css';
-import useIsBrowser from '@docusaurus/core/lib/client/exports/useIsBrowser';
+import useIsBrowser from '@docusaurus/useIsBrowser';
 
 function Header({children}) {
   return <div className={clsx(styles.playgroundHeader)}>{children}</div>;

packages/docusaurus-theme-search-algolia/package.json

@@ -21,7 +21,6 @@
   },
   "dependencies": {
     "@docsearch/react": "^3.0.0-alpha.39",
-    "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/theme-common": "2.0.0-beta.9",
     "@docusaurus/theme-translations": "2.0.0-beta.9",
     "@docusaurus/utils": "2.0.0-beta.9",
@@ -37,6 +36,7 @@
     "fs-extra": "^10.0.0"
   },
   "peerDependencies": {
+    "@docusaurus/core": "2.0.0-beta.9",
     "react": "^16.8.4 || ^17.0.0",
     "react-dom": "^16.8.4 || ^17.0.0"
   },

packages/docusaurus-theme-translations/package.json

@@ -22,10 +22,10 @@
     "update": "node -e 'require(\"./update.js\").run()'"
   },
   "dependencies": {
-    "fs-extra": "^10.0.0"
+    "fs-extra": "^10.0.0",
+    "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@docusaurus/core": "2.0.0-beta.9",
     "chalk": "^4.1.2",
     "lodash": "^4.17.20"
   },

packages/docusaurus-utils-validation/src/validationSchemas.ts

@@ -4,15 +4,15 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 import Joi from './Joi';
-import {isValidPathname} from '@docusaurus/utils';
+import {isValidPathname, DEFAULT_PLUGIN_ID} from '@docusaurus/utils';
 import type {Tag} from '@docusaurus/utils';
 import {JoiFrontMatter} from './JoiFrontMatter';
 
 export const PluginIdSchema = Joi.string()
   .regex(/^[a-zA-Z_-]+$/)
-  // duplicate core constant, otherwise cyclic dependency is created :(
+  .default(DEFAULT_PLUGIN_ID);
-  .default('default');
 
 const MarkdownPluginsSchema = Joi.array()
   .items(

packages/docusaurus-utils/package.json

@@ -19,8 +19,10 @@
   "license": "MIT",
   "dependencies": {
     "@mdx-js/runtime": "^1.6.22",
+    "@svgr/webpack": "^6.0.0",
     "chalk": "^4.1.2",
     "escape-string-regexp": "^4.0.0",
+    "file-loader": "^6.2.0",
     "fs-extra": "^10.0.0",
     "github-slugger": "^1.4.0",
     "globby": "^11.0.4",
@@ -30,7 +32,8 @@
     "remark-mdx-remove-exports": "^1.6.22",
     "remark-mdx-remove-imports": "^1.6.22",
     "resolve-pathname": "^3.0.0",
-    "tslib": "^2.3.1"
+    "tslib": "^2.3.1",
+    "url-loader": "^4.1.1"
   },
   "engines": {
     "node": ">=14"
@@ -45,6 +48,7 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-dom": "*"
+    "react-dom": "*",
+    "webpack": "5.x"
   }
 }

packages/docusaurus-utils/src/__tests__/webpackUtils.test.ts

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {getFileLoaderUtils} from '../webpackUtils';
+
+describe('getFileLoaderUtils()', () => {
+  test('plugin svgo/removeViewBox should be disabled', () => {
+    const {oneOf} = getFileLoaderUtils().rules.svg();
+    expect(oneOf[0].use).toContainEqual(
+      expect.objectContaining({
+        loader: require.resolve('@svgr/webpack'),
+        options: expect.objectContaining({
+          svgoConfig: {
+            plugins: [
+              {
+                name: 'preset-default',
+                params: {
+                  overrides: {
+                    removeViewBox: false,
+                  },
+                },
+              },
+            ],
+          },
+        }),
+      }),
+    );
+  });
+});

packages/docusaurus-utils/src/index.ts

@@ -23,7 +23,9 @@ import resolvePathnameUnsafe from 'resolve-pathname';
 import {posixPath as posixPathImport} from './posixPath';
 import {simpleHash, docuHash} from './hashUtils';
 import {normalizeUrl} from './normalizeUrl';
+import {DEFAULT_PLUGIN_ID} from './constants';
 
+export * from './constants';
 export * from './mdxUtils';
 export * from './normalizeUrl';
 export * from './tags';
@@ -41,6 +43,7 @@ export {
   createMatcher,
   createAbsoluteFilePathMatcher,
 } from './globUtils';
+export * from './webpackUtils';
 
 const fileHash = new Map();
 export async function generate(
@@ -282,7 +285,7 @@ export function getPluginI18nPath({
   siteDir,
   locale,
   pluginName,
-  pluginId = 'default', // TODO duplicated constant
+  pluginId = DEFAULT_PLUGIN_ID,
   subPaths = [],
 }: {
   siteDir: string;
@@ -298,10 +301,7 @@ export function getPluginI18nPath({
     locale,
     // Make it convenient to use for single-instance
     // ie: return "docs", not "docs-default" nor "docs/default"
-    `${pluginName}${
+    `${pluginName}${pluginId === DEFAULT_PLUGIN_ID ? '' : `-${pluginId}`}`,
-      // TODO duplicate constant :(
-      pluginId === 'default' ? '' : `-${pluginId}`
-    }`,
     ...subPaths,
   );
 }

packages/docusaurus-utils/src/webpackUtils.ts

@@ -0,0 +1,144 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import type {RuleSetRule} from 'webpack';
+import path from 'path';
+import {posixPath} from './posixPath';
+import {
+  WEBPACK_URL_LOADER_LIMIT,
+  OUTPUT_STATIC_ASSETS_DIR_NAME,
+} from './constants';
+
+type AssetFolder = 'images' | 'files' | 'fonts' | 'medias';
+
+type FileLoaderUtils = {
+  loaders: {
+    file: (options: {folder: AssetFolder}) => RuleSetRule;
+    url: (options: {folder: AssetFolder}) => RuleSetRule;
+    inlineMarkdownImageFileLoader: string;
+    inlineMarkdownLinkFileLoader: string;
+  };
+  rules: {
+    images: () => RuleSetRule;
+    fonts: () => RuleSetRule;
+    media: () => RuleSetRule;
+    svg: () => RuleSetRule;
+    otherAssets: () => RuleSetRule;
+  };
+};
+
+// Inspired by https://github.com/gatsbyjs/gatsby/blob/8e6e021014da310b9cc7d02e58c9b3efe938c665/packages/gatsby/src/utils/webpack-utils.ts#L447
+export function getFileLoaderUtils(): FileLoaderUtils {
+  // files/images < urlLoaderLimit will be inlined as base64 strings directly in the html
+  const urlLoaderLimit = WEBPACK_URL_LOADER_LIMIT;
+
+  // defines the path/pattern of the assets handled by webpack
+  const fileLoaderFileName = (folder: AssetFolder) =>
+    `${OUTPUT_STATIC_ASSETS_DIR_NAME}/${folder}/[name]-[hash].[ext]`;
+
+  const loaders: FileLoaderUtils['loaders'] = {
+    file: (options: {folder: AssetFolder}) => ({
+      loader: require.resolve(`file-loader`),
+      options: {
+        name: fileLoaderFileName(options.folder),
+      },
+    }),
+    url: (options: {folder: AssetFolder}) => ({
+      loader: require.resolve('url-loader'),
+      options: {
+        limit: urlLoaderLimit,
+        name: fileLoaderFileName(options.folder),
+        fallback: require.resolve('file-loader'),
+      },
+    }),
+
+    // TODO find a better solution to avoid conflicts with the ideal-image plugin
+    // TODO this may require a little breaking change for ideal-image users?
+    // Maybe with the ideal image plugin, all md images should be "ideal"?
+    // This is used to force url-loader+file-loader on markdown images
+    // https://webpack.js.org/concepts/loaders/#inline
+    inlineMarkdownImageFileLoader: `!${posixPath(
+      require.resolve('url-loader'),
+    )}?limit=${urlLoaderLimit}&name=${fileLoaderFileName(
+      'images',
+    )}&fallback=${posixPath(require.resolve('file-loader'))}!`,
+    inlineMarkdownLinkFileLoader: `!${posixPath(
+      require.resolve('file-loader'),
+    )}?name=${fileLoaderFileName('files')}!`,
+  };
+
+  const rules: FileLoaderUtils['rules'] = {
+    /**
+     * Loads image assets, inlines images via a data URI if they are below
+     * the size threshold
+     */
+    images: () => ({
+      use: [loaders.url({folder: 'images'})],
+      test: /\.(ico|jpg|jpeg|png|gif|webp)(\?.*)?$/,
+    }),
+
+    fonts: () => ({
+      use: [loaders.url({folder: 'fonts'})],
+      test: /\.(woff|woff2|eot|ttf|otf)$/,
+    }),
+
+    /**
+     * Loads audio and video and inlines them via a data URI if they are below
+     * the size threshold
+     */
+    media: () => ({
+      use: [loaders.url({folder: 'medias'})],
+      test: /\.(mp4|webm|ogv|wav|mp3|m4a|aac|oga|flac)$/,
+    }),
+
+    svg: () => ({
+      test: /\.svg?$/,
+      oneOf: [
+        {
+          use: [
+            {
+              loader: require.resolve('@svgr/webpack'),
+              options: {
+                prettier: false,
+                svgo: true,
+                svgoConfig: {
+                  plugins: [
+                    {
+                      name: 'preset-default',
+                      params: {
+                        overrides: {
+                          removeViewBox: false,
+                        },
+                      },
+                    },
+                  ],
+                },
+                titleProp: true,
+                ref: ![path],
+              },
+            },
+          ],
+          // We don't want to use SVGR loader for non-React source code
+          // ie we don't want to use SVGR for CSS files...
+          issuer: {
+            and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
+          },
+        },
+        {
+          use: [loaders.url({folder: 'images'})],
+        },
+      ],
+    }),
+
+    otherAssets: () => ({
+      use: [loaders.file({folder: 'files'})],
+      test: /\.(pdf|doc|docx|xls|xlsx|zip|rar)$/,
+    }),
+  };
+
+  return {loaders, rules};
+}

packages/docusaurus/package.json

@@ -42,6 +42,7 @@
     "@babel/runtime-corejs3": "^7.16.3",
     "@babel/traverse": "^7.16.3",
     "@docusaurus/cssnano-preset": "2.0.0-beta.9",
+    "@docusaurus/mdx-loader": "2.0.0-beta.9",
     "@docusaurus/react-loadable": "5.5.2",
     "@docusaurus/utils": "2.0.0-beta.9",
     "@docusaurus/utils-common": "2.0.0-beta.9",

packages/docusaurus/src/client/.eslintrc.js

@@ -21,7 +21,6 @@ module.exports = {
           '**/../server/**',
           '**/../commands/**',
           '**/../webpack/**',
-          '**/../constants',
         ],
       },
     ],

packages/docusaurus/src/commands/clear.ts

@@ -4,10 +4,14 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 import fs from 'fs-extra';
 import path from 'path';
-import chalk = require('chalk');
+import chalk from 'chalk';
-import {DEFAULT_BUILD_DIR_NAME, GENERATED_FILES_DIR_NAME} from '../constants';
+import {
+  DEFAULT_BUILD_DIR_NAME,
+  GENERATED_FILES_DIR_NAME,
+} from '@docusaurus/utils';
 
 function removePath(fsPath: string) {
   return fs

packages/docusaurus/src/commands/commandUtils.ts

@@ -4,9 +4,10 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 import choosePort from '../choosePort';
 import {HostPortCLIOptions} from '@docusaurus/types';
-import {DEFAULT_PORT} from '../constants';
+import {DEFAULT_PORT} from '@docusaurus/utils';
 
 export function getCLIOptionHost(
   hostOption: HostPortCLIOptions['host'],

packages/docusaurus/src/commands/swizzle.ts

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import chalk = require('chalk');
+import chalk from 'chalk';
 import fs from 'fs-extra';
 import importFresh from 'import-fresh';
 import path from 'path';
 import {ImportedPluginModule, PluginConfig} from '@docusaurus/types';
 import leven from 'leven';
 import {partition} from 'lodash';
-import {THEME_PATH} from '../constants';
+import {THEME_PATH} from '@docusaurus/utils';
 import {loadContext, loadPluginConfigs} from '../server';
 import initPlugins from '../server/plugins/init';
 import {normalizePluginOptions} from '@docusaurus/utils-validation';

packages/docusaurus/src/server/configValidation.ts

@@ -6,7 +6,7 @@
  */
 
 import {DocusaurusConfig, I18nConfig} from '@docusaurus/types';
-import {DEFAULT_CONFIG_FILE_NAME, STATIC_DIR_NAME} from '../constants';
+import {DEFAULT_CONFIG_FILE_NAME, STATIC_DIR_NAME} from '@docusaurus/utils';
 import {
   Joi,
   logValidationBugReportHint,

packages/docusaurus/src/server/i18n.ts

@@ -6,9 +6,8 @@
  */
 import {I18n, DocusaurusConfig, I18nLocaleConfig} from '@docusaurus/types';
 import path from 'path';
-import {normalizeUrl} from '@docusaurus/utils';
+import {normalizeUrl, NODE_MAJOR_VERSION} from '@docusaurus/utils';
 import {getLangDir} from 'rtl-detect';
-import {NODE_MAJOR_VERSION} from '../constants';
 import chalk from 'chalk';
 
 function getDefaultLocaleLabel(locale: string) {

packages/docusaurus/src/server/index.ts

@@ -5,15 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {generate} from '@docusaurus/utils';
-import path, {join} from 'path';
-import chalk from 'chalk';
-import ssrDefaultTemplate from '../client/templates/ssr.html.template';
 import {
+  generate,
   DEFAULT_BUILD_DIR_NAME,
   DEFAULT_CONFIG_FILE_NAME,
   GENERATED_FILES_DIR_NAME,
-} from '../constants';
+} from '@docusaurus/utils';
+import path, {join} from 'path';
+import chalk from 'chalk';
+import ssrDefaultTemplate from '../client/templates/ssr.html.template';
 import loadClientModules from './client-modules';
 import loadConfig from './config';
 import {loadPlugins} from './plugins';

packages/docusaurus/src/server/plugins/index.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {generate} from '@docusaurus/utils';
+import {generate, DEFAULT_PLUGIN_ID} from '@docusaurus/utils';
 import fs from 'fs-extra';
 import path from 'path';
 import {
@@ -21,7 +21,6 @@ import {
 } from '@docusaurus/types';
 import initPlugins from './init';
 import chalk from 'chalk';
-import {DEFAULT_PLUGIN_ID} from '../../constants';
 import {chain} from 'lodash';
 import {localizePluginTranslationFile} from '../translations/translations';
 import applyRouteTrailingSlash from './applyRouteTrailingSlash';

packages/docusaurus/src/server/plugins/init.ts

@@ -16,7 +16,7 @@ import {
   PluginOptions,
   InitializedPlugin,
 } from '@docusaurus/types';
-import {DEFAULT_PLUGIN_ID} from '../../constants';
+import {DEFAULT_PLUGIN_ID} from '@docusaurus/utils';
 import {getPluginVersion} from '../versions';
 import {ensureUniquePluginInstanceIds} from './pluginIds';
 import {

packages/docusaurus/src/server/plugins/pluginIds.ts

@@ -6,7 +6,7 @@
  */
 
 import {groupBy} from 'lodash';
-import {DEFAULT_PLUGIN_ID} from '../../constants';
+import {DEFAULT_PLUGIN_ID} from '@docusaurus/utils';
 import {InitializedPlugin} from '@docusaurus/types';
 
 // It is forbidden to have 2 plugins of the same name sharing the same id

packages/docusaurus/src/server/themes/index.ts

@@ -7,7 +7,7 @@
 
 import {ThemeAliases, LoadedPlugin} from '@docusaurus/types';
 import path from 'path';
-import {THEME_PATH} from '../../constants';
+import {THEME_PATH} from '@docusaurus/utils';
 import themeAlias, {sortAliases} from './alias';
 
 const ThemeFallbackDir = path.resolve(__dirname, '../../client/theme-fallback');

packages/docusaurus/src/server/translations/__tests__/translationsExtractor.test.ts

@@ -14,7 +14,7 @@ import {
 import {getBabelOptions} from '../../../webpack/utils';
 import path from 'path';
 import {InitializedPlugin} from '@docusaurus/types';
-import {SRC_DIR_NAME} from '../../../constants';
+import {SRC_DIR_NAME} from '@docusaurus/utils';
 
 const TestBabelOptions = getBabelOptions({
   isServer: true,

packages/docusaurus/src/server/translations/translationsExtractor.ts

@@ -15,7 +15,7 @@ import {
   TranslationMessage,
 } from '@docusaurus/types';
 import nodePath from 'path';
-import {SRC_DIR_NAME} from '../../constants';
+import {SRC_DIR_NAME} from '@docusaurus/utils';
 import {safeGlobby} from '../utils';
 
 // We only support extracting source code translations from these kind of files

packages/docusaurus/src/webpack/__tests__/base.test.ts

@@ -13,9 +13,10 @@ import {
   getDocusaurusAliases,
   createBaseConfig,
 } from '../base';
-import * as utils from '../utils';
+// TODO seems to be a bug with how TS does star exports
-import {mapValues} from 'lodash';
+import * as utils from '@docusaurus/utils/lib/webpackUtils';
 import {posixPath} from '@docusaurus/utils';
+import {mapValues} from 'lodash';
 import {Props, ThemeAliases} from '@docusaurus/types';
 
 describe('babel transpilation exclude logic', () => {

packages/docusaurus/src/webpack/__tests__/utils.test.ts

@@ -12,7 +12,6 @@ import {
   getCustomizableJSLoader,
   applyConfigureWebpack,
   applyConfigurePostCss,
-  getFileLoaderUtils,
 } from '../utils';
 import {
   ConfigureWebpackFn,
@@ -178,31 +177,6 @@ describe('extending generated webpack config', () => {
   });
 });
 
-describe('getFileLoaderUtils()', () => {
-  test('plugin svgo/removeViewBox should be disabled', () => {
-    const {oneOf} = getFileLoaderUtils().rules.svg();
-    expect(oneOf[0].use).toContainEqual(
-      expect.objectContaining({
-        loader: '@svgr/webpack',
-        options: expect.objectContaining({
-          svgoConfig: {
-            plugins: [
-              {
-                name: 'preset-default',
-                params: {
-                  overrides: {
-                    removeViewBox: false,
-                  },
-                },
-              },
-            ],
-          },
-        }),
-      }),
-    );
-  });
-});
-
 describe('extending PostCSS', () => {
   test('user plugin should be appended in PostCSS loader', () => {
     let webpackConfig: Configuration = {

packages/docusaurus/src/webpack/base.ts

@@ -13,12 +13,11 @@ import {Props} from '@docusaurus/types';
 import {
   getCustomizableJSLoader,
   getStyleLoaders,
-  getFileLoaderUtils,
   getCustomBabelConfigFilePath,
   getMinimizer,
 } from './utils';
 import {loadPluginsThemeAliases} from '../server/themes';
-import {md5Hash} from '@docusaurus/utils';
+import {md5Hash, getFileLoaderUtils} from '@docusaurus/utils';
 
 const CSS_REGEX = /\.css$/;
 const CSS_MODULE_REGEX = /\.module\.css$/;

packages/docusaurus/src/webpack/server.ts

@@ -13,7 +13,7 @@ import {Props} from '@docusaurus/types';
 import {createBaseConfig} from './base';
 import WaitPlugin from './plugins/WaitPlugin';
 import LogPlugin from './plugins/LogPlugin';
-import {NODE_MAJOR_VERSION, NODE_MINOR_VERSION} from '../constants';
+import {NODE_MAJOR_VERSION, NODE_MINOR_VERSION} from '@docusaurus/utils';
 
 // Forked for Docusaurus: https://github.com/slorber/static-site-generator-webpack-plugin
 import StaticSiteGeneratorPlugin from '@slorber/static-site-generator-webpack-plugin';

packages/docusaurus/src/webpack/utils.ts

@@ -29,11 +29,7 @@ import {
   PostCssOptions,
   ConfigureWebpackUtils,
 } from '@docusaurus/types';
-import {
+import {BABEL_CONFIG_FILE_NAME} from '@docusaurus/utils';
-  BABEL_CONFIG_FILE_NAME,
-  OUTPUT_STATIC_ASSETS_DIR_NAME,
-  WEBPACK_URL_LOADER_LIMIT,
-} from '../constants';
 import {memoize} from 'lodash';
 
 // Utility method to get style loaders
@@ -307,134 +303,6 @@ export function compile(config: Configuration[]): Promise<void> {
   });
 }
 
-type AssetFolder = 'images' | 'files' | 'fonts' | 'medias';
-
-type FileLoaderUtils = {
-  loaders: {
-    file: (options: {folder: AssetFolder}) => RuleSetRule;
-    url: (options: {folder: AssetFolder}) => RuleSetRule;
-    inlineMarkdownImageFileLoader: string;
-    inlineMarkdownLinkFileLoader: string;
-  };
-  rules: {
-    images: () => RuleSetRule;
-    fonts: () => RuleSetRule;
-    media: () => RuleSetRule;
-    svg: () => RuleSetRule;
-    otherAssets: () => RuleSetRule;
-  };
-};
-
-// Inspired by https://github.com/gatsbyjs/gatsby/blob/8e6e021014da310b9cc7d02e58c9b3efe938c665/packages/gatsby/src/utils/webpack-utils.ts#L447
-export function getFileLoaderUtils(): FileLoaderUtils {
-  // files/images < urlLoaderLimit will be inlined as base64 strings directly in the html
-  const urlLoaderLimit = WEBPACK_URL_LOADER_LIMIT;
-
-  // defines the path/pattern of the assets handled by webpack
-  const fileLoaderFileName = (folder: AssetFolder) =>
-    `${OUTPUT_STATIC_ASSETS_DIR_NAME}/${folder}/[name]-[hash].[ext]`;
-
-  const loaders: FileLoaderUtils['loaders'] = {
-    file: (options: {folder: AssetFolder}) => ({
-      loader: require.resolve(`file-loader`),
-      options: {
-        name: fileLoaderFileName(options.folder),
-      },
-    }),
-    url: (options: {folder: AssetFolder}) => ({
-      loader: require.resolve(`url-loader`),
-      options: {
-        limit: urlLoaderLimit,
-        name: fileLoaderFileName(options.folder),
-        fallback: require.resolve(`file-loader`),
-      },
-    }),
-
-    // TODO find a better solution to avoid conflicts with the ideal-image plugin
-    // TODO this may require a little breaking change for ideal-image users?
-    // Maybe with the ideal image plugin, all md images should be "ideal"?
-    // This is used to force url-loader+file-loader on markdown images
-    // https://webpack.js.org/concepts/loaders/#inline
-    inlineMarkdownImageFileLoader: `!url-loader?limit=${urlLoaderLimit}&name=${fileLoaderFileName(
-      'images',
-    )}&fallback=file-loader!`,
-    inlineMarkdownLinkFileLoader: `!file-loader?name=${fileLoaderFileName(
-      'files',
-    )}!`,
-  };
-
-  const rules: FileLoaderUtils['rules'] = {
-    /**
-     * Loads image assets, inlines images via a data URI if they are below
-     * the size threshold
-     */
-    images: () => ({
-      use: [loaders.url({folder: 'images'})],
-      test: /\.(ico|jpg|jpeg|png|gif|webp)(\?.*)?$/,
-    }),
-
-    fonts: () => ({
-      use: [loaders.url({folder: 'fonts'})],
-      test: /\.(woff|woff2|eot|ttf|otf)$/,
-    }),
-
-    /**
-     * Loads audio and video and inlines them via a data URI if they are below
-     * the size threshold
-     */
-    media: () => ({
-      use: [loaders.url({folder: 'medias'})],
-      test: /\.(mp4|webm|ogv|wav|mp3|m4a|aac|oga|flac)$/,
-    }),
-
-    svg: () => ({
-      test: /\.svg?$/,
-      oneOf: [
-        {
-          use: [
-            {
-              loader: '@svgr/webpack',
-              options: {
-                prettier: false,
-                svgo: true,
-                svgoConfig: {
-                  plugins: [
-                    {
-                      name: 'preset-default',
-                      params: {
-                        overrides: {
-                          removeViewBox: false,
-                        },
-                      },
-                    },
-                  ],
-                },
-                titleProp: true,
-                ref: ![path],
-              },
-            },
-          ],
-          // We don't want to use SVGR loader for non-React source code
-          // ie we don't want to use SVGR for CSS files...
-          issuer: {
-            and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
-          },
-        },
-        {
-          use: [loaders.url({folder: 'images'})],
-        },
-      ],
-    }),
-
-    otherAssets: () => ({
-      use: [loaders.file({folder: 'files'})],
-      test: /\.(pdf|doc|docx|xls|xlsx|zip|rar)$/,
-    }),
-  };
-
-  return {loaders, rules};
-}
-
 // Ensure the certificate and key provided are valid and if not
 // throw an easy to debug error
 function validateKeyAndCerts({

yarn.lock

@@ -4737,9 +4737,9 @@ acorn@^7.1.1:
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
 acorn@^8.0.4, acorn@^8.2.4, acorn@^8.3.0, acorn@^8.4.1, acorn@^8.5.0:
-  version "8.5.0"
+  version "8.6.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.5.0.tgz#4512ccb99b3698c752591e9bb4472e38ad43cee2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.6.0.tgz#e3692ba0eb1a0c83eaa4f37f5fa7368dd7142895"
-  integrity sha512-yXbYeFy+jUuYd3/CDcg2NkIYE991XYX/bje7LmjJigUciaeO1JR4XxXgCIV1/Zc/dRuFEyw1L0pbA+qynJkW5Q==
+  integrity sha512-U1riIR+lBSNi3IbxtaHOIKdH8sLFv3NYfNv8sg7ZsNhcfl4HF2++BfqqrNAxoCLQW1iiylOj76ecnaUxz+z9yw==
 
 address@^1.0.1, address@^1.1.2:
   version "1.1.2"