diff --git a/packages/builder/src/stores/BudiStore.ts b/packages/builder/src/stores/BudiStore.ts
index c645ea6a24..706fa9474a 100644
--- a/packages/builder/src/stores/BudiStore.ts
+++ b/packages/builder/src/stores/BudiStore.ts
@@ -1,40 +1,22 @@
-import { writable, Writable } from "svelte/store"
+import { writable, Writable, Readable } from "svelte/store"
 
 interface BudiStoreOpts {
   debug?: boolean
 }
 
-export default class BudiStore<T> implements Writable<T> {
+export class BudiStore<T> {
   store: Writable<T>
   subscribe: Writable<T>["subscribe"]
   update: Writable<T>["update"]
   set: Writable<T>["set"]
 
   constructor(init: T, opts?: BudiStoreOpts) {
-    const store = writable<T>(init)
-
-    /**
-     * Internal Svelte store
-     */
-    this.store = store
-
-    /**
-     * Exposes the svelte subscribe fn to allow $ notation access
-     * @example
-     * $navigation.selectedScreenId
-     */
+    this.store = writable<T>(init)
     this.subscribe = this.store.subscribe
-
-    /**
-     * Exposes the svelte update fn.
-     * *Store modification should be kept to a minimum
-     */
     this.update = this.store.update
     this.set = this.store.set
 
-    /**
-     * Optional debug mode to output the store updates to console
-     */
+    // Optional debug mode to output the store updates to console
     if (opts?.debug) {
       this.subscribe(state => {
         console.warn(`${this.constructor.name}`, state)
@@ -42,3 +24,18 @@ export default class BudiStore<T> implements Writable<T> {
     }
   }
 }
+
+export class DerivedBudiStore<T, DerivedT extends T> extends BudiStore<T> {
+  derivedStore: Readable<DerivedT>
+  subscribe: Readable<DerivedT>["subscribe"]
+
+  constructor(
+    init: T,
+    makeDerivedStore: (store: Writable<T>) => Readable<DerivedT>,
+    opts?: BudiStoreOpts
+  ) {
+    super(init, opts)
+    this.derivedStore = makeDerivedStore(this.store)
+    this.subscribe = this.derivedStore.subscribe
+  }
+}
diff --git a/packages/builder/src/stores/builder/app.js b/packages/builder/src/stores/builder/app.js
index e57a079185..3b9e4e0b3c 100644
--- a/packages/builder/src/stores/builder/app.js
+++ b/packages/builder/src/stores/builder/app.js
@@ -1,5 +1,5 @@
 import { API } from "api"
-import BudiStore from "../BudiStore"
+import { BudiStore } from "../BudiStore"
 
 export const INITIAL_APP_META_STATE = {
   appId: "",
diff --git a/packages/builder/src/stores/builder/builder.js b/packages/builder/src/stores/builder/builder.js
index d002062da9..9b5a847680 100644
--- a/packages/builder/src/stores/builder/builder.js
+++ b/packages/builder/src/stores/builder/builder.js
@@ -1,7 +1,7 @@
 import { get } from "svelte/store"
 import { createBuilderWebsocket } from "./websocket.js"
 import { BuilderSocketEvent } from "@budibase/shared-core"
-import BudiStore from "../BudiStore.js"
+import { BudiStore } from "../BudiStore.js"
 import { TOUR_KEYS } from "components/portal/onboarding/tours.js"
 
 export const INITIAL_BUILDER_STATE = {
diff --git a/packages/builder/src/stores/builder/components.js b/packages/builder/src/stores/builder/components.js
index faa6a086ca..e3fafd6f83 100644
--- a/packages/builder/src/stores/builder/components.js
+++ b/packages/builder/src/stores/builder/components.js
@@ -28,7 +28,7 @@ import {
   DB_TYPE_INTERNAL,
   DB_TYPE_EXTERNAL,
 } from "constants/backend"
-import BudiStore from "../BudiStore"
+import { BudiStore } from "../BudiStore"
 import { Utils } from "@budibase/frontend-core"
 import { FieldType } from "@budibase/types"
 import { utils } from "@budibase/shared-core"
diff --git a/packages/builder/src/stores/builder/datasources.ts b/packages/builder/src/stores/builder/datasources.ts
index e02774f1d5..6d94c1b26f 100644
--- a/packages/builder/src/stores/builder/datasources.ts
+++ b/packages/builder/src/stores/builder/datasources.ts
@@ -1,4 +1,4 @@
-import { derived, get } from "svelte/store"
+import { derived, get, Writable } from "svelte/store"
 import {
   IntegrationTypes,
   DEFAULT_BB_DATASOURCE_ID,
@@ -17,12 +17,7 @@ import {
 } from "@budibase/types"
 // @ts-ignore
 import { TableNames } from "constants"
-import BudiStore from "stores/BudiStore"
-
-// when building the internal DS - seems to represent it slightly differently to the backend typing of a DS
-interface InternalDatasource extends Omit<Datasource, "entities"> {
-  entities: Table[]
-}
+import { DerivedBudiStore } from "stores/BudiStore"
 
 class TableImportError extends Error {
   errors: Record<string, string>
@@ -42,68 +37,76 @@ class TableImportError extends Error {
   }
 }
 
+// when building the internal DS - seems to represent it slightly differently to the backend typing of a DS
+interface InternalDatasource extends Omit<Datasource, "entities"> {
+  entities: Table[]
+}
+
 interface BuilderDatasourceStore {
-  list: Datasource[]
+  datasources: Datasource[]
   selectedDatasourceId: null | string
 }
 
-interface DerivedDatasourceStore extends Omit<BuilderDatasourceStore, "list"> {
+interface DerivedDatasourceStore extends BuilderDatasourceStore {
   list: (Datasource | InternalDatasource)[]
   selected?: Datasource | InternalDatasource
   hasDefaultData: boolean
   hasData: boolean
 }
 
-export class DatasourceStore extends BudiStore<DerivedDatasourceStore> {
+export class DatasourceStore extends DerivedBudiStore<
+  BuilderDatasourceStore,
+  DerivedDatasourceStore
+> {
   constructor() {
-    super({
-      list: [],
-      selectedDatasourceId: null,
-      hasDefaultData: false,
-      hasData: false,
-    })
-
-    const derivedStore = derived<
-      [DatasourceStore, BudiStore<any>],
-      DerivedDatasourceStore
-    >([this, tables as any], ([$store, $tables]) => {
-      // Set the internal datasource entities from the table list, which we're
-      // able to keep updated unlike the egress generated definition of the
-      // internal datasource
-      let internalDS: Datasource | InternalDatasource | undefined =
-        $store.list?.find(ds => ds._id === BUDIBASE_INTERNAL_DB_ID)
-      let otherDS = $store.list?.filter(
-        ds => ds._id !== BUDIBASE_INTERNAL_DB_ID
-      )
-      if (internalDS) {
-        const tables: Table[] = $tables.list?.filter((table: Table) => {
-          return (
-            table.sourceId === BUDIBASE_INTERNAL_DB_ID &&
-            table._id !== TableNames.USERS
-          )
-        })
-        internalDS = {
-          ...internalDS,
-          entities: tables,
+    const makeDerivedStore = (store: Writable<BuilderDatasourceStore>) => {
+      return derived([store, tables], ([$store, $tables]) => {
+        // Set the internal datasource entities from the table list, which we're
+        // able to keep updated unlike the egress generated definition of the
+        // internal datasource
+        let internalDS: Datasource | InternalDatasource | undefined =
+          $store.datasources?.find(ds => ds._id === BUDIBASE_INTERNAL_DB_ID)
+        let otherDS = $store.datasources?.filter(
+          ds => ds._id !== BUDIBASE_INTERNAL_DB_ID
+        )
+        if (internalDS) {
+          const tables: Table[] = $tables.list?.filter((table: Table) => {
+            return (
+              table.sourceId === BUDIBASE_INTERNAL_DB_ID &&
+              table._id !== TableNames.USERS
+            )
+          })
+          internalDS = {
+            ...internalDS,
+            entities: tables,
+          }
         }
-      }
 
-      // Build up enriched DS list
-      // Only add the internal DS if we have at least one non-users table
-      let list: (InternalDatasource | Datasource)[] = []
-      if (internalDS?.entities?.length) {
-        list.push(internalDS)
-      }
-      list = list.concat(otherDS || [])
+        // Build up enriched DS list
+        // Only add the internal DS if we have at least one non-users table
+        let list: (InternalDatasource | Datasource)[] = []
+        if (internalDS?.entities?.length) {
+          list.push(internalDS)
+        }
+        list = list.concat(otherDS || [])
 
-      return {
-        ...$store,
-        list,
-        selected: list?.find(ds => ds._id === $store.selectedDatasourceId),
-        hasDefaultData: list?.some(ds => ds._id === DEFAULT_BB_DATASOURCE_ID),
-        hasData: list?.length > 0,
-      }
-    })
+        return {
+          ...$store,
+          list,
+          selected: list?.find(ds => ds._id === $store.selectedDatasourceId),
+          hasDefaultData: list?.some(ds => ds._id === DEFAULT_BB_DATASOURCE_ID),
+          hasData: list?.length > 0,
+        }
+      })
+    }
+
+    super(
+      {
+        datasources: [],
+        selectedDatasourceId: null,
+      },
+      makeDerivedStore
+    )
 
     this.fetch = this.fetch.bind(this)
     this.init = this.fetch.bind(this)
@@ -114,14 +117,13 @@ export class DatasourceStore extends BudiStore<DerivedDatasourceStore> {
     this.save = this.save.bind(this)
     this.replaceDatasource = this.replaceDatasource.bind(this)
     this.getTableNames = this.getTableNames.bind(this)
-    this.subscribe = derivedStore.subscribe
   }
 
   async fetch() {
     const datasources = await API.getDatasources()
     this.store.update(state => ({
       ...state,
-      list: datasources,
+      datasources,
     }))
   }
 
@@ -158,7 +160,7 @@ export class DatasourceStore extends BudiStore<DerivedDatasourceStore> {
   }
 
   sourceCount(source: string) {
-    return get(this.store).list.filter(
+    return get(this.store).datasources.filter(
       datasource => datasource.source === source
     ).length
   }
@@ -250,7 +252,7 @@ export class DatasourceStore extends BudiStore<DerivedDatasourceStore> {
     if (!datasource) {
       this.store.update(state => ({
         ...state,
-        list: state.list.filter(x => x._id !== datasourceId),
+        datasources: state.datasources.filter(x => x._id !== datasourceId),
       }))
       tables.removeDatasourceTables(datasourceId)
       queries.removeDatasourceQueries(datasourceId)
@@ -258,11 +260,13 @@ export class DatasourceStore extends BudiStore<DerivedDatasourceStore> {
     }
 
     // Add new datasource
-    const index = get(this.store).list.findIndex(x => x._id === datasource._id)
+    const index = get(this.store).datasources.findIndex(
+      x => x._id === datasource._id
+    )
     if (index === -1) {
       this.store.update(state => ({
         ...state,
-        list: [...state.list, datasource],
+        datasources: [...state.datasources, datasource],
       }))
 
       // If this is a new datasource then we should refresh the tables list,
@@ -273,7 +277,7 @@ export class DatasourceStore extends BudiStore<DerivedDatasourceStore> {
     // Update existing datasource
     else if (datasource) {
       this.store.update(state => {
-        state.list[index] = datasource
+        state.datasources[index] = datasource
         return state
       })
     }
@@ -283,10 +287,6 @@ export class DatasourceStore extends BudiStore<DerivedDatasourceStore> {
     const info = await API.fetchInfoForDatasource(datasource)
     return info.tableNames || []
   }
-
-  // subscribe() {
-  //   return this.derivedStore.subscribe()
-  // }
 }
 
 export const datasources = new DatasourceStore()
diff --git a/packages/builder/src/stores/builder/hover.js b/packages/builder/src/stores/builder/hover.js
index 98cdc9e416..8da7191cf5 100644
--- a/packages/builder/src/stores/builder/hover.js
+++ b/packages/builder/src/stores/builder/hover.js
@@ -1,6 +1,6 @@
 import { get } from "svelte/store"
 import { previewStore } from "stores/builder"
-import BudiStore from "../BudiStore"
+import { BudiStore } from "../BudiStore"
 
 export const INITIAL_HOVER_STATE = {
   componentId: null,
diff --git a/packages/builder/src/stores/builder/layouts.js b/packages/builder/src/stores/builder/layouts.js
index b105989746..6b68850a93 100644
--- a/packages/builder/src/stores/builder/layouts.js
+++ b/packages/builder/src/stores/builder/layouts.js
@@ -1,6 +1,6 @@
 import { derived, get } from "svelte/store"
 import { componentStore } from "stores/builder"
-import BudiStore from "../BudiStore"
+import { BudiStore } from "../BudiStore"
 import { API } from "api"
 
 export const INITIAL_LAYOUT_STATE = {
diff --git a/packages/builder/src/stores/builder/navigation.js b/packages/builder/src/stores/builder/navigation.js
index c3e19a4327..abdd9638f3 100644
--- a/packages/builder/src/stores/builder/navigation.js
+++ b/packages/builder/src/stores/builder/navigation.js
@@ -1,7 +1,7 @@
 import { get } from "svelte/store"
 import { API } from "api"
 import { appStore } from "stores/builder"
-import BudiStore from "../BudiStore"
+import { BudiStore } from "../BudiStore"
 
 export const INITIAL_NAVIGATION_STATE = {
   navigation: "Top",
diff --git a/packages/builder/src/stores/builder/rowActions.js b/packages/builder/src/stores/builder/rowActions.js
index a7ed45e707..553a574d53 100644
--- a/packages/builder/src/stores/builder/rowActions.js
+++ b/packages/builder/src/stores/builder/rowActions.js
@@ -1,5 +1,5 @@
 import { get, derived } from "svelte/store"
-import BudiStore from "stores/BudiStore"
+import { BudiStore } from "stores/BudiStore"
 import { tables } from "./tables"
 import { viewsV2 } from "./viewsV2"
 import { automationStore } from "./automations"
diff --git a/packages/builder/src/stores/builder/screens.js b/packages/builder/src/stores/builder/screens.js
index 55fa3d5433..4e3d9b1ec6 100644
--- a/packages/builder/src/stores/builder/screens.js
+++ b/packages/builder/src/stores/builder/screens.js
@@ -12,7 +12,7 @@ import {
 } from "stores/builder"
 import { createHistoryStore } from "stores/builder/history"
 import { API } from "api"
-import BudiStore from "../BudiStore"
+import { BudiStore } from "../BudiStore"
 
 export const INITIAL_SCREENS_STATE = {
   screens: [],
diff --git a/packages/builder/src/stores/builder/sortedIntegrations.ts b/packages/builder/src/stores/builder/sortedIntegrations.ts
index 2c12e61b7f..76044af331 100644
--- a/packages/builder/src/stores/builder/sortedIntegrations.ts
+++ b/packages/builder/src/stores/builder/sortedIntegrations.ts
@@ -3,7 +3,7 @@ import { derived } from "svelte/store"
 
 import { DatasourceTypes } from "constants/backend"
 import { UIIntegration, Integration } from "@budibase/types"
-import BudiStore from "stores/BudiStore"
+import { BudiStore } from "stores/BudiStore"
 
 const getIntegrationOrder = (type: string | undefined) => {
   // if type is not known, sort to end
diff --git a/packages/builder/src/stores/portal/apps.ts b/packages/builder/src/stores/portal/apps.ts
index 867a554f00..f74ae4bfe2 100644
--- a/packages/builder/src/stores/portal/apps.ts
+++ b/packages/builder/src/stores/portal/apps.ts
@@ -3,7 +3,7 @@ import { derived } from "svelte/store"
 import { AppStatus } from "constants"
 import { API } from "api"
 import { auth } from "./auth"
-import BudiStore from "../BudiStore"
+import { BudiStore } from "../BudiStore"
 import { App, UpdateAppRequest } from "@budibase/types"
 
 interface AppIdentifierMetadata {
diff --git a/packages/builder/src/stores/portal/auditLogs.ts b/packages/builder/src/stores/portal/auditLogs.ts
index 10d79120ee..e97b301360 100644
--- a/packages/builder/src/stores/portal/auditLogs.ts
+++ b/packages/builder/src/stores/portal/auditLogs.ts
@@ -1,7 +1,7 @@
 import { get } from "svelte/store"
 import { API } from "api"
 import { licensing } from "./licensing"
-import BudiStore from "../BudiStore"
+import { BudiStore } from "../BudiStore"
 import {
   DownloadAuditLogsRequest,
   SearchAuditLogsRequest,
diff --git a/packages/builder/src/stores/portal/auth.ts b/packages/builder/src/stores/portal/auth.ts
index 1f9646dd56..2affea85a7 100644
--- a/packages/builder/src/stores/portal/auth.ts
+++ b/packages/builder/src/stores/portal/auth.ts
@@ -2,7 +2,7 @@ import { get } from "svelte/store"
 import { API } from "api"
 import { admin } from "stores/portal"
 import analytics from "analytics"
-import BudiStore from "stores/BudiStore"
+import { BudiStore } from "stores/BudiStore"
 import {
   isSSOUser,
   SetInitInfoRequest,