meno-core 1.0.0

package/bin/cli.ts

@@ -0,0 +1,281 @@
+#!/usr/bin/env bun
+/**
+ * uplostudio CLI
+ * Commands: dev, build, init
+ */
+
+import { resolve, join } from 'path';
+import { existsSync, mkdirSync, writeFileSync, cpSync } from 'fs';
+import { setProjectRoot } from '../lib/server/projectContext';
+
+const args = process.argv.slice(2);
+const command = args[0];
+
+function printHelp() {
+  console.log(`
+uplostudio - Visual editor for JSON-based pages
+
+Requirements:
+  - Bun (https://bun.sh)
+
+Usage:
+  uplostudio <command> [options]
+
+Commands:
+  dev       Start development server with hot reload
+  build     Build static HTML files for production
+  init      Initialize a new project
+
+Examples:
+  uplostudio dev                    Start dev server in current directory
+  uplostudio build                  Build static files to ./dist
+  uplostudio init my-project        Create new project in ./my-project
+`);
+}
+
+async function runDev() {
+  const projectRoot = process.cwd();
+
+  // Validate project structure
+  if (!existsSync(join(projectRoot, 'pages'))) {
+    console.error('❌ No pages directory found. Are you in a valid project directory?');
+    console.error('   Run "uplostudio init <project-name>" to create a new project.');
+    process.exit(1);
+  }
+
+  // Set project root for path resolution
+  setProjectRoot(projectRoot);
+
+  console.log(`📁 Project root: ${projectRoot}`);
+
+  // Import and run the server (it handles all initialization internally)
+  await import('../entries/server-router');
+}
+
+async function runBuild() {
+  const projectRoot = process.cwd();
+
+  // Validate project structure
+  if (!existsSync(join(projectRoot, 'pages'))) {
+    console.error('❌ No pages directory found. Are you in a valid project directory?');
+    process.exit(1);
+  }
+
+  // Set project root for path resolution
+  setProjectRoot(projectRoot);
+
+  console.log(`📁 Building project: ${projectRoot}`);
+
+  // Import and run build
+  await import('../build-static.ts');
+}
+
+async function runInit(projectName?: string) {
+  if (!projectName) {
+    console.error('❌ Please provide a project name: uplostudio init <project-name>');
+    process.exit(1);
+  }
+
+  const projectPath = resolve(process.cwd(), projectName);
+
+  if (existsSync(projectPath)) {
+    console.error(`❌ Directory "${projectName}" already exists.`);
+    process.exit(1);
+  }
+
+  console.log(`\n🚀 Creating new uplostudio project: ${projectName}\n`);
+
+  // Create project structure
+  mkdirSync(projectPath, { recursive: true });
+  mkdirSync(join(projectPath, 'pages'));
+  mkdirSync(join(projectPath, 'components'));
+  mkdirSync(join(projectPath, 'fonts'));
+  mkdirSync(join(projectPath, 'images'));
+
+  // Create default project.config.json
+  const defaultConfig = {
+    fonts: [],
+    editor: {
+      theme: 'dark'
+    }
+  };
+  writeFileSync(
+    join(projectPath, 'project.config.json'),
+    JSON.stringify(defaultConfig, null, 2)
+  );
+
+  // Create default colors.json
+  const defaultColors = {
+    default: 'light',
+    themes: {
+      light: {
+        label: 'Light',
+        colors: {
+          text: '#1f2937',
+          bg: '#ffffff'
+        }
+      }
+    }
+  };
+  writeFileSync(
+    join(projectPath, 'colors.json'),
+    JSON.stringify(defaultColors, null, 2)
+  );
+
+  // Create package.json for deployment
+  const packageJson = {
+    name: projectName,
+    version: '1.0.0',
+    private: true,
+    scripts: {
+      dev: 'uplostudio dev',
+      build: 'uplostudio build',
+    },
+    dependencies: {
+      uplostudio: '^1.0.3'
+    }
+  };
+  writeFileSync(
+    join(projectPath, 'package.json'),
+    JSON.stringify(packageJson, null, 2)
+  );
+
+  // Create .gitignore
+  const gitignore = `# Dependencies
+node_modules/
+
+# Build output
+dist/
+
+# OS files
+.DS_Store
+`;
+  writeFileSync(
+    join(projectPath, '.gitignore'),
+    gitignore
+  );
+
+  // Create netlify.toml
+  const netlifyConfig = `[build]
+  command = "bun install && bun run build"
+  publish = "dist"
+
+[build.environment]
+  BUN_VERSION = "1"
+`;
+  writeFileSync(
+    join(projectPath, 'netlify.toml'),
+    netlifyConfig
+  );
+
+  // Create vercel.json
+  const vercelConfig = {
+    buildCommand: 'bun run build',
+    outputDirectory: 'dist',
+    installCommand: 'bun install'
+  };
+  writeFileSync(
+    join(projectPath, 'vercel.json'),
+    JSON.stringify(vercelConfig, null, 2)
+  );
+
+  // Create wrangler.toml for Cloudflare Pages
+  const cloudflareConfig = `name = "${projectName}"
+compatibility_date = "2024-01-01"
+pages_build_output_dir = "dist"
+
+[build]
+command = "bun install && bun run build"
+`;
+  writeFileSync(
+    join(projectPath, 'wrangler.toml'),
+    cloudflareConfig
+  );
+
+  // Create default index page
+  const defaultPage = {
+    meta: {
+      title: 'Your Project Title',
+      description: 'Your Project Description',
+      keywords: '',
+      ogTitle: 'Your Project Title',
+      ogDescription: 'Your Project Description',
+      ogType: 'website'
+    },
+    root: {
+      type: 'node',
+      tag: 'div',
+      style: {
+        base: {
+          padding: '40px'
+        },
+        tablet: {},
+        mobile: {}
+      },
+      children: [
+        {
+          type: 'node',
+          tag: 'h1',
+          style: {
+            base: {}
+          },
+          children: 'Hello'
+        }
+      ]
+    }
+  };
+  writeFileSync(
+    join(projectPath, 'pages', 'index.json'),
+    JSON.stringify(defaultPage, null, 2)
+  );
+
+  console.log('✅ Created project structure:');
+  console.log(`   ${projectName}/`);
+  console.log('   ├── pages/');
+  console.log('   │   └── index.json');
+  console.log('   ├── components/');
+  console.log('   ├── fonts/');
+  console.log('   ├── images/');
+  console.log('   ├── colors.json');
+  console.log('   ├── project.config.json');
+  console.log('   ├── package.json');
+  console.log('   ├── netlify.toml');
+  console.log('   ├── vercel.json');
+  console.log('   ├── wrangler.toml');
+  console.log('   └── .gitignore');
+  console.log('\n🎉 Project created successfully!\n');
+  console.log('Requirements:');
+  console.log('   Bun - https://bun.sh');
+  console.log('');
+  console.log('Next steps:');
+  console.log(`   cd ${projectName}`);
+  console.log('   bun install        # Install dependencies');
+  console.log('   bun run dev        # Start dev server');
+  console.log('');
+  console.log('Deploy:');
+  console.log('   Push to GitHub and connect to Netlify/Vercel/Cloudflare');
+  console.log('   Config files included - auto-detected!');
+  console.log('');
+}
+
+// Main
+switch (command) {
+  case 'dev':
+    runDev();
+    break;
+  case 'build':
+    runBuild();
+    break;
+  case 'init':
+    runInit(args[1]);
+    break;
+  case '--help':
+  case '-h':
+  case undefined:
+    printHelp();
+    break;
+  default:
+    console.error(`Unknown command: ${command}`);
+    printHelp();
+    process.exit(1);
+}

