@intrig/plugin-react 0.0.2-4 → 0.0.2-6

package/dist/index.cjs

@@ -6,6 +6,7 @@ var pluginSdk = require('@intrig/plugin-sdk');
 var path = require('path');
 var fsx = require('fs-extra');
 var mimeType = require('mime-types');
+var chalk = require('chalk');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -1417,24 +1418,6 @@ function reactSwcrcTemplate() {
   `;
 }
 
-function intrigMiddlewareTemplate() {
-    const ts = pluginSdk.typescript(path__namespace.resolve('src', 'intrig-middleware.ts'));
-    return ts`
-import axios from 'axios';
-import { requestInterceptor } from 'intrig-hook';
-
-export function getAxiosInstance(key: string) {
-  let axiosInstance = axios.create({
-    baseURL: process.env[${"`${key.toUpperCase()}_API_URL`"}],
-  });
-
-  axiosInstance.interceptors.request.use(requestInterceptor);
-
-  return axiosInstance;
-}
-`;
-}
-
 function flushSyncUtilTemplate(ctx) {
     var _packageJson_dependencies, _packageJson_devDependencies, _packageJson_peerDependencies;
     const ts = pluginSdk.typescript(path__namespace.resolve('src', 'utils', 'flush-sync.ts'));
@@ -1555,6 +1538,7 @@ function providerHooksTemplate() {
   useMemo,
   useState,
   useRef,
+  useEffect,
 } from 'react';
 import {
   ErrorState,
@@ -1598,6 +1582,16 @@ export function useNetworkState<T>({
   const context = useContext(Context);
 
   const [abortController, setAbortController] = useState<AbortController>();
+  
+  const contextRef = useRef(context);
+  const schemaRef = useRef(schema);
+  const errorSchemaRef = useRef(errorSchema);
+  
+  useEffect(() => {
+    contextRef.current = context;
+    schemaRef.current = schema;
+    errorSchemaRef.current = errorSchema;
+  });
 
   const networkState = useMemo(() => {
     logger.info(${"`Updating status ${key} ${operation} ${source}`"});
@@ -1606,7 +1600,7 @@ export function useNetworkState<T>({
       (context.state?.[${"`${source}:${operation}:${key}`"}] as NetworkState<T>) ??
       init()
     );
-  }, [JSON.stringify(context.state?.[${"`${source}:${operation}:${key}`"}])]);
+  }, [context.state, key, operation, source]);
 
   const dispatch = useCallback(
     (state: NetworkState<T>) => {
@@ -1654,30 +1648,30 @@ export function useNetworkState<T>({
         signal: abortController.signal,
       };
 
-      await context.execute(
+      await contextRef.current.execute(
         requestConfig,
         dispatch,
-        schema,
-        errorSchema as any,
+        schemaRef.current,
+        errorSchemaRef.current as any,
       );
     },
-    [networkState, context.dispatch],
+    [dispatch, key, operation, source],
   );
 
   const deboundedExecute = useMemo(
-    () => debounce(execute, debounceDelay ?? 0),
-    [execute],
+    () => debounce(execute, debounceDelay),
+    [execute, debounceDelay],
   );
 
   const clear = useCallback(() => {
     logger.info(${"`Clearing request ${key} ${operation} ${source}`"});
     dispatch(init());
-    setAbortController((abortController) => {
+    setAbortController((prev) => {
       logger.info(${"`Aborting request ${key} ${operation} ${source}`"});
-      abortController?.abort();
+      prev?.abort();
       return undefined;
     });
-  }, [dispatch, abortController]);
+  }, [dispatch, key, operation, source]);
 
   return [networkState, deboundedExecute, clear, dispatch];
 }
@@ -1694,6 +1688,14 @@ export function useTransitionCall<T>({
 }): [(request: RequestType) => Promise<T>, () => void] {
   const ctx = useContext(Context);
   const controller = useRef<AbortController | undefined>(undefined);
+  
+  const schemaRef = useRef(schema);
+  const errorSchemaRef = useRef(errorSchema);
+  
+  useEffect(() => {
+    schemaRef.current = schema;
+    errorSchemaRef.current = errorSchema;
+  });
 
   const call = useCallback(
     async (request: RequestType) => {
@@ -1711,12 +1713,12 @@ export function useTransitionCall<T>({
               reject(state.error);
             }
           },
-          schema,
-          errorSchema,
+          schemaRef.current,
+          errorSchemaRef.current,
         );
       });
     },
-    [ctx, schema, errorSchema],
+    [ctx],
   );
 
   const abort = useCallback(() => {
@@ -3193,7 +3195,6 @@ async function generateCode(ctx) {
     await ctx.dump(reactExtraTemplate());
     await ctx.dump(reactMediaTypeUtilsTemplate());
     await ctx.dump(typeUtilsTemplate());
-    await ctx.dump(intrigMiddlewareTemplate());
     await ctx.dump(flushSyncUtilTemplate(ctx));
     // Provider modular files (placed under src)
     await ctx.dump(providerMainTemplate(ctx.sources));
@@ -3244,12 +3245,12 @@ Use this TypeScript type anywhere you need static typing for this object shape i
 
 ## Import
 ${'```ts'}
-${importContent}
+${importContent.content}
 ${'```'}
 
 ## Definition
 ${'```ts'}
-${codeContent}
+${codeContent.content}
 ${'```'}
   `;
 }
@@ -3271,12 +3272,12 @@ Use this JSON Schema with tools that consume JSON Schema: UI form builders (e.g.
 
 ## Import
 ${'```ts'}
-${importContent}
+${importContent.content}
 ${'```'}
 
 ## Definition
 ${'```ts'}
-${codeContent}
+${codeContent.content}
 ${'```'}
   `;
 }
@@ -3298,12 +3299,12 @@ Use this Zod schema for runtime validation and parsing: form validation, client/
 
 ## Import
 ${'```ts'}
-${importContent}
+${importContent.content}
 ${'```'}
 
 ## Definition
 ${'```ts'}
-${codeContent}
+${codeContent.content}
 ${'```'}
   `;
 }
@@ -4310,6 +4311,19 @@ async function getEndpointDocumentation(result) {
     return tabs;
 }
 
+async function initPlugin(ctx) {
+    // React plugin doesn't need any specific initialization tasks currently
+    // But we return a postInit function to show instructions to the user
+    return {
+        postInit: ()=>{
+            console.log(chalk.blue('\n📋 Next Steps:'));
+            console.log(chalk.white('To complete your React setup, please refer to the post-initialization instructions at:'));
+            console.log(chalk.cyan('https://intrig.dev/docs/react/initialization#3-post-initialization-steps'));
+            console.log(chalk.gray('\nThis guide will show you how to add IntrigProvider to your React application.\n'));
+        }
+    };
+}
+
 function createPlugin() {
     return {
         meta () {
@@ -4322,7 +4336,8 @@ function createPlugin() {
         },
         generate: generateCode,
         getSchemaDocumentation,
-        getEndpointDocumentation
+        getEndpointDocumentation,
+        init: initPlugin
     };
 }
 

package/dist/index.js

@@ -3,6 +3,7 @@ import * as path from 'path';
 import path__default from 'path';
 import * as fsx from 'fs-extra';
 import * as mimeType from 'mime-types';
+import chalk from 'chalk';
 
 class InternalGeneratorContext {
     getCounter(sourceId) {
@@ -1393,24 +1394,6 @@ function reactSwcrcTemplate() {
   `;
 }
 
