Giter Site home page Giter Site logo

sitecore / jss Goto Github PK

View Code? Open in Web Editor NEW
259.0 33.0 270.0 257.98 MB

Software development kit for JavaScript developers building web applications with Sitecore Experience Platform

Home Page: https://jss.sitecore.com

License: Apache License 2.0

JavaScript 8.15% HTML 1.18% TypeScript 84.93% Vue 2.41% CSS 0.05% Starlark 0.05% Java 0.07% Ruby 0.08% Objective-C 0.11% SCSS 2.95%
javascript react ssr sitecore graphql vue angular headless-cms sitecore-jss nextjs

jss's Introduction

Sitecore JavaScript Rendering SDK (JSS)

Build Status PRs Welcome

This repository contains source code for all Sitecore JSS packages and templates to help you get started using Sitecore JSS.

Getting started with JSS

To develop a JSS application, you need:

  • An operating system supported by Node (Mac, Windows, Linux).
  • Node. We recommend using the latest long-term support (LTS) release.

To run a JSS application in production or develop using Sitecore data you need to connect your application to a Sitecore instance with the Headless Services module installed (requires a Sitecore Headless Services license). Sitecore requires Windows, but the Sitecore instance does not need to be local. You can use a Sitecore instance installed in a virtual machine or on a remote server.

Identify the JSS version for your Sitecore version

JSS versions are coupled with Sitecore versions. The current JSS release is compatible with the latest version of Sitecore.

If you use an older version of Sitecore, before creating a JSS project, you need to determine which JSS version is compatible with your version of Sitecore XP.

To identify the correct JSS version for your Sitecore XP version:

Getting started with the latest version of JSS

To create a JSS project:

  1. In a terminal, run one of the following commands and follow the prompts:

    npm init sitecore-jss
    

    or

    npx create-sitecore-jss
    
  2. Change directory to your application folder:

    cd my-first-jss-app
    
  3. Start the development server:

    jss start
    

Working with older versions

If you need to use an older version of JSS, you must install the JSS CLI version 19.x or older.

To create a JSS project for an older version of JSS and Sitecore:

  1. Identify the correct JSS version for your Sitecore XP version.

  2. Run the JSS CLI installation command:

    npm i @sitecore-jss/sitecore-jss-cli@<version>
    

    Replace <version> with your desired version. For example, npm i @sitecore-jss/[email protected].

  3. In a terminal, create your JSS project by running the following command:

    jss create my-jss-app react --branch release/13.0.0
    

    The command uses the --branch option and you need to provide the name of a branch in the JSS repository. You can use a release branch or any other branch from the repository.

  4. Change directory to your application folder:

    cd my-first-jss-app
    
  5. Start the development server:

    jss start
    

Documentation and community resources

Contributions

We are very grateful to the community for contributing bug fixes and improvements. We welcome all efforts to evolve and improve the Sitecore JavaScript Rendering SDK; read below to learn how to participate in those efforts.

Sitecore has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.

Read our contributing guide to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes to React.

License

Sitecore JavaScript Services is using the Apache 2.0 license.

jss's People

Contributors

alan-null avatar alexshyba avatar ambrauer avatar anastasiya29 avatar ancaemcken avatar antonkechashin avatar apathania22 avatar art-alexeyenko avatar aweber1 avatar cobypear avatar coreyasmith avatar davetayls avatar erwinsmit avatar illiakovalenko avatar jlast avatar kamsar avatar kbauer-hhog avatar maslade avatar matkovskyi avatar nickwesselman avatar olegjytnik avatar pzi avatar sc-addypathania avatar sc-antonkulagin avatar sc-dawidrutkowski avatar sc-illiakovalenko avatar sc-nikolaoslazaridis avatar stanislavstativa avatar vsirakova avatar yavorsk avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jss's Issues

FR: Allow to use ContentSecurityPolicy without 'unsafe-inline'

Hey

this proposal is a little bit ambitious but it comes with a lot of advantages.

Summary

Right now the jss boilerplate uses a script tag (<script>__JSS_STATE__=...</script>) to communicate between backend and frontend.

I would propose to change this a little bit to the following structure:

<script data-name="JSS_STATE" type="text/json">
{...}
</script>

This technique is described in different blog articles - this one is quite nice to read:
https://quipblog.com/efficiently-loading-inlined-json-data-911960b0ac0a

Disadvantages

Advantages

  • Faster state generation. According to serialize-javascript json serialization is 3 times faster on the node js side

  • According to https://quipblog.com even faster in frontend - (however I am not sure if this is still true)
    image

  • Removes one security vector as the <script type="text/json"> is not able to execute javascript (the script tag is ignored)

  • Adds the ability for additional security hardening by using the CSP without 'unsafe-inline'.

  • Adds more flexibility as it would allow to have multiple react widgets on one page (E.g. one for a complex navigation and one for the body)

How would that work on the frontend side?

Lets assume that the backend would generate the following markup

<script data-name="JSS_STATE" type="text/json">
{...}
</script>
<div data-name="jss-root" data-app="Navigation">server side rendered markup</div>

The frontend code could be for the Navigation (maybe that part could also be reusable):

const jssRoots = document.querySelectorAll('[data-name="jss-root"][data-app="Navigation"]');
for (let i = 0; i < jssRoots.length; ++i) {
  const jssRoot = jssRoots[i];
  const jssConfigScript = jssRoot.previousElementSibling;
  const jssInitialState = JSON.parse(jssConfigScript.innerHTML);
  // Hydrate the app e.g. with react:
  ReactDOM.hydrate(React.createElement(Navigation, jssInitialState), jssRoot);
}

