@silexlabs/silex 3.0.0-alpha.30 → 3.0.1-alpha.0

package/src/plugins/WebsitePlugin.js

@@ -3,9 +3,12 @@ const { resolve } = require('path')
 const formidable = require('formidable')
 
 const { noCache } = require('./Cache')
+const { defaultSite } = require('@silexlabs/silex').default.types
 
 const EVENT_READ_START = 'EVENT_READ_START'
 const EVENT_READ_END = 'EVENT_READ_END'
+const EVENT_DELETE_START = 'EVENT_WRITE_START'
+const EVENT_DELETE_END = 'EVENT_WRITE_END'
 const EVENT_WRITE_START = 'EVENT_WRITE_START'
 const EVENT_WRITE_END = 'EVENT_WRITE_END'
 const EVENT_ASSET_READ_START = 'EVENT_ASSET_READ_START'
@@ -18,13 +21,15 @@ module.exports = async function(config, opts = {}) {
   const options = {
     // Defaults
     backend: 'src/plugins/DefaultBackend.js',
+    // Default data for new websites
+    defaultSite,
     // Options
     ...opts
   }
 
   // Link to the desired backend
   const backend = resolve(__dirname, '../..', options.backend)
-  const { assetsDir, assetUrl, init, writeData, readData } = require(backend)
+  const { assetsDir, assetUrl, init, writeData, readData, list, del } = require(backend)
 
   config.on('silex:startup:start', ({app}) => {
     const router = Router()
@@ -32,6 +37,7 @@ module.exports = async function(config, opts = {}) {
     // website specials
     router.get('/website', readWebsite)
     router.post('/website', writeWebsite)
+    router.delete('/website', deleteWebsite)
     router.get(/\/assets\/(.*)/, readAsset)
     router.post('/assets', writeAsset)
 
@@ -39,21 +45,40 @@ module.exports = async function(config, opts = {}) {
   })
 
   async function readWebsite(req, res) {
-    const id = req.query.id
-    config.emit(EVENT_READ_START, { req, id })
-    try {
-      const data = await readData(id)
-      config.emit(EVENT_READ_END, { req, res, data, id })
-      res
-        .type('application/json')
-        .send(data)
-    } catch (err) {
-      if(err.code === 'ENOENT') {
-        console.error('Read file error, website does not exist', err)
-        res.status(404).json({ message: 'Read file error, website does not exist: ' + err.message, code: err.code})
-      } else {
-        console.error('Read file error', err)
-        res.status(400).json({ message: 'Read file error: ' + err.message, code: err.code})
+    const { id } = req.query
+    if(id) {
+      // Returns a website data
+      try {
+        config.emit(EVENT_READ_START, { req, id })
+        const data = await readData(id)
+        config.emit(EVENT_READ_END, { req, res, data, id })
+        res
+          .type('application/json')
+          .send({
+            ...options.defaultSite,
+            ...data,
+          })
+      } catch (err) {
+        if(err.code === 'ENOENT') {
+          console.error('Read file error, website does not exist', err)
+          res.status(404).json({ message: 'Read file error, website does not exist: ' + err.message, code: err.code})
+        } else {
+          console.error('Read file error', err)
+          res.status(400).json({ message: err.message, code: err.code})
+        }
+      }
+    } else {
+      // list websites
+      try {
+        config.emit(EVENT_READ_START, { req, id })
+        const data = await list()
+        config.emit(EVENT_READ_END, { req, res, data, id })
+        res
+          .type('application/json')
+          .send(data)
+      } catch (err) {
+        console.error('List sites error', err)
+        res.status(400).json({ message: err.message, code: err.code })
       }
     }
   }
@@ -79,8 +104,6 @@ module.exports = async function(config, opts = {}) {
 
   async function writeWebsite(req, res) {
     const id = req.query.id
-    await init(id)
-
     const [data, err] = fromBody(req.body)
     if(err) {
       res.status(400).json({ message: 'Error writing data file, could not parse the provided body: ' + err.message, code: err.code})
@@ -88,6 +111,7 @@ module.exports = async function(config, opts = {}) {
     }
     config.emit(EVENT_WRITE_START, { req, id, data })
     try {
+      await init(id)
       await writeData(id, data)
     } catch (err) {
       console.error('Error writing data file', err)
@@ -102,6 +126,41 @@ module.exports = async function(config, opts = {}) {
     })
   }
 
+  async function deleteWebsite(req, res) {
+    const { id } = req.query
+    if(id) {
+      try {
+        config.emit(EVENT_DELETE_START, { req, id })
+        const data = await del(id)
+        config.emit(EVENT_DELETE_END, { req, res, data, id })
+        res
+          .type('application/json')
+          .send(data)
+      } catch (err) {
+        if(err.code === 'ENOENT') {
+          console.error('Delete file error, website does not exist', err)
+          res.status(404).json({ message: 'Delete file error, website does not exist: ' + err.message, code: err.code})
+        } else {
+          console.error('Delete file error', err)
+          res.status(400).json({ message: err.message, code: err.code})
+        }
+      }
+    } else {
+      // list websites
+      try {
+        config.emit(EVENT_DELETE_START, { req, id })
+        const data = await list()
+        config.emit(EVENT_DELETE_END, { req, res, data, id })
+        res
+          .type('application/json')
+          .send(data)
+      } catch (err) {
+        console.error('List sites error', err)
+        res.status(400).json({ message: err.message, code: err.code })
+      }
+    }
+  }
+
   async function readAsset(req, res) {
     const id = req.query.id
     const fileName = req.params[0]

package/src/ts/client/config.ts

@@ -1,12 +1,14 @@
-import { Config } from '@silexlabs/silex-plugins'
+import { Config, Plugin } from '@silexlabs/silex-plugins'
 import { getEditorConfig } from './grapesjs'
+import { CLIENT_CONFIG_FILE_NAME } from '../constants'
 
 /**
  * @fileoverview Silex client side config
  */
 
 const id = new URL(location.href).searchParams.get('id') || 'default'
-const rootUrl = '.'
+const lang = new URL(location.href).searchParams.get('lang') || 'en'
+const rootUrl = `${location.protocol}//${location.host}${location.pathname}`
 
 export class SilexConfig extends Config {
   /**
@@ -14,8 +16,24 @@ export class SilexConfig extends Config {
    */
   debug = false
 
+  /**
+   * language for I18n module
+   */
+  lang = lang
+
   /**
    * Grapesjs config
    */
   editor = getEditorConfig(id, rootUrl)
+
+  /**
+   * Client config url
+   * This is the url of the config file which is a plugin
+   */
+  clientConfigUrl = `${rootUrl}${CLIENT_CONFIG_FILE_NAME}`
+
+  /**
+   * GrapesJs plugins
+   */
+  grapesJsPlugins: Plugin[] = []
 }

package/src/ts/client/grapesjs/blocks.ts

@@ -1,88 +1,20 @@
-import * as grapesjs from 'grapesjs/dist/grapes.min.js'
-
-const pluginName = 'blocks'
-const clsContainer = 'silex-container'
-const clsSection = 'silex-section'
-const clsSectionBackground = 'silex-section-background'
-
-export const blocksPlugin = grapesjs.plugins.add(pluginName, (editor, opts) => {
-  // Make row and column classes private
-  const privateCls = [clsSection, clsSectionBackground, clsContainer]
-    .map(cls => '.' + cls)
-  editor.on(
-    'selector:add',
-    selector => privateCls.indexOf(selector.getFullName()) >= 0 && selector.set('private', 1)
-  )
-  ;[
-    // {
-    //   id: 'section',
-    //   def: {
-    //     label: 'Section',
-    //     category: 'Containers',
-    //     attributes: { class: 'fa fa-list-alt' },
-    //     draggable: 'body',
-    //     content: {
-    //       tagName: 'section',
-    //       styles: `
-    //       .${clsSectionBackground} {
-    //         display: flex;
-    //         justify-content: center;
-    //       }
-    //       `,
-    //       components: [
-    //         {
-    //           tagName: 'div',
-    //           name: 'Section container',
-    //           attributes: { class: ['website-width'] },
-    //           draggable: false,
-    //           removable: false,
-    //           resizable: true,
-    //           styles: `
-    //           .${clsSection} {
-    //             min-height: 100px;
-    //             width: 1200px;
-    //           }
-    //           `,
-    //         },
-    //       ],
-    //     },
-    //   },
-    // },
-    {
-      id: 'container',
-      def: {
-        label: 'Container',
-        category: 'Basics',
-        attributes: { class: 'container-png' },
-        content: {
-          type: 'container',
-          style: {
-            'min-height': '100px',
-          },
-        },
+export const blocksPlugin = (editor, opts) => {
+  // Defaults
+  const options = {
+    ...opts,
+  }
+  // Container block
+  const containerId = 'container'
+  editor.BlockManager.add(containerId, {
+    label: 'Container',
+    category: 'Basics',
+    attributes: { class: 'container-png' },
+    content: {
+      type: containerId, // display as "Container"
+      style: {
+        'min-height': '100px',
       },
     },
-    // {
-    //   id: 'link-block',
-    //   def: {
-    //     category: 'Containers',
-    //     label: 'Link Block',
-    //     attributes: { class: 'fa fa-link' },
-    //     content: {
-    //       type: 'link',
-    //       editable: false,
-    //       droppable: true,
-    //       resizable: true,
-    //       style:{
-    //         display: 'inline-block',
-    //         padding: '5px',
-    //         'min-height': '100px',
-    //         'width': '100px'
-    //       }
-    //     },
-    //   },
-    // },
-  ]
-    .forEach(block => editor.BlockManager.add(block.id, block.def))
-})
-
+  })
+  editor.DomComponents.addType(containerId, {})
+}

package/src/ts/client/grapesjs/index.ts

@@ -1,4 +1,4 @@
-import grapesjs, { EditorConfig } from 'grapesjs'
+import grapesjs from 'grapesjs'
 import openImport from './openImport'
 
 /**
@@ -14,7 +14,7 @@ import styleFilterPlugin from 'grapesjs-style-filter'
 import formPlugin from 'grapesjs-plugin-forms'
 import codePlugin from 'grapesjs-custom-code'
 import uiSuggestClasses from '@silexlabs/grapesjs-ui-suggest-classes'
-import symbolsPlugin from '@silexlabs/grapesjs-symbols/src'
+import * as symbolsPlugin from '@silexlabs/grapesjs-symbols' // Why is this not working without *?
 import loadingPlugin from '@silexlabs/grapesjs-loading'
 import fontsDialogPlugin, { cmdOpenFonts } from '@silexlabs/grapesjs-fonts'
 import symbolDialogsPlugin, { cmdPromptAddSymbol } from './symbolDialogs'
@@ -60,8 +60,6 @@ plugins
     throw new Error(`Plugin ${p.name} could not be loaded correctly`)
   })
 
-export function getPlugins() { return plugins }
-
 // ////////////////////
 // Config
 // ////////////////////
@@ -86,7 +84,7 @@ export function getEditorConfig(id: string, rootUrl: string) {
     },
 
     assetManager: {
-      upload: `${rootUrl}/assets/`,
+      upload: `${rootUrl}assets/`,
     },
 
     storageManager: {
@@ -94,8 +92,8 @@ export function getEditorConfig(id: string, rootUrl: string) {
       type: 'remote',
       options: {
         remote: {
-          urlStore: `${rootUrl}/website/?id=${id}`,
-          urlLoad: `${rootUrl}/website/?id=${id}`,
+          urlStore: `${rootUrl}website/?id=${id}`,
+          urlLoad: `${rootUrl}website/?id=${id}`,
         },
       },
     },
@@ -214,10 +212,16 @@ export function getEditorConfig(id: string, rootUrl: string) {
 // Keep a ref to the editor singleton
 let editor
 
-export function initEditor(config: EditorConfig) {
+export function initEditor(config, grapesJsPlugins) {
   if(editor) throw new Error('Grapesjs editor already created')
 
-  editor = grapesjs.init(config)
+  editor = grapesjs.init({
+    plugins: [
+      ...grapesJsPlugins,
+      ...config.plugins,
+    ],
+    ...config,
+  })
 
   // customize the editor
   ;['text']
@@ -253,6 +257,20 @@ export function initEditor(config: EditorConfig) {
     // use the style filter plugin
     editor.StyleManager.addProperty('extra',{ extend: 'filter' })
   })
+
+  // Handle errors
+  editor.on('storage:error:load', (err) => {
+    editor.Modal.open({
+      title: 'Error loading website',
+      content: `This website could not be loaded.<br><hr>${err}`,
+    })
+  })
+  editor.on('storage:error:store', (err) => {
+    editor.Modal.open({
+      title: 'Error saving website',
+      content: `This website could not be saved.<br><hr>${err}`,
+    })
+  })
 }
 
 export function getEditor() {

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

@@ -1,4 +1,5 @@
 import { internalLinksPlugin } from './internal-links'
+import { expect, test, beforeEach } from '@jest/globals'
 import grapesjs from 'grapesjs'
 
 let editor

package/src/ts/client/grapesjs/publish.ts

@@ -8,7 +8,7 @@ import { onAll } from '../utils'
 const pluginName = 'publish'
 export const cmdPublish = 'publish-open-dialog'
 let _token = null
-let projectId
+let id
 let rootUrl
 
 // plugin code
@@ -19,7 +19,7 @@ export const publishPlugin = grapesjs.plugins.add(pluginName, (editor, opts) =>
   }
   // Global config
   rootUrl = opts.rootUrl
-  projectId = opts.projectId
+  id = opts.id
   // Keep track of the token
   editor.on('login:success', async ({ getUser, getToken }) => {
     _token = await getToken()
@@ -248,7 +248,7 @@ export async function startPublication(editor) {
     ...projectData,
     settings: siteSettings,
     publication: publicationSettings,
-    projectId,
+    id,
     files,
   }
   // Reset asset URLs
@@ -282,7 +282,7 @@ export async function startPublication(editor) {
   let res
   let json
   try {
-    res = await fetch(`${ rootUrl }/publish`, {
+    res = await fetch(`${ rootUrl }publish`, {
       method: 'POST',
       body: JSON.stringify({
         data,

package/src/ts/client/grapesjs/semantic.ts

@@ -20,6 +20,7 @@ const tags = [
   'SECTION',
   'ADDRESS',
   'ARTICLE',
+  'BUTTON',
   'NAV',
   'HEADER',
   'FOOTER',

package/src/ts/client/index.ts

@@ -4,11 +4,9 @@
  *
  */
 
-// Get env vars from webpack (see plugin in webpack.config.js)
-declare const CONFIG_URL: string
-
 import { SilexConfig } from './config'
 import { initEditor, getEditor } from './grapesjs/index'
+import { EVENT_STARTUP_START, EVENT_STARTUP_END } from '../events'
 
 /**
  * Start Silex, called from host HTML page with window.silex.start()
@@ -17,22 +15,37 @@ export async function start(options = {}) {
   const config = new SilexConfig()
   Object.assign(config, options)
 
-  // Initial config file
-  if(CONFIG_URL) {
-    await config.addPlugin(CONFIG_URL, {})
-  }
+  // Config file in root folder which can be generated by the server
+  console.log('Loading config', config.clientConfigUrl)
+  //import(/* webpackIgnore: true */ config.clientConfigUrl)
+  //.then((configFile) => console.log('Config loaded', configFile))
+  //.catch((e) => console.error('Config error', config.clientConfigUrl, e))
+  await config.addPlugin(config.clientConfigUrl, {})
 
   // Debug mode
   if (config.debug) {
     console.warn('Silex starting in debug mode.', {config})
   }
 
+  // Notify plugins that loading is over and Silex is starting
+  config.emit(EVENT_STARTUP_START)
+
   // Start grapesjs
-  initEditor(config.editor)
+  console.log('start', {config})
+  try{
+    initEditor(config.editor, config.grapesJsPlugins)
+  } catch(e) {
+    console.error('Error starting Silex', e)
+  }
+
+  // Init internationalization module
+  getEditor().I18n.setLocale(config.lang)
 
   // End of loading
   getEditor().on('load', () => {
+    console.log('Silex started')
     document.querySelector('.silex-loader').classList.add('silex-dialog-hide')
     document.querySelector('#gjs').classList.remove('silex-dialog-hide')
+    config.emit(EVENT_STARTUP_END)
   })
 }

package/src/ts/constants.ts

@@ -0,0 +1,5 @@
+/**
+ * @fileoverview define constants for Silex client and server
+ */
+
+export const CLIENT_CONFIG_FILE_NAME = 'silex.js'

package/src/ts/server/cli.ts

@@ -12,6 +12,9 @@ const options = parse({
   'ssl-certificate': [ false, 'Path to SSL certificate', 'file'],
   'force-https-trust-xfp-header': [ false, 'Sets the trustXFPHeader param of the express module "cookie-session". Use only with --force-https', 'boolean'],
   'session-secret': ['s', 'Session secret', 'string'],
+  'cors-url': ['', 'Enable CORS for URL (can be "*")', 'string'],
+  'client-config': ['', 'Path to client config file to be served on .silex-client.js', 'string'],
+  'fs-root': ['', 'Path to the root folder where to store websites. Used by the default backend (fs).', 'string'],
 }, {})
 
 if(options.config) process.env.CONFIG = options.config
@@ -23,5 +26,8 @@ if(options['ssl-private-key']) process.env.SILEX_SSL_PRIVATE_KEY = options['ssl-
 if(options['ssl-certificate']) process.env.SILEX_SSL_CERTIFICATE = options['ssl-certificate']
 if(options['force-https-trust-xfp-header']) process.env.SILEX_FORCE_HTTPS_TRUST_XFP_HEADER = options['force-https-trust-xfp-header']
 if(options['session-secret']) process.env.SILEX_SESSION_SECRET = options['session-secret']
+if(options['cors-url']) process.env.SILEX_CORS_URL = options['cors-url']
+if(options['client-config']) process.env.SILEX_CLIENT_CONFIG = options['client-config']
+if(options['fs-root']) process.env.FS_ROOT = options['fs-root']
 
 import './index'

package/src/ts/server/config.ts

@@ -9,16 +9,20 @@
 
 import { Config, Plugin } from '@silexlabs/silex-plugins'
 import { resolve } from 'path'
+import { CLIENT_CONFIG_FILE_NAME } from '../constants'
+import { Router } from 'express'
+import { readFile } from 'fs/promises'
+import { EVENT_STARTUP_START } from '../events'
 
 /**
  * Config types definitions
  */
 export class ServerConfig extends Config {
   constructor(
-      public url: string,
-      public debug: boolean,
-      public port: string,
-      public apiPath: string
+    public url: string,
+    public debug: boolean,
+    public port: string,
+    public apiPath: string,
   ) {
     super()
   }
@@ -28,13 +32,49 @@ export class ServerConfig extends Config {
 export default async function(): Promise<ServerConfig> {
   const port = process.env.PORT || '6805' // 6805 is the date of sexual revolution started in paris france 8-)
   const debug = process.env.SILEX_DEBUG === 'true'
+  const clientConfigPath = process.env.SILEX_CLIENT_CONFIG
 
   const url = process.env.SERVER_URL || `http://localhost:${port}`
   const config = new ServerConfig(url, debug, port, '/api')
 
+  // Serve the client side config file
+  if (clientConfigPath) {
+    config.on(EVENT_STARTUP_START, async ({ app }) => {
+      console.log(`> Serving client side config ${clientConfigPath} at ${CLIENT_CONFIG_FILE_NAME}`)
+      // Attach the route immediately
+      const router = Router()
+      app.use(router)
+      // Load the config file and serve it
+      let clientConfig = (await readFile(clientConfigPath as string)).toString()
+      router.get(`/${CLIENT_CONFIG_FILE_NAME}`, async (res, req, next) => {
+        // Reload each time in debug mode
+        if (config.debug) {
+          console.log('[Debug mode] Reloading config file', clientConfigPath)
+          clientConfig = (await readFile(clientConfigPath)).toString()
+        }
+        // Send the config file
+        req.header('Content-Type', 'application/javascript').send(clientConfig)
+      })
+    })
+  }
+
+  // Optional config file
+  // Load this config file before the main config file so that routes can be overriden
+  // Or listen for event silex:startup:end to add routes after the default ones
+  if (process.env.CONFIG) {
+    const userConfigPath: Plugin = process.env.CONFIG
+    console.log('> Loading user config', userConfigPath)
+    try {
+      // Initiate the process with the config file which is just another plugin
+      await config.addPlugin(userConfigPath, {})
+    } catch (e) {
+      throw new Error(`User config file ${userConfigPath} error: ${e.message}`)
+    }
+  }
+
   // Config file in root folder
   const configFilePath: Plugin = resolve(__dirname, '../../.silex.js')
-  console.log('Loading config', configFilePath)
+  console.log('> Loading config', configFilePath)
   try {
     // Initiate the process with the config file which is just another plugin
     await config.addPlugin(configFilePath, {})
@@ -45,17 +85,6 @@ export default async function(): Promise<ServerConfig> {
       throw new Error(`Error in config file ${configFilePath}: ${e.message}`)
     }
   }
-  // Optional config file
-  if (process.env.CONFIG) {
-    const userConfigPath: Plugin = process.env.CONFIG
-    console.log('Loading user config', userConfigPath)
-    try {
-      // Initiate the process with the config file which is just another plugin
-      await config.addPlugin(userConfigPath, {})
-    } catch (e) {
-      throw new Error(`User config file ${userConfigPath} not found: ${e.message}`)
-    }
-  }
 
   // Return the config file
   return config

package/src/ts/server/{start.ts → express.ts}

@@ -1,7 +1,7 @@
 import express, { Application } from 'express'
 
 import { ServerConfig } from './config'
-import { EVENT_STARTUP_START, EVENT_STARTUP_END } from './events'
+import { EVENT_STARTUP_START, EVENT_STARTUP_END } from '../events'
 
 export default async function(config: ServerConfig): Promise<Application> {
   // Plugins hook to create API routes

package/src/ts/server/index.ts

@@ -1,5 +1,12 @@
 import getConfig from './config'
-import start  from './start'
+import start  from './express'
+
+import * as config from './config'
+import * as types from '../types'
+import * as events from '../events'
+import * as constants from '../constants'
+import * as page from '../page'
+export default { config, types, events, constants, page }
 
 // Main app
 async function main() {
@@ -30,7 +37,7 @@ async function startLiverReload() {
   const server = createServer({
     delay: 0,
   }, () => {
-    console.info(`\nDebug mode\nLive reload server is running.\nWatching ${dist}`)
+    console.info(`\n> Debug mode\n> Live reload server is running.\n> Watching ${dist}`)
   })
   server.watch(dist)
 }