Create a custom component in React and display the content of a scriptblock

PowerShell Universal
1 
Product: PowerShell Universal
Version: 4.3.3

Hello everyone,

I want to develop a custom component in React that would serve as a container.

I would like to use it as follows:

New-AMOTile -Content {
    New-UDTypography -Text "My Text"
}

The idea behind this component is that if an error occurs in -Content, I want to display a specific text without having to specify it manually each time.

Basically, I want to avoid doing:

New-UDElement -Tag div -Content {
    try {
        New-UDTypography -Text "My Text"
    } catch {
        New-UDTypography -Text "Error"
    }
}

However, I don’t see how to display a script block in React. Could someone explain this to me?

Thank you very much!

2

Unless there is something really specific you need to do, I think the React component would be overkill.

You could use error boundary for this.

New-UDErrorBoundary -Content {
   throw 'This is an error'
}

I would also just consider making a function to wrap this code.

function New-AMOTile 
{
    param(
      [ScriptBlock]$Content
   )
     
   try {
      & $Content 
   }
   catch 
   {
        New-UDTypography -Text "Error"
   }
}
3

So this is what I initially tried:

function New-AMOTile
{
    [CmdletBinding(DefaultParameterSetName = 'Static')]
    Param(
        [Parameter(Mandatory = $true, ParameterSetName = 'Static')]
        [Parameter(Mandatory = $true, ParameterSetName = 'Dynamic')]
        [scriptblock]$Content,
        [Parameter(Mandatory = $true, ParameterSetName = 'Static')]
        [Parameter(Mandatory = $true, ParameterSetName = 'Dynamic')]
        [string]$Id,
        [Parameter(Mandatory = $true, ParameterSetName = 'Dynamic')]
        [switch]$Dynamic
    )

    $Style = @{
        backgroundColor = 'white'
        borderRadius    = '10px'
        padding         = '10px'
        border          = '1px solid #d9d9d9'
        height          = '100%'
    }

    switch ($PSCmdlet.ParameterSetName)
    {
        'Static'
        {
            New-UDElement -Tag 'div' -Id "$Id" -Content {
                & $Content
            } -Attributes @{
                style = $Style
            }
        }
        'Dynamic'
        {
            New-UDDynamic -Content {
                New-UDElement -Tag 'div' -Id "Tile-$(New-GUID)" -Content {
                    & $Content
                } -Attributes @{
                    style = $Style
                }
            } -LoadingComponent {
                New-AMOSkeleton
            } -Id $Id
        }
    }
}

However, with this case I encountered this problem:
The & sourcing loses the scope (it’s impossible to access $Page, etc.).

Without using the & sourcing:

function New-BSATile
{
    [CmdletBinding(DefaultParameterSetName = 'Static')]
    Param(
        [Parameter(Mandatory = $true, ParameterSetName = 'Static')]
        [Parameter(Mandatory = $true, ParameterSetName = 'Dynamic')]
        [scriptblock]$Content,
        [Parameter(Mandatory = $true, ParameterSetName = 'Static')]
        [Parameter(Mandatory = $true, ParameterSetName = 'Dynamic')]
        [string]$Id,
        [Parameter(Mandatory = $true, ParameterSetName = 'Dynamic')]
        [switch]$Dynamic
    )

    $Style = @{
        backgroundColor = 'white'
        borderRadius    = '10px'
        padding         = '10px'
        border          = '1px solid #d9d9d9'
        height          = '100%'
    }

    switch ($PSCmdlet.ParameterSetName)
    {
        'Static'
        {
            New-UDElement -Tag 'div' -Id "$Id" -Content $Content -Attributes @{
                style = $Style
            }
        }
        'Dynamic'
        {
            New-UDDynamic -Content {
                New-UDElement -Tag 'div' -Id "Tile-$(New-GUID)" -Content $Content -Attributes @{
                    style = $Style
                }
            } -LoadingComponent {
                New-BSASkeleton
            } -Id $Id
        }
    }
}

But with this, I have another issue:
When passing through the New-UDDynamic, randomly, the rendering sometimes fails, and the content of the component remains stuck on the Skeleton despite the data being retrieved…

1 Like