README

轻松创建粒度化的可重用 NodeTypes。最佳与 Props.Mixins 一起使用，以反映表现组件所需的 Props。

• 在同一个 NodeType 中多次加载混合

  ➔ 你曾经通过选择非唯一的属性名称覆盖属性吗？使用我们的命名空间，并像它们一样使用属性。

• 选择要加载的属性

  ➔ 你不需要属性？那么不要包含，而不仅仅是隐藏它。

• 递归扩展 props 和组的标签

  ➔ 你不必一遍又一遍地重复属性标签文本。扩展它。

• 合并组以满足编辑需求

  ➔ 将多个混合的多个 props 合并成新的用途？做到这一点。

# YOU WRITE..

'Vendor:Teaser':
  superTypes:
    'Neos.Neos:Content': true
  options:
    superTypes:
      'Vendor:Props.Link':
        link: true
      'Vendor:Props.Headline':
        headline: true
      'Vendor:Props.Image':
        desktop: true
        mobile: true
    mergeGroups:
      images:
        'Vendor:Props.Image':
          desktop: true
          mobile: true
  ui:
    label: 'Teaser'
    inspector:
      groups:
        images:
          label: 'Images'

# YOU GET..

'Vendor:Teaser':
  superTypes:
    'Neos.Neos:Content': true
  properties:
    linkHref:
      # ...
      ui:
        inspector:
          group: linkLink
    headlineText:
      # ...
    headlineTagName:
      # ...
      ui:
        inspector:
          group: headlineHeadline
    desktopAsset:
      # ...
      ui:
        inspector:
          group: images
    mobileAsset:
      # ...
      ui:
        inspector:
          group: images
  ui:
    label: 'Teaser'
    inspector:
      groups:
        linkLink:
          label: 'Link'
        headlineHeadline:
          label: 'Headline'
        images:
          label: 'Images'

模式

# Native usage:
{Vendor:NodeType}:
  superTypes:
    {NodeTypeNameToMixinAsItIs}: true

# Usage with namespaced mixins:
{Vendor:NodeType}:
  options:
    superTypes:
      {NodeTypeNameToCopyFrom}:
        {NamespaceToPasteInto}: true
        {AnotherNamespaceToPasteInto}: true

# Usage with namespaced and selective mixins:
{Vendor:NodeType}:
  options:
    superTypes:
      {NodeTypeNameToCopyFrom}:
        {NamespaceToPasteInto}:
          {PropertyNameToConsider}: true

# Prefix and suffix group label of all namespaced properties:
{Vendor:NodeType}:
  options:
    superTypes:
      {NodeTypeNameToCopyFrom}:
        {NamespaceToPasteInto}: 'Group Prefix %s Suffix'

# Prefix and suffix all property inspector labels:
{Vendor:NodeType}:
  options:
    superTypes:
      {NodeTypeNameToCopyFrom}:
        {NamespaceToPasteInto}:
          '*': 'Label Prefix %s Suffix'

# Override the properties inspector label:
{Vendor:NodeType}:
  options:
    superTypes:
      {NodeTypeNameToCopyFrom}:
        {NamespaceToPasteInto}:
          {PropertyNameToConsider}: 'New Property Label'
          {PropertyNameToConsider}: 'Property Prefix %s Label'

# Merge Inspector Groups:
{Vendor:NodeType}:
  ui:
    inspector:
      groups:
        newGroup:
          label: 'A new Group'
  options:
    mergeGroups:
      {NewGroupName}:
        {NamespaceToInclude}: true
        {AnotherNamespaceToInclude}: true
      {NewGroupName}:
        {Namespace}:
          {GroupNameToInclude}: true
        {AnotherNamespace}:
          {GroupName}:
            {PropertyNameToInclude}: true

示例 A

创建一个表现层的 frontend 组件

prototype(Vendor:Component.Link) < prototype(Neos.Fusion:Component) {
  text = ''
  link = ''
  
  renderer = afx`
    <a href={props.link}>{props.text}</div>
  `
}

创建一个相应的可重用 Props Mixin，它反映了所需的 Props

'Vendor:Props.Link':
  abstract: true
  superTypes:
    'JvMTECH.SelectiveMixins:Props': true
  ui:
    inspector:
      groups:
        link:
          icon: link
          label: 'Link'
  properties:
    text:
      options:
        preset: 'rte.plaintext'
    link:
      options:
        preset: 'link.default'
      ui:
        inspector:
          group: link

然后创建一个匹配的 Props Fusion 来加载特定组件的数据

prototype(Vendor:Props.Link) < prototype(JvMTECH.SelectiveMixins:Props) {
  text = JvMTECH.SelectiveMixins:Data.PlainProperty.Text {
    property = 'text'
  }
  link = JvMTECH.SelectiveMixins:Data.PlainProperty.Link {
    property = 'link'
  }
}

现在创建一个 Content NodeType，你可以重复使用这个 Props-Mixin 和 -Fusion，只要你喜欢 - 使用不同的命名空间

'Vendor:Content.ThreeLinks':
  superTypes:
    'Neos.Neos:Content': true
  options:
    superTypes:
      'Vendor:Props.Link':
        left: 'Left %s'
        right: 'Right %s'
        bottom:
          link: true
  ui:
    label: 'Three Links'
    inspector:
      groups:
        bottomLink:
          label: 'Bottom Link'

