fix css loader regression

.github/workflows/browser-tests.yml

@@ -61,6 +61,9 @@ jobs:
       - name: Install Composer dependecies
         run: composer update --no-progress --optimize-autoloader --${{ matrix.dependency-version }}
 
+      - name: Install Laravel
+        run: composer update illuminate/support:"${{ matrix.laravel }}" illuminate/contracts:"${{ matrix.laravel }}" --no-progress
+
       - name: Directory Permissions
         run: sudo chown -R $(whoami) vendor/pestphp/pest/.temp vendor/orchestra
 

.github/workflows/tests.yml

@@ -65,6 +65,9 @@ jobs:
       - name: Install Composer dependecies
         run: composer update --no-progress --optimize-autoloader --${{ matrix.dependency-version }}
 
+      - name: Install Laravel
+        run: composer update illuminate/support:"${{ matrix.laravel }}" illuminate/contracts:"${{ matrix.laravel }}" --no-progress
+
       - name: Directory Permissions
         run: sudo chown -R $(whoami) vendor/pestphp/pest/.temp vendor/orchestra
 

composer.json

@@ -90,9 +90,11 @@
         "fix": "vendor/bin/duster fix",
         "analyze": "vendor/bin/phpstan analyse",
         "baseline": "vendor/bin/phpstan analyse --generate-baseline",
+
         "clear": "@php vendor/bin/testbench package:purge-skeleton --ansi",
         "prepare": "@php vendor/bin/testbench package:discover --ansi",
         "build": "@php vendor/bin/testbench workbench:build --ansi",
+
         "dusk:install-chromedriver": "@php vendor/bin/dusk-updater detect --auto-update --ansi",
         "test": "@php vendor/bin/pest --group=feature,unit",
         "test-browser": "@php vendor/bin/pest --exclude-group=feature,unit",

phpunit.xml

@@ -8,6 +8,7 @@
         <env name="BUNDLE_MINIFY" value="true" />
         <env name="BUNDLE_CACHING" value="false" />
         <env name="BUNDLE_SOURCEMAPS" value="false" />
+        <env name="RAY_ENABLED" value="false" />
     </php>
 
     <testsuites>

src/Components/views/import.blade.php

@@ -0,0 +1,64 @@
+{{-- @codeCoverageIgnoreStart --}}
+
+//--------------------------------------------------------------------------
+// Expose x_import_modules map
+//--------------------------------------------------------------------------
+if (!window.x_import_modules) window.x_import_modules = {};
+
+//--------------------------------------------------------------------------
+// Import the module & push to x_import_modules
+// Invoke IIFE so we can break out of execution when needed
+//--------------------------------------------------------------------------
+(() => {
+
+    @if ($init)
+        // Import was marked as invokable
+        // Note: don't return, since we might need to still register the module
+        import('{{ $module }}')
+            .then(invokable => {
+                if (typeof invokable.default !== 'function') {
+                    throw `BUNDLING ERROR: '{{ $module }}' not invokable - default export is not a function`
+                }
+
+                try {
+                    invokable.default()
+                } catch (e) {
+                    throw `BUNDLING ERROR: unable to invoke '{$this->module}' - '\${e}'`
+                }
+            })
+    @endif
+
+    // Check if module is already loaded under a different alias
+    const previous = document.querySelector(`script[data-module="{{ $module }}"]`)
+
+    // Was previously loaded & needs to be pushed to import map
+    if (previous && '{{ $as }}') {
+        // Throw error when previously imported under different alias. Otherwise continue
+        if (previous.dataset.alias !== '{{ $as }}') {
+            throw `BUNDLING ERROR: '{{ $as }}' already imported as '\${previous.dataset.alias}'`
+        }
+    }
+
+    // Handle CSS injection
+    @if (str_ends_with($module, '.css') || str_ends_with($module, '.scss'))
+
+        return import('{{ $module }}').then(result => {
+            window.x_inject_styles(result.default, previous)
+        })
+
+    @else
+
+        @if ($as)
+
+            window.x_import_modules['{{ $as }}'] = import('{{ $module }}')
+
+        @else
+
+            import('{{ $module }}')
+
+        @endif
+
+    @endif
+})();
+
+{{-- @codeCoverageIgnoreEnd --}}

workbench/resources/js/alert.js

@@ -1,3 +1,3 @@
 export default function alert(message) {
-    alert(message)
+    window.alert(message)
 }

workbench/resources/views/playground.blade.php

@@ -22,7 +22,7 @@
         {{ $filePath }}
     </code>
 
-    <div class="text-xs max-w-2xl my-8 p-4 rounded bg-slate-100 overflow-x-scroll">
+    <div class="text-xs max-w-6xl my-8 p-4 rounded bg-slate-100 overflow-x-scroll">
         <code class="whitespace-pre-wrap w-[1000%]">{{ file_get_contents($filePath) }}</code>
     </div>