• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Moja biblioteka ułatwiająca korzystanie z metodologi BEM w React JS

+7 głosów
147 wizyt
pytanie zadane 14 lipca 2018 w Nasze projekty przez rafal612b Nałogowiec (46,000 p.)

Hej przez ostatnie dni stworzyłem biblioteczkę do BEMa ponieważ na NPM nie znalazłem żadnej fajnej, którą mógłbym wykorzystać.

Zapraszam do oceniania i komentowania. Co do kodu wiem, że nie zastosowałem się do DRY w komponentach Block i Element i będę to poprawiać ;)

https://www.npmjs.com/package/react-simple-bem

Jest to moja pierwsza paczka na NPM, więc mam przy okazji kilka pytań do was.

Czemu gdy wpisze "react bem" w wyszukiwarce NPMa nie znajduje mojej paczki? Musze coś zrobić aby paczka była widoczna czy trzeba po prostu poczekać? 

Na liście paczek widnieją 3 słupki  (popularność, jakość, utrzymanie)  czy gdzieś poza listą paczek jestem w stanie sprawdzić jaki wynik ma moja paczka ? Jak pracować nad wynikiem jakości i utrzymania?

Jak to jest, że wczoraj wrzuciłem pierwsze wersje w wyszukiwarce paczki nie widać  i zdobyłem 74 pobrania?

 

3 odpowiedzi

+3 głosów
odpowiedź 3 lutego przez Tomek Sochacki Mędrzec (186,690 p.)

Nie pracuję na co dzień zbyt dużo z reactem, a jak już muszę to szczerze mówiąc nie widzę za bardzo potrzeby wrapowania czegoś w dodatkowe elementy ale to nie ważne, w wolniejszej chwili chętnie spojrzę na tę libkę, ale masz ode mnie duży plusik za fajną dokumentację, bo to nie jest wcale takie oczywiste gdy ktoś robi pierwsze paczki npm :) i drugi plusik za testy (nie analizowałem ich, zakładam że działają i testują co mają testować:).

Fajna robota, trzymaj tak dalej, na pewno jest to fajny punkt do CV, dużo lepszy w moim odczuciu niż tysiąc zakodowanych stronek WP itp.

Taka sugestia, warto dodać jakieś CI, info o npm na GH, np.:

[![NPM Version][npm-version]][npm-url]
[![Build Status][travis-image]][travis-url]
[![License][license-image]][license-url]
[![Downloads][downloads-image]][npm-url]

stworzy Ci to te "kolorowe" paski na górze, w moim odczuciu nadaje to "profesjonalizmu" libce, i od razu widać np. czy wszystkie testy idą ok.

komentarz 4 lutego przez rafal612b Nałogowiec (46,000 p.)
Hej dzięki za odpowiedź ! ;) Pytanie w sumie zadałem kilka miesięcy temu (Wczoraj dodałem tylko post o aktualizacji).

Bardzo chętnie zrobiłbym kolorowe paski tylko nie znalazłem sposobu na darmowe odpalanie CI na github. A najchętniej pokazał bym procentowe pokrycie testami oraz właśnie build. Znasz jakieś darmowe CI ? Robiłeś już coś takiego ?
komentarz 9 lutego przez rafal612b Nałogowiec (46,000 p.)

@Tomek Sochacki, Udało mi się wprowadzić ikonki ! :D Dodałem test aby potwierdzić to ze nie generuje żadnych dodatkowych elementów HTML. https://github.com/Bajdzis/react-simple-bem/blob/master/spec/snapshots.BemNode.Spec.js Pozmieniałem też kilka fragmentów kodu uwzględniając uwagi Comandeera

+3 głosów
odpowiedź 3 lutego przez Comandeer Mentor (458,640 p.)

Tak szczerze to wydaje mi się, że ta biblioteka ma o wiele większy sens jako same dekoratory pozwalające zamienić nasze komponenty w bloki i elementy o określonych nazwach (coś podobnego do tego, co robią styled-components) niż jako po prostu HOC opakowujący nasze komponenty w BEM-ową strukturę. W tym drugim przypadku powstaną najprawdopodobniej nadmiarowe elementy DOM.

Jak to jest, że wczoraj wrzuciłem pierwsze wersje w wyszukiwarce paczki nie widać i zdobyłem 74 pobrania?

