Добавляет новый baseline by vitya-ne · Pull Request #1336 · doka-guide/platform

vitya-ne · 2025-09-27T18:03:03Z

Удаляет пакет web-features, содержащего базу baseline и нуждающегося в переодическом обновлении.
Добавляет веб-компонент <doka-baseline>:

<doka-baseline groupid="light-dark"></doka-baseline>

Репозиторий веб-компонента: https://github.com/vitya-ne/doka-baseline

Особенности:

перенос плашки в начало доки;
русификация;
показ версий браузеров при переходе к details;
показ даты с которого фича находится в статусе newly или widly;
при использовании параметра showFeatLink="true" показывает ссылку на страницу https://web-platform-dx.github.io c подробной информацией о фиче;
при использовании параметра showSpecLinks="true" показывает ссылки на спеку фичи;
показ состояния загрузки данных;

nasty23-star

Большое спасибо! этого очень не хватало<3

igsekor

@vitya-ne очень круто ❤️

Но есть нюансы...

Мы с самого начала все скрипты хранили в scripts, именно поэтому их не надо было отдельно подключать. Почему было выбрано решение поместить doka-baseline.js в отдельную папочку libs? Отсюда появились проблема с тем, что нарушена консистентность, и необходимость добавлять в .eleventy.js и meta.njk новые строки, хотя необходимости в этом не было.
Кажется хорошо бы добавить отступ снизу, чтобы было совсем хорошо:

furtivite · 2025-10-03T08:54:47Z

@vitya-ne очень круто ❤️

Кажется хорошо бы добавить отступ снизу, чтобы было совсем хорошо:

А может попробовать две ссылки внизу в одну строку поместить, будет немного компактнее?

vitya-ne · 2025-10-03T09:46:45Z

@igsekor, привет

Почему было выбрано решение поместить `doka-baseline.js` в отдельную папочку `libs`? Отсюда появились проблема с тем, что нарушена консистентность, и необходимость добавлять в `.eleventy.js` и `meta.njk` новые строки, хотя необходимости в этом не было.

Я сомневался куда лучше положить веб-компонент. Нет проблем, перенесу в scripts

vitya-ne · 2025-10-03T09:48:20Z

@furtivite, привет

А может попробовать две ссылки внизу в одну строку поместить, будет немного компактнее?

Да, можно попробовать, перенесу.

vitya-ne · 2025-10-03T09:50:33Z

@igsekor

2. Кажется хорошо бы добавить отступ снизу, чтобы было совсем хорошо:

Спасибо, исправлю. Вроде я это фиксил. Проверю

vitya-ne · 2025-10-03T15:51:10Z

@igsekor

Кажется хорошо бы добавить отступ снизу, чтобы было совсем хорошо:

Спасибо, исправлю. Вроде я это фиксил. Проверю

Не могу поймать проблему нижнего отступа. У тебя точно обновлённая версия пиара ?
Странно, что на твоём скриншоте нет версий браузеров.
У меня вот так:

igsekor · 2025-10-03T16:27:18Z

@igsekor

Кажется хорошо бы добавить отступ снизу, чтобы было совсем хорошо:

Спасибо, исправлю. Вроде я это фиксил. Проверю

Не могу поймать проблему нижнего отступа. У тебя точно обновлённая версия пиара ? Странно, что на твоём скриншоте нет версий браузеров. У меня вот так:

Обновил ещё раз и проверил. Действительно всё ок. Ты молодец! Хорошо получилось! ❤️

igsekor · 2025-10-03T16:30:22Z

А чем «Подробнее» от «Спецификация» отличаются? Надо бы, наверное, более точно назвать, как думаешь? Нет ли тут неоднозначности? А может быть и нет.... Не знаю, но сомнения есть. Что скажете? @solarrust @skorobaeus @TatianaFokina @HellSquirrel

vitya-ne · 2025-10-03T20:05:07Z

А чем «Подробнее» от «Спецификация» отличаются? Надо бы, наверное, более точно назвать, как думаешь?

'Подробнее' - это ссылка на страницу Web platform features explorer. Тоесть там подробности как фича выглядет с точки зрения baseline
'Спецификация' - это ссылка на спеку.

vitya-ne · 2025-10-04T09:23:06Z

@igsekor Я перенёс веб-компонент в папку src/scripts/web-components

monochromer · 2025-10-07T04:48:41Z

src/scripts/web-components/doka-baseline.build.js

Не стоит хранить минифицированную версию в репозитории. Тут нужны либо полные исходники, либо выносить оригинальный код в npm-пакет.

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

