Avoid relative imports whenever possible (#8074)

- Change imports from `'./'` relative imports to `@/` or `shared/` whenever possible
- Imports in `shared/` and `ydoc-server` have been avoided for now in case they don't work with `@/` imports.
- Deduplicate `events.ts`, remove `useDocumentEvent` in favor of `useEvent(document,` (and same for `useDocumentEventConditional`
- Replace incorrect doc comments (`//*` and `///`) with correct doc comments (`/**`)

# Important Notes
None

app/gui2/parser-codegen/serialization.ts

@@ -369,7 +369,7 @@ function isSimpleRead(reader: ts.Expression): reader is ts.CallExpression {
   )
 }
 
-function dbg<T extends ts.Node | undefined>(node: T): T {
+function _dbg<T extends ts.Node | undefined>(node: T): T {
   if (node == null) {
     console.log(node)
     return node

app/gui2/src/components/CodeEditor.vue

@@ -8,6 +8,8 @@ import { usePointer } from '@/util/events'
 import { useLocalStorage } from '@vueuse/core'
 import { computed, onMounted, ref, watchEffect } from 'vue'
 import * as Y from 'yjs'
+import { qnJoin, tryQualifiedName } from '../util/qualifiedName'
+import { unwrap } from '../util/result'
 
 // Use dynamic imports to aid code splitting. The codemirror dependency is quite large.
 const {
@@ -80,9 +82,11 @@ watchEffect(() => {
             .appendChild(document.createTextNode(`Type: ${expressionInfo.typename ?? 'Unknown'}`))
           const method = expressionInfo?.methodCall?.methodPointer
           if (method != null) {
-            const suggestionEntry = suggestionDbStore.methodPointerToEntry
-              .get(method.module)
-              ?.get(method.name)
+            const moduleName = tryQualifiedName(method.module)
+            const methodName = tryQualifiedName(method.name)
+            const qualifiedName = qnJoin(unwrap(moduleName), unwrap(methodName))
+            const [id] = suggestionDbStore.entries.nameToId.lookup(qualifiedName)
+            const suggestionEntry = id != null ? suggestionDbStore.entries.get(id) : undefined
             if (suggestionEntry != null) {
               const groupNode = dom.appendChild(document.createElement('div'))
               groupNode.appendChild(document.createTextNode('Group: '))

app/gui2/src/components/ComponentBrowser/__tests__/component.test.ts

@@ -5,6 +5,7 @@ import {
   labelOfEntry,
   type MatchedSuggestion,
 } from '@/components/ComponentBrowser/component'
+import { Filtering } from '@/components/ComponentBrowser/filtering'
 import {
   makeCon,
   makeMethod,
@@ -13,7 +14,6 @@ import {
   makeStaticMethod,
 } from '@/stores/suggestionDatabase/entry'
 import shuffleSeed from 'shuffle-seed'
-import { Filtering } from '../filtering'
 
 test.each([
   [makeModuleMethod('Standard.Base.Data.read'), 'Data.read'],

app/gui2/src/components/ComponentBrowser/__tests__/filtering.test.ts

@@ -1,5 +1,6 @@
 import { expect, test } from 'vitest'
 
+import { Filtering } from '@/components/ComponentBrowser/filtering'
 import {
   makeCon,
   makeFunction,
@@ -11,7 +12,6 @@ import {
   makeType,
 } from '@/stores/suggestionDatabase/entry'
 import type { QualifiedName } from '@/util/qualifiedName'
-import { Filtering } from '../filtering'
 
 test.each([
   { ...makeModuleMethod('Standard.Base.Data.read'), groupIndex: 0 },

app/gui2/src/components/ComponentBrowser/component.ts

@@ -1,3 +1,4 @@
+import { Filtering, type MatchResult } from '@/components/ComponentBrowser/filtering'
 import { SuggestionDb } from '@/stores/suggestionDatabase'
 import {
   SuggestionKind,
@@ -7,7 +8,6 @@ import {
 import { compareOpt } from '@/util/compare'
 import { isSome } from '@/util/opt'
 import { qnIsTopElement, qnLastSegment } from '@/util/qualifiedName'
-import { Filtering, type MatchResult } from './filtering'
 
 export interface Component {
   suggestionId: SuggestionId

app/gui2/src/components/ComponentBrowser/input.ts

@@ -1,8 +1,8 @@
+import type { Filter } from '@/components/ComponentBrowser/filtering'
 import { Ast, astContainingChar, parseEnso, readAstSpan, readTokenSpan } from '@/util/ast'
 import { GeneralOprApp } from '@/util/ast/opr'
 import { tryQualifiedName, type QualifiedName } from '@/util/qualifiedName'
 import { computed, ref, type ComputedRef, type Ref } from 'vue'
-import type { Filter } from './filtering'
 
 /** Input's editing context.
  *

app/gui2/src/components/ExecutionModeSelector.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import SvgIcon from '@/components/SvgIcon.vue'
-
-import { useDocumentEvent } from '@/util/events'
-
+import { useEvent } from '@/util/events'
 import { ref } from 'vue'
 
 const props = defineProps<{ modes: string[]; modelValue: string }>()
@@ -21,7 +19,7 @@ function onDocumentClick(event: MouseEvent) {
   }
 }
 
-useDocumentEvent('click', onDocumentClick)
+useEvent(document, 'click', onDocumentClick)
 </script>
 
 <template>

app/gui2/src/components/GraphEditor.vue

@@ -11,7 +11,7 @@ import { useProjectStore } from '@/stores/project'
 import type { Rect } from '@/stores/rect'
 import { useSuggestionDbStore } from '@/stores/suggestionDatabase'
 import { colorFromString } from '@/util/colors'
-import { keyboardBusy, keyboardBusyExceptIn, usePointer, useWindowEvent } from '@/util/events'
+import { keyboardBusy, keyboardBusyExceptIn, useEvent, usePointer } from '@/util/events'
 import { useNavigator } from '@/util/navigator'
 import { Vec2 } from '@/util/vec2'
 import * as set from 'lib0/set'
@@ -44,7 +44,7 @@ function updateExprRect(id: ExprId, rect: Rect) {
   exprRects.set(id, rect)
 }
 
-useWindowEvent('keydown', (event) => {
+useEvent(window, 'keydown', (event) => {
   graphBindingsHandler(event) || nodeSelectionHandler(event) || codeEditorHandler(event)
 })
 

app/gui2/src/components/GraphNode.vue

@@ -11,6 +11,7 @@ import {
 import type { Node } from '@/stores/graph'
 import { useProjectStore } from '@/stores/project'
 import { Rect } from '@/stores/rect'
+import { useSuggestionDbStore } from '@/stores/suggestionDatabase'
 import {
   DEFAULT_VISUALIZATION_CONFIGURATION,
   DEFAULT_VISUALIZATION_IDENTIFIER,
@@ -27,7 +28,6 @@ import { unwrap } from '@/util/result'
 import type { Vec2 } from '@/util/vec2'
 import type { ContentRange, ExprId, VisualizationIdentifier } from 'shared/yjsModel'
 import { computed, onUpdated, reactive, ref, shallowRef, watch, watchEffect } from 'vue'
-import { useSuggestionDbStore } from '../stores/suggestionDatabase'
 
 const MAXIMUM_CLICK_LENGTH_MS = 300
 
@@ -432,11 +432,8 @@ const suggestionEntry = computed(() => {
   if (!moduleName.ok || !methodName.ok) return undefined
   const qualifiedName = qnJoin(unwrap(moduleName), unwrap(methodName))
   const [id] = suggestionDbStore.entries.nameToId.lookup(qualifiedName)
-  if (id) {
-    return suggestionDbStore.entries.get(id)
-  } else {
-    return undefined
-  }
+  if (id == null) return undefined
+  return suggestionDbStore.entries.get(id)
 })
 const icon = computed(() => {
   if (suggestionEntry.value?.iconName) {

app/gui2/src/components/SelectionBrush.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { computed, ref, watch, type Ref } from 'vue'
-
 import { useApproach } from '@/util/animation'
-import { useDocumentEvent } from '@/util/events'
+import { useEvent } from '@/util/events'
 import type { Vec2 } from '@/util/vec2'
+import { computed, ref, watch, type Ref } from 'vue'
 
 const props = defineProps<{
   position: Vec2
@@ -20,7 +19,7 @@ watch(
 )
 
 let lastEventTarget: Element | null
-useDocumentEvent('mouseover', (event) => {
+useEvent(document, 'mouseover', (event) => {
   if (event.target instanceof Element) {
     if (event.target === lastEventTarget) {
       return

app/gui2/src/components/VisualizationContainer.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import SvgIcon from '@/components/SvgIcon.vue'
 import VisualizationSelector from '@/components/VisualizationSelector.vue'
-
+import { useVisualizationConfig } from '@/providers/visualizationConfig'
 import { PointerButtonMask, usePointer } from '@/util/events'
-
 import { ref } from 'vue'
-import { useVisualizationConfig } from '../providers/visualizationConfig'
 
 const props = defineProps<{
   /** If true, the visualization should be `overflow: visible` instead of `overflow: hidden`. */

app/gui2/src/components/visualizations/HistogramVisualization.vue

@@ -111,10 +111,10 @@ import * as d3 from 'd3'
 
 import SvgIcon from '@/components/SvgIcon.vue'
 import VisualizationContainer from '@/components/VisualizationContainer.vue'
-import { useVisualizationConfig } from '@/providers/visualizationConfig.ts'
+import { useVisualizationConfig } from '@/providers/visualizationConfig'
 
-import { useEvent, useEventConditional } from './events.ts'
-import { getTextWidth } from './measurement.ts'
+import { useEvent, useEventConditional } from '@/util/events'
+import { getTextWidth } from '@/util/measurement'
 
 const MARGIN = 25
 const AXIS_LABEL_HEIGHT = 10

app/gui2/src/components/visualizations/SQLVisualization.vue

@@ -43,7 +43,7 @@ import { computed } from 'vue'
 import * as sqlFormatter from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
 
 import VisualizationContainer from '@/components/VisualizationContainer.vue'
-import { DEFAULT_THEME, type RGBA, type Theme } from './builtins.ts'
+import { DEFAULT_THEME, type RGBA, type Theme } from '@/components/visualizations/builtins'
 
 const props = defineProps<{ data: Data }>()