Remove the need to load WordPress (#9)

Author: srtfisher

.nvmrc

@@ -0,0 +1 @@
+22

package-lock.json

@@ -5,7 +5,10 @@ import { useState } from 'react';
 
 export function SharePopover() {
     const [copied, setCopied] = useState(false);
-    const { url, props: { url: shareUrl } } = usePage();
+    const {
+        url,
+        props: { url: shareUrl },
+    } = usePage();
     const [show, setShow] = useState(true);
 
     const created = url.includes('created=1');
@@ -18,13 +21,7 @@ export function SharePopover() {
         <div aria-live="assertive" className="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6">
             <div className="flex w-full flex-col items-center space-y-4 sm:items-end">
                 <Transition show={show}>
-                    <div className="
-                        pointer-events-auto
-                        w-full max-w-sm overflow-hidden
-                        bg-white dark:bg-gray-400 dark:ring-gray-900/20
-                        rounded-lg
-                        shadow-lg ring-1 ring-black/5 transition
-                        data-[closed]:opacity-0 data-[enter]:transform data-[enter]:duration-300 data-[enter]:ease-out data-[closed]:data-[enter]:translate-y-2 data-[leave]:duration-100 data-[leave]:ease-in data-[closed]:data-[enter]:sm:translate-x-2 data-[closed]:data-[enter]:sm:translate-y-0 ">
+                    <div className="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black/5 transition data-[closed]:opacity-0 data-[enter]:transform data-[enter]:duration-300 data-[enter]:ease-out data-[closed]:data-[enter]:translate-y-2 data-[leave]:duration-100 data-[leave]:ease-in data-[closed]:data-[enter]:sm:translate-x-2 data-[closed]:data-[enter]:sm:translate-y-0 dark:bg-gray-400 dark:ring-gray-900/20">
                         <div className="p-4">
                             <div className="flex items-start">
                                 <div className="ml-3 w-0 flex-1 pt-0.5">

resources/js/components/share.tsx

@@ -27,9 +27,6 @@ export const DEFAULT_CODE = `<?php
    -- Alley (https://alley.com/)
 */
 
-// Load WordPress to get access to its functions.
-require_once 'wordpress/wp-load.php';
-
 // Output a simple message to the browser.
 echo "Hello, World!";
 `;

resources/js/context/context.ts

@@ -8,7 +8,6 @@ export function useRunCode() {
     } = usePlaygroundState();
 
     return async (code: string) => {
-        console.log('run code', code);
         if (!playgroundClient) {
             dispatch(actionSetError('Playground client is not initialized.'));
             dispatch(actionSetOutput(''));
@@ -22,6 +21,9 @@ export function useRunCode() {
             return;
         }
 
+        // Inject the WordPress loader into the code.
+        code = code.replace(/<\?php/, "<?php require_once 'wordpress/wp-load.php';");
+
         try {
             const startTime = performance.now();
             const response = await playgroundClient.run({ code });