From 30d3d6b12821d03f8503976ff0b86a05c57104d9 Mon Sep 17 00:00:00 2001 From: Lu Khei Chong Date: Fri, 13 Dec 2024 16:06:16 +0800 Subject: [PATCH] test(e2e): update nextjs imports for components w dynamic import due to use of dom api --- cypress/apps/angular-app/angular.json | 3 +++ cypress/apps/angular-app/package-lock.json | 2 +- cypress/apps/next-app/package-lock.json | 7 +----- cypress/apps/next-app/package.json | 1 - .../next-app/src/app/components/Alert.tsx | 2 -- .../next-app/src/app/components/Combobox.tsx | 9 ++++++-- .../src/app/components/Datepicker.tsx | 9 ++++++-- .../next-app/src/app/components/Dropdown.tsx | 10 ++++++-- .../next-app/src/app/components/Mainnav.tsx | 8 ++++++- .../next-app/src/app/components/Progress.tsx | 3 --- .../next-app/src/app/components/Tooltip.tsx | 9 ++++++-- cypress/apps/react-app/package-lock.json | 9 +------- cypress/apps/react-app/package.json | 3 +-- cypress/apps/react-app/src/index.js | 1 - package-lock.json | 23 ++++++++++--------- package.json | 2 +- scripts/makeReact.mjs | 2 +- 17 files changed, 57 insertions(+), 46 deletions(-) diff --git a/cypress/apps/angular-app/angular.json b/cypress/apps/angular-app/angular.json index eb36832a..5525ed84 100644 --- a/cypress/apps/angular-app/angular.json +++ b/cypress/apps/angular-app/angular.json @@ -76,5 +76,8 @@ } } } + }, + "cli": { + "analytics": false } } diff --git a/cypress/apps/angular-app/package-lock.json b/cypress/apps/angular-app/package-lock.json index 3f10e752..ae3e2fd7 100644 --- a/cypress/apps/angular-app/package-lock.json +++ b/cypress/apps/angular-app/package-lock.json @@ -39,7 +39,7 @@ }, "../../../lib": { "name": "@govtechsg/sgds-web-component", - "version": "2.0.0", + "version": "3.0.0-rc.1", "license": "MIT", "dependencies": { "@govtechsg/sgds": "^2.3.2", diff --git a/cypress/apps/next-app/package-lock.json b/cypress/apps/next-app/package-lock.json index 222fe9ce..5d85b043 100644 --- a/cypress/apps/next-app/package-lock.json +++ b/cypress/apps/next-app/package-lock.json @@ -9,7 +9,6 @@ "version": "0.1.0", "dependencies": { "@govtechsg/sgds-web-component": "file:../../../lib", - "@webcomponents/scoped-custom-element-registry": "^0.0.9", "next": "14.2.3", "react": "^18", "react-dom": "^18" @@ -30,6 +29,7 @@ "dependencies": { "@govtechsg/sgds": "^2.3.2", "@lit-labs/react": "^1.0.9", + "@lit/react": "^1.0.6", "@open-wc/scoped-elements": "2.2.0", "@storybook/addon-a11y": "^8.2.8", "bootstrap": "^5.1.3", @@ -575,11 +575,6 @@ "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==", "dev": true }, - "node_modules/@webcomponents/scoped-custom-element-registry": { - "version": "0.0.9", - "resolved": "https://registry.npmjs.org/@webcomponents/scoped-custom-element-registry/-/scoped-custom-element-registry-0.0.9.tgz", - "integrity": "sha512-4RVHwN9oIp23mhrxeDbP9/0wvdcrB0d/MFMqIStShIgfzsqXZXf1OdU5kvqjgdMYavQ5Zm8C6BuBcAjzNwAetQ==" - }, "node_modules/acorn": { "version": "8.11.3", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz", diff --git a/cypress/apps/next-app/package.json b/cypress/apps/next-app/package.json index 26fd5dee..9e15b4ec 100644 --- a/cypress/apps/next-app/package.json +++ b/cypress/apps/next-app/package.json @@ -10,7 +10,6 @@ }, "dependencies": { "@govtechsg/sgds-web-component": "file:../../../lib", - "@webcomponents/scoped-custom-element-registry": "^0.0.9", "next": "14.2.3", "react": "^18", "react-dom": "^18" diff --git a/cypress/apps/next-app/src/app/components/Alert.tsx b/cypress/apps/next-app/src/app/components/Alert.tsx index 67417272..238d5610 100644 --- a/cypress/apps/next-app/src/app/components/Alert.tsx +++ b/cypress/apps/next-app/src/app/components/Alert.tsx @@ -1,5 +1,4 @@ import SgdsAlert from "@govtechsg/sgds-web-component/react/alert/index.js"; -import SgdsAlertHeading from "@govtechsg/sgds-web-component/react/alert-heading/index.js"; import SgdsAlertLink from "@govtechsg/sgds-web-component/react/alert-link/index.js"; export const Alert = () => { @@ -36,7 +35,6 @@ export const Alert = () => {
- Hello, nice to meet you

Aww yeah, you successfully read this important diff --git a/cypress/apps/next-app/src/app/components/Combobox.tsx b/cypress/apps/next-app/src/app/components/Combobox.tsx index 8c6c4151..2c3a05ca 100644 --- a/cypress/apps/next-app/src/app/components/Combobox.tsx +++ b/cypress/apps/next-app/src/app/components/Combobox.tsx @@ -1,5 +1,10 @@ -import SgdsCombobox from "@govtechsg/sgds-web-component/react/combo-box/index.js"; - +import dynamic from "next/dynamic" +const SgdsCombobox = dynamic( + () => import("@govtechsg/sgds-web-component/react/combo-box/index.js"), + { + ssr: false, + } + ); export const Combobox = () => { return ( import("@govtechsg/sgds-web-component/react/datepicker/index.js"), + { + ssr: false, + } + ); export const Datepicker = () => { return ; }; diff --git a/cypress/apps/next-app/src/app/components/Dropdown.tsx b/cypress/apps/next-app/src/app/components/Dropdown.tsx index 43404e6f..2b8c6eec 100644 --- a/cypress/apps/next-app/src/app/components/Dropdown.tsx +++ b/cypress/apps/next-app/src/app/components/Dropdown.tsx @@ -1,6 +1,12 @@ import SgdsDropdownItem from "@govtechsg/sgds-web-component/react/dropdown-item/index.js"; -import SgdsDropdown from "@govtechsg/sgds-web-component/react/dropdown/index.js" -import SgdsButton from "@govtechsg/sgds-web-component/react/button/index.js" +import dynamic from "next/dynamic" +const SgdsDropdown = dynamic( + () => import("@govtechsg/sgds-web-component/react/dropdown/index.js"), + { + ssr: false, + } + ); + import SgdsButton from "@govtechsg/sgds-web-component/react/button/index.js" export const Dropdown = () => { diff --git a/cypress/apps/next-app/src/app/components/Mainnav.tsx b/cypress/apps/next-app/src/app/components/Mainnav.tsx index a877abd0..e1917b3a 100644 --- a/cypress/apps/next-app/src/app/components/Mainnav.tsx +++ b/cypress/apps/next-app/src/app/components/Mainnav.tsx @@ -2,8 +2,14 @@ import SgdsButton from "@govtechsg/sgds-web-component/react/button/index.js"; import SgdsMainnavItem from "@govtechsg/sgds-web-component/react/mainnav-item/index.js"; import SgdsDropdownItem from "@govtechsg/sgds-web-component/react/dropdown-item/index.js"; import SgdsMainnav from "@govtechsg/sgds-web-component/react/mainnav/index.js"; -import SgdsMainnavDropdown from "@govtechsg/sgds-web-component/react/mainnav-dropdown/index.js"; +import dynamic from "next/dynamic" +const SgdsMainnavDropdown = dynamic( + () => import("@govtechsg/sgds-web-component/react/mainnav-dropdown/index.js"), + { + ssr: false, + } +); export const Mainnav = () => { return ( diff --git a/cypress/apps/next-app/src/app/components/Progress.tsx b/cypress/apps/next-app/src/app/components/Progress.tsx index ecd0e7cd..2163756a 100644 --- a/cypress/apps/next-app/src/app/components/Progress.tsx +++ b/cypress/apps/next-app/src/app/components/Progress.tsx @@ -1,9 +1,7 @@ -import SgdsProgress from "@govtechsg/sgds-web-component/react/progress/index.js"; import SgdsProgressBar from "@govtechsg/sgds-web-component/react/progress-bar/index.js"; export const Progress = () => { return ( - { ariamax={100} aria-label="Loading in progress" > - ); }; diff --git a/cypress/apps/next-app/src/app/components/Tooltip.tsx b/cypress/apps/next-app/src/app/components/Tooltip.tsx index 5b9f3372..53e33316 100644 --- a/cypress/apps/next-app/src/app/components/Tooltip.tsx +++ b/cypress/apps/next-app/src/app/components/Tooltip.tsx @@ -1,5 +1,10 @@ -import SgdsTooltip from "@govtechsg/sgds-web-component/react/tooltip/index.js" - +import dynamic from "next/dynamic" +const SgdsTooltip = dynamic( + () => import("@govtechsg/sgds-web-component/react/tooltip/index.js"), + { + ssr: false, + } +) export const Tooltip = () => { return ( <> diff --git a/cypress/apps/react-app/package-lock.json b/cypress/apps/react-app/package-lock.json index 698bb8cb..01913960 100644 --- a/cypress/apps/react-app/package-lock.json +++ b/cypress/apps/react-app/package-lock.json @@ -18,8 +18,7 @@ "web-vitals": "^2.1.4" }, "devDependencies": { - "@babel/plugin-proposal-private-property-in-object": "^7.21.11", - "@webcomponents/scoped-custom-element-registry": "^0.0.9" + "@babel/plugin-proposal-private-property-in-object": "^7.21.11" } }, "../../../lib": { @@ -5348,12 +5347,6 @@ "@xtuc/long": "4.2.2" } }, - "node_modules/@webcomponents/scoped-custom-element-registry": { - "version": "0.0.9", - "resolved": "https://registry.npmjs.org/@webcomponents/scoped-custom-element-registry/-/scoped-custom-element-registry-0.0.9.tgz", - "integrity": "sha512-4RVHwN9oIp23mhrxeDbP9/0wvdcrB0d/MFMqIStShIgfzsqXZXf1OdU5kvqjgdMYavQ5Zm8C6BuBcAjzNwAetQ==", - "dev": true - }, "node_modules/@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", diff --git a/cypress/apps/react-app/package.json b/cypress/apps/react-app/package.json index 426b42cb..355f6efa 100644 --- a/cypress/apps/react-app/package.json +++ b/cypress/apps/react-app/package.json @@ -37,7 +37,6 @@ ] }, "devDependencies": { - "@babel/plugin-proposal-private-property-in-object": "^7.21.11", - "@webcomponents/scoped-custom-element-registry": "^0.0.9" + "@babel/plugin-proposal-private-property-in-object": "^7.21.11" } } diff --git a/cypress/apps/react-app/src/index.js b/cypress/apps/react-app/src/index.js index 4ea48e66..cada659b 100644 --- a/cypress/apps/react-app/src/index.js +++ b/cypress/apps/react-app/src/index.js @@ -1,4 +1,3 @@ -import "@webcomponents/scoped-custom-element-registry"; import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; diff --git a/package-lock.json b/package-lock.json index 2ca59eae..332cbda0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "license": "MIT", "dependencies": { "@govtechsg/sgds": "^2.3.2", - "@lit-labs/react": "^1.0.9", + "@lit/react": "^1.0.6", "@open-wc/scoped-elements": "2.2.0", "@storybook/addon-a11y": "^8.2.8", "bootstrap": "^5.1.3", @@ -2697,16 +2697,20 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, - "node_modules/@lit-labs/react": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@lit-labs/react/-/react-1.2.1.tgz", - "integrity": "sha512-DiZdJYFU0tBbdQkfwwRSwYyI/mcWkg3sWesKRsHUd4G+NekTmmeq9fzsurvcKTNVa0comNljwtg4Hvi1ds3V+A==" - }, "node_modules/@lit-labs/ssr-dom-shim": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.1.tgz", "integrity": "sha512-wx4aBmgeGvFmOKucFKY+8VFJSYZxs9poN3SDNQFF6lT6NrQUnHiPB2PWz2sc4ieEcAaYYzN+1uWahEeTq2aRIQ==" }, + "node_modules/@lit/react": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.6.tgz", + "integrity": "sha512-QIss8MPh6qUoFJmuaF4dSHts3qCsA36S3HcOLiNPShxhgYPr4XJRnCBKPipk85sR9xr6TQrOcDMfexwbNdJHYA==", + "license": "BSD-3-Clause", + "peerDependencies": { + "@types/react": "17 || 18" + } + }, "node_modules/@lit/reactive-element": { "version": "1.6.3", "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz", @@ -4490,8 +4494,7 @@ "node_modules/@types/prop-types": { "version": "15.7.12", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", - "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==", - "dev": true + "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==" }, "node_modules/@types/qs": { "version": "6.9.15", @@ -4507,7 +4510,6 @@ "version": "18.3.5", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.5.tgz", "integrity": "sha512-WeqMfGJLGuLCqHGYRGHxnKrXcTitc6L/nBUWfWPcTarG3t9PsquqUMuVeXZeca+mglY4Vo5GZjCi0A3Or2lnxA==", - "dev": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -8378,8 +8380,7 @@ "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/custom-elements-manifest": { "version": "1.0.0", diff --git a/package.json b/package.json index cd10349f..f6ba68f0 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "license": "MIT", "dependencies": { "@govtechsg/sgds": "^2.3.2", - "@lit-labs/react": "^1.0.9", + "@lit/react": "^1.0.6", "@open-wc/scoped-elements": "2.2.0", "@storybook/addon-a11y": "^8.2.8", "bootstrap": "^5.1.3", diff --git a/scripts/makeReact.mjs b/scripts/makeReact.mjs index 6259406f..a41520d3 100644 --- a/scripts/makeReact.mjs +++ b/scripts/makeReact.mjs @@ -33,7 +33,7 @@ components.map(component => { const source = prettier.format( ` import * as React from 'react'; - import { createComponent } from '@lit-labs/react'; + import { createComponent } from '@lit/react'; import Component from '../../components/${importPath}'; import { register } from "../../utils/ce-registry";