npm - vista-core-js - Versions diffs - 0.0.2 - Mend

vista-core-js 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (53) hide show

package/dist/ErrorOverlay.d.ts +7 -0
package/dist/ErrorOverlay.js +68 -0
package/dist/app.d.ts +21 -0
package/dist/app.js +119 -0
package/dist/client/link.d.ts +23 -0
package/dist/client/link.js +42 -0
package/dist/client.d.ts +2 -0
package/dist/client.js +290 -0
package/dist/components/PixelBlast.d.ts +28 -0
package/dist/components/PixelBlast.js +584 -0
package/dist/entry-client.d.ts +1 -0
package/dist/entry-client.js +56 -0
package/dist/entry-server.d.ts +9 -0
package/dist/entry-server.js +33 -0
package/dist/error-overlay.d.ts +1 -0
package/dist/error-overlay.js +166 -0
package/dist/font/google/index.d.ts +1923 -0
package/dist/font/google/index.js +1948 -0
package/dist/image/get-img-props.d.ts +20 -0
package/dist/image/get-img-props.js +46 -0
package/dist/image/image-config.d.ts +20 -0
package/dist/image/image-config.js +17 -0
package/dist/image/image-loader.d.ts +7 -0
package/dist/image/image-loader.js +10 -0
package/dist/image/index.d.ts +12 -0
package/dist/image/index.js +12 -0
package/dist/index.d.ts +6 -0
package/dist/index.js +4 -0
package/dist/plugin.d.ts +5 -0
package/dist/plugin.js +88 -0
package/dist/router.d.ts +18 -0
package/dist/router.js +55 -0
package/package.json +47 -0
package/src/ErrorOverlay.tsx +194 -0
package/src/app.tsx +138 -0
package/src/assets/vista.gif +0 -0
package/src/client/link.tsx +85 -0
package/src/client.tsx +368 -0
package/src/entry-client.tsx +70 -0
package/src/entry-server.tsx +58 -0
package/src/error-overlay.ts +187 -0
package/src/font/google/index.d.ts +19011 -0
package/src/font/google/index.ts +1968 -0
package/src/font/types.d.ts +13 -0
package/src/image/get-img-props.ts +100 -0
package/src/image/image-config.ts +22 -0
package/src/image/image-loader.ts +23 -0
package/src/image/index.tsx +21 -0
package/src/index.ts +7 -0
package/src/plugin.ts +100 -0
package/src/router-loader.ts +51 -0
package/src/router.tsx +80 -0
package/tsconfig.json +23 -0

package/src/app.tsx ADDED Viewed

