@silexlabs/silex 3.7.0 → 3.9.0-canary.2

package/grapesjs-plugins/grapesjs-data-source/src/model/dataSourceManager.ts

@@ -0,0 +1,315 @@
+/*
+ * Silex website builder, free/libre no-code tool for makers.
+ * Copyright (c) 2023 lexoyo and Silex Labs foundation
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { COMPONENT_STATE_CHANGED, DATA_SOURCE_CHANGED, DATA_SOURCE_ERROR, DATA_SOURCE_READY, Filter, IDataSource, DataSourceEditorOptions, DataSourceId, Type, Field } from '../types'
+
+export const STANDARD_TYPES: Type[] = [
+  {
+    id: 'string',
+    label: 'String',
+    fields: [],
+  },
+  {
+    id: 'number',
+    label: 'Number',
+    fields: [],
+  },
+  {
+    id: 'boolean',
+    label: 'Boolean',
+    fields: [],
+  },
+  {
+    id: 'date',
+    label: 'Date',
+    fields: [],
+  },
+  {
+    id: 'unknown',
+    label: 'Unknown',
+    fields: [],
+  },
+]
+import { Component, Editor } from 'grapesjs'
+import { StoredState, onStateChange } from './state'
+import {
+  initializeDataSourceRegistry,
+  getAllDataSources,
+  addDataSource as registryAddDataSource,
+  removeDataSource as registryRemoveDataSource,
+  setDataSources,
+  dataSourcesToJSON,
+} from './dataSourceRegistry'
+import { initializePreviewDataLoader, loadPreviewData } from './previewDataLoader'
+import { initializeFilters } from '../filters'
+import { validateFilters } from '../filters'
+
+/**
+ * Data source manager state
+ */
+export interface DataSourceManagerState {
+  dataSources: IDataSource[]
+  filters: Filter[]
+  previewData: Record<DataSourceId, unknown>
+  readonly editor: Editor
+  options: DataSourceEditorOptions
+  cachedTypes: Type[]
+  cachedQueryables: Field[]
+  eventListeners: {
+    dataChangedBinded: (e?: CustomEvent) => void
+    dataSourceReadyBinded: (ds: IDataSource) => void
+    dataSourceErrorBinded: (message: string, ds: IDataSource) => void
+  }
+}
+
+// Global manager instance
+let globalManager: DataSourceManagerState | null = null
+
+/**
+ * Get all types from all connected data sources
+ */
+function getAllTypes(manager: DataSourceManagerState): Type[] {
+  return manager.dataSources
+    .filter(ds => ds.isConnected())
+    .flatMap(ds => ds.getTypes())
+    .concat(STANDARD_TYPES)
+}
+
+/**
+ * Get all queryable fields from all connected data sources
+ */
+function getAllQueryables(manager: DataSourceManagerState): Field[] {
+  return manager.dataSources
+    .filter(ds => ds.isConnected())
+    .flatMap(ds => ds.getQueryables())
+}
+
+/**
+ * Update cached types and queryables
+ */
+function updateCachedData(): void {
+  const manager = getManager()
+
+  manager.cachedTypes = getAllTypes(manager)
+  manager.cachedQueryables = getAllQueryables(manager)
+}
+
+/**
+ * Initialize the global data source manager
+ */
+export function initializeDataSourceManager(
+  dataSources: IDataSource[],
+  editor: Editor,
+  options: DataSourceEditorOptions
+): void {
+  const filters = initializeFilters(editor, options)
+
+  // Validate filters
+  validateFilters(filters)
+
+  // Initialize the registry
+  initializeDataSourceRegistry(editor)
+
+  // Set initial data sources
+  setDataSources(dataSources)
+
+  // Get current data sources
+  const currentDataSources = getAllDataSources()
+
+  // Initialize preview data loader
+  initializePreviewDataLoader(editor)
+
+  // Create bound event handlers
+  const eventListeners = {
+    dataChangedBinded: (e?: CustomEvent) => {
+      editor.trigger(DATA_SOURCE_CHANGED, e?.detail)
+    },
+    dataSourceReadyBinded: (ds: IDataSource) => {
+      updateCachedData() // Update cache when data source becomes ready
+      editor.trigger(DATA_SOURCE_READY, ds)
+      loadPreviewData(true) // force refresh when data source becomes ready
+    },
+    dataSourceErrorBinded: (message: string, ds: IDataSource) => {
+      editor.trigger(DATA_SOURCE_ERROR, message, ds)
+    },
+  }
+
+  globalManager = {
+    editor,
+    options,
+    previewData: {},
+    cachedTypes: [],
+    cachedQueryables: [],
+    dataSources: currentDataSources,
+    filters,
+    eventListeners,
+  }
+
+  // Set up event listeners
+  setupEventListeners()
+
+  // Listen for data source changes and re-setup event listeners
+  editor.on(DATA_SOURCE_CHANGED, () => {
+    setupEventListeners()
+    updateCachedData()
+    refreshDataSources()
+  })
+
+  // Update cached data initially
+  updateCachedData()
+
+  // Relay state changes to the editor
+  onStateChange((state: StoredState | null, component: Component) => {
+    loadPreviewData().then(() => editor.trigger(COMPONENT_STATE_CHANGED, { state, component }))
+  })
+}
+
+/**
+ * Get the global manager (throws if not initialized)
+ */
+export function getManager(): DataSourceManagerState {
+  if (!globalManager) {
+    throw new Error('DataSourceManager not initialized. Call initializeDataSourceManager first.')
+  }
+  return globalManager
+}
+
+/**
+ * Add a data source
+ */
+export async function addDataSource(dataSource: IDataSource): Promise<void> {
+  registryAddDataSource(dataSource)
+  setupEventListeners()
+}
+
+/**
+ * Remove a data source
+ */
+export function removeDataSource(dataSource: IDataSource): void {
+  registryRemoveDataSource(dataSource)
+  setupEventListeners()
+  loadPreviewData(true) // force refresh when data source is removed
+}
+
+/**
+ * Refresh all data sources data
+ */
+export function refreshDataSources(): void {
+  loadPreviewData(true) // force refresh when explicitly requested
+}
+
+/**
+ * Reset all data sources
+ */
+export function resetDataSources(dataSources: IDataSource[]): void {
+  setDataSources(dataSources)
+  setupEventListeners()
+}
+
+
+/**
+ * Get filters
+ */
+export function getFilters(): Filter[] {
+  return getManager().filters
+}
+
+/**
+ * Set filters
+ */
+export function setFilters(filters: Filter[]): void {
+  getManager().filters = filters
+  updateCachedData()
+}
+
+/**
+ * Get preview data
+ */
+export function getPreviewData(): Record<DataSourceId, unknown> {
+  return getManager().previewData
+}
+
+/**
+ * Set preview data
+ */
+export function setPreviewData(data: Record<DataSourceId, unknown>): void {
+  getManager().previewData = data
+}
+
+/**
+ * Get all types from all data sources
+ */
+export function getTypes(): Type[] {
+  return getAllTypes(getManager())
+}
+
+/**
+ * Get all queryable fields from all data sources
+ */
+export function getQueryables(): Field[] {
+  return getAllQueryables(getManager())
+}
+
+/**
+ * Get cached types
+ */
+export function getCachedTypes(): Type[] {
+  return getManager().cachedTypes
+}
+
+/**
+ * Get cached queryables
+ */
+export function getCachedQueryables(): Field[] {
+  return getManager().cachedQueryables
+}
+
+/**
+ * Convert to JSON for storage
+ */
+export function toJSON(): unknown[] {
+  return dataSourcesToJSON()
+}
+
+/**
+ * Set up event listeners on all data sources
+ */
+function setupEventListeners(): void {
+  const manager = getManager()
+  const dataSources = getAllDataSources()
+
+  // Update the manager with current data sources
+  manager.dataSources = [...dataSources]
+
+  // Remove all listeners
+  dataSources.forEach((dataSource: IDataSource) => {
+    if (typeof dataSource.off === 'function') {
+      dataSource.off(DATA_SOURCE_READY, manager.eventListeners.dataSourceReadyBinded)
+      dataSource.off(DATA_SOURCE_CHANGED, manager.eventListeners.dataChangedBinded)
+      dataSource.off(DATA_SOURCE_ERROR, manager.eventListeners.dataSourceErrorBinded)
+    }
+  })
+
+  // Add listeners on all data sources
+  dataSources.forEach((dataSource: IDataSource) => {
+    if (typeof dataSource.on === 'function') {
+      dataSource.on(DATA_SOURCE_READY, manager.eventListeners.dataSourceReadyBinded)
+      dataSource.on(DATA_SOURCE_CHANGED, manager.eventListeners.dataChangedBinded)
+      dataSource.on(DATA_SOURCE_ERROR, manager.eventListeners.dataSourceErrorBinded)
+    }
+  })
+}

