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

Question

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?

 

Answer 1

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.

Comments

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 ?

---

@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

Answer 2

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.

• https://github.com/Bajdzis/react-simple-bem/blob/dd443eb37803c913de0c478eec14e825b730f08b/src/components/Block/index.js – czemu komponenty są w osobnych katalogach, skoro można z powodzeniem uprościć to do components/Block.js itd.?

• https://github.com/Bajdzis/react-simple-bem/blob/dd443eb37803c913de0c478eec14e825b730f08b/src/components/Tag/index.js – czy tego typu generyczne komponenty są na pewno potrzebne? Wydaje się, że ten komponent nie robi absolutnie nic i jest potrzebny tylko po to, by wygenerować komponent przy użyciu dekoratora. A z tego co widzę przekazanie po prostu nazwy tagu zamiast tego komponentu działa tak samo.

• https://github.com/Bajdzis/react-simple-bem/blob/dd443eb37803c913de0c478eec14e825b730f08b/src/decorators/index.js#L113-L115 – nie lepiej zamiast w taki sposób ograć to przy pomocy dwóch dekoratorów i hierarchii klas:

   BEMNode
   |
   | -- BEMBlock
   |
   | -- BEMElement

  IMO byłoby czytelniejsze.

• https://github.com/Bajdzis/react-simple-bem/blob/dd443eb37803c913de0c478eec14e825b730f08b/src/helpers.js#L25-L26 – czemu te warunki są osobne? Można je z powodzeniem złączyć. Można też się zastanowić nad całkowitym pozbyciem się drugiego warunku, bo przecież w kodzie jest dalej https://github.com/Bajdzis/react-simple-bem/blob/dd443eb37803c913de0c478eec14e825b730f08b/src/helpers.js#L34

• https://github.com/Bajdzis/react-simple-bem/blob/dd443eb37803c913de0c478eec14e825b730f08b/src/helpers.js#L105 – tutaj raczej bardziej pasowałoby Object.values.

• Pomyślałbym o eksportowaniu biblioteki w dwóch formatach: CJS i ESM. Ten drugi mógłby być używany przez narzędzia pokroju webpacka czy rollupa do lepszego budowania aplikacji użytkownika. Dodatkowo pomyślałbym o generowanie sourcemap i minifikacji budowanej biblioteki. Ogólnie przez npm rozprowadzałbym wyłącznie zawartość katalogu lib, gdzie znajdowałyby się te dwie wspomniane, zminifikowane wersje. IMO nie ma sensu pchać źródeł.

• Pomyślałbym też o przejechaniu tego webpackiem/rollupem, żeby użytkownik końcowy dostał jeden plik a nie 10. Wówczas, jeśli będziemy dostarczać też wersję ESM, webpack czy rollup powinny ogarnąć bez problemu tree-shaking.

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

Wszelkiego rodzaju automaty, CI itd.

Comments

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.

---

@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

Answer 3

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 ?