feat(toolbar): configure vanilla example to use template-based generation

Switch vanilla example from hardcoded configs to auto-generated approach.
Files like mu-plugin.php, .htaccess, and .wp-env.json are now generated
from centralized templates by the setup-env.js script.

- Add setup-env.js script that generates configs from templates
- Remove mu-plugin.php, .htaccess, .wp-env.json from version control
- Update .gitignore to exclude auto-generated example files

Author: josephfusco

.gitignore

@@ -4,6 +4,9 @@ node_modules
 
 # Build outputs
 dist
+build
+.next
+out
 
 # Testing
 coverage
@@ -13,6 +16,7 @@ test-results/
 # WordPress
 .wp-env
 .wp-env.override.json
+wp-env/
 uploads/
 debug.log
 __MACOSX
@@ -29,4 +33,7 @@ __MACOSX
 ## Examples
 examples/**/package-lock.json
 examples/**/__MACOSX
+examples/**/mu-plugin.php
+examples/**/.htaccess
+examples/**/.wp-env.json
 ``

examples/vanilla/toolbar-demo/scripts/dev.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+# Calculate ports for this example
+EXAMPLE_PATH="vanilla/toolbar-demo"
+PORTS=$(node ../../../scripts/get-ports.js "$EXAMPLE_PATH" --json)
+
+# Extract ports from JSON
+export FRONTEND_PORT=$(echo "$PORTS" | grep -o '"FRONTEND_PORT": [0-9]*' | grep -o '[0-9]*')
+export WP_PORT=$(echo "$PORTS" | grep -o '"WP_PORT": [0-9]*' | grep -o '[0-9]*')
+export WP_TEST_PORT=$(echo "$PORTS" | grep -o '"WP_TEST_PORT": [0-9]*' | grep -o '[0-9]*')
+
+echo "Starting vanilla toolbar demo..."
+echo "  Frontend: http://localhost:$FRONTEND_PORT"
+echo "  WordPress: http://localhost:$WP_PORT"
+echo ""
+
+# Start Vite dev server with calculated port
+cd example-app && vite --port "$FRONTEND_PORT"

examples/vanilla/toolbar-demo/scripts/setup-env.js

@@ -0,0 +1,71 @@
+#!/usr/bin/env node
+
+/**
+ * Generate .env file with calculated ports for this example
+ */
+
+const { getPorts } = require('../../../../scripts/get-ports.js');
+const fs = require('fs');
+const path = require('path');
+
+const examplePath = 'vanilla/toolbar-demo';
+const ports = getPorts(examplePath);
+
+// Create .env file for Vite
+const envContent = `# Auto-generated by setup-env.js - DO NOT EDIT MANUALLY
+VITE_FRONTEND_PORT=${ports.FRONTEND_PORT}
+VITE_WP_URL=http://localhost:${ports.WP_PORT}
+VITE_WP_PORT=${ports.WP_PORT}
+VITE_WP_TEST_PORT=${ports.WP_TEST_PORT}
+`;
+
+const envPath = path.join(__dirname, '../example-app/.env');
+fs.writeFileSync(envPath, envContent);
+
+console.log(`✓ Generated .env for ${examplePath}`);
+console.log(`  Frontend: ${ports.FRONTEND_PORT}`);
+console.log(`  WordPress: ${ports.WP_PORT}`);
+console.log(`  WP Test: ${ports.WP_TEST_PORT}`);
+
+// Update .wp-env.json
+const wpEnvConfig = {
+  phpVersion: '8.0',
+  plugins: [
+    'https://github.com/wp-graphql/wp-graphql/releases/latest/download/wp-graphql.zip'
+  ],
+  config: {
+    WP_DEBUG: true,
+    WP_DEBUG_LOG: true,
+    GRAPHQL_DEBUG: true
+  },
+  port: ports.WP_PORT,
+  testsPort: ports.WP_TEST_PORT,
+  mappings: {
+    db: './wp-env/db',
+    'wp-content/mu-plugins': './mu-plugin.php',
+    '.htaccess': './.htaccess'
+  },
+  lifecycleScripts: {
+    afterStart: 'wp-env run cli -- wp rewrite structure \'/%postname%/\' --hard && wp-env run cli -- wp theme activate twentytwentyfour'
+  }
+};
+
+const wpEnvPath = path.join(__dirname, '../.wp-env.json');
+fs.writeFileSync(wpEnvPath, JSON.stringify(wpEnvConfig, null, 2) + '\n');
+
+console.log(`✓ Updated .wp-env.json`);
+
+// Generate mu-plugin.php from template
+const muPluginTemplatePath = path.join(__dirname, '../../../../scripts/templates/mu-plugin.php');
+const muPluginTemplate = fs.readFileSync(muPluginTemplatePath, 'utf8');
+const muPluginContent = muPluginTemplate.replace(/{{FRONTEND_PORT}}/g, ports.FRONTEND_PORT);
+
+const muPluginPath = path.join(__dirname, '../mu-plugin.php');
+fs.writeFileSync(muPluginPath, muPluginContent);
+console.log(`✓ Generated mu-plugin.php`);
+
+// Copy .htaccess from template
+const htaccessTemplatePath = path.join(__dirname, '../../../../scripts/templates/.htaccess');
+const htaccessPath = path.join(__dirname, '../.htaccess');
+fs.copyFileSync(htaccessTemplatePath, htaccessPath);
+console.log(`✓ Generated .htaccess`);

examples/vanilla/toolbar-demo/scripts/wp-start.sh

@@ -0,0 +1,41 @@
+#!/bin/bash
+
+# Calculate ports for this example
+EXAMPLE_PATH="vanilla/toolbar-demo"
+PORTS=$(node ../../../scripts/get-ports.js "$EXAMPLE_PATH" --json)
+
+# Extract ports from JSON
+export WP_PORT=$(echo "$PORTS" | grep -o '"WP_PORT": [0-9]*' | grep -o '[0-9]*')
+export WP_TEST_PORT=$(echo "$PORTS" | grep -o '"WP_TEST_PORT": [0-9]*' | grep -o '[0-9]*')
+
+echo "Starting WordPress for vanilla toolbar demo..."
+echo "  WordPress: http://localhost:$WP_PORT"
+echo "  WP Test: http://localhost:$WP_TEST_PORT"
+echo ""
+
+# Update .wp-env.json with calculated ports
+cat > .wp-env.json <<EOF
+{
+  "phpVersion": "8.0",
+  "plugins": [
+    "https://github.com/wp-graphql/wp-graphql/releases/latest/download/wp-graphql.zip"
+  ],
+  "config": {
+    "WP_DEBUG": true,
+    "WP_DEBUG_LOG": true,
+    "GRAPHQL_DEBUG": true
+  },
+  "port": $WP_PORT,
+  "testsPort": $WP_TEST_PORT,
+  "mappings": {
+    "db": "./wp-env/db",
+    "wp-content/mu-plugins": "./mu-plugin.php"
+  },
+  "lifecycleScripts": {
+    "afterStart": "wp-env run cli -- wp rewrite structure '/%postname%/' && wp-env run cli -- wp rewrite flush"
+  }
+}
+EOF
+
+# Start wp-env
+npx wp-env start