plasma-web/plasma-b2c: Добавлена сборка без styled-components #942

Yeti-or · 2023-12-21T20:56:22Z

Добавили возможность использовать `plasma-web` & `plasma-b2c` без `styled-components`

Пример использования:

import { TextArea } from '@salutejs/plasma-web/css';

What/why changed

Добавлены скрипты которые генерируют нужную структуру из тех компонентов которые есть в plasma-new-hope
дальше подрубаемся rollup и генерируем стили

📦 Published PR as canary version: Canary Versions

✨ Test out this PR locally via:

npm install @salutejs/plasma-b2c@1.280.1-canary.942.7800621499.0
npm install @salutejs/plasma-web@1.280.1-canary.942.7800621499.0
# or 
yarn add @salutejs/plasma-b2c@1.280.1-canary.942.7800621499.0
yarn add @salutejs/plasma-web@1.280.1-canary.942.7800621499.0

Yeti-or · 2023-12-21T20:56:56Z

packages/plasma-web/src/components/Spinner/Spinner.tsx

@@ -11,4 +10,4 @@ const SpinnerComponent = component(mergedConfig) as React.FunctionComponent<Spin
 /**
 * Компонент для отображения индикатора загрузки.
 */
-export const Spinner = styled(SpinnerComponent)``;
+export const Spinner = SpinnerComponent;


@neretin-trike напомни зачем тут это нужно было

ну он в styled был обёрнут (и раньше так было, до перевода на новую архитектуру) для того, чтобы не сломалось у тех, кто возможно стилизовал Spinner через styled-component и обращался к нему как классу, типа:

const StyledWrapper = styled.div` ${Spinner} { background: blue } `

Блин чёт я не понимаю тогда как это разрулить :/

Я это проверил, и это работает только через styled от SC. Так что на линарии этот функционал не будет работать. Пруф
CC: @Yeti-or @neretin-trike

Salute-Eva · 2023-12-21T20:58:48Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-942/

github-actions · 2023-12-21T21:07:19Z

⚡ Component performance testing

Result: 🟢 OK

Salute-Eva · 2023-12-21T21:09:03Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-942/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-942/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-942/web-storybook/

Salute-Eva · 2024-02-01T20:39:01Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-942/

Salute-Eva · 2024-02-02T09:48:52Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-942/

Salute-Eva · 2024-02-02T12:56:45Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-942/

Salute-Eva · 2024-02-02T13:03:57Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-942/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-942/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-942/web-storybook/

.github/workflows/documentation-pr.yml

packages/plasma-b2c/scripts/copy-linaria-components.sh

packages/plasma-b2c/src/components/Spinner/Spinner.tsx

packages/plasma-web/rollup.config.mjs

Yeti-or · 2024-02-05T13:23:01Z

packages/plasma-b2c/scripts/copy-linaria-components.sh

@@ -30,3 +30,6 @@ done;
 # plasma-new-hope/styled-components => plasma-new-hope
 perl -p -i -e "s/\/styled-components//g" $files

+#TODO: #1024 удалить обертку styled в спиннере
+perl -p -i -e "s/import styled from 'styled-components';//g" src-css/components/Spinner/Spinner.tsx
+perl -p -i -e "s/styled\(SpinnerComponent\)\`\`/SpinnerComponent/g" src-css/components/Spinner/Spinner.tsx


ааа ты тут просто удаляешь обертку и в линарии идет FunctionComponent

В линарии идет сразу компонент, без styled, ибо он запрещен в рантайме и это в принципе бессмысленно.

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

const StyledWrapper = styled.div` ${Spinner} { background: blue } `

Думаю, что да, но зачем нам это?

ну это нужно было проверить, чтобы убедиться, что у пользователей, которые вот таким образом спиннер стилизуют, поменяв путь с plasma-b2c на plasma-b2c/css, не сломается сборка

А зачем ребятам на sc импортировать /css сборку? Мы же сделали этот фикс, чтобы спиннер был обернут в styled из sc, чтобы на сборке на стайледах все было по-прежнему.

ну когда мы обсуждали это, то как раз пришли к такому мнению, что те, кто будут постепенно переезжать с styled-compoennts на линарию, будут иметь и те, и другие импорты (и зависимости)

