@kispace-io/core 0.7.0

package/src/core/editorregistry.ts

@@ -0,0 +1,303 @@
+import {EDITOR_AREA_MAIN} from "./constants";
+import {KPart} from "../parts/k-part";
+import {activePartSignal, activeEditorSignal, partDirtySignal} from "./appstate";
+import {watchSignal} from "./signals";
+import {subscribe} from "./events";
+import {TOPIC_WORKSPACE_CONNECTED} from "./filesys";
+import {KTabs} from "../parts/k-tabs";
+import {TabContribution, IconContribution, contributionRegistry, TOPIC_CONTRIBUTEIONS_CHANGED} from "./contributionregistry";
+import {rootContext} from "./di";
+
+export const EVENT_SHOW_EDITOR = "editors/showEditor";
+
+export interface EditorInput {
+    key: string;
+    editorId: string;
+    title: string;
+    icon?: string;
+    data: any;
+    noOverflow?: boolean;
+    widgetFactory: (container: any, tab: HTMLElement) => any;
+    state: { [key: string]: any };
+}
+
+export interface EditorInputHandler {
+    canHandle: (input: any) => boolean;
+    handle: (input: any) => Promise<EditorInput>;
+    lazyInit?: () => Promise<void> | void;
+    ranking?: number;  // Higher ranking = higher priority (default: 0)
+}
+
+interface RegisteredEditorInputHandler {
+    definition: EditorInputHandler;
+    initialized: boolean;
+    lazyInitPromise?: Promise<void>;
+}
+
+/**
+ * Interface for editors that can provide content, selection, and snippets.
+ * Implement this interface to make editor content accessible via commands.
+ */
+export interface EditorContentProvider {
+    /**
+     * Gets the complete contents of the editor.
+     * @returns The full content as a string, or null if not available.
+     */
+    getContent(): string | null;
+
+    /**
+     * Gets the currently selected text in the editor.
+     * @returns The selected text, or null if no selection exists.
+     */
+    getSelection(): string | null;
+
+    /**
+     * Gets a code snippet with n lines before and after the cursor position.
+     * @param lines Number of lines before and after the cursor (default: 5).
+     * @returns An object containing the snippet, cursor line number, or null if not available.
+     */
+    getSnippet(lines?: number): { snippet: string; cursorLine: number } | null;
+
+    /**
+     * Gets the programming language of the editor content.
+     * @returns The language identifier (e.g., 'python', 'javascript'), or null if not available.
+     */
+    getLanguage(): string | null;
+
+    /**
+     * Gets the workspace path of the file being edited.
+     * @returns The file path relative to the workspace, or null if not available.
+     */
+    getFilePath(): string | null;
+}
+
+class EditorRegistry {
+    private editorInputHandlers: RegisteredEditorInputHandler[] = [];
+    private listenersAttached = false;
+    private cachedIconContributions: IconContribution[] | null = null;
+    private signalCleanup?: () => void;
+
+    constructor() {
+        subscribe(TOPIC_WORKSPACE_CONNECTED, () => {
+            // TODO close all editors
+        });
+        
+        subscribe(TOPIC_CONTRIBUTEIONS_CHANGED, (event: any) => {
+            if (event.target === 'system.icons') {
+                this.cachedIconContributions = null;
+            }
+        });
+    }
+    
+    private getSortedIconContributions(): IconContribution[] {
+        if (this.cachedIconContributions !== null) {
+            return this.cachedIconContributions;
+        }
+        
+        const contributions = contributionRegistry.getContributions('system.icons') as IconContribution[];
+        
+        // Sort by priority (higher priority first), then by label for tie-breaking
+        this.cachedIconContributions = [...contributions].sort((a, b) => {
+            const priorityA = a.priority ?? 0;
+            const priorityB = b.priority ?? 0;
+            if (priorityB !== priorityA) {
+                // Higher priority comes first (descending order)
+                return priorityB - priorityA;
+            }
+            return a.label.localeCompare(b.label);
+        });
+        
+        return this.cachedIconContributions;
+    }
+
+    private setupEventListeners(editorArea: KTabs) {
+        if (this.listenersAttached) {
+            return;
+        }
+        this.listenersAttached = true;
+
+        const handler = (event: CustomEvent) => {
+            const tabPanel = event.detail
+            if (tabPanel) {
+                const parts = Array.from(tabPanel.querySelectorAll(`*`)).filter((element): element is KPart => element instanceof KPart)
+                parts.forEach((part) => {
+                    activePartSignal.set(part)
+                    // Only update activeEditorSignal if this is an editor part
+                    if ((part as KPart).isEditor) {
+                        activeEditorSignal.set(part)
+                    }
+                })
+            }
+        }
+        // @ts-ignore
+        editorArea.addEventListener("tab-shown", handler)
+
+        const closed = (event: CustomEvent) => {
+            const tabPanel: HTMLElement = event.detail
+            const parts = Array.from(tabPanel.querySelectorAll(`*`)).filter((element): element is KPart => element instanceof KPart)
+            parts.forEach((part) => {
+                // part.close() will be automatically called by disconnected callback of part
+                if (activePartSignal.get() == part) {
+                    activePartSignal.set(null as unknown as KPart)
+                }
+                if (activeEditorSignal.get() == part) {
+                    activeEditorSignal.set(null as unknown as KPart)
+                }
+            })
+        }
+        // @ts-ignore
+        editorArea.addEventListener("tab-closed", closed)
+
+        const dirtyHandler = (targetPart: KPart) => {
+            const tabPanel = targetPart.closest("wa-tab-panel") as HTMLElement
+            const name = tabPanel.getAttribute("name") as string
+            editorArea.markDirty(name, targetPart.isDirty())
+        }
+        this.signalCleanup = watchSignal(partDirtySignal, dirtyHandler)
+    }
+
+    registerEditorInputHandler(editorInputHandler: EditorInputHandler) {
+        this.editorInputHandlers.push({
+            definition: editorInputHandler,
+            initialized: false
+        });
+        // Sort by ranking (higher ranking first), default ranking is 0
+        this.editorInputHandlers.sort((a, b) => {
+            const rankA = a.definition.ranking ?? 0;
+            const rankB = b.definition.ranking ?? 0;
+            return rankB - rankA;
+        });
+    }
+
+    private async ensureHandlerInitialized(entry: RegisteredEditorInputHandler): Promise<void> {
+        const handler = entry.definition;
+        if (!handler.lazyInit || entry.initialized) {
+            return;
+        }
+
+        if (!entry.lazyInitPromise) {
+            entry.lazyInitPromise = Promise.resolve(handler.lazyInit()).then(() => {
+                entry.initialized = true;
+                entry.lazyInitPromise = undefined;
+            }).catch(error => {
+                entry.lazyInitPromise = undefined;
+                throw error;
+            });
+        }
+
+        await entry.lazyInitPromise;
+    }
+
+    async handleInput(input: any) {
+        // Handlers are already sorted by ranking, so iterate in order
+        for (let i = 0; i < this.editorInputHandlers.length; i++) {
+            const entry = this.editorInputHandlers[i];
+            const editorInputHandler = entry.definition;
+            if (editorInputHandler.canHandle(input)) {
+                await this.ensureHandlerInitialized(entry);
+                return await editorInputHandler.handle(input);
+            }
+        }
+    }
+
+    getEditorArea(): KTabs | null {
+        return document.querySelector(`k-tabs#${EDITOR_AREA_MAIN}`) as KTabs | null
+    }
+
+    async loadEditor(editorInput: EditorInput | any) {
+        if (!editorInput) {
+            return
+        }
+
+        if (!("widgetFactory" in editorInput)) {
+            editorInput = await this.handleInput(editorInput)
+        }
+
+        if (!editorInput || !("widgetFactory" in editorInput)) {
+            return
+        }
+
+        const editorArea = this.getEditorArea();
+        
+        if (!editorArea) {
+            console.error("Editor area not found. The split pane system may not be initialized yet.");
+            return;
+        }
+
+        this.setupEventListeners(editorArea);
+
+        if (editorArea.has(editorInput.key)) {
+            editorArea.activate(editorInput.key)
+            return
+        }
+
+        editorArea.open({
+            name: editorInput.key,
+            editorId: editorInput.editorId,
+            label: editorInput.title,
+            icon: editorInput.icon,
+            closable: true,
+            noOverflow: editorInput.noOverflow,
+            component: editorInput.widgetFactory
+        } as TabContribution)
+    }
+
+    getFileIcon(fileNameOrType: string): string {
+        const extension = fileNameOrType.includes('.') 
+            ? fileNameOrType.split('.').pop()?.toLowerCase() || ''
+            : fileNameOrType.toLowerCase();
+        
+        const sortedContributions = this.getSortedIconContributions();
+        
+        if (sortedContributions.length === 0) {
+            return 'file';
+        }
+        
+        for (const contribution of sortedContributions) {
+            if (contribution.mappings && contribution.mappings[extension]) {
+                return contribution.mappings[extension];
+            }
+        }
+        
+        return 'file';
+    }
+}
+
+export const editorRegistry = new EditorRegistry();
+rootContext.put("editorRegistry", editorRegistry);
+
+contributionRegistry.registerContribution<IconContribution>('system.icons', {
+    label: 'Default File Icons',
+    mappings: {
+        'pdf': 'file-pdf',
+        'md': 'book',
+        'txt': 'file-lines',
+        'ts': 'code',
+        'tsx': 'code',
+        'js': 'code',
+        'jsx': 'code',
+        'json': 'file-code',
+        'geojson': 'file-code',
+        'py': 'python',
+        'html': 'code',
+        'htm': 'code',
+        'css': 'code',
+        'scss': 'code',
+        'sass': 'code',
+        'xml': 'file-code',
+        'yaml': 'file-code',
+        'yml': 'file-code',
+        'sql': 'database',
+        'kml': 'file-code',
+        'gpx': 'file-code',
+        'jpg': 'image',
+        'jpeg': 'image',
+        'png': 'image',
+        'gif': 'image',
+        'svg': 'image',
+        'webp': 'image',
+        'bmp': 'image',
+        'ico': 'image',
+    },
+    priority: 0
+});