prototype(Vendor:Content.ThreeLinks) < prototype(Neos.Neos:ContentComponent) {
  left = Vendor:Props.Link {
    namespace = 'left'
    // result: {
    //   text: ...
    //   link: ...
    // }
  }
  right = Vendor:Props.Link {
    namespace = 'right'
    // result: {
    //   text: ...
    //   link: ...
    // }
  }
  bottom = Vendor:Props.Link {
    namespace = 'bottom'
    // result: {
    //   link: ...
    // }
  }

  renderer = afx`
    <div class="left-col">
      <Vendor:Component.Button {...props.left} />
    </div>
    <div class="right-col">
      <Vendor:Component.Button {...props.right} />
    </div>
    <Vendor:Component.Button {...props.bottom} text="Static Label" />
  `
}

生成的 NodeType 将看起来像

'Vendor:Content.ThreeLinks':
  superTypes:
    'Neos.Neos:Content': true
  ui:
    label: 'Three Links'
    inspector:
      groups:
        leftLink:
          icon: link
          label: 'Left Link'
        rightLink:
          icon: link
          label: 'Right Link'
        bottomLink:
          icon: link
          label: 'Bottom Link'
  properties:
    leftText:
      options:
        preset: 'rte.plaintext'
    leftLink:
      options:
        preset: 'link.default'
      ui:
        inspector:
          group: leftLink
    rightText:
      options:
        preset: 'rte.plaintext'
    rightLink:
      options:
        preset: 'link.default'
      ui:
        inspector:
          group: rightLink
    bottomLink:
      options:
        preset: 'link.default'
      ui:
        inspector:
          group: bottomLink

示例 B

合并检查器组以重新组合 Props-Mixins（仅适用于 options.superTypes）

'Vendor:Content.Teaser':
  superTypes:
    'Neos.Neos:Content': true
  options:
    superTypes:
      'JvMTECH.Components:Props.Headline':
        headline:
          text: true
          tagName: true
      'JvMTECH.Components:Props.Button':
        button:
          link: true
    mergeGroups:
      teaserGroup:
        headline: true
        button: true
  ui:
    label: 'Teaser'
    inspector:
      groups:
        teaserGroup:
          label: 'Teaser'

生成的 NodeType 将看起来像

'Vendor:Content.Teaser':
  superTypes:
    'Neos.Neos:Content': true
  ui:
    label: 'Teaser'
    inspector:
      groups:
        teaserGroup:
          label: 'Teaser'
  properties:
    headlineText:
      options:
        preset: 'rte.headline'
      ui:
        inline:
          editorOptions:
            placeholder: 'JvMTECH.Base:Presets:rte.placeholder.short'
    headlineTagName:
      type: string
      defaultValue: 'h2'
      ui:
        label: 'SEO Tag'
        reloadIfChanged: true
        inspector:
          group: 'teaserGroup'
          editor: Neos.Neos/Inspector/Editors/SelectBoxEditor
          editorOptions:
            multiple: false
            allowEmpty: false
            values:
              h2:
                label: 'H2'
              h3:
                label: 'H3'
              h4:
                label: 'H4'
              h5:
                label: 'H5'
              p:
                label: 'p'
    link:
      options:
        preset: 'link.default'
      ui:
        inspector:
          group: 'teaserGroup'

升级说明

1.x 到 2.x

自 2.x 以来，SelectiveMixins 正确支持嵌套 props。

示例

'Vendor:Props.TwoLinks':
  abstract: true
  superTypes:
    'JvMTECH.SelectiveMixins:Props': true
  options:
    superTypes:
      'Vendor:Props.Link':
        linkA: true
        linkB: true

prototype(Vendor:Props.TwoLinks) < prototype(JvMTECH.SelectiveMixins:Props) {
  linkA = Vendor:Props.Link {
    namespace = 'linkA'
  }
  linkB = Vendor:Props.Link {
    namespace = 'linkB'
  }
}

因此，基本的原型和混合 JvMTECH.SelectiveMixins:Data 现在仅用于属性加载，而新的 JvMTECH.SelectiveMixins:Props 用于创建 props。

并且如果你使用了类似 SelectiveMixins.Array.toCamelCase([props.namespace, 'something']) 的嵌套解决方案，你现在可能只需要 'something' 或 SelectiveMixins.Array.toCamelCase([nestedNamespace, 'something'])。

测试

在您的项目中运行以下测试以确保在升级后 Selective NodeType 生成仍然按预期工作

cp DistributionPackages/JvMTECH.SelectiveMixins/Tests/Functional/Fixtures/NodeTypes.yaml DistributionPackages/JvMTECH.SelectiveMixins/Configuration/NodeTypes.Test.yaml;
FLOW_CONTEXT=Testing ./flow flow:cache:flush;
FLOW_CONTEXT=Testing ./bin/phpunit -c ./DistributionPackages/JvMTECH.SelectiveMixins/Tests/PhpUnit/FunctionalTests.xml;
rm DistributionPackages/JvMTECH.SelectiveMixins/Configuration/NodeTypes.Test.yaml;

安装

composer require jvmtech/selective-mixins

由 jvmtech.ch 提供