@joinezco/codeblock 0.0.8

package/dist/rpc/transport.js

@@ -0,0 +1,38 @@
+import { Transport } from "@open-rpc/client-js/build/transports/Transport";
+import { getNotifications } from "@open-rpc/client-js/src/Request";
+export default class MessagePortTransport extends Transport {
+    port;
+    postMessageID;
+    constructor(port) {
+        super();
+        this.port = port;
+        this.postMessageID = `post-message-transport-${Math.random()}`;
+    }
+    messageHandler = (ev) => {
+        console.debug("LSP <<-", ev.data);
+        if (!ev.data.result && ev.data.method !== 'textDocument/publishDiagnostics') {
+            console.debug(ev.data);
+            // this.port.postMessage({ jsonrpc: '2.0', id: ev.data.id, result: null })
+        }
+        else {
+            this.transportRequestManager.resolveResponse(JSON.stringify(ev.data));
+        }
+    };
+    connect() {
+        return new Promise(async (resolve) => {
+            this.port.addEventListener("message", this.messageHandler);
+            resolve();
+        });
+    }
+    async sendData(data) {
+        console.debug("LSP ->>", data);
+        const prom = this.transportRequestManager.addRequest(data, null);
+        const notifications = getNotifications(data);
+        if (this.port) {
+            this.port.postMessage(data.request);
+            this.transportRequestManager.settlePendingRequest(notifications);
+        }
+        return prom;
+    }
+    close() { }
+}

package/dist/styles.css

@@ -0,0 +1,7 @@
+html {
+    /* background-color: #1e1e1e; */
+}
+
+body {
+    margin: 0;
+}

package/dist/themes/index.d.ts

@@ -0,0 +1 @@
+export declare const codeblockTheme: import("@codemirror/state").Extension;

package/dist/themes/index.js

