@silexlabs/silex 3.0.0-alpha.49 → 3.0.0-alpha.51

package/dist/plugins/server/server/jobs.js

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.killJob = exports.jobError = exports.jobSuccess = exports.getJob = exports.startJob = void 0;
+exports.jobManager = exports.killJob = exports.jobError = exports.jobSuccess = exports.getJob = exports.startJob = void 0;
 const types_1 = require("../types");
 // Delay after which the job is deleted from memory
 const TIME_TO_KEEP_AFTER_STOP = 60 * 10 * 1000; // 10 min
@@ -72,4 +72,6 @@ function end(id, status, message = '') {
     }
     return false;
 }
+// Export the job manager
+exports.jobManager = { startJob, jobSuccess, jobError };
 //# sourceMappingURL=jobs.js.map

package/dist/plugins/server/server/jobs.js.map

@@ -1 +1 @@
-{"version":3,"file":"jobs.js","sourceRoot":"","sources":["../../../../src/ts/server/jobs.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;GAeG;;;AAEH,oCAAoD;AAEpD,mDAAmD;AACnD,MAAM,uBAAuB,GAAG,EAAE,GAAC,EAAE,GAAC,IAAI,CAAA,CAAC,SAAS;AAEpD,2BAA2B;AAC3B,MAAM,IAAI,GAAG,IAAI,KAAK,EAAW,CAAA;AAEjC,0CAA0C;AAC1C,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,CAAA;AAErD,2BAA2B;AAC3B,IAAI,SAAS,GAAG,CAAC,CAAA;AAEjB,mBAAmB;AACnB,SAAgB,QAAQ,CAAC,OAAO,GAAG,EAAE;IACnC,MAAM,KAAK,GAAG,GAAG,UAAU,IAAI,EAAE,SAAS,EAAE,CAAA;IAC5C,MAAM,GAAG,GAAY;QACnB,KAAK;QACL,MAAM,EAAE,iBAAS,CAAC,WAAW;QAC7B,OAAO,EAAE,OAAO;KACjB,CAAA;IACD,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IACd,OAAO,GAAG,CAAA;AACZ,CAAC;AATD,4BASC;AAED,6BAA6B;AAC7B,SAAgB,MAAM,CAAC,EAAS;IAC9B,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,EAAE,CAAC,CAAA;AAC3C,CAAC;AAFD,wBAEC;AAGD,2BAA2B;AAC3B,SAAgB,UAAU,CAAC,EAAS,EAAE,OAAO,GAAG,EAAE;IAChD,OAAO,GAAG,CAAC,EAAE,EAAE,iBAAS,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;AAC5C,CAAC;AAFD,gCAEC;AAED,yBAAyB;AACzB,SAAgB,QAAQ,CAAC,EAAS,EAAE,OAAO,GAAG,EAAE;IAC9C,OAAO,GAAG,CAAC,EAAE,EAAE,iBAAS,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;AAC1C,CAAC;AAFD,4BAEC;AAED,2BAA2B;AAC3B,sDAAsD;AACtD,SAAgB,OAAO,CAAC,GAAY;IAClC,YAAY,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;IAC1B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA;AAC5D,CAAC;AAHD,0BAGC;AAED,cAAc;AACd,SAAS,GAAG,CAAC,EAAS,EAAE,MAAiB,EAAE,OAAO,GAAG,EAAE;IACrD,MAAM,GAAG,GAAG,MAAM,CAAC,EAAE,CAAC,CAAA;IACtB,IAAG,GAAG,EAAE;QACN,GAAG,CAAC,MAAM,GAAG,MAAM,CAAA;QACnB,IAAG,OAAO;YAAE,GAAG,CAAC,OAAO,GAAG,OAAO,CAAA;QACjC,GAAG,CAAC,QAAQ,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,uBAAuB,CAAC,CAAA;QACtE,OAAO,IAAI,CAAA;KACZ;IACD,OAAO,KAAK,CAAA;AACd,CAAC"}
+{"version":3,"file":"jobs.js","sourceRoot":"","sources":["../../../../src/ts/server/jobs.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;GAeG;;;AAEH,oCAAoD;AAEpD,mDAAmD;AACnD,MAAM,uBAAuB,GAAG,EAAE,GAAC,EAAE,GAAC,IAAI,CAAA,CAAC,SAAS;AAEpD,2BAA2B;AAC3B,MAAM,IAAI,GAAG,IAAI,KAAK,EAAW,CAAA;AAEjC,0CAA0C;AAC1C,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,CAAA;AAErD,2BAA2B;AAC3B,IAAI,SAAS,GAAG,CAAC,CAAA;AAEjB,mBAAmB;AACnB,SAAgB,QAAQ,CAAC,OAAO,GAAG,EAAE;IACnC,MAAM,KAAK,GAAG,GAAG,UAAU,IAAI,EAAE,SAAS,EAAE,CAAA;IAC5C,MAAM,GAAG,GAAY;QACnB,KAAK;QACL,MAAM,EAAE,iBAAS,CAAC,WAAW;QAC7B,OAAO,EAAE,OAAO;KACjB,CAAA;IACD,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IACd,OAAO,GAAG,CAAA;AACZ,CAAC;AATD,4BASC;AAED,6BAA6B;AAC7B,SAAgB,MAAM,CAAC,EAAS;IAC9B,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,EAAE,CAAC,CAAA;AAC3C,CAAC;AAFD,wBAEC;AAGD,2BAA2B;AAC3B,SAAgB,UAAU,CAAC,EAAS,EAAE,OAAO,GAAG,EAAE;IAChD,OAAO,GAAG,CAAC,EAAE,EAAE,iBAAS,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;AAC5C,CAAC;AAFD,gCAEC;AAED,yBAAyB;AACzB,SAAgB,QAAQ,CAAC,EAAS,EAAE,OAAO,GAAG,EAAE;IAC9C,OAAO,GAAG,CAAC,EAAE,EAAE,iBAAS,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;AAC1C,CAAC;AAFD,4BAEC;AAED,2BAA2B;AAC3B,sDAAsD;AACtD,SAAgB,OAAO,CAAC,GAAY;IAClC,YAAY,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;IAC1B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA;AAC5D,CAAC;AAHD,0BAGC;AAED,cAAc;AACd,SAAS,GAAG,CAAC,EAAS,EAAE,MAAiB,EAAE,OAAO,GAAG,EAAE;IACrD,MAAM,GAAG,GAAG,MAAM,CAAC,EAAE,CAAC,CAAA;IACtB,IAAG,GAAG,EAAE;QACN,GAAG,CAAC,MAAM,GAAG,MAAM,CAAA;QACnB,IAAG,OAAO;YAAE,GAAG,CAAC,OAAO,GAAG,OAAO,CAAA;QACjC,GAAG,CAAC,QAAQ,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,uBAAuB,CAAC,CAAA;QACtE,OAAO,IAAI,CAAA;KACZ;IACD,OAAO,KAAK,CAAA;AACd,CAAC;AASD,yBAAyB;AACZ,QAAA,UAAU,GAAe,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAA"}

package/dist/plugins/server/types.d.ts

@@ -5,7 +5,6 @@ export interface PublicationSettings {
     connector?: ConnectorData;
     options?: ConnectorOptions;
     url?: string;
-    autoHomePage?: boolean;
 }
 export interface WebsiteFile {
     html: string;
@@ -137,7 +136,7 @@ export type ApiConnectorUserQuery = {
 export type ApiConnectorUserResponse = ConnectorUser;
 export declare const defaultWebsiteData: WebsiteData;
 export interface WebsiteData {
-    pages: Page[];
+    pages: any[];
     assets: Asset[];
     styles: Style[];
     settings: WebsiteSettings;
@@ -146,7 +145,7 @@ export interface WebsiteData {
     publication: PublicationSettings;
 }
 export interface PublicationData extends WebsiteData {
-    files?: WebsiteFile[];
+    files?: ClientSideFile[];
 }
 export interface WebsiteSettings {
     description?: string;
@@ -163,16 +162,6 @@ export interface Font {
     value: string;
     variants: string[];
 }
-export interface Page {
-    name?: string;
-    id: string;
-    type?: string;
-    frames: Frame[];
-    settings?: WebsiteSettings;
-    cssExt?: string;
-    htmlExt?: string;
-    slug?: string;
-}
 export interface Frame {
     component: {
         type: string;
@@ -216,13 +205,26 @@ export type Selector = string | {
 export type ConnectorId = string;
 export type ConnectorOptions = object;
 /**
- * Type for a client side file
- * @see connector/File
+ * Type for a client side file when the content is available as a string
  */
-export interface ClientSideFile {
+export interface ClientSideFileWithContent {
     path: string;
     content: string;
+    type: 'html' | 'asset' | 'css';
+}
+/**
+ * Type for a client side file when the content is in the storage connector
+ */
+export interface ClientSideFileWithSrc {
+    path: string;
+    src: string;
+    type: 'html' | 'asset' | 'css';
 }
+/**
+ * Type for a client side file
+ * @see connector/File
+ */
+export type ClientSideFile = ClientSideFileWithContent | ClientSideFileWithSrc;
 /**
  * Type for file listing
  */

package/dist/plugins/server/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/ts/types.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;GAeG;;;AAqBH,MAAa,QAAS,SAAQ,KAAK;IACY;IAA7C,YAAY,OAAe,EAAkB,cAAsB;QACjE,KAAK,CAAC,OAAO,CAAC,CAAA;QAD6B,mBAAc,GAAd,cAAc,CAAQ;QAEjE,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,cAAc,EAAE,OAAO,CAAC,CAAA;IACpD,CAAC;CACF;AALD,4BAKC;AA+CD,KAAK;AACL,cAAc;AACD,QAAA,kBAAkB,GAAgB;AAC7C,YAAY;AACZ,aAAa;AACb,aAAa;AACb,eAAe;AACf,YAAY;AACZ,cAAc;AACd,kBAAkB;CACJ,CAAA;AAyDhB,IAAY,IAEX;AAFD,WAAY,IAAI;IACd,iBAAS,CAAA;AACX,CAAC,EAFW,IAAI,oBAAJ,IAAI,QAEf;AAoDD;;GAEG;AACH,IAAY,aAGX;AAHD,WAAY,aAAa;IACvB,oCAAmB,CAAA;IACnB,oCAAmB,CAAA;AACrB,CAAC,EAHW,aAAa,6BAAb,aAAa,QAGxB;AAuDD;;GAEG;AACH,IAAY,SAIX;AAJD,WAAY,SAAS;IACnB,wCAA2B,CAAA;IAC3B,gCAAmB,CAAA;IACnB,4BAAe,CAAA;AACjB,CAAC,EAJW,SAAS,yBAAT,SAAS,QAIpB"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/ts/types.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;GAeG;;;AAoBH,MAAa,QAAS,SAAQ,KAAK;IACY;IAA7C,YAAY,OAAe,EAAkB,cAAsB;QACjE,KAAK,CAAC,OAAO,CAAC,CAAA;QAD6B,mBAAc,GAAd,cAAc,CAAQ;QAEjE,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,cAAc,EAAE,OAAO,CAAC,CAAA;IACpD,CAAC;CACF;AALD,4BAKC;AA+CD,KAAK;AACL,cAAc;AACD,QAAA,kBAAkB,GAAgB;AAC7C,YAAY;AACZ,aAAa;AACb,aAAa;AACb,eAAe;AACf,YAAY;AACZ,cAAc;AACd,kBAAkB;CACJ,CAAA;AA8ChB,IAAY,IAEX;AAFD,WAAY,IAAI;IACd,iBAAS,CAAA;AACX,CAAC,EAFW,IAAI,oBAAJ,IAAI,QAEf;AAmED;;GAEG;AACH,IAAY,aAGX;AAHD,WAAY,aAAa;IACvB,oCAAmB,CAAA;IACnB,oCAAmB,CAAA;AACrB,CAAC,EAHW,aAAa,6BAAb,aAAa,QAGxB;AAuDD;;GAEG;AACH,IAAY,SAIX;AAJD,WAAY,SAAS;IACnB,wCAA2B,CAAA;IAC3B,gCAAmB,CAAA;IACnB,4BAAe,CAAA;AACjB,CAAC,EAJW,SAAS,yBAAT,SAAS,QAIpB"}

package/dist/server/server/api/publicationApi.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStorageConnector = exports.getHostingConnector = exports.PublicationError = void 0;
 const express_1 = require("express");
 const constants_1 = require("../../constants");
-const jobs_1 = require("../jobs");
 const types_1 = require("../../types");
 const connectors_1 = require("../connectors/connectors");
 const validation_1 = require("../utils/validation");
 const events_1 = require("../events");
+const jobs_1 = require("../jobs");
 class PublicationError extends Error {
     code;
     constructor(message, code) {
@@ -66,35 +66,29 @@ function default_1(config) {
             const hostingId = (0, validation_1.requiredParam)(query.hostingId, 'hostingId in query');
             const session = (0, validation_1.requiredParam)(req['session'], 'session on express request');
             const data = body;
-            const { files, publication, assets } = data;
-            if (!files || !publication || !assets) {
-                throw new PublicationError('Missing data from request: files, publication or assets', 400);
+            const { files } = data;
+            if (!files) {
+                throw new PublicationError('Missing files in body', 400);
             }
             config.emit(events_1.ServerEvent.PUBLISH_START, data);
             const hostingConnector = await getHostingConnector(session, config, hostingId);
             const storage = await getStorageConnector(session, config, storageId);
-            const assetsFiles = await Promise.all(assets.map(async (asset) => {
-                if (!asset.path)
-                    throw new PublicationError('Missing path in asset', 400);
-                if (!asset.src)
-                    throw new PublicationError('Missing src in asset', 400);
+            const filesList = await Promise.all(files.map(async (file) => {
                 const prefix = constants_1.API_WEBSITE_ASSET_READ.replace(/^\//, '');
-                const src = asset.src.startsWith(prefix) ? asset.src.substring(prefix.length) : asset.src;
+                const fileWithContent = file;
+                const fileWithSrc = file;
+                if (!fileWithContent.content && !fileWithSrc.src)
+                    throw new PublicationError('Missing content or src in file', 400);
+                const src = fileWithSrc.src?.startsWith(prefix) ? fileWithSrc.src.substring(prefix.length) : fileWithSrc.src;
                 return {
-                    path: asset.path,
-                    content: await storage.readAsset(session, websiteId, src),
+                    path: file.path,
+                    content: fileWithContent.content ??
+                        await storage.readAsset(session, websiteId, src),
                 };
             }));
-            const filesList = files.flatMap(file => ([{
-                    path: file.htmlPath,
-                    content: file.html,
-                }, {
-                    path: file.cssPath,
-                    content: file.css,
-                }])).concat(assetsFiles);
             res.json({
                 url: await hostingConnector.getUrl(session, websiteId),
-                job: await hostingConnector.publish(session, websiteId, filesList),
+                job: await hostingConnector.publish(session, websiteId, filesList, jobs_1.jobManager),
             });
         }
         catch (err) {

package/dist/server/server/connectors/FsHosting.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FsHosting = void 0;
 const path_1 = require("path");
-const jobs_1 = require("../jobs");
 const FsStorage_1 = require("./FsStorage");
 const types_1 = require("../../types");
 class FsHosting extends FsStorage_1.FsStorage {
@@ -10,8 +9,8 @@ class FsHosting extends FsStorage_1.FsStorage {
     displayName = 'File system hosting';
     icon = 'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%202L6%2022%2018%2022%2018%207%2012%202%206%202Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M18%202L12%202%2012%208%2018%208%2018%202Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E';
     connectorType = types_1.ConnectorType.HOSTING;
-    async publish(session, id, files) {
-        const job = (0, jobs_1.startJob)(`Publishing to ${this.displayName}`);
+    async publish(session, id, files, { startJob, jobSuccess, jobError }) {
+        const job = startJob(`Publishing to ${this.displayName}`);
         job.logs = [[`Publishing to ${this.displayName}`]];
         job.errors = [[]];
         this.writeAssets(session, id, files, async ({ status, message }) => {
@@ -19,11 +18,11 @@ class FsHosting extends FsStorage_1.FsStorage {
             job.message = message;
             job.logs[0].push(message);
             if (status === types_1.JobStatus.SUCCESS) {
-                (0, jobs_1.jobSuccess)(job.jobId, message);
+                jobSuccess(job.jobId, message);
             }
             else if (status === types_1.JobStatus.ERROR) {
                 job.errors[0].push(message);
-                (0, jobs_1.jobError)(job.jobId, message);
+                jobError(job.jobId, message);
             }
         });
         return job;

package/dist/server/server/connectors/FsStorage.js

@@ -163,6 +163,7 @@ class FsStorage {
         let error = null;
         for (const fileStatus of filesStatuses) {
             const { file } = fileStatus;
+            console.log('writeAssets', file, this.options.path, id, this.options.assetsFolder, file.path);
             const path = (0, path_1.join)(this.options.path, id, this.options.assetsFolder, file.path);
             if (typeof file.content === 'string' || Buffer.isBuffer(file.content)) {
                 fileStatus.message = 'Writing';

package/dist/server/server/jobs.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.killJob = exports.jobError = exports.jobSuccess = exports.getJob = exports.startJob = void 0;
+exports.jobManager = exports.killJob = exports.jobError = exports.jobSuccess = exports.getJob = exports.startJob = void 0;
 const types_1 = require("../types");
 const TIME_TO_KEEP_AFTER_STOP = 60 * 10 * 1000;
 const jobs = new Array();
@@ -45,3 +45,4 @@ function end(id, status, message = '') {
     }
     return false;
 }
+exports.jobManager = { startJob, jobSuccess, jobError };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@silexlabs/silex",
   "description": "Free and easy website builder for everyone.",
-  "version": "3.0.0-alpha.49",
+  "version": "3.0.0-alpha.51",
   "version:backwardcompat": "3.0.0",
   "author": {
     "name": "Alex Hoyau",

package/public/silex.js

@@ -44,4 +44,27 @@ export default async function (config) {
   //     },
   //   },
   // }
+  config.addPublicationTransformers({
+    // Override how components render at publication by grapesjs
+    renderComponent(component, initialHtml) {
+      return initialHtml
+    },
+    // Override how styles render at publication by grapesjs
+    renderCssRule(rule, initialCss) {
+      return initialCss
+    },
+    // Define how pages are named
+    pageToSlug(page) {
+      return page.get('slug') ?? page.get('name') ?? 'index'
+    },
+    // Transform files after they are rendered and before they are published
+    transformFile(file) {
+      //return {
+      //  ...file,
+      //  content: 'TRANSFORMED FILE',
+      //  src: undefined,
+      //}
+      return file
+    }
+  })
 }

package/src/css/website-info.scss

@@ -6,7 +6,10 @@
   justify-content: center;
   margin-left: 10px;
   margin-right: 10px;
-  line-height: 2;
+  padding-top: 5px;
+  padding-left: 10px;
+  padding-right: 10px;
+  line-height: 1;
   min-width: 100px;
   border: 1px solid $lighterPrimaryColor;
   background-color: $darkerPrimaryColor;

package/src/ts/client/config.ts

@@ -16,10 +16,11 @@
  */
 
 import { Config } from '@silexlabs/silex-plugins'
-import { getEditorConfig } from './grapesjs'
+import { getEditor, getEditorConfig } from './grapesjs'
 import { CLIENT_CONFIG_FILE_NAME, DEFAULT_LANGUAGE, DEFAULT_WEBSITE_ID } from '../constants'
 import { ConnectorId, WebsiteId } from '../types'
-import { EditorConfig } from 'grapesjs'
+import { Editor, EditorConfig, Page } from 'grapesjs'
+import { PublicationTransformer } from './publication-transformers'
 import * as api from './api'
 
 /**
@@ -73,4 +74,23 @@ export class ClientConfig extends Config {
   initGrapesConfig() {
     this.grapesJsConfig = getEditorConfig(this.websiteId, this.storageId, this.rootUrl)
   }
+
+  /**
+   * Get grapesjs editor
+   */
+  getEditor(): Editor {
+    return getEditor()
+  }
+
+  /**
+   * Publication transformers let plugins change files before they are published
+   */
+  publicationTransformers: Array<PublicationTransformer> = []
+
+  /**
+   * Add a publication transformer(s)
+   */
+  addPublicationTransformers(transformers: PublicationTransformer | PublicationTransformer[]) {
+    this.publicationTransformers = this.publicationTransformers.concat(transformers)
+  }
 }

package/src/ts/client/events.ts

@@ -16,10 +16,13 @@
  */
 
 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',
+
+  // Sent on the editor object
   PUBLISH_START = 'silex:publish:start',
   PUBLISH_DATA = 'silex:publish:data',
   PUBLISH_END = 'silex:publish:end',

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

@@ -16,7 +16,7 @@
  */
 
 import { getPageSlug } from '../../page'
-import { ApiConnectorLoggedInPostMessage, ApiConnectorLoginQuery, ApiPublicationPublishBody, ApiPublicationPublishQuery, ApiPublicationPublishResponse, ApiPublicationStatusQuery, ApiPublicationStatusResponse, ConnectorData, ConnectorType, ConnectorUser, JobData, JobStatus, PublicationData, PublicationJobData, PublicationSettings, WebsiteData, WebsiteId, WebsiteSettings } from '../../types'
+import { ApiConnectorLoggedInPostMessage, ApiConnectorLoginQuery, ApiPublicationPublishBody, ApiPublicationPublishQuery, ApiPublicationPublishResponse, ApiPublicationStatusQuery, ApiPublicationStatusResponse, ClientSideFile, ClientSideFileWithContent, ClientSideFileWithSrc, ConnectorData, ConnectorType, ConnectorUser, JobData, JobStatus, PublicationData, PublicationJobData, PublicationSettings, WebsiteData, WebsiteFile, WebsiteId, WebsiteSettings } from '../../types'
 import { Editor, ProjectData } from 'grapesjs'
 import { PublicationUi } from './PublicationUi'
 import { getUser, logout, publicationStatus, publish } from '../api'
@@ -206,7 +206,22 @@ export class PublicationManager {
     const projectData = this.editor.getProjectData() as WebsiteData
     const siteSettings = this.editor.getModel().get('settings') as WebsiteSettings
     // Build the files structure
-    const files = await this.getFiles(siteSettings)
+    const files: ClientSideFile[] = (await this.getSiteFiles(siteSettings))
+      .flatMap(file => ([{
+        path: file.htmlPath,
+        content: file.html,
+        type: 'html',
+      } as ClientSideFile, {
+        path: file.cssPath,
+        content: file.css,
+        type: 'css',
+      } as ClientSideFile]))
+      .concat(projectData.assets.map(asset => ({
+        ...asset,
+        path: `/${asset.src}`,
+        src: asset.src,
+        type: 'asset',
+      }) as ClientSideFile))
 
     // Create the data to send to the server
     const data: PublicationData = {
@@ -253,13 +268,18 @@ export class PublicationManager {
     }
   }
 
-  async getFiles(siteSettings: WebsiteSettings) {
+  async getSiteFiles(siteSettings: WebsiteSettings): Promise<WebsiteFile[]> {
     return this.editor.Pages.getAll().map(page => {
       const pageSettings = page.get('settings') as WebsiteSettings
       function getSetting(name) {
         return (pageSettings || {})[name] || (siteSettings || [])[name] || ''
       }
       const component = page.getMainComponent()
+
+
+
+
+
       const slug = page.get('slug') || getPageSlug(page.get('name') || page.get('type'))
       return {
         html: `

package/src/ts/client/grapesjs/internal-links.ts

@@ -18,8 +18,6 @@
 import {html, render} from 'lit-html'
 import {map} from 'lit-html/directives/map.js'
 import grapesjs from 'grapesjs/dist/grapes.min.js'
-
-import { Page } from '../../types'
 import { getPageLink } from '../../page'
 
 // constants

package/src/ts/client/grapesjs/storage.ts

@@ -80,7 +80,7 @@ export const storagePlugin = (editor) => {
     handleError(err)
   })
   editor.on('asset:upload:end', (err: Error) => {
-    editor.save()
+    editor.store()
   })
   editor.on('asset:upload:error', (err: Error) => {
     handleError(err)

package/src/ts/client/index.ts

@@ -24,6 +24,7 @@
 import { ClientConfig } from './config'
 import { ClientEvent } from './events'
 import { initEditor, getEditor } from './grapesjs/index'
+import { initPublicationTransformers } from './publication-transformers'
 
 // Expose API to calling app as window.silex
 export * from './expose'
@@ -61,6 +62,9 @@ export async function start(options = {}) {
   const editor = getEditor()
   config.emit(ClientEvent.GRAPESJS_END, { editor })
 
+  // Init publication transformers
+  initPublicationTransformers(config)
+
   // Init internationalization module
   editor.I18n.setLocale(config.lang)
 

package/src/ts/client/publication-transformers.test.ts

@@ -0,0 +1,146 @@
+import { jest,  expect, describe, it, beforeEach } from '@jest/globals'
+import { Mock } from 'jest-mock'
+import {
+  transformComponents,
+  transformStyles,
+  resetTransformComponents,
+  resetTransformStyles,
+  PublicationTransformer,
+  transformPages,
+  resetTransformPages,
+  transformFiles
+} from './publication-transformers'
+import { ClientConfig } from './config'
+import GrapesJS, { Component, Editor, ObjectStrings, Page } from 'grapesjs'
+import { ClientSideFile, PublicationData } from '../types'
+
+describe('publication-transformers', () => {
+  let mockConfig: ClientConfig
+  let mockFile: ClientSideFile
+  let mockData: PublicationData
+  let transformer: PublicationTransformer
+
+  let editor: Editor
+
+  beforeEach(() => {
+    // Initialize your mocks here
+    editor = GrapesJS.init({
+      headless: true,
+      storageManager: { autoload: false },
+    })
+    expect(editor).not.toBeUndefined()
+    editor.addComponents(`
+      <nav class="parent">
+        <div class="child">Hello world</div>
+      <nav>
+    `)
+    editor.addStyle(`
+      .parent {
+        color: red;
+      }
+      .child {
+        color: blue;
+      }
+    `)
+    mockFile = {
+      path: 'test path',
+      content: 'test content',
+    } as ClientSideFile
+    mockData = {
+      files: [mockFile],
+      pages: [{} as Page],
+    } as PublicationData
+    transformer = {
+      renderComponent: jest.fn(),
+      renderCssRule: jest.fn(),
+      pageToSlug: jest.fn(),
+      transformFile: jest.fn()
+    } as PublicationTransformer
+    mockConfig = { getEditor: jest.fn(() => editor), publicationTransformers: [transformer] } as unknown as ClientConfig
+  })
+
+  it('should transform components', () => {
+    const renderComponent = transformer.renderComponent as Mock
+    renderComponent.mockReturnValue('mockHtml')
+    transformComponents(mockConfig)
+    const html = editor.getHtml()
+    expect(renderComponent).toBeCalledTimes(6)
+    const results = renderComponent.mock.calls.map(call => call[0] as Component)
+    const parent = results.find(c => c.getClasses()[0] === 'parent')
+    expect(parent).not.toBeUndefined()
+    const child = results.find(c => c.getClasses()[0] === 'child')
+    expect(child).not.toBeUndefined()
+  })
+
+  it('should reset transformed pages', () => {
+    const renderComponent = transformer.renderComponent as Mock
+    renderComponent.mockReturnValue('mockHtml')
+    transformComponents(mockConfig)
+    resetTransformComponents(mockConfig)
+    const html = editor.getHtml()
+    expect(renderComponent).toBeCalledTimes(0)
+    expect(html).toContain('Hello world')
+  })
+
+  it('should transform styles', () => {
+    const renderCssRule = transformer.renderCssRule as Mock
+    renderCssRule.mockImplementation((rule: any) => {
+      return { color: 'test'+rule.attributes.style.color } as ObjectStrings
+    })
+    transformStyles(mockConfig)
+    const css = editor.getCss()
+    expect(renderCssRule).toBeCalledTimes(2)
+    const results = renderCssRule.mock.results.map(r => r.value as ObjectStrings)
+    const parent = results.find(c => c.color === 'testred')
+    expect(parent).not.toBeUndefined()
+    const child = results.find(c => c.color === 'testblue')
+    expect(child).not.toBeUndefined()
+    expect(css).toContain('color:test')
+    expect(css).not.toContain('color:blue')
+  })
+
+  it('should reset transformed styles', () => {
+    const renderCssRule = transformer.renderCssRule as Mock
+    const returned = {color: 'test'} as ObjectStrings
+    renderCssRule.mockReturnValue(returned)
+    transformStyles(mockConfig)
+    resetTransformStyles(mockConfig)
+    const css = editor.getCss()
+    expect(renderCssRule).toBeCalledTimes(0)
+    expect(css).toContain('color:blue')
+  })
+
+  it('should transform pages', () => {
+    const PAGE_SLUG = 'test page slug'
+    const pageToSlug = transformer.pageToSlug as Mock
+    pageToSlug.mockReturnValue(PAGE_SLUG)
+    transformPages(mockConfig)
+    const pages = editor.Pages.getAll()
+    expect(pageToSlug).toBeCalledTimes(1)
+    expect(pages[0].get('slug')).toBe(PAGE_SLUG)
+  })
+
+  it('should reset transformed components', () => {
+    const PAGE_SLUG = 'test page slug'
+    const pageToSlug = transformer.pageToSlug as Mock
+    pageToSlug.mockReturnValue(PAGE_SLUG)
+    transformPages(mockConfig)
+    resetTransformPages(mockConfig)
+    const pages = editor.Pages.getAll()
+    expect(pageToSlug).toBeCalledTimes(1)
+    expect(pages[0].get('slug')).not.toBe(PAGE_SLUG)
+  })
+
+  it('should transform files', () => {
+    const transformFile = transformer.transformFile as Mock
+    const returned = {path: 'test path changed', content: 'test content changed'} as ClientSideFile
+    transformFile.mockReturnValue(returned)
+    expect(mockData.files?.length).toBe(1)
+    if (mockData.files?.length) { // To avoid ! operator on mockData.files and make the lint happy
+      expect(mockData.files[0]).toBe(mockFile)
+      transformFiles(mockConfig, mockData)
+      expect(transformFile).toBeCalledTimes(1)
+      expect(mockData.files[0]).toBe(returned)
+    }
+  })
+})