Val Town Code Search

21
22// Default syntax highlighter
23async function defaultSyntaxHighlighter(code: string, language: string): Promise<string> {
24  // Using Prism.js for syntax highlighting
25  return `
32
33// Default block detector - finds the smallest logical block containing the cursor
34async function defaultBlockDetector(code: string, line: number, column: number): Promise<{start: number, end: number, type: string}> {
35  // Simple implementation - finds function, class, or statement blocks
36  const lines = code.split('\n');
37  
40  
41  // Simple heuristics for block detection
42  if (currentLine.includes('function') || currentLine.includes('=>')) {
43    return findFunctionBlock(lines, line);
44  } else if (currentLine.includes('class')) {
45    return findClassBlock(lines, line);
52
53// Default block explainer
54async function defaultBlockExplainer(code: string, blockInfo: {start: number, end: number, type: string}): Promise<string> {
55  const lines = code.split('\n');
56  const blockCode = lines.slice(blockInfo.start - 1, blockInfo.end).join('\n');
57  
58  switch (blockInfo.type) {
59    case 'function':
60      return `This is a function block. Functions are reusable pieces of code that perform specific tasks. This function contains ${blockInfo.end - blockInfo.start + 1} lines of code.`;
61    case 'class':
62      return `This is a class definition. Classes are blueprints for creating objects with shared properties and methods.`;
70}
71
72// Helper functions for block detection
73function findFunctionBlock(lines: string[], startLine: number): {start: number, end: number, type: string} {
74  let braceCount = 0;
75  let start = startLine;
76  let end = startLine;
77  
78  // Find function start
79  while (start > 0 && !lines[start - 1].includes('function') && !lines[start - 1].includes('=>')) {
80    start--;
81  }
82  
83  // Find function end by counting braces
84  for (let i = start - 1; i < lines.length; i++) {
85    const line = lines[i];
93  }
94  
95  return { start, end, type: 'function' };
96}
97
98function findClassBlock(lines: string[], startLine: number): {start: number, end: number, type: string} {
99  let braceCount = 0;
100  let start = startLine;
121}
122
123function findControlBlock(lines: string[], startLine: number): {start: number, end: number, type: string} {
124  let braceCount = 0;
125  let start = startLine;
141}
142
143function findStatementBlock(lines: string[], startLine: number): {start: number, end: number, type: string} {
144  return { start: startLine, end: startLine, type: 'statement' };
145}
146
147function escapeHtml(text: string): string {
148  return text
149    .replace(/&/g, '&amp;')
154}
155
156function generateUsagePage(): string {
157  return `
158<!DOCTYPE html>
194            background: #2563eb;
195        }
196        .custom-function-link {
197            display: inline-block;
198            background: #10b981;
204            font-size: 12px;
205        }
206        .custom-function-link:hover {
207            background: #059669;
208        }
233                <div>
234                    <h3 class="font-semibold text-gray-700 mb-2">🔧 Extensible</h3>
235                    <p class="text-gray-600 text-sm">Override default functions with custom implementations</p>
236                </div>
237            </div>
249                <div>
250                    <a href="/std/blob" class="example-link">📦 Val Town Blob Storage</a>
251                    <span class="text-sm text-gray-500">- Simple utility functions</span>
252                </div>
253                <div>
263
264        <div class="feature-card">
265            <h2 class="text-2xl font-semibold text-gray-800 mb-4">🎛️ Custom Functions</h2>
266            <p class="text-gray-600 mb-4">Enhance the annotator with custom implementations:</p>
267            
270                <div class="space-y-2">
271                    <div>
272                        <a href="/examples/ai-explainer.ts" class="custom-function-link">🤖 AI Explainer</a>
273                        <span class="text-sm text-gray-600">- Uses OpenAI for detailed code explanations</span>
274                    </div>
275                    <div>
276                        <a href="/examples/enhanced-detector.ts" class="custom-function-link">🔍 Enhanced Detector</a>
277                        <span class="text-sm text-gray-600">- Sophisticated block detection with more code constructs</span>
278                    </div>
279                    <div>
280                        <a href="/examples/custom-highlighter.ts" class="custom-function-link">🎨 Custom Highlighter</a>
281                        <span class="text-sm text-gray-600">- Enhanced highlighting with complexity indicators</span>
282                    </div>
284            </div>
285
286            <h3 class="text-lg font-semibold text-gray-700 mb-2">Usage with Custom Functions:</h3>
287            <div class="code-example text-sm">
288# With AI explanations
308                </div>
309                <div>
310                    <a href="/examples/README.md" class="text-blue-600 hover:text-blue-800 font-medium">🔧 Custom Functions Guide</a>
311                    <p class="text-sm text-gray-600">Learn how to create and use custom highlighters, detectors, and explainers</p>
312                </div>
373    const language = getLanguageFromPath(valPath);
374    
375    // Get custom function URLs from query parameters
376    const syntaxHighlighterUrl = c.req.query('syntaxHighlighter');
377    const blockDetectorUrl = c.req.query('blockDetector');
395});
396
397function getLanguageFromPath(path: string): string {
398  const ext = path.split('.').pop()?.toLowerCase();
399  switch (ext) {
414}
415
416async function generateAnnotatedPage(
417  sourceCode: string, 
418  language: string, 
461}
462
463function generateStyles(): string {
464  return `<style>
465        .code-container {
534}
535
536function generateJavaScript(
537  sourceCode: string,
538  syntaxHighlighterUrl?: string,
549        let currentBlock = null;
550        
551        // Custom function URLs
552        const syntaxHighlighterUrl = ${JSON.stringify(syntaxHighlighterUrl || null)};
553        const blockDetectorUrl = ${JSON.stringify(blockDetectorUrl || null)};
555        
556        // Wait for Prism to load and process the code
557        document.addEventListener('DOMContentLoaded', function() {
558            setTimeout(initializeInteractivity, 100);
559        });
560        
561        function initializeInteractivity() {
562            const codeElement = codeContainer.querySelector('code');
563            if (!codeElement) {
609        }
610        
611        async function detectBlock(code, line, column) {
612            if (blockDetectorUrl) {
613                const response = await fetch(blockDetectorUrl, {
622        }
623        
624        async function explainBlock(code, blockInfo) {
625            if (blockExplainerUrl) {
626                const response = await fetch(blockExplainerUrl, {
635        }
636        
637        function defaultBlockDetector(code, line, column) {
638            const lines = code.split('\\n');
639            const currentLine = lines[line - 1] || '';
640            
641            if (currentLine.includes('function') || currentLine.includes('=>')) {
642                return findFunctionBlock(lines, line);
643            } else if (currentLine.includes('class')) {
644                return findClassBlock(lines, line);
650        }
651        
652        function defaultBlockExplainer(code, blockInfo) {
653            switch (blockInfo.type) {
654                case 'function':
655                    return \`This is a function block. Functions are reusable pieces of code that perform specific tasks. This function contains \${blockInfo.end - blockInfo.start + 1} lines of code.\`;
656                case 'class':
657                    return 'This is a class definition. Classes are blueprints for creating objects with shared properties and methods.';
665        }
666        
667        function findFunctionBlock(lines, startLine) {
668            let braceCount = 0;
669            let start = startLine;
670            let end = startLine;
671            
672            // Find function start
673            while (start > 0 && !lines[start - 1].includes('function') && !lines[start - 1].includes('=>')) {
674                start--;
675            }
676            
677            // Find function end by counting braces
678            for (let i = start - 1; i < lines.length; i++) {
679                const line = lines[i];
687            }
688            
689            return { start, end, type: 'function' };
690        }
691        
692        function findClassBlock(lines, startLine) {
693            let braceCount = 0;
694            let start = startLine;
715        }
716        
717        function findControlBlock(lines, startLine) {
718            let braceCount = 0;
719            let start = startLine;
735        }
736        
737        function findStatementBlock(lines, startLine) {
738            return { start: startLine, end: startLine, type: 'statement' };
739        }
740        
741        function highlightBlock(blockInfo, lineHeight) {
742            const top = (blockInfo.start - 1) * lineHeight;
743            const height = (blockInfo.end - blockInfo.start + 1) * lineHeight;
750        }
751        
752        function showPopup(content, x, y) {
753            explanationContent.innerHTML = content;
754            popup.style.display = 'block';
757        }
758        
759        function closePopup() {
760            popup.style.display = 'none';
761        }

valSource README.md11 matches

@curtcox•Updated 1 hour ago

8- **Interactive Hover**: Hover over code blocks to highlight the smallest logical containing block
9- **Click Explanations**: Click on highlighted blocks to see detailed explanations in a popup
10- **Extensible**: Override default functions with custom implementations via query parameters
11
12## Usage
41This will fetch the source from `https://esm.town/v/nbbaier/sqliteExplorerApp@100-main/main.tsx` and display it with annotations.
42
43### Custom Functions
44
45You can override the default functionality by providing custom val URLs as query parameters:
46
47#### Syntax Highlighter
79  "start": 8,
80  "end": 15,
81  "type": "function|class|control|statement"
82}
83```
95    "start": 8,
96    "end": 15,
97    "type": "function"
98  }
99}
128The default block detector uses simple heuristics to identify:
129
1301. **Function blocks**: Lines containing `function` or `=>`
1312. **Class blocks**: Lines containing `class`
1323. **Control blocks**: Lines containing `if`, `for`, or `while`
145## Architecture
146
147The val is structured with three main pluggable functions:
148
149- `defaultSyntaxHighlighter()`: Handles code syntax highlighting
151- `defaultBlockExplainer()`: Generates explanations for code blocks
152
153Each function can be replaced with custom implementations via query parameters, making the system highly extensible.
154
155## Error Handling
160- Client-side errors are logged to console
161
162## Example Custom Functions
163
164The project includes several example custom functions to demonstrate extensibility:
165
166### AI-Powered Explainer (`/examples/ai-explainer.ts`)
174### Enhanced Block Detector (`/examples/enhanced-detector.ts`)
175Provides more sophisticated block detection with support for:
176- Functions, classes, interfaces
177- Objects and arrays
178- Control structures

Users

View all 2 users

import { OpenAI } from "https://esm.town/v/std/openai"; export default async function(req: Request): Promise<Response> { if (req.method === "OPTIONS") { return new Response(null, { headers: { "Access-Control-Allow-Origin": "*",

@webup70 vals

Updated 1 month ago

LangChain (https://langchain.com) Ambassador, KubeSphere (https://kubesphere.io) Ambassador, CNCF OpenFunction (https://openfunction.dev) TOC Member.

Documentation

View all 28 documentation results

Val Town Code Search Return to Val Town

nicoFunctionScript2 file matches

functionZilla1 file match

chatSampleFunctionExtraction2 file matches

chatSampleFunctionMultiple2 file matches

chatSampleFunctionSingle2 file matches

multiplicationFunctionTest1 file match

chatSampleFunctionTagging2 file matches

FunctionToHTMLForm1 file match

Files

valSource index.ts56 matches

valSource README.md11 matches

Users

@lost19911 val

@webup70 vals

Documentation

Val Town Code SearchReturn to Val Town

nicoFunctionScript2 file matches

functionZilla1 file match

chatSampleFunctionExtraction2 file matches

chatSampleFunctionMultiple2 file matches

chatSampleFunctionSingle2 file matches

multiplicationFunctionTest1 file match

chatSampleFunctionTagging2 file matches

FunctionToHTMLForm1 file match

Files

valSourceindex.ts56 matches

valSourceREADME.md11 matches

Users

@lost19911 val

@webup70 vals

Documentation

Val Town Code Search Return to Val Town

valSource index.ts56 matches

valSource README.md11 matches