Hiding parts

The hide option of a part's configuration controls how to hide it and/or its dependencies.

tip

A hidden part will not be included in the output when it's rendered

tip

The hide configuration from parts that you include in your design will always override configuration from inherited parts.

Settings

hide.after

To hide the explicitly included after parts, set hide.after to a truthy value

import exampleBase from './base.mjs'

const part = {
  name: 'example.front',
  after: [exampleBase],
  // hide `exampleBase`
  hide: { after: true },
  draft: ({ part }) => part,
}

hide.always

To hide a specific part that would otherwise not be hidden by other configuration, add its name to the hide.always array

import { exampleBase } from './base.mjs'
import { exampleBack } from './back.mjs'
const part = {
  name: 'example.front',
  after: [exampleBase, exampleBack],
  // hide `exampleBack`
  hide: { always: ['example.back'] },
  draft: ({ part }) => part,
}

hide.from

To hide the explicitly included from part, set hide.from to a truthy value.

import exampleBase from './base.mjs'

const part = {
  name: 'other.base',
  from: exampleBase,
  // hide exampleBase
  hide: { from: true },
  draft: ({ part }) => part,
}

hide.inherited

To hide parts that you have not explicitly included in this part that may be pulled in by the explicitly included from and after parts, set hide.inherited to a truthy value.

note

This setting will hide any part included as from or after by your explicitly included from part or its dependency chain. It will also hide any part included as from by your explicitly included after part or its dependency chain. It will not hide the after parts of after parts

// the "after" chain
const mainFrontParent = {
  name: 'other.mainFront',
  draft: ({part}) => part
}
const mainFrontBase = {
  name: 'example.mainFrontBase',
  draft: ({part}) => part
}
const mainFront = {
  name: 'example.mainFront',
  after: mainFrontBase,
  from: mainFrontParent,
  draft: ({part}) => part
}

// the "from" chain
const grandParentBase = {
  name: 'other.grandParentBase',
  draft: ({part}) => part
}
const grandParent = {
  name: 'other.grandParent',
  after: grandParentBase
  draft: ({ part }) => part
}
const parent = {
  name: 'other.parent',
  from: grandParent
  draft: ({ part }) => part
}


const mainBack = {
  name: 'example.mainBack',
  from: parent,
  after: mainFront,
  // hide grandParentBase, grandParent, mainFrontParent
  // don't hide parent, mainFront, or mainFrontBase
  hide: { inherited: true },
  draft: ({part}) => part
}

tip

Need more clarity?

In the above example, the dependency tree for the part example.mainBack resolves to the following, with from dependencies in bold and after dependencies italicized.

Part	Dependency Type	Hidden
example.mainBack	root	false
- other.parent	from	false
- - other.grandParent	inherited from	true
- - - other.grandParentBase	inherited after	true
- example.mainFront	after	false
- - example.mainFrontBase	after	false
- - other.mainFront	inherited from	true

Dependencies are considered inherited if they have two or more dashes (-) next to them, and are either bold themselves, or underneath a bold part.

hide.never

To not hide a specific part that would otherwise be hidden by other configuration, add its name to the hide.never array

import { exampleBase } from './base.mjs'
import { exampleBack } from './back.mjs'
const part = {
  name: 'example.front',
  after: [exampleBase, exampleBack],
  hide: {
    // hide exampleBase and exampleBack
    after: true,
    // override hiding exampleBack so that it is shown
    never: ['example.back'],
  },
  draft: ({ part }) => part,
}

hide.self

To hide the current part, set hide.self to a truthy value:

const part = {
  name: 'example.front',
  // hide `example.front`
  hide: { self: true },
  draft: ({ part }) => part,
}

Presets

We provide two presets for common hiding configurations. For convenience, you can pass a preset to the hide configuration as a string like hide: <preset name>, or you can use import { hidePresets } from '@freesewing.core and pass hide: hidePresets.<preset name>

tip

If you don't like to remember strings and you're working in development a environment that has code completion, importing the presets from @freesewing/core will help you be sure you're definitely using an available preset

HIDE_ALL

For a shortcut to setting all boolean hiding options (after, from, inherited, and self) to true, use HIDE_ALL

note

This is equivalent to using

{
  self: true,
  after: true,
  from: true,
  inherited: true
}

To use it as an imported preset:

import { hidePresets } from '@freesewing/core'
import { exampleBase } from './base.mjs'
import { exampleBack } from './back.mjs'

const part = {
  name: 'example.front',
  from: exampleBase
  after: [exampleBack],
  // hide `example.front`, `exmpleBase`, and `exampleBack`
  // as well as any inherited parts
  hide: hidePresets.HIDE_ALL,
  draft: ({ part }) => part
}

To use it as a string

import { exampleBase } from './base.mjs'
import { exampleBack } from './back.mjs'

const part = {
  name: 'example.front',
  from: exampleBase,
  after: [exampleBack],
  // hide `example.front`, `exmpleBase`, and `exampleBack`
  // as well as any inherited parts
  hide: 'HIDE_ALL',
  draft: ({ part }) => part,
}

HIDE_TREE

For a shortcut to setting from: true and inherited: true, use HIDE_TREE

note

This is equivalent to using

{
  from: true,
  inherited: true
}

RELATED

See hide.inherited for a full explanation of how that option works

To use it as an imported preset:

import { hidePresets } from '@freesewing/core'
import { exampleBase } from './base.mjs'
import { exampleBack } from './back.mjs'

const part = {
  name: 'example.front',
  from: exampleBase,
  // hide `exmpleBase`, and all inherited parts
  hide: hidePresets.HIDE_TREE,
  draft: ({ part }) => part,
}

To use it as a string

import { exampleBase } from './base.mjs'
import { exampleBack } from './back.mjs'

const part = {
  name: 'example.front',
  from: exampleBase,
  // hide `exmpleBase`, and all inherited parts
  hide: 'HIDE_TREE',
  draft: ({ part }) => part,
}