@builder.io/dev-tools 1.1.0-rc1 → 1.1.0-rc2

package/cli/index.cjs

@@ -943,15 +943,15 @@ Run this command to start the auto-mapping wizard for the Figma Component pasted
 Run this command to publish your Figma Mappings to Builder.io`),me.info(`${(0,sn.bgGreen)(" npx builder.io figma migrate")}
 Run this command to migrate your existing Figma Mapping into the repo as local files`),me.info(`${(0,sn.bgGreen)(" npx builder.io figma auth ")}
 Run this command to re-authenticate with Figma and Builder.io`),cn("bye \u{1F44B}")}var ed=Y(qs(),1),td=Y(fi(),1),SA=async(e,t)=>{let n=t._[2];n||(Pe(`No Figma URL provided, use:
-  npx builder.io figma add "https://..."`),Ua(),process.exit(1)),console.log(""),qt((0,be.bgMagenta)((0,be.bold)((0,be.white)(" figma publish "))));let{figmaAuth:r,builderPublicKey:i}=await Ar(e,t,{figmaAuth:!0,builderPublicKey:!0});td.track("figma add started",{spaceId:i});let s=Y_(zl),o=Tt();o.start("Waiting for Figma API...");let a=await bg(e);r?.access_token||(Pe("Figma Auth failed, try again."),process.exit(1)),o.stop("Authenticated with Figma"),o=Tt(),o.start("Gathering Figma component info...");let u=l7(n);u||(o.stop(),Pe("Invalid Figma URL, use Cmd+L while selecting a figma component"),process.exit(1));let l;try{l=await d7(r,u.fileID,u.nodeId)}catch(x){o.stop(),ed.captureException(x),Pe(`Figma REST API failed, make sure you have internet connection and the auth is correct.
+  npx builder.io figma add "https://..."`),Ua(),process.exit(1));let r=l7(n);r||(Pe("Invalid Figma URL, use Cmd+L while selecting a figma component to get a link to selection"),process.exit(1)),console.log(""),qt((0,be.bgMagenta)((0,be.bold)((0,be.white)(" figma publish "))));let{figmaAuth:i,builderPublicKey:s}=await Ar(e,t,{figmaAuth:!0,builderPublicKey:!0});td.track("figma add started",{spaceId:s});let o=Y_(zl),a=Tt();a.start("Waiting for Figma API...");let c=await bg(e);i?.access_token||(Pe("Figma Auth failed, try again."),process.exit(1)),a.stop("Authenticated with Figma"),a=Tt(),a.start("Gathering Figma component info...");let l;try{l=await d7(i,r.fileID,r.nodeId)}catch(x){a.stop(),ed.captureException(x),Pe(`Figma REST API failed, make sure you have internet connection and the auth is correct.
       Run ${(0,be.bold)("npx builder.io figma auth")} to re-authenticate`),process.exit(1)}let d=l.document;if(d.type!=="COMPONENT"&&d.type!=="COMPONENT_SET"){let x=`Seems like the pasted URL points to a ${d.type} node, not a COMPONENT or COMPONENT_SET.`;d.type==="INSTANCE"&&(x+=`
