Init commit

Author: d6u

.babelrc

@@ -0,0 +1,13 @@
+{
+  "env": {
+    "development": {
+      "presets": ["es2015"]
+    },
+    "test": {
+      "presets": ["es2015"],
+      "plugins": [
+        ["__coverage__", {"ignore": "test/"}]
+      ]
+    }
+  }
+}

.gitignore

@@ -35,3 +35,6 @@ jspm_packages
 
 # Optional REPL history
 .node_repl_history
+
+# TypeScript builds
+lib

.nvmrc

@@ -0,0 +1 @@
+6.8.0

README.md

@@ -1 +1,53 @@
-# container-query-toolkit
+# container-query-toolkit
+
+:wrench: Basic utilities to work with container query.
+
+## Install
+
+```
+npm i -S container-query-toolkit
+```
+
+## Usage
+
+```js
+const kit = require('container-query-toolkit');
+// or
+import * as kit from 'container-query-toolkit';
+// or
+import {matchQueries} from 'container-query-toolkit';
+// or
+import matchQueries from 'container-query-toolkit/lib/matchQueries';
+
+const query = {
+  a: {minWidth: 400, maxWidth: 500, minHeight: 400, maxHeight: 500},
+  b: {minWidth: 500, maxWidth: 600, minHeight: 400, maxHeight: 500},
+  c: {minWidth: 400, maxWidth: 500, minHeight: 500, maxHeight: 600},
+  d: {minWidth: 500, maxWidth: 600, minHeight: 500, maxHeight: 600},
+};
+
+const result1 = matchQueries(query)({width: 300, height: 300});
+expect(result1).toEqual({a: false, b: false, c: false, d: false});
+
+const result2 = matchQueries(query)({width: 450, height: 450});
+expect(result2).toEqual({a: true, b: false, c: false, d: false});
+
+const result3 = matchQueries(query)({width: 450, height: 550});
+expect(result3).toEqual({a: false, b: false, c: true, d: false});
+
+const result4 = matchQueries(query)({width: 550, height: 450});
+expect(result4).toEqual({a: false, b: true, c: false, d: false});
+
+const result5 = matchQueries(query)({width: 550, height: 550});
+expect(result5).toEqual({a: false, b: false, c: false, d: true});
+
+const result6 = matchQueries(query)({width: 700, height: 700});
+expect(result6).toEqual({a: false, b: false, c: false, d: false});
+```
+
+## API
+
+### `matchQueries(rules)(contentSize)`
+
+- `rules: {[key: string]: {minWidth?: number, maxWidth?: number, minHeight?: number, maxHeight?: number}}`
+- `contentSize: {height: number, width: number}`

config/webpack.config.base.js

@@ -0,0 +1,14 @@
+'use strict';
+
+module.exports = {
+  devtool: 'source-map',
+  module: {
+    loaders: [
+      {
+        loader: 'babel',
+        exclude: /node_modules/,
+        test: /\.js$/
+      }
+    ]
+  }
+};

karma.conf.js