Полные исходники - не уверен, кто-то (что-то) же должно минимизировать код выполняющийся на стороне клиента.

npm-пакет - возможно, но хотелось бы сначала понимать, что код компонента готов, заапрувлен и его не нужно менять через день )

кто-то (что-то) же должно минимизировать код выполняющийся на стороне клиента.

Для этого есть бандлер

Для этого есть бандлер

ок. добавлю исходник )

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

import { LitElement } from 'lit';

Это нужно для того, чтобы бандлер смог включить лишь одну версию Lit, если его захочется использовать его где-то ещё.

да это Lit.
Звучит разумно, но не знаю как это осуществить. Сборка компонента делается рекомендованным конфигом Lit.

вот мои импорты из Lit:

@monochromer Вроде получилось, спасибо за комент

vitya-ne · 2025-10-07T06:51:52Z

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

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

vitya-ne · 2025-10-07T18:40:44Z

Добавил иконку экспандера; @StarHamster
Добавил резервирование места; @StarHamster
Изменил формат файла веб-компонента; @monochromer
поглядите, плиз

StarHamster · 2025-10-09T08:47:02Z

А почему их два?

vitya-ne · 2025-10-09T08:49:46Z

А почему их два?

В этой доке такой конфиг:

две группы -> две плашки

vitya-ne · 2025-10-09T08:51:38Z

А почему их два?

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

StarHamster · 2025-10-09T13:18:24Z

В MDN просто звёздочку лепят, мол, может не всё поддерживаться

Думаю, можно призвать @skorobaeus, чтобы обсудить, как оно лучше будет выглядеть

P.S. Кстати, скрин MDN с той же статьи align-self. У них и у Доки даты не совпадают. Я не понимаю, почему так(

vitya-ne · 2025-10-09T13:24:11Z

В MDN просто звёздочку лепят, мол, может не всё поддерживаться
P.S. Кстати, скрин MDN с той же статьи align-self. У них и у Доки даты не совпадают. Я не понимаю, почему так(

Данные которые отдаёт запрос, используемый в веб-компоненте - это только данные по группе, а не по фичи в группе.
MDN тянет какие-то доп. данные.

skorobaeus · 2025-10-13T17:43:05Z

А почему их два?

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

Я думаю, стоит попробовать. Две одинаковые плашки кофузят :)

vitya-ne · 2025-10-13T18:24:32Z

А почему их два?

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

Я думаю, стоит попробовать. Две одинаковые плашки кофузят :)

@skorobaeus @StarHamster
Добавил показ имён при условии что в конфиге несколько групп:

Добавляет показ состояния загрузки

vitya-ne · 2026-01-16T07:49:10Z

@igsekor @StarHamster Я учёл все (надеюсь) пожелания. Было бы здорово если бы вы посмотрели, на то как это выглядит сейчас и дали свой вердикт

github-actions · 2026-01-16T07:53:51Z

Превью контента из b3d428c опубликовано.

igsekor

Кажется, стало совсем здорово! Витя, ты молодец!

vitya-ne · 2026-01-29T12:03:11Z

@furtivite @igsekor @StarHamster @solarrust

Проблема

Основной недостаток нового подхода: <doka-baseline> использует только информацию о группе фичи (ID).

Например:

<doka-baseline groupid="light-dark"></doka-baseline>

На web-platform-dx/web-features для light-dark простой конфиг: CSS-свойство === group id.

Но для многих CSS-свойств, это совсем не так. Яркий пример Anchor positioning:
Полностью поддержки нет нигде, но очень многие отдельные свойства поддерживает Chrome и чуть меньшее кол-во Firefox: сложный конфиг

Тоесть для точности (см. MDN) нужно иметь возможность передать не только groupid но и список свойств описываемых в доке:
Пример доки: anchor-size()
Конфиг из статьи:

baseline:
  - group: anchor-positioning
    features:
      - css.properties.width.anchor-size
      - css.properties.height.anchor-size
      - css.properties.inline-size.anchor-size
      - css.properties.block-size.anchor-size

Предложение

можно доработать виджет, добавив запрос к файлу конфига: https://github.com/web-platform-dx/web-features/blob/main/features/ID.yml.dist и парсить в нём информацию о необходимых свойствах и поддержке.
оставить пакет web-features (MDN тоже его использует) и подтягивать данные о свойствах оттуда. Тогда можно передавать в виджет флаги поддержки требуемых свойств. Это потребует регулярного обновления пакета в платформе.

