Merge pull request #221 from hydephp/refactor-assets

Refactor assets managing, allowing for Laravel Mix, removing CDN support for Tailwind
hydephp · May 1, 2022 · 0f9fbcd · 0f9fbcd
2 parents 209da77 + 096bc6f
commit 0f9fbcd
Show file tree

Hide file tree

Showing 11 changed files with 95 additions and 67 deletions.
diff --git a/config/hyde.php b/config/hyde.php
@@ -114,18 +114,18 @@
     | Since v0.15.0, the default Hyde styles are no longer included as
     | publishable resources. This is to make updating easier, and to
     | reduce complexity. Instead, the assets are loaded through the
-    | jsDelivr CDN. You can also load Tailwind from the CDN by
-    | changing the config setting below. If you set it to
-    | false, Hyde will load the media/app.css, which
-    | you compile using NPM.
+    | jsDelivr CDN.
     |
     | The CDN version is defined in the AssetService class,
     | but can be changed here to a valid HydeFront tag.
     |
+    | If you load HydeFront through Laravel Mix using the NPM package,
+    | you should disable the HydeFront CDN feature.
+    |
     */
 
-    // 'loadTailwindFromCDN' => true,
-    // 'cdnHydeFrontVersionOverride' => 'v1.0.0,
+    'loadHydeAssetsUsingCDN' => true,
+    // 'cdnVersionOverride' => 'v1.0.0,
 
     /*
     |--------------------------------------------------------------------------

diff --git a/resources/assets/README.md b/resources/assets/README.md
@@ -29,7 +29,7 @@ The Hyde stylesheet contains the custom base styles and should be loaded after A
 This file contains basic scripts to make the navigation menu and sidebars interactive.
 
 ## Usage
-Note that HydeFront is included in Hyde/Hyde out of the box.
+Note that HydeFront is included in Hyde/Hyde through the CDN out of the box.
 
 ### Using CDN
 See https://www.jsdelivr.com/package/npm/hydefront
@@ -41,8 +41,31 @@ See https://www.jsdelivr.com/package/npm/hydefront
 <script defer src="https://cdn.jsdelivr.net/gh/hydephp/hydefront@v1.3/dist/hyde.js"></script>
 ```
 
-### Using NPM
-See https://www.npmjs.com/package/hydefront
+### Using NPM (with Laravel Mix)
+HydeFront is also available as an [NPM package](https://www.npmjs.com/package/hydefront), if you want to compile all your assets using Laravel Mix. Note that it is recommended to use the CDN as the Framework takes care of versioning.
+
+Install the package
+```bash
+npm install hydefront
+```
+
+Next, add the following import to `resources/assets/app.css`
+```css
+@import '~hydefront/dist/hyde.css';
+```
+
+Then, disable the CDN in your `config/hyde.php` file
+```php
+'loadHydeAssetsUsingCDN' => false,
+```
+
+And compile your assets
+```bash
+npm run dev/prod
+```
+
+#### Importing the JavaScript?
+You are probably wondering why there is no documentation for how to import the `hyde.js` using NPM. The answer is simple: I don't know how. If you know, please create an issue or submit a PR!
 
 ## Links:
 - GitHub https://github.com/hydephp/hydefront

diff --git a/resources/assets/package.json b/resources/assets/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hydefront",
-  "version": "1.3.1",
+  "version": "1.4.2",
   "description": "Frontend assets for HydePHP",
   "scripts": {
     "prod": "sass hyde.scss dist/hyde.css --style=compressed --no-source-map && uglifyjs --compress --mangle --output dist/hyde.js hyde.js",

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -17,16 +17,15 @@
 
     @stack('meta')
 
-    {{-- The core Hyde stylesheet --}}
-    <link rel="stylesheet" href="{{ Hyde::styles() }}">
-
-    {{-- The compiled Tailwind styles --}}
-    <link rel="stylesheet" href="{{ Hyde::tailwind() ?: Hyde::relativePath('media/app.css', $currentPage) }}">
+    {{-- App Stylesheets --}}
+    @include('hyde::layouts.styles')
 
     {{-- Include any extra tags to include in the <head> section --}}
     @include('hyde::layouts.meta') 
 
-    <script> /** Check the local storage for theme preference to avoid FOUC. */ if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark') } </script>
+    {{-- @todo if features::hasdarkmode 
+        Check the local storage for theme preference to avoid FOUC --}}
+    <script>if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark') } </script>
 </head>
 <body id="app" class="flex flex-col min-h-screen overflow-x-hidden dark:bg-gray-900 dark:text-white">
     <a href="#content" id="skip-to-content">Skip to content</a>