А сборку /css будут юзать те, у кого нет sc (хотя таковых на данный момент нет). И там я не вижу смысла оборачивать именно Спиннер в styled из линарии, ибо зачем?

не, я и не говорю, что оборачивать нужно. Но нужно убедиться, что у пользователей не будет проблем с обратной совместимостью уже существующих компонент

А, ну эти проблемы точно будут, и потребуют ручного устранения, ибо конструкция
${Spinner} { background: blue }
ожидает только styled-подобный компонент из SC, и ни стайлед от линарии, ни обычный react.element как минимум не пройдут проверку типов, а если и пройдут, то работать это не будет.

а такая конструкция валидна только для styled.tagname компонент получается? 🤔

Это вполне валидный паттерн, как для SC так и для линарии. https://github.com/callstack/linaria/blob/master/docs/BASICS.md#referring-to-another-component-or-class-name

… build

Salute-Eva · 2024-02-06T13:44:04Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-942/

Salute-Eva · 2024-02-06T13:52:42Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-942/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-942/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-942/web-storybook/

Yeti-or

Давайте вольем текущее состояние а дальше будем править уже по мере проблем

neretin-trike · 2024-02-12T08:01:16Z

packages/plasma-web/scripts/copy-linaria-components.sh

+touch src-css/index.ts
+touch src-css/index.d.ts
+for component in $components; do
+    if [[ "$component" != "Switch" ]]; then


Решили пока оставить так, в этом issue нужно будет потом починить

Salute-Eva · 2024-02-12T08:28:53Z

🚀 This PR is included in version: @salutejs/plasma-b2c@1.281.1-dev.0, @salutejs/plasma-temple-docs@0.219.1-dev.0, @salutejs/plasma-ui-docs@0.268.1-dev.0, @salutejs/plasma-web-docs@0.235.1-dev.0, @salutejs/plasma-web@1.281.1-dev.0, @salutejs/plasma-website@0.243.1-dev.0 🚀

Salute-Eva · 2024-02-12T08:28:56Z

🚀 This PR is included in version: @salutejs/plasma-b2c@1.281.1-dev.0, @salutejs/plasma-temple-docs@0.219.1-dev.0, @salutejs/plasma-ui-docs@0.268.1-dev.0, @salutejs/plasma-web-docs@0.235.1-dev.0, @salutejs/plasma-web@1.281.1-dev.0, @salutejs/plasma-website@0.243.1-dev.0 🚀

Salute-Eva · 2024-02-12T08:28:59Z

🚀 This PR is included in version: @salutejs/plasma-b2c@1.281.1-dev.0, @salutejs/plasma-temple-docs@0.219.1-dev.0, @salutejs/plasma-ui-docs@0.268.1-dev.0, @salutejs/plasma-web-docs@0.235.1-dev.0, @salutejs/plasma-web@1.281.1-dev.0, @salutejs/plasma-website@0.243.1-dev.0 🚀

Yeti-or added the plasma-components label Dec 21, 2023

Yeti-or temporarily deployed to internal December 21, 2023 20:56 — with GitHub Actions Inactive

Yeti-or commented Dec 21, 2023

View reviewed changes

Yeti-or marked this pull request as ready for review December 21, 2023 20:58

Yeti-or requested review from neretin-trike, Yakutoc and kayman233 as code owners December 21, 2023 20:58

Yakutoc force-pushed the dev branch from 65cbf71 to 167243b Compare December 22, 2023 05:04

Yeti-or marked this pull request as draft December 24, 2023 12:22

shuga2704 self-assigned this Jan 26, 2024

shuga2704 temporarily deployed to internal February 1, 2024 20:36 — with GitHub Actions Inactive

shuga2704 marked this pull request as ready for review February 1, 2024 20:42

shuga2704 force-pushed the yeti-or.add-css-build branch from 976f614 to 0562dab Compare February 2, 2024 09:46

shuga2704 temporarily deployed to internal February 2, 2024 09:46 — with GitHub Actions Inactive

shuga2704 force-pushed the yeti-or.add-css-build branch from 0562dab to d25dac8 Compare February 2, 2024 10:38

shuga2704 temporarily deployed to internal February 2, 2024 10:38 — with GitHub Actions Inactive