-Double click and select "Go to main component", then copy the URL to the figma COMPONENT`),o.stop(),Pe(x),process.exit(1)}let p=l.components[u.nodeId]?.key??l.componentSets[u.nodeId]?.key;p||(Pe("Pasted URL does not correspond to a component or component set"),process.exit(1)),l.document.key=p;let f=await f7(u.nodeId,d);if(!f){ed.captureException("Failed to get component info"),Pe("Failed to get component info");return}let m=await a.getRegistry({readAllInputTypes:!0});o.stop(`Imported Figma component: ${f.name}`);let g=(await(0,yA.default)({type:"autocomplete",name:"component",message:" Pick your local component to map",hint:"Type or use arrow keys. Press Enter to select",async suggest(x,O){return O.filter(B=>B.title.toLowerCase().includes(x.toLowerCase()))},choices:m.components.map(x=>({title:`<${x.name}>`,value:x})),instructions:"Select your local component that you want to map to the Figma component"})).component,b,S,y=g7(f,g,m,!0);y.meta={figmaNode:f,figmaKey:f.key,registeredCmp:g,cliVersion:e.version,cliFrameworks:e.getFrameworks().map(x=>x.name),cliPlatform:e.platform(),cliDeviceId:await e.getDeviceId()};try{for(;;){y.previousCode=S,y.prompt=b;let x=0;me.message(s.highlight("typescript",y.reactInterface+`
+Double click and select "Go to main component", then copy the URL to the figma COMPONENT`),a.stop(),Pe(x),process.exit(1)}let p=l.components[r.nodeId]?.key??l.componentSets[r.nodeId]?.key;p||(Pe("Pasted URL does not correspond to a component or component set"),process.exit(1)),l.document.key=p;let f=await f7(r.nodeId,d);if(!f){ed.captureException("Failed to get component info"),Pe("Failed to get component info");return}let m=await c.getRegistry({readAllInputTypes:!0});a.stop(`Imported Figma component: ${f.name}`);let g=(await(0,yA.default)({type:"autocomplete",name:"component",message:" Pick your local component to map",hint:"Type or use arrow keys. Press Enter to select",async suggest(x,O){return O.filter(B=>B.title.toLowerCase().includes(x.toLowerCase()))},choices:m.components.map(x=>({title:`<${x.name}>`,value:x})),instructions:"Select your local component that you want to map to the Figma component"})).component,b,S,y=g7(f,g,m,!0);y.meta={figmaNode:f,figmaKey:f.key,registeredCmp:g,cliVersion:e.version,cliFrameworks:e.getFrameworks().map(x=>x.name),cliPlatform:e.platform(),cliDeviceId:await e.getDeviceId()};try{for(;;){y.previousCode=S,y.prompt=b;let x=0;me.message(o.highlight("typescript",y.reactInterface+`
 
-`+y.figmaInterface).value),me.message((0,be.bgCyan)((0,be.bold)((0,be.white)(" Streaming >> ")))),console.log("");let O=(0,be.bgCyan)((0,be.bold)((0,be.white)(" << ")));S=await E7(y,($,K)=>{let W=s.highlight("typescript",K).value.split(`
+`+y.figmaInterface).value),me.message((0,be.bgCyan)((0,be.bold)((0,be.white)(" Streaming >> ")))),console.log("");let O=(0,be.bgCyan)((0,be.bold)((0,be.white)(" << ")));S=await E7(y,($,K)=>{let W=o.highlight("typescript",K).value.split(`
 `).map(q=>(0,be.dim)("\u2502  ")+q);if(x>0){let q=Math.max(0,x-2),ot=W.slice(Math.max(0,q)),C=Math.min(x,2);C>0&&(W_.default.moveCursor(process.stdout,0,-C),W_.default.clearScreenDown(process.stdout)),process.stdout.write(ot.join(`
 `)+O+`
 `)}else process.stdout.write(W.join(`
-`));x=W.length});let B=await qo({message:`How does the mapping look? ${(0,be.dim)('Reply "good", or provide feedback (Ctrl+C to exit)')}`,defaultValue:"good",placeholder:"good"});if(an(B)&&(Pe("Mapping not saved, goodbye!"),process.exit(1)),B.trim()==="good")break;td.track("figma add follow up prompt",{spaceId:i,prompt:B}),b=B}}catch(x){ed.captureException(x),Pe("LLM failed:"+String(x)),process.exit(1)}let T=`import { figmaMapping, type BaseFigmaProps } from '@builder.io/dev-tools/figma';
+`));x=W.length});let B=await qo({message:`How does the mapping look? ${(0,be.dim)('Reply "good", or provide feedback (Ctrl+C to exit)')}`,defaultValue:"good",placeholder:"good"});if(an(B)&&(Pe("Mapping not saved, goodbye!"),process.exit(1)),B.trim()==="good")break;td.track("figma add follow up prompt",{spaceId:s,prompt:B}),b=B}}catch(x){ed.captureException(x),Pe("LLM failed:"+String(x)),process.exit(1)}let T=`import { figmaMapping, type BaseFigmaProps } from '@builder.io/dev-tools/figma';
 ${g.exportType==="default"?`import ${g.importName} from "${g.importPath}";`:`import { ${g.importName} } from "${g.importPath}";`}
 
 ${y.figmaInterface}
