fix(deps): update dependency vue to v3 [security] #94

renovate · 2024-10-25T04:42:03Z

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
vue (source)	`^2.6.13` -> `^3.0.0`

GitHub Vulnerability Alerts

CVE-2024-9506

The ReDoS can be exploited through the parseHTML function in the html-parser.ts file. This flaw allows attackers to slow down the application by providing specially crafted input that causes inefficient processing of regular expressions, leading to excessive resource consumption.

To demonstrate this vulnerability, here's an example. In a Vue client-side application, create a new Vue instance with a template string that includes a <script> tag but closes it incorrectly with something like </textarea>.

new Vue({
  el: '#app',
  template: '
    <div>
      Hello, world!
      <script>${'<'.repeat(1000000)}</textarea>
    </div>'
});

Next, set up a basic HTML page (e.g., index.html) to load this JavaScript and mount the Vue instance:

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
</head>
<body>
  <div id=\"app\">Loading...</div>
</body>
</html>

When you visit the app in your browser at http://localhost:3000, you'll notice that the time taken to parse and mount the Vue application increases significantly due to the ReDoS vulnerability, demonstrating how the flaw can affect performance.

Release Notes

vuejs/core (vue)

`v3.0.0`: One Piece

Today we are proud to announce the official release of Vue.js 3.0 "One Piece". This new major version of the framework provides improved performance, smaller bundle sizes, better TypeScript integration, new APIs for tackling large scale use cases, and a solid foundation for long-term future iterations of the framework.

The 3.0 release represents over 2 years of development efforts, featuring 30+ RFCs, 2,600+ commits, 628 pull requests from 99 contributors, plus tremendous amount of development and documentation work outside of the core repo. We would like to express our deepest gratitude towards our team members for taking on this challenge, our contributors for the pull requests, our sponsors and backers for the financial support, and the wider community for participating in our design discussions and providing feedback for the pre-release versions. Vue is an independent project created for the community and sustained by the community, and Vue 3.0 wouldn't have been possible without your consistent support.

Taking the "Progressive Framework" Concept Further

Vue had a simple mission from its humble beginning: to be an approachable framework that anyone can quickly learn. As our user base grew, the framework also grew in scope to adapt to the increasing demands. Over time, it evolved into what we call a "Progressive Framework": a framework that can be learned and adopted incrementally, while providing continued support as the user tackles more and more demanding scenarios.

Today, with over 1.3 million users worldwide^*, we are seeing Vue being used in a wildly diverse range of scenarios, from sprinkling interactivity on traditional server-rendered pages, to full-blown single page applications with hundreds of components. Vue 3 takes this flexibility even further.

Layered internal modules

Vue 3.0 core can still be used via a simple <script> tag, but its internals has been re-written from the ground up into a collection of decoupled modules. The new architecture provides better maintainability, and allows end users to shave off up to half of the runtime size via tree-shaking.

These modules also exposes lower-level APIs that unlocks many advanced use cases:

The compiler supports custom AST transforms for build-time customizations (e.g. build-time i18n)
The core runtime provides first-class API for creating custom renderers targeting different render targets (e.g. native mobile, WebGL or terminals). The default DOM renderer is built using the same API.
The @vue/reactivity module exports functions that provide direct access to Vue's reactivity system, and can be used as a standalone package. It can be used to pair with other templating solutions (e.g. lit-html) or even in non-UI scenarios.

New APIs for tackling scale

The 2.x Object-based API is largely intact in Vue 3. However, 3.0 also introduces the Composition API - a new set of APIs aimed at addressing the pain points of Vue usage in large scale applications. The Composition API builds on top of the reactivity API and enables logic composition and reuse similar to React hooks, more flexible code organization patterns, and more reliable type inference than the 2.x Object-based API.

Composition API can also be used with Vue 2.x via the @vue/composition-api plugin, and there are already Composition API utility libraries that work for both Vue 2 and 3 (e.g. vueuse, vue-composable).

Performance Improvements

Vue 3 has demonstrated significant performance improvements over Vue 2 in terms of bundle size (up to 41% lighter with tree-shaking), initial render (up to 55% faster), updates (up to 133% faster), and memory usage (up to 54% less).

In Vue 3, we have taken the approach of "compiler-informed Virtual DOM": the template compiler performs aggressive optimizations and generates render function code that hoists static content, leaves runtime hints for binding types, and most importantly, flattens the dynamic nodes inside a template to reduce the cost of runtime traversal. The user therefore gets the best of both worlds: compiler-optimized performance from templates, or direct control via manual render functions when the use case demands.