package/grapesjs-plugins/grapesjs-data-source/src/model/dataSourceRegistry.test.ts

@@ -0,0 +1,170 @@
+/**
+ * @jest-environment jsdom
+ */
+import { jest } from '@jest/globals'
+import grapesjs, { Editor } from 'grapesjs'
+import { 
+  initializeDataSourceRegistry,
+  getAllDataSources,
+  addDataSource,
+  removeDataSource,
+  getDataSource,
+  setDataSources,
+  dataSourcesToJSON,
+} from './dataSourceRegistry'
+import { IDataSource } from '../types'
+
+// FIXME: Workaround to avoid import of lit-html which breaks unit tests
+jest.mock('lit', () => ({
+  html: jest.fn(),
+  render: jest.fn(),
+}))
+
+describe('DataSourceRegistry', () => {
+  let editor: Editor
+  let mockDataSource1: IDataSource
+  let mockDataSource2: IDataSource
+
+  beforeEach(() => {
+    editor = grapesjs.init({
+      container: document.createElement('div'),
+      components: '<div></div>',
+    })
+
+    mockDataSource1 = {
+      id: 'test1',
+      label: 'Test Data Source 1',
+      url: 'http://test1.com',
+      type: 'graphql',
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      readonly: false,
+      hidden: false,
+      connect: jest.fn(() => Promise.resolve()),
+      isConnected: jest.fn(() => true),
+      getTypes: jest.fn(() => []),
+      getQueryables: jest.fn(() => []),
+      getQuery: jest.fn(() => ''),
+      fetchValues: jest.fn(() => Promise.resolve({})),
+      on: jest.fn(),
+      off: jest.fn(),
+    }
+
+    mockDataSource2 = {
+      id: 'test2',
+      label: 'Test Data Source 2',
+      url: 'http://test2.com',
+      type: 'graphql',
+      method: 'GET',
+      headers: {},
+      readonly: true,
+      hidden: false,
+      connect: jest.fn(() => Promise.resolve()),
+      isConnected: jest.fn(() => true),
+      getTypes: jest.fn(() => []),
+      getQueryables: jest.fn(() => []),
+      getQuery: jest.fn(() => ''),
+      fetchValues: jest.fn(() => Promise.resolve({})),
+      on: jest.fn(),
+      off: jest.fn(),
+    }
+
+    initializeDataSourceRegistry(editor)
+  })
+
+  it('should initialize with empty data sources', () => {
+    expect(getAllDataSources()).toHaveLength(0)
+  })
+
+  it('should add a data source', () => {
+    addDataSource(mockDataSource1)
+    expect(getAllDataSources()).toHaveLength(1)
+    expect(getAllDataSources()[0]).toBe(mockDataSource1)
+  })
+
+  it('should remove a data source', () => {
+    addDataSource(mockDataSource1)
+    addDataSource(mockDataSource2)
+    expect(getAllDataSources()).toHaveLength(2)
+
+    removeDataSource(mockDataSource1)
+    expect(getAllDataSources()).toHaveLength(1)
+    expect(getAllDataSources()[0]).toBe(mockDataSource2)
+  })
+
+  it('should get a data source by ID', () => {
+    addDataSource(mockDataSource1)
+    addDataSource(mockDataSource2)
+
+    expect(getDataSource('test1')).toBe(mockDataSource1)
+    expect(getDataSource('test2')).toBe(mockDataSource2)
+    expect(getDataSource('nonexistent')).toBeUndefined()
+  })
+
+  it('should set all data sources', () => {
+    addDataSource(mockDataSource1)
+    expect(getAllDataSources()).toHaveLength(1)
+
+    setDataSources([mockDataSource2])
+    expect(getAllDataSources()).toHaveLength(1)
+    expect(getAllDataSources()[0]).toBe(mockDataSource2)
+  })
+
+  it('should convert data sources to JSON', () => {
+    addDataSource(mockDataSource1)
+    addDataSource(mockDataSource2)
+
+    const json = dataSourcesToJSON()
+    expect(json).toHaveLength(2)
+    expect(json[0]).toEqual({
+      id: 'test1',
+      label: 'Test Data Source 1',
+      url: 'http://test1.com',
+      type: 'graphql',
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      readonly: false,
+      hidden: false,
+    })
+    expect(json[1]).toEqual({
+      id: 'test2',
+      label: 'Test Data Source 2',
+      url: 'http://test2.com',
+      type: 'graphql',
+      method: 'GET',
+      headers: {},
+      readonly: true,
+      hidden: false,
+    })
+  })
+
+  it('should trigger DATA_SOURCE_CHANGED event when adding data source', async () => {
+    const triggerSpy = jest.spyOn(editor, 'trigger')
+    addDataSource(mockDataSource1)
+    
+    // Wait for the promise to resolve
+    await new Promise(resolve => setTimeout(resolve, 0))
+    
+    expect(triggerSpy).toHaveBeenCalledWith('data-source:changed')
+  })
+
+  it('should trigger DATA_SOURCE_CHANGED event when removing data source', () => {
+    addDataSource(mockDataSource1)
+    const triggerSpy = jest.spyOn(editor, 'trigger')
+    removeDataSource(mockDataSource1)
+    expect(triggerSpy).toHaveBeenCalledWith('data-source:changed')
+  })
+
+  it('should trigger DATA_SOURCE_CHANGED event when setting data sources', () => {
+    const triggerSpy = jest.spyOn(editor, 'trigger')
+    setDataSources([mockDataSource1])
+    expect(triggerSpy).toHaveBeenCalledWith('data-source:changed')
+  })
+
+  it('should throw error when not initialized', async () => {
+    // Create a new registry instance to test uninitialized state
+    jest.resetModules()
+    const { getAllDataSources: uninitializedGetAll } = await import('./dataSourceRegistry')
+    expect(() => uninitializedGetAll()).toThrow('DataSourceRegistry not initialized')
+  })
+})