@@ -961,7 +961,7 @@ figmaMapping({
   componentKey: ${JSON.stringify(f.key)},
   mapper${S?.replace("function Mapper(figma:","(figma:")}
 });
-`,w=`src/mappings/${`${Ci(f.name)}.mapper.tsx`}`,I=await qo({message:`Where do you want to save the new mappings? ${(0,be.dim)("(Ctrl+C to exit)")}`,defaultValue:w,placeholder:w,initialValue:w,validate(x){if(!x.endsWith(".mapper.tsx"))return`Please enter path ending with ${(0,be.bold)(".mapper.tsx")}`;if((0,nd.isAbsolute)(x))return"Please enter a relative path, not absolute"}});an(I)&&(Pe("Mapping not saved, goodbye!"),process.exit(1)),V_.default.mkdirSync((0,nd.dirname)(I),{recursive:!0}),V_.default.writeFileSync(I,await Ha(T)),g.isRegistered||(o=Tt(),o.start("Registering builder component in registry"),await a.registerComponent({cmpId:g.id}),o.stop(`Component <${g.name}> registered`)),cn((0,be.bgGreen)((0,be.bold)((0,be.white)(" Done! \u{1F389} ")))+` ${(0,be.dim)(I)} saved correctly!`),td.track("figma add success",{spaceId:i,mappingPath:I})},l7=e=>{let t=new URL(e),n=t.searchParams.get("node-id")?.replaceAll("-",":"),r=t.pathname.split("/")[2];return n&&r?{fileID:r,nodeId:n}:null},d7=async(e,t,n)=>{let r=new URL(`https://api.figma.com/v1/files/${t}/nodes`);r.searchParams.set("ids",n);let i={};e.oauth?i.Authorization=`Bearer ${e.access_token}`:i["X-FIGMA-TOKEN"]=e.access_token;let s=await fetch(r,{headers:i});if(!s.ok)throw new Error("FigmaREST: Failed to get Figma node data");let o=await s.json();if(!o||typeof o!="object"||!("nodes"in o))throw new Error("FigmaRest: Invalid Figma node data");return o.nodes[n]};function vA(e,t){let n=t.types,r=[];return n.includes(e.type)&&r.push(e),"children"in e&&r.push(...e.children.flatMap(i=>vA(i,t))),r}function p7(e){let t=[],n={};try{n=e.componentPropertyDefinitions??{}}catch(c){console.error("Invalid Component Property Definitions",c)}let r=e.type==="COMPONENT_SET"?e.children:[e],i=new Map,s=[],o=Object.keys(n),a=m7(o);for(let c of r){let u=vA(c,{types:["INSTANCE","TEXT"]});for(let l of u){s.push(l);let d=l.componentPropertyReferences;d&&d.visible&&(d.characters&&i.set(d.characters,a(d.visible)),d.mainComponent&&i.set(d.mainComponent,a(d.visible)))}}for(let c of o){let u=n[c];switch(u.type){case"TEXT":{t.push({id:c,name:a(c),value:u.defaultValue,type:"string",baseType:"text",isDefault:!0,ref:i.get(c)});break}case"BOOLEAN":{t.push({id:c,name:a(c),value:!!u.defaultValue,baseType:"boolean",isDefault:!0,type:"boolean"});break}case"VARIANT":{t.push({id:c,name:a(c),value:u.defaultValue,type:u.variantOptions?.map(l=>`'${l}'`).join(" | ")??"string",baseType:"variant",variantOptions:u.variantOptions??[],isDefault:!0,ref:i.get(c)});break}case"INSTANCE_SWAP":{t.push({id:c,name:a(c),value:String(u.defaultValue),type:"React.ReactNode",baseType:"slot",isDefault:!0,ref:i.get(c)});break}}}return{inputs:t,nameMap:a}}async function f7(e,t){let{inputs:n,nameMap:r}=p7(t);return{name:t.name,jsx:await(t.type==="COMPONENT_SET"?Q_(t.children[0],r,0,0):Q_(t,r,0,0)),inputs:n,key:t.key,description:t.description,documentationLinks:[],instanceId:e.includes(":")?e:t.id,documentName:"",tree:""}}var CA=/[^\x00-\x7F]/g;function EA(e){return typeof e=="string"?e.replace(/#\d+:\d+$/,"").replace(CA,"").trim():""}function m7(e){let t=new Map,n=new Map;return e.forEach(r=>{let i=EA(r);n.has(i)?(t.has(r)&&(t.set(n.get(i),n.get(i)),t.delete(i)),t.set(r,r)):(t.set(r,i),n.set(i,r))}),r=>{let i=t.get(r)??EA(r);if(!i)throw new Error("No value for key "+r);return i}}var Q_=async(e,t,n,r,i=-1)=>{let s="  ".repeat(Math.max(i+1,0)),o="",a=e.type,c=a==="GROUP"||a==="FRAME"||i<0&&"children"in e,u="",l=i>=0;if(l){let d="";if(e.type==="INSTANCE"){if(e.componentPropertyReferences&&e.componentPropertyReferences.mainComponent)return o+=`${s}{figma["${t(e.componentPropertyReferences.mainComponent)}"]}
+`,w=`src/mappings/${`${Ci(f.name)}.mapper.tsx`}`,I=await qo({message:`Where do you want to save the new mappings? ${(0,be.dim)("(Ctrl+C to exit)")}`,defaultValue:w,placeholder:w,initialValue:w,validate(x){if(!x.endsWith(".mapper.tsx"))return`Please enter path ending with ${(0,be.bold)(".mapper.tsx")}`;if((0,nd.isAbsolute)(x))return"Please enter a relative path, not absolute"}});an(I)&&(Pe("Mapping not saved, goodbye!"),process.exit(1)),V_.default.mkdirSync((0,nd.dirname)(I),{recursive:!0}),V_.default.writeFileSync(I,await Ha(T)),g.isRegistered||(a=Tt(),a.start("Registering builder component in registry"),await c.registerComponent({cmpId:g.id}),a.stop(`Component <${g.name}> registered`)),cn((0,be.bgGreen)((0,be.bold)((0,be.white)(" Done! \u{1F389} ")))+` ${(0,be.dim)(I)} saved correctly!`),td.track("figma add success",{spaceId:s,mappingPath:I})},l7=e=>{let t=new URL(e);if(!e.startsWith("https://www.figma.com/design/"))return null;let n=t.searchParams.get("node-id")?.replaceAll("-",":"),r=t.pathname.split("/")[2];return n&&r?{fileID:r,nodeId:n}:null},d7=async(e,t,n)=>{let r=new URL(`https://api.figma.com/v1/files/${t}/nodes`);r.searchParams.set("ids",n);let i={};e.oauth?i.Authorization=`Bearer ${e.access_token}`:i["X-FIGMA-TOKEN"]=e.access_token;let s=await fetch(r,{headers:i});if(!s.ok)throw new Error("FigmaREST: Failed to get Figma node data");let o=await s.json();if(!o||typeof o!="object"||!("nodes"in o))throw new Error("FigmaRest: Invalid Figma node data");return o.nodes[n]};function vA(e,t){let n=t.types,r=[];return n.includes(e.type)&&r.push(e),"children"in e&&r.push(...e.children.flatMap(i=>vA(i,t))),r}function p7(e){let t=[],n={};try{n=e.componentPropertyDefinitions??{}}catch(c){console.error("Invalid Component Property Definitions",c)}let r=e.type==="COMPONENT_SET"?e.children:[e],i=new Map,s=[],o=Object.keys(n),a=m7(o);for(let c of r){let u=vA(c,{types:["INSTANCE","TEXT"]});for(let l of u){s.push(l);let d=l.componentPropertyReferences;d&&d.visible&&(d.characters&&i.set(d.characters,a(d.visible)),d.mainComponent&&i.set(d.mainComponent,a(d.visible)))}}for(let c of o){let u=n[c];switch(u.type){case"TEXT":{t.push({id:c,name:a(c),value:u.defaultValue,type:"string",baseType:"text",isDefault:!0,ref:i.get(c)});break}case"BOOLEAN":{t.push({id:c,name:a(c),value:!!u.defaultValue,baseType:"boolean",isDefault:!0,type:"boolean"});break}case"VARIANT":{t.push({id:c,name:a(c),value:u.defaultValue,type:u.variantOptions?.map(l=>`'${l}'`).join(" | ")??"string",baseType:"variant",variantOptions:u.variantOptions??[],isDefault:!0,ref:i.get(c)});break}case"INSTANCE_SWAP":{t.push({id:c,name:a(c),value:String(u.defaultValue),type:"React.ReactNode",baseType:"slot",isDefault:!0,ref:i.get(c)});break}}}return{inputs:t,nameMap:a}}async function f7(e,t){let{inputs:n,nameMap:r}=p7(t);return{name:t.name,jsx:await(t.type==="COMPONENT_SET"?Q_(t.children[0],r,0,0):Q_(t,r,0,0)),inputs:n,key:t.key,description:t.description,documentationLinks:[],instanceId:e.includes(":")?e:t.id,documentName:"",tree:""}}var CA=/[^\x00-\x7F]/g;function EA(e){return typeof e=="string"?e.replace(/#\d+:\d+$/,"").replace(CA,"").trim():""}function m7(e){let t=new Map,n=new Map;return e.forEach(r=>{let i=EA(r);n.has(i)?(t.has(r)&&(t.set(n.get(i),n.get(i)),t.delete(i)),t.set(r,r)):(t.set(r,i),n.set(i,r))}),r=>{let i=t.get(r)??EA(r);if(!i)throw new Error("No value for key "+r);return i}}var Q_=async(e,t,n,r,i=-1)=>{let s="  ".repeat(Math.max(i+1,0)),o="",a=e.type,c=a==="GROUP"||a==="FRAME"||i<0&&"children"in e,u="",l=i>=0;if(l){let d="";if(e.type==="INSTANCE"){if(e.componentPropertyReferences&&e.componentPropertyReferences.mainComponent)return o+=`${s}{figma["${t(e.componentPropertyReferences.mainComponent)}"]}
 `,o;u=e.type}u===""&&(u=e.type),(e.type!=="TEXT"||!e.autoRename)&&(d+=` name="${e.name}"`),e.componentPropertyReferences&&e.componentPropertyReferences.visible&&(d+=` visible={figma["${t(e.componentPropertyReferences.visible)}"]}`),o+=`${s}<${u}${d}`}if(e.type==="TEXT")l&&(o+=`>
 `),e.componentPropertyReferences&&e.componentPropertyReferences.characters?o+=`${s}  {figma["${t(e.componentPropertyReferences.characters)}"]}
 `:o+=`${s}  ${e.characters}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/dev-tools",
-  "version": "1.1.0-rc1",
+  "version": "1.1.0-rc2",
   "description": "Builder.io Visual CMS Devtools",
   "type": "module",
   "main": "./core/index.cjs",