Merge pull request #4 from Onboardbase/feat/detectors-implementation

feat: updates

README.md

@@ -1,7 +1,6 @@
 # Securelog React Server Component
 
-SecureLog RSC is a React component designed to detect and mask sensitive information (secrets) in your application. It leverages a worker-based approach to scan text nodes and component props for patterns already supported by the [Securelog Scan CLI](https://github.com/Onboardbase/securelog-scan). It also allows for custom secret patterns and provides the option to mask detected secrets both in the DOM and in the results. 
-
+SecureLog RSC is a React component designed to detect and mask sensitive information (secrets) in your application. It leverages a worker-based approach to scan text nodes and component props for patterns already supported by the [Securelog Scan CLI](https://github.com/Onboardbase/securelog-scan). It also allows for custom secret patterns and provides the option to mask detected secrets both in the DOM and in the results.
 
 Need Secret scanning in other places?
 - [Securelog for your clean logs](https://github.com/Onboardbase/securelog)
@@ -16,6 +15,14 @@ Need Secret scanning in other places?
 - **Depth Limiting**: Controls how deep the secret inspector scans into the component tree.
 - **Secret Masking**: Option to mask secrets to avoid displaying sensitive secret on the DOM
 
+## Demo
+
+Check out the [live demo](#) to see the `SecureLog` react component in action.
+
+## Performance Considerations
+
+While the SecureLog React Component is optimized for runtime scanning and masking of secrets, using it with very large or deeply nested component structures may lead to a slight increase in rendering times. It is recommended to use this component judiciously in performance-critical parts of your application to minimize any potential impact on the user experience.
+
 ## Installation
 
 ```bash

package.json

@@ -1,6 +1,6 @@
 {
   "name": "securelog-rsc",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Secure Log React Server Component for Scanning secrets.",
   "main": "dist/secure-log-container.umd.js",
   "module": "dist/secure-log-container.es.js",

src/components/SecureLogContainer.tsx

@@ -5,6 +5,7 @@ import React, {
   useMemo,
   useEffect,
   useRef,
+  useState,
 } from "react";
 import { useWorker } from "../hooks/useWorker";
 import {
@@ -16,12 +17,6 @@ import { secureLogDetectors } from "securelog-detectors";
 
 const defaultSecretPatterns: SecretPattern[] = secureLogDetectors;
 
-/**
- *
- * mask secret
- *
- * gotten from https://github.com/Onboardbase/securelog-scan/blob/main/src/util.ts#L70
- */
 const maskString = (str: string, visibleChars: number = 5): string => {
   if (typeof str !== "string" || str.length === 0) {
     throw new Error("Invalid input: Input must be a non-empty string.");
@@ -32,7 +27,7 @@ const maskString = (str: string, visibleChars: number = 5): string => {
     );
   }
   if (visibleChars >= str.length) {
-    return str; // Return the full string if visibleChars is larger than the string length
+    return str;
   }
 
   const maskedPart = "*".repeat(
@@ -50,7 +45,7 @@ const SecureLogContainer: FC<SecureLogContainerProps> = ({
   onSecretFound = (records: SecretInspectorResult[]) => {},
   mask = false,
 }) => {
-  const containerRef = useRef<HTMLDivElement>(null); // Create a ref for the container
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const secretPatterns = useMemo(
     () => [...defaultSecretPatterns, ...customPatterns],
@@ -78,7 +73,6 @@ const SecureLogContainer: FC<SecureLogContainerProps> = ({
           const originalSecret = secret.rawValue;
           let maskedSecret = secret.rawValue;
           if (mask) {
-            // Mask the secret and update the DOM if available
             maskedSecret = maskString(secret.rawValue);
             secret.rawValue = maskedSecret;
 
@@ -148,6 +142,9 @@ const SecureLogContainer: FC<SecureLogContainerProps> = ({
                       originalSecret,
                       maskedSecret
                     );
+
+                    // disable props
+                    // props[propKey] = undefined;
                   }
                 }
                 foundSecrets.push(secret);
@@ -201,7 +198,6 @@ const SecureLogContainer: FC<SecureLogContainerProps> = ({
     [inspectNode]
   );
 
-  // Collect secrets and trigger callback once for all secrets in the container
   useEffect(() => {
     const containerNode = containerRef.current;
     const foundSecrets: SecretInspectorResult[] = [];
@@ -215,8 +211,10 @@ const SecureLogContainer: FC<SecureLogContainerProps> = ({
       }
     };
 
-    checkForSecrets();
-  }, [children, inspectChildren, onSecretFound]);
+    if (children) {
+      checkForSecrets();
+    }
+  }, []);
 
   return (
     <div id="secure-log-container" ref={containerRef}>

tsconfig.json

@@ -4,7 +4,7 @@
     "module": "ES2020",
     "jsx": "react", // Enable React JSX
     "declaration": true, // Generate type declaration files
-    "declarationDir": "dist", // Output type declaration files in dist
+    "declarationDir": "./dist",
     "outDir": "dist", // Output compiled files in dist
     "moduleResolution": "node", // Use node module resolution
     "esModuleInterop": true, // Enable interoperability between CommonJS and ES modules