@bagelink/blox 1.5.15 → 1.5.20

package/core/renderer.ts

@@ -1,217 +0,0 @@
-/**
- * Core Rendering Logic
- *
- * Handles the rendering of page components with proper style injection
- */
-
-import type { PageData, ComponentData } from './types'
-import { getResponsiveCSS } from '../utils/styles'
-
-/**
- * Inject responsive CSS into the page
- */
-export function injectResponsiveCSS(): void {
-	// Check if already injected
-	if (document.getElementById('blox-responsive-css')) {
-		return
-	}
-
-	const style = document.createElement('style')
-	style.id = 'blox-responsive-css'
-	style.textContent = getResponsiveCSS()
-	document.head.appendChild(style)
-}
-
-/**
- * Inject custom code into head or body
- */
-export function injectCode(code: string | undefined, target: 'head' | 'body'): void {
-	if (!code) return
-
-	const element = document.querySelector(target)
-	if (element) {
-		const div = document.createElement('div')
-		div.innerHTML = code
-		element.appendChild(div)
-	}
-}
-
-/**
- * Load a Google Font
- */
-const loadedFonts = new Set<string>()
-
-export function loadGoogleFont(fontName: string): Promise<void> {
-	if (!fontName || loadedFonts.has(fontName)) {
-		return Promise.resolve()
-	}
-
-	return new Promise((resolve, reject) => {
-		const cleanFontName = fontName.trim().replace(/\s+/g, '+')
-		const fontUrl = `https://fonts.googleapis.com/css2?family=${cleanFontName}:wght@400;500;600;700&display=swap`
-
-		const linkElement = document.createElement('link')
-		linkElement.rel = 'stylesheet'
-		linkElement.href = fontUrl
-		linkElement.setAttribute('data-font-name', fontName)
-
-		linkElement.onload = () => {
-			console.log(`✅ Font loaded: ${fontName}`)
-			loadedFonts.add(fontName)
-			resolve()
-		}
-
-		linkElement.onerror = () => {
-			console.error(`❌ Failed to load font: ${fontName}`)
-			reject(new Error(`Failed to load font: ${fontName}`))
-		}
-
-		document.head.appendChild(linkElement)
-	})
-}
-
-/**
- * Load all fonts used in components
- */
-export async function loadComponentFonts(components: ComponentData[]): Promise<void> {
-	const fontsToLoad = new Set<string>()
-
-	components.forEach((comp) => {
-		if (comp.data?.fontFamily) {
-			fontsToLoad.add(comp.data.fontFamily)
-		}
-		if (comp.data?.fontFamilyMobile) {
-			fontsToLoad.add(comp.data.fontFamilyMobile)
-		}
-	})
-
-	await Promise.all(Array.from(fontsToLoad).map(font => loadGoogleFont(font)))
-}
-
-/**
- * Apply global font to the page
- */
-export function applyGlobalFont(fontName: string): void {
-	if (!fontName) return
-
-	// Remove existing global font styles
-	const existingStyle = document.getElementById('blox-global-font')
-	if (existingStyle) {
-		existingStyle.remove()
-	}
-
-	// Apply font globally
-	const style = document.createElement('style')
-	style.id = 'blox-global-font'
-	style.textContent = `
-		body {
-			font-family: "${fontName}", sans-serif;
-		}
-		.blox-page-wrapper {
-			font-family: "${fontName}", sans-serif !important;
-		}
-		.blox-page-wrapper * {
-			font-family: inherit;
-		}
-	`
-	document.head.appendChild(style)
-
-	// Load the font
-	loadGoogleFont(fontName)
-}
-
-/**
- * Apply page settings to the document
- */
-export function applyPageSettings(pageData: PageData): void {
-	const { pageSettings } = pageData
-
-	if (!pageSettings) return
-
-	// Language and direction
-	if (pageSettings.pageLanguage) {
-		document.documentElement.lang = pageSettings.pageLanguage
-	}
-
-	if (pageSettings.pageDirection) {
-		document.documentElement.dir = pageSettings.pageDirection
-		document.body.dir = pageSettings.pageDirection
-	}
-
-	// Font
-	if (pageSettings.selectedGoogleFont) {
-		applyGlobalFont(pageSettings.selectedGoogleFont)
-	}
-
-	// Custom codes
-	injectCode(pageSettings.additionalHeadCode, 'head')
-	injectCode(pageSettings.additionalBodyCode, 'body')
-
-	// Favicon
-	if (pageSettings.customFavicon) {
-		let faviconLink = document.querySelector('link[rel="icon"]') as HTMLLinkElement
-		if (!faviconLink) {
-			faviconLink = document.createElement('link')
-			faviconLink.rel = 'icon'
-			document.head.appendChild(faviconLink)
-		}
-		faviconLink.href = pageSettings.customFavicon
-	}
-
-	// Meta tags
-	applyMetaTags(pageSettings)
-}
-
-/**
- * Apply meta tags
- */
-function applyMetaTags(settings: any): void {
-	// OG Image
-	if (settings.customOgImage) {
-		updateOrCreateMeta('og:image', settings.customOgImage, 'property')
-	}
-
-	// Keywords
-	if (settings.customKeywords) {
-		updateOrCreateMeta('keywords', settings.customKeywords)
-	}
-
-	// Robots
-	if (settings.customRobotsMeta) {
-		updateOrCreateMeta('robots', settings.customRobotsMeta)
-	}
-}
-
-/**
- * Helper to update or create meta tags
- */
-function updateOrCreateMeta(name: string, content: string, attribute: 'name' | 'property' = 'name'): void {
-	const selector = `meta[${attribute}="${name}"]`
-	let metaTag = document.querySelector(selector) as HTMLMetaElement
-
-	if (!metaTag) {
-		metaTag = document.createElement('meta')
-		metaTag.setAttribute(attribute, name)
-		document.head.appendChild(metaTag)
-	}
-
-	metaTag.content = content
-}
-
-/**
- * Initialize the page for rendering
- */
-export async function initializePage(pageData: PageData): Promise<void> {
-	// Inject responsive CSS
-	injectResponsiveCSS()
-
-	// Apply page settings
-	applyPageSettings(pageData)
-
-	// Load component fonts
-	await loadComponentFonts(pageData.components)
-
-	// Inject header and body codes
-	injectCode(pageData.header_code, 'head')
-	injectCode(pageData.body_code, 'body')
-}

