├── .babelrc ├── .gitignore ├── .travis.yml ├── README.md ├── package.json ├── rollup.config.js ├── src └── index.js └── test ├── __snapshots__ └── index.test.js.snap └── index.test.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "loose": true, 7 | "exclude": ["transform-es2015-typeof-symbol"] 8 | } 9 | ] 10 | ], 11 | "env": { 12 | "test": { 13 | "presets": [ 14 | [ 15 | "env", 16 | { 17 | "loose": true, 18 | "exclude": ["transform-es2015-typeof-symbol"] 19 | } 20 | ] 21 | ] 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /coverage 2 | /demo/dist 3 | dist/ 4 | lib/ 5 | node_modules/ 6 | *.log 7 | .idea 8 | packages/site/build 9 | package-lock.json 10 | .DS_Store 11 | .cache 12 | public/ 13 | yarn.lock 14 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - "8" 5 | 6 | script: yarn test 7 | 8 | install: yarn 9 | 10 | after_success: 11 | - cat ./coverage/lcov.info | ./node_modules/codecov/bin/codecov 12 | 13 | cache: 14 | yarn: true 15 | directories: 16 | - node_modules 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![npm version](https://badge.fury.io/js/retarget.svg)](https://badge.fury.io/js/retarget) 2 | [![Build Status](https://travis-ci.org/tkh44/retarget.svg?branch=master)](https://travis-ci.org/tkh44/retarget) 3 | [![codecov](https://codecov.io/gh/tkh44/retarget/branch/master/graph/badge.svg)](https://codecov.io/gh/tkh44/retarget) 4 | 5 | # retarget 6 | 7 | #### selectors via targets 8 | 9 | 10 | ## Install 11 | 12 | ```bash 13 | npm i retarget -S 14 | ``` 15 | 16 | **or** 17 | 18 | ```bash 19 | yarn add retarget 20 | ``` 21 | 22 | --- 23 | 24 | ```javascript 25 | import retarget from 'retarget' 26 | 27 | const STATE = { 28 | profile: { 29 | name: { 30 | first: 'Waylon', 31 | last: 'Jennings' 32 | } 33 | } 34 | } 35 | 36 | const lastNameSelector = retarget`profile.name.last` 37 | 38 | console.log(lastNameSelector(STATE)) // logs "Jennings" 39 | 40 | ``` 41 | 42 | ## Composing 43 | 44 | It is possible to compose multiple selectors together to create a new one. 45 | 46 | ```javascript 47 | import retarget from 'retarget' 48 | 49 | const STATE = { 50 | users: { 51 | '1': { 52 | profile: { 53 | name: { 54 | first: 'Waylon', 55 | last: 'Jennings' 56 | } 57 | } 58 | } 59 | } 60 | } 61 | 62 | const lastNameSelector = retarget`profile.name.last` 63 | 64 | const createUserSelector = (id) => 65 | retarget`users.${id}${lastNameSelector}` 66 | 67 | 68 | const userSelector = createUserSelector(1) 69 | 70 | console.log(userSelector(STATE)) // logs "Jennings" 71 | 72 | ``` 73 | 74 | ## API 75 | 76 | #### retarget `function` 77 | 78 | ```javascript 79 | import retarget from 'retarget' 80 | 81 | const selector = retarget`dot.seperated.path.to.value` 82 | 83 | const state = {/* Huge object */} 84 | selector(state) // returns the value at "dot.seperated.path.to.value" 85 | ``` 86 | 87 | 88 | **Returns** 89 | 90 | `retarget` returns a function that when passed an obj, attempts to get the value for the given path. 91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "retarget", 3 | "version": "0.0.2", 4 | "description": "Create selectors for working with redux store data", 5 | "main": "dist/index.cjs.js", 6 | "module": "dist/index.es.js", 7 | "files": [ 8 | "src", 9 | "dist" 10 | ], 11 | "scripts": { 12 | "build": "npm-run-all clean rollup rollup:umd", 13 | "clean": "rimraf dist", 14 | "test": "jest --coverage --no-cache --ci --runInBand", 15 | "rollup": "rollup -c rollup.config.js", 16 | "watch": "rollup -c rollup.config.js --watch", 17 | "rollup:umd": "cross-env UMD=true rollup -c rollup.config.js" 18 | }, 19 | "devDependencies": { 20 | "babel-cli": "^6.24.1", 21 | "babel-eslint": "^7.2.3", 22 | "babel-jest": "^20.0.3", 23 | "babel-plugin-transform-define": "^1.3.0", 24 | "babel-preset-env": "^1.5.1", 25 | "codecov": "^2.3.1", 26 | "cross-env": "^5.0.5", 27 | "eslint": "^4.5.0", 28 | "eslint-config-prettier": "^2.3.0", 29 | "eslint-config-standard": "^10.2.1", 30 | "eslint-plugin-import": "^2.7.0", 31 | "eslint-plugin-node": "^5.1.1", 32 | "eslint-plugin-prettier": "^2.2.0", 33 | "eslint-plugin-promise": "^3.5.0", 34 | "eslint-plugin-standard": "^3.0.1", 35 | "jest": "^20.0.4", 36 | "jest-cli": "^20.0.4", 37 | "npm-run-all": "^4.0.2", 38 | "prettier": "^1.7.4", 39 | "prettier-eslint-cli": "^4.0.3", 40 | "rimraf": "^2.6.1", 41 | "rollup": "^0.43.0", 42 | "rollup-plugin-babel": "^2.7.1", 43 | "rollup-plugin-uglify": "^2.0.1", 44 | "rollup-watch": "^4.3.1" 45 | }, 46 | "author": "Kye Hohenberger", 47 | "homepage": "https://github.com/tkh44/retarget", 48 | "license": "MIT", 49 | "repository": "https://github.com/tkh44/retarget", 50 | "keywords": [ 51 | "redux", 52 | "selectors", 53 | "react-redux" 54 | ], 55 | "bugs": { 56 | "url": "https://github.com/tkh44/retarget/issues" 57 | }, 58 | "eslintConfig": { 59 | "extends": [ 60 | "standard", 61 | "prettier" 62 | ], 63 | "plugins": [ 64 | "prettier" 65 | ], 66 | "parser": "babel-eslint", 67 | "rules": { 68 | "prettier/prettier": [ 69 | "error", 70 | { 71 | "singleQuote": true, 72 | "semi": false 73 | } 74 | ], 75 | "standard/computed-property-even-spacing": 0, 76 | "no-template-curly-in-string": 0 77 | }, 78 | "overrides": [ 79 | { 80 | "files": [ 81 | "*.test.js" 82 | ], 83 | "env": { 84 | "jest": true 85 | } 86 | } 87 | ] 88 | }, 89 | "jest": { 90 | "transform": { 91 | "^.+\\.js?$": "babel-jest" 92 | } 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import uglify from 'rollup-plugin-uglify' 2 | import babel from 'rollup-plugin-babel' 3 | import path from 'path' 4 | 5 | const pkg = require(path.resolve(process.cwd(), './package.json')) 6 | 7 | const config = { 8 | entry: './src/index.js', 9 | sourceMap: true, 10 | plugins: [ 11 | babel({ 12 | presets: [ 13 | [ 14 | 'env', 15 | { 16 | loose: true, 17 | modules: false, 18 | exclude: ['transform-es2015-typeof-symbol'] 19 | } 20 | ] 21 | ], 22 | babelrc: false 23 | }) 24 | ], 25 | targets: [ 26 | { dest: pkg.main, format: 'cjs' }, 27 | { dest: pkg.module, format: 'es' } 28 | ] 29 | } 30 | 31 | if (process.env.UMD) { 32 | config.plugins.push(uglify()) 33 | config.targets = [ 34 | { 35 | dest: './dist/retarget.umd.min.js', 36 | format: 'umd', 37 | moduleName: pkg.name 38 | } 39 | ] 40 | } 41 | 42 | export default config 43 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | // END GOAL: 2 | // const selector = select`profile.name.last`; 3 | 4 | // function reducer(state, action) { 5 | // const lastNameSelector = selector(state); 6 | // // getting the value is handy in components and mapStateToProps 7 | // let currentVal = lastNameSelector.get(); 8 | 9 | // // But I think its more handy for setting 10 | // lastNameSelector.set(action.payload); 11 | 12 | // // if it was an array value 13 | // lastNameSelector.push("foo"); 14 | // let someIndex = action.payload; 15 | // lastNameSelector.remove(someIndex); 16 | 17 | // return lastNameSelector.save(); 18 | // } 19 | 20 | export default function select(strings, ...exprs) { 21 | const woven = strings.raw ? interleave(strings, ...exprs) : strings 22 | 23 | // console.log(woven) 24 | 25 | let key = woven.filter(Boolean) 26 | 27 | // console.log('key', key) 28 | 29 | let INITIAL = Symbol('INITIAL') 30 | let oldObj 31 | let prev = INITIAL 32 | 33 | function selectorFn(obj) { 34 | // console.log('obj', obj, 'key', key) 35 | // from dlv https://raw.githubusercontent.com/developit/dlv/master/index.js 36 | let p = 0 37 | 38 | if (obj == null) { 39 | return obj 40 | } 41 | 42 | if (oldObj === obj && prev !== INITIAL) { 43 | // console.log('cache working', prev) 44 | return prev 45 | } 46 | oldObj = obj 47 | 48 | while (obj && p < key.length) { 49 | let k = key[p++] 50 | let val = obj[k] 51 | obj = val 52 | } 53 | prev = obj 54 | return obj 55 | } 56 | 57 | selectorFn['__selector'] = function() { 58 | // console.log('__selector', key) 59 | return key 60 | } 61 | 62 | function interleave(strings, ...exprs) { 63 | // return strings.join() 64 | return strings.reduce((accum, s, i) => { 65 | // console.log(i, exprs[i]); 66 | return accum.concat( 67 | s.split('.'), 68 | exprs[i] && handleInterpolation(exprs[i]) 69 | ) 70 | }, []) 71 | } 72 | 73 | function handleInterpolation(interpolation) { 74 | if (interpolation == null) { 75 | return '' 76 | } 77 | 78 | switch (typeof interpolation) { 79 | case 'boolean': 80 | return '' 81 | case 'function': 82 | if (typeof interpolation['__selector'] === 'function') 83 | return interpolation['__selector']() 84 | 85 | return handleInterpolation.call(this) 86 | case 'object': 87 | if (Array.isArray(interpolation)) { 88 | return interpolation.map(handleInterpolation).join('.') 89 | } 90 | return interpolation.toString() 91 | default: 92 | return interpolation 93 | } 94 | } 95 | 96 | return selectorFn 97 | } 98 | -------------------------------------------------------------------------------- /test/__snapshots__/index.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`basic 1`] = `"Jennings"`; 4 | 5 | exports[`basic 2`] = `"Waylon"`; 6 | 7 | exports[`compound 1`] = `"Waylon"`; 8 | 9 | exports[`fun fun functions 1`] = `"Jennings"`; 10 | 11 | exports[`nested 1`] = `"Jennings"`; 12 | -------------------------------------------------------------------------------- /test/index.test.js: -------------------------------------------------------------------------------- 1 | import retarget from '../src/index' 2 | 3 | test('basic', () => { 4 | const selector = retarget`profile.name.last` 5 | 6 | // function reducer(state, action) { 7 | // const lastNameSelector = selector(state); 8 | // // getting the value is handy in components and mapStateToProps 9 | // let currentVal = lastNameSelector.get(); 10 | 11 | // // But I think its more handy for setting 12 | // lastNameSelector.set(action.payload); 13 | 14 | // // if it was an array value 15 | // lastNameSelector.push("foo"); 16 | // let someIndex = action.payload; 17 | // lastNameSelector.remove(someIndex); 18 | 19 | // return lastNameSelector.save(); 20 | // } 21 | 22 | const arraySelector = retarget(['profile', 'name', 'first']) 23 | const STATE = { 24 | profile: { 25 | name: { 26 | first: 'Waylon', 27 | last: 'Jennings' 28 | } 29 | } 30 | } 31 | 32 | expect(selector(STATE)).toMatchSnapshot() 33 | expect(arraySelector(STATE)).toMatchSnapshot() 34 | }) 35 | 36 | test('nested', () => { 37 | const STATE2 = { 38 | users: { 39 | '1': { 40 | profile: { 41 | name: { 42 | first: 'Waylon', 43 | last: 'Jennings' 44 | } 45 | } 46 | }, 47 | '2': { 48 | profile: { 49 | name: { 50 | first: 'Waylon', 51 | last: 'Jennings' 52 | } 53 | } 54 | } 55 | } 56 | } 57 | 58 | const userSelector = retarget`users` 59 | const selector2 = retarget`${userSelector}.2.profile.name.last` 60 | expect(selector2(STATE2)).toMatchSnapshot() 61 | }) 62 | 63 | test('fun fun functions', () => { 64 | const STATE = { 65 | users: { 66 | '1': { 67 | profile: { 68 | name: { 69 | first: 'Waylon', 70 | last: 'Jennings' 71 | } 72 | } 73 | } 74 | } 75 | } 76 | 77 | const lastNameSelector = retarget`profile.name.last` 78 | 79 | const createUserSelector = id => retarget`users.${id}${lastNameSelector}` 80 | 81 | const userSelector = createUserSelector(1) 82 | 83 | expect(userSelector(STATE)).toMatchSnapshot() 84 | }) 85 | 86 | test('compound', () => { 87 | const STATE3 = { 88 | entities: { 89 | users: { 90 | '1': { 91 | profile: { 92 | name: { 93 | first: 'Waylon', 94 | last: 'Jennings' 95 | } 96 | } 97 | }, 98 | '2': { 99 | profile: { 100 | name: { 101 | first: 'Waylon', 102 | last: 'Jennings' 103 | } 104 | } 105 | } 106 | } 107 | } 108 | } 109 | // I can't figure out how to dedupe selectors 110 | // If you use the 2 above one after the other you will get ['profile', 'name', 'last'] twice in the key 111 | 112 | // I think going from right to left with the head of the new key array 113 | // looking for a match and then overwriting (left to right) from there might work 114 | // need to do some sort of check before doing this check as it is stupid innefficent 115 | // unless we know there is a hit 116 | const selectorA = retarget`users.1` 117 | const selectorB = retarget`profile` 118 | const selectorC = retarget`first` 119 | const compoundSelector = retarget`entities.${selectorA}${selectorB}.name.${selectorC}` 120 | expect(compoundSelector(STATE3)).toMatchSnapshot() 121 | }) 122 | --------------------------------------------------------------------------------