add client lib @kittycad/lib (#214)

* add client lib

* tsc after build

* update after spec update

* remove uneeded check

* updates

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* fixes

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* fix camera drag

* fix throttle typing

* comment with link to issue

---------

Signed-off-by: Jess Frazelle <github@jessfraz.com>
Co-authored-by: Jess Frazelle <github@jessfraz.com>

.github/workflows/test.yml

@@ -14,6 +14,7 @@ jobs:
           node-version-file: '.nvmrc'
       - run: yarn install
       - run: yarn build:wasm
+      - run: yarn tsc
       - run: yarn simpleserver:ci
       - run: yarn test:nowatch
       - run: yarn test:cov

package.json

@@ -8,6 +8,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.13",
+    "@kittycad/lib": "^0.0.22",
     "@react-hook/resize-observer": "^1.2.6",
     "@tauri-apps/api": "^1.3.0",
     "@testing-library/jest-dom": "^5.14.1",

src/App.tsx

@@ -20,7 +20,6 @@ import { Stream } from './components/Stream'
 import ModalContainer from 'react-modal-promise'
 import { EngineCommandManager } from './lang/std/engineConnection'
 import { isOverlap } from './lib/utils'
-import { SetToken } from './components/TokenInput'
 import { AppHeader } from './components/AppHeader'
 import { isTauri } from './lib/isTauri'
 import { KCLError } from './lang/errors'
@@ -88,7 +87,6 @@ export function App() {
     addKCLError: s.addKCLError,
     theme: s.theme,
   }))
