Introduce new remote renderer for shopify theme dev

[karreiro]

WHY are these changes introduced?

Fixes https://github.com/Shopify/develop-advanced-edits/issues/210

This PR introduces the module that remotely renders storefronts and will power part of the shopify theme dev logic.

WHAT is this pull request doing?

The public API introduced by this PR is:

render(session, renderContext)

Internally, the way it works is:

• theme-environment/storefront-renderer.ts - handles the rendering logic. It ensures that the request to render is authenticated, the session is refreshed*, and the required headers are being passed
• theme-environment/storefront-session.ts - handles the session/cookies creation to make sure the renderer is rendering the proper development theme with replace-templates capabilities

* This will be introduced in a following PR

How to test your changes?

This is an internal module and will be exposed by the proxy, so we need to manually call it:

• Open packages/theme/src/cli/services/dev.ts
• Replace dev with this:

async function dev(options: DevOptions) {
  outputInfo('This feature is currently in development and is not ready for use or testing yet.')

  const session: DevServerSession = {
    ...options.adminSession,
    storefrontToken: options.storefrontToken,
    storefrontPassword: 'password', // <---------------------------------------- 1. YOUR STORE PASSWORD HERE
    expiresAt: new Date(),
  }

  const response = await render(session, {
    path: '/',
    query: [],
    themeId: options.theme.id.toString(),
    cookies: '',
    sectionId: 'sections--21614098907158__announcement-bar', // <-------------- 2. YOUR SECTION ID HERE
    headers: {},
    sections: {
      'sections/announcement-bar.liquid': '<h1>== Welcome ==/h1>',
    },
  })

  // eslint-disable-next-line no-console
  console.log('-----------------------')
  // eslint-disable-next-line no-console
  console.log(response.status)
  // eslint-disable-next-line no-console
  console.log(await response.text())
  // eslint-disable-next-line no-console
  console.log('-----------------------')
}

• Run pnpm build
• Run shopify-dev theme dev --path ../dawn --dev-preview

Post-release steps

None.

Measuring impact

How do we know this change was effective? Please choose one:

• n/a - this doesn't need measurement, e.g. a linting rule or a bug-fix
• Existing analytics will cater for this addition
• PR includes analytics changes to measure impact

Checklist

• I've considered possible cross-platform impacts (Mac, Linux, Windows)
• I've considered possible documentation changes
• I've made sure that any changes to dev or deploy have been reflected in the internal flowchart.

[github-actions]

Thanks for your contribution!

Depending on what you are working on, you may want to request a review from a Shopify team:

• Themes: @shopify/advanced-edits
• UI extensions: @shopify/ui-extensions-cli
  • Checkout UI extensions: @shopify/checkout-ui-extensions-api-stewardship
• Hydrogen: @shopify/hydrogen
• Other: @shopify/app-management

[github-actions]

Coverage report

St.❔	Category	Percentage	Covered / Total
🟡	Statements	71.73%	7095/9891
🟡	Branches	68.8%	3513/5106
🟡	Functions	71.36%	1896/2657
🟡	Lines	73.01%	6680/9149

Test suite run success

1660 tests passing in 769 suites.

Report generated by 🧪jest coverage report action from 39e0f43

[github-actions]

We detected some changes at either packages/*/src or packages/cli-kit/assets/cli-ruby/** and there are no updates in the .changeset.
If the changes are user-facing, run "pnpm changeset add" to track your changes and include them in the next release CHANGELOG.

[jamesmengo]

Left a couple of comments re: clarity of some naming and for general understanding

None of which are blocking

[jamesmengo]

Thank you for the 🎩 instructions!!

[jamesmengo]

For other tophatters: this is how I found the section ID

[github-actions]

Differences in type declarations

We detected differences in the type declarations generated by Typescript for this branch compared to the baseline ('main' branch). Please, review them to ensure they are backward-compatible. Here are some important things to keep in mind:

• Some seemingly private modules might be re-exported through public modules.
• If the branch is behind main you might see odd diffs, rebase main into this branch.

New type declarations

We found no new type declarations in this PR

Existing type declarations

packages/cli-kit/dist/public/node/http.d.ts

@@ -1,6 +1,6 @@
 import FormData from 'form-data';
 import nodeFetch, { RequestInfo, RequestInit } from 'node-fetch';
-export { FetchError } from 'node-fetch';
+export { FetchError, Request } from 'node-fetch';
 /**
  * Create a new FormData object.
  *