{"id":13492762,"url":"https://github.com/orenelbaum/babel-plugin-solid-undestructure","last_synced_at":"2025-10-24T03:02:32.341Z","repository":{"id":37906973,"uuid":"401382055","full_name":"orenelbaum/babel-plugin-solid-undestructure","owner":"orenelbaum","description":"A Babel plugin for SolidJS that allows you to destructure component props without losing reactivity.","archived":false,"fork":false,"pushed_at":"2024-07-14T23:11:44.000Z","size":393,"stargazers_count":99,"open_issues_count":8,"forks_count":2,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-05-20T13:08:26.832Z","etag":null,"topics":["babel","babel-plugin","destructure","solid-js","undestructure"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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":"2021-08-30T14:54:34.000Z","updated_at":"2025-01-21T15:34:06.000Z","dependencies_parsed_at":"2024-01-14T02:04:31.382Z","dependency_job_id":"5bcf08af-b512-4412-9d80-655091ae8015","html_url":"https://github.com/orenelbaum/babel-plugin-solid-undestructure","commit_stats":{"total_commits":47,"total_committers":4,"mean_commits":11.75,"dds":"0.44680851063829785","last_synced_commit":"a6340d5fe383876196c13e79b9c92104041d3aef"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/orenelbaum/babel-plugin-solid-undestructure","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orenelbaum%2Fbabel-plugin-solid-undestructure","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orenelbaum%2Fbabel-plugin-solid-undestructure/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orenelbaum%2Fbabel-plugin-solid-undestructure/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orenelbaum%2Fbabel-plugin-solid-undestructure/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/orenelbaum","download_url":"https://codeload.github.com/orenelbaum/babel-plugin-solid-undestructure/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/orenelbaum%2Fbabel-plugin-solid-undestructure/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264763130,"owners_count":23660303,"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","destructure","solid-js","undestructure"],"created_at":"2024-07-31T19:01:08.957Z","updated_at":"2025-10-24T03:02:32.264Z","avatar_url":"https://github.com/orenelbaum.png","language":"JavaScript","readme":"# babel-plugin-solid-undestructure\n\nThis Babel plugin allows you to destructure your props in your Solid components without losing reactivity.\n\nThe plugin will \"un-destructure\" your props at build time, so the code you pass into the Solid compiler will not have destructured props at runtime. Instead the props will be accessed the normal way with `props.someProp`.\n\n\u003e **Note**  \n\u003e This plugin is compatible with Solid 1.6 and is likely to work with every version of Solid 1.x.\n\nUsage with examples:\n\n```jsx\n// Use the `Component` type to mark components that will be transformed by the plugin\nimport type { Component } from 'solid-js'\nconst MyComp: Component\u003c...\u003e = ({ a, b, c }) =\u003e {a; b; c;};\n\n//  ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓  The above code will compile to\nimport type { Component } from 'solid-js'\nconst MyComp: Component\u003c...\u003e = props =\u003e {props.a; props.b; props.c;}\n\n\n\n// Also works with the `ParentComponent` type\nimport type { ParentComponent } from 'solid-js'\nconst MyComp: ParentComponent\u003c...\u003e = ({ a, b, c }) =\u003e {a; b; c;};\n\n//  ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓\nimport type { ParentComponent } from 'solid-js'\nconst MyComp: ParentComponent\u003c...\u003e = props =\u003e {props.a; props.b; props.c;}\n\n\n\n// You can use a compile time function instead of using the `Component` type (needed for vanilla JS)\nimport { component } from 'undestructure-macros'\nconst MyComp = component(({ a, b, c }) =\u003e {a; b; c;})\n\n//  ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓\nconst MyComp = props =\u003e {props.a; props.b; props.c;}\n\n\n\n// Default props using `mergeProps`\nimport type { Component } from 'solid-js'\nconst MyComp: Component\u003c...\u003e = (\n  { a = 1, b = 2, c = 3 } = defaultProps\n) =\u003e {a; b; c;}\n\n//  ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓\nimport { type Component, mergeProps } from 'solid-js'\nconst MyComp: Component\u003c...\u003e = props =\u003e {\n  props = mergeProps(defaultProps, { a: 1, b: 2, c: 3 }, props);\n  props.a; props.b; props.c;\n}\n\n\n\n// Rename props\nimport type { Component } from 'solid-js'\nconst MyComp: Component\u003c...\u003e = ({ a: d, b: e, c: f }) =\u003e {d; e; f;}\n\n//  ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓\nimport { type Component, mergeProps } from 'solid-js'\nconst MyComp: Component\u003c...\u003e = props =\u003e {props.a; props.b; props.c;}\n\n\n\n// Rest element destructuring using `splitProps`\nimport type { Component } from 'solid-js'\nconst MyComp: Component\u003c...\u003e = ({ a, b, c, ...other }) =\u003e {a; b; c; other;}\n\n//  ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓\nimport { type Component, splitProps } from 'solid-js'\nconst MyComp: Component\u003c...\u003e = props =\u003e {\n  let other;\n  [props, other] = splitProps(props, [\"a\", \"b\", \"c\"]);\n  props.a; props.b; props.c; other;\n}\n\n\n\n// You can nest components\nimport type { Component } from 'solid-js'\nconst Parent: Component\u003c...\u003e = ({ a, b }) =\u003e {\n  const Child: Component\u003c...\u003e = ({ c, d }) =\u003e {\n    a; b; c; d;\n  }\n}\n\n//  ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓\nimport type { Component } from 'solid-js'\nconst Parent: Component\u003c...\u003e = props1 =\u003e {\n  const Child: Component\u003c...\u003e = props2 =\u003e {\n    props1.a; props1.b; props2.c; props2.d;\n  }\n}\n```\n\nSee also [undestructure-example](https://github.com/orenelbaum/undestructure-example) (or [Open in Stackblitz](https://stackblitz.com/github/orenelbaum/undestructure-example)).\n\n\n## `Component` Type Annotation\n\nWhen this option is enabled (it is enabled by default), the plugin transforms all arrow function components which are part of a variable declaration with a `Component` type annotation.\n\nThe type annotation must be a direct reference to the Solid `Component` type import, or an annotation of the form `Solid.Component` where `Solid` is a reference to the default import of Solid.\n\nIn both cases you can use the 'import as' syntax.\n\nExamples:\n\n```tsx\nimport type { Component } from 'solid-js'\n\nconst MyComponent: Component = // ...\n```\n\n```tsx\nimport Solid from 'solid-js'\n\nconst MyComponent: Solid.Component = // ...\n```\n\n```tsx\nimport type { Component as ComponentAlias } from 'solid-js'\n\nconst MyComponent: ComponentAlias = // ...\n```\n\nThis example won't work:\n\n```tsx\nimport type { Component } from 'solid-js'\n\ntype ComponentAlias = Component\n\nconst MyComponent: ComponentAlias = // ...\n```\n\nIn this last example, `MyComponent` won't be transformed.\n\n\n## Compile Time Function Annotation (Needed for Vanilla JS)\n\nThis option can be used if you are using vanilla JS or you don't want to rely on types to manipulate runtime behavior like the type annotation does.\nWhen this option is enabled (it is enabled by default), the plugin transforms all component that are wrapped in the `component` compile-time function provided by this plugin.\n\nThe `component` compile-time function must be a direct reference to the `component` named export from `undestructure-macros`\n\nYou can also use the 'import as' syntax.\n\nExamples:\n\n```jsx\nimport { component } from 'undestructure-macros'\n\nconst MyComponent = component(/* your component goes here. */)\n```\n\n```tsx\nimport { component as c } from 'undestructure-macros'\n\nconst MyComponent = c(/* your component goes here. */)\n```\n\nThis example won't work:\n\n```tsx\nimport { component } from 'undestructure-macros'\n\nconst c = component\n\nconst MyComponent = c(/* your component goes here. */)\n```\n\nIn this last example, `MyComponent` won't be transformed.\n\n\n## Installation and Configuring Vite\n\nInstall the plugin and the macro placeholder package with\n\n```sh\nnpm i -D babel-plugin-solid-undestructure undestructure-macros\n```\n\nIn your Vite config, import `undestructurePlugin` from `babel-plugin-solid-undestructure`\n\n```js\nimport { undestructurePlugin } from \"babel-plugin-solid-undestructure\"\n```\n\n### TS with Type Annotation Support\n\nIf your'e working with TypeScript code and you want to use the `Component` type annotation, add this to the top of the plugin list in your Vite config:\n\n```js\n...undestructurePlugin(\"ts\")\n```\n\nWith this configuration you can use both the `Component` type and the `component` compile time function to annotate components.\n\n### TS or Vanilla JS, No Type Annotation Support\n\nIn your Vite config, find the your vite-plugin-solid initialization (in the default Solid template it will be imported as `solidPlugin`).\n\nThe first argument this initialization function takes, is the options object.\n\nAdd this field to the initializer options:\n```js\nbabel: {\n\tplugins: [undestructurePlugin(\"vanilla-js\")]\n} \n```\n\nWith this configuration you can use both the `Component` type and the `component` compile time function to annotate components.\n\n\n## Roadmap\n\n- Support for `ParentComponent` type annotation\n- A pragma to annotate components\n\n## Features Under Consideration\n\n- Nested destructuring\n- Destructure CTF (probably not but maybe)\n\nIf you want a feature to be added to this plugin, whether it's on this list or not, please open a feature request or tell me [in this discussion](https://github.com/orenelbaum/babel-plugin-solid-undestructure/discussions/5).\n\n\n## Other Cool Plugins for Solid:\n\n- https://github.com/orenelbaum/babel-plugin-reactivars-solid - A Svelte-like \"reactive variables\" plugin for Solid that lets you pass reactive variables (getter + setter) around in a concise way (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, prop destructuring (like this plugin) and more.\n- https://github.com/LXSMNSYC/solid-sfc - An experimental SFC compiler for SolidJS.\n\n\n## Development\n\nThe project is written in TypeScript and I think that it's relatively well documented and written in a way that makes it easy to understand as long as you're familiar with Babel plugins. If you're not, Babel plugins are much more straight forward than they look, I recommend playing a bit with [AST Explorer](https://astexplorer.net/) to get a feel for how they work, and you can also take a look at [the Babel plugin handbook](https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md).\n\nIt's recommended to use pnpm for development.\n\nGet started with:\n```sh\npnpm i\n```\n\nYou can test your changes either by adding a test or by using the playground.\nA test should be added for every new feature anyway, but you can use the playground if you don't want to start by writing a test, you can also skip writing a test altogether, in this case I'll add a test myself.\n\nFor working with the playground and the tests, if you're on VSCode I recommend installing the extension [es6-string-javascript](https://marketplace.visualstudio.com/items?itemName=zjcompt.es6-string-javascript) which will highlight JS code inside template literals using a pragma, this way:\n```js\n/*javascript*/`code goes here`\n```\n\nThe playground is a file called `playground.cjs`. To work with the playground just go to the file and edit the code in the `src` variable.\nYour can run the playground with:\n```sh\npnpm run playground\n```\n\nWriting a test is a bit trickier since uvu doesn't support snapshots and I'm too lazy to set it up in a better way.\nSo I won't document the process right now, I'll just mention that you can run the tests with:\n```sh\npnpm run test\n```\n","funding_links":[],"categories":["JavaScript","📦 Components \u0026 Libraries"],"sub_categories":["DX"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forenelbaum%2Fbabel-plugin-solid-undestructure","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Forenelbaum%2Fbabel-plugin-solid-undestructure","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Forenelbaum%2Fbabel-plugin-solid-undestructure/lists"}