@@ -0,0 +1,169 @@
+import { EditorView } from '@codemirror/view';
+export const codeblockTheme = EditorView.theme({
+    "&:not(.cm-focused)": {
+        '& .cm-activeLine, & .cm-activeLineGutter': {
+            color: 'inherit',
+            backgroundColor: "transparent"
+        }
+    },
+    '.cm-toolbar-input': {
+        fontFamily: 'var(--cm-font-family)',
+        lineHeight: 1.4,
+        border: 'none',
+        background: 'transparent',
+        outline: 'none',
+        fontSize: '16px',
+        color: 'var(--cm-toolbar-color)',
+        padding: '0 2px 0 6px',
+        width: '100%',
+        flex: 1,
+    },
+    '.cm-toolbar-input-container': {
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+        flex: 1,
+    },
+    '.cm-toolbar-panel': {
+        padding: 0,
+        background: 'var(--cm-toolbar-background)',
+        display: 'flex',
+        alignItems: 'center',
+    },
+    '.cm-command-result > span': {
+        color: 'var(--cm-command-result-color)'
+    },
+    '.cm-search-result': {
+        color: 'var(--cm-search-result-color)',
+        display: 'flex',
+        cursor: 'pointer',
+        '&.cm-command-result': {
+            color: 'var(--cm-command-result-color)'
+        },
+        '& > .cm-search-result-icon-container': {
+            width: 'var(--cm-gutter-width)',
+            '& > .cm-search-result-icon': {
+                fontSize: '16px',
+                textAlign: 'right',
+                boxSizing: 'border-box',
+                padding: '0 3px 0 5px',
+                width: 'var(--cm-gutter-lineno-width)',
+            }
+        },
+        '&:hover': {
+            '& div': {
+                color: 'var(--cm-search-result-color-hover)',
+            },
+            backgroundColor: 'var(--cm-search-result-bg-hover)',
+        },
+        '&.selected': {
+            '& div': {
+                color: 'var(--cm-search-result-color-selected)',
+            },
+            backgroundColor: 'var(--cm-search-result-select-bg)',
+        },
+        '& > .cm-search-result-label': {
+            flex: 1,
+            padding: '0 2px 0 6px',
+        },
+    },
+    '.cm-toolbar-state-icon-container': {
+        width: 'var(--cm-gutter-width)',
+    },
+    '.cm-toolbar-state-icon': {
+        fontSize: '16px',
+        textAlign: 'right',
+        boxSizing: 'border-box',
+        padding: '0 3px 0 5px',
+        color: 'var(--cm-foreground)',
+        width: 'var(--cm-gutter-lineno-width)'
+    },
+    '.cm-content': {
+        padding: 0,
+    },
+    '.cm-tooltip': {
+        display: 'flex',
+        flexDirection: 'column',
+        fontFamily: 'var(--cm-font-family)',
+        boxShadow: '-12px 12px 1px rgba(0,0,0,0.3)',
+        fontSize: '1rem',
+        maxWidth: 'min(calc(100% - 2rem), 62ch)',
+        border: '2px solid var(--cm-tooltip-border)',
+        overflow: 'auto',
+        background: 'var(--cm-tooltip-background)',
+        color: 'var(--cm-tooltip-color)',
+    },
+    '.cm-tooltip a': {
+        color: 'var(--cm-link)',
+    },
+    '.cm-tooltip-section:not(:first-child)': {
+        borderTop: 'none',
+    },
+    '.cm-tooltip-lint': {
+        order: -1,
+    },
+    '.cm-diagnostic': {
+        padding: '3px 6px',
+        whiteSpace: 'pre-wrap',
+        marginLeft: 0,
+        borderLeft: 'none',
+    },
+    '.cm-diagnostic-info': {
+        backgroundColor: 'var(--cm-diagnostic-info-bg)',
+        color: 'var(--cm-diagnostic-info-color)',
+    },
+    '.cm-diagnostic-error': {
+        borderLeft: 'none',
+        backgroundColor: 'var(--cm-diagnostic-error-bg)',
+        color: 'var(--cm-diagnostic-error-color)',
+    },
+    '.cm-diagnosticSource': {
+        display: 'none',
+    },
+    '.documentation': {
+        padding: '2px',
+    },
+    '.documentation > *': {
+        margin: 0,
+        padding: '0.25rem 6px',
+        fontSize: '1rem',
+    },
+    '.documentation > p > code': {
+        backgroundColor: 'var(--cm-comment-bg)',
+        padding: '2px 4px',
+        margin: '2px 0',
+        display: 'inline-block',
+    },
+    '.documentation > pre > code': {
+        whiteSpace: 'break-spaces',
+    },
+    '.cm-diagnosticAction': {
+        display: 'none',
+    },
+    '.cm-diagnosticText div': {
+        display: 'flex',
+        height: 'fit-content',
+    },
+    '.cm-diagnosticText p': {
+        margin: 0,
+    },
+    '.cm-search-results': {
+        position: 'absolute',
+        top: '100%',
+        margin: 0,
+        padding: 0,
+        background: 'var(--cm-toolbar-background)',
+        fontFamily: 'var(--cm-font-family)',
+        fontSize: '1rem',
+        listStyleType: 'none',
+        width: '100%',
+        maxHeight: '25vh',
+        overflowY: 'auto',
+    },
+    '.cm-gutters': {
+        borderRight: 'none',
+    },
+    '.cm-panels-top': {
+        borderBottom: 'none'
+    }
+});

package/dist/themes/util.d.ts

@@ -0,0 +1,24 @@
+import { Extension } from "@codemirror/state";
+import { type TagStyle } from "@codemirror/language";
+import type { StyleSpec } from "style-mod";
+export interface CreateThemeOptions {
+    theme: "light" | "dark";
+    settings: Settings;
+    styles: TagStyle[];
+}
+export interface Settings {
+    background?: string;
+    backgroundImage?: string;
+    foreground?: string;
+    caret?: string;
+    selection?: string;
+    selectionMatch?: string;
+    lineHighlight?: string;
+    gutterBackground?: string;
+    gutterForeground?: string;
+    gutterActiveForeground?: string;
+    gutterBorder?: string;
+    fontFamily?: string;
+    fontSize?: StyleSpec["fontSize"];
+}
+export declare function createTheme({ theme, settings, styles, }: CreateThemeOptions): Extension;

