makelabs/dist/vite.js

Component tagging toolkit for visual editing

import{findProjectRoot,shouldTagElement}from"./chunk-7KSJNZ5U.js";import{parse as e}from"@babel/parser";import*as t from"esbuild";import n from"fs/promises";import r from"magic-string";import a from"path";import i from"tailwindcss/resolveConfig.js";var o=new Set([".jsx",".tsx"]);function visualEditorPlugin(l={}){const s={include:[".jsx",".tsx"],excludeElements:["Fragment","React.Fragment"],excludeThreeFiber:!0,excludeDrei:!0,customExcludes:[],generateTailwindConfig:!1,tailwindConfigPath:"./tailwind.config.ts",tailwindOutputPath:"./src/tailwind.config.ml.json",...l},c=findProjectRoot(),m=process.cwd(),p={totalFiles:0,processedFiles:0,totalElements:0},d=a.resolve(c,s.tailwindConfigPath),u=a.resolve(c,s.tailwindOutputPath),f=a.resolve(c,"./.ml.tailwind.config.js");return{name:"makelabs-visual-editor-plugin",enforce:"pre",async transform(t,n){if(!o.has(a.extname(n))||n.includes("node_modules"))return null;p.totalFiles++;const i=a.relative(m,n);try{const o=e(t,{sourceType:"module",plugins:["jsx","typescript"]}),l=new r(t);let c=0,m=null;const{walk:d}=await import("estree-walker");return d(o,{enter(e){if("JSXElement"===e.type&&(m=e),"JSXOpeningElement"===e.type){const t=e;let r;if("JSXIdentifier"===t.name.type)r=t.name.name;else{if("JSXMemberExpression"!==t.name.type)return;{const e=t.name;r=`${e.object.name}.${e.property.name}`}}if(!shouldTagElement(r,s))return;const o=t.attributes.reduce((e,t)=>("JSXAttribute"===t.type&&("StringLiteral"===t.value?.type?e[t.name.name]=t.value.value:"JSXExpressionContainer"===t.value?.type&&"StringLiteral"===t.value.expression?.type&&(e[t.name.name]=t.value.expression.value)),e),{});let p="";m&&m.children&&(p=m.children.map(e=>"JSXText"===e.type?e.value.trim():"JSXExpressionContainer"===e.type&&"StringLiteral"===e.expression?.type?e.expression.value:"").filter(Boolean).join(" ").trim());const d={};p&&(d.text=p),o.placeholder&&(d.placeholder=o.placeholder),o.className&&(d.className=o.className);const u=t.loc?.start?.line??0,f=t.loc?.start?.column??0,g=`${i}:${u}:${f}`,w=a.basename(n),h=[`data-ml-id="${g}"`,`data-ml-name="${r}"`,[`data-component-path="${i}"`,`data-component-line="${u}"`,`data-component-file="${w}"`,`data-component-name="${r}"`,`data-component-content="${encodeURIComponent(JSON.stringify(d))}"`].join(" ")].join(" ");l.appendLeft(t.name.end??0,` ${h}`),c++}}}),p.processedFiles++,p.totalElements+=c,{code:l.toString(),map:l.generateMap({hires:!0})}}catch(e){return console.error(`MakeLabs: Error processing file ${i}:`,e),p.processedFiles++,null}},async buildStart(){if(s.generateTailwindConfig)try{await g()}catch(e){console.error("MakeLabs: Error generating tailwind config:",e)}},configureServer(e){if(s.generateTailwindConfig)try{e.watcher.add(d),e.watcher.on("change",async e=>{a.normalize(e)===a.normalize(d)&&await g()})}catch(e){console.error("MakeLabs: Error adding watcher:",e)}},buildEnd(){p.totalElements,p.processedFiles}};async function g(){try{await t.build({entryPoints:[d],outfile:f,bundle:!0,format:"esm",banner:{js:'import { createRequire } from "module"; const _0 = createRequire(import.meta.url);'}});const e=await import(f+"?update="+Date.now());if(!e||!e.default)throw new Error("Invalid Tailwind config structure");const r=i(e.default);await n.writeFile(u,JSON.stringify(r,null,2)),await n.unlink(f).catch(()=>{})}catch(e){throw console.error("MakeLabs: Error in generateTailwindConfig:",e),e}}}export{visualEditorPlugin};