vue-wswg-editor 0.0.1

package/src/util/helpers.ts

@@ -0,0 +1,176 @@
+////////////////////////////////////////////////////////////
+// File name traversal
+////////////////////////////////////////////////////////////
+
+/**
+ * File lookup utility for finding Vue components with flexible naming conventions
+ *
+ * This utility handles different naming formats (snake_case, camelCase, kebab-case, PascalCase)
+ * and various file/folder structures to provide maximum flexibility in component organization.
+ */
+
+/**
+ * Converts a string to different naming conventions
+ */
+export function generateNameVariations(name: string): string[] {
+   const variations = new Set<string>();
+
+   // Original name
+   variations.add(name);
+
+   // Convert to different formats
+   // snake_case
+   const snakeCase = name
+      .replace(/([A-Z])/g, "_$1")
+      .replace(/-/g, "_")
+      .toLowerCase()
+      .replace(/^_+/, "");
+   variations.add(snakeCase);
+
+   // kebab-case
+   const kebabCase = name
+      .replace(/([A-Z])/g, "-$1")
+      .replace(/_/g, "-")
+      .toLowerCase()
+      .replace(/^-+/, "");
+   variations.add(kebabCase);
+
+   // camelCase
+   const camelCase = name
+      .replace(/[-_](.)/g, (_, char) => char.toUpperCase())
+      .replace(/^[A-Z]/, (char) => char.toLowerCase());
+   variations.add(camelCase);
+
+   // PascalCase
+   const pascalCase = name
+      .replace(/[-_](.)/g, (_, char) => char.toUpperCase())
+      .replace(/^[a-z]/, (char) => char.toUpperCase());
+   variations.add(pascalCase);
+
+   return Array.from(variations);
+}
+
+/**
+ * Generates file path patterns to try for a given block name and optional file name
+ * If fileName is provided, generates patterns using variations of both blockName (for directory) and fileName (for file)
+ * If fileName is not provided, uses blockName variations for both directory and file
+ *
+ * @param basePath - Base path (e.g., "@page-builder/blocks/")
+ * @param blockName - Block name in any format (e.g., "heroSection", "hero-section")
+ * @param fileName - Optional file name (e.g., "options.ts", "fields.ts"). If not provided, uses blockName
+ * @returns Array of path patterns to try
+ */
+export function generateFilePathPatterns(basePath: string, blockName: string, fileName?: string): string[] {
+   const patterns: string[] = [];
+
+   // Generate name variations for blockName (directory) and fileName (file)
+   const blockNameVariations = generateNameVariations(blockName);
+   const fileNameVariations = fileName ? generateNameVariations(fileName.replace(/\.\w+$/, "")) : blockNameVariations;
+   const fileExtension = fileName ? fileName.split(".").pop() || "" : "vue";
+
+   // For each block name variation (directory), try each file name variation
+   for (const blockVariation of blockNameVariations) {
+      // Convert block variation to different cases for directory
+      const blockKebab = blockVariation
+         .replace(/([A-Z])/g, "-$1")
+         .replace(/_/g, "-")
+         .toLowerCase()
+         .replace(/^-+/, "");
+      const blockPascal = blockVariation
+         .replace(/[-_](.)/g, (_, char) => char.toUpperCase())
+         .replace(/^[a-z]/, (char) => char.toUpperCase());
+      const blockCamel = blockVariation
+         .replace(/[-_](.)/g, (_, char) => char.toUpperCase())
+         .replace(/^[A-Z]/, (char) => char.toLowerCase());
+      const blockSnake = blockVariation
+         .replace(/([A-Z])/g, "_$1")
+         .replace(/-/g, "_")
+         .toLowerCase();
+
+      for (const fileVariation of fileNameVariations) {
+         // Convert file variation to different cases
+         const fileKebab = fileVariation
+            .replace(/([A-Z])/g, "-$1")
+            .replace(/_/g, "-")
+            .toLowerCase()
+            .replace(/^-+/, "");
+         const filePascal = fileVariation
+            .replace(/[-_](.)/g, (_, char) => char.toUpperCase())
+            .replace(/^[a-z]/, (char) => char.toUpperCase());
+         const fileCamel = fileVariation
+            .replace(/[-_](.)/g, (_, char) => char.toUpperCase())
+            .replace(/^[A-Z]/, (char) => char.toLowerCase());
+         const fileSnake = fileVariation
+            .replace(/([A-Z])/g, "_$1")
+            .replace(/-/g, "_")
+            .toLowerCase();
+
+         // Generate patterns: {blockVariation}/{fileVariation}.{ext}
+         patterns.push(`${basePath}${blockKebab}/${fileKebab}.${fileExtension}`);
+         patterns.push(`${basePath}${blockKebab}/${filePascal}.${fileExtension}`);
+         patterns.push(`${basePath}${blockKebab}/${fileCamel}.${fileExtension}`);
+         patterns.push(`${basePath}${blockKebab}/${fileSnake}.${fileExtension}`);
+
+         patterns.push(`${basePath}${blockPascal}/${fileKebab}.${fileExtension}`);
+         patterns.push(`${basePath}${blockPascal}/${filePascal}.${fileExtension}`);
+         patterns.push(`${basePath}${blockPascal}/${fileCamel}.${fileExtension}`);
+         patterns.push(`${basePath}${blockPascal}/${fileSnake}.${fileExtension}`);
+
+         patterns.push(`${basePath}${blockCamel}/${fileKebab}.${fileExtension}`);
+         patterns.push(`${basePath}${blockCamel}/${filePascal}.${fileExtension}`);
+         patterns.push(`${basePath}${blockCamel}/${fileCamel}.${fileExtension}`);
+         patterns.push(`${basePath}${blockCamel}/${fileSnake}.${fileExtension}`);
+
+         patterns.push(`${basePath}${blockSnake}/${fileKebab}.${fileExtension}`);
+         patterns.push(`${basePath}${blockSnake}/${filePascal}.${fileExtension}`);
+         patterns.push(`${basePath}${blockSnake}/${fileCamel}.${fileExtension}`);
+         patterns.push(`${basePath}${blockSnake}/${fileSnake}.${fileExtension}`);
+      }
+   }
+
+   // Remove duplicates and return
+   return [...new Set(patterns)];
+}
+/**
+ * Converts a any type of string to camelCase
+ * e.g., "hero_section" or "HeroSection" or "hero-section" or "heroSection" -> "HeroSection"
+ * e.g., "component_not_found" or "ComponentNotFound" or "component-not-found" or "componentNotFound" -> "ComponentNotFound"
+ */
+export function toCamelCase(input: string): string {
+   if (!input) return "";
+
+   // Replace all non-alphanumeric characters with spaces
+   const cleaned = input.replace(/[^a-zA-Z0-9]+/g, " ").trim();
+
+   // Split on spaces or uppercase-to-lowercase boundaries
+   const parts = cleaned.split(/\s+/).flatMap((part) => part.split(/([A-Z][a-z]*)/).filter(Boolean));
+
+   if (parts.length === 0) return "";
+
+   return (
+      parts[0].toLowerCase() +
+      parts
+         .slice(1)
+         .map((p) => p.charAt(0).toUpperCase() + p.slice(1).toLowerCase())
+         .join("")
+   );
+}
+
+export function toNiceName(input: string): string {
+   if (!input) return "";
+
+   // Replace underscores and hyphens with spaces
+   const cleaned = input.replace(/[_-]/g, " ");
+
+   // Split on uppercase-to-lowercase boundaries (e.g., "FaqSection" -> ["Faq", "Section"])
+   // This regex finds positions where a lowercase letter is followed by an uppercase letter
+   const parts = cleaned
+      .replace(/([a-z])([A-Z])/g, "$1 $2")
+      .split(/\s+/)
+      .filter(Boolean);
+
+   if (parts.length === 0) return "";
+
+   // Capitalize first letter of each word and join with spaces
+   return parts.map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase()).join(" ");
+}

