Overview
The ObjectSubscription component manages property subscriptions for a single Designer object. It displays the object’s type, provides a remove button, and contains a table of property subscriptions. For Resource objects, it also displays additional resource information.
This component automatically subscribes to the object’s type and checks if it’s a Resource instance using LiveUpdate Python expressions.
Source: src/components/ObjectSubscription.vue
Props
liveUpdate
UseLiveUpdateReturn
required
The LiveUpdate instance used to create property subscriptions.
The name of the Designer object to subscribe to (e.g., screen2:surface_1).
Events
Emitted when the user clicks the remove button to delete this object subscription.
Features
Automatic Type Detection
The component automatically subscribes to detect the object’s type and whether it’s a Resource:
const { type, isResource } = props.liveUpdate.subscribe(
props.objectName, {
type: 'type(object)',
isResource: 'isinstance(object, Resource)'
},
{ updateFrequencyMs: 1000 }
);
src/components/ObjectSubscription.vue:94
Persistent Property Subscriptions
Property subscriptions are stored in local storage with a unique key per object:
const storageKey = `disguise-liveupdate-tester-objectsubscription-${props.objectName}`;
const subscriptions = useStorage<PropertySubscriptionConfig[]>(storageKey, []);
src/components/ObjectSubscription.vue:64
Storage Migration
The component handles upgrading from an old storage format (array of strings) to the new format (array of objects with property and options):
const raw = localStorage.getItem(storageKey);
if (raw) {
try {
const parsed = JSON.parse(raw);
if (Array.isArray(parsed) && parsed.every(item => typeof item === 'string')) {
localStorage.setItem(storageKey, JSON.stringify(
parsed.map((property: string) => ({ property, options: {} }))
));
}
} catch (e) {
localStorage.removeItem(storageKey);
}
}
src/components/ObjectSubscription.vue:67
For objects that are Resources, the component conditionally renders the ResourceInfo component:
<ResourceInfo
v-if="isResource"
:liveUpdate="liveUpdate"
:objectName="objectName"
/>
Usage
<ObjectSubscription
:liveUpdate="liveUpdate"
:objectName="'screen2:surface_1'"
@remove="handleRemove"
/>
Component Structure
The component renders:
- A remove button (with trash icon)
- Object name heading with type badge
ResourceInfo component (if object is a Resource)- Table of property subscriptions
PropertyInput component for adding new subscriptions
<div class="subscription-box">
<button class="remove-button" @click="$emit('remove')" aria-label="Remove">
<img src="../assets/icons/trash.svg" alt="Remove" width="16" height="16" />
</button>
<h3>{{ objectName }} <code>[{{ type }}]</code></h3>
<ResourceInfo
v-if="isResource"
:liveUpdate="liveUpdate"
:objectName="objectName"
/>
<table>
<thead>
<tr>
<th>Property</th>
<th>Value</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<PropertySubscription
v-for="sub in subscriptions"
:key="sub.property"
:liveUpdate="liveUpdate"
:objectName="objectName"
:property="sub.property"
:options="sub.options"
@unsubscribe="unsubscribe"
/>
</tbody>
</table>
<PropertyInput
:objectName="objectName"
@subscribe="subscribe"
/>
</div>
Methods
subscribe()
Adds a new property subscription with the specified options. Prevents duplicate subscriptions on the same property.
Location: src/components/ObjectSubscription.vue:82
const subscribe = ({property, options = {}}: {property: string, options: SubscriptionConfiguration}) => {
const p = property.trim();
if (!subscriptions.value.some(sub => sub.property === p)) {
subscriptions.value.push({ property: p, options });
}
};
unsubscribe(property: string)
Removes a property subscription from the list.
Location: src/components/ObjectSubscription.vue:90
const unsubscribe = (property: string) => {
subscriptions.value = subscriptions.value.filter(sub => sub.property !== property);
};