QoL changes

Author: dayhaysoos

README.md

@@ -272,6 +272,7 @@ snippetManager.updateConfig({
   baseUrl: 'http://your-snippet-server.com/snippets',
 
   // Languages to support
+  // Note: The first language in this array will be used as the defaultLanguage
   supportedLanguages: ['python', 'kotlin', 'typescript'],
 
   // Default imports for each language
@@ -284,3 +285,18 @@ snippetManager.updateConfig({
 ```
 
 The snippet manager will cache the results, making subsequent fetches instant.
+
+### Default Language Behavior
+
+The `defaultLanguage` in the returned `SnippetResult` is always set to the first language in the `supportedLanguages` array. This means:
+
+1. The order of languages in your `supportedLanguages` configuration determines which language is used as the default
+2. This default is set regardless of whether the snippet exists in that language
+3. You can control the default language by reordering the `supportedLanguages` array
+
+For example, if you want Kotlin to be the default language, put it first in the array:
+```typescript
+snippetManager.updateConfig({
+  supportedLanguages: ['kotlin', 'python', 'typescript']  // Kotlin will be the default
+});
+```

example/shnippet.config.js

@@ -10,4 +10,6 @@ export const config = {
     prependEnd: ":prepend-end:",
   },
   outputDirectoryStructure: "byLanguage",
+  baseUrl: "http://localhost:3000",
+  supportedLanguages: ["python", "kotlin", "javascript"]
 };

example/src/App.jsx

@@ -1,44 +1,105 @@
-import { useState, useEffect } from "react";
-import { snippetManager } from "shnippet";
-import { config } from "../shnippet.config";
+import { useState, useEffect } from 'react';
+import { snippetManager } from 'shnippet';
+import { config } from '../shnippet.config';
 
 // Update the snippetManager with our config
 snippetManager.updateConfig(config);
 
 function App() {
-  const [snippet, setSnippet] = useState("");
-  const [error, setError] = useState("");
+  const [snippetResult, setSnippetResult] = useState(null);
+  const [selectedLanguage, setSelectedLanguage] = useState('');
+  const [error, setError] = useState('');
 
   useEffect(() => {
     async function loadSnippet() {
       try {
         // Try to load a test snippet
-        const content = await snippetManager.getSnippet("example1", "python");
-        setSnippet(content);
+        const result = await snippetManager.getSnippet('example1');
+        setSnippetResult(result);
+        // Set initial language to the default language
+        setSelectedLanguage(result.defaultLanguage);
       } catch (err) {
         setError(err.message);
       }
     }
     loadSnippet();
   }, []);
 
+  if (error) {
+    return (
+      <div style={{ padding: '20px' }}>
+        <h1>Shnippet Test</h1>
+        <div style={{ color: 'red' }}>Error: {error}</div>
+      </div>
+    );
+  }
+
+  if (!snippetResult) {
+    return (
+      <div style={{ padding: '20px' }}>
+        <h1>Shnippet Test</h1>
+        <div>Loading...</div>
+      </div>
+    );
+  }
+
   return (
-    <div style={{ padding: "20px" }}>
+    <div style={{ padding: '20px' }}>
       <h1>Shnippet Test</h1>
-      {error ? (
-        <div style={{ color: "red" }}>Error: {error}</div>
-      ) : (
+
+      {/* Language Tabs */}
+      <div style={{ marginBottom: '20px' }}>
+        {snippetResult.languages.map((language) => (
+          <button
+            key={language}
+            onClick={() => setSelectedLanguage(language)}
+            style={{
+              padding: '8px 16px',
+              marginRight: '8px',
+              border: 'none',
+              background: selectedLanguage === language ? '#007bff' : '#f0f0f0',
+              color: selectedLanguage === language ? 'white' : 'black',
+              cursor: 'pointer',
+              borderRadius: '4px',
+            }}
+          >
+            {language}
+          </button>
+        ))}
+      </div>
+
+      {/* Code Display */}
+      {snippetResult.imports?.[selectedLanguage] && (
+        <div>
+          <h3>Imports:</h3>
+          <pre
+            style={{
+              background: '#f5f5f5',
+              padding: '15px',
+              borderRadius: '4px',
+              whiteSpace: 'pre-wrap',
+            }}
+          >
+            {snippetResult.imports[selectedLanguage].join('\n')}
+          </pre>
+        </div>
+      )}
+
+      <div style={{ marginBottom: '20px' }}>
+        <h3>Code:</h3>
         <pre
           style={{
-            background: "#f5f5f5",
-            padding: "15px",
-            borderRadius: "4px",
-            whiteSpace: "pre-wrap",
+            background: '#f5f5f5',
+            padding: '15px',
+            borderRadius: '4px',
+            whiteSpace: 'pre-wrap',
           }}
         >
-          {snippet || "Loading..."}
+          {snippetResult.content[selectedLanguage]}
         </pre>
-      )}
+      </div>
+
+      {/* Imports Display */}
     </div>
   );
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shnippet",
   "type": "module",
-  "version": "0.0.1-alpha",
+  "version": "0.0.2-alpha",
   "description": "A snippet extraction tool for various programming languages.",
   "main": "dist/index.js",
   "browser": "dist/client.browser.js",

package/src/extract/SnippetExtractor.ts

@@ -24,6 +24,12 @@ export class SnippetExtractor {
   private prependBlocks: Record<string, string[]> = {};
   private projectRoot: string;
   private processedSnippets: Map<string, Set<string>> = new Map();
+  private languageToDirectory: Record<string, string> = {
+    python: 'py',
+    typescript: 'ts',
+    kotlin: 'kt',
+    javascript: 'js',
+  };
 
   constructor(config: SnippetExtractorConfig) {
     if (typeof window !== 'undefined') {
@@ -273,17 +279,18 @@ export class SnippetExtractor {
 
   private getLanguageFromExtension(extension: string): string {
     const extensionToLanguageMap: Record<string, string> = {
-      '.js': 'js',
+      '.js': 'javascript',
       '.ts': 'typescript',
-      '.kt': 'kt',
+      '.kt': 'kotlin',
+      '.py': 'python',
       '.swift': 'swift',
       '.gradle': 'gradle',
       '.bash': 'bash',
       '.xml': 'xml',
-      '.py': 'python',
     };
 
-    return extensionToLanguageMap[extension] || 'other';
+    const language = extensionToLanguageMap[extension] || 'other';
+    return this.languageToDirectory[language] || language;
   }
 
   public async extractSnippets(): Promise<void> {

package/src/utils/snippetManager.ts

@@ -16,13 +16,16 @@ export interface SnippetConfig {
   defaultImports?: Record<string, string[]>;
 }
 
+interface SnippetResult {
+  name: string;
+  languages: string[];
+  defaultLanguage: string;
+  imports?: Record<string, string[]>;
+  content: Record<string, string>;
+}
+
 interface SnippetManager {
-  getSnippet: (name: string, language: string) => Promise<string>;
-  getSnippetDisplayInfo: (name: string) => {
-    languages: string[];
-    defaultLanguage: string;
-    imports: Record<string, string[]>;
-  };
+  getSnippet: (name: string) => Promise<SnippetResult>;
   formatSnippet: (
     content: string,
     options: { language: string; showLineNumbers?: boolean }
@@ -31,8 +34,14 @@ interface SnippetManager {
 }
 
 class SnippetManagerImpl implements SnippetManager {
-  private cache: Map<string, string> = new Map();
+  private cache: Map<string, SnippetResult> = new Map();
   private config: SnippetConfig;
+  private languageToDirectory: Record<string, string> = {
+    python: 'py',
+    typescript: 'ts',
+    kotlin: 'kt',
+    javascript: 'js',
+  };
 
   constructor(config: Partial<SnippetConfig> = {}) {
     this.config = {
@@ -51,36 +60,13 @@ class SnippetManagerImpl implements SnippetManager {
     this.cache.clear();
   }
 
-  async getSnippet(name: string, language: string): Promise<string> {
-    const key = `${name}-${language}`;
-
-    if (this.cache.has(key)) {
-      return this.cache.get(key)!;
+  async getSnippet(name: string): Promise<SnippetResult> {
+    if (this.cache.has(name)) {
+      return this.cache.get(name)!;
     }
 
-    try {
-      const url = `${this.config.baseUrl}/${language}/${name}.snippet.txt`;
-      console.log('Fetching from:', url);
-      const response = await fetch(url);
-      console.log('Response status:', response.status);
-      console.log('Response type:', response.type);
-
-      if (!response.ok) {
-        throw new Error(`Failed to fetch snippet: ${name} for language: ${language}`);
-      }
-
-      const content = await response.text();
-      console.log('Received content:', content);
-      this.cache.set(key, content);
-      return content;
-    } catch (error) {
-      console.error(`Error fetching snippet ${name} for language ${language}:`, error);
-      throw error;
-    }
-  }
-
-  getSnippetDisplayInfo(name: string) {
     const languages = this.config.supportedLanguages || ['python', 'kotlin'];
+    const content: Record<string, string> = {};
     const imports: Record<string, string[]> = {};
 
     // Use configured imports or defaults
@@ -89,16 +75,43 @@ class SnippetManagerImpl implements SnippetManager {
       kotlin: ['import java.util.*'],
     };
 
-    // Add imports for each supported language
-    languages.forEach((lang) => {
-      imports[lang] = defaultImports[lang] || [];
-    });
+    try {
+      // Fetch content for each language
+      for (const language of languages) {
+        try {
+          // Map language names to directory names
+          const languageDir = this.languageToDirectory[language] || language;
+
+          const url = `${this.config.baseUrl}/${languageDir}/${name}.snippet.txt`;
+          const response = await fetch(url);
+
+          if (response.ok) {
+            content[language] = await response.text();
+            // Only add imports if they exist for this language
+            if (defaultImports[language]) {
+              imports[language] = defaultImports[language];
+            }
+          }
+        } catch (error) {
+          console.error(`Error fetching ${language} snippet for ${name}:`, error);
+        }
+      }
 
-    return {
-      languages,
-      defaultLanguage: languages[0],
-      imports,
-    };
+      const result: SnippetResult = {
+        name,
+        languages: Object.keys(content),
+        defaultLanguage: languages[0],
+        content,
+        // Only include imports if we have any
+        ...(Object.keys(imports).length > 0 && { imports }),
+      };
+
+      this.cache.set(name, result);
+      return result;
+    } catch (error) {
+      console.error(`Error fetching snippet ${name}:`, error);
+      throw error;
+    }
   }
 
   formatSnippet(content: string, options: { language: string; showLineNumbers?: boolean }): string {

package/test/__fixtures__/example.js

@@ -1,18 +1,16 @@
-// Example JavaScript file with snippets
-//:snippet-start: js-hello
-function sayHello() {
-  console.log('Hello from JavaScript!');
-}
-//:snippet-end:
+// :prepend-start: example1
+// JavaScript doesn't need any default imports
+// :prepend-end:
 
-//:snippet-start: js-class
-class Example {
-  constructor() {
-    this.message = 'This is a JavaScript class';
-  }
+// :snippet-start: example1
+function hello() {
+    console.log("Hello World!");
+    console.log("Another print");
+}
+// :snippet-end:
 
-  getMessage() {
-    return this.message;
-  }
+// :snippet-start: example2
+function goodbye() {
+    console.log("Goodbye World!");
 }
-//:snippet-end:
+// :snippet-end: 

package/test/__fixtures__/example.kt

@@ -1,11 +1,11 @@
 // Example TypeScript file with snippets
-//:snippet-start: ts-hello
+//:snippet-start: example1
 function sayHello(): void {
   console.log('Hello from TypeScript!');
 }
 //:snippet-end:
 
-//:snippet-start: ts-class
+//:snippet-start: example2
 class Example {
   private message: string;
   constructor() {