cognivator · May 22, 2025 18:10
diff --git a/Previewjs JetBrains Plugin Configuration For NEXTjs.md b/Previewjs JetBrains Plugin Configuration For NEXTjs.md
diff --git a/root_DEVTOOLS.md b/root_DEVTOOLS.md
diff --git a/root_previewjs.config.js b/root_previewjs.config.js
 import { defineConfig } from '@previewjs/config';
 import path from 'path';
 import svgr from 'vite-plugin-svgr';

 export default defineConfig({
  // Configure public assets directory
  publicDir: 'public',

  // Set up a wrapper component for Next.js compatibility
  wrapper: {
    path: '__previewjs__/Wrapper.tsx',
    componentName: 'Wrapper',
  },

  // Vite configuration for module replacement and SVG handling
  vite: {
    // Add plugins for SVG React component support
    plugins: [
      // SVG plugin to transform SVGs into React components
      svgr({
        svgrOptions: {
          // SVGR options: https://react-svgr.com/docs/options/
          icon: true, // Set default size to 1em
          dimensions: false, // Remove width/height from SVG
        },
        include: '**/*.svg', // Process all SVG files
      }),
    ],

    resolve: {
      alias: {
        // Replace Next.js modules with mock versions
        // This handles the module resolution BEFORE any non-configurable 
        // properties are created, avoiding runtime errors
        'next/image': path.resolve(__dirname, './__previewjs__/mocks/NextImageMock.jsx'),
        'next/router': path.resolve(__dirname, './__previewjs__/mocks/NextRouterMock.jsx'),
        'next/link': path.resolve(__dirname, './__previewjs__/mocks/NextLinkMock.jsx'),
      },
    },
    
    // Optional: Define environment variables for Preview.js
    define: {
      __PREVIEW_MODE__: true,
    },

    // Optional: Configure dev server options
    server: {
      // Customize port if needed
      port: 3333,
    },
  },
 });
diff --git a/sub__previewjs__mocks_NextImageMock.jsx b/sub__previewjs__mocks_NextImageMock.jsx
 import React from 'react';

 /**
 * Mock for Next.js Image component
 * Converts Next.js Image props to standard img element
 */
 const NextImageMock = (props) => {
  const { 
    src, 
    alt, 
    width, 
    height, 
    className, 
    style,
    loading,
    priority,
    quality,
    sizes,
    fill,
    unoptimized,
    placeholder,
    blurDataURL,
    loader,
    ...rest 
  } = props;

  // Convert Next.js specific props to standard img props
  const imgProps = {
    src,
    alt: alt || '',
    className,
    style,
    ...rest
  };

  // Add dimensions if provided and not using fill
  if (!fill) {
    if (width) imgProps.width = width;
    if (height) imgProps.height = height;
  }

  // Handle fill prop by adding appropriate styles
  if (fill) {
    imgProps.style = {
      ...imgProps.style,
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      objectFit: 'cover'
    };
  }

  return <img {...imgProps} />;
 };

 export default NextImageMock;
diff --git a/sub__previewjs__mocks_NextLinkMock.jsx b/sub__previewjs__mocks_NextLinkMock.jsx
 import React from 'react';

 /**
 * Mock for Next.js Link component
 * Converts Next.js Link to a standard anchor tag for Preview.js
 */
 const NextLinkMock = ({ 
  href, 
  as, 
  replace, 
  scroll, 
  shallow, 
  passHref, 
  prefetch, 
  locale,
  children, 
  className,
  style,
  onClick,
  ...rest 
 }) => {
  // Handle click events
  const handleClick = (e) => {
    e.preventDefault();
    console.log('Link clicked:', { href, as });
    
    // Call original onClick if provided
    if (onClick) {
      onClick(e);
    }
  };

  // If children is a function, call it with the link props
  if (typeof children === 'function') {
    return children({
      href: typeof href === 'object' ? href.pathname || '/' : href,
      className,
      style,
      onClick: handleClick,
      ...rest
    });
  }

  // If children is a single child element, clone it with link props
  if (React.isValidElement(children)) {
    return React.cloneElement(children, {
      href: typeof href === 'object' ? href.pathname || '/' : href,
      onClick: handleClick,
      className: children.props.className || className,
      style: { ...style, ...children.props.style },
      ...rest
    });
  }

  // Default: render as anchor tag
  return (
    <a
      href={typeof href === 'object' ? href.pathname || '/' : href}
      className={className}
      style={style}
      onClick={handleClick}
      {...rest}
    >
      {children}
    </a>
  );
 };

 export default NextLinkMock;