@@ -38,13 +37,10 @@
 
     @includeUnless(config('hyde.footer.enabled', true) && ($withoutNavigation ?? false), 'hyde::layouts.footer') 
 
-    {{-- The core Hyde scripts --}}
-    <script defer src="{{ Hyde::scripts() }}"></script>
+    {{-- App Scripts --}}
+    @include('hyde::layouts.scripts') 
 
-    {{-- Include any extra scripts --}}
+    {{-- Include any extra scripts to include before the closing <body> tag --}}
     @stack('scripts')
-
-    {{-- Include any extra scripts to include in before the closing <body> tag --}}
-    @include('hyde::layouts.scripts') 
 </body>
 </html>
diff --git a/resources/views/layouts/scripts.blade.php b/resources/views/layouts/scripts.blade.php
@@ -1 +1,9 @@
-{{-- You can place any extra scripts here. They will be placed before the closing </body> tag. --}}
+{{-- The core HydeFront scripts --}}
+@if(Hyde::scripts())
+<script defer src="{{ Hyde::scripts() }}"></script>
+@endif
+
+{{-- The compiled Laravel Mix scripts --}}
+@if(Hyde::assetManager()->hasMediaFile('app.js'))
+<script defer src="{{ Hyde::relativeLink('media/app.js', $currentPage) }}"></script>
+@endif
diff --git a/resources/views/layouts/styles.blade.php b/resources/views/layouts/styles.blade.php
@@ -0,0 +1,9 @@
+{{-- The core HydeFront stylesheet --}}
+@if(Hyde::styles())
+<link rel="stylesheet" href="{{ Hyde::styles() }}">
+@endif
+
+{{-- The compiled Tailwind/App styles --}}
+@if(Hyde::assetManager()->hasMediaFile('app.css'))
+<link rel="stylesheet" href="{{ Hyde::relativeLink('media/app.css', $currentPage) }}">
+@endif
diff --git a/src/Concerns/Internal/AssetManager.php b/src/Concerns/Internal/AssetManager.php
@@ -12,26 +12,30 @@
 trait AssetManager
 {
     /**
-     * Return the Tailwind CDN if enabled.
+     * Get the asset service instance.
+     *
+     * @todo Refactor to load the service from the container.
+     *
+     * @return \Hyde\Framework\Services\AssetService
      */
-    public static function tailwind(): string|false
+    public static function assetManager(): AssetService
     {
-        return (new AssetService)->tailwindPath();
+        return new AssetService;
     }
 
     /**
      * Return the Hyde stylesheet.
      */
-    public static function styles(): string
+    public static function styles(): string|false
     {
-        return (new AssetService)->stylePath();
+        return config('hyde.loadHydeAssetsUsingCDN', true) ? static::assetManager()->stylePath() : false;
     }
 
     /**
      * Return the Hyde scripts.
      */
     public static function scripts(): string
     {
-        return (new AssetService)->scriptPath();
+        return config('hyde.loadHydeAssetsUsingCDN', true) ? static::assetManager()->scriptPath() : false;
     }
 }
diff --git a/src/Concerns/Internal/FileHelpers.php b/src/Concerns/Internal/FileHelpers.php
@@ -70,14 +70,22 @@ public static function vendorPath(string $path = ''): string
         return static::path('vendor/hyde/framework/'.trim($path, '/\\'));
     }
 
+    /**
+     * @deprecated use relativeLink() instead
+     */
+    public static function relativePath(string $destination, string $current = ''): string
+    {
+        return static::relativeLink($destination, $current);
+    }
+
     /**
      * Inject the proper number of `../` before the links in Blade templates.
      *
      * @param  string  $destination  the route to format
      * @param  string  $current  the current route
      * @return string
      */
