Merge pull request #2 from bigbite/feat/BBT-37-use-wp-scripts

Feature: Use wp-scripts BBT-37

.gitignore

@@ -1,6 +1,5 @@
 node_modules/
 vendor/
-dist/
+build/
 
 .DS_Store
-inc/asset-settings.php

README.md

@@ -37,9 +37,9 @@ Install JS packages.
 npm install
 ```
 
-Build all assets - additional commands can be found on the [`bigbite/build-tools` repo.](https://github.com/bigbite/build-tools#commands)
+Build all assets
 ```
-npm run build:dev
+npm run build:prod
 ```
 
 Install PHP packages and create autoloader for the plugin.

composer.json

@@ -18,7 +18,6 @@
     "autoload": {
       "files": [
         "inc/constants.php",
-        "inc/asset-settings.php",
         "inc/utils.php",
         "inc/class-admin.php",
         "inc/setup.php"

inc/class-loader.php

@@ -24,22 +24,23 @@ public function __construct() {
      */
     public function enqueue_themer_assets() : void {
         $plugin_name = basename(THEMER_DIR);
+        $asset_file = include THEMER_DIR . '/build/index.asset.php';
 
         wp_enqueue_style('wp-components'); 
 
         wp_enqueue_script(
             self::SCRIPT_NAME,
-            plugins_url($plugin_name . '/dist/scripts/' . THEMER_EDITOR_JS, $plugin_name),
-            [ 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-plugins', 'wp-edit-post', 'wp-api' ],
-            (string) filemtime(THEMER_DIR . '/dist/scripts/' . THEMER_EDITOR_JS),
+            plugins_url($plugin_name . '/build/index.js', $plugin_name),
+            array_merge( $asset_file['dependencies'], [ 'wp-edit-post'] ),
+            $asset_file['version'],
             false
         );
 
         wp_enqueue_style(
             self::STYLE_NAME,
-            plugins_url($plugin_name . '/dist/styles/' . THEMER_EDITOR_CSS, $plugin_name),
+            plugins_url($plugin_name . '/build/index.css', $plugin_name),
             [],
-            (string) filemtime(THEMER_DIR . '/dist/styles/' . THEMER_EDITOR_CSS)
+            $asset_file['version']
         );
     }
 }

inc/setup.php

@@ -8,13 +8,6 @@
  * @return void
  */
 function setup() : void {
-	if(
-		! defined( 'THEMER_EDITOR_JS' ) ||
-		! defined( 'THEMER_EDITOR_CSS' )
-	) {
-		throw new \Error( "Asset constants are not defined. You may need to run an asset build." );
-	}
-
 	new Loader();
 	new AdminSetup();
 }

package.json

@@ -1,25 +1,26 @@
 {
-    "name": "@big-bite/themer",
-    "description": "",
-    "version": "1.0.0-alpha.1",
-    "author": "Big Bite",
-    "prettier": "@bigbite/build-tools/configs/prettier",
-    "scripts": {
-        "build:dev": "build-tools build --once",
-        "build:prod": "build-tools build --once --production",
-        "watch:dev": "build-tools build",
-        "watch:prod": "build-tools build --production"
-    },
-    "dependencies": {
-        "@bigbite/build-tools": "^1.2.0",
-        "@wordpress/block-editor": "^11.8.0",
-        "@wordpress/components": "^23.8.0",
-        "@wordpress/core-data": "^6.8.0",
-        "@wordpress/data": "^9.5.0",
-        "@wordpress/edit-site": "^5.8.0",
-        "@wordpress/element": "^5.8.0",
-        "@wordpress/i18n": "^4.20.0",
-        "@wordpress/plugins": "^6.3.0",
-        "lodash": "^4.17.21"
-    }
+	"name": "@big-bite/themer",
+	"description": "",
+	"version": "1.0.0-alpha.1",
+	"author": "Big Bite",
+	"prettier": "@wordpress/prettier-config",
+	"scripts": {
+		"watch:dev": "wp-scripts start",
+		"build:prod": "wp-scripts build"
+	},
+	"dependencies": {
+		"@wordpress/block-editor": "^11.8.0",
+		"@wordpress/components": "^23.8.0",
+		"@wordpress/core-data": "^6.8.0",
+		"@wordpress/data": "^9.5.0",
+		"@wordpress/dom-ready": "^3.35.0",
+		"@wordpress/edit-site": "^5.8.0",
+		"@wordpress/element": "^5.8.0",
+		"@wordpress/i18n": "^4.20.0",
+		"@wordpress/plugins": "^6.3.0",
+		"lodash": "^4.17.21"
+	},
+	"devDependencies": {
+		"@wordpress/scripts": "^26.6.0"
+	}
 }

phpstan.neon

@@ -7,7 +7,6 @@ parameters:
     inferPrivatePropertyTypeFromConstructor: true
     bootstrapFiles:
         - inc/constants.php
-        - inc/asset-settings.php
     paths:
         - inc/
     ignoreErrors:

src/editor/components/fields/Field.js

@@ -2,9 +2,9 @@
 
 import { set, merge } from 'lodash';
 import { useState } from '@wordpress/element';
-import ComponentMap from './ComponentMap';
+import { select, dispatch } from '@wordpress/data';
 
-const { select, dispatch } = wp.data;
+import ComponentMap from './ComponentMap';
 
 /**
  * main component

src/editor/components/fields/ThemerComponent.js

@@ -1,18 +1,18 @@
-import CanvasSpinner from '@wordpress/edit-site/build-module/components/canvas-spinner';
 import { mergeWith, isEmpty } from 'lodash';
 import {
   Button,
+  Spinner,
   __experimentalNavigatorProvider as NavigatorProvider,
   __experimentalNavigatorScreen as NavigatorScreen,
   __experimentalNavigatorButton as NavigatorButton,
   __experimentalNavigatorToParentButton as NavigatorToParentButton,
 } from '@wordpress/components';
+import { select, dispatch, subscribe } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+
 import Preview from './Preview';
 import SingleField from './Field';
 
-const { select, dispatch, subscribe } = wp.data;
-const { useState } = wp.element;
-
 /**
  * main component
  */
@@ -139,7 +139,7 @@ const ThemerComponent = () => {
   if (isEmpty(config))
     return (
       <>
-        <CanvasSpinner />
+        <Spinner />
       </>
     );
 

src/entrypoints/editor.js → src/index.js

@@ -1,12 +1,14 @@
 import { registerPlugin } from '@wordpress/plugins';
 import { render } from '@wordpress/element';
-import { NAMESPACE } from '../editor/settings';
-import ComponentWrapper from '../editor/components/ComponentWrapper';
+import domReady from '@wordpress/dom-ready';
 
-import '../editor/styles/styles.scss';
+import { NAMESPACE } from './editor/settings';
+import ComponentWrapper from './editor/components/ComponentWrapper';
+
+import './editor/styles/styles.scss';
 
 // Register the plugin.
-wp.domReady(() => {
+domReady(() => {
   registerPlugin(NAMESPACE, {
     icon: 'editor-paragraph',
     render: ComponentWrapper,