fix: prevent vitetest/ssr errors due to defining components on the server

packages/calcite-components-react/package.json

@@ -6,8 +6,10 @@
   "license": "SEE LICENSE.md",
   "scripts": {
     "build": "rimraf dist && npm run compile",
+    "prebuild": "npm run patch:ssr",
     "clean": "rimraf dist node_modules .turbo",
     "compile": "npm run tsc",
+    "patch:ssr": "ts-node support/patchSSR.ts",
     "tsc": "tsc"
   },
   "main": "./dist/index.js",

packages/calcite-components-react/src/auto-define.ts

@@ -0,0 +1,12 @@
+const isBrowser = (): boolean =>
+  ![typeof window, typeof document, typeof location].includes("undefined") &&
+  [typeof process, typeof global].includes("undefined") &&
+  window.location === location &&
+  window.document === document;
+
+export function autoDefine(component: string) {
+  if (isBrowser()) {
+    return async () => (await import(`@esri/calcite-components/dist/components/${component}.js`)).defineCustomElement();
+  }
+  return undefined;
+}

packages/calcite-components-react/support/patchSSR.ts

@@ -0,0 +1,32 @@
+// patch needed due to Stencil executing client side code on the server
+// when using the includeImportCustomElements option
+// https://stenciljs.com/docs/react#includeimportcustomelements
+// https://github.com/Esri/calcite-design-system/issues/7486
+
+const {
+  promises: { readFile, writeFile },
+} = require("fs");
+const { dirname, resolve } = require("path");
+
+(async () => {
+  try {
+    const filePath = resolve(`${__dirname}/../src/components.ts`);
+    const contents = await readFile(filePath, { encoding: "utf8" });
+
+    const defineCustomElementImports = /import { defineCustomElement as defineCalcite.*(\r\n|\r|\n)/gm;
+    const reactWrapperExports = /createReactComponent<(.*)>.*\((['|\w|-]*)(.*)(defineCalcite\w*)\)/g;
+
+    const patchedContents = contents
+      .replace(
+        "import { createReactComponent } from './react-component-lib';",
+        "$&\nimport { autoDefine } from './auto-define';"
+      )
+      .replace(defineCustomElementImports, "")
+      .replace(reactWrapperExports, "createReactComponent<$1>($2$3autoDefine($2))");
+
+    await writeFile(filePath, patchedContents);
+  } catch (err) {
+    console.error(err);
+    process.exit(1);
+  }
+})();