diff --git a/sub__previewjs__mocks_NextRouterMock.jsx b/sub__previewjs__mocks_NextRouterMock.jsx
 import React from 'react';

 /**
 * Mock for Next.js Router
 * Provides all router functionality needed for Preview.js
 */

 // Mock router object with all Next.js router properties
 const mockRouter = {
  route: '/',
  pathname: '/',
  query: {},
  asPath: '/',
  basePath: '',
  locale: undefined,
  locales: undefined,
  defaultLocale: undefined,
  isLocaleDomain: false,
  isReady: true,
  isFallback: false,
  isPreview: false,
  // Navigation methods
  push: async (url, as, options) => {
    console.log('Router.push called:', { url, as, options });
    return true;
  },
  replace: async (url, as, options) => {
    console.log('Router.replace called:', { url, as, options });
    return true;
  },
  reload: () => {
    console.log('Router.reload called');
  },
  back: () => {
    console.log('Router.back called');
  },
  prefetch: async (url, as, options) => {
    console.log('Router.prefetch called:', { url, as, options });
  },
  beforePopState: (callback) => {
    console.log('Router.beforePopState called:', callback);
  },
  // Events system
  events: {
    on: (event, handler) => {
      console.log('Router.events.on called:', { event, handler });
    },
    off: (event, handler) => {
      console.log('Router.events.off called:', { event, handler });
    },
    emit: (event, ...args) => {
      console.log('Router.events.emit called:', { event, args });
    },
  },
 };

 // Hook that returns the mock router
 export const useRouter = () => {
  return mockRouter;
 };

 // HOC that passes router as prop
 export const withRouter = (Component) => {
  const WrappedComponent = (props) => {
    return <Component {...props} router={mockRouter} />;
  };
  WrappedComponent.displayName = `withRouter(${Component.displayName || Component.name})`;
  return WrappedComponent;
 };

 // Default export for direct router access
 export default mockRouter;
