boxybird · maximilliangeorge · Jan 8, 2023 · Jan 8, 2023 · Jan 8, 2023 · Jan 8, 2023
diff --git a/app.php b/app.php
@@ -3,12 +3,35 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
         <?php wp_head(); ?>
+
+        <!-- warning message, safe to remove -->
+
+        <?php if (wp_get_environment_type() === 'production') : ?>
+            <script>
+                console.info('Wordpress is running in production mode. This will prevent hot reload (HMR) from working. You can define your environment using the WP_ENVIRONMENT_TYPE constant in your wp-config.php file. Read more: https://make.wordpress.org/core/2020/07/24/new-wp_get_environment_type-function-in-wordpress-5-5/');
+            </script>
+        <?php endif; ?>
+
+        <?php if (wp_get_environment_type() === 'local') : ?>
+            <script>
+                console.info('Wordpress is running in local mode. This will only work if Vite is running - do not use in production! You can define your environment using the WP_ENVIRONMENT_TYPE constant in your wp-config.php file. Read more: https://make.wordpress.org/core/2020/07/24/new-wp_get_environment_type-function-in-wordpress-5-5/');
+            </script>
+        <?php endif; ?>
+
+        <?php if (wp_get_environment_type() === 'development') : ?>
+            <script>
+                console.info('Wordpress is running in development mode. This will only work if Vite is running - do not use in production! You can define your environment using the WP_ENVIRONMENT_TYPE constant in your wp-config.php file. Read more: https://make.wordpress.org/core/2020/07/24/new-wp_get_environment_type-function-in-wordpress-5-5/');
+            </script>
+        <?php endif; ?>
+
     </head>
     <body>
 
         <?php bb_inject_inertia(); ?>
 
         <?php wp_footer(); ?>
+
     </body>
 </html>
diff --git a/composer.lock b/composer.lock
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -0,0 +1,36 @@
+version: '3'
+
+services:
+
+  db:
+    image: mariadb:10.6.4-focal
+    restart: always
+    volumes:
+      - container-volume:/var/lib/mysql
+    environment:
+      MYSQL_ROOT_PASSWORD: wordpress
+      MYSQL_DATABASE: wordpress
+      MYSQL_USER: wordpress
+      MYSQL_PASSWORD: wordpress
+
+  wordpress:
+    image: wordpress:latest
+    # uncomment if you're on mac silicon
+    # platform: linux/amd64
+    restart: always
+    depends_on:
+      - db
+    volumes:
+      - .:/var/www/html/wp-content/themes/wordpress-inertia-starter-theme
+    environment:
+      WORDPRESS_DEBUG: 1
+      WP_ENVIRONMENT_TYPE: development
+      WORDPRESS_DB_HOST: db:3306
+      WORDPRESS_DB_USER: wordpress
+      WORDPRESS_DB_PASSWORD: wordpress
+      WORDPRESS_DB_NAME: wordpress
+    ports:
+      - 8000:80
+
+volumes:
+  container-volume:
diff --git a/functions.php b/functions.php
@@ -4,14 +4,110 @@
 
 require_once __DIR__ . '/vendor/autoload.php';
 
+define('WP_ENVIRONMENT_TYPE', 'local');
+
+if (!function_exists('str_contains')) {
+    function str_contains($haystack, $needle) {
+        return $needle !== '' && mb_strpos($haystack, $needle) !== false;
+    }
+}
+
+// Get manifest
+
+function get_vite_manifest() {
+    $manifest = file_get_contents(__DIR__ . '/dist/manifest.json');
+    return json_decode($manifest, true);
+}
+
+// Enqueue files from manifest.json
+
+add_filter( 'script_loader_tag', function ( $tag, $handle, $src ) {
+
+    $url = esc_url($src);
+
+    // module
+
+    if (str_contains($handle, 'vite__module')) {
+        return '<script type="module" crossorigin src="'. $url . '"></script>';
+    }
+
+    // preload
+
+    if (str_contains($handle, 'vite__preload')) {
+        return '<link rel="modulepreload" href="'. $url . '">';
+    }
+
+    // css
+
+    if (str_contains($handle, 'vite__style')) {
+        return '<link rel="stylesheet" href="'. $url . '">';
+    }
+
+    // default
+
+    return $tag;
+
+}, 10, 3 );
+
 // Enqueue scripts.
+
 add_action('wp_enqueue_scripts', function () {
-    $version = md5_file(get_stylesheet_directory() . '/dist/mix-manifest.json');
 
-    wp_enqueue_script('bb_theme', get_stylesheet_directory_uri() . '/dist/app.js', [], $version, true);
+    $environment = wp_get_environment_type();
+
+    // serve dev bundle
+
+    if ($environment === 'development' || $environment === 'local') {
+        wp_enqueue_script('vite__client', 'http://localhost:3000/@vite/client', [], true);
+        wp_enqueue_script('vite__module', 'http://localhost:3000/src/js/app.js', [], true);
+    }
+
+    // serve compiled bundle
+
+    if ($environment === 'production') {
+
+        $manifest = get_vite_manifest();
+
+        // enqueue scripts
+
+        foreach ($manifest as $key => $value) {
+
+            // if key ends with .css
+
+            if (str_contains($key, '.css')) {
+
+                wp_enqueue_style('vite__style_' . $key, get_stylesheet_directory_uri() . '/dist/' . $value['file'], [], false);
+
+            } else {
+
+                // must be .vue or .js file
+
+                // get imports, if exists
+
+                if (!empty($value['imports'])) {
+
+                        foreach ($value['imports'] as $import) {
+
+                            $import_file = $manifest[$import]['file'];
+
+                            wp_enqueue_script('vite__preload_' . $key, get_stylesheet_directory_uri() . '/dist/' . $import_file, [], false, false);
+                        }
+                }
+
+                // get bundle
+
+                wp_enqueue_script('vite__module_' . $key, get_stylesheet_directory_uri() . '/dist/' . $value['file'], [], false, false);
+
+            }
+
+        }
+
+    }
+
 });
 
 // Share globally with Inertia views
+
 add_action('after_setup_theme', function () {
     Inertia::share([
         'site' => [
@@ -23,7 +119,6 @@
 
 // Add Inertia version. Helps with cache busting
 add_action('after_setup_theme', function () {
-    $version = md5_file(get_stylesheet_directory() . '/dist/mix-manifest.json');
-
+    $version = md5_file(get_stylesheet_directory() . '/dist/manifest.json');
     Inertia::version($version);
-});
+});