Home » Oreps » Slidev » All Releases » v0.48.0 Release
slidevjs/slidev
Presentation Slides for Developers
Watch
0
Commit Activity
Directory Browser
Velocity History
Releasesv0.48.0
Basic Details Issues Addressed Top Contributors Directory Browser Release Notes
Slidev v0.48.0

Slidev: v0.48.0 Release

Release date:
March 10, 2024
Previous version:
v0.48.0-beta.26 (released March 9, 2024)
Magnitude:
147 Diff Delta
Contributors:
2 total committers
Data confidence:
Commits:
4 impacting commits

Top Contributors in v0.48.0

KermanX
antfu

Directory Browser for v0.48.0

We haven't yet finished calculating and confirming the files and directories changed in this release. Please check back soon.

Release Notes Published

πŸ’‘ Highlights

Slidev v0.48.0 is one of the biggest changes and improvements released since it launched. Huge thanks to our new team member @KermanX, who pushed a lot of aspects of Slidev and made a lot of cool new features.

🎩 Shiki Magic Move

Shiki Magic Move allows you to do morphing animation between codes, making it smoother to compare code changes in your slides

https://github.com/slidevjs/slidev/assets/11247099/79927794-27ba-4342-9911-9996cec889d6

Learn more at https://sli.dev/guide/syntax#shiki-magic-move

✍️ v-mark Rough Notation

We also integrated Rough Notation to Slidev, making it easier to highlight and notation sections you might want to emphasize.

<video src="https://github.com/slidevjs/slidev/assets/11247099/c840340c-0aa1-4cde-b228-e6c67e5f6879"></video>

Learn more at https://sli.dev/guide/animations#rough-markers

πŸ§‘β€πŸ’» Runable Monaco Editor

Monaco Editor integrations get refreshed! It is much more performant and robust. In addition, we also introduced the Runnable Monaco that you can edit and execute the code in your slide:

<video src="https://github.com/slidevjs/slidev/assets/11247099/0c6ce681-80d3-4555-93bf-9288ee533462"></video>

Learn more at https://sli.dev/guide/syntax#monaco-editor

πŸ“‹ New Overview View

We introduced a new /overview screen for you to review all your slides and notes together:

<video src="https://github.com/slidevjs/slidev/assets/11247099/01bbf5b3-f916-4646-9ea4-cf269c0567cb"></video>

Learn more at https://sli.dev/guide/overview

πŸ‘† Clicks Sliders

We introduced the click sliders in both the Overview and Presenter views so that you can quickly see the clicks you have for each slide by dragging them to preview each click.

https://github.com/slidevjs/slidev/assets/11247099/155a2726-cfba-49a7-9d07-e9365e3dd5d2

πŸ“ Notes Markers

To make your notes (that might be long) in sync with the progress of your presentation, we introduced that [click] marker to separate your notes into sections so you can follow your notes more easily as you go forward:

https://github.com/slidevjs/slidev/assets/11247099/40014e34-67cd-4830-8c8d-8431754a3672

Learn more at https://sli.dev/guide/syntax#click-markers

πŸ” Slide Zooming

You can now have a zooming option for each slide via frontmatter to resize the canvas:

---
zoom: 1.5
---

Your content

Learn more at https://github.com/slidevjs/slidev/pull/1322

🚨 Breaking Changes

Click System Rework

See #1279. This would give the v-click system a much more reliable behavior and better API to work with. It shouldn't affect most usages unless you are using programmatic conditional heavily β€” try going through your slides after the upgrade to make sure. You should be good to go!

Monaco Editor Rework

See #1330. At the very beginning, Slidev integrated Monaco Editor in an iframe because of the limitation of hover positioning with scaled slides. @KermanX took a deep look and figured out a solid way to make Monaco aware of the current scaling of the slide. Now, Monaco Editors will directly render in the DOM without iframe - this gives us a much more efficient and robust Monaco experience.

Meanwhile, since this approach makes Monaco components, if you don't use Monaco, it will not ship into your production bundle, and you don't need to turn Monaco on and off anymore explicitly. In that case, Monaco support is on by default for both dev and build now.

We also have a new runnable Monaco Editor that can serve as REPL in your presentation, check the docs for more.

Internal Refactorings

If you are using direct import from @slidev/client/**, those might break because we took a huge internal refactor to make the code base future-proof. We suggest you import from @slidev/client (new in v0.48) to use only the public API:

<script setup>
import { useDarkMode, useNav, useSlidevContext } from '@slidev/client'

const { $slidev } = useSlidevContext()
const { currentSlideRoute } = useNav()
const { isDark } = useDarkMode()
// ...
</script>

See https://sli.dev/custom/vue-context#composable-usage

πŸ—ΊοΈ Future Plans

We created a few RFC (Request for Comments) issues to address the plans we have for the future:

The major one is that we have a long-term plan to migrate Slidev to use Nuxt as the underlying framework. It would allow us to have built-in server support for production, as well as reusing the rich ecosystem Nuxt has (like installing a module, etc).

Check them out if you are interested. We look forward to hearing from you! Thank you and hope you enjoy Slidev!

<details> <summary>Generated changelogs</summary>

   πŸš¨ Breaking Changes

   πŸš€ Features

   πŸž Bug Fixes

   πŸŽ Performance

  • Use lz-string to pass data more efficiently instead of js-base64. Remove unused deps  -  by @antfu <samp>(adf2a)</samp>

</details>

    View changes on GitHub
GitClear uses cookies to ensure you get the best experience on our website. Learn more