Wszelkiego rodzaju automaty, CI itd.

komentarz 4 lutego przez rafal612b Nałogowiec (46,000 p.)

Hej dzięki za odpowiedź ! ;) Pytanie w sumie zadałem kilka miesięcy temu (Wczoraj dodałem tylko post o aktualizacji). Na który poniekąd odpowiedziałeś. Obecnie do paczki wrzucałem katalog SRC abym mógł w swojej aplikacji zrobić 

module.exports = {
    [...]
    resolve: {
        alias: {
            ['react-simple-bem']: __dirname + '/node_modules/react-simple-bem/index.js'
        }
    }
};

Co zapewniało mi lepszy tree-shaking z którym miałem problemy. Wychodzi na to ze muszę poczytać o formatach CJS i ESM. Ich nazwy na pewno się przydadzą :) 

Wielkie dzięki za Code Review w weekend prawdopodobnie wprowadzę wszystkie poprawki do kodu.

 W tym drugim przypadku powstaną najprawdopodobniej nadmiarowe elementy DOM.

Testowałem i output z README pokrywa się z rzeczywistością. Nie mamy żadnych nadmiarowych elementów HTML.

komentarz 9 lutego przez rafal612b Nałogowiec (46,000 p.)

@Comandeer, Udało mi się zoptymalizować tę funkcje z zbyt duża ilością filtrów. Pomysł z stworzeniem dodatkowo BemNode sprawdził się super. Wygląda to znacznie lepiej. Zastanawiam się czy dało by się stworzyć to w taki sposób aby móc dziedziczyć z mojej klasy zamiast opakowywać to w dekorator. I czy było by to dobrym pomysłem? JSX Trochę przeszkadza mi w wyobrażaniu sobie dziedziczenia przez extend.

https://github.com/Bajdzis/react-simple-bem/blob/dd443eb37803c913de0c478eec14e825b730f08b/src/helpers.js#L105

W tym miejscu nie mogę użyć Object.values bo potrzebuje zwrócić klucze obiektu. 

CJS i ESM zostawię na następny weekend.

 

PS.

Dodałem też test aby potwierdzić to ze nie generuje żadnych dodatkowych elementów HTML. https://github.com/Bajdzis/react-simple-bem/blob/master/spec/snapshots.BemNode.Spec.js

0 głosów
odpowiedź 3 lutego przez rafal612b Nałogowiec (46,000 p.)

AKTUALIZACJA:

Hej dopisałem kilka funkcji do mojej biblioteki jeśli ktoś używa zachęcam do aktualizacji ;)

https://www.npmjs.com/package/react-simple-bem

Biblioteka powinna zajmować mniej miejsca dzięki zmianie sposobu exportowania klas i funkcji. Dodałem nowy props 'forwardedRef' oraz umożliwiłem mieszanie nazw elementów między wieloma nazwami bloków.

Biblioteka jest domyślnie transpilowana przez babel jednak możecie w swoich projektach zmienić ścieżkę do tego modułu aby kompilować bibliotekę samodzielnie. Wówczas należy użyć ustawień w swoim webpacku :

module.exports = {
    [...]
    resolve: {
        alias: {
            ['react-simple-bem']: __dirname + '/node_modules/react-simple-bem/index.js'
        }
    }
};

Zastanawiam się czy jest to dobre rozwiązanie ? 

Podobne pytania

0 głosów
2 odpowiedzi 66 wizyt
0 głosów
1 odpowiedź 103 wizyt
pytanie zadane 9 października 2018 w JavaScript, jQuery, AJAX przez Votex Początkujący (310 p.)
–1 głos
1 odpowiedź 71 wizyt
pytanie zadane 15 lipca 2018 w JavaScript, jQuery, AJAX przez `Krzychuu Stary wyjadacz (12,940 p.)
Porady nie od parady
Zadając pytanie postaraj się o szczegółowe opisanie problemu oraz udostępnienie wszystkich istotnych informacji (kody źródłowe, zrzuty ekranu itp.).Opisanie problemu

65,641 zapytań

112,265 odpowiedzi

236,884 komentarzy

46,639 pasjonatów

Przeglądających: 151
Pasjonatów: 5 Gości: 146

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...