Migrate to pnpm (#10422)

Fixes #10197

# Important Notes
From now on, package installation will be using `pnpm install`. Installing it globally is fine for convenience, but it can also be used as `corepack pnpm install` without having to install anything other than node. For now, all other scripts are still invoked using `npm`, so we can still invoke them with usual `--workspace` setting. As far as I can tell that doesn't really have any other side effects and is identical as running the script through `pnpm run` in respective workspace project subdirectory.

Author: Frizi

.prettierignore

@@ -29,6 +29,7 @@ tools/http-test-helper/www-files
 **/scala-parser.js
 **/package-lock.json
 **/msdfgen_wasm.js
+pnpm-lock.yaml
 
 # Generated files
 app/ide-desktop/lib/client/electron-builder-config.json

app/gui2/README.md

@@ -24,7 +24,7 @@ See [Vite Configuration Reference](https://vitejs.dev/config/).
 ## Project Setup
 
 ```sh
-npm install
+pnpm install
 ```
 
 ### Compile and Hot-Reload for Development

app/gui2/mock/MockProjectStoreWrapper.vue

@@ -14,7 +14,7 @@ const emit = defineEmits<{ 'update:modelValue': [modelValue: string] }>()
 const projectStore = useProjectStore()
 const mod = projectStore.projectModel.createNewModule('Main.enso')
 projectStore.setObservedFileName('Main.enso')
-mod.doc.ydoc.emit('load', [])
+mod.doc.ydoc.emit('load', [mod.doc.ydoc])
 let syncedCode: string | undefined
 watch(
   () => projectStore.module,

app/gui2/node.env.d.ts

@@ -42,12 +42,19 @@
     "@ag-grid-community/styles": "^30.2.0",
     "@ag-grid-enterprise/core": "^30.2.0",
     "@ag-grid-enterprise/range-selection": "^30.2.1",
-    "@babel/parser": "^7.22.16",
+    "@babel/parser": "^7.24.7",
+    "@codemirror/commands": "^6.6.0",
+    "@codemirror/language": "^6.10.2",
+    "@codemirror/lint": "^6.8.1",
+    "@codemirror/search": "^6.5.6",
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/view": "^6.28.3",
     "@fast-check/vitest": "^0.0.8",
     "@floating-ui/vue": "^1.0.6",
     "@lexical/code": "^0.16.0",
     "@lexical/link": "^0.16.0",
     "@lexical/list": "^0.16.0",
+    "@lexical/selection": "^0.16.0",
     "@lexical/markdown": "^0.16.0",
     "@lexical/plain-text": "^0.16.0",
     "@lexical/rich-text": "^0.16.0",
@@ -62,7 +69,7 @@
     "ag-grid-enterprise": "^30.2.1",
     "codemirror": "^6.0.1",
     "culori": "^3.2.0",
-    "enso-dashboard": "^0.1.0",
+    "enso-dashboard": "workspace:*",
     "events": "^3.3.0",
     "fast-diff": "^1.3.0",
     "hash-sum": "^2.0.0",
@@ -75,8 +82,8 @@
     "partysocket": "^1.0.1",
     "postcss-inline-svg": "^6.0.0",
     "postcss-nesting": "^12.0.1",
+    "react-toastify": "^9.1.3",
     "rimraf": "^5.0.5",
-    "semver": "^7.5.4",
     "sucrase": "^3.34.0",
     "veaury": "^2.3.18",
     "vue": "^3.4.19",
@@ -111,38 +118,39 @@
     "@vitejs/plugin-react": "^4.0.4",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitest/coverage-v8": "^1.3.1",
-    "@volar/vue-typescript": "^1.6.5",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",
     "change-case": "^4.1.2",
     "cross-env": "^7.0.3",
     "css.escape": "^1.5.1",
     "d3": "^7.4.0",
-    "enso-project-manager-shim": "^1.0.0",
-    "esbuild": "^0.19.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "enso-common": "workspace:*",
+    "enso-project-manager-shim": "workspace:*",
     "eslint": "^8.49.0",
     "eslint-plugin-vue": "^9.22.0",
     "floating-vue": "^2.0.0-beta.24",
     "hash-wasm": "^4.10.0",
     "histoire": "^0.17.2",
-    "jsdom": "^22.1.0",
+    "jsdom": "^24.1.0",
     "playwright": "^1.39.0",
     "postcss-nesting": "^12.0.1",
-    "prettier": "^3.2.5",
-    "prettier-plugin-organize-imports": "^3.2.4",
+    "prettier": "^3.3.2",
+    "prettier-plugin-organize-imports": "^4.0.0",
     "shuffle-seed": "^1.1.6",
     "sql-formatter": "^13.0.0",
     "tailwindcss": "^3.2.7",
     "tar": "^6.2.0",
     "tsx": "^4.7.1",
-    "typescript": "~5.2.2",
+    "typescript": "^5.5.3",
     "unbzip2-stream": "^1.4.3",
-    "vite": "^5.3.1",
-    "vite-plugin-vue-devtools": "7.3.4",
+    "vite": "^5.3.3",
+    "vite-plugin-vue-devtools": "7.3.5",
     "vitest": "^1.3.1",
     "vue-react-wrapper": "^0.3.1",
-    "vue-tsc": "^1.8.27"
+    "vue-tsc": "^2.0.24"
   }
 }

app/gui2/package.json

@@ -75,6 +75,7 @@ registerAutoBlurHandler()
   <ProjectView
     v-else
     v-show="!props.hidden"
+    v-bind="$attrs"
     class="App"
     :class="[...classSet.keys()]"
     :renameProject="renameProject"

app/gui2/src/App.vue

@@ -70,16 +70,17 @@ import {
   type ComponentInstance,
 } from 'vue'
 
+import { builtinWidgets } from '@/components/widgets'
+
 const keyboard = provideKeyboard()
 const projectStore = useProjectStore()
 const suggestionDb = provideSuggestionDbStore(projectStore)
 const graphStore = provideGraphStore(projectStore, suggestionDb)
 const widgetRegistry = provideWidgetRegistry(graphStore.db)
 const _visualizationStore = provideVisualizationStore(projectStore)
 
-widgetRegistry.loadBuiltins()
-
 onMounted(() => {
+  widgetRegistry.loadWidgets(Object.entries(builtinWidgets))
   if (isDevMode) {
     ;(window as any).suggestionDb = toRaw(suggestionDb.entries)
   }
@@ -512,14 +513,6 @@ interface NewNodeOptions {
   sourcePort?: AstId | undefined
 }
 
-/**
- * Start creating a node, basing its inputs and position on the current selection, if any;
- * or the current viewport, otherwise.
- */
-function addNodeAuto() {
-  createWithComponentBrowser(fromSelection() ?? { placement: { type: 'viewport' } })
-}
-
 function addNodeDisconnected() {
   nodeSelection.deselectAll()
   createWithComponentBrowser({ placement: { type: 'viewport' } })
@@ -808,5 +801,11 @@ const groupColors = computed(() => {
   left: 0;
   width: 0;
   height: 0;
+  contain: layout size style;
+  will-change: transform;
+}
+
+::selection {
+  background-color: rgba(255, 255, 255, 20%);
 }
 </style>

app/gui2/src/components/GraphEditor.vue

@@ -335,7 +335,7 @@ const nodeEditHandler = nodeEditBindings.handler({
   },
 })
 
-function startEditingNode(position: Vec2 | undefined) {
+function startEditingNode(position?: Vec2 | undefined) {
   let sourceOffset = props.node.rootExpr.code().length
   if (position != null) {
     let domNode, domOffset
@@ -608,9 +608,6 @@ watchEffect(() => {
   border-radius: var(--node-border-radius);
   transition: box-shadow 0.2s ease-in-out;
   box-sizing: border-box;
-  ::selection {
-    background-color: rgba(255, 255, 255, 20%);
-  }
 }
 
 .content {

app/gui2/src/components/GraphEditor/GraphNode.vue

@@ -1,7 +1,6 @@
 import { useEvent } from '@/composables/events'
 import { type ProjectStore } from '@/stores/project'
 import { useToast } from '@/util/toast'
-import { ProjectManagerEvents } from '../../../../ide-desktop/lib/dashboard/src/services/ProjectManager'
 
 export function useGraphEditorToasts(projectStore: ProjectStore) {
   const toastStartup = useToast.info({ autoClose: false })
@@ -13,7 +12,7 @@ export function useGraphEditorToasts(projectStore: ProjectStore) {
   toastStartup.show('Initializing the project. This can take up to one minute.')
   projectStore.firstExecution.then(toastStartup.dismiss)
 
-  useEvent(document, ProjectManagerEvents.loadingFailed, () =>
+  useEvent(document, 'project-manager-loading-failed', () =>
     toastConnectionLost.show('Lost connection to Language Server.'),
   )
 

app/gui2/src/components/GraphEditor/toasts.ts

@@ -15,7 +15,7 @@ export default {}
 </script>
 <script setup lang="ts">
 import { hookBeforeFunctionCall } from '@/util/patching'
-import { nextTick } from 'process'
+import { nextTick } from 'vue'
 
 const props = withDefaults(
   defineProps<{

app/gui2/src/components/SizeTransition.vue

@@ -222,6 +222,7 @@ const contentStyle = computed(() => {
 
 .content {
   overflow: auto;
+  contain: strict;
 }
 
 .content.overflow {

app/gui2/src/components/VisualizationContainer.vue

@@ -337,8 +337,8 @@ function zoomed(event: d3.D3ZoomEvent<Element, unknown>) {
     const newYDomain = transformEvent.rescaleY(yScale_).domain()
     const yMin = newYDomain[0] ?? 0
     if (yMin >= -EPSILON && yMin <= EPSILON) {
-      newYDomain[0] -= yMin
-      newYDomain[1] -= yMin
+      newYDomain[0]! -= yMin
+      newYDomain[1]! -= yMin
     }
     if ((newYDomain[0] ?? 0) >= 0) {
       yDomain.value = newYDomain

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

@@ -171,7 +171,6 @@ const selectableRowLimits = computed(() => {
   }
   return defaults
 })
-const wasAutomaticallyAutosized = ref(false)
 
 const newNodeSelectorValues = computed(() => {
   let selector
@@ -562,8 +561,7 @@ function lockColumnSize(e: ColumnResizedEvent) {
   if (!e.finished || e.source === 'api') return
   // If the user manually resized (or manually autosized) a column, we don't want to auto-size it
   // on a resize.
-  const manuallySized = e.source !== 'autosizeColumns' || !wasAutomaticallyAutosized.value
-  wasAutomaticallyAutosized.value = false
+  const manuallySized = e.source !== 'autosizeColumns'
   for (const column of e.columns ?? []) {
     const field = column.getColDef().field
     if (field && manuallySized) widths.set(field, column.getActualWidth())

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

@@ -6,8 +6,7 @@ import { useAppClass } from '@/providers/appClass'
 import { Range } from '@/util/data/range'
 import { Vec2 } from '@/util/data/vec2'
 import { uuidv4 } from 'lib0/random'
-import { nextTick } from 'process'
-import { computed, ref, shallowReactive, watchEffect, watchPostEffect } from 'vue'
+import { computed, nextTick, ref, shallowReactive, watchEffect, watchPostEffect } from 'vue'
 </script>
 
 <script setup lang="ts" generic="T">

app/gui2/src/components/widgets/ListWidget.vue

@@ -0,0 +1,3 @@
+export const builtinWidgets = import.meta.glob('@/components/GraphEditor/widgets/*.vue', {
+  eager: true,
+})

app/gui2/src/components/widgets/index.ts

@@ -28,7 +28,7 @@ export class InteractionHandler {
 
   setCurrent(interaction: Interaction | undefined) {
     if (!this.isActive(interaction)) {
-      this.currentInteraction.value?.end()
+      this.currentInteraction.value?.end?.()
       this.currentInteraction.value = interaction
     }
   }
@@ -46,21 +46,21 @@ export class InteractionHandler {
   end(interaction: Interaction) {
     if (this.isActive(interaction)) {
       this.currentInteraction.value = undefined
-      interaction.end()
+      interaction.end?.()
     }
   }
 
   /** Cancel the current interaction, if it is the specified instance. */
   cancel(interaction: Interaction) {
     if (this.isActive(interaction)) {
       this.currentInteraction.value = undefined
-      interaction.cancel()
+      interaction.cancel?.()
     }
   }
 
   handleCancel(): boolean {
     const hasCurrent = this.currentInteraction.value != null
-    this.currentInteraction.value?.cancel()
+    this.currentInteraction.value?.cancel?.()
     this.currentInteraction.value = undefined
     return hasCurrent
   }
@@ -87,9 +87,9 @@ type InteractionEventHandler = (event: PointerEvent, navigator: GraphNavigator)
 
 export interface Interaction {
   /** Called when the interaction is explicitly canceled, e.g. with the `Esc` key. */
-  cancel(): void
+  cancel?(): void
   /** Called when the interaction is ended due to activity elsewhere. */
-  end(): void
+  end?(): void
   /** Uses a `capture` event handler to allow an interaction to respond to clicks over any element. */
   pointerdown?: InteractionEventHandler
   /** Uses a `capture` event handler to allow an interaction to respond to mouse button release

app/gui2/src/providers/interactionHandler.ts

@@ -330,19 +330,10 @@ export class WidgetRegistry {
   })
   constructor(private db: GraphDb) {}
 
-  loadBuiltins() {
-    const bulitinWidgets = import.meta.glob('@/components/GraphEditor/widgets/*.vue')
-    this.loadAndCheckWidgetModules(Object.entries(bulitinWidgets))
-  }
-
-  async loadAndCheckWidgetModules(
-    asyncModules: [path: string, asyncModule: () => Promise<unknown>][],
-  ) {
-    for (const [path, mod] of asyncModules) {
-      mod().then((mod) => {
-        if (isWidgetModule(mod)) this.registerWidgetModule(mod)
-        else console.error('Invalid widget module:', path, mod)
-      })
+  loadWidgets(modules: [path: string, module: unknown][]) {
+    for (const [path, mod] of modules) {
+      if (isWidgetModule(mod)) this.registerWidgetModule(mod)
+      else console.error('Invalid widget module:', path, mod)
     }
   }
 

app/gui2/src/providers/widgetRegistry.ts

@@ -5,16 +5,19 @@ import { useCurrentEdit, type CurrentEdit } from '@/providers/widgetTree'
 import { assert } from 'shared/util/assert'
 import { expect, test, vi, type Mock } from 'vitest'
 import { proxyRefs } from 'vue'
-import { WidgetEditHandler } from '../editHandler'
+import { WidgetEditHandler, type WidgetEditHooks } from '../editHandler'
 
 // If widget's name is a prefix of another widget's name, then it is its ancestor.
 // The ancestor with longest name is a direct parent.
 function editHandlerTree(
   widgets: string[],
   interactionHandler: InteractionHandler,
-  createInteraction: (name: PortId) => Record<string, Mock>,
+  createInteraction: (name: PortId) => WidgetEditHooks & Record<string, Mock>,
   widgetTree: CurrentEdit,
-): Map<string, { handler: WidgetEditHandler; interaction: Record<string, Mock> }> {
+): Map<
+  string,
+  { handler: WidgetEditHandler; interaction: WidgetEditHooks & Record<string, Mock> }
+> {
   const handlers = new Map()
   for (const id of widgets) {
     let parent: string | undefined
@@ -161,7 +164,7 @@ test.each`
     interactionHandler.handlePointerEvent(event, 'pointerdown', navigator)
     const handlersCalled = new Set<string>()
     for (const [id, { interaction }] of handlers)
-      if (interaction.pointerdown?.mock.lastCall) handlersCalled.add(id)
+      if ((interaction.pointerdown as Mock | undefined)?.mock.lastCall) handlersCalled.add(id)
     expect([...handlersCalled].sort()).toEqual([...expectedHandlerCallsSet].sort())
   },
 )

app/gui2/src/providers/widgetRegistry/__tests__/editHandler.test.ts

@@ -258,7 +258,7 @@ export interface WidgetEditHooks extends Interaction {
    * {@link WidgetEditHandler} being called, or because a child is to be started.
    */
   start?(origin: PortId): void
-  end(origin?: PortId | undefined): void
+  end?(origin?: PortId | undefined): void
   childEnded?(origin?: PortId | undefined): void
   /**
    * Hook called when a child widget provides an updated value.