{"id":20513783,"url":"https://github.com/webreflection/universal-mixin","last_synced_at":"2025-04-14T00:01:30.222Z","repository":{"id":36838140,"uuid":"41145046","full_name":"WebReflection/universal-mixin","owner":"WebReflection","description":"A mixin usable for both generic objects and decorators.","archived":false,"fork":false,"pushed_at":"2016-12-05T15:23:15.000Z","size":464,"stargazers_count":60,"open_issues_count":0,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-13T18:44:54.713Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/WebReflection.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-21T08:34:26.000Z","updated_at":"2024-09-02T13:14:54.000Z","dependencies_parsed_at":"2022-09-05T12:21:37.729Z","dependency_job_id":null,"html_url":"https://github.com/WebReflection/universal-mixin","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Funiversal-mixin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Funiversal-mixin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Funiversal-mixin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebReflection%2Funiversal-mixin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebReflection","download_url":"https://codeload.github.com/WebReflection/universal-mixin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248799931,"owners_count":21163403,"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":[],"created_at":"2024-11-15T21:13:08.236Z","updated_at":"2025-04-14T00:01:30.163Z","avatar_url":"https://github.com/WebReflection.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"universal-mixin [![build status](https://secure.travis-ci.org/WebReflection/universal-mixin.svg)](http://travis-ci.org/WebReflection/universal-mixin)\n===================================\n\nInspired by [Reginald Braithwaite](https://twitter.com/raganwald) proposal in his [Using ES.later Decorators as Mixins](http://raganwald.com/2015/06/26/decorators-in-es7.html) post, and discussed with both Reginald and [Addy Osmani](https://twitter.com/addyosmani) in [the gist](https://gist.github.com/addyosmani/a0ccf60eae4d8e5290a0#gistcomment-1489585) related to Addy's [Exploring ES2016 Decorators](https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841) post, this `mixin` function goal is to bring a universal way, from _ES3_ to _ES.future_, client or server, to define functions usable as decorators for both clases and generic objects. \n\nFollowing the same ES7 example used in Addy's post, based on this `mixin` solution.\n```js\nconst SuperPowers = mixin({\n  init() {\n    Object.defineProperty(this, '_superPowers', {value: []});\n  },\n  addPower(name) {\n    this._superPowers.push(name);\n    return this;\n  },\n  get powers() {\n    return this._superPowers.slice(0);\n  }\n});\n\nconst UtilityBelt = mixin({\n  init() {\n    Object.defineProperty(this, '_utilityBelt', {value: []});\n  },\n  addToBelt(name) {\n    this._utilityBelt.push(name);\n    return this;\n  },\n  get utilities() {\n    return this._utilityBelt.slice(0);\n  }\n});\n\n// Usable as decorators\n@SuperPowers\n@UtilityBelt\nclass ComicBookCharacter {\n  constructor(first, last) {\n    this.firstName = first;\n    this.lastName = last;\n    // initialize mixins\n    // if or when it's necessary\n    this.init();\n  }\n  realName() {\n    return this.firstName + ' ' + this.lastName;\n  } \n};\n\n// Usage examples\nconst batman = new ComicBookCharacter('Bruce', 'Wayne');\nconsole.log(batman.realName());\n\nbatman\n  .addToBelt('batarang')\n  .addToBelt('cape');\n\nconsole.log(batman.utilities);\n\nbatman\n  .addPower('detective')\n  .addPower('voice sounds like Gollum has asthma');\n\nconsole.log(batman.powers);\n```\n\nIt is also possible to use the `mixin` with other objects too.\n```js\n// as example only, don't use at home\nvar SimpleEmitter = mixin({\n  init: function () {\n    Object.defineProperty(\n      this,\n      '_emitter',\n      {value: Object.create(null)}\n    );\n  },\n  on: function (type, handler) {\n    (this._emitter[type] || (\n      this._emitter[type] = []\n    )).push(handler);\n  },\n  emit: function (type) {\n    var args = [].slice.call(arguments, 1);\n    (this._emitter[type] || []).forEach(function (fn) {\n      fn.apply(this, args);\n    }, this);\n  }\n});\n\n\nvar obj = SimpleEmitter({});\n\nobj.init();\nobj.on('event', function (err, res) {\n  console.log(err, res);\n});\nobj.emit('event', null, 123);\n\n```\n\nIt is also possible to define mixin constants, propeties, or static methods, passing a second object as parameter.\n\n```js\nvar WithStatic = mixin({}, {\n  VALUE: 'any',\n  method: function () {\n    return WithStatic.VALUE;\n  }\n});\n\nWithStatic.method(); // any\n```\n\n### Which file ?\nIn nodejs you can either `npm install universal-mixin` or use [universal-mixin.node.js](build/universal-mixin.node.js) file.\n\nFor browsers you can use [universal-mixin.js](build/universal-mixin.js) file, and for AMD you can use [universal-mixin.amd.js](build/universal-mixin.amd.js).\n\n\n\n### Compatibility\n\nThe provided functionality is compatible with IE6 or greater, Espruino, NodeJS, and other common JavaScript engines.\n\nIn pre ES5 compatible engines properties will be set enumerable and if no ES5 shim+sham is provided upfront getters and setters might not be accepted.\n\nWhile IE6 and IE7 works just fine, if you are targeting IE8 please be sure ES5 shim+sham is loaded upfront.\nYou can put this on top of your page.\n```html\n\u003c!--[if IE 8]\u003e\n\u003cscript src=\"//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.7/es5-shim.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.7/es5-sham.min.js\"\u003e\u003c/script\u003e\n\u003c![endif]--\u003e\n```\n\nFinally, you can test your browser through the [test page](http://webreflection.github.io/universal-mixin/test/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebreflection%2Funiversal-mixin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebreflection%2Funiversal-mixin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebreflection%2Funiversal-mixin/lists"}