diff --git a/package.json b/package.json
index ba3b640..dcf67b6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@zeecoder/container-query",
- "version": "1.2.6",
+ "version": "1.3.0",
"description": "A PostCSS plugin and Javascript runtime combination, which allows you to write @container queries in your CSS the same way you would write @media queries.",
"main": "index.js",
"author": "Viktor Hubert
",
@@ -25,10 +25,14 @@
],
"license": "MIT",
"dependencies": {
+ "es6-weak-map": "^2.0.2",
"lodash.camelcase": "^4.3.0",
"lodash.trim": "^4.5.1",
+ "mutation-observer": "^1.0.2",
"object-assign": "^4.1.1",
- "postcss": "^6.0.0"
+ "postcss": "^6.0.0",
+ "raf": "^3.3.2",
+ "resize-observer-polyfill": "^1.4.2"
},
"repository": {
"type": "git",
@@ -58,11 +62,12 @@
"lint": "eslint src",
"coveralls": "cat ./coverage/lcov.info | ./node_modules/.bin/coveralls",
"build": "babel src --out-dir build --ignore spec.js",
+ "watch:build": "babel src --watch --out-dir build --ignore spec.js",
"watch:test": "jest --watch --notify",
"prepublish": "yarn run build",
"precommit": "lint-staged",
"eslint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check",
- "prettify": "prettier --write --tab-width=4 '{src|__mocks__}/**/*.js'"
+ "prettify": "prettier --write --tab-width 4 '{src,__mocks__}/**/*.js'"
},
"lint-staged": {
"*.js": [
diff --git a/src/postcss/containerQuery.js b/src/postcss/containerQuery.js
index 462b991..702f90f 100644
--- a/src/postcss/containerQuery.js
+++ b/src/postcss/containerQuery.js
@@ -34,6 +34,7 @@ function shouldProcessNode(node) {
}
/**
+ * @todo refactor a bit to make testing easier
* @param {{ getJSON: function }} options
*/
function containerQuery(options = {}) {
diff --git a/src/runtime/Container.js b/src/runtime/Container.js
index 7e0d9b7..0eb611a 100644
--- a/src/runtime/Container.js
+++ b/src/runtime/Container.js
@@ -1,19 +1,115 @@
import processConfig from "./processConfig";
import adjustContainer from "./adjustContainer";
+import objectAssign from "object-assign";
+import ResizeObserver from "resize-observer-polyfill";
+import MutationObserver from "mutation-observer";
+import WeakMap from "es6-weak-map";
+import raf from "raf";
+
+const containerRegistry = new WeakMap();
+
+const resizeObserver = new ResizeObserver(entries => {
+ if (!Array.isArray(entries)) {
+ return;
+ }
+
+ entries.forEach(entry => {
+ const container = containerRegistry.get(entry.target);
+
+ if (
+ typeof container === "undefined" ||
+ typeof container !== "object" ||
+ typeof container.adjust !== "function"
+ ) {
+ console.warn(
+ "Could not find Container instance for element:",
+ entry.target
+ );
+ return;
+ }
+
+ container.adjust({
+ width: entry.contentRect.width,
+ height: entry.contentRect.height
+ });
+ });
+});
+
+const mutationObserver = new MutationObserver(mutationsRecords => {
+ mutationsRecords.forEach(mutationsRecord => {
+ // Remove container element from registry and unobserve resize changes
+ mutationsRecord.removedNodes.forEach(node => {
+ if (containerRegistry.has(node) === false) {
+ return;
+ }
+
+ resizeObserver.unobserve(node);
+ containerRegistry.delete(node);
+ });
+ });
+});
/**
* @class
- * @property {HTMLElement} container
- * @property {Object} config
+ * @property {Element} containerElement
+ * @property {Object} jsonStats
+ * @property {Object} opts
*/
export default class Container {
- constructor(container, config) {
- this.adjust = adjustContainer.bind(
- this,
- container,
- processConfig(config)
+ constructor(containerElement, jsonStats, opts = {}) {
+ this.containerElement = containerElement;
+ this.processedJsonStats = processConfig(jsonStats);
+
+ this.opts = objectAssign(
+ {
+ adjustOnResize: false,
+ adjustOnInstantiation: true
+ },
+ opts
);
- this.adjust();
+ this.observeResize = this.observeResize.bind(this);
+ this.unobserveResize = this.unobserveResize.bind(this);
+ this.adjust = this.adjust.bind(this);
+
+ containerRegistry.set(containerElement, this);
+ mutationObserver.observe(this.containerElement.parentNode, {
+ childList: true
+ });
+
+ if (this.opts.adjustOnResize) {
+ this.observeResize();
+ }
+
+ if (this.opts.adjustOnInstantiation) {
+ raf(this.adjust);
+ }
+ }
+
+ /**
+ * Starts observing resize changes.
+ */
+ observeResize() {
+ resizeObserver.observe(this.containerElement);
+ }
+
+ /**
+ * Stops observing resize changes.
+ */
+ unobserveResize() {
+ resizeObserver.unobserve(this.containerElement);
+ }
+
+ /**
+ * Adjusts the container to it's current dimensions, or to the ones given.
+ *
+ * @param {ContainerDimensions} containerDimensions
+ */
+ adjust(containerDimensions = null) {
+ adjustContainer(
+ this.containerElement,
+ this.processedJsonStats,
+ containerDimensions
+ );
}
}
diff --git a/src/runtime/Container.spec.js b/src/runtime/Container.spec.js
index 5118e7d..f0d5dac 100644
--- a/src/runtime/Container.spec.js
+++ b/src/runtime/Container.spec.js
@@ -1,26 +1,219 @@
import Container from "./Container";
-jest.mock("./processConfig");
-jest.mock("./adjustContainer");
+console.warn = jest.fn();
+jest.mock("./processConfig", () => jest.fn(config => config));
+jest.mock("./adjustContainer", () => jest.fn());
+jest.mock("raf", () => jest.fn(cb => cb()));
+jest.mock("es6-weak-map", () => {
+ const mock = jest.fn();
-test("appropriate instantiation", () => {
- const processConfig = require("./processConfig").default;
- const adjustContainer = require("./adjustContainer").default;
+ mock.prototype.set = jest.fn();
+ mock.prototype.get = jest.fn();
+ mock.prototype.has = jest.fn();
+ mock.prototype.delete = jest.fn();
+
+ return mock;
+});
+
+jest.mock("resize-observer-polyfill", () => {
+ const mock = jest.fn(cb => {
+ mock.triggerEvent = cb;
+ });
+
+ mock.prototype.observe = jest.fn();
+ mock.prototype.unobserve = jest.fn();
+
+ return mock;
+});
+
+jest.mock("mutation-observer", () => {
+ const mock = jest.fn(cb => {
+ mock.triggerEvent = cb;
+ });
+
+ mock.prototype.observe = jest.fn();
+ mock.prototype.unobserve = jest.fn();
+
+ return mock;
+});
+
+beforeEach(() => {
+ require("raf").mockClear();
+ require("./adjustContainer").mockClear();
+});
+
+test("should instantiate properly", () => {
+ const ResizeObserver = require("resize-observer-polyfill");
+ const processConfig = require("./processConfig");
+ const adjustContainer = require("./adjustContainer");
+ const raf = require("raf");
+
+ const containerElement = {
+ parentNode: document.createElement("div")
+ };
- const containerElement = {};
const config = {};
const processedConfig = {};
- processConfig.mockImplementation(() => processedConfig);
const containerInstance = new Container(containerElement, config);
containerInstance.adjust();
containerInstance.adjust();
containerInstance.adjust();
+ expect(ResizeObserver).toHaveBeenCalledTimes(1);
+ expect(ResizeObserver.prototype.observe).toHaveBeenCalledTimes(0);
+ expect(raf).toHaveBeenCalledTimes(1);
expect(processConfig).toHaveBeenCalledTimes(1);
+ expect(processConfig.mock.calls[0][0]).toBe(config);
expect(adjustContainer).toHaveBeenCalledTimes(4);
expect(adjustContainer.mock.calls[0][0]).toBe(containerElement);
- expect(adjustContainer.mock.calls[0][1]).toBe(processedConfig);
+ expect(adjustContainer.mock.calls[0][1]).toEqual(processedConfig);
expect(adjustContainer.mock.calls[1][0]).toBe(containerElement);
- expect(adjustContainer.mock.calls[1][1]).toBe(processedConfig);
+ expect(adjustContainer.mock.calls[1][1]).toEqual(processedConfig);
+});
+
+test("should be able to observe resize events and switch off initial adjust call", () => {
+ const ResizeObserver = require("resize-observer-polyfill");
+ const raf = require("raf");
+ const adjustContainer = require("./adjustContainer");
+
+ const containerElement = {
+ parentNode: document.createElement("div")
+ };
+ const config = {};
+
+ const containerInstance = new Container(containerElement, config, {
+ adjustOnInstantiation: false,
+ adjustOnResize: true
+ });
+ containerInstance.observeResize();
+ containerInstance.unobserveResize();
+ containerInstance.observeResize();
+
+ expect(raf).toHaveBeenCalledTimes(0);
+ expect(adjustContainer).toHaveBeenCalledTimes(0);
+ expect(ResizeObserver).toHaveBeenCalledTimes(1);
+ expect(ResizeObserver.prototype.observe).toHaveBeenCalledTimes(3);
+ expect(ResizeObserver.prototype.unobserve).toHaveBeenCalledTimes(1);
+ expect(ResizeObserver.prototype.observe.mock.calls[0][0]).toBe(
+ containerElement
+ );
+ expect(ResizeObserver.prototype.observe.mock.calls[1][0]).toBe(
+ containerElement
+ );
+ expect(ResizeObserver.prototype.observe.mock.calls[2][0]).toBe(
+ containerElement
+ );
+ expect(ResizeObserver.prototype.unobserve.mock.calls[0][0]).toBe(
+ containerElement
+ );
+});
+
+test("should call adjust() on resize changes", () => {
+ const WeakMap = require("es6-weak-map");
+ WeakMap.prototype.set = jest.fn();
+ WeakMap.prototype.get.mockImplementationOnce(() => undefined);
+ WeakMap.prototype.get.mockImplementationOnce(element => {
+ expect(element).toBe(containerElement);
+
+ return containerInstance;
+ });
+ const ResizeObserver = require("resize-observer-polyfill");
+ const parentElement = document.createElement("div");
+ const containerElement = document.createElement("div");
+ parentElement.appendChild(containerElement);
+ const config = {};
+ const containerInstance = new Container(containerElement, config, {
+ adjustOnInstantiation: false,
+ adjustOnResize: true
+ });
+ expect(WeakMap.prototype.set).toHaveBeenCalledTimes(1);
+ expect(WeakMap.prototype.set).toHaveBeenCalledWith(
+ containerElement,
+ containerInstance
+ );
+
+ expect(ResizeObserver).toHaveBeenCalledTimes(1);
+ expect(typeof ResizeObserver.triggerEvent).toBe("function");
+ expect(() => ResizeObserver.triggerEvent()).not.toThrow();
+ expect(() => {
+ ResizeObserver.triggerEvent([
+ {
+ target: ""
+ }
+ ]);
+ }).not.toThrow();
+ expect(console.warn).toHaveBeenCalledTimes(1);
+
+ containerInstance.adjust = jest.fn();
+ expect(() => {
+ ResizeObserver.triggerEvent([
+ {
+ target: containerElement,
+ contentRect: {
+ width: 1,
+ height: 2
+ }
+ }
+ ]);
+ }).not.toThrow();
+ expect(console.warn).toHaveBeenCalledTimes(1);
+ expect(WeakMap.prototype.get).toHaveBeenCalledTimes(2);
+ expect(containerInstance.adjust).toHaveBeenCalledTimes(1);
+ expect(containerInstance.adjust).toHaveBeenCalledWith({
+ width: 1,
+ height: 2
+ });
+});
+
+test("should clean up after container element is detached from the DOM", () => {
+ const WeakMap = require("es6-weak-map");
+ WeakMap.prototype.set = jest.fn();
+ WeakMap.prototype.has = jest.fn(() => true);
+ const MutationObserver = require("mutation-observer");
+ const ResizeObserver = require("resize-observer-polyfill");
+ ResizeObserver.prototype.unobserve = jest.fn();
+ const parentElement = document.createElement("div");
+ const containerElement = document.createElement("div");
+ parentElement.appendChild(containerElement);
+ const config = {};
+ const containerInstance = new Container(containerElement, config, {
+ adjustOnInstantiation: false,
+ adjustOnResize: false
+ });
+ expect(WeakMap.prototype.set).toHaveBeenCalledTimes(1);
+ expect(WeakMap.prototype.set).toHaveBeenCalledWith(
+ containerElement,
+ containerInstance
+ );
+
+ let mutationRecords = [
+ {
+ removedNodes: [containerElement]
+ }
+ ];
+
+ MutationObserver.triggerEvent(mutationRecords);
+
+ expect(WeakMap.prototype.has).toHaveBeenCalledTimes(1);
+ expect(WeakMap.prototype.delete).toHaveBeenCalledTimes(1);
+ expect(ResizeObserver.prototype.unobserve).toHaveBeenCalledTimes(1);
+ expect(WeakMap.prototype.delete).toHaveBeenCalledWith(containerElement);
+ expect(ResizeObserver.prototype.unobserve).toHaveBeenCalledWith(
+ containerElement
+ );
+
+ // Should not clean up after non-container elements
+ mutationRecords = [
+ {
+ removedNodes: [document.createElement("div")]
+ }
+ ];
+
+ WeakMap.prototype.has = jest.fn(() => false);
+ MutationObserver.triggerEvent(mutationRecords);
+
+ expect(WeakMap.prototype.has).toHaveBeenCalledTimes(1);
+ expect(WeakMap.prototype.delete).toHaveBeenCalledTimes(1);
+ expect(ResizeObserver.prototype.unobserve).toHaveBeenCalledTimes(1);
});
diff --git a/src/runtime/adjustContainer.js b/src/runtime/adjustContainer.js
index 204be2b..a074d8d 100644
--- a/src/runtime/adjustContainer.js
+++ b/src/runtime/adjustContainer.js
@@ -11,13 +11,21 @@ import applyStylesToElements from "./applyStylesToElements";
* @param {HTMLElement} container
* @param {Object} [config] Expects a configuration object that was processed
* (and validated) by `processConfig`
+ * @param {ContainerDimensions} [containerDimensions]
*/
-export default function adjustContainer(container, config = null) {
+export default function adjustContainer(
+ container,
+ config = null,
+ containerDimensions = null
+) {
if (config === null) {
return;
}
- const containerDimensions = getContainerDimensions(container);
+ if (!containerDimensions) {
+ containerDimensions = getContainerDimensions(container);
+ }
+
const queriesLength = config.queries.length;
const changeSets = {};
diff --git a/src/runtime/adjustContainer.spec.js b/src/runtime/adjustContainer.spec.js
index e2e5dca..3d1f791 100644
--- a/src/runtime/adjustContainer.spec.js
+++ b/src/runtime/adjustContainer.spec.js
@@ -77,6 +77,20 @@ beforeEach(() => {
require("./getContainerDimensions").default.mockClear();
});
+test("should accept container dimensions", () => {
+ const getContainerDimensions = require("./getContainerDimensions").default;
+ let config = {
+ queries: []
+ };
+
+ const container = {};
+ const containerDimensions = { width: 1, height: 2 };
+
+ adjustContainer(container, config, containerDimensions);
+
+ expect(getContainerDimensions).toHaveBeenCalledTimes(0);
+});
+
test("The container and its elements should be properly adjusted with the defaults", () => {
const getContainerDimensionsMock = require(
"./getContainerDimensions"
diff --git a/yarn.lock b/yarn.lock
index 89396bc..803109f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1065,7 +1065,7 @@ es6-symbol@3.1.1, es6-symbol@^3.1, es6-symbol@^3.1.1, es6-symbol@~3.1, es6-symbo
d "1"
es5-ext "~0.10.14"
-es6-weak-map@^2.0.1:
+es6-weak-map@^2.0.1, es6-weak-map@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.2.tgz#5e3ab32251ffd1538a1f8e5ffa1357772f92d96f"
dependencies:
@@ -2407,6 +2407,10 @@ ms@2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+mutation-observer@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/mutation-observer/-/mutation-observer-1.0.2.tgz#5059b3836180cced1d8f74efd7b3aaf7fa678841"
+
mute-stream@0.0.5:
version "0.0.5"
resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.5.tgz#8fbfabb0a98a253d3184331f9e8deb7372fac6c0"
@@ -2665,6 +2669,10 @@ performance-now@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5"
+performance-now@^2.1.0:
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
+
pify@^2.0.0, pify@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -2759,6 +2767,12 @@ qs@~6.4.0:
version "6.4.0"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
+raf@^3.3.2:
+ version "3.3.2"
+ resolved "https://registry.yarnpkg.com/raf/-/raf-3.3.2.tgz#0c13be0b5b49b46f76d6669248d527cf2b02fe27"
+ dependencies:
+ performance-now "^2.1.0"
+
randomatic@^1.1.3:
version "1.1.6"
resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.6.tgz#110dcabff397e9dcff7c0789ccc0a49adf1ec5bb"
@@ -2955,6 +2969,10 @@ require-uncached@^1.0.2:
caller-path "^0.1.0"
resolve-from "^1.0.0"
+resize-observer-polyfill@^1.4.2:
+ version "1.4.2"
+ resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.4.2.tgz#a37198e6209e888acb1532a9968e06d38b6788e5"
+
resolve-from@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226"