Integration of custom prefixed PDS components in sample projects v2

[stephanschroeter]

Scope
With @porsche-design-system/components-js/@porsche-design-system/components-angular/@porsche-design-system/components-react @ v2.0.0-alpha.0 we introduced the possibility to prefix and scope web components during runtime to enable micro service architecture. Therefore we need to gain experience in real life examples:

• Integrate multiple custom (e.g. my-prefix- and another-prefix-) prefixed PDS components in sample projects as well as different versions (if possible, e.g. by integrating a micro service like home & nav) of the PDS components:
  • https://github.com/porscheui/sample-integration-vanillajs
  • https://github.com/porscheui/sample-integration-angular
  • https://github.com/porscheui/sample-integration-react
  • https://github.com/porscheui/sample-integration-gatsby
  • https://github.com/porscheui/sample-integration-nextjs
• Evaluate alternative integration methods for React and Angular:
  • add option to rename tags but not their related outputTarget componen… ionic-team/stencil-ds-output-targets#84
  • transformTagName compatibility ionic-team/stencil-ds-output-targets#59
• Check integration with sponsor teams:
  • Home & Nav / Navi Widget (Vanilla JS)
  • Porsche ID Profile / Address Widget with PDS (React): https://jira.porsche.codes/browse/PROFILE-4455
  • Portal Services Microservice Architektur (Angular): https://jira.porsche.codes/browse/VRS-3039

Notes
If the PDS loader would be implemented into index.html the loading performance could be increased for frameworks and improve the FOUC/FOUT. The PDS would be faster than the framework.

Subtasks

• Task
• Home & Nav test completed
• integrate PDS in vanillaJS
• integrate PDS in react
• integrate PDS in angular
• integrate PDS in nextJS
• integrate PDS in gatsby
• Test Angular components if they still need the component tag name as attribute like: Headline.
• Cleanup branches after alpha.6 release

Findings

To test PHN we need a .tgz file of their build with our alpha components. With the attachment we have so far, we can only test it in vanilla, it does not work in react/angular

Vanilla-JS:
- If we use our Components with a custom prefix in combination with PHN with prefix, the web-components-manager does not apply the defined prefix. This only happens when we use a different PDS version than the micro-service.
-> From Version alpha 2 -> 3 the web-component manager does not register prefixes

React:
- Documentation React import { getPrefixedComponents } from '@porsche-design-system/components-react/dist/prefixed-components'; is wrong, dist directory does not exist anymore
Fixed in Branch 856
- Using prefixed components in combination with PHN, the web-components-manager does only load alpha.4 and not alpha.0. He should load both as it is used in PHN
This only occurred due to copying the provided directory to the node_modules. This caused a wrong entry point. While using a packed Project it loads both versions as expected

Angular:
- components-wrapper.component.d.ts try's to import { Components } from '@porsche-design-system/components';. We do not provide the components package. The application cannot build without those typings. We have a ticket #987. This has to be resolved as soon as possible.
- Testing in Angular is therefore blocked, we cant use v2 until there is a solution

• ngcc throws error in /@porsche-design-system/components-angular/bundles/porsche-design-system-components-angular.umd.js -> 975 error NG1010: Value at position 0 in the NgModule.declarations of PorscheDesignSystemModule is not a reference: [object Object]
• In Branch 856 is a script fix. Afterwards Angular works as aspected so far.

NextJS:

• Cannot build because we use window in one of the components? We use window in calcLineHeight and transitionListener. It was not an issue in v1.

Gatsby:

• Same issue with window is not defined
• attachEventProps uses document which is undefined while SSR. We have to exclude the function in the SSR build process (if (typeof doc !== undefined) {}). Known Stencil bug! Has to be fixed in stencil output targets.
  We should check if it is fixed already ->
  React output target / document is not defined in isCoveredByReact() ionic-team/stencil-ds-output-targets#98

Attachments

Home & Nav with v2 alpha.0
porsche-navigation.zip
Packed Home & Nav alpha.5 prefix, no prefix and alpha.4
PHN-Packages.zip

[anotherMatze]

#987 needs to be completed before we can continue working on this story!

[anotherMatze]

Follow up tickets #1014 and #1009 created