Script and useScript #2194

juanpprieto · 2022-09-27T23:17:21Z

Description

⚠️ WIP ⚠️

This PR introduces the following

<Script /> — A script component supporting multiple loading strategies and reload.
useScript — A hook version

Additional context

useLoadScript has performance limitations due to its eager nature.

Notes

Docs def need some love. Working on it today.
There are 2 new lint rules
-- prefer-script-component
-- scripts-in-layout-components
There's a few e2e tests at playground/async-config/tests/e2e-test-cases.ts
To 🎩 you can go to the playground/async-config and the visit /scripts
Expecting feedback 🙂

Before submitting the PR, please make sure you do the following:

Read the Contributing Guidelines
Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123)
[wip] Update docs in this repository according to your change
Run yarn changeset add if this PR cause a version bump based on Keep a Changelog and adheres to Semantic Versioning

github-actions · 2022-09-27T23:22:16Z

We detected some changes in packages/*/package.json or packages/*/src, and there are no updates in the .changeset.
If the changes are user-facing and should cause a version bump, run "yarn changeset add" to track your changes and include them in the next release CHANGELOG.
If you are making simple updates to examples or documentation, you do not need to add a changeset.

juanpprieto · 2022-09-28T15:51:33Z

packages/hydrogen/src/components/Script/useScript.client.ts

