Understanding Statically Analyzable Board Objects

In general, a board object is not statically analyzable when it is the result of a method or expression. For example, consider the following (not statically analyzable) exported board object that is populated with props using the generateProp function:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { createBoard } from '@wixc3/react-board';
import React from 'react';
   
const ComponentWithStringProp = (props: {propStr: string}) => {
    return (<div>{props.propStr}</div>)
}  
   
const generateProp = (value: string) => {
 return value.indexOf(' ') >= 0 ? value : undefined;
}  
   
export default createBoard({
    name: 'My Board',
    Board: () => <ComponentWithStringProp propStr = {generateProp('Hello World')} />
});
In this example, the board object isn't statically analyzable because you only know its properties at runtime. Although the result is not analyzable, the call expression and the arguments are (separately), so you'll still be able to edit the argument of this call expression ('Hello World') from the Properties panel.
There is an exception to this rule — the board created here is still considered statically-analyzable because the value for the propStr property is an expression, and prop values can be expressions:
1
2
3
4
5
6
7
8
9
10
11
import { createBoard } from '@wixc3/react-board';
import React from 'react';
   
const ComponentWithStringProp = (props: {propStr: string}) => {
    return (<div>{props.propStr}</div>)
}  
   
export default createBoard({
    name: 'My Board',
    Board: () => <ComponentWithStringProp propStr = 'Hello World' />
});
Previous article
Next article