Forge Parser

Forge Parser is a tool that automates the generation of extensibility SDKs from Vuex / Redux stores, enabling seamless integration between platform applications and plugins via iframe-based messaging.

Overview

The tool analyzes your Vuex or Redux store, generates an SDK client-side JavaScript file, and creates a server-side component to manage communications. It facilitates plugin extensibility through well-defined extension points and interaction with store getters, actions, and mutations, without requiring manual SDK wiring.

This SDK generation simplifies adding custom plugins or modules to your platform by providing a standardized interface for communication and state management.

Key Features

• Automated SDK Generation: Scans Vuex stores and produces client SDKs and server components.
• Bidirectional Messaging: Allows plugins to send and receive messages using postMessage.
• Extensibility API: Supports plugin registration at predefined extension points (e.g., sidebars, toolbars).
• State Access: Provides direct access to Vuex store actions, getters, and mutations from plugins.
• Role-Based Permissioning: Manage different SDKs based on user roles.
• TypeScript Support: Full TypeScript support for SDK generation and client-server interactions.
• Comment-Based Documentation: Automatically extracts and documents param types from store comments.

Installation

Install the forge-vuex-parser into your Vuex project:

yarn add forge-vuex-parser

Usage

Generate SDK

Run the SDK generation tool and provide inputs like namespace and extension points. This will generate the SDK files in the directory matching the given namespace.

yarn forgify

Example: Input: namespace: vulcan, register points: left-sidebar, right-sidebar Output:

• vulcan.client.js: Client SDK file.
• SdkServer.vue: Server component for iframe communication.
• vulcan.json: Settings and configuration file.

To generate SDK from a pre-configured JSON file:

yarn forgify --json config.json

Role-Based Permission Management

yarn forgify --map config_folder/

This generates separate SDKs and configurations for roles like internal, partner, and public, each with their own set of allowed actions and extension points.

Comment-Based Parameter Documentation

To ensure proper documentation of your SDK methods, use the following format in your Vuex store:

/**
 * Sets the loading state.
 * @param {boolean} loading - Whether the app is loading.
 */

The generated output will include param type documentation, ensuring your SDK is properly documented.

Build & Publish

Build the project using TypeScript:

npx tsc

Publish your package to NPM:

npm publish

License

MIT