vista-core-js 0.0.2

package/src/font/types.d.ts

@@ -0,0 +1,13 @@
+export type CssVariable = `--${string}`;
+export type Display = 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
+export type NextFont = {
+    className: string;
+    style: {
+        fontFamily: string;
+        fontWeight?: number;
+        fontStyle?: string;
+    };
+};
+export type NextFontWithVariable = NextFont & {
+    variable: string;
+};

package/src/image/get-img-props.ts

@@ -0,0 +1,100 @@
+
+import { ImageConfigComplete, imageConfigDefault } from './image-config';
+import { ImageLoader } from './image-loader';
+
+export type ImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
+  src: string;
+  alt: string;
+  width?: number | string;
+  height?: number | string;
+  fill?: boolean;
+  loader?: ImageLoader;
+  quality?: number | string;
+  priority?: boolean;
+  unoptimized?: boolean;
+};
+
+type ImgProps = React.ImgHTMLAttributes<HTMLImageElement> & {
+  width?: number;
+  height?: number;
+  srcSet?: string;
+};
+
+// Helper: Generate srcSet
+function generateSrcSet(
+  src: string,
+  width: number | undefined,
+  loader: ImageLoader,
+  config: ImageConfigComplete,
+  unoptimized: boolean
+): string | undefined {
+  if (unoptimized) return undefined;
+
+  const { deviceSizes, imageSizes } = config;
+  const sizes = [...deviceSizes, ...imageSizes].sort((a, b) => a - b);
+  
+  // If width is known, only generate sizes up to that width (plus maybe 2x/3x for density)
+  // For simplicity MVP, we'll generate device sizes.
+  
+  return sizes
+    .map((size) => {
+      const url = loader({ src, width: size });
+      return `${url} ${size}w`;
+    })
+    .join(', ');
+}
+
+export function getImgProps(
+  props: ImageProps,
+  config: ImageConfigComplete = imageConfigDefault,
+  defaultLoader: ImageLoader
+): ImgProps {
+  const {
+    src,
+    alt,
+    width,
+    height,
+    fill,
+    loader = defaultLoader,
+    quality,
+    priority,
+    unoptimized,
+    style,
+    sizes,
+    className,
+    loading,
+    ...rest
+  } = props;
+
+  const imgStyle: React.CSSProperties = { ...style };
+  
+  // Handle Fill Mode
+  if (fill) {
+    imgStyle.position = 'absolute';
+    imgStyle.height = '100%';
+    imgStyle.width = '100%';
+    imgStyle.inset = 0;
+    imgStyle.objectFit = 'cover'; // Default to cover for bg images
+  }
+
+  // Handle Dimensions
+  let widthInt = width ? Number(width) : undefined;
+  let heightInt = height ? Number(height) : undefined;
+
+  // Generate SrcSet
+  const srcSet = generateSrcSet(src, widthInt, loader, config, !!unoptimized);
+
+  return {
+    ...rest,
+    src,
+    alt,
+    width: widthInt,
+    height: heightInt,
+    loading: priority ? 'eager' : (loading || 'lazy'),
+    // fetchPriority: priority ? 'high' : undefined, // React types might strict on this
+    style: imgStyle,
+    sizes: sizes || (fill ? '100vw' : undefined),
+    srcSet,
+    className,
+  };
+}

package/src/image/image-config.ts

@@ -0,0 +1,22 @@
+
+export const imageConfigDefault = {
+  deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
+  imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+  path: '/_next/image',
+  loader: 'default' as const,
+  loaderFile: '',
+  domains: [],
+  disableStaticImages: false,
+  minimumCacheTTL: 60,
+  formats: ['image/webp'] as const,
+  dangerouslyAllowSVG: false,
+  contentSecurityPolicy: "script-src 'none'; frame-src 'none'; sandbox;",
+  contentDispositionType: 'inline' as const,
+  remotePatterns: [],
+  unoptimized: false,
+}
+
+export type ImageConfigComplete = typeof imageConfigDefault
+export type ImageConfig = Partial<ImageConfigComplete>
+export const VALID_LOADERS = ['default', 'imgix', 'cloudinary', 'akamai', 'custom'] as const
+export type LoaderValue = typeof VALID_LOADERS[number]

package/src/image/image-loader.ts

