make sure to pass SSR page script as part of WCC script dependencies

[thescientist13]

Related Issue

resolves #988

rebase after #987

Summary of Changes

1. Make sure to pass SSR page as script dependency to WCC renderer

Re-point to release/0.27.0 branch?

[thescientist13]

Hmm, seems like this solution somehow duplicates the content of the custom elements rendered inside the page... :/

<tt-cast-crew>
  <div class="profiles">
    <h2 class="text-3xl text-center font-extrabold" style="margin:0 auto 25px;width: 20%;font-family:var(--font-secondary); border-top: 2px solid rgba(107, 114, 128); border-bottom: 2px solid rgba(107, 114, 128);">
      The Crew
    </h2>
    <div class="grid md:grid-cols-4 grid-cols-2">
      <div class="text-center">
        <img class="block w-20 rounded-full text-center" style="margin:0 auto" src="https://media.istockphoto.com/vectors/user-icon-flat-isolated-on-white-background-user-symbol-vector-vector-id1300845620?k=20&amp;m=1300845620&amp;s=612x612&amp;w=0&amp;h=f4XTZDAv7NPuZbG0habSpU0sNgECM0X7nbKzTUta3n8=" alt="Photo of Dave Flamand (Host)">
        <h3 class="font-bold text-center">
          Dave Flamand
        </h3>
        <h4 class="uppercase text-center text-gray-500">
          Host
        </h4>
      </div>
      <div class="text-center">
        <img class="block w-20 rounded-full text-center" style="margin:0 auto" src="https://media.istockphoto.com/vectors/user-icon-flat-isolated-on-white-background-user-symbol-vector-vector-id1300845620?k=20&amp;m=1300845620&amp;s=612x612&amp;w=0&amp;h=f4XTZDAv7NPuZbG0habSpU0sNgECM0X7nbKzTUta3n8=" alt="Photo of Owen Buckley (Producer)">
        <h3 class="font-bold text-center">
          Owen Buckley
        </h3>
        <h4 class="uppercase text-center text-gray-500">
          Producer
        </h4>
      </div>
      <div class="text-center">
        <img class="block w-20 rounded-full text-center" style="margin:0 auto" src="https://media.istockphoto.com/vectors/user-icon-flat-isolated-on-white-background-user-symbol-vector-vector-id1300845620?k=20&amp;m=1300845620&amp;s=612x612&amp;w=0&amp;h=f4XTZDAv7NPuZbG0habSpU0sNgECM0X7nbKzTUta3n8=" alt="Photo of Erika Flamand (Designer)">
        <h3 class="font-bold text-center">
          Erika Flamand
        </h3>
        <h4 class="uppercase text-center text-gray-500">
          Designer
        </h4>
      </div>
      <div class="text-center">
        <img class="block w-20 rounded-full text-center" style="margin:0 auto" src="https://media.istockphoto.com/vectors/user-icon-flat-isolated-on-white-background-user-symbol-vector-vector-id1300845620?k=20&amp;m=1300845620&amp;s=612x612&amp;w=0&amp;h=f4XTZDAv7NPuZbG0habSpU0sNgECM0X7nbKzTUta3n8=" alt="Photo of Tunesy (Mascot)">
        <h3 class="font-bold text-center">
          Tunesy
        </h3>
        <h4 class="uppercase text-center text-gray-500">
          Mascot
        </h4>
      </div>
    </div>
  </div>
  <div class="profiles">
    <h2 class="text-3xl text-center font-extrabold" style="margin:0 auto 25px;width: 20%;font-family:var(--font-secondary); border-top: 2px solid rgba(107, 114, 128); border-bottom: 2px solid rgba(107, 114, 128);">
      The Crew
    </h2>
    <div class="grid md:grid-cols-4 grid-cols-2">
      <div class="text-center">
        <img class="block w-20 rounded-full text-center" style="margin:0 auto" src="https://media.istockphoto.com/vectors/user-icon-flat-isolated-on-white-background-user-symbol-vector-vector-id1300845620?k=20&amp;m=1300845620&amp;s=612x612&amp;w=0&amp;h=f4XTZDAv7NPuZbG0habSpU0sNgECM0X7nbKzTUta3n8=" alt="Photo of Dave Flamand (Host)">
        <h3 class="font-bold text-center">
          Dave Flamand
        </h3>
        <h4 class="uppercase text-center text-gray-500">
          Host
        </h4>
      </div>
      <div class="text-center">
        <img class="block w-20 rounded-full text-center" style="margin:0 auto" src="https://media.istockphoto.com/vectors/user-icon-flat-isolated-on-white-background-user-symbol-vector-vector-id1300845620?k=20&amp;m=1300845620&amp;s=612x612&amp;w=0&amp;h=f4XTZDAv7NPuZbG0habSpU0sNgECM0X7nbKzTUta3n8=" alt="Photo of Owen Buckley (Producer)">
        <h3 class="font-bold text-center">
          Owen Buckley
        </h3>
        <h4 class="uppercase text-center text-gray-500">
          Producer
        </h4>
      </div>
      <div class="text-center">
        <img class="block w-20 rounded-full text-center" style="margin:0 auto" src="https://media.istockphoto.com/vectors/user-icon-flat-isolated-on-white-background-user-symbol-vector-vector-id1300845620?k=20&amp;m=1300845620&amp;s=612x612&amp;w=0&amp;h=f4XTZDAv7NPuZbG0habSpU0sNgECM0X7nbKzTUta3n8=" alt="Photo of Erika Flamand (Designer)">
        <h3 class="font-bold text-center">
          Erika Flamand
        </h3>
        <h4 class="uppercase text-center text-gray-500">
          Designer
        </h4>
      </div>
      <div class="text-center">
        <img class="block w-20 rounded-full text-center" style="margin:0 auto" src="https://media.istockphoto.com/vectors/user-icon-flat-isolated-on-white-background-user-symbol-vector-vector-id1300845620?k=20&amp;m=1300845620&amp;s=612x612&amp;w=0&amp;h=f4XTZDAv7NPuZbG0habSpU0sNgECM0X7nbKzTUta3n8=" alt="Photo of Tunesy (Mascot)">
        <h3 class="font-bold text-center">
          Tunesy
        </h3>
        <h4 class="uppercase text-center text-gray-500">
          Mascot
        </h4>
      </div>
    </div>
  </div>
