FR: Generate Typescript Typings from Manifest

[jantimon]

The manifest knows the fields of a component however without typings this information are lost and we don't get intellisense and type checking for our components.

In the following video you can see the src/components/Styleguide-FieldUsage-ItemLink from the Sitecore/jss react boilerplate with and without typings:

Describe the solution you'd like

I hacked a very very basic proof of concept into `scripts/disconnected-mode-proxy.js` to transform the manifest into a generated source file `src/temp/ComponentProps.ts`.

Click here to expand the code

// Generate type definitions (proof of concept)
const manifestManager = new ManifestManager({appName: proxyOptions.appName,
  rootPath: proxyOptions.appRoot,
  watchOnlySourceFiles: proxyOptions.watchPaths,
  requireArg: proxyOptions.requireArg
})
const manifest = manifestManager.getManifest(proxyOptions.language);
manifest.then(updateComponentDefinitions);

function updateComponentDefinitions(manifest) {
  
  function getFields(manifest, name, type = 'name') {
    const template = manifest.templates.find((template) => template[type] === name) || {};
    const fields = [];
    const inherits = template.inherits || [];
    inherits.forEach((parentId) => {
      fields.push(...getFields(manifest, parentId, 'id'))
    });
    fields.push(...(template.fields || []));
    return fields;
  }

  const fieldTypes = {
    "Single-Line Text": "string",
    "Multi-Line Text": "string",
    "Rich Text": "string",
    "Treelist": "string",
    "Droptree": "string",
    "General Link": "LinkFieldValue",
    "Image": "ImageFieldValue",
    "File": "string",
    "Number": "number",
    "Checkbox": "string",
    "Date": "string",
    "Datetime": "string"
  }

  const props = `import { ImageFieldValue, LinkFieldValue } from "@sitecore-jss/sitecore-jss-manifest/types/generator/manifest.types";
import { ComponentRendering, PlaceholdersData } from "@sitecore-jss/sitecore-jss/types/dataModels";
` + 
  manifest.templates.map((template) => {
    const exposedPlaceholders = (manifest.renderings.find((placeholder) => placeholder.name === template.name) || {}).exposedPlaceholders || [];
    const fields = getFields(manifest, template.name);
    return (
`export type ${template.name.replace(/[-_ ]/g, '')}Props = {
  fields: {${fields.map(field => (`
    ${field.name}: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: ${fieldTypes[field.type]};
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },`)).join('')}         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {${fields.map(field => (`
      ${field.name}: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: ${fieldTypes[field.type]};
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },`)).join('')}
    },
    ${exposedPlaceholders.length === 0 ? '' : `placeholders: PlaceholdersData,`}
  }
}`)}).join('\n\n');

  fs.writeFileSync(path.resolve(__dirname, '../src/temp/ComponentProps.ts'), props);
}

The generated definition which is used for the video above looks like this

Click here to expand the code

import { ImageFieldValue, LinkFieldValue } from "@sitecore-jss/sitecore-jss-manifest/types/generator/manifest.types";
import { ComponentRendering, PlaceholdersData } from "@sitecore-jss/sitecore-jss/types/dataModels";
export type ExampleCustomRouteTypeProps = {
  fields: {
    /** SiteCore Single-Line Text Field */
    headline: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Single-Line Text Field */
    author: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Rich Text Field */
    content: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {
      headline: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      author: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      content: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
    },
    
  }
}

export type AppRouteProps = {
  fields: {
    /** SiteCore Single-Line Text Field */
    pageTitle: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {
      pageTitle: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
    },
    
  }
}

export type StyleguideContentListItemTemplateProps = {
  fields: {
    /** SiteCore Single-Line Text Field */
    textField: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {
      textField: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
    },
    
  }
}

export type StyleguideExplanatoryComponentProps = {
  fields: {
    /** SiteCore Single-Line Text Field */
    heading: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Rich Text Field */
    description: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {
      heading: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      description: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
    },
    
  }
}

export type StyleguideItemLinkItemTemplateProps = {
  fields: {
    /** SiteCore Single-Line Text Field */
    textField: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {
      textField: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
    },
    
  }
}

export type ContentBlockProps = {
  fields: {
    /** SiteCore Single-Line Text Field */
    heading: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Rich Text Field */
    content: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {
      heading: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      content: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
    },
    
  }
}

export type GraphQLConnectedDemoProps = {
  fields: {
    /** SiteCore Single-Line Text Field */
    sample1: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore General Link Field */
    sample2: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: LinkFieldValue;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {
      sample1: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      sample2: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: LinkFieldValue;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
    },
    
  }
}

export type StyleguideComponentParamsProps = {
  fields: {
    /** SiteCore Single-Line Text Field */
    heading: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Rich Text Field */
    description: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {
      heading: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      description: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
    },
    
  }
}

