@silexlabs/silex 3.0.0-alpha.30 → 3.0.0-alpha.32

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

@@ -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 symbolsPlugin from '@silexlabs/grapesjs-symbols'
 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: EditorConfig, 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,16 @@ export function initEditor(config: EditorConfig) {
     // use the style filter plugin
     editor.StyleManager.addProperty('extra',{ extend: 'filter' })
   })
+
+  editor.StorageManager.onError = (type: string, err: Error) => {
+    editor.Modal.open(type === 'load' ? {
+      title: 'Error loading website',
+      content: `This website could not be loaded.<br><hr>Error: ${err.message}`,
+    } : {
+      title: 'Error saving website',
+      content: `This website could not be saved.<br><hr>Error: ${err.message}`,
+    })
+  }
 }
 
 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)
 }

package/src/ts/types.ts

@@ -2,11 +2,8 @@
  * @fileoverview define types for Silex client and server
  */
 
-export const WEBSITE_CONTEXT_RUNTIME_CLASS_NAME = 'silex-runtime'
-export const WEBSITE_CONTEXT_EDITOR_CLASS_NAME = 'silex-editor'
-
 // Note: paths begin and end **without** slash
-export const defaultSettings: PublicationSettings = {
+export const defaultPublicationSettings: PublicationSettings = {
   path: 'publication',
   url: '',
   autoHomePage: true,
@@ -16,7 +13,7 @@ export const defaultSettings: PublicationSettings = {
 }
 
 export const defaultSite: WebsiteData = {
-  pages: [],
+  pages: [{name: 'Main', id: 'main', frames: [{component: {type: 'text', stylable: []}, components: []}]}],
   assets: [],
   styles: [],
   name: 'New website',
@@ -24,18 +21,15 @@ export const defaultSite: WebsiteData = {
     description: '',
     title: '',
     head: '',
-    lang: 'en',
-    favicon: 'https://editor.silex.me/assets/favicon.png',
+    lang: '',
+    favicon: '',
     'og:title': '',
     'og:description': '',
     'og:image': '',
   },
-  fonts: [
-    { name: 'Arial', value: 'Arial, Helvetica, sans-serif', variants: [] },
-    { name: 'Times New Roman', value: '"Times New Roman", Times, serif', variants: [] },
-  ],
+  fonts: [],
   symbols: [],
-  publication: defaultSettings,
+  publication: defaultPublicationSettings,
 }
 
 export interface WebsiteSettings {

package/tsconfig-server-debug.json

@@ -1,11 +1,11 @@
 {
   "compileOnSave": true,
   "compilerOptions": {
-    "outDir": "dist/server/",
+    "outDir": "dist/",
     "target": "esnext",
     "watch": false,
     "inlineSourceMap": true,
-    "module": "commonjs",
+    "module": "CommonJS",
     "removeComments": false,
     "esModuleInterop": true, /* for import 'Events' in silex-plugins */
     "typeRoots": [

package/tsconfig-server-release.json

@@ -1,11 +1,11 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "outDir": "dist/server/",
+    "outDir": "dist/",
     "target": "esnext",
     "watch": false,
     "sourceMap": false,
-    "module": "commonjs",
+    "module": "CommonJS",
     "removeComments": true,
     "esModuleInterop": true, /* for import 'Events' in silex-plugins */
     "typeRoots": [

package/tsconfig.json

@@ -2,10 +2,10 @@
   "compileOnSave": true,
   "compilerOptions": {
     "outDir": "dist/client/",
-    "target": "ES2022",
+    "target": "ESNext",
     "watch": true,
     "sourceMap": true,
-    "module": "esnext",
+    "module": "ESNext",
     "removeComments": false,
     "allowJs": true,
     "typeRoots": [

package/webpack.config.js

@@ -23,7 +23,6 @@ module.exports = {
   plugins: [
     new webpack.DefinePlugin({
       VERSION: JSON.stringify(require("./package.json").version),
-      CONFIG_URL: process.env.CONFIG_URL && JSON.stringify(process.env.CONFIG_URL),
     }),
   ]
 };

package/public/example-config.js

@@ -1,31 +0,0 @@
-export default async function(config, options) {
-    //await config.addPlugin('gjs-blocks-basic', 'https://unpkg.com/grapesjs-blocks-basic', {
-    //    blocks: ['text', 'image', 'video', 'map'],
-    //})
-
-  // Optional plugins
-    await config.addPlugin([
-      '@silexlabs/grapesjs-directus-storage',
-      './plugins/@silexlabs/grapesjs-directus-storage/dist/index.js',
-    ], {
-      '@silexlabs/grapesjs-directus-storage': {
-        directusUrl: 'http://localhost:8055',
-      },
-      './plugins/@silexlabs/grapesjs-directus-storage/dist/index.js': {
-        directusUrl: 'http://localhost:8055',
-      },
-    })
-
-    // Return an object to override default config
-    return {
-        ...config,
-        ...options,
-        editor: {
-            ...config.editor,
-            storageManager: {
-                autoload: false,
-                type: 'directus',
-            },
-        },
-    }
-}

package/readme.md

@@ -1,51 +0,0 @@
-[![status of silex.me instance](https://monitoshi.lexoyo.me/badge/1525963562293-6552)](https://editor.silex.me) [![Join the chat at https://gitter.im/silex-website-builder/community](https://badges.gitter.im/silex-website-builder/community.svg)](https://gitter.im/silex-website-builder/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-
-![Silex UI](https://github.com/silexlabs/www.silex.me/raw/gh-pages/assets/silex-ui.gif)
-
-## About Silex, live web creation.
-
-| :fire:        Developers can test silex v3 with `npx @silexlabs/silex`   |
-|-------------------------------------------------------------------------------|
-
-Silex, is a free and open source website builder in the cloud. Create websites directly in the browser without writing code. And it is suitable for professional designers to produce great websites without constraints. Silex is also known as the HTML5 editor.
-
-Brought to you by Silex Labs team, promoting free software. Feel free to [use the free Silex instance](https://editor.silex.me/) provided by [Silex Labs foundation](https://www.silexlabs.org/).
-
-Silex for makers and web designers who want a free alternative to Webflow or other closed source website builders:
-
-* [Use Silex online for free](https://editor.silex.me)
-* [Silex desktop app (works offline, with your local files)](https://github.com/silexlabs/silex-desktop/)
-* [Silex official website](http://www.silex.me/)
-* [Documentation wiki](https://github.com/silexlabs/Silex/wiki)
-* [Silex forums](https://github.com/silexlabs/Silex/issues)
-* [subscribe to Silex news by email (a few messages per year)](http://eepurl.com/F48q5) and follow us on [Facebook](http://www.facebook.com/silexlabs), [Twitter](https://twitter.com/silexlabs)
-
-
-Silex for professionals, agencies and hosting companies:
-
-* [Install Silex on your computer or server](https://github.com/silexlabs/Silex/wiki/How-to-Host-An-Instance-of-Silex#as-a-web-app-silex-web-version) (basically this is `npm install -g silex-website-builder && silex`)
-* If you know HTML and CSS here is how to [add your own components to the "+" menu](https://github.com/silexlabs/Silex/wiki/Create-Silex-components)
-* If you are a designer, here is how to [add your own templates to Silex](https://github.com/silexlabs/Silex/wiki/Create-templates-for-Silex)
-* If you are a freelance designer and wants to create Silex website for clients, [please leave your email here](http://eepurl.com/gjYnib)
-* If you are looking for a designer to help you create your website, [please leave your email here](http://eepurl.com/gjYnib)
-* [Hire a contributor from this list](https://github.com/silexlabs/Silex/graphs/contributors) or [from one](https://github.com/silexlabs/unifile/graphs/contributors) [of these](https://github.com/silexlabs/CloudExplorer2/graphs/contributors) [other lists](https://github.com/silexlabs/drag-drop-stage-component/graphs/contributors)
-
-
-Other links
-
-* [Silex meta repository for Silex contribution](https://github.com/silexlabs/silex-meta)
-* [Silex is dual licensed under GPL or MPL](http://www.silexlabs.org/silex/silex-licensing/)
-* [Road map](https://github.com/silexlabs/Silex/milestones)
-* [Change log](https://github.com/silexlabs/Silex/pulls?utf8=%E2%9C%93&q=is%3Apr)
-* [Open positions, join the team](https://github.com/silexlabs/Silex/issues?q=is%3Aissue+is%3Aopen+label%3A%22open+position%22)
-* [Become a core contributor with these issues to get started](https://github.com/silexlabs/Silex/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22)
-* [Testers, docs and other help wanted annoucements](https://github.com/silexlabs/Silex/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
-
-## Dependencies
-
-The upstream projects we use in Silex are all listed in [Silex meta package](https://github.com/silexlabs/silex-meta)
-
-## Github stars history
-
-[![Star History Chart](https://api.star-history.com/svg?repos=silexlabs/Silex&type=Timeline)](https://star-history.com/#silexlabs/Silex&Timeline)
-