⌨️ VSCode Autocomplete Extension

packages/vscode/README.md

@@ -0,0 +1,20 @@
+# @based/vscode
+
+Provides autocomplete suggestions with the names of `Based.io` Functions or Queries present in your project.
+
+![VSCode](https://raw.githubusercontent.com/atelier-saulx/based/luiguild/vscode/packages/vscode/VSCode.gif)
+
+Every time you interact with the `useBasedQuery` hook, the first required parameter is the name of the function you want to interact with. Just start typing the function name and suggestions will appear.
+
+To make the suggestions appear, you first need to create your functions and add a `based.config.ts` file as shown in the example below:
+
+```ts
+import { BasedFunctionConfig } from '@based/functions'
+
+const config: BasedFunctionConfig = {
+  name: 'myFunction',
+  type: 'query', // or function
+  public: false,
+}
+export default config
+```

packages/vscode/index.ts

@@ -0,0 +1,111 @@
+import * as vscode from 'vscode'
+import * as fs from 'fs'
+import * as path from 'path'
+
+export function activate(context: vscode.ExtensionContext) {
+  const basedProvider = new BasedCompletionItemProvider()
+
+  context.subscriptions.push(
+    vscode.languages.registerCompletionItemProvider(
+      [
+        { scheme: 'file', language: 'typescript' },
+        { scheme: 'file', language: 'typescriptreact' },
+        { scheme: 'file', language: 'javascript' },
+        { scheme: 'file', language: 'javascriptreact' },
+      ],
+      basedProvider,
+      '"',
+      "'",
+      '(',
+    ),
+  )
+}
+
+class BasedCompletionItemProvider implements vscode.CompletionItemProvider {
+  provideCompletionItems(
+    document: vscode.TextDocument,
+    position: vscode.Position,
+  ): vscode.CompletionItem[] | Thenable<vscode.CompletionItem[]> | null {
+    const linePrefix = document
+      .lineAt(position)
+      .text.substr(0, position.character)
+    const match = linePrefix.match(/useBasedQuery\s*\(\s*['"]([^'"]*)$/)
+
+    if (match) {
+      const queryValuePrefix = match[1] ?? ''
+      return this.extractValuesFromConfigFiles().then((values) => {
+        return values
+          .filter((item) => item.startsWith(queryValuePrefix))
+          .map((value) => {
+            const item = new vscode.CompletionItem(
+              value,
+              vscode.CompletionItemKind.Constant,
+            )
+            item.detail = 'Based Function'
+            return item
+          })
+      })
+    }
+
+    return null
+  }
+
+  private async extractValuesFromConfigFiles(): Promise<string[]> {
+    const values = new Set<string>()
+    const workspaceFolders = vscode.workspace.workspaceFolders
+
+    if (!workspaceFolders) {
+      return []
+    }
+
+    for (const folder of workspaceFolders) {
+      await this.findConfigFiles(folder.uri.fsPath, values)
+    }
+
+    return Array.from(values)
+  }
+
+  private async findConfigFiles(
+    dir: string,
+    values: Set<string>,
+  ): Promise<void> {
+    try {
+      const files = await fs.promises.readdir(dir)
+      for (const file of files) {
+        const fullPath = path.join(dir, file)
+        const stat = await fs.promises.stat(fullPath)
+
+        if (stat.isDirectory()) {
+          if (file.startsWith('.') || file === 'node_modules') {
+            continue
+          }
+          await this.findConfigFiles(fullPath, values)
+        } else if (file === 'based.config.ts') {
+          const content = await fs.promises.readFile(fullPath, 'utf-8')
+          const parsedValue = this.parseConfigFile(content)
+          if (parsedValue) {
+            values.add(parsedValue)
+          }
+        }
+      }
+    } catch (error) {
+      console.error('Error reading directory:', error)
+    }
+  }
+
+  private parseConfigFile(content: string): string | null {
+    const regex =
+      /name\s*:\s*['"](\w+)['"][\s\S]*?\btype\s*:\s*['"]([a-zA-Z]+)['"]/
+    const match = regex.exec(content)
+
+    if (match && (match[2] === 'function' || match[2] === 'query')) {
+      return match[1]
+    } else {
+      return null
+    }
+  }
+}
+
+export function deactivate() {
+  console.log('Based Query Autocomplete extension deactivated')
+}

packages/vscode/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@based/vscode",
+  "displayName": "Based.io Autocomplete",
+  "description": "Provides autocomplete names for Based.io functions.",
+  "version": "0.1.0",
+  "publisher": "Based.io",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/atelier-saulx/based.git"
+  },
+  "homepage": "https://github.com/atelier-saulx/based/tree/main/packages/vscode",
+  "bugs": {
+    "url": "https://github.com/atelier-saulx/based/issues"
+  },
+  "private": false,
+  "sideEffects": false,
+  "engines": {
+    "vscode": "^1.60.0"
+  },
+  "activationEvents": [
+    "onLanguage:typescript",
+    "onLanguage:typescriptreact",
+    "onLanguage:javascript",
+    "onLanguage:javascriptreact"
+  ],
+  "main": "./dist/index.js",
+  "scripts": {
+    "vscode:prepublish": "npm run build",
+    "build": "tsc -p ./"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.9",
+    "@types/vscode": "^1.90.0",
+    "prettier": "^3.3.2",
+    "typescript": "^5.5.2"
+  }
+}

packages/vscode/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es6",
+    "outDir": "dist",
+    "lib": [
+      "es6"
+    ],
+    "sourceMap": true,
+    "rootDir": ".",
+    "strict": true
+  },
+  "include": [
+    "index.ts"
+  ]
+}