use new packages for imports & new webserial transport

2025-03-01 14:00:06 +08:00
parent f31ac24707
commit 5a62b67e79
64 changed files with 445 additions and 437 deletions
@@ -3,7 +3,7 @@ import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useToast } from "@core/hooks/useToast.ts";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 import { fromByteArray, toByteArray } from "base64-js";
 import cryptoRandomString from "crypto-random-string";
 import { useState } from "react";
@@ -24,8 +24,9 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
    channel?.settings?.psk.length ?? 16,
  );
  const [validationText, setValidationText] = useState<string>();
-  const [preSharedDialogOpen, setPreSharedDialogOpen] =
-    useState<boolean>(false);
+  const [preSharedDialogOpen, setPreSharedDialogOpen] = useState<boolean>(
+    false,
+  );

  const onSubmit = (data: ChannelValidation) => {
    const channel = create(Protobuf.Channel.ChannelSchema, {
@@ -107,7 +108,7 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
                channel?.settings?.moduleSettings?.positionPrecision === 32,
              positionPrecision:
                channel?.settings?.moduleSettings?.positionPrecision ===
-                undefined
+                    undefined
                  ? 10
                  : channel?.settings?.moduleSettings?.positionPrecision,
            },
@@ -126,10 +127,9 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
                description:
                  "Device telemetry is sent over PRIMARY. Only one PRIMARY allowed",
                properties: {
-                  enumValue:
-                    channel.index === 0
-                      ? { PRIMARY: 1 }
-                      : { DISABLED: 0, SECONDARY: 2 },
+                  enumValue: channel.index === 0
+                    ? { PRIMARY: 1 }
+                    : { DISABLED: 0, SECONDARY: 2 },
                },
              },
              {
@@ -192,32 +192,31 @@ export const Channel = ({ channel }: SettingsPanelProps): JSX.Element => {
                description:
                  "If not sharing precise location, position shared on channel will be accurate within this distance",
                properties: {
-                  enumValue:
-                    config.display?.units === 0
-                      ? {
-                          "Within 23 km": 10,
-                          "Within 12 km": 11,
-                          "Within 5.8 km": 12,
-                          "Within 2.9 km": 13,
-                          "Within 1.5 km": 14,
-                          "Within 700 m": 15,
-                          "Within 350 m": 16,
-                          "Within 200 m": 17,
-                          "Within 90 m": 18,
-                          "Within 50 m": 19,
-                        }
-                      : {
-                          "Within 15 miles": 10,
-                          "Within 7.3 miles": 11,
-                          "Within 3.6 miles": 12,
-                          "Within 1.8 miles": 13,
-                          "Within 0.9 miles": 14,
-                          "Within 0.5 miles": 15,
-                          "Within 0.2 miles": 16,
-                          "Within 600 feet": 17,
-                          "Within 300 feet": 18,
-                          "Within 150 feet": 19,
-                        },
+                  enumValue: config.display?.units === 0
+                    ? {
+                      "Within 23 km": 10,
+                      "Within 12 km": 11,
+                      "Within 5.8 km": 12,
+                      "Within 2.9 km": 13,
+                      "Within 1.5 km": 14,
+                      "Within 700 m": 15,
+                      "Within 350 m": 16,
+                      "Within 200 m": 17,
+                      "Within 90 m": 18,
+                      "Within 50 m": 19,
+                    }
+                    : {
+                      "Within 15 miles": 10,
+                      "Within 7.3 miles": 11,
+                      "Within 3.6 miles": 12,
+                      "Within 1.8 miles": 13,
+                      "Within 0.9 miles": 14,
+                      "Within 0.5 miles": 15,
+                      "Within 0.2 miles": 16,
+                      "Within 600 feet": 17,
+                      "Within 300 feet": 18,
+                      "Within 150 feet": 19,
+                    },
                },
              },
            ],
@@ -3,7 +3,7 @@ import type { BluetoothValidation } from "@app/validation/config/bluetooth.tsx";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 import { useState } from "react";

 export const Bluetooth = () => {
@@ -111,9 +111,8 @@ export const Bluetooth = () => {
              disabledBy: [
                {
                  fieldName: "mode",
-                  selector:
-                    Protobuf.Config.Config_BluetoothConfig_PairingMode
-                      .FIXED_PIN,
+                  selector: Protobuf.Config.Config_BluetoothConfig_PairingMode
+                    .FIXED_PIN,
                  invert: true,
                },
                {
@@ -2,7 +2,7 @@ import type { DeviceValidation } from "@app/validation/config/device.tsx";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";

 export const Device = (): JSX.Element => {
  const { config, setWorkingConfig } = useDevice();
@@ -2,7 +2,7 @@ import type { DisplayValidation } from "@app/validation/config/display.tsx";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";

 export const Display = (): JSX.Element => {
  const { config, setWorkingConfig } = useDevice();
@@ -2,7 +2,7 @@ import type { LoRaValidation } from "@app/validation/config/lora.tsx";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";

 export const LoRa = (): JSX.Element => {
  const { config, setWorkingConfig } = useDevice();
@@ -6,7 +6,7 @@ import {
  convertIntToIpAddress,
  convertIpAddressToInt,
 } from "@core/utils/ip.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";

 export const Network = (): JSX.Element => {
  const { config, setWorkingConfig } = useDevice();
@@ -6,7 +6,7 @@ import type { PositionValidation } from "@app/validation/config/position.tsx";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 import { useCallback } from "react";

 export const Position = () => {
@@ -2,7 +2,7 @@ import type { PowerValidation } from "@app/validation/config/power.tsx";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";

 export const Power = (): JSX.Element => {
  const { config, setWorkingConfig } = useDevice();
@@ -8,7 +8,7 @@ import {
 import type { SecurityValidation } from "@app/validation/config/security.tsx";
 import { create } from "@bufbuild/protobuf";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
 import { fromByteArray, toByteArray } from "base64-js";
 import { Eye, EyeOff } from "lucide-react";
 import { useReducer } from "react";
@@ -5,7 +5,8 @@ import { useAppStore } from "@core/stores/appStore.ts";
 import { useDeviceStore } from "@core/stores/deviceStore.ts";
 import { subscribeAll } from "@core/subscriptions.ts";
 import { randId } from "@core/utils/randId.ts";
-import { SerialConnection } from "@meshtastic/js";
+import { MeshDevice } from "@meshtastic/core";
+import { TransportWebSerial } from "@meshtastic/transport-web-serial";
 import { useCallback, useEffect, useState } from "react";

 export const Serial = ({ closeDialog }: TabElementProps): JSX.Element => {
@@ -31,14 +32,9 @@ export const Serial = ({ closeDialog }: TabElementProps): JSX.Element => {
    const id = randId();
    const device = addDevice(id);
    setSelectedDevice(id);
-    const connection = new SerialConnection(id);
-    await connection
-      .connect({
-        port,
-        baudRate: undefined,
-        concurrentLogOutput: true,
-      })
-      .catch((e: Error) => console.log(`Unable to Connect: ${e.message}`));
+    const transport = await TransportWebSerial.createFromPort(port);
+    const connection = new MeshDevice(transport, id);
+    connection.configure();
    device.addConnection(connection);
    subscribeAll(device, connection);

@@ -5,8 +5,8 @@ import { formatQuantity } from "@app/core/utils/string";
 import { Avatar } from "@components/UI/Avatar";
 import { Mono } from "@components/generic/Mono.tsx";
 import { TimeAgo } from "@components/generic/TimeAgo.tsx";
-import { Protobuf } from "@meshtastic/js";
-import type { Protobuf as ProtobufType } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";
+import type { Protobuf as ProtobufType } from "@meshtastic/core";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import {
  BatteryChargingIcon,
@@ -37,21 +37,23 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
          <Avatar text={node.user?.shortName} />

          <div>
-            {node.user?.publicKey && node.user?.publicKey.length > 0 ? (
-              <LockIcon
-                className="text-green-600"
-                size={12}
-                strokeWidth={3}
-                aria-label="Public Key Enabled"
-              />
-            ) : (
-              <LockOpenIcon
-                className="text-yellow-500"
-                size={12}
-                strokeWidth={3}
-                aria-label="No Public Key"
-              />
-            )}
+            {node.user?.publicKey && node.user?.publicKey.length > 0
+              ? (
+                <LockIcon
+                  className="text-green-600"
+                  size={12}
+                  strokeWidth={3}
+                  aria-label="Public Key Enabled"
+                />
+              )
+              : (
+                <LockOpenIcon
+                  className="text-yellow-500"
+                  size={12}
+                  strokeWidth={3}
+                  aria-label="No Public Key"
+                />
+              )}
          </div>

          <Star
@@ -73,15 +75,13 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
                node.deviceMetrics?.voltage?.toPrecision(3) ?? "Unknown"
              } volts`}
            >
-              {node.deviceMetrics?.batteryLevel > 100 ? (
-                <BatteryChargingIcon size={22} />
-              ) : node.deviceMetrics?.batteryLevel > 80 ? (
-                <BatteryFullIcon size={22} />
-              ) : node.deviceMetrics?.batteryLevel > 20 ? (
-                <BatteryMediumIcon size={22} />
-              ) : (
-                <BatteryLowIcon size={22} />
-              )}
+              {node.deviceMetrics?.batteryLevel > 100
+                ? <BatteryChargingIcon size={22} />
+                : node.deviceMetrics?.batteryLevel > 80
+                ? <BatteryFullIcon size={22} />
+                : node.deviceMetrics?.batteryLevel > 20
+                ? <BatteryMediumIcon size={22} />
+                : <BatteryLowIcon size={22} />}
              <Subtle aria-label="Battery">
                {node.deviceMetrics?.batteryLevel > 100
                  ? "Charging"
@@ -4,7 +4,7 @@ import {
 } from "@app/core/stores/deviceStore.ts";
 import { Message } from "@components/PageComponents/Messages/Message.tsx";
 import { MessageInput } from "@components/PageComponents/Messages/MessageInput.tsx";
-import type { Types } from "@meshtastic/js";
+import type { Types } from "@meshtastic/core";
 import { InboxIcon } from "lucide-react";
 import { useCallback, useEffect, useRef } from "react";
 import type { JSX } from "react";
@@ -34,8 +34,7 @@ export const ChannelChat = ({
  const scrollToBottom = useCallback(() => {
    const scrollContainer = scrollContainerRef.current;
    if (scrollContainer) {
-      const isNearBottom =
-        scrollContainer.scrollHeight -
+      const isNearBottom = scrollContainer.scrollHeight -
          scrollContainer.scrollTop -
          scrollContainer.clientHeight <
        100;
@@ -72,9 +71,8 @@ export const ChannelChat = ({
                key={message.id}
                message={message}
                sender={nodes.get(message.from)}
-                lastMsgSameUser={
-                  index > 0 && messages[index - 1].from === message.from
-                }
+                lastMsgSameUser={index > 0 &&
+                  messages[index - 1].from === message.from}
              />
            );
          })}
@@ -12,7 +12,7 @@ import {
 } from "@app/core/stores/deviceStore.ts";
 import { cn } from "@app/core/utils/cn";
 import { Avatar } from "@components/UI/Avatar";
-import type { Protobuf } from "@meshtastic/js";
+import type { Protobuf } from "@meshtastic/core";
 import { AlertCircle, CheckCircle2, CircleEllipsis } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { useMemo } from "react";
@@ -2,7 +2,7 @@ import { debounce } from "@app/core/utils/debounce";
 import { Button } from "@components/UI/Button.tsx";
 import { Input } from "@components/UI/Input.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import type { Types } from "@meshtastic/js";
+import type { Types } from "@meshtastic/core";
 import { SendIcon } from "lucide-react";
 import {
  type JSX,
@@ -51,7 +51,7 @@ export const MessageInput = ({
            myNodeNum,
            id,
            "ack",
-          ),
+          )
        )
        .catch((e: Types.PacketError) =>
          setMessageState(
@@ -61,7 +61,7 @@ export const MessageInput = ({
            myNodeNum,
            e.id,
            e.error,
-          ),
+          )
        );
    },
    [channel, connection, myNodeNum, setMessageState, to],
@@ -1,5 +1,5 @@
 import { useDevice } from "@app/core/stores/deviceStore.ts";
-import type { Protobuf } from "@meshtastic/js";
+import type { Protobuf } from "@meshtastic/core";
 import { numberToHexUnpadded } from "@noble/curves/abstract/utils";
 import type { JSX } from "react";

@@ -38,23 +38,25 @@ export const TraceRoute = ({
        ))}
        {from?.user?.longName}
      </span>
-      {routeBack ? (
-        <span className="ml-4 border-l-2 border-l-background-primary pl-2 text-text-primary">
-          <p className="font-semibold">Route back:</p>
-          <p>{from?.user?.longName}</p>
-          <p>↓ {snrBack?.[0] ? snrBack[0] : "??"}dB</p>
-          {routeBack.map((hop, i) => (
-            <span key={nodes.get(hop)?.num}>
-              <p>
-                {nodes.get(hop)?.user?.longName ??
-                  `!${numberToHexUnpadded(hop)}`}
-              </p>
-              <p>↓ {snrBack?.[i + 1] ? snrBack[i + 1] : "??"}dB</p>
-            </span>
-          ))}
-          {to?.user?.longName}
-        </span>
-      ) : null}
+      {routeBack
+        ? (
+          <span className="ml-4 border-l-2 border-l-background-primary pl-2 text-text-primary">
+            <p className="font-semibold">Route back:</p>
+            <p>{from?.user?.longName}</p>
+            <p>↓ {snrBack?.[0] ? snrBack[0] : "??"}dB</p>
+            {routeBack.map((hop, i) => (
+              <span key={nodes.get(hop)?.num}>
+                <p>
+                  {nodes.get(hop)?.user?.longName ??
+                    `!${numberToHexUnpadded(hop)}`}
+                </p>
+                <p>↓ {snrBack?.[i + 1] ? snrBack[i + 1] : "??"}dB</p>
+              </span>
+            ))}
+            {to?.user?.longName}
+          </span>
+        )
+        : null}
    </div>
  );
 };
@@ -2,7 +2,7 @@ import { useDevice } from "@app/core/stores/deviceStore.ts";
 import type { AmbientLightingValidation } from "@app/validation/moduleConfig/ambientLighting.tsx";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";

 export const AmbientLighting = (): JSX.Element => {
  const { moduleConfig, setWorkingModuleConfig } = useDevice();
@@ -2,7 +2,7 @@ import type { AudioValidation } from "@app/validation/moduleConfig/audio.tsx";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";

 export const Audio = (): JSX.Element => {
  const { moduleConfig, setWorkingModuleConfig } = useDevice();
@@ -2,7 +2,7 @@ import type { CannedMessageValidation } from "@app/validation/moduleConfig/canne
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";

 export const CannedMessage = (): JSX.Element => {
  const { moduleConfig, setWorkingModuleConfig } = useDevice();
@@ -2,7 +2,7 @@ import { useDevice } from "@app/core/stores/deviceStore.ts";
 import type { DetectionSensorValidation } from "@app/validation/moduleConfig/detectionSensor.tsx";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";

 export const DetectionSensor = (): JSX.Element => {
  const { moduleConfig, setWorkingModuleConfig } = useDevice();
@@ -2,7 +2,7 @@ import type { ExternalNotificationValidation } from "@app/validation/moduleConfi
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";

 export const ExternalNotification = (): JSX.Element => {
  const { moduleConfig, setWorkingModuleConfig } = useDevice();
@@ -2,7 +2,7 @@ import { useDevice } from "@app/core/stores/deviceStore.ts";
 import type { MqttValidation } from "@app/validation/moduleConfig/mqtt.tsx";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";

 export const MQTT = (): JSX.Element => {
  const { config, moduleConfig, setWorkingModuleConfig } = useDevice();
@@ -2,7 +2,7 @@ import { useDevice } from "@app/core/stores/deviceStore.ts";
 import type { NeighborInfoValidation } from "@app/validation/moduleConfig/neighborInfo.tsx";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";

 export const NeighborInfo = (): JSX.Element => {
  const { moduleConfig, setWorkingModuleConfig } = useDevice();
@@ -2,7 +2,7 @@ import type { PaxcounterValidation } from "@app/validation/moduleConfig/paxcount
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";

 export const Paxcounter = (): JSX.Element => {
  const { moduleConfig, setWorkingModuleConfig } = useDevice();
@@ -2,7 +2,7 @@ import type { RangeTestValidation } from "@app/validation/moduleConfig/rangeTest
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";

 export const RangeTest = (): JSX.Element => {
  const { moduleConfig, setWorkingModuleConfig } = useDevice();
@@ -2,7 +2,7 @@ import type { SerialValidation } from "@app/validation/moduleConfig/serial.tsx";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";

 export const Serial = (): JSX.Element => {
  const { moduleConfig, setWorkingModuleConfig } = useDevice();
@@ -2,7 +2,7 @@ import type { StoreForwardValidation } from "@app/validation/moduleConfig/storeF
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";

 export const StoreForward = (): JSX.Element => {
  const { moduleConfig, setWorkingModuleConfig } = useDevice();
@@ -2,7 +2,7 @@ import type { TelemetryValidation } from "@app/validation/moduleConfig/telemetry
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
-import { Protobuf } from "@meshtastic/js";
+import { Protobuf } from "@meshtastic/core";

 export const Telemetry = (): JSX.Element => {
  const { moduleConfig, setWorkingModuleConfig } = useDevice();