feat: improve serialization across multiple writes

packages/marko/src/core-tags/components/add-preferred-script-location-transformer.js

@@ -0,0 +1,10 @@
+"use strict";
+
+module.exports = function transform(el, context) {
+  if (context.outputType === "html" && !context.___hasPreferredScriptLocation) {
+    context.___hasPreferredScriptLocation = true;
+    el.parentNode.appendChild(
+      context.createNodeForEl("_preferred-script-location")
+    );
+  }
+};

packages/marko/src/core-tags/components/body-transformer.js

@@ -1,14 +1,8 @@
 "use strict";
 
 module.exports = function transform(el, context) {
-  let componentGlobalsNode = context.createNodeForEl("component-globals");
-  el.prependChild(componentGlobalsNode);
-
-  let initComponentsNode = context.createNodeForEl("init-components");
-  el.appendChild(initComponentsNode);
-
-  // Make <await-reorderer> optional. Automatically insert it before the
-  // body tag.
-  let awaitReorderer = context.createNodeForEl("await-reorderer");
-  el.appendChild(awaitReorderer);
+  if (context.outputType === "html") {
+    el.appendChild(context.createNodeForEl("init-components"));
+    el.appendChild(context.createNodeForEl("await-reorderer"));
+  }
 };

packages/marko/src/core-tags/components/init-components-tag.js

@@ -21,17 +21,10 @@ function addInitScript(writer) {
   writer.script(getInitComponentsCode(out, componentDefs));
 }
 
-function forceScriptTagAtThisPoint(out) {
-  const writer = out.writer;
-  const htmlSoFar = writer.toString();
-  writer.clear();
-  writer.write(htmlSoFar);
-}
-
 module.exports = function render(input, out) {
-  const outGlobal = out.global;
-  if (outGlobal[INIT_COMPONENTS_KEY] === undefined) {
-    outGlobal[INIT_COMPONENTS_KEY] = true;
+  const $global = out.global;
+  if ($global[INIT_COMPONENTS_KEY] === undefined) {
+    $global[INIT_COMPONENTS_KEY] = true;
 
     out.on("await:finish", addComponentsFromOut);
     out.on("___toString", addInitScript);
@@ -40,7 +33,6 @@ module.exports = function render(input, out) {
       // Generate initialization code for any of the UI components that were
       // rendered synchronously
       addComponentsFromOut(out);
-      forceScriptTagAtThisPoint(out);
     } else {
       // Generate initialization code for any of the UI components that were
       // rendered asynchronously, but were outside an `<await>` tag
@@ -54,7 +46,6 @@ module.exports = function render(input, out) {
         }
         // Write out all of the component init code from the main out
         addComponentsFromOut(rootOut, asyncOut);
-        forceScriptTagAtThisPoint(asyncOut);
         asyncOut.end();
         next();
       });

packages/marko/src/core-tags/components/marko.json

@@ -93,16 +93,16 @@
     "code-generator": "./component-tag.js",
     "autocomplete": []
   },
-  "<component-globals>": {
-    "renderer": "./component-globals-tag.js",
-    "no-output": true,
-    "autocomplete": []
-  },
   "<init-components>": {
+    "transformer": "./add-preferred-script-location-transformer.js",
     "renderer": "./init-components-tag.js",
     "no-output": true,
     "@immediate": "boolean"
   },
+  "<_preferred-script-location>": {
+    "renderer": "./preferred-script-location-tag.js",
+    "no-output": true
+  },
   "<_preserve>": {
     "renderer": "./preserve-tag.js",
     "@cid": "string",

packages/marko/src/core-tags/components/package.json

@@ -1,6 +1,5 @@
 {
     "browser": {
-        "./component-globals-tag.js": "./component-globals-tag-browser.js",
         "./getRequirePath.js": "./getRequirePath-browser.js",
         "./init-components-tag.js": "./init-components-tag-browser.js",
         "./preserve-tag.js": "./preserve-tag-browser.js"

packages/marko/src/core-tags/components/preferred-script-location-tag.js

@@ -0,0 +1,30 @@
+"use strict";
+
+function forceScriptTagAtThisPoint(out) {
+  out.global.___isLastFlush = true;
+
+  const writer = out.writer;
+  const htmlSoFar = writer.toString();
+
+  writer.clear();
+  writer.write(htmlSoFar);
+
+  out.global.___isLastFlush = undefined;
+}
+
+module.exports = function render(input, out) {
+  if (out.isSync() === true) {
+    forceScriptTagAtThisPoint(out);
+  } else {
+    if (out.global.___clientReorderContext) {
+      out.flush();
+    }
+
+    const asyncOut = out.beginAsync({ last: true, timeout: -1 });
+    out.onLast(function(next) {
+      forceScriptTagAtThisPoint(asyncOut);
+      asyncOut.end();
+      next();
+    });
+  }
+};

packages/marko/src/core-tags/core/await/reorderer-renderer.js

@@ -11,9 +11,7 @@ module.exports = function(input, out) {
 
   var global = out.global;
 
-  out.flush();
-
-  // We have already invoked an <await-reorderer. We do not need to do this
+  // We have already invoked an <await-reorderer>. We do not need to do this
   // work again.
   if (global.__awaitReordererInvoked) {
     return;

packages/marko/src/core-tags/core/marko.json

@@ -253,6 +253,7 @@
     ]
   },
   "<await-reorderer>": {
+    "transformer": "../components/add-preferred-script-location-transformer.js",
     "renderer": "./await/reorderer-renderer"
   },
   "<*>": {

packages/marko/src/core-tags/migrate/component-globals-tag.js

@@ -0,0 +1,7 @@
+module.exports = function render(elNode, context) {
+  context.deprecate(
+    "The <component-globals> tag is deprecated. This functionality has been added to the '<init-components>' tag, you can safely remove the '<component-globals>' tag."
+  );
+
+  elNode.detach();
+};

packages/marko/src/core-tags/migrate/marko.json

@@ -221,5 +221,9 @@
   "<class>": {
     "migrator": "./class-tag",
     "open-tag-only": true
+  },
+  "<component-globals>": {
+    "migrator": "./component-globals-tag.js",
+    "deprecated": true
   }
 }