Fix: SvelteKit configuration and lack of ambient types (#4485)

* fix lack of ambient types * type issues * another type issue * last one
rilldata · Apr 2, 2024 · 0343f5b · 0343f5b · github-actions · Apr 2, 2024
1 parent 418ff67
commit 0343f5b
Show file tree

Hide file tree

Showing 20 changed files with 32 additions and 40 deletions.
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,20 +1,15 @@
 {
-  // TODO: SvelteKit recommends extending their config, but it currently triggers type import errors throughout application that we need to fix
-  // "extends": "./.svelte-kit/tsconfig.json",
+
   "compilerOptions": {
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "module": "esnext",
     "lib": [
 			"esnext",
 			"DOM",
 			"DOM.Iterable"
 		],
     "target": "esnext",
-    /**
-      svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
-      to enforce using \`import type\` instead of \`import\` for Types.
-    */
-    "importsNotUsedAsValues": "error",
+
     /**
       ignoreDeprecations is recommended by the SvelteKit maintainers until SvelteKit 2.0.
       See: https://github.com/sveltejs/kit/issues/8650#issuecomment-1607282327

diff --git a/web-admin/src/components/table/Table.svelte b/web-admin/src/components/table/Table.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
   import {
-    Row,
+    type Row,
     createSvelteTable,
     flexRender,
     getCoreRowModel,
     getFilteredRowModel,
     getSortedRowModel,
   } from "@tanstack/svelte-table";
-  import type { ColumnDef, TableOptions } from "@tanstack/table-core/src/types";
+  import type { ColumnDef, TableOptions } from "@tanstack/svelte-table";
   import { createEventDispatcher, setContext } from "svelte";
   import { writable } from "svelte/store";
 

diff --git a/web-admin/src/features/alerts/history/AlertHistoryStatusChip.svelte b/web-admin/src/features/alerts/history/AlertHistoryStatusChip.svelte
@@ -2,7 +2,7 @@
   import { Tag } from "@rilldata/web-common/components/tag";
   import type { Color } from "@rilldata/web-common/components/tag/Tag.svelte";
   import {
-    V1AlertExecution,
+    type V1AlertExecution,
     V1AssertionStatus,
     type V1AssertionResult,
   } from "@rilldata/web-common/runtime-client";

diff --git a/web-admin/src/features/alerts/history/AlertHistoryTable.svelte b/web-admin/src/features/alerts/history/AlertHistoryTable.svelte
@@ -6,7 +6,7 @@
   import type { V1AlertExecution } from "@rilldata/web-common/runtime-client";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
   import { flexRender } from "@tanstack/svelte-table";
-  import type { ColumnDef } from "@tanstack/table-core/src/types";
+  import type { ColumnDef } from "@tanstack/svelte-table";
   import Table from "../../../components/table/Table.svelte";
 
   export let alert: string;

diff --git a/web-admin/src/features/alerts/history/AlertHistoryTableHeader.svelte b/web-admin/src/features/alerts/history/AlertHistoryTableHeader.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-  import type { Table } from "@tanstack/table-core/src/types";
+  import type { Table } from "@tanstack/svelte-table";
   import { getContext } from "svelte";
   import type { Readable } from "svelte/store";
 
   export let maxWidthOverride: string | null = null;
 
   let maxWidth = maxWidthOverride ?? "max-w-[800px]";
 
-  const table = getContext("table") as Readable<Table<unknown>>;
+  const table = getContext<Readable<Table<unknown>>>("table");
 
   // Number of alerts
   $: numAlerts = $table.getRowModel().rows.length;

diff --git a/web-admin/src/features/alerts/listing/AlertsTable.svelte b/web-admin/src/features/alerts/listing/AlertsTable.svelte
@@ -3,7 +3,7 @@
   import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
   import type { V1Resource } from "@rilldata/web-common/runtime-client";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
-  import { ColumnDef, flexRender } from "@tanstack/svelte-table";
+  import { type ColumnDef, flexRender } from "@tanstack/svelte-table";
   import Table from "../../../components/table/Table.svelte";
   import { useAlerts } from "../../alerts/selectors";
   import AlertsError from "./AlertsError.svelte";

diff --git a/web-admin/src/features/dashboards/listing/DashboardsTable.svelte b/web-admin/src/features/dashboards/listing/DashboardsTable.svelte
@@ -2,15 +2,15 @@
   import Spinner from "@rilldata/web-common/features/entity-management/Spinner.svelte";
   import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
-  import { Row, flexRender } from "@tanstack/svelte-table";
+  import { type Row, flexRender } from "@tanstack/svelte-table";
   import { createEventDispatcher } from "svelte";
   import Table from "../../../components/table/Table.svelte";
   import DashboardsError from "./DashboardsError.svelte";
   import DashboardsTableCompositeCell from "./DashboardsTableCompositeCell.svelte";
   import DashboardsTableEmpty from "./DashboardsTableEmpty.svelte";
   import DashboardsTableHeader from "./DashboardsTableHeader.svelte";
   import NoDashboardsCTA from "./NoDashboardsCTA.svelte";
-  import { DashboardResource, useDashboardsV2 } from "./selectors";
+  import { type DashboardResource, useDashboardsV2 } from "./selectors";
 
   export let isEmbedded = false;
 

diff --git a/web-admin/src/features/dashboards/listing/DashboardsTableHeader.svelte b/web-admin/src/features/dashboards/listing/DashboardsTableHeader.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { beforeNavigate } from "$app/navigation";
   import { Search } from "@rilldata/web-common/components/search";
-  import type { Table } from "@tanstack/table-core/src/types";
+  import type { Table } from "@tanstack/svelte-table";
   import { getContext } from "svelte";
   import type { Readable } from "svelte/store";
 

diff --git a/web-admin/src/features/organizations/OrganizationAccessControls.svelte b/web-admin/src/features/organizations/OrganizationAccessControls.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import {
     createAdminServiceGetOrganization,
-    V1OrganizationPermissions,
+    type V1OrganizationPermissions,
   } from "@rilldata/web-admin/client";
   import type { CreateQueryResult } from "@tanstack/svelte-query";
 

diff --git a/web-admin/src/features/projects/ProjectAccessControls.svelte b/web-admin/src/features/projects/ProjectAccessControls.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import {
     createAdminServiceGetProject,
-    V1ProjectPermissions,
+    type V1ProjectPermissions,
   } from "@rilldata/web-admin/client";
   import type { CreateQueryResult } from "@tanstack/svelte-query";
 

diff --git a/web-admin/src/features/scheduled-reports/history/ReportHistoryTable.svelte b/web-admin/src/features/scheduled-reports/history/ReportHistoryTable.svelte
@@ -2,7 +2,7 @@
   import type { V1ReportExecution } from "@rilldata/web-common/runtime-client";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
   import { flexRender } from "@tanstack/svelte-table";
-  import type { ColumnDef } from "@tanstack/table-core/src/types";
+  import type { ColumnDef } from "@tanstack/svelte-table";
   import Table from "../../../components/table/Table.svelte";
   import { useReport } from "../selectors";
   import NoRunsYet from "./NoRunsYet.svelte";

diff --git a/web-admin/src/features/scheduled-reports/history/ReportHistoryTableHeader.svelte b/web-admin/src/features/scheduled-reports/history/ReportHistoryTableHeader.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-  import type { Table } from "@tanstack/table-core/src/types";
+  import type { Table } from "@tanstack/svelte-table";
   import { getContext } from "svelte";
   import type { Readable } from "svelte/store";
 
   export let maxWidthOverride: string | null = null;
 
   let maxWidth = maxWidthOverride ?? "max-w-[800px]";
 
-  const table = getContext("table") as Readable<Table<unknown>>;
+  const table = getContext<Readable<Table<unknown>>>("table");
 
   // Number of reports
   $: numReports = $table.getRowModel().rows.length;

diff --git a/web-admin/src/features/scheduled-reports/listing/ReportsTable.svelte b/web-admin/src/features/scheduled-reports/listing/ReportsTable.svelte
@@ -3,7 +3,7 @@
   import { EntityStatus } from "@rilldata/web-common/features/entity-management/types";
   import type { V1Resource } from "@rilldata/web-common/runtime-client";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
-  import { ColumnDef, flexRender } from "@tanstack/svelte-table";
+  import { type ColumnDef, flexRender } from "@tanstack/svelte-table";
   import Table from "../../../components/table/Table.svelte";
   import { useReports } from "../selectors";
   import NoReportsCTA from "./NoReportsCTA.svelte";

diff --git a/web-admin/src/features/scheduled-reports/listing/ReportsTableHeader.svelte b/web-admin/src/features/scheduled-reports/listing/ReportsTableHeader.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import { Search } from "@rilldata/web-common/components/search";
-  import type { Table } from "@tanstack/table-core/src/types";
+  import type { Table } from "@tanstack/svelte-table";
   import { getContext } from "svelte";
   import type { Readable } from "svelte/store";
 
-  const table = getContext("table") as Readable<Table<unknown>>;
+  const table = getContext<Readable<Table<unknown>>>("table");
 
   // Search
   let filter = "";

diff --git a/web-admin/src/features/view-as-user/ViewAsUserPopover.svelte b/web-admin/src/features/view-as-user/ViewAsUserPopover.svelte
@@ -9,7 +9,10 @@
   import { useQueryClient } from "@tanstack/svelte-query";
   import { matchSorter } from "match-sorter";
   import { createEventDispatcher } from "svelte";
-  import { V1User, createAdminServiceSearchProjectUsers } from "../../client";
+  import {
+    type V1User,
+    createAdminServiceSearchProjectUsers,
+  } from "../../client";
   import { errorStore } from "../../features/errors/error-store";
   import { setViewedAsUser } from "./setViewedAsUser";
   import { viewAsUserStore } from "./viewAsUserStore";

diff --git a/web-admin/tsconfig.json b/web-admin/tsconfig.json
@@ -1,3 +1,3 @@
 {
-  "extends": "../tsconfig.json",
+  "extends": ["./.svelte-kit/tsconfig.json", "../tsconfig.json"],
 }
diff --git a/web-auth/tsconfig.json b/web-auth/tsconfig.json
@@ -1,10 +1,4 @@
 {
-  "extends": "../tsconfig.json",
-	"compilerOptions": {
-		"allowJs": true,
-	}
-	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
-	//
-	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-	// from the referenced tsconfig.json - TypeScript does not merge them in
-}
+	"extends": ["./.svelte-kit/tsconfig.json", "../tsconfig.json"],
+  }
+
diff --git a/web-common/src/features/dashboards/pivot/pivot-data-store.ts b/web-common/src/features/dashboards/pivot/pivot-data-store.ts
@@ -10,7 +10,7 @@ import type {
   V1MetricsViewAggregationResponse,
   V1MetricsViewAggregationResponseDataItem,
 } from "@rilldata/web-common/runtime-client";
-import type { CreateQueryResult } from "@tanstack/svelte-query/build/lib/types";
+import type { CreateQueryResult } from "@tanstack/svelte-query";
 import type { ColumnDef } from "@tanstack/svelte-table";
 import { Readable, derived, readable } from "svelte/store";
 import { getColumnDefForPivot } from "./pivot-column-definition";

diff --git a/web-common/src/features/dashboards/proto-state/filter-converter.ts b/web-common/src/features/dashboards/proto-state/filter-converter.ts
@@ -1,4 +1,4 @@
-import type { Value } from "@bufbuild/protobuf/dist/cjs/google/protobuf/struct_pb";
+import type { Value } from "@bufbuild/protobuf";
 import {
   createAndExpression,
   createInExpression,

diff --git a/web-local/tsconfig.json b/web-local/tsconfig.json
@@ -1,3 +1,3 @@
 {
-  "extends": "../tsconfig.json",
+  "extends": ["./.svelte-kit/tsconfig.json", "../tsconfig.json"],
 }