Expose useLoadScript (#1080)

.changeset/bright-donuts-flow.md

@@ -0,0 +1,6 @@
+---
+'@shopify/hydrogen-react': patch
+'@shopify/hydrogen': patch
+---
+
+Export useLoadScript

packages/hydrogen-react/docs/generated/generated_docs_data.json

@@ -6470,6 +6470,48 @@
       }
     ]
   },
+  {
+    "name": "useLoadScript",
+    "category": "hooks",
+    "isVisualComponent": false,
+    "related": [],
+    "description": "The `useLoadScript` hook loads an external script tag in the browser. It allows React components to lazy-load third-party dependencies.",
+    "type": "hook",
+    "defaultExample": {
+      "description": "I am the default example",
+      "codeblock": {
+        "tabs": [
+          {
+            "title": "JavaScript",
+            "code": "import React, {useEffect} from 'react';\nimport {useLoadScript} from '@shopify/hydrogen-react';\n\nexport default function Homepage() {\n  const scriptStatus = useLoadScript('https://some-cdn.com/some-script.js');\n\n  useEffect(() => {\n    if (scriptStatus === 'done') {\n      // do something\n    }\n  }, [scriptStatus]);\n\n  return <div>{scriptStatus === 'done' && <p>Script loaded!</p>}</div>;\n}\n",
+            "language": "jsx"
+          },
+          {
+            "title": "TypeScript",
+            "code": "import React, {useEffect} from 'react';\nimport {useLoadScript} from '@shopify/hydrogen-react';\n\nexport default function Homepage() {\n  const scriptStatus = useLoadScript('https://some-cdn.com/some-script.js');\n\n  useEffect(() => {\n    if (scriptStatus === 'done') {\n      // do something\n    }\n  }, [scriptStatus]);\n\n  return <div>{scriptStatus === 'done' && <p>Script loaded!</p>}</div>;\n}\n",
+            "language": "tsx"
+          }
+        ],
+        "title": "Example code"
+      }
+    },
+    "definitions": [
+      {
+        "title": "Props",
+        "description": "",
+        "type": "LoadScriptParams",
+        "typeDefinitions": {
+          "LoadScriptParams": {
+            "filePath": "/load-script.tsx",
+            "syntaxKind": "TypeAliasDeclaration",
+            "name": "LoadScriptParams",
+            "value": "Parameters<typeof loadScript>",
+            "description": ""
+          }
+        }
+      }
+    ]
+  },
   {
     "name": "parseGid",
     "category": "utilities",

packages/hydrogen-react/src/index.ts

@@ -43,6 +43,7 @@ export {getShopifyCookies} from './cookies-utils.js';
 export {ExternalVideo} from './ExternalVideo.js';
 export {flattenConnection} from './flatten-connection.js';
 export {Image, IMAGE_FRAGMENT} from './Image.js';
+export {useLoadScript} from './load-script.js';
 export {MediaFile} from './MediaFile.js';
 export {ModelViewer} from './ModelViewer.js';
 export {Money} from './Money.js';

packages/hydrogen-react/src/load-script.doc.ts

@@ -0,0 +1,38 @@
+import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
+
+const data: ReferenceEntityTemplateSchema = {
+  name: 'useLoadScript',
+  category: 'hooks',
+  isVisualComponent: false,
+  related: [],
+  description:
+    'The `useLoadScript` hook loads an external script tag in the browser. It allows React components to lazy-load third-party dependencies.',
+  type: 'hook',
+  defaultExample: {
+    description: 'I am the default example',
+    codeblock: {
+      tabs: [
+        {
+          title: 'JavaScript',
+          code: './load-script.example.jsx',
+          language: 'jsx',
+        },
+        {
+          title: 'TypeScript',
+          code: './load-script.example.tsx',
+          language: 'tsx',
+        },
+      ],
+      title: 'Example code',
+    },
+  },
+  definitions: [
+    {
+      title: 'Props',
+      type: 'LoadScriptParams',
+      description: '',
+    },
+  ],
+};
+
+export default data;

packages/hydrogen-react/src/load-script.example.jsx

@@ -0,0 +1,14 @@
+import React, {useEffect} from 'react';
+import {useLoadScript} from '@shopify/hydrogen-react';
+
+export default function Homepage() {
+  const scriptStatus = useLoadScript('https://some-cdn.com/some-script.js');
+
+  useEffect(() => {
+    if (scriptStatus === 'done') {
+      // do something
+    }
+  }, [scriptStatus]);
+
+  return <div>{scriptStatus === 'done' && <p>Script loaded!</p>}</div>;
+}

packages/hydrogen-react/src/load-script.example.tsx

@@ -0,0 +1,14 @@
+import React, {useEffect} from 'react';
+import {useLoadScript} from '@shopify/hydrogen-react';
+
+export default function Homepage() {
+  const scriptStatus = useLoadScript('https://some-cdn.com/some-script.js');
+
+  useEffect(() => {
+    if (scriptStatus === 'done') {
+      // do something
+    }
+  }, [scriptStatus]);
+
+  return <div>{scriptStatus === 'done' && <p>Script loaded!</p>}</div>;
+}

packages/hydrogen/docs/copy-hydrogen-react-docs.cjs

@@ -10,6 +10,7 @@ const docsToCopy = [
   'ShopPayButton',
   'Video',
   'useMoney',
+  'useLoadScript',
   'useShopifyCookies',
   'flattenConnection',
   'getClientBrowserParameters',

packages/hydrogen/docs/generated/generated_docs_data.json

@@ -13613,6 +13613,48 @@
       }
     ]
   },
