chore(components, components-react): update @stencil/react-output-target and refactor the stencil config (#6654)

Author: oliverschuerch

packages/components-react/package.json

@@ -28,14 +28,12 @@
     "./post-components.css": "./dist/post-components.css",
     ".": {
       "types": "./dist/types/index.d.ts",
-      "node": "./dist/index.server.js",
       "import": "./dist/index.js",
-      "require": "./dist/index.js"
+      "node": "./dist/index.server.js"
     },
     "./server": {
       "types": "./dist/types/index.server.d.ts",
-      "import": "./dist/index.server.js",
-      "require": "./dist/index.server.js"
+      "import": "./dist/index.server.js"
     }
   },
   "scripts": {
@@ -47,7 +45,7 @@
     "copy:styles:dist": "copyfiles -f src/stencil-generated/post-components.css dist/"
   },
   "dependencies": {
-    "@stencil/react-output-target": "0.8.2",
+    "@stencil/react-output-target": "1.2.0",
     "@stencil/ssr": "0.1.1",
     "@swisspost/design-system-components": "workspace:10.0.0-next.54"
   },

packages/components-react/src/index.server.ts

@@ -1 +1 @@
-export * from './stencil-generated/server/components.js';
+export * from './stencil-generated/components.server.js';

packages/components-react/tsconfig.json

@@ -16,6 +16,7 @@
     "noLib": false,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
+    "rootDir": "src",
     "outDir": "dist",
     "removeComments": true,
     "skipLibCheck": true,

packages/components/package.json

@@ -70,7 +70,7 @@
     "start": "pnpm prebuild:script && stencil build --dev --watch --docs --docs-readme",
     "prebuild": "pnpm clean && pnpm prebuild:script",
     "build": "stencil build --docs-readme",
-    "postbuild": "pnpm copy:component-names && pnpm fix:export:components-react & pnpm copy:styles:components-react & pnpm copy:styles:components-angular",
+    "postbuild": "pnpm copy:component-names & pnpm copy:styles:components-react & pnpm copy:styles:components-angular",
     "clean": "rimraf --glob dist hydrate loader loaders www src/styles/generated src/_generated ../components-react/**/stencil-generated/ ../components-angular/projects/components/src/lib/stencil-generated/",
     "unit": "stencil test --spec",
     "unit:watch": "stencil test --spec --watchAll --silent",
@@ -83,7 +83,6 @@
     "generate": "stencil generate",
     "prebuild:script": "node --loader ts-node/esm prebuild.ts",
     "copy:component-names": "copyfiles -f src/_generated/component-names.json dist/",
-    "fix:export:components-react": "replace './components.server' './components.server.js' ../components-react/src/stencil-generated/server/components.ts",
     "copy:styles:components-react": "copyfiles -f www/build/post-components.css ../components-react/src/stencil-generated/",
     "copy:styles:components-angular": "copyfiles -f www/build/post-components.css ../components-angular/projects/components/src/lib/stencil-generated/"
   },
@@ -104,7 +103,7 @@
     "@percy/cypress": "3.1.6",
     "@stencil-community/eslint-plugin": "0.10.0",
     "@stencil/angular-output-target": "1.1.1",
-    "@stencil/react-output-target": "=0.8.2",
+    "@stencil/react-output-target": "1.2.0",
     "@stencil/sass": "3.0.12",
     "@swisspost/design-system-eslint": "workspace:10.0.0-next.54",
     "@types/jest": "29.5.14",

packages/components/stencil.config.ts

@@ -91,11 +91,9 @@ export const config: Config = {
     reactOutputTarget({
       customElementsDir: 'react',
       outDir: '../components-react/src/stencil-generated',
-    }),
-    reactOutputTarget({
-      customElementsDir: 'react',
-      outDir: '../components-react/src/stencil-generated/server',
       hydrateModule: '@swisspost/design-system-components/hydrate',
+      clientModule: '@swisspost/design-system-components-react',
+      serializeShadowRoot: 'declarative-shadow-dom',
     }),
     /**
      * This output-target type automates the creation of Angular component wrappers for the Stencil web-components.