windmill-components 1.472.1 → 1.472.3

package/package/assets/app.css

@@ -0,0 +1,167 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	*,
+	::before,
+	::after {
+		@apply dark:border-gray-600;
+	}
+
+	/* Chrome, Edge, and Safari */
+	*::-webkit-scrollbar {
+		width: 5px;
+		height: 5px;
+	}
+
+	/* 
+	*::-webkit-scrollbar-track {
+		@apply bg-tertiary; 
+	}
+	*/
+
+	*::-webkit-scrollbar-thumb {
+		@apply bg-tertiary-inverse dark:bg-tertiary;
+		border-radius: 3px;
+	}
+
+	@font-face {
+		font-family: 'Inter';
+		src: url('/Inter-Variable.woff2') format('woff2');
+		font-weight: 100 900;
+		font-display: swap;
+	}
+
+	.prose-xs ul {
+		margin-top: 0.5rem;
+		list-style-type: '- ';
+		padding-left: 1.5rem;
+	}
+
+	.prose ul {
+		margin-top: 1.5rem;
+		list-style-type: '- ';
+		padding-left: 3rem;
+	}
+
+	.autocomplete-list-item-create {
+		@apply !text-primary-inverse !bg-surface-inverse;
+	}
+
+	.autocomplete-list-item {
+		@apply !text-primary !bg-surface text-xs;
+	}
+
+	.autocomplete-list-item.selected {
+		@apply !text-primary-inverse !bg-surface-inverse;
+	}
+
+	.autocomplete-list-item.selected.confirmed {
+		@apply !text-primary-inverse !bg-surface-inverse;
+	}
+
+	.autocomplete-list {
+		@apply !bg-surface;
+	}
+}
+
+@layer utilities {
+	@variants responsive {
+		/* Hide scrollbar for Chrome, Safari and Opera */
+		.no-scrollbar::-webkit-scrollbar {
+			display: none;
+		}
+
+		/* Hide scrollbar for IE, Edge and Firefox */
+		.no-scrollbar {
+			-ms-overflow-style: none; /* IE and Edge */
+			scrollbar-width: none; /* Firefox */
+		}
+	}
+}
+
+.splitpanes--vertical > .splitpanes__pane {
+	transition: none !important;
+}
+
+.splitpanes--horizontal > .splitpanes__pane {
+	transition: none !important;
+}
+
+.monaco-workbench > .notifications-toasts.visible {
+	display: none !important;
+}
+
+.monaco-editor .suggest-widget {
+	z-index: 10001 !important;
+}
+
+svelte-virtual-list-row {
+	overflow: visible !important;
+}
+
+svelte-virtual-list-contents > * + * {
+	border-top-width: 1px !important;
+	border-bottom-width: 0px !important;
+}
+
+.monaco-editor textarea:focus {
+	box-shadow: none !important;
+}
+
+.component-wrapper {
+	@apply rounded-component border overflow-hidden border-gray-300 dark:border-gray-600;
+}
+
+.app-editor-input {
+	@apply rounded-component border border-gray-300 dark:border-gray-500 focus:border-gray-300 focus:dark:border-gray-500 focus:!ring-1 focus:!ring-blue-300;
+	@apply placeholder:text-gray-400 dark:placeholder:text-gray-200;
+	@apply bg-surface;
+	@apply disabled:placeholder:text-gray-200 disabled:placeholder:dark:text-gray-500 disabled:text-gray-200 disabled:dark:text-gray-500 disabled:border-gray-200 disabled:dark:border-gray-600;
+}
+
+.nonmain-editor .cursor.monaco-mouse-cursor-text {
+	width: 1px !important;
+}
+
+.bg-locked {
+	background-image: repeating-linear-gradient(
+		-45deg,
+		rgba(128, 128, 128, 0.2),
+		rgba(128, 128, 128, 0.2) 10px,
+		rgba(192, 192, 192, 0.2) 10px,
+		rgba(192, 192, 192, 0.2) 20px
+	);
+}
+
+.bg-locked-hover {
+	background-image: repeating-linear-gradient(
+		-45deg,
+		rgba(255, 99, 71, 0.2),
+		rgba(255, 99, 71, 0.2) 10px,
+		rgba(255, 69, 58, 0.2),
+		rgba(255, 69, 58, 0.2) 20px
+	);
+}
+
+.bg-draggedover {
+	background-image: repeating-linear-gradient(
+		-45deg,
+		rgba(0, 0, 128, 0.2),
+		rgba(0, 0, 192, 0.2) 10px,
+		rgba(0, 0, 128, 0.2) 10px,
+		rgba(0, 0, 192, 0.2) 20px
+	);
+}
+
+.bg-draggedover-dark {
+	background-image: repeating-linear-gradient(
+		-45deg,
+		rgba(0, 0, 128, 0.6),
+		rgba(0, 0, 192, 0.6) 10px,
+		rgba(0, 0, 128, 0.6) 10px,
+		rgba(0, 0, 192, 0.6) 20px
+	);
+}

