Literal component

Author: farmaazon

app/gui/src/project-view/components/ComponentBrowser.vue

@@ -3,7 +3,6 @@ import { componentBrowserBindings, listBindings } from '@/bindings'
 import { type Component } from '@/components/ComponentBrowser/component'
 import ComponentEditor from '@/components/ComponentBrowser/ComponentEditor.vue'
 import ComponentList from '@/components/ComponentBrowser/ComponentList.vue'
-import { Filtering } from '@/components/ComponentBrowser/filtering'
 import { useComponentBrowserInput, type Usage } from '@/components/ComponentBrowser/input'
 import GraphVisualization from '@/components/GraphEditor/GraphVisualization.vue'
 import SvgButton from '@/components/SvgButton.vue'
@@ -15,7 +14,6 @@ import { injectNodeColors } from '@/providers/graphNodeColors'
 import { injectInteractionHandler, type Interaction } from '@/providers/interactionHandler'
 import { useGraphStore } from '@/stores/graph'
 import type { RequiredImport } from '@/stores/graph/imports'
-import { useProjectStore } from '@/stores/project'
 import { injectProjectNames } from '@/stores/projectNames'
 import { useSuggestionDbStore } from '@/stores/suggestionDatabase'
 import { type Typename } from '@/stores/suggestionDatabase/entry'
@@ -29,6 +27,8 @@ import { debouncedGetter } from '@/util/reactivity'
 import type { ComponentInstance } from 'vue'
 import { computed, onMounted, onUnmounted, ref, toValue, watch, watchEffect } from 'vue'
 import type { SuggestionId } from 'ydoc-shared/languageServerTypes/suggestions'
+import { Range } from 'ydoc-shared/util/data/range'
+import { Ok } from 'ydoc-shared/util/data/result'
 import type { VisualizationIdentifier } from 'ydoc-shared/yjsModel'
 
 // Difference in position between the component browser and a node for the input of the component browser to
@@ -47,7 +47,6 @@ const EDGE_Y_OFFSET = -8
 
 const cssComponentEditorPadding = `${COMPONENT_EDITOR_PADDING}px`
 
-const projectStore = useProjectStore()
 const suggestionDbStore = useSuggestionDbStore()
 const graphStore = useGraphStore()
 const interaction = injectInteractionHandler()
