Еще одно интервью Эвана о Vue, Vite, VoidZero и будущем JavaScript Tooling

#evanyou #video #interview

FilePond

Подсказали красивый file uploader компонент

15K+ звезд, много плагинов,, правда, довольно увесистый - 100Кб+

На JS. Подключается монтированием к элементу.

<script setup lang="ts">
import * as FilePond from "filepond";
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
import { onMounted, ref, useTemplateRef } from "vue";
import "filepond/dist/filepond.min.css";

const fileInput = useTemplateRef("fileInput");

FilePond.registerPlugin(FilePondPluginFileValidateType);

onMounted(() => {
  FilePond.setOptions({
    acceptedFileTypes: ["image/*", "application/pdf"],
    server: "api/upload/",
  });
  FilePond.create(fileInput.value);
});
</script>

<template>
  <div class="analysis-view">
    <h2>Analysis upload</h2>
    <p></p>
    <input
      ref="fileInput"
      type="file"
      class="filepond"
      name="filepond"
      multiple
      data-allow-reorder="true"
      data-max-file-size="3MB"
      data-max-files="3"
    />
  </div>
</template>

Вот, кстати, один из вариантов использовать динамические импорты/роуты - в мобильной версии drag-n-drop не нужен, поэтому можно обойтись более простым file input и сэкономить на бандле.

#lib

Довольно свежие Vue сниппеты для VS Code, среди большого количества хлама.

Vue 3 VS Code Snippets

#vscode #tip

Появление на фронтенде всевозможных фреймворков, методологий и прочей ереси - это woke-идеология

#esse

В команде Nuxt-а при выводе Nitro на внешний рынок внезапно осознали, что автоимпорты - плохо. И попытались их сделать опциональными. Но вход - рубль, выход - два.

Дело настолько деликатное, что ветку даже закрыли для просмотра посторонними.

Автоимпорты имеют существенные проблемы:
- не весь тулинг (IDE, Volar etc) их понимает, не всегда будут подсказки;
- код с ними выглядит гораздо менее явным, чем с обычными импортами в IDE;
- полная нечитабельность на площадках типа GitHub;

#goodpractices #nuxt

#tip #architecture #meme

Уже и индийские vue.js митапы идут.

Где в странах ex-СССР?

Московская тусовка, ау?

#event

Случайно нашел неплохой бесплатный хостинг для бэка

alwaysdata.net

До 100Mb, MySQL/PostgreSQL с портом наружу, PHP, Python, Ruby, Node.js, Elixir, Java, Deno, .NET , SSH, подключение кастомного домена

Год использую - всё ровно.

#webhosting

Сегодня этому каналу 1 год.

Время вспомнить первый пост

По сей день это лучший учебник для изучения Vue.js на русском языке.

#vuefaq #learning #architecture #book

Сегодня - читальный зал

Белобров Попов
Груз ВКЖ-65

#offtop

Для реализации своих tooltip-ов и "выпадашек", наверное, самым оптимальный вариантом является использование современной и минималистичной библиотеки Floating UI

Их Vue адаптер мне не подошел. Вот простой вариант своего тултипа на их чистом js пакете.

В данном случае содержимое тултипа является ребенком элемента, на котором его надо показать. Возможны другие варианты реализации, включая кастомную директиву.

Обертывать в Tooltip компонент то, на чем его надо показать, имхо, извращение.

<script setup lang="ts">
import { computePosition, flip, offset, shift } from "@floating-ui/dom";
import { onMounted, ref, useTemplateRef } from "vue";

const popover = useTemplateRef("popover");

onMounted(() => {
  popover.value.showPopover();
  computePosition(popover.value.parentElement, popover.value, {
    placement: "left",
    middleware: [flip(), shift({ padding: 5 }), offset(10)],
  }).then(({ x, y }) => {
    Object.assign(popover.value.style, {
      left: `${x}px`,
      top: `${y}px`,
    });
  });
});
</script>

<template>
  <div
    ref="popover"
    class="popover"
    popover
    role="tooltip"
  >
    <div class="tooltip-body">Hello</div>    
  </div>
</template>

<style scoped>
.popover {
  position: fixed;
  width: max-content;
  top: 0;
  left: 0;
  margin: 0;
  padding: 1em;
  text-align: left;
  border: 1px solid var(--bbl-c-border);
  border-radius: 5px;
  max-width: 400px;
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.12),
    0 3px 9px rgba(0, 0, 0, 0.12);
  border-color: #bbb;
}
  </style>

#lib #tooltip #dropdown

Чтобы немного нейтрализовать психологическую травму, нанесенную TypeScript, вот на ночь четыре капли седатива от JS

#js

Автор русского перевода документации VitePress перевел и Vite документацию и просит сделать ревью его PR , чтобы его пропустили.

#vite #i18n

Вышел vue-router 4.5.0

Из примечательного - по инициативе Эвана на router-link появился prop view-transition, который задействует нативный View Transitions API для перехода между роутами.

<template>
  <RouterLink to="/some-page" view-transition>
    Go to some page
  </RouterLink>
</template>

Анимацию которого можно кастомизировать CSS стилями

Может быть быстрее вьюшного <Transition> и уж точно удобней в записи (по сравнению с конструкцией с router-view ). Но не такой функциональный, для простых переходов.

#router #animation #css

Неожиданно вышел Vite 6.0

Больших и даже просто значимых изменений практически нет. Предполагается, что это последний мажорный стабильный релиз перед заносом в Vite Rolldown-a и прочей Voidzero-шной машинерии.

#vite

Тут опросик замутили

Пишут, что уже несколько лет его проводят, но не попадался такой.

Эван, вроде, одобрил. Можно поучаствовать.

#vuejs #survey #stats

Вышел отчет State of Frontend 2024

Кроме того, что JQuery еще использует пятая часть опрошенных (а основная часть jq разрабов просто игнорирует подобные опросы), особо ничего интересного

#stats #survey