diff --git a/packages/create-sitecore-jss/src/templates/nextjs/package.json b/packages/create-sitecore-jss/src/templates/nextjs/package.json index 4d57f57d70..ff9fd833b9 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs/package.json +++ b/packages/create-sitecore-jss/src/templates/nextjs/package.json @@ -29,7 +29,7 @@ }, "license": "Apache-2.0", "dependencies": { - "@sitecore-feaas/clientside": "^0.4.4", + "@sitecore-feaas/clientside": "~0.4.11", "@sitecore/components": "~1.0.19", "@sitecore-jss/sitecore-jss-nextjs": "~21.6.0-canary", "graphql": "~15.8.0", diff --git a/packages/create-sitecore-jss/src/templates/nextjs/src/byoc/index.client.tsx b/packages/create-sitecore-jss/src/templates/nextjs/src/byoc/index.client.tsx index ef61cec5de..299490633f 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs/src/byoc/index.client.tsx +++ b/packages/create-sitecore-jss/src/templates/nextjs/src/byoc/index.client.tsx @@ -1,22 +1,29 @@ import * as FEAAS from '@sitecore-feaas/clientside/react'; -import React from 'react'; -import { ComponentProps } from 'react'; /** - * Below are built-in JSS imports. These should be available in Pages, if a license required for specific components is present - * Any built-in import can be removed if not used. + * Below are Sitecore default BYOC components. Included components will be available in Pages and Components apps out of the + * box for convenience. It is advised to comment out unused components when application is ready for production + * to reduce javascript bundle size. */ -// SitecoreForm component which enables Forms for XM Cloud functionality. Requires a license to be available in Pages. +// SitecoreForm component displays forms created in XM Forms as individual components to be embedded into Pages. // Sitecore Forms for Sitecore XP are still available separately via @sitecore-jss-forms package import '@sitecore/components/form'; /** * End of built-in JSS imports - * You can import your own client component below, for example + * You can import your own client component below + * @example * import './MyClientComponent'; + * @example + * import 'src/otherFolder/MyOtherComponent'; */ -// An important boilerplate component that prevents BYOC components from being optimized away. Should be kept in this file. -// eslint-disable-next-line @typescript-eslint/no-explicit-any -const DefaultExport = (props: ComponentProps) => FEAAS.ExternalComponent(props) || <>; -export default DefaultExport; +// An important boilerplate component that prevents BYOC components from being optimized away and allows then. Should be kept in this file. +const ClientsideComponent = (props: FEAAS.ExternalComponentProps) => FEAAS.ExternalComponent(props); +/** + * Clientside BYOC component will be rendered in the browser, so that external components: + * - Can have access to DOM apis, including network requests + * - Use clientside react hooks like useEffect. + * - Be implemented as web components. +*/ +export default ClientsideComponent; diff --git a/packages/create-sitecore-jss/src/templates/nextjs/src/byoc/index.hybrid.ts b/packages/create-sitecore-jss/src/templates/nextjs/src/byoc/index.hybrid.ts index 02c45b0836..229ce32572 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs/src/byoc/index.hybrid.ts +++ b/packages/create-sitecore-jss/src/templates/nextjs/src/byoc/index.hybrid.ts @@ -1,8 +1,9 @@ /** - * You can import your own hybrid (server render + hydration) components below, for example - * import './MyNewComponent'; - * or - * import 'src/otherFolder/MyOtherComponent + * You can import your own hybrid (server render + hydration) components below + * @example + * import './MyHybridComponent'; + * @example + * import 'src/otherFolder/MyOtherComponent'; */ // eslint-disable-next-line import/no-anonymous-default-export diff --git a/packages/create-sitecore-jss/src/templates/nextjs/src/byoc/index.ts b/packages/create-sitecore-jss/src/templates/nextjs/src/byoc/index.ts index 606450504f..877590cc3c 100644 --- a/packages/create-sitecore-jss/src/templates/nextjs/src/byoc/index.ts +++ b/packages/create-sitecore-jss/src/templates/nextjs/src/byoc/index.ts @@ -1,17 +1,20 @@ -// This is an out-of-box bundler for External components (BYOC) -// It enables registering components in client-only or SSR/hybrid contexts -// It's recommended to not modify this file - please add BYOC imports in corresponding index.*.ts files instead +import * as FEAAS from '@sitecore-feaas/clientside/react'; +/** + * This is an out-of-box bundler for External components (BYOC) (see Sitecore documentation for more details) + * It enables registering components in client-only or SSR/hybrid contexts + * It's recommended to not modify this file - please add BYOC imports in corresponding index.*.ts files instead + */ // Import your client-only components via client-bundle. Nextjs's dynamic() call will ensure they are only rendered client-side import dynamic from 'next/dynamic'; const ClientBundle = dynamic(() => import('./index.client'), { ssr: false, }); +FEAAS.enableNextClientsideComponents(dynamic, ClientBundle); -// Import your SSR/hybrid components via index.hybrid.ts +// Import your hybrid (server rendering with client hydration) components via index.hybrid.ts import './index.hybrid'; // As long as client bundle is exported and rendered on page (as an empty element), client-only BYOC components are registered and become available // The rest of components will be regsitered in both server and client-side contexts when this module is imported into Layout -export default ClientBundle; - \ No newline at end of file +export default FEAAS.ExternalComponentBundle; diff --git a/packages/sitecore-jss-react/package.json b/packages/sitecore-jss-react/package.json index 9f3bbff340..6a0fd5e876 100644 --- a/packages/sitecore-jss-react/package.json +++ b/packages/sitecore-jss-react/package.json @@ -27,7 +27,7 @@ "url": "https://github.com/sitecore/jss/issues" }, "devDependencies": { - "@sitecore-feaas/clientside": "^0.4.4", + "@sitecore-feaas/clientside": "0.4.12", "@types/chai": "^4.3.4", "@types/chai-string": "^1.4.2", "@types/deep-equal": "^1.0.1", @@ -58,7 +58,7 @@ "typescript": "~4.9.3" }, "peerDependencies": { - "@sitecore-feaas/clientside": "^0.4.4", + "@sitecore-feaas/clientside": "~0.4.12", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/yarn.lock b/yarn.lock index 9e8720e17d..917289b4c6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6215,8 +6215,8 @@ __metadata: linkType: hard "@rjsf/utils@npm:*": - version: 5.13.1 - resolution: "@rjsf/utils@npm:5.13.1" + version: 5.13.2 + resolution: "@rjsf/utils@npm:5.13.2" dependencies: json-schema-merge-allof: ^0.8.1 jsonpointer: ^5.0.1 @@ -6225,7 +6225,7 @@ __metadata: react-is: ^18.2.0 peerDependencies: react: ^16.14.0 || >=17 - checksum: bbdb6b7e8b8bb1b868f8fbab996e34e90de8552d7c9a706a05e4f2b323d5c4dd0a273677b2b38261e61fe4ca1cf586c4974954c3ac674cd79ceb1c90bd5bdbc3 + checksum: 06834669205fa0429355f04fc551986ca6899c7b656feb2f2f0477c02e6da625bf198bd292b06e703e2c029436d899a2c802fe28d1bfe5017b2a2d016a361180 languageName: node linkType: hard @@ -6433,14 +6433,14 @@ __metadata: languageName: node linkType: hard -"@sitecore-feaas/clientside@npm:^0.4.4": - version: 0.4.4 - resolution: "@sitecore-feaas/clientside@npm:0.4.4" +"@sitecore-feaas/clientside@npm:0.4.12": + version: 0.4.12 + resolution: "@sitecore-feaas/clientside@npm:0.4.12" dependencies: - "@sitecore/byoc": ^0.1.3 + "@sitecore/byoc": ^0.1.10 peerDependencies: react-dom: ">=16.8.0" - checksum: 7704a1a18729c49c52e6a73ed2dd6418f2507265c439e5b6564325228b24a18a8414109efcf63c3f94520b96b3a7369308a388536e900071529ff347038123de + checksum: 018433bf57a9e57e31b94bf2a4a5d5e5a768cd653490776507d4f4ca7dcd20bf45de287db92a50d46c73132fdfe93fcf375b0570b3a9c6d64490cef45741ad2b languageName: node linkType: hard @@ -6770,7 +6770,7 @@ __metadata: version: 0.0.0-use.local resolution: "@sitecore-jss/sitecore-jss-react@workspace:packages/sitecore-jss-react" dependencies: - "@sitecore-feaas/clientside": ^0.4.4 + "@sitecore-feaas/clientside": 0.4.12 "@sitecore-jss/sitecore-jss": 21.6.0-canary.10 "@types/chai": ^4.3.4 "@types/chai-string": ^1.4.2 @@ -6804,7 +6804,7 @@ __metadata: ts-node: ^10.9.1 typescript: ~4.9.3 peerDependencies: - "@sitecore-feaas/clientside": ^0.4.4 + "@sitecore-feaas/clientside": ~0.4.12 react: ^18.2.0 react-dom: ^18.2.0 languageName: unknown @@ -6904,13 +6904,13 @@ __metadata: languageName: unknown linkType: soft -"@sitecore/byoc@npm:^0.1.3": - version: 0.1.3 - resolution: "@sitecore/byoc@npm:0.1.3" +"@sitecore/byoc@npm:^0.1.10": + version: 0.1.10 + resolution: "@sitecore/byoc@npm:0.1.10" dependencies: "@rjsf/utils": "*" json-schema: ^0.4.0 - checksum: 90219866c5add03ba88451875e87165a906a371922678de942163d8fd2064b18e122e4e7f15a889b54a83462d5be0958c78a9a4a14f77c91c03dcc38d002e858 + checksum: 11c6c4ddd030ecf839ef420ef769c678bfc6a5ed28c245664cc83d9b06c303d466ffc52018bf2721231284bb634ecb749e696b29747e46dbdeb22b9a8f8c560d languageName: node linkType: hard