✨ Nuxt 3.3.2

🩹 Большое количество исправления ошибок
💪 Улучшения типизации
📖 Доработка документации

команда Nuxt не только выкатывает новые фичи, но и не забывает фиксить баги!


https://github.com/nuxt/nuxt/releases/tag/v3.3.2

Вышел апдейт на WebStorm, подробно почитать можно туть
https://www.jetbrains.com/ru-ru/webstorm/whatsnew/

Чёт там потихоньку альфы Vue.js 3.3 выходят, кому интересно гляньте, а кому на эту тему есть, что рассказать рассказывайте в комментах)
https://github.com/vuejs/core/blob/main/CHANGELOG.md

#vuejs #histoire

Статейка на тему написания сторизов для компонентов Vue.js с помощью аналога Storybook - Histoire + Typescript
https://blog.logrocket.com/writing-interactive-component-stories-histoire-vue-3-typescript/

https://blog.logrocket.com/histoire-component-stories/

Тут кстати поподробнее про этот продукт

Chrome 112 начал поддерживать CSS Nesting! Официальный! Который теперь часть спецификации:
https://www.w3.org/TR/css-nesting-1/

.nesting {
color: hotpink;

> .is {
color: rebeccapurple;

> .awesome {
color: deeppink;
}
}
}

Тем временем подъехала новая версия Nuxt 3.4.0 🎊🎉

🛠️ Более простая конфигурация Devtools
🎁 Объектный синтаксис при создании плагинов
🪄 Transitions API для переходов между страницами

а так же много всего интересного, команда накста аж целый пост запилила в своем блоге https://nuxt.com/blog/v3-4

на самом деле в релизноутах сильно больше описано всякого, кому интересно обязательно заглядывайте 👀

https://github.com/nuxt/nuxt/releases/tag/v3.4.0

Сегодня конечно не четверг, но держите новый релиз Nuxt!

⚡️Обновили vue до v3.3.0
🙌 Обновили Nitropack до v2.4
⏰ Реализовали конфигурацию под разные environment

На самом деле там ещё много интересного, а я пойду обновлю накст у себя в проекте nuxi upgrade --force 😉


https://github.com/nuxt/nuxt/releases/tag/v3.5.0

В прошлую пятницу вышло большое обновление Nuxt v3.6.0, в этом релизе выкатили много всего

🧩 Дали возможность делать кастомный индикатор загрузки в spa режиме
⚡️ Улучшили производительность
🔥 Улучшили статичные серверные компоненты, теперь они не занимают основной бандл
🎨 Улучшили дедупликацию глобальных стилей
🎬 Подкрутили возможности для анимации страниц
✨ Добавили поддержку провайдеров, для генерации статических ресурсов (пока только для vercel и netlify)
💪 Улучшили поддержку типов
⚗️ Обновили Nitro до v2.5, там кстати много интересного, в том числе экспериментальная поддержка потокового рендеринга
🛠️ Добавили разных утилит для разработчиков модулей

Конечно же, ознакомиться со всем списком изменений можно в changelog

P.S. В ближайший месяц ждем версию 3.7, с еще большим списком улучшений 😉

#vue #vue3
https://habr.com/ru/articles/745012/

Всем дороу!

Правильно ли я понимаю, что если я у меня есть базовый интерфейс для эмитов, то заэкстендить с заменой типа значения я его не могу в новом синтаксисе?

Типа есть вот:

interface IBaseInputEmits {
'update:modelValue': [value: InputModelValueType]
'change': [value: Event]
}

И я не могу сделать

interface ISomeNewInput extends IBaseInputEmits {
'update:modelValue': [value: number | string]
'change': [value: number | string]
}

const emit = defineEmits<ISomeNewInput>()

Я вот что не пойму, вот есть у меня интерфейс для эмитов в новом синтаксисе

export interface IBaseInputEmits {
'update:modelValue': [value: InputModelValueType]
'focus': [value: Event]
'blur': [value: Event]
'input': [value: Event]
'change': [value: Event]
'keydown': [value: Event]
'keyup': [value: Event]
'request-start': [value: string | object]
'request-done': [value: string | object]
'request-failed': [value: string | object]
}

Я его пытаюсь использовать в defineEmits:

const emit = defineEmits<IBaseInputEmits>()

Почему шторму это не нравится?

Роадмап по Вую тут увидел
https://roadmap.sh/vue

Наканец та обновился шторм, новиночки туть

https://www.jetbrains.com/ru-ru/webstorm/whatsnew/

https://www.youtube.com/watch?v=y-hN5Q_lb9A

Ладно, кто ещё не видел посмотрите как Эван рассказывает о плюшках во Vue 3.3

И казалось бы, ну ввели новый удобный синтаксис для интерфейсов defineEmits в 3.3

Было так:

export interface IBaseEmits {
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}

А стало так:

export interface IBaseEmits {
  change: [id: number] 
  update: [value: string]
}

Но стоит этот интерфейс попытаться заюзать в defineEmits предварительно импортировав, получим ошибку

Issue тут: https://github.com/vuejs/core/issues/8457

И блять, вместо стандартного расширения интерфейса мне придется писать херню

defineEmits<IBaseEmits & {
keydown: [value: Event]
}>()

Выглядит как полная херота

Причём с пропсами это работает на изи, удобно чётко красиво:

import type {IBaseInputProps} from "~/types";

/**
* Autocomplete input props extended interface
*/
interface IAutocompleteProps extends IBaseInputProps {
debounce?: number;
options?: string[];
search?: Function;
minLength?: number;
maxSuggestions?: number;
aiSwitcher?: boolean;
}

/**
* Autocomplete input props object
*/
const props = withDefaults(defineProps<IAutocompleteProps>(), {
debounce: 100,
required: false,
search: undefined,
disabled: false,
minLength: 0,
maxSuggestions: 10,
aiSwitcher: false,
options: () => [],
});