Angular Issue | ss create my-first-jss-app angular

When running angular template, generation executes just fine, once jss start, it breaks.

** Angular Live Development Server is listening on localhost:3001, open your browser on http://localhost:3001/ **
10% building modules 3/3 modules 0 active[HPM] Proxy created: [ '/data', '/sitecore' ] -> http://localhost:3043
Watching for changes to component factory sources in src/app/components...
Enabling TypeScript transpilation for the manifest...
path or pattern './sitecore/pipelines/**/*.patch.js' did not match any files.
copied media from: ./data/media/img/sc_logo.png to: sitecore/manifest/data/media/img/sc_logo.png
copied media from: ./data/media/img/jss_logo.png to: sitecore/manifest/data/media/img/jss_logo.png
copied media from: ./data/media/files/jss.pdf to: sitecore/manifest/data/media/files/jss.pdf
Manifest has been generated and written to ./sitecore/manifest/sitecore-import.json
๐Ÿ”Œ Disconnected Layout Service initializing...โณ
Manifest manager is watching for manifest source file changes...
JSS Disconnected-mode Proxy is listening on port 3043.

Date: 2018-09-19T21:42:28.275Z
Hash: 2ae07028cb9e9069b8b4
Time: 5501ms
chunk {main} main.js, main.js.map (main) 1.93 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 682 bytes [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 148 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 325 kB [initial] [rendered]

ERROR in node_modules/apollo-angular/types.d.ts(10,58): error TS2304: Cannot find name 'Exclude'.

โ„น ๏ฝขwdm๏ฝฃ: Failed to compile.

Insert Option missing on component folder after first deploy

Description

If I create a new component and deploy the app, it creates a components folder: sitecore/content/<site>/Content/<ComponentName>. This folder is missing insert option for that component template. The second time I deploy the app, insert option is added correct.

Expected behavior

Should add the options at first deployment.

Steps To Reproduce

  1. Scaffold new component
  2. Run jss deploy app
  3. Check insert options on component folder (only has folder)
  4. Run deploy again
  5. Insert options are correct

Your Environment

  • Sitecore Version: 9.0.2
  • JSS Version: TP 4

Screenshots

After first deploy
after-first-deploy

After second deploy
after-second-deploy

xGraph Browser Grabs Invalid API Key

It seems that when you open the xGraph Browser, it grabs the first child under /sitecore/system/Settings/Services/API Keys to use as the API key. In my case, I've got my API keys organized in folders under this path, so it's grabbing the ID of a folder, not an API key. I'd expect it to search for a descendant of /sitecore/system/Settings/Services/API Keys that inherits from the API Key template ({A6868D65-D612-401F-A40A-CD5BA0857B81}).

FR: add case sensitivity to manifest check for field definition presence

Related to the user error in #48. Would be fantastic to have jss manifest fail if the field name (for ex: itemLink) doesn't match name in field definition (for ex: itemlink) the same as it currently righteously fails when adding a field that doesn't exist on the component/template:

Error generating manifest home-jss-main-ContentBlock-1 route datasource defined data for 'logo' on component ContentBlock. This field is not defined on this component. It may be a typo, or the field may need to be added to the component definition.

This will help catch the user errors during manifest gen and therefore before import process starts.

FR: Generate Typescript Typings from Manifest

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

Nested component definitions via Item Link returns only IDs

I'm not entirely sure if this is a bug or if this is as expected, but it seems like when I try to link objects beyond a certain level, only the IDs are returned.

In my case, I'm trying to link the following:
Hero -> Card -> Stats

Hero is connected to the Card component via type: CommonFieldTypes.ItemLink,
Card is connected to Stats via type: CommonFieldTypes.ContentList,
and Stats are just objects with text fields.

Using this set up, I get the following returned in the api:

image

If I take the card definition out of the equation and link Hero directly with stats via type: CommonFieldTypes.ContentList, I get what I would expect:
image

Note I left card in there so we can see the difference.

Is there a limitation to using ItemLink, or is it a mistake on my end? Note that this is in disconnected mode. Here is a gist of some of the relevant code: https://gist.github.com/sowhatdoido/c1115c7adc5cc9efc0c7c1ee6b586a97

FR: ability to specify item template definitions for ContentList fields "inline"

Currently the linkage between ContentList field and referenced items is established via a naming convention, which is user error prone. It would be great to have a way of specifying item template for the ContentList field "inline", for example:

manifest.addComponent({
    name: 'Pricing',
    fields: [
      {
        name: 'items',
        displayName: 'Items',
        type: CommonFieldTypes.ContentList,
		itemTemplate: {
			name: 'Pricing-items-Item',
			icons: SitecoreIcon.InvoiceDollar,
			fields: [
			  {
				name: 'status',
				displayName: 'Status',
				type: CommonFieldTypes.SingleLineText
			  },
			  {
				name: 'active',
				displayName: 'Actice',
				type: CommonFieldTypes.Checkbox
			  },
			  {
				name: 'title',
				displayName: 'Title',
				type: CommonFieldTypes.SingleLineText
			  },
			  {
				name: 'price',
				displayName: 'Price',
				type: CommonFieldTypes.SingleLineText
			  },
			  {
				name: 'link',
				displayName: 'Link',
				type: CommonFieldTypes.GeneralLink
			  }
			]
		  };
      }
    ]
  });

Custom manifest globs not registered by ManifestManager

  • Tech preview 4
  • Disconnected mode
  • React sample

I am creating a codebase to drive a Sitecore multi-tenancy instance using a combination of shared and bespoke components for each tenant. When I try to use custom locations for my manifest files that do not conform to the pattern ['./sitecore/definitions/**/*.sitecore.js', './sitecore/definitions/**/*.sitecore.ts'] they are not picked up by the ManifestManager.

After investigating the ManifestManager code I've traced the problem down to a line missing from @sitecore-jss/sitecore-jss-dev-tools/dist/disconnected-server/create-default-disconnected-server.js where if I add sourceFiles: options.sourceFiles, to line 25 it is able to register my custom glob configuration:

    var manifestManager = new manifest_manager_1.ManifestManager({
        appName: options.appName,
        rootPath: options.appRoot,
        sourceFiles: options.sourceFiles,
        watchOnlySourceFiles: options.watchPaths,
        requireArg: options.requireArg,
    });

This allows me to add sourceFiles as watchPaths into ./scripts/disconnected-mode-proxy.js as below:

const watchPaths = [
  // custom glob strings.
]

const proxyOptions = {
  appRoot: __dirname,
  appName: config.appName,
  sourceFiles: watchPaths,
  watchPaths,
  language: config.language,
  ...
}

Based on the ManifestManager compiled code it seems as though it has mistakenly been left out.

Is this a defect, or am I supposed to achieve this some other way?

Route items are not imported in a different language

TP4

Scenario:

  1. Create da language under system/languages
  2. add da.yml for the Home route
  3. "Translate" the route in Danish ๐Ÿ˜„
id: home-page
fields:
  pageTitle: danish title
placeholders:
  jss-main:
  - componentName: ContentBlock
    fields:
      heading: danish heading
      content: danish content
  1. Run jss deploy items -c --language da
  2. Result: the component datasource item is created in da while the Home route item is created in English with Danish content.

Item Link treated differently in disconnected and connected modes

I've got a custom component with an ItemLink field:

manifest.addComponent({
  name: "MyComponent",
  icon: SitecoreIcon.DocumentMusic,
  fields: [
    {
      name: "myField",
      type: CommonFieldTypes.ItemLink
    }
  ]
});

I have the following route definition:

id: home-page
placeholders:
  jss-main:
    - componentName: MyComponent
      fields:
        myField:
          - id: some-other-item

When you reference this component in disconnected mode, you have to reference the myField field through an array (which is confusing since an item link shouldn't be represented as an array):

this.props.fields.myField[0].fields.otherField.value

When you deploy this route to Sitecore and run this code, you get an error. Instead you must reference as follows in connected mode:

this.props.fields.myField.fields.otherField.value

The issue is in the route definition. myField should actually be specified as follows:

myField:
  id: some-other-item

However I still expect the disconnected Layout Service to treat this field the same way it'll be treated after an import, even if my YAML is bad.

Global Allowed Origins Required for Connected Mode POST Requests

It may be worth noting in the JSS docs that when working in connected mode, POST requests require that you have http://localhost:3000 added to the global <allowedOrigins /> configuration as follows:

<configuration>
  <sitecore>
    <api>
      <services>
        <configuration>
          <allowedOrigins>
            <origin>http://localhost:3000</origin>
          </allowedOrigins>
        </configuration>
      </services>
    </api>
  </sitecore>
</configuration>

Since CORS won't allow you to send data through headers (e.g., sc_apikey) for the OPTIONS pre-flight check, and you can't pass sc_apikey through the query string the above global exception is required.

Of course this should be patched out in production environments.

Advanced sample react notes

Hi - I'm playing with the advanced-sample-react JSS sample and here are a few notes that I'm curious to hear your thoughts about:

Package updates

It looks like the sample uses outdated packages such as i18n or redux. I've forced them to update to the latest version without any trouble, so I was wondering if there was a specific reason why they aren't set to the latest major version.

Component names

Redux logger shows cryptic undefined/COMPONENT_MOUNTED/UNMOUNTED messages. I've submitted a PR #30 here that should solve this.

Routing with React Router

I'm not a big fan of React Router so I might be wrong here, but it looks like you're hacking the route changes to first fetch the Sitecore data and then manually push the url in app/actions.js. This looks a bit weird to me (again no expert speaking).

I've managed to set up a middleware that listens to react-router-redux location changes, and only then fetches Sitecore data. It looks like this:

// SitecoreContentService.js
import { LOCATION_CHANGE } from 'react-router-redux';
import { changeRoute } from 'app/actions';
import { NOT_FOUND_ROUTE, SERVER_ERROR_ROUTE } from 'app/constants';

const noDataRoutes = [NOT_FOUND_ROUTE, SERVER_ERROR_ROUTE];
export default store => next => action => {
  if (action.type === LOCATION_CHANGE) {
    const pathname = action.payload.pathname;
    if (noDataRoutes.indexOf(pathname) < 0) {
      store.dispatch(changeRoute(pathname));
    }
  } else {
    next(action);
  }
};

I've removed all url pushes in actions.js and the MainNav.js file is also a lot cleaner:

// MainNav.js
import { LinkContainer } from 'react-router-bootstrap'; // <-- new package

// NavItems look like this, no more onClick hack
    <LinkContainer
      key={index}
      to={getRouteUrl(currentLang, navItem.path)}
    >
      <NavItem className="page-scroll">{navItem.name}</NavItem>
    </LinkContainer>
// etc.

package: The Sitecore.JavaScriptServices module requires a subscription license.

This is happening on a working brand new single instance installation trying to deploy the samples-basic-react option.

When I run yarn package it goes all the way to

Sending package sitecore\update-package\JssBasicApp.1513824981603.update to http://xp0.sc/ship/services/package/install/fileupload...

Then fails with the exception below.

The license I have seems to be a normal Sitecore 8 license valid until Sept 2018, is a different type of license required? Rather new to it and unsure how licensing works. Do note everything else seems to work.

[LicenseException: The Sitecore.JavaScriptServices module requires a subscription license.]
   Sitecore.Update.Installer.Items.CustomActionInstaller.Process(IProcessingContext entry, IProcessingContext context) +1374
   Sitecore.Update.Installer.DiffInstaller.ExecutePostInstallationInstructions(String packagePath, String historyPath, InstallMode mode, MetadataView view, ILog installationProcessLogger, List`1&amp; entries) +486
   Sitecore.Ship.Infrastructure.Update.UpdatePackageRunner.Execute(String packagePath, Boolean disableIndexing) +427
   Sitecore.Ship.AspNet.Package.InstallUploadPackageCommand.HandleRequest(HttpContextBase context) +309
   Sitecore.Ship.AspNet.Package.InstallPackageCommand.HandleRequest(HttpContextBase context) +287
   Sitecore.Ship.AspNet.AboutCommand.HandleRequest(HttpContextBase context) +396
   Sitecore.Ship.AspNet.BaseHttpHandler.ProcessRequest(HttpContext context) +276
   System.Web.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +798
   System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean&amp; completedSynchronously) +91

installation.fail.zip

EDIT: Just tried using the update-package wizard and it analyses it fine and in the last step during installation throws the same error, attached the output zip log.

EDIT 2: I guess its answered in the docs at:

Use of the Technical Preview requires a Sitecore license file which has been authorized for Sitecore.Visit, i.e. consumption licensing. Partners may utilize SPN to request a an updated partner license with this permission. Customers should contact their account representative.

I'll close it for now and see if I can get the different license.

Add targetId Field to Link and Reference Fields in GraphQL

The MultilistFieldGraphType has a nice targetIds field you can use to get just the IDs of the selected items in the field; however, for the LookupFieldGraphType and ReferenceFieldGraphType, you have to get the ID through the targetItem. It'd be nice if these two fields exposed a targetId field similar to the MultilistFieldGraphType.

Installing JSS CLI over existing React Project

I took a look at your basic example package.json, and it looks like you have prettier and eslint pre-configured, which might conflict with the rules we've already set up.

I figure I could do it manually by hand picking the packages and files needed to run React + JSS, but I'm not entirely sure the bare minimum that I should import.

What is the simplest and opinionated set up that you can get going with jss-cli? Do you support adding to an existing project, or would we have to generate a new project via the CLI tool and port our code over?

Thanks for your help!

scjss-verify-setup doesn't exist

I'm trying to run the basic example per your documentation, and everything works fine when I use the command jss start.

When I try to run jss start:connected (after running jss setup of course), I get the following error:

 jss start:connected
> yarn start:connected
yarn run v1.5.1
$ scjss-verify-setup && jss clean && node -r babel-register ./build/start.js --env.content=connected
env: node\r: No such file or directory
error An unexpected error occurred: "Command failed.
Exit code: 127
Command: sh
Arguments: -c scjss-verify-setup && jss clean && node -r babel-register ./build/start.js --env.content=connected
Directory: /Applications/XAMPP/xamppfiles/htdocs/my-first-jss-app
Output:
".

I also tried running via NPM with npm run start:connected, and get the following:

npm run start:connected

> [email protected] start:connected /Applications/XAMPP/xamppfiles/htdocs/my-first-jss-app
> scjss-verify-setup && jss clean && node -r babel-register ./build/start.js --env.content=connected

env: node\r: No such file or directory
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] start:connected: `scjss-verify-setup && jss clean && node -r babel-register ./build/start.js --env.content=connected`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] start:connected script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/fratran/.npm/_logs/2018-04-19T15_01_42_319Z-debug.log

It appears that the command scjss-verify-setup is failing. I came to this conclusion by removing the scjss-verify-setup portion of the start:connected script, and the script executes but the resulting window shows:

Page not found

Note that I'm attempting to run connected mode, trying to pull data from a sitecore instance on azure cloud and rendering it locally - not sure if that setup has anything to do with it.

My components re-order randomly if they are more than 10

In localhost, with Vue JS basic sample.

In my homepage, I have 11 components with simple data like : Yo 1, Yo 2, Yo 3,... Yo 11

If I add 10 components, it's fine, but when I add one more, each time I refresh the page, the order changed!
REFRESH 1:
Yo 2, Yo 6, Yo 3, Yo 4, Yo 5, Yo 1, Yo 7, Yo 8, Yo 9, Yo 10, Yo 11

REFRESH 3 (good order):
Yo 1, Yo 2, Yo 3, Yo 4, Yo 5, Yo 6, Yo 7, Yo 8, Yo 9, Yo 10, Yo 11

REFRESH 2:
Yo 6, Yo 1, Yo 3, Yo 4, Yo 5, Yo 2, Yo 7, Yo 8, Yo 9, Yo 10, Yo 11

I tested with different components, the result is the same.
Thanks

FR: The possibility to add inheritance with setDefaultRouteType

Is your feature request related to a problem? Please describe.

I want to have the default route template to inherit from more than just /sitecore/templates/JavaScriptServices/Route

I don't want to change any templates under JavaScriptServices.

Describe the solution you'd like

Make the inherits property work like this:
inherits: [ "{B36BA9FD-0DC0-49C8-BEA2-E55D70E6AF28}" ]

Bad YAML formatting error is not shown in console output

Using TP4, working disconnected.

When running jss start with a badly formatted YAML, the CLI shows the error as expected.
However, when messing up your YAML while the disconnected LS service watch is active, the error isn't thrown and the route comes back as 404, which could cause some head scratching.
[LAYOUT] Layout for route '/my-page' was not defined. Returning 404.

Basic sample with React/GraphQL/Apollo client - failing to run

`Nested Exception

Exception: Sitecore.JavaScriptServices.ViewEngine.NodeServices.HostingModels.NodeInvocationException
Message: 2 errors were thrown when executing your fetchData functions. See the Sitecore logs preceding this error for details.
Error: 2 errors were thrown when executing your fetchData functions. See the Sitecore logs preceding this error for details.
    at C:\inetpub\wwwroot\sc90.local\dist\gh-app\server.bundle.js:1:328251
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
Source: Sitecore.JavaScriptServices.ViewEngine.NodeServices
   at Sitecore.JavaScriptServices.ViewEngine.NodeServices.HostingModels.Http.HttpNodeInstance.<InvokeExportAsync>d__7`1.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Sitecore.JavaScriptServices.ViewEngine.NodeServices.HostingModels.OutOfProcessNodeInstance.<InvokeExportAsync>d__13`1.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Sitecore.JavaScriptServices.ViewEngine.NodeServices.DefaultNodeServices.<InvokeExportWithPossibleRetryAsync>d__10`1.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at Sitecore.JavaScriptServices.ViewEngine.NodeServices.DefaultNodeServices.<InvokeExportWithPossibleRetryAsync>d__10`1.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Sitecore.JavaScriptServices.ViewEngine.Node.Helpers.AsyncHelpers.RunSync[TResult](Func`1 func)
   at Sitecore.JavaScriptServices.ViewEngine.Presentation.JssRenderer.PerformRender(TextWriter writer, IRenderEngine renderEngine, String moduleName, String functionName, Object[] functionArgs)
   at Sitecore.JavaScriptServices.ViewEngine.Presentation.JssRenderer.Render(TextWriter writer)
   at Sitecore.Mvc.Pipelines.Response.RenderRendering.ExecuteRenderer.Render(Renderer renderer, TextWriter writer, RenderRenderingArgs args)
   at Sitecore.Mvc.Pipelines.Response.RenderRendering.ExecuteRenderer.Process(RenderRenderingArgs args)
   at (Object , Object[] )
   at Sitecore.Pipelines.CorePipeline.Run(PipelineArgs args)
   at Sitecore.Pipelines.DefaultCorePipelineManager.Run(String pipelineName, PipelineArgs args, String pipelineDomain)
   at Sitecore.Mvc.Pipelines.PipelineService.RunPipeline[TArgs](String pipelineName, TArgs args)
   at Sitecore.Mvc.Presentation.RenderingView.Render(ViewContext viewContext, TextWriter writer)
   at System.Web.Mvc.ViewResultBase.ExecuteResult(ControllerContext context)
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilterRecursive(IList`1 filters, Int32 filterIndex, ResultExecutingContext preContext, ControllerContext controllerContext, ActionResult actionResult)
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilterRecursive(IList`1 filters, Int32 filterIndex, ResultExecutingContext preContext, ControllerContext controllerContext, ActionResult actionResult)
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilterRecursive(IList`1 filters, Int32 filterIndex, ResultExecutingContext preContext, ControllerContext controllerContext, ActionResult actionResult)
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionResultWithFilters(ControllerContext controllerContext, IList`1 filters, ActionResult actionResult)
   at System.Web.Mvc.Async.AsyncControllerActionInvoker.<>c__DisplayClass21.<BeginInvokeAction>b__1e(IAsyncResult asyncResult)`

I'm trying to run the graphql sample app but the application is throwing a query error. Does anyone know if there is anything else I need to change to get the sample application running?

I already completed the following tasks:

  • Enabled websockets on IIS
  • Configured the host file with the url found on the app.config file
  • Added the appropriate bindings in IIS
  • Deployed the app to sitecore
  • Change the web.config

I'll debug the code, but I was expecting a working example. Any help will be appreciated.

Can't get the right Insert Options to import in code-first

TP4.
Have two templates:

export default function(manifest) {
  manifest.addTemplate({
    name: "news",
  });
}

and

export default function(manifest) {
  manifest.addTemplate({
    name: "news-folder",
    insertOptions: ["news"]
  });
}

Based on the configuration above, I expect the all items created from news-folder to have insert options containing the news template.

While the manifest appears to resolve this correctly:

 {
      "name": "news-folder",
      "insertOptions": [
        "news"
      ],
      "route": false,
      "defaultRoute": false
    },

This is what gets generated during import. As you can see, the News Folder item has news-folder template instead of news assigned in insert options:
image

It's important to note that the import sets expected template on __Standard Values:
image

So it seems like the assignment of the Insert Options on the item level shouldn't be happening during import.

Can't get ItemLink field value to import

Added new itemlink field of ItemLink type:

export default function(manifest) {
  manifest.addTemplate({
    name: "news-folder",
    insertOptions: ["news"],
    fields: [
      { name: 'itemlink', type: CommonFieldTypes.ItemLink, source: '/sitecore/content/sym/Content/News Folder' }
    ]
  });
}

content:

id: news
name: News Folder
template: news-folder
fields:
    itemLink:
      id: sup-news

id: sup-news
name: Sup News Item
template: news

manifest file contains the right field value:

 {
                "name": "itemLink",
                "value": {
                  "resolvedFromItemId": "sup-news",
                  "name": "Sup News Item",
                  "template": "news"
                }
              }

and the correct definition:

"fields": [
        {
          "name": "itemlink",
          "type": "Droptree",
          "source": "/sitecore/content/sym/Content/News Folder"
        }
      ],

see the whole file:
sitecore-import.txt

The import logs show the following warning: Field itemLink had a null value. It will be skipped.

And the value is null on the item:
image

Followed the samples, am I doing something wrong?

IncludeServerInMediaUrls Incompatible with Headless SSR Proxy

By default, the jss Layout Service configuration has IncludeServerUrlInMediaUrls set to true. It appears that this is required for media to get served while working in connected mode (I got proxy errors with it set to false). Indeed, the docs state that it must be set to true when working in any mode other than Integrated:

Include Server URL in Media URLs - This should always be checked, unless you are running your app in Integrated mode exclusively.

However, this setting causes issues when working with the SSR proxy. URLs for media items get generated with the CD hostname, so media requests bypass the SSR proxy and go straight to the CD.

Either the docs for the SSR proxy should be updated to reflect this requirement, or (ideally) the SSR proxy will automatically rewrite media URLs to remove the CD hostname.

Failed to Install Package "Sitecore JavaScript Services Tech Preview Server 9.0 rev. 171013.zip"

I get the following error in my logs when i tried to install the package:

ManagedPoolThread #4 13:50:19 ERROR One or more exceptions occurred while processing the subscribers to the 'packageinstall:items:ended' event.
Exception[1]: System.NullReferenceException
Message[1]: Object reference not set to an instance of an object.
Source[1]: Sitecore.ContentSearch
at Sitecore.ContentSearch.SitecoreItemCrawler.IsExcludedFromIndex(SitecoreIndexableItem indexable, Boolean checkLocation)
at Sitecore.ContentSearch.SitecoreItemCrawler.GetContextIndexRanking(IIndexable indexable)
at System.Linq.Enumerable.WhereSelectListIterator2.MoveNext() at System.Linq.Enumerable.Min(IEnumerable1 source)
at Sitecore.ContentSearch.AbstractSearchIndex.Sitecore.ContentSearch.Pipelines.GetContextIndex.IContextIndexRankable.GetContextIndexRanking(IIndexable indexable)
at Sitecore.ContentSearch.Pipelines.GetContextIndex.FetchIndex.<>c__DisplayClass6_0.b__0(ISearchIndex i)
at System.Linq.Enumerable.WhereSelectEnumerableIterator2.MoveNext() at System.Linq.Buffer1..ctor(IEnumerable1 source) at System.Linq.OrderedEnumerable1.d__1.MoveNext()
at System.Linq.Buffer1..ctor(IEnumerable1 source)
at System.Linq.Enumerable.ToArray[TSource](IEnumerable1 source) at Sitecore.ContentSearch.Pipelines.GetContextIndex.FetchIndex.GetContextIndex(IIndexable indexable, GetContextIndexArgs args) at Sitecore.ContentSearch.Pipelines.GetContextIndex.FetchIndex.Process(GetContextIndexArgs args) at (Object , Object[] ) at Sitecore.Pipelines.CorePipeline.Run(PipelineArgs args) at Sitecore.Pipelines.DefaultCorePipelineManager.Run(String pipelineName, PipelineArgs args, String pipelineDomain) at Sitecore.Abstractions.CorePipelineWrapper.Run(String pipelineName, PipelineArgs args) at Sitecore.ContentSearch.Pipelines.GetContextIndex.GetContextIndexPipeline.Run(ICorePipeline pipeline, GetContextIndexArgs args) at System.Linq.Lookup2.Create[TSource](IEnumerable1 source, Func2 keySelector, Func2 elementSelector, IEqualityComparer1 comparer)
at System.Linq.GroupedEnumerable3.GetEnumerator() at Sitecore.ContentSearch.Events.PackagingEventHandler.HandleInstalledItems(List1 installedItems)
at Sitecore.Events.Event.EventSubscribers.RaiseEvent(String eventName, Object[] parameters, EventResult result)

Typescript implementation

Hi Team,

This is an enhancement request more than an issue.

I was wondering if we could look into using Typescript as the main language for this project.

I believe, the first aim with JSS is to get FrontEnd devs to work with Sitecore. For this, plain ES6 Javascript is great and I have nothing against it. However, Sitecore developers are by nature .NET / Backend devs.

With Typescript the transition to JSS would, IMO, be simpler. It is also becoming a standard: React supports it, Angular was written with it and Vue is getting support for it.

This would required to have a @typings definition for @sitecore-jss/sitecore-jss-dev-tools.

I would be happy to help with this.

FR: GetMultilistFieldSerializer - make item attributes configurable

Is your feature request related to a problem? Please describe.

The problem is that I need to render a NavLink to an item that comes back from the MultilistFieldSerializer, which is currently serializing id and fields props only.

Describe the solution you'd like

Would be great to have ability to extend what's coming back on the item via configuration:

<processor type="Sitecore.LayoutService.Serialization.Pipelines.GetFieldSerializer.GetMultilistFieldSerializer, Sitecore.LayoutService" resolve="true">
      <Fields hint="list">
           <field id="1">name</fieldType>
           <field id="2">url</fieldType>
     </FieldTypes>
</processor>

Getting direct item properties like name, templateid, etc. is easier, but fields like url need to be computed, maybe it makes sense to keep a separate list of supported item field resolvers?

Describe alternatives you've considered

Currently using item guid to build a link, which is not pretty :)

Trying to implement page transitions in Vue example

Hello,

It seems like the router setup for the Vue example may be preventing the transitions that are built into Vue router from properly running. Specifically I am having issues with the leave animation. It seems like it either gets skips or the enter state runs too quickly. This is the code I added to AppRoot.vue

<template>
  <div class="app-root">
    <context-view :visible="contextViewVisible" />
    <!-- 'router-view' is a "global" component that is injected into the Vue component registry by vue-router. -->
    <transition name="slide-fade">
      <router-view v-if="!languageIsChanging" />
    </transition>

    <div v-if="languageIsChanging" class="alert alert-info">Language is changing...</div>
  </div>
</template>

As well as the CSS for the transition animations:

  .slide-fade-enter-active {
  transition: all 0.5s ease;
  transition-delay: 2s;
  }
  .slide-fade-leave-active {
    transition: all 1s cubic-bezier(1, 0.5, 0.8, 1);
  }
  .slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active below version 2.1.8 */ {
    transform: translateX(30px);
    opacity: 0;
  }

My guess is that it has something to do with how the dynamic routes are being fetched and the logic in RouteHandler.vue. I'm wondering if there are any other more simple examples of route handling that only deal with fetching the right components and mounting them with the data from SiteCore (no language switcher and graphQL stuff).

Any help is appreciated!

Custom React PropType for Fields

It'd be awesome for JSS to have a custom prop type for fields (and any other types that JSS commonly passes around, e.g., sitecoreContext).

Typing the following gets tedious for components that require a field prop:

MyComponent.propTypes = {
  field: PropTypes.object.shape({
    value: PropTypes.any,
    editable: PropTypes.bool
  }).isRequired
}

This would be nice:

import { PropTypes as JssPropTypes } from "@sitecore-jss/sitecore-jss-react";
...
MyComponent.propTypes = {
  field: JssPropTypes.field.isRequired
}

FR: being able to run `jss setup` with --nonInteractive and specify only some of the args

Currently the setup command requires specifying all the parameters to create scjssconfig.json and actually validates instancePath, which is great when a Sitecore instance is available but this may not be available when running a build in another environment.
It would be great to make layoutServiceHost and apiKey required as they are critical for app operation while making other params optional.

FR: quantify field ContentList field type

Not ๐Ÿ’ฏ certain if it's possible now. ContentList fields are created as Treelist fields. It would be great to have a way to specify the "flavor", so developers can pick Multilist field instead.

react template is very large

Description

Running jss create demo react generates already a full tailored solution with 36 different src script files.

Which of them are save to delete?

JSS/Angular lazy loading is not working properly

I have tried in a couple of was to load a featured module through the routing:

  1. In the advanced-sample-angular I decided to separate the Portfolio part as a module, so I have created a PortfolioModule and I have imported the JssModule and passed to it only the CarouselComponent, but when I tried to navigate to the Portfolio from the navigation I got this error

    ERROR Error: Uncaught (in promise): Error: Type JssRouteComponent is part of the declarations of 2 modules: AppComponentsModule and ModuleComponentsModule! Please consider moving JssRouteComponent to a higher module that imports AppComponentsModule and ModuleComponentsModule. You can also create a new NgModule that exports and includes JssRouteComponent then import that NgModule in AppComponentsModule and ModuleComponentsModule.

  2. The second way I didn't include the JssModule in PortfolioModule, and again I tried to open Portfolio section

    core.js:1448 ERROR Error: Uncaught (in promise): Error: Component JssRouteComponent is not part of any NgModule or the module has not been imported into your module.

I need the Angular's lazy loading functionality because in our projects we have literally hundreds of components and if we don't split them in modules webpack will bundle them in one big in size file, which is not very convenient for us.

Invalid typing for the sitecore react <Link> tag

Description

The definitions of @sitecore-jss/sitecore-jss-react/types/components/Link.d.ts don't match the current boilerplate code.

Version "@sitecore-jss/sitecore-jss-react": "^9.0.5"

Expected behavior

Steps To Reproduce

1. Use jss to create a sitecore jss react app

2. Install the react type definitions using npm i --save @types/react

3. Create a tsconfig file using npx tsc --init and adjust the values accordingly

Click here to expand the tsconfig.json code
{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "ESNext",                       /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "lib": ["dom", "es2017"],                 /* Specify library files to be included in the compilation. */
    "allowJs": true,                          /* Allow javascript files to be compiled. */
    // "checkJs": true,                       /* Report errors in .js files. */
    "jsx": "react",                           /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    // "outDir": "./",                        /* Redirect output structure to the directory. */
    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "composite": true,                     /* Enable project compilation */
    // "removeComments": true,                /* Do not emit comments to output. */
    // "noEmit": true,                        /* Do not emit outputs. */
    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

    /* Strict Type-Checking Options */
    "strict": true,                           /* Enable all strict type-checking options. */
    "noImplicitAny": false,                   /* Raise error on expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,              /* Enable strict null checks. */
    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */

    /* Additional Checks */
    // "noUnusedLocals": true,                /* Report errors on unused locals. */
    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */

    /* Module Resolution Options */
    "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                       /* List of folders to include type definitions from. */
    // "types": [],                           /* Type declaration files to be included in compilation. */
    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */

    /* Source Map Options */
    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */

    /* Experimental Options */
    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
  }
}

4. Rename src/components/Styleguide-FieldUsage-Link/index.js to src/components/Styleguide-FieldUsage-Link/index.tsx

5. View the file in VisualStudioCode

link-error

Possible Fix

Set the children attribute of LinkProps to React.ReactNode solves the issue.

For reference ReactNode allows the following values:

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;
export interface LinkProps {
    /** The link field data. */
    field: LinkField | LinkFieldValue;
    /**
     * Can be used to explicitly disable inline editing.
     * If true and `field.editable` has a value, then `field.editable` will be processed and rendered as component output. If false, `field.editable` value will be ignored and not rendered.
     * @default true
     */
    editable?: boolean;
    /**
     * Displays a link text ('description' in Sitecore) even when children exist
     * NOTE: when in Sitecore Experience Editor, this setting is ignored due to technical limitations, and the description is always rendered.
     */
    showLinkTextWithChildrenPresent?: boolean;
    /**
     * React children will be rendered inside the <a> tag
     */
    children?: React.ReactNode;
    /** HTML attributes that will be appended to the rendered <a /> tag. */
    [attributeName: string]: any;
}

Adding File field with with src pointing to project root causes odd behaviour

Hi
While creating a new component (React) in disconnected mode, I experienced, that if you forget to point the src of a File field to a specific file, and instead point it to "/" (IOS), then running "JSS start" have a funny/weird effect.
It results in, that your entire project folder is copied into "sitecore/manifest", which then again causes an error.
I think it might be a good idea, to check if the file src is actually a file before copying

Doesn't build

I think you might be missing some stuff from the current version of the quickstart guide at

https://jss.sitecore.net/#/setup/quick-start-dev

It looks like this needs node 8.x, and only builds with yarn. I'm running vagrant/ubuntu 16.04 on win10, I don't know if that's imposing additional limitations on my runtime. All attempts to build this with node 7 or with vanilla npm gave a mess of errors.

It also looks like you'r missing some global dependencies that are not described in your setup

  • cross-env needs to be installed globally
  • scjss-setup - this looks like another expected global dependency, where do we get this?
  • scjss-verify-setup - same as above

Also, where is the source code of all the sitecore packages that listed in package.json? They all point back to this project via npmjs.org, but this project is a demo, not a self-contained npm module.

Line endings

Hi, I've been trying to run jss start:connected after the project setup and got the following error:

env: node\r: No such file or directory

I'm running Mac OS X.

The culprit is scjss-verify-setup and more specifically the file /node_modules/@sitecore-jss/sitecore-jss-dev-tools/dist/bin/verify-setup.js which had CRLF line endings.

This is to be a common issue on numerous NPM modules. I would suggest normalizing all line endings of @Sitecore packages to LF.

Headless SSR Proxy Doesn't Rewrite Cookie Domain

The SSR proxy doesn't rewrite cookie domains served up from CDs. Steps to reproduce:

  1. Add <httpCookies domain="domainofapihost.tld" /> to the <system.web /> section of Web.config on the API host for the SSR proxy.
  2. Browse to the site and note that no cookies get served to the end user.

In this case I'd expect the SSR proxy to rewrite the domain on the cookies so that they do get served.

Leaving Tech Preview

Hi,

Loving this new approach to Sitecore development, just want to know when you are likely to take the product out of tech preview and provide alpha/beta supported options, or even production ready code?

Thanks!

Bradley

xGraph Browser Requires Rendering to Be Under Folder with Site Name

I've got my renderings importing into a Helix folder structure: /sitecore/layout/Renderings/Project/Website. In my site definition, my site is called my-site. When I try to open the GraphQL browser on renderings under the Website folder, I get the following error:

The JSS application Website was not registered with Sitecore.

It appears that the xGraph Browser is using the name of the rendering's parent folder to determine whether or not the rendering belongs to a site register with Sitecore. If I create a folder /sitecore/layout/Renderings/Project/my-site, and move the rendering under that folder, the xGraph Browser opens fine.

vue-loader recent issue - need update from 14.x to 15.x

This morning, I tried a clean install of the sample vueJs
An error occured about vue-loader...

To fix it , I updated this module with npm install [email protected] --save-dev

Then, I added in webpack.shared.js line:30
const VueLoaderPlugin = require('vue-loader/lib/plugin');

And line:126, in plugins:
new VueLoaderPlugin(),

Create custom App template on initial import

When you import an application, the root App item is based off of the /sitecore/templates/JavaScriptServices/App template. It'd be nice if a custom App template that derives from the base /sitecore/templates/JavaScriptServices/App template were created for you on initial import, similar to the custom App Route template.

It'd also be nice to be able to customize this item for the initial import--specify base templates you want it to inherit, item name, icon, etc.

Boolean Params in Data are converted into String after a deploy

  • Tech preview 3
  • Disconnected mode to connected mode
  • VueJS sample

If I add a boolean param in my DATA:

    "params": {
      "isSmallHeight": true
    },

Then I made a simple true check to add a class in vueJs syntax:

v-bind:class="{ 'isSmallHeight': this.rendering.params.isSmallHeight }

That works in disconnected mode.

Nevertheless, that doesn't works after a deploy, so I need to do that instead:

v-bind:class="{ 'isSmallHeight': this.rendering.params.isSmallHeight === 'true' }

and change my data to

    "params": {
      "isSmallHeight": "true"
    },

Thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.