Yeti-or commented Feb 5, 2024

View reviewed changes

Yeti-or and others added 3 commits February 6, 2024 16:40

build(plasma-b2c): add css build

ca0039b

build(plasma-web): add css build

9f56037

feat(plasma-b2c, plasma-web): Wrapped Spinner up in styled only in SC…

faa2c1f

… build

shuga2704 force-pushed the yeti-or.add-css-build branch from 9d52882 to faa2c1f Compare February 6, 2024 13:41

shuga2704 temporarily deployed to internal February 6, 2024 13:41 — with GitHub Actions Inactive

Yeti-or commented Feb 12, 2024

View reviewed changes

Yeti-or removed request for Yakutoc and kayman233 February 12, 2024 07:37

shuga2704 self-requested a review February 12, 2024 07:39

shuga2704 approved these changes Feb 12, 2024

View reviewed changes

neretin-trike reviewed Feb 12, 2024

View reviewed changes

neretin-trike approved these changes Feb 12, 2024

View reviewed changes

shuga2704 added this pull request to the merge queue Feb 12, 2024

Merged via the queue into dev with commit fb1a112 Feb 12, 2024
24 of 25 checks passed

shuga2704 deleted the yeti-or.add-css-build branch February 12, 2024 08:15

Salute-Eva added the prerelease label Feb 12, 2024

Salute-Eva mentioned this pull request Feb 14, 2024

Release by 14.02.2024 #1047

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

plasma-web/plasma-b2c: Добавлена сборка без styled-components #942

plasma-web/plasma-b2c: Добавлена сборка без styled-components #942

Yeti-or commented Dec 21, 2023 •

edited by Salute-Eva

Yeti-or Dec 21, 2023

neretin-trike Dec 22, 2023 •

edited

Yeti-or Dec 22, 2023

shuga2704 Jan 30, 2024

Salute-Eva commented Dec 21, 2023

github-actions bot commented Dec 21, 2023

Salute-Eva commented Dec 21, 2023

Salute-Eva commented Feb 1, 2024

Salute-Eva commented Feb 2, 2024

Salute-Eva commented Feb 2, 2024

Salute-Eva commented Feb 2, 2024

Yeti-or Feb 5, 2024

shuga2704 Feb 5, 2024

neretin-trike Feb 6, 2024

shuga2704 Feb 6, 2024

neretin-trike Feb 6, 2024

neretin-trike Feb 6, 2024 •

edited

neretin-trike Feb 6, 2024

shuga2704 Feb 6, 2024

neretin-trike Feb 6, 2024

shuga2704 Feb 6, 2024

Salute-Eva commented Feb 6, 2024

Salute-Eva commented Feb 6, 2024

Yeti-or left a comment

neretin-trike Feb 12, 2024

Salute-Eva commented Feb 12, 2024

Salute-Eva commented Feb 12, 2024

Salute-Eva commented Feb 12, 2024

plasma-web/plasma-b2c: Добавлена сборка без styled-components #942

plasma-web/plasma-b2c: Добавлена сборка без styled-components #942

Conversation

Yeti-or commented Dec 21, 2023 • edited by Salute-Eva

Добавили возможность использовать plasma-web & plasma-b2c без styled-components

What/why changed

Choose a reason for hiding this comment

neretin-trike Dec 22, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Salute-Eva commented Dec 21, 2023

github-actions bot commented Dec 21, 2023

⚡ Component performance testing

Salute-Eva commented Dec 21, 2023

Salute-Eva commented Feb 1, 2024

Salute-Eva commented Feb 2, 2024

Salute-Eva commented Feb 2, 2024

Salute-Eva commented Feb 2, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

neretin-trike Feb 6, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Salute-Eva commented Feb 6, 2024

Salute-Eva commented Feb 6, 2024

Yeti-or left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Salute-Eva commented Feb 12, 2024

Salute-Eva commented Feb 12, 2024

Salute-Eva commented Feb 12, 2024

Yeti-or commented Dec 21, 2023 •

edited by Salute-Eva

Добавили возможность использовать `plasma-web` & `plasma-b2c` без `styled-components`

neretin-trike Dec 22, 2023 •

edited

neretin-trike Feb 6, 2024 •

edited