</tt-cast-crew>

[thescientist13]

Okay, so after noticing the above where the HTML for the page only was getting duplicated twice, I found out what was happening.

When we prerender, we are doing the page SSR work twice unfortunately.
https://github.com/ProjectEvergreen/greenwood/blob/v0.26.1/packages/cli/src/lifecycles/prerender.js#L75

async function preRenderCompilationWorker(compilation, workerPrerender) {
  const pages = compilation.graph.filter(page => !page.isSSR);
  const outputDir = compilation.context.scratchDir;

  console.info('pages to generate', `\n ${pages.map(page => page.route).join('\n ')}`);

  await Promise.all(pages.map(async (page) => {
    const { outputPath, route } = page;
    const outputPathDir = path.join(outputDir, route);
    const htmlResource = compilation.config.plugins.filter((plugin) => {
      return plugin.name === 'plugin-standard-html';
    }).map((plugin) => {
      return plugin.provider(compilation);
    })[0];
    let html;

    html = (await htmlResource.serve(page.route)).body; // SSR runs once here already for the page itself
    html = (await interceptPage(compilation, html, route)).body;

    const root = htmlparser.parse(html, {
      ...
    });

    const headScripts = root.querySelectorAll('script')
      ...
    });

    await new Promise((resolve, reject) => {
      const worker = new Worker(workerPrerender.workerUrl, {
        workerData: {
          modulePath: null,
          compilation: JSON.stringify(compilation),
          route,
          prerender: true,
          htmlContents: html,
          scripts: JSON.stringify(headScripts)
        }
      });
      worker.on('message', (result) => {
        if (result.html) {
          html = result.html; // and now will run again, with the page components already having been rendered once above already
        }
        resolve();
      });
      worker.on('error', reject);
      worker.on('exit', (code) => {
        if (code !== 0) {
          reject(new Error(`Worker stopped with exit code ${code}`));
        }
      });
    });

    ....
  }));
}

So technically, by withholding the src/pages/index.js from WCC, it was not allowing those page level scripts to register, so that they wouldn't re-render while inside WCC.

The reason this seems to be setup this way is so that template level scripts, like <header> and <footer> can get a chance to render. Seems like we should only have to dip into the SSR worker once, so seems like maybe we should be trying to do it all at once in .serve?

May want to align this with the work going on in the release/0.27.0 branch which had a lot of refactoring going into it

[thescientist13]

this was resolved as part of #1212