Skip to content

fix(vue): ionic lifecycle hooks now run when using vue 3.2 setup syntax #24253

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

Merged
merged 7 commits into from
Nov 23, 2021
Merged

fix(vue): ionic lifecycle hooks now run when using vue 3.2 setup syntax #24253

merged 7 commits into from
Nov 23, 2021

Conversation

snowwolfjay
Copy link
Contributor

@snowwolfjay snowwolfjay commented Nov 22, 2021

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?

Issue Number: #23824

What is the new behavior?

Define a property on vue instance exposed source object make the hooks be public then they can be access and fire;

Does this introduce a breaking change?

  • Yes
  • No

Other information

Sorry, something went wrong.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
when use setup script, define properties on instance need use defineExpose to declare which property can be access outside (like private and public property). so line  82 will not work... 
My solution at line 85 is making a reference to the lifecycle array to the expose property source object.
comment update
@github-actions github-actions bot added the package: vue @ionic/vue package label Nov 22, 2021
@sean-perkins sean-perkins changed the title Bugfix fix(vue): public life cycle hooks on vue instance Nov 22, 2021
@liamdebeasi
Copy link
Contributor

Thanks for the PR! We appreciate the work you put in to create this fix. In order for this PR to be accepted, can you please add some tests to verify this new behavior? It might be easiest to add some tests to the lifecycle.spec.ts file: https://github.com/ionic-team/ionic-framework/blob/main/packages/vue/test-app/tests/unit/lifecycle.spec.ts

@snowwolfjay
Copy link
Contributor Author

Thanks for the PR! We appreciate the work you put in to create this fix. In order for this PR to be accepted, can you please add some tests to verify this new behavior? It might be easiest to add some tests to the lifecycle.spec.ts file: https://github.com/ionic-team/ionic-framework/blob/main/packages/vue/test-app/tests/unit/lifecycle.spec.ts

ok.

@snowwolfjay
Copy link
Contributor Author

sadly , I still can't find a way to simulate the case when use script-setup sugar, looks like used additional compile to handle codes which test-utils not cover those part . Will check later.
If any idea please tell and help , thanks.

Before that, ^_^ anyone meet this case ,just need copy changes to local

@liamdebeasi liamdebeasi mentioned this pull request Nov 23, 2021
13 tasks
Copy link
Contributor

@liamdebeasi liamdebeasi left a comment

Choose a reason for hiding this comment

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

I ended up adding some E2E tests. This PR is good to merge when all the tests pass. Thank you for submitting this!

@liamdebeasi liamdebeasi changed the title fix(vue): public life cycle hooks on vue instance fix(vue): ionic lifecycle hooks now run when using vue 3.2 setup syntax Nov 23, 2021
@liamdebeasi liamdebeasi merged commit fb96ab5 into ionic-team:main Nov 23, 2021
@liamdebeasi
Copy link
Contributor

Merged. Thank you!

@Dangerous828
Copy link

This issue has a problem with following the latest documentation on how to build vite ionic, and then removing ts does not and cannot work properly with the lifecycle and script setup. #28681

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: vue @ionic/vue package
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants