{"id":19273329,"url":"https://github.com/vueuse/vue-chemistry","last_synced_at":"2025-04-06T10:13:21.359Z","repository":{"id":41138539,"uuid":"327118963","full_name":"vueuse/vue-chemistry","owner":"vueuse","description":"Reactified JavaScript functions for Vue","archived":false,"fork":false,"pushed_at":"2022-10-15T14:29:03.000Z","size":466,"stargazers_count":396,"open_issues_count":1,"forks_count":9,"subscribers_count":15,"default_branch":"main","last_synced_at":"2025-03-30T09:06:35.049Z","etag":null,"topics":["composition-api","reactivity","vue","vue-composition-api","vueuse"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/vueuse.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"antfu"}},"created_at":"2021-01-05T21:04:11.000Z","updated_at":"2025-03-11T15:13:29.000Z","dependencies_parsed_at":"2023-01-20T00:32:48.836Z","dependency_job_id":null,"html_url":"https://github.com/vueuse/vue-chemistry","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueuse%2Fvue-chemistry","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueuse%2Fvue-chemistry/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueuse%2Fvue-chemistry/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vueuse%2Fvue-chemistry/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vueuse","download_url":"https://codeload.github.com/vueuse/vue-chemistry/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247464222,"owners_count":20942970,"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":["composition-api","reactivity","vue","vue-composition-api","vueuse"],"created_at":"2024-11-09T20:42:11.915Z","updated_at":"2025-04-06T10:13:21.335Z","avatar_url":"https://github.com/vueuse.png","language":"TypeScript","funding_links":["https://github.com/sponsors/antfu"],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src='./res/hero.png' alt=\"Vue Chemistry\" width=\"600\"\u003e\n\u003c/p\u003e\n\n\u003e The ~~science~~ that deals with the [properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#objects_and_properties), [composition](https://v3.vuejs.org/guide/composition-api-introduction.html#why-composition-api), and structure of states, the transformations they undergo during [reactions](https://v3.vuejs.org/guide/reactivity.html#what-is-reactivity).\n\nReactified JavaScript functions for Vue, powered by [`reactify`](https://vueuse.js.org/?path=/story/utilities--reactify) from [VueUse](https://github.com/antfu/vueuse).\n\n## Reactified? What?\n\nIn JavaScript, for most of the time, you are dealing with **procedural** functions. Which means after the calculation/transformation, the result won't know relationships with its sources, for example\n\n```js\nfunction sum(x, y) {\n  return x + y\n}\n\nlet a = 1\nconst b = 2\n\nconst c = sum(a, b) // c = a + b = 3\n\na = 2\n\nconsole.log(c) // still 3, not 4\n```\n\nOn the other hand, in Spreadsheets apps like Microsoft Excel or Google Sheets, formulas are always up-to-update whenever their source changes.\n\n\u003cimg src=\"./res/reactivity-spreadsheet.gif\" width=\"300\"\u003e\u003c/video\u003e\n\n[Vue's reactivity system](https://v3.vuejs.org/guide/reactivity.html#what-is-reactivity) is a way to approach the reactiveness in JavaScript. In the [Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html#why-composition-api), we are kinda mixing the procedural and reactivity together (which is good and flexible). But what it will be like to have a complete reactive developing experience?\n\n**Introducing Vue Chemistry**, a set of reactified JavaScript functions letting you enjoy the pure reactiveness!\n\nFrom the example above, now we can have:\n\n```js\nimport { set } from 'vue-chemistry/core'\nimport { sum } from 'vue-chemistry/math'\nimport { log } from 'vue-chemistry/console'\n\nconst a = ref(1)\nconst b = ref(2)\n\nconst c = sum(a, b) // c = a + b = 3\n\nset(a, 2) // shorthand for a.value = 2\n\nlog(c) // it's 4 (2 + 2)!\n```\n\n### Cool, but, how is that possible?\n\nWe are basically making functions accepting [`Ref`](https://v3.vuejs.org/api/refs-api.html#refs) as their arguments and then wrapper their result with [`computed`](https://v3.vuejs.org/guide/reactivity-computed-watchers.html#computed-and-watch). This makes them automatically collect dependency sources and re-evaluate when the sources get changed. Note that the `ComputedRef` is also a `Ref` which means the operations are chainable!\n\nAn example for comparsion:\n\n```ts\n// procedural function\nfunction sum(x: number, y: number) {\n  return x + y\n}\n```\n\n```ts\nimport type { ComputedRef, Ref } from 'vue'\nimport { computed, unref } from 'vue'\n\n// reactified function\nfunction sum(\n  x: number | Ref\u003cnumber\u003e,\n  y: number | Ref\u003cnumber\u003e\n): ComputedRef\u003cnumber\u003e {\n  return computed(() =\u003e unref(x) + unref(y))\n}\n```\n\nIf you want to convert a normal function into a \"reactified\" one, you can use `reactify()` function. The source code can be found [here](https://github.com/antfu/vueuse/blob/master/packages/shared/reactify/index.ts) (deadly simple!).\n\n```ts\nimport { reactify } from 'vue-chemistry/core'\n\nfunction sum(x: number, y: number) {\n  return x + y\n}\n\nconst reactifiedSum = reactify(sum)\n```\n\n## Install\n\n```bash\nnpm i vue-chemistry\n```\n\n## Usage\n\nFunctions available in the following namespaces\n\n```js\n// see the auto-completion for the full functions list\nimport { pow, round, sin, sqrt, sum } from 'vue-chemistry/math'\nimport { toLowerCase, toString } from 'vue-chemistry/string'\nimport { parseFloat, parseInt } from 'vue-chemistry/number'\nimport { parse, stringify } from 'vue-chemistry/json'\nimport { isFalsy } from 'vue-chemistry/boolean'\nimport { log } from 'vue-chemistry/console'\nimport { set } from 'vue-chemistry/core'\n// or\nimport * as Math from 'vue-chemistry/math'\nMath.sin(a)\n```\n\nOr to have everything in one place:\n\n```js\nimport { log, parse, parseInt, sqrt } from 'vue-chemistry'\n```\n\n\n## Examples\n\n```js\nimport { set } from 'vue-chemistry/core'\nimport { log } from 'vue-chemistry/console'\nimport { pow, sqrt, sum } from 'vue-chemistry/math'\n\n// Math       _________\n//       c = √ a² + b²\nconst a = ref(3)\nconst b = ref(4)\nconst c = sqrt(sum(pow(a, 2), pow(b, 2)))\nlog(c) // 5\n\nset(a, 5) // shorthand for a.value = 5\nset(b, 12)\nlog(c) // 13\n```\n\n```ts\nimport { parse, stringify } from 'vue-chemistry/json'\nimport { log } from 'vue-chemistry/console'\n\n// JSON\n//\nconst obj = ref({ foo: 'bar' })\nconst str = stringify(obj)\nconst clone = parse(str)\n\nlog(str) // {\"foo\":\"bar\"}\n\nobj.value.no = 42\nlog(str) // {\"foo\":\"bar\",\"no\":42}\n```\n\n```ts\nimport { set } from 'vue-chemistry/core'\nimport { log } from 'vue-chemistry/console'\nimport { rs, toUpperCase } from 'vue-chemistry/string'\n\n// String\n//         rs - Reactive String\nconst name = ref('foo')\nconst message = rs`Hello ${toUpperCase(name)}!`\nlog(message) // Hello FOO!\nset(name, 'Anthony')\nlog(message) // Hello ANTHONY!\n```\n\n```ts\nimport { set } from 'vue-chemistry/core'\nimport { log } from 'vue-chemistry/console'\nimport { rs } from 'vue-chemistry/string'\nimport { dec, multiply } from 'vue-chemistry/match'\n\n// String 2\n//\nconst x = ref(9)\nconst y = ref(9)\nconst z = ref(7)\nconst equation = rs`${x} x ${y} + ${z} = ${sum(multiply(x, y), z)}`\nlog(equation) //   9 x 9 + 7 = 88\nset(x, 98)\ndec(z)\nlog(equation) //  98 x 9 + 6 = 888\nset(x, 987)\ndec(z)\nlog(equation) // 987 x 9 + 5 = 8888\n```\n\n```ts\nimport { is, log, rs, set, ternary } from 'vue-chemistry'\n\n// String 3\n//\nconst mode = ref('light')\n\nconst isDark = is(mode, 'dark')\nconst icon = rs`mdi-${ternary(isDark, 'moon', 'sun')}`\n\nlog(icon) // mdi-sun\n\nset(mode, 'dark')\n\nlog(icon) // mdi-moon\n```\n\n## Sponsors\n\nThis project is part of my \u003ca href='https://github.com/antfu-sponsors'\u003eSponsor Program\u003c/a\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg\"\u003e\n    \u003cimg src='https://cdn.jsdelivr.net/gh/antfu/static/sponsors.svg'/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvueuse%2Fvue-chemistry","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvueuse%2Fvue-chemistry","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvueuse%2Fvue-chemistry/lists"}