update hy-comps and move to webpack

.babelrc

@@ -1,5 +1,3 @@
 {
-  "presets": ["es2015", "es2016"],
-  "plugins": ["transform-function-bind"],
-  "only": ["_js", "rxjs", "create-element-extended"]
+  "presets": ["env"],
 }

_js/src/common.js

@@ -70,7 +70,7 @@ export function animate(el, keyframes, options) {
 
     anim.addEventListener('finish', (e) => {
       observer.next(e);
-      requestAnimationFrame(::observer.complete);
+      requestAnimationFrame(observer.complete.bind(observer));
     });
 
     return () => {

_js/src/cross-fader.js

@@ -19,14 +19,13 @@ import 'core-js/fn/function/bind';
 
 import Color from 'color';
 
-import { Observable } from 'rxjs/Observable';
 import { empty } from 'rxjs/observable/empty';
 import { fromEvent } from 'rxjs/observable/fromEvent';
 import { of } from 'rxjs/observable/of';
 
-import { _finally as finalize } from 'rxjs/operator/finally';
-import { take } from 'rxjs/operator/take';
-import { map } from 'rxjs/operator/map';
+import { finalize } from 'rxjs/operators/finalize';
+import { take } from 'rxjs/operators/take';
+import { map } from 'rxjs/operators/map';
 
 import elemDataset from 'elem-dataset';
 
@@ -93,13 +92,14 @@ function pseudoHash({
 // Note that the point is not to *use* the image object, just to make sure the image is in cache.
 function cacheImage$({ background, image }) {
   if (background || !image || image === '' || image === 'none' || image === this.prevImage) {
-    return Observable::of({});
+    return of({});
   }
 
   const imgObj = new Image();
-  const image$ = Observable::fromEvent(imgObj, 'load')
-    ::take(1)
-    ::finalize(() => { imgObj.src = ''; });
+  const image$ = fromEvent(imgObj, 'load').pipe(
+    take(1),
+    finalize(() => { imgObj.src = ''; }),
+  );
   imgObj.src = image;
 
   return image$;
@@ -109,7 +109,7 @@ export default class CrossFader {
   constructor(fadeDuration) {
     const main = document.getElementById('_main');
     const pageStyle = document.getElementById('_pageStyle');
-    const styleSheet = document.styleSheets::find(ss => ss.ownerNode === pageStyle) || {};
+    const styleSheet = find.call(document.styleSheets, ss => ss.ownerNode === pageStyle) || {};
 
     this.sidebar = document.getElementById('_sidebar');
     this.fadeDuration = fadeDuration;
@@ -127,10 +127,10 @@ export default class CrossFader {
 
     // HACK: Using `dataset` here to store some intermediate data
     const hash = pseudoHash(dataset);
-    if (hash === this.prevHash) return Observable::empty();
+    if (hash === this.prevHash) return empty();
 
-    return this::cacheImage$(dataset)
-      ::map(() => {
+    return cacheImage$.call(this, dataset)
+      .pipe(map(() => {
         const div = document.createElement('div');
         div.classList.add('sidebar-bg');
         if (image !== 'none' && overlay === '') div.classList.add('sidebar-overlay');
@@ -140,13 +140,13 @@ export default class CrossFader {
           if (image !== '' && image !== 'none') div.style.backgroundImage = `url(${image})`;
         }
         return [div, dataset, hash];
-      });
+      }));
   }
 
   fade([prevDiv], [div, dataset, hash]) {
     prevDiv.parentNode.insertBefore(div, prevDiv.nextElementSibling);
 
-    this::updateStyle(dataset);
+    updateStyle.call(this, dataset);
 
     // Only update the prev hash after we're actually in the fade stage
     this.prevHash = hash;
@@ -157,6 +157,6 @@ export default class CrossFader {
     ], {
       duration: this.fadeDuration,
     })
-    ::finalize(() => prevDiv.parentNode.removeChild(prevDiv));
+      .pipe(finalize(() => prevDiv.parentNode.removeChild(prevDiv)));
   }
 }

_js/src/drawer.js

@@ -21,12 +21,11 @@ import 'core-js/fn/function/bind';
 // We include our main component, hy-drawer,
 // in both the vanilla JS and the WebComponent version (will decide later which one to use).
 // Since they share most of their code, it's not a big deal in terms of file size.
-import { Set } from 'hy-drawer/src/common';
-import { Drawer, VANILLA_FEATURE_TESTS } from 'hy-drawer/src/vanilla';
-import { HTMLDrawerElement } from 'hy-drawer/src/webcomponent';
+import { HyDrawer, VANILLA_FEATURE_TESTS, Set } from 'hy-drawer/src/vanilla';
+import { HyDrawerElement } from 'hy-drawer/src/webcomponent';
+import 'hy-drawer/src/style.css';
 
 // Next, we include `Observable` and the RxJS functions we inted to use on it.
-import { Observable } from 'rxjs/Observable';
 import { fromEvent } from 'rxjs/observable/fromEvent';
 
 // And some of our own helper functions/constants.
@@ -83,13 +82,13 @@ function setupWebComponent(drawerEl) {
   drawerEl.setAttribute('threshold', isSafari ? 0 : 10);
   drawerEl.setAttribute('prevent-default', '');
 
-  customElements.define('hy-drawer', HTMLDrawerElement);
+  customElements.define('hy-drawer', HyDrawerElement);
   return drawerEl;
 }
 
 // This function sets y-drawer up as a vanilla JS class.
 function setupVanilla(drawerEl) {
-  return new Drawer(drawerEl, {
+  return new HyDrawer(drawerEl, {
     opened: window._isDesktop,
     persistent: window._isDesktop,
     align: 'left',
@@ -144,6 +143,6 @@ if (!window._noDrawer && hasFeatures(REQUIREMENTS) && !isUCBrowser) {
   menuEl.addEventListener('click', menuClickClallback);
 
   // Adding the resize callback to the resize event, but with a small delay.
-  Observable::fromEvent(window, 'resize', { passive: true })
+  fromEvent(window, 'resize', { passive: true })
     .subscribe(resizeCallback);
 }

_js/src/flip/index.js

@@ -17,19 +17,18 @@
 import 'core-js/fn/array/includes';
 import 'core-js/fn/function/bind';
 
-import { Observable } from 'rxjs/Observable';
 import { merge } from 'rxjs/observable/merge';
 
-import { filter } from 'rxjs/operator/filter';
+import { filter } from 'rxjs/operators/filter';
 
 import setupFLIPTitle from './title';
 
 const FLIP_TYPES = ['title'];
 
 export default function setupFLIP(start$, ready$, fadeIn$, options) {
-  const other$ = start$::filter(({ flipType }) => !FLIP_TYPES.includes(flipType));
+  const other$ = start$.pipe(filter(({ flipType }) => !FLIP_TYPES.includes(flipType)));
 
-  return Observable::merge(
+  return merge(
     setupFLIPTitle(start$, ready$, fadeIn$, options),
     other$,
   );

_js/src/flip/title.js

@@ -16,16 +16,14 @@
 
 import 'core-js/fn/function/bind';
 
-import { Observable } from 'rxjs/Observable';
-
 import { of } from 'rxjs/observable/of';
 
-import { _do as tap } from 'rxjs/operator/do';
-import { _finally as finalize } from 'rxjs/operator/finally';
-import { filter } from 'rxjs/operator/filter';
-import { map } from 'rxjs/operator/map';
-import { switchMap } from 'rxjs/operator/switchMap';
-import { zipProto as zip } from 'rxjs/operator/zip';
+import { tap } from 'rxjs/operators/tap';
+import { finalize } from 'rxjs/operators/finalize';
+import { filter } from 'rxjs/operators/filter';
+import { map } from 'rxjs/operators/map';
+import { switchMap } from 'rxjs/operators/switchMap';
+import { zip } from 'rxjs/operators/zip';
 
 import { animate, empty } from '../common';
 
@@ -34,10 +32,10 @@ const TITLE_SELECTOR = '.page-title, .post-title';
 export default function setupFLIPTitle(start$, ready$, fadeIn$, { animationMain, settings }) {
   if (!animationMain) return start$;
 
-  const flip$ = start$
-    ::filter(({ flipType }) => flipType === 'title')
-    ::switchMap(({ anchor }) => {
-      if (!anchor) return Observable::of({});
+  const flip$ = start$.pipe(
+    filter(({ flipType }) => flipType === 'title'),
+    switchMap(({ anchor }) => {
+      if (!anchor) return of({});
 
       const title = document.createElement('h1');
 
@@ -46,8 +44,8 @@ export default function setupFLIPTitle(start$, ready$, fadeIn$, { animationMain,
       title.style.transformOrigin = 'left top';
 
       const page = animationMain.querySelector('.page');
-      if (!page) return Observable::of({});
-      page::empty();
+      if (!page) return of({});
+      empty.call(page);
       page.appendChild(title);
       animationMain.style.position = 'fixed';
       animationMain.style.opacity = 1;
@@ -69,25 +67,26 @@ export default function setupFLIPTitle(start$, ready$, fadeIn$, { animationMain,
       ];
 
       return animate(title, transform, settings)
-        ::tap({ complete() { animationMain.style.position = 'absolute'; } });
-    });
-
-  start$::switchMap(({ flipType }) =>
-    ready$
-      ::filter(() => flipType === 'title')
-      ::map(({ replaceEls: [main] }) => {
-        const title = main.querySelector(TITLE_SELECTOR);
-        if (title) title.style.opacity = 0;
-        return title;
-      })
-      ::zip(fadeIn$, x => x)
-      ::tap((title) => {
-        if (title) title.style.opacity = 1;
-        animationMain.style.opacity = 0;
-      })
-      ::finalize(() => {
-        animationMain.style.opacity = 0;
-      }))
+        .pipe(tap({ complete() { animationMain.style.position = 'absolute'; } }));
+    }),
+  );
+
+  start$.pipe(switchMap(({ flipType }) => ready$.pipe(
+    filter(() => flipType === 'title'),
+    map(({ replaceEls: [main] }) => {
+      const title = main.querySelector(TITLE_SELECTOR);
+      if (title) title.style.opacity = 0;
+      return title;
+    }),
+    zip(fadeIn$, x => x),
+    tap((title) => {
+      if (title) title.style.opacity = 1;
+      animationMain.style.opacity = 0;
+    }),
+    finalize(() => {
+      animationMain.style.opacity = 0;
+    }),
+  )))
     .subscribe();
 
   return flip$;

_js/src/katex.js

@@ -41,7 +41,7 @@ function renderKatex(el, tex) {
     const prev = el.previousElementSibling;
     replaceMathBlock(el, tex);
     if (prev && prev.classList && prev.classList.contains('MathJax_Preview')) {
-      prev::hide();
+      hide.call(prev);
     }
   } catch (e) {
     // TODO: remove in production builds?
@@ -57,7 +57,7 @@ function readTexSource(el) {
 
 function changeContent(mathBlocks) {
   // kramdown generates script tags with type "math/tex"
-  mathBlocks::forEach((script) => {
+  forEach.call(mathBlocks, (script) => {
     const tex = readTexSource(script);
     renderKatex(script, tex);
   });