package/dist/themes/util.js

@@ -0,0 +1,63 @@
+import { EditorView } from "@codemirror/view";
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+export function createTheme({ theme, settings = {}, styles = [], }) {
+    const themeOptions = {
+        ".cm-gutters": {},
+    };
+    const baseStyle = {};
+    if (settings.background)
+        baseStyle.backgroundColor = settings.background;
+    if (settings.backgroundImage)
+        baseStyle.backgroundImage = settings.backgroundImage;
+    if (settings.foreground)
+        baseStyle.color = settings.foreground;
+    if (settings.fontSize)
+        baseStyle.fontSize = settings.fontSize;
+    if (Object.keys(baseStyle).length > 0) {
+        themeOptions["&"] = baseStyle;
+    }
+    if (settings.fontFamily) {
+        themeOptions["&.cm-editor .cm-scroller"] = {
+            fontFamily: settings.fontFamily,
+        };
+    }
+    if (settings.gutterBackground) {
+        themeOptions[".cm-gutters"].backgroundColor = settings.gutterBackground;
+    }
+    if (settings.gutterForeground) {
+        themeOptions[".cm-gutters"].color = settings.gutterForeground;
+    }
+    if (settings.gutterBorder) {
+        themeOptions[".cm-gutters"].borderRightColor = settings.gutterBorder;
+    }
+    if (settings.caret) {
+        themeOptions[".cm-content"] = { caretColor: settings.caret };
+        themeOptions[".cm-cursor, .cm-dropCursor"] = {
+            borderLeftColor: settings.caret,
+        };
+    }
+    const activeLineGutterStyle = {};
+    if (settings.gutterActiveForeground) {
+        activeLineGutterStyle.color = settings.gutterActiveForeground;
+    }
+    if (settings.lineHighlight) {
+        themeOptions[".cm-activeLine"] = {
+            backgroundColor: settings.lineHighlight,
+        };
+        activeLineGutterStyle.backgroundColor = settings.lineHighlight;
+    }
+    themeOptions[".cm-activeLineGutter"] = activeLineGutterStyle;
+    if (settings.selection) {
+        themeOptions["&.cm-focused .cm-selectionBackground, & .cm-line::selection, & .cm-selectionLayer .cm-selectionBackground, .cm-content ::selection"] = { background: `${settings.selection} !important` };
+    }
+    if (settings.selectionMatch) {
+        themeOptions["& .cm-selectionMatch"] = {
+            backgroundColor: settings.selectionMatch,
+        };
+    }
+    const themeExtension = EditorView.theme(themeOptions, {
+        dark: theme === "dark",
+    });
+    const highlightStyle = HighlightStyle.define(styles);
+    return [themeExtension, syntaxHighlighting(highlightStyle)];
+}

package/dist/themes/vscode.d.ts

@@ -0,0 +1,6 @@
+import { type CreateThemeOptions } from "./util";
+import { StyleModule } from "style-mod";
+export declare const variableSettings: CreateThemeOptions["settings"];
+export declare const variableStyles: CreateThemeOptions["styles"];
+export declare const vscodeLightDark: import("@codemirror/state").Extension;
+export declare const vscodeStyleMod: StyleModule;

package/dist/themes/vscode.js