diff --git a/sub__previewjs__README.md b/sub__previewjs__README.md
diff --git a/sub__previewjs__SVG_FIX.md b/sub__previewjs__SVG_FIX.md
diff --git a/sub__previewjs__Wrapper.tsx b/sub__previewjs__Wrapper.tsx
 // __previewjs__/Wrapper.tsx
 import React from 'react';
 import '@/app/globals.css'; // Import global styles

 // Clean wrapper component - NO module mocking here!
 // All module mocking is handled by preview.config.js aliases
 interface WrapperProps {
  children: React.ReactNode;
 }

 export function Wrapper({ children }: WrapperProps) {
  return (
    <div className="preview-wrapper">
      {/* Add any context providers here if needed */}
      {/* Example providers (uncomment as needed):
      <ThemeProvider theme={defaultTheme}>
        <AuthProvider>
          <QueryClientProvider client={queryClient}>
            {children}
          </QueryClientProvider>
        </AuthProvider>
      </ThemeProvider>
      */}
      {children}
    </div>
  );
 }

 export default Wrapper;
	import { defineConfig } from '@previewjs/config';
	import path from 'path';
	import svgr from 'vite-plugin-svgr';

	export default defineConfig({
	// Configure public assets directory
	publicDir: 'public',

	// Set up a wrapper component for Next.js compatibility
	wrapper: {
	path: '__previewjs__/Wrapper.tsx',
	componentName: 'Wrapper',
	},

	// Vite configuration for module replacement and SVG handling
	vite: {
	// Add plugins for SVG React component support
	plugins: [
	// SVG plugin to transform SVGs into React components
	svgr({
	svgrOptions: {
	// SVGR options: https://react-svgr.com/docs/options/
	icon: true, // Set default size to 1em
	dimensions: false, // Remove width/height from SVG
	},
	include: '*/.svg', // Process all SVG files
	}),
	],

	resolve: {
	alias: {
	// Replace Next.js modules with mock versions
	// This handles the module resolution BEFORE any non-configurable
	// properties are created, avoiding runtime errors
	'next/image': path.resolve(__dirname, './__previewjs__/mocks/NextImageMock.jsx'),
	'next/router': path.resolve(__dirname, './__previewjs__/mocks/NextRouterMock.jsx'),
	'next/link': path.resolve(__dirname, './__previewjs__/mocks/NextLinkMock.jsx'),
	},
	},

	// Optional: Define environment variables for Preview.js
	define: {
	__PREVIEW_MODE__: true,
	},

	// Optional: Configure dev server options
	server: {
	// Customize port if needed
	port: 3333,
	},
	},
	});
	import React from 'react';

	/**
	* Mock for Next.js Image component
	* Converts Next.js Image props to standard img element
	*/
	const NextImageMock = (props) => {
	const {
	src,
	alt,
	width,
	height,
	className,
	style,
	loading,
	priority,
	quality,
	sizes,
	fill,
	unoptimized,
	placeholder,
	blurDataURL,
	loader,
	...rest
	} = props;

	// Convert Next.js specific props to standard img props
	const imgProps = {
	src,
	alt: alt \|\| '',
	className,
	style,
	...rest
	};

	// Add dimensions if provided and not using fill
	if (!fill) {
	if (width) imgProps.width = width;
	if (height) imgProps.height = height;
	}

	// Handle fill prop by adding appropriate styles
	if (fill) {
	imgProps.style = {
	...imgProps.style,
	position: 'absolute',
	top: 0,
	left: 0,
	width: '100%',
	height: '100%',
	objectFit: 'cover'
	};
	}

	return <img {...imgProps} />;
	};

	export default NextImageMock;
	import React from 'react';

	/**
	* Mock for Next.js Link component
	* Converts Next.js Link to a standard anchor tag for Preview.js
	*/
	const NextLinkMock = ({
	href,
	as,
	replace,
	scroll,
	shallow,
	passHref,
	prefetch,
	locale,
	children,
	className,
	style,
	onClick,
	...rest
	}) => {
	// Handle click events
	const handleClick = (e) => {
	e.preventDefault();
	console.log('Link clicked:', { href, as });

	// Call original onClick if provided
	if (onClick) {
	onClick(e);
	}
	};

	// If children is a function, call it with the link props
	if (typeof children === 'function') {
	return children({
	href: typeof href === 'object' ? href.pathname \|\| '/' : href,
	className,
	style,
	onClick: handleClick,
	...rest
	});
	}

	// If children is a single child element, clone it with link props
	if (React.isValidElement(children)) {
	return React.cloneElement(children, {
	href: typeof href === 'object' ? href.pathname \|\| '/' : href,
	onClick: handleClick,
	className: children.props.className \|\| className,
	style: { ...style, ...children.props.style },
	...rest
	});
	}

	// Default: render as anchor tag
	return (
	<a
	href={typeof href === 'object' ? href.pathname \|\| '/' : href}
	className={className}
	style={style}
	onClick={handleClick}
	{...rest}
	>
	{children}
	</a>
	);
	};

	export default NextLinkMock;
	import React from 'react';

	/**
	* Mock for Next.js Router
	* Provides all router functionality needed for Preview.js
	*/

	// Mock router object with all Next.js router properties
	const mockRouter = {
	route: '/',
	pathname: '/',
	query: {},
	asPath: '/',
	basePath: '',
	locale: undefined,
	locales: undefined,
	defaultLocale: undefined,
	isLocaleDomain: false,
	isReady: true,
	isFallback: false,
	isPreview: false,
	// Navigation methods
	push: async (url, as, options) => {
	console.log('Router.push called:', { url, as, options });
	return true;
	},
	replace: async (url, as, options) => {
	console.log('Router.replace called:', { url, as, options });
	return true;
	},
	reload: () => {
	console.log('Router.reload called');
	},
	back: () => {
	console.log('Router.back called');
	},
	prefetch: async (url, as, options) => {
	console.log('Router.prefetch called:', { url, as, options });
	},
	beforePopState: (callback) => {
	console.log('Router.beforePopState called:', callback);
	},
	// Events system
	events: {
	on: (event, handler) => {
	console.log('Router.events.on called:', { event, handler });
	},
	off: (event, handler) => {
	console.log('Router.events.off called:', { event, handler });
	},
	emit: (event, ...args) => {
	console.log('Router.events.emit called:', { event, args });
	},
	},
	};

	// Hook that returns the mock router
	export const useRouter = () => {
	return mockRouter;
	};

	// HOC that passes router as prop
	export const withRouter = (Component) => {
	const WrappedComponent = (props) => {
	return <Component {...props} router={mockRouter} />;
	};
	WrappedComponent.displayName = `withRouter(${Component.displayName \|\| Component.name})`;
	return WrappedComponent;
	};

	// Default export for direct router access
	export default mockRouter;
	// __previewjs__/Wrapper.tsx
	import React from 'react';
	import '@/app/globals.css'; // Import global styles

	// Clean wrapper component - NO module mocking here!
	// All module mocking is handled by preview.config.js aliases
	interface WrapperProps {
	children: React.ReactNode;
	}

	export function Wrapper({ children }: WrapperProps) {
	return (
	<div className="preview-wrapper">
	{/* Add any context providers here if needed */}
	{/* Example providers (uncomment as needed):
	<ThemeProvider theme={defaultTheme}>
	<AuthProvider>
	<QueryClientProvider client={queryClient}>
	{children}
	</QueryClientProvider>
	</AuthProvider>
	</ThemeProvider>
	*/}
	{children}
	</div>
	);
	}

	export default Wrapper;