Skip to main content
This guide will help you set up your development environment and start contributing to the LiveUpdate Tester plugin.

​
Prerequisites

Before you begin, ensure you have the following installed:
The project uses VS Code Dev Containers to provide a consistent development environment with all necessary dependencies pre-configured.

​
Getting Started

1

Clone the Repository

Clone the repository and navigate to the project directory:
git clone https://github.com/disguise-one/Designer_Plugin-Live_Update.git
cd Designer_Plugin-Live_Update
2

Open in VS Code

Open the project folder in Visual Studio Code:
code .
3

Reopen in Container

When prompted, click Reopen in Container. If you don’t see the prompt:
  1. Press F1 to open the command palette
  2. Type Dev Containers: Reopen in Container
  3. Select the command
The container uses the mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm image with Node.js 22 and TypeScript pre-installed.
The Dev Container will automatically run npm install after creation to install all dependencies.
4

Start the Development Server

Once the container is built and running, open a terminal in VS Code and start the development server:
npm run serve
The development server will start on port 5173.
5

Test in Your Browser

Open your browser and navigate to:
http://localhost:5173?director=localhost:80
This assumes Designer is running on localhost at port 80. Adjust the director query parameter if your Designer instance is running on a different host or port.

​
Development Workflow

​
Project Structure

The project is organized as follows:
  • src/components/ - Vue components for managing subscriptions:
    • SubscriptionManager.vue - Main component for adding/removing object subscriptions
    • ObjectSubscription.vue - Displays and manages subscriptions for a single object
    • PropertySubscription.vue - Individual property subscription with live value display
    • PropertyInput.vue - Input component for adding new property subscriptions
    • ResourceInfo.vue - Displays resource-specific information
  • src/App.vue - Main application component
  • src/main.ts - Application entry point
  • src/liveupdate_tester.py - Python module for autocomplete functionality

​
Making Changes

1

Make Your Changes

Edit the source files in the src/ directory. The Vite development server will automatically reload when you save changes.
2

Test Your Changes

Test your changes in the browser with a running Designer instance. The plugin requires an active Designer session to function properly.
The plugin is configured with "requiresSession": true in d3plugin.json, so it will only work when Designer has an active session.
3

Build the Plugin

Before committing, ensure the plugin builds successfully:
npm run build
This will create the production build in the dist/ directory.

​
Key Libraries

The project uses the following key dependencies:

​
Hot Module Replacement

The development server uses Vite’s HMR (Hot Module Replacement) to provide instant feedback:
  • Vue component changes are reflected immediately
  • The application state is preserved when possible
  • Full page reload occurs only when necessary

​
Tips for Contributors

  • The project uses TypeScript for type safety
  • Vue Volar extension is pre-configured in the Dev Container for enhanced Vue 3 support
  • Use the browser’s Developer Tools to debug LiveUpdate connections and subscriptions
  • Check the console for Python module registration messages

​
License

This project is licensed under the MIT License. See the LICENSE file for details.

Build docs developers (and LLMs) love

Get started for freeTalk to us