npm - @flexireact/core - Versions diffs - 1.0.0 - Mend

@flexireact/core 1.0.0

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 (31) hide show

package/LICENSE +21 -0
package/README.md +549 -0
package/cli/index.js +992 -0
package/cli/index.ts +1129 -0
package/core/api.js +143 -0
package/core/build/index.js +357 -0
package/core/cli/logger.js +347 -0
package/core/client/hydration.js +137 -0
package/core/client/index.js +8 -0
package/core/client/islands.js +138 -0
package/core/client/navigation.js +204 -0
package/core/client/runtime.js +36 -0
package/core/config.js +113 -0
package/core/context.js +83 -0
package/core/dev.js +47 -0
package/core/index.js +76 -0
package/core/islands/index.js +281 -0
package/core/loader.js +111 -0
package/core/logger.js +242 -0
package/core/middleware/index.js +393 -0
package/core/plugins/index.js +370 -0
package/core/render/index.js +765 -0
package/core/render.js +134 -0
package/core/router/index.js +296 -0
package/core/router.js +141 -0
package/core/rsc/index.js +198 -0
package/core/server/index.js +653 -0
package/core/server.js +197 -0
package/core/ssg/index.js +321 -0
package/core/utils.js +176 -0
package/package.json +73 -0

package/core/render.js ADDED Viewed

