Skip to content

Commit

Permalink
embed large initial state as JSON text (#1519)
Browse files Browse the repository at this point in the history
  • Loading branch information
jchip authored Feb 3, 2020
1 parent 3fac520 commit e39afa7
Showing 1 changed file with 26 additions and 2 deletions.
28 changes: 26 additions & 2 deletions packages/subapp-web/lib/load.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,14 @@ const { loadSubAppByName, loadSubAppServerByName } = require("subapp-util");
// V1: version 1.
const xarc = "window.xarcV1";

// Size threshold of initial state string to embed it as a application/json script tag
// It's more efficent to JSON.parse large JSON data instead of embedding them as JS.
// https://quipblog.com/efficiently-loading-inlined-json-data-911960b0ac0a
// > The data sizes are as follows: large is 1.7MB of JSON, medium is 130K,
// > small is 10K and tiny is 781 bytes.
const INITIAL_STATE_SIZE_FOR_JSON = 1024;
let INITIAL_STATE_TAG_ID = 0;

module.exports = function setup(setupContext, { props: options }) {
// TODO: create JSON schema to validate props

Expand Down Expand Up @@ -203,12 +211,28 @@ module.exports = function setup(setupContext, { props: options }) {
outputSpot.add(ssrContent);
}

let dynInitialState = "";
let initialStateScript;
if (!initialStateStr) {
initialStateScript = "{}";
} else if (initialStateStr.length < INITIAL_STATE_SIZE_FOR_JSON) {
initialStateScript = initialStateStr;
} else {
// embed large initial state as text and parse with JSON.parse instead.
const dataId = `${name}-initial-state-${Date.now()}-${++INITIAL_STATE_TAG_ID}`;
dynInitialState = `<script type="application/json" id="${dataId}">
${initialStateStr}
</script>
`;
initialStateScript = `JSON.parse(document.getElementById("${dataId}").innerHTML)`;
}

outputSpot.add(`
<script>${xarc}.startSubAppOnLoad({
${dynInitialState}<script>${xarc}.startSubAppOnLoad({
name:"${name}",
${elementId}serverSideRendering:${Boolean(options.serverSideRendering)},
clientProps:${clientProps},
initialState:${initialStateStr || "{}"}
initialState:${initialStateScript}
});</script>
`);
};
Expand Down

0 comments on commit e39afa7

Please sign in to comment.