feat(packages): creates packages @frontity/components, @frontity/hooks, and adds image processor to @frontity/html2react

.eslintrc

@@ -16,5 +16,12 @@
     "browser": true,
     "node": true,
     "es6": true
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
   }
 }

examples/mars-theme-example/frontity.settings.js

@@ -22,8 +22,8 @@ export default {
             ["About Us", "/about-us/"]
           ],
           featured: {
-            showOnList: false,
-            showOnPost: false
+            showOnList: true,
+            showOnPost: true
           }
         }
       }

packages/components/__tests__/__snapshots__/image.jsdom.tests.tsx.snap

@@ -0,0 +1,110 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Image It's a normal image if loading === "eager" 1`] = `
+<img
+  alt="Some fake alt text"
+  className="frontity-lazy-image fake-class-name"
+  loading="eager"
+  src="https://fake-src.com/fake-image.jpg"
+  srcSet="https://fake-src.com/fake-image.jpg?w=300 300w, https://fake-src.com/fake-image.jpg?w=150 150w"
+/>
+`;
+
+exports[`Image works with \`IntersectionObserver\` 1`] = `
+Array [
+  <noscript>
+    <img
+      alt="Some fake alt text"
+      className="frontity-lazy-image fake-class-name"
+      loading="auto"
+      src="https://fake-src.com/fake-image.jpg"
+      srcSet="https://fake-src.com/fake-image.jpg?w=300 300w, https://fake-src.com/fake-image.jpg?w=150 150w"
+    />
+  </noscript>,
+  <img
+    alt="Some fake alt text"
+    className="frontity-lazy-image fake-class-name"
+    data-src="https://fake-src.com/fake-image.jpg"
+    data-srcset="https://fake-src.com/fake-image.jpg?w=300 300w, https://fake-src.com/fake-image.jpg?w=150 150w"
+    loading="auto"
+    style={
+      Object {
+        "visibility": "hidden",
+      }
+    }
+  />,
+]
+`;
+
+exports[`Image works with native lazy load 1`] = `
+<img
+  alt="Some fake alt text"
+  className="frontity-lazy-image fake-class-name"
+  loading="lazy"
+  src="https://fake-src.com/fake-image.jpg"
+  srcSet="https://fake-src.com/fake-image.jpg?w=300 300w, https://fake-src.com/fake-image.jpg?w=150 150w"
+/>
+`;
+
+exports[`Image works without \`IntersectionObserver\` 1`] = `
+Array [
+  <noscript>
+    <img
+      alt="Some fake alt text"
+      className="frontity-lazy-image fake-class-name"
+      loading="auto"
+      src="https://fake-src.com/fake-image.jpg"
+      srcSet="https://fake-src.com/fake-image.jpg?w=300 300w, https://fake-src.com/fake-image.jpg?w=150 150w"
+    />
+  </noscript>,
+  <img
+    alt="Some fake alt text"
+    className="frontity-lazy-image fake-class-name"
+    data-src="https://fake-src.com/fake-image.jpg"
+    data-srcset="https://fake-src.com/fake-image.jpg?w=300 300w, https://fake-src.com/fake-image.jpg?w=150 150w"
+    loading="auto"
+    style={
+      Object {
+        "visibility": "hidden",
+      }
+    }
+    suppressHydrationWarning={true}
+  />,
+]
+`;
+
+exports[`Image works without \`IntersectionObserver\` 2`] = `
+Array [
+  Object {
+    "id": "frontity-no-proxy-images",
+    "innerHTML": "
+  if (typeof window !== \\"undefined\\" && (!(\\"Proxy\\" in window) || !(\\"IntersectionObserver\\" in window))) {
+    document.addEventListener(\\"DOMContentLoaded\\", function() {
+      var images = document.querySelectorAll(\\"img.frontity-lazy-image\\");
+      for (i = 0; i < images.length; ++i) {
+        var image = images[i];
+        image.setAttribute(\\"src\\", image.getAttribute(\\"data-src\\"));
+        image.setAttribute(\\"srcset\\", image.getAttribute(\\"data-srcset\\"));
+        image.removeAttribute(\\"data-src\\");
+        image.removeAttribute(\\"data-srcset\\");
+        image.removeAttribute(\\"style\\");
+      }
+    });
+  }
+",
+    "type": "text/javascript",
+  },
+]
+`;
+
+exports[`Image works without \`IntersectionObserver\` 3`] = `
+Array [
+  Object {
+    "innerHTML": "<style id=\\"frontity-no-js-images\\" type=\\"text/css\\">
+  :not(noscript) > .frontity-lazy-image {
+    display: none;
+  }
+</style>",
+  },
+]
+`;

