feat: move pre request script to new state system

components/http/ImportCurl.vue

@@ -106,6 +106,7 @@ export default defineComponent({
             method,
             params,
             headers,
+            preRequestScript: "",
           })
         )
       } catch (error) {

helpers/preRequest.ts

@@ -3,7 +3,7 @@ import {
   getGlobalEnvironment,
 } from "~/newstore/environments"
 
-export default function getEnvironmentVariablesFromScript(script: any) {
+export default function getEnvironmentVariablesFromScript(script: string) {
   const _variables: Record<string, string> = {}
 
   const currentEnv = getCurrentEnvironment()

helpers/types/HoppRESTRequest.ts

@@ -19,6 +19,7 @@ export interface HoppRESTRequest {
   endpoint: string
   params: HoppRESTParam[]
   headers: HoppRESTHeader[]
+  preRequestScript: string
 }
 
 export function makeRESTRequest(
@@ -54,12 +55,17 @@ export function translateToNewRequest(x: any): HoppRESTRequest {
 
     const method = x.method
 
-    return {
+    const preRequestScript = x.preRequestScript
+
+    const result: HoppRESTRequest = {
       endpoint,
       headers,
       params,
       method,
+      preRequestScript,
       v: RESTReqSchemaVersion,
     }
+
+    return result
   }
 }

newstore/RESTSession.ts

@@ -1,4 +1,6 @@
 import { pluck, distinctUntilChanged, map, filter } from "rxjs/operators"
+import { customRef, onBeforeUnmount, Ref } from "@nuxtjs/composition-api"
+import { Subscription } from "rxjs"
 import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
 import {
   HoppRESTHeader,
@@ -17,7 +19,7 @@ function getParamsInURL(url: string): { key: string; value: string }[] {
     uriObj.searchParams.forEach((value, key) => {
       result.push({ key, value })
     })
-  } catch (_e) {}
+  } catch (_e) { }
 
   return result
 }
@@ -121,6 +123,7 @@ const defaultRESTSession: RESTSession = {
     params: [],
     headers: [],
     method: "GET",
+    preRequestScript: "// pw.env.set('variable', 'value');",
   },
   response: null,
 }
@@ -287,6 +290,14 @@ const dispatchers = defineDispatchers({
       },
     }
   },
+  setPreRequestScript(curr: RESTSession, { newScript }: { newScript: string }) {
+    return {
+      request: {
+        ...curr.request,
+        preRequestScript: newScript,
+      },
+    }
+  },
   updateResponse(
     _curr: RESTSession,
     { updatedRes }: { updatedRes: HoppRESTResponse | null }
@@ -405,6 +416,15 @@ export function deleteAllRESTHeaders() {
   })
 }
 
+export function setPreRequestScript(newScript: string) {
+  restSessionStore.dispatch({
+    dispatcher: "setPreRequestScript",
+    payload: {
+      newScript,
+    },
+  })
+}
+
 export function updateRESTResponse(updatedRes: HoppRESTResponse | null) {
   restSessionStore.dispatch({
     dispatcher: "updateResponse",
@@ -454,6 +474,11 @@ export const restActiveHeadersCount$ = restHeaders$.pipe(
   map((params) => params.filter((x) => x.active).length)
 )
 
+export const restPreRequestScript$ = restSessionStore.subject$.pipe(
+  pluck("request", "preRequestScript"),
+  distinctUntilChanged()
+)
+
 export const restResponse$ = restSessionStore.subject$.pipe(
   pluck("response"),
   distinctUntilChanged()
@@ -465,3 +490,37 @@ export const completedRESTResponse$ = restResponse$.pipe(
       res !== null && res.type !== "loading" && res.type !== "network_fail"
   )
 )
+
+/**
+ * A Vue 3 composable function that gives access to a ref
+ * which is updated to the preRequestScript value in the store.
+ * The ref value is kept in sync with the store and all writes
+ * to the ref are dispatched to the store as `setPreRequestScript`
+ * dispatches.
+ */
+export function usePreRequestScript(): Ref<string> {
+  let sub: Subscription | null = null
+
+  onBeforeUnmount(() => {
+    if (sub) {
+      sub.unsubscribe()
+    }
+  })
+
+  return customRef((track, trigger) => {
+    sub = restPreRequestScript$.subscribe(() => {
+      trigger()
+    })
+
+    return {
+      get() {
+        track()
+        return restSessionStore.value.request.preRequestScript
+      },
+      set(value: string) {
+        trigger()
+        setPreRequestScript(value)
+      },
+    }
+  })
+}

pages/index.vue

@@ -31,7 +31,19 @@
                         <span class="select-wrapper">
                           <input
                             id="contentType"
-                            class="bg-primary rounded-lg flex font-semibold font-mono text-xs w-full py-2 px-4 transition truncate focus:outline-none"
+                            class="
+                              bg-primary
+                              rounded-lg
+                              flex
+                              font-semibold font-mono
+                              text-xs
+                              w-full
+                              py-2
+                              px-4
+                              transition
+                              truncate
+                              focus:outline-none
+                            "
                             v-model="contentType"
                             readonly
                           />
@@ -309,7 +321,17 @@
               >
                 <AppSection v-if="showPreRequestScript" label="preRequest">
                   <div
-                    class="bg-primary border-b border-dividerLight flex flex-1 pl-4 top-110px z-10 sticky items-center justify-between"
+                    class="
+                      bg-primary
+                      border-b border-dividerLight
+                      flex flex-1
+                      pl-4
+                      top-110px
+                      z-10
+                      sticky
+                      items-center
+                      justify-between
+                    "
                   >
                     <label class="font-semibold text-xs">
                       {{ $t("javascript_code") }}
@@ -340,7 +362,17 @@
               <SmartTab :id="'tests'" :label="$t('tests')">
                 <AppSection v-if="testsEnabled" label="postRequestTests">
                   <div
-                    class="bg-primary border-b border-dividerLight flex flex-1 pl-4 top-110px z-10 sticky items-center justify-between"
+                    class="
+                      bg-primary
+                      border-b border-dividerLight
+                      flex flex-1
+                      pl-4
+                      top-110px
+                      z-10
+                      sticky
+                      items-center
+                      justify-between
+                    "
                   >
                     <label class="font-semibold text-xs">
                       {{ $t("javascript_code") }}
@@ -537,6 +569,7 @@
 
 <script>
 /* eslint-disable */
+import { defineComponent } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
 
@@ -566,19 +599,24 @@ import {
   restRequest$,
   restActiveParamsCount$,
   restActiveHeadersCount$,
+  usePreRequestScript,
 } from "~/newstore/RESTSession"
 import { map } from "rxjs/operators"
 
-export default {
+export default defineComponent({
   components: { Splitpanes, Pane },
 
+  setup() {
+    return {
+      preRequestScript: usePreRequestScript(),
+    }
+  },
   data() {
     return {
       showCurlImportModal: false,
       showPreRequestScript: true,
       testsEnabled: true,
       testScript: "// pw.expect('variable').toBe('value');",
-      preRequestScript: "// pw.env.set('variable', 'value');",
       testReports: [],
       copyButton: '<i class="material-icons">content_copy</i>',
       downloadButton: '<i class="material-icons">save_alt</i>',
@@ -1864,5 +1902,5 @@ export default {
   beforeDestroy() {
     document.removeEventListener("keydown", this._keyListener)
   },
-}
+})
 </script>