Improved TypeScript integration

Vue 3's codebase is written in TypeScript, with automatically generated, tested, and bundled type definitions so they are always up-to-date. Composition API works great with type inference. Vetur, our official VSCode extension, now supports template expression and props type checking leveraging Vue 3's improved internal typing. Oh, and Vue 3's typing fully supports TSX if that's your preference.

Experimental Features

We have proposed two new features for Singe-File Components (SFC, aka .vue files):

These features are already implemented and available in Vue 3.0, but are provided only for the purpose of gathering feedback. They will remain experimental until the RFCs are merged.

We have also implemented a currently undocumented <Suspense> component, which allows waiting on nested async dependencies (async components or component with async setup()) on initial render or branch switch. We are testing and iterating on this feature with the Nuxt.js team (Nuxt 3 is on the way) and will likely solidify it in 3.1.

Phased Release Process

The release of Vue 3.0 marks the general readiness of the framework. While some of the frameworks sub projects may still need further work to reach stable status (specifically router and Vuex integration in the devtools), we believe it's suitable to start new, green-field projects with Vue 3 today. We also encourage library authors to start upgrading your projects to support Vue 3.

Check out the Vue 3 Libraries Guide for details on all framework sub projects.

Migration and IE11 Support

We have pushed back the migration build (v3 build with v2 compatible behavior + migration warnings) and the IE11 build due to time constraints, and are aiming to focus on them in Q4 2020. Therefore, users planning to migrate an existing v2 app or require IE11 support should be aware of these limitations at this time.

Next Steps

For the near term after release, we will focus on:

Migration build
IE11 support
Router and Vuex integration in new devtools
Further improvements to template type inference in Vetur

For the time being, the documentation websites, GitHub branches, and npm dist tags for Vue 3 and v3-targeting projects will remain under next-denoted status. This means npm install vue will still install Vue 2.x and npm install vue@next will install Vue 3. We are planning to switch all doc links, branches and dist tags to default to 3.0 by end of 2020.

At the same time, we have started planning for 2.7, which will be the last planned minor release of the 2.x release line. 2.7 will be backporting compatible improvements from v3, and emit warnings on usage of APIs that are removed/changed in v3 to help with potential migration. We are planning to work on 2.7 in Q1 2021, which will directly become LTS upon release with an 18 months maintenance lifespan.

Trying It Out

To learn more about Vue 3.0, check out our new documentation website. If you are an existing Vue 2.x user, go directly to the Migration Guide.

*based on Vue Devtools Chrome extension weekly active users as reported by Google.

Configuration

📅 Schedule: Branch creation - "" (UTC), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

coderabbitai · 2024-10-25T04:42:10Z

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

fix(deps): update dependency vue to v3 [security]

029a2e2

pull-request-size bot added the size/L label Oct 25, 2024

renovate bot changed the title ~~fix(deps): update dependency vue to v3 [security]~~ fix(deps): update dependency vue to v3 [security] - autoclosed Dec 8, 2024

renovate bot closed this Dec 8, 2024

renovate bot deleted the renovate/npm-vue-vulnerability branch December 8, 2024 18:33

renovate bot changed the title ~~fix(deps): update dependency vue to v3 [security] - autoclosed~~ fix(deps): update dependency vue to v3 [security] Dec 8, 2024

renovate bot reopened this Dec 8, 2024

renovate bot force-pushed the renovate/npm-vue-vulnerability branch from 5723134 to 029a2e2 Compare December 8, 2024 21:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(deps): update dependency vue to v3 [security] #94

fix(deps): update dependency vue to v3 [security] #94

renovate bot commented Oct 25, 2024

coderabbitai bot commented Oct 25, 2024

Review skipped

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

fix(deps): update dependency vue to v3 [security] #94

Are you sure you want to change the base?

fix(deps): update dependency vue to v3 [security] #94

Conversation

renovate bot commented Oct 25, 2024

GitHub Vulnerability Alerts

CVE-2024-9506

Release Notes

v3.0.0: One Piece

Taking the "Progressive Framework" Concept Further

Layered internal modules

New APIs for tackling scale

Performance Improvements

Improved TypeScript integration

Experimental Features

Phased Release Process

Migration and IE11 Support

Next Steps

Trying It Out

Configuration

coderabbitai bot commented Oct 25, 2024

Review skipped

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

`v3.0.0`: One Piece

CodeRabbit Configuration File (`.coderabbit.yaml`)