297 lines
6.8 KiB
Text
297 lines
6.8 KiB
Text
---
|
|
title: 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
|
|
|
|
```js
|
|
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
|
|
|
|
```js
|
|
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.
|
|
|
|
```js
|
|
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
|
|
:::
|
|
|
|
```js
|
|
// 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
|
|
|
|
<details>
|
|
<summary>Need more clarity?</summary>
|
|
|
|
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.
|
|
|
|
</details>
|
|
:::
|
|
|
|
### hide.never
|
|
|
|
To **not** hide a specific part that would otherwise be hidden by other configuration, add its name to the `hide.never` array
|
|
|
|
```js
|
|
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:
|
|
|
|
```js
|
|
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`](#hideafter),
|
|
[`from`](#hidefrom), [`inherited`](#hideinherited), and [`self`](#hideself)) to
|
|
true, use `HIDE_ALL`
|
|
|
|
:::note
|
|
This is equivalent to using
|
|
|
|
```js
|
|
{
|
|
self: true,
|
|
after: true,
|
|
from: true,
|
|
inherited: true
|
|
}
|
|
```
|
|
|
|
:::
|
|
|
|
To use it as an imported preset:
|
|
|
|
```js
|
|
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
|
|
|
|
```js
|
|
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`](#hidefrom) and [`inherited: true`](#hideinherited), use `HIDE_TREE`
|
|
|
|
:::note
|
|
This is equivalent to using
|
|
|
|
```js
|
|
{
|
|
from: true,
|
|
inherited: true
|
|
}
|
|
```
|
|
|
|
:::
|
|
|
|
:::note RELATED
|
|
See [`hide.inherited`](#hideinherited) for a full explanation of how that option works
|
|
:::
|
|
|
|
To use it as an imported preset:
|
|
|
|
```js
|
|
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
|
|
|
|
```js
|
|
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,
|
|
}
|
|
```
|