@@ -0,0 +1,23 @@
+
+import { ImageConfig } from './image-config';
+
+export type ImageLoaderProps = {
+  src: string;
+  width: number;
+  quality?: number;
+};
+
+export type ImageLoader = (p: ImageLoaderProps) => string;
+
+// Default loader: simple pass-through for now, 
+// envisioning a future where this hits an optimization endpoint.
+export const defaultLoader: ImageLoader = ({ src, width, quality }) => {
+  // If user wants optimization, they would hook up a real loader here.
+  // For static dev, we just return the src.
+  // In a real Next.js app, this would be: `/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${quality || 75}`
+  
+  // NOTE: Emulating optimizing behavior by appending query params for now (if backend supported it)
+  // return `${src}?w=${width}&q=${quality || 75}`;
+  
+  return src; 
+};

package/src/image/index.tsx

@@ -0,0 +1,21 @@
+
+import React, { forwardRef } from 'react';
+import { getImgProps, ImageProps } from './get-img-props';
+import { imageConfigDefault } from './image-config';
+import { defaultLoader } from './image-loader';
+
+export const Image = forwardRef<HTMLImageElement, ImageProps>((props, ref) => {
+    // In a real implementation, we might consume config from a Context Provider
+    // For now, we use the default config.
+
+    const imgProps = getImgProps(props, imageConfigDefault, defaultLoader);
+
+    return (
+        <img
+            {...imgProps}
+            ref={ref}
+        />
+    );
+});
+
+Image.displayName = 'Image';

package/src/index.ts

@@ -0,0 +1,7 @@
+import { useRouter, Link } from './router.js';
+import { mount, mountError } from './client.js';
+
+export { Image } from './image/index.js';
+export type { ImageProps } from './image/get-img-props.js';
+export type { ImageLoaderProps } from './image/image-loader.js';
+export { useRouter, mount, mountError, Link };

package/src/plugin.ts

@@ -0,0 +1,100 @@
+import type { Plugin } from 'vite';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const clientPath = path.resolve(__dirname, './client.tsx'); // Resolves to src/client.tsx
+
+export interface VistaPluginOptions {
+  logo?: string;
+}
+
+export function vistaPlugin(options: VistaPluginOptions = {}): Plugin {
+  const logoPath = options.logo || '/favicon.ico';
+  
+  return {
+    name: 'vista-core',
+    enforce: 'pre',
+    configureServer(server) {
+      if (server.config.appType === 'custom') {
+        return; // Skip SPA middleware for SSR
+      }
+      // Disable default Vite overlay
+      server.config.server.hmr = {
+        ...(typeof server.config.server.hmr === 'object' ? server.config.server.hmr : {}),
+        overlay: false
+      };
+
+      server.middlewares.use(async (req, res, next) => {
+        const url = req.url || '/';
+        const pathname = url.split('?')[0];
+        
+        // SPA Fallback logic:
+        // Serve index.html if request is:
+        // 1. Root (/)
+        // 2. Not an internal Vite request (starts with /@)
+        // 3. Not a file with an extension (check pathname, ignore query params)
+        const isFile = pathname.includes('.');
+        const isInternal = url.startsWith('/@');
+        
+        if (url === '/' || (!isFile && !isInternal)) {
+          const html = `
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vista App</title>
+    <link rel="icon" href="${logoPath}" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module">
+      import { mount, mountError } from '@vista/core';
+      console.log('[Vista] Bootstrapping...');
+      try {
+        // use lazy loading (default) to allow catching syntax errors per module
+        // APP Folder scanning: Scan app/**/index.tsx (Pages) and app/**/layout.tsx (Layouts)
+        const modules = import.meta.glob(['/app/**/index.tsx', '/app/**/layout.tsx', '/app/layout.tsx', '/app/index.tsx']);        console.log('[Vista] Modules discovered:', Object.keys(modules));
+        mount(modules);
+      } catch (e) {
+        console.error('[Vista] Module load failed, calling mountError', e);
+        if (typeof mountError === 'function') {
+           mountError(e);
+        } else {
+           console.error('[Vista] mountError is NOT a function! Check exports.', mountError);
+           document.body.innerHTML = '<div style="color:red; padding:20px;">CRITICAL: mountError missing. Check console.</div>';
+        }
+      }
+    </script>
+  </body>
+</html>
+`;
+          // Transform the HTML to handle imports/HMR
+          const transformedHtml = await server.transformIndexHtml(url, html);
+          
+          res.statusCode = 200;
+          res.setHeader('Content-Type', 'text/html');
+          res.end(transformedHtml);
+          return;
+        }
+        next();
+      });
+    },
+    resolveId(id) {
+      if (id === 'virtual:vista-routes') {
+        return '\0virtual:vista-routes';
+      }
+    },
+    load(id) {
+      if (id === '\0virtual:vista-routes') {
+        return `export const routes = []`;
+      }
+    },
+    transform(code, id) {
+        // REMOVED: <head> injection caused Hydration Mismatch because React 18 component tree didn't include it.
+        // We will enforce <head> being present in the User's Layout instead.
+        return null;
+    }
+  };
+}

