@perses-dev/plugin-system 0.50.0 → 0.51.0-beta.0

package/dist/cjs/components/Variables/VariableEditorForm/VariableEditorForm.js

@@ -91,10 +91,7 @@ function TextVariableEditorForm({ action, control }) {
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                         control: control,
                         name: "spec.value",
-                        render: ({ field, fieldState })=>{
-                            var _fieldState_error;
-                            var _field_value;
-                            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                        render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                                 children: [
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_VariablePreview.VariablePreview, {
@@ -113,35 +110,31 @@ function TextVariableEditorForm({ action, control }) {
                                             readOnly: action === 'read'
                                         },
                                         error: !!fieldState.error,
-                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                        value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : '',
+                                        helperText: fieldState.error?.message,
+                                        value: field.value ?? '',
                                         onChange: (event)=>{
                                             field.onChange(event);
                                         }
                                     })
                                 ]
-                            });
-                        }
+                            })
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                         control: control,
                         name: "spec.constant",
-                        render: ({ field })=>{
-                            var _field_value;
-                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                        render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
                                 label: "Constant",
                                 control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
                                     ...field,
                                     checked: !!field.value,
                                     readOnly: action === 'read',
-                                    value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : false,
+                                    value: field.value ?? false,
                                     onChange: (event)=>{
                                         if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
                                         field.onChange(event);
                                     }
                                 })
-                            });
-                        }
+                            })
                     })
                 ]
             })
@@ -210,10 +203,7 @@ function ListVariableEditorForm({ action, control }) {
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                                     control: control,
                                     name: "spec.plugin",
-                                    render: ({ field })=>{
-                                        var _field_value, _field_value1;
-                                        var _field_value_kind, _field_value_spec;
-                                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginEditor.PluginEditor, {
+                                    render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_PluginEditor.PluginEditor, {
                                             width: "100%",
                                             pluginTypes: [
                                                 'Variable'
@@ -222,9 +212,9 @@ function ListVariableEditorForm({ action, control }) {
                                             value: {
                                                 selection: {
                                                     type: 'Variable',
-                                                    kind: (_field_value_kind = (_field_value = field.value) === null || _field_value === void 0 ? void 0 : _field_value.kind) !== null && _field_value_kind !== void 0 ? _field_value_kind : 'StaticListVariable'
+                                                    kind: field.value?.kind ?? 'StaticListVariable'
                                                 },
-                                                spec: (_field_value_spec = (_field_value1 = field.value) === null || _field_value1 === void 0 ? void 0 : _field_value1.spec) !== null && _field_value_spec !== void 0 ? _field_value_spec : {
+                                                spec: field.value?.spec ?? {
                                                     values: []
                                                 }
                                             },
@@ -235,8 +225,7 @@ function ListVariableEditorForm({ action, control }) {
                                                     spec: v.spec
                                                 });
                                             }
-                                        });
-                                    }
+                                        })
                                 })
                             })
                         ]
@@ -245,10 +234,7 @@ function ListVariableEditorForm({ action, control }) {
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                             control: control,
                             name: "spec.capturingRegexp",
-                            render: ({ field, fieldState })=>{
-                                var _fieldState_error;
-                                var _field_value;
-                                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                            render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                     ...field,
                                     label: "Capturing Regexp Filter",
                                     InputLabelProps: {
@@ -258,7 +244,7 @@ function ListVariableEditorForm({ action, control }) {
                                         readOnly: action === 'read'
                                     },
                                     error: !!fieldState.error,
-                                    value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : '',
+                                    value: field.value ?? '',
                                     onChange: (event)=>{
                                         if (event.target.value === '') {
                                             field.onChange(undefined);
@@ -266,19 +252,15 @@ function ListVariableEditorForm({ action, control }) {
                                             field.onChange(event);
                                         }
                                     },
-                                    helperText: ((_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message) ? fieldState.error.message : 'Optional, if you want to filter on captured result.'
-                                });
-                            }
+                                    helperText: fieldState.error?.message ? fieldState.error.message : 'Optional, if you want to filter on captured result.'
+                                })
                         })
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                             control: control,
                             name: "spec.sort",
-                            render: ({ field, fieldState })=>{
-                                var _fieldState_error;
-                                var _field_value;
-                                return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TextField, {
+                            render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TextField, {
                                     select: true,
                                     ...field,
                                     fullWidth: true,
@@ -290,8 +272,8 @@ function ListVariableEditorForm({ action, control }) {
                                         readOnly: action === 'read'
                                     },
                                     error: !!fieldState.error,
-                                    helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                    value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : 'none',
+                                    helperText: fieldState.error?.message,
+                                    value: field.value ?? 'none',
                                     onChange: (event)=>{
                                         field.onChange(event);
                                     },
@@ -325,8 +307,7 @@ function ListVariableEditorForm({ action, control }) {
                                             children: "Alphabetical, case-insensitive, desc"
                                         })
                                     ]
-                                });
-                            }
+                                })
                         })
                     })
                 ]
