@lvce-editor/settings-view 2.26.2 → 2.27.1

package/dist/settingsViewWorkerMain.js

@@ -62,8 +62,8 @@ class AssertionError extends Error {
 }
 const Object$1 = 1;
 const Number$2 = 2;
-const Array$1 = 3;
-const String$1 = 4;
+const Array$1$1 = 3;
+const String$2 = 4;
 const Boolean$2 = 5;
 const Function = 6;
 const Null = 7;
@@ -75,13 +75,13 @@ const getType = value => {
     case 'function':
       return Function;
     case 'string':
-      return String$1;
+      return String$2;
     case 'object':
       if (value === null) {
         return Null;
       }
       if (Array.isArray(value)) {
-        return Array$1;
+        return Array$1$1;
       }
       return Object$1;
     case 'boolean':
@@ -139,7 +139,6 @@ const walkValue = (value, transferrables, isTransferrable) => {
     for (const property of Object.values(value)) {
       walkValue(property, transferrables, isTransferrable);
     }
-    return;
   }
 };
 const getTransferrables = value => {
@@ -293,7 +292,14 @@ class IpcError extends VError {
       const cause = new Error(message);
       // @ts-ignore
       cause.code = code;
-      cause.stack = stack;
+      if (stack) {
+        Object.defineProperty(cause, 'stack', {
+          configurable: true,
+          enumerable: false,
+          value: stack,
+          writable: true
+        });
+      }
       super(cause, betterMessage);
     } else {
       super(betterMessage);
@@ -450,7 +456,7 @@ const getFirstEvent = (eventEmitter, eventMap) => {
   return promise;
 };
 const Message$1 = 3;
-const create$5 = async ({
+const create$5$1 = async ({
   isMessagePortOpen,
   messagePort
 }) => {
@@ -501,11 +507,32 @@ const wrap$5 = messagePort => {
 };
 const IpcParentWithMessagePort$1 = {
   __proto__: null,
-  create: create$5,
+  create: create$5$1,
   signal: signal$1,
   wrap: wrap$5
 };
 
+class CommandNotFoundError extends Error {
+  constructor(command) {
+    super(`Command not found ${command}`);
+    this.name = 'CommandNotFoundError';
+  }
+}
+const commands = Object.create(null);
+const register = commandMap => {
+  Object.assign(commands, commandMap);
+};
+const getCommand = key => {
+  return commands[key];
+};
+const execute = (command, ...args) => {
+  const fn = getCommand(command);
+  if (!fn) {
+    throw new CommandNotFoundError(command);
+  }
+  return fn(...args);
+};
+
 const Two$1 = '2.0';
 const callbacks = Object.create(null);
 const get$2 = id => {
@@ -530,12 +557,12 @@ const getErrorConstructor = (message, type) => {
     switch (type) {
       case DomException:
         return DOMException;
-      case TypeError$1:
-        return TypeError;
-      case SyntaxError$1:
-        return SyntaxError;
       case ReferenceError$1:
         return ReferenceError;
+      case SyntaxError$1:
+        return SyntaxError;
+      case TypeError$1:
+        return TypeError;
       default:
         return Error;
     }
@@ -559,7 +586,10 @@ const constructError = (message, type, name) => {
   if (ErrorConstructor === Error) {
     const error = new Error(message);
     if (name && name !== 'VError') {
-      error.name = name;
+      Object.defineProperty(error, 'name', {
+        configurable: true,
+        value: name
+      });
     }
     return error;
   }
@@ -576,8 +606,10 @@ const getCurrentStack = () => {
   const currentStack = joinLines(splitLines(new Error().stack || '').slice(stackLinesToSkip));
   return currentStack;
 };
-const getNewLineIndex = (string, startIndex = undefined) => {
-  return string.indexOf(NewLine, startIndex);
+const getNewLineIndex = (string, startIndex) => {
+  {
+    return string.indexOf(NewLine);
+  }
 };
 const getParentStack = error => {
   let parentStack = error.stack || error.data || error.message || '';
@@ -588,55 +620,91 @@ const getParentStack = error => {
 };
 const MethodNotFound = -32601;
 const Custom = -32001;
+const setStack = (error, stack) => {
+  const descriptor = Object.getOwnPropertyDescriptor(error, 'stack');
+  if (descriptor) {
+    if (!descriptor.configurable && !descriptor.writable) {
+      return;
+    }
+    if (!descriptor.configurable && descriptor.writable) {
+      error.stack = stack;
+      return;
+    }
+  }
+  Object.defineProperty(error, 'stack', {
+    configurable: true,
+    value: stack,
+    writable: true
+  });
+};
+const restoreExistingError = (error, currentStack) => {
+  if (typeof error.stack === 'string') {
+    setStack(error, `${error.stack}${NewLine}${currentStack}`);
+  }
+  return error;
+};
+const restoreMethodNotFoundError = (error, currentStack) => {
+  const restoredError = new JsonRpcError(error.message);
+  const parentStack = getParentStack(error);
+  setStack(restoredError, `${parentStack}${NewLine}${currentStack}`);
+  return restoredError;
+};
+const restoreStackFromData = (restoredError, error, currentStack) => {
+  if (error.data.stack && error.data.type && error.message) {
+    setStack(restoredError, `${error.data.type}: ${error.message}${NewLine}${error.data.stack}${NewLine}${currentStack}`);
+    return;
+  }
+  if (error.data.stack) {
+    setStack(restoredError, error.data.stack);
+  }
+};
+const applyDataProperties = (restoredError, error) => {
+  restoreStackFromData(restoredError, error, getCurrentStack());
+  if (error.data.codeFrame) {
+    // @ts-ignore
+    restoredError.codeFrame = error.data.codeFrame;
+  }
+  if (error.data.code) {
+    // @ts-ignore
+    restoredError.code = error.data.code;
+  }
+  if (error.data.type) {
+    // @ts-ignore
+    restoredError.name = error.data.type;
+  }
+};
+const applyDirectProperties = (restoredError, error) => {
+  if (error.stack) {
+    const lowerStack = restoredError.stack || '';
+    const indexNewLine = getNewLineIndex(lowerStack);
+    const parentStack = getParentStack(error);
+    // @ts-ignore
+    setStack(restoredError, `${parentStack}${lowerStack.slice(indexNewLine)}`);
+  }
+  if (error.codeFrame) {
+    // @ts-ignore
+    restoredError.codeFrame = error.codeFrame;
+  }
+};
+const restoreMessageError = (error, _currentStack) => {
+  const restoredError = constructError(error.message, error.type, error.name);
+  if (error.data) {
+    applyDataProperties(restoredError, error);
+  } else {
+    applyDirectProperties(restoredError, error);
+  }
+  return restoredError;
+};
 const restoreJsonRpcError = error => {
   const currentStack = getCurrentStack();
   if (error && error instanceof Error) {
-    if (typeof error.stack === 'string') {
-      error.stack = error.stack + NewLine + currentStack;
-    }
-    return error;
+    return restoreExistingError(error, currentStack);
   }
   if (error && error.code && error.code === MethodNotFound) {
-    const restoredError = new JsonRpcError(error.message);
-    const parentStack = getParentStack(error);
-    restoredError.stack = parentStack + NewLine + currentStack;
-    return restoredError;
+    return restoreMethodNotFoundError(error, currentStack);
   }
   if (error && error.message) {
-    const restoredError = constructError(error.message, error.type, error.name);
-    if (error.data) {
-      if (error.data.stack && error.data.type && error.message) {
-        restoredError.stack = error.data.type + ': ' + error.message + NewLine + error.data.stack + NewLine + currentStack;
-      } else if (error.data.stack) {
-        restoredError.stack = error.data.stack;
-      }
-      if (error.data.codeFrame) {
-        // @ts-ignore
-        restoredError.codeFrame = error.data.codeFrame;
-      }
-      if (error.data.code) {
-        // @ts-ignore
-        restoredError.code = error.data.code;
-      }
-      if (error.data.type) {
-        // @ts-ignore
-        restoredError.name = error.data.type;
-      }
-    } else {
-      if (error.stack) {
-        const lowerStack = restoredError.stack || '';
-        // @ts-ignore
-        const indexNewLine = getNewLineIndex(lowerStack);
-        const parentStack = getParentStack(error);
-        // @ts-ignore
-        restoredError.stack = parentStack + lowerStack.slice(indexNewLine);
-      }
-      if (error.codeFrame) {
-        // @ts-ignore
-        restoredError.codeFrame = error.codeFrame;
-      }
-    }
-    return restoredError;
+    return restoreMessageError(error);
   }
   if (typeof error === 'string') {
     return new Error(`JsonRpc Error: ${error}`);
@@ -691,56 +759,56 @@ const getErrorProperty = (error, prettyError) => {
   if (error && error.code === E_COMMAND_NOT_FOUND) {
     return {
       code: MethodNotFound,
-      message: error.message,
-      data: error.stack
+      data: error.stack,
+      message: error.message
     };
   }
   return {
     code: Custom,
-    message: prettyError.message,
     data: {
-      stack: getStack(prettyError),
-      codeFrame: prettyError.codeFrame,
-      type: getErrorType(prettyError),
       code: prettyError.code,
-      name: prettyError.name
-    }
+      codeFrame: prettyError.codeFrame,
+      name: prettyError.name,
+      stack: getStack(prettyError),
+      type: getErrorType(prettyError)
+    },
+    message: prettyError.message
   };
 };
-const create$1$2 = (id, error) => {
+const create$1$1 = (id, error) => {
   return {
-    jsonrpc: Two$1,
+    error,
     id,
-    error
+    jsonrpc: Two$1
   };
 };
 const getErrorResponse = (id, error, preparePrettyError, logError) => {
   const prettyError = preparePrettyError(error);
   logError(error, prettyError);
   const errorProperty = getErrorProperty(error, prettyError);
-  return create$1$2(id, errorProperty);
+  return create$1$1(id, errorProperty);
 };
-const create$3 = (message, result) => {
+const create$a = (message, result) => {
   return {
-    jsonrpc: Two$1,
     id: message.id,
+    jsonrpc: Two$1,
     result: result ?? null
   };
 };
 const getSuccessResponse = (message, result) => {
   const resultProperty = result ?? null;
-  return create$3(message, resultProperty);
+  return create$a(message, resultProperty);
 };
 const getErrorResponseSimple = (id, error) => {
   return {
-    jsonrpc: Two$1,
-    id,
     error: {
       code: Custom,
+      data: error,
       // @ts-ignore
-      message: error.message,
-      data: error
-    }
+      message: error.message
+    },
+    id,
+    jsonrpc: Two$1
   };
 };
 const getResponse = async (message, ipc, execute, preparePrettyError, logError, requiresSocket) => {
@@ -770,35 +838,35 @@ const normalizeParams = args => {
   if (args.length === 1) {
     const options = args[0];
     return {
+      execute: options.execute,
       ipc: options.ipc,
+      logError: options.logError || defaultLogError,
       message: options.message,
-      execute: options.execute,
-      resolve: options.resolve || defaultResolve,
       preparePrettyError: options.preparePrettyError || defaultPreparePrettyError,
-      logError: options.logError || defaultLogError,
-      requiresSocket: options.requiresSocket || defaultRequiresSocket
+      requiresSocket: options.requiresSocket || defaultRequiresSocket,
+      resolve: options.resolve || defaultResolve
     };
   }
   return {
+    execute: args[2],
     ipc: args[0],
+    logError: args[5],
     message: args[1],
-    execute: args[2],
-    resolve: args[3],
     preparePrettyError: args[4],
-    logError: args[5],
-    requiresSocket: args[6]
+    requiresSocket: args[6],
+    resolve: args[3]
   };
 };
 const handleJsonRpcMessage = async (...args) => {
   const options = normalizeParams(args);
   const {
-    message,
-    ipc,
     execute,
-    resolve,
-    preparePrettyError,
+    ipc,
     logError,
-    requiresSocket
+    message,
+    preparePrettyError,
+    requiresSocket,
+    resolve
   } = options;
   if ('id' in message) {
     if ('method' in message) {
@@ -821,36 +889,17 @@ const handleJsonRpcMessage = async (...args) => {
   throw new JsonRpcError('unexpected message');
 };
 
-class CommandNotFoundError extends Error {
-  constructor(command) {
-    super(`Command not found ${command}`);
-    this.name = 'CommandNotFoundError';
-  }
-}
-const commands = Object.create(null);
-const register = commandMap => {
-  Object.assign(commands, commandMap);
-};
-const getCommand = key => {
-  return commands[key];
-};
-const execute = (command, ...args) => {
-  const fn = getCommand(command);
-  if (!fn) {
-    throw new CommandNotFoundError(command);
-  }
-  return fn(...args);
-};
-
 const Two = '2.0';
-const create$s = (method, params) => {
+
+const create$9 = (method, params) => {
   return {
     jsonrpc: Two,
     method,
     params
   };
 };
-const create$r = (id, method, params) => {
+
+const create$8 = (id, method, params) => {
   const message = {
     id,
     jsonrpc: Two,
@@ -859,15 +908,14 @@ const create$r = (id, method, params) => {
   };
   return message;
 };
+
 let id = 0;
-const create$q = () => {
+const create$7 = () => {
   return ++id;
 };
 
-/* eslint-disable n/no-unsupported-features/es-syntax */
-
 const registerPromise = map => {
-  const id = create$q();
+  const id = create$7();
   const {
     promise,
     resolve
@@ -879,13 +927,12 @@ const registerPromise = map => {
   };
 };
 
-// @ts-ignore
 const invokeHelper = async (callbacks, ipc, method, params, useSendAndTransfer) => {
   const {
     id,
     promise
   } = registerPromise(callbacks);
-  const message = create$r(id, method, params);
+  const message = create$8(id, method, params);
   if (useSendAndTransfer && ipc.sendAndTransfer) {
     ipc.sendAndTransfer(message);
   } else {
@@ -921,12 +968,13 @@ const createRpc = ipc => {
      * @deprecated
      */
     send(method, ...params) {
-      const message = create$s(method, params);
+      const message = create$9(method, params);
       ipc.send(message);
     }
   };
   return rpc;
 };
+
 const requiresSocket = () => {
   return false;
 };
@@ -941,6 +989,7 @@ const handleMessage = event => {
   const actualExecute = event?.target?.execute || execute;
   return handleJsonRpcMessage(event.target, event.data, actualExecute, event.target._resolve, preparePrettyError, logError, actualRequiresSocket);
 };
+
 const handleIpc = ipc => {
   if ('addEventListener' in ipc) {
     ipc.addEventListener('message', handleMessage);
@@ -949,6 +998,7 @@ const handleIpc = ipc => {
     ipc.on('message', handleMessage);
   }
 };
+
 const listen$1 = async (module, options) => {
   const rawIpc = await module.listen(options);
   if (module.signal) {
@@ -958,8 +1008,6 @@ const listen$1 = async (module, options) => {
   return ipc;
 };
 
-/* eslint-disable @typescript-eslint/no-misused-promises */
-
 const createSharedLazyRpc = factory => {
   let rpcPromise;
   const getOrCreate = () => {
@@ -987,24 +1035,8 @@ const createSharedLazyRpc = factory => {
     }
   };
 };
-const create$i = async ({
-  commandMap,
-  isMessagePortOpen,
-  send
-}) => {
-  return createSharedLazyRpc(() => {
-    return create$2$1({
-      commandMap,
-      isMessagePortOpen,
-      send
-    });
-  });
-};
-const LazyTransferMessagePortRpcParent = {
-  __proto__: null,
-  create: create$i
-};
-const create$4 = async ({
+
+const create$6 = async ({
   commandMap,
   isMessagePortOpen = true,
   messagePort
@@ -1021,11 +1053,8 @@ const create$4 = async ({
   messagePort.start();
   return rpc;
 };
-const PlainMessagePortRpc = {
-  __proto__: null,
-  create: create$4
-};
-const create$2$1 = async ({
+
+const create$5 = async ({
   commandMap,
   isMessagePortOpen,
   send
@@ -1035,13 +1064,28 @@ const create$2$1 = async ({
     port2
   } = new MessageChannel();
   await send(port1);
-  return create$4({
+  return create$6({
     commandMap,
     isMessagePortOpen,
     messagePort: port2
   });
 };
-const create$1$1 = async ({
+
+const create$4 = async ({
+  commandMap,
+  isMessagePortOpen,
+  send
+}) => {
+  return createSharedLazyRpc(() => {
+    return create$5({
+      commandMap,
+      isMessagePortOpen,
+      send
+    });
+  });
+};
+
+const create$3 = async ({
   commandMap
 }) => {
   // TODO create a commandMap per rpc instance
@@ -1051,9 +1095,25 @@ const create$1$1 = async ({
   const rpc = createRpc(ipc);
   return rpc;
 };
-const WebWorkerRpcClient = {
-  __proto__: null,
-  create: create$1$1
+
+const createMockRpc = ({
+  commandMap
+}) => {
+  const invocations = [];
+  const invoke = (method, ...params) => {
+    invocations.push([method, ...params]);
+    const command = commandMap[method];
+    if (!command) {
+      throw new Error(`command ${method} not found`);
+    }
+    return command(...params);
+  };
+  const mockRpc = {
+    invocations,
+    invoke,
+    invokeAndTransfer: invoke
+  };
+  return mockRpc;
 };
 
 const toCommandId = key => {
@@ -1061,45 +1121,161 @@ const toCommandId = key => {
   return key.slice(dotIndex + 1);
 };
 const create$2 = () => {
+  const commandQueues = new Map();
+  const generations = Object.create(null);
   const states = Object.create(null);
-  const commandMapRef = {};
+  const commandMapRef = Object.create(null);
+  const commandsById = Object.create(null);
+  const getGeneration = uid => generations[uid] || 0;
+  const isCurrentGeneration = (uid, generation) => {
+    return states[uid] !== undefined && getGeneration(uid) === generation;
+  };
+  const updateState = (uid, generation, fallbackState, updater) => {
+    if (!isCurrentGeneration(uid, generation)) {
+      return Promise.resolve(fallbackState);
+    }
+    const current = states[uid];
+    const updatedState = updater(current.newState);
+    if (updatedState !== current.newState) {
+      states[uid] = {
+        newState: updatedState,
+        oldState: current.oldState,
+        scheduledState: updatedState
+      };
+    }
+    return Promise.resolve(updatedState);
+  };
+  const createAsyncCommandContext = (uid, generation) => {
+    let latestState = states[uid].newState;
+    return {
+      getState: () => {
+        if (isCurrentGeneration(uid, generation)) {
+          latestState = states[uid].newState;
+        }
+        return latestState;
+      },
+      updateState: async updater => {
+        latestState = await updateState(uid, generation, latestState, updater);
+        return latestState;
+      }
+    };
+  };
+  const enqueueCommand = async (uid, command) => {
+    const previous = commandQueues.get(uid) || Promise.resolve();
+    const run = async () => {
+      try {
+        await previous;
+      } catch {
+        // The previous caller receives its error; later commands must still run.
+      }
+      await command();
+    };
+    const current = run();
+    commandQueues.set(uid, current);
+    try {
+      await current;
+    } finally {
+      if (commandQueues.get(uid) === current) {
+        commandQueues.delete(uid);
+      }
+    }
+  };
   return {
-    get(uid) {
-      return states[uid];
+    clear() {
+      commandQueues.clear();
+      for (const key of Object.keys(states)) {
+        delete states[key];
+      }
     },
-    set(uid, oldState, newState) {
-      states[uid] = {
-        oldState,
-        newState
+    createDirectEventCommandMap(requestRender) {
+      return {
+        async 'Viewlet.executeViewletCommand'(uid, command, ...args) {
+          const fn = commandsById[command];
+          if (!fn) {
+            throw new Error(`Viewlet command not found: ${command}`);
+          }
+          await fn(uid, ...args);
+          await requestRender(uid);
+        }
       };
     },
+    diff(uid, modules, numbers) {
+      const {
+        oldState,
+        scheduledState
+      } = states[uid];
+      const diffResult = [];
+      for (let i = 0; i < modules.length; i++) {
+        const fn = modules[i];
+        if (!fn(oldState, scheduledState)) {
+          diffResult.push(numbers[i]);
+        }
+      }
+      return diffResult;
+    },
     dispose(uid) {
+      commandQueues.delete(uid);
       delete states[uid];
     },
+    get(uid) {
+      return states[uid];
+    },
+    getCommandIds() {
+      const keys = Object.keys(commandMapRef);
+      const ids = keys.map(toCommandId);
+      return ids;
+    },
     getKeys() {
-      return Object.keys(states).map(key => {
-        return Number.parseInt(key);
-      });
+      return Object.keys(states).map(Number);
     },
-    clear() {
-      for (const key of Object.keys(states)) {
-        delete states[key];
+    registerCommands(commandMap) {
+      Object.assign(commandMapRef, commandMap);
+      for (const [key, fn] of Object.entries(commandMap)) {
+        commandsById[toCommandId(key)] = fn;
+      }
+    },
+    set(uid, oldState, newState, scheduledState) {
+      const current = states[uid];
+      if (!current || oldState === newState && newState !== current.newState) {
+        generations[uid] = getGeneration(uid) + 1;
       }
+      states[uid] = {
+        newState,
+        oldState,
+        scheduledState: scheduledState ?? newState
+      };
+    },
+    wrapAsyncCommand(fn) {
+      const wrapped = async (uid, ...args) => {
+        const generation = getGeneration(uid);
+        const context = createAsyncCommandContext(uid, generation);
+        await fn(context, ...args);
+      };
+      return wrapped;
     },
     wrapCommand(fn) {
       const wrapped = async (uid, ...args) => {
+        const generation = getGeneration(uid);
         const {
-          oldState,
-          newState
+          newState,
+          oldState
         } = states[uid];
         const newerState = await fn(newState, ...args);
         if (oldState === newerState || newState === newerState) {
           return;
         }
-        const latest = states[uid];
+        if (!isCurrentGeneration(uid, generation)) {
+          return;
+        }
+        const latestOld = states[uid];
+        const latestNew = {
+          ...latestOld.newState,
+          ...newerState
+        };
         states[uid] = {
-          oldState: latest.oldState,
-          newState: newerState
+          newState: latestNew,
+          oldState: latestOld.oldState,
+          scheduledState: latestNew
         };
       };
       return wrapped;
@@ -1113,27 +1289,88 @@ const create$2 = () => {
       };
       return wrapped;
     },
-    diff(uid, modules, numbers) {
-      const {
-        oldState,
-        newState
-      } = states[uid];
-      const diffResult = [];
-      for (let i = 0; i < modules.length; i++) {
-        const fn = modules[i];
-        if (!fn(oldState, newState)) {
-          diffResult.push(numbers[i]);
+    wrapLoadContent(fn) {
+      const wrapped = async (uid, ...args) => {
+        const generation = getGeneration(uid);
+        const {
+          newState,
+          oldState
+        } = states[uid];
+        const result = await fn(newState, ...args);
+        const {
+          error,
+          state
+        } = result;
+        if (oldState === state || newState === state) {
+          return {
+            error
+          };
         }
-      }
-      return diffResult;
+        if (!isCurrentGeneration(uid, generation)) {
+          return {
+            error
+          };
+        }
+        const latestOld = states[uid];
+        const latestNew = {
+          ...latestOld.newState,
+          ...state
+        };
+        states[uid] = {
+          newState: latestNew,
+          oldState: latestOld.oldState,
+          scheduledState: latestNew
+        };
+        return {
+          error
+        };
+      };
+      return wrapped;
     },
-    getCommandIds() {
-      const keys = Object.keys(commandMapRef);
-      const ids = keys.map(toCommandId);
-      return ids;
+    wrapSerialAsyncCommand(fn) {
+      const wrapped = async (uid, ...args) => {
+        await enqueueCommand(uid, async () => {
+          if (!states[uid]) {
+            return;
+          }
+          const generation = getGeneration(uid);
+          const context = createAsyncCommandContext(uid, generation);
+          await fn(context, ...args);
+        });
+      };
+      return wrapped;
     },
-    registerCommands(commandMap) {
-      Object.assign(commandMapRef, commandMap);
+    wrapSerialCommand(fn) {
+      const wrapped = async (uid, ...args) => {
+        await enqueueCommand(uid, async () => {
+          if (!states[uid]) {
+            return;
+          }
+          const generation = getGeneration(uid);
+          const {
+            newState,
+            oldState
+          } = states[uid];
+          const newerState = await fn(newState, ...args);
+          if (oldState === newerState || newState === newerState) {
+            return;
+          }
+          if (!isCurrentGeneration(uid, generation)) {
+            return;
+          }
+          const latestOld = states[uid];
+          const latestNew = {
+            ...latestOld.newState,
+            ...newerState
+          };
+          states[uid] = {
+            newState: latestNew,
+            oldState: latestOld.oldState,
+            scheduledState: latestNew
+          };
+        });
+      };
+      return wrapped;
     }
   };
 };
@@ -1226,7 +1463,7 @@ const validateSettings = (items, modifiedSettings, preferences) => {
       modified,
       options: item.options,
       type: item.type,
-      value: item.value
+      value
     };
   });
 };
@@ -1736,7 +1973,7 @@ const ScrollBarThumb = 'ScrollBarThumb';
 const ScrollBarThumbActive = 'ScrollBarThumbActive';
 const ScrollbarTrack = 'ScrollbarTrack';
 const ScrollBarVertical = 'ScrollBarVertical';
-const Search = 'Search';
+const Search$1 = 'Search';
 const SearchField = 'SearchField';
 const SearchFieldButton$1 = 'SearchFieldButton';
 const SearchFieldButtonChecked = 'SearchFieldButtonChecked';
@@ -1764,7 +2001,7 @@ const SourceActionIcon = 'SourceActionIcon';
 const SourceActionItem = 'SourceActionItem';
 const SourceActionItemFocused = 'SourceActionItemFocused';
 const SourceControlBadge = 'SourceControlBadge';
-const Table = 'Table';
+const Table$1 = 'Table';
 const TableCell = 'TableCell';
 const TableHeading = 'TableHeading';
 const ToggleDetails = 'ToggleDetails';
@@ -1972,7 +2209,7 @@ const ClassNames = {
   Scrollbar,
   ScrollbarThumb,
   ScrollbarTrack,
-  Search,
+  Search: Search$1,
   SearchField,
   SearchFieldButton: SearchFieldButton$1,
   SearchFieldButtonChecked,
@@ -2000,7 +2237,7 @@ const ClassNames = {
   SourceActionItem,
   SourceActionItemFocused,
   SourceControlBadge,
-  Table,
+  Table: Table$1,
   TableCell,
   TableHeading,
   ToggleDetails,
@@ -2017,18 +2254,174 @@ const ClassNames = {
   WelcomeMessage
 };
 
+const Audio = 0;
 const Button = 1;
+const Col = 2;
+const ColGroup = 3;
 const Div = 4;
 const H1 = 5;
 const Input = 6;
+const Kbd = 7;
+const Span = 8;
+const Table = 9;
+const TBody = 10;
+const Td = 11;
 const Text = 12;
+const Th = 13;
+const THead = 14;
+const Tr = 15;
+const I = 16;
+const Img = 17;
+const Root = 0;
+const Ins = 20;
+const Del = 21;
+const H2 = 22;
 const H3 = 23;
+const H4 = 24;
+const H5 = 25;
+const H6 = 26;
+const Article = 27;
 const Aside = 28;
+const Footer = 29;
+const Header = 30;
+const Nav = 40;
+const Section = 41;
+const Search = 42;
+const Dd = 43;
+const Dl = 44;
+const Figcaption = 45;
+const Figure = 46;
+const Hr = 47;
+const Li = 48;
+const Ol = 49;
 const P = 50;
+const Pre = 51;
+const A = 53;
+const Abbr = 54;
+const Br = 55;
+const Cite = 56;
+const Data = 57;
+const Time = 58;
+const Tfoot = 59;
 const Ul = 60;
+const Video = 61;
+const TextArea = 62;
 const Select$1 = 63;
 const Option = 64;
+const Code = 65;
 const Label$1 = 66;
+const Dt = 67;
+const Iframe = 68;
+const Main = 69;
+const Strong = 70;
+const Em = 71;
+const Style = 72;
+const Html = 73;
+const Head = 74;
+const Title = 75;
+const Meta = 76;
+const Canvas = 77;
+const Form = 78;
+const BlockQuote = 79;
+const Quote = 80;
+const Circle = 81;
+const Defs = 82;
+const Ellipse = 83;
+const G = 84;
+const Line = 85;
+const Path = 86;
+const Polygon = 87;
+const Polyline = 88;
+const Rect = 89;
+const Svg = 90;
+const Use = 91;
+const Reference = 100;
+
+const VirtualDomElements = {
+  __proto__: null,
+  A,
+  Abbr,
+  Article,
+  Aside,
+  Audio,
+  BlockQuote,
+  Br,
+  Button,
+  Canvas,
+  Circle,
+  Cite,
+  Code,
+  Col,
+  ColGroup,
+  Data,
+  Dd,
+  Defs,
+  Del,
+  Div,
+  Dl,
+  Dt,
+  Ellipse,
+  Em,
+  Figcaption,
+  Figure,
+  Footer,
+  Form,
+  G,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Head,
+  Header,
+  Hr,
+  Html,
+  I,
+  Iframe,
+  Img,
+  Input,
+  Ins,
+  Kbd,
+  Label: Label$1,
+  Li,
+  Line,
+  Main,
+  Meta,
+  Nav,
+  Ol,
+  Option,
+  P,
+  Path,
+  Polygon,
+  Polyline,
+  Pre,
+  Quote,
+  Rect,
+  Reference,
+  Root,
+  Search,
+  Section,
+  Select: Select$1,
+  Span,
+  Strong,
+  Style,
+  Svg,
+  TBody,
+  THead,
+  Table,
+  Td,
+  Text,
+  TextArea,
+  Tfoot,
+  Th,
+  Time,
+  Title,
+  Tr,
+  Ul,
+  Use,
+  Video
+};
 
 const ClientX = 'event.clientX';
 const ClientY = 'event.clientY';
@@ -2045,6 +2438,9 @@ const SettingsFilter = 94;
 const None$1 = 0;
 const Disabled = 5;
 
+const RendererProcess = 1670;
+const RendererWorker = 1;
+
 const SetCss = 'Viewlet.setCss';
 
 const mergeClassNames = (...classNames) => {
@@ -2059,6 +2455,8 @@ const text = data => {
   };
 };
 
+new Set(Object.values(VirtualDomElements));
+
 const getKeyBindings = () => {
   return [{
     command: 'Settings.usePreviousSearchValue',
@@ -2072,18 +2470,19 @@ const getKeyBindings = () => {
 };
 
 const emptyObject = {};
-const RE_PLACEHOLDER = /\{(PH\d+)\}/g;
 const i18nString = (key, placeholders = emptyObject) => {
   if (placeholders === emptyObject) {
     return key;
   }
-  const replacer = (match, rest) => {
-    return placeholders[rest];
-  };
-  return key.replaceAll(RE_PLACEHOLDER, replacer);
+  let result = key;
+  for (const [placeholder, replacement] of Object.entries(placeholders)) {
+    result = result.split(`{${placeholder}}`).join(String(replacement));
+  }
+  return result;
 };
 
 const Advanced = 'Advanced';
+const ArrayValue = 'array value';
 const Clear$1 = 'Clear';
 const ColorValue = 'Color value';
 const Experimental = 'Experimental';
@@ -2105,6 +2504,7 @@ const Tag = 'Tag';
 const UnknownSettingType = 'Unknown setting type';
 
 const advanced = () => i18nString(Advanced);
+const arrayValue = () => i18nString(ArrayValue);
 const clear = () => i18nString(Clear$1);
 const colorValue = () => i18nString(ColorValue);
 const experimental = () => i18nString(Experimental);
@@ -2214,26 +2614,6 @@ const getName = () => {
   return 'Settings';
 };
 
-const createMockRpc = ({
-  commandMap
-}) => {
-  const invocations = [];
-  const invoke = (method, ...params) => {
-    invocations.push([method, ...params]);
-    const command = commandMap[method];
-    if (!command) {
-      throw new Error(`command ${method} not found`);
-    }
-    return command(...params);
-  };
-  const mockRpc = {
-    invocations,
-    invoke,
-    invokeAndTransfer: invoke
-  };
-  return mockRpc;
-};
-
 const rpcs = Object.create(null);
 const set$5 = (id, rpc) => {
   rpcs[id] = rpc;
@@ -2282,9 +2662,6 @@ const create = rpcId => {
   };
 };
 
-const RendererProcess = 1670;
-const RendererWorker = 1;
-
 const {
   invoke: invoke$3,
   set: set$4
@@ -2464,7 +2841,7 @@ const handleMessagePort = async (port, viewletCommandMap, setAsRendererProcess =
     await fn(uid, ...args);
     await invoke$2('Viewlet.requestRender', uid);
   };
-  const rpc = await PlainMessagePortRpc.create({
+  const rpc = await create$6({
     commandMap: {
       'Viewlet.executeViewletCommand': executeViewletCommand
     },
@@ -2551,8 +2928,9 @@ const handleSettingChecked = (state, name, value, source = User) => {
 };
 
 const Enum = 1;
-const String = 2;
+const String$1 = 2;
 const Boolean$1 = 3;
+const Array$1 = 4;
 const Number$1 = 5;
 const Color = 6;
 const Url = 7;
@@ -2564,6 +2942,17 @@ const handleSettingInput = (state, name, value, inputSource = User) => {
 
   // TODO maybe have separate input functions for number and string inputs
   const settingItem = items.find(item => item.id === name);
+  if (settingItem && settingItem.type === Array$1) {
+    try {
+      const arrayValue = JSON.parse(value);
+      if (!Array.isArray(arrayValue)) {
+        return state;
+      }
+      return handleSettingUpdate(state, name, arrayValue, inputSource);
+    } catch {
+      return state;
+    }
+  }
   if (settingItem && settingItem.type === Number$1) {
     const numberValue = value === '' ? '' : Number(value);
     return handleSettingUpdate(state, name, numberValue, inputSource);
@@ -2639,7 +3028,7 @@ const send = async port => {
   await sendMessagePortToSettingsWorker(port, 0);
 };
 const launchSettingsWorker = async () => {
-  return LazyTransferMessagePortRpcParent.create({
+  return create$4({
     commandMap: commandMap$1,
     send
   });
@@ -3091,6 +3480,37 @@ const getItemLabelDom = (domId, label) => {
   }, text(label)];
 };
 
+const getItemArrayVirtualDom = item => {
+  const {
+    description,
+    errorMessage,
+    hasError,
+    heading,
+    id,
+    modified
+  } = item;
+  const domId = getInputId(id);
+  const inputClassName = hasError ? mergeClassNames(InputBox, InputBoxError) : InputBox;
+  const errorChildCount = hasError ? 1 : 0;
+  return [{
+    childCount: 3 + errorChildCount,
+    className: SettingsItem,
+    'data-modified': modified,
+    name: id,
+    role: Group,
+    type: Div
+  }, ...getItemHeadingDom(heading), ...getItemLabelDom(domId, description), {
+    childCount: 0,
+    className: inputClassName,
+    id: domId,
+    inputType: 'text',
+    name: id,
+    onInput: HandleSettingInput,
+    placeholder: arrayValue(),
+    type: Input
+  }, ...getErrorMessageDom(errorMessage)];
+};
+
 const checkBoxWrapperNode = {
   childCount: 2,
   className: SettingsItemCheckBox,
@@ -3103,11 +3523,13 @@ const getItemCheckBoxVirtualDom = item => {
     hasError,
     heading,
     id,
-    modified
+    modified,
+    value
   } = item;
   const domId = getInputId(id);
   const checkBoxClassName = hasError ? mergeClassNames(CheckBox, InputBoxError) : CheckBox;
   const errorChildCount = hasError ? 1 : 0;
+  const isChecked = value === true || value === 'true';
   return [{
     childCount: 2 + errorChildCount,
     className: SettingsItem,
@@ -3116,6 +3538,7 @@ const getItemCheckBoxVirtualDom = item => {
     role: Group,
     type: Div
   }, ...getItemHeadingDom(heading), checkBoxWrapperNode, {
+    checked: isChecked,
     childCount: 0,
     className: checkBoxClassName,
     id: domId,
@@ -3329,6 +3752,8 @@ const getItemUrlVirtualDom = item => {
 
 const getItemRender = type => {
   switch (type) {
+    case Array$1:
+      return getItemArrayVirtualDom;
     case Boolean$1:
       return getItemCheckBoxVirtualDom;
     case Color:
@@ -3337,7 +3762,7 @@ const getItemRender = type => {
       return getItemSelectVirtualDom;
     case Number$1:
       return getItemNumberVirtualDom;
-    case String:
+    case String$1:
       return getItemStringVirtualDom;
     case Url:
       return getItemUrlVirtualDom;
@@ -3466,7 +3891,13 @@ const renderItems = (oldState, newState) => {
   return ['Viewlet.setDom2', newState.id, dom];
 };
 
-const enabledTypes = [Number$1, String, Color];
+const enabledTypes = [Array$1, Number$1, String$1, Color];
+const getInputValue = (type, value) => {
+  if (type === Array$1) {
+    return JSON.stringify(value);
+  }
+  return value;
+};
 const renderSettingValues = (oldState, newState) => {
   const {
     filteredItems,
@@ -3475,7 +3906,7 @@ const renderSettingValues = (oldState, newState) => {
   } = newState;
   const enabledSettings = filteredItems.filter(item => enabledTypes.includes(item.type));
   const inputValues = enabledSettings.map(item => {
-    const value = preferences[item.id] ?? item.value;
+    const value = getInputValue(item.type, preferences[item.id] ?? item.value);
     return {
       name: item.id,
       value
@@ -3745,7 +4176,7 @@ const set = rpc => {
 
 const listen = async () => {
   registerCommands(commandMap);
-  const rpc = await WebWorkerRpcClient.create({
+  const rpc = await create$3({
     commandMap: commandMap
   });
   set(rpc);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/settings-view",
-  "version": "2.26.2",
+  "version": "2.27.1",
   "description": "Explorer Worker",
   "repository": {
     "type": "git",
@@ -11,6 +11,6 @@
   "type": "module",
   "main": "dist/settingsViewWorkerMain.js",
   "dependencies": {
-    "@lvce-editor/constants": "^2.8.0"
+    "@lvce-editor/constants": "^5.28.0"
   }
 }