package/package/ata/apis.d.ts

@@ -0,0 +1,31 @@
+export declare const getNPMVersionsForModule: (moduleName: string, resLimit: ResLimit) => Promise<Error | {
+    tags: Record<string, string>;
+    versions: string[];
+}>;
+export declare const getNPMVersionForModuleReference: (moduleName: string, reference: string, resLimit: ResLimit) => Promise<Error | {
+    version: string | null;
+}>;
+export type NPMTreeMeta = {
+    default: string;
+    files: Array<{
+        name: string;
+    }>;
+    moduleName: string;
+    version: string;
+    raw: string;
+};
+export declare const getFiletreeForModuleWithVersion: (moduleName: string, version: string, raw: string, resLimit: ResLimit) => Promise<Error | {
+    moduleName: string;
+    version: string;
+    raw: string;
+    default: string;
+    files: Array<{
+        name: string;
+    }>;
+}>;
+export declare const getDTSFileForModuleWithVersion: (moduleName: string, version: string, file: string) => Promise<string | Error>;
+export interface ResLimit {
+    usage: number;
+}
+export declare function isOverlimit(resLimit: ResLimit): boolean;
+export declare const limit: import("p-limit").LimitFunction;

package/package/ata/apis.js

@@ -0,0 +1,60 @@
+//  https://github.com/jsdelivr/data.jsdelivr.com
+import pLimit from 'p-limit';
+export const getNPMVersionsForModule = (moduleName, resLimit) => {
+    const url = `https://data.jsdelivr.com/v1/package/npm/${moduleName}`;
+    return api(url, resLimit, {
+        cache: 'no-store'
+    });
+};
+export const getNPMVersionForModuleReference = (moduleName, reference, resLimit) => {
+    const url = `https://data.jsdelivr.com/v1/package/resolve/npm/${moduleName}@${reference}`;
+    return api(url, resLimit);
+};
+export const getFiletreeForModuleWithVersion = async (moduleName, version, raw, resLimit) => {
+    const url = `https://data.jsdelivr.com/v1/package/npm/${moduleName}@${version}/flat`;
+    const res = await api(url, resLimit);
+    if (res instanceof Error) {
+        return res;
+    }
+    else {
+        return {
+            ...res,
+            moduleName,
+            version,
+            raw
+        };
+    }
+};
+export const getDTSFileForModuleWithVersion = async (moduleName, version, file) => {
+    // file comes with a prefix /
+    const url = `https://cdn.jsdelivr.net/npm/${moduleName}@${version}${file}`;
+    const res = await limit(() => fetch(url));
+    if (res.ok) {
+        return res.text();
+    }
+    else {
+        return new Error('OK');
+    }
+};
+export function isOverlimit(resLimit) {
+    return resLimit.usage > 5000000;
+}
+export const limit = pLimit(6);
+function api(url, resLimit, init) {
+    if (isOverlimit(resLimit)) {
+        console.warn(`Exceeded limit of types downloaded for the needs of the assistant fetching: ${url}, ${resLimit.usage}`);
+        return new Promise(() => new Error('Exceeded limit of 100MB of data downloaded.'));
+    }
+    return limit(() => fetch(url, init).then((res) => {
+        if (res.ok) {
+            return res.text().then((text) => {
+                resLimit.usage += text.length;
+                console.log('resLimit', url, resLimit.usage);
+                return JSON.parse(text);
+            });
+        }
+        else {
+            return new Error('OK');
+        }
+    }));
+}