@@ -0,0 +1,138 @@
+import React, { Suspense } from 'react';
+import { useRouter } from './router.js';
+import { pages, rootLayout, getPageKey } from './router-loader.js';
+/* NOTE: Keeping VistaHead as is (or assuming it is preserved by replace_file_content Context) */
+// I will rely on the tool to keep lines I didn't verify in 'Context' but I need to be careful.
+// Actually, I must ensure I don't delete lines 51-110. The prompt for replace_file_content requires TargetContent.
+// I will target the top section and App component separately or use multi_replace if needed?
+// The tool documentation says "Use this tool ONLY when you are making a SINGLE CONTIGUOUS block of edits".
+// I need to change lines 11-50 (Loaders) AND lines 136-142 (App component logic).
+// These are non-contiguous.
+// I MUST use multi_replace_file_content.
+// Define Asset Types
+export type VistaAsset = {
+    type: 'style' | 'script' | 'preamble';
+    src?: string;
+    content?: string;
+    key?: string;
+}
+function VistaHead({ assets, metadata }: { assets?: VistaAsset[], metadata?: any }) {
+    // Serialize assets for client hydration
+    const serializedAssets = JSON.stringify(assets || []);
+    // With hydrateRoot(document) and React 19, we can just render the tags.
+    // React handles the hoisting for stylesheets if we hint them, or just standard placement.
+    // Since we are hydrating the full document, and RootLayout contains <head>,
+    // these tags will be rendered where they are (in body/root children).
+    // React 19 "Hoistable" Resources: <title>, <meta>, <link rel=stylesheet>.
+    // They will be hoisted to <head> automatically.
+    return (
+        <>
+            {/* Metadata */}
+            {metadata?.title && <title>{metadata.title}</title>}
+            {metadata?.description && <meta name="description" content={metadata.description} />}
+            {/* Assets */}
+            {assets?.map((asset, index) => {
+                if (asset.type === 'style' && asset.src) {
+                    // Precedence="default" opts into React 19 Resource Loading/Hoisting
+                    /* @ts-ignore: React 19 prop */
+                    return <link key={asset.key || asset.src} rel="stylesheet" href={asset.src} precedence="default" />;
+                }
+                if (asset.type === 'script' && asset.src) {
+                    return <script key={asset.key || asset.src} type="module" src={asset.src} />;
+                }
+                if (asset.type === 'preamble' && asset.content) {
+                    return (
+                        <script
+                            key="preamble"
+                            type="module"
+                            dangerouslySetInnerHTML={{ __html: asset.content }}
+                        />
+                    );
+                }
+                return null;
+            })}
+            {/* Asset Serialization Script */}
+            <script
+                id="vista-assets"
+                dangerouslySetInnerHTML={{
+                    __html: `window.__VISTA_ASSETS__ = ${serializedAssets};`
+                }}
+            />
+        </>
+    );
+}
+export default function App({
+    initialComponent,
+    initialRootLayout,
+    metadata,
+    assets
+}: {
+    initialComponent?: React.ComponentType<any>,
+    initialRootLayout?: React.ComponentType<any>,
+    metadata?: any,
+    assets?: VistaAsset[]
+}) {
+    const { path } = useRouter();
+    const pageKey = getPageKey(path);
+    if (!pages[pageKey]) {
+        return <div>404 Not Found: {pageKey}</div>;
+    }
+    // --- Page Logic ---
+    // --- Page Logic ---
+    const isInitialRender = React.useRef(!!initialComponent);
+    const [useInitial, setUseInitial] = React.useState(!!initialComponent);
+    const [initialPath] = React.useState(path); // FIX: Hook must be at top level
+    React.useEffect(() => {
+        // Switch to dynamic component (HMR-capable) after hydration
+        if (useInitial) {
+            setUseInitial(false);
+            isInitialRender.current = false;
+        }
+    }, []);
+    let PageComponent: React.ComponentType<any>;
+    // Use initial component only if we are on the same path and fresh from hydration
+    if (useInitial && initialComponent && path === initialPath) {
+        PageComponent = initialComponent;
+    } else {
+        // Eager: Direct access
+        PageComponent = (pages[pageKey] as any).default;
+    }
+    // --- Layout Logic ---
+    let RootLayoutComponent: any = initialRootLayout;
+    if (!RootLayoutComponent) {
+        const rootLayoutKey = '/app/layout.tsx';
+        if (rootLayout[rootLayoutKey]) {
+            // Eager
+            RootLayoutComponent = (rootLayout[rootLayoutKey] as any).default;
+        } else {
+            RootLayoutComponent = React.Fragment;
+        }
+    }
+    return (
+        /* @ts-ignore */
+        <RootLayoutComponent>
+            <VistaHead metadata={metadata} assets={assets} />
+            <Suspense fallback={null}>
+                <PageComponent key={path} />
+            </Suspense>
+        </RootLayoutComponent>
+    );
+}

package/src/assets/vista.gif ADDED Viewed

Binary file

package/src/client/link.tsx ADDED Viewed

