Feature/vite integration

wp-config.php

@@ -21,7 +21,7 @@
 
 // ** Database settings - You can get this info from your web host ** //
 /** The name of the database for WordPress */
-define( 'DB_NAME', 'footmate' );
+define( 'DB_NAME', 'footmate.pro' );
 
 /** Database username */
 define( 'DB_USER', 'root' );
@@ -30,7 +30,7 @@
 define( 'DB_PASSWORD', 'root' );
 
 /** Database hostname */
-define( 'DB_HOST', '127.0.0.1' );
+define( 'DB_HOST', '127.0.0.1:3307' );
 
 /** Database charset to use in creating database tables. */
 define( 'DB_CHARSET', 'utf8mb4' );

wp-content/themes/footmate/.gitignore

@@ -1 +1,2 @@
+dist
 vendor

wp-content/themes/footmate/app/App.php

@@ -2,9 +2,9 @@
 
 namespace FM;
 
+use FM\Assets\Assets;
 use FM\Core\Config;
 use FM\Core\Hooks;
-use FM\Core\Setup;
 use FM\Core\Widgets;
 use FM\Integrations\Integrations;
 use FM\Posts\Posts;
@@ -14,6 +14,8 @@
 
 class App
 {
+    private Assets $assets;
+
     private Config $config;
 
     private Filesystem $filesystem;
@@ -22,8 +24,6 @@ class App
 
     private Posts $posts;
 
-    private Setup $setup;
-
     private Teams $teams;
 
     private Templates $templates;
@@ -34,16 +34,21 @@ class App
 
     private function __construct()
     {
+        $this->assets = self::init(new Assets());
         $this->config = self::init(new Config());
         $this->filesystem = new Filesystem();
         $this->integrations = self::init(new Integrations());
         $this->posts = self::init(new Posts());
-        $this->setup = self::init(new Setup());
         $this->teams = self::init(new Teams());
         $this->templates = self ::init(new Templates());
         $this->widgets = self::init(new Widgets());
     }
 
+    public function assets(): Assets
+    {
+        return $this->assets;
+    }
+
     public function config(): Config
     {
         return $this->config;
@@ -59,11 +64,6 @@ public function integrations(): Integrations
         return $this->integrations;
     }
 
-    public function setup(): Setup
-    {
-        return $this->setup;
-    }
-
     public function posts(): Posts
     {
         return $this->posts;

wp-content/themes/footmate/app/Assets/Assets.php

@@ -0,0 +1,19 @@
+<?php 
+
+namespace FM\Assets;
+
+use FM\Assets\Resolver;
+
+class Assets
+{
+    use Resolver;
+
+    /**
+     * @action wp_enqueue_scripts
+     */
+    public function front(): void
+    {
+        wp_enqueue_style('theme', $this->resolve('styles/styles.scss'), [], fm()->config()->get('version'), 'all');
+        wp_enqueue_script('theme', $this->resolve('scripts/scripts.js'), [], fm()->config()->get('version'), ['strategy' => 'defer']);
+    }
+}

wp-content/themes/footmate/app/Assets/Resolver.php

@@ -0,0 +1,33 @@
+<?php 
+
+namespace FM\Assets;
+
+trait Resolver
+{
+    private array $manifest = [];
+
+    /**
+     * @action wp_enqueue_scripts 1
+     */
+    public function load(): void
+    {
+        $path = fm()->config()->get('manifest.path');
+
+        if (empty($path) || ! file_exists($path)) {
+            wp_die(__('Run <code>npm run build</code> in your application root!', 'fm'));
+        }
+
+        $this->manifest = json_decode(file_get_contents($path), true);
+    }
+
+    private function resolve(string $path): string
+    {
+        $url = '';
+
+        if (! empty($this->manifest["resources/{$path}"])) {
+            $url = FM_ASSETS_URI . "/{$this->manifest["resources/{$path}"]['file']}";
+        }
+
+        return apply_filters('fm/assets/resolver/url', $url, $path);
+    }
+}

wp-content/themes/footmate/app/Core/Config.php

@@ -9,27 +9,24 @@ class Config
     public function __construct()
     {
         $this->config = [
-            'version' => FM_VERSION,
+            'version' => wp_get_environment_type() === 'development' ? time() : FM_VERSION,
             'path' => FM_PATH,
             'uri' => FM_URI,
-            'cache' => [
-                'path' => wp_upload_dir()['basedir'] . '/cache/fm',
-            ],
             'env' => [
                 'type' => wp_get_environment_type(),
                 'mode' => false === strpos(FM_PATH, ABSPATH . 'wp-content/plugins') ? 'theme' : 'plugin',
             ],
-            'images' => [
-                'path' => FM_PATH . '/resources/images',
-                'uri' => FM_URI . '/resources/images',
+            'hmr' => [
+                'host' => FM_HMR_HOST,
+                'client' => FM_HMR_HOST . '/@vite/client',
+                'base' => str_replace(home_url(), FM_HMR_HOST, FM_RESOURCES_URI),
+                'active' => wp_get_environment_type() === 'development' && ! is_wp_error(wp_remote_get(FM_HMR_HOST)),
             ],
-            'styles' => [
-                'path' => FM_PATH . '/resources/styles',
-                'uri' => FM_URI . '/resources/images',
+            'manifest' => [
+                'path' => FM_ASSETS_PATH . '/manifest.json',
             ],
-            'scripts' => [
-                'path' => FM_PATH . '/resources/scripts',
-                'uri' => FM_URI . '/resources/images',
+            'cache' => [
+                'path' => wp_upload_dir()['basedir'] . '/cache/fm',
             ],
             'views' => [
                 'path' => FM_PATH . '/resources/views',

wp-content/themes/footmate/app/Integrations/Integrations.php

@@ -3,14 +3,22 @@
 namespace FM\Integrations;
 
 use FM\Integrations\ESPN;
+use FM\Integrations\Vite;
 
 class Integrations
 {
     private ESPN $espn;
 
-    public function __construct()
+    /**
+     * @action init
+     */
+    public function init(): void
     {
         $this->espn = \FM\App::init(new ESPN());
+
+        if (fm()->config()->get('hmr.active')) {
+            \FM\App::init(new Vite());
+        }
     }
 
     public function espn(): ESPN

wp-content/themes/footmate/app/Integrations/Vite.php

@@ -0,0 +1,34 @@
+<?php 
+
+namespace FM\Integrations;
+
+class Vite
+{
+    /**
+     * @action wp_head 1
+     */
+    public function client(): void
+    {
+        echo '<script type="module" src="' . fm()->config()->get('hmr.client') . '"></script>';
+    }
+
+    /**
+     * @filter script_loader_tag 1 3
+     */
+    public function module(string $tag, string $handle, string $url): string
+    {
+        if (false !== strpos($url, FM_HMR_HOST)) {
+            $tag = str_replace('<script ', '<script type="module" ', $tag);
+        }
+
+        return $tag;
+    }
+
+    /**
+     * @filter fm/assets/resolver/url 1 2
+     */
+    public function url(string $url, string $path): string
+    {
+        return fm()->config()->get('hmr.base') . "/{$path}";
+    }
+}

wp-content/themes/footmate/changelog.md

@@ -20,13 +20,13 @@ All notable changes to this project will be documented in this file. The format
 
 ## [Unreleased]
 ### Added
-- Core: `DocHooks` module.
+- Core: `DocHooks` module - https://tentyp.dev/blog/wordpress/dochooks-sugar-syntax-for-hooking-system/
 - Core: Add `Config` facade with default values.
-- App: Add `Filesystem` object to app facade.
-- Setup: Add simple setup submodule.
-- Templates: Add Blade templating engine.
+- App: Add `Filesystem` object to app facade - https://tentyp.dev/blog/wordpress/introducing-laravel-blade/
+- Templates: Add Blade templating engine - https://tentyp.dev/blog/wordpress/introducing-laravel-blade/
+- Integrations: Vite for the development process - https://tentyp.dev/blog/wordpress/vite/
 ### Changed
-- App: Use `DocHooks` for handling hooks in the modules.
+- App: Use `DocHooks` for handling hooks in the modules - https://tentyp.dev/blog/wordpress/dochooks-sugar-syntax-for-hooking-system/
 - App: Remove `Core` facade for separated objects for core submodules.
 
 ## [0.1.1] 27.06.2023

wp-content/themes/footmate/functions.php

@@ -3,6 +3,11 @@
 define('FM_VERSION', '0.1.1');
 define('FM_PATH', dirname(__FILE__));
 define('FM_URI', home_url(str_replace(ABSPATH, '', FM_PATH)));
+define('FM_HMR_HOST', 'http://localhost:5173');
+define('FM_ASSETS_PATH', FM_PATH . '/dist');
+define('FM_ASSETS_URI', FM_URI . '/dist');
+define('FM_RESOURCES_PATH', FM_PATH . '/resources');
+define('FM_RESOURCES_URI', FM_URI . '/resources');
 
 require_once(FM_PATH . '/inc/bootstrap.php');