meno-core 1.0.39 → 1.0.40

package/lib/server/webflow/buildWebflow.ts

@@ -0,0 +1,415 @@
+/**
+ * Webflow Export Build Orchestrator
+ * Loads the project, renders all pages, and converts to Webflow payload.
+ * Mirrors the pattern of build-astro.ts.
+ */
+
+import { existsSync, readdirSync } from 'fs';
+import { readFile } from 'fs/promises';
+import { join } from 'path';
+import {
+  loadJSONFile,
+  loadComponentDirectory,
+  mapPageNameToPath,
+  parseJSON,
+  loadI18nConfig,
+  loadBreakpointConfig,
+  loadResponsiveScalesConfig,
+} from '../jsonLoader';
+import { renderPageSSR } from '../ssr/ssrRenderer';
+import { projectPaths } from '../projectContext';
+import { loadProjectConfig } from '../../shared/fontLoader';
+import { FileSystemCMSProvider } from '../providers/fileSystemCMSProvider';
+import { CMSService } from '../services/cmsService';
+import { isI18nValue, resolveI18nValue } from '../../shared/i18n';
+import { configService } from '../services/configService';
+import { colorService } from '../services/ColorService';
+import { variableService } from '../services/VariableService';
+import { migrateTemplatesDirectory } from '../migrateTemplates';
+import type {
+  ComponentDefinition,
+  JSONPage,
+  CMSSchema,
+  CMSItem,
+  I18nConfig,
+} from '../../shared/types';
+import { isItemDraftForLocale } from '../../shared/types';
+import type { SlugMap } from '../../shared/slugTranslator';
+import type {
+  WebflowExportPayload,
+  WebflowPage,
+  WebflowStyleClass,
+  WebflowCMSCollection,
+  WebflowCMSField,
+  WebflowAssetRef,
+} from './types';
+import { mapCMSFieldType } from './types';
+import { nodeToWebflow, type WebflowEmitContext } from './nodeToWebflow';
+import { generateThemeColorVariablesCSS, generateVariablesCSS } from '../cssGenerator';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function scanJSONFiles(dir: string, prefix: string = ''): string[] {
+  const results: string[] = [];
+  if (!existsSync(dir)) return results;
+  const entries = readdirSync(dir, { withFileTypes: true });
+  for (const entry of entries) {
+    if (entry.isFile() && entry.name.endsWith('.json')) {
+      results.push(prefix ? `${prefix}/${entry.name}` : entry.name);
+    } else if (entry.isDirectory()) {
+      results.push(...scanJSONFiles(join(dir, entry.name), prefix ? `${prefix}/${entry.name}` : entry.name));
+    }
+  }
+  return results;
+}
+
+function isCMSPage(pageData: JSONPage): boolean {
+  return pageData.meta?.source === 'cms' && !!pageData.meta?.cms;
+}
+
+function buildCMSItemPath(
+  urlPattern: string,
+  item: CMSItem,
+  slugField: string,
+  locale: string,
+  i18nConfig: I18nConfig
+): string {
+  let slug = item[slugField] ?? item._slug ?? item._id;
+  if (isI18nValue(slug)) {
+    slug = resolveI18nValue(slug, locale, i18nConfig) as string;
+  }
+  return urlPattern.replace('{{slug}}', String(slug));
+}
+
+function scanAssets(projectRoot: string): WebflowAssetRef[] {
+  const assets: WebflowAssetRef[] = [];
+  const assetDirs: Array<{ dir: string; type: WebflowAssetRef['type'] }> = [
+    { dir: 'images', type: 'image' },
+    { dir: 'fonts', type: 'font' },
+    { dir: 'videos', type: 'video' },
+    { dir: 'assets', type: 'file' },
+  ];
+
+  for (const { dir, type } of assetDirs) {
+    const fullDir = join(projectRoot, dir);
+    if (!existsSync(fullDir)) continue;
+    const files = scanJSONFiles(fullDir).map(f => f.replace('.json', '')); // scanJSONFiles works for any extension
+    // Re-scan properly for all file types
+    const allFiles = scanAllFiles(fullDir);
+    for (const file of allFiles) {
+      assets.push({
+        localPath: `${dir}/${file}`,
+        type,
+        fileName: file.split('/').pop()!,
+      });
+    }
+  }
+
+  return assets;
+}
+
+function scanAllFiles(dir: string, prefix: string = ''): string[] {
+  const results: string[] = [];
+  if (!existsSync(dir)) return results;
+  const entries = readdirSync(dir, { withFileTypes: true });
+  for (const entry of entries) {
+    const relativePath = prefix ? `${prefix}/${entry.name}` : entry.name;
+    if (entry.isFile()) {
+      results.push(relativePath);
+    } else if (entry.isDirectory()) {
+      results.push(...scanAllFiles(join(dir, entry.name), relativePath));
+    }
+  }
+  return results;
+}
+
+/**
+ * Extract CSS variables from theme and variables config
+ */
+function extractCSSVariables(
+  themeColorCSS: string,
+  variablesCSS: string
+): Record<string, string> {
+  const vars: Record<string, string> = {};
+  const regex = /--([\w-]+)\s*:\s*([^;]+)/g;
+
+  for (const css of [themeColorCSS, variablesCSS]) {
+    let match;
+    while ((match = regex.exec(css)) !== null) {
+      vars[`--${match[1]}`] = match[2].trim();
+    }
+  }
+
+  return vars;
+}
+
+// ---------------------------------------------------------------------------
+// Main export
+// ---------------------------------------------------------------------------
+
+export async function buildWebflowPayload(
+  projectRoot?: string
+): Promise<WebflowExportPayload> {
+  // 1. Setup: load project configuration
+  configService.reset();
+
+  const projectConfig = await loadProjectConfig();
+  const siteUrl = (projectConfig as { siteUrl?: string }).siteUrl?.replace(/\/$/, '') || '';
+  const i18nConfig = await loadI18nConfig();
+
+  await migrateTemplatesDirectory();
+
+  const { components } = await loadComponentDirectory(projectPaths.components());
+  const globalComponents: Record<string, ComponentDefinition> = {};
+  components.forEach((value, key) => { globalComponents[key] = value; });
+
+  const cmsProvider = new FileSystemCMSProvider(projectPaths.templates(), projectPaths.cms());
+  const cmsService = new CMSService(cmsProvider);
+  await cmsService.initialize();
+
+  const themeConfig = await colorService.loadThemeConfig();
+  const variablesConfig = await variableService.loadConfig();
+  const breakpoints = await loadBreakpointConfig();
+  const responsiveScales = await loadResponsiveScalesConfig();
+
+  await configService.load();
+
+  // 2. Scan pages
+  const pagesDir = projectPaths.pages();
+  if (!existsSync(pagesDir)) {
+    return emptyPayload();
+  }
+
+  const pageFiles = scanJSONFiles(pagesDir);
+  if (pageFiles.length === 0) {
+    return emptyPayload();
+  }
+
+  // Collect slug mappings
+  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) continue;
+    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 */ }
+  }
+
+  // 3. Render and convert pages
+  const allPages: WebflowPage[] = [];
+  const allStyleClasses = new Map<string, WebflowStyleClass>();
+
+  // Regular pages
+  for (const file of pageFiles) {
+    const pageName = file.replace('.json', '');
+    const basePath = mapPageNameToPath(pageName);
+    const pageContent = await loadJSONFile(join(pagesDir, file));
+    if (!pageContent) continue;
+
+    try {
+      const pageData = parseJSON<JSONPage>(pageContent);
+      if (pageData.meta?.draft === true) continue;
+
+      const slugs = pageData.meta?.slugs;
+
+      for (const localeConfig of i18nConfig.locales) {
+        const locale = localeConfig.code;
+        const isDefault = locale === i18nConfig.defaultLocale;
+
+        let slug: string;
+        if (slugs && slugs[locale]) {
+          slug = slugs[locale];
+        } else if (basePath === '/') {
+          slug = '';
+        } else {
+          slug = basePath.substring(1);
+        }
+
+        const urlPath = isDefault
+          ? (slug === '' ? '/' : `/${slug}`)
+          : (slug === '' ? `/${locale}` : `/${locale}/${slug}`);
+
+        // Render via SSR to resolve all props
+        const result = await renderPageSSR(
+          pageData,
+          globalComponents,
+          urlPath,
+          siteUrl,
+          locale,
+          i18nConfig,
+          slugMappings,
+          undefined,
+          cmsService,
+          true
+        );
+
+        // Convert node tree to Webflow elements
+        const ctx: WebflowEmitContext = {
+          globalComponents,
+          elementPath: [0],
+          fileType: 'page',
+          fileName: pageName,
+          breakpoints,
+          styleClasses: allStyleClasses,
+        };
+
+        const body = pageData.root || (pageData as any).node;
+        const elements = body ? nodeToWebflow(body, ctx) : [];
+
+        allPages.push({
+          title: result.title,
+          slug: slug || 'index',
+          metaDescription: typeof pageData.meta?.description === 'string' ? pageData.meta.description : undefined,
+          elements,
+          locale,
+        });
+      }
+    } catch (error: any) {
+      console.error(`Error processing ${basePath}:`, error?.message);
+    }
+  }
+
+  // CMS template pages
+  const templatesDir = projectPaths.templates();
+  const cmsCollections: WebflowCMSCollection[] = [];
+
+  if (existsSync(templatesDir)) {
+    const templateFiles = readdirSync(templatesDir).filter(f => f.endsWith('.json'));
+
+    for (const file of templateFiles) {
+      const templateContent = await loadJSONFile(join(templatesDir, file));
+      if (!templateContent) continue;
+
+      try {
+        const pageData = parseJSON<JSONPage>(templateContent);
+        if (pageData.meta?.draft === true) continue;
+        if (!isCMSPage(pageData)) continue;
+
+        const cmsSchema = pageData.meta!.cms as CMSSchema;
+        const items = await cmsService.queryItems({ collection: cmsSchema.id });
+
+        // Build Webflow CMS collection
+        const fields: WebflowCMSField[] = [];
+        if (cmsSchema.fields) {
+          for (const [fieldName, fieldDef] of Object.entries(cmsSchema.fields)) {
+            fields.push({
+              name: fieldDef.label || fieldName,
+              slug: fieldName,
+              type: mapCMSFieldType(fieldDef.type),
+              required: fieldDef.required,
+              options: fieldDef.options,
+            });
+          }
+        }
+
+        // Resolve i18n values in items for default locale
+        const resolvedItems: Record<string, unknown>[] = [];
+        for (const item of items) {
+          const resolved: Record<string, unknown> = {};
+          for (const [key, value] of Object.entries(item)) {
+            if (isI18nValue(value)) {
+              resolved[key] = resolveI18nValue(value, i18nConfig.defaultLocale, i18nConfig);
+            } else {
+              resolved[key] = value;
+            }
+          }
+          resolvedItems.push(resolved);
+        }
+
+        cmsCollections.push({
+          name: cmsSchema.id,
+          slug: cmsSchema.id,
+          urlPattern: cmsSchema.urlPattern,
+          fields,
+          items: resolvedItems,
+        });
+
+        // Render CMS item pages
+        for (const item of items) {
+          for (const localeConfig of i18nConfig.locales) {
+            const locale = localeConfig.code;
+            if (isItemDraftForLocale(item, locale)) continue;
+
+            const itemPath = buildCMSItemPath(cmsSchema.urlPattern, item, cmsSchema.slugField, locale, i18nConfig);
+            const itemWithUrl: CMSItem = { ...item, _url: itemPath };
+
+            const result = await renderPageSSR(
+              pageData,
+              globalComponents,
+              itemPath,
+              siteUrl,
+              locale,
+              i18nConfig,
+              slugMappings,
+              { cms: itemWithUrl },
+              cmsService,
+              true
+            );
+
+            const ctx: WebflowEmitContext = {
+              globalComponents,
+              elementPath: [0],
+              fileType: 'page',
+              fileName: file.replace('.json', ''),
+              breakpoints,
+              styleClasses: allStyleClasses,
+            };
+
+            const body = pageData.root || (pageData as any).node;
+            // Pass CMS item data as props so {{cms.field}} templates resolve
+            const cmsProps = { cms: itemWithUrl };
+            const elements = body ? nodeToWebflow(body, ctx, cmsProps) : [];
+
+            const slug = itemPath.startsWith('/') ? itemPath.substring(1) : itemPath;
+            allPages.push({
+              title: result.title,
+              slug,
+              elements,
+              locale,
+            });
+          }
+        }
+      } catch (error: any) {
+        console.error(`Error processing template ${file}:`, error?.message);
+      }
+    }
+  }
+
+  // 4. Collect CSS variables
+  const themeColorCSS = generateThemeColorVariablesCSS(themeConfig);
+  const variablesCSS = generateVariablesCSS(variablesConfig, breakpoints, responsiveScales);
+  const cssVariables = extractCSSVariables(themeColorCSS, variablesCSS);
+
+  // 5. Scan assets
+  const assets = scanAssets(projectPaths.project);
+
+  return {
+    version: 1,
+    exportedAt: new Date().toISOString(),
+    pages: allPages,
+    styles: Array.from(allStyleClasses.values()),
+    cms: cmsCollections,
+    assets,
+    cssVariables: Object.keys(cssVariables).length > 0 ? cssVariables : undefined,
+  };
+}
+
+function emptyPayload(): WebflowExportPayload {
+  return {
+    version: 1,
+    exportedAt: new Date().toISOString(),
+    pages: [],
+    styles: [],
+    cms: [],
+    assets: [],
+  };
+}
+

package/lib/server/webflow/index.ts

@@ -0,0 +1,22 @@
+/**
+ * Webflow Export Module
+ * Re-exports the main build function and types.
+ */
+
+export { buildWebflowPayload } from './buildWebflow';
+export { nodeToWebflow } from './nodeToWebflow';
+export { mapStylesToWebflow } from './styleMapper';
+export type {
+  WebflowExportPayload,
+  WebflowPage,
+  WebflowElement,
+  WebflowStyleClass,
+  WebflowCMSCollection,
+  WebflowCMSField,
+  WebflowAssetRef,
+  WebflowBreakpoint,
+  WebflowPseudoState,
+  WebflowFieldType,
+  CSSProperties,
+} from './types';
+export { mapCMSFieldType } from './types';