+import {ScriptState, UseScriptProps} from './types.js';
+
+export function useScript(props: UseScriptProps) {
+  const {pathname} = useUrl();


@frehner — This is the only hydrogren dependency that would prevent this from being part of h-ui. We could maybe replace it with a framework agnostic hook. Any thoughts?

To be honest, I would have to see what it would look like in other frameworks and if it would actually be valuable there or not. For example, if I'm using NextJS, why would I use this over their official component?

That's a valid point but some frameworks like Remix and Gatsby don't offer a Script alternative.

I would see a lot of value in ditching this dependency. Do we need to reach for a hook here to get the pathname.

juanpprieto · 2022-09-28T15:54:14Z

packages/hydrogen/src/utilities/request-idle-callback-polyfill.ts

@@ -0,0 +1,24 @@
+// polyfill for Safari and IE
+export const requestIdleCallback =


This is nextjs's polyfill. @frehner this is another dependency to enable load="onIndle". Thoughts for a h-ui context?

juanpprieto · 2022-09-28T15:56:29Z

packages/playground/async-config/src/routes/scripts/cdn.server.jsx

@@ -0,0 +1,52 @@
+// simulate a CDN/server delivering 3rd-party scripts
+export async function api(request) {


This is only needed for e2e tests

blittle · 2022-09-28T20:20:25Z

docs/components/primitive/script.md

+| Name           | Type                                             | Description                                                                                                                                                                                          |
+| -------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `target`           | <code>"head" \| "body" (default)</code>      | The target DOM element where the script should be inserted. This feature is only available to non-inline loading strategies such as "afterHydration", "inWorker" and "onIdle"  |
+| `id`            | <code>string (required)</code>                              | A unique identifier for the script. The id will be used as the key of the script. |


If id is required, shouldn't it be in the above example?

cartogram · 2022-09-29T08:41:46Z

docs/components/primitive/script.md

+
+### `beforeHydration`
+
+These scripts are inlined and hence considered render-blocking. This strategy is mainly recommended for scripts aiming to set global `window` properties, configurations or event listeners. These scripts can only be included in `App.server.tsx`. This ensures that they are run on any initial route.


Suggested change

These scripts are inlined and hence considered render-blocking. This strategy is mainly recommended for scripts aiming to set global `window` properties, configurations or event listeners. These scripts can only be included in `App.server.tsx`. This ensures that they are run on any initial route.

Scripts using the `beforeHydration` strategy are inlined and render-blocking. This strategy is only recommended for scripts that set global `window` properties, configurations or event listeners. These scripts can only be included in `App.server.tsx`, which ensures they are run on any initial route.

#The that after ensures is correct, let's put it back in!

To @cartogram's edit, would add an Oxford comma between configurations and event listeners

Verify throughout that you're using the Oxford comma

cartogram · 2022-09-29T08:44:20Z

docs/components/primitive/script.md

+
+### `afterHydration`
+
+These scripts are loaded, injected and run after react has finished hydrating on the client (via a useEffect). In addition, these scripts include additional props to further customize their behavior `target`, `reload`, `onLoad`, `onReady` and `onError` callbacks.


Suggested change

These scripts are loaded, injected and run after react has finished hydrating on the client (via a useEffect). In addition, these scripts include additional props to further customize their behavior `target`, `reload`, `onLoad`, `onReady` and `onError` callbacks.

Scripts using the `afterHydration` strategy are loaded, injected and run after React has finished hydrating on the client (via a `useEffect`). In addition, these scripts accept props to further customize the behavior of the `target`, `reload`, `onLoad`, `onReady` and `onError` callbacks.

The beforeHydration strategy gives an example how or why it would be used. Maybe provide the same for afterHydration.

cartogram · 2022-09-29T08:46:06Z

docs/components/primitive/script.md

+      <Script
+        id="oi-children-reload"
+        load="afterHydration"
+        reload={true}


Suggested change

reload={true}

reload

Make this change for all of these I think.

cartogram · 2022-09-29T08:46:18Z

docs/components/primitive/script.md

+        id="oi-src-reload"
+        src="//example.com/script.js"
+        load="afterHydration"
+        reload={true}


Suggested change

reload={true}

reload

cartogram · 2022-09-29T08:46:41Z

docs/components/primitive/script.md

+        src="//example.com/script.js"
+      />
+
+      // with a src and with reload


Suggested change

// with a src and with reload

// with a src and reload

cartogram · 2022-09-29T08:48:07Z

docs/components/primitive/script.md

+
+      // with a src
+      <Script
+        id="oi-src"


Suggested change

id="oi-src"

id="ah-src"

cartogram · 2022-09-29T08:48:17Z

docs/components/primitive/script.md

+
+      // with a src and with reload
+      <Script
+        id="oi-src-reload"


Suggested change

id="oi-src-reload"

id="ah-src-reload"

cartogram · 2022-09-29T08:48:26Z

docs/components/primitive/script.md

+
+      // with callbacks
+      <Script
+        id="oi-src-cbs"


Suggested change

id="oi-src-cbs"

id="ah-src-cbs"

cartogram · 2022-09-29T08:49:34Z

docs/components/primitive/script.md

+
+### `onIdle`
+
+These scripts are loaded, injected and run when the main thread is idle (via requestIdleCallback). In addition, these scripts include additional props to further customize their behavior `target`, `reload`, `onLoad`, `onReady` and `onError` callbacks.


If you end up making the suggestions above, please apply them to this paragraph as well.

cartogram · 2022-09-29T08:52:07Z

docs/components/primitive/script.md

+    <>
+     // Loading google analytics.js via a web worker
+      <Script
+        id="inWorker-analytics"


Suggested change

id="inWorker-analytics"

id="iw-analytics"

I don't really care how these IDs are named as long as it is consistent.

davidhousedev · 2022-09-29T11:46:22Z

Just read through the docs, super exciting!!!

It seems like there are a lot of different loading strategies for different use cases but I don't have a clear sense which one I should use when. In other words, are there any heuristics I should consider when setting the loading strategy for a given script?

blittle · 2022-09-29T14:42:50Z

docs/components/primitive/script.md

+| `src`            | <code>string</code>                              | A URL string. This string can be an absolute path or a relative path depending on the location of the third-party script. The `src` prop is required if `dangerouslySetInnerHTML` or `children` are not used |
+| `dangerouslySetInnerHTML` | <code>string</code> | Any valid javascript code |
+| `children` | <code>string \| string[]</code> | Any valid javascript code |
+| `load`          | <code>"beforeHydration" \| "afterHydration" (default) \| "inWorker" \| "onIdle"</code>| The loading strategy. See Loading strategies for more info. |


I think we might want to bikeshed these strategy names

blittle · 2022-09-29T15:25:38Z

docs/components/primitive/script.md

+    response = new Response(body, {
+      headers: {
+        'content-type': contentType,
+        'Access-Control-Allow-Origin': url.origin,


Is an Access-Control-Allow_Origin header necessary? Just by going through the proxy we are already on the same domain right?

rennyG

Looks good, @juanpprieto! Just some style/organization/copy nits. After you address the comments, I'll take another pass and 🎩 on .dev

rennyG · 2022-09-28T14:49:31Z

docs/components/primitive/script.md

+---
+gid: 5848138c-3dbb-11ed-b878-0242ac120002
+title: Script
+description: The Script component renders a script tag


Suggested change

description: The Script component renders a script tag

description: The Script component renders a script tag.

rennyG · 2022-09-28T14:49:48Z

docs/components/primitive/script.md

+<aside class="note beta">
+<h4>Experimental feature</h4>
+
+<p>Hydrogen Script is an experimental feature. As a result, functionality is subject to change. You can provide feedback on this feature by <a href="https://github.com/Shopify/hydrogen/issues">submitting an issue in GitHub</a>.</p>


Suggested change

<p>Hydrogen Script is an experimental feature. As a result, functionality is subject to change. You can provide feedback on this feature by <a href="https://github.com/Shopify/hydrogen/issues">submitting an issue in GitHub</a>.</p>

<p>The `Script` component is an experimental feature. As a result, functionality is subject to change. You can provide feedback on this feature by <a href="https://github.com/Shopify/hydrogen/issues">submitting an issue in GitHub</a>.</p>

rennyG · 2022-09-29T13:58:01Z

docs/components/primitive/script.md

+
+</aside>
+
+The `Script` component is an enhanced HTML [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) element. Script enables efficient loading third-party scripts by offering different loading strategies within the application lifecycle.


Suggested change

The `Script` component is an enhanced HTML [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) element. Script enables efficient loading third-party scripts by offering different loading strategies within the application lifecycle.

The `Script` component is an enhanced HTML [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) element. It offers different loading strategies within the application lifecycle. Use `Script` to load third-party scripts efficiently.

Maybe a use case here, like a for example, to help orient partners on when to use.

rennyG · 2022-09-29T13:59:14Z

docs/components/primitive/script.md

+
+## Example code
+
+Load google analytics only after react has finished hydrating on the client. "afterHydration" is the default loading strategy


Suggested change

Load google analytics only after react has finished hydrating on the client. "afterHydration" is the default loading strategy

Load Google Analytics only after React has finished hydrating on the client. 'afterHydration' is the default loading strategy.

Throughout, review for correct capitalization on Google

rennyG · 2022-09-29T13:59:46Z

docs/components/primitive/script.md

+
+Load google analytics only after react has finished hydrating on the client. "afterHydration" is the default loading strategy
+
+{% codeblock file, filename: 'App.server.jsx' %}


Suggested change

{% codeblock file, filename: 'App.server.jsx' %}

{% codeblock file, filename: 'App.server.jsx' %}

hypo-nit. Just a linting thing on the shopify-dev repo. Would apply throughout

rennyG · 2022-09-29T15:13:52Z

docs/hooks/primitive/usescript.md

+| `id`     | Yes      | A unique identifier for the script tag                                                                             |
+| `url`     | Yes      | The URL string for the external script.                                                                             |
+| `target`           | <code>"head" \| "body" (default)</code>      | The target DOM element where the script should be inserted. This feature is only available to non-inline loading strategies such as
+| `load`          | <code>"afterHydration" (default) \| "onIdle"</code>| The loading strategy. See loading strategies [`section`](https://shopify.dev/api/hydrogen/components/primitive/script#loading-strategies) for more info. |


Suggested change

| `load` | <code>"afterHydration" (default) \| "onIdle"</code>| The loading strategy. See loading strategies [`section`](https://shopify.dev/api/hydrogen/components/primitive/script#loading-strategies) for more info. |

| `load` | <code>"afterHydration" (default) \| "onIdle"</code>| The loading strategy. For more information, refer to [loading strategies](https://shopify.dev/api/hydrogen/components/primitive/script#loading-strategies).|

Not sure, but looks like you'd edit this so that the link is over loading strategies.

rennyG · 2022-09-29T15:14:45Z

docs/hooks/primitive/usescript.md

+| `url`     | Yes      | The URL string for the external script.                                                                             |
+| `target`           | <code>"head" \| "body" (default)</code>      | The target DOM element where the script should be inserted. This feature is only available to non-inline loading strategies such as
+| `load`          | <code>"afterHydration" (default) \| "onIdle"</code>| The loading strategy. See loading strategies [`section`](https://shopify.dev/api/hydrogen/components/primitive/script#loading-strategies) for more info. |
+| `reload`         | <code>boolean (default false)</code> | Scripts rendered with this option will be reloaded after every page navigation (if available on the next route). This option is only available in "afterHydration" and "onIdle" loading strategies. |


Suggested change

| `reload` | <code>boolean (default false)</code> | Scripts rendered with this option will be reloaded after every page navigation (if available on the next route). This option is only available in "afterHydration" and "onIdle" loading strategies. |

| `reload` | <code>boolean (default `false`)</code> | Scripts rendered with this option are reloaded after every page navigation (if available on the next route). This option is only available in "afterHydration" and "onIdle" loading strategies. |

can apply the previous edits here. Code formatting, links, tightening up the phrase (if acceptable).

rennyG · 2022-09-29T15:15:33Z

docs/hooks/primitive/usescript.md

+
+## Return value
+
+The `useLoadScript` hook returns the following values that allow you to understand the state of the external script you are loading:


Suggested change

The `useLoadScript` hook returns the following values that allow you to understand the state of the external script you are loading:

The `useLoadScript` hook returns the following values for understanding the state of the external script that you're loading:

verify contraction use throughout

rennyG · 2022-09-29T15:15:41Z

docs/hooks/primitive/usescript.md

+| `load`          | <code>"afterHydration" (default) \| "onIdle"</code>| The loading strategy. See loading strategies [`section`](https://shopify.dev/api/hydrogen/components/primitive/script#loading-strategies) for more info. |
+| `reload`         | <code>boolean (default false)</code> | Scripts rendered with this option will be reloaded after every page navigation (if available on the next route). This option is only available in "afterHydration" and "onIdle" loading strategies. |
+
+## Return value


Suggested change

## Return value

## Return values

rennyG · 2022-09-29T15:15:57Z

docs/hooks/primitive/usescript.md

+
+| Value     | Description                                                                                                                                     |
+| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| `loading` | The script is still loading. For example, the script tag can be on the page but the resource might not be fully loaded yet while in this state. |


Suggested change

| `loading` | The script is still loading. For example, the script tag can be on the page but the resource might not be fully loaded yet while in this state. |

| `loading` | The script is still loading. For example, the script tag can be on the page but the resource might not be fully loaded yet. |

cartogram · 2022-09-30T02:08:41Z

packages/eslint-plugin/src/rules/prefer-script-component/tests/prefer-script-component.test.ts

+        ],
+      }
+    : {};
+  // console.log({suggestions});


cartogram · 2022-09-30T02:10:18Z

packages/hydrogen/CHANGELOG.md

@@ -325,7 +325,7 @@ If your Store is based on the "Demo Store" tempate, and you are using the `test:
  } from '@shopify/hydrogen/platforms';

  // Platform entry handler
-  export default function(request) {
+  export default function (request) {


cartogram · 2022-09-30T02:19:33Z

packages/hydrogen/src/components/Script/loadScriptOnIdle.ts

+  }
+
+  /*
+    If we are not loading and have and exiting idle callback and


Suggested change

If we are not loading and have and exiting idle callback and

If we are not loading and exiting idle callback and

cartogram · 2022-09-30T02:34:19Z

packages/hydrogen/src/components/Script/loadScript.ts

+  const hasLoaded = key && LoadCache.has(key);
+
+  // track last pathname
+  PrevPathCache.set(key, pathname);


Only bother doing this if it pathnameChanged.

cartogram · 2022-09-30T02:36:10Z

packages/hydrogen/src/components/Script/loadScript.ts

+    reload = false,
+  } = props;
+
+  const key = (id ?? '') + (src ?? '');


Suggested change

const key = (id ?? '') + (src ?? '');

const key = `${id}${key}`

Should be fine given your types.

cartogram · 2022-09-30T03:03:54Z

packages/hydrogen/src/components/Script/loadScriptOnIdle.ts

+*/
+export function loadScriptOnIdle(
+  props: ScriptProps,
+  cb: (status: boolean) => void = () => {}


What do you think about passing the entire ScriptResponse to the call back?

cartogram · 2022-09-30T03:11:01Z

packages/hydrogen/src/components/Script/loadScript.ts

+        : '';
+  }
+
+  // Spread <Script /> props as <scrip /> attributes


Suggested change

// Spread <Script /> props as <scrip /> attributes

// Pass <Script /> component props as <script /> tag attributes if they are valid HTML attributes

cartogram · 2022-09-30T03:11:35Z

packages/hydrogen/src/components/Script/loadScript.ts

+  }
+
+  /*
+    marks this script to be loaded by partytown inWorker


Suggested change

marks this script to be loaded by partytown inWorker

marks this script to be loaded by PartyTown inWorker

cartogram · 2022-09-30T03:11:43Z

packages/hydrogen/src/components/Script/loadScript.ts

+      continue;
+    }
+
+    // map react props to DOM attribute names


Suggested change

// map react props to DOM attribute names

// map React props to DOM attribute names

cartogram · 2022-09-30T03:13:02Z

packages/hydrogen/src/components/Script/loadScript.ts

+    } else {
+      return Promise.resolve({
+        status: false,
+        event: 'Script load promise not found',


I think we can be more consistent and helpful with these events. I'm not yet sure how they are meant to be used.

cartogram

A few more comments on files I didn't get around to reviewing on the first pass, but overall this is looking really great!

In the future, I would have loved to see this broken up in PRs that are a fraction of the size. Lint rules and such can always come in subsequent PRs to make things more palatable for reviewers and overall less risky 🙂 I know this was a beast of a feature and appreciate all the work you put in to get this to this point! ❤️

cartogram · 2022-10-10T13:26:08Z

...c/rules/no-script-callbacks-in-server-components/no-script-callbacks-in-server-components.ts

+    docs: {
+      description: `Prevent using ${new (Intl as any).ListFormat('en').format(
+        SCRIPT_CALLBACKS
+      )} <Script /> callback(s) in server components`,


Suggested change

)} <Script /> callback(s) in server components`,

)} <Script /> callbacks in server components`,

cartogram · 2022-10-10T13:32:00Z

...c/rules/no-script-callbacks-in-server-components/no-script-callbacks-in-server-components.ts

+
+        context.report({
+          node,
+          data: {callback: callbackAttributes.join(', ')},


instead of join, what about using the same ListFormat niceness from above. IE:

new (Intl as any).ListFormat('en').format( callbackAttributes )

cartogram · 2022-10-10T13:33:24Z

...c/rules/no-script-callbacks-in-server-components/no-script-callbacks-in-server-components.ts

+  meta: {
+    type: 'problem',
+    docs: {
+      description: `Prevent using ${new (Intl as any).ListFormat('en').format(


do we still need the any? We may have updated the typings since I added the other rules.

cartogram · 2022-10-10T13:35:44Z

...script-callbacks-in-server-components/tests/no-script-callbacks-in-server-components.test.ts

+
+        function ServerComponent() {
+          return (
+            <Script onReady={() => {}} onLoad={() => {}} onError />


Can we also test multiple Script components in the same Component.

cartogram · 2022-10-10T13:36:40Z

...script-callbacks-in-server-components/tests/no-script-callbacks-in-server-components.test.ts

+          return <Script onError={() => {}} />;
+        }
+      `,
+        filename: 'ServerComponent.client.tsx',


Adds tests for multiple callbacks and multiple components.

cartogram · 2022-10-10T13:47:37Z

packages/eslint-plugin/src/rules/prefer-script-component/README.md

@@ -0,0 +1,31 @@
+# Prefer using the `Script` component instead of HTML `script` tags
+
+Scripts loaded at the wrong time can negatively [Core Web Vital](https://web.dev/vitals/) that [Google uses in search ranking](https://developers.google.com/search/blog/2020/05/evaluating-page-experience) performance.


I think we can use this opportunity to educate the user more on what the "wrong time" means, ie: not blocking the main thread, workers, partytown, etc... I know this information is written extensively elsewhere in our docs so not expecting an MDN article on the subject, but just a few sentences to drive home the value of why this rule exists (with links) would be awesome. Also, I might even add like a "Additional resources" heading at the bottom. Thoughts?

cc @rennyG

yep I think that's a great idea. If this is written extensively elsewhere, could consider linking out to those pages for devs that want to learn more

cartogram · 2022-10-10T13:56:11Z

packages/eslint-plugin/src/rules/prefer-script-component/docs/details.md

@@ -0,0 +1,3 @@
+## Rule details


🔥 this whole directory

cartogram · 2022-10-10T14:09:18Z

packages/eslint-plugin/src/rules/scripts-in-layout-components/examples/App.server.tsx

@@ -0,0 +1,14 @@
+// Examples of **correct** code for this rule:


delete this directory too. Lets move everything to a single Readme for each rule.

cartogram · 2022-10-10T14:15:17Z

packages/eslint-plugin/src/rules/scripts-in-layout-components/scripts-in-layout-components.ts

+import {createRule} from '../../utilities';
+
+const SCRIPT_TAG_NAME = 'Script';
+// TODO: adapt to other frameworks (e.g. Next.js requires beforeInteractive @ `pages/_document.js`)


cartogram · 2022-10-10T14:16:28Z

...int-plugin/src/rules/scripts-in-layout-components/tests/scripts-in-layout-components.test.ts

+});
+
+function error(options: {suggestion?: string; messageId?: string} = {}) {
+  console.log(options);


frandiox · 2022-10-11T07:58:53Z

packages/hydrogen/src/components/Script/ScriptBeforeHydration.tsx

+      <script
+        key={id + js.slice(0, 24)}
+        {...props}
+        suppressHydrationWarning


Curious, why is it a mismatch in this case?

frandiox · 2022-10-11T08:15:08Z

packages/hydrogen/src/components/Script/loadScript.ts

+  if (load === 'inWorker') {
+    script.setAttribute('type', 'text/partytown');
+  }


Can we somehow notify if this is set but Partytown is not installed? Like, is there anything in window. we can check of similar?

juanpprieto added 19 commits August 11, 2022 18:10

initial Script scaffold

8a7f93c

Add script examples refactor strategies

0ea6916

improve types, refactor Script

ece42cb

Improve types and refactor Script

ba75029

migrate from strategy to load, tests and refactoring

ab5b61b

Add Script and useScript eslint rules

3654c6a

refactor, cleanup and test Script(s) and loadScript(s)

4c76136

add useScript

6f0e64b

update experimental export

a385d99

Add Script and useScript playground routes for e2e tests

fce62a4

add Script and useScript e2e tests

645ba78

add Script and useScript docs

5f8258d

remove experimental

9528a01

move Script to components

8aed11d

update script docs

d034a82

ignore Script lint rules in test routes

538ad4d

fix Script error in App.server.tsx, update partytown snippet

624cb4d

temporarily export Script from index

282b3f7

Merge branch 'v1.x-2022-07' into @juanpprieto/Script

5feac32

github-actions bot deployed to preview September 27, 2022 23:24 View deployment

juanpprieto added 2 commits September 27, 2022 16:26

re-enable all e2e tests

f742bad

fix lint warning

062b3b7

github-actions bot deployed to preview September 27, 2022 23:47 View deployment

"fix" linting for CHANGELOG

f05677f

github-actions bot deployed to preview September 28, 2022 00:11 View deployment

juanpprieto added 4 commits September 27, 2022 23:35

fix lint warnings

0685b42

move Script e2e test to async-config

afe07f6

remove tmp Script export

dc2ade1

fix lint

1d02f69

github-actions bot deployed to preview September 28, 2022 06:54 View deployment

frandiox mentioned this pull request Sep 28, 2022

Fix @shopify/hydrogen/experimental imports #2198

Merged

4 tasks

juanpprieto requested a review from a team September 28, 2022 14:51

juanpprieto commented Sep 28, 2022

View reviewed changes

cleanup unnecessary async/await

56341a1

github-actions bot deployed to preview September 28, 2022 16:02 View deployment

blittle reviewed Sep 28, 2022

View reviewed changes

cartogram reviewed Sep 29, 2022

View reviewed changes

blittle reviewed Sep 29, 2022

View reviewed changes

rennyG reviewed Sep 29, 2022

View reviewed changes

cartogram reviewed Sep 30, 2022

View reviewed changes

cartogram reviewed Oct 10, 2022

View reviewed changes

frandiox reviewed Oct 11, 2022

View reviewed changes

blittle mentioned this pull request Nov 29, 2022

Script component Shopify/hydrogen#38

Closed

		@@ -0,0 +1,24 @@
		// polyfill for Safari and IE
		export const requestIdleCallback =

		@@ -0,0 +1,52 @@
		// simulate a CDN/server delivering 3rd-party scripts
		export async function api(request) {


		### `beforeHydration`

		These scripts are inlined and hence considered render-blocking. This strategy is mainly recommended for scripts aiming to set global `window` properties, configurations or event listeners. These scripts can only be included in `App.server.tsx`. This ensures that they are run on any initial route.

	These scripts are inlined and hence considered render-blocking. This strategy is mainly recommended for scripts aiming to set global `window` properties, configurations or event listeners. These scripts can only be included in `App.server.tsx`. This ensures that they are run on any initial route.
	Scripts using the `beforeHydration` strategy are inlined and render-blocking. This strategy is only recommended for scripts that set global `window` properties, configurations or event listeners. These scripts can only be included in `App.server.tsx`, which ensures they are run on any initial route.


		### `afterHydration`

		These scripts are loaded, injected and run after react has finished hydrating on the client (via a useEffect). In addition, these scripts include additional props to further customize their behavior `target`, `reload`, `onLoad`, `onReady` and `onError` callbacks.

	These scripts are loaded, injected and run after react has finished hydrating on the client (via a useEffect). In addition, these scripts include additional props to further customize their behavior `target`, `reload`, `onLoad`, `onReady` and `onError` callbacks.
	Scripts using the `afterHydration` strategy are loaded, injected and run after React has finished hydrating on the client (via a `useEffect`). In addition, these scripts accept props to further customize the behavior of the `target`, `reload`, `onLoad`, `onReady` and `onError` callbacks.


		### `onIdle`

		These scripts are loaded, injected and run when the main thread is idle (via requestIdleCallback). In addition, these scripts include additional props to further customize their behavior `target`, `reload`, `onLoad`, `onReady` and `onError` callbacks.

	description: The Script component renders a script tag
	description: The Script component renders a script tag.

	<p>Hydrogen Script is an experimental feature. As a result, functionality is subject to change. You can provide feedback on this feature by <a href="https://github.com/Shopify/hydrogen/issues">submitting an issue in GitHub</a>.</p>
	<p>The `Script` component is an experimental feature. As a result, functionality is subject to change. You can provide feedback on this feature by <a href="https://github.com/Shopify/hydrogen/issues">submitting an issue in GitHub</a>.</p>


		</aside>

		The `Script` component is an enhanced HTML [`<script>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) element. Script enables efficient loading third-party scripts by offering different loading strategies within the application lifecycle.


		## Example code

		Load google analytics only after react has finished hydrating on the client. "afterHydration" is the default loading strategy


		Load google analytics only after react has finished hydrating on the client. "afterHydration" is the default loading strategy

		{% codeblock file, filename: 'App.server.jsx' %}

	\| `load` \| <code>"afterHydration" (default) \\| "onIdle"</code>\| The loading strategy. See loading strategies [`section`](https://shopify.dev/api/hydrogen/components/primitive/script#loading-strategies) for more info. \|
	\| `load` \| <code>"afterHydration" (default) \\| "onIdle"</code>\| The loading strategy. For more information, refer to [loading strategies](https://shopify.dev/api/hydrogen/components/primitive/script#loading-strategies).\|

	\| `reload` \| <code>boolean (default false)</code> \| Scripts rendered with this option will be reloaded after every page navigation (if available on the next route). This option is only available in "afterHydration" and "onIdle" loading strategies. \|
	\| `reload` \| <code>boolean (default `false`)</code> \| Scripts rendered with this option are reloaded after every page navigation (if available on the next route). This option is only available in "afterHydration" and "onIdle" loading strategies. \|


		## Return value

		The `useLoadScript` hook returns the following values that allow you to understand the state of the external script you are loading:

	\| `loading` \| The script is still loading. For example, the script tag can be on the page but the resource might not be fully loaded yet while in this state. \|
	\| `loading` \| The script is still loading. For example, the script tag can be on the page but the resource might not be fully loaded yet. \|

	If we are not loading and have and exiting idle callback and
	If we are not loading and exiting idle callback and

	const key = (id ?? '') + (src ?? '');
	const key = `${id}${key}`

	// Spread <Script /> props as <scrip /> attributes
	// Pass <Script /> component props as <script /> tag attributes if they are valid HTML attributes

	marks this script to be loaded by partytown inWorker
	marks this script to be loaded by PartyTown inWorker

Script and useScript #2194

Are you sure you want to change the base?

Script and useScript #2194

Conversation

juanpprieto commented Sep 27, 2022 • edited Loading

Description

Additional context

Notes

Before submitting the PR, please make sure you do the following:

github-actions bot commented Sep 27, 2022

Choose a reason for hiding this comment

frehner Sep 28, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

davidhousedev commented Sep 29, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rennyG left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cartogram left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

juanpprieto commented Sep 27, 2022 •

edited

Loading

frehner Sep 28, 2022 •

edited

Loading

	// map react props to DOM attribute names
	// map React props to DOM attribute names

	)} <Script /> callback(s) in server components`,
	)} <Script /> callbacks in server components`,

		@@ -0,0 +1,31 @@
		# Prefer using the `Script` component instead of HTML `script` tags

		Scripts loaded at the wrong time can negatively [Core Web Vital](https://web.dev/vitals/) that [Google uses in search ranking](https://developers.google.com/search/blog/2020/05/evaluating-page-experience) performance.

		@@ -0,0 +1,14 @@
		// Examples of correct code for this rule: