Merge pull request #594 from alleyinteractive/feature/issue-582/fast-…

…refresh-for-package-plugin-dev

Issue-582: Provide fast refresh when developing for scripts in package plugin

.changeset/blue-papayas-flash.md

@@ -0,0 +1,5 @@
+---
+"alley-scripts-demo-plugin": patch
+---
+
+Add support and documentation for fast refresh in demo plugin"

plugin/README.md

@@ -1,5 +1,23 @@
 # Alley Scripts Demo Plugin
 
-This is a demo plugin for Alley Scripts. It is a simple plugin that adds the
-components included in the Monorepo to a Gutenberg sidebar. It is not meant to
+This is a demo plugin for Alley Scripts. It is meant to be used in development and to
+demo the functionality of the packages in alley-scripts.
+
+The plugin adds components included in the Monorepo to a Gutenberg sidebar. It is not meant to
 be used in production.
+
+## Installation
+
+1. Clone the `alley-scripts` repository to your `plugins` directory in your local WordPress installation.
+2. Run `npm install` in the `alley-scripts` directory. Then run `npm run build` to build the plugin.
+3. Activate the plugin in your WordPress installation to see the components in the Gutenberg sidebar.
+
+## Development for block editor tools with fast refresh.
+To develop the plugin and see changes in real-time:
+1. Install the [Gutenberg plugin](https://wordpress.org/plugins/gutenberg/) in your WordPress installation.
+2. Ensure that `define( 'SCRIPT_DEBUG', true );` is defined in your `wp-config.php` file.
+1. Run `npm run start:hot` in the `alley-scripts/plugin` directory. This will start a development server and watch for changes in the block-editor-tools package files.
+
+### Testing new features in the alley scripts plugin
+If you want to test any new components or hooks in a block in the plugin you can scaffold a new block, entry, or slotfill in the `alley-scripts/plugin` directory.
+To test the new feature with fast refresh, be sure to import the scripts using a _relative path_ so that the development server can watch for changes. You may need to disable the [ESLint no relative packages rule (`import/no-relative-packages`)](https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-relative-packages.md) to allow linting to pass. Follow the instructions above to see the changes apply in real time in the editor.

plugin/entries/slotfills/index.tsx

@@ -20,7 +20,15 @@ import {
   PostSelector,
   TermSelector,
   usePostMeta,
-} from '@alleyinteractive/block-editor-tools';
+/**
+ * Importing the relative path so that when developing in the watch mode,
+ * the block-editor-tools will rebuild. This is necessary as the block-editor-tools
+ * need to be built and compiled before the plugin can be built and compiled.
+ *
+ * https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-relative-packages.md
+ */
+// eslint-disable-next-line import/no-relative-packages
+} from '../../../packages/block-editor-tools/src';
 
 // Create a new Gutenberg sidebar
 registerPlugin('alley-scripts-plugin-sidebar', {