@@ -0,0 +1,134 @@
+import { renderToString } from 'react-dom/server';
+import React from 'react';
+/**
+ * Renders a React component to a full HTML page
+ * @param {React.Component} Component - The React component to render
+ * @param {Object} props - Props to pass to the component
+ * @param {Object} options - Rendering options
+ * @returns {string} Complete HTML string
+ */
+export function render(Component, props = {}, options = {}) {
+  const {
+    title = 'FlexiReact App',
+    scripts = [],
+    styles = []
+  } = options;
+  // Render the component to string
+  const content = renderToString(React.createElement(Component, props));
+  // Build the HTML document
+  const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(title)}</title>
+  ${styles.map(href => `<link rel="stylesheet" href="${escapeHtml(href)}">`).join('\n  ')}
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+      line-height: 1.6;
+      color: #333;
+    }
+  </style>
+</head>
+<body>
+  <div id="root">${content}</div>
+  <script>
+    // FlexiReact client-side runtime
+    window.__FLEXIREACT_PROPS__ = ${JSON.stringify(props)};
+  </script>
+  ${scripts.map(src => `<script src="${escapeHtml(src)}"></script>`).join('\n  ')}
+</body>
+</html>`;
+  return html;
+}
+/**
+ * Renders an error page
+ * @param {number} statusCode - HTTP status code
+ * @param {string} message - Error message
+ * @returns {string} HTML error page
+ */
+export function renderError(statusCode, message) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Error ${statusCode} - FlexiReact</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 100vh;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      color: white;
+    }
+    .error-container {
+      text-align: center;
+      padding: 2rem;
+    }
+    .error-code {
+      font-size: 6rem;
+      font-weight: bold;
+      opacity: 0.8;
+    }
+    .error-message {
+      font-size: 1.5rem;
+      margin-top: 1rem;
+      opacity: 0.9;
+    }
+    .back-link {
+      display: inline-block;
+      margin-top: 2rem;
+      padding: 0.75rem 1.5rem;
+      background: rgba(255,255,255,0.2);
+      color: white;
+      text-decoration: none;
+      border-radius: 5px;
+      transition: background 0.3s;
+    }
+    .back-link:hover {
+      background: rgba(255,255,255,0.3);
+    }
+  </style>
+</head>
+<body>
+  <div class="error-container">
+    <div class="error-code">${statusCode}</div>
+    <div class="error-message">${escapeHtml(message)}</div>
+    <a href="/" class="back-link">← Back to Home</a>
+  </div>
+</body>
+</html>`;
+}
+/**
+ * Escapes HTML special characters
+ */
+function escapeHtml(str) {
+  const htmlEntities = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;'
+  };
+  return String(str).replace(/[&<>"']/g, char => htmlEntities[char]);
+}

package/core/router/index.js ADDED Viewed

@@ -0,0 +1,296 @@
+/**
+ * FlexiReact Router v2
+ * Advanced file-based routing with nested routes, loading, and error boundaries
+ */
+import fs from 'fs';
+import path from 'path';
+import { isServerComponent, isClientComponent, isIsland } from '../utils.js';
+/**
+ * Route types
+ */
+export const RouteType = {
+  PAGE: 'page',
+  API: 'api',
+  LAYOUT: 'layout',
+  LOADING: 'loading',
+  ERROR: 'error',
+  NOT_FOUND: 'not-found'
+};
+/**
+ * Builds the complete route tree from pages directory
+ */
+export function buildRouteTree(pagesDir, layoutsDir) {
+  const routes = {
+    pages: [],
+    api: [],
+    layouts: new Map(),
+    tree: {}
+  };
+  if (!fs.existsSync(pagesDir)) {
+    return routes;
+  }
+  // Scan pages directory
+  scanDirectory(pagesDir, pagesDir, routes);
+  // Scan layouts directory
+  if (fs.existsSync(layoutsDir)) {
+    scanLayouts(layoutsDir, routes.layouts);
+  }
+  // Build route tree for nested routes
+  routes.tree = buildTree(routes.pages);
+  return routes;
+}
+/**
+ * Scans directory recursively for route files
+ */
+function scanDirectory(baseDir, currentDir, routes, parentSegments = []) {
+  const entries = fs.readdirSync(currentDir, { withFileTypes: true });
+  // First, find special files in current directory
+  const specialFiles = {
+    layout: null,
+    loading: null,
+    error: null,
+    notFound: null
+  };
+  for (const entry of entries) {
+    if (entry.isFile()) {
+      const name = entry.name.replace(/\.(jsx|js|tsx|ts)$/, '');
+      const fullPath = path.join(currentDir, entry.name);
+      if (name === 'layout') specialFiles.layout = fullPath;
+      if (name === 'loading') specialFiles.loading = fullPath;
+      if (name === 'error') specialFiles.error = fullPath;
+      if (name === 'not-found' || name === '404') specialFiles.notFound = fullPath;
+    }
+  }
+  for (const entry of entries) {
+    const fullPath = path.join(currentDir, entry.name);
+    const relativePath = path.relative(baseDir, fullPath);
+    if (entry.isDirectory()) {
+      // Handle route groups (parentheses)
+      const isGroup = entry.name.startsWith('(') && entry.name.endsWith(')');
+      const newSegments = isGroup ? parentSegments : [...parentSegments, entry.name];
+      scanDirectory(baseDir, fullPath, routes, newSegments);
+    } else if (entry.isFile()) {
+      const ext = path.extname(entry.name);
+      const baseName = path.basename(entry.name, ext);
+      // Skip special files (already processed)
+      if (['layout', 'loading', 'error', 'not-found', '404'].includes(baseName)) {
+        continue;
+      }
+      if (['.jsx', '.js', '.tsx', '.ts'].includes(ext)) {
+        const isApi = relativePath.startsWith('api' + path.sep) || relativePath.startsWith('api/');
+        if (isApi && ['.js', '.ts'].includes(ext)) {
+          routes.api.push(createRoute(fullPath, baseDir, specialFiles, RouteType.API));
+        } else if (!isApi && ['.jsx', '.tsx'].includes(ext)) {
+          routes.pages.push(createRoute(fullPath, baseDir, specialFiles, RouteType.PAGE));
+        }
+      }
+    }
+  }
+}
+/**
+ * Creates a route object from file path
+ */
+function createRoute(filePath, baseDir, specialFiles, type) {
+  const relativePath = path.relative(baseDir, filePath);
+  const routePath = filePathToRoute(relativePath);
+  return {
+    type,
+    path: routePath,
+    filePath,
+    pattern: createRoutePattern(routePath),
+    segments: routePath.split('/').filter(Boolean),
+    layout: specialFiles.layout,
+    loading: specialFiles.loading,
+    error: specialFiles.error,
+    notFound: specialFiles.notFound,
+    isServerComponent: isServerComponent(filePath),
+    isClientComponent: isClientComponent(filePath),
+    isIsland: isIsland(filePath)
+  };
+}
+/**
+ * Scans layouts directory
+ */
+function scanLayouts(layoutsDir, layoutsMap) {
+  const entries = fs.readdirSync(layoutsDir, { withFileTypes: true });
+  for (const entry of entries) {
+    if (entry.isFile() && /\.(jsx|tsx)$/.test(entry.name)) {
+      const name = entry.name.replace(/\.(jsx|tsx)$/, '');
+      layoutsMap.set(name, path.join(layoutsDir, entry.name));
+    }
+  }
+}
+/**
+ * Converts file path to route path
+ */
+function filePathToRoute(filePath) {
+  let route = filePath.replace(/\\/g, '/');
+  // Remove extension
+  route = route.replace(/\.(jsx|js|tsx|ts)$/, '');
+  // Convert [param] to :param
+  route = route.replace(/\[\.\.\.([^\]]+)\]/g, '*$1'); // Catch-all [...slug]
+  route = route.replace(/\[([^\]]+)\]/g, ':$1');
+  // Handle index files
+  if (route.endsWith('/index')) {
+    route = route.slice(0, -6) || '/';
+  } else if (route === 'index') {
+    route = '/';
+  }
+  // Handle route groups - remove (groupName) from path
+  route = route.replace(/\/?\([^)]+\)\/?/g, '/');
+  // Ensure leading slash and clean up
+  if (!route.startsWith('/')) {
+    route = '/' + route;
+  }
+  route = route.replace(/\/+/g, '/');
+  return route;
+}
+/**
+ * Creates regex pattern for route matching
+ */
+function createRoutePattern(routePath) {
+  let pattern = routePath
+    .replace(/\*[^/]*/g, '(.*)') // Catch-all
+    .replace(/:[^/]+/g, '([^/]+)') // Dynamic segments
+    .replace(/\//g, '\\/');
+  return new RegExp(`^${pattern}$`);
+}
+/**
+ * Builds a tree structure for nested routes
+ */
+function buildTree(routes) {
+  const tree = { children: {}, routes: [] };
+  for (const route of routes) {
+    let current = tree;
+    for (const segment of route.segments) {
+      if (!current.children[segment]) {
+        current.children[segment] = { children: {}, routes: [] };
+      }
+      current = current.children[segment];
+    }
+    current.routes.push(route);
+  }
+  return tree;
+}
+/**
+ * Matches URL path against routes
+ */
+export function matchRoute(urlPath, routes) {
+  const normalizedPath = urlPath === '' ? '/' : urlPath.split('?')[0];
+  for (const route of routes) {
+    const match = normalizedPath.match(route.pattern);
+    if (match) {
+      const params = extractParams(route.path, match);
+      return { ...route, params };
+    }
+  }
+  return null;
+}
+/**
+ * Extracts parameters from route match
+ */
+function extractParams(routePath, match) {
+  const params = {};
+  const paramNames = [];
+  // Extract param names from route path
+  const paramRegex = /:([^/]+)|\*([^/]*)/g;
+  let paramMatch;
+  while ((paramMatch = paramRegex.exec(routePath)) !== null) {
+    paramNames.push(paramMatch[1] || paramMatch[2] || 'splat');
+  }
+  paramNames.forEach((name, index) => {
+    params[name] = match[index + 1];
+  });
+  return params;
+}
+/**
+ * Finds all layouts that apply to a route
+ */
+export function findRouteLayouts(route, layoutsMap) {
+  const layouts = [];
+  // Check for segment-based layouts
+  let currentPath = '';
+  for (const segment of route.segments) {
+    currentPath += '/' + segment;
+    const layoutName = segment;
+    if (layoutsMap.has(layoutName)) {
+      layouts.push({
+        name: layoutName,
+        filePath: layoutsMap.get(layoutName)
+      });
+    }
+  }
+  // Check for route-specific layout
+  if (route.layout) {
+    layouts.push({
+      name: 'route',
+      filePath: route.layout
+    });
+  }
+  // Check for root layout
+  if (layoutsMap.has('root')) {
+    layouts.unshift({
+      name: 'root',
+      filePath: layoutsMap.get('root')
+    });
+  }
+  return layouts;
+}
+export default {
+  buildRouteTree,
+  matchRoute,
+  findRouteLayouts,
+  RouteType
+};

package/core/router.js ADDED Viewed

@@ -0,0 +1,141 @@
+import fs from 'fs';
+import path from 'path';
+/**
+ * Scans the pages directory and builds a route map
+ * @param {string} pagesDir - Path to the pages directory
+ * @returns {Object} Route map with paths and file locations
+ */
+export function buildRoutes(pagesDir) {
+  const routes = {
+    pages: [],
+    api: []
+  };
+  if (!fs.existsSync(pagesDir)) {
+    return routes;
+  }
+  scanDirectory(pagesDir, pagesDir, routes);
+  return routes;
+}
+/**
+ * Recursively scans a directory for route files
+ */
+function scanDirectory(baseDir, currentDir, routes) {
+  const entries = fs.readdirSync(currentDir, { withFileTypes: true });
+  for (const entry of entries) {
+    const fullPath = path.join(currentDir, entry.name);
+    const relativePath = path.relative(baseDir, fullPath);
+    if (entry.isDirectory()) {
+      scanDirectory(baseDir, fullPath, routes);
+    } else if (entry.isFile()) {
+      const ext = path.extname(entry.name);
+      if (ext === '.jsx' || ext === '.js') {
+        const routePath = filePathToRoute(relativePath);
+        const isApi = relativePath.startsWith('api' + path.sep) || relativePath.startsWith('api/');
+        if (isApi && ext === '.js') {
+          routes.api.push({
+            path: routePath,
+            filePath: fullPath,
+            pattern: createRoutePattern(routePath)
+          });
+        } else if (!isApi && ext === '.jsx') {
+          routes.pages.push({
+            path: routePath,
+            filePath: fullPath,
+            pattern: createRoutePattern(routePath)
+          });
+        }
+      }
+    }
+  }
+}
+/**
+ * Converts a file path to a route path
+ * pages/index.jsx -> /
+ * pages/about.jsx -> /about
+ * pages/blog/[id].jsx -> /blog/:id
+ * pages/api/hello.js -> /api/hello
+ */
+function filePathToRoute(filePath) {
+  // Normalize path separators
+  let route = filePath.replace(/\\/g, '/');
+  // Remove extension
+  route = route.replace(/\.(jsx|js)$/, '');
+  // Convert [param] to :param
+  route = route.replace(/\[([^\]]+)\]/g, ':$1');
+  // Handle index files
+  if (route.endsWith('/index')) {
+    route = route.slice(0, -6) || '/';
+  } else if (route === 'index') {
+    route = '/';
+  }
+  // Ensure leading slash
+  if (!route.startsWith('/')) {
+    route = '/' + route;
+  }
+  return route;
+}
+/**
+ * Creates a regex pattern for route matching
+ */
+function createRoutePattern(routePath) {
+  const pattern = routePath
+    .replace(/:[^/]+/g, '([^/]+)')
+    .replace(/\//g, '\\/');
+  return new RegExp(`^${pattern}$`);
+}
+/**
+ * Matches a URL path against the route map
+ * @param {string} urlPath - The URL path to match
+ * @param {Array} routes - Array of route objects
+ * @returns {Object|null} Matched route with params or null
+ */
+export function matchRoute(urlPath, routes) {
+  // Normalize the URL path
+  const normalizedPath = urlPath === '' ? '/' : urlPath;
+  for (const route of routes) {
+    const match = normalizedPath.match(route.pattern);
+    if (match) {
+      // Extract params from the match
+      const params = {};
+      const paramNames = (route.path.match(/:[^/]+/g) || []).map(p => p.slice(1));
+      paramNames.forEach((name, index) => {
+        params[name] = match[index + 1];
+      });
+      return {
+        ...route,
+        params
+      };
+    }
+  }
+  return null;
+}
+/**
+ * Invalidates the module cache for hot reload
+ */
+export function invalidateCache(filePath) {
+  // For ESM, we use query string cache busting
+  return `${filePath}?t=${Date.now()}`;
+}