@silexlabs/silex 3.0.0-alpha.147 → 3.0.0-alpha.149

package/dist/plugins/client/client/events.d.ts

@@ -4,6 +4,7 @@ export declare enum ClientEvent {
     GRAPESJS_START = "silex:grapesjs:start",
     GRAPESJS_END = "silex:grapesjs:end",
     PUBLISH_START = "silex:publish:start",
+    PUBLISH_PAGE = "silex:publish:page",
     PUBLISH_DATA = "silex:publish:data",
     PUBLISH_END = "silex:publish:end",
     PUBLISH_ERROR = "silex:publish:error",

package/dist/plugins/client/client/events.js

@@ -21,8 +21,9 @@ export var ClientEvent;
     ClientEvent["STARTUP_END"] = "silex:startup:end";
     ClientEvent["GRAPESJS_START"] = "silex:grapesjs:start";
     ClientEvent["GRAPESJS_END"] = "silex:grapesjs:end";
-    // Sent on the editor object
+    // Sent on GrapesJs editor object (returned by silex.getEditor())
     ClientEvent["PUBLISH_START"] = "silex:publish:start";
+    ClientEvent["PUBLISH_PAGE"] = "silex:publish:page";
     ClientEvent["PUBLISH_DATA"] = "silex:publish:data";
     ClientEvent["PUBLISH_END"] = "silex:publish:end";
     ClientEvent["PUBLISH_ERROR"] = "silex:publish:error";

package/dist/plugins/client/client/events.js.map

@@ -1 +1 @@
-{"version":3,"file":"events.js","sourceRoot":"","sources":["../../../../src/ts/client/events.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,CAAN,IAAY,WAqBX;AArBD,WAAY,WAAW;IACrB,4BAA4B;IAC5B,oDAAqC,CAAA;IACrC,gDAAiC,CAAA;IACjC,sDAAuC,CAAA;IACvC,kDAAmC,CAAA;IAEnC,4BAA4B;IAC5B,oDAAqC,CAAA;IACrC,kDAAmC,CAAA;IACnC,gDAAiC,CAAA;IACjC,oDAAqC,CAAA;IACrC,gEAAiD,CAAA;IACjD,4DAA6C,CAAA;IAC7C,wDAAyC,CAAA;IACzC,4CAA6B,CAAA;IAC7B,oDAAqC,CAAA;IACrC,sDAAuC,CAAA;IACvC,gEAAiD,CAAA;IACjD,4DAA6C,CAAA;IAC7C,wEAAyD,CAAA;AAC3D,CAAC,EArBW,WAAW,KAAX,WAAW,QAqBtB"}
+{"version":3,"file":"events.js","sourceRoot":"","sources":["../../../../src/ts/client/events.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,CAAN,IAAY,WAsBX;AAtBD,WAAY,WAAW;IACrB,4BAA4B;IAC5B,oDAAqC,CAAA;IACrC,gDAAiC,CAAA;IACjC,sDAAuC,CAAA;IACvC,kDAAmC,CAAA;IAEnC,iEAAiE;IACjE,oDAAqC,CAAA;IACrC,kDAAmC,CAAA;IACnC,kDAAmC,CAAA;IACnC,gDAAiC,CAAA;IACjC,oDAAqC,CAAA;IACrC,gEAAiD,CAAA;IACjD,4DAA6C,CAAA;IAC7C,wDAAyC,CAAA;IACzC,4CAA6B,CAAA;IAC7B,oDAAqC,CAAA;IACrC,sDAAuC,CAAA;IACvC,gEAAiD,CAAA;IACjD,4DAA6C,CAAA;IAC7C,wEAAyD,CAAA;AAC3D,CAAC,EAtBW,WAAW,KAAX,WAAW,QAsBtB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@silexlabs/silex",
   "description": "Free and easy website builder for everyone.",
-  "version": "3.0.0-alpha.147",
+  "version": "3.0.0-alpha.149",
   "version:backwardcompat": "3.0.0",
   "author": {
     "name": "Alex Hoyau",
@@ -79,7 +79,7 @@
     "dev": "run-p watch start:debug start:http-server",
     "watch": "npm-watch",
     "start": "node dist/server/server/",
-    "start:debug": "cross-env SILEX_FS_ROOT=`pwd`/.silex SILEX_DEBUG=true SILEX_CLIENT_CONFIG=examples/client-config-transformers.js nodemon --watch dist/server dist/server/server/",
+    "start:debug": "cross-env SILEX_FS_ROOT=`pwd`/silex SILEX_DEBUG=true SILEX_CLIENT_CONFIG=examples/client-config-transformers.js nodemon --watch dist/server dist/server/server/",
     "start:http-server": "http-server silex/hosting",
     "prepublishOnly": "$npm_execpath run lint && $npm_execpath test && $npm_execpath run build",
     "preversion": "$npm_execpath run prepublishOnly",
@@ -101,32 +101,32 @@
     "test:watch": "$npm_execpath test -- --watch"
   },
   "dependencies": {
-    "@fontsource/ubuntu": "^5.0.8",
-    "@fortawesome/fontawesome-free": "6.4.2",
+    "@fontsource/ubuntu": "^5.0.12",
+    "@fortawesome/fontawesome-free": "6.5.1",
     "@silexlabs/grapesjs-filter-styles": "^1.0.0",
-    "@silexlabs/grapesjs-fonts": "^1.0.15",
+    "@silexlabs/grapesjs-fonts": "^1.0.16",
     "@silexlabs/grapesjs-loading": "1.0.9",
     "@silexlabs/grapesjs-storage-rate-limit": "^1.0.8",
-    "@silexlabs/grapesjs-symbols": "1.0.38",
+    "@silexlabs/grapesjs-symbols": "1.0.39",
     "@silexlabs/grapesjs-ui-suggest-classes": "1.0.23",
     "@silexlabs/silex-plugins": "1.0.10",
-    "@types/archiver": "^6.0.1",
-    "adm-zip": "0.5.10",
-    "archiver": "^6.0.1",
-    "basic-ftp": "^5.0.3",
+    "@types/archiver": "^6.0.2",
+    "adm-zip": "0.5.12",
+    "archiver": "^7.0.1",
+    "basic-ftp": "^5.0.5",
     "body-parser": "1.20.2",
     "cli": "1.0.1",
     "compression": "1.7.4",
     "cookie-parser": "1.4.6",
-    "cookie-session": "2.0.0",
+    "cookie-session": "2.1.0",
     "cors": "2.8.5",
     "cross-env": "7.0.3",
     "crypto": "^1.0.1",
-    "dotenv": "^16.3.1",
+    "dotenv": "^16.4.5",
     "express": "4.18.2",
     "express-force-ssl": "0.3.2",
     "formidable": "3.5.1",
-    "fs-extra": "^11.1.1",
+    "fs-extra": "^11.2.0",
     "grapesjs": "0.21.7",
     "grapesjs-blocks-basic": "1.0.2",
     "grapesjs-custom-code": "1.0.2",
@@ -135,14 +135,14 @@
     "grapesjs-style-border": "1.0.4",
     "grapesjs-style-filter": "^1.0.2",
     "html-minifier": "^4.0.0",
-    "lit-html": "3.0.2",
+    "lit-html": "3.1.2",
     "mkdirp": "3.0.1",
     "node_modules-path": "2.0.7",
     "node-fetch": "2.6.9",
     "normalize.css": "8.0.1",
     "object-path": "0.11.8",
     "promise-sequential": "1.1.1",
-    "sass": "1.69.5",
+    "sass": "1.72.0",
     "serve-static": "1.15.0",
     "uuid": "^9.0.1"
   },
@@ -152,13 +152,14 @@
     "@types/node": "20.9.0",
     "@typescript-eslint/eslint-plugin": "6.10.0",
     "@typescript-eslint/parser": "6.10.0",
-    "css-loader": "6.8.1",
+    "css-loader": "6.10.0",
     "eslint": "8.53.0",
     "file-loader": "6.2.0",
+    "http-server": "^14.1.1",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "livereload": "0.9.3",
-    "nodemon": "3.0.1",
+    "nodemon": "3.1.0",
     "npm-run-all": "4.1.5",
     "npm-watch": "0.11.0",
     "pug-cli": "1.0.0-alpha6",

package/src/ts/client/events.ts

@@ -17,23 +17,24 @@
 
 export enum ClientEvent {
   // Sent on the config object
-  STARTUP_START = 'silex:startup:start',
-  STARTUP_END = 'silex:startup:end',
-  GRAPESJS_START = 'silex:grapesjs:start',
-  GRAPESJS_END = 'silex:grapesjs:end',
+  STARTUP_START = 'silex:startup:start', /* Loading is over and Silex is starting */
+  STARTUP_END = 'silex:startup:end', /* Silex is ready to be used */
+  GRAPESJS_START = 'silex:grapesjs:start', /* GrapesJS is about to be initialized, it is time to edit config.grapesJsConfig */
+  GRAPESJS_END = 'silex:grapesjs:end', /* GrapesJS is ready to be used, `editor` is passed as an argument */
 
-  // Sent on the editor object
-  PUBLISH_START = 'silex:publish:start',
-  PUBLISH_DATA = 'silex:publish:data',
-  PUBLISH_END = 'silex:publish:end',
-  PUBLISH_ERROR = 'silex:publish:error',
+  // Sent on GrapesJs editor object (returned by silex.getEditor())
+  PUBLISH_START = 'silex:publish:start', /* Publication starts, you can read+write {projectData, siteSettings} */
+  PUBLISH_PAGE = 'silex:publish:page', /* Publication of a page, read+write { siteSettings, pageSettings, page } */
+  PUBLISH_DATA = 'silex:publish:data', /* Just before we send the published data to the server, read+write all publication data, check PublicationData type in types.ts */
+  PUBLISH_END = 'silex:publish:end', /* Publication is over, the argument is the publication result with {success: boolean, message: string} */
+  PUBLISH_ERROR = 'silex:publish:error', /* Publication failed, the argument is the publication result with {success: boolean, message: string} */
   PUBLISH_LOGIN_START = 'silex:publish:login:start',
   PUBLISH_LOGIN_END = 'silex:publish:login:end',
   ASSET_WRITE_END = 'silex:asset:write:end',
   WRITE_END = 'silex:write:end',
-  SETTINGS_OPEN = 'silex:settings:open',
-  SETTINGS_CLOSE = 'silex:settings:close',
-  SETTINGS_SAVE_START = 'silex:settings:save:start',
-  SETTINGS_SAVE_END = 'silex:settings:save:end',
-  SETTINGS_SECTION_CHANGE = 'silex:settings:section-change',
+  SETTINGS_OPEN = 'silex:settings:open', /* The settings dialog is opened */
+  SETTINGS_CLOSE = 'silex:settings:close', /* The settings dialog is closed */
+  SETTINGS_SAVE_START = 'silex:settings:save:start', /* The settings dialog is closed and the settings are about to be saved */
+  SETTINGS_SAVE_END = 'silex:settings:save:end', /* The settings dialog is closed and the settings are saved */
+  SETTINGS_SECTION_CHANGE = 'silex:settings:section-change', /* The user clicked on a section in the settings dialog */
 }

package/src/ts/client/grapesjs/PublicationManager.ts

@@ -212,12 +212,10 @@ export class PublicationManager {
     }
   }
 
-  async getPublicationData(): Promise<PublicationData> {
+  async getPublicationData(projectData, siteSettings): Promise<PublicationData> {
     // Data to publish
     // See assetUrl.ts which is a default transformer, always present
     this.setPublicationTransformers()
-    const projectData = this.editor.getProjectData() as WebsiteData
-    const siteSettings = this.editor.getModel().get('settings') as WebsiteSettings
     // Build the files structure
     const files: ClientSideFile[] = (await this.getHtmlFiles(siteSettings))
       .flatMap(file => ([{
@@ -280,7 +278,10 @@ export class PublicationManager {
       this.status = PublicationStatus.STATUS_PENDING
       this.job = null
       this.dialog && this.dialog.displayPending(this.job, this.status)
-      this.editor.trigger(ClientEvent.PUBLISH_START)
+      // Get the data to publish, clone the objects because plugins can change it
+      const projectData = { ...this.editor.getProjectData() as WebsiteData }
+      const siteSettings = { ...this.editor.getModel().get('settings') as WebsiteSettings }
+      this.editor.trigger(ClientEvent.PUBLISH_START, {projectData, siteSettings})
       // User and where to publish
       const storageUser = this.editor.getModel().get('user') as ConnectorUser
       if(!storageUser) throw new Error('User not logged in to a storage connector')
@@ -288,7 +289,7 @@ export class PublicationManager {
       const websiteId = this.options.websiteId
       const storageId = storageUser.storage.connectorId
       // Get the data to publish
-      const data = await this.getPublicationData()
+      const data = await this.getPublicationData(projectData, siteSettings)
       // Use the publication API
       const [url, job] = await publish({
         websiteId,
@@ -299,12 +300,6 @@ export class PublicationManager {
       })
       this.job = job
       this.status = jobStatusToPublicationStatus(this.job.status)
-      // Save the publication settings
-      // Useless because the url is useful after publish only
-      //if(this.settings.url !== url) {
-      //  this.settings.url = url
-      //  await this.editor.store(null)
-      //}
       this.trackProgress()
     } catch (e) {
       console.error('publish error', e)
@@ -324,15 +319,18 @@ export class PublicationManager {
 
   async getHtmlFiles(siteSettings: WebsiteSettings): Promise<WebsiteFile[]> {
     return Promise.all(this.editor.Pages.getAll().map(async page => {
-      const pageSettings = page.get('settings') as WebsiteSettings
+      // Clone the settings because plugins can change them
+      siteSettings = { ...siteSettings }
+      const pageSettings = { ...page.get('settings') as WebsiteSettings }
+      // Utility function to get a setting from the page or the site settings
       function getSetting(name) {
         return (pageSettings || {})[name] || (siteSettings || [])[name] || ''
       }
-      const component = page.getMainComponent()
 
       // Get the content from GrapesJS
-      const cssContent = this.editor.getCss({ component })
-      const htmlContent = this.editor.getHtml({ component })
+      const body = page.getMainComponent()
+      const cssContent = this.editor.getCss({ component: body })
+      const htmlContent = this.editor.getHtml({ component: body })
 
       // Transform the file paths
       const slug = getPageSlug(page.get('name'))
@@ -341,6 +339,14 @@ export class PublicationManager {
       const cssPermalink = transformPermalink(this.editor, cssInitialPath, ClientSideFileType.CSS, Initiator.HTML)
       const cssPath = transformPath(this.editor, cssInitialPath, ClientSideFileType.CSS)
       const htmlPath = transformPath(this.editor, htmlInitialPath, ClientSideFileType.HTML)
+
+      // Let plugins transform the data
+      this.editor.trigger(ClientEvent.PUBLISH_PAGE, { page, siteSettings, pageSettings })
+
+      // Useful data for HTML result
+      const title = getSetting('title')
+      const favicon = getSetting('favicon')
+      // Return the HTML file
       return {
         html: `<!DOCTYPE html>
 <html lang="${getSetting('lang')}">
@@ -349,9 +355,10 @@ export class PublicationManager {
 <link rel="stylesheet" href="${cssPermalink}" />
 ${siteSettings?.head || ''}
 ${pageSettings?.head || ''}
-<title>${getSetting('title')}</title>
-<link rel="icon" href="${getSetting('favicon')}" />
+${ title ? `<title>${ title }</title>` : '' }
+${ favicon ? `<link rel="icon" href="${favicon}" />` : '' }
 ${['description', 'og:title', 'og:description', 'og:image']
+    .filter(prop => !!getSetting(prop))
     .map(prop => `<meta name="${prop}" property="${prop}" content="${getSetting(prop)}"/>`)
     .join('\n')
 }

package/src/ts/client/grapesjs/page-panel.ts

@@ -52,12 +52,13 @@ function clonePage(editor, page) {
   while(pages.find(p => p.getName() === pageName)) {
     pageName = `${newPageName} ${idx++}`
   }
-  // Add page
-  const newPage = editor.Pages.add({ name: pageName })
   // Clone components
-  const clones = page.getMainComponent().components().map(c => c.clone())
-  newPage.getMainComponent()
-    .components(clones)
+  const body = page.getMainComponent().clone()
+  // Add page
+  const newPage = editor.Pages.add({
+    name: pageName,
+    component: body,
+  })
   // Select the new page
   editor.Pages.select(newPage)
 }

package/src/ts/client/grapesjs/settings.ts

@@ -99,10 +99,9 @@ export const settingsDialog = (editor, opts) => {
   editor.on('canvas:frame:load', () => {
     updateDom(editor)
   })
+  // When the page changes, update the dom
   editor.on('page', (e) => {
-    editor.Canvas.getFrameEl().addEventListener('load', () => {
-      updateDom(editor)
-    })
+    updateDom(editor)
   })
   headEditor = editor.CodeManager.createViewer({
     readOnly: false,

package/src/ts/client/index.ts

@@ -99,5 +99,7 @@ export async function start(options = {}): Promise<void> {
       document.querySelector('#gjs').classList.remove('silex-dialog-hide')
       config.emit(ClientEvent.STARTUP_END, { editor, config })
     }, 100)
+    const um = editor.UndoManager
+    um.clear()
   }
 }