Property 'name' does not exist on type 'Component'.ts(2339)

[linonetwo]

import { Component } from 'noflo';
import { IFBPComponent } from 'the-graph'
import { Com } from 'fbp-graph'

/**
 * Covert FBP Protocol component to the-graph library component
 * @url https://github.com/noflo/noflo-ui/blob/22d26eca71b52cd5181dd253f76bdb13c6bfecd4/src/runtime.js#L17C1-L33
*/
export function componentForLibrary(component: Component): IFBPComponent {
  return {
    name: component.name,
    icon: component.icon ?? 'cog',
    description: component.description ?? '',
    subgraph: component.subgraph,
    inports: component.inPorts.map(portForLibrary),
    outports: component.outPorts.map(portForLibrary),
  };
}

Property 'subgraph' does not exist on type 'Component'. Did you mean 'isSubgraph'?ts(2551)

Property 'map' does not exist on type 'InPorts'.ts(2339)

Property 'map' does not exist on type 'OutPorts'.ts(2339)

So what is the type for https://github.com/noflo/noflo-ui/blob/22d26eca71b52cd5181dd253f76bdb13c6bfecd4/components/RuntimeReducer.js#L74-L76

To fix flowhub/the-graph#622 ?

[linonetwo]

Workaround

import { INoFloNodeJSComponent, INoFloNodeJSComponentPort, INoFloUIComponent, INoFloUIComponentPort } from 'the-graph';

/**
 * Covert FBP Protocol component to the-graph library component
 * @url https://github.com/noflo/noflo-ui/blob/22d26eca71b52cd5181dd253f76bdb13c6bfecd4/src/runtime.js#L17C1-L33
 */
export function componentForLibrary(component: INoFloNodeJSComponent): INoFloUIComponent {
  return {
    name: component.name,
    icon: component.icon ?? 'cog',
    description: component.description ?? '',
    subgraph: component.subgraph ?? false,
    inports: component.inPorts?.map(portForLibrary) ?? [],
    outports: component.outPorts?.map(portForLibrary) ?? [],
  };
}

function portForLibrary(port: INoFloNodeJSComponentPort): INoFloUIComponentPort {
  return {
    name: port.id,
    type: port.type,
    description: port.type,
    addressable: port.addressable,
    schema: port.schema,
  };
}

and makeshift typing

declare module 'the-graph' {
  import { Graph } from 'fbp-graph';

  export interface ITheGraphProps {
    getMenuDef?: (options: {
      graph: any;
      item: any;
      itemKey: any;
      type: string;
    }) => any;
    graph: Graph;
    height: number | string;
    library?: IFBPLibrary;
    offsetX?: number;
    onPanScale: (x: number, y: number, scale: number) => void;
    readonly: boolean;
    ref?: RefObject<HTMLDivElement>;
    width: number | string;
  }
  export function App(props: ITheGraphProps): JSX.Element;

  export interface INoFloNodeJSComponentPort {
    addressable: boolean;
    id: string;
    schema: string;
    type: string;
  }
  export interface INoFloUIComponentPort extends Omit<INoFloNodeJSComponentPort, 'id'> {
    description: string;
    name: string;
  }
  function componentsFromGraph(graph: Graph): INoFloUIComponent[];
  export interface INoFloUIComponent {
    description: string;
    icon: string;
    inports?: INoFloUIComponentPort[];
    name: string;
    outports?: INoFloUIComponentPort[];
    /**
     * True means this is not a Elementary component
     */
    subgraph?: boolean;
    unnamespaced?: boolean;
  }
  export interface INoFloNodeJSComponent extends Omit<INoFloUIComponent, 'inports' | 'outports'> {
    inPorts?: INoFloNodeJSComponentPort[];
    outPorts?: INoFloNodeJSComponentPort[];
  }
  export type IFBPLibrary = Record<string, INoFloUIComponent>;
  function libraryFromGraph(graph: Graph): IFBPLibrary;

  export const library = {
    componentsFromGraph,
    libraryFromGraph,
  };

  function styleFromTheme(theme: 'dark' | 'light'): {
    height: number;
    lineWidth: number;
    nodeSize: number;
    width: number;
  };
  function renderThumbnail(contextcontext: CanvasRenderingContext2D | null, graph: Graph, properties: ReturnType<typeof styleFromTheme>): {
    rectangle: number[];
    scale: number;
  };
  export const thumb = {
    styleFromTheme,
    render: renderThumbnail,
  };

  export interface ITheGraphNavProps {
    graph: Graph;
    height: number;
    onPanTo: () => void;
    onTap: () => void;
    viewrectangle: number[];
    viewscale: number;
    width: number;
  }
  function NavComponent(props: ITheGraphNavProps): JSX.Element;
  export const nav = {
    Component: NavComponent,
  };
}