import prettier from "prettier" ; import { ComponentEmitInfo , EmitResult , Formatter } from "../types" ; import { printExpression , upperCaseFirstLetter , resolveComponentImportPath } from "../utils" ; import { createPropertyControlObjectExpression } from "./conversion" ; function formatComponentName ( comp ) { return upperCaseFirstLetter ( comp . name ) ; } /** Emits the code for a framer component */ function generate ( packageName , comp , additionalImports ) { const propertyControls = printExpression ( createPropertyControlObjectExpression ( comp ) ) ; const componentName = formatComponentName ( comp ) ; return `
    import * as React from "react"
    import * as System from "${ packageName }"
    import { ControlType, PropertyControls, addPropertyControls } from "framer"
    import { withHOC } from "./withHOC"
    ${ additionalImports . join ( "\n" ) }

    const Inner${ componentName } = props => {
      return <System.${ componentName } {...props}></System.${ componentName }>
    }

    export const ${ componentName } = withHOC(Inner${ componentName });

    ${ componentName }.defaultProps = {
      width: 150,
      height: 50,
    }

    addPropertyControls(${ componentName },${ propertyControls })
    ` ; } function generateHOC ( ) { return `
    import * as React from "react"

    export function withHOC(Component): React.SFC {
        return (props: any) => {
          return (
              <Component {...props} />
          );
        };
      }

    ` ; } export type EmitOptions = { formatter : Formatter ; packageName : string ; outDir : string ; components : ComponentEmitInfo [ ] ; additionalImports : string [ ] ; } ; export function emitComponents ( { formatter , packageName , outDir , components , additionalImports , } ) { const importPath = resolveComponentImportPath ( packageName , outDir ) ; const emitResults = components . filter ( comp => comp . emit ) . map ( comp => { return { type : "component" , emitPath : comp . emitPath , outputSource : formatter ( generate ( importPath , comp , additionalImports ) ) , } ; } ) ; return [ ... emitResults , { type : "hoc" , fileName : "withHOC.tsx" , outputSource : formatter ( generateHOC ( ) ) , } , ] ; }