W tym tygodniu krótko ale treściwie. Poznałem kilka WebAPI, o których nie miałem pojęcia ;) Dodatkowo nauczyłem się, że nazwa pliku konfiguracyjnego dla babel.js ma znaczenie - szczególnie jeśli chodzi o jego najnowszą, siódmą wersję.

Web APIs You [Probably] Didn't Know Existed

Przeglądając Youtube pod kątem prezentacji na temat JSa, dostałem ciekawą rekomendację. Co prawda film został opublikowany 23 listopada 2017 roku ale dzięki niemu poznałem kilka ciekawych WebAPI, o których nie miałem pojęcia :)

Page Visibility

API, dzięki któremu możemy sprawdzić stan "widoczności" naszej strony.

window.addEventListener("visibilitychange", () => {
  switch(document.visibilityState) {
    case "prerender":
      console.log("Tab is pre-rendering");
      break;
    case "hidden":
      console.log("Tab is hidden");
      break;
    case "visible":
      console.log("Tab is visible");
      break;
  };
});

Pierwszym pomysłem jaki przychodzi do głowy, w kontekście wykorzystania tego API, jest zarządzanie stanem playera video. Pomysł spoko - o ile zamiarem użytkownika nie było słuchanie muzyki w tle ;) ...gdyby YouTube wprowadziło mechanizm pauzowania video w momencie, kiedy strona nie jest widoczna (użytkownik zmienił aktywną zakładkę w przeglądarce) to rozpętałaby się niezła 💩-burza w Internecie ;)

Ambient Light

API, które informuje nas o zmianie "intensywności" światła w pomieszczeniu :) Zdaję sobie sprawę, że brzmi to kuriozalnie ale sprawdźcie DEMO, które Zeno Rocha zaimplementował na potrzeby prezentacji ;) -- YT:link:with:time

window.addEventListener("devicelight", (e) => {
  console.log(`${e.value} lux`);
});

...and many many more ;)

Jeśli macie wolne 28 minut to polecam całą prezentację, w której znajdziecie wiele innych, ciekawych WebAPI:

A jeśli chcecie sie dowiedzieć jakie API są dostępne w Waszej przeglądarce, odwiedźcie stronę: https://whatwebcando.today/

Screen-Shot-2018-09-10-at-13.59.49

Babel 7 & babel.config.js

27 Sierpnia wyszła nowa wersja transpilera Babel.js. Jeśli chcecie poznać wszystkie szczegóły dotyczące 7-demki to odsyłam Was do oficjalnego wpisu na blogu biblioteki. Tutaj skupię się na problemie, który dotknął mnie podczas aktualizacji cypress.io.

Babel 7 wprowadza nowe sposoby na konfigurację. Opórcz starej opcji z plikiem .babel.rc, możemy teraz użyć plików js:

  • babel.config.js
  • .babelrc.js

Tylko jest jeden szkopuł, na który należy zwrócić uwagę :)

Konfiguracja zapisana w pliku babel.config.js ma wpływ na cały nasz projekt, włącznie z katalogiem node_modules. Nawet jeśli w webpacku skonfigurujemy babel-loader z wyłączeniem tego katalogu to babel i tak przeparsuje nam jego zawartość.

Plik .babelrc.js nie ma takich właściwości i zachowuje się tak samo jak zwykły .babelrc. Z tą różnicą, że jesteśmy w stanie użyć np. zmiennych środowiskowych do włączenia/wyłączenia niektórych pluginów czy presetów.

No dobra ale z czym miałem konkretnie problem? Otóż, w poprzedniej wersji babela, aby użyć zmiennych środowiskowych trzeba było napisać workaround. Polegał on na tym, że definiowaliśmy sobie nasz preset, który de-facto był konfiguracją babela. Mogło to wyglądać mniej więcej tak:

//package.json
"babel": {
    "presets": "./babel.config.js"
  },
//babel.config.js
const env = String(process.env.NODE_ENV);
const isTest = env === "test";
const isProd = env === "production";

module.exports = {
    "presets": [
        ["env", { modules: isTest ? "commonjs" : false }],
        "react",
    ],
}

I pięknie :) ... Gdzie jest błąd?

Otóż błędem było nazwanie tego pliku jako babel.config.js :) ... Po podbiciu wersji biblioteki cypress.io, która korzysta już z nowego babela w wersji 7, dostawałem błąd konfiguracji. Babel widząc plik babel.config.js próbował zastosować zapisaną w nim konfigurację do projektu i node_modules.

BOOM!

Rozwiązanie? Zamiana nazwy pliku babel.config.js -> .babelrc.js ;)

Tylko tyle i aż tyle.

Także tego...uważajcie na nazwę pliku konfiguracyjnego od babela ;)

Więcej na ten temat znajdziecie w filmie Kent'a ;)