@lvce-editor/ports-view 0.3.0 → 0.5.0

package/dist/portsViewWorkerMain.js

@@ -557,7 +557,7 @@ const applyDirectProperties = (restoredError, error) => {
   }
 };
 const restoreMessageError = (error, _currentStack) => {
-  const restoredError = constructError(error.message, error.type, error.name);
+  const restoredError = constructError(error.message, error.type || error.data?.type, error.name);
   if (typeof error.code === 'string' || typeof error.code === 'number') {
     Object.defineProperty(restoredError, 'code', {
       configurable: true,
@@ -645,7 +645,7 @@ const getErrorProperty = (error, prettyError) => {
     data: {
       code: prettyError.code ?? error?.code,
       codeFrame: prettyError.codeFrame,
-      name: prettyError.name,
+      name: prettyError.name ?? error?.name,
       stack: getStack(prettyError),
       type: getErrorType(prettyError)
     },
@@ -1277,6 +1277,80 @@ const terminate = () => {
   globalThis.close();
 };
 
+const emptyObject = {};
+const i18nString = (key, placeholders = emptyObject) => {
+  if (placeholders === emptyObject) {
+    return key;
+  }
+  let result = key;
+  for (const [placeholder, replacement] of Object.entries(placeholders)) {
+    result = result.split(`{${placeholder}}`).join(String(replacement));
+  }
+  return result;
+};
+
+const Add$1 = 'Add';
+const AddPort = 'Add Port';
+const Cancel = 'Cancel';
+const EnterAPortNumberBetween1And65535 = 'Enter a port number between 1 and 65535';
+const ForwardedAddress = 'Forwarded Address';
+const NoForwardedPorts = 'No forwarded ports';
+const Origin = 'Origin';
+const Port = 'Port';
+const PortIsActive = 'Port {PH1} is active';
+const PortIsInactive = 'Port {PH1} is inactive';
+const PortNumber = 'Port number';
+const Ports$1 = 'Ports';
+const RunningProcess = 'Running Process';
+const UserForwarded = 'User Forwarded';
+
+const add = () => {
+  return i18nString(Add$1);
+};
+const addPort$1 = () => {
+  return i18nString(AddPort);
+};
+const cancel = () => {
+  return i18nString(Cancel);
+};
+const enterAPortNumberBetween1And65535 = () => {
+  return i18nString(EnterAPortNumberBetween1And65535);
+};
+const forwardedAddress = () => {
+  return i18nString(ForwardedAddress);
+};
+const noForwardedPorts = () => {
+  return i18nString(NoForwardedPorts);
+};
+const origin = () => {
+  return i18nString(Origin);
+};
+const port = () => {
+  return i18nString(Port);
+};
+const portIsActive = port => {
+  return i18nString(PortIsActive, {
+    PH1: String(port)
+  });
+};
+const portIsInactive = port => {
+  return i18nString(PortIsInactive, {
+    PH1: String(port)
+  });
+};
+const portNumber = () => {
+  return i18nString(PortNumber);
+};
+const ports = () => {
+  return i18nString(Ports$1);
+};
+const runningProcess = () => {
+  return i18nString(RunningProcess);
+};
+const userForwarded = () => {
+  return i18nString(UserForwarded);
+};
+
 const assertString = (value, name) => {
   if (typeof value !== 'string') {
     throw new TypeError(`${name} must be a string`);
@@ -1294,7 +1368,7 @@ const normalizePort = input => {
   }
   const forwardedAddress = input.forwardedAddress ?? `localhost:${port}`;
   const runningProcess = input.runningProcess ?? '';
-  const origin = input.origin ?? 'User Forwarded';
+  const origin = input.origin ?? userForwarded();
   assertString(forwardedAddress, 'forwardedAddress');
   assertString(runningProcess, 'runningProcess');
   assertString(origin, 'origin');
@@ -1410,7 +1484,7 @@ const submitAddPort = state => {
   if (!PortRegex.test(value) || !Number.isSafeInteger(port) || port < 1 || port > 65_535) {
     return {
       ...state,
-      addPortError: 'Enter a port number between 1 and 65535'
+      addPortError: enterAPortNumberBetween1And65535()
     };
   }
   return {
@@ -2193,32 +2267,38 @@ const cancelButton = {
   onClick: HandleCancelAddPort,
   type: Button
 };
-const getEditor = state => {
-  const {
-    addPortError,
-    addPortValue
-  } = state;
+const getPortInputDom = addPortValue => {
   return [{
-    childCount: addPortError ? 4 : 3,
-    className: AddPortEditor,
-    type: Div
-  }, {
-    ariaLabel: 'Port number',
+    ariaLabel: portNumber(),
     childCount: 0,
     className: AddPortInput,
     inputMode: 'numeric',
     onInput: HandleAddPortInput,
     onKeyDown: HandleAddPortKeyDown,
-    placeholder: 'Port number',
+    placeholder: portNumber(),
     type: Input,
     value: addPortValue
-  }, {
+  }];
+};
+const getButtonsDom = addPortValue => {
+  return [{
     childCount: 1,
     className: AddPortButton,
     disabled: addPortValue.length === 0,
     onClick: HandleSubmitAddPort,
     type: Button
-  }, text('Add'), cancelButton, text('Cancel'), ...getErrorDom(addPortError)];
+  }, text(add()), cancelButton, text(cancel())];
+};
+const getEditor = state => {
+  const {
+    addPortError,
+    addPortValue
+  } = state;
+  return [{
+    childCount: addPortError ? 4 : 3,
+    className: AddPortEditor,
+    type: Div
+  }, ...getPortInputDom(addPortValue), ...getButtonsDom(addPortValue), ...getErrorDom(addPortError)];
 };
 
 const addButton = {
@@ -2227,7 +2307,6 @@ const addButton = {
   onClick: HandleStartAddPort,
   type: Button
 };
-const addButtonDom = [addButton, text('Add Port')];
 const footer = {
   childCount: 1,
   className: PortsFooter,
@@ -2241,26 +2320,30 @@ const getPortsFooterVirtualDom = state => {
   const {
     editing
   } = state;
-  const content = editing ? getEditor(state) : addButtonDom;
+  const content = editing ? getEditor(state) : [addButton, text(addPort$1())];
   return [footer, footerContent, ...content];
 };
 
+const getPortStatusText = active => {
+  return active ? '●' : '○';
+};
 const getPortsStatusVirtualDom = (active, port) => {
-  const state = active ? 'active' : 'inactive';
+  const label = active ? portIsActive(port) : portIsInactive(port);
   const stateClass = active ? PortsStatusIconActive : PortsStatusIconInactive;
+  const statusText = getPortStatusText(active);
   return [{
-    ariaLabel: `Port ${port} is ${state}`,
+    ariaLabel: label,
     childCount: 1,
     className: PortsStatusButton,
     name: `port-status-${port}`,
-    title: `Port ${port} is ${state}`,
+    title: label,
     type: Button
   }, {
     childCount: 1,
     className: mergeClassNames(PortsStatusIcon, stateClass),
     name: `port-status-${port}`,
     type: Span
-  }, text(active ? '●' : '○')];
+  }, text(statusText)];
 };
 
 const getRowClassName = port => {
@@ -2353,7 +2436,7 @@ const getPortsTableBodyVirtualDom = state => {
     ports
   } = state;
   if (loaded && ports.length === 0) {
-    return [emptyBody, emptyMessage, text('No forwarded ports')];
+    return [emptyBody, emptyMessage, text(noForwardedPorts())];
   }
   const visible = getVisiblePorts(state);
   return [{
@@ -2380,7 +2463,7 @@ const getHeaderCell = (label, className) => {
   }, text(label)];
 };
 const getPortsTableHeaderVirtualDom = () => {
-  return [headerRow, ...getHeaderCell('', 'PortsStatusColumn'), ...getHeaderCell('Port', 'PortsPortColumn'), ...getHeaderCell('Forwarded Address', 'PortsAddressColumn'), ...getHeaderCell('Running Process', 'PortsProcessColumn'), ...getHeaderCell('Origin', 'PortsOriginColumn')];
+  return [headerRow, ...getHeaderCell('', 'PortsStatusColumn'), ...getHeaderCell(port(), 'PortsPortColumn'), ...getHeaderCell(forwardedAddress(), 'PortsAddressColumn'), ...getHeaderCell(runningProcess(), 'PortsProcessColumn'), ...getHeaderCell(origin(), 'PortsOriginColumn')];
 };
 
 const table = {
@@ -2390,11 +2473,11 @@ const table = {
 };
 const getPortsVirtualDom = state => {
   const {
-    ports
+    ports: ports$1
   } = state;
   return [{
-    ariaLabel: 'Ports',
-    ariaRowCount: ports.length + 1,
+    ariaLabel: ports(),
+    ariaRowCount: ports$1.length + 1,
     childCount: 2,
     className: mergeClassNames(Viewlet, Ports),
     onBlur: HandleBlur,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/ports-view",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Ports View Worker",
   "repository": {
     "type": "git",