Вопрос: Как вы считаете, что лучше ?

igsekor · 2026-01-31T10:08:02Z

Вопрос: Как вы считаете, что лучше ?

Может быть сделать отдельный атрибут features для обозначения списка всех фич, которые нужно поддержать? Можно указывать, например, через ;, как это сделано для атрибута style.

vitya-ne · 2026-01-31T16:57:24Z

Может быть сделать отдельный атрибут features для обозначения списка всех фич, которые нужно поддержать? Можно указывать, например, через ;, как это сделано для атрибута style.

Вопрос не совсем в синтаксисе, а в том как именно проверять фичи: делать доп. запрос или использовать данные web-features.

igsekor · 2026-02-01T13:32:14Z

Вопрос не совсем в синтаксисе, а в том как именно проверять фичи: делать доп. запрос или использовать данные web-features.

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

vitya-ne added 2 commits September 27, 2025 20:41

Удаляет пакет web-features

93d77ab

Добавляет doka-baseline

d2ff87d

vitya-ne requested review from HellSquirrel, furtivite, igsekor and solarrust as code owners September 27, 2025 18:03

Корректирует стили

deb6d36

nasty23-star approved these changes Oct 1, 2025

View reviewed changes

igsekor requested changes Oct 3, 2025

View reviewed changes

vitya-ne added 3 commits October 4, 2025 12:21

Переносит веб-компонет в src/scripts/web-components

0a14cfc

Добавляет поддержку состояния загрузки

1e547a4

Корректирует отступы

935bc89

Удаляет ссылки из дескрипшина, кооректирует текст

7738dc2

This comment was marked as resolved.

Sign in to view

monochromer reviewed Oct 7, 2025

View reviewed changes

vitya-ne added 2 commits October 7, 2025 21:31

Меняет формат исходника

b8cea1c

Резервирует место

d590291

vitya-ne added 2 commits October 7, 2025 22:22

Исправляет сборку: Lit пакеты как зависимость платформы

94c1bf9

Исправляет резервацию места

f2b83fc

Удаляет web-components из игнора

26b6bf0

Добавляет показ имени группы в случае нескольких групп в конфиге

766e04c

vitya-ne added 3 commits January 15, 2026 11:05

Добавляет ecmaVersion для поддержки class fields

085d83f

Добавляет показ состояния загрузки

Добавляет показ состояния загрузки

f7e9e8a

Показывает ссылки в одну строку

b3d428c

igsekor self-requested a review January 29, 2026 11:32

igsekor approved these changes Jan 29, 2026

View reviewed changes

igsekor assigned vitya-ne Jan 29, 2026

Comments

Conversation

vitya-ne commented Sep 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nasty23-star left a comment

Choose a reason for hiding this comment

Uh oh!

igsekor left a comment

Choose a reason for hiding this comment

Uh oh!

furtivite commented Oct 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vitya-ne commented Oct 3, 2025

Uh oh!

vitya-ne commented Oct 3, 2025

Uh oh!

vitya-ne commented Oct 3, 2025

Uh oh!

vitya-ne commented Oct 3, 2025

Uh oh!

igsekor commented Oct 3, 2025

Uh oh!

igsekor commented Oct 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vitya-ne commented Oct 3, 2025

Uh oh!

vitya-ne commented Oct 4, 2025

Uh oh!

This comment was marked as resolved.

Uh oh!

monochromer Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

vitya-ne Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

monochromer Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

vitya-ne Oct 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

monochromer Oct 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vitya-ne Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

vitya-ne Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

vitya-ne Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

vitya-ne commented Oct 7, 2025

Uh oh!

vitya-ne commented Oct 7, 2025

Uh oh!

StarHamster commented Oct 9, 2025

Uh oh!

vitya-ne commented Oct 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vitya-ne commented Oct 9, 2025

Uh oh!

StarHamster commented Oct 9, 2025

Uh oh!

vitya-ne commented Oct 9, 2025

Uh oh!

skorobaeus commented Oct 13, 2025

Uh oh!

vitya-ne commented Oct 13, 2025

Uh oh!

vitya-ne commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

vitya-ne commented Sep 27, 2025 •

edited

Loading

furtivite commented Oct 3, 2025 •

edited

Loading

igsekor commented Oct 3, 2025 •

edited

Loading

vitya-ne Oct 7, 2025 •

edited

Loading

monochromer Oct 7, 2025 •

edited

Loading

vitya-ne commented Oct 9, 2025 •

edited

Loading

vitya-ne commented Jan 16, 2026 •

edited

Loading