[ { "path": ".babelrc", "content": "{\n \"presets\": [\n [\n \"env\",\n {\n \"targets\": {\n \"node\": true\n }\n }\n ],\n \"stage-3\",\n \"react\"\n ],\n \"plugins\": [\"transform-class-properties\"]\n}\n" }, { "path": ".eslintignore", "content": "node_modules/\ncommonjs/\ncoverage/\numd/\n" }, { "path": ".gitignore", "content": "# Logs\nlogs\n*.log\n\n# Dependencies\nnode_modules\n\n# Debug log from npm\nnpm-debug.log\n\n# Jest\ncoverage\n\n# Build output\ndist\n" }, { "path": ".nvmrc", "content": "8\n" }, { "path": ".travis.yml", "content": "sudo: false\nlanguage: node_js\ncache:\n yarn: true\n directories:\n - node_modules\nnode_js:\n- '8'\nscript:\n- npm run precommit\nafter_success:\n# Deploy code coverage report to codecov.io\n- npm run test:coverage:deploy\n" }, { "path": "LICENSE", "content": "The MIT License (MIT)\n\nCopyright (c) 2016 Sean Matheson\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "

\n \n

Provide props to your React Components based on their Width and/or Height.

\n

\n\n

\n\n[![Travis](https://img.shields.io/travis/ctrlplusb/react-component-queries.svg?style=flat-square)](https://travis-ci.org/ctrlplusb/react-component-queries)\n[![npm](https://img.shields.io/npm/v/react-component-queries.svg?style=flat-square)](http://npm.im/react-component-queries)\n[![MIT License](https://img.shields.io/npm/l/react-component-queries.svg?style=flat-square)](http://opensource.org/licenses/MIT)\n[![Codecov](https://img.shields.io/codecov/c/github/ctrlplusb/react-component-queries.svg?style=flat-square)](https://codecov.io/github/ctrlplusb/react-component-queries)\n\n```javascript\nimport componentQueries from 'react-component-queries'\n\nfunction MyComponent({ mode }) {\n return (\n

\n { mode === 'wide'\n ? \n : }\n
\n )\n}\n\ncomponentQueries(\n ({ width }) => ({ mode: width < 768 ? 'narrow' : 'wide' }),\n)(MyComponent);\n```\n\n* Responsive Components!\n* A useful abstraction on the bare metal `react-sizeme` component.\n* Easy to use.\n* Extensive browser support.\n* Supports any Component type, i.e. stateless/class.\n* Works with React 0.14.x and 15.x.x.\n* 1.84KB gzipped standalone, even smaller if bundled into your own project.\n\n## TOCS\n\n - [Overview](https://github.com/ctrlplusb/react-component-queries#overview)\n - [Why use this instead of `react-sizeme`?](https://github.com/ctrlplusb/react-component-queries#why-use-this-instead-of-react-sizeme)\n - [Install](https://github.com/ctrlplusb/react-component-queries#install)\n - [Demo](https://github.com/ctrlplusb/react-component-queries#demo)\n - [API](https://github.com/ctrlplusb/react-component-queries#api)\n - [Examples](https://github.com/ctrlplusb/react-component-queries#examples)\n - [Prop Conflict Handling](https://github.com/ctrlplusb/react-component-queries#prop-conflict-handling)\n - [Custom Prop Conflict Resolution](https://github.com/ctrlplusb/react-component-queries#custom-prop-conflict-resolution)\n\n## Overview\n\n`react-component-queries` is a useful abstraction of the [`react-sizeme`](https://github.com/ctrlplusb/react-sizeme) library. It allows you to define queries against the dimensions of your Component in order to produce custom props for your Component.\n\nAny time the dimensions of your rendered Component changes the queries will automatically be run again.\n\nThe _queries_ themselves are super simple functions that accept a `size` argument. You can implement any logic you like within the _query_ functions but they must return an object containing the props you would like to assign to your Component.\n\nFor example:\n\n```javascript\nfunction isSquareQuery(size) {\n return {\n isSquare: size.width === size.height\n };\n}\n```\n\nIt's great to be able to define your _queries_ as functions as this gives you an opportunity to create and share _queries_ across your components.\n\nOnce you have configured your _queries_ then pass them to `ComponentQueries` and wrap your component, like so:\n\n```javascript\nimport componentQueries from 'react-component-queries';\n...\ncomponentQueries(query1, query2)(MyComponent)\n```\n\nYou can provide as many queries as you like, their results will be merged and passed to your component.\n\nOf course you can provide your queries inline too. Below we are using the ES2015 destructuring and anonymous function syntax:\n\n```javascript\ncomponentQueries(\n // This query emulates a \"breakpoint\" type of property\n ({ width }) => {\n if (width <= 330) return { breakpoint: 'small' };\n if (width > 330 && width <=960) return { breakpoint: 'medium' };\n return { breakpoint: 'large' };\n },\n // You can have multiple queries, and the props that are returned can\n // be of any type. Boolean's are often useful.\n ({ width }) => ({ isMassive: width > 1000000 })\n)(MyComponent);\n```\n\nThe above example will result in a `breakpoint` and an `isMassive` prop being passed to your component.\n\n## Why use this instead of `react-sizeme`?\n\n[`react-sizeme`](https://github.com/ctrlplusb/react-sizeme) is great, however, it suffers with a couple of problems in my opinion:\n\n 1. It is raw in that it provides you with the actual dimensions of your component and then requires to execute logic within your component to establish the desired behaviour of your component. This can be a bit tedious and polute your component with a lot of if-else statements. \n 2. It is possible that your component may gets spammed with updated `size` props. This is because _any_ time your component changes in size `react-sizeme` will kick in.\n\n`react-component-queries` was built to solve these problems. It solves problem 1 by moving the dimension based logic out of your component. It then solves problem 2 by ensuring that your component will only be called for re-render if any of the prop values change. That saves you some error prone boilerplate.\n\nThis allows you to deal with \"simpler\" props, for example; a boolean flag indicating if the component is square, an enum representing it's size ('small'|'medium'|'large'), a className, or a style object. Whatever you feel is most appropriate for your use case.\n\nSo, to recap, some of the benefits of using this abstraction are:\n\n - Simplify your components by moving the dimension logic away from them, which in turn is easier to test in isolation.\n - `shouldComponentUpdate` is implemented on your behalf.\n - The _query functions_ themselves can be formed into a reusable library of queries for all your components. \n\nI am not trying to take away from `react-sizeme`, but I want to highlight that it's a bit more of a low level HOC, and if you want to use it you should be aware of the problems above and consider using your own abstraction or this one.\n\n## Install\n\nThere is a peer-dependency on `react-sizeme`, so run the following command to install both libraries:\n\n```\nnpm install react-sizeme react-component-queries --save\n```\n\n## Demo\n\n[See it in action!](https://react-component-queries-demo-aowygvryob.now.sh)\n\n## API\n\n`react-component-queries` exports a single function to be used as an HOC around your existing components. This function supports two modes of usage: _simple_ and _configured_.\n\n### _Simple_: `componentQueries(queries)`\n\nWraps your component with the given component queries using the default configuration options. You can provide either an array containing queries, or multiple arguments with each argument being a query function.\n\ne.g.\n\n```javascript\ncomponentQueries([\n function (size, props) { return { foo: 'bar' }; },\n function (size, props) { return { bob: true }; }\n])(MyComponent)\n```\n\nor\n\n```javascript\ncomponentQueries(\n function (size, props) { return { foo: 'bar' }; },\n function (size, props) { return { bob: true }; }\n)(MyComponent)\n```\n\n#### Arguments\n\n - `query(size, [ownProps]) : props` (_Function_): A query function which can be provided as a set of arguments, or can be contained within an array containing one or more queries.\n - `size` (_Object_): Contains the current dimensions of your wrapped component. As the default configuration is being used, it will only contain th e `width` dimension.\n - `width` (_Number_): The current width of your component. \n - [`ownProps`] \\(_Object_): The additional props which have been provided to your wrapped component.\n\n### _Configured_: `componentQueries(config)`\n\nWraps your component with the given component queries and uses the provided configuration customisations. You must provide an object containing a `queries` property as well as a `config` property.\n\ne.g.\n\n```javascript\ncomponentQueries({\n queries: [\n function (size, props) { return { foo: 'bar' }; },\n function (size, props) { return { bob: true }; }\n ],\n config: {\n monitorWidth: true,\n monitorHeight: false,\n refreshRate: 16,\n pure: true\n }\n})(MyComponent)\n```\n\n#### Arguments\n\n - `config` (_Object_): An object containing the queries and configuration.\n - `queries` (_Array_): An array of query functions:\n - `query(size, [ownProps]) : props` (_Function_): A query function which can be provided as a set of arguments, or can be contained within an array containing one or more queries.\n - `size` (_Object_): Contains the current dimensions of your wrapped component.\n - `[width]` (_Number_): Will only be provided if the `monitorWidth` configuration option is set to `true`. The current width of your component. \n - `[height]` (_Number_): Will only be provided if the `monitorHeight` configuration option is set to `true`. The current height of your component. \n - [`ownProps`] \\(_Object_): The additional props which have been provided to your wrapped component.\n - `[config]` (_Object_): Custom configuration.\n - `[monitorWidth]` (_Boolean_): If `true` then the width of your component will be tracked and provided within the `size` argument to your query functions. Defaults to `true`.\n - `[monitorHeight]` (_Boolean_): If `true` then the height of your component will be tracked and provided within the `size` argument to your query functions. Defaults to `false`.\n - `[refreshRate]` (_Number_): The maximum frequency, in milliseconds, at which size changes should be recalculated when changes in your Component's rendered size are being detected. This must not be set to lower than 16. Defaults to `16`.\n - `[noPlaceholder]` (_Boolean_): By default we render a \"placeholder\" component initially so we can try and \"prefetch\" the expected size for your component. This is to avoid any unnecessary deep tree renders. If you feel this is not an issue for your component case and you would like to get an eager render of your component then disable the placeholder using this config option. Defaults to `false`.\n - `[pure]` (_Boolean_): Indicates if your component should be considered \"pure\", i.e. it should only be rerendered if the result of your query functions change, or if new props are provided to the wrapped component. If you set it to false then the wrapped component will render _every_ time the size changes, even if it doesn't result in new query provided props. Defaults to `true`.\n - [`conflictResolver(prev, current, key) : Any`] \\(_Function_): A custom function to use in order to resolve prop conflicts when two or more query functions return a prop with the same key. This gives you an opportunity to do custom resolution for special prop types, e.g. `className` where you could instead concat the conflicted values. The default implementation will return the value from the _last_ query function provided in the query array. Please read the respective section further down in the readme for more info and examples of this.\n - `prev` (_Any_): The value of the conflicted prop provided by the previously executed query function.\n - `current` (_Any_): The value of the conflicted prop provided by the most recently executed query function.\n - `key` (_Any_): The name of the prop which is in conflict.\n\n## Examples\n\nBelow are a few super simple examples highlighting the usage and capabilities of the library. They are using the ES6 syntax described above to define the queries.\n\n__Example 1: Queries on your Component's width__\n\nBy default the ComponentQueries higher order component only operates on width. This is a design decision as in most cases we only wish to query against width, therefore we ignore height changes to minimize any potential DOM spamming. If you would like to operate on height too then please see Example 2.\n\n```javascript\nimport componentQueries from 'react-component-queries';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n {/* We recieve the following props from our queries */}\n I am at {this.props.scale} scale.\n
\n );\n }\n}\n\nexport default componentQueries(\n // Provide as many query functions as you need.\n ({ width }) => {\n if (width <= 330) return { breakpoint: 'small' };\n if (width > 330 && width <=960) return { breakpoint: 'medium' };\n return { breakpoint: 'large' };\n }\n)(MyComponent);\n```\n\n__Example 2: Queries on your Component's width AND height__\n\nIf you would like to operate on height also then you must use the extended configuration mode shown below to enable monitoring on the height of your component:\n\n```javascript\nimport componentQueries from 'react-component-queries';\n\nclass MyComponent extends Component {\n render() {\n return (\n
\n {/* We recieve the following props from our queries */}\n I am at {this.props.breakpoint} scale.
\n I am {this.props.short ? 'short' : 'long'}
\n I am {this.props.square ? 'square' : 'rectangular'}\n
\n );\n }\n}\n\n// NOTE: We are passing in a configuration object now.\nexport default componentQueries({\n queries: [\n // Use just the width.\n ({ width }) => {\n if (width <= 330) return { breakpoint: 'small' };\n if (width > 330 && width <=960) return { breakpoint: 'medium' };\n return { breakpoint: 'large' };\n },\n // Or use just the height.\n ({ height }) => ({ short: height > 200 }),\n // Or use both.\n ({ width, height }) => ({ square: width === height }),\n ],\n config: { monitorHeight: true }\n})(MyComponent);\n```\n\nAs you can see we expose a `sizeMeConfig`, please see the [`react-sizeme`](https://github.com/ctrlplusb/react-sizeme) for the full list of options that you can provide.\n\n## Prop Conflict Handling\n\nAs it is possible for you to provide props from multiple queries there could be cases where prop clashing occurs. By default we have an order of preference for which prop value should be resolved in the case of conflicts. \n\n__The rule is:__ Custom passed in props take preference followed by the last item in the query collection.\n\nLet's illustrate this given the following component:\n\n```\nconst MyComponent = componentQueries(\n ({ width }) => { return { foo: 'bar' }; },\n ({ width }) => { return { foo: 'bob' }; }\n)(ComponentToWrap);\n```\n\nIf we rendered this component the value we would received for `foo` would be \"bob\".\n\nThen say we rendered our component like so, passing in a custom prop:\n\n```\nReactDOM.render(, container);\n```\n\nIn this case the value of `foo` would resolve to \"zip\".\n\nIt's important to remember this.\n\n## Custom Prop Conflict Resolution\n\nThere may be cases when you want to provide custom rules for how conflicts are resolved. For example, say you wanted your queries to produce `className` props, but desired that any conflicts simply resolved in the conflicts being concatenated. This can be especially helpful in the case where you want users to be able to pass in custom `className` props into your component.\n\nTo support this case we provide an extended configuration item called `conflictResolver`, which is specifically a function of the following structure:\n\n```javascript\nfunction (prevPropValue: Any, currentPropValue: Any, propName: String) : Any\n```\n\nTo solve our above described case we could provide the following implementation of the `conflictResolver`:\n\n```javascript\nconst MyComponent = componentQueries({\n queries: [\n ({ width }) => ({ className: 'foo', poop: 'splash' }),\n ({ width }) => ({ className: 'bar', poop: 'plop' })\n ],\n conflictResolver: (prev, current, key) => {\n // If the prop is \"className\" we will concat the new value to\n // the current value.\n if (key === 'className') {\n return prev.concat(' ', current);\n }\n // Otherwise we return the current value, overriding the prev value.\n return current;\n }\n})(ComponentToWrap);\n```\n\nIf we rendered our component like so:\n\n```javascript\nReactDOM.render(, container);\n```\n\nThen the props that would be resolved would be:\n\n```javascript\n{\n className: 'foo bar baz',\n poop: 'plop'\n}\n```\n\n---\n\n### Credits\n\nRubix graphic by Freepik from Flaticon is licensed under CC BY 3.0. Made with Logo Maker\n" }, { "path": "examples/.eslintrc", "content": "{\n \"rules\": {\n \"no-console\": 0\n }\n}\n" }, { "path": "examples/web/.babelrc", "content": "{\n \"presets\": [\n \"latest\",\n \"stage-3\",\n \"react\"\n ]\n}\n" }, { "path": "examples/web/package.json", "content": "{\n \"name\": \"my-library-example\",\n \"version\": \"1.0.0\",\n \"description\": \"An example of my-library\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"start\": \"babel-node server.js\"\n },\n \"author\": \"\",\n \"license\": \"MIT\",\n \"devDependencies\": {},\n \"dependencies\": {\n \"app-root-dir\": \"^1.0.2\",\n \"babel-cli\": \"^6.18.0\",\n \"babel-core\": \"^6.21.0\",\n \"babel-loader\": \"^6.2.10\",\n \"babel-preset-latest\": \"^6.16.0\",\n \"babel-preset-react\": \"^6.16.0\",\n \"babel-preset-stage-3\": \"^6.17.0\",\n \"babel-register\": \"^6.18.0\",\n \"express\": \"^4.14.0\",\n \"html-webpack-plugin\": \"^2.26.0\",\n \"react\": \"^15.4.2\",\n \"react-dom\": \"^15.4.2\",\n \"webpack\": \"^2.2.0-rc.3\",\n \"webpack-dev-middleware\": \"^1.9.0\",\n \"webpack-hot-middleware\": \"^2.15.0\"\n }\n}\n" }, { "path": "examples/web/server.js", "content": "import express from 'express';\nimport webpack from 'webpack';\nimport devMiddleware from 'webpack-dev-middleware';\nimport hotMiddleware from 'webpack-hot-middleware';\nimport config from './tools/webpack/config';\n\nconst port = process.env.PORT || 1337;\nconst app = express();\nconst compiler = webpack(config);\napp.use(\n devMiddleware(compiler, {\n quiet: true,\n noInfo: true,\n headers: {\n 'Access-Control-Allow-Origin': '*',\n },\n // Ensure that the public path is taken from the compiler webpack config\n // as it will have been created as an absolute path to avoid conflicts\n // with an node servers.\n publicPath: compiler.options.output.publicPath,\n }),\n);\napp.use(hotMiddleware(compiler));\n\napp.listen(port, () => console.log(`Example running on port ${port}...`));\n" }, { "path": "examples/web/src/index.js", "content": "import React from 'react';\nimport { render } from 'react-dom';\n\nfunction App() {\n return
poop
;\n}\n\nrender(, document.getElementById('app'));\n" }, { "path": "examples/web/tools/webpack/config.js", "content": "import { resolve as resolvePath } from 'path';\nimport webpack from 'webpack';\nimport HtmlWebpackPlugin from 'html-webpack-plugin';\nimport appRootDir from 'app-root-dir';\nimport pkg from '../../package.json';\n\nmodule.exports = {\n entry: {\n index: resolvePath(appRootDir.get(), './src/index.js'),\n },\n output: {\n path: resolvePath(appRootDir.get(), './build'),\n filename: `${pkg.name}.js`,\n publicPath: '/',\n },\n target: 'web',\n plugins: [\n new webpack.NoErrorsPlugin(),\n new HtmlWebpackPlugin({\n filename: 'index.html',\n template: resolvePath(__dirname, './html.js'),\n inject: true,\n // We can pass custom data to the template...\n custom: {\n name: pkg.name,\n description: pkg.description,\n },\n }),\n ],\n module: {\n rules: [\n {\n test: /\\.js$/,\n loader: 'babel-loader',\n include: [\n resolvePath(appRootDir.get(), './src'),\n ],\n },\n ],\n },\n};\n" }, { "path": "examples/web/tools/webpack/html.js", "content": "module.exports = function html(templateParams) {\n const { name, description } = templateParams.htmlWebpackPlugin.options.custom;\n return `\n \n \n \n \n \n \n \n \n ${name} example\n \n \n
\n \n `;\n};\n" }, { "path": "package.json", "content": "{\n \"name\": \"react-component-queries\",\n \"description\":\n \"Provide props to your Components based on their Width and/or Height.\",\n \"version\": \"2.3.0\",\n \"license\": \"MIT\",\n \"main\": \"dist/react-component-queries.js\",\n \"files\": [\"*.js\", \"*.md\", \"dist\"],\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/ctrlplusb/react-component-queries.git\"\n },\n \"homepage\": \"https://github.com/ctrlplusb/react-component-queries#readme\",\n \"author\": \"Sean Matheson \",\n \"keywords\": [\"library\"],\n \"scripts\": {\n \"build\": \"node ./tools/scripts/build.js\",\n \"clean\": \"rimraf ./dist && rimraf ./coverage\",\n \"example:web\":\n \"echo 'Make sure to `cd example/web && yarn install`' && cd example/web && yarn run start\",\n \"lint\": \"eslint src\",\n \"precommit\": \"lint-staged && npm run test\",\n \"prepublish\": \"npm run build\",\n \"test\": \"jest\",\n \"test:coverage\": \"npm run test -- --coverage\",\n \"test:coverage:deploy\": \"npm run test:coverage && codecov\"\n },\n \"dependencies\": {\n \"invariant\": \"^2.2.2\"\n },\n \"peerDependencies\": {\n \"prop-types\": \"^15.0.0\",\n \"react\": \"^0.14.0 || ^15.0.0 || ^16.0.0\",\n \"react-dom\": \"^0.14.0 || ^15.0.0 || ^16.0.0\",\n \"react-sizeme\": \"^2.0.0\"\n },\n \"devDependencies\": {\n \"app-root-dir\": \"^1.0.2\",\n \"babel-cli\": \"^6.26.0\",\n \"babel-core\": \"^6.26.0\",\n \"babel-eslint\": \"^8.0.0\",\n \"babel-jest\": \"^22.4.3\",\n \"babel-plugin-external-helpers\": \"^6.22.0\",\n \"babel-plugin-transform-class-properties\": \"^6.24.1\",\n \"babel-polyfill\": \"^6.26.0\",\n \"babel-preset-env\": \"^1.6.0\",\n \"babel-preset-react\": \"^6.24.1\",\n \"babel-preset-stage-3\": \"^6.24.1\",\n \"babel-register\": \"^6.26.0\",\n \"change-case\": \"^3.0.2\",\n \"codecov\": \"^3.0.0\",\n \"cross-env\": \"^5.0.5\",\n \"enzyme\": \"^3.1.0\",\n \"enzyme-adapter-react-16\": \"^1.0.2\",\n \"enzyme-to-json\": \"^3.1.4\",\n \"eslint\": \"^4.7.2\",\n \"eslint-config-airbnb\": \"^16.1.0\",\n \"eslint-config-prettier\": \"^2.9.0\",\n \"eslint-plugin-import\": \"^2.7.0\",\n \"eslint-plugin-jsx-a11y\": \"^6.0.3\",\n \"eslint-plugin-react\": \"^7.3.0\",\n \"gzip-size\": \"^4.0.0\",\n \"husky\": \"^0.14.3\",\n \"in-publish\": \"^2.0.0\",\n \"jest\": \"^22.4.3\",\n \"lint-staged\": \"^7.0.0\",\n \"prettier\": \"^1.7.0\",\n \"pretty-bytes\": \"^4.0.2\",\n \"raf\": \"^3.4.0\",\n \"ramda\": \"^0.25.0\",\n \"react\": \"^16.0.0\",\n \"react-dom\": \"^16.0.0\",\n \"react-sizeme\": \"^2.3.6\",\n \"readline-sync\": \"^1.4.7\",\n \"rimraf\": \"^2.6.2\",\n \"rollup\": \"^0.57.1\",\n \"rollup-plugin-babel\": \"^3.0.3\",\n \"rollup-plugin-uglify\": \"^3.0.0\"\n },\n \"jest\": {\n \"collectCoverageFrom\": [\"src/**/*.{js,jsx}\"],\n \"snapshotSerializers\": [\"/node_modules/enzyme-to-json/serializer\"],\n \"testPathIgnorePatterns\": [\"/(coverage|dist|node_modules|tools)/\"]\n },\n \"eslintConfig\": {\n \"root\": true,\n \"parser\": \"babel-eslint\",\n \"env\": {\n \"browser\": true,\n \"es6\": true,\n \"node\": true,\n \"jest\": true\n },\n \"extends\": [\"airbnb\", \"prettier\"],\n \"rules\": {\n \"camelcase\": 0,\n \"import/prefer-default-export\": 0,\n \"import/no-extraneous-dependencies\": 0,\n \"no-nested-ternary\": 0,\n \"no-underscore-dangle\": 0,\n \"react/no-array-index-key\": 0,\n \"react/react-in-jsx-scope\": 0,\n \"semi\": [2, \"never\"],\n \"react/forbid-prop-types\": 0,\n \"react/jsx-filename-extension\": 0,\n \"react/sort-comp\": 0\n }\n },\n \"eslintIgnore\": [\"node_modules/\", \"dist/\", \"coverage/\"],\n \"prettier\": {\n \"semi\": false,\n \"singleQuote\": true,\n \"trailingComma\": \"all\"\n },\n \"lint-staged\": {\n \"*.js\": [\"prettier --write \\\"src/**/*.js\\\"\", \"git add\"]\n }\n}\n" }, { "path": "rollup-min.config.js", "content": "const uglify = require('rollup-plugin-uglify')\nconst packageJson = require('./package.json')\n\nconst baseConfig = require('./rollup.config.js')\n\nbaseConfig.plugins.push(uglify())\nbaseConfig.output.file = `dist/${packageJson.name}.min.js`\n\nmodule.exports = baseConfig\n" }, { "path": "rollup.config.js", "content": "const babel = require('rollup-plugin-babel')\nconst changeCase = require('change-case')\nconst packageJson = require('./package.json')\n\nprocess.env.BABEL_ENV = 'production'\n\nmodule.exports = {\n external: [\n 'element-resize-detector',\n 'invariant',\n 'lodash.debounce',\n 'lodash.throttle',\n 'prop-types',\n 'react-dom',\n 'react-sizeme',\n 'react',\n ],\n input: 'src/index.js',\n output: {\n file: `dist/${packageJson.name}.js`,\n format: 'cjs',\n sourcemap: true,\n name: changeCase\n .titleCase(packageJson.name.replace(/-/g, ' '))\n .replace(/ /g, ''),\n },\n plugins: [\n babel({\n babelrc: false,\n exclude: 'node_modules/**',\n presets: [['env', { modules: false }], 'stage-3', 'react'],\n plugins: ['external-helpers', 'transform-class-properties'],\n }),\n ],\n}\n" }, { "path": "src/__tests__/componentQueries.test.js", "content": "/* eslint-disable import/no-extraneous-dependencies */\n/* eslint-disable global-require */\n/* eslint-disable no-underscore-dangle */\n\nimport React from 'react'\nimport enzyme, { mount } from 'enzyme'\nimport Adapter from 'enzyme-adapter-react-16'\n\nenzyme.configure({ adapter: new Adapter() })\n\ndescribe('Given the ComponentQueries library', () => {\n let componentQueries\n let sizeMeConfig\n\n beforeEach(() => {\n jest.doMock('react-sizeme', () => config => {\n sizeMeConfig = config\n return x => x\n })\n\n componentQueries = require('../componentQueries').default\n })\n\n describe('When setting up the ComponentQueries HOC', () => {\n describe('And no queries are provided', () => {\n it('Then an error should be thrown', () => {\n const simpleConfig = () => {\n componentQueries()\n }\n expect(simpleConfig).toThrow(\n /provide at least one query to ComponentQueries/,\n )\n\n const complexConfig = () => {\n componentQueries({\n queries: [],\n })\n }\n expect(complexConfig).toThrow(\n /provide at least one query to ComponentQueries/,\n )\n\n const complexConfig2 = () => {\n componentQueries({\n queries: 'foo',\n })\n }\n expect(complexConfig2).toThrow(/\"queries\" must be provided as an array/)\n })\n })\n\n describe('And an invalid query type is provided', () => {\n it('Then an error should be thrown', () => {\n const simpleConfig = () => {\n componentQueries('wrong!')\n }\n expect(simpleConfig).toThrow(\n /queries for ComponentQueries should be functions/,\n )\n\n const complexConfig = () => {\n componentQueries({\n queries: ['foo'],\n })\n }\n expect(complexConfig).toThrow(\n /queries for ComponentQueries should be functions/,\n )\n })\n })\n\n describe('And no sizeMeConfig configuration is provided', () => {\n it('Then the default config should be given to SizeMe', () => {\n componentQueries(() => ({}))(() =>
)\n\n expect(sizeMeConfig).toMatchObject({\n monitorHeight: false,\n monitorWidth: true,\n refreshRate: 16,\n })\n })\n })\n\n describe('And a custom sizeMeConfig configuration is provided', () => {\n it('Then the custom config should be given to SizeMe', () => {\n componentQueries({\n queries: [() => ({})],\n sizeMeConfig: {\n monitorHeight: true,\n monitorWidth: false,\n noPlaceholder: true,\n refreshRate: 200,\n },\n })(() =>
)\n\n expect(sizeMeConfig).toMatchObject({\n monitorHeight: true,\n monitorWidth: false,\n refreshRate: 200,\n noPlaceholder: true,\n })\n })\n })\n\n describe('And a custom config is provided', () => {\n it('Then the custom config should be given to SizeMe', () => {\n const conflictResolver = () => undefined\n\n componentQueries({\n queries: [() => ({})],\n config: {\n monitorHeight: true,\n monitorWidth: false,\n refreshRate: 200,\n refreshMode: 'debounce',\n noPlaceholder: true,\n conflictResolver,\n },\n })(() =>
)\n\n expect(sizeMeConfig).toMatchObject({\n monitorHeight: true,\n monitorWidth: false,\n refreshRate: 200,\n refreshMode: 'debounce',\n noPlaceholder: true,\n })\n })\n })\n })\n\n describe('When rendering a component queries component', () => {\n it(\"Then it should receive the appropriate props based on it's queries\", () => {\n let receivedProps\n\n const ComponentQueriedComponent = componentQueries({\n queries: [\n ({ width }) => (width <= 100 ? { foo: 'bar' } : {}),\n ({ width }) => (width > 100 ? { bob: 'baz' } : {}),\n ({ height }) => (height <= 100 ? { zip: 'zap' } : {}),\n ],\n // NOTE: This is the old configuration.\n sizeMeConfig: {\n monitorWidth: true,\n monitorHeight: true,\n },\n })(props => {\n receivedProps = props\n return
\n })\n\n // Initial render\n const mounted = mount(\n ,\n )\n expect(receivedProps).toMatchObject({ foo: 'bar', zip: 'zap' })\n\n // Update size, but no size change\n mounted.setProps({ size: { width: 100, height: 100 } })\n expect(receivedProps).toMatchObject({ foo: 'bar', zip: 'zap' })\n\n // Update size, with change.\n mounted.setProps({ size: { width: 101, height: 99 } })\n expect(receivedProps).toMatchObject({ bob: 'baz', zip: 'zap' })\n\n // Update size, with change.\n mounted.setProps({ size: { width: 101, height: 101 } })\n expect(receivedProps).toMatchObject({ bob: 'baz' })\n })\n\n it('Then it should only rerender if the props have changed', () => {\n const ComponentQueriedComponent = componentQueries({\n queries: [\n ({ width }) => (width <= 100 ? { foo: 'bar' } : {}),\n ({ width }) => (width > 100 ? { bob: 'baz' } : {}),\n ],\n })(() =>
)\n\n // Initial render\n const mounted = mount(\n ,\n )\n const instance = mounted.instance()\n\n // Set up a spy on the render\n const renderSpy = jest.spyOn(instance, 'render')\n expect(renderSpy).toHaveBeenCalledTimes(0)\n\n // Change the width so that the queries produce a new result.\n mounted.setProps({ size: { width: 150 }, foo: 'bar' })\n expect(renderSpy).toHaveBeenCalledTimes(1)\n\n // Change the width so that the queries produce the same result.\n mounted.setProps({ size: { width: 120 }, foo: 'bar' })\n expect(renderSpy).toHaveBeenCalledTimes(1)\n\n // Change the value of an \"other\" prop should cause a new render.\n mounted.setProps({ size: { width: 120 }, foo: 'zip' })\n expect(renderSpy).toHaveBeenCalledTimes(2)\n })\n\n it('Then an impure component should always render', () => {\n const ComponentQueriedComponent = componentQueries({\n queries: [({ width }) => (width <= 100 ? { foo: 'bar' } : {})],\n config: {\n pure: false,\n },\n })(() =>
)\n\n // Initial render\n const mounted = mount(\n ,\n )\n const instance = mounted.instance()\n\n // Set up a spy on the render\n const renderSpy = jest.spyOn(instance, 'render')\n expect(renderSpy).toHaveBeenCalledTimes(0)\n\n // Set the props causes a rerender.\n mounted.setProps({ size: { width: 150 }, foo: 'bar' })\n expect(renderSpy).toHaveBeenCalledTimes(1)\n\n // Set the same props causes a rerender.\n mounted.setProps({ size: { width: 150 }, foo: 'bar' })\n expect(renderSpy).toHaveBeenCalledTimes(2)\n })\n\n it('Then it should pass the \"other\" props to the queries', () => {\n let actualProps\n\n const ComponentQueriedComponent = componentQueries((_, props) => {\n actualProps = props\n return {}\n })(() =>
)\n\n // Initial mount should call queries.\n const expectedMountProps = { foo: 'bar', baz: 1 }\n const mounted = mount(\n ,\n )\n expect(actualProps).toMatchObject(expectedMountProps)\n\n // Update should call queries with updated props.\n const expectedUpdateProps = { foo: 'bob', baz: 2 }\n mounted.setProps(\n Object.assign({}, { size: { width: 100 } }, expectedUpdateProps),\n )\n expect(actualProps).toMatchObject(expectedUpdateProps)\n })\n\n it('Then height should be undefined if we are not monitoring height', () => {\n let actualHeight\n\n const ComponentQueriedComponent = componentQueries(({ height }) => {\n actualHeight = height\n return {}\n })(() =>
)\n\n // Initial render\n mount()\n expect(actualHeight).toEqual(null)\n })\n\n it('Then duplicate props should be overridden when using the default conflict resolver', () => {\n let receivedProps\n\n const ComponentQueriedComponent = componentQueries(\n ({ width }) => (width <= 100 ? { foo: 'bar' } : {}),\n ({ width }) => (width <= 100 ? { foo: 'baz' } : {}),\n )(props => {\n receivedProps = props\n return
\n })\n\n // Initial render with duplicate query result.\n const mounted = mount(\n ,\n )\n expect(receivedProps).toMatchObject({ foo: 'baz' })\n\n // Set a custom prop that conflicts with the query result.\n mounted.setProps({ foo: 'bob' })\n expect(receivedProps).toMatchObject({ foo: 'bob' })\n })\n\n it('Then a custom conflict resolver should behave as expected', () => {\n let receivedProps\n\n const ComponentQueriedComponent = componentQueries({\n queries: [\n ({ width }) => (width <= 100 ? { foo: 'bar' } : {}),\n ({ width }) => (width <= 100 ? { foo: 'bob' } : {}),\n ],\n conflictResolver: (x, y, key) => (key === 'foo' ? x.concat(' ', y) : y),\n })(props => {\n receivedProps = props\n return
\n })\n\n // Initial render duplicate prop\n const mounted = mount(\n ,\n )\n\n expect(receivedProps).toMatchObject({ foo: 'bar bob' })\n\n // Updated component duplicate prop\n mounted.setProps({ foo: 'baz' })\n\n expect(mounted.props().foo).toEqual('baz')\n })\n })\n})\n" }, { "path": "src/componentQueries.js", "content": "import React, { Component } from 'react'\nimport PropTypes from 'prop-types'\nimport invariant from 'invariant'\nimport sizeMe from 'react-sizeme'\nimport mergeWith from './utils/mergeWith'\nimport getDisplayName from './utils/getDisplayName'\nimport shallowEqual from './utils/shallowEqual'\n\nconst defaultConfig = {\n monitorHeight: false,\n monitorWidth: true,\n refreshRate: 16,\n pure: true,\n noPlaceholder: false,\n}\n\nconst defaultConflictResolver = (x, y) => y\n\nconst defaultSizeMeConfig = () => ({\n monitorWidth: defaultConfig.monitorWidth,\n monitorHeight: defaultConfig.monitorHeight,\n refreshRate: defaultConfig.refreshRate,\n})\n\n/**\n * :: Queries -> Component -> Component\n *\n * This is a HOC that provides you with the mechanism to specify Component\n * queries. A Component query is a similar concept to media queries except it\n * operates on the Component's width/height rather than the entire viewport\n * width/height.\n */\nfunction componentQueries(...params) {\n let queries\n let sizeMeConfig\n let pure\n let conflictResolver\n\n if (params.length === 1 && params[0].queries) {\n queries = params[0].queries || []\n if (params[0].sizeMeConfig) {\n // Old school config style.\n sizeMeConfig = params[0].sizeMeConfig || defaultSizeMeConfig()\n pure = defaultConfig.pure // this didn't exist before, so we default it.\n } else if (params[0].config) {\n // New school config style.\n pure = params[0].config.pure\n const {\n monitorHeight,\n monitorWidth,\n refreshRate,\n refreshMode,\n noPlaceholder,\n } = params[0].config\n sizeMeConfig = {\n monitorHeight:\n monitorHeight != null ? monitorHeight : defaultConfig.monitorHeight,\n monitorWidth:\n monitorWidth != null ? monitorWidth : defaultConfig.monitorWidth,\n refreshRate:\n refreshRate != null ? refreshRate : defaultConfig.refreshRate,\n refreshMode:\n refreshMode != null ? refreshMode : defaultConfig.refreshMode,\n noPlaceholder:\n noPlaceholder != null ? noPlaceholder : defaultConfig.noPlaceholder,\n }\n }\n conflictResolver =\n conflictResolver || params[0].conflictResolver || defaultConflictResolver\n invariant(\n typeof conflictResolver === 'function',\n 'The conflict resolver you provide to ComponentQueries should be a function.',\n )\n invariant(\n Array.isArray(queries),\n '\"queries\" must be provided as an array when using the complex configuration.',\n )\n } else {\n queries = params\n }\n\n // TODO: Consider removing this check. Perhaps it's best to just silently\n // pass through if no queries were provided? Maybe a development based\n // warning would be the most useful.\n invariant(\n queries.length > 0,\n 'You must provide at least one query to ComponentQueries.',\n )\n invariant(\n queries.filter(q => typeof q !== 'function').length === 0,\n 'All provided queries for ComponentQueries should be functions.',\n )\n\n // We will default out any configuration if it wasn't set.\n sizeMeConfig = sizeMeConfig || defaultSizeMeConfig()\n conflictResolver = conflictResolver || defaultConflictResolver\n pure = pure != null ? pure : defaultConfig.pure\n\n const mergeWithCustomizer = (x, y, key) => {\n if (x === undefined) return undefined\n return conflictResolver(x, y, key)\n }\n\n return function WrapComponent(WrappedComponent) {\n class ComponentWithComponentQueries extends Component {\n static displayName = `ComponentQueries(${getDisplayName(\n WrappedComponent,\n )})`\n\n static propTypes = {\n size: PropTypes.shape({\n width: PropTypes.number, // eslint-disable-line react/no-unused-prop-types\n height: PropTypes.number, // eslint-disable-line react/no-unused-prop-types\n }).isRequired,\n }\n\n static WrappedComponent = WrappedComponent\n\n state = {\n queryResult: {},\n }\n\n componentWillMount() {\n const { size, ...otherProps } = this.props\n this.runQueries(size, otherProps)\n }\n\n componentWillReceiveProps(nextProps) {\n const { size } = this.props\n const { size: nextSize, ...nextOtherProps } = nextProps\n\n if (!shallowEqual(size, nextSize)) {\n this.runQueries(nextSize, nextOtherProps)\n }\n }\n\n shouldComponentUpdate(nextProps, nextState) {\n const {\n size, // eslint-disable-line no-unused-vars\n ...otherProps\n } = this.props\n const {\n size: nextSize, // eslint-disable-line no-unused-vars\n ...nextOtherProps\n } = nextProps\n\n return (\n !pure ||\n !shallowEqual(otherProps, nextOtherProps) ||\n !shallowEqual(this.state.queryResult, nextState.queryResult)\n )\n }\n\n runQueries({ width, height }, otherProps) {\n const queryResult = queries.reduce(\n (acc, cur) =>\n mergeWith(\n acc,\n cur(\n {\n width: sizeMeConfig.monitorWidth ? width : null,\n height: sizeMeConfig.monitorHeight ? height : null,\n },\n otherProps,\n ),\n mergeWithCustomizer,\n ),\n {},\n )\n\n this.setState({ queryResult })\n }\n\n render() {\n const {\n size, // eslint-disable-line no-unused-vars\n ...otherProps\n } = this.props\n\n const allProps = mergeWith(\n this.state.queryResult,\n otherProps,\n mergeWithCustomizer,\n )\n\n return \n }\n }\n\n return sizeMe(sizeMeConfig)(ComponentWithComponentQueries)\n }\n}\n\nexport default componentQueries\n" }, { "path": "src/index.js", "content": "import componentQueries from './componentQueries'\n\nexport default componentQueries\n" }, { "path": "src/utils/__tests__/mergeWith.test.js", "content": "import mergeWith from '../mergeWith'\n\ndescribe('When mering props with `mergeWith`', () => {\n describe('and we are using \"apply left prop\" as resolver', () => {\n const resolver = x => x\n it('it should keep all defined values on left side.', () => {\n const a = {\n string: 'string',\n zero: 0,\n negaive: -1,\n float: 0.555555,\n deep: {\n er: 'foo',\n },\n array: [0, 1],\n emptyArray: [],\n }\n expect(mergeWith(a, {}, resolver)).toMatchObject({\n string: 'string',\n zero: 0,\n negaive: -1,\n float: 0.555555,\n deep: {\n er: 'foo',\n },\n array: [0, 1],\n emptyArray: [],\n })\n })\n\n it('it should keep all defined values on right side.', () => {\n const b = {\n string: 'string',\n zero: 0,\n negaive: -1,\n float: 0.555555,\n deep: {\n er: 'foo',\n },\n array: [0, 1],\n emptyArray: [],\n }\n expect(mergeWith({}, b, resolver)).toMatchObject({\n string: 'string',\n zero: 0,\n negaive: -1,\n float: 0.555555,\n deep: {\n er: 'foo',\n },\n array: [0, 1],\n emptyArray: [],\n })\n })\n\n it('it should copy existing values and use left one on conflict.', () => {\n const a = {\n string: 'string',\n }\n const b = {\n string: 'my string',\n }\n expect(mergeWith(a, b, resolver)).toMatchObject({\n string: 'string',\n })\n })\n })\n})\n" }, { "path": "src/utils/getDisplayName.js", "content": "// :: Component => String\nfunction getDisplayName(WrappedComponent) {\n return WrappedComponent.displayName || WrappedComponent.name || 'Component'\n}\n\nexport default getDisplayName\n" }, { "path": "src/utils/mergeWith.js", "content": "// :: (Object, Object, (any, any) => any) => Object\nconst mergeWith = (x, y, fn) => {\n const result = Object.assign({}, x)\n\n Object.keys(y).forEach(key => {\n if (x[key] && y[key]) {\n result[key] = fn(x[key], y[key], key)\n } else {\n result[key] = y[key]\n }\n })\n\n return result\n}\n\nexport default mergeWith\n" }, { "path": "src/utils/shallowEqual.js", "content": "// Taken from react-redux. Thanks Dan!\n\nexport default function shallowEqual(objA, objB) {\n if (objA === objB) {\n return true\n }\n\n const keysA = Object.keys(objA)\n const keysB = Object.keys(objB)\n\n if (keysA.length !== keysB.length) {\n return false\n }\n\n // Test for A's keys different from B.\n const hasOwn = Object.prototype.hasOwnProperty\n for (let i = 0; i < keysA.length; i += 1) {\n // eslint-disable-line no-plusplus\n if (!hasOwn.call(objB, keysA[i]) || objA[keysA[i]] !== objB[keysA[i]]) {\n return false\n }\n }\n\n return true\n}\n" }, { "path": "tools/.eslintrc", "content": "{\n \"rules\": {\n \"no-console\": 0,\n \"import/no-extraneous-dependencies\": 0\n }\n}\n" }, { "path": "tools/scripts/build.js", "content": "const { readFileSync } = require('fs')\nconst { inInstall } = require('in-publish')\nconst prettyBytes = require('pretty-bytes')\nconst gzipSize = require('gzip-size')\nconst { pipe } = require('ramda')\nconst { exec } = require('../utils')\nconst packageJson = require('../../package.json')\n\nif (inInstall()) {\n process.exit(0)\n}\n\nconst nodeEnv = Object.assign({}, process.env, {\n NODE_ENV: 'production',\n})\n\nexec('npx rollup -c rollup-min.config.js', nodeEnv)\nexec('npx rollup -c rollup.config.js', nodeEnv)\n\nfunction fileGZipSize(path) {\n return pipe(readFileSync, gzipSize.sync, prettyBytes)(path)\n}\n\nconsole.log(\n `\\ngzipped, the build is ${fileGZipSize(`dist/${packageJson.name}.min.js`)}`,\n)\n" }, { "path": "tools/utils.js", "content": "const { execSync } = require('child_process')\nconst appRootDir = require('app-root-dir')\n\nfunction exec(command) {\n execSync(command, { stdio: 'inherit', cwd: appRootDir.get() })\n}\n\nmodule.exports = {\n exec,\n}\n" }, { "path": "wallaby.js", "content": "const fs = require('fs')\nconst path = require('path')\n\nprocess.env.NODE_ENV = 'test'\n\nconst babelConfigContents = fs.readFileSync(path.join(__dirname, '.babelrc'))\nconst babelConfig = JSON.parse(babelConfigContents)\n\nmodule.exports = wallaby => ({\n files: ['src/**/*.js', { pattern: 'src/**/*.test.js', ignore: true }],\n tests: ['src/**/*.test.js'],\n testFramework: 'jest',\n env: {\n type: 'node',\n runner: 'node',\n },\n compilers: {\n 'src/**/*.js': wallaby.compilers.babel(babelConfig),\n },\n})\n" } ]