package/package/ata/edgeCases.d.ts

@@ -0,0 +1,2 @@
+/** Converts some of the known global imports to node so that we grab the right info */
+export declare const mapModuleNameToModule: (moduleSpecifier: string) => string;

package/package/ata/edgeCases.js

@@ -0,0 +1,70 @@
+import { isTypescriptRelativePath } from '../relative_imports';
+/** Converts some of the known global imports to node so that we grab the right info */
+export const mapModuleNameToModule = (moduleSpecifier) => {
+    // in node repl:
+    // > require("module").builtinModules
+    const builtInNodeMods = [
+        'assert',
+        'assert/strict',
+        'async_hooks',
+        'buffer',
+        'child_process',
+        'cluster',
+        'console',
+        'constants',
+        'crypto',
+        'dgram',
+        'diagnostics_channel',
+        'dns',
+        'dns/promises',
+        'domain',
+        'events',
+        'fs',
+        'fs/promises',
+        'http',
+        'http2',
+        'https',
+        'inspector',
+        'module',
+        'net',
+        'os',
+        'path',
+        'path/posix',
+        'path/win32',
+        'perf_hooks',
+        'process',
+        'punycode',
+        'querystring',
+        'readline',
+        'repl',
+        'stream',
+        'stream/promises',
+        'stream/consumers',
+        'stream/web',
+        'string_decoder',
+        'sys',
+        'timers',
+        'timers/promises',
+        'tls',
+        'trace_events',
+        'tty',
+        'url',
+        'util',
+        'util/types',
+        'v8',
+        'vm',
+        'wasi',
+        'worker_threads',
+        'zlib'
+    ];
+    if (builtInNodeMods.includes(moduleSpecifier.replace('node:', ''))) {
+        return 'node';
+    }
+    if (isTypescriptRelativePath(moduleSpecifier)) {
+        return moduleSpecifier;
+    }
+    // strip module filepath e.g. lodash/identity => lodash
+    const [a = '', b = ''] = moduleSpecifier.split('/');
+    const moduleName = a.startsWith('@') ? `${a}/${b}` : a;
+    return moduleName;
+};

package/package/ata/index.d.ts

@@ -0,0 +1,60 @@
+import { type ResLimit } from './apis';
+export interface ATABootstrapConfig {
+    root: string;
+    scriptPath?: string;
+    /** A object you pass in to get callbacks */
+    delegate: {
+        /** The callback which gets called when ATA decides a file needs to be written to your VFS  */
+        receivedFile: (code: string, path: string) => void;
+        localFile: (code: string, path: string) => void;
+        /** A way to display progress */
+        progress?: (downloaded: number, estimatedTotal: number) => void;
+        /** Note: An error message does not mean ATA has stopped! */
+        errorMessage?: (userFacingMessage: string, error: Error) => void;
+        /** A callback indicating that ATA actually has work to do */
+        started?: () => void;
+        /** The callback when all ATA has finished */
+        finished?: (files: Map<string, string>) => void;
+    };
+    /** Passed to fetch as the user-agent */
+    projectName: string;
+    /** code to dependency parser */
+    depsParser: (code: string) => string[];
+    /** If you need a custom logger instead of the console global */
+    logger?: Logger;
+}
+/**
+ * The function which starts up type acquisition,
+ * returns a function which you then pass the initial
+ * source code for the app with.
+ *
+ * This is effectively the main export, everything else is
+ * basically exported for tests and should be considered
+ * implementation details by consumers.
+ */
+export declare const setupTypeAcquisition: (config: ATABootstrapConfig) => (initialSourceFile: string) => Promise<void>;
+/** The bulk load of the work in getting the filetree based on how people think about npm names and versions */
+export declare const getFileTreeForModuleWithTag: (moduleName: string, tag: string | undefined, raw: string, resLimit: ResLimit) => Promise<{
+    moduleName: string;
+    version: string;
+    raw: string;
+    default: string;
+    files: {
+        name: string;
+    }[];
+} | {
+    error: Error;
+    userFacingMessage: string;
+} | {
+    error: {
+        version: string | null;
+    };
+    userFacingMessage: string;
+}>;
+interface Logger {
+    log: (...args: any[]) => void;
+    error: (...args: any[]) => void;
+    groupCollapsed: (...args: any[]) => void;
+    groupEnd: (...args: any[]) => void;
+}
+export {};