@@ -345,22 +326,19 @@ function ListVariableEditorForm({ action, control }) {
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                                 control: control,
                                 name: "spec.allowMultiple",
-                                render: ({ field })=>{
-                                    var _field_value;
-                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                                render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
                                         label: "Allow Multiple Values",
                                         control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
                                             ...field,
                                             checked: !!field.value,
                                             readOnly: action === 'read',
-                                            value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : false,
+                                            value: field.value ?? false,
                                             onChange: (event)=>{
                                                 if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
                                                 field.onChange(event);
                                             }
                                         })
-                                    });
-                                }
+                                    })
                             }),
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                                 variant: "caption",
@@ -373,22 +351,19 @@ function ListVariableEditorForm({ action, control }) {
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                                 control: control,
                                 name: "spec.allowAllValue",
-                                render: ({ field })=>{
-                                    var _field_value;
-                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                                render: ({ field })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
                                         label: "Allow All option",
                                         control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
                                             ...field,
                                             checked: !!field.value,
                                             readOnly: action === 'read',
-                                            value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : false,
+                                            value: field.value ?? false,
                                             onChange: (event)=>{
                                                 if (action === 'read') return; // ReadOnly prop is not blocking user interaction...
                                                 field.onChange(event);
                                             }
                                         })
-                                    });
-                                }
+                                    })
                             }),
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                                 mb: 1,
@@ -398,10 +373,7 @@ function ListVariableEditorForm({ action, control }) {
                             _allowAllValue && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                                 control: control,
                                 name: "spec.customAllValue",
-                                render: ({ field, fieldState })=>{
-                                    var _fieldState_error;
-                                    var _field_value;
-                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                         ...field,
                                         fullWidth: true,
                                         label: "Custom All Value",
@@ -412,8 +384,8 @@ function ListVariableEditorForm({ action, control }) {
                                             readOnly: action === 'read'
                                         },
                                         error: !!fieldState.error,
-                                        helperText: ((_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message) ? fieldState.error.message : 'When All is selected, this value will be used',
-                                        value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : '',
+                                        helperText: fieldState.error?.message ? fieldState.error.message : 'When All is selected, this value will be used',
+                                        value: field.value ?? '',
                                         onChange: (event)=>{
                                             if (event.target.value === '') {
                                                 field.onChange(undefined);
@@ -421,8 +393,7 @@ function ListVariableEditorForm({ action, control }) {
                                                 field.onChange(event);
                                             }
                                         }
-                                    });
-                                }
+                                    })
                             })
                         ]
                     })