package/src/router-loader.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+
+// We need to define the types for the modules
+type PageModule = { default: React.ComponentType<any> };
+type LayoutModule = { default: React.ComponentType<any> };
+
+// Lazy load all pages and layouts at module level so they can be accessed by loadRoute
+// Note: Vite treats absolute paths in glob as relative to the project root
+// FIX: Use eager: true to solve HMR instability with lazy boundaries
+export const pages = import.meta.glob('/app/**/index.tsx', { eager: true });
+export const layouts = import.meta.glob('/app/**/layout.tsx', { eager: true });
+export const rootLayout = import.meta.glob('/app/layout.tsx', { eager: true });
+
+// Helper to resolve route path to file key
+export function getPageKey(path: string) {
+    const cleanPath = path === '/' ? '/' : path.replace(/\/$/, '');
+    return `/app${cleanPath === '/' ? '' : cleanPath}/index.tsx`;
+}
+
+// Exported loader for entry-client to preload the initial route
+export async function loadRoute(path: string) {
+    const pageKey = getPageKey(path);
+    if (pages[pageKey]) {
+        try {
+            // Eager: pages[pageKey] is the module itself
+            const mod = pages[pageKey] as PageModule;
+            return mod.default;
+        } catch (e) {
+            console.error(`Failed to load route: ${path}`, e);
+        }
+    }
+    return null;
+}
+
+// Exported loader for entry-client/server to preload the root layout and metadata
+export async function loadRootLayout() {
+    const rootLayoutKey = '/app/layout.tsx';
+    if (rootLayout[rootLayoutKey]) {
+        try {
+            // Eager: rootLayout[rootLayoutKey] is the module itself
+            const mod = rootLayout[rootLayoutKey] as LayoutModule & { metadata?: any };
+            return {
+                Component: mod.default,
+                metadata: mod.metadata || {}
+            };
+        } catch (e) {
+            console.error('Failed to load root layout', e);
+        }
+    }
+    return { Component: null, metadata: {} };
+}

package/src/router.tsx

@@ -0,0 +1,80 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+type RouterContextType = {
+  push: (path: string) => void;
+  replace: (path: string) => void;
+  back: () => void;
+  path: string;
+};
+
+// Create Context
+const RouterContext = createContext<RouterContextType | null>(null);
+
+// Hook
+export function useRouter() {
+  const context = useContext(RouterContext);
+  if (!context) {
+    throw new Error('useRouter must be used within a RouterProvider. This is handled automatically by Vista.');
+  }
+  return context;
+}
+
+// Internal Provider
+export function RouterProvider({ children, url }: { children: React.ReactNode; url?: string }) {
+  const [path, setPath] = useState(() => {
+    if (url) return url;
+    if (typeof window !== 'undefined') return window.location.pathname;
+    return '/';
+  });
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const onPopState = () => setPath(window.location.pathname);
+    window.addEventListener('popstate', onPopState);
+    return () => window.removeEventListener('popstate', onPopState);
+  }, []);
+
+  // Import startTransition
+  const { startTransition } = React;
+
+  const push = (newPath: string) => {
+    window.history.pushState({}, '', newPath);
+    setPath(newPath);
+  };
+
+  const replace = (newPath: string) => {
+    window.history.replaceState({}, '', newPath);
+    setPath(newPath);
+  };
+
+  const back = () => {
+    window.history.back();
+  };
+
+  const value = { push, replace, back, path };
+
+  return (
+    <RouterContext.Provider value={value}>
+      {children}
+    </RouterContext.Provider>
+  );
+}
+
+export function Link({ href, children, className }: { href: string; children: React.ReactNode; className?: string }) {
+  const { push } = useRouter();
+
+  const handleClick = (e: React.MouseEvent) => {
+    // Allow default behavior for modifier keys (new tab)
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+
+    e.preventDefault();
+    push(href);
+  };
+
+  return (
+    <a href={href} onClick={handleClick} className={className}>
+      {children}
+    </a>
+  );
+}

package/tsconfig.json

@@ -0,0 +1,23 @@
+
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "types": ["vite/client"],
+    "outDir": "./dist",
+    "declaration": true
+  },
+  "include": ["src"]
+}