forge-vuex-parser

A parser for Vuex dispatcher to enable SDK generation

It uses Recast library to detect and parse Vuex store and generates extensibility sdk files based on vuex store.

Key Features

• Listen for SDK scripts to be ready and might get the server current context data as a param Example:

    const init = (args) => console.log(args);
    YOUR_SDK_NAMESPACE.onReady(init);

• To enable access to vuex store getters, actions and mutations from the client.

  Example:

    YOUR_SDK_NAMESPACE.getters.chart.translate((data) => console.log(data))
    YOUR_SDK_NAMESPACE.actions.chart.setScale(1.5);

• To allow user to register buttons on the agreed extension points

  Example:

      YOUR_SDK_NAMESPACE.register.sidebar({
        SVGicon: ICON_IMAGE,
        name: "any_kind_name",
        tooltip: "Explicit explanation",
        onClick: () => {
            ....
        }
      });
  

Build

You should compile your TypeScript code to JavaScript with the following command:

  npx tsc

And it will build into dist folder

Install & Generate Scripts

It's straightforward to install this library into existing vuex application and run to generate sdk files.

yarn add forge-vuex-parser
yarn forgify

One of the key features of the SDK is to allow user to register the extensibility points in known position and trigger the plugin action from those buttons, when you run yarn forgify, it will prompt you to input extension points that is the comma delimitered string. For example, you can input top, sidebar.

sdk.client.js, SdkServer.vue and two examples which illustrate how to use this extensibility SDK will be generated inside directory named after your inputted namespace. (For example, forge)

• sdk.client.js: This is the client version of extensible SDK and you can include it just like a normal javascript file.

    <script src="./sdk.client.js" type="text/javascript"></script>

  Once included, you can use the powerful features of extensibility client scripts.

• SdkServer.vue: The server version of extensibility SDK, which mainly covers communication between with your client scripts via iFrame. It needs your manual touch, however, to work exactly like it should.

  After the above adjustment, you need to include the SdkServer.vue into your application. For demonstration purpose, I am including it in directly into App.vue, but it's totally fine for you to include anywhere inside your application.

  <template>
    <v-app id="app">
      <v-main>
        ...
        <SdkServer />
      </v-main>
    </v-app>
  </template>
  <script>
  ...
  import SdkServer from "./components/SdkServer.vue";
  
  export default {
    name: 'App',
    components: {
      ...
      SdkServer
    }
  }
  </script>
  

Examples

We've included two typical examples to help you get started with the application.

Try SDK Example

It's generated inside TrySDKExample folder. As it is a typical vue application, all you need to run the example is

   yarn (or npm install)
   yarn serve

This example is designed for you to try the generated SDK methods based on your application vuex store. In this example, you will find the actions, mutations and getters of your vuex store ready to try.

As this example will be served at 8087 port, you will have to change your SdkServer.vue url as http://localhost:8087.

  url: "http://localhost:8087",

Register Extension Points Example

One of the key features of the SDK is to allow user to register the extensibility points in known position and trigger the plugin action from those buttons. You will be prompted to input the extension points as comma delimitered string and based on your input, it will allow you add buttons on the registered extension points, for example, like this.

forgifySDK.register.sidebar({
  SVGicon: ICON_IMAGE,
  name: "sidebar",
  tooltip: "Sidebar",
  onClick: () => {
      ....
  }
});

The example illustrates how you can inject buttons. As it's for illustration purpose only, it will just inject buttons and show alert when you click on button. This example is self-contained and the client script is written in main.html All you have to do to run this example is

  yarn (or npm install)
  yarn serve