✨ improve: config module handling (#2336)

## 🚨 Potentially breaking changes - `bud.context.files` interface has changed. The `module` property is now an async function that returns the module. This is an undocumented internal, but people might be using it.. - deprecated: `@roots/merged-manifest-webpack-plugin` - deprecated: `@roots/bud-wordpress-manifests` ## Changes - improve(`@roots/wordpress-theme-json-webpack-plugin`): `theme.json` included in compilation module graph - improve(`@roots/bud-tailwindcss-theme-json`): Edits to `tailwind.config.js` now result in rebuild of `theme.json` - improve(`@roots/entrypoints-webpack-plugin`): `entrypoints.json` included in compilation module graph - improve: config files now lazy loaded. - new package: `@roots/wordpress-transforms` is a small utility package for translating `@wordpress/*` signifiers to `wp-*` enqueue handles and `wp.*` references. ## Type of change **MINOR: feature**
roots · Jun 28, 2023 · 8ca1b78 · 8ca1b78
1 parent 6c4a034
commit 8ca1b78
Show file tree

Hide file tree

Showing 226 changed files with 2,288 additions and 2,327 deletions.
diff --git a/.github/workflows/test.e2e.yml b/.github/workflows/test.e2e.yml
@@ -34,5 +34,5 @@ jobs:
       - name: yarn
         run: yarn
 
-      - name: yarn @bud test e2e
-        run: yarn @bud test e2e
+      - name: yarn @bud test e2e run
+        run: yarn @bud test e2e run
diff --git a/.github/workflows/test.integration.yml b/.github/workflows/test.integration.yml
@@ -34,5 +34,5 @@ jobs:
       - name: yarn
         run: yarn
 
-      - name: yarn @bud test integration
-        run: yarn @bud test integration
+      - name: yarn @bud test integration run
+        run: yarn @bud test integration run
diff --git a/.github/workflows/test.unit.yml b/.github/workflows/test.unit.yml
@@ -34,5 +34,5 @@ jobs:
       - name: yarn
         run: yarn
 
-      - name: yarn @bud test unit
-        run: yarn @bud test unit
+      - name: yarn @bud test unit run
+        run: yarn @bud test unit run
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -12,8 +12,6 @@ enableMirror: false
 
 enableTelemetry: false
 
-enableTransparentWorkspaces: true
-
 globalFolder: storage/yarn/global
 
 initFields:

diff --git a/config/tsconfig.json b/config/tsconfig.json
@@ -70,19 +70,26 @@
     {"path": "../sources/@roots/bud-vue/tsconfig.json"},
     {"path": "../sources/@roots/bud-wordpress-dependencies/tsconfig.json"},
     {"path": "../sources/@roots/bud-wordpress-externals/tsconfig.json"},
-    {"path": "../sources/@roots/bud-wordpress-manifests/tsconfig.json"},
     {"path": "../sources/@roots/bud-wordpress-theme-json/tsconfig.json"},
     {"path": "../sources/@roots/container/tsconfig.json"},
-    {"path": "../sources/@roots/critical-css-webpack-plugin/tsconfig.json"},
+    {
+      "path": "../sources/@roots/critical-css-webpack-plugin/tsconfig.json"
+    },
     {"path": "../sources/@roots/dependencies/tsconfig.json"},
     {"path": "../sources/@roots/entrypoints-webpack-plugin/tsconfig.json"},
     {"path": "../sources/@roots/filesystem/tsconfig.json"},
-    {"path": "../sources/@roots/merged-manifest-webpack-plugin/tsconfig.json"},
     {"path": "../sources/@roots/sage/tsconfig.json"},
-    {"path": "../sources/@roots/wordpress-dependencies-webpack-plugin/tsconfig.json"},
-    {"path": "../sources/@roots/wordpress-externals-webpack-plugin/tsconfig.json"},
+    {
+      "path": "../sources/@roots/wordpress-dependencies-webpack-plugin/tsconfig.json"
+    },
+    {
+      "path": "../sources/@roots/wordpress-externals-webpack-plugin/tsconfig.json"
+    },
     {"path": "../sources/@roots/wordpress-hmr/tsconfig.json"},
-    {"path": "../sources/@roots/wordpress-theme-json-webpack-plugin/tsconfig.json"},
+    {
+      "path": "../sources/@roots/wordpress-theme-json-webpack-plugin/tsconfig.json"
+    },
+    {"path": "../sources/@roots/wordpress-transforms/tsconfig.json"},
     {"path": "../sources/create-bud-app/tsconfig.json"}
   ]
 }
