windmill-components 1.85.0 → 1.87.0

package/components/TemplateEditor.svelte

@@ -1,508 +0,0 @@
-<script>import { browser } from '$app/environment';
-import { convertKind, createDocumentationString, createHash, displayPartsToString, editorConfig, updateOptions } from '../editorUtils';
-import libStdContent from '../es5.d.ts.txt?raw';
-import { editor as meditor, languages, Range, Uri as mUri } from 'monaco-editor';
-import { buildWorkerDefinition } from 'monaco-editor-workers';
-import { createEventDispatcher, onDestroy, onMount } from 'svelte';
-languages.typescript.javascriptDefaults.setCompilerOptions({
-    target: languages.typescript.ScriptTarget.Latest,
-    allowNonTsExtensions: true,
-    noLib: true
-});
-languages.register({ id: 'template' });
-export const conf = {
-    wordPattern: /(-?\d*\.\d\w*)|([^\`\~\!\@\#\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\?\s]+)/g,
-    comments: {
-        lineComment: '//',
-        blockComment: ['/*', '*/']
-    },
-    brackets: [
-        ['{', '}'],
-        ['[', ']'],
-        ['(', ')']
-    ],
-    onEnterRules: [],
-    autoClosingPairs: [
-        { open: '{', close: '}' },
-        { open: '[', close: ']' },
-        { open: '(', close: ')' },
-        { open: '"', close: '"', notIn: ['string'] },
-        { open: "'", close: "'", notIn: ['string', 'comment'] },
-        { open: '`', close: '`', notIn: ['string', 'comment'] }
-    ],
-    folding: {
-        markers: {
-            start: new RegExp('^\\s*//\\s*#?region\\b'),
-            end: new RegExp('^\\s*//\\s*#?endregion\\b')
-        }
-    }
-};
-export const language = {
-    // Set defaultToken to invalid to see what you do not tokenize yet
-    defaultToken: 'invalid',
-    tokenPostfix: '.ts',
-    keywords: [
-        // Should match the keys of textToKeywordObj in
-        // https://github.com/microsoft/TypeScript/blob/master/src/compiler/scanner.ts
-        'abstract',
-        'any',
-        'as',
-        'asserts',
-        'bigint',
-        'boolean',
-        'break',
-        'case',
-        'catch',
-        'class',
-        'continue',
-        'const',
-        'constructor',
-        'debugger',
-        'declare',
-        'default',
-        'delete',
-        'do',
-        'else',
-        'enum',
-        'export',
-        'extends',
-        'false',
-        'finally',
-        'for',
-        'from',
-        'function',
-        'get',
-        'if',
-        'implements',
-        'import',
-        'in',
-        'infer',
-        'instanceof',
-        'interface',
-        'is',
-        'keyof',
-        'let',
-        'module',
-        'namespace',
-        'never',
-        'new',
-        'null',
-        'number',
-        'object',
-        'out',
-        'package',
-        'private',
-        'protected',
-        'public',
-        'override',
-        'readonly',
-        'require',
-        'global',
-        'return',
-        'set',
-        'static',
-        'string',
-        'super',
-        'switch',
-        'symbol',
-        'this',
-        'throw',
-        'true',
-        'try',
-        'type',
-        'typeof',
-        'undefined',
-        'unique',
-        'unknown',
-        'var',
-        'void',
-        'while',
-        'with',
-        'yield',
-        'async',
-        'await',
-        'of'
-    ],
-    operators: [
-        '<=',
-        '>=',
-        '==',
-        '!=',
-        '===',
-        '!==',
-        '=>',
-        '+',
-        '-',
-        '**',
-        '*',
-        '/',
-        '%',
-        '++',
-        '--',
-        '<<',
-        '</',
-        '>>',
-        '>>>',
-        '&',
-        '|',
-        '^',
-        '!',
-        '~',
-        '&&',
-        '||',
-        '??',
-        '?',
-        ':',
-        '=',
-        '+=',
-        '-=',
-        '*=',
-        '**=',
-        '/=',
-        '%=',
-        '<<=',
-        '>>=',
-        '>>>=',
-        '&=',
-        '|=',
-        '^=',
-        '@'
-    ],
-    // we include these common regular expressions
-    symbols: /[=><!~?:&|+\-*\/\^%]+/,
-    escapes: /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
-    digits: /\d+(_+\d+)*/,
-    octaldigits: /[0-7]+(_+[0-7]+)*/,
-    binarydigits: /[0-1]+(_+[0-1]+)*/,
-    hexdigits: /[[0-9a-fA-F]+(_+[0-9a-fA-F]+)*/,
-    regexpctl: /[(){}\[\]\$\^|\-*+?\.]/,
-    regexpesc: /\\(?:[bBdDfnrstvwWn0\\\/]|@regexpctl|c[A-Z]|x[0-9a-fA-F]{2}|u[0-9a-fA-F]{4})/,
-    // The main tokenizer for our languages
-    tokenizer: {
-        root: [
-            [/\$\{/, { token: 'delimiter.bracket', next: '@bracketCounting' }],
-            [/[^\\`$]+/, 'string'],
-            [/@escapes/, 'string.escape'],
-            [/\\./, 'string.escape.invalid']
-        ],
-        common: [
-            // identifiers and keywords
-            [
-                /[a-z_$][\w$]*/,
-                {
-                    cases: {
-                        '@keywords': 'keyword',
-                        '@default': 'identifier'
-                    }
-                }
-            ],
-            [/[A-Z][\w\$]*/, 'type.identifier'],
-            // [/[A-Z][\w\$]*/, 'identifier'],
-            // whitespace
-            { include: '@whitespace' },
-            // regular expression: ensure it is terminated before beginning (otherwise it is an opeator)
-            [
-                /\/(?=([^\\\/]|\\.)+\/([dgimsuy]*)(\s*)(\.|;|,|\)|\]|\}|$))/,
-                { token: 'regexp', bracket: '@open', next: '@regexp' }
-            ],
-            // delimiters and operators
-            [/[()\[\]]/, '@brackets'],
-            [/[<>](?!@symbols)/, '@brackets'],
-            [/!(?=([^=]|$))/, 'delimiter'],
-            [
-                /@symbols/,
-                {
-                    cases: {
-                        '@operators': 'delimiter',
-                        '@default': ''
-                    }
-                }
-            ],
-            // numbers
-            [/(@digits)[eE]([\-+]?(@digits))?/, 'number.float'],
-            [/(@digits)\.(@digits)([eE][\-+]?(@digits))?/, 'number.float'],
-            [/0[xX](@hexdigits)n?/, 'number.hex'],
-            [/0[oO]?(@octaldigits)n?/, 'number.octal'],
-            [/0[bB](@binarydigits)n?/, 'number.binary'],
-            [/(@digits)n?/, 'number'],
-            // delimiter: after number because of .\d floats
-            [/[;,.]/, 'delimiter'],
-            // strings
-            [/"([^"\\]|\\.)*$/, 'string.invalid'],
-            [/'([^'\\]|\\.)*$/, 'string.invalid'],
-            [/"/, 'string', '@string_double'],
-            [/'/, 'string', '@string_single'],
-            [/`/, 'string', '@string_backtick']
-        ],
-        whitespace: [
-            [/[ \t\r\n]+/, ''],
-            [/\/\*\*(?!\/)/, 'comment.doc', '@jsdoc'],
-            [/\/\*/, 'comment', '@comment'],
-            [/\/\/.*$/, 'comment']
-        ],
-        comment: [
-            [/[^\/*]+/, 'comment'],
-            [/\*\//, 'comment', '@pop'],
-            [/[\/*]/, 'comment']
-        ],
-        jsdoc: [
-            [/[^\/*]+/, 'comment.doc'],
-            [/\*\//, 'comment.doc', '@pop'],
-            [/[\/*]/, 'comment.doc']
-        ],
-        // We match regular expression quite precisely
-        regexp: [
-            [
-                /(\{)(\d+(?:,\d*)?)(\})/,
-                ['regexp.escape.control', 'regexp.escape.control', 'regexp.escape.control']
-            ],
-            [
-                /(\[)(\^?)(?=(?:[^\]\\\/]|\\.)+)/,
-                ['regexp.escape.control', { token: 'regexp.escape.control', next: '@regexrange' }]
-            ],
-            [/(\()(\?:|\?=|\?!)/, ['regexp.escape.control', 'regexp.escape.control']],
-            [/[()]/, 'regexp.escape.control'],
-            [/@regexpctl/, 'regexp.escape.control'],
-            [/[^\\\/]/, 'regexp'],
-            [/@regexpesc/, 'regexp.escape'],
-            [/\\\./, 'regexp.invalid'],
-            [
-                /(\/)([dgimsuy]*)/,
-                [{ token: 'regexp', bracket: '@close', next: '@pop' }, 'keyword.other']
-            ]
-        ],
-        regexrange: [
-            [/-/, 'regexp.escape.control'],
-            [/\^/, 'regexp.invalid'],
-            [/@regexpesc/, 'regexp.escape'],
-            [/[^\]]/, 'regexp'],
-            [
-                /\]/,
-                {
-                    token: 'regexp.escape.control',
-                    next: '@pop',
-                    bracket: '@close'
-                }
-            ]
-        ],
-        string_double: [
-            [/[^\\"]+/, 'string'],
-            [/@escapes/, 'string.escape'],
-            [/\\./, 'string.escape.invalid'],
-            [/"/, 'string', '@pop']
-        ],
-        string_single: [
-            [/[^\\']+/, 'string'],
-            [/@escapes/, 'string.escape'],
-            [/\\./, 'string.escape.invalid'],
-            [/'/, 'string', '@pop']
-        ],
-        string_backtick: [
-            [/\$\{/, { token: 'delimiter.bracket', next: '@bracketCounting' }],
-            [/[^\\`$]+/, 'string'],
-            [/@escapes/, 'string.escape'],
-            [/\\./, 'string.escape.invalid'],
-            [/`/, 'string', '@pop']
-        ],
-        bracketCounting: [
-            [/\{/, 'delimiter.bracket', '@bracketCounting'],
-            [/\}/, 'delimiter.bracket', '@pop'],
-            { include: 'common' }
-        ]
-    }
-};
-// Register a tokens provider for the language
-languages.registerTokensProviderFactory('template', {
-    create: () => language
-});
-languages.setLanguageConfiguration('template', conf);
-meditor.defineTheme('myTheme', {
-    base: 'vs',
-    inherit: true,
-    rules: [],
-    colors: {
-        'editorLineNumber.foreground': '#999',
-        'editorGutter.background': '#F9FAFB'
-    }
-});
-meditor.setTheme('myTheme');
-let divEl = null;
-let editor;
-let model;
-export let code = '';
-export let hash = createHash();
-export let automaticLayout = true;
-export let extraLib = '';
-export let autoHeight = true;
-export let fixedOverflowWidgets = true;
-export let fontSize = 16;
-if (typeof code != 'string') {
-    code = '';
-}
-const lang = 'template';
-const dispatch = createEventDispatcher();
-const uri = `file:///${hash}.ts`;
-buildWorkerDefinition('../../../workers', import.meta.url, false);
-export function insertAtCursor(code) {
-    if (editor) {
-        editor.trigger('keyboard', 'type', { text: code });
-    }
-}
-export function setCode(ncode) {
-    code = ncode;
-    if (editor) {
-        editor.setValue(ncode);
-    }
-}
-export function getCode() {
-    return editor?.getValue() ?? '';
-}
-let cip;
-let extraModel;
-let width = 0;
-let widgets = document.getElementById('monaco-widgets-root') ?? undefined;
-async function loadMonaco() {
-    model = meditor.createModel(code, lang, mUri.parse(uri));
-    model.updateOptions(updateOptions);
-    editor = meditor.create(divEl, {
-        ...editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets),
-        overflowWidgetsDomNode: widgets,
-        lineNumbers: 'off',
-        fontSize,
-        suggestOnTriggerCharacters: true,
-        lineDecorationsWidth: 14
-    });
-    const stdLib = { content: libStdContent, filePath: 'es5.d.ts' };
-    if (extraLib != '') {
-        languages.typescript.javascriptDefaults.setExtraLibs([
-            {
-                content: extraLib,
-                filePath: 'windmill.d.ts'
-            },
-            stdLib
-        ]);
-    }
-    else {
-        languages.typescript.javascriptDefaults.setExtraLibs([stdLib]);
-    }
-    extraModel = meditor.createModel('`' + model.getValue() + '`', 'javascript');
-    const worker = await languages.typescript.getJavaScriptWorker();
-    const client = await worker(extraModel.uri);
-    cip = languages.registerCompletionItemProvider('template', {
-        triggerCharacters: ['.'],
-        provideCompletionItems: async (model, position) => {
-            extraModel.setValue('`' + model.getValue() + '`');
-            const offset = model.getOffsetAt(position) + 1;
-            const info = await client.getCompletionsAtPosition(extraModel.uri.toString(), offset);
-            if (!info) {
-                return { suggestions: [] };
-            }
-            const wordInfo = model.getWordUntilPosition(position);
-            const wordRange = new Range(position.lineNumber, wordInfo.startColumn, position.lineNumber, wordInfo.endColumn);
-            const suggestions = info.entries
-                .filter((x) => x.kind != 'keyword' && x.kind != 'var')
-                .map((entry) => {
-                let range = wordRange;
-                if (entry.replacementSpan) {
-                    const p1 = model.getPositionAt(entry.replacementSpan.start);
-                    const p2 = model.getPositionAt(entry.replacementSpan.start + entry.replacementSpan.length);
-                    range = new Range(p1.lineNumber, p1.column, p2.lineNumber, p2.column);
-                }
-                const tags = [];
-                if (entry.kindModifiers?.indexOf('deprecated') !== -1) {
-                    tags.push(languages.CompletionItemTag.Deprecated);
-                }
-                return {
-                    uri: model.uri,
-                    position: position,
-                    offset: offset,
-                    range: range,
-                    label: entry.name,
-                    insertText: entry.name,
-                    sortText: entry.sortText,
-                    kind: convertKind(entry.kind),
-                    tags
-                };
-            });
-            return { suggestions };
-        },
-        resolveCompletionItem: async (item, token) => {
-            extraModel.setValue('`' + model.getValue() + '`');
-            const myItem = item;
-            const position = myItem.position;
-            const offset = myItem.offset;
-            const details = await client.getCompletionEntryDetails(extraModel.uri.toString(), offset, myItem.label);
-            if (!details) {
-                return myItem;
-            }
-            return {
-                uri: model.uri,
-                position: position,
-                label: details.name,
-                kind: convertKind(details.kind),
-                detail: displayPartsToString(details.displayParts),
-                documentation: {
-                    value: createDocumentationString(details)
-                }
-            };
-        }
-    });
-    let timeoutModel = undefined;
-    editor.onDidChangeModelContent((event) => {
-        timeoutModel && clearTimeout(timeoutModel);
-        timeoutModel = setTimeout(() => {
-            code = getCode();
-            dispatch('change', { code });
-        }, 200);
-    });
-    if (autoHeight) {
-        const updateHeight = () => {
-            const contentHeight = Math.min(1000, editor.getContentHeight());
-            if (divEl) {
-                divEl.style.height = `${contentHeight}px`;
-            }
-            try {
-                editor.layout({ width, height: contentHeight });
-            }
-            catch { }
-        };
-        editor.onDidContentSizeChange(updateHeight);
-        updateHeight();
-    }
-    editor.onDidFocusEditorText(() => {
-        dispatch('focus');
-    });
-    editor.onDidBlurEditorText(() => {
-        code = getCode();
-    });
-}
-export function focus() {
-    editor?.focus();
-}
-onMount(() => {
-    if (browser) {
-        loadMonaco();
-    }
-});
-onDestroy(() => {
-    try {
-        model && model.dispose();
-        editor && editor.dispose();
-        cip && cip.dispose();
-        extraModel && extraModel.dispose();
-    }
-    catch (err) { }
-});
-</script>
-
-<div
-	bind:this={divEl}
-	style="height: 18px;"
-	class="{$$props.class ?? ''} template rounded-lg min-h-4 mx-0.5 overflow-clip"
-	bind:clientWidth={width}
-/>
-
-<style>
-	:global(.template .mtk20) {
-		color: black !important;
-	}</style>