react-vfor
Version:
`ReactVFor` is a Vite/React plugin that allows you to use Vue-like `v-for` syntax in React components.
2 lines (1 loc) • 2.15 kB
JavaScript
(function(r,l){typeof exports=="object"&&typeof module<"u"?module.exports=l(require("@babel/types"),require("@babel/traverse"),require("@babel/parser"),require("@babel/generator")):typeof define=="function"&&define.amd?define(["@babel/types","@babel/traverse","@babel/parser","@babel/generator"],l):(r=typeof globalThis<"u"?globalThis:r||self,r.ReactVFor=l(r.t,r.traverse,r.parser,r.generate))})(this,function(r,l,m,d){"use strict";function b(n){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const i in n)if(i!=="default"){const u=Object.getOwnPropertyDescriptor(n,i);Object.defineProperty(t,i,u.get?u:{enumerable:!0,get:()=>n[i]})}}return t.default=n,Object.freeze(t)}const e=b(r);function v(n){const[t,i]=n.split(" in ").map(c=>c.trim());let u=t,s=null;return t.includes(",")&&([u,s]=t.split(",").map(c=>c.trim())),{items:i,item:u,index:s}}function x(){return{name:"vite-plugin-vfor-react",enforce:"pre",transform(n,t){if(!t.endsWith(".jsx")&&!t.endsWith(".tsx"))return null;const i=m.parse(n,{sourceType:"module",plugins:["jsx","typescript"]});return l(i,{JSXElement(s){const o=s.node.openingElement.attributes.find(p=>e.isJSXAttribute(p)&&e.isJSXIdentifier(p.name,{name:"v-for"}));if(!o||!o.value)return;let f=null;if(e.isStringLiteral(o.value)?f=o.value.value:e.isJSXExpressionContainer(o.value)&&e.isStringLiteral(o.value.expression)&&(f=o.value.expression.value),!f)return;const{items:g,item:E,index:j}=v(f);try{const p=e.objectExpression(s.node.openingElement.attributes.filter(a=>!(e.isJSXAttribute(a)&&e.isJSXIdentifier(a.name,{name:"v-for"}))).map(a=>e.objectProperty(e.identifier(a.name.name),e.isJSXExpressionContainer(a.value)?a.value.expression:e.stringLiteral(a.value.value)))),y=e.callExpression(e.memberExpression(e.identifier("React"),e.identifier("createElement")),[e.identifier(s.node.openingElement.name.name),p,...s.node.children]),S=e.arrowFunctionExpression([e.identifier(E),e.identifier(j||"index")],y),J=e.jsxExpressionContainer(e.callExpression(e.memberExpression(e.identifier(g),e.identifier("map")),[S]));s.replaceWith(J)}catch{return}}}),{code:d(i,{},n).code,map:null}}}}return x});