{"id":13536125,"url":"https://github.com/israelss/vue-worker","last_synced_at":"2025-04-02T02:32:19.123Z","repository":{"id":40617393,"uuid":"90286999","full_name":"israelss/vue-worker","owner":"israelss","description":"A Vue.js plugin to use webworkers in a simply way.","archived":false,"fork":false,"pushed_at":"2018-11-01T19:36:02.000Z","size":16,"stargazers_count":593,"open_issues_count":23,"forks_count":41,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-10-30T04:54:02.310Z","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/israelss.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}},"created_at":"2017-05-04T16:48:13.000Z","updated_at":"2024-09-13T02:54:25.000Z","dependencies_parsed_at":"2022-09-06T12:00:24.214Z","dependency_job_id":null,"html_url":"https://github.com/israelss/vue-worker","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/israelss%2Fvue-worker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/israelss%2Fvue-worker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/israelss%2Fvue-worker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/israelss%2Fvue-worker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/israelss","download_url":"https://codeload.github.com/israelss/vue-worker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246743896,"owners_count":20826627,"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-08-01T09:00:35.024Z","updated_at":"2025-04-02T02:32:18.846Z","avatar_url":"https://github.com/israelss.png","language":"JavaScript","funding_links":[],"categories":["实用库","JavaScript","公用事业","Components \u0026 Libraries","Utilities","Utilities [🔝](#readme)"],"sub_categories":["网络工作者","Utilities","Web Workers"],"readme":"# VueWorker\n\n\u003e A Vue.js plugin to use webworkers in a simply way.\n\n## Changelog\n\n### **1.2.1**\n\n#### _Highlights:_\n* Fix README examples\n\nSee full changelog [here](https://github.com/israelss/vue-worker/blob/master/changelog.md#120).\n\n\n## Why\n\nCreate and use [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) can be cumbersome sometimes. This plugin aims to facilitate the use of Web Workers within Vue components. It is a wrapper for [simple-web-worker](https://github.com/israelss/simple-web-worker).\n\n## How to install and use\n\n```javascript\nyarn add vue-worker\n\n// or\n\nnpm install vue-worker --save\n```\n\nThen add in main.js:\n\n```javascript\nimport Vue from 'vue'\nimport VueWorker from 'vue-worker'\nVue.use(VueWorker)\n```\n\nThat will inject a property into Vue (and pass it to every child component), with a default name of `$worker`, which can be accessed using `this.$worker` inside any Vue component.\n\nYou can change that name when registering the plugin:\n\n```javascript\nimport VueWorker from 'vue-worker'\nVue.use(VueWorker, '$desired-name')\n```\n\n## API\n\n### ***NOTICE:***\n\n#### It is not possible to pass as an arg `this` from a Vue Component. You can pass `this.$data` or any variable within `data` or `computed`, though.\n\n### this.$worker.run(_func, [args]?_)\n\n\u003e Where:\n\u003e* _func_ is the function to be runned in worker\n\u003e* _[args]_ is an optional array of arguments that will be used by _func_\n\n\u003eThis method creates a disposable web worker, runs and returns the result of given function and closes the worker.\n\u003cbr\u003e\n\u003cbr\u003eThis method works like Promise.resolve(), but in another thread.\n\nE.g.:\n```javascript\nthis.$worker.run(() =\u003e 'this.$worker run 1: Function in other thread')\n  .then(console.log) // logs 'this.$worker run 1: Function in other thread'\n  .catch(console.error) // logs any possible error\n\nthis.$worker.run((arg1, arg2) =\u003e `this.$worker run 2: ${arg1} ${arg2}`, ['Another', 'function in other thread'])\n    .then(console.log) // logs 'this.$worker run 2: Another function in other thread'\n    .catch(console.error) // logs any possible error\n```\n\n### this.$worker.create(_[actions]?_)\n\n\u003e Where:\n\u003e* _[actions]_ is an optional array of objects with two fields, `message` and `func`. Essentially, it is a messages-actions map.\n\n\u003eIf _[actions]_ is omitted or `undefined`, the created **\u003cworker\\\u003e** will have no registered actions, so you'll have to use the method `register` before you can use the **\u003cworker\\\u003e**.\n\u003cbr\u003e\n\u003cbr\u003eIf you plan to reuse a **\u003cworker\\\u003e**, you should use this method. It creates a reusable **\u003cworker\\\u003e** (not a real Web Worker, more on this ahead) with determined actions to be runned through its `postMessage()` or `postAll()` methods.\n\nE.g.:\n```javascript\nconst actions = [\n  { message: 'func1', func: () =\u003e `Worker 1: Working on func1` },\n  { message: 'func2', func: arg =\u003e `Worker 2: ${arg}` },\n  { message: 'func3', func: arg =\u003e `Worker 3: ${arg}` },\n  { message: 'func4', func: (arg = 'Working on func4') =\u003e `Worker 4: ${arg}` }\n]\n\nlet worker = this.$worker.create(actions)\n```\n\n### \u003cworker\\\u003e.postMessage(_message, [args]?_)\n\n\u003e Where:\n\u003e* **\u003cworker\\\u003e** is a worker created with `this.$worker.create([actions])`\n\u003e* _message_ is one of the messages in _[actions]_\n\u003e* _[args]_ is an optional array of arguments that will be used by the function registered with _message_\n\n\u003eWhen the function does not expect any arguments or the expected arguments have default values, _[args]_ can be omitted safely.\n\u003cbr\u003e\n\u003cbr\u003eWhen the expected arguments do not have default values, _[args]_ should be provided.\n\u003cbr\u003e\n\u003cbr\u003eThis method works like Promise.resolve(), but in another thread.\n\nE.g.:\n```javascript\nconst actions = [\n  { message: 'func1', func: () =\u003e `Worker 1: Working on func1` },\n  { message: 'func2', func: arg =\u003e `Worker 2: ${arg}` },\n  { message: 'func3', func: arg =\u003e `Worker 3: ${arg}` },\n  { message: 'func4', func: (arg = 'Working on func4') =\u003e `Worker 4: ${arg}` }\n]\n\nlet worker = this.$worker.create(actions)\n\nworker.postMessage('func1')\n  .then(console.log) // logs 'Worker 1: Working on func1'\n  .catch(console.error) // logs any possible error\n\nworker.postMessage('func1', ['Ignored', 'arguments'])\n  .then(console.log) // logs 'Worker 1: Working on func1'\n  .catch(console.error) // logs any possible error\n\nworker.postMessage('func2')\n  .then(console.log) // logs 'Worker 2: undefined'\n  .catch(console.error) // logs any possible error\n\nworker.postMessage('func3', ['Working on func3'])\n  .then(console.log) // logs 'Worker 3: Working on func3'\n  .catch(console.error) // logs any possible error\n\nworker.postMessage('func4')\n  .then(console.log) // logs 'Worker 4: Working on func4'\n  .catch(console.error) // logs any possible error\n\nworker.postMessage('func4', ['Overwrited argument'])\n  .then(console.log) // logs 'Worker 4: Overwrited argument'\n  .catch(console.error) // logs any possible error\n```\n\n### \u003cworker\\\u003e.postAll(_[message1,... || {message: message1, args: [args1]},... || [args1],...]?_)\n\n\u003e Where:\n\u003e* **\u003cworker\\\u003e** is a worker created with `this.$worker.create([actions])`\n\u003e* The argument is an optional array which accepts one of the following:\n\u003e    * _message1,..._ - strings containing one or more of the messages in _[actions]_\n\u003e   * _{message: message1, args: [args1]},..._ - objects containing two fields, `message` (a message from _actions_) and `args` (the arguments to be used by the correspondent function)\n\u003e    * _[args1],..._ - arrays of arguments to be used by the registered actions.\n\n\u003eIf _[message1,...]_ is `undefined` or no argument is given, **\u003cworker\\\u003e** will run all registered actions without arguments.\n\u003cbr\u003e\n\u003cbr\u003eIf _[{message: message1, args: [args1]},...]_ or _[[args1],...]_ is used, you should use `[]` (an empty array) as _[args]_ for the functions that does not expect arguments, or if the respective argument of your function has a default value and you want it to be used. If you use `[null]` this will be the value assumed by function argument. \n\u003cbr\u003e\n\u003cbr\u003eWhen using _[[args1],...]_, you MUST input the same number of arguments as registered actions, even if some action doesn't accept any arguments! In that case use a `[]`, as stated above. See examples below. \n\u003cbr\u003e\n\u003cbr\u003eIf _[{message: message1, args: [args1]},...]_ is used, every object must contain the fields `message` and `args`.\n\u003cbr\u003e\n\u003cbr\u003eThis method works like Promise.all(), but in another thread.\n\nE.g.:\n```javascript\nconst actions = [\n  { message: 'func1', func: () =\u003e `Worker 1: Working on func1` },\n  { message: 'func2', func: arg =\u003e `Worker 2: ${arg}` },\n  { message: 'func3', func: arg =\u003e `Worker 3: ${arg}` },\n  { message: 'func4', func: (arg = 'Working on func4') =\u003e `Worker 4: ${arg}` }\n]\n\nlet worker = this.$worker.create(actions)\n\nworker.postAll()\n  .then(console.log) // logs ['Worker 1: Working on func1', 'Worker 2: undefined', 'Worker 3: undefined', 'Worker 4: Working on func4']\n  .catch(console.error) // logs any possible error\n\nworker.postAll(['func1', 'func3'])\n  .then(console.log) // logs ['Worker 1: Working on func1', 'Worker 3: undefined']\n  .catch(console.error) // logs any possible error\n\nworker.postAll([{ message: 'func1', args: [] }, { message: 'func3', args: ['Working on func3'] })\n  .then(console.log) // logs ['Worker 1: Working on func1', 'Worker 3: Working on func3']\n  .catch(console.error) // logs any possible error\n\nworker.postAll([[], ['Working on func2'], ['Working on func3'], []])\n  .then(console.log) // logs ['Worker 1: Working on func1', 'Worker 2: Working on func2', 'Worker 3: Working on func3', 'Worker 4: Working on func4']\n  .catch(console.error) // logs any possible error\n\nworker.postAll([[], ['func2'], ['func3'], ['Overwriting default value of arg on func4']])\n  .then(console.log) // logs ['Worker 1: Working on func1', 'Worker 2: func2', 'Worker 3: func3', 'Worker 4: Overwriting default value of arg on func4']\n  .catch(console.error) // logs any possible error\n```\n\n### \u003cworker\\\u003e.register(_action_ || _[actions]_)\n\n\u003e Where:\n\u003e* **\u003cworker\\\u003e** is a worker created with `this.$worker.create([actions])`\n\u003e* _action_ is an object with two fields, `message` and `func`\n\u003e* _[actions]_ is an array of objects, and each object is an _action_, as defined above\n\n\u003eYou can use _action_ or _[actions]_, but not both at the same time.\n\nE.g.:\n\n```javascript\nconst initialActions = [\n  { message: 'func1', func: () =\u003e 'Working on func1' }\n]\n\nlet worker = this.$worker.create(initialActions)\n\nworker.postAll()\n  .then(console.log) // logs ['Working on func1']\n  .catch(console.error) // logs any possible error\n\n// registering just one action\nworker.register({ message: 'func2', func: () =\u003e 'Working on func2' })\n\nworker.postAll()\n  .then(console.log) // logs ['Working on func1', 'Working on func2']\n  .catch(console.error) // logs any possible error\n\n// registering multiple actions\nworker.register([\n  { message: 'func3', func: () =\u003e 'Working on func3' },\n  { message: 'func4', func: () =\u003e 'Working on func4' }\n])\n\nworker.postAll()\n  .then(console.log) // logs ['Working on func1', 'Working on func2', 'Working on func3', 'Working on func4']\n  .catch(console.error) // logs any possible error\n```\n\n### \u003cworker\\\u003e.unregister(_message_ || _[messages]_)\n\n\u003e Where:\n\u003e* **\u003cworker\\\u003e** is a worker created with `this.$worker.create([actions])`\n\u003e* _message_ is one of the messages in _[actions]_\n\u003e* _[messages]_ is an array containing one or more messages, and each message is a _message_, as defined above\n\n\u003eYou can use _message_ or _[messages]_, but not both at the same time.\n\nE.g.:\n\n```javascript\nconst initialActions = [\n  { message: 'func1', func: () =\u003e 'Working on func1'},\n  { message: 'func2', func: () =\u003e 'Working on func2'},\n  { message: 'func3', func: () =\u003e 'Working on func3'},\n  { message: 'func4', func: () =\u003e 'Working on func4'}\n]\n\nlet worker = this.$worker.create(initialActions)\n\nworker.postAll()\n  .then(console.log) // logs ['Working on func1', 'Working on func2', 'Working on func3', 'Working on func4']\n  .catch(console.error) // logs any possible error\n\n// unregistering just one action\nworker.unregister('func2')\n\nworker.postAll()\n  .then(console.log) // logs ['Working on func1', 'Working on func3', 'Working on func4']\n  .catch(console.error) // logs any possible error\n\n// unregistering multiple actions\nworker.unregister(['func3', 'func1'])\n\nworker.postAll()\n  .then(console.log) // logs ['Working on func4']\n  .catch(console.error) // logs any possible error\n```\n\n## Closing workers?\n\nYou may be thinking: \"How do I terminate those reusable workers if there's no `close()` or `terminate()` methods?\"\n\nWell, when you create a reusable worker, you don't receive a real Web Worker.\n\nInstead, you get an object which holds the given messages-actions map, and when you call `postMessage()` or `postAll()` it will, under the hood, call `run()` with the correspondent functions.\n\nSo, to \"terminate\" a \"worker\" when it is not needed anymore, you can just do:\n\n```javascript\nlet worker = this.$worker.create(actions)\n\n// use the worker\n\nworker = null\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisraelss%2Fvue-worker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fisraelss%2Fvue-worker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisraelss%2Fvue-worker/lists"}