From c39411e0454750697d580a1ef4858800c494980f Mon Sep 17 00:00:00 2001 From: Helen Lin Date: Fri, 21 Jul 2023 08:23:03 -0700 Subject: [PATCH] Expose useLoadScript (#1080) --- .changeset/bright-donuts-flow.md | 6 +++ .../docs/generated/generated_docs_data.json | 42 +++++++++++++++++++ packages/hydrogen-react/src/index.ts | 1 + .../hydrogen-react/src/load-script.doc.ts | 38 +++++++++++++++++ .../src/load-script.example.jsx | 14 +++++++ .../src/load-script.example.tsx | 14 +++++++ .../docs/copy-hydrogen-react-docs.cjs | 1 + .../docs/generated/generated_docs_data.json | 42 +++++++++++++++++++ packages/hydrogen/src/index.ts | 1 + 9 files changed, 159 insertions(+) create mode 100644 .changeset/bright-donuts-flow.md create mode 100644 packages/hydrogen-react/src/load-script.doc.ts create mode 100644 packages/hydrogen-react/src/load-script.example.jsx create mode 100644 packages/hydrogen-react/src/load-script.example.tsx diff --git a/.changeset/bright-donuts-flow.md b/.changeset/bright-donuts-flow.md new file mode 100644 index 0000000000..a2834fbce3 --- /dev/null +++ b/.changeset/bright-donuts-flow.md @@ -0,0 +1,6 @@ +--- +'@shopify/hydrogen-react': patch +'@shopify/hydrogen': patch +--- + +Export useLoadScript diff --git a/packages/hydrogen-react/docs/generated/generated_docs_data.json b/packages/hydrogen-react/docs/generated/generated_docs_data.json index c6b352a4fe..7ac1e161d6 100644 --- a/packages/hydrogen-react/docs/generated/generated_docs_data.json +++ b/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
{scriptStatus === 'done' &&

Script loaded!

}
;\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
{scriptStatus === 'done' &&

Script loaded!

}
;\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", + "description": "" + } + } + } + ] + }, { "name": "parseGid", "category": "utilities", diff --git a/packages/hydrogen-react/src/index.ts b/packages/hydrogen-react/src/index.ts index ca56d4a57d..39be7bcc99 100644 --- a/packages/hydrogen-react/src/index.ts +++ b/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'; diff --git a/packages/hydrogen-react/src/load-script.doc.ts b/packages/hydrogen-react/src/load-script.doc.ts new file mode 100644 index 0000000000..034c05b63a --- /dev/null +++ b/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; diff --git a/packages/hydrogen-react/src/load-script.example.jsx b/packages/hydrogen-react/src/load-script.example.jsx new file mode 100644 index 0000000000..aac94db435 --- /dev/null +++ b/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
{scriptStatus === 'done' &&

Script loaded!

}
; +} diff --git a/packages/hydrogen-react/src/load-script.example.tsx b/packages/hydrogen-react/src/load-script.example.tsx new file mode 100644 index 0000000000..aac94db435 --- /dev/null +++ b/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
{scriptStatus === 'done' &&

Script loaded!

}
; +} diff --git a/packages/hydrogen/docs/copy-hydrogen-react-docs.cjs b/packages/hydrogen/docs/copy-hydrogen-react-docs.cjs index 9b01edeb16..8f0d29c6d5 100644 --- a/packages/hydrogen/docs/copy-hydrogen-react-docs.cjs +++ b/packages/hydrogen/docs/copy-hydrogen-react-docs.cjs @@ -10,6 +10,7 @@ const docsToCopy = [ 'ShopPayButton', 'Video', 'useMoney', + 'useLoadScript', 'useShopifyCookies', 'flattenConnection', 'getClientBrowserParameters', diff --git a/packages/hydrogen/docs/generated/generated_docs_data.json b/packages/hydrogen/docs/generated/generated_docs_data.json index 201f2ede6b..50b560dcb1 100644 --- a/packages/hydrogen/docs/generated/generated_docs_data.json +++ b/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
{scriptStatus === 'done' &&

Script loaded!

}
;\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
{scriptStatus === 'done' &&

Script loaded!

}
;\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", + "description": "" + } + } + } + ] + }, { "name": "useShopifyCookies", "category": "hooks", diff --git a/packages/hydrogen/src/index.ts b/packages/hydrogen/src/index.ts index 8a242312a6..fb92f81a1b 100644 --- a/packages/hydrogen/src/index.ts +++ b/packages/hydrogen/src/index.ts @@ -71,6 +71,7 @@ export { ShopifySalesChannel, ShopPayButton, storefrontApiCustomScalars, + useLoadScript, useMoney, useShopifyCookies, Video,