rename data-import to data-module

gwleuverink · Jan 19, 2024 · e148c2c · e148c2c
1 parent fe35be6
commit e148c2c
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 17 deletions.
diff --git a/docs/advanced-usage.md b/docs/advanced-usage.md
@@ -15,7 +15,7 @@ You should apply this with consideration. You will save up on requests, but doin
 
 <!-- yields the following script -->
 
-<script data-bundle="alert">
+<script data-module="apexcharts">
   // Your minified bundle
 </script>
 ```

diff --git a/docs/introduction.md b/docs/introduction.md
@@ -13,7 +13,11 @@ The `<x-import />` component bundles your import on the fly using [Bun](https://
 
 <!-- yields the following script -->
 
-<script src="/x-import/e52def31336c.min.js" type="module" data-bundle="alert"></script>
+<script
+  src="/x-import/e52def31336c.min.js"
+  type="module"
+  data-module="alert"
+></script>
 ```
 
 <br />

diff --git a/src/Components/Import.php b/src/Components/Import.php
@@ -53,7 +53,7 @@ protected function raiseConsoleErrorOrException(BundlingFailedException $e)
 
         return <<< HTML
             <!--[BUNDLE: {$this->as} from '{$this->module}']-->
-            <script data-bundle="{$this->module}">throw "BUNDLING ERROR: No module found at path '{$this->module}'"</script>
+            <script data-module="{$this->module}" data-alias="{$this->as}">throw "BUNDLING ERROR: No module found at path '{$this->module}'"</script>
             <!--[ENDBUNDLE]>-->
         HTML;
     }
@@ -99,7 +99,7 @@ protected function core(): string
             (() => {
 
                 // Check if module is already loaded under a different alias
-                const previous = document.querySelector(`script[data-bundle="{$this->module}"`)
+                const previous = document.querySelector(`script[data-module="{$this->module}"`)
 
                 // Was previously loaded & needs to be pushed to import map
                 if(previous && '{$this->as}') {

diff --git a/src/Components/views/script.blade.php b/src/Components/views/script.blade.php
@@ -2,11 +2,11 @@
 @once("bundle:$module:$as")
 <!--[BUNDLE: {{ $as }} from '{{ $module }}']-->
 @if ($inline)
-<script data-bundle="{{ $module }}" data-alias="{{ $as }}" type="module" {{ $attributes }}>
+<script data-module="{{ $module }}" data-alias="{{ $as }}" type="module" {{ $attributes }}>
     {!! file_get_contents($bundle) !!}
 </script>
 @else
-<script src="{{ route('bundle:import', $bundle->getFilename(), false) }}" data-bundle="{{ $module }}" data-alias="{{ $as }}" type="module" {{ $attributes }}></script>
+<script src="{{ route('bundle:import', $bundle->getFilename(), false) }}" data-module="{{ $module }}" data-alias="{{ $as }}" type="module" {{ $attributes }}></script>
 @endif
 <!--[ENDBUNDLE]>-->
 @else {{-- @once else clause --}}

diff --git a/tests/Browser/ComponentTest.php b/tests/Browser/ComponentTest.php
@@ -16,7 +16,7 @@
 //         <x-import module="~/alert" as="alert" />
 //     HTML)
 //     ->assertScript(<<< JS
-//         document.querySelectorAll('script[data-bundle="alert"').length
+//         document.querySelectorAll('script[data-module="alert"').length
 //     JS, 1);
 
 class ComponentTest extends DuskTestCase
@@ -29,7 +29,7 @@ public function it_renders_the_same_import_only_once()
                 <x-import module="~/output-to-id" as="output" />
             HTML)
             ->assertScript(<<< 'JS'
-                document.querySelectorAll('script[data-bundle="~/output-to-id"').length
+                document.querySelectorAll('script[data-module="~/output-to-id"').length
             JS, 1);
     }
 
@@ -41,7 +41,7 @@ public function it_renders_the_same_import_only_once_when_one_was_inlined()
                 <x-import module="~/output-to-id" as="output" inline />
             HTML)
             ->assertScript(<<< 'JS'
-                document.querySelectorAll('script[data-bundle="~/output-to-id"').length
+                document.querySelectorAll('script[data-module="~/output-to-id"').length
             JS, 1);
     }
 
@@ -53,10 +53,10 @@ public function it_renders_multiple_imports_when_they_only_use_a_module_property
                 <x-import module="~/output-to-id" />
             HTML)
             ->assertScript(<<< 'JS'
-                document.querySelectorAll('script[data-bundle="~/function-is-evaluated"').length
+                document.querySelectorAll('script[data-module="~/function-is-evaluated"').length
             JS, 1)
             ->assertScript(<<< 'JS'
-                document.querySelectorAll('script[data-bundle="~/output-to-id"').length
+                document.querySelectorAll('script[data-module="~/output-to-id"').length
             JS, 1);
     }
 
@@ -68,7 +68,7 @@ public function it_renders_the_same_import_under_different_aliases()
                 <x-import module="~/output-to-id" as="bar" />
             HTML)
             ->assertScript(<<< 'JS'
-                document.querySelectorAll('script[data-bundle="~/output-to-id"').length
+                document.querySelectorAll('script[data-module="~/output-to-id"').length
             JS, 2);
     }
 
@@ -80,11 +80,11 @@ public function it_renders_script_inline_when_inline_prop_was_passed()
             HTML)
             // Assert it doesn't render src attribute on the script tag
             ->assertScript(<<< 'JS'
-                document.querySelectorAll('script[data-bundle="~/output-to-id"')[0].hasAttribute('src')
+                document.querySelectorAll('script[data-module="~/output-to-id"')[0].hasAttribute('src')
             JS, false)
             // Assert script tag has content
             ->assertScript(<<< 'JS'
-                typeof document.querySelectorAll('script[data-bundle="~/output-to-id"')[0].innerHTML
+                typeof document.querySelectorAll('script[data-module="~/output-to-id"')[0].innerHTML
             JS, 'string');
     }
 
@@ -95,11 +95,11 @@ public function it_doesnt_render_script_inline_by_default()
             HTML)
             // Assert it renders src attribute on the script tag
             ->assertScript(<<< 'JS'
-                document.querySelectorAll('script[data-bundle="~/output-to-id"')[0].hasAttribute('src')
+                document.querySelectorAll('script[data-module="~/output-to-id"')[0].hasAttribute('src')
             JS, true)
             // Assert script tag has no content
             ->assertScript(<<< 'JS'
-                document.querySelectorAll('script[data-bundle="~/output-to-id"')[0].innerHTML
+                document.querySelectorAll('script[data-module="~/output-to-id"')[0].innerHTML
             JS, null);
     }
 
@@ -194,7 +194,7 @@ public function it_logs_console_errors_when_debug_mode_disabled()
                 <x-import module="~/nonexistent-module" as="foo" />
             HTML)
             ->assertScript(<<< 'JS'
-                document.querySelector('script[data-bundle="~/nonexistent-module"').innerHTML
+                document.querySelector('script[data-module="~/nonexistent-module"').innerHTML
             JS, 'throw "BUNDLING ERROR: No module found at path \'~/nonexistent-module\'"');
     }
 }