Add data binding for query params

packages/builder/src/builderStore/dataBinding.js

@@ -390,11 +390,17 @@ const getUrlBindings = asset => {
     }
   })
   const safeURL = makePropSafe("url")
-  return params.map(param => ({
+  const urlParamBindings = params.map(param => ({
     type: "context",
     runtimeBinding: `${safeURL}.${makePropSafe(param)}`,
     readableBinding: `URL.${param}`,
   }))
+  const queryParamsBinding = {
+    type: "context",
+    runtimeBinding: makePropSafe("query"),
+    readableBinding: "Query params",
+  }
+  return urlParamBindings.concat([queryParamsBinding])
 }
 
 const getRoleBindings = () => {

packages/client/src/components/ClientApp.svelte

@@ -24,6 +24,7 @@
   import DeviceBindingsProvider from "components/context/DeviceBindingsProvider.svelte"
   import StateBindingsProvider from "components/context/StateBindingsProvider.svelte"
   import RowSelectionProvider from "components/context/RowSelectionProvider.svelte"
+  import QueryParamsProvider from "components/context/QueryParamsProvider.svelte"
   import SettingsBar from "components/preview/SettingsBar.svelte"
   import SelectionIndicator from "components/preview/SelectionIndicator.svelte"
   import HoverIndicator from "components/preview/HoverIndicator.svelte"
@@ -94,6 +95,7 @@
       <UserBindingsProvider>
         <StateBindingsProvider>
           <RowSelectionProvider>
+            <QueryParamsProvider>
               <!-- Settings bar can be rendered outside of device preview -->
               <!-- Key block needs to be outside the if statement or it breaks -->
               {#key $builderStore.selectedComponentId}
@@ -183,6 +185,7 @@
                   <DNDHandler />
                 {/if}
               </div>
+            </QueryParamsProvider>
           </RowSelectionProvider>
         </StateBindingsProvider>
       </UserBindingsProvider>

packages/client/src/components/context/QueryParamsProvider.svelte

@@ -0,0 +1,8 @@
+<script>
+  import Provider from "./Provider.svelte"
+  import { routeStore } from "stores"
+</script>
+
+<Provider key="query" data={$routeStore.queryParams}>
+  <slot />
+</Provider>