export type StyleguideFieldUsageCheckboxProps = {
  fields: {
    /** SiteCore Single-Line Text Field */
    heading: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Rich Text Field */
    description: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Checkbox Field */
    checkbox: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Checkbox Field */
    checkbox2: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {
      heading: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      description: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      checkbox: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      checkbox2: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
    },
    
  }
}

export type StyleguideFieldUsageContentListProps = {
  fields: {
    /** SiteCore Single-Line Text Field */
    heading: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Rich Text Field */
    description: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Treelist Field */
    sharedContentList: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Treelist Field */
    localContentList: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {
      heading: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      description: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      sharedContentList: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      localContentList: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
    },
    
  }
}

export type StyleguideFieldUsageCustomProps = {
  fields: {
    /** SiteCore Single-Line Text Field */
    heading: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Rich Text Field */
    description: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Integer Field */
    customIntField: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: undefined;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {
      heading: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      description: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      customIntField: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: undefined;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
    },
    
  }
}

export type StyleguideFieldUsageDateProps = {
  fields: {
    /** SiteCore Single-Line Text Field */
    heading: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Rich Text Field */
    description: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Date Field */
    date: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Datetime Field */
    dateTime: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {
      heading: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      description: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      date: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      dateTime: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
    },
    
  }
}

export type StyleguideFieldUsageFileProps = {
  fields: {
    /** SiteCore Single-Line Text Field */
    heading: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Rich Text Field */
    description: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore File Field */
    file: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {
      heading: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      description: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      file: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
    },
    
  }
}

export type StyleguideFieldUsageImageProps = {
  fields: {
    /** SiteCore Single-Line Text Field */
    heading: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Rich Text Field */
    description: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Image Field */
    sample1: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: ImageFieldValue;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Image Field */
    sample2: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: ImageFieldValue;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {
      heading: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      description: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      sample1: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: ImageFieldValue;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      sample2: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: ImageFieldValue;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
    },
    
  }
}

export type StyleguideFieldUsageItemLinkProps = {
  fields: {
    /** SiteCore Single-Line Text Field */
    heading: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Rich Text Field */
    description: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Droptree Field */
    sharedItemLink: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Droptree Field */
    localItemLink: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {
      heading: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      description: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      sharedItemLink: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      localItemLink: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
    },
    
  }
}

export type StyleguideFieldUsageLinkProps = {
  fields: {
    /** SiteCore Single-Line Text Field */
    heading: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Rich Text Field */
    description: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore General Link Field */
    externalLink: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: LinkFieldValue;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore General Link Field */
    internalLink: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: LinkFieldValue;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore General Link Field */
    emailLink: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: LinkFieldValue;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore General Link Field */
    paramsLink: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: LinkFieldValue;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {
      heading: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      description: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      externalLink: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: LinkFieldValue;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      internalLink: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: LinkFieldValue;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      emailLink: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: LinkFieldValue;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      paramsLink: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: LinkFieldValue;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
    },
    
  }
}

export type StyleguideFieldUsageNumberProps = {
  fields: {
    /** SiteCore Single-Line Text Field */
    heading: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Rich Text Field */
    description: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Number Field */
    sample: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: number;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {
      heading: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      description: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      sample: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: number;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
    },
    
  }
}

export type StyleguideFieldUsageRichTextProps = {
  fields: {
    /** SiteCore Single-Line Text Field */
    heading: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Rich Text Field */
    description: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Rich Text Field */
    sample: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Rich Text Field */
    sample2: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {
      heading: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      description: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      sample: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      sample2: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
    },
    
  }
}

export type StyleguideFieldUsageTextProps = {
  fields: {
    /** SiteCore Single-Line Text Field */
    heading: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Rich Text Field */
    description: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Single-Line Text Field */
    sample: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Single-Line Text Field */
    sample2: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {
      heading: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      description: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      sample: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      sample2: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
    },
    
  }
}

export type StyleguideLayoutReuseProps = {
  fields: {
    /** SiteCore Single-Line Text Field */
    heading: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Rich Text Field */
    description: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {
      heading: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      description: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
    },
    placeholders: PlaceholdersData,
  }
}

export type StyleguideLayoutTabsTabProps = {
  fields: {
    /** SiteCore Single-Line Text Field */
    title: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Rich Text Field */
    content: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {
      title: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      content: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
    },
    
  }
}

export type StyleguideLayoutTabsProps = {
  fields: {
    /** SiteCore Single-Line Text Field */
    heading: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Rich Text Field */
    description: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {
      heading: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      description: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
    },
    placeholders: PlaceholdersData,
  }
}

export type StyleguideMultilingualProps = {
  fields: {
    /** SiteCore Single-Line Text Field */
    heading: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Rich Text Field */
    description: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Single-Line Text Field */
    sample: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {
      heading: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      description: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      sample: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
    },
    
  }
}

export type StyleguideRouteFieldsProps = {
  fields: {
    /** SiteCore Single-Line Text Field */
    heading: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Rich Text Field */
    description: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {
      heading: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      description: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
    },
    
  }
}

