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

feat: bump to latest vue 3.4.19 #2607

Merged
merged 38 commits into from
Feb 24, 2024
Merged

Conversation

userquin
Copy link
Member

@userquin userquin commented Feb 23, 2024

This PR includes:

  • bump to vue 3.4.19
  • refactor AccountHoverWrapper.vue
  • extract types exported from CommonRouteTabs.vue to ~/types and update all components using those types
  • custom useI18n to provide isHydrated variants of t, d and n
  • custom $t, $d and $n to provide isHydrated variants
  • include isHydrated logic in all pages and components: reverted some isHydrated since we have included the custom versions

We need to review and update all isHydrated, t, d, n, $t, $d and $n usages in vue sfc and ts modules: will be included in another PR.

Copy link

stackblitz bot commented Feb 23, 2024

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

Copy link

netlify bot commented Feb 23, 2024

Deploy Preview for elk-docs canceled.

Name Link
🔨 Latest commit 3e606f6
🔍 Latest deploy log https://app.netlify.com/sites/elk-docs/deploys/65d9de4460227100084e3a66

Copy link

netlify bot commented Feb 23, 2024

Deploy Preview for elk-zone ready!

Name Link
🔨 Latest commit 3e606f6
🔍 Latest deploy log https://app.netlify.com/sites/elk-zone/deploys/65d9de440ec5080008ecc0f1
😎 Deploy Preview https://deploy-preview-2607--elk-zone.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Comment on lines +89 to +102
optimizeDeps: {
include: [
'@tiptap/vue-3', 'string-length', 'vue-virtual-scroller', 'emoji-mart', 'iso-639-1',
'@tiptap/extension-placeholder', '@tiptap/extension-document', '@tiptap/extension-paragraph',
'@tiptap/extension-text', '@tiptap/extension-mention', '@tiptap/extension-hard-break',
'@tiptap/extension-bold', '@tiptap/extension-italic', '@tiptap/extension-code',
'@tiptap/extension-history', 'prosemirror-state', 'browser-fs-access', 'blurhash',
'@vueuse/integrations/useFocusTrap', '@tiptap/extension-code-block', 'prosemirror-highlight',
'@tiptap/core', 'tippy.js', 'prosemirror-highlight/shiki', '@fnando/sparkline',
'@vueuse/gesture', 'github-reserved-names', 'file-saver', 'slimeform', 'vue-advanced-cropper',
'workbox-window', 'workbox-precaching', 'workbox-routing', 'workbox-cacheable-response',
'workbox-strategies', 'workbox-expiration',
],
},
Copy link
Member

Choose a reason for hiding this comment

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

We could probably remove the ones that would be detected by the scanner, but I think it is ok for now to include all of these 👍🏼

Copy link
Member Author

Choose a reason for hiding this comment

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

Some dependencies only detected when matching the case: for example, github-reserved-names and file-saver when visiting the settings > users and about pages

When visiting a new page and found a new entry in the console I just add them to the list.

imagen

Copy link
Member

Choose a reason for hiding this comment

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

perfect 👍🏼

const [_oldAccount, oldHandle, _oldVisible] = oldProps ?? [undefined, undefined, false]
if (!oldHandle || newHandle !== oldHandle || !account.value) {
// @ts-expect-error just ignore
useAccount.value = useAccountByHandle(newHandle)
Copy link
Member

Choose a reason for hiding this comment

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

Should we remove useAccountByHandle and do a fetch here directly as we discussed?

@patak-dev
Copy link
Member

If isHydrated is going to be needed for every $t, should we have that condition directly inside $t? (wrapping the original $t). If only is needed in some $t, then I think it is worth to have a a new $ht that does this so the code is more maintainable.

@patak-dev patak-dev marked this pull request as draft February 23, 2024 16:43
@userquin
Copy link
Member Author

If isHydrated is going to be needed for every $t, should we have that condition directly inside $t? (wrapping the original $t). If only is needed in some $t, then I think it is worth to have a a new $ht that does this so the code is more maintainable.

To make that change we need to remove all imports, including const { t } = useI18n() in all pages/components and then change all $t() usages in sfc templates with t().

imagen

@userquin userquin marked this pull request as ready for review February 23, 2024 21:30
Copy link
Member

@patak-dev patak-dev left a comment

Choose a reason for hiding this comment

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

Looks great! Thanks for the hard work to make this happen @userquin 👏🏼

@danielroe I think we should merge it. I'll leave it open for a bit in case you would like to check it out. We can remove other isHydrated conditionals in a future PR (I see there are some already removed here, and it is ok). The Nuxt update should be a manageable PR now.

composables/paginator.ts Outdated Show resolved Hide resolved
pages/notifications.vue Outdated Show resolved Hide resolved
Copy link
Member

@patak-dev patak-dev left a comment

Choose a reason for hiding this comment

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

Given that the isHydrated conditionals changes are now contained, I think we can move forward and merge this PR. If later on we find out a way to avoid these, there isn't the need for a big revert like before.

We discussed with @userquin that it would be ideal if the server will know somehow the language (like we do with the theme color?) so it can directly render the proper strings and avoid the need for the t wrappers.

There is also a half fix for #2601 included.

@patak-dev patak-dev added this pull request to the merge queue Feb 24, 2024
Merged via the queue into main with commit 36004a7 Feb 24, 2024
15 checks passed
@patak-dev patak-dev deleted the userquin/chore-bump-to-vue.3.4 branch February 24, 2024 12:26
shuuji3 pushed a commit to shuuji3/elk that referenced this pull request Feb 29, 2024
shuuji3 pushed a commit to shuuji3/elk that referenced this pull request Feb 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants