track component assets throughout the request and append them to the …

…<head> tag during page load.
coldbox-modules · Sep 29, 2024 · 83f7621 · 83f7621
1 parent e490c4e
commit 83f7621
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 1 deletion.
diff --git a/interceptors/CBWIRE.cfc b/interceptors/CBWIRE.cfc
@@ -109,7 +109,8 @@ component {
         return true;
     }
 
-    function preRender( event, data ) eventPattern="^cbwire.*" {
+    function preRender( event, data, interceptData ) {
+        handleRequestAssets( argumentCollection=arguments );
         return true;
     }
 
@@ -203,4 +204,21 @@ component {
         local.settings = getSettings();
         return arguments.event.getCurrentModule() != "cbwire" && local.settings.autoInjectAssets == true;
     }
+
+    /**
+     * Handle append the assets from any components during the request 
+     * by appending them to the head of the layout.
+     *
+     * @event | Event
+     * @data | Struct
+     * @interceptData | Struct
+     * 
+     * @return void
+     */
+    private function handleRequestAssets( event, data, interceptData ) {
+        local.requestAssets = arguments.event.getPrivateValue( "cbwireRequestAssets", {} );
+        local.requestAssets.each( function( key, value ) {
+            interceptData.renderedContent = interceptData.renderedContent.replaceNoCase( "</head>", value & chr( 10 ) & "</head>", "one" );
+        } );
+    }
 }
diff --git a/models/CBWIREController.cfc b/models/CBWIREController.cfc
@@ -288,6 +288,17 @@ component singleton {
         return variables.requestService.getContext();
     }
 
+    /**
+     * Returns any request assets defined by components during the request.
+     * 
+     * @return struct
+     */
+    function getRequestAssets() {
+        local.event = getEvent();
+        local.event.paramPrivateValue( "cbwireRequestAssets", {} );
+        return local.event.getPrivateValue( "cbwireRequestAssets" );
+    }
+
     /**
      * Returns the ColdBox ConfigSettings object.
      * 

diff --git a/models/Component.cfc b/models/Component.cfc
@@ -1126,6 +1126,8 @@ component output="true" {
             local.assetsTagId = variables._compileTimeKey & "-" & local.counter;
             // Track the assets tag
             variables._assets[ local.assetsTagId ] = value;
+            local.requestAssets = variables._CBWIREController.getRequestAssets();
+            local.requestAssets[ local.assetsTagId ] = value;
         } );
     }
 

diff --git a/test-harness/tests/specs/CBWIRESpec.cfc b/test-harness/tests/specs/CBWIRESpec.cfc
@@ -40,6 +40,13 @@ component extends="coldbox.system.testing.BaseTestCase" {
                 expect( CBWIREController.getUpdateEndpoint() ).toBe( "/index.cfm/cbwire/update" );
             } );
 
+            it( "should have component request assets added in head", function() {
+                var event = this.get( "tests.requestassets" );
+                var html = event.getRenderedContent();
+                var beforeHead = left( html, findNoCase( "</head>", html )-1 );
+                expect( beforeHead ).toInclude( "<link rel=""stylesheet"" type=""text/css"" href=""https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css"">" );
+            } );
+
         } );
 
         describe("Component.cfc", function() {

diff --git a/test-harness/views/tests/requestassets.cfm b/test-harness/views/tests/requestassets.cfm
@@ -0,0 +1,3 @@
+<cfoutput>
+    #wire( "test.should_put_request_assets_in_head" )#
+</cfoutput>
diff --git a/test-harness/wires/test/should_put_request_assets_in_head.cfm b/test-harness/wires/test/should_put_request_assets_in_head.cfm
@@ -0,0 +1,15 @@
+<cfoutput>
+    <div>
+        <h1>Should put assets in head</h1>
+    </div>
+</cfoutput>
+
+<cfscript>
+    // @startWire
+
+    // @endWire
+</cfscript>
+
+<cbwire:assets>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
+</cbwire:script>
diff --git a/views/tests/requestassets.cfm b/views/tests/requestassets.cfm
@@ -0,0 +1,3 @@
+<cfoutput>
+    <h1>i got here</h1>
+</cfoutput>