barda-sdk v0.0.1

barda-sdk

用法(Usage)

yarn:

yarn add barda-sdk

npm:

npm install barda-sdk 

将Barda的应用程序/模块集成到现有的应用程序页面中(Integrate Barda' app/module into existing app page)

1. 在Barda中发布您的应用程序/模块（Publish your app/module in Barda）.
2. 将应用程序/模块的访问权限设置为公用（Set the app/module's access privilege as public）.
3. 在现有应用程序中添加代码，如下所示（Add code in your existing app as below）.

导入样式(Import style)

import "barda-sdk/dist/style.css";

React程序(For react app):

import { BardaAppView } from "barda-sdk";

<BardaAppView appId="{YOUR_APPLICATION_ID}" />;

参数(BardaViewProps)

调用模块方法（Invoke module methods）

import { useRef } from "ref";
import { BardaAppView } from "barda-sdk";

function MyExistingAppPage() {
  const appRef = useRef();
  return (
    <div>
      <BardaAppView appId={YOUR_APPLICATION_ID} ref={appRef} />;
      <button onClick={() => appRef.current?.invokeMethod("some-method-name")}>
        Invoke method
      </button>
    </div>
  );
}

For vanilla js:

import { bootstrapAppAt } from "barda-sdk";

const node = document.querySelector("#my-app");

async function bootstrap() {
  const instance = await bootstrapAppAt(YOUR_APPLICATION_ID, node);

  // set module inputs
  instance.setModuleInputs({ input1: "xxx", input2: "xxx" });

  // invoke module methods
  instance.setModuleInputs({ input1: "xxx", input2: "xxx" });

  // listen module event trigger
  instance.on("moduleEventTriggered", (eventName) => {
    console.info("event triggered:", eventName);
  });

  // listen module output change
  instance.on("moduleOutputChange", (data) => {
    console.info("output data:", data);
  });
}