Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(react): intellisense works with IntelliJ #29782

Merged
merged 2 commits into from
Aug 20, 2024
Merged

fix(react): intellisense works with IntelliJ #29782

merged 2 commits into from
Aug 20, 2024

Conversation

thetaPC
Copy link
Contributor

@thetaPC thetaPC commented Aug 19, 2024

Issue number: resolves #29755


What is the current behavior?

Types do not generate when a React app is opened in IntelliJ IDE.

What is the new behavior?

  • Updated stencil/react-output-target to the latest
  • Updated the stencil config file
  • Updated jest, ts-jest, and typescript because of the changes in packages/react/tsconfig.json
  • Installed jest-environment-jsdom because Jest 26 no longer ships it by default since the test environment is now node by default. The test environment needs to be changed to jsdom when building a web app.

Screenshot 2024-08-19 at 3 44 56 PM
Screenshot 2024-08-19 at 3 45 11 PM

Does this introduce a breaking change?

  • Yes
  • No

No visual changes are introduced and there will be no changes needed by developers. Their apps will continue to work as is.

Other information

Dev build: 8.2.8-dev.11724100788.103018f2

Copy link

vercel bot commented Aug 19, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
ionic-framework ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 19, 2024 8:47pm

@@ -62,17 +63,19 @@
"@typescript-eslint/parser": "^5.48.2",
"eslint": "^7.32.0",
"fs-extra": "^9.0.1",
"jest": "^26.6.3",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

jsdom is needed to be installed since Jest 26 no longer ships it by default since the test environment is now node by default. The test environment needs to be changed to jsdom when building a web app.

@thetaPC thetaPC marked this pull request as ready for review August 19, 2024 23:00
@thetaPC thetaPC requested a review from a team as a code owner August 19, 2024 23:00
Copy link
Contributor

@sean-perkins sean-perkins left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work on this 👏

I think this should be a fix or feat. Either: fix(react): intellisense works with IntelliJ or feat(react): generate functional components (as examples).

One thing to be aware with these changes is that it only fixes the problem in the generated component wrappers. All of the legacy components that use class components likely have the same issue. We need to make the migration at some point in the future to support React Router 6, so it might be worth migrating those manual components over one-by-one over future releases. It shouldn't be a breaking change since the APIs are remaining the same.

@thetaPC thetaPC changed the title chore(react): upgrade to latest output target fix(react): intellisense works with IntelliJ Aug 20, 2024
@thetaPC thetaPC added this pull request to the merge queue Aug 20, 2024
Merged via the queue into main with commit bacded5 Aug 20, 2024
63 checks passed
@thetaPC thetaPC deleted the ROU-10989 branch August 20, 2024 19:21
github-merge-queue bot pushed a commit that referenced this pull request Sep 16, 2024
Issue number: resolves ionic-team/stencil-ds-output-targets#476,
resolves ionic-team/stencil-ds-output-targets#475, resolves #29848

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

In v0.6.0 of the [React output
target](https://www.npmjs.com/package/@stencil/react-output-target), the
implementation was changed to leverage Lit's utility for creating React
components from web components. This introduced some unforseen issues
and breaking changes.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Reverts many of the changes from
#29782 to downgrade
the React output target package to the last stable version (v0.5.3)
- Downgrades the version of Stencil to v4.20.0 (due to
ionic-team/stencil#5983 causing problems with
the downgraded output target)
- Pins these versions and prevents Renovate from attempting to upgrade
until the associated issues are resolved

## Does this introduce a breaking change?

- [ ] Yes
- [X] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build for this version: `8.3.1-dev.11726167750.15400355`

I tested the dev build against the use cases outlined in
ionic-team/stencil-ds-output-targets#475 and
ionic-team/stencil-ds-output-targets#476
brandyscarney pushed a commit that referenced this pull request Sep 17, 2024
Issue number: resolves ionic-team/stencil-ds-output-targets#476,
resolves ionic-team/stencil-ds-output-targets#475, resolves #29848

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

<!-- Please describe the current behavior that you are modifying. -->

In v0.6.0 of the [React output
target](https://www.npmjs.com/package/@stencil/react-output-target), the
implementation was changed to leverage Lit's utility for creating React
components from web components. This introduced some unforseen issues
and breaking changes.

<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Reverts many of the changes from
#29782 to downgrade
the React output target package to the last stable version (v0.5.3)
- Downgrades the version of Stencil to v4.20.0 (due to
ionic-team/stencil#5983 causing problems with
the downgraded output target)
- Pins these versions and prevents Renovate from attempting to upgrade
until the associated issues are resolved

- [ ] Yes
- [X] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build for this version: `8.3.1-dev.11726167750.15400355`

I tested the dev build against the use cases outlined in
ionic-team/stencil-ds-output-targets#475 and
ionic-team/stencil-ds-output-targets#476
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package package: react @ionic/react package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug: Breaking of react types with ionic elements
3 participants