package/src/util/registry.ts

@@ -0,0 +1,149 @@
+import { ref, shallowRef, type Ref } from "vue";
+import type { EditorFieldConfig } from "./fieldConfig";
+import type { Block } from "../types/Block";
+import type { Layout } from "../types/Layout";
+import { generateNameVariations, generateFilePathPatterns, toCamelCase } from "./helpers";
+// Dynamic imports for all page builder blocks and layouts
+// IMPORTANT: These globs use the @page-builder alias which must be configured in the CONSUMING APP's vite.config.ts
+// The globs are evaluated by the consuming app's Vite build, so they resolve relative to the consuming app's project root
+// The consuming app should have: "@page-builder": fileURLToPath(new URL("../page-builder", import.meta.url))
+// Using eager: true to load all modules immediately so we can access component metadata (name, props, icon)
+const blockModules = import.meta.glob("@page-builder/blocks/**/*.vue", { eager: true });
+const blockFieldsModules = import.meta.glob("@page-builder/blocks/**/fields.ts", { eager: true });
+const layoutModules = import.meta.glob("@page-builder/layout/**/*.vue", { eager: true });
+// Load all thumbnail images - Vite will process these as assets and provide URLs
+// For images, Vite returns the URL as the default export when using eager: true
+const thumbnailModules = import.meta.glob("@page-builder/blocks/**/thumbnail.png", { eager: true });
+
+/**
+ * Registry of all page builder blocks
+ * Automatically populated from the /page-builder/blocks directory of your app
+ */
+export const pageBuilderBlocks: Ref<Record<string, Block>> = shallowRef({});
+export const pageBuilderLayouts: Ref<Record<string, Layout>> = shallowRef({});
+const pageBuilderBlockFields: Ref<Record<string, any>> = ref({});
+
+////////////////////////////////////////////////////////////
+// Methods
+////////////////////////////////////////////////////////////
+
+export function getBlocks(): Record<string, Block> {
+   return pageBuilderBlocks.value;
+}
+
+export function getLayouts(): Record<string, Layout> {
+   return pageBuilderLayouts.value;
+}
+
+/**
+ * Get the thumbnail URL for a block directory
+ * @param directory - Block directory path (e.g., "@page-builder/blocks/hero-section")
+ * @returns Thumbnail URL or undefined if not found
+ */
+export function getBlockThumbnailUrl(directory: string | undefined): string | undefined {
+   if (!directory) return undefined;
+   // Construct the thumbnail path from the directory
+   const thumbnailPath = `${directory}/thumbnail.png`;
+   // Look up the thumbnail in the preloaded modules
+   const thumbnailModule = thumbnailModules[thumbnailPath];
+   if (!thumbnailModule) return undefined;
+   // For images, Vite returns an object with a default property containing the URL
+   // When using eager: true, the module is already loaded
+   return (thumbnailModule as any).default as string | undefined;
+}
+
+export function getBlockComponent(blockType: string): Block | undefined {
+   // Generate name variations and try to find a match
+   const nameVariations = generateNameVariations(blockType);
+
+   for (const variation of nameVariations) {
+      const block = pageBuilderBlocks.value[variation];
+      if (block) {
+         return block;
+      }
+   }
+
+   return undefined;
+}
+
+function getBlockFields(blockName: string): any {
+   try {
+      // Generate path variations for options.ts file
+      const pathVariations = generateFilePathPatterns("../page-builder/blocks/", blockName, "fields.ts");
+      // Find the path that exists in the loaded modules
+      const path = pathVariations.find((path) => blockFieldsModules[path]);
+      if (path && blockFieldsModules[path]) {
+         // Get the block fields
+         const blockFields = (blockFieldsModules[path] as any).default;
+         return blockFields || {};
+      }
+      return {};
+   } catch (error) {
+      console.error("Error getting block fields for block: ", blockName, error);
+      return {};
+   }
+}
+
+export function getLayoutFields(layoutName: string): Record<string, EditorFieldConfig> {
+   // Get the data from availableLayouts
+   const layout = Object.values(pageBuilderLayouts.value).find((layout) => layout.__name === layoutName);
+   if (!layout) return {};
+
+   return layout?.fields || {};
+}
+
+function initialiseBlockFieldsRegistry(): void {
+   Object.keys(pageBuilderBlockFields.value).forEach((key) => {
+      delete pageBuilderBlockFields.value[key];
+   });
+   Object.entries(blockFieldsModules).forEach(([path, module]) => {
+      const blockFields = (module as any).default;
+      pageBuilderBlockFields.value[path] = blockFields;
+   });
+}
+
+function initialiseLayoutRegistry(): void {
+   Object.keys(pageBuilderLayouts.value).forEach((key) => {
+      delete pageBuilderLayouts.value[key];
+   });
+   Object.entries(layoutModules).forEach(([path, module]) => {
+      const layout = (module as any).default;
+      // exclude modules without name
+      if (!layout.label) return;
+      pageBuilderLayouts.value[path] = layout;
+   });
+}
+
+function initialiseBlockRegistry(): void {
+   // Clear existing registry
+   Object.keys(pageBuilderBlocks.value).forEach((key) => {
+      delete pageBuilderBlocks.value[key];
+   });
+
+   // Load all blocks from the glob pattern
+   // With eager: true, module is the actual module object, not a loader function
+   Object.entries(blockModules).forEach(([path, module]) => {
+      const component = (module as any).default;
+      if (component && component.__name) {
+         const blockType = toCamelCase(component.type || component.__name);
+         // Extract directory path from component path (e.g., "@page-builder/blocks/hero-section/hero-section.vue" -> "@page-builder/blocks/hero-section")
+         const directory = path.replace(/\/[^/]+\.vue$/, "");
+         const block: Block = {
+            fields: getBlockFields(blockType),
+            ...component, // Component can override fields
+            directory: directory, // directory path where the block component is located (e.g., "@page-builder/blocks/hero-section")
+            type: blockType,
+         };
+         pageBuilderBlocks.value[blockType] = block;
+      }
+   });
+}
+
+export function initialiseRegistry(): void {
+   initialiseLayoutRegistry();
+   initialiseBlockFieldsRegistry();
+   initialiseBlockRegistry();
+}
+
+// Initialise the registry when the module is loaded
+initialiseRegistry();