package/grapesjs-plugins/grapesjs-data-source/src/model/dataSourceRegistry.ts

@@ -0,0 +1,117 @@
+/*
+ * Silex website builder, free/libre no-code tool for makers.
+ * Copyright (c) 2023 lexoyo and Silex Labs foundation
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { DataSourceId, IDataSource, DATA_SOURCE_CHANGED } from '../types'
+import { Editor } from 'grapesjs'
+
+/**
+ * Data source registry state
+ */
+interface DataSourceRegistryState {
+  dataSources: IDataSource[]
+  editor: Editor
+}
+
+// Global registry instance
+let globalRegistry: DataSourceRegistryState | null = null
+
+/**
+ * Initialize the data source registry
+ */
+export function initializeDataSourceRegistry(editor: Editor): void {
+  globalRegistry = {
+    dataSources: [],
+    editor,
+  }
+}
+
+/**
+ * Get the global registry (throws if not initialized)
+ */
+function getRegistry(): DataSourceRegistryState {
+  if (!globalRegistry) {
+    throw new Error('DataSourceRegistry not initialized. Call initializeDataSourceRegistry first.')
+  }
+  return globalRegistry
+}
+
+/**
+ * Get all data sources
+ */
+export function getAllDataSources(): IDataSource[] {
+  return [...getRegistry().dataSources]
+}
+
+/**
+ * Add a data source
+ */
+export function addDataSource(dataSource: IDataSource): void {
+  const registry = getRegistry()
+  registry.dataSources.push(dataSource)
+  dataSource.connect()
+    .then(() => {
+      registry.editor.trigger(DATA_SOURCE_CHANGED)
+    })
+    .catch((error) => {
+      console.error('Failed to connect data source:', error)
+      registry.editor.trigger(DATA_SOURCE_CHANGED)
+    })
+}
+
+/**
+ * Remove a data source
+ */
+export function removeDataSource(dataSource: IDataSource): void {
+  const registry = getRegistry()
+  const index = registry.dataSources.indexOf(dataSource)
+  if (index > -1) {
+    registry.dataSources.splice(index, 1)
+    registry.editor.trigger(DATA_SOURCE_CHANGED)
+  }
+}
+
+/**
+ * Get a data source by ID
+ */
+export function getDataSource(id: DataSourceId): IDataSource | undefined {
+  return getRegistry().dataSources.find(ds => ds.id === id)
+}
+
+/**
+ * Set all data sources (replaces existing)
+ */
+export function setDataSources(dataSources: IDataSource[]): void {
+  const registry = getRegistry()
+  registry.dataSources = [...dataSources]
+  registry.editor.trigger(DATA_SOURCE_CHANGED)
+}
+
+/**
+ * Convert to JSON for storage
+ */
+export function dataSourcesToJSON(): unknown[] {
+  return getRegistry().dataSources.map(ds => ({
+    id: ds.id,
+    label: ds.label,
+    url: ds.url,
+    type: ds.type,
+    method: ds.method,
+    headers: ds.headers,
+    readonly: ds.readonly,
+    hidden: ds.hidden,
+  }))
+}