@@ -0,0 +1,78 @@
+'use strict';
+
+const path = require('path');
+const _ = require('lodash');
+const webpackConfig = require('./config/webpack.config.base');
+
+const webpackModule = _.cloneDeep(webpackConfig.module);
+
+webpackModule.preLoaders = [
+  // transpile all files except testing sources with babel as usual
+  {
+    test: /\.js$/,
+    exclude: [
+      path.resolve('node_modules/')
+    ],
+    loader: 'babel'
+  },
+];
+
+const coverageReporters = [
+  {
+    type: 'html',
+    subdir: (browser) => `${browser.toLowerCase().replace(/ /g, '-')}-html`
+  },
+  {
+    type: 'json',
+    subdir: (browser) => `${browser.toLowerCase().replace(/ /g, '-')}-json`
+  },
+];
+
+if (!process.env.CI) {
+  coverageReporters.push({
+    type: 'text'
+  });
+}
+
+module.exports = function (config) {
+  config.set({
+    basePath: '.',
+    frameworks: ['jasmine'],
+    files: [
+      'test/index.js'
+    ],
+    exclude: [
+    ],
+    preprocessors: {
+      'test/index.js': ['webpack', 'sourcemap']
+    },
+    reporters: process.env.CI ? ['spec', 'coverage', 'saucelabs'] : ['spec', 'coverage'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: process.env.CI ? Object.keys(customLaunchers) : ['Chrome'],
+    singleRun: true,
+    concurrency: 2, // SanceLabs free account for open source
+    browserDisconnectTolerance: 3,
+
+    // customLaunchers: customLaunchers,
+
+    // Webpack preprocessor
+    webpack: {
+      devtool: 'inline-source-map',
+      module: webpackModule,
+    },
+
+    // Coverage
+    coverageReporter: {
+      reporters: coverageReporters
+    },
+
+    // Saucelabs launcher
+    sauceLabs: {
+      testName: 'react-container-query',
+      public: 'public'
+    },
+  });
+};

package.json

@@ -0,0 +1,52 @@
+{
+  "name": "container-query-toolkit",
+  "version": "0.0.0",
+  "description": "Basic utilities to work with container query.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/d6u/container-query-toolkit.git"
+  },
+  "keywords": [],
+  "author": "Daiwei Lu <[email protected]> (http://daiwei.lu/)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/d6u/container-query-toolkit/issues"
+  },
+  "homepage": "https://github.com/d6u/container-query-toolkit#readme",
+  "main": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "files": [
+    "lib"
+  ],
+  "dependencies": {
+    "element-resize-detector": "1.1.9",
+    "lodash": "4.16.4"
+  },
+  "devDependencies": {
+    "@types/lodash": "4.14.37",
+    "babel-core": "6.17.0",
+    "babel-loader": "6.2.5",
+    "babel-plugin-__coverage__": "11.0.0",
+    "babel-preset-es2015": "6.16.0",
+    "babel-preset-es2015-loose": "8.0.0",
+    "jasmine-core": "2.5.2",
+    "karma": "1.3.0",
+    "karma-babel-preprocessor": "6.0.1",
+    "karma-chrome-launcher": "2.0.0",
+    "karma-coverage": "1.1.1",
+    "karma-jasmine": "1.0.2",
+    "karma-sauce-launcher": "1.0.0",
+    "karma-sourcemap-loader": "0.3.7",
+    "karma-spec-reporter": "0.0.26",
+    "karma-webpack": "1.8.0",
+    "typescript": "2.0.3",
+    "webpack": "1.13.2"
+  },
+  "scripts": {
+    "clean": "rm -rf lib coverage",
+    "build": "tsc",
+    "test": "karma start",
+    "preversion": "npm run clean && npm run build && npm test",
+    "postversion": "git push && git push --tags"
+  }
+}

src/index.ts

@@ -0,0 +1 @@
+export * from './matchQueries';

src/matchQueries.ts

@@ -0,0 +1,39 @@
+import map = require('lodash/map');
+import toPairs = require('lodash/toPairs');
+
+export interface Rules {
+  [key: string]: {
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+  };
+}
+
+/**
+ * [matchQueries description]
+ */
+export default function matchQueries(rules: Rules) {
+  const entries = map(toPairs(rules), ([className, rule]) => ({
+    minWidth: rule.minWidth != null ? rule.minWidth : 0,
+    maxWidth: rule.maxWidth != null ? rule.maxWidth : Infinity,
+    minHeight: rule.minHeight != null ? rule.minHeight : 0,
+    maxHeight: rule.maxHeight != null ? rule.maxHeight : Infinity,
+    className: className
+  }));
+
+  return function ({height, width}: {height: number, width: number}) {
+    const classNameMap: {[key: string]: boolean} = {};
+
+    for (const {className, minWidth, maxWidth, minHeight, maxHeight} of entries) {
+      classNameMap[className] = (
+        minWidth <= width &&
+        width <= maxWidth &&
+        minHeight <= height &&
+        height <= maxHeight
+      );
+    }
+
+    return classNameMap;
+  };
+}

test/index.js

@@ -0,0 +1,3 @@
+'use strict';
+
+require('./matchQueries');