vite-plugin-solid-undestructure 0.1.1

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright 2026 MicroDev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,204 @@
+# SolidJS Props Transform Plugin
+
+A Vite plugin that automatically transforms props destructuring in SolidJS components to use `mergeProps` and `splitProps`, preserving reactivity.
+
+## Why?
+
+In SolidJS, destructuring props directly breaks reactivity because it converts reactive getters into static values:
+
+```tsx
+// ❌ Breaks reactivity
+function Component({ name, count }) {
+  return (
+    <div>
+      {name}: {count}
+    </div>
+  )
+}
+```
+
+The correct approach is to use `splitProps` and `mergeProps`:
+
+```tsx
+// ✅ Maintains reactivity
+import { splitProps } from 'solid-js'
+
+function Component(_props) {
+  const [{ name, count }] = splitProps(_props, ['name', 'count'])
+  // ...
+}
+```
+
+This plugin performs that transformation automatically.
+
+## Features
+
+- ✨ Automatically transforms destructured props to `splitProps`/`mergeProps`
+- 🎯 Handles default values using `mergeProps`
+- 🔄 Preserves spread parameters with `splitProps`
+- 📦 Auto-imports `mergeProps` and `splitProps` from 'solid-js'
+- ⚡ Skips non-component functions
+
+## Installation
+
+```bash
+bun add -D vite-plugin-solid-undestructure
+```
+
+## Usage
+
+```typescript
+import solidUndestructure from './plugins/solid-undestructure'
+import solid from 'vite-plugin-solid'
+
+export default defineConfig({
+  plugins: [solidUndestructure(), solid() /* other plugins */]
+})
+```
+
+## Examples
+
+### Basic Destructuring
+
+```tsx
+// Before
+function Greeting({ name, age }) {
+  return (
+    <div>
+      Hello {name}, you are {age} years old
+    </div>
+  )
+}
+
+// After
+function Greeting(_props) {
+  return (
+    <div>
+      Hello {_props.name}, you are {_props.age} years old
+    </div>
+  )
+}
+```
+
+### Default Values
+
+```tsx
+// Before
+function Button({ label = 'Click me', disabled = false }) {
+  return <button disabled={disabled}>{label}</button>
+}
+
+// After
+import { mergeProps } from 'solid-js'
+
+function Button(_props) {
+  const _merged = mergeProps({ label: 'Click me', disabled: false }, _props)
+  return <button disabled={_merged.disabled}>{_merged.label}</button>
+}
+```
+
+### Spread Properties
+
+```tsx
+// Before
+function Card({ title, description, ...props }) {
+  return (
+    <div {...props}>
+      <h2>{title}</h2>
+      <p>{description}</p>
+    </div>
+  )
+}
+
+// After
+import { splitProps } from 'solid-js'
+
+function Card(_props) {
+  const [, props] = splitProps(_props, ['title', 'description'])
+  return (
+    <div {...props}>
+      <h2>{_props.title}</h2>
+      <p>{_props.description}</p>
+    </div>
+  )
+}
+```
+
+### TestComponent (Defaults + Nested Destructuring + Spread)
+
+```tsx
+// Before
+import { For } from 'solid-js'
+
+function TestComponent({
+  name = 'World',
+  count = 0,
+  avatar = '/default.png',
+  items,
+  nested: { a, b },
+  ...props
+}: {
+  name?: string
+  count?: number
+  avatar?: string
+  items: string[]
+  nested: { a: number; b: number }
+  class?: string
+  onClick?: () => void
+}) {
+  return (
+    <div {...props}>
+      <p>{props.class}</p>
+      <pre>{a}</pre>
+      <pre>{b}</pre>
+      <img src={avatar} alt={name} />
+      <h1>Hello {name}!</h1>
+      <p>Count: {count}</p>
+      <ul>
+        <For each={items}>{(item) => <li>{item}</li>}</For>
+      </ul>
+    </div>
+  )
+}
+
+// After
+import { For, mergeProps, splitProps } from 'solid-js'
+
+function TestComponent(_props) {
+  const _merged = mergeProps({ name: 'World', count: 0, avatar: '/default.png' }, _props)
+  const [, props] = splitProps(_merged, ['name', 'count', 'avatar', 'items', 'nested'])
+  return (
+    <div {...props}>
+      <p>{props.class}</p>
+      <pre>{_merged.nested.a}</pre>
+      <pre>{_merged.nested.b}</pre>
+      <img src={_merged.avatar} alt={_merged.name} />
+      <h1>Hello {_merged.name}!</h1>
+      <p>Count: {_merged.count}</p>
+      <ul>
+        <For each={_merged.items}>{(item) => <li>{item}</li>}</For>
+      </ul>
+    </div>
+  )
+}
+```
+
+## How It Works
+
+1. **Parse** — Uses `@babel/parser` to parse TypeScript/JSX files into an AST
+2. **Detect** — Identifies functions with destructured props that return JSX
+3. **Transform** — Rewrites destructuring into `mergeProps`/`splitProps` calls and replaces all references to destructured identifiers with property accesses on the merged/props object
+4. **Import** — Adds necessary imports from `solid-js` if not already present
+5. **Generate** — Outputs transformed code with source maps
+
+## Notes
+
+- Only transforms functions that return JSX (regular functions are left untouched)
+- Requires the first parameter to be an object pattern (destructuring)
+- Skips files in `node_modules`
+
+## Testing
+
+```bash
+bun test
+```

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { Plugin } from 'vite';
+/**
+ * Vite plugin that transforms Solid.js component prop destructuring into reactive prop access.
+ * This ensures that props remain reactive by using mergeProps and splitProps instead of
+ * direct destructuring, which would break Solid's reactivity system.
+ */
+declare const _default: () => Plugin;
+export default _default;

