{"id":18682843,"url":"https://github.com/yandex/reselector","last_synced_at":"2025-04-12T04:24:23.067Z","repository":{"id":42210869,"uuid":"119454845","full_name":"yandex/reselector","owner":"yandex","description":"Use React Components in css selectors","archived":false,"fork":false,"pushed_at":"2023-11-01T15:38:29.000Z","size":2968,"stargazers_count":44,"open_issues_count":21,"forks_count":10,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-05-22T22:44:43.187Z","etag":null,"topics":["autotesting","babel-plugin","css-selector","react"],"latest_commit_sha":null,"homepage":"https://npm.im/reselector","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yandex.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-29T23:22:49.000Z","updated_at":"2024-06-21T13:09:52.595Z","dependencies_parsed_at":"2024-06-21T13:09:27.308Z","dependency_job_id":"7eef558e-b361-436f-b2d0-a2b0a2dfcec4","html_url":"https://github.com/yandex/reselector","commit_stats":null,"previous_names":["lttb/babel-plugin-autotest","lttb/reselector"],"tags_count":64,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yandex%2Freselector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yandex%2Freselector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yandex%2Freselector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yandex%2Freselector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yandex","download_url":"https://codeload.github.com/yandex/reselector/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248515006,"owners_count":21117092,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autotesting","babel-plugin","css-selector","react"],"created_at":"2024-11-07T10:13:00.471Z","updated_at":"2025-04-12T04:24:23.040Z","avatar_url":"https://github.com/yandex.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# reselector\n\n[![Travis branch](https://img.shields.io/travis/lttb/reselector/master.svg?style=flat)](https://travis-ci.org/lttb/reselector)\n[![Coverage Status branch](https://img.shields.io/coveralls/lttb/reselector/master.svg?style=flat)](https://img.shields.io/coveralls/lttb/reselector/master.svg?branch=master)\n[![npm version](https://img.shields.io/npm/v/reselector.svg?style=flat)](https://www.npmjs.com/package/reselector)\n[![npm license](https://img.shields.io/npm/l/reselector.svg?style=flat)](https://www.npmjs.com/package/reselector) [![Greenkeeper badge](https://badges.greenkeeper.io/lttb/reselector.svg)](https://greenkeeper.io/)\n\n## Installation\n\n```sh\nnpm install --save-dev reselector\n```\n\n## Usage\n\nYou can use it as a babel-plugin or as the runtime function, or both.\n\n### babel-plugin\n\nAdd `reselector` to the plugin list in `.babelrc` for your client code. For example:\n\n```js\n{\n    presets: ['react'],\n    env: {\n        test: {\n            plugins: [\n                'reselector/babel',\n            ],\n        },\n    },\n}\n```\n\n### Find Components in the DOM\n\nUse `select` function to build any css selector by React Components.\n\nJust a simple example with [jest](https://facebook.github.io/jest/)\n\n```jsx\nimport React from 'react'\nimport {render} from 'react-dom'\nimport {select} from 'reselector'\n\nconst Text = ({children}) =\u003e \u003cp\u003e{children}\u003c/p\u003e\n\nconst Button = ({children}) =\u003e (\n  \u003cbutton\u003e\n    \u003cText\u003e{children}\u003c/Text\u003e\n  \u003c/button\u003e\n)\n\ndescribe('Button', () =\u003e {\n  beforeEach(() =\u003e document.body.innerHTML = '\u003cdiv id=\"app\" /\u003e')\n\n  it('should render a text', () =\u003e {\n    const text = 'hello world!'\n    render(\u003cButton\u003e{text}\u003c/Button\u003e, window.app)\n\n    const node = document.querySelector(select`${Button} \u003e ${Text}`)\n    expect(node.textContent).toBe(text)\n  })\n})\n```\n\n### enzyme\n\nIt also works with libraries like [enzyme](https://github.com/airbnb/enzyme) out of the box.\n\n```jsx\nimport {render} from 'enzyme'\n\nimport Button from './Button'\nimport Text from './Text'\n\ndescribe('Button', () =\u003e {\n  it('should render a text', () =\u003e {\n    const text = 'hello world!'\n    const wrapper = render(\u003cButton\u003e{text}\u003c/Button\u003e)\n\n    expect(wrapper.find(select`${Button} \u003e ${Text}`).text()).toBe(text)\n  })\n})\n```\n\n#### Babel\n\nIf you have a chanсe to transpile components with this plugin for your unit tests/autotests, you can import React Component as is.\n\n```jsx\nimport {select} from 'reselector'\n\nimport MyComponent from './MyComponent'\nimport MyButton from './MyButton'\n\n/**\n * [data-tid=\"dadad\"] [data-tid=\"czczx\"]\n */\nconsole.log(select`${MyComponent} ${MyButton}`)\n\n/**\n * .myClassName \u003e [data-tid=\"czczx\"]\n */\nconsole.log(select`.myClassName \u003e ${MyButton}`)\n```\n\n#### Runtime (just node.js, without babel)\n\nIt may be useful for autotests (for example, with PageObjects) when you don't need to transpile code. Just use `resolve` or `resolveBy` functions to get Components' selector.\n\n```jsx\nconst {resolve, select} = require('reselector')\n\nconst {MyComponent} = resolve(require.resolve('./MyComponent'))\nconst {MyButton} = resolve(require.resolve('./MyButton'))\n\n/**\n * [data-tid=\"dadad\"] [data-tid=\"czczx\"]\n */\nconsole.log(select`${MyComponent} ${MyButton}`)\n\n/**\n * .myClassName \u003e [data-tid=\"czczx\"]\n */\nconsole.log(select`.myClassName \u003e ${MyButton}`)\n```\n\nWith `resolveBy`:\n\n```jsx\nconst {resolveBy, select} = require('reselector')\n\nconst resolve = resolveBy(require.resolve)\n\nconst {MyComponent} = resolve('./MyComponent')\nconst {MyButton} = resolve('./MyButton')\n\n/**\n * [data-tid=\"dadad\"] [data-tid=\"czczx\"]\n */\nconsole.log(select`${MyComponent} ${MyButton}`)\n\n/**\n * .myClassName \u003e [data-tid=\"czczx\"]\n */\nconsole.log(select`.myClassName \u003e ${MyButton}`)\n```\n\n## How it works\n\nThis plugin tries to find all React Component declarations and to add `data-{hash}` attribute with the uniq hash-id to the Component's root node. It also saves this hash as the static property for the Component, so `get` function uses this property to build a selector.\n\n\n## Configuration\n\nYou can provide some options via `reselector.config.js`, rc-files or in `package.json`.\n\n### name\n\n{**string** = 'data-tid'} Test-attribute name, should not be empty.\n\nYou can define your own attribute name, for example\n\n```js\nmodule.exports = {name: 'my-test-id'}\n```\n\nWith that, you'll get attributes on nodes like `\u003cbutton my-test-id=\"c7b7156f\" /\u003e`.\n\n### env\n\n{**boolean** = false} Just set it on `true` to control attributes appending by `process.env.RESELECTOR`. So it will no append hashes at runtime when `process.env.RESELECTOR !== 'true'`.\n\nFor example:\n\n```js\nmodule.exports = {env: true}\n```\n\n### envName\n\n{**string** = `process.env.BABEL_ENV || process.env.NODE_ENV || 'development'`}\n\n### syntaxes\n\n{**string[]**} By default, this plugin works with these syntax list:\n\n```\n@babel/plugin-syntax-async-generators\n@babel/plugin-syntax-class-properties\n@babel/plugin-syntax-decorators\n@babel/plugin-syntax-dynamic-import\n@babel/plugin-syntax-export-default-from\n@babel/plugin-syntax-export-namespace-from\n@babel/plugin-syntax-flow\n@babel/plugin-syntax-function-bind\n@babel/plugin-syntax-import-meta\n@babel/plugin-syntax-jsx\n@babel/plugin-syntax-nullish-coalescing-operator\n@babel/plugin-syntax-numeric-separator\n@babel/plugin-syntax-object-rest-spread\n@babel/plugin-syntax-optional-catch-binding\n@babel/plugin-syntax-optional-chaining\n@babel/plugin-syntax-pipeline-operator\n@babel/plugin-syntax-throw-expressions\n```\n\nBut you can declare your own syntax list, for example:\n\n```js\n// .reselectorrc.js\n\nmodule.exports = {\n  syntaxes: [\n    '@babel/plugin-syntax-async-generators',\n    '@babel/plugin-syntax-class-properties',\n    '@babel/plugin-syntax-decorators',\n    '@babel/plugin-syntax-dynamic-import',\n    '@babel/plugin-syntax-export-default-from',\n    '@babel/plugin-syntax-export-namespace-from',\n    '@babel/plugin-syntax-flow',\n    '@babel/plugin-syntax-function-bind',\n    '@babel/plugin-syntax-import-meta',\n    '@babel/plugin-syntax-jsx',\n    '@babel/plugin-syntax-nullish-coalescing-operator',\n    '@babel/plugin-syntax-numeric-separator',\n    '@babel/plugin-syntax-object-rest-spread',\n    '@babel/plugin-syntax-optional-catch-binding',\n    '@babel/plugin-syntax-optional-chaining',\n    '@babel/plugin-syntax-pipeline-operator',\n    '@babel/plugin-syntax-throw-expressions',\n  ],\n}\n```\n\n###Custom configuration\nYou also can change base configuration in your .reselectorrc.js. Example:\n```js\n// .reselectorrc.js\n\nmodule.exports = function configurate(baseConfig) {\n    const tsxSyntax = [\n      '@babel/plugin-syntax-typescrypt',\n      {\n        isTSX: true\n      }\n    ]\n\n    return Object.assign(baseConfig, {\n      syntaxes: baseConfig.syntaxes.concat([tsxSyntax])\n    })\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyandex%2Freselector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyandex%2Freselector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyandex%2Freselector/lists"}