Одна из проблем при разработке нативных js бандлеров типа Rolldown и Rspack - они должны работать в WASM для возможности их запуска в браузере ( StackBlitz, Bolt.new и т.п.)

Это довольно сложно реализовать, и Rspack отказался от этого. Но Rolldown, по словам Эвана Ю, будет поддерживать билд в браузерных средах и уже показывает хорошую производительность в них.

#rolldown #rspack

Комментарии к прошлому посту ярко показывают, стоит ли тащить в свой проект чудо природы под названием FSD.

Модульная архитектура даёт понятную четкую декомпозицию проекта, хорошо разделяя ShoppingCart от UserAccount, например. Позволяя видеть в файловой панели только относящиеся к нужному модулю ресурсы, и работать над модулями независимо.

Общие элементы типа BaseButton можно держать в App, а можно выделить под них отдельный проект (вроде своей дизайн системы) и подключать папкой ui через git submodules. Так же, как и объекты типа api.

Между модулем и однофайловым компонентом есть промежуточные структуры - виджеты типа FileUploader, например, в которых есть чисто их композаблы, утилиты, компоненты, типы. Их удобно держать в своих папках без разделения по поддиректориям.

Довольно сложный вопрос, где держать и как наименовать файлы с бизнес-логикой - как реактивной, так и обычной. Однозначного совета пока нет. Скорей тут надо использовать программерские подходы из обычного ООП.

#architecture

Понадобилось как-то стилизовать содержимое v\-html (html, преобразованный из markdown) в нескольких компонентах

Прокидывать всё через :deep() было как-то совсем грустно, поэтому придумал такой вариант

```
// import в main.ts или так один раз:

```

```
// md.css
.md {
table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
display: block;
overflow-x: auto;

...
```

на элементе с v\-html в шаблоне ставится class="md"

#css

Не стоит завидовать программистам с родным английским

```
включить "отмеченный" из "отмеченный";
включить "vue" из "vue";
включить "использоватьМаршрут" из "vue-маршрутизатор";

постоян маршрут = использоватьМаршрут();

консоль.регистрировать(маршрут.параметры.ид);

постоян свойства = определитьСвойства<{
рекомендация: Рекомендация;
}>();

постоян htmlДанные = вычисляемое(() => {
если (!свойства.рекомендация) {
вернуть "";
}
постоян данные = JSON.разобрать(свойства.рекомендация.данные);
вернуть отмеченный.преобразовать(данные.рекомендация) как строка;
});
```

#humor

Варианты определения пропсов с дефолтными значениями во Vue:

```
// runtime declaration:

const props = defineProps({
foo: { type: String, required: true },
bar: { Type: Number, default: 0 },
});
```

```
// type-based declaration:

const props = withDefaults(defineProps<{
foo: string
bar?: number
}>(), {
bar: 0,
});
```

```
type Variant = "default" | "primary" | "secondary"

const props = defineProps({
variant: {
type: String as PropType,
default: "default"
}
})
```

По задаче выше

Сплэш-скрин (стартовая заставка) значительно улучшает UX. Во Vue он ставится в index.html и отключается в onMounted() App.vue

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

CSS

Например, прилетит стиль (или в конце html файла, или css файла)

.splash\-screen { display: none; }

Ещё вариант подсказали в комментариях - через :has(). Возможны и другие способы.

HTML

Интересней с HTML. Для этого можно использовать Declarative Shadow DOM (часть Web Components), который позволяет строить Shadow DOM без JS. У Shadow Root есть слоты. Слот будет показывать дефолтное значение ( в нашем случае блок на весь экран с лоадером), пока не прогрузится <div slot="splash\-screen">, который его затрет.

```

```

#challenge #css #html

Задача:

Есть тяжелый сайт. Надо для хорошего UX показать какой-нибудь сплэш-скрин (глобальный прелоадер) в самом начале и отключить его после загрузки всех (по возможности) ресурсов и готовности сайта

Как это сделать без JS?

Задача имеет минимум два решения - через CSS и через HTML

#challenge #css #html