@@ -446,11 +417,10 @@ function VariableEditorForm({ initialVariableDefinition, action, isDraft, isRead
         name: 'kind'
     });
     function clearFormData(data) {
-        var _result_spec_display, _result_spec_display1, _result_spec_display2;
         const result = {
             ...data
         };
-        if (((_result_spec_display = result.spec.display) === null || _result_spec_display === void 0 ? void 0 : _result_spec_display.name) === undefined && ((_result_spec_display1 = result.spec.display) === null || _result_spec_display1 === void 0 ? void 0 : _result_spec_display1.description) === undefined && ((_result_spec_display2 = result.spec.display) === null || _result_spec_display2 === void 0 ? void 0 : _result_spec_display2.hidden) === undefined) {
+        if (result.spec.display?.name === undefined && result.spec.display?.description === undefined && result.spec.display?.hidden === undefined) {
             delete result.spec.display;
         }
         return result;
@@ -517,10 +487,7 @@ function VariableEditorForm({ initialVariableDefinition, action, isDraft, isRead
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                                     control: form.control,
                                     name: "spec.name",
-                                    render: ({ field, fieldState })=>{
-                                        var _fieldState_error;
-                                        var _field_value;
-                                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                             ...field,
                                             required: true,
                                             fullWidth: true,
@@ -533,13 +500,12 @@ function VariableEditorForm({ initialVariableDefinition, action, isDraft, isRead
                                                 readOnly: action === 'read'
                                             },
                                             error: !!fieldState.error,
-                                            helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                            value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : '',
+                                            helperText: fieldState.error?.message,
+                                            value: field.value ?? '',
                                             onChange: (event)=>{
                                                 field.onChange(event);
                                             }
-                                        });
-                                    }
+                                        })
                                 })
                             }),
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
@@ -548,10 +514,7 @@ function VariableEditorForm({ initialVariableDefinition, action, isDraft, isRead
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                                     control: form.control,
                                     name: "spec.display.name",
-                                    render: ({ field, fieldState })=>{
-                                        var _fieldState_error;
-                                        var _field_value;
-                                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                             ...field,
                                             fullWidth: true,
                                             label: "Display Label",
@@ -562,13 +525,12 @@ function VariableEditorForm({ initialVariableDefinition, action, isDraft, isRead
                                                 readOnly: action === 'read'
                                             },
                                             error: !!fieldState.error,
-                                            helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                            value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : '',
+                                            helperText: fieldState.error?.message,
+                                            value: field.value ?? '',
                                             onChange: (event)=>{
                                                 field.onChange(event);
                                             }
-                                        });
-                                    }
+                                        })
                                 })
                             }),
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
@@ -577,10 +539,7 @@ function VariableEditorForm({ initialVariableDefinition, action, isDraft, isRead
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                                     control: form.control,
                                     name: "spec.display.description",
-                                    render: ({ field, fieldState })=>{
-                                        var _fieldState_error;
-                                        var _field_value;
-                                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                             ...field,
                                             fullWidth: true,
                                             label: "Description",
@@ -591,13 +550,12 @@ function VariableEditorForm({ initialVariableDefinition, action, isDraft, isRead
                                                 readOnly: action === 'read'
                                             },
                                             error: !!fieldState.error,
-                                            helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                            value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : '',
+                                            helperText: fieldState.error?.message,
+                                            value: field.value ?? '',
                                             onChange: (event)=>{
                                                 field.onChange(event);
                                             }
-                                        });
-                                    }
+                                        })
                                 })
                             }),
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
@@ -606,10 +564,7 @@ function VariableEditorForm({ initialVariableDefinition, action, isDraft, isRead
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacthookform.Controller, {
                                     control: form.control,
                                     name: "kind",
-                                    render: ({ field, fieldState })=>{
-                                        var _fieldState_error;
-                                        var _field_value;
-                                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                    render: ({ field, fieldState })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                             select: true,
                                             ...field,
                                             fullWidth: true,
@@ -621,8 +576,8 @@ function VariableEditorForm({ initialVariableDefinition, action, isDraft, isRead
                                                 readOnly: action === 'read'
                                             },
                                             error: !!fieldState.error,
-                                            helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                            value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : 'TextVariable',
+                                            helperText: fieldState.error?.message,
+                                            value: field.value ?? 'TextVariable',
                                             onChange: (event)=>{
                                                 field.onChange(event);
                                             },
@@ -630,8 +585,7 @@ function VariableEditorForm({ initialVariableDefinition, action, isDraft, isRead
                                                     value: v.kind,
                                                     children: v.label
                                                 }, v.kind))
-                                        });
-                                    }
+                                        })
                                 })
                             })
                         ]

package/dist/cjs/components/Variables/VariableEditorForm/VariablePreview.js

@@ -91,7 +91,7 @@ function VariablePreview(props) {
         setMaxValues(undefined);
     };
     let notShown = 0;
-    if (values && (values === null || values === void 0 ? void 0 : values.length) > 0 && maxValues) {
+    if (values && values?.length > 0 && maxValues) {
         notShown = values.length - maxValues;
     }
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
@@ -118,7 +118,7 @@ function VariablePreview(props) {
                         description: _constants.TOOLTIP_TEXT.copyVariableValues,
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
                             onClick: async ()=>{
-                                if (values === null || values === void 0 ? void 0 : values.length) {
+                                if (values?.length) {
                                     await navigator.clipboard.writeText(values.map((value)=>value).join(', '));
                                     infoSnackbar('Preview values copied to clipboard!');
                                 }
@@ -143,7 +143,7 @@ function VariablePreview(props) {
                             severity: "error",
                             children: error
                         }),
-                        (values === null || values === void 0 ? void 0 : values.length) === 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
+                        values?.length === 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
                             severity: "info",
                             children: "No results"
                         }),
@@ -155,7 +155,7 @@ function VariablePreview(props) {
                             },
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {})
                         }),
