Refactor toolbar demo setup and update configs

Removed custom setup and dev scripts in favor of simplified npm scripts for app and WordPress management. Updated .wp-env.json for new PHP version, plugin paths, and config values. Improved README with clearer setup instructions, troubleshooting, and port configuration. Adjusted Vite config for default port fallback and cleaned up package.json scripts.

Author: colinmurphy

examples/vanilla/toolbar-demo/.wp-env.json

@@ -1,25 +1,22 @@
 {
-  "phpVersion": "8.3",
+  "phpVersion": "8.4",
   "plugins": [
     "https://github.com/wp-graphql/wp-graphql/releases/latest/download/wp-graphql.zip",
-    "../../../../plugins/hwp-cors-local",
-    "../../../../plugins/hwp-frontend-links",
-    "../../../../plugins/hwp-wp-env-helpers"
+    "../../../plugins/hwp-cors-local",
+    "../../../plugins/hwp-frontend-links",
+    "../../../plugins/hwp-wp-env-helpers"
   ],
   "config": {
     "WP_DEBUG": true,
-    "WP_DEBUG_LOG": true,
+    "SCRIPT_DEBUG": false,
     "GRAPHQL_DEBUG": true,
-    "WP_HOME": "http://localhost:8644",
-    "HEADLESS_FRONTEND_URL": "http://localhost:3644"
-  },
-  "port": 8644,
-  "testsPort": 8645,
-  "mappings": {
-    "db": "./wp-env/db",
-    ".htaccess": "./.htaccess"
+    "WP_DEBUG_LOG": true,
+    "WP_DEBUG_DISPLAY": false,
+    "SAVEQUERIES": false,
+    "WP_HOME": "http://localhost:8888",
+    "HEADLESS_FRONTEND_URL": "http://localhost:3000"
   },
   "lifecycleScripts": {
-    "afterStart": "wp-env run cli -- wp rewrite structure '/%postname%/' --hard && wp-env run cli -- wp theme activate twentytwentyfour"
+    "afterStart": "wp-env run cli -- wp theme activate twentytwentyfour && wp-env run cli -- wp rewrite structure '/%postname%/' && wp-env run cli -- wp rewrite flush"
   }
 }

examples/vanilla/toolbar-demo/README.md

@@ -1,65 +1,27 @@
-# Toolbar Demo - Vanilla JavaScript + Vite
+# Vanilla JavaScript Toolbar Demo
 
-> A complete example of `@wpengine/hwp-toolbar` with vanilla JavaScript and Vite
+In this example we show how to integrate the Headless WordPress Toolbar into a vanilla JavaScript application using Vite as the build tool and WordPress backend using WPGraphQL.
 
-This example demonstrates how to integrate the Headless WordPress Toolbar into a vanilla JavaScript application using Vite as the build tool.
+## Getting Started
 
-## Features
-
-- ✅ Vanilla JavaScript (no framework)
-- ✅ Vite for fast development
-- ✅ TypeScript support (types available)
-- ✅ WordPress toolbar integration
-- ✅ State management example
-- ✅ Custom node registration
-- ✅ Dark/light mode support
-- ✅ wp-env configuration
-
-## Prerequisites
+> [!IMPORTANT]
+> Docker Desktop needs to be installed to run WordPress locally.
 
-- Node.js >= 18
-- pnpm (for workspace setup)
-- Docker (for wp-env)
-
-## Quick Start
-
-From the example directory:
-
-```bash
-# Install dependencies and start WordPress + Vite
-npm run example:build
-
-# Or, if already set up:
-npm run example:start
-```
+1. Run `npm run example:setup` to install dependencies and configure the local WP server.
+2. Run `npm run example:start` to start the WP server and Vite development server.
 
 The example will be available at:
 - **Frontend**: http://localhost:3000
-- **WordPress**: http://localhost:8000
-- **WordPress Admin**: http://localhost:8000/wp-admin (`admin` / `password`)
-- **GraphQL**: http://localhost:8000/?graphql
+- **WordPress**: http://localhost:8888
+- **WordPress Admin**: http://localhost:8888/wp-admin (`admin` / `password`)
+- **GraphQL**: http://localhost:8888/?graphql
 
-## Project Structure
-
-```
-toolbar-demo/
-├── example-app/           # Vite application
-│   ├── src/
-│   │   ├── main.js       # Toolbar implementation
-│   │   └── style.css     # Demo styles
-│   ├── index.html        # Entry point
-│   ├── package.json
-│   └── vite.config.js
-├── wp-env/               # WordPress environment
-│   └── db/               # Database
-├── .wp-env.json          # wp-env configuration
-├── package.json
-└── README.md
-```
+> [!NOTE]
+> When you kill the long running process this will not shutdown the local WP instance, only Vite. You must run `npm run example:stop` to kill the local WP server.
 
 ## What This Example Shows
 
-### 1. Basic Integration
+### 1. Basic Toolbar Integration
 
 ```javascript
 import { Toolbar, VanillaRenderer } from '@wpengine/hwp-toolbar';
@@ -74,7 +36,7 @@ const toolbar = new Toolbar({
 const renderer = new VanillaRenderer(toolbar, 'toolbar');
 ```
 
-### 2. Real WordPress Integration
+### 2. WordPress Integration
 
 The example fetches real data from WordPress:
 
@@ -83,7 +45,7 @@ The example fetches real data from WordPress:
 const response = await fetch('http://localhost:8000/?rest_route=/wp/v2/users/1');
 const user = await response.json();
 