package/package/ata/index.js

@@ -0,0 +1,221 @@
+import { isTypescriptRelativePath } from '../relative_imports';
+import { getDTSFileForModuleWithVersion, getFiletreeForModuleWithVersion, getNPMVersionForModuleReference, getNPMVersionsForModule, isOverlimit, limit } from './apis';
+import { mapModuleNameToModule } from './edgeCases';
+/**
+ * The function which starts up type acquisition,
+ * returns a function which you then pass the initial
+ * source code for the app with.
+ *
+ * This is effectively the main export, everything else is
+ * basically exported for tests and should be considered
+ * implementation details by consumers.
+ */
+export const setupTypeAcquisition = (config) => {
+    const moduleMap = new Map();
+    const fsMap = new Map();
+    limit.clearQueue();
+    let estimatedToDownload = 0;
+    let estimatedDownloaded = 0;
+    let resLimit = { usage: 0 };
+    return async (initialSourceFile) => {
+        estimatedToDownload = 0;
+        estimatedDownloaded = 0;
+        let todo = [initialSourceFile];
+        let next = [];
+        let i = 0;
+        let nb = 0;
+        let time = new Date().getTime();
+        while (todo.length && nb < 200 && new Date().getTime() - time < 1000 * 15) {
+            const current = todo.shift();
+            nb += 1;
+            const deps = await resolveDeps(current, i, resLimit);
+            if (i <= 0) {
+                next.push(...deps);
+            }
+            if (todo.length === 0) {
+                i += 1;
+                todo = next;
+                next = [];
+            }
+        }
+        if (estimatedDownloaded > 0) {
+            config.delegate.finished?.(fsMap);
+        }
+    };
+    function getVersion(d) {
+        if (d.lastIndexOf('@') > 0) {
+            const splitted = d.split('@');
+            let version = splitted.pop();
+            if (version?.startsWith('^') || version?.startsWith('~')) {
+                version = version.slice(1);
+            }
+            return version;
+        }
+        return 'latest';
+    }
+    async function resolveDeps(initialSourceFile, depth, resLimit) {
+        let depsToGet = config
+            .depsParser(initialSourceFile)
+            .map((d) => {
+            let raw = mapModuleNameToModule(d);
+            return {
+                raw,
+                module: raw.lastIndexOf('@') > 0 ? raw.split('@').slice(0, -1).join('@') : raw,
+                version: getVersion(d)
+            };
+        })
+            .filter((f) => !moduleMap.has(f.raw));
+        if (depth == 0) {
+            const relativeDeps = depsToGet.filter((f) => isTypescriptRelativePath(f.raw));
+            relativeDeps.forEach(async (f) => {
+                let path = f.raw.startsWith('/')
+                    ? f.raw
+                    : '/' + config.scriptPath + (f.raw.startsWith('../') ? '/../' : '/.') + f.raw;
+                let url = config.root + path;
+                let localPath = f.raw;
+                if (f.raw.startsWith('.') && !f.raw.endsWith('.ts')) {
+                    url += '.ts';
+                    localPath += '.ts';
+                }
+                console.log('fetching local file', url, f.raw, localPath);
+                const res = await fetch(url);
+                if (res.ok) {
+                    config.delegate.localFile?.(await res.text(), localPath);
+                }
+            });
+        }
+        depsToGet.forEach((dep) => moduleMap.set(dep.raw, { state: 'loading' }));
+        depsToGet = depsToGet.filter((f) => !isTypescriptRelativePath(f.raw));
+        if (depsToGet.length === 0) {
+            return [];
+        }
+        console.log('dependencies to fetch for type assistant: ', depsToGet.map((x) => x.raw));
+        // Make it so it won't get re-downloaded
+        // Grab the module trees which gives us a list of files to download
+        const trees = await Promise.all(depsToGet.map((f) => getFileTreeForModuleWithTag(f.module, f.version, f.raw, resLimit)));
+        const treesOnly = trees.filter((t) => !('error' in t));
+        // These are the modules which we can grab directly
+        const hasDTS = treesOnly.filter((t) => t.files.find((f) => f.name.endsWith('.d.ts')));
+        const dtsFilesFromNPM = hasDTS.map((t) => treeToDTSFiles(t, `/node_modules/${t.raw}`));
+        // console.log(dtsFilesFromNPM, 'dtsFilesFromNPM')
+        // These are ones we need to look on DT for (which may not be there, who knows)
+        const mightBeOnDT = treesOnly.filter((t) => !hasDTS.includes(t));
+        // console.log(mightBeOnDT, 'mightBeOnDT')
+        // return
+        const dtTrees = await Promise.all(
+        // TODO: Switch from 'latest' to the version from the original tree which is user-controlled
+        mightBeOnDT.map((f) => getFileTreeForModuleWithTag(`@types/${getDTName(f.moduleName)}`, 'latest', `@types/${getDTName(f.raw)}`, resLimit)));
+        const dtTreesOnly = dtTrees.filter((t) => !('error' in t));
+        const dtsFilesFromDT = dtTreesOnly.map((t) => treeToDTSFiles(t, `/node_modules/@types/${getDTName(t.raw).replace('types__', '')}`));
+        // Collect all the npm and DT DTS requests and flatten their arrays
+        const allDTSFiles = dtsFilesFromNPM.concat(dtsFilesFromDT).reduce((p, c) => p.concat(c), []);
+        estimatedToDownload += allDTSFiles.length;
+        if (allDTSFiles.length && depth === 0) {
+            config.delegate.started?.();
+        }
+        // Grab the package.jsons for each dependency
+        for (const tree of treesOnly) {
+            const pkgJSON = await getDTSFileForModuleWithVersion(tree.moduleName, tree.version, '/package.json');
+            let prefix = `/node_modules/${tree.raw}`;
+            if (dtTreesOnly.includes(tree))
+                prefix = `/node_modules/@types/${getDTName(tree.raw).replace('types__', '')}`;
+            const path = prefix + '/package.json';
+            if (typeof pkgJSON == 'string') {
+                fsMap.set(path, pkgJSON);
+                config.delegate.receivedFile?.(pkgJSON, path);
+            }
+            else {
+                config.logger?.error(`Could not download package.json for ${tree.moduleName}`);
+            }
+        }
+        // Grab all dts files
+        return (await Promise.all(allDTSFiles.map(async (dts) => {
+            if (isOverlimit(resLimit)) {
+                console.warn('Exceeded limit of types downloaded for the needs of the assistant');
+                return;
+            }
+            const dtsCode = await getDTSFileForModuleWithVersion(dts.moduleName, dts.moduleVersion, dts.path);
+            estimatedDownloaded++;
+            if (dtsCode instanceof Error) {
+                // TODO?
+                config.logger?.error(`Had an issue getting ${dts.path} for ${dts.moduleName}`);
+            }
+            else {
+                fsMap.set(dts.vfsPath, dtsCode);
+                config.delegate.receivedFile?.(dtsCode, dts.vfsPath);
+                // Send a progress note every 5 downloads
+                if (config.delegate.progress && estimatedDownloaded % 5 === 0) {
+                    config.delegate.progress(estimatedDownloaded, estimatedToDownload);
+                }
+                if (dts.moduleName != 'bun-types') {
+                    return dtsCode;
+                    // Recurse through deps
+                }
+            }
+        }))).filter((f) => f != undefined);
+    }
+};
+function treeToDTSFiles(tree, vfsPrefix) {
+    const dtsRefs = [];
+    for (const file of tree.files) {
+        if (file.name.endsWith('.d.ts')) {
+            dtsRefs.push({
+                moduleName: tree.moduleName,
+                moduleVersion: tree.version,
+                vfsPath: `${vfsPrefix}${file.name}`,
+                path: file.name
+            });
+        }
+    }
+    return dtsRefs;
+}
+/** The bulk load of the work in getting the filetree based on how people think about npm names and versions */
+export const getFileTreeForModuleWithTag = async (moduleName, tag, raw, resLimit) => {
+    let toDownload = tag || 'latest';
+    // I think having at least 2 dots is a reasonable approx for being a semver and not a tag,
+    // we can skip an API request, TBH this is probably rare
+    if (toDownload.split('.').length < 2) {
+        // The jsdelivr API needs a _version_ not a tag. So, we need to switch out
+        // the tag to the version via an API request.
+        const response = await getNPMVersionForModuleReference(moduleName, toDownload, resLimit);
+        if (response instanceof Error) {
+            return {
+                error: response,
+                userFacingMessage: `Could not go from a tag to version on npm for ${moduleName} - possible typo?`
+            };
+        }
+        const neededVersion = response.version;
+        if (!neededVersion) {
+            const versions = await getNPMVersionsForModule(moduleName, resLimit);
+            if (versions instanceof Error) {
+                return {
+                    error: response,
+                    userFacingMessage: `Could not get versions on npm for ${moduleName} - possible typo?`
+                };
+            }
+            const tags = Object.entries(versions.tags).join(', ');
+            return {
+                error: new Error('Could not find tag for module'),
+                userFacingMessage: `Could not find a tag for ${moduleName} called ${tag}. Did find ${tags}`
+            };
+        }
+        toDownload = neededVersion;
+    }
+    const res = await getFiletreeForModuleWithVersion(moduleName, toDownload, raw, resLimit);
+    if (res instanceof Error) {
+        return {
+            error: res,
+            userFacingMessage: `Could not get the files for ${moduleName}@${toDownload}. Is it possibly a typo?`
+        };
+    }
+    return res;
+};
+// Taken from dts-gen: https://github.com/microsoft/dts-gen/blob/master/lib/names.ts
+function getDTName(s) {
+    if (s.indexOf('@') === 0 && s.indexOf('/') !== -1) {
+        // we have a scoped module, e.g. @bla/foo
+        // which should be converted to   bla__foo
+        s = s.substr(1).replace('/', '__');
+    }
+    return s;
+}