package/build-static.ts

@@ -0,0 +1,298 @@
+/**
+ * Static Site Generation Build Script
+ * Pre-generates HTML files for all pages at build time
+ */
+
+import { existsSync, readdirSync, mkdirSync, rmSync, statSync, copyFileSync } from "fs";
+import { writeFile } from "fs/promises";
+import { join } from "path";
+import {
+  loadJSONFile,
+  loadComponentDirectory,
+  mapPageNameToPath,
+  parseJSON,
+  loadI18nConfig
+} from "./lib/server/jsonLoader";
+import { generateSSRHTML } from "./lib/server/ssrRenderer";
+import { projectPaths } from "./lib/server/projectContext";
+import { loadProjectConfig } from "./lib/shared/fontLoader";
+import type { ComponentDefinition, JSONPage } from "./lib/shared/types";
+import type { SlugMap } from "./lib/shared/slugTranslator";
+
+/**
+ * Recursively copy directory contents
+ */
+function copyDirectory(src: string, dest: string): void {
+  if (!existsSync(src)) {
+    return;
+  }
+
+  if (!existsSync(dest)) {
+    mkdirSync(dest, { recursive: true });
+  }
+
+  const files = readdirSync(src);
+
+  for (const file of files) {
+    const srcPath = join(src, file);
+    const destPath = join(dest, file);
+    const stat = statSync(srcPath);
+
+    if (stat.isDirectory()) {
+      copyDirectory(srcPath, destPath);
+    } else {
+      copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+/**
+ * Get locale-specific output path for a page with translated slug support
+ * Default locale files go to root, other locales to subdirectories
+ * Uses translated slugs from meta.slugs if available
+ */
+function getLocalizedOutputPath(
+  basePath: string,
+  locale: string,
+  defaultLocale: string,
+  distDir: string,
+  slugs?: Record<string, string>
+): string {
+  // Get translated slug for this locale, or fall back to default path
+  let slug: string;
+  if (slugs && slugs[locale]) {
+    slug = slugs[locale];
+  } else if (basePath === "/") {
+    slug = "";
+  } else {
+    slug = basePath.substring(1);
+  }
+
+  // Build filename from slug
+  const fileName = slug === "" ? "index.html" : `${slug}.html`;
+
+  if (locale === defaultLocale) {
+    return `${distDir}/${fileName}`;
+  }
+  return `${distDir}/${locale}/${fileName}`;
+}
+
+/**
+ * Get display path for logging (the actual URL the user will visit)
+ */
+function getDisplayPath(
+  basePath: string,
+  locale: string,
+  defaultLocale: string,
+  slugs?: Record<string, string>
+): string {
+  // Get translated slug for this locale
+  let slug: string;
+  if (slugs && slugs[locale]) {
+    slug = slugs[locale];
+  } else if (basePath === "/") {
+    slug = "";
+  } else {
+    slug = basePath.substring(1);
+  }
+
+  if (locale === defaultLocale) {
+    return slug === "" ? "/" : `/${slug}`;
+  }
+  return slug === "" ? `/${locale}` : `/${locale}/${slug}`;
+}
+
+/**
+ * Clean dist directory, keeping only production files
+ */
+function cleanDist(): void {
+  const distDir = projectPaths.dist();
+  if (!existsSync(distDir)) {
+    mkdirSync(distDir, { recursive: true });
+    return;
+  }
+
+  const files = readdirSync(distDir);
+  let cleaned = 0;
+
+  for (const file of files) {
+    // Keep fonts, images, and icons
+    if (
+      file === "fonts" ||
+      file === "images" ||
+      file === "icons"
+    ) {
+      continue;
+    }
+
+    // Remove everything else (editor files, old HTML, etc.)
+    try {
+      const filePath = join(distDir, file);
+      const stat = statSync(filePath);
+
+      if (stat.isDirectory()) {
+        rmSync(filePath, { recursive: true, force: true });
+      } else {
+        rmSync(filePath, { force: true });
+      }
+      cleaned++;
+    } catch (error) {
+      console.warn(`⚠️  Could not remove ${file}:`, error);
+    }
+  }
+
+  if (cleaned > 0) {
+    console.log(`🧹 Cleaned ${cleaned} file(s) from dist\n`);
+  }
+}
+
+
+/**
+ * Main build function
+ */
+async function buildStaticPages(): Promise<void> {
+  console.log("🏗️  Building static HTML files...\n");
+
+  // Load project config first
+  await loadProjectConfig();
+
+  // Load i18n config for multi-locale build
+  const i18nConfig = await loadI18nConfig();
+  console.log(`🌐 Locales: ${i18nConfig.locales.map(l => l.code).join(", ")} (default: ${i18nConfig.defaultLocale})\n`);
+
+  // Clean dist directory (removes editor files, old HTML)
+  cleanDist();
+
+  // Copy fonts, images, icons, and functions directories to dist
+  console.log("📦 Copying assets...");
+  const distDir = projectPaths.dist();
+  copyDirectory(projectPaths.fonts(), join(distDir, "fonts"));
+  copyDirectory(projectPaths.images(), join(distDir, "images"));
+  copyDirectory(projectPaths.icons(), join(distDir, "icons"));
+
+  // Copy functions folder for Cloudflare Pages
+  const functionsDir = projectPaths.functions();
+  if (existsSync(functionsDir)) {
+    copyDirectory(functionsDir, join(distDir, "functions"));
+    console.log("✅ Assets and functions copied\n");
+  } else {
+    console.log("✅ Assets copied\n");
+  }
+
+  // Load all global components
+  const components = await loadComponentDirectory(projectPaths.components());
+  const globalComponents: Record<string, ComponentDefinition> = {};
+  components.forEach((value, key) => {
+    globalComponents[key] = value;
+  });
+
+  console.log(`✅ Loaded ${components.size} global component(s)\n`);
+
+  // Load all pages
+  const pagesDir = projectPaths.pages();
+  if (!existsSync(pagesDir)) {
+    console.error("❌ Pages directory not found!");
+    process.exit(1);
+  }
+
+  const pageFiles = readdirSync(pagesDir).filter((f) => f.endsWith(".json"));
+  
+  if (pageFiles.length === 0) {
+    console.warn("⚠️  No pages found in ./pages directory");
+    return;
+  }
+
+  console.log(`📄 Found ${pageFiles.length} page(s) to build\n`);
+
+  // First pass: collect all slug mappings for LocaleList SSR
+  const slugMappings: SlugMap[] = [];
+  for (const file of pageFiles) {
+    const pageName = file.replace(".json", "");
+    const basePath = mapPageNameToPath(pageName);
+    const pageContent = await loadJSONFile(join(pagesDir, file));
+    if (pageContent) {
+      try {
+        const pageData = parseJSON<JSONPage>(pageContent);
+        if (pageData.meta?.slugs) {
+          const pageId = basePath === '/' ? 'index' : basePath.substring(1);
+          slugMappings.push({ pageId, slugs: pageData.meta.slugs });
+        }
+      } catch { /* ignore parse errors in first pass */ }
+    }
+  }
+
+  let successCount = 0;
+  let errorCount = 0;
+
+  // Build each page for each locale
+  for (const file of pageFiles) {
+    const pageName = file.replace(".json", "");
+    const basePath = mapPageNameToPath(pageName);
+    const pageContent = await loadJSONFile(join(pagesDir, file));
+
+    if (!pageContent) {
+      console.warn(`⚠️  Skipping ${basePath} (empty file)`);
+      errorCount++;
+      continue;
+    }
+
+    try {
+      const pageData = parseJSON<JSONPage>(pageContent);
+
+      // Get translated slugs from page meta (if available)
+      const slugs = pageData.meta?.slugs;
+
+      // Generate HTML for each locale
+      for (const localeConfig of i18nConfig.locales) {
+        const locale = localeConfig.code;
+        const baseUrl = ""; // Empty for relative paths
+
+        // Build the URL path that will be used for this locale
+        const urlPath = getDisplayPath(basePath, locale, i18nConfig.defaultLocale, slugs);
+
+        const html = await generateSSRHTML(pageData, globalComponents, urlPath, baseUrl, true, locale, slugMappings);
+
+        // Determine locale-specific output path with translated slug
+        const outputPath = getLocalizedOutputPath(basePath, locale, i18nConfig.defaultLocale, distDir, slugs);
+
+        // Ensure directory exists
+        const outputDir = outputPath.substring(0, outputPath.lastIndexOf("/"));
+        if (outputDir && !existsSync(outputDir)) {
+          mkdirSync(outputDir, { recursive: true });
+        }
+
+        await writeFile(outputPath, html, "utf-8");
+
+        console.log(`✅ Built: ${urlPath} → ${outputPath}`);
+        successCount++;
+      }
+
+    } catch (error) {
+      console.error(`❌ Error building ${basePath}:`, error);
+      errorCount++;
+    }
+  }
+
+  console.log("\n" + "=".repeat(50));
+  console.log(`✨ Build complete!`);
+  console.log(`   ✅ Success: ${successCount}`);
+  if (errorCount > 0) {
+    console.log(`   ❌ Errors: ${errorCount}`);
+  }
+  console.log(`\n📦 Production files in /dist:`);
+  console.log(`   - *.html (Static pages with vanilla JS)`);
+  console.log(`   - fonts/ (Custom fonts)`);
+  console.log(`   - images/ (Image assets)`);
+  console.log(`   - icons/ (Favicon and icons)`);
+  if (existsSync(functionsDir)) {
+    console.log(`   - functions/ (Cloudflare Pages Functions)`);
+  }
+  console.log(`   - No React, no client-router ✓`);
+}
+
+// Run build
+buildStaticPages().catch((error) => {
+  console.error("❌ Build failed:", error);
+  process.exit(1);
+});
+

package/bunfig.toml

@@ -0,0 +1,39 @@
+# Bun Configuration for @meno/core
+# Reference: https://bun.sh/docs/bunfig
+
+[test]
+# Test framework configuration
+# Bun uses Jest-compatible test syntax
+
+# Preload DOM environment for client-side tests
+preload = ["./lib/test-utils/dom-setup.ts"]
+
+# Coverage thresholds - fail if coverage is below these percentages
+# Enforces minimum code coverage standards across the project
+# Target: 80% for production-quality codebase
+# Reference: https://bun.sh/docs/cli/test
+coverageThreshold = {
+  lines = 80,
+  functions = 80,
+  branches = 75,
+  statements = 80
+}
+
+# Test timeout in milliseconds (default: 5000)
+# Increased for async operations and complex component rendering
+timeout = 10000
+
+# Root directory for test discovery
+root = "."
+
+# Test file patterns to include
+# Bun looks for: *.test.ts, *.test.tsx, *.test.js, *.spec.ts, etc.
+testNamePattern = ".*"
+
+# Skip patterns to exclude from test discovery
+# tests/ contains Playwright E2E tests that should be run with `bunx playwright test`
+testPathIgnorePatterns = ["node_modules", "dist", "\\.next", "tests/"]
+
+# Coverage reporter options
+# Generates coverage reports for analysis
+coverageReporters = ["text", "text-summary", "html", "lcov"]