-                        values === null || values === void 0 ? void 0 : values.slice(0, maxValues).map((val, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+                        values?.slice(0, maxValues).map((val, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
                                 size: "small",
                                 label: val
                             }, index)),
@@ -174,9 +174,9 @@ function VariablePreview(props) {
 function VariableListPreview(props) {
     const { definition, onRefresh } = props;
     const { data, isFetching, error } = (0, _variablemodel.useListVariablePluginValues)(definition);
-    const errorMessage = error === null || error === void 0 ? void 0 : error.message;
+    const errorMessage = error?.message;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(VariablePreview, {
-        values: (data === null || data === void 0 ? void 0 : data.map((val)=>val.value)) || [],
+        values: data?.map((val)=>val.value) || [],
         onRefresh: onRefresh,
         isLoading: isFetching,
         error: errorMessage

package/dist/cjs/components/Variables/VariableEditorForm/variable-editor-form-model.js

@@ -29,11 +29,9 @@ _export(exports, {
     }
 });
 function getInitialState(initialVariableDefinition) {
-    var _initialVariableDefinition_spec_display, _initialVariableDefinition_spec_display1;
-    var _initialVariableDefinition_spec_value, _initialVariableDefinition_spec_constant;
     const textVariableFields = {
-        value: (_initialVariableDefinition_spec_value = initialVariableDefinition.spec.value) !== null && _initialVariableDefinition_spec_value !== void 0 ? _initialVariableDefinition_spec_value : '',
-        constant: (_initialVariableDefinition_spec_constant = initialVariableDefinition.spec.constant) !== null && _initialVariableDefinition_spec_constant !== void 0 ? _initialVariableDefinition_spec_constant : false
+        value: initialVariableDefinition.spec.value ?? '',
+        constant: initialVariableDefinition.spec.constant ?? false
     };
     const listVariableFields = {
         allowMultiple: false,
@@ -47,21 +45,18 @@ function getInitialState(initialVariableDefinition) {
         }
     };
     if (initialVariableDefinition.kind === 'ListVariable') {
-        var _initialVariableDefinition_spec_allowMultiple;
-        listVariableFields.allowMultiple = (_initialVariableDefinition_spec_allowMultiple = initialVariableDefinition.spec.allowMultiple) !== null && _initialVariableDefinition_spec_allowMultiple !== void 0 ? _initialVariableDefinition_spec_allowMultiple : false;
-        var _initialVariableDefinition_spec_allowAllValue;
-        listVariableFields.allowAllValue = (_initialVariableDefinition_spec_allowAllValue = initialVariableDefinition.spec.allowAllValue) !== null && _initialVariableDefinition_spec_allowAllValue !== void 0 ? _initialVariableDefinition_spec_allowAllValue : false;
+        listVariableFields.allowMultiple = initialVariableDefinition.spec.allowMultiple ?? false;
+        listVariableFields.allowAllValue = initialVariableDefinition.spec.allowAllValue ?? false;
         listVariableFields.customAllValue = initialVariableDefinition.spec.customAllValue;
         listVariableFields.capturingRegexp = initialVariableDefinition.spec.capturingRegexp;
         listVariableFields.sort = initialVariableDefinition.spec.sort;
         listVariableFields.plugin = initialVariableDefinition.spec.plugin;
     }
-    var _initialVariableDefinition_spec_display_name, _initialVariableDefinition_spec_display_description;
     return {
         name: initialVariableDefinition.spec.name,
-        title: (_initialVariableDefinition_spec_display_name = (_initialVariableDefinition_spec_display = initialVariableDefinition.spec.display) === null || _initialVariableDefinition_spec_display === void 0 ? void 0 : _initialVariableDefinition_spec_display.name) !== null && _initialVariableDefinition_spec_display_name !== void 0 ? _initialVariableDefinition_spec_display_name : '',
+        title: initialVariableDefinition.spec.display?.name ?? '',
         kind: initialVariableDefinition.kind,
-        description: (_initialVariableDefinition_spec_display_description = (_initialVariableDefinition_spec_display1 = initialVariableDefinition.spec.display) === null || _initialVariableDefinition_spec_display1 === void 0 ? void 0 : _initialVariableDefinition_spec_display1.description) !== null && _initialVariableDefinition_spec_display_description !== void 0 ? _initialVariableDefinition_spec_display_description : '',
+        description: initialVariableDefinition.spec.display?.description ?? '',
         listVariableFields,
         textVariableFields
     };

package/dist/cjs/components/Variables/variable-model.js

@@ -74,17 +74,14 @@ function useListVariablePluginValues(definition) {
     const spec = definition.spec.plugin.spec;
     const capturingRegexp = definition.spec.capturingRegexp !== undefined ? new RegExp(definition.spec.capturingRegexp, 'g') : undefined;
     let dependsOnVariables;
-    if (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.dependsOn) {
+    if (variablePlugin?.dependsOn) {
         const dependencies = variablePlugin.dependsOn(spec, variablePluginCtx);
         dependsOnVariables = dependencies.variables;
     }
     const variables = (0, _runtime.useAllVariableValues)(dependsOnVariables);
     let waitToLoad = false;
     if (dependsOnVariables) {
-        waitToLoad = dependsOnVariables.some((v)=>{
-            var _variables_v;
-            return (_variables_v = variables[v]) === null || _variables_v === void 0 ? void 0 : _variables_v.loading;
-        });
+        waitToLoad = dependsOnVariables.some((v)=>variables[v]?.loading);
     }
     const variablesValueKey = getVariableValuesKey(variables);
     return (0, _reactquery.useQuery)({
@@ -95,11 +92,11 @@ function useListVariablePluginValues(definition) {
             refreshKey
         ],
         queryFn: async ()=>{
-            const resp = await (variablePlugin === null || variablePlugin === void 0 ? void 0 : variablePlugin.getVariableOptions(spec, {
+            const resp = await variablePlugin?.getVariableOptions(spec, {
                 datasourceStore,
                 variables,
                 timeRange
-            }));
+            });
             if (resp === undefined) {
                 return [];
             }

package/dist/cjs/components/index.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", {
 _export_star(require("./CalculationSelector"), exports);
 _export_star(require("./DatasourceEditorForm"), exports);
 _export_star(require("./DatasourceSelect"), exports);
+_export_star(require("./HTTPSettingsEditor"), exports);
 _export_star(require("./LegendOptionsEditor"), exports);
 _export_star(require("./MultiQueryEditor"), exports);
 _export_star(require("./OptionsEditorRadios"), exports);
@@ -29,6 +30,7 @@ _export_star(require("./PluginSpecEditor"), exports);
 _export_star(require("./TimeRangeControls"), exports);
 _export_star(require("./Variables"), exports);
 _export_star(require("./ProjectSelect"), exports);
+_export_star(require("./MetricLabelInput"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/index.js

@@ -21,6 +21,7 @@ _export_star(require("./runtime"), exports);
 _export_star(require("./test-utils"), exports);
 _export_star(require("./utils"), exports);
 _export_star(require("./context"), exports);
+_export_star(require("./remote"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/model/explore.js

@@ -0,0 +1,16 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/dist/cjs/remote/PersesPlugin.types.js

@@ -0,0 +1,16 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/dist/cjs/remote/PluginLoaderComponent.js

@@ -0,0 +1,75 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */ // Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PluginLoaderComponent", {
+    enumerable: true,
+    get: function() {
+        return PluginLoaderComponent;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _PluginRuntime = require("./PluginRuntime");
+function PluginContainer({ pluginFn, props }) {
+    return pluginFn(props);
+}
+function PluginLoaderComponent({ plugin, props, field }) {
+    const { loadPlugin } = (0, _PluginRuntime.usePluginRuntime)({
+        plugin
+    });
+    const [pluginModule, setPluginModule] = (0, _react.useState)(null);
+    const [error, setError] = (0, _react.useState)(null);
+    const name = `${plugin.moduleName}-${plugin.name}`;
+    const previousPluginName = (0, _react.useRef)(name);
+    (0, _react.useEffect)(()=>{
+        previousPluginName.current = name;
+        setError(null);
+        loadPlugin().then((module)=>{
+            setPluginModule(module);
+        }).catch((error)=>{
+            setPluginModule(null);
+            console.error(`PluginLoaderComponent: Error loading plugin ${plugin.name} from module ${plugin.moduleName}:`, error);
+            setError(new Error(`PluginLoaderComponent: Error loading plugin ${plugin.name} from module ${plugin.moduleName}`));
+        });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        name
+    ]);
+    if (error) {
+        throw error;
+    }
+    if (!pluginModule) {
+        return null;
+    }
+    let pluginFunction = pluginModule[plugin.name];
+    if (field && pluginFunction && typeof pluginFunction === 'object' && field in pluginFunction) {
+        pluginFunction = pluginFunction[field];
+    }
+    if (!pluginFunction) {
+        throw new Error(`PluginLoaderComponent: Plugin module ${plugin.moduleName} does not have a ${plugin.name} export`);
+    }
+    if (typeof pluginFunction !== 'function') {
+        throw new Error(`PluginLoaderComponent: Plugin ${plugin.name} export is not a function`);
+    }
+    // make sure to re mount the plugin when changes, to avoid mismatch in hooks ordering when re rendering
+    if (previousPluginName.current !== name) {
+        return null;
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(PluginContainer, {
+        pluginFn: pluginFunction,
+        props: props
+    }, name);
+}