@@ -0,0 +1,187 @@
+import { tags as t } from "@lezer/highlight";
+import { createTheme } from "./util";
+import { StyleModule } from "style-mod";
+export const variableSettings = {
+    background: "var(--cm-background)",
+    foreground: "var(--cm-foreground)",
+    caret: "var(--cm-caret)",
+    selection: "var(--cm-selection)",
+    selectionMatch: "var(--cm-selection-match)",
+    lineHighlight: "var(--cm-line-highlight)",
+    gutterBackground: "var(--cm-gutter-background)",
+    gutterForeground: "var(--cm-gutter-foreground)",
+    gutterActiveForeground: "var(--cm-gutter-active-foreground)",
+    fontFamily: "var(--cm-font-family)",
+};
+export const variableStyles = [
+    {
+        tag: [
+            t.keyword,
+            t.operatorKeyword,
+            t.modifier,
+            t.color,
+            t.constant(t.name),
+            t.standard(t.name),
+            t.standard(t.tagName),
+            t.special(t.brace),
+            t.atom,
+            t.bool,
+            t.special(t.variableName),
+        ],
+        color: "var(--cm-keyword)",
+    },
+    { tag: [t.controlKeyword, t.moduleKeyword], color: "var(--cm-control)" },
+    {
+        tag: [
+            t.name,
+            t.deleted,
+            t.character,
+            t.macroName,
+            t.propertyName,
+            t.variableName,
+            t.labelName,
+            t.definition(t.name),
+        ],
+        color: "var(--cm-name)",
+    },
+    { tag: t.heading, fontWeight: "bold", color: "var(--cm-heading)" },
+    {
+        tag: [
+            t.typeName,
+            t.className,
+            t.tagName,
+            t.number,
+            t.changed,
+            t.annotation,
+            t.self,
+            t.namespace,
+        ],
+        color: "var(--cm-type)",
+    },
+    { tag: [t.function(t.variableName), t.function(t.propertyName)], color: "var(--cm-function)" },
+    { tag: [t.number], color: "var(--cm-number)" },
+    {
+        tag: [t.operator, t.punctuation, t.separator, t.url, t.escape, t.regexp],
+        color: "var(--cm-operator)",
+    },
+    { tag: [t.regexp], color: "var(--cm-regexp)" },
+    {
+        tag: [t.special(t.string), t.processingInstruction, t.string, t.inserted],
+        color: "var(--cm-string)",
+    },
+    { tag: [t.angleBracket], color: "var(--cm-angle-bracket)" },
+    { tag: t.strong, fontWeight: "bold" },
+    { tag: t.emphasis, fontStyle: "italic" },
+    { tag: t.strikethrough, textDecoration: "line-through" },
+    { tag: [t.meta, t.comment], color: "var(--cm-comment)" },
+    { tag: t.link, color: "var(--cm-link)", textDecoration: "underline" },
+    { tag: t.invalid, color: "var(--cm-invalid)" },
+];
+function vscodeLightDarkTheme(options) {
+    const { theme = "light", settings = {}, styles = [] } = options || {};
+    return createTheme({
+        theme,
+        settings: {
+            ...variableSettings,
+            ...settings,
+        },
+        styles: [...variableStyles, ...styles],
+    });
+}
+export const vscodeLightDark = vscodeLightDarkTheme();
+const darkModeStyles = {
+    "--cm-background": "#1e1e1e",
+    "--cm-foreground": "#9cdcfe",
+    "--cm-caret": "#c6c6c6",
+    "--cm-selection": "#6199ff2f",
+    "--cm-selection-match": "#72a1ff59",
+    "--cm-line-highlight": "#ffffff0f",
+    "--cm-gutter-background": "#1e1e1e",
+    "--cm-gutter-foreground": "#838383",
+    "--cm-gutter-active-foreground": "#ffffff",
+    "--cm-keyword": "#569cd6",
+    "--cm-control": "#c586c0",
+    "--cm-name": "#9cdcfe",
+    "--cm-heading": "#9cdcfe",
+    "--cm-type": "#4ec9b0",
+    "--cm-function": "#dcdcaa",
+    "--cm-number": "#b5cea8",
+    "--cm-operator": "#d4d4d4",
+    "--cm-regexp": "#d16969",
+    "--cm-string": "#ce9178",
+    "--cm-angle-bracket": "#808080",
+    "--cm-comment": "#6a9955",
+    "--cm-link": "#4078f2",
+    "--cm-invalid": "#ff0000",
+    "--cm-search-result-color": "var(--cm-angle-bracket)",
+    "--cm-search-result-color-hover": "#ffffff",
+    "--cm-command-result-color": "var(--cm-search-result-color-hover)",
+    "--cm-toolbar-background": "var(--cm-toolbar-bg-dark)",
+    "--cm-toolbar-color": "var(--cm-toolbar-color-dark)",
+    "--cm-toolbar-foreground": "#ffffff",
+    "--cm-tooltip-color": "var(--cm-gutter-active-foreground)",
+    "--cm-tooltip-background": "var(--cm-toolbar-background)",
+    "--cm-tooltip-border": "#000000",
+    "--cm-diagnostic-error-bg": "#d11",
+    "--cm-comment-bg": "rgba(0,0,0,0.32)",
+};
+export const vscodeStyleMod = new StyleModule({
+    ":root, .cm-editor[data-theme='light'], [data-theme='light'] .cm-editor": {
+        /* Shared */
+        "--cm-font-family": 'Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace',
+        /* Defaults to light theme */
+        "--cm-background": "#ffffff",
+        "--cm-foreground": "#383a42",
+        "--cm-caret": "#000000",
+        "--cm-selection": "#add6ff",
+        "--cm-selection-match": "#a8ac94",
+        "--cm-line-highlight": "#99999914",
+        "--cm-gutter-background": "#ffffff",
+        "--cm-gutter-foreground": "#237893",
+        "--cm-gutter-active-foreground": "#0b216f",
+        /* Syntax colors */
+        "--cm-keyword": "#0000ff",
+        "--cm-control": "#af00db",
+        "--cm-name": "#0070c1",
+        "--cm-heading": "#0070c1",
+        "--cm-type": "#267f99",
+        "--cm-function": "#795e26",
+        "--cm-number": "#098658",
+        "--cm-operator": "#383a42",
+        "--cm-regexp": "#af00db",
+        "--cm-string": "#a31515",
+        "--cm-angle-bracket": "#383a42",
+        "--cm-comment": "#008000",
+        "--cm-link": "#4078f2",
+        "--cm-invalid": "#e45649",
+        /* Additional UI colors */
+        "--cm-search-result-color": "#838383",
+        "--cm-search-result-color-hover": "var(--cm-toolbar-color)",
+        "--cm-search-result-bg-hover": "#2490e94f",
+        "--cm-search-result-color-selected": "#ffffff",
+        "--cm-search-result-select-bg": "#2490e9",
+        "--cm-command-result-color": "var(--cm-toolbar-color)",
+        "--cm-toolbar-bg-light": "#f3f3f3",
+        "--cm-toolbar-bg-dark": "#2a2a2f",
+        "--cm-toolbar-color-light": "#000000",
+        "--cm-toolbar-color-dark": "#ffffff",
+        "--cm-toolbar-background": "var(--cm-toolbar-bg-light)",
+        "--cm-toolbar-color": "var(--cm-toolbar-color-light)",
+        "--cm-toolbar-foreground": "var(--cm-foreground)",
+        "--cm-tooltip-color": "var(--cm-foreground)",
+        "--cm-tooltip-background": "#ffffff",
+        "--cm-tooltip-border": "#000000",
+        "--cm-diagnostic-info-color": "white",
+        "--cm-diagnostic-info-bg": "#545454",
+        // "--cm-diagnostic-info-color": "#000000",
+        // "--cm-diagnostic-info-bg": "#f3f3f3",
+        "--cm-diagnostic-error-color": "white",
+        "--cm-diagnostic-error-bg": "#e45649",
+        "--cm-comment-bg": "rgba(0,0,0,0.1)",
+    },
+    ":root[data-theme='dark'], .cm-editor[data-theme='dark'], [data-theme='dark'] .cm-editor": darkModeStyles,
+    /* Dark-mode override */
+    "@media (prefers-color-scheme: dark)": {
+        ":root": darkModeStyles,
+    }
+});