package/src/util/validation.ts

@@ -0,0 +1,110 @@
+import type { ValidatorFunction } from "./fieldConfig";
+import { getBlockComponent, getLayoutFields } from "./registry";
+import { toNiceName } from "./helpers";
+
+export function validateField(value: any, validator: ValidatorFunction) {
+   return validator(value);
+}
+
+export interface ValidationResult {
+   title: string;
+   isValid: boolean;
+   errors: Record<string, string | boolean>;
+}
+
+/**
+ * Validate all fields in the value
+ * @param value - The value to validate
+ * @param blocksKey - The key of the blocks in the value
+ * @param settingsKey - The key of the settings in the value
+ * @returns A record of validation results
+ */
+export async function validateAllFields(
+   value: any,
+   blocksKey: string = "blocks",
+   settingsKey: string = "settings"
+): Promise<Record<string, ValidationResult>> {
+   const validationResults: Record<string, ValidationResult> = {};
+
+   // Validate settings first so it appears at the top
+   const settingsResult = await validateSettings(value, settingsKey);
+   if (settingsResult.errors && Object.keys(settingsResult.errors).length > 0) {
+      validationResults[settingsKey] = settingsResult;
+   }
+
+   // Validate blocks
+   const blockResults = await validateBlocks(value, blocksKey);
+   Object.assign(validationResults, blockResults);
+
+   return validationResults;
+}
+
+async function validateSettings(value: any, settingsKey: string = "settings"): Promise<ValidationResult> {
+   const validationResult: ValidationResult = {
+      title: "Settings",
+      isValid: true,
+      errors: {},
+   };
+
+   if (!value[settingsKey]) return validationResult;
+   const layoutOptions = getLayoutFields(value[settingsKey].layout);
+
+   // Loop each field in the settings
+   for (const field in value[settingsKey]) {
+      const fieldConfig = layoutOptions[field];
+      // If the field has a validator, validate it
+      if (fieldConfig?.validator) {
+         const result = await validateField(value[settingsKey][field], fieldConfig.validator);
+         // If validation fails (returns false or a string), add to validation results
+         if (result !== true) {
+            validationResult.errors[field] = result;
+            validationResult.isValid = false;
+         }
+      }
+   }
+
+   return validationResult;
+}
+
+async function validateBlocks(value: any, blocksKey: string = "blocks"): Promise<Record<string, ValidationResult>> {
+   const validationResults: Record<string, ValidationResult> = {};
+   // Get the blocks from the value
+   const blocks = value[blocksKey];
+   if (!blocks) return validationResults;
+
+   // Loop each block
+   for (const block of blocks) {
+      // Get the block type
+      const blockType = block.type;
+      // Get the block editor fields
+      const blockComponent = getBlockComponent(blockType);
+
+      // Add validation results entry for the section
+      validationResults[blockType] = {
+         title: toNiceName(blockType),
+         isValid: true,
+         errors: {},
+      };
+
+      // Skip if no editor fields are found
+      if (Object.keys(blockComponent?.fields || {}).length === 0) {
+         continue;
+      }
+
+      // Loop each field in the block
+      for (const field in blockComponent?.fields || {}) {
+         const fieldConfig = blockComponent?.fields?.[field];
+         // If the field has a validator, validate it
+         if (fieldConfig?.validator) {
+            const result = await validateField(block[field], fieldConfig.validator);
+            // If validation fails (returns false or a string), add to validation results
+            if (result !== true) {
+               validationResults[blockType].errors[field] = result;
+               validationResults[blockType].isValid = false;
+            }
+         }
+      }
+   }
+   // Return validation results if there are any errors, otherwise return true
+   return validationResults;
+}