JSX Whispers

As of LDK v3.10.0, you no longer need to install React and React-related dependencies to use JSX Whispers.

JSX Whispers

JSX is a syntax extension of JavaScript introduced by the team that created React. For the purposes of Whispers, there are a few things we leverage.

1. Properties can be defined more like an HTML tag, where components look something like <oh-component propertyOne="x" propertyTwo="y" />

2. React state is used to propagate changes to the different components, meaning that you don't have to explicitly use the update() function of the Whisper object.

Using JSX Whispers is a great way to have an easier time with handling updates in whispers.

The entry point for this webpack config is index.tsx. You may need to update your build command (or this code) in order to compile properly.

// webpack.config.js
const path = require('path');
const merge = require('webpack-merge');
const ldkConfig = require('@oliveai/ldk/dist/webpack/config');

const merged = merge.merge(ldkConfig.default, {
    entry: [path.resolve(__dirname, './src/index.tsx')],
});

module.exports = merged;

And with that in place, you're ready to try them out! Let's create a simple form that has a text input that we validate the value of. Using JSX, it would look something like this:

In the below code, the ReactWhisper object is used to render the JSX Whisper. Your Loop will have errors at runtime if you attempt to use it without either importing and using an aptitude or importing the LDK package as shown below.

// index.tsx
import { React, ReactWhisper } from '@oliveai/ldk';
import { StateMap } from '@oliveai/ldk/dist/whisper/types';

const ComponentDemo: React.FunctionComponent<Object> = (props) => {
    const textInputId = 'someUniqueId';
    const [validateButtonClicked, updateButtonClicked] = React.useState(false);
    const [validationError, updateValidationError] = React.useState('');

    const onChange = () => {
        /* do nothing */
    };
    const onValidate = (state: StateMap) => {
        updateValidationError(
            state.get(textInputId) !== 'valid' ? "Input should be 'valid'" : undefined,
        );
    };
    
    return (
        <oh-whisper label="Simple Form" onClose={() => {}}>
            <>
                <oh-text-input
                    label="Input 'valid'"
                    id={textInputId}
                    key={textInputId}
                    onChange={onChange}
                    validationError={validationError}
                />
                <oh-button
                    label={validateButtonClicked ? 'Validate Again' : 'Validate'}
                    onClick={(error, whisperProps) => {
                        updateButtonClicked(true);
                        onValidate(whisperProps.componentState);
                    }}
                />
            </>
        </oh-whisper>
    );
};

ReactWhisper.renderNewWhisper(<ComponentDemo/>);

This will display a Whisper that looks like this:

If we didn't put the word 'valid' in the Whisper, and then we press the 'Validate' button, the Whisper would now look like this:

Demonstrating that the updates we wanted to make to our Whisper are occurring, with much cleaner code than the prior examples. But, you aren't limited to just using JSX Whispers to only when you need to leverage Whisper updates! They can be used to display static content as well.