Modernize frontend build, remove asset-loader dependency

.eslintrc.json

@@ -1,11 +1,6 @@
 {
-  "parser": "@typescript-eslint/parser",
   "extends": [
-    "@humanmade",
-    "plugin:@typescript-eslint/recommended"
-  ],
-  "plugins": [
-    "@typescript-eslint"
+    "plugin:@wordpress/eslint-plugin/recommended"
   ],
   "rules": {
     "@typescript-eslint/no-unused-vars": [ "warn", {
@@ -14,22 +9,31 @@
       "ignoreRestSiblings": true
     } ],
     "@typescript-eslint/no-use-before-define": [ "error" ],
+
     "jsdoc/require-jsdoc": [ "error", {
       "require": {
         "FunctionDeclaration": true
       }
     } ],
-
-    // Superseded by TypeScript.
+    "jsdoc/check-tag-names": "warn",
     "jsdoc/require-param": "off",
     "jsdoc/require-param-type": "off",
     "jsdoc/require-returns": "off",
+
+    "camelcase": [ "error", { "allow": [ "^WP_REST_API_", "post_type" ] } ],
     "no-unused-vars": "off",
-    "no-use-before-define": "off"
+    "no-use-before-define": "off",
+    "prettier/prettier": "off"
+  },
+  "settings": {
+    "jsdoc": {
+      "tagNamePreference": {
+        "return": "returns"
+      }
+    }
   },
   "ignorePatterns": [
     "build/**",
-    "lib/**",
     "node_modules/**",
     "tests/wordpress/**",
     "vendor/**"

.github/workflows/build.yml

@@ -70,7 +70,6 @@ jobs:
         git config user.email github-actions@github.com
         git checkout -b "release-$VERSION"
         git add -f build/*
-        git add -f lib/*
         git commit -m "Release $VERSION"
         git tag "$VERSION"
         git push --tags

.gitignore

@@ -1,7 +1,6 @@
 # Directories:
 
 /build/
-/lib/
 /node_modules/
 /tests/cache/
 /tests/wordpress/

.nvmrc

@@ -1 +1 @@
-v16
+v24

.stylelintrc.json

@@ -1,13 +1,16 @@
 {
-  "extends": "@humanmade/stylelint-config",
+  "extends": "@wordpress/stylelint-config/scss-stylistic",
   "rules": {
-    "declaration-property-unit-blacklist": null,
+    "@stylistic/max-line-length": null,
     "max-nesting-depth": null,
+    "rule-empty-line-before": null,
     "selector-class-pattern": null
   },
   "ignoreFiles": [
+    "**/*.json",
+    "**/*.ts",
+    "**/*.tsx",
     "build/**",
-    "lib/**",
     "node_modules/**",
     "tests/wordpress/**",
     "vendor/**"

.wp-env.json

@@ -0,0 +1,11 @@
+{
+	"port": 3001,
+	"testsEnvironment": false,
+	"config": {
+		"WP_DEBUG": true,
+		"WP_DEBUG_DISPLAY": false,
+		"WP_DEVELOPMENT_MODE": "plugin",
+		"SCRIPT_DEBUG": true
+	},
+	"plugins": [ "." ]
+}

README.md

@@ -61,7 +61,7 @@ _Features without a checkmark are still work in progress._
 ### For development use
 
 * Clone this repo into your plugins directory
-* Ensure you have Composer v2 and Node v16 installed
+* Ensure you have Composer v2 and Node v24 installed
 * Install the dependencies:
   `composer install && npm install`
 * Start the dev server:

composer.json

@@ -5,8 +5,7 @@
   "type": "wordpress-plugin",
   "require": {
     "php": ">=7.2",
-    "composer/installers": "^1.0 || ^2.0",
-    "humanmade/asset-loader": "^0.5.0 || ^0.6.1"
+    "composer/installers": "^1.0 || ^2.0"
   },
   "require-dev": {
     "dealerdirect/phpcodesniffer-composer-installer": "0.7.0",
@@ -43,11 +42,6 @@
     "sort-packages": true
   },
   "extra": {
-    "installer-paths": {
-      "lib/{$name}/": [
-        "humanmade/asset-loader"
-      ]
-    },
     "wordpress-install-dir": "tests/wordpress"
   },
   "scripts": {

inc/namespace.php

@@ -22,8 +22,6 @@
 use WP_REST_Server;
 use WP_User;
 
-use function Asset_Loader\enqueue_asset;
-
 const GUEST_ROLE = 'guest-author';
 const POSTS_PARAM = 'authorship';
 const REST_CURIE_TEMPLATE = 'https://authorship.hmn.md/{rel}';
@@ -504,32 +502,43 @@
  * Enqueues the JS and CSS assets for the author selection control.
  */
 function enqueue_assets_for_post(): void {
-	$manifest = plugin_dir_path( __DIR__ ) . 'build/asset-manifest.json';
+	$editor_asset = include plugin_dir_path( __DIR__ ) . 'build/index.asset.php';
+	if ( empty( $editor_asset ) ) {
+		trigger_error( 'Asset file missing, rebuild plugin asset bundles', E_USER_WARNING );
+		return;
+	}
+
+	// Hot-reloading support.
+	$runtime_asset = include plugin_dir_path( __DIR__ ) . 'build/runtime.asset.php';
+	if ( ! empty( $runtime_asset ) && in_array( 'wp-react-refresh-runtime', $editor_asset['dependencies'] ?? [], true ) ) {
+		wp_register_script(
+			'authorship-hmr-runtime',
+			plugins_url( 'build/runtime.js', __DIR__ ),
+			$runtime_asset['dependencies'],
+			$runtime_asset['version'],
+			[
+				'in_footer' => true,
+			]
+		);
+		$editor_asset['dependencies'][] = 'authorship-hmr-runtime';
+	}
 
-	enqueue_asset(
-		$manifest,
-		'main.js',
+	wp_enqueue_script(
+		SCRIPT_HANDLE,
+		plugins_url( 'build/index.js', __DIR__ ),
+		$editor_asset['dependencies'],
+		$editor_asset['version'],
 		[
-			'handle'       => SCRIPT_HANDLE,
-			// @TODO check:
-			'dependencies' => [
-				'react',
-				'wp-block-editor',
-				'wp-blocks',
-				'wp-components',
-				'wp-element',
-				'wp-i18n',
-				'wp-polyfill',
-			],
+			'defer' => true,
+			'in_footer' => true,
 		]
 	);
 
-	enqueue_asset(
-		$manifest,
-		'style.css',
-		[
-			'handle' => STYLE_HANDLE,
-		]
+	wp_enqueue_style(
+		STYLE_HANDLE,
+		plugins_url( 'build/index.css', __DIR__ ),
+		[],
+		$editor_asset['version']
 	);
 }