feat: basic env templating

apps/yasumu/src/app/api-testing/(components)/request/env/request-environment.tsx

@@ -1,16 +1,27 @@
+'use client';
+
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { useEnvironment } from '@/stores/application/environment.store';
 
 export function RequestEnvironment() {
+  const { environments, selected, selectById } = useEnvironment();
+
   return (
-    <Select>
+    <Select
+      value={selected?.id}
+      onValueChange={(value) => {
+        selectById(value);
+      }}
+    >
       <SelectTrigger className="w-[130px] h-8 rounded-none px-2 py-1 select-none border-none bg-inherit">
         <SelectValue placeholder="Environment" />
       </SelectTrigger>
       <SelectContent>
-        <SelectItem value="production">Production</SelectItem>
-        <SelectItem value="staging">Staging</SelectItem>
-        <SelectItem value="nightly">Nightly</SelectItem>
-        <SelectItem value="local">Local</SelectItem>
+        {environments.map((env) => (
+          <SelectItem value={env.id} key={env.id}>
+            {env.name}
+          </SelectItem>
+        ))}
       </SelectContent>
     </Select>
   );

apps/yasumu/src/app/api-testing/(components)/request/input/request-input.tsx

@@ -16,8 +16,10 @@ import { useConsole } from '@/stores/api-testing/console.store';
 import { canEvaluateResult } from '@/lib/scripts/script';
 import { useTest } from '@/stores/api-testing/test.store';
 import { useScriptTime } from '@/stores/api-testing/script-time.store';
+import { useEnvironment } from '@/stores/application/environment.store';
 
 export default function RequestInput() {
+  const { selected } = useEnvironment();
   const { current } = useRequestStore();
   const { add } = useConsole();
   const { add: addTest } = useTest();
@@ -89,6 +91,29 @@ export default function RequestInput() {
     }
   }, [responseStore.abortController]);
 
