fix(react): improve component compatibility with preact

[liamdebeasi]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (npm run build) was run locally and any changes were pushed
• Lint (npm run lint) has passed locally and any fixes were made for failures

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

#23516 (comment)

There appear to be type mismatches when using TypeScript + Preact that do not appear when using TypeScript + React. Most Ionic components do not have this issue (the auto-generated ones), but the "hand crafted" ones have this issue.

Also IonApp was being exported twice. Previously IonApp was autogenerated, but is no longer auto generated as of f3e492c.

What is the new behavior?

• I updated these "hand crafted" components to be constructed more like the auto-generated components to avoid this mismatch.
• Removed the redundant IonApp export

Does this introduce a breaking change?

• Yes
• No

Other information

[piotr-cz]

I'm unable to build an app. I'm not sure if it's related to this PR or problem comes from other commit.

Console output:

vite v2.6.13 building for production...
✓ 149 modules transformed.
'attachShadow' is not exported by node_modules\@stencil\core\internal\client\index.js, imported by node_modules\@ionic\core\components\ion-accordion.js
file: xxx/ionic-framework-bug-23516/node_modules/@ionic/core/components/ion-accordion.js:1:9
1: import { attachShadow, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
            ^
2: import { c as config, b as getIonMode } from './ionic-global.js';
3: import { r as raf, t as transitionEndAsync, a as addEventListener, b as removeEventListener, g as getElementRoot } from './helpers.js';

Reproduction steps:

git clone https://github.com/piotr-cz/ionic-framework-bug-23516
cd ionic-framework-bug-23516
npm install
npm install @ionic/[email protected]
npm run build

[liamdebeasi]

@piotr-cz Please see #24153 (comment).

[piotr-cz]

@liamdebeasi

Thanks, after updating to @stencil/[email protected] the issue mentioned in #23516 (comment) seems to be resolved and I can compile the source 👍

I still have to set "skipLibCheck": true, in tsconfig.json to compile, but it's expected as I'm using preact instead of react.

[liamdebeasi]

What errors do you get if you don't have skipLibCheck: true?

[piotr-cz]

Lots of Cannot find module 'react' or its corresponding type declarations., like this one:

node_modules/@ionic/react/dist/types/components/CreateAnimation.d.ts(2,19): error TS2307: Cannot find module 'react' or its corresponding type declarations.

It's expected as preact docs suggest setting it on to compile dependencies that import react: TypeScript preact/compat configuration

[liamdebeasi]

Ahh good to know. Thanks!

[piotr-cz]

Thank You for preparing this PR