feat: implement script import functionality and validation logic

Author: afnx

src/features/scripts/api/scriptApi.ts

@@ -0,0 +1,28 @@
+/**
+ * Fetches and returns the contents of a script from a given URL.
+ * @param url - The URL of the script to import.
+ * @returns The script code as a string.
+ * @throws If the fetch fails or the URL is invalid.
+ */
+export async function importScript(url: string): Promise<string> {
+  if (!url || typeof url !== "string") {
+    throw new TypeError("A valid URL string must be provided.");
+  }
+
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 10000); // 10s timeout
+
+  try {
+    const response = await fetch(url, { signal: controller.signal });
+    if (!response.ok) {
+      throw new Error(
+        `Failed to import script: ${response.status} ${response.statusText}`
+      );
+    }
+    return await response.text();
+  } catch (error) {
+    throw new Error(`Error importing script: ${(error as Error).message}`);
+  } finally {
+    clearTimeout(timeout);
+  }
+}

src/features/scripts/scriptsSlice.ts

@@ -0,0 +1,165 @@
+import {
+  createAsyncThunk,
+  createSlice,
+  nanoid,
+  PayloadAction,
+} from "@reduxjs/toolkit";
+import { importScript } from "./api/scriptApi";
+import { ScriptExecution, ScriptsState, UserScript } from "./types";
+import { validateScript } from "./utils";
+
+// Async thunk to add a new user script by importing from a URL or direct input
+export const addUserScript = createAsyncThunk<
+  UserScript,
+  {
+    url?: string;
+    code?: string;
+    name: string;
+    description: string;
+    urlPatterns: string[];
+    runAt: "document-start" | "document-ready" | "document-end";
+  },
+  { rejectValue: string }
+>("scripts/createUserScript", async (args, { rejectWithValue }) => {
+  try {
+    let code: string | undefined;
+
+    if (args.code) {
+      code = args.code;
+    } else if (args.url) {
+      code = await importScript(args.url);
+    } else {
+      return rejectWithValue("Either 'url' or 'code' must be provided.");
+    }
+
+    // Validate the script code before creating the script
+    const validation = validateScript(code);
+    if (!validation.valid) {
+      return rejectWithValue(validation.error ?? "Unknown validation error");
+    }
+
+    const now = new Date().toISOString();
+    return {
+      id: nanoid(),
+      name: args.name,
+      description: args.description,
+      runAt: args.runAt,
+      code,
+      urlPatterns: args.urlPatterns,
+      enabled: true,
+      createdAt: now,
+      updatedAt: now,
+    };
+  } catch (error) {
+    return rejectWithValue((error as Error).message);
+  }
+});
+
+const initialState: ScriptsState = {
+  userScripts: {},
+  executions: {},
+  isLoading: false,
+  error: null,
+};
+
+const scriptsSlice = createSlice({
+  name: "scripts",
+  initialState,
+  reducers: {
+    updateUserScript: {
+      reducer: (
+        state,
+        action: PayloadAction<{
+          id: string;
+          updates: Partial<UserScript>;
+          updatedAt: string;
+        }>
+      ) => {
+        const { id, updates, updatedAt } = action.payload;
+        const script = state.userScripts[id];
+        if (script) {
+          Object.assign(script, { ...updates, updatedAt });
+        }
+      },
+      prepare: (id: string, updates: Partial<UserScript>) => {
+        return {
+          payload: {
+            id,
+            updates,
+            updatedAt: new Date().toISOString(),
+          },
+        };
+      },
+    },
+
+    deleteUserScript: (state, action: PayloadAction<string>) => {
+      const scriptId = action.payload;
+      // Remove the script
+      delete state.userScripts[scriptId];
+      // Also remove related execution logs
+      Object.entries(state.executions).forEach(([id, execution]) => {
+        if (execution.scriptId === scriptId) {
+          delete state.executions[id];
+        }
+      });
+    },
+
+    toggleUserScript: {
+      reducer: (
+        state,
+        action: PayloadAction<{ id: string; updatedAt: string }>
+      ) => {
+        const script = state.userScripts[action.payload.id];
+        if (script) {
+          script.enabled = !script.enabled;
+          script.updatedAt = action.payload.updatedAt;
+        }
+      },
+      prepare: (id: string) => ({
+        payload: {
+          id,
+          updatedAt: new Date().toISOString(),
+        },
+      }),
+    },
+
+    logScriptExecution: (state, action: PayloadAction<ScriptExecution>) => {
+      state.executions[action.payload.id] = action.payload;
+    },
+
+    clearExecutionLogs: (state) => {
+      state.executions = {};
+    },
+
+    setError: (state, action: PayloadAction<string | null>) => {
+      state.error = action.payload;
+    },
+  },
+
+  extraReducers: (builder) => {
+    builder
+      .addCase(addUserScript.pending, (state) => {
+        state.isLoading = true;
+        state.error = null;
+      })
+      .addCase(addUserScript.fulfilled, (state, action) => {
+        state.isLoading = false;
+        state.userScripts[action.payload.id] = action.payload;
+      })
+      .addCase(addUserScript.rejected, (state, action) => {
+        state.isLoading = false;
+        state.error = action.error.message || "Script import failed!";
+      });
+  },
+});
+
+export const {
+  updateUserScript,
+  deleteUserScript,
+  toggleUserScript,
+  logScriptExecution,
+  clearExecutionLogs,
+  setError,
+} = scriptsSlice.actions;
+
+export default scriptsSlice.reducer;

src/features/scripts/types.ts

@@ -0,0 +1,28 @@
+export interface UserScript {
+  id: string;
+  name: string;
+  description?: string;
+  code: string;
+  urlPatterns: string[];
+  enabled: boolean;
+  runAt: "document-start" | "document-ready" | "document-end";
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ScriptExecution {
+  id: string;
+  scriptId: string;
+  url: string;
+  timestamp: string;
+  success: boolean;
+  error?: string;
+  executionTime?: number;
+}
+
+export interface ScriptsState {
+  userScripts: Record<string, UserScript>;
+  executions: Record<string, ScriptExecution>;
+  isLoading: boolean;
+  error: string | null;
+}

src/features/scripts/utils/index.ts

@@ -0,0 +1,21 @@
+export interface ScriptValidationResult {
+  valid: boolean;
+  error: string | null;
+}
+
+/**
+ * Validates the syntax of a given script code string.
+ *
+ * @param code - The script code to validate.
+ * @returns An object containing the validation result:
+ * - `valid`: `true` if the code is syntactically correct, `false` otherwise.
+ * - `error`: The error message if validation fails, or `null` if validation succeeds.
+ */
+export function validateScript(code: string): ScriptValidationResult {
+  try {
+    new Function(code); // Basic syntax check
+    return { valid: true, error: null };
+  } catch (error) {
+    return { valid: false, error: (error as Error).message };
+  }
+}