+  const replaceVars = useCallback(
+    (variable: string) => {
+      if (!selected) return variable;
+
+      const match = variable.matchAll(/{{(.*?)}}/g);
+
+      let result = variable;
+
+      for (const m of match) {
+        const [full, key] = m;
+
+        const envVar = selected.variables.find((v) => v.key === key);
+
+        if (envVar) {
+          result = result.replace(full, envVar.value);
+        }
+      }
+
+      return result;
+    },
+    [selected],
+  );
+
   const dispatchRequest = useCallback(async () => {
     try {
       if (!Yasumu.workspace) return;
@@ -111,15 +136,15 @@ export default function RequestInput() {
         response: {} as YasumuResponseContextData,
         request: {
           id,
-          url,
-          method,
+          url: replaceVars(url),
+          method: method,
           headers: h as any,
         },
         store: storeRecord,
       };
 
       headers.forEach((header) => {
-        if (header.enabled && header.key && header.value) h.append(header.key, header.value);
+        if (header.enabled && header.key && header.value) h.append(header.key, replaceVars(header.value));
       });
 
       if (!h.has('User-Agent')) {
@@ -142,6 +167,7 @@ export default function RequestInput() {
             }
 
             bodyData = body.json || undefined;
+            if (typeof bodyData === 'string') bodyData = replaceVars(bodyData);
           }
           break;
         case BodyMode.Text:
@@ -151,6 +177,7 @@ export default function RequestInput() {
             }
 
             bodyData = body.text || undefined;
+            if (typeof bodyData === 'string') bodyData = replaceVars(bodyData);
           }
           break;
         case BodyMode.UrlencodedFormData:
@@ -229,7 +256,7 @@ export default function RequestInput() {
           add({ args: [result.$error as string], timestamp: Date.now(), type: 'error' });
         }
       }
-      const finalUrl = contextData.request.url || url;
+      const finalUrl = replaceVars(contextData.request.url || url);
 
       if (!finalUrl) {
         throw new Error('No url provided');

apps/yasumu/src/stores/application/environment.store.ts

@@ -25,6 +25,7 @@ export interface IEnvironmentStore {
   remove: (env: Environment) => void;
   update: (env: Environment) => void;
   select: (env: Environment) => void;
+  selectById: (env: string) => void;
   selected: Environment | null;
   addVariable: (variable: EnvironmentVariable) => void;
   updateVariable: (variable: EnvironmentVariable) => void;
@@ -40,6 +41,7 @@ export const useEnvironment = create<IEnvironmentStore>((set) => ({
       environments: state.environments.map((e) => (e.id === env.id ? env : e)),
     })),
   select: (env: Environment) => set({ selected: env }),
+  selectById: (env: string) => set((prev) => ({ selected: prev.environments.find((e) => e.id === env) || null })),
   selected: null,
   addVariable: (variable: EnvironmentVariable) =>
     set((state) => ({

test/http/Echo.GET

@@ -1 +1 @@
-{"name":"Echo","method":"GET","url":"https://jsonplaceholder.typicode.com/todos/1","headers":[],"body":{"binary":null,"formData":[],"json":null,"text":null,"urlencoded":[]},"path":"D:\\work\\yasumu-org\\yasumu\\test\\http\\Echo.GET","response":{"body":"{\n  \"userId\": 1,\n  \"id\": 1,\n  \"title\": \"delectus aut autem\",\n  \"completed\": false\n}","headers":[{"key":"accept-ranges","value":"bytes"},{"key":"access-control-allow-credentials","value":"true"},{"key":"age","value":"19663"},{"key":"alt-svc","value":"h3=\":443\"; ma=86400"},{"key":"cache-control","value":"max-age=43200"},{"key":"cf-cache-status","value":"HIT"},{"key":"cf-ray","value":"8c386cf23a248e51-KTM"},{"key":"connection","value":"keep-alive"},{"key":"content-length","value":"83"},{"key":"content-type","value":"application/json; charset=utf-8"},{"key":"date","value":"Sun, 15 Sep 2024 11:55:03 GMT"},{"key":"etag","value":"W/\"53-hfEnumeNh6YirfjyjaujcOPPT+s\""},{"key":"expires","value":"-1"},{"key":"nel","value":"{\"report_to\":\"heroku-nel\",\"max_age\":3600,\"success_fraction\":0.005,\"failure_fraction\":0.05,\"response_headers\":[\"Via\"]}"},{"key":"pragma","value":"no-cache"},{"key":"report-to","value":"{\"group\":\"heroku-nel\",\"max_age\":3600,\"endpoints\":[{\"url\":\"https://nel.heroku.com/reports?ts=1720661777&sid=e11707d5-02a7-43ef-b45e-2cf4d2036f7d&s=aqJikqbPnLu87fOo%2Bdp9AoiIa%2F1%2F0cX1v1vpLsxaLJA%3D\"}]}"},{"key":"reporting-endpoints","value":"heroku-nel=https://nel.heroku.com/reports?ts=1720661777&sid=e11707d5-02a7-43ef-b45e-2cf4d2036f7d&s=aqJikqbPnLu87fOo%2Bdp9AoiIa%2F1%2F0cX1v1vpLsxaLJA%3D"},{"key":"server","value":"cloudflare"},{"key":"vary","value":"Origin, Accept-Encoding"},{"key":"via","value":"1.1 vegur"},{"key":"x-content-type-options","value":"nosniff"},{"key":"x-powered-by","value":"Express"},{"key":"x-ratelimit-limit","value":"1000"},{"key":"x-ratelimit-remaining","value":"999"},{"key":"x-ratelimit-reset","value":"1720661822"}],"size":83,"status":200,"time":30.299999999813735}}
+{"name":"Echo","method":"GET","url":"https://jsonplaceholder.typicode.com/todos/1","headers":[],"body":{"binary":null,"formData":[],"json":null,"text":null,"urlencoded":[]},"path":"D:\\work\\yasumu-org\\yasumu\\test\\http\\Echo.GET","response":{"body":"{\n  \"userId\": 1,\n  \"id\": 1,\n  \"title\": \"delectus aut autem\",\n  \"completed\": false\n}","headers":[{"key":"accept-ranges","value":"bytes"},{"key":"access-control-allow-credentials","value":"true"},{"key":"age","value":"23577"},{"key":"alt-svc","value":"h3=\":443\"; ma=86400"},{"key":"cache-control","value":"max-age=43200"},{"key":"cf-cache-status","value":"HIT"},{"key":"cf-ray","value":"8c3e4d9e6e248e51-KTM"},{"key":"connection","value":"keep-alive"},{"key":"content-length","value":"83"},{"key":"content-type","value":"application/json; charset=utf-8"},{"key":"date","value":"Mon, 16 Sep 2024 05:02:14 GMT"},{"key":"etag","value":"W/\"53-hfEnumeNh6YirfjyjaujcOPPT+s\""},{"key":"expires","value":"-1"},{"key":"nel","value":"{\"report_to\":\"heroku-nel\",\"max_age\":3600,\"success_fraction\":0.005,\"failure_fraction\":0.05,\"response_headers\":[\"Via\"]}"},{"key":"pragma","value":"no-cache"},{"key":"report-to","value":"{\"group\":\"heroku-nel\",\"max_age\":3600,\"endpoints\":[{\"url\":\"https://nel.heroku.com/reports?ts=1720661777&sid=e11707d5-02a7-43ef-b45e-2cf4d2036f7d&s=aqJikqbPnLu87fOo%2Bdp9AoiIa%2F1%2F0cX1v1vpLsxaLJA%3D\"}]}"},{"key":"reporting-endpoints","value":"heroku-nel=https://nel.heroku.com/reports?ts=1720661777&sid=e11707d5-02a7-43ef-b45e-2cf4d2036f7d&s=aqJikqbPnLu87fOo%2Bdp9AoiIa%2F1%2F0cX1v1vpLsxaLJA%3D"},{"key":"server","value":"cloudflare"},{"key":"vary","value":"Origin, Accept-Encoding"},{"key":"via","value":"1.1 vegur"},{"key":"x-content-type-options","value":"nosniff"},{"key":"x-powered-by","value":"Express"},{"key":"x-ratelimit-limit","value":"1000"},{"key":"x-ratelimit-remaining","value":"999"},{"key":"x-ratelimit-reset","value":"1720661822"}],"size":83,"status":200,"time":33}}