package/dist/index.js

@@ -0,0 +1 @@
+import S from"@babel/generator";import{parse as I}from"@babel/parser";import k from"@babel/traverse";import*as b from"@babel/types";import*as H from"@babel/types";function v(Q){if(H.isArrowFunctionExpression(Q.node)&&!H.isBlockStatement(Q.node.body))return H.isJSXElement(Q.node.body)||H.isJSXFragment(Q.node.body);let $=!1;return Q.traverse({ReturnStatement(W){if(W.getFunctionParent()?.node!==Q.node)return;let L=W.node.argument;if(!L)return;if(H.isJSXElement(L)||H.isJSXFragment(L))$=!0,W.stop();if(H.isConditionalExpression(L)){if(H.isJSXElement(L.consequent)||H.isJSXFragment(L.consequent)||H.isJSXElement(L.alternate)||H.isJSXFragment(L.alternate))$=!0,W.stop()}if(H.isLogicalExpression(L)){if(H.isJSXElement(L.left)||H.isJSXFragment(L.left)||H.isJSXElement(L.right)||H.isJSXFragment(L.right))$=!0,W.stop()}if(H.isParenthesizedExpression(L)){let U=L.expression;if(H.isJSXElement(U)||H.isJSXFragment(U))$=!0,W.stop()}}}),$}import*as q from"@babel/types";import*as _ from"@babel/types";function T(Q,$,W){let L=[];if($)L.push("mergeProps");if(W)L.push("splitProps");if(L.length===0)return;let U=Q.node.body,D=new Set;for(let Z of U){if(!_.isImportDeclaration(Z)||Z.source.value!=="solid-js")continue;for(let M of Z.specifiers)if(_.isImportSpecifier(M)&&_.isIdentifier(M.imported))D.add(M.imported.name)}let A=L.filter((Z)=>!D.has(Z));if(A.length===0)return;let R=-1;for(let Z=0;Z<U.length;Z++)if(_.isImportDeclaration(U[Z]))R=Z;let V=A.map((Z)=>_.importDeclaration([_.importSpecifier(_.identifier(Z),_.identifier(Z))],_.stringLiteral("solid-js")));if(R>=0)U.splice(R+1,0,...V);else U.unshift(...V)}function N(Q,$){let W=Q.scope.generateUidIdentifier("props"),L=$.properties,U=[],D=[],A=new Map,R=new Map,V={},Z=!1,M=null;function K(B,F=[]){B.properties.forEach((G)=>{if(q.isObjectProperty(G)){let Y=null;if(q.isIdentifier(G.key))Y=G.key.name;else if(q.isStringLiteral(G.key))Y=G.key.value;if(!Y)return;let C=[...F,Y];if(q.isObjectPattern(G.value)){if(F.length===0)U.push(Y);K(G.value,C)}else{let z=null;if(q.isIdentifier(G.value))z=G.value.name;else if(q.isAssignmentPattern(G.value)){if(q.isIdentifier(G.value.left)){if(z=G.value.left.name,q.isExpression(G.value.right)){if(F.length===0)V[Y]=G.value.right}}}if(F.length===0)if(U.push(Y),z)D.push(z),A.set(z,Y);else D.push(Y),A.set(Y,Y);else if(z)R.set(z,C);else R.set(Y,C)}}})}for(let B of L)if(q.isRestElement(B)){if(Z=!0,q.isIdentifier(B.argument))M=B.argument}else if(q.isObjectProperty(B)){let F=null,G=null;if(q.isIdentifier(B.key))F=B.key.name;else if(q.isStringLiteral(B.key))F=B.key.value;if(!F)continue;if(q.isObjectPattern(B.value)){U.push(F),K(B.value,[F]);continue}if(q.isIdentifier(B.value))G=B.value.name;else if(q.isAssignmentPattern(B.value)&&q.isIdentifier(B.value.left))G=B.value.left.name;if(U.push(F),G)D.push(G),A.set(G,F);else D.push(F),A.set(F,F);if(q.isAssignmentPattern(B.value)&&q.isExpression(B.value.right))V[F]=B.value.right}Q.node.params[0]=W;let j=[],X=Object.keys(V).length>0,E=U.length>0||Z,O;if(X){let B=q.objectExpression(Object.entries(V).map(([F,G])=>q.objectProperty(q.identifier(F),G)));if(E)O=Q.scope.generateUidIdentifier("merged"),j.push(q.variableDeclaration("const",[q.variableDeclarator(O,q.callExpression(q.identifier("mergeProps"),[B,W]))]));else O=Q.scope.generateUidIdentifier("merged"),j.push(q.variableDeclaration("const",[q.variableDeclarator(O,q.callExpression(q.identifier("mergeProps"),[B,W]))]));if(E&&M){let F=q.arrayPattern([null,M]);j.push(q.variableDeclaration("const",[q.variableDeclarator(F,q.callExpression(q.identifier("splitProps"),[O,q.arrayExpression(U.map((G)=>q.stringLiteral(G)))]))]))}}else if(E){if(O=W,M){let B=q.arrayPattern([null,M]);j.push(q.variableDeclaration("const",[q.variableDeclarator(B,q.callExpression(q.identifier("splitProps"),[W,q.arrayExpression(U.map((F)=>q.stringLiteral(F)))]))]))}}else O=W;let w=Q.get("body");if(Array.isArray(w))return;let f={Identifier(B){let F=B.parent;if(q.isMemberExpression(F)&&F.property===B.node&&!F.computed||q.isObjectProperty(F)&&F.key===B.node&&!F.computed)return;let G=B,Y=G.node.name;if(B.isBindingIdentifier())return;let C=R.get(Y);if(C){let z=q.memberExpression(q.identifier(O.name),q.identifier(C[0]));for(let J=1;J<C.length;J++)z=q.memberExpression(z,q.identifier(C[J]));G.replaceWith(z)}else if(D.includes(Y)){let z=A.get(Y)??Y;G.replaceWith(q.memberExpression(q.identifier(O.name),q.identifier(z)))}}};if(w.traverse(f),q.isBlockStatement(Q.node.body))Q.node.body.body.unshift(...j);else if(q.isExpression(Q.node.body)){let B=q.returnStatement(Q.node.body);Q.node.body=q.blockStatement([...j,B])}let x=Q.findParent((B)=>B.isProgram());if(x)T(x,X,E)}var y=k.default??k,c=S.default??S,o=()=>({name:"solid-undestructure",enforce:"pre",transform(Q,$){if(!/\.(tsx?|jsx?)$/.test($))return null;if($.includes("node_modules"))return null;if(!/\(\s*\{/.test(Q))return null;try{let L=I(Q,{sourceType:"module",plugins:["typescript","jsx"]});y(L,{Function(D){let A=D.node.params;if(A.length!==1)return;let R=A[0];if(!b.isObjectPattern(R))return;if(!v(D))return;N(D,R)}});let U=c(L,{retainLines:!0,compact:!1});return{code:U.code,map:U.map}}catch(W){return console.warn(`Failed to transform ${$}:`,W),null}}});export{o as default};

package/dist/modules/component-detector-legacy.d.ts

@@ -0,0 +1,3 @@
+import { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
+export declare function checkIfComponentLegacy(path: NodePath<t.Function>): boolean;

package/dist/modules/component-detector.d.ts

@@ -0,0 +1,8 @@
+import { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
+/**
+ * Determines if a function is likely a Solid component by checking if it returns JSX.
+ * Handles various JSX return patterns including conditional expressions, logical operators,
+ * and arrow functions with expression bodies.
+ */
+export declare function checkIfComponent(path: NodePath<t.Function>): boolean;

package/dist/modules/import-manager.d.ts

@@ -0,0 +1,11 @@
+import { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
+/**
+ * Ensures the required Solid.js imports (mergeProps, splitProps) are present in the program.
+ *
+ * For each needed import, checks if a named import from 'solid-js' already exists.
+ * If it does, nothing happens. If it doesn't, adds:
+ *   import { mergeProps } from 'solid-js'
+ *   import { splitProps } from 'solid-js'
+ */
+export declare function ensureImports(programPath: NodePath<t.Program>, needsMergeProps: boolean, needsSplitProps: boolean): void;

package/dist/modules/props-transformer.d.ts

@@ -0,0 +1,14 @@
+import { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
+/**
+ * Transforms destructured props parameters into proper Solid.js reactive props access.
+ * Converts:
+ *   function Component({ prop1, prop2 }) { ... }
+ * Into:
+ *   function Component(_props) {
+ *     const _merged = mergeProps(defaults, _props)
+ *     const [, rest] = splitProps(_merged, ['prop1', 'prop2'])
+ *     // References to prop1, prop2 become _merged.prop1, _merged.prop2
+ *   }
+ */
+export declare function transformPropsDestructuring(path: NodePath<t.Function>, objectPattern: t.ObjectPattern): void;

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "vite-plugin-solid-undestructure",
+  "version": "0.1.1",
+  "description": "Automatically transforms props destructuring in SolidJS components",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microdev1/vite-plugin-solid-undestructure.git"
+  },
+  "keywords": [
+    "vite",
+    "solidjs",
+    "babel",
+    "plugin"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "bun build src --minify --packages=external --outfile=dist/index.js && tsc --declaration --emitDeclarationOnly --outDir dist",
+    "type": "tsc --noEmit",
+    "lint": "eslint --cache src",
+    "format": "prettier --write *",
+    "test": "bun test tests",
+    "check:format": "prettier --check *"
+  },
+  "dependencies": {
+    "@babel/generator": "^7.29.1",
+    "@babel/parser": "^7.29.0",
+    "@babel/traverse": "^7.29.0",
+    "@babel/types": "^7.29.0"
+  },
+  "devDependencies": {
+    "@types/babel__core": "^7.20.5",
+    "@types/babel__generator": "^7.27.0",
+    "@types/babel__traverse": "^7.28.0",
+    "@types/bun": "^1.3.9",
+    "config": "link:config",
+    "eslint": "^9.39.3",
+    "prettier": "^3.8.1",
+    "prettier-plugin-organize-imports": "^4.3.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.56.1"
+  },
+  "peerDependencies": {
+    "vite": "^7.3.1"
+  }
+}