-  const showTauriTokenInput = isTauri() && !token
   // const onChange = React.useCallback((value: string, viewUpdate: ViewUpdate) => {
   const onChange = (value: string, viewUpdate: ViewUpdate) => {
     setCode(value)

src/components/DebugPanel.tsx

@@ -6,13 +6,17 @@ import { useState } from 'react'
 import { ActionButton } from '../components/ActionButton'
 import { faCheck } from '@fortawesome/free-solid-svg-icons'
 
-type SketchModeCmd = EngineCommand['cmd']['DefaultCameraEnableSketchMode']
+type SketchModeCmd = Extract<
+  EngineCommand['cmd'],
+  { type: 'default_camera_enable_sketch_mode' }
+>
 
 export const DebugPanel = () => {
   const { engineCommandManager } = useStore((s) => ({
     engineCommandManager: s.engineCommandManager,
   }))
   const [sketchModeCmd, setSketchModeCmd] = useState<SketchModeCmd>({
+    type: 'default_camera_enable_sketch_mode',
     origin: { x: 0, y: 0, z: 0 },
     x_axis: { x: 1, y: 0, z: 0 },
     y_axis: { x: 0, y: 1, z: 0 },
@@ -56,10 +60,8 @@ export const DebugPanel = () => {
       <ActionButton
         onClick={() => {
           engineCommandManager?.sendSceneCommand({
-            type: 'ModelingCmdReq',
+            type: 'modeling_cmd_req',
-            cmd: {
+            cmd: sketchModeCmd,
-              DefaultCameraEnableSketchMode: sketchModeCmd,
-            },
             cmd_id: uuidv4(),
             file_id: uuidv4(),
           })

src/components/Stream.tsx

@@ -3,6 +3,7 @@ import { PanelHeader } from '../components/PanelHeader'
 import { v4 as uuidv4 } from 'uuid'
 import { useStore } from '../useStore'
 import { throttle } from '../lib/utils'
+import { EngineCommand } from '../lang/std/engineConnection'
 
 export const Stream = () => {
   const videoRef = useRef<HTMLVideoElement>(null)
@@ -25,7 +26,7 @@ export const Stream = () => {
 
   const file_id = uuidv4()
 
-  const debounceSocketSend = throttle((message) => {
+  const debounceSocketSend = throttle<EngineCommand>((message) => {
     engineCommandManager?.sendSceneCommand(message)
   }, 16)
   const handleMouseMove: MouseEventHandler<HTMLVideoElement> = ({
@@ -41,14 +42,13 @@ export const Stream = () => {
     const interaction = ctrlKey ? 'pan' : 'rotate'
 
     debounceSocketSend({
-      type: 'ModelingCmdReq',
+      type: 'modeling_cmd_req',
       cmd: {
-        CameraDragMove: {
+        type: 'camera_drag_move',
-          interaction,
+        interaction,
-          window: {
+        window: {
-            x: x,
+          x: x,
-            y: y,
+          y: y,
-          },
         },
       },
       cmd_id: uuidv4(),
@@ -73,14 +73,13 @@ export const Stream = () => {
     const interaction = ctrlKey ? 'pan' : 'rotate'
 
     engineCommandManager?.sendSceneCommand({
-      type: 'ModelingCmdReq',
+      type: 'modeling_cmd_req',
       cmd: {
-        CameraDragStart: {
+        type: 'camera_drag_start',
-          interaction,
+        interaction,
-          window: {
+        window: {
-            x: x,
+          x: x,
-            y: y,
+          y: y,
-          },
         },
       },
       cmd_id: newId,
@@ -104,14 +103,13 @@ export const Stream = () => {
     const interaction = ctrlKey ? 'pan' : 'rotate'
 
     engineCommandManager?.sendSceneCommand({
-      type: 'ModelingCmdReq',
+      type: 'modeling_cmd_req',
       cmd: {
-        CameraDragEnd: {
+        type: 'camera_drag_end',
-          interaction,
+        interaction,
-          window: {
+        window: {
-            x: x,
+          x: x,
-            y: y,
+          y: y,
-          },
         },
       },
       cmd_id: uuidv4(),

src/components/TokenInput.tsx

@@ -1,12 +0,0 @@
-import { LoginButton } from './LoginButton'
-
-export const SetToken = () => {
-  if (!(window as any).__TAURI__) {
-    return <div />
-  }
-  return (
-    <div className="w-full flex gap-2">
-      <LoginButton />
-    </div>
-  )
-}

src/lang/std/engineConnection.ts

@@ -1,6 +1,7 @@
 import { SourceRange } from '../executor'
 import { Selections } from '../../useStore'
 import { VITE_KC_API_WS_MODELING_URL } from '../../env'
+import { Models } from '@kittycad/lib'
 
 interface ResultCommand {
   type: 'result'
@@ -48,43 +49,13 @@ interface XYZ {
   y: number
   z: number
 }
-export interface EngineCommand {
+
-  type: 'ModelingCmdReq'
+export type _EngineCommand = Models['ModelingCmdReq_type']
-  cmd: {
+
-    StartPath?: {}
+// TODO extending this type to add the type property is a work around
-    MovePathPen?: {
+// see https://github.com/KittyCAD/api-deux/issues/1096
-      path: uuid
+export interface EngineCommand extends _EngineCommand {
-      to: XYZ
+  type: 'modeling_cmd_req'
-    }
-    ExtendPath?: {
-      path: uuid
-      segment: {
-        Line: {
-          end: XYZ
-        }
-      }
-    }
-    ClosePath?: {
-      path_id: uuid
-    }
-    Extrude?: {
-      target: uuid
-      distance: number
-      cap: boolean
-    }
-    CameraDragMove?: MouseDrag
-    CameraDragStart?: MouseStuff
-    CameraDragEnd?: MouseStuff
-    DefaultCameraEnableSketchMode?: {
-      origin: XYZ
-      x_axis: XYZ
-      y_axis: XYZ
-      distance_to_plane: number
-      ortho: boolean
-    }
-  }
-  cmd_id: uuid
-  file_id: uuid
 }
 
 export class EngineCommandManager {
@@ -152,12 +123,12 @@ export class EngineCommandManager {
         console.warn('something went wrong: ', event.data)
       } else {
         const message = JSON.parse(event.data)
-        if (message.type === 'SDPAnswer') {
+        if (message.type === 's_d_p_answer') {
           this.pc?.setRemoteDescription(
             new RTCSessionDescription(message.answer)
           )
-        } else if (message.type === 'IceServerInfo' && this.pc) {
+        } else if (message.type === 'ice_server_info' && this.pc) {
-          console.log('received IceServerInfo')
+          console.log('received ice_server_info')
           this.pc?.setConfiguration({
             iceServers: message.ice_servers,
           })
@@ -173,10 +144,10 @@ export class EngineCommandManager {
           this.pc.addEventListener('icecandidate', (event) => {
             if (!this.pc || !this.socket) return
             if (event.candidate === null) {
-              console.log('sent SDPOffer')
+              console.log('sent s_d_p_offer')
               this.socket.send(
                 JSON.stringify({
-                  type: 'SDPOffer',
+                  type: 's_d_p_offer',
                   offer: this.pc.localDescription,
                 })
               )
@@ -191,9 +162,9 @@ export class EngineCommandManager {
             .createOffer()
             .then(async (descriptionInit) => {
               await this?.pc?.setLocalDescription(descriptionInit)
-              console.log('sent SDPOffer begin')
+              console.log('sent s_d_p_offer begin')
               const msg = JSON.stringify({
-                type: 'SDPOffer',
+                type: 's_d_p_offer',
                 offer: this.pc?.localDescription,
               })
               this.socket?.send(msg)
@@ -297,9 +268,10 @@ export class EngineCommandManager {
       console.log('socket not ready')
       return
     }
-    if (command.cmd.CameraDragMove && this.lossyDataChannel) {
+    const cmd = command.cmd
+    if (cmd.type === 'camera_drag_move' && this.lossyDataChannel) {
       console.log('sending lossy command', command, this.lossyDataChannel)
-      command.cmd.CameraDragMove.sequence = this.sequence
+      cmd.sequence = this.sequence
       this.sequence++
       this.lossyDataChannel.send(JSON.stringify(command))
       return

src/lang/std/extrude.ts

@@ -41,13 +41,12 @@ export const extrude: InternalFn = (
     ],
     range: sourceRange,
     command: {
-      type: 'ModelingCmdReq',
+      type: 'modeling_cmd_req',
       cmd: {
-        Extrude: {
+        type: 'extrude',
-          target: sketch.id,
+        target: sketch.id,
-          distance: length,
+        distance: length,
-          cap: true,
+        cap: true,
-        },
       },
       cmd_id: id,
       file_id: uuidv4(),

src/lang/std/sketch.ts

@@ -268,18 +268,16 @@ export const line: SketchLineHelper = {
       params: [lineData, previousSketch],
       range: sourceRange,
       command: {
-        type: 'ModelingCmdReq',
+        type: 'modeling_cmd_req',
         cmd: {
-          ExtendPath: {
+          type: 'extend_path',
-            path: sketchGroup.id,
+          path: sketchGroup.id,
-            segment: {
+          segment: {
-              Line: {
+            type: 'line',
-                end: {
+            end: {
-                  x: lineData.to[0],
+              x: lineData.to[0],
-                  y: lineData.to[1],
+              y: lineData.to[1],
-                  z: 0,
+              z: 0,
-                },
-              },
             },
           },
         },
@@ -1571,11 +1569,10 @@ export const close: InternalFn = (
     params: [lineData],
     range: sourceRange,
     command: {
-      type: 'ModelingCmdReq',
+      type: 'modeling_cmd_req',
       cmd: {
-        ClosePath: {
+        type: 'close_path',
-          path_id: sketchGroup.id,
+        path_id: sketchGroup.id,
-        },
       },
       cmd_id: id,
       file_id: uuidv4(),
@@ -1637,24 +1634,23 @@ export const startSketchAt: InternalFn = (
     params: [lineData],
     range: sourceRange,
     command: {
-      type: 'ModelingCmdReq',
+      type: 'modeling_cmd_req',
       cmd: {
-        StartPath: {},
+        type: 'start_path',
       },
       cmd_id: pathId,
       file_id: uuidv4(),
     },
   })
   engineCommandManager.sendSceneCommand({
-    type: 'ModelingCmdReq',
+    type: 'modeling_cmd_req',
     cmd: {
-      MovePathPen: {
+      type: 'move_path_pen',
-        path: pathId,
+      path: pathId,
-        to: {
+      to: {
-          x: lineData.to[0],
+        x: lineData.to[0],
-          y: lineData.to[1],
+        y: lineData.to[1],
-          z: 0,
+        z: 0,
-        },
       },
     },
     cmd_id: id,

src/lib/utils.ts

@@ -28,26 +28,26 @@ export function normaliseAngle(angle: number): number {
   return result > 180 ? result - 360 : result
 }
 
-export function throttle(
+export function throttle<T>(
-  func: (...args: any[]) => any,
+  func: (args: T) => any,
   wait: number
-): (...args: any[]) => any {
+): (args: T) => any {
   let timeout: ReturnType<typeof setTimeout> | null
-  let latestArgs: any[]
+  let latestArgs: T
   let latestTimestamp: number
 
   function later() {
     timeout = null
-    func(...latestArgs)
+    func(latestArgs)
   }
 
-  function throttled(...args: any[]) {
+  function throttled(args: T) {
     const currentTimestamp = Date.now()
     latestArgs = args
 
     if (!latestTimestamp || currentTimestamp - latestTimestamp >= wait) {
       latestTimestamp = currentTimestamp
-      func(...latestArgs)
+      func(latestArgs)
     } else if (!timeout) {
       timeout = setTimeout(later, wait - (currentTimestamp - latestTimestamp))
     }

tsconfig.json

@@ -14,7 +14,7 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
-    "module": "CommonJS",
+    "module": "ES2022",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,

yarn.lock

@@ -1710,6 +1710,16 @@
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
+"@kittycad/lib@^0.0.22":
+  version "0.0.22"
+  resolved "https://registry.yarnpkg.com/@kittycad/lib/-/lib-0.0.22.tgz#3d9b063c6cfe6593cdf7b61d3ffb5c1251262401"
+  integrity sha512-H9AS3/8Ag2fJRZqNNkbOjy/08kEqeOxWEWsmQIzJ/dNGYRD0B7Fm+UM6T8eSEkPP2+KKrIhoHMYEfGd9KjY1uQ==
+  dependencies:
+    node-fetch "3.3.2"
+    openapi-types "^12.0.0"
+    ts-node "^10.9.1"
+    tslib "~2.4"
+
 "@lezer/common@^1.0.0":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.0.3.tgz#1808f70e2b0a7b1fdcbaf5c074723d2d4ed1e4c5"
@@ -3039,6 +3049,11 @@ damerau-levenshtein@^1.0.8:
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
   integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
 
+data-uri-to-buffer@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz#d8feb2b2881e6a4f58c2e08acfd0e2834e26222e"
+  integrity sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==
+
 data-urls@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-3.0.2.tgz#9cf24a477ae22bcef5cd5f6f0bfbc1d2d3be9143"
@@ -3720,6 +3735,14 @@ fbjs@^3.0.0, fbjs@^3.0.1:
     setimmediate "^1.0.5"
     ua-parser-js "^1.0.35"
 
+fetch-blob@^3.1.2, fetch-blob@^3.1.4:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/fetch-blob/-/fetch-blob-3.2.0.tgz#f09b8d4bbd45adc6f0c20b7e787e793e309dcce9"
+  integrity sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==
+  dependencies:
+    node-domexception "^1.0.0"
+    web-streams-polyfill "^3.0.3"
+
 file-entry-cache@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
@@ -3792,6 +3815,13 @@ form-data@^4.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+formdata-polyfill@^4.0.10:
+  version "4.0.10"
+  resolved "https://registry.yarnpkg.com/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz#24807c31c9d402e002ab3d8c720144ceb8848423"
+  integrity sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==
+  dependencies:
+    fetch-blob "^3.1.2"
+
 fraction.js@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
@@ -5141,6 +5171,20 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
+node-domexception@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/node-domexception/-/node-domexception-1.0.0.tgz#6888db46a1f71c0b76b3f7555016b63fe64766e5"
+  integrity sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==
+
+node-fetch@3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-3.3.2.tgz#d1e889bacdf733b4ff3b2b243eb7a12866a0b78b"
+  integrity sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==
+  dependencies:
+    data-uri-to-buffer "^4.0.0"
+    fetch-blob "^3.1.4"
+    formdata-polyfill "^4.0.10"
+
 node-fetch@^2.6.1, node-fetch@^2.6.12:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.12.tgz#02eb8e22074018e3d5a83016649d04df0e348fba"
@@ -5277,6 +5321,11 @@ onetime@^5.1.2:
   dependencies:
     mimic-fn "^2.1.0"
 
+openapi-types@^12.0.0:
+  version "12.1.3"
+  resolved "https://registry.yarnpkg.com/openapi-types/-/openapi-types-12.1.3.tgz#471995eb26c4b97b7bd356aacf7b91b73e777dd3"
+  integrity sha512-N4YtSYJqghVu4iek2ZUvcN/0aqH1kRDuNqzcycDxhOUpg7GdvLa2F3DgS6yBNhInhv2r/6I0Flkn7CqL8+nIcw==
+
 opener@^1.5.1:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
@@ -6287,6 +6336,11 @@ tslib@^1.8.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
+tslib@~2.4:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
+  integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
@@ -6557,6 +6611,11 @@ wasm-pack@^0.12.1:
   dependencies:
     binary-install "^1.0.1"
 
+web-streams-polyfill@^3.0.3:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz#71c2718c52b45fd49dbeee88634b3a60ceab42a6"
+  integrity sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==
+
 web-vitals@^2.1.0:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-2.1.4.tgz#76563175a475a5e835264d373704f9dde718290c"