diff --git a/entry_types/scrolled/app/helpers/pageflow_scrolled/entry_json_seed_helper.rb b/entry_types/scrolled/app/helpers/pageflow_scrolled/entry_json_seed_helper.rb
index fabf9700f4..cde485bda3 100644
--- a/entry_types/scrolled/app/helpers/pageflow_scrolled/entry_json_seed_helper.rb
+++ b/entry_types/scrolled/app/helpers/pageflow_scrolled/entry_json_seed_helper.rb
@@ -18,9 +18,10 @@ def scrolled_entry_json_seed_script_tag(scrolled_entry, options = {})
scrolled_entry_json_seed(json, scrolled_entry, options)
end
- content_tag(:script, <<-JS.html_safe)
- pageflowScrolledRender(#{sanitize_json(seed_json)});
- JS
+ content_tag(:script,
+ sanitize_json(seed_json).html_safe,
+ type: 'application/json',
+ data: {pageflow_scrolled_seed: true})
end
def scrolled_entry_json_seed(json, scrolled_entry, options = {})
diff --git a/entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb b/entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb
index 473931f5db..bc7dac7674 100644
--- a/entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb
+++ b/entry_types/scrolled/app/helpers/pageflow_scrolled/packs_helper.rb
@@ -4,7 +4,7 @@ module PacksHelper
def scrolled_frontend_javascript_packs_tag(entry, options)
javascript_pack_tag(
*scrolled_frontend_packs(entry, **options),
- defer: false
+ defer: true
)
end
diff --git a/entry_types/scrolled/package/src/frontend/index.js b/entry_types/scrolled/package/src/frontend/index.js
index 6022e9144e..db842dd897 100644
--- a/entry_types/scrolled/package/src/frontend/index.js
+++ b/entry_types/scrolled/package/src/frontend/index.js
@@ -191,6 +191,29 @@ global.pageflowScrolledRegisterUpdateSeedHandler = function() {
}
}
+function bootFromSeedElement() {
+ const element =
+ document.querySelector('script[type="application/json"][data-pageflow-scrolled-seed]');
+
+ if (element) {
+ global.pageflowScrolledRender(JSON.parse(element.textContent));
+ }
+}
+
+if (typeof document !== 'undefined') {
+ // Widget packs (defaultNavigation, consentBar, mainStorylineSheet, ...) are
+ // separate scripts that load after this entry bundle and register their widget
+ // types on execution. All deferred pack scripts run before DOMContentLoaded, so
+ // waiting for that event is what guarantees every widget type - and the seed
+ // element that follows the scripts - is present before we render.
+ if (document.readyState === 'complete') {
+ bootFromSeedElement();
+ }
+ else {
+ document.addEventListener('DOMContentLoaded', bootFromSeedElement);
+ }
+}
+
function render(seed) {
if (editMode) {
ReactDOM.render(, document.getElementById('root'));
diff --git a/entry_types/scrolled/spec/helpers/pageflow_scrolled/entry_json_seed_helper_spec.rb b/entry_types/scrolled/spec/helpers/pageflow_scrolled/entry_json_seed_helper_spec.rb
index b51fb1e345..27cc156a36 100644
--- a/entry_types/scrolled/spec/helpers/pageflow_scrolled/entry_json_seed_helper_spec.rb
+++ b/entry_types/scrolled/spec/helpers/pageflow_scrolled/entry_json_seed_helper_spec.rb
@@ -1604,14 +1604,17 @@ def render(helper, entry, options = {})
end
describe '#scrolled_entry_json_seed_script_tag' do
- it 'renders script tag which assigns seed global variable' do
+ it 'renders inert JSON data script tag carrying the seed' do
entry = create(:published_entry, type_name: 'scrolled')
chapter = create(:scrolled_chapter, revision: entry.revision)
create(:section, chapter:)
result = helper.scrolled_entry_json_seed_script_tag(entry)
- expect(result).to match(%r{}m)
+ expect(result).to have_selector(
+ 'script[type="application/json"][data-pageflow-scrolled-seed]',
+ visible: false
+ )
end
it 'escapes illegal characters' do