@silexlabs/silex 3.0.0-alpha.43 → 3.0.0-alpha.44

package/src/ts/client/index.ts

@@ -21,15 +21,18 @@
  *
  */
 
-import { SilexConfig } from './config'
+import { ClientConfig } from './config'
 import { ClientEvent } from './events'
 import { initEditor, getEditor } from './grapesjs/index'
 
+// Expose API to calling app as window.silex
+export * from './expose'
+
 /**
  * Start Silex, called from host HTML page with window.silex.start()
  */
 export async function start(options = {}) {
-  const config = new SilexConfig()
+  const config = new ClientConfig()
   Object.assign(config, options)
 
   // Config file in root folder which may be generated by the server
@@ -43,31 +46,46 @@ export async function start(options = {}) {
   // Notify plugins that loading is over and Silex is starting
   config.emit(ClientEvent.STARTUP_START)
 
+  // Init GrapesJS config which depend on the config file properties
+  config.initGrapesConfig()
+
   // Start grapesjs
   try{
-    await initEditor(config.grapesJsConfig, config.grapesJsPlugins)
+    await initEditor(config.grapesJsConfig)
   } catch(e) {
     console.error('Error starting Silex', e)
     throw e
   }
 
+  config.emit(ClientEvent.GRAPESJS_START)
   const editor = getEditor()
-  window['editor'] = editor
+  config.emit(ClientEvent.GRAPESJS_END, { editor })
 
   // Init internationalization module
   editor.I18n.setLocale(config.lang)
 
   // Load the site
   editor.StorageManager.setAutosave(false)
-  await editor.load(null)
-  setTimeout(() => {
-    // This needs time for grapesjs
-    editor.editor.set('changesCount', 0)
-    editor.StorageManager.setAutosave(true)
+  console.log('before load')
+  try {
+    await editor.load(null)
+  } catch(e) {
+    if(e.httpStatusCode === 401) {
+      // Unauthorized, will try to login
+    } else {
+      // Will display an error message, see in storage.ts
+    }
+  } finally {
+    console.log('after load')
+    setTimeout(() => {
+      // This needs time for grapesjs
+      editor.editor.set('changesCount', 0)
+      editor.StorageManager.setAutosave(true)
 
-    // This needs time for the loader to be hidden
-    document.querySelector('.silex-loader').classList.add('silex-dialog-hide')
-    document.querySelector('#gjs').classList.remove('silex-dialog-hide')
-    config.emit(ClientEvent.STARTUP_END, { editor, config })
-  }, 1000)
+      // This needs time for the loader to be hidden
+      document.querySelector('.silex-loader').classList.add('silex-dialog-hide')
+      document.querySelector('#gjs').classList.remove('silex-dialog-hide')
+      config.emit(ClientEvent.STARTUP_END, { editor, config })
+    }, 100)
+  }
 }

package/src/ts/constants.ts

@@ -23,7 +23,6 @@ export const WEBSITE_DATA_FILE = 'website.json'
 export const WEBSITE_META_DATA_FILE = 'meta.json'
 
 export const DEFAULT_WEBSITE_ID = 'default'
-export const DEFAULT_CONNECTOR_ID = ''
 export const DEFAULT_LANGUAGE = 'en'
 export const CLIENT_CONFIG_FILE_NAME = 'silex.js'
 
@@ -47,7 +46,7 @@ export const API_WEBSITE_WRITE = '/'
 export const API_WEBSITE_CREATE = '/'
 export const API_WEBSITE_DELETE = '/'
 export const API_WEBSITE_LIST = '/'
-export const API_WEBSITE_ASSETS_READ = 'assets/:path'
-export const API_WEBSITE_ASSETS_WRITE = 'assets'
+export const API_WEBSITE_ASSET_READ = '/assets'
+export const API_WEBSITE_ASSETS_WRITE = '/assets'
 export const API_WEBSITE_META_READ = '/meta'
 export const API_WEBSITE_META_WRITE = '/meta'

package/src/ts/plugins/client/template.ts

@@ -19,7 +19,7 @@
 //import {styleMap} from 'lit-html/directives/style-map.js'
 //import { onAll } from '@silexlabs/silex/dist/client/utils.js'
 import { onAll } from '../../client/utils.js'
-import { ServerEvent } from '../../server/events.js'
+import { ClientEvent } from '../../client/events.js'
 
 //// @ts-ignore
 //import {html, render} from '/node_modules/lit-html/lit-html.js'
@@ -38,7 +38,7 @@ export default async (config, opts: any = {}) => {
   // @ts-ignore
   const { styleMap } = await import('/node_modules/lit-html/directives/style-map.js')
 
-  config.on(ServerEvent.STARTUP_END, () => {
+  config.on(ClientEvent.GRAPESJS_END, () => {
     const editor = silex.getEditor()
     // Add the new trait to all component types
     editor.DomComponents.getTypes().map(type => {
@@ -158,7 +158,7 @@ export default async (config, opts: any = {}) => {
         // put back together
         .join('\n')
     }
-    editor.on(ServerEvent.PUBLISH_START, () => {
+    editor.on(ClientEvent.PUBLISH_START, () => {
       // Insert templates
       onAll(editor, c => {
         const template = c.get(templateKey)
@@ -186,7 +186,7 @@ export default async (config, opts: any = {}) => {
         }
       })
     })
-    editor.on(ServerEvent.PUBLISH_END, () => {
+    editor.on(ClientEvent.PUBLISH_END, () => {
       onAll(editor, c => {
         // Restore the original method
         c.toHTML = c.get('tmpHtml')

package/src/ts/plugins/server/FtpConnector.test.ts

@@ -0,0 +1,82 @@
+import { ServerConfig } from '../../server/config'
+import { expect, jest, beforeEach, afterEach, it, describe } from '@jest/globals'
+import { ConnectorType, WebsiteData, WebsiteId } from '../../types'
+import { Readable } from 'stream'
+
+const mocks = {
+  access: jest.fn(),
+  close: jest.fn(),
+  trackProgress: jest.fn(),
+  uploadFrom: jest.fn(),
+}
+function mockClient() {
+  jest.mock('basic-ftp', () => ({
+    Client: jest.fn().mockImplementation(() => mocks),
+  }))
+}
+mockClient()
+
+const FtpConnector = (await import('./FtpConnector')).default
+
+let connector
+const storageRootPath = 'dummy storageRootPath'
+const assetsFolder = 'dummy assetsFolder'
+const dummySession = {
+  [`ftp-${ConnectorType.STORAGE}`]: {
+    host: 'dummy host',
+    user: 'dummy user',
+    pass: 'dummy pass',
+    port: 1234,
+    secure: false,
+    storageRootPath,
+  },
+}
+const dummyId: WebsiteId = 'dummy id'
+const dummyWebsite: WebsiteData = {
+  pages: [],
+  assets: [],
+  styles: [],
+  settings: {},
+  fonts: [],
+  symbols: [],
+  publication: {},
+}
+
+beforeEach(() => {
+  mockClient()
+  connector = new FtpConnector({} as ServerConfig, {
+    type: ConnectorType.STORAGE,
+    assetsFolder,
+  })
+})
+
+afterEach(async () => {
+  // FIXME: This removes the mock of Client
+  //await jest.resetAllMocks()
+  // Reset each mock
+  Object.keys(mocks).forEach(key => {
+    mocks[key].mockClear()
+  })
+})
+
+describe('FtpConnector website', () => {
+  it('should write to FTP', async () => {
+    await connector.updateWebsite(dummySession, dummyId, dummyWebsite)
+    expect(mocks.uploadFrom).toHaveBeenCalledTimes(1)
+    expect(mocks.uploadFrom.mock.calls[0][0]).toBeInstanceOf(Readable)
+    expect(mocks.uploadFrom.mock.calls[0][1]).toBe(`${storageRootPath}/${dummyId}/website.json`)
+  })
+})
+
+describe('FtpConnector assets', () => {
+  it('should write an asset to FTP', async () => {
+    const assets = [{
+      path: 'dummy path',
+      content: 'dummy content',
+    }]
+    await connector.writeAssets(dummySession, dummyId, assets)
+    expect(mocks.uploadFrom).toHaveBeenCalledTimes(1)
+    expect(mocks.uploadFrom.mock.calls[0][0]).toBeInstanceOf(Readable)
+    expect(mocks.uploadFrom.mock.calls[0][1]).toBe(`${storageRootPath}/${dummyId}/${assetsFolder}/${assets[0].path}`)
+  })
+})

package/src/ts/plugins/server/FtpConnector.ts

@@ -60,16 +60,10 @@ interface FileStatus {
   status: JobStatus
 }
 
-interface FtpOptions {
-  type: ConnectorType
-  path?: string
-  authorizeUrl?: string
-  authorizePath?: string
-}
-
-interface FtpOptionsWithDefaults {
+export interface FtpOptions {
   type: ConnectorType
   path: string
+  assetsFolder: string
   authorizeUrl: string
   authorizePath: string
 }
@@ -235,26 +229,31 @@ export default class FtpConnector implements StorageConnector<FtpSession> {
   connectorId = 'ftp'
   displayName = 'Ftp'
   icon = 'ftp'
-  options: FtpOptionsWithDefaults
+  options: FtpOptions
   connectorType: ConnectorType
+  color = '#ffffff'
+  background = '#0066CC'
 
-  constructor(config: ServerConfig, opts: FtpOptions) {
+  constructor(config: ServerConfig, opts: Partial<FtpOptions>) {
     this.options = {
       path: '',
+      assetsFolder: 'assets',
       authorizeUrl: '/api/authorize/ftp/',
       authorizePath: '/api/authorize/ftp/',
       ...opts,
-    }
-    this.connectorType = this.options.type
+    } as FtpOptions
+    if(!this.options.type) throw new Error('missing type in option of FtpConnector')
+    this.connectorType = toConnectorEnum(this.options.type)
   }
 
   // **
   // Utils
   sessionData(session: FtpSession): FtpSessionData {
-    return session[this.options.type] ?? {} as FtpSessionData
+    return session[`ftp-${this.options.type}`] ?? {} as FtpSessionData
   }
 
   rootPath(session: FtpSession): string {
+    console.log('rootPath', this.sessionData(session), session)
     return this.connectorType === ConnectorType.STORAGE ?
       requiredParam<string>(this.sessionData(session).storageRootPath, 'storage root path') :
       requiredParam<string>(this.sessionData(session).publicationPath, 'publication path')
@@ -262,23 +261,22 @@ export default class FtpConnector implements StorageConnector<FtpSession> {
 
   // **
   // FTP methods
-  async write(ftp: Client, path: string, content: ConnectorFileContent, progress?: (message: string) => void): Promise<string> {
+  private async write(ftp: Client, path: string, content: ConnectorFileContent, progress?: (message: string) => void): Promise<void> {
     ftp.trackProgress(info => {
       progress && progress(`Uploading ${info.bytes / 1000} KB}`)
     })
     progress && progress('Upload started')
     await ftp.uploadFrom(contentToReadable(content), path)
     progress && progress('Upload complete')
-    return path
   }
 
-  async read(ftp: Client, path: string): Promise<Readable> {
+  private async read(ftp: Client, path: string): Promise<Readable> {
     const stream = new PassThrough()
     await ftp.downloadTo(stream, path)
     return stream
   }
 
-  async readdir(ftp: Client, path: string): Promise<FileMeta[]> {
+  private async readdir(ftp: Client, path: string): Promise<FileMeta[]> {
     const list = await ftp.list(path)
     return list.map((file) => ({
       name: file.name,
@@ -290,19 +288,19 @@ export default class FtpConnector implements StorageConnector<FtpSession> {
     } as FileMeta))
   }
 
-  async mkdir(ftp: Client, path: string) {
+  private async mkdir(ftp: Client, path: string) {
     return ftp.ensureDir(path)
   }
 
-  async rmdir(ftp: Client, path: string) {
+  private async rmdir(ftp: Client, path: string) {
     return ftp.removeDir(path)
   }
 
-  async unlink(ftp: Client, path: string) {
+  private async unlink(ftp: Client, path: string) {
     return ftp.remove(path)
   }
 
-  async getClient({host, user, pass, port, secure}): Promise<Client> {
+  private async getClient({host, user, pass, port, secure}): Promise<Client> {
     const ftp = new Client()
     await ftp.access({
       host,
@@ -311,11 +309,10 @@ export default class FtpConnector implements StorageConnector<FtpSession> {
       password: pass,
       secure,
     })
-    ftp['test'] = uuid()
     return ftp
   }
 
-  closeClient(ftp: Client) {
+  private closeClient(ftp: Client) {
     if(ftp && !ftp.closed) {
       ftp.close()
     } else {
@@ -335,7 +332,7 @@ export default class FtpConnector implements StorageConnector<FtpSession> {
     }
   }
 
-  async getOAuthUrl(session: FtpSession): Promise<string | null> { return null }
+  async getOAuthUrl(session: FtpSession): Promise<null> { return null }
 
   async getLoginForm(session: FtpSession, redirectTo: string): Promise<string | null> {
     const { host, user, pass, port, secure, publicationPath, storageRootPath, websiteUrl } = this.sessionData(session)
@@ -362,13 +359,13 @@ export default class FtpConnector implements StorageConnector<FtpSession> {
     // Check if the connection is valid
     const ftp = await this.getClient({ host, user, pass, port, secure })
     // Save the token
-    session[this.connectorType] = { host, user, pass, port, secure, publicationPath, storageRootPath, websiteUrl }
+    session[`ftp-${this.connectorType}`] = { host, user, pass, port, secure, publicationPath, storageRootPath, websiteUrl }
     // Clean up
     this.closeClient(ftp)
   }
 
   async logout(session: FtpSession) {
-    delete session[this.options.type]
+    delete session[`ftp-${this.options.type}`]
   }
 
   async getUser(session: FtpSession): Promise<ConnectorUser> {
@@ -381,7 +378,7 @@ export default class FtpConnector implements StorageConnector<FtpSession> {
 
   async isLoggedIn(session: FtpSession) {
     try {
-      if (!session[this.options.type]) {
+      if (!session[`ftp-${this.options.type}`]) {
         return false
       }
       const ftp = await this.getClient(this.sessionData(session))
@@ -497,7 +494,7 @@ export default class FtpConnector implements StorageConnector<FtpSession> {
     id: WebsiteId,
     files: ConnectorFile[],
     statusCbk?: StatusCallback,
-  ): Promise<string[]> {
+  ): Promise<void> {
     // Connect to FTP server
     statusCbk && statusCbk({
       message: 'Connecting to FTP server',
@@ -510,9 +507,9 @@ export default class FtpConnector implements StorageConnector<FtpSession> {
       message: 'Making sure that root folder exists',
       status: JobStatus.IN_PROGRESS,
     })
-    await this.mkdir(ftp, rootPath)
+    // Useless as ftp write will create the folder
+    // await this.mkdir(ftp, rootPath)
     // Write files
-    const paths: string[] = []
     let lastFile: ConnectorFile | undefined
     try {
       // Sequentially write files
@@ -521,7 +518,7 @@ export default class FtpConnector implements StorageConnector<FtpSession> {
           message: `Writing file ${file.path}`,
           status: JobStatus.IN_PROGRESS,
         })
-        const dstPath = join(this.options.path, rootPath, id, file.path)
+        const dstPath = join(this.options.path, rootPath, id, this.options.assetsFolder, file.path)
         lastFile = file
         const result = await this.write(ftp, dstPath, file.content, message => {
           statusCbk && statusCbk({
@@ -529,14 +526,12 @@ export default class FtpConnector implements StorageConnector<FtpSession> {
             status: JobStatus.IN_PROGRESS,
           })
         })
-        paths.push(result)
       }
       this.closeClient(ftp)
       statusCbk && statusCbk({
-        message: `Finished writing ${paths.length} files to ${rootPath}`,
+        message: `Finished writing ${files.length} files to ${rootPath}`,
         status: JobStatus.SUCCESS,
       })
-      return paths
     } catch(err) {
       // Not sure why it never gets here
       statusCbk && statusCbk({
@@ -544,7 +539,6 @@ export default class FtpConnector implements StorageConnector<FtpSession> {
         status: JobStatus.ERROR,
       })
       this.closeClient(ftp)
-      return []
     }
   }
 
@@ -552,7 +546,7 @@ export default class FtpConnector implements StorageConnector<FtpSession> {
     if (!this.sessionData(session)) throw new Error('Not logged in')
     const storageRootPath = this.rootPath(session)
     const ftp = await this.getClient(this.sessionData(session))
-    const dirPath = join(this.options.path, storageRootPath, id, path)
+    const dirPath = join(this.options.path, storageRootPath, id, this.options.assetsFolder, path)
     const asset = this.read(ftp, dirPath)
     this.closeClient(ftp)
     return asset
@@ -562,7 +556,7 @@ export default class FtpConnector implements StorageConnector<FtpSession> {
     const storageRootPath = this.rootPath(session)
     const ftp = await this.getClient(this.sessionData(session))
     await Promise.all(
-      paths.map((path) => this.unlink(ftp, join(this.options.path, storageRootPath, id, path)))
+      paths.map((path) => this.unlink(ftp, join(this.options.path, storageRootPath, id, this.options.assetsFolder, path)))
     )
     this.closeClient(ftp)
   }