@@ -0,0 +1,85 @@
+import React, { AnchorHTMLAttributes } from 'react';
+import { useRouter } from '../router';
+/*
+ * Replicating Next.js Link Props Interface
+ * based on the provided link.d.ts
+ */
+type Url = string | { href: string; query?: any; hash?: string }; // Simplified UrlObject
+export interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+    href: Url;
+    as?: Url;
+    replace?: boolean;
+    scroll?: boolean;
+    shallow?: boolean;
+    passHref?: boolean;
+    prefetch?: boolean | 'auto' | null;
+    locale?: string | false;
+    legacyBehavior?: boolean;
+    onNavigate?: () => void;
+}
+// Simple normalization for href (string or object)
+const formatUrl = (url: Url): string => {
+    if (typeof url === 'string') return url;
+    if (typeof url === 'object' && url !== null) {
+        // Very basic support just for demo
+        return (url.href || '') + (url.hash || '');
+    }
+    return '';
+};
+export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(({
+    href,
+    as,
+    replace,
+    scroll,
+    shallow,
+    passHref,
+    prefetch,
+    legacyBehavior,
+    children,
+    onClick,
+    ...props
+}, ref) => {
+    const { push, replace: replaceRoute } = useRouter();
+    const targetPath = formatUrl(as || href);
+    const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+        if (onClick) onClick(e);
+        // Standard link behavior checks
+        if (e.defaultPrevented) return;
+        if (e.button !== 0) return; // ignore right clicks
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return; // ignore open in new tab
+        if (!href) return;
+        e.preventDefault();
+        if (replace) {
+            replaceRoute(targetPath);
+        } else {
+            push(targetPath);
+        }
+    };
+    return (
+        <a
+            href={targetPath}
+            onClick={handleClick}
+            ref={ref}
+            {...props}
+        >
+            {children}
+        </a>
+    );
+});
+export const useLinkStatus = () => {
+    return { pending: false }; // Mock implementation
+};
+export default Link;

package/src/client.tsx ADDED Viewed

