Git Product home page Git Product logo

grassign's Introduction

babel-plugin-gr-assign Build Status

Babel Plugin to transform method chaining to react-addons-update format.

On purpose support manipulating presist data with method chaining.

Why?

TODO

Replace deep clone. No need to change a lot codes.

Installation

Add in your package.json

"devDependencies": {

  ...

  "babel-plugin-gr-assign": "[email protected]:poiyzy/grAssign.git"
},
npm install

Feature

支持将 $_grAssign = a.b.c.d = 2; 转换为:

$_grAssign = grUpdate(a, {
  b: {
    c: {
      d: {
        $set: 2
      }
    }
  }
});

关于 react-addons-udpate

Usage

TODO

babel 插件设置

    plugins: [
      [grAssign, {
        alias: '$_g',
        method: 'update'
      }]
    ]
  • alias: 设置 variable 别名,默认为 $_grAssign
  • method: 设置 update 方法别名,默认为 grUpdate

按照 index 设置数组中的元素

使用 a[{index}]a[[index]] 来标记 数组 index.

var $_grAssign;
var a = { b: [{name: 1}, {name: 2}, {name: 3}] }

let index = a.b.findIndex(function(e) { return e.name === 2 });

$_grAssign = a.b[{index}].name.set('test');

会转化为:

$_grAssign = grUpdate(a, {
  b: {
    [index]: {
      name: {
        $set: 'test'
      }
    }
  }
});

Example

  • Assign

    $_grAssign = a.b.c = 3;

    转换为

      $_grAssign = grUpdate(a, {
        b: {
          c: {
            $set: 3
          }
        }
      });
  • $set

    $_grAssign = a.b.c.set(3);

    转换为

      $_grAssign = grUpdate(a, {
        b: {
          c: {
            $set: 3
          }
        }
      });
  • $push

    $_grAssign = a.b.c.push(3);

    转换为

      $_grAssign = grUpdate(a, {
        b: {
          c: {
            $push: [3]
          }
        }
      });
  • $merge

    $_grAssign = a.b.c.merge(3);

    转换为

      $_grAssign = grUpdate(a, {
        b: {
          c: {
            $merge: [3]
          }
        }
      });
  • $splice

    $_grAssign = a.b.c.splice(1, 2, 3, 4);

    转换为

      $_grAssign = grUpdate(a, {
        b: {
          c: {
            $splice: [[1, 2, 3, 4]]
          }
        }
      });
  • $apply

    $_grAssign = a.b.c.apply(function(e) { return e; });

    转换为

      $_grAssign = grUpdate(a, {
        b: {
          c: {
            $apply: function(e) { return e; }
          }
        }
      });
  • $unshift

    $_grAssign = a.b.c.unshift(1);

    转换为

      $_grAssign = grUpdate(a, {
        b: {
          c: {
            $unshift: [1]
          }
        }
      });

Tests

npm run test

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

License

MIT

grassign's People

Contributors

poiyzy avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.