question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

FR: Generate Typescript Typings from Manifest

See original GitHub issue

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:

manifesttotypes

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.

typings

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
kamsarcommented, Nov 15, 2018

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. 😃

0reactions
stale[bot]commented, May 3, 2022

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

TypeScript type declarations for "package.json" manifest file?
The type definitions used there seem correct. After installing the package, you can use it like this: import { promises as fs }...
Read more >
Generate TypeScript typings · Issue #1030 · shaka ... - GitHub
Hello! I would like to use shaka with a typescript project, but there are no typings. I have tried to generate d.ts using...
Read more >
Typings for TypeScript | The Art of Coding
If you have the typings dependency downloaded through NPM and you have the typings.json file, you're ready to run the typings install script....
Read more >
can one use Typescript code in Chrome Manfest V3 Extensions
Create a new js file (e.g. background.js) in this directory, open it for editing, and start typing something like chrome.action. You should see...
Read more >
Developing React components in Typescript with Sitecore JSS ...
Interesting stuff to investigate in this context: FR: Generate Typescript Typings from Manifest · Discuss on Twitter • Edit on GitHub · Serge ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found