twd-js 0.5.0 → 0.5.1

package/README.md

@@ -72,10 +72,11 @@ pnpm add twd-js
     if (import.meta.env.DEV) {
       // Use Vite's glob import to find all test files
       const testModules = import.meta.glob("./**/*.twd.test.ts");
-      const { initViteLoadTests, twd } = await import('twd-js');
-      // Initialize the TWD sidebar and load tests
-      initViteLoadTests(testModules, { open: true, position: 'left' });
-      // Optionally initialize request mocking
+      const { initTests, twd, TWDSidebar } = await import('twd-js');
+      const { createRoot } = await import('react-dom/client');
+      // You need to pass the test modules, the sidebar component, and createRoot function
+      initTests(testModules, <TWDSidebar open={true} position="left" />, createRoot);
+      // if you want to use mock requests, you can initialize it here
       twd.initRequestMocking()
         .then(() => {
           console.log("Request mocking initialized");
@@ -88,7 +89,6 @@ pnpm add twd-js
    createRoot(document.getElementById("root")!).render(
      <StrictMode>
        <App />
-       <TWDSidebar open={false} />
      </StrictMode>
    );
    ```
@@ -140,9 +140,10 @@ pnpm add twd-js
      if (import.meta.env.DEV) {
        // Use Vite's glob import to find all test files
        const testModules = import.meta.glob("./**/*.twd.test.ts");
-       const { initViteLoadTests, twd } = await import('twd-js');
-       // Initialize the TWD sidebar and load tests
-       initViteLoadTests(testModules, { open: true, position: 'left' });
+       const { initTests, twd, TWDSidebar } = await import('twd-js');
+       const { createRoot } = await import('react-dom/client');
+       // You need to pass the test modules, the sidebar component, and createRoot function
+       initTests(testModules, <TWDSidebar open={true} position="left" />, createRoot);
        // Optionally initialize request mocking
        twd.initRequestMocking()
          .then(() => {
@@ -169,8 +170,9 @@ pnpm add twd-js
          './app.twd.test.ts': () => import('./app.twd.test'),
          './another-test-file.twd.test.ts': () => import('./another-test-file.twd.test'),
        };
-       const { initViteLoadTests } = await import('twd-js');
-       initViteLoadTests(testModules);
+       const { initTests, TWDSidebar } = await import('twd-js');
+       const { createRoot } = await import('react-dom/client');
+       initTests(testModules, <TWDSidebar open={true} position="left" />, createRoot);
      }
      ```
 

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './twd';
-export { initViteLoadTests } from './initializers/viteLoadTests';
+export { TWDSidebar } from './ui/TWDSidebar';
+export { initTests } from './initializers/initTests';
 export { expect } from 'chai';
 export { userEvent } from './proxies/userEvent';

package/dist/initializers/initSidebar.d.ts

@@ -1,6 +1,8 @@
 interface Options {
-    open: boolean;
-    position?: 'left' | 'right';
+    Component: React.ReactNode;
+    createRoot: (el: HTMLElement) => {
+        render: (el: React.ReactNode) => void;
+    };
 }
 /**
  * Initialize the TWD sidebar.
@@ -10,8 +12,11 @@ interface Options {
  * import { initSidebar } from 'twd-js';
  *
  * // Initialize the sidebar (e.g., in your main app file)
- * initSidebar({ open: false, position: 'left' });
+ * initSidebar({
+ *   Component: <TWDSidebar open={true} position="left" />,
+ *   createRoot,
+ * });
  * ```
  */
-export declare const initSidebar: (options: Options) => Promise<void>;
+export declare const initSidebar: (options: Options) => void;
 export {};

package/dist/initializers/{viteLoadTests.d.ts → initTests.d.ts}

@@ -1,7 +1,3 @@
-interface Options {
-    open: boolean;
-    position?: 'left' | 'right';
-}
 /**
  * A record of test module paths to their loader functions.
  * Each function returns a promise that resolves when the module is loaded.
@@ -18,15 +14,19 @@ type TestModule = Record<string, () => Promise<unknown>>;
 /**
  * Initialize Vite test loading.
  * @param testModules - The test modules to load.
- * @param options - Options for initializing the test loader.
+ * @param component - The React component to render the sidebar.
+ * @param createRoot - Function to create a React root.
  * @example
  * ```ts
  * if (import.meta.env.DEV) {
  *   const testModules = import.meta.glob("./example.twd.test.ts");
- *   const { initViteLoadTests } = await import('twd-js');
- *   await initViteLoadTests(testModules, { open: false, position: 'left' });
+ *   const { initTests, TWDSidebar } = await import('twd-js');
+ *   const { createRoot } = await import('react-dom/client');
+ *   await initTests(testModules, <TWDSidebar open={true} position="left" />, createRoot);
  * }
  * ```
  */
-export declare const initViteLoadTests: (testModules: TestModule, options: Options) => Promise<void>;
+export declare const initTests: (testModules: TestModule, Component: React.ReactNode, createRoot: (el: HTMLElement) => {
+    render: (el: React.ReactNode) => void;
+}) => Promise<void>;
 export {};