Mani-less

A React Styled Manifest

Today

Customers edit their website using "Editor"
Editor is responsible for editing "Widgets"
Widgets render based on "Props"
Widget expresses props using a "Manifest"
Manifest is parsed using "Manifest Tools"
Manifest tools use "Extensions" to get store data
Editor reads the manifest to render "Mutators"
Mutators are hard

Tomorrow

Customers edit their website using "Editor"
~~Editor is~~ Widgets are responsible for editing "Widgets"
Widgets render based on "Props"
Widget expresses props using ~~a "Manifest"~~ React
~~Manifest is parsed using "Manifest Tools"~~
~~Manifest tools use "Extensions" to~~ Widgets get store data
Editor ~~reads the manifest~~ uses Widget to render "Mutators"
Mutators are not so hard

Title Text

Bullet One
Bullet Two
Bullet Three

Before

const manifest = {
  types: {
    envBinding: {
      kind: 'extensionBinding',
      type: 'TEXT',
      extensionName: 'Config',
      field: 'env',
      defaultOnly: true
    }
  },
  props: {
    env: {
      kind: 'typeReferenceWithDisplayInfo',
      type: 'envBinding',
      editingDisplay: {
        hidden: true
      }
    },
    sectionTitle: {
      kind: 'typeReferenceWithDisplayInfo',
      type: {
        type: 'TEXT',
        arguments: {
          maxCount: 60
        }
      },
      editingDisplay: {
        titleId: {
          kind: 'translatedValue',
          value: 'titleForSubscribeSectionTitleProp'
        }
      }
    }
  },
  defaultState: {
    sectionTitle: {
      kind: 'translatedValue',
      value: 'defaultValueForSectionTitle'
    }
  }
};

After


class Widget extends Component {

  static propTypes = {
    env: SDK.PropTypes.string,
    sectionTitle: SDK.PropTypes.string.maxCount(60)
  };

  static defaultProps = {
    env: SDK.Selectors.getEnv,
    sectionTitle: SDK.translation('defaultValueForSectionTitle')
  };

}

class Mutators extends createMutators(Widget) {

  static mutatorTypes = {
    sectionTitle: 'TEXT'
  };

  static mutatorDefaultProps = {
    sectionTitle: {
      title: SDK.translation('titleForSubscribeSectionTitleProp')
    }
  };

}