{"id":15494025,"url":"https://github.com/orenelbaum/babel-plugin-reactivars-solid","last_synced_at":"2025-04-22T20:22:03.652Z","repository":{"id":114980805,"uuid":"445960520","full_name":"orenelbaum/babel-plugin-reactivars-solid","owner":"orenelbaum","description":"A Babel plugin that lets you use a Svelte like syntax with Solid","archived":false,"fork":false,"pushed_at":"2022-05-25T13:33:56.000Z","size":87,"stargazers_count":19,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-19T11:30:43.118Z","etag":null,"topics":["babel","babel-plugin","reactivars","reactive-variables","solid","solid-js"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/orenelbaum.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-09T00:37:19.000Z","updated_at":"2023-11-13T16:26:29.000Z","dependencies_parsed_at":"2023-07-25T08:31:24.268Z","dependency_job_id":null,"html_url":"https://github.com/orenelbaum/babel-plugin-reactivars-solid","commit_stats":{"total_commits":21,"total_committers":2,"mean_commits":10.5,"dds":"0.33333333333333337","last_synced_commit":"6a3ee3648e2e5e996eae10e02da2a36f2b414ce3"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orenelbaum%2Fbabel-plugin-reactivars-solid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orenelbaum%2Fbabel-plugin-reactivars-solid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orenelbaum%2Fbabel-plugin-reactivars-solid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orenelbaum%2Fbabel-plugin-reactivars-solid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/orenelbaum","download_url":"https://codeload.github.com/orenelbaum/babel-plugin-reactivars-solid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250316165,"owners_count":21410484,"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":["babel","babel-plugin","reactivars","reactive-variables","solid","solid-js"],"created_at":"2024-10-02T08:10:32.342Z","updated_at":"2025-04-22T20:22:03.647Z","avatar_url":"https://github.com/orenelbaum.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# babel-plugin-reactivars-solid\n\n`babel-plugin-reactivars-solid` is a Babel plugin that lets you use a Svelte like syntax with Solid (a React version is a WIP).\n\n\n```jsx\nimport { $ } from 'babel-plugin-reactivars-solid'\n\nconst getDouble = ({ $sig }) =\u003e \n\t({ $doubled: $([\n\t\t() =\u003e $sig * 2,\n\t\tnewVal =\u003e $sig = newVal / 2\n\t])})\n\nconst CounterChild = ({ $doubleCount }) =\u003e\n   \u003cbutton onClick={() =\u003e $doubleCount++}\u003e\n      {$doubleCount} (click to add 0.5 to count)\n   \u003c/button\u003e\n\nconst CounterParent = () =\u003e {\n   let $count = 0\n   let { $doubled: $doubleCount } = getDouble({ $sig: $count })\n   const incrementCount = () =\u003e $doubleCount += 2\n   return \u003c\u003e\n      \u003cbutton onClick={incrementCount}\u003e\n         {$count}\n      \u003c/button\u003e\n      \u003cCounterChild {...{ $doubleCount }} /\u003e\n   \u003c/\u003e\n}\n```\n\n\u003e **Note**  \n\u003e I'm probably going to make some relatively significant changes to this plugin soon.  \n\u003e I think that I can probably remove some of the complexity and noise with the object literals and destructuring based syntax. Maybe I can even completely remove this whole syntax altogether which will drastically simplify this plugin.  \n\u003e I also think that I can make the read only and write only APIs a lot more consistet with the main syntax.  \n\u003e This can potentially produce significant imporvements to this plugin. Stay tuned!\n\nDisclaimer: this plugin doesn't have any known bugs at the moment, but is still not ready for production use. If you find any bugs please open an issue.\n\n\n## Getting Started\n\nSee [reactivars-example](https://github.com/orenelbaum/reactivars-example)\n\n```sh\nnpm i -D babel-plugin-reactivars-solid @rollup/plugin-babel\n```\n\nExample config:\n```js\nimport { defineConfig } from 'vite';\nimport solidPlugin from 'vite-plugin-solid';\nimport { babel } from '@rollup/plugin-babel';\n\nexport default defineConfig({\n   plugins: [\n      {\n         ...babel({\n            plugins: [\n               [\"@babel/plugin-syntax-typescript\", { isTSX: true }],\n               \"babel-plugin-reactivars-solid\",\n            ],\n            extensions: [\".tsx\"]\n         }),\n         enforce: 'pre'\n      },\n      solidPlugin()\n   ],\n   build: {\n      target: 'esnext',\n      polyfillDynamicImport: false,\n   },\n});\n```\n\n\n## Roadmap / Missing Features\n- Examine the possibility of unlocking a better syntax with a TS extension. What I have in mind currently: I want to see if it's possible to use the reactive variable syntax for read-only and write-only reactive variables while maintaining full TS support and eforcing read/write permissions at the language server / linter level. This would be useful for signal accessors and setters as well as memos, wrapped reactive expressions (things like `const y = () =\u003e x + 1; console.log(y() + 1)` could become `const $y = x + 1; console.log($y + 1)`) and wrapped setters (`const setY = y =\u003e setX(y + 1); setY(1)` could become `let $y = y =\u003e $x = y + 1; $y = 1`). This will help this plugin become more of a consistent language where every reactive value is either a `$` prefixed reactive variable/property (reactive property = `x.$y`) or a property on a JS object / proxy (this should usually appear in props and stores) as well as consistent write syntax for non-store signals. Messing with TS extensions could potentially unlock even better possibilities and it's something I need to explore and think about more, but I really want that additional consistancy which I don't think we can achieve without extending TS, so this alone might be a reason to cross this boundary.\n- Handle batching, update functions and pending values\n- `$` label for effects\n### Under consideration\n- Reactive variable factory functions (`let $doubleCount = double$($count))\n- Two way binding support for HTML elements\n\n\n\n## Other cool plugins\n- https://github.com/orenelbaum/babel-plugin-solid-undestructure - This plugin lets you destructure your props without losing reactivity (also made by me).\n- https://github.com/LXSMNSYC/babel-plugin-solid-labels - Solid labels is more of an all in one plugin. It has Svelte-like reactive variables (like this plugin), prop destructuring and more.\n- https://github.com/LXSMNSYC/solid-sfc - An experimental SFC compiler for SolidJS.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forenelbaum%2Fbabel-plugin-reactivars-solid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Forenelbaum%2Fbabel-plugin-reactivars-solid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forenelbaum%2Fbabel-plugin-reactivars-solid/lists"}