export type StyleguideSectionProps = {
  fields: {
    /** SiteCore Single-Line Text Field */
    heading: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {
      heading: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
    },
    placeholders: PlaceholdersData,
  }
}

export type StyleguideSitecoreContextProps = {
  fields: {
    /** SiteCore Single-Line Text Field */
    heading: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },
    /** SiteCore Rich Text Field */
    description: {
      /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
      value?: string;
      /** 
       * When EE is active, editable will contain all of the additional markup that EE emits for a field.
       * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
       */
      editable?: string;
    },         
  },
  params: {},
  rendering: ComponentRendering & {
    fields: {
      heading: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
      description: {
        /** The value property of a field object contains the "raw", unrendered value of a field stored in Sitecore. */
        value?: string;
        /** 
         * When EE is active, editable will contain all of the additional markup that EE emits for a field.
         * When EE is not active, editable will contain the rendered field value - which may differ from the "raw" field value for certain field types (e.g. Image, Rich Text, Link) or if the renderField pipeline has been extended / customized.
         */
        editable?: string;
      },
    },
    
  }
}

Unfortunately the manifest does not include information about the params.
It would be cool if you could provide a helper to generate not only the json for the sidecore-import.json but also the typings including the params.

This would help new developers to get into JSS more easily because of intellisense and type checking.

[kamsar]

This seems like a nice feature, but probably not one we'd bake in at least initially. While I'm a big fan of Typescript + React, the sample app is using ES6 for the simple reason that more people are using that compared to TS.

Upon general release, the JSS JavaScript will be open source (Apache 2.0), including the manifesting pieces. You're more than welcome to build such a helper, and release your own JSS + React + TS sample app if you want to. :)

[jantimon]

Oh wow I didn't know about that!
Is there already a rough timeline for the general release?

Regarding the typings:
I understand that generate typings might not be that relevant for the react boilerplate.
However generate type definitions out of the manifest might also be interesting for Angular and VueJs no only React.
Also I guess that would be rather a tool of @sitecore-jss/sitecore-jss-dev-tools than for the jss examples.

If you don't want to provide that feature for now could you maybe add params to the manifest.templates items?

[kamsar]

By params you're referring to rendering parameters, right? The manifest doesn't contain that for a template since from a Sitecore perspective they are on the rendering, not the template. But it should be possible to lookup the rendering and get the params there.

[jantimon]

Yes exactly - addComponent requires ComponentDefinition arguments:

addComponent: (...components: ComponentDefinition[]) => void;

ComponentDefinition includes

export interface ComponentDefinition {
    name?: string;
    displayName?: string;
    /**
     * The data fields that provide content data to the component
     */
    fields?: FieldDefinition[];
    /**
     * The names of JSS placeholders that this component exposes
     * (keys of any placeholder components added to this component's JS view)
     */
    placeholders?: PlaceholderDefinition[] | string[];
    /**
     * Defines non-content parameters.
     * Parameters are more developer-focused options than fields, such as configurable CSS classes.
     */
    params?: string[] | RenderingParameterDefinition[];
    // ....
}

So all components are able to define params.

Unfortunately the only public method of the ManifestManager to access those values is getManifest which is tightly coupled to the required sitecore import json file structure.

So although I defined all my values with addComponent it is almost impossible to get those values back from the ManifestManager.

There are probably a lot of different solutions:

• you could add the params information to the templates array of the manifest object (although sitecore would just ignore them)
• you could add components to the manifest object (although sitecore would just ignore them)
• you could extend the ManifestManager to provide a function getComponentDefinitions and provide the same information to setManifestUpdatedCallback or add setComponentDefinitionsCallback.

[kamsar]

Correct, the interface used by disconnected mode is the generated manifest, not the object the manifest json is generated from.

This has its advantages and disadvantages, to be sure. Have you considered finding the params by looking at the renderings in the manifest (json)?

[jantimon]

Hey @kamsar

while this would probably possible it would cause very hard to understandable and maintainable code in every project that follows such an approach because the developer has to have a very deep understanding of the manifest structure and I am not sure if it will work if a property isn't used in any rendering.

The Manifest is a full transpiler which transpiles definitions into the sidecore-import.json structure. Usually transpilers are split into three parts: parsing, modification and writing.

So if you could maybe split that a little bit so that it would be possible to access the full parsed values (ComponentDefinition, TemplateDefinition, PlaceholderDefinition, RouteDefinition and ItemDefinition) it would be very easy to add modification adapters which would generate the sidecore-import.json or the typescript definitions.

This pattern could also allow to reuse one file watcher of the ManifestManager instead of having multiple ManifestManagers running at the same time.
Furthermore it could be possible to have a writing part which would gather and write all changes at once to the disc so that there won't be multiple webpack recompilations for a single manifest change.

[stale]

This has been automatically marked as stale because it has not had recent activity. It will be closed if there is no further activity within 30 days. You may add comments or the 'keep' label to prevent it from closing. Thank you for your contributions.