package/dist/types.d.ts

@@ -0,0 +1,64 @@
+import { CborUint8Array } from "@jsonjoy.com/json-pack/lib/cbor/types";
+import { FileType } from "@volar/language-service";
+import { SnapshotNode } from "@joinezco/memfs/snapshot";
+import { FsApi } from "@joinezco/memfs/node/types";
+export interface VfsInterface {
+    /**
+     * Reads the entire contents of a file asynchronously
+     * @param path A path to a file
+     */
+    readFile: (path: string) => Promise<string>;
+    /**
+     * Writes data to a file asynchronously
+     * @param path A path to a file
+     * @param data The data to write
+     */
+    writeFile: (path: string, data: string) => Promise<void>;
+    /**
+     * Watch for changes to a file or directory
+     * @param path A path to a file/directory
+     * @param options Configuration options for watching
+     */
+    watch: (path: string, options: {
+        signal: AbortSignal;
+    }) => AsyncGenerator<{
+        eventType: 'rename' | 'change';
+        filename: string;
+    }>;
+    /**
+     * Creates a directory asynchronously
+     * @param path A path to a directory, URL, or parent FileSystemDirectoryHandle
+     * @param options Configuration options for directory creation
+     */
+    mkdir: (path: string, options: {
+        recursive: boolean;
+    }) => Promise<void>;
+    readDir: (path: string) => Promise<[string, FileType][]>;
+    /**
+     * Checks whether a given file or folder exists
+     * @param path A path to a file or folder
+     * @returns A promise that resolves to true if the file or folder exists, false otherwise
+     */
+    exists: (path: string) => Promise<boolean>;
+    stat: (path: string) => Promise<any | undefined>;
+}
+export type FsMountOptions = {
+    mount: (args: {
+        buffer: ArrayBuffer;
+    }) => Promise<MountResult>;
+    mountFromUrl?: (args: {
+        url: string;
+        mountPoint?: string;
+    }) => Promise<MountResult>;
+};
+export type MountArgs = {
+    buffer?: CborUint8Array<SnapshotNode>;
+    mountPoint?: string;
+};
+export type MountFromUrlArgs = {
+    url: string;
+    mountPoint?: string;
+};
+export type MountResult = {
+    fs: FsApi;
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/fs.d.ts

@@ -0,0 +1,29 @@
+import { VfsInterface } from "../types";
+import { FileSystem, FileType } from '@volar/language-service';
+import { URI } from 'vscode-uri';
+import { CborUint8Array } from "@jsonjoy.com/json-pack/lib/cbor/types";
+import { SnapshotNode } from "@joinezco/memfs/snapshot";
+import { promises } from "node:fs";
+import type { FsApi } from "@joinezco/memfs/node/types";
+import { TopLevelFs } from "@joinezco/jswasi/filesystem";
+export declare namespace Vfs {
+    const fromJswasiFs: (jswasiFs: TopLevelFs) => Promise<VfsInterface>;
+    const fromMemfs: (fs: FsApi) => VfsInterface;
+    const fromNodelike: (fs: typeof promises) => VfsInterface;
+    /**
+     * Create a filesystem worker with optional snapshot data.
+     *
+     * @param bufferOrUrl - Either a snapshot buffer or URL to a snapshot file.
+     *                     If a URL is provided, it will be loaded directly in the worker
+     *                     for better performance with large files.
+     */
+    const worker: (bufferOrUrl?: CborUint8Array<SnapshotNode> | string) => Promise<VfsInterface>;
+    function walk(fs: VfsInterface, path: string): AsyncIterable<string>;
+}
+export declare class VolarFs implements FileSystem {
+    #private;
+    constructor(fs: VfsInterface);
+    stat(uri: URI): Promise<any>;
+    readDirectory(uri: URI): Promise<[string, FileType][]>;
+    readFile(uri: URI): Promise<string>;
+}