-    public static function relativePath(string $destination, string $current = ''): string
+    public static function relativeLink(string $destination, string $current = ''): string
     {
         $nestCount = substr_count($current, '/');
         $route = '';

diff --git a/src/Contracts/AssetServiceContract.php b/src/Contracts/AssetServiceContract.php
@@ -9,11 +9,6 @@ interface AssetServiceContract
      */
     public function version(): string;
 
-    /**
-     * Return the Tailwind CDN if enabled in the config, else false.
-     */
-    public function tailwindPath(): string|false;
-
     /**
      * Return the main Hyde stylesheet location/path.
      */

diff --git a/src/Services/AssetService.php b/src/Services/AssetService.php
@@ -3,6 +3,7 @@
 namespace Hyde\Framework\Services;
 
 use Hyde\Framework\Contracts\AssetServiceContract;
+use Hyde\Framework\Hyde;
 
 class AssetService implements AssetServiceContract
 {
@@ -15,14 +16,7 @@ class AssetService implements AssetServiceContract
 
     public function version(): string
     {
-        return config('hyde.cdnHydeFrontVersionOverride', $this->version);
-    }
-
-    public function tailwindPath(): string|false
-    {
-        return config('hyde.loadTailwindFromCDN', false)
-            ? $this->cdnPathConstructor('app.css')
-            : false;
+        return config('hyde.cdnVersionOverride', $this->version);
     }
 
     public function stylePath(): string
@@ -35,8 +29,21 @@ public function scriptPath(): string
         return $this->cdnPathConstructor('hyde.js');
     }
 
+    /**
+     * @deprecated use constructCdnPath() instead
+     */
     public function cdnPathConstructor(string $file): string
+    {
+        return $this->constructCdnPath($file);
+    }
+
+    public function constructCdnPath(string $file): string
     {
         return 'https://cdn.jsdelivr.net/npm/hydefront@'.$this->version().'/dist/'.$file;
     }
+
+    public function hasMediaFile(string $file): bool
+    {
+        return file_exists(Hyde::path('_media').'/'.$file);
+    }
 }
diff --git a/tests/Feature/AssetServiceTest.php b/tests/Feature/AssetServiceTest.php
@@ -33,32 +33,10 @@ public function test_version_method_returns_version_property_when_config_overrid
     public function test_can_change_version_in_config()
     {
         $service = new AssetService();
-        Config::set('hyde.cdnHydeFrontVersionOverride', '2.0.0');
+        Config::set('hyde.cdnVersionOverride', '2.0.0');
         $this->assertEquals('2.0.0', $service->version());
     }
 
-    public function test_tailwind_path_method_returns_false_if_null_in_config()
-    {
-        $service = new AssetService();
-        Config::set('hyde.loadTailwindFromCDN');
-        $this->assertFalse($service->tailwindPath());
-    }
-
-    public function test_tailwind_path_method_returns_false_if_disabled_in_config()
-    {
-        $service = new AssetService();
-        Config::set('hyde.loadTailwindFromCDN', false);
-        $this->assertFalse($service->tailwindPath());
-    }
-
-    public function test_tailwind_path_method_returns_cdn_path_if_enabled_in_config()
-    {
-        $service = new AssetService();
-        Config::set('hyde.loadTailwindFromCDN', true);
-        $this->assertIsString($service->tailwindPath());
-        $this->assertStringContainsString('app.css', $service->tailwindPath());
-    }
-
     public function test_style_path_method_returns_cdn_path()
     {
         $service = new AssetService();
@@ -83,7 +61,7 @@ public function test_cdn_path_constructor_returns_cdn_uri()
     public function test_cdn_path_constructor_uses_selected_version()
     {
         $service = new AssetService();
-        Config::set('hyde.cdnHydeFrontVersionOverride', '1.2.3');
+        Config::set('hyde.cdnVersionOverride', '1.2.3');
         $this->assertStringContainsString('@1.2.3', $service->cdnPathConstructor('styles.css'));
     }
 }