@lobb-js/studio 0.11.0 → 0.12.0

package/dist/components/dataTable/dataTable.svelte

@@ -15,6 +15,8 @@
     import UpdateDetailViewButton from "../detailView/update/updateDetailViewButton.svelte";
     import { emitEvent } from "../../eventSystem";
     import type { Snippet } from "svelte";
+    import ExtensionsComponents from "../extensionsComponents.svelte";
+    import { getExtensionUtils, loadExtensionComponents } from "../../extensions/extensionUtils";
 
     const { lobb, ctx } = getStudioContext();
 
@@ -40,6 +42,10 @@
         headerLeft,
     }: Props = $props();
 
+    const hasRowActions = $derived(
+        loadExtensionComponents(ctx, "listView.entry.actions", undefined, { collectionName }).length > 0
+    );
+
     const fields = getCollectionParamsFields(ctx, collectionName);
     let params = $state({
         fields: fields,
@@ -130,6 +136,16 @@
         {unifiedBgColor ? unifiedBgColor : ''}
     "
 >
+    {#snippet rowActionsSnippet(entry: Record<string, any>)}
+        <ExtensionsComponents
+            name="listView.entry.actions"
+            utils={getExtensionUtils(lobb, ctx)}
+            {entry}
+            {collectionName}
+            refresh={() => { params = { ...params }; }}
+        />
+    {/snippet}
+
     {#if showHeader}
         <Header bind:params {collectionName} bind:selectedRecords>
             {#snippet left()}
@@ -157,7 +173,7 @@
                 {unifiedBgColor}
                 bind:tableWidth={dataTableWidth}
                 {...tableProps}
-            >
+                rowActions={hasRowActions ? rowActionsSnippet : undefined}>
                 {#snippet tools(entry)}
                     <UpdateDetailViewButton
                         {collectionName}

package/dist/components/dataTable/table.svelte

@@ -32,6 +32,7 @@
 		// snippets
 		overrideCell?: Snippet<[any, Column, Entry]>;
 		tools?: Snippet<[Entry, number]>;
+		rowActions?: Snippet<[Entry, number]>;
 		collapsible?: Snippet<[Entry, number]>;
 
 		// other
@@ -72,6 +73,7 @@
 		parentWidth,
 		overrideCell,
 		tools,
+		rowActions,
 		collapsible,
 		unifiedBgColor,
 		select,
@@ -82,6 +84,7 @@
 
 	// calculate columns count
 	const toolsExists = selectedRecords || tools ? 1 : 0;
+	const rowActionsExists = $derived(rowActions ? 1 : 0);
 	const columnsLength = columns.length + toolsExists;
 
 	// set table width
@@ -167,8 +170,7 @@
 <div
 	style="
 		display: grid;
-		grid-template-columns: minmax(auto, 7.5rem) repeat({columnsLength -
-		1}, minmax(auto, 15rem));
+		grid-template-columns: minmax(auto, 7.5rem) repeat({columnsLength - 1}, minmax(auto, 15rem)){rowActionsExists ? ' minmax(auto, 7.5rem)' : ''};
 		grid-template-rows: 2.5rem;
 	"
 >
@@ -179,7 +181,7 @@
 				sticky left-0 top-0 z-20
 				flex items-center p-2.5 text-xs h-10
 				border-r border-b gap-2
-				{unifiedBgColor ? unifiedBgColor : 'bg-muted/30'}
+				{unifiedBgColor ? unifiedBgColor : 'bg-muted'}
 			"
 		>
 			<!-- collapsable toggle -->
@@ -225,6 +227,16 @@
 			</div>
 		</button>
 	{/each}
+	{#if rowActions}
+		<div
+			class="
+				sticky top-0 right-0 z-20
+				flex items-center p-2.5 h-10
+				{unifiedBgColor ? unifiedBgColor : 'bg-muted'}
+				border-l border-b
+			"
+		></div>
+	{/if}
 	{#if Object.keys(data).length}
 		{#each data as entry, index}
 			{@const isDisabled = Boolean(entry.__disabled)}
@@ -292,9 +304,21 @@
 					{/if}
 				</div>
 			{/each}
+			{#if rowActions}
+				<div
+					class="
+						sticky right-0 z-10
+						flex items-center p-2.5 text-xs h-10
+						border-l gap-2
+						{unifiedBgColor ? unifiedBgColor : 'bg-background'}
+					"
+				>
+					{@render rowActions?.(entry, index)}
+				</div>
+			{/if}
 			<!-- nested data -->
 			<div
-				style="grid-column: span {columnsLength};"
+				style="grid-column: span {columnsLength + rowActionsExists};"
 				class="
 					{!showLastColumnBorder ? '' : 'border-r'}
 					{lastRow && !showLastRowBorder ? '' : 'border-b'}

package/dist/components/dataTable/table.svelte.d.ts

@@ -20,6 +20,7 @@ export interface TableProps {
     showLastColumnBorder?: boolean;
     overrideCell?: Snippet<[any, Column, Entry]>;
     tools?: Snippet<[Entry, number]>;
+    rowActions?: Snippet<[Entry, number]>;
     collapsible?: Snippet<[Entry, number]>;
     parentWidth?: number;
     unifiedBgColor?: "bg-muted/30" | "bg-background";

package/dist/components/drawer.svelte

@@ -2,6 +2,7 @@
     import { calculateDrawerWidth } from "../utils";
     import type { Snippet } from "svelte";
     import { fade, fly } from "svelte/transition";
+    import Portal from "svelte-portal";
 
     interface Props {
         children?: Snippet<[]>;
@@ -11,18 +12,20 @@
     let { onHide, children }: Props = $props();
 </script>
 
-<button
-    transition:fade={{ duration: 250 }}
-    onclick={() => onHide?.()}
-    class="backgroundDrawerButton fixed left-0 top-0 z-30 h-screen w-screen bg-background opacity-50 cursor-default"
-    aria-label="background used to hide the background"
-></button>
+<Portal target="body">
+    <button
+        transition:fade={{ duration: 250 }}
+        onclick={() => onHide?.()}
+        class="backgroundDrawerButton fixed left-0 top-0 z-40 h-screen w-screen bg-background opacity-50 cursor-default"
+        aria-label="background used to hide the background"
+    ></button>
 
-<!-- the drawer -->
-<div
-    transition:fly={{ x: "100%", duration: 250 }}
-    class="fixed right-0 top-0 z-30 flex h-full w-full flex-col border-l bg-background"
-    style="max-width: {calculateDrawerWidth()}px;"
->
-    {@render children?.()}
-</div>
+    <!-- the drawer -->
+    <div
+        transition:fly={{ x: "100%", duration: 250 }}
+        class="fixed right-0 top-0 z-40 flex h-full w-full flex-col border-l bg-background"
+        style="max-width: {calculateDrawerWidth()}px;"
+    >
+        {@render children?.()}
+    </div>
+</Portal>

package/dist/components/extensionsComponents.svelte

@@ -21,7 +21,7 @@
 		...props
 	}: Props = $props();
 
-	const Components = loadExtensionComponents(ctx, name, filterByExtensions);
+	const Components = $derived(loadExtensionComponents(ctx, name, filterByExtensions, props));
 </script>
 
 {#if Components.length}

package/dist/components/ui/button/button.svelte

@@ -103,6 +103,7 @@
 		class={cn(buttonVariants({ variant, size }), className)}
 		{type}
 		onclick={handleClick}
+		disabled={showLoading}
 		{...restProps}
 	>
 		{@render innerPart()}

package/dist/extensions/extension.types.d.ts

@@ -73,10 +73,15 @@ export interface ExtensionProps {
     utils: ExtensionUtils;
     [key: string]: any;
 }
+export type ExtensionComponentKey = `pages.${string}` | "studio.listView" | `dvFields.topRight.${string}.${string}` | `detailView.update.subRecords.${string}` | `detailView.create.subRecords.${string}` | `detailView.fields.topRight.${string}.${string}` | `detailView.fields.foreignKey.${string}` | `listView.entry.children.${string}` | `listView.entry.actions`;
+export type ExtensionComponent = any | {
+    component: any;
+    when: (props: Record<string, any>) => boolean;
+};
 export interface Extension {
     name: string;
     onStartup?: (utils: ExtensionUtils) => Promise<void>;
-    components?: Record<string, any>;
+    components?: Partial<Record<ExtensionComponentKey, ExtensionComponent>>;
     dashboardNavs?: DashboardNavs;
 }
 export {};

package/dist/extensions/extensionUtils.d.ts

@@ -4,6 +4,6 @@ import type { CTX } from "../store.types";
 export declare function getComponents(): Components;
 export declare function getExtensionUtils(lobb: LobbClient, ctx: CTX): ExtensionUtils;
 export declare function loadExtensions(lobb: LobbClient, ctx: CTX, extensionMap?: Record<string, any>): Promise<Record<string, Extension>>;
-export declare function loadExtensionComponents(ctx: CTX, name: string, filterByExtensions?: string[]): any[];
+export declare function loadExtensionComponents(ctx: CTX, name: string, filterByExtensions?: string[], props?: Record<string, any>): any[];
 export declare function executeExtensionsOnStartup(lobb: LobbClient, ctx: CTX): Promise<void>;
 export declare function getDashboardNavs(ctx: CTX): DashboardNavs;

package/dist/extensions/extensionUtils.js

@@ -120,7 +120,7 @@ export function loadExtensions(lobb_1, ctx_1) {
         });
     });
 }
-export function loadExtensionComponents(ctx, name, filterByExtensions) {
+export function loadExtensionComponents(ctx, name, filterByExtensions, props) {
     var components = [];
     for (var _i = 0, _a = Object.entries(ctx.extensions); _i < _a.length; _i++) {
         var _b = _a[_i], extensionName = _b[0], extensionValue = _b[1];
@@ -131,7 +131,14 @@ export function loadExtensionComponents(ctx, name, filterByExtensions) {
             for (var _c = 0, _d = Object.entries(extensionValue.components); _c < _d.length; _c++) {
                 var _e = _d[_c], componentName = _e[0], componentValue = _e[1];
                 if (name.startsWith(componentName)) {
-                    components.push(componentValue);
+                    if (componentValue && typeof componentValue === "object" && "component" in componentValue && "when" in componentValue) {
+                        if (!props || componentValue.when(props)) {
+                            components.push(componentValue.component);
+                        }
+                    }
+                    else {
+                        components.push(componentValue);
+                    }
                 }
             }
         }

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@lobb-js/studio",
-  "version": "0.11.0",
+  "license": "UNLICENSED",
+  "version": "0.12.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -41,7 +42,7 @@
     "postpublish": "./scripts/postpublish.sh"
   },
   "devDependencies": {
-    "@lobb-js/core": "^0.17.0",
+    "@lobb-js/core": "^0.18.0",
     "@chromatic-com/storybook": "^4.1.2",
     "@storybook/addon-a11y": "^10.0.1",
     "@storybook/addon-docs": "^10.0.1",
@@ -107,6 +108,7 @@
     "mode-watcher": "^0.5.1",
     "mustache": "^4.2.0",
     "qs": "^6.14.1",
+    "svelte-portal": "^2.2.1",
     "svelte-sonner": "^0.3.28",
     "tailwind-merge": "^3.4.0",
     "tailwind-variants": "^3.2.2"

package/src/lib/components/dataTable/dataTable.svelte

@@ -15,6 +15,8 @@
     import UpdateDetailViewButton from "../detailView/update/updateDetailViewButton.svelte";
     import { emitEvent } from "../../eventSystem";
     import type { Snippet } from "svelte";
+    import ExtensionsComponents from "../extensionsComponents.svelte";
+    import { getExtensionUtils, loadExtensionComponents } from "../../extensions/extensionUtils";
 
     const { lobb, ctx } = getStudioContext();
 
@@ -40,6 +42,10 @@
         headerLeft,
     }: Props = $props();
 
+    const hasRowActions = $derived(
+        loadExtensionComponents(ctx, "listView.entry.actions", undefined, { collectionName }).length > 0
+    );
+
     const fields = getCollectionParamsFields(ctx, collectionName);
     let params = $state({
         fields: fields,
@@ -130,6 +136,16 @@
         {unifiedBgColor ? unifiedBgColor : ''}
     "
 >
+    {#snippet rowActionsSnippet(entry: Record<string, any>)}
+        <ExtensionsComponents
+            name="listView.entry.actions"
+            utils={getExtensionUtils(lobb, ctx)}
+            {entry}
+            {collectionName}
+            refresh={() => { params = { ...params }; }}
+        />
+    {/snippet}
+
     {#if showHeader}
         <Header bind:params {collectionName} bind:selectedRecords>
             {#snippet left()}
@@ -157,7 +173,7 @@
                 {unifiedBgColor}
                 bind:tableWidth={dataTableWidth}
                 {...tableProps}
-            >
+                rowActions={hasRowActions ? rowActionsSnippet : undefined}>
                 {#snippet tools(entry)}
                     <UpdateDetailViewButton
                         {collectionName}

package/src/lib/components/dataTable/table.svelte

@@ -32,6 +32,7 @@
 		// snippets
 		overrideCell?: Snippet<[any, Column, Entry]>;
 		tools?: Snippet<[Entry, number]>;
+		rowActions?: Snippet<[Entry, number]>;
 		collapsible?: Snippet<[Entry, number]>;
 
 		// other
@@ -72,6 +73,7 @@
 		parentWidth,
 		overrideCell,
 		tools,
+		rowActions,
 		collapsible,
 		unifiedBgColor,
 		select,
@@ -82,6 +84,7 @@
 
 	// calculate columns count
 	const toolsExists = selectedRecords || tools ? 1 : 0;
+	const rowActionsExists = $derived(rowActions ? 1 : 0);
 	const columnsLength = columns.length + toolsExists;
 
 	// set table width
@@ -167,8 +170,7 @@
 <div
 	style="
 		display: grid;
-		grid-template-columns: minmax(auto, 7.5rem) repeat({columnsLength -
-		1}, minmax(auto, 15rem));
+		grid-template-columns: minmax(auto, 7.5rem) repeat({columnsLength - 1}, minmax(auto, 15rem)){rowActionsExists ? ' minmax(auto, 7.5rem)' : ''};
 		grid-template-rows: 2.5rem;
 	"
 >
@@ -179,7 +181,7 @@
 				sticky left-0 top-0 z-20
 				flex items-center p-2.5 text-xs h-10
 				border-r border-b gap-2
-				{unifiedBgColor ? unifiedBgColor : 'bg-muted/30'}
+				{unifiedBgColor ? unifiedBgColor : 'bg-muted'}
 			"
 		>
 			<!-- collapsable toggle -->
@@ -225,6 +227,16 @@
 			</div>
 		</button>
 	{/each}
+	{#if rowActions}
+		<div
+			class="
+				sticky top-0 right-0 z-20
+				flex items-center p-2.5 h-10
+				{unifiedBgColor ? unifiedBgColor : 'bg-muted'}
+				border-l border-b
+			"
+		></div>
+	{/if}
 	{#if Object.keys(data).length}
 		{#each data as entry, index}
 			{@const isDisabled = Boolean(entry.__disabled)}
@@ -292,9 +304,21 @@
 					{/if}
 				</div>
 			{/each}
+			{#if rowActions}
+				<div
+					class="
+						sticky right-0 z-10
+						flex items-center p-2.5 text-xs h-10
+						border-l gap-2
+						{unifiedBgColor ? unifiedBgColor : 'bg-background'}
+					"
+				>
+					{@render rowActions?.(entry, index)}
+				</div>
+			{/if}
 			<!-- nested data -->
 			<div
-				style="grid-column: span {columnsLength};"
+				style="grid-column: span {columnsLength + rowActionsExists};"
 				class="
 					{!showLastColumnBorder ? '' : 'border-r'}
 					{lastRow && !showLastRowBorder ? '' : 'border-b'}

package/src/lib/components/drawer.svelte

@@ -2,6 +2,7 @@
     import { calculateDrawerWidth } from "../utils";
     import type { Snippet } from "svelte";
     import { fade, fly } from "svelte/transition";
+    import Portal from "svelte-portal";
 
     interface Props {
         children?: Snippet<[]>;
@@ -11,18 +12,20 @@
     let { onHide, children }: Props = $props();
 </script>
 
-<button
-    transition:fade={{ duration: 250 }}
-    onclick={() => onHide?.()}
-    class="backgroundDrawerButton fixed left-0 top-0 z-30 h-screen w-screen bg-background opacity-50 cursor-default"
-    aria-label="background used to hide the background"
-></button>
+<Portal target="body">
+    <button
+        transition:fade={{ duration: 250 }}
+        onclick={() => onHide?.()}
+        class="backgroundDrawerButton fixed left-0 top-0 z-40 h-screen w-screen bg-background opacity-50 cursor-default"
+        aria-label="background used to hide the background"
+    ></button>
 
-<!-- the drawer -->
-<div
-    transition:fly={{ x: "100%", duration: 250 }}
-    class="fixed right-0 top-0 z-30 flex h-full w-full flex-col border-l bg-background"
-    style="max-width: {calculateDrawerWidth()}px;"
->
-    {@render children?.()}
-</div>
+    <!-- the drawer -->
+    <div
+        transition:fly={{ x: "100%", duration: 250 }}
+        class="fixed right-0 top-0 z-40 flex h-full w-full flex-col border-l bg-background"
+        style="max-width: {calculateDrawerWidth()}px;"
+    >
+        {@render children?.()}
+    </div>
+</Portal>

package/src/lib/components/extensionsComponents.svelte

@@ -21,7 +21,7 @@
 		...props
 	}: Props = $props();
 
-	const Components = loadExtensionComponents(ctx, name, filterByExtensions);
+	const Components = $derived(loadExtensionComponents(ctx, name, filterByExtensions, props));
 </script>
 
 {#if Components.length}

package/src/lib/components/ui/button/button.svelte

@@ -103,6 +103,7 @@
 		class={cn(buttonVariants({ variant, size }), className)}
 		{type}
 		onclick={handleClick}
+		disabled={showLoading}
 		{...restProps}
 	>
 		{@render innerPart()}

package/src/lib/extensions/extension.types.ts

@@ -83,10 +83,26 @@ export interface ExtensionProps {
     [key: string]: any;
 }
 
+// TODO: instead of doing them this way. you can make the components generic and have static keys and we can pass some dynamic data so that we for example extend the list view
+export type ExtensionComponentKey =
+    | `pages.${string}`
+    | "studio.listView"
+    | `dvFields.topRight.${string}.${string}`
+    | `detailView.update.subRecords.${string}`
+    | `detailView.create.subRecords.${string}`
+    | `detailView.fields.topRight.${string}.${string}`
+    | `detailView.fields.foreignKey.${string}`
+    | `listView.entry.children.${string}`
+    | `listView.entry.actions`;
+
+export type ExtensionComponent =
+    | any
+    | { component: any; when: (props: Record<string, any>) => boolean };
+
 // extension exported object
 export interface Extension {
     name: string;
     onStartup?: (utils: ExtensionUtils) => Promise<void>;
-    components?: Record<string, any>;
+    components?: Partial<Record<ExtensionComponentKey, ExtensionComponent>>;
     dashboardNavs?: DashboardNavs;
 }

package/src/lib/extensions/extensionUtils.ts

@@ -88,6 +88,7 @@ export function loadExtensionComponents(
   ctx: CTX,
   name: string,
   filterByExtensions?: string[],
+  props?: Record<string, any>,
 ): any[] {
   const components = [];
   for (const [extensionName, extensionValue] of Object.entries(
@@ -101,7 +102,13 @@ export function loadExtensionComponents(
         extensionValue.components,
       )) {
         if (name.startsWith(componentName)) {
-          components.push(componentValue);
+          if (componentValue && typeof componentValue === "object" && "component" in componentValue && "when" in componentValue) {
+            if (!props || componentValue.when(props)) {
+              components.push(componentValue.component);
+            }
+          } else {
+            components.push(componentValue);
+          }
         }
       }
     }

package/dist/components/loadingTypesForMonacoEditor.d.ts

@@ -1,7 +0,0 @@
-/**
- * TODO
- *
- * this file shows an example of downloading the types files of a library from npm to use them in adding type support of that library in the vscode editor
- * so the whole point is that for users to be able to paste a url from npm or jsr of a library and have all ts support from its types
- */
-export {};

package/dist/components/loadingTypesForMonacoEditor.js

@@ -1,72 +0,0 @@
-/**
- * TODO
- *
- * this file shows an example of downloading the types files of a library from npm to use them in adding type support of that library in the vscode editor
- * so the whole point is that for users to be able to paste a url from npm or jsr of a library and have all ts support from its types
- */
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import { gunzipSync } from "fflate";
-import { untar } from "@andrewbranch/untar.js";
-function extractTgz(buffer) {
-    return __awaiter(this, void 0, void 0, function () {
-        var tarBuffer, cleanBuffer, files, dtsFiles, _i, files_1, file, content;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    tarBuffer = gunzipSync(new Uint8Array(buffer));
-                    cleanBuffer = tarBuffer.buffer.slice(tarBuffer.byteOffset, tarBuffer.byteOffset + tarBuffer.byteLength);
-                    return [4 /*yield*/, untar(cleanBuffer)];
-                case 1:
-                    files = _a.sent();
-                    dtsFiles = [];
-                    for (_i = 0, files_1 = files; _i < files_1.length; _i++) {
-                        file = files_1[_i];
-                        if (file.filename.endsWith(".d.ts")) {
-                            content = new TextDecoder().decode(file.fileData);
-                            dtsFiles.push({ name: file.filename, content: content });
-                        }
-                    }
-                    return [2 /*return*/, dtsFiles];
-            }
-        });
-    });
-}
-var tgzURL = "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz";
-var response = await fetch(tgzURL);
-var arrayBuffer = await response.arrayBuffer();
-var files = await extractTgz(arrayBuffer);

package/src/lib/components/loadingTypesForMonacoEditor.ts

@@ -1,36 +0,0 @@
-/**
- * TODO
- * 
- * this file shows an example of downloading the types files of a library from npm to use them in adding type support of that library in the vscode editor
- * so the whole point is that for users to be able to paste a url from npm or jsr of a library and have all ts support from its types
- */
-
-import { gunzipSync } from "fflate";
-import { untar } from "@andrewbranch/untar.js";
-
-async function extractTgz(buffer: ArrayBuffer) {
-    const tarBuffer = gunzipSync(new Uint8Array(buffer));
-
-    const cleanBuffer = tarBuffer.buffer.slice(
-        tarBuffer.byteOffset,
-        tarBuffer.byteOffset + tarBuffer.byteLength,
-    );
-    const files = await untar(cleanBuffer as ArrayBuffer);
-
-    const dtsFiles = [];
-
-    for (const file of files) {
-        if (file.filename.endsWith(".d.ts")) {
-            const content = new TextDecoder().decode(file.fileData);
-            dtsFiles.push({ name: file.filename, content });
-        }
-    }
-
-    return dtsFiles;
-}
-
-const tgzURL = "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz";
-const response = await fetch(tgzURL);
-const arrayBuffer = await response.arrayBuffer();
-
-const files = await extractTgz(arrayBuffer);