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