Perspective Component Issues

Module Development
1

I’m trying to build a simple component to allow for code display and syntax highlighting. Its my first time dabbling in modules, so hoping someone can help me with whatever I am obviously missing here… I started off with the Image component in the SDK example, module builds and worked ok until I tried to edit this file.

When building my module I am getting

TypeScript emitted no output for C:\Code\IgnitionModules\perspective-code-viewer\web\packages\client\typescript\components\CodeViewer.tsx.

Here is the tsx

/**
 * Example of a component which displays an image, given a URL.
 */
import * as React from 'react';
import {
    Component,
    ComponentMeta,
    ComponentProps,
    PComponent,
    PropertyTree,
    SizeObject
} from '@inductiveautomation/perspective-client';


// The 'key' or 'id' for this component type.  Component must be registered with this EXACT key in the Java side as well
// as on the client side.  In the client, this is done in the index file where we import and register through the
// ComponentRegistry provided by the perspective-client API.
export const COMPONENT_TYPE = "codeviewer";


// This is the shape of the properties we get from the perspective 'props' property tree.
export interface CodeViewerProps {
    code: string;   // the code this component should display
    codeType: string;  // the style class to be applied
}

export class CodeViewer extends Component<ComponentProps<CodeViewerProps>, any> {
    render() {
        // The props we're interested in.
        const { props, emit } = this.props;
        // Read the 'code' property provided by the perspective gateway via the component 'props'.

        // Note that the topmost piece of dom requires the application of an element reference, events, style and
        // className as shown below otherwise the layout won't work, or any events configured will fail. See render
        // of MessengerComponent in Messenger.tsx for more details.
        return (
            <pre {...emit()}>
                <code class={props.codeType}>
                    {props.code}
                </code>
            </pre>
        );
    }
}

// This is the actual thing that gets registered with the component registry.
export class CodeViewerMeta implements ComponentMeta {

    getComponentType(): string {
        return COMPONENT_TYPE;
    }

    // the class or React Type that this component provides
    getViewComponent(): PComponent {
        return CodeViewer;
    }

    getDefaultSize(): SizeObject {
        return ({
            width: 360,
            height: 360
        });
    }

    // Invoked when an update to the PropertyTree has occurred,
    // effectively mapping the state of the tree to component props.
    getPropsReducer(tree: PropertyTree): CodeViewerProps {
        return {
            code: tree.readString("code", "")
            code_type: tree.readString("codeType", "")
        };
    }
}
1 Like
2

Any workaround for this. I am also facing the exact same issue.

thanks,
Nilesh Matal,
OpteBiz Inc.

3

Disclaimer: I have 0 experience when it comes to authoring modules/components so this might not actually be relevant.

Is there a tsconfig.json file within your module? A quick web search leads me to believe there should be a noEmit property within that file that should be set to false. You also need to verify that CodeViwer.tsx is included as a ref in that tsconfig.json file.

4

Hi Ryan.

Did you get this solved (I realize its a few months old). I'm leaning this too so I'm not an expert. However, I did notice a typo....change code_type: to codeType:, it must be the same as you defined it in your CodeViewerProps interface.

Regards,
Ted

5

A couple syntax issues jump out at me

            <code class={props.codeType}>

you'll want to change this to className. class is a keyword in Javascript, thus TSX isn't able to use it this way.

    return {
        code: tree.readString("code", "")
        code_type: tree.readString("codeType", "")
    };

You'll want a comma at the end of code: tree.readString("code", "") , you're return an object and properties of an object are separated by commas

also code_type should be codeType, the property name defined in your props interface

1 Like