+  {
+    "name": "useLoadScript",
+    "category": "hooks",
+    "isVisualComponent": false,
+    "related": [],
+    "description": "The `useLoadScript` hook loads an external script tag in the browser. It allows React components to lazy-load third-party dependencies.",
+    "type": "hook",
+    "defaultExample": {
+      "description": "I am the default example",
+      "codeblock": {
+        "tabs": [
+          {
+            "title": "JavaScript",
+            "code": "import React, {useEffect} from 'react';\nimport {useLoadScript} from '@shopify/hydrogen';\n\nexport default function Homepage() {\n  const scriptStatus = useLoadScript('https://some-cdn.com/some-script.js');\n\n  useEffect(() => {\n    if (scriptStatus === 'done') {\n      // do something\n    }\n  }, [scriptStatus]);\n\n  return <div>{scriptStatus === 'done' && <p>Script loaded!</p>}</div>;\n}\n",
+            "language": "jsx"
+          },
+          {
+            "title": "TypeScript",
+            "code": "import React, {useEffect} from 'react';\nimport {useLoadScript} from '@shopify/hydrogen';\n\nexport default function Homepage() {\n  const scriptStatus = useLoadScript('https://some-cdn.com/some-script.js');\n\n  useEffect(() => {\n    if (scriptStatus === 'done') {\n      // do something\n    }\n  }, [scriptStatus]);\n\n  return <div>{scriptStatus === 'done' && <p>Script loaded!</p>}</div>;\n}\n",
+            "language": "tsx"
+          }
+        ],
+        "title": "Example code"
+      }
+    },
+    "definitions": [
+      {
+        "title": "Props",
+        "description": "",
+        "type": "LoadScriptParams",
+        "typeDefinitions": {
+          "LoadScriptParams": {
+            "filePath": "/load-script.tsx",
+            "syntaxKind": "TypeAliasDeclaration",
+            "name": "LoadScriptParams",
+            "value": "Parameters<typeof loadScript>",
+            "description": ""
+          }
+        }
+      }
+    ]
+  },
   {
     "name": "useShopifyCookies",
     "category": "hooks",

packages/hydrogen/src/index.ts

@@ -71,6 +71,7 @@ export {
   ShopifySalesChannel,
   ShopPayButton,
   storefrontApiCustomScalars,
+  useLoadScript,
   useMoney,
   useShopifyCookies,
   Video,