mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-12 07:12:53 +01:00
chore: Upgrade Docusaurus from v2 to v3 (#52)
* chore: Upgrade Docusaurus from v2 to v3 * chore: Update "Test build" GH workflow * fix: build All markdown is processed as MDX * fix: Broken links
This commit is contained in:
Eric Tuvesson
GitHub
@@ -4,7 +4,7 @@ hide_table_of_contents: true
|
||||
title: Component Children node
|
||||
---
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
# Component Children
|
||||
|
||||
@@ -20,7 +20,7 @@ the **Component Children** node.
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
To fully understand this concept it's important to understand node hierarchies.
|
||||
Visual nodes can be placed in a hierarchy which will cause them to be layouted and drawn appropriately.
|
||||
|
||||
@@ -4,7 +4,7 @@ hide_table_of_contents: true
|
||||
title: Component Inputs node
|
||||
---
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
# Component Inputs
|
||||
|
||||
@@ -24,7 +24,7 @@ A <span className="ndl-node">Component Input</span> node can have multiple ports
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
A very powerful feature of Noodl is the ability to create **Components** that act as reusable nodes in your application.
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ hide_table_of_contents: true
|
||||
title: Component Object node
|
||||
---
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
# Component Object
|
||||
|
||||
@@ -18,7 +18,7 @@ This node is a shared set of properties that can be accessed from a component as
|
||||
|
||||
The <span className="ndl-node">Component Object</span> node works much like the <span className="ndl-node">[Object](/nodes/data/object/object-node)</span> node where you add properties that become inputs or outputs to the node.
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
<div className="ndl-image-with-background">
|
||||
|
||||
@@ -32,20 +32,20 @@ Unlike the <span className="ndl-node">[Object](/nodes/data/object/object-node)</
|
||||
|
||||
| Data | Description |
|
||||
| ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Property name</span> | <##input:value-\*##>The value of a specific property of the Component Object. A Component Object node can have any amount of properties. They must be named in the Property Panel. When this input is changed all other Component Object nodes in the same component are updated.<##input##> Each property will get one input and output to set/get their current value. See below for more details. |
|
||||
| <span className="ndl-data">Property name</span> | {/*##input:value-\*##*/}The value of a specific property of the Component Object. A Component Object node can have any amount of properties. They must be named in the Property Panel. When this input is changed all other Component Object nodes in the same component are updated.{/*##input##*/} Each property will get one input and output to set/get their current value. See below for more details. |
|
||||
|
||||
| Signal | Description |
|
||||
| ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Fetch</span> | <##input:fetch##>The fetch signal input can be used to explicitly signal when the data of a **Component Object** should be fetched. If a connection is made to this input the node will not automatically receive changes on it's properties, it will only get the new data when the fetch signal is triggered.<##input##> |
|
||||
| <span className="ndl-signal">Fetch</span> | {/*##input:fetch##*/}The fetch signal input can be used to explicitly signal when the data of a **Component Object** should be fetched. If a connection is made to this input the node will not automatically receive changes on it's properties, it will only get the new data when the fetch signal is triggered.{/*##input##*/} |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Data | Description |
|
||||
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| **Custom properties** | <##output:value-\*##>A Component Object node can have any amount of properties. Each property will get one output to get the current value.<##output##> |
|
||||
| **Custom properties** | {/*##output:value-\*##*/}A Component Object node can have any amount of properties. Each property will get one output to get the current value.{/*##output##*/} |
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Changed</span> | <##output:changed##>An event is triggered when any of the properties have changed.<##output##> |
|
||||
| <span className="ndl-signal">Fetched</span> | <##output:fetched##>An event is triggered on this output when a fetch is completed as a result of a **Fetch** sent on to the node.<##output##> |
|
||||
| <span className="ndl-signal">Changed Property Signals</span> | <##output:changed-\*##>One changed signal output will be created for every property. They will emit a signal when the property changes value when this or some other **Component Object** or [Parent Component Object](/nodes/component-utilities/parent-component-object) node triggers the _Set_ input.<##output##> |
|
||||
| <span className="ndl-signal">Changed</span> | {/*##output:changed##*/}An event is triggered when any of the properties have changed.{/*##output##*/} |
|
||||
| <span className="ndl-signal">Fetched</span> | {/*##output:fetched##*/}An event is triggered on this output when a fetch is completed as a result of a **Fetch** sent on to the node.{/*##output##*/} |
|
||||
| <span className="ndl-signal">Changed Property Signals</span> | {/*##output:changed-\*##*/}One changed signal output will be created for every property. They will emit a signal when the property changes value when this or some other **Component Object** or [Parent Component Object](/nodes/component-utilities/parent-component-object) node triggers the _Set_ input.{/*##output##*/} |
|
||||
|
||||
@@ -4,7 +4,7 @@ hide_table_of_contents: true
|
||||
title: Component Outputs node
|
||||
---
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
# Component Outputs
|
||||
|
||||
@@ -24,7 +24,7 @@ A <span className="ndl-node">Component Output</span> node can have as many ports
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
A very powerful feature of Noodl is the ability to create **Components** that act as reusable nodes in your application. A core concept of components is that they can have inputs and outputs like any of the built in nodes.
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ hide_table_of_contents: true
|
||||
title: Parent Component Object node
|
||||
---
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
# Parent Component Object
|
||||
|
||||
@@ -17,7 +17,7 @@ title: Parent Component Object node
|
||||
</div>
|
||||
|
||||
The node is used much like an [Object](/nodes/data/object/object-node) where you can output properties on the node. The node does not have an **Id** instead the data is shared with the parent component. This node is very useful in patterns such as radio groups where child components may need to access the **Component Object** of its parent.
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
## Inputs
|
||||
|
||||
@@ -25,11 +25,11 @@ The node is used much like an [Object](/nodes/data/object/object-node) where you
|
||||
|
||||
| Data | Description |
|
||||
| -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Properties</span> | <##input:value-\*##>The properties to set on the closest parent [Component Object](/nodes/component-utilities/component-object). When this input is changed via a connection the parent **Component Object** will be updated.<##input##> |
|
||||
| <span className="ndl-data">Properties</span> | {/*##input:value-\*##*/}The properties to set on the closest parent [Component Object](/nodes/component-utilities/component-object). When this input is changed via a connection the parent **Component Object** will be updated.{/*##input##*/} |
|
||||
|
||||
| Signal | Description |
|
||||
| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-signal">Fetch</span> | <##input:fetch##>Normally when a **Parent Component State** is created, the property outputs are immediately updated. If you want to control how the data is updated you can connect to the _Fetch_ signal input. Then you need to explictly send a signal to fetch the data.<##input##><br/><br/>With **Fetch** connected the output data won't change until **Fetch** is explicitly triggered again. |
|
||||
| <span className="ndl-signal">Fetch</span> | {/*##input:fetch##*/}Normally when a **Parent Component State** is created, the property outputs are immediately updated. If you want to control how the data is updated you can connect to the _Fetch_ signal input. Then you need to explictly send a signal to fetch the data.{/*##input##*/}<br/><br/>With **Fetch** connected the output data won't change until **Fetch** is explicitly triggered again. |
|
||||
|
||||
## Outputs
|
||||
|
||||
@@ -37,10 +37,10 @@ The node is used much like an [Object](/nodes/data/object/object-node) where you
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Parent Properties</span> | <##output:value-\*##>The values of the properties of the closest parent [Component Object](/nodes/component-utilities/component-object).<##output##> |
|
||||
| <span className="ndl-data">Parent Properties</span> | {/*##output:value-\*##*/}The values of the properties of the closest parent [Component Object](/nodes/component-utilities/component-object).{/*##output##*/} |
|
||||
|
||||
| Signal | Description |
|
||||
| ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Changed</span> | <##output:changed##>This event is triggered when any of the properties have changed.<##output##> |
|
||||
| <span className="ndl-signal">Fetched</span> | <##output:fetched##>Signal when this node has bound itself to a [Component Object](/nodes/component-utilities/component-object). Triggers immediately if the **Fetch** inputs isn't connected, and will otherwise trigger when the **Fetch** input is signaled.<##output##> |
|
||||
| <span className="ndl-signal">Changed Property Signals</span> | <##output:changed-\*##>One changed signal output will be created for every property. They will emit a signal when the property changes value.<##output##> |
|
||||
| <span className="ndl-signal">Changed</span> | {/*##output:changed##*/}This event is triggered when any of the properties have changed.{/*##output##*/} |
|
||||
| <span className="ndl-signal">Fetched</span> | {/*##output:fetched##*/}Signal when this node has bound itself to a [Component Object](/nodes/component-utilities/component-object). Triggers immediately if the **Fetch** inputs isn't connected, and will otherwise trigger when the **Fetch** input is signaled.{/*##output##*/} |
|
||||
| <span className="ndl-signal">Changed Property Signals</span> | {/*##output:changed-\*##*/}One changed signal output will be created for every property. They will emit a signal when the property changes value.{/*##output##*/} |
|
||||
|
||||
@@ -4,7 +4,7 @@ hide_table_of_contents: true
|
||||
title: Set Component Object Properties node
|
||||
---
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
# Set Component Object Properties
|
||||
|
||||
@@ -16,20 +16,20 @@ title: Set Component Object Properties node
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
## Inputs
|
||||
|
||||
| Signal | Description |
|
||||
| -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Do</span> | <##input:do##>Stores any properties that are typed in the property panel or connected. All **Component Object** nodes in the same component, as well as any [Parent Component Object](/nodes/component-utilities/parent-component-object) nodes, will be updated. <##input##> |
|
||||
| <span className="ndl-signal">Do</span> | {/*##input:do##*/}Stores any properties that are typed in the property panel or connected. All **Component Object** nodes in the same component, as well as any [Parent Component Object](/nodes/component-utilities/parent-component-object) nodes, will be updated. {/*##input##*/} |
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Custom Properties</span> | <##input:prop-\*##>A property to set in the **Component Object**. You can list the properties you want to set in the property panel.<##input##> |
|
||||
| <span className="ndl-data">Custom Properties</span> | {/*##input:prop-\*##*/}A property to set in the **Component Object**. You can list the properties you want to set in the property panel.{/*##input##*/} |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Signal | Description |
|
||||
| ---------------------------------------- | ----------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Done</span> | <##output:done##>An signal is sent on this output when the set action is completed.<##output##> |
|
||||
| <span className="ndl-signal">Done</span> | {/*##output:done##*/}An signal is sent on this output when the set action is completed.{/*##output##*/} |
|
||||
|
||||
@@ -4,7 +4,7 @@ hide_table_of_contents: true
|
||||
title: Set Parent Component Object Properties node
|
||||
---
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
# Set Parent Component Object Properties
|
||||
|
||||
@@ -16,20 +16,20 @@ With this node you can set properties on the closed parent **Component Object**.
|
||||
|
||||
</div>
|
||||
|
||||
<##head##>
|
||||
{/*##head##*/}
|
||||
|
||||
## Inputs
|
||||
|
||||
| Signal | Description |
|
||||
| -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Do</span> | <##input:do##>Stores any properties that are typed in the property panel or connected. All **Component Object** nodes in the same component, as well as any [Parent Component Object](/nodes/component-utilities/parent-component-object) nodes, will be updated. <##input##> |
|
||||
| <span className="ndl-signal">Do</span> | {/*##input:do##*/}Stores any properties that are typed in the property panel or connected. All **Component Object** nodes in the same component, as well as any [Parent Component Object](/nodes/component-utilities/parent-component-object) nodes, will be updated. {/*##input##*/} |
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-data">Custom Properties</span> | <##input:prop-\*##>A property to set in the **Component Object**. You can list the properties you want to set in the property panel.<##input##> |
|
||||
| <span className="ndl-data">Custom Properties</span> | {/*##input:prop-\*##*/}A property to set in the **Component Object**. You can list the properties you want to set in the property panel.{/*##input##*/} |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Signal | Description |
|
||||
| ---------------------------------------- | ---------------------------------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Done</span> | <##output:done##>A signal is sent on this output when the set action is completed.<##output##> |
|
||||
| <span className="ndl-signal">Done</span> | {/*##output:done##*/}A signal is sent on this output when the set action is completed.{/*##output##*/} |
|
||||
|
||||
Reference in New Issue
Block a user