package/core/types.ts

@@ -1,148 +0,0 @@
-/**
- * Core type definitions for the Blox external preview library
- */
-
-// Component data structure
-export interface ComponentData {
-	id: string
-	type: string
-	data: Record<string, any>
-}
-
-// Page structure
-export interface PageData {
-	id?: string
-	components: ComponentData[]
-	pageSettings?: PageSettings
-	header_code?: string
-	body_code?: string
-	language?: Record<string, any>
-}
-
-// Page settings
-export interface PageSettings {
-	selectedGoogleFont?: string
-	pageLanguage?: string
-	pageDirection?: 'ltr' | 'rtl'
-	additionalHeadCode?: string
-	additionalBodyCode?: string
-	customFavicon?: string
-	customOgImage?: string
-	customKeywords?: string
-	customRobotsMeta?: string
-	customAnalyticsCode?: string
-	disableGlobalHeadCode?: boolean
-	disableGlobalBodyCode?: boolean
-	disableGoogleAnalytics?: boolean
-	disableFacebookPixel?: boolean
-}
-
-// Global settings
-export interface GlobalSettings {
-	selectedGoogleFont?: string
-	pageLanguage?: string
-	pageDirection?: 'ltr' | 'rtl'
-	globalHeadCode?: string
-	globalBodyCode?: string
-	favicon?: string
-	ogImage?: string
-	siteKeywords?: string
-	googleAnalyticsId?: string
-	facebookPixelId?: string
-}
-
-// Message types for postMessage communication
-export type MessageType =
-	| 'ready'
-	| 'update'
-	| 'focus'
-	| 'highlight'
-	| 'preview'
-	| 'meta'
-	| 'delete'
-	| 'disableLinks'
-	| 'newBlock'
-
-export interface EditorMessage {
-	type: MessageType
-	message?: any
-	data?: any
-	isMobile?: boolean
-}
-
-// Component props interface
-export interface BlockProps {
-	isMobile?: boolean
-	[key: string]: any
-}
-
-// Style configuration
-export interface StyleConfig {
-	// Spacing
-	marginTop?: number
-	marginBottom?: number
-	marginTopMobile?: number
-	marginBottomMobile?: number
-	padding?: number
-	paddingMobile?: number
-
-	// Width
-	width?: number
-	widthMobile?: number
-	widthPercent?: number
-	widthPercentMobile?: number
-	fullWidth?: boolean
-	fullWidthMobile?: boolean
-
-	// Colors
-	backgroundColor?: string
-	backgroundColorMobile?: string
-	textColor?: string
-	textColorMobile?: string
-
-	// Border
-	borderWidth?: number
-	borderWidthMobile?: number
-	borderStyle?: string
-	borderStyleMobile?: string
-	borderColor?: string
-	borderColorMobile?: string
-	borderRadius?: number
-	borderRadiusMobile?: number
-
-	// Typography
-	fontFamily?: string
-	fontFamilyMobile?: string
-	center?: boolean
-	centerMobile?: boolean
-
-	// Effects
-	shadowType?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'custom'
-	shadowTypeMobile?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'custom'
-	zIndex?: number
-	zIndexMobile?: number
-
-	// Visibility
-	showDesktop?: boolean
-	showMobile?: boolean
-
-	// Custom
-	customId?: string
-	customCSS?: string
-}
-
-// Registry types
-export type ComponentConstructor = any // Vue component constructor
-
-export interface ComponentRegistry {
-	[key: string]: ComponentConstructor
-}
-
-// Renderer configuration
-export interface RendererConfig {
-	components: ComponentRegistry
-	pageData: PageData
-	isMobile?: boolean
-	previewMode?: boolean
-	editorMode?: boolean
-}