@@ -0,0 +1,368 @@
+import React, { useState, useEffect, ErrorInfo } from 'react';
+import ReactDOM from 'react-dom/client';
+import { RouterProvider, useRouter } from './router.js';
+import { ErrorOverlay } from './ErrorOverlay';
+// --- Error Management ---
+function VistaErrorManager({ children, initialError }: { children: React.ReactNode, initialError?: any }) {
+  const [error, setError] = useState<any>(initialError || null);
+  useEffect(() => {
+    // 1. Listen for Vite HMR/Build Errors
+    if (import.meta.hot) {
+      import.meta.hot.on('vite:error', (payloade: any) => {
+        // Vite sends an object like { err: { message, stack, plugin, id, frame, loc } }
+        // OR sometimes just the error object directly depending on version/context.
+        console.log('[Vista] Received vite:error payload:', payloade);
+        const err = payloade.err || payloade;
+        setError({
+          message: err.message,
+          stack: err.stack,
+          id: err.id, // Vite uses 'id' for filename often
+          frame: err.frame,
+          plugin: err.plugin,
+          loc: err.loc,
+          type: 'build',
+          // Fallbacks for Overlay keys
+          filename: err.id || err.file || 'Build Error',
+        });
+      });
+      import.meta.hot.on('vite:beforeUpdate', () => {
+        setError(null); // Clear error on new update
+      });
+    }
+    // 2. Listen for Unhandled Promise Rejections
+    const handleRejection = (event: PromiseRejectionEvent) => {
+      // Ignore dynamic import errors if we likely have a build error
+      if (event.reason?.message?.includes('Failed to fetch dynamically imported module')) {
+        console.log('[Vista] Ignoring dynamic import error (likely causing a build error)');
+        return;
+      }
+      setError((prev: any) => {
+        // specific check: don't overwrite build errors with runtime noise
+        if (prev && prev.type === 'build') return prev;
+        return {
+          message: event.reason?.message || 'Unhandled Promise Rejection',
+          stack: event.reason?.stack || '',
+          filename: 'Runtime Error',
+          loc: { line: 0, column: 0 },
+          type: 'runtime'
+        };
+      });
+    };
+    // 3. Listen for Global Errors
+    const handleError = (event: ErrorEvent) => {
+      setError((prev: any) => {
+        if (prev && prev.type === 'build') return prev;
+        return {
+          message: event.error?.message || event.message || 'Unknown Error',
+          stack: event.error?.stack || '',
+          filename: 'Runtime Error',
+          loc: { line: event.lineno || 0, column: event.colno || 0 },
+          type: 'runtime'
+        };
+      });
+    };
+    window.addEventListener('unhandledrejection', handleRejection);
+    window.addEventListener('error', handleError);
+    return () => {
+      window.removeEventListener('unhandledrejection', handleRejection);
+      window.removeEventListener('error', handleError);
+    };
+  }, []);
+  const handleBoundaryError = (err: any) => {
+    // Logic to ignore cascade errors
+    if (error && error.type === 'build') return;
+    if (err.message && err.message.includes('Failed to fetch dynamically imported module')) return;
+    setError({
+      message: err.message,
+      stack: err.stack,
+      loc: { line: 0, column: 0 },
+      filename: 'Runtime Error',
+      type: 'runtime'
+    });
+  };
+  if (error) {
+    return <ErrorOverlay error={error} onClose={() => setError(null)} />;
+  }
+  return (
+    <ErrorBoundary onError={handleBoundaryError}>
+      {children}
+    </ErrorBoundary>
+  );
+}
+// ... existing ErrorBoundary ...
+// ... existing AppContent ...
+// ... existing App ...
+// Export a mount function that accepts the glob results
+export function mount(modules: Record<string, any>) {
+  console.log('[Vista] Mount called with modules:', Object.keys(modules));
+  const root = document.getElementById('root');
+  if (root) {
+    console.log('[Vista] Root element found, rendering...');
+    ReactDOM.createRoot(root).render(
+      <VistaErrorManager>
+        <App modules={modules} />
+      </VistaErrorManager>
+    );
+  } else {
+    console.error('[Vista] FATAL: Root element #root not found in DOM');
+  }
+}
+// Export a mountError function for when module loading fails
+export function mountError(error: any) {
+  const root = document.getElementById('root');
+  if (root) {
+    // Mount just the ErrorManager to catch and display the Vite error
+    ReactDOM.createRoot(root).render(
+      <VistaErrorManager initialError={error}>
+        <div style={{ padding: '20px', fontFamily: 'sans-serif', color: '#666' }}>
+          {/* Placeholder content while waiting for error overlay */}
+          Initializing error overlay...
+        </div>
+      </VistaErrorManager>
+    );
+  }
+}
+class ErrorBoundary extends React.Component<{ children: React.ReactNode, onError: (error: any) => void }, { hasError: boolean }> {
+  constructor(props: any) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(error: any) {
+    return { hasError: true };
+  }
+  componentDidCatch(error: any, errorInfo: ErrorInfo) {
+    this.props.onError({
+      message: error.message,
+      stack: error.stack,
+      loc: { line: 0, column: 0 },
+      filename: 'Runtime Error'
+    });
+  }
+  render() {
+    if (this.state.hasError) {
+      return null;
+    }
+    return this.props.children;
+  }
+}
+// --- App Logic ---
+function AppContent({ modules }: { modules: Record<string, any> }) {
+  const { path: currentPath } = useRouter();
+  // 1. Find the matching page component
+  let PageComponent: any = () => <div className="p-10 text-xl">404 Not Found</div>;
+  // 2. Build the Layout Tree
+  // ... (Logic to build layoutPaths is same) ...
+  // Refactored Async Logic
+  const [componentTree, setComponentTree] = React.useState<React.ReactNode | null>(null);
+  const [pageError, setPageError] = React.useState<any>(null);
+  React.useEffect(() => {
+    let isMounted = true;
+    setPageError(null);
+    const loadRoute = async () => {
+      try {
+        // --- 1. Route Matching Engine ---
+        let pageLoader: (() => Promise<any>) | null = null;
+        let matchedRoutePath = '';
+        let routeParams: Record<string, string> = {};
+        // Normalize current path: remove trailing slash (unless root)
+        let normalizedPath = currentPath;
+        if (normalizedPath.length > 1 && normalizedPath.endsWith('/')) {
+          normalizedPath = normalizedPath.slice(0, -1);
+        }
+        // Helper: Convert file path to route regex
+        // e.g. "/app/users/[id]/index.tsx" -> "^/users/([^/]+)$"
+        // e.g. "/app/index.tsx" -> "^/$"
+        const createRouteMatcher = (filePath: string) => {
+          // Remove prefix: handle "/", "./", or no slash before "app"
+          let cleanPath = filePath
+            .replace(/^(\.?\/)?app\//, '')  // Remove app/ prefix (robust)
+            .replace(/\/index\.tsx$/, '')   // Remove /index.tsx (nested)
+            .replace(/^index\.tsx$/, '')    // Remove index.tsx (root)
+            .replace(/\.tsx$/, '');         // Remove .tsx (if any)
+          if (cleanPath === '') cleanPath = '/';
+          // Split into segments
+          const segments = cleanPath.split('/').filter(Boolean);
+          const paramNames: string[] = [];
+          // Console log for debug
+          // console.log(`[Router Debug] File: ${filePath} -> Clean: ${cleanPath}`);
+          const pathPattern = segments.map(seg => {
+            if (seg.startsWith('[') && seg.endsWith(']')) {
+              const paramName = seg.slice(1, -1);
+              paramNames.push(paramName);
+              return '([^/]+)'; // Match any non-slash char
+            }
+            return seg; // Static segment
+          }).join('/');
+          // Generate Regex: Ensure it starts with ^/ and ends with $
+          // cleanPath modules like 'about' become '^/about$'
+          // root '' becomes '^/$'
+          const regexString = pathPattern ? `^/${pathPattern}$` : '^/$';
+          return {
+            regex: new RegExp(regexString),
+            paramNames,
+            originalPath: cleanPath
+          };
+        };
+        // Iterate all modules to find a match
+        // Note: In a real framework, you'd cache the route table.
+        // console.log('[Vista Router] Current Path (Normalized):', normalizedPath);
+        // console.log('[Vista Router] Modules Found:', Object.keys(modules));
+        for (const path in modules) {
+          // Only care about pages (index.tsx)
+          if (!path.endsWith('/index.tsx')) continue;
+          const { regex, paramNames } = createRouteMatcher(path);
+          const match = normalizedPath.match(regex);
+          // console.log(`[Vista Router] Checking ${path} -> Regex: ${regex} -> Match: ${match ? 'YES' : 'NO'}`);
+          if (match) {
+            pageLoader = modules[path];
+            matchedRoutePath = path;
+            // Extract params
+            match.slice(1).forEach((val, index) => {
+              routeParams[paramNames[index]] = decodeURIComponent(val);
+            });
+            break; // Found first match (TODO: strict sorting Order)
+          }
+        }
+        if (!pageLoader) {
+          if (isMounted) setComponentTree(<div className="p-10 text-xl">404 Not Found</div>);
+          return;
+        }
+        // --- 2. Load Page & Layouts ---
+        const pageModule = await pageLoader();
+        let PageComponent = pageModule.default;
+        // Load Layouts: Climb up the directory tree from the page path
+        // e.g. /app/users/[id]/index.tsx
+        // Check: /app/users/[id]/layout.tsx
+        // Check: /app/users/layout.tsx
+        // Check: /app/layout.tsx
+        const layoutLoaders: Promise<any>[] = [];
+        const dirSegments = matchedRoutePath.split('/').slice(0, -1); // remove index.tsx
+        // Construct potential layout paths from root down to leaf
+        // But we want to load them all.
+        // Actually, let's just create the list of all parent directories and check for layout.tsx
+        let currentDir = ''; // starts empty
+        const possibleLayouts: string[] = [];
+        // We know everything starts with /app
+        // dirSegments looks like ['', 'app', 'users', '[id]']
+        for (const segment of dirSegments) {
+          if (!segment) continue;
+          currentDir += `/${segment}`;
+          const layoutPath = `${currentDir}/layout.tsx`;
+          if (modules[layoutPath]) {
+            possibleLayouts.push(layoutPath);
+          }
+        }
+        // Execute layout loaders
+        const layoutModules = await Promise.all(
+          possibleLayouts.map(path => modules[path]())
+        );
+        if (!isMounted) return;
+        // Handle Metadata
+        let meta = pageModule.metadata || {};
+        layoutModules.forEach(mod => {
+          if (mod.metadata) meta = { ...meta, ...mod.metadata };
+        });
+        if (meta.title) document.title = meta.title;
+        // Build Tree: Wrap Page with Layouts (Inner -> Outer? NO. Outer wraps Inner.)
+        // layoutModules is [AppLayout, UsersLayout, UserIdLayout]
+        // We want <AppLayout><UsersLayout><UserIdLayout><Page /></...></...></...>
+        let Content = <PageComponent params={routeParams} />; // Pass params to page!
+        // Reverse iterate to wrap from inside out
+        for (let i = layoutModules.length - 1; i >= 0; i--) {
+          const LayoutComponent = layoutModules[i].default;
+          Content = <LayoutComponent params={routeParams}>{Content}</LayoutComponent>;
+        }
+        setComponentTree(Content);
+      } catch (err) {
+        console.error('[Vista] Failed to load route:', err);
+        if (isMounted) setPageError(err);
+      }
+    };
+    loadRoute();
+    return () => { isMounted = false; };
+  }, [currentPath, modules]);
+  if (pageError) {
+    // Propagate to ErrorManager
+    throw pageError;
+  }
+  return componentTree;
+}
+function App({ modules }: { modules: Record<string, any> }) {
+  return (
+    <React.StrictMode>
+      <RouterProvider>
+        <AppContent modules={modules} />
+      </RouterProvider>
+    </React.StrictMode>
+  );
+}

package/src/entry-client.tsx ADDED Viewed

@@ -0,0 +1,70 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { RouterProvider } from './router';
+import App from './app.js';
+import { showErrorOverlay } from './error-overlay';
+import { loadRoute, loadRootLayout } from './router-loader.js';
+export async function mount() {
+    // For Full Document Hydration (RootLayout provides html/body)
+    // we hydrate 'document' directly.
+    const root = document;
+    let initialComponent: React.ComponentType<any> | undefined;
+    let initialRootLayout: React.ComponentType<any> | undefined;
+    let initialMetadata = {};
+    try {
+        const [component, layoutResult] = await Promise.all([
+            loadRoute(window.location.pathname),
+            loadRootLayout() as Promise<any>
+        ]);
+        initialComponent = component || undefined;
+        initialRootLayout = layoutResult?.Component || undefined;
+        initialMetadata = layoutResult?.metadata || {};
+    } catch (e) {
+        // We hydrate the full document because we are doing full SSR with HTML shell.
+    }
+    // @ts-ignore
+    ReactDOM.hydrateRoot(window.document,
+        // <React.StrictMode>
+        <RouterProvider>
+            {/* @ts-ignore */}
+            <App
+                initialComponent={initialComponent}
+                initialRootLayout={initialRootLayout}
+                metadata={initialMetadata}
+                assets={(window as any).__VISTA_ASSETS__ || []}
+            />
+        </RouterProvider>,
+        // </React.StrictMode>
+        {
+            onRecoverableError: (error) => {
+                console.error('Hydration failed:', error);
+                // Only show overlay if it's a real error, not just a cancelled transition
+                // showErrorOverlay(error as Error, 'Hydration Mismatch');
+            }
+        }
+    );
+}
+// Auto-mount if in browser environment and not already mounted
+if (typeof window !== 'undefined') {
+    window.addEventListener('error', (event) => {
+        console.error('Global Error Caught:', event.error);
+        showErrorOverlay(event.error, 'Runtime Error');
+    });
+    // Wrapped in async IIFE to handle await
+    (async () => {
+        try {
+            console.log('Mounting Vista App...');
+            await mount();
+        } catch (e) {
+            console.error('Mounting failed:', e);
+            showErrorOverlay(e as Error, 'Mount Error');
+        }
+    })();
+}