-function intrigMiddlewareTemplate() {
-    const ts = typescript(path.resolve('src', 'intrig-middleware.ts'));
-    return ts`
-import axios from 'axios';
-import { requestInterceptor } from 'intrig-hook';
-
-export function getAxiosInstance(key: string) {
-  let axiosInstance = axios.create({
-    baseURL: process.env[${"`${key.toUpperCase()}_API_URL`"}],
-  });
-
-  axiosInstance.interceptors.request.use(requestInterceptor);
-
-  return axiosInstance;
-}
-`;
-}
-
 function flushSyncUtilTemplate(ctx) {
     var _packageJson_dependencies, _packageJson_devDependencies, _packageJson_peerDependencies;
     const ts = typescript(path.resolve('src', 'utils', 'flush-sync.ts'));
@@ -1531,6 +1514,7 @@ function providerHooksTemplate() {
   useMemo,
   useState,
   useRef,
+  useEffect,
 } from 'react';
 import {
   ErrorState,
@@ -1574,6 +1558,16 @@ export function useNetworkState<T>({
   const context = useContext(Context);
 
   const [abortController, setAbortController] = useState<AbortController>();
+  
+  const contextRef = useRef(context);
+  const schemaRef = useRef(schema);
+  const errorSchemaRef = useRef(errorSchema);
+  
+  useEffect(() => {
+    contextRef.current = context;
+    schemaRef.current = schema;
+    errorSchemaRef.current = errorSchema;
+  });
 
   const networkState = useMemo(() => {
     logger.info(${"`Updating status ${key} ${operation} ${source}`"});
@@ -1582,7 +1576,7 @@ export function useNetworkState<T>({
       (context.state?.[${"`${source}:${operation}:${key}`"}] as NetworkState<T>) ??
       init()
     );
-  }, [JSON.stringify(context.state?.[${"`${source}:${operation}:${key}`"}])]);
+  }, [context.state, key, operation, source]);
 
   const dispatch = useCallback(
     (state: NetworkState<T>) => {
@@ -1630,30 +1624,30 @@ export function useNetworkState<T>({
         signal: abortController.signal,
       };
 
-      await context.execute(
+      await contextRef.current.execute(
         requestConfig,
         dispatch,
-        schema,
-        errorSchema as any,
+        schemaRef.current,
+        errorSchemaRef.current as any,
       );
     },
-    [networkState, context.dispatch],
+    [dispatch, key, operation, source],
   );
 
   const deboundedExecute = useMemo(
-    () => debounce(execute, debounceDelay ?? 0),
-    [execute],
+    () => debounce(execute, debounceDelay),
+    [execute, debounceDelay],
   );
 
   const clear = useCallback(() => {
     logger.info(${"`Clearing request ${key} ${operation} ${source}`"});
     dispatch(init());
-    setAbortController((abortController) => {
+    setAbortController((prev) => {
       logger.info(${"`Aborting request ${key} ${operation} ${source}`"});
-      abortController?.abort();
+      prev?.abort();
       return undefined;
     });
-  }, [dispatch, abortController]);
+  }, [dispatch, key, operation, source]);
 
   return [networkState, deboundedExecute, clear, dispatch];
 }
@@ -1670,6 +1664,14 @@ export function useTransitionCall<T>({
 }): [(request: RequestType) => Promise<T>, () => void] {
   const ctx = useContext(Context);
   const controller = useRef<AbortController | undefined>(undefined);
+  
+  const schemaRef = useRef(schema);
+  const errorSchemaRef = useRef(errorSchema);
+  
+  useEffect(() => {
+    schemaRef.current = schema;
+    errorSchemaRef.current = errorSchema;
+  });
 
   const call = useCallback(
     async (request: RequestType) => {
@@ -1687,12 +1689,12 @@ export function useTransitionCall<T>({
               reject(state.error);
             }
           },
-          schema,
-          errorSchema,
+          schemaRef.current,
+          errorSchemaRef.current,
         );
       });
     },
-    [ctx, schema, errorSchema],
+    [ctx],
   );
 
   const abort = useCallback(() => {
@@ -3169,7 +3171,6 @@ async function generateCode(ctx) {
     await ctx.dump(reactExtraTemplate());
     await ctx.dump(reactMediaTypeUtilsTemplate());
     await ctx.dump(typeUtilsTemplate());
-    await ctx.dump(intrigMiddlewareTemplate());
     await ctx.dump(flushSyncUtilTemplate(ctx));
     // Provider modular files (placed under src)
     await ctx.dump(providerMainTemplate(ctx.sources));
@@ -3220,12 +3221,12 @@ Use this TypeScript type anywhere you need static typing for this object shape i
 
 ## Import
 ${'```ts'}
-${importContent}
+${importContent.content}
 ${'```'}
 
 ## Definition
 ${'```ts'}
-${codeContent}
+${codeContent.content}
 ${'```'}
   `;
 }
@@ -3247,12 +3248,12 @@ Use this JSON Schema with tools that consume JSON Schema: UI form builders (e.g.
 
 ## Import
 ${'```ts'}
-${importContent}
+${importContent.content}
 ${'```'}
 
 ## Definition
 ${'```ts'}
-${codeContent}
+${codeContent.content}
 ${'```'}
   `;
 }
@@ -3274,12 +3275,12 @@ Use this Zod schema for runtime validation and parsing: form validation, client/
 
 ## Import
 ${'```ts'}
-${importContent}
+${importContent.content}
 ${'```'}
 
 ## Definition
 ${'```ts'}
-${codeContent}
+${codeContent.content}
 ${'```'}
   `;
 }
@@ -4286,6 +4287,19 @@ async function getEndpointDocumentation(result) {
     return tabs;
 }
 
+async function initPlugin(ctx) {
+    // React plugin doesn't need any specific initialization tasks currently
+    // But we return a postInit function to show instructions to the user
+    return {
+        postInit: ()=>{
+            console.log(chalk.blue('\n📋 Next Steps:'));
+            console.log(chalk.white('To complete your React setup, please refer to the post-initialization instructions at:'));
+            console.log(chalk.cyan('https://intrig.dev/docs/react/initialization#3-post-initialization-steps'));
+            console.log(chalk.gray('\nThis guide will show you how to add IntrigProvider to your React application.\n'));
+        }
+    };
+}
+
 function createPlugin() {
     return {
         meta () {
@@ -4298,7 +4312,8 @@ function createPlugin() {
         },
         generate: generateCode,
         getSchemaDocumentation,
-        getEndpointDocumentation
+        getEndpointDocumentation,
+        init: initPlugin
     };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intrig/plugin-react",
-  "version": "0.0.2-4",
+  "version": "0.0.2-6",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -15,7 +15,7 @@
     }
   },
   "dependencies": {
-    "@intrig/plugin-sdk": "^0.0.2-4",
+    "@intrig/plugin-sdk": "^0.0.2-6",
     "@swc/helpers": "~0.5.11"
   },
   "files": [