@@ -177,15 +176,6 @@ const selectedSuggestion = computed(() => {
 
 const input = useComponentBrowserInput()
 
-const currentFiltering = computed(() => {
-  if (input.mode.mode === 'componentBrowsing') {
-    const currentModule = projectStore.moduleProjectPath
-    return new Filtering(input.mode.filter, currentModule?.ok ? currentModule.value : undefined)
-  } else {
-    return undefined
-  }
-})
-
 onUnmounted(() => {
   graphStore.cbEditedEdge = undefined
 })
@@ -285,20 +275,37 @@ watch(
 
 // === Accepting Entry ===
 
-function acceptSuggestion(component: Opt<Component> = null) {
-  const suggestionId = component?.suggestionId ?? selectedSuggestionId.value
-  if (suggestionId == null) return acceptInput()
-  const result = input.applySuggestion(suggestionId)
+function applyComponent(component: Opt<Component> = null) {
+  component ??= selected.value
+  if (component == null) {
+    input.switchToCodeEditMode()
+    return Ok()
+  }
+  if (component.suggestionId) {
+    return input.applySuggestion(component.suggestionId)
+  } else {
+    // Component without suggestion database entry, for example "literal" component.
+    input.content = { text: component.label, selection: Range.emptyAt(component.label.length) }
+    input.switchToCodeEditMode()
+    return Ok()
+  }
+}
+
+function acceptComponent(component: Opt<Component> = null) {
+  const result = applyComponent(component)
   if (result.ok) acceptInput()
   else result.error.log('Cannot apply suggestion')
 }
 
-function applySuggestion(component: Opt<Component> = null) {
-  const suggestionId = component?.suggestionId ?? selectedSuggestionId.value
-  if (suggestionId == null) return input.switchToCodeEditMode()
-  const result = input.applySuggestion(suggestionId)
-  if (!result.ok) result.error.log('Cannot apply suggestion')
-}
+// function editComponent(component: Opt<Component> = null) {
+//   const result = applyComponentToInput(component)
+//   if (result.ok) acceptInput()
+//   else result.error.log('Cannot apply suggestion')
+//   const suggestionId = component?.suggestionId ?? selectedSuggestionId.value
+//   if (suggestionId == null) return input.switchToCodeEditMode()
+//   const result = input.applySuggestion(suggestionId)
+//   if (!result.ok) result.error.log('Cannot apply suggestion')
+// }
 
 function acceptInput() {
   const appliedReturnType =
@@ -314,11 +321,14 @@ function acceptInput() {
 const outsideComponentBrowsing = computed(() => input.mode.mode != 'componentBrowsing')
 const actions = registerHandlers({
   'componentBrowser.editSuggestion': {
-    action: applySuggestion,
+    action: () => {
+      const result = applyComponent()
+      if (!result.ok) result.error.log('Cannot apply component')
+    },
     disabled: outsideComponentBrowsing,
   },
   'componentBrowser.acceptSuggestion': {
-    action: acceptSuggestion,
+    action: acceptComponent,
     disabled: outsideComponentBrowsing,
   },
   'componentBrowser.acceptInputAsCode': {
@@ -427,10 +437,11 @@ const listsHandler = listBindings.handler({
       />
     </div>
     <ComponentList
-      v-if="input.mode.mode === 'componentBrowsing' && currentFiltering"
+      v-if="input.mode.mode === 'componentBrowsing'"
       ref="componentList"
-      :filtering="currentFiltering"
-      @acceptSuggestion="acceptSuggestion($event)"
+      :filter="input.mode.filter"
+      :literal="input.mode.literal"
+      @acceptSuggestion="acceptComponent($event)"
       @update:selectedComponent="selected = $event"
     />
   </div>

app/gui/src/project-view/components/ComponentBrowser/ComponentList.vue

@@ -1,27 +1,32 @@
 <script setup lang="ts">
-import { makeComponentList, type Component } from '@/components/ComponentBrowser/component'
+import { makeComponentLists, type Component } from '@/components/ComponentBrowser/component'
 import ComponentEntry from '@/components/ComponentBrowser/ComponentEntry.vue'
-import type { Filtering } from '@/components/ComponentBrowser/filtering'
+import { Filter, Filtering } from '@/components/ComponentBrowser/filtering'
 import SvgIcon from '@/components/SvgIcon.vue'
 import VirtualizedList from '@/components/VirtualizedList.vue'
 import { groupColorStyle } from '@/composables/nodeColors'
+import { useProjectStore } from '@/stores/project'
 import { useSuggestionDbStore } from '@/stores/suggestionDatabase'
+import { Ast } from '@/util/ast'
 import { tryGetIndex } from '@/util/data/array'
-import { computed, ref, toRef, watch } from 'vue'
+import * as map from 'lib0/map'
+import { computed, ref, watch } from 'vue'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 
 const ITEM_SIZE = 24
 const SCROLL_TO_SELECTION_MARGIN = ITEM_SIZE / 2
 const MOUSE_SELECTION_DEBOUNCE = 200
 
 const props = defineProps<{
-  filtering: Filtering
+  filter: Filter
+  literal?: Ast.TextLiteral | Ast.NumericLiteral | undefined
 }>()
 const emit = defineEmits<{
   acceptSuggestion: [suggestion: Component]
   'update:selectedComponent': [selected: Component | null]
 }>()
 
+const projectStore = useProjectStore()
 const root = ref<HTMLElement>()
 const groupsPanel = ref<ComponentExposed<typeof VirtualizedList>>()
 const componentsPanel = ref<ComponentExposed<typeof VirtualizedList>>()
@@ -42,18 +47,34 @@ const displayedSelectedComponentIndex = computed({
   },
 })
 
-watch(toRef(props, 'filtering'), () => (displayedSelectedComponentIndex.value = 0))
+const filtering = computed(() => {
+  const currentModule = projectStore.moduleProjectPath
+  return new Filtering(props.filter, currentModule?.ok ? currentModule.value : undefined)
+})
+
+watch(filtering, () => (displayedSelectedComponentIndex.value = 0))
 watch(selectedGroupIndex, () => (selectedComponentIndex.value = 0))
 
 const suggestionDbStore = useSuggestionDbStore()
-const components = computed(() => makeComponentList(suggestionDbStore.entries, props.filtering))
+const components = computed(() => {
+  const lists = makeComponentLists(suggestionDbStore.entries, filtering.value)
+  if (props.literal != null) {
+    map
+      .setIfUndefined(lists, 'all', (): Component[] => [])
+      .unshift({
+        label: props.literal.code(),
+        icon: props.literal instanceof Ast.TextLiteral ? 'text_input' : 'input_number',
+      })
+  }
+  return lists
+})
 const currentGroups = computed(() => {
   return Array.from(components.value.entries(), ([id, components]) => ({
     id,
     ...(id === 'all' ? { name: 'all' }
     : id === 'suggestions' ? { name: 'suggestions' }
     : (suggestionDbStore.groups[id] ?? { name: 'unknown' })),
-    ...(props.filtering.pattern != null ? { displayedNumber: components.length } : {}),
+    ...(filtering.value?.pattern != null ? { displayedNumber: components.length } : {}),
   }))
 })
 const displayedGroupId = computed(() =>

app/gui/src/project-view/components/ComponentBrowser/component.ts

@@ -28,7 +28,7 @@ interface ComponentLabel {
 
 /** A model of component suggestion displayed in the Component Browser. */
 export interface Component extends ComponentLabel {
-  suggestionId: SuggestionId
+  suggestionId?: SuggestionId
   icon: Icon
   group?: number | undefined
 }
@@ -112,7 +112,7 @@ export function makeComponent({ id, entry, match }: ComponentInfo): Component {
 }
 
 /** Create {@link Component} list for each displayed group from filtered suggestions. */
-export function makeComponentList(
+export function makeComponentLists(
   db: SuggestionDb,
   filtering: Filtering,
 ): Map<GroupId, Component[]> {

app/gui/src/project-view/components/ComponentBrowser/input.ts

@@ -9,7 +9,7 @@ import {
   type SuggestionEntry,
   type SuggestionId,
 } from '@/stores/suggestionDatabase/entry'
-import { isIdentifier, type AstId, type Identifier } from '@/util/ast/abstract'
+import { Ast } from '@/util/ast'
 import { Err, Ok, type Result } from '@/util/data/result'
 import { type ProjectPath } from '@/util/projectPath'
 import { qnJoin, qnLastSegment } from '@/util/qualifiedName'
@@ -19,7 +19,7 @@ import { Range } from 'ydoc-shared/util/data/range'
 
 /** Information how the component browser is used, needed for proper input initializing. */
 export type Usage =
-  | { type: 'newNode'; sourcePort?: AstId | undefined }
+  | { type: 'newNode'; sourcePort?: Ast.AstId | undefined }
   | { type: 'editNode'; node: NodeId; cursorPos: number }
 
 /**
@@ -32,6 +32,7 @@ export type ComponentBrowserMode =
   | {
       mode: 'componentBrowsing'
       filter: Filter
+      literal?: Ast.TextLiteral | Ast.NumericLiteral
     }
   | {
       mode: 'codeEditing'
@@ -55,7 +56,7 @@ export function useComponentBrowserInput(
   const imports = shallowRef<RequiredImport[]>([])
   const processingAIPrompt = ref(false)
   const toastError = useToast.error()
-  const sourceNodeIdentifier = ref<Identifier>()
+  const sourceNodeIdentifier = ref<Ast.Identifier>()
   const switchedToCodeMode = ref<{ appliedSuggestion?: SuggestionEntry }>()
 
   // Text Model to being edited externally (by user).
@@ -110,12 +111,20 @@ export function useComponentBrowserInput(
         : {}),
       }
     } else {
+      let literal: Ast.MutableTextLiteral | Ast.NumericLiteral | undefined =
+        Ast.TextLiteral.tryParse(text.value)
+      if (literal == null) {
+        literal = Ast.NumericLiteral.tryParse(text.value)
+      } else {
+        literal.fixBoundaries()
+      }
       return {
         mode: 'componentBrowsing',
         filter: {
           pattern: text.value,
           ...(sourceNodeType.value != null ? { selfArg: sourceNodeType.value } : {}),
         },
+        ...(literal ? { literal } : {}),
       }
     }
   })
@@ -172,7 +181,7 @@ export function useComponentBrowserInput(
             qnJoin(
               owner.path ? qnLastSegment(owner.path)
               : owner.project ? qnLastSegment(owner.project)
-              : ('Main' as Identifier),
+              : ('Main' as Ast.Identifier),
               entry.name,
             )
           : entry.name) + ' ',
@@ -192,7 +201,9 @@ export function useComponentBrowserInput(
       const alreadyAdded = finalImports.some((existing) => requiredImportEquals(existing, anImport))
       const importedIdent =
         anImport.kind == 'Qualified' ?
-          qnLastSegment(anImport.module.path ?? anImport.module.project ?? ('Main' as Identifier))
+          qnLastSegment(
+            anImport.module.path ?? anImport.module.project ?? ('Main' as Ast.Identifier),
+          )
         : anImport.import
       const noLongerNeeded = !text.value.includes(importedIdent)
       if (!noLongerNeeded && !alreadyAdded) {
@@ -207,7 +218,7 @@ export function useComponentBrowserInput(
       case 'newNode':
         if (usage.sourcePort) {
           const ident = graphDb.getOutputPortIdentifier(usage.sourcePort)
-          sourceNodeIdentifier.value = ident != null && isIdentifier(ident) ? ident : undefined
+          sourceNodeIdentifier.value = ident != null && Ast.isIdentifier(ident) ? ident : undefined
         } else {
           sourceNodeIdentifier.value = undefined
         }
@@ -234,7 +245,7 @@ export function useComponentBrowserInput(
     const matchedCode = sourceNodeMatch?.[2]
     if (
       matchedSource != null &&
-      isIdentifier(matchedSource) &&
+      Ast.isIdentifier(matchedSource) &&
       matchedCode != null &&
       graphDb.getIdentDefiningNode(matchedSource)
     )

app/ydoc-shared/src/ast/tree.ts

@@ -1893,6 +1893,16 @@ export class MutableTextLiteral extends TextLiteral implements MutableExpression
     this.fields.set('close', unspaced(Token.new(code)))
   }
 
+  fixBoundaries() {
+    const open = this.open
+    const close = this.close
+    if (open != null && close == null) {
+      this.fields.set('close', unspaced(Token.new(open.code())))
+    } else if (open == null && close != null) {
+      this.fields.set('open', unspaced(Token.new(close.code())))
+    }
+  }
+
   setElements(elements: TextElement<OwnedRefs>[]) {
     this.fields.set(
       'elements',