-toolbar.setState({
+toolbar.setWordPressContext({
   user: {
     id: user.id,
     name: user.name,
@@ -98,8 +60,6 @@ toolbar.setState({
 
 ### 3. GraphQL Posts
 
-Fetch posts using WPGraphQL:
-
 ```javascript
 const response = await fetch('http://localhost:8000/?graphql', {
   method: 'POST',
@@ -119,42 +79,68 @@ const response = await fetch('http://localhost:8000/?graphql', {
     `
   })
 });
-
-const { data } = await response.json();
-// Use posts to populate toolbar
 ```
 
-### 4. Custom Nodes
+### 4. Custom Node Registration
 
 ```javascript
 toolbar.register('home', 'Home', () => {
   window.location.href = '/';
 });
 ```
 
-### 5. State Subscription
+### 5. State Management
 
 ```javascript
 toolbar.subscribe((nodes, state) => {
   console.log('Toolbar state updated:', state);
 });
 ```
 
+## Features
+
+- ✅ Vanilla JavaScript (no framework)
+- ✅ Vite for fast development  
+- ✅ TypeScript support (types available)
+- ✅ WordPress toolbar integration
+- ✅ State management example
+- ✅ Custom node registration
+- ✅ Dark/light mode support
+- ✅ Real WordPress data integration
+- ✅ WPGraphQL support
+
+## Project Structure
+
+```
+toolbar-demo/
+├── example-app/           # Vite application
+│   ├── src/
+│   │   ├── main.js       # Toolbar implementation
+│   │   └── style.css     # Demo styles
+│   ├── index.html        # Entry point
+│   ├── package.json
+│   └── vite.config.js
+├── wp-env/               # WordPress environment
+├── .wp-env.json          # wp-env configuration
+├── package.json
+└── README.md
+```
+
 ## Available Scripts
 
 ```bash
-# Start development server + WordPress
+# Initial setup - installs dependencies and starts WordPress
+npm run example:setup
+
+# Start development servers (WordPress + Vite)
 npm run example:start
 
-# Stop WordPress
+# Stop WordPress server
 npm run example:stop
 
-# Rebuild everything from scratch
+# Reset everything and start fresh
 npm run example:prune
 
-# Just run Vite dev server (requires WordPress running)
-npm run example:dev
-
 # WordPress-only commands
 npm run wp:start
 npm run wp:stop
@@ -164,34 +150,29 @@ npm run wp:destroy
 ## WordPress Setup
 
 The wp-env configuration includes:
-
 - WordPress with WPGraphQL plugin
 - Admin credentials: `admin` / `password`
 - GraphQL endpoint: `http://localhost:8000/?graphql`
 - REST API endpoint: `http://localhost:8000/?rest_route=/wp/v2/...`
 - Pretty permalinks enabled
 - CORS headers enabled for localhost:3000
 
-## Using with Vite
+## Environment Configuration
 
-Vite provides:
-- Hot module replacement (HMR)
-- Fast dev server
-- ES modules support
-- No build step needed for development
+The example uses standard ports (3000 for frontend, 8000 for WordPress) to match other hwptoolkit examples. 
 
-The toolbar package is imported via workspace protocol:
-```json
-{
-  "dependencies": {
-    "@wpengine/hwp-toolbar": "workspace:*"
-  }
-}
+To customize ports, create a `.env` file in the `example-app/` directory:
+
+```
+VITE_FRONTEND_PORT=3000
+VITE_WP_URL=http://localhost:8888
+VITE_WP_PORT=8888
+VITE_WP_TEST_PORT=8889
 ```
 
 ## Styling
 
-The example imports the base toolbar styles:
+The example imports the base toolbar styles and adds custom demo styling:
 
 ```javascript
 import '@wpengine/hwp-toolbar/styles';
@@ -206,6 +187,10 @@ Custom styles can override CSS variables:
 }
 ```
 
+## Trouble Shooting
+
+To reset the WP server and re-run setup you can run `npm run example:prune` and confirm "Yes" at any prompts.
+
 ## Learn More
 
 - [@wpengine/hwp-toolbar documentation](../../../packages/toolbar/README.md)

examples/vanilla/toolbar-demo/example-app/package.json

@@ -4,7 +4,6 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "predev": "node ../scripts/setup-env.js",
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"

examples/vanilla/toolbar-demo/example-app/vite.config.js

@@ -5,7 +5,7 @@ export default defineConfig(({ mode }) => {
 
   return {
     server: {
-      port: parseInt(env.VITE_FRONTEND_PORT)
+      port: parseInt(env.VITE_FRONTEND_PORT || '3000')
     }
   };
 });

examples/vanilla/toolbar-demo/package.json

@@ -3,16 +3,15 @@
   "version": "1.0.0",
   "description": "Vanilla JavaScript example using Vite for the Headless WordPress Toolbar",
   "scripts": {
-    "example:build": "npm run example:dev:install && npm run wp:start && npm run example:start",
-    "example:dev:install": "cd example-app && npm install && cd ..",
-    "example:start": "node scripts/setup-env.js && npm install && concurrently \"npm run wp:start\" \"sleep 5 && npm run example:dev\"",
+    "example:setup": "npm run app:install && npm run wp:start",
+    "example:start": "concurrently \"npm run wp:start\" \"sleep 5 && npm run app:dev\"",
     "example:stop": "npm run wp:stop",
-    "example:prune": "wp-env destroy && npm run example:build && npm run example:start",
-    "example:dev": "npm --prefix ./example-app run dev",
+    "example:prune": "npm run wp:destroy && npm run example:setup && npm run example:start",
+    "app:dev": "cd example-app && npm run dev && cd ..",
+    "app:install": "cd example-app && npm install && cd ..",
     "wp:start": "wp-env start",
     "wp:stop": "wp-env stop",
-    "wp:destroy": "wp-env destroy",
-    "wp-env": "wp-env"
+    "wp:destroy": "wp-env destroy"
   },
   "keywords": [
     "headless",