fix default config override config for data source

client-test.js

@@ -0,0 +1,22 @@
+import EleventyPlugin from '../client.js'
+
+// A test client
+export default function (config, options = {}) {
+  const opts = {
+    ...options,
+    dataSources: [
+      {
+        id: 'countries api ID',
+        type: 'graphql',
+        label: 'Countries API',
+        url: 'https://countries.trevorblades.com/graphql',
+        method: 'POST',
+        headers: {},
+
+      }
+    ]
+  }
+  //config.addPlugin('../client.js', opts)
+  config.addPlugin(EleventyPlugin, opts)
+  return opts
+}

package.json

@@ -11,7 +11,7 @@
   ],
   "scripts": {
     "start": "silex --client-config ./dist/client.js --server-config `pwd`/dist/server.js",
-    "dev": "SILEX_CLIENT_CONFIG=./dist/client.js SILEX_SERVER_CONFIG=`pwd`/dist/server.js SILEX_PORT=3000 SILEX_DEBUG=true SILEX_FS_ROOT=/tmp/silex/storage SILEX_FS_HOSTING_ROOT=/tmp/silex/hosting nodemon `node_modules @silexlabs/silex`/@silexlabs/silex",
+    "dev": "SILEX_CLIENT_CONFIG=./client-test.js SILEX_SERVER_CONFIG=`pwd`/dist/server.js SILEX_PORT=3000 SILEX_DEBUG=true SILEX_FS_ROOT=/tmp/silex/storage SILEX_FS_HOSTING_ROOT=/tmp/silex/hosting nodemon `node_modules @silexlabs/silex`/@silexlabs/silex",
     "build": "$npm_execpath run build:client && $npm_execpath run build:server",
     "build:watch": "nodemon -e ts,js --watch src -x \"$npm_execpath run build\"",
     "build:client": "rollup -c rollup.client.config.mjs",
@@ -27,13 +27,13 @@
     "@rollup/plugin-eslint": "^9.0.5",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.5",
-    "@typescript-eslint/eslint-plugin": "^6.13.1",
-    "@typescript-eslint/parser": "^6.13.1",
-    "eslint": "^8.54.0",
+    "@typescript-eslint/eslint-plugin": "^6.13.2",
+    "@typescript-eslint/parser": "^6.13.2",
+    "eslint": "^8.55.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "node_modules-path": "^2.0.7",
-    "nodemon": "^3.0.1",
+    "nodemon": "^3.0.2",
     "rollup": "^4.6.1",
     "rollup-plugin-tslint": "^0.2.2",
     "ts-jest": "^29.1.1",
@@ -47,7 +47,7 @@
     "lit-html": "3.0.2"
   },
   "dependencies": {
-    "@silexlabs/grapesjs-data-source": "^0.0.29",
+    "@silexlabs/grapesjs-data-source": "^0.0.30",
     "dedent": "^1.5.1",
     "deepmerge": "^4.3.1"
   },

src/client.ts

@@ -70,34 +70,38 @@ export interface Silex11tyPluginWebsiteSettings extends WebsiteSettings {
   eleventyNavigationUrl?: string,
 }
 
-export default function (config: ClientConfig, options: Partial<EleventyPluginOptions> = {}): ClientConfig {
+export default function (config: ClientConfig, options: Partial<EleventyPluginOptions> = {}) {
   // Options with default
   const opts = merge(
     getZeroConfig(config) as EleventyPluginOptions,
     options,
+    { arrayMerge: (_, sourceArray) => sourceArray }, // Do not merge arrays by concatenation, just replace if present
   ) as EleventyPluginOptions
 
-  // Add all the plugins
-  config.on('silex:grapesjs:end', () => {
-    // Wait for the editor to be ready
-    // Add the plugins can access editor.DataSourceManager
-    config.addPlugin([
-      DataSource as Plugin,
-      settings as Plugin,
-      states as Plugin,
-      filters as Plugin,
-      publication as Plugin,
-    ],
-    opts)
-  })
+  // Wait for the editor to be ready
+  // Add the plugins can access editor.DataSourceManager
+  config.addPlugin([
+    DataSource as Plugin,
+    settings as Plugin,
+    states as Plugin,
+    filters as Plugin,
+    publication as Plugin,
+  ], opts)
 
   // Get the config for the data source plugin
   const grapesJsConfig = optionsToGrapesJsConfig(opts)
 
   // Merge the initial config with GrapesJs config
   // Returns the new config
-  return merge(
-    config,
-    { grapesJsConfig },
-  ) as ClientConfig
+  config.grapesJsConfig = grapesJsConfig
+  //config.grapesJsConfig = {
+  //  ...config.grapesJsConfig,
+  //  ...grapesJsConfig,
+  //  plugins: [
+  //    ...config.grapesJsConfig.plugins ?? [],
+  //    ...grapesJsConfig.plugins,
+  //  ],
+  //} as EditorConfig
+
+  return config
 }

src/client/config.ts

@@ -6,14 +6,15 @@ import DataSourcePlugin from '@silexlabs/grapesjs-data-source'
 import { GraphQLOptions } from '@silexlabs/grapesjs-data-source/src/datasources/GraphQL'
 import { ClientConfig } from '@silexlabs/silex/src/ts/client/config'
 import { EleventyPluginOptions } from '../client'
+import { Editor, EditorConfig } from 'grapesjs'
 
 /**
  * Get the config for the data source plugin out of the client config
  */
-export function optionsToGrapesJsConfig(options: EleventyPluginOptions) {
+export function optionsToGrapesJsConfig(options: EleventyPluginOptions): EditorConfig {
   return {
     plugins: [
-      DataSourcePlugin,
+      DataSourcePlugin as (editor: Editor, options) => void,
     ],
     pluginsOpts: {
       [DataSourcePlugin.toString()]: {
@@ -36,14 +37,16 @@ export function getZeroConfig(config: ClientConfig): EleventyPluginOptions {
     // Liquid filters
     filters: 'liquid',
     // Default data source
-    dataSources: [{
-      id: 'countries',
-      type: 'graphql',
-      label: 'Countries API',
-      url: 'https://countries.trevorblades.com/graphql',
-      method: 'POST',
-      headers: {},
-    } as GraphQLOptions],
+    dataSources: [
+      {
+        id: 'countries api', // FIXME: the ID is displayed in the completion, not the label
+        type: 'graphql',
+        label: 'Countries API',
+        url: 'https://countries.trevorblades.com/graphql',
+        method: 'POST',
+        headers: {},
+      } as GraphQLOptions
+    ],
     // 11ty plugins
     fetchPlugin: {
       duration: '0s',

src/client/filters.ts

@@ -1,5 +1,6 @@
 import { Field, Filter, Options, State, getPersistantId, getStateVariableName } from '@silexlabs/grapesjs-data-source'
 import { EleventyPluginOptions } from '../client'
+import { html } from 'lit-html'
 
 export default function(config, opts: EleventyPluginOptions): void {
   config.on('silex:startup:end', () => {
@@ -28,7 +29,7 @@ export default function(config, opts: EleventyPluginOptions): void {
       widths: '',
     },
     optionsForm: (input: Field | null, options: Options) => {
-      return `
+      return html`
         <form>
           <details>
             <summary>Help</summary>

src/server.ts

@@ -7,6 +7,9 @@ module.exports = (config) => {
       {
         route: '/client.js.map',
         path: __dirname + '/../dist/client.js.map',
+      }, {
+        route: '/client.js',
+        path: __dirname + '/../dist/client.js',
       },
     ],
   })