package/src/core/esmsh-service.ts

@@ -0,0 +1,404 @@
+import { rootContext } from "./di";
+import { i18nService } from "./i18n";
+import { createLogger } from "./logger";
+
+const logger = createLogger('EsmShService');
+
+export interface EsmShSource {
+    type: 'npm' | 'github' | 'jsr' | 'pr';
+    package?: string;
+    owner?: string;
+    repo?: string;
+    version?: string;
+    path?: string;
+    commit?: string;
+}
+
+export interface EsmShOptions {
+    deps?: Record<string, string>;
+    target?: string;
+    dev?: boolean;
+    bundle?: boolean;
+    external?: string[];
+    externalAll?: boolean;
+}
+
+class EsmShService {
+    private static readonly ESM_SH_BASE = 'https://esm.sh';
+    private static readonly GITHUB_PREFIX = 'gh/';
+    private static readonly JSR_PREFIX = 'jsr/';
+    private static readonly PR_PREFIX = 'pr/';
+
+    isEsmShUrl(url: string): boolean {
+        try {
+            const urlObj = new URL(url);
+            return urlObj.hostname === 'esm.sh' || urlObj.hostname === 'raw.esm.sh';
+        } catch {
+            return false;
+        }
+    }
+
+    isSourceIdentifier(source: string): boolean {
+        if (this.isEsmShUrl(source)) {
+            return false;
+        }
+        
+        if (this.isHttpUrl(source)) {
+            return false;
+        }
+
+        return this.parseSource(source) !== null;
+    }
+
+    private isHttpUrl(url: string): boolean {
+        try {
+            const parsed = new URL(url);
+            return parsed.protocol === 'http:' || parsed.protocol === 'https:';
+        } catch {
+            return false;
+        }
+    }
+
+    parseSource(source: string): EsmShSource | null {
+        if (!source || typeof source !== 'string') {
+            return null;
+        }
+
+        source = source.trim();
+
+        if (this.isHttpUrl(source)) {
+            return null;
+        }
+
+        if (source.startsWith(EsmShService.GITHUB_PREFIX)) {
+            return this.parseGitHubSource(source);
+        }
+
+        if (source.startsWith(EsmShService.JSR_PREFIX)) {
+            return this.parseJsrSource(source);
+        }
+
+        if (source.startsWith(EsmShService.PR_PREFIX)) {
+            return this.parsePrSource(source);
+        }
+
+        return this.parseNpmSource(source);
+    }
+
+    private parseGitHubSource(source: string): EsmShSource | null {
+        const withoutPrefix = source.substring(EsmShService.GITHUB_PREFIX.length);
+        const parts = withoutPrefix.split('/');
+        
+        if (parts.length < 2) {
+            return null;
+        }
+
+        const owner = parts[0];
+        const repoWithRef = parts[1];
+        
+        let repo: string;
+        let version: string | undefined;
+        let path: string | undefined;
+
+        const refMatch = repoWithRef.match(/^(.+?)(@(.+))?$/);
+        if (!refMatch) {
+            return null;
+        }
+
+        repo = refMatch[1];
+        version = refMatch[3];
+
+        if (parts.length > 2) {
+            path = parts.slice(2).join('/');
+        }
+
+        return {
+            type: 'github',
+            owner,
+            repo,
+            version,
+            path
+        };
+    }
+
+    private parseJsrSource(source: string): EsmShSource | null {
+        const withoutPrefix = source.substring(EsmShService.JSR_PREFIX.length);
+        
+        if (!withoutPrefix.startsWith('@')) {
+            return null;
+        }
+
+        const parts = withoutPrefix.split('/');
+        if (parts.length < 2) {
+            return null;
+        }
+
+        const scope = parts[0];
+        const packageWithVersion = parts[1];
+        
+        let packageName: string;
+        let version: string | undefined;
+        let path: string | undefined;
+
+        const versionMatch = packageWithVersion.match(/^(.+?)(@(.+))?$/);
+        if (!versionMatch) {
+            return null;
+        }
+
+        packageName = `${scope}/${versionMatch[1]}`;
+        version = versionMatch[3];
+
+        if (parts.length > 2) {
+            path = parts.slice(2).join('/');
+        }
+
+        return {
+            type: 'jsr',
+            package: packageName,
+            version,
+            path
+        };
+    }
+
+    private parsePrSource(source: string): EsmShSource | null {
+        const withoutPrefix = source.substring(EsmShService.PR_PREFIX.length);
+        const parts = withoutPrefix.split('/');
+        
+        if (parts.length < 2) {
+            return null;
+        }
+
+        const owner = parts[0];
+        const repoWithCommit = parts[1];
+        
+        let repo: string;
+        let commit: string | undefined;
+
+        const commitMatch = repoWithCommit.match(/^(.+?)@(.+)$/);
+        if (commitMatch) {
+            repo = commitMatch[1];
+            commit = commitMatch[2];
+        } else {
+            repo = repoWithCommit;
+        }
+
+        return {
+            type: 'pr',
+            owner,
+            repo,
+            commit
+        };
+    }
+
+    private parseNpmSource(source: string): EsmShSource | null {
+        const parts = source.split('/');
+        const firstPart = parts[0];
+        
+        let packageName: string;
+        let version: string | undefined;
+        let path: string | undefined;
+
+        const versionMatch = firstPart.match(/^(.+?)(@(.+))?$/);
+        if (!versionMatch) {
+            return null;
+        }
+
+        packageName = versionMatch[1];
+        version = versionMatch[3];
+
+        if (parts.length > 1) {
+            path = parts.slice(1).join('/');
+        }
+
+        return {
+            type: 'npm',
+            package: packageName,
+            version,
+            path
+        };
+    }
+
+    buildEsmShUrl(source: EsmShSource, options?: EsmShOptions): string {
+        let url = EsmShService.ESM_SH_BASE;
+
+        switch (source.type) {
+            case 'npm':
+                url += `/${source.package}`;
+                if (source.version) {
+                    url += `@${source.version}`;
+                }
+                if (source.path) {
+                    url += `/${source.path}`;
+                }
+                break;
+
+            case 'github':
+                url += `/${EsmShService.GITHUB_PREFIX}${source.owner}/${source.repo}`;
+                if (source.version) {
+                    url += `@${source.version}`;
+                }
+                if (source.path) {
+                    url += `/${source.path}`;
+                }
+                break;
+
+            case 'jsr':
+                url += `/${EsmShService.JSR_PREFIX}${source.package}`;
+                if (source.version) {
+                    url += `@${source.version}`;
+                }
+                if (source.path) {
+                    url += `/${source.path}`;
+                }
+                break;
+
+            case 'pr':
+                url += `/${EsmShService.PR_PREFIX}${source.owner}/${source.repo}`;
+                if (source.commit) {
+                    url += `@${source.commit}`;
+                }
+                break;
+        }
+
+        const queryParams: string[] = [];
+
+        if (options?.deps) {
+            const depsString = Object.entries(options.deps)
+                .map(([pkg, version]) => `${pkg}@${version}`)
+                .join(',');
+            queryParams.push(`deps=${encodeURIComponent(depsString)}`);
+        }
+
+        if (options?.target) {
+            queryParams.push(`target=${encodeURIComponent(options.target)}`);
+        }
+
+        if (options?.dev) {
+            queryParams.push('dev');
+        }
+
+        if (options?.bundle === false) {
+            queryParams.push('bundle=false');
+        } else if (options?.bundle === true) {
+            queryParams.push('bundle');
+        }
+
+        if (queryParams.length > 0) {
+            url += `?${queryParams.join('&')}`;
+        }
+
+        return url;
+    }
+
+    normalizeToEsmSh(source: string, options?: EsmShOptions): string {
+        if (this.isEsmShUrl(source)) {
+            return source;
+        }
+
+        if (this.isHttpUrl(source)) {
+            return source;
+        }
+
+        const parsed = this.parseSource(source);
+        if (!parsed) {
+            logger.warn(`Could not parse source identifier: ${source}`);
+            return source;
+        }
+
+        return this.buildEsmShUrl(parsed, options);
+    }
+
+    extractPackageName(source: string): string | null {
+        const parsed = this.parseSource(source);
+        if (!parsed) {
+            return null;
+        }
+
+        switch (parsed.type) {
+            case 'npm':
+                return parsed.package || null;
+            case 'github':
+                return `${parsed.owner}/${parsed.repo}`;
+            case 'jsr':
+                return parsed.package || null;
+            case 'pr':
+                return `${parsed.owner}/${parsed.repo}`;
+        }
+    }
+
+    isGitHubUrl(url: string): boolean {
+        try {
+            const urlObj = new URL(url);
+            return urlObj.hostname === 'github.com' || urlObj.hostname === 'www.github.com';
+        } catch {
+            return url.startsWith('https://github.com/') || url.startsWith('http://github.com/');
+        }
+    }
+
+    convertGitHubUrlToSource(githubUrl: string): string {
+        try {
+            const urlObj = new URL(githubUrl);
+            const pathParts = urlObj.pathname.split('/').filter(p => p);
+            
+            if (pathParts.length < 2) {
+                throw new Error('Invalid GitHub URL format');
+            }
+            
+            const owner = pathParts[0];
+            let repo = pathParts[1].replace(/\.git$/, '');
+            let ref: string | undefined;
+            let filePath: string | undefined;
+            
+            if (pathParts.length > 2) {
+                if (pathParts[2] === 'blob' || pathParts[2] === 'tree') {
+                    ref = pathParts[3] || 'main';
+                    if (pathParts[2] === 'blob' && pathParts.length > 4) {
+                        filePath = pathParts.slice(4).join('/');
+                    }
+                } else if (pathParts[2] === 'commit') {
+                    ref = pathParts[3];
+                } else {
+                    filePath = pathParts.slice(2).join('/');
+                }
+            }
+            
+            let ghUrl = `${EsmShService.GITHUB_PREFIX}${owner}/${repo}`;
+            if (ref) {
+                ghUrl += `@${ref}`;
+            }
+            if (filePath) {
+                ghUrl += `/${filePath}`;
+            }
+            
+            return ghUrl;
+        } catch {
+            const urlMatch = githubUrl.match(/github\.com\/([^\/]+)\/([^\/]+)/);
+            if (urlMatch) {
+                return `${EsmShService.GITHUB_PREFIX}${urlMatch[1]}/${urlMatch[2].replace(/\.git$/, '')}`;
+            }
+            return githubUrl;
+        }
+    }
+
+    async fetchGitHubPackageJson(source: EsmShSource): Promise<any> {
+        if (source.type !== 'github') {
+            throw new Error('Source must be a GitHub source');
+        }
+
+        const owner = source.owner!;
+        const repo = source.repo!;
+        const ref = source.version || 'main';
+        
+        const packageJsonUrl = `https://raw.githubusercontent.com/${owner}/${repo}/${ref}/package.json`;
+        
+        const response = await fetch(packageJsonUrl);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch package.json: ${response.statusText}`);
+        }
+        
+        return await response.json();
+    }
+}
+
+export const esmShService = new EsmShService();
+rootContext.put("esmShService", esmShService);