• 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
Komentarze do pytań nie służą do odpowiadania, od tego jest wydzielona sekcja odpowiedzi. Funkcją komentarzy jest natomiast możliwość uzyskania dodatkowych informacji na temat samego posta.Komentarze

65,642 zapytań

112,265 odpowiedzi

236,884 komentarzy

46,639 pasjonatów

Przeglądających: 150
Pasjonatów: 11 Gości: 139

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.

...