@rimori/client 1.1.10 → 1.3.0

package/src/cli/scripts/init/router-transformer.ts

@@ -0,0 +1,329 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+/**
+ * Interface representing a detected route component
+ */
+interface RouteComponent {
+  /** Component name as used in JSX */
+  componentName: string;
+  /** Original import statement */
+  importStatement: string;
+  /** Import path */
+  importPath: string;
+  /** Whether it's a default import */
+  isDefaultImport: boolean;
+}
+
+/**
+ * Transform App.tsx to use PluginProvider with HashRouter instead of BrowserRouter.
+ * Also converts route components to lazy loading with Suspense.
+ * @param pluginId - The plugin ID to use in PluginProvider
+ */
+export function transformAppRouter(pluginId: string): void {
+  const appTsxPath = path.resolve('./src/App.tsx');
+
+  if (!fs.existsSync(appTsxPath)) {
+    console.warn('Warning: App.tsx not found, skipping router transformation');
+    return;
+  }
+
+  let content = fs.readFileSync(appTsxPath, 'utf8');
+
+  // Check if PluginProvider is already applied
+  if (content.includes('PluginProvider')) {
+    console.log('✅ PluginProvider already applied, skipping router transformation');
+    return;
+  }
+
+  // Check if BrowserRouter exists
+  if (!content.includes('BrowserRouter')) {
+    console.log('✅ BrowserRouter not found, skipping router transformation');
+    return;
+  }
+
+  console.log('🔄 Transforming App.tsx to use PluginProvider with HashRouter...');
+
+  // Step 1: Detect and extract route components
+  const routeComponents = detectRouteComponents(content);
+
+  if (routeComponents.length > 0) {
+    console.log(`🔄 Found ${routeComponents.length} route components, converting to lazy loading...`);
+
+    // Step 2: Transform imports to lazy loading
+    content = transformToLazyImports(content, routeComponents);
+
+    // Step 3: Add Suspense wrapper around Routes
+    content = addSuspenseWrapper(content);
+  }
+
+  // Step 4: Transform router imports and JSX (existing functionality)
+  content = transformImports(content);
+  content = transformJSX(content, pluginId);
+
+  // Write the transformed content back
+  fs.writeFileSync(appTsxPath, content, 'utf8');
+  console.log('✅ App.tsx transformed successfully with lazy loading');
+}
+
+/**
+ * Detects route components in the JSX by parsing Route elements.
+ * Looks for patterns like: <Route path="/" element={<ComponentName />} />
+ * @param content - The file content to analyze
+ * @returns Array of detected route components with their import information
+ */
+function detectRouteComponents(content: string): RouteComponent[] {
+  const routeComponents: RouteComponent[] = [];
+
+  // Regex to match Route elements with component references
+  // Matches: <Route ... element={<ComponentName .../>} ... />
+  const routeRegex = /<Route[^>]*element=\{\s*<(\w+)[^}]*\}[^>]*\/?>/g;
+
+  let match;
+  const componentNames = new Set<string>();
+
+  // Extract all unique component names from routes
+  while ((match = routeRegex.exec(content)) !== null) {
+    const componentName = match[1];
+    componentNames.add(componentName);
+  }
+
+  // For each component, find its corresponding import statement
+  componentNames.forEach(componentName => {
+    const importInfo = findImportForComponent(content, componentName);
+    if (importInfo) {
+      routeComponents.push({
+        componentName,
+        importStatement: importInfo.importStatement,
+        importPath: importInfo.importPath,
+        isDefaultImport: importInfo.isDefaultImport
+      });
+    }
+  });
+
+  return routeComponents;
+}
+
+/**
+ * Finds the import statement for a given component name.
+ * Handles both default imports and named imports.
+ * @param content - The file content to search
+ * @param componentName - The component name to find import for
+ * @returns Import information or null if not found
+ */
+function findImportForComponent(content: string, componentName: string): {
+  importStatement: string;
+  importPath: string;
+  isDefaultImport: boolean;
+} | null {
+  // Check for default import: import ComponentName from "path"
+  const defaultImportRegex = new RegExp(`import\\s+${componentName}\\s+from\\s+["']([^"']+)["'];?`, 'g');
+  const defaultMatch = defaultImportRegex.exec(content);
+
+  if (defaultMatch) {
+    return {
+      importStatement: defaultMatch[0],
+      importPath: defaultMatch[1],
+      isDefaultImport: true
+    };
+  }
+
+  // Check for named import: import { ComponentName } from "path"
+  const namedImportRegex = /import\s*\{\s*([^}]*)\s*\}\s*from\s*["']([^"']+)["'];?/g;
+  let namedMatch;
+
+  while ((namedMatch = namedImportRegex.exec(content)) !== null) {
+    const imports = namedMatch[1].split(',').map(imp => imp.trim());
+    if (imports.includes(componentName)) {
+      return {
+        importStatement: namedMatch[0],
+        importPath: namedMatch[2],
+        isDefaultImport: false
+      };
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Transforms regular component imports to lazy imports.
+ * Converts: import ComponentName from "./path"
+ * To: const ComponentName = lazy(() => import("./path"))
+ * @param content - The file content to transform
+ * @param routeComponents - Array of route components to transform
+ * @returns Transformed content with lazy imports
+ */
+function transformToLazyImports(content: string, routeComponents: RouteComponent[]): string {
+  let transformedContent = content;
+
+  // Add lazy import if not already present
+  if (!content.includes('lazy')) {
+    transformedContent = addLazyImport(transformedContent);
+  }
+
+  // Transform each route component import
+  routeComponents.forEach((component, index) => {
+    const { componentName, importStatement, importPath, isDefaultImport } = component;
+
+    // Create lazy import statement
+    const lazyImport = isDefaultImport
+      ? `const ${componentName} = lazy(() => import("${importPath}"));`
+      : `const ${componentName} = lazy(() => import("${importPath}").then(module => ({ default: module.${componentName} })));`;
+
+    // Replace the original import with lazy import
+    transformedContent = transformedContent.replace(importStatement, (index === 0 ? '\n' : '') + lazyImport);
+  });
+
+  return transformedContent;
+}
+
+/**
+ * Adds lazy import from React if not already present.
+ * @param content - The file content to modify
+ * @returns Content with lazy import added
+ */
+function addLazyImport(content: string): string {
+  // Check if React import exists and update it
+  const reactImportRegex = /import\s+(?:\*\s+as\s+)?React(?:\s*,\s*\{\s*([^}]*)\s*\})?\s+from\s+["']react["'];?/;
+  const reactImportMatch = content.match(reactImportRegex);
+
+  if (reactImportMatch) {
+    // React import exists, add lazy to it
+    const existingImports = reactImportMatch[1] || '';
+    const importList = existingImports.split(',').map(imp => imp.trim()).filter(Boolean);
+
+    if (!importList.includes('lazy')) {
+      importList.push('lazy');
+    }
+    if (!importList.includes('Suspense')) {
+      importList.push('Suspense');
+    }
+
+    const newImport = importList.length > 0
+      ? `import React, { ${importList.join(', ')} } from "react";`
+      : `import React from "react";`;
+
+    return content.replace(reactImportMatch[0], newImport);
+  } else {
+    // No React import found, add it
+    const firstImportMatch = content.match(/^import.*$/m);
+    if (firstImportMatch) {
+      return content.replace(firstImportMatch[0], `import React, { lazy, Suspense } from "react";\n${firstImportMatch[0]}`);
+    } else {
+      // No imports found, add at the beginning
+      return `import React, { lazy, Suspense } from "react";\n${content}`;
+    }
+  }
+}
+
+/**
+ * Wraps the Routes component with Suspense for lazy loading fallback.
+ * Converts: <Routes>...</Routes>
+ * To: <Suspense fallback={<div>Loading...</div>}><Routes>...</Routes></Suspense>
+ * @param content - The file content to modify
+ * @returns Content with Suspense wrapper added
+ */
+function addSuspenseWrapper(content: string): string {
+  // Check if Suspense is already wrapping Routes
+  if (content.includes('<Suspense') && content.match(/<Suspense[^>]*>[\s\S]*<Routes/)) {
+    console.log('✅ Suspense wrapper already present');
+    return content;
+  }
+
+  // Find Routes component and wrap with Suspense
+  // Handle both self-closing and regular Routes tags
+  const routesRegex = /(<Routes(?:[^>]*)>)([\s\S]*?)(<\/Routes>)/;
+  const selfClosingRoutesRegex = /(<Routes[^>]*\/>)/;
+
+  const routesMatch = content.match(routesRegex);
+  const selfClosingMatch = content.match(selfClosingRoutesRegex);
+
+  if (routesMatch) {
+    // Regular Routes with children
+    const [fullMatch, openTag, children, closeTag] = routesMatch;
+    const suspenseWrapper = `<Suspense fallback={<div className="flex items-center justify-center min-h-screen"><div className="text-lg">Loading...</div></div>}>\n        ${openTag}${children}${closeTag}\n      </Suspense>`;
+    return content.replace(fullMatch, suspenseWrapper);
+  } else if (selfClosingMatch) {
+    // Self-closing Routes
+    const suspenseWrapper = `<Suspense fallback={<div className="flex items-center justify-center min-h-screen"><div className="text-lg">Loading...</div></div>}>\n        ${selfClosingMatch[1]}\n      </Suspense>`;
+    return content.replace(selfClosingMatch[1], suspenseWrapper);
+  }
+
+  console.log('✅ Routes component not found, skipping Suspense wrapper');
+  return content;
+}
+
+/**
+ * Transform the import statements to include PluginProvider and change BrowserRouter to HashRouter.
+ * This is the original functionality for router transformation.
+ * @param content - The file content to transform
+ * @returns Transformed content with updated imports
+ */
+function transformImports(content: string): string {
+  // Add PluginProvider import
+  if (!content.includes('import') || !content.includes('@rimori/client')) {
+    // Add new import line for PluginProvider
+    const importMatch = content.match(/^(import.*from\s+["']react["'];?\s*\n)/m);
+    if (importMatch) {
+      content = content.replace(
+        importMatch[0],
+        `${importMatch[0]}import { PluginProvider } from "@rimori/client";\n`
+      );
+    } else {
+      // If no React import found, add at the beginning
+      content = `import { PluginProvider } from "@rimori/client";\n${content}`;
+    }
+  } else {
+    // Update existing @rimori/client import to include PluginProvider
+    content = content.replace(
+      /import\s*{\s*([^}]*)\s*}\s*from\s*["']@rimori\/client["'];?/,
+      (match, imports) => {
+        const importList = imports.split(',').map((imp: string) => imp.trim()).filter(Boolean);
+        if (!importList.includes('PluginProvider')) {
+          importList.push('PluginProvider');
+        }
+        return `import { ${importList.join(', ')} } from "@rimori/client";`;
+      }
+    );
+  }
+
+  // Transform react-router-dom import: replace BrowserRouter with HashRouter
+  content = content.replace(
+    /import\s*{\s*([^}]*)\s*}\s*from\s*["']react-router-dom["'];?/,
+    (match, imports) => {
+      const importList = imports.split(',').map((imp: string) => imp.trim()).filter(Boolean);
+      const updatedImports = importList.map((imp: string) =>
+        imp === 'BrowserRouter' ? 'HashRouter' : imp
+      );
+      return `import { ${updatedImports.join(', ')} } from "react-router-dom";`;
+    }
+  );
+
+  return content;
+}
+
+/**
+ * Transform the JSX to wrap with PluginProvider and change BrowserRouter to HashRouter.
+ * This is the original functionality for router transformation.
+ * @param content - The file content to transform
+ * @param pluginId - The plugin ID to use in PluginProvider
+ * @returns Transformed content with updated JSX
+ */
+function transformJSX(content: string, pluginId: string): string {
+  // Replace opening BrowserRouter tag
+  content = content.replace(
+    /<BrowserRouter(\s[^>]*)?>/,
+    `<PluginProvider pluginId="${pluginId}">
+      <HashRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>`
+  );
+
+  // Replace closing BrowserRouter tag
+  content = content.replace(
+    /<\/BrowserRouter>/,
+    `</HashRouter>
+    </PluginProvider>`
+  );
+
+  return content;
+} 

package/src/cli/scripts/init/tailwind-config.ts

@@ -0,0 +1,75 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+/**
+ * Updates the tailwind.config.ts file to set darkMode to "class" and add the Rimori client package to content.
+ */
+export function updateTailwindConfig(): void {
+  console.log('Updating Tailwind CSS configuration...');
+
+  const tailwindConfigPath = path.resolve('./tailwind.config.ts');
+
+  if (!fs.existsSync(tailwindConfigPath)) {
+    console.log('Warning: tailwind.config.ts not found, skipping Tailwind CSS update');
+    return;
+  }
+
+  try {
+    const configContent = fs.readFileSync(tailwindConfigPath, 'utf8');
+
+    let updatedContent = configContent;
+
+    // Set darkMode to "class" if it exists, otherwise add it
+    if (updatedContent.includes('darkMode:')) {
+      updatedContent = updatedContent.replace(
+        /darkMode:\s*\[?"[^"]*"?\]?,?/g,
+        'darkMode: ["class"],'
+      );
+    } else {
+      // Add darkMode after the opening brace
+      updatedContent = updatedContent.replace(
+        /export default \{/,
+        'export default {\n  darkMode: ["class"],'
+      );
+    }
+
+    // Add Rimori client package to content array if not already present
+    if (!updatedContent.includes('node_modules/@rimori/client')) {
+      // Find the content array and add the Rimori client path
+      if (updatedContent.includes('content:')) {
+        // More precise regex to handle the content array properly
+        updatedContent = updatedContent.replace(
+          /(content:\s*\[)([\s\S]*?)(\])/,
+          (match, start, content, end) => {
+            // Clean up any existing double commas first
+            let cleanContent = content.replace(/,\s*,/g, ',');
+
+            // Remove trailing comma and whitespace
+            cleanContent = cleanContent.replace(/,\s*$/, '');
+
+            // Add the new path with proper formatting
+            const newPath = '"node_modules/@rimori/client/dist/components/**/*.{js,jsx}"';
+
+            // If content is not empty, add comma before new entry
+            if (cleanContent.trim()) {
+              return `${start}${cleanContent},\n    ${newPath}\n  ${end}`;
+            } else {
+              return `${start}\n    ${newPath}\n  ${end}`;
+            }
+          }
+        );
+      } else {
+        // Add content array if it doesn't exist
+        updatedContent = updatedContent.replace(
+          /darkMode: \["class"\],/,
+          'darkMode: ["class"],\n  content: [\n    "./src/**/*.{js,jsx,ts,tsx}",\n    "node_modules/@rimori/client/dist/components/**/*.{js,jsx}"\n  ],'
+        );
+      }
+    }
+
+    fs.writeFileSync(tailwindConfigPath, updatedContent, 'utf8');
+    console.log('✅ Tailwind CSS configuration updated');
+  } catch (error) {
+    console.warn(`Warning: Could not update tailwind.config.ts: ${error instanceof Error ? error.message : error}`);
+  }
+} 

package/src/cli/scripts/init/vite-config.ts

@@ -0,0 +1,73 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+/**
+ * Updates the vite.config.ts file to set the base property.
+ * @param param
+ * @param param.basePath - The base path to set in vite config (defaults to './')
+ * @param param.configPath - Path to the vite.config.ts file (defaults to './vite.config.ts')
+ * @throws {Error} if vite.config.ts file is not found or cannot be modified.
+ */
+export function updateViteConfigBase({
+  basePath = './',
+  configPath = './vite.config.ts'
+}: {
+  basePath?: string;
+  configPath?: string;
+} = {}): void {
+  const viteConfigPath = path.resolve(configPath);
+
+  if (!fs.existsSync(viteConfigPath)) {
+    throw new Error(`vite.config.ts not found at ${viteConfigPath}`);
+  }
+
+  let configContent = fs.readFileSync(viteConfigPath, 'utf8');
+
+  // Check if base property already exists
+  const baseRegex = /base:\s*['"][^'"]*['"],?\s*/;
+  const hasBase = baseRegex.test(configContent);
+
+  if (hasBase) {
+    // Update existing base property
+    configContent = configContent.replace(baseRegex, `base: '${basePath}',`);
+    console.log(`Updated existing base property in vite.config.ts to '${basePath}'`);
+  } else {
+    // Add base property before server config
+    const serverRegex = /(\s*)(server:\s*\{)/;
+    const serverMatch = configContent.match(serverRegex);
+
+    if (serverMatch) {
+      const indentation = serverMatch[1] || '  '; // Use existing indentation or default to 2 spaces
+      const replacement = `${indentation}base: '${basePath}',${indentation}${serverMatch[2]}`;
+      configContent = configContent.replace(serverRegex, replacement);
+      console.log(`Added base property to vite.config.ts with value '${basePath}'`);
+    } else {
+      throw new Error('Could not find server config in vite.config.ts to add base property before it');
+    }
+  }
+
+  fs.writeFileSync(viteConfigPath, configContent, 'utf8');
+}
+
+/**
+ * Reads the current base value from vite.config.ts.
+ * @param param
+ * @param param.configPath - Path to the vite.config.ts file (defaults to './vite.config.ts')
+ * @returns The current base value or null if not found.
+ */
+export function getCurrentViteBase({
+  configPath = './vite.config.ts'
+}: {
+  configPath?: string;
+} = {}): string | null {
+  const viteConfigPath = path.resolve(configPath);
+
+  if (!fs.existsSync(viteConfigPath)) {
+    return null;
+  }
+
+  const configContent = fs.readFileSync(viteConfigPath, 'utf8');
+  const baseMatch = configContent.match(/base:\s*['"]([^'"]*)['"]/);
+
+  return baseMatch ? baseMatch[1] : null;
+} 

package/src/cli/scripts/release/release-config-upload.ts

@@ -0,0 +1,114 @@
+import fs from 'fs';
+import path from 'path';
+import ts from 'typescript';
+import { Config } from './release.js';
+
+/**
+ * Read and send the rimori configuration to the release endpoint
+ * @param config - Configuration object
+ */
+export async function sendConfiguration(config: Config): Promise<string> {
+  const configPath = path.resolve('./rimori/rimori.config.ts');
+
+  // Check if config file exists
+  try {
+    await fs.promises.access(configPath);
+  } catch (e) {
+    throw new Error('Could not find rimori.config.ts in ./rimori/ directory');
+  }
+
+  try {
+    let configObject;
+
+    // Use TypeScript compiler to transpile and load
+    const configContent = await fs.promises.readFile(configPath, 'utf8');
+
+    // Transpile TypeScript to JavaScript
+    const result = ts.transpile(configContent, {
+      target: ts.ScriptTarget.ES2020,
+      module: ts.ModuleKind.ES2020
+    });
+
+    // Create a temporary file to import the transpiled code
+    const tempFile = path.join(process.cwd(), 'temp_config.js');
+    await fs.promises.writeFile(tempFile, result);
+
+    try {
+      // Use dynamic import to load the config
+      const config = await import(`file://${tempFile}`);
+      configObject = config.default || config;
+
+      // Clean up temp file
+      await fs.promises.unlink(tempFile);
+    } catch (error) {
+      // Clean up temp file even on error
+      try {
+        await fs.promises.unlink(tempFile);
+      } catch (e) { }
+      throw error;
+    }
+
+    if (!configObject) {
+      throw new Error('Configuration object is empty or undefined');
+    }
+
+    console.log(`🚀 Sending configuration...`);
+
+    const requestBody = {
+      config: configObject,
+      version: config.version,
+      plugin_id: config.plugin_id,
+      release_channel: config.release_channel,
+      rimori_client_version: config.rimori_client_version,
+    };
+
+    try {
+      const response = await fetch(`${config.domain}/release`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${config.token}`
+        },
+        body: JSON.stringify(requestBody),
+      });
+
+      const responseText = await response.text();
+      console.log('Configuration response status:', response.status);
+      console.log('Configuration response text:', responseText);
+
+      const responseData = JSON.parse(responseText);
+      if (response.ok) {
+        console.log('✅ Configuration deployed successfully!');
+        return responseData.release_id;
+      } else {
+        console.log('❌ Configuration failed!');
+        console.log('Error:', responseData.error || 'Unknown error');
+        console.log('Response data:', JSON.stringify(responseData, null, 2));
+        throw new Error('Configuration upload failed');
+      }
+    } catch (e) {
+      console.log("error", e);
+      throw new Error("Error sending configuration");
+    }
+  } catch (error: any) {
+    console.error('❌ Error sending configuration:', error.message);
+    throw error;
+  }
+}
+
+export async function releasePlugin(config: Config, release_id: string): Promise<void> {
+  const response = await fetch(`${config.domain}/release/${release_id}/release`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'Authorization': `Bearer ${config.token}`
+    },
+    body: JSON.stringify({ plugin_id: config.plugin_id })
+  });
+
+  if (!response.ok) {
+    console.log("Response:", await response.text());
+    throw new Error("Failed to release plugin");
+  }
+  console.log("✅ Plugin released successfully");
+}

package/src/cli/scripts/release/release-db-update.ts

@@ -0,0 +1,97 @@
+import fs from 'fs';
+import path from 'path';
+import ts from 'typescript';
+import { Config } from "./release";
+
+/**
+ * Read and send the database configuration to the release endpoint
+ * @param config - Configuration object
+ */
+export default async function dbUpdate(config: Config, release_id: string): Promise<void> {
+  const dbConfigPath = path.resolve('./rimori/db.config.ts');
+
+  // Check if db config file exists
+  try {
+    await fs.promises.access(dbConfigPath);
+  } catch (e) {
+    console.warn('Could not find db.config.ts in ./rimori/ directory. Skipping database configuration upload.');
+    return;
+  }
+
+  try {
+    let dbConfigObject;
+
+    // Use TypeScript compiler to transpile and load
+    const dbConfigContent = await fs.promises.readFile(dbConfigPath, 'utf8');
+
+    // Transpile TypeScript to JavaScript
+    const result = ts.transpile(dbConfigContent, {
+      target: ts.ScriptTarget.ES2020,
+      module: ts.ModuleKind.ES2020
+    });
+
+    // Create a temporary file to import the transpiled code
+    const tempFile = path.join(process.cwd(), 'temp_db_config.js');
+    await fs.promises.writeFile(tempFile, result);
+
+    try {
+      // Use dynamic import to load the db config
+      const dbConfig = await import(`file://${tempFile}`);
+      dbConfigObject = Object.values(dbConfig);
+
+      // Clean up temp file
+      await fs.promises.unlink(tempFile);
+    } catch (error) {
+      // Clean up temp file even on error
+      try {
+        await fs.promises.unlink(tempFile);
+      } catch (e) { }
+      throw error;
+    }
+
+    if (!dbConfigObject) {
+      throw new Error('Database configuration object is empty or undefined');
+    }
+
+    console.log(`🗄️ Sending database configuration...`);
+
+    const requestBody = {
+      db_config: dbConfigObject,
+      version: config.version,
+      release_channel: config.release_channel,
+      plugin_id: config.plugin_id,
+    };
+
+    const response = await fetch(`${config.domain}/release/${release_id}/db`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${config.token}`
+      },
+      body: JSON.stringify(requestBody),
+    }).catch((e) => {
+      console.log("error", e);
+      throw new Error("Error sending database configuration");
+    });
+    try {
+      const responseText = await response.text().catch((e) => {
+        console.log("error", e);
+        throw new Error("Error sending database configuration");
+      });
+
+      const responseData = JSON.parse(responseText);
+      if (response.ok) {
+        console.log('✅ Database configuration deployed successfully!');
+      } else {
+        console.log("responseData", responseData);
+        throw new Error(responseData.message);
+      }
+    } catch (e) {
+      console.log("error", e);
+      throw new Error("Error sending database configuration");
+    }
+  } catch (error: any) {
+    console.error('❌ Error sending database configuration:', error.message);
+    throw error;
+  }
+}