Example code for communication with programming framework of Music-blocks v-4

BuilderWrapper.ts

import React, { useState, useEffect } from 'react';
import ProjectBuilder from 'musicblocks-v4-builder-framework';
import { SpecificationAPI, SyntaxTreeAPI } from 'musicblocks-v4-programming-framework';

interface BuilderWrapperProps {}

const BuilderWrapper: React.FC<BuilderWrapperProps> = (props) => {
  const [builderInstance, setBuilderInstance] = useState<ProjectBuilder | null>(null);
  const [specificationAPI, setSpecificationAPI] = useState<SpecificationAPI | null>(null);
  const [syntaxTreeAPI, setSyntaxTreeAPI] = useState<SyntaxTreeAPI | null>(null);

  useEffect(() => {
    // Initialize the Project Builder instance
    const builderInstance = new ProjectBuilder();
    // Initialize the Specification API
    const specificationAPI = new SpecificationAPI();
    // Initialize the Syntax Tree API
    const syntaxTreeAPI = new SyntaxTreeAPI();

    // Add event listeners for communication with other components
    builderInstance.addEventListener('event', handleEvent);

    // Set the state to update the component with the initialized instances
    setBuilderInstance(builderInstance);
    setSpecificationAPI(specificationAPI);
    setSyntaxTreeAPI(syntaxTreeAPI);

    return () => {
      // Remove event listeners when component unmounts
      builderInstance.removeEventListener('event', handleEvent);
    };
  }, []);

  const handleEvent = (event: any) => {
    // Handle events from the Project Builder API
    if (builderInstance) {
      builderInstance.handleCustomEvent();
    }
  };

  const handleButtonClick = () => {
    // Trigger an action within the Project Builder
    if (builderInstance) {
      builderInstance.doSomething();
    }
    // Call the Specification API
    if (specificationAPI) {
      specificationAPI.someMethod();
    }
    // Call the Syntax Tree API
    if (syntaxTreeAPI) {
      syntaxTreeAPI.someMethod();
    }
  };

  return (
    <div>
      <button onClick={handleButtonClick}>Do XYZ</button>
    </div>
  );
};

export default BuilderWrapper;