package/dist/vite.config.d.ts

@@ -1,3 +0,0 @@
-declare const _default: import('vite').UserConfigFnObject;
-export default _default;
-//# sourceMappingURL=vite.config.d.ts.map

package/dist/vite.config.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"vite.config.d.ts","sourceRoot":"","sources":["../vite.config.ts"],"names":[],"mappings":";AASA,wBAoCG"}

package/index.ts

@@ -1,33 +0,0 @@
-/**
- * Blox External Preview Library
- * Main entry point
- */
-
-// Component exports
-export * from './components'
-// Configuration exports
-export * from './config/baseComponents'
-export * from './core/communication'
-export * from './core/registry'
-
-export * from './core/renderer'
-// Core exports
-export * from './core/types'
-
-// Setup and registration helpers
-export {
-	createComponentConfig,
-	getAllComponentConfigs,
-	registerBaseComponents,
-	registerCustomComponent,
-	registerCustomComponents,
-} from './setup'
-
-export * from './utils/normalizer'
-
-// Utility exports
-export * from './utils/styles'
-
-// View exports
-export { default as ExternalPreview } from './views/ExternalPreview.vue'
-export { default as RenderPage } from './views/RenderPage.vue'

package/setup.ts

@@ -1,56 +0,0 @@
-/**
- * Blox Setup and Registration
- *
- * Handles automatic registration of base components and provides
- * configuration helpers for external projects.
- */
-
-import { baseComponentConfigs, type ComponentConfig } from './config/baseComponents'
-import { registerComponent, registerComponents } from './core/registry'
-
-/**
- * Register all base components from the library
- * Call this in your project's setup to make base components available
- */
-export function registerBaseComponents(): void {
-	const componentMap: Record<string, any> = {}
-
-	baseComponentConfigs.forEach((config) => {
-		componentMap[config.id] = config.component
-	})
-
-	registerComponents(componentMap)
-	console.log('✅ Registered base components:', Object.keys(componentMap))
-}
-
-/**
- * Get all component configurations (base + custom)
- * This returns both the Vue components and their editor schemas
- */
-export function getAllComponentConfigs(customConfigs: ComponentConfig[] = []): ComponentConfig[] {
-	return [...baseComponentConfigs, ...customConfigs]
-}
-
-/**
- * Helper to create a custom component configuration
- */
-export function createComponentConfig(config: ComponentConfig): ComponentConfig {
-	return config
-}
-
-/**
- * Register a single custom component
- */
-export function registerCustomComponent(config: ComponentConfig): void {
-	registerComponent(config.id, config.component)
-	console.log(`✅ Registered custom component: ${config.id}`)
-}
-
-/**
- * Register multiple custom components
- */
-export function registerCustomComponents(configs: ComponentConfig[]): void {
-	configs.forEach((config) => {
-		registerCustomComponent(config)
-	})
-}

package/utils/normalizer.ts

@@ -1,74 +0,0 @@
-/**
- * Data Normalization Utilities
- *
- * Normalizes component data for proper rendering
- */
-
-/**
- * Convert string values to proper types for component props
- */
-export function normalizeComponentData(data: Record<string, any>): Record<string, any> {
-	const normalized: Record<string, any> = {}
-
-	// Fields that should remain as strings even if they look like numbers
-	const stringFields = ['title', 'subTitle', 'btnTxt', 'tag', 'customId', 'height', 'url', 'href']
-
-	for (const [key, value] of Object.entries(data)) {
-		if (typeof value === 'string') {
-			// Convert string booleans to actual booleans
-			if (value === 'true') {
-				normalized[key] = true
-			} else if (value === 'false') {
-				normalized[key] = false
-			} else if (!Number.isNaN(Number(value)) && value !== '' && !stringFields.includes(key)) {
-			// Convert string numbers to numbers (but not for text fields)
-				normalized[key] = Number(value)
-			} else {
-				normalized[key] = value
-			}
-		} else {
-			normalized[key] = value
-		}
-	}
-
-	// Provide default props to avoid Vue warnings for missing required props
-	if (!normalized.items) {
-		normalized.items = []
-	}
-
-	// Ensure height is always a string if it exists
-	if (normalized.height !== undefined && typeof normalized.height === 'number') {
-		normalized.height = String(normalized.height)
-	}
-
-	if (normalized.height === 'auto') {
-		// Convert auto height strings to valid numbers for components that expect numbers
-		delete normalized.height
-	}
-
-	return normalized
-}
-
-/**
- * Deep clone an object
- */
-export function deepClone<T>(obj: T): T {
-	return JSON.parse(JSON.stringify(obj))
-}
-
-/**
- * Merge objects deeply
- */
-export function deepMerge(target: any, source: any): any {
-	const result = { ...target }
-
-	for (const key in source) {
-		if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
-			result[key] = deepMerge(result[key] || {}, source[key])
-		} else {
-			result[key] = source[key]
-		}
-	}
-
-	return result
-}