package/package/ata/userFacingTypes.d.ts

@@ -0,0 +1,44 @@
+export interface ATABootstrapConfig {
+  /** A object you pass in to get callbacks */
+  delegate: {
+    /** The callback which gets called when ATA decides a file needs to be written to your VFS  */
+    receivedFile?: (code: string, path: string) => void
+    /** A way to display progress */
+    progress?: (downloaded: number, estimatedTotal: number) => void
+    /** Note: An error message does not mean ATA has stopped! */
+    errorMessage?: (userFacingMessage: string, error: Error) => void
+    /** A callback indicating that ATA actually has work to do */
+    started?: () => void
+    /** The callback when all ATA has finished */
+    finished?: (files: Map<string, string>) => void
+  }
+  /** Passed to fetch as the user-agent */
+  projectName: string
+  /** Your local copy of typescript */
+  depsParser: (code: string) => string[]
+
+  /** If you need a custom version of fetch */
+  fetcher?: typeof fetch
+  /** If you need a custom logger instead of the console global */
+  logger?: Logger
+}
+
+type ModuleMeta = { state: "loading" }
+
+/**
+ * The function which starts up type acquisition,
+ * returns a function which you then pass the initial
+ * source code for the app with.
+ *
+ * This is effectively the main export, everything else is
+ * basically exported for tests and should be considered
+ * implementation details by consumers.
+ */
+export const setupTypeAcquisition: (config: ATABootstrapConfig) => (initialSourceFile: string) => void
+
+interface Logger {
+  log: (...args: any[]) => void
+  error: (...args: any[]) => void
+  groupCollapsed: (...args: any[]) => void
+  groupEnd: (...args: any[]) => void
+}

package/package/autosize.d.ts

@@ -0,0 +1,4 @@
+export declare const action: (node: any) => {
+    destroy(): void;
+};
+export default action;