diff --git a/config/vitest.unit.config.ts b/config/vitest.unit.config.ts
@@ -6,12 +6,11 @@ export default {
     },
     hookTimeout: 60000,
     include: [
-      `sources/@roots/*/src/*.test.{ts,tsx}`,
       `sources/@roots/*/src/**/*.test.{ts,tsx}`,
-      `sources/@roots/*/test/*.{ts,tsx}`,
       `sources/@roots/*/test/**/*.{ts,tsx}`,
-      `tests/unit/*.test.ts`,
-      `tests/reproductions/*.test.ts`,
+      `sources/@roots/*/tests/**/*.{ts,tsx}`,
+      `tests/unit/**/*.test.ts`,
+      `tests/reproductions/**/*.test.ts`,
     ],
     includeSource: [`sources/@roots/*/src/**/*.{ts,tsx}`],
     testTimeout: 60000,

diff --git a/contributors.yml b/contributors.yml
@@ -2,7 +2,7 @@
   login: kellymears
   avatar: https://avatars.githubusercontent.com/u/397606?v=4
   url: https://github.com/kellymears
-  contributions: 860
+  contributions: 869
   email: developers@tinypixel.dev
 - name: QWp6t
   login: QWp6t

diff --git a/examples/babel/bud.config.js b/examples/babel/bud.config.js
@@ -1,13 +1,13 @@
 export default async bud => {
-  bud.entry('app', ['app.js', 'app.css']).splitChunks(bud.isProduction)
+  bud.entry('app', ['app.js', 'app.css'])
 
   bud.babel
     .setPresets({
-      '@babel/preset-env': require.resolve('@babel/preset-env'),
+      '@babel/preset-env': '@babel/preset-env',
     })
     .setPlugins({
       '@babel/plugin-transform-runtime': [
-        require.resolve('@babel/plugin-transform-runtime'),
+        '@babel/plugin-transform-runtime',
         {helpers: false},
       ],
     })

diff --git a/examples/babel/src/app.js b/examples/babel/src/app.js
@@ -2,4 +2,4 @@ import '@src/app.css'
 
 document.querySelector('#root')?.classList.add('init')
 
-module?.hot?.accept(console.error)
+if (import.meta.webpackHot) import.meta.webpackHot.accept(console.error)
diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@examples/basic",
   "private": true,
+  "type": "module",
   "browserslist": [
     "extends @roots/browserslist-config"
   ],
-  "type": "module",
   "devDependencies": {
     "@roots/bud": "latest"
   }

diff --git a/examples/basic/src/index.js b/examples/basic/src/index.js
@@ -2,4 +2,4 @@ import './styles.css'
 
 document.querySelector('#root')?.classList.add('init')
 
-module?.hot?.accept()
+if (import.meta.webpackHot) import.meta.webpackHot.accept()
diff --git a/examples/esbuild/src/app.js b/examples/esbuild/src/app.js
@@ -7,13 +7,4 @@ target.innerHTML = `
   </div>
 `
 
-/**
- * Accept module updates
- *
- * @see https://webpack.js.org/api/hot-module-replacement
- */
-if (module) {
-  module.hot.accept(err => {
-    console.error(err)
-  })
-}
+if (import.meta.webpackHot) import.meta.webpackHot.accept(console.error)
diff --git a/examples/sage/.eslintrc.js b/examples/sage/.eslintrc.js
diff --git a/examples/sage/.prettierrc b/examples/sage/.prettierrc
diff --git a/examples/sage/.stylelintrc b/examples/sage/.stylelintrc
diff --git a/examples/sage/bud.config.mjs → examples/sage/bud.config.js b/examples/sage/bud.config.mjs → examples/sage/bud.config.js
diff --git a/examples/sage/package.json b/examples/sage/package.json
@@ -1,20 +1,10 @@
 {
   "name": "@examples/sage",
   "private": true,
-  "packageManager": "npm@8.19.2",
-  "engines": {
-    "node": "18.12.1"
-  },
-  "browserslist": [
-    "extends @roots/browserslist-config"
-  ],
+  "type": "module",
   "devDependencies": {
     "@roots/bud": "latest",
-    "@roots/bud-eslint": "latest",
-    "@roots/bud-prettier": "latest",
-    "@roots/bud-stylelint": "latest",
     "@roots/bud-tailwindcss": "latest",
-    "@roots/eslint-config": "latest",
     "@roots/sage": "latest"
   }
 }
diff --git a/examples/sage/resources/scripts/app.js b/examples/sage/resources/scripts/app.js
@@ -7,4 +7,6 @@ const init = () =>
 
 init()
 
-module?.hot?.accept('./components/main.js', init)
+if (import.meta.webpackHot) {
+  import.meta.webpackHot?.accept('./components/main.js', init)
+}
diff --git a/examples/sage/resources/scripts/editor.js b/examples/sage/resources/scripts/editor.js
@@ -3,9 +3,6 @@ import '@wordpress/edit-post'
 import {registerBlockStyle, unregisterBlockStyle} from '@wordpress/blocks'
 import domReady from '@wordpress/dom-ready'
 
-/**
- * Block styles
- */
 domReady(() => {
   unregisterBlockStyle('core/button', 'outline')
 
@@ -15,11 +12,6 @@ domReady(() => {
   })
 })
 
-/**
- * Accept module updates
- *
- * @see https://webpack.js.org/api/hot-module-replacement
- */
-module?.hot?.accept(err => {
-  console.err(err)
-})
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept(console.error)
+}
diff --git a/examples/sage/resources/styles/app.css b/examples/sage/resources/styles/app.css
@@ -4,3 +4,7 @@
 
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
+
+body {
+  background: blue;
+}
diff --git a/examples/sage/tailwind.config.js b/examples/sage/tailwind.config.js
@@ -1,9 +1,8 @@
-module.exports = {
+export default {
   content: ['resources/**/*.{js,css,html}'],
   theme: {
     extend: {
       colors: {
-        gray: '#f7fafc',
         brand: {
           gray: '#f7fafc',
         },

diff --git a/examples/sass/package.json b/examples/sass/package.json
@@ -2,10 +2,6 @@
   "name": "@examples/sass",
   "private": true,
   "type": "module",
-  "packageManager": "npm@8.19.2",
-  "engines": {
-    "node": "18.12.1"
-  },
   "bud": {
     "extensions": {
       "allowlist": [

diff --git a/examples/tailwindcss/package.json b/examples/tailwindcss/package.json
@@ -1,10 +1,6 @@
 {
   "name": "@examples/tailwindcss",
   "private": true,
-  "packageManager": "npm@8.19.2",
-  "engines": {
-    "node": "18.12.1"
-  },
   "browserslist": [
     "extends @roots/browserslist-config"
   ],

diff --git a/examples/wordpress-theme/bud.config.dev.yml b/examples/wordpress-theme/bud.config.dev.yml
@@ -0,0 +1,2 @@
+setUrl: 3010
+setProxyUrl: 8000
diff --git a/examples/wordpress-theme/bud.config.json b/examples/wordpress-theme/bud.config.json
diff --git a/examples/wordpress-theme/bud.config.yml b/examples/wordpress-theme/bud.config.yml
@@ -0,0 +1,8 @@
+setPublicPath: /app/themes/your-theme-name/dist/
+
+entry:
+  app: [app.js, app.css]
+  editor: [editor.js]
+
+wpjson:
+  enable: true
diff --git a/examples/wordpress-theme/bud.production.config.json b/examples/wordpress-theme/bud.production.config.json
diff --git a/examples/wordpress-theme/package.json b/examples/wordpress-theme/package.json
@@ -1,16 +1,13 @@
 {
   "name": "@examples/wordpress-theme",
   "private": true,
-  "packageManager": "npm@8.19.2",
-  "engines": {
-    "node": "18.12.1"
-  },
   "browserslist": [
     "extends @roots/browserslist-config"
   ],
+  "type": "module",
   "devDependencies": {
-    "@roots/browserslist-config": "latest",
     "@roots/bud": "latest",
+    "@roots/bud-swc": "latest",
     "@roots/bud-preset-wordpress": "latest"
   }
 }
diff --git a/examples/wordpress-theme/setup.js b/examples/wordpress-theme/setup.js
diff --git a/examples/wordpress-theme/src/app.js b/examples/wordpress-theme/src/app.js
@@ -2,4 +2,11 @@ import React from 'react'
 import {createRoot} from 'react-dom/client'
 import {App} from './components/App.js'
 
+import 'lodash'
+import 'jquery'
+
 createRoot(document.getElementById('root')).render(<App />)
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept(console.error)
+}
diff --git a/examples/wordpress-theme/src/editor.js b/examples/wordpress-theme/src/editor.js
@@ -1,8 +1,4 @@
-import '@wordpress/edit-post'
-import {
-  unregisterBlockStyle,
-  registerBlockStyle,
-} from '@wordpress/blocks'
+import {unregisterBlockStyle, registerBlockStyle} from '@wordpress/blocks'
 import domReady from '@wordpress/dom-ready'
 
 domReady(() => {
@@ -14,11 +10,6 @@ domReady(() => {
   })
 })
 
-/**
- * Accept module updates
- *
- * @see https://webpack.js.org/api/hot-module-replacement
- */
-module?.hot?.accept(err => {
-  console.err(err)
-})
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept(console.error)
+}
diff --git a/examples/wordpress-theme/theme.json b/examples/wordpress-theme/theme.json
@@ -0,0 +1,33 @@
+{
+  "__generated__": "⚠️ This file is generated. Do not edit.",
+  "$schema": "https://schemas.wp.org/trunk/theme.json",
+  "version": 2,
+  "settings": {
+    "color": {
+      "custom": false,
+      "customGradient": false
+    },
+    "custom": {
+      "spacing": {},
+      "typography": {
+        "font-size": {},
+        "line-height": {}
+      }
+    },
+    "spacing": {
+      "padding": true,
+      "units": [
+        "px",
+        "%",
+        "em",
+        "rem",
+        "vw",
+        "vh"
+      ]
+    },
+    "typography": {
+      "customFontSize": false,
+      "dropCap": false
+    }
+  }
+}