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')
    }
  };

}

Mani-less

By gingur

Made with Slides.com

Mani-less

  • 73

More from gingur