packages/components/__tests__/__snapshots__/image.node.tests.tsx.snap

@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Image It's a normal image if loading === "eager" 1`] = `
+<img
+  alt="Some fake alt text"
+  className="frontity-lazy-image fake-class-name"
+  loading="eager"
+  src="https://fake-src.com/fake-image.jpg"
+  srcSet="https://fake-src.com/fake-image.jpg?w=300 300w, https://fake-src.com/fake-image.jpg?w=150 150w"
+/>
+`;
+
+exports[`Image works on server 1`] = `
+Array [
+  <noscript>
+    <img
+      alt="Some fake alt text"
+      className="frontity-lazy-image fake-class-name"
+      loading="auto"
+      src="https://fake-src.com/fake-image.jpg"
+      srcSet="https://fake-src.com/fake-image.jpg?w=300 300w, https://fake-src.com/fake-image.jpg?w=150 150w"
+    />
+  </noscript>,
+  <img
+    alt="Some fake alt text"
+    className="frontity-lazy-image fake-class-name"
+    data-src="https://fake-src.com/fake-image.jpg"
+    data-srcset="https://fake-src.com/fake-image.jpg?w=300 300w, https://fake-src.com/fake-image.jpg?w=150 150w"
+    loading="auto"
+    style={
+      Object {
+        "visibility": "hidden",
+      }
+    }
+    suppressHydrationWarning={true}
+  />,
+]
+`;
+
+exports[`Image works on server 2`] = `
+"<script data-react-helmet=\\"true\\" id=\\"frontity-no-proxy-images\\" type=\\"text/javascript\\">
+  if (typeof window !== \\"undefined\\" && (!(\\"Proxy\\" in window) || !(\\"IntersectionObserver\\" in window))) {
+    document.addEventListener(\\"DOMContentLoaded\\", function() {
+      var images = document.querySelectorAll(\\"img.frontity-lazy-image\\");
+      for (i = 0; i < images.length; ++i) {
+        var image = images[i];
+        image.setAttribute(\\"src\\", image.getAttribute(\\"data-src\\"));
+        image.setAttribute(\\"srcset\\", image.getAttribute(\\"data-srcset\\"));
+        image.removeAttribute(\\"data-src\\");
+        image.removeAttribute(\\"data-srcset\\");
+        image.removeAttribute(\\"style\\");
+      }
+    });
+  }
+</script>"
+`;
+
+exports[`Image works on server 3`] = `
+"<noscript data-react-helmet=\\"true\\" ><style id=\\"frontity-no-js-images\\" type=\\"text/css\\">
+  :not(noscript) > .frontity-lazy-image {
+    display: none;
+  }
+</style></noscript>"
+`;

packages/components/__tests__/image.jsdom.tests.tsx

@@ -0,0 +1,85 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { Head } from "frontity";
+import Image from "../image";
+
+describe("Image", () => {
+  beforeEach(() => {
+    Object.defineProperty(window, "IntersectionObserver", {
+      writable: true,
+      value: jest.fn()
+    });
+    Object.defineProperty(HTMLImageElement.prototype, "loading", {
+      writable: true,
+      value: undefined
+    });
+  });
+
+  test('It\'s a normal image if loading === "eager"', () => {
+    const loading: "lazy" | "eager" | "auto" = "eager";
+    const props = {
+      alt: "Some fake alt text",
+      src: "https://fake-src.com/fake-image.jpg",
+      srcSet:
+        "https://fake-src.com/fake-image.jpg?w=300 300w, https://fake-src.com/fake-image.jpg?w=150 150w",
+      className: "fake-class-name",
+      loading
+    };
+
+    const result = TestRenderer.create(<Image {...props} />).toJSON();
+    expect(result).toMatchSnapshot();
+  });
+
+  test("works with native lazy load", () => {
+    const props = {
+      alt: "Some fake alt text",
+      src: "https://fake-src.com/fake-image.jpg",
+      srcSet:
+        "https://fake-src.com/fake-image.jpg?w=300 300w, https://fake-src.com/fake-image.jpg?w=150 150w",
+      className: "fake-class-name",
+      loading: "lazy" as "lazy"
+    };
+
+    (HTMLImageElement as any).prototype.loading = "loading";
+
+    const result = TestRenderer.create(<Image {...props} />).toJSON();
+    expect(result).toMatchSnapshot();
+  });
+
+  test("works with `IntersectionObserver`", () => {
+    const props = {
+      alt: "Some fake alt text",
+      src: "https://fake-src.com/fake-image.jpg",
+      srcSet:
+        "https://fake-src.com/fake-image.jpg?w=300 300w, https://fake-src.com/fake-image.jpg?w=150 150w",
+      className: "fake-class-name"
+    };
+
+    const result = TestRenderer.create(<Image {...props} />).toJSON();
+    expect(result).toMatchSnapshot();
+  });
+
+  test("works without `IntersectionObserver`", () => {
+    const props = {
+      alt: "Some fake alt text",
+      src: "https://fake-src.com/fake-image.jpg",
+      srcSet:
+        "https://fake-src.com/fake-image.jpg?w=300 300w, https://fake-src.com/fake-image.jpg?w=150 150w",
+      className: "fake-class-name"
+    };
+
+    IntersectionObserver = undefined;
+
+    const image = TestRenderer.create(<Image {...props} />).toJSON();
+    const head = Head.peek();
+
+    expect(image).toMatchSnapshot();
+    // For some reason Head doesn't behave the same in Node than in JSDOM.
+    expect((head as any).scriptTags).toMatchSnapshot();
+    expect((head as any).noscriptTags).toMatchSnapshot();
+  });
+});

packages/components/__tests__/image.node.tests.tsx

@@ -0,0 +1,43 @@
+/**
+ * @jest-environment node
+ */
+
+import React from "react";
+import TestRenderer from "react-test-renderer";
+import { Head } from "frontity";
+import Image from "../image";
+
+describe("Image", () => {
+  test('It\'s a normal image if loading === "eager"', () => {
+    const loading: "lazy" | "eager" | "auto" = "eager";
+    const props = {
+      alt: "Some fake alt text",
+      src: "https://fake-src.com/fake-image.jpg",
+      srcSet:
+        "https://fake-src.com/fake-image.jpg?w=300 300w, https://fake-src.com/fake-image.jpg?w=150 150w",
+      className: "fake-class-name",
+      loading
+    };
+
+    const image = TestRenderer.create(<Image {...props} />).toJSON();
+
+    expect(image).toMatchSnapshot();
+  });
+
+  test("works on server", () => {
+    const props = {
+      alt: "Some fake alt text",
+      src: "https://fake-src.com/fake-image.jpg",
+      srcSet:
+        "https://fake-src.com/fake-image.jpg?w=300 300w, https://fake-src.com/fake-image.jpg?w=150 150w",
+      className: "fake-class-name"
+    };
+
+    const image = TestRenderer.create(<Image {...props} />).toJSON();
+    const head = Head.peek();
+
+    expect(image).toMatchSnapshot();
+    expect(head.script.toString()).toMatchSnapshot();
+    expect(head.noscript.toString()).toMatchSnapshot();
+  });
+});