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

package/dist/client/js/main.js.LICENSE.txt

@@ -1,31 +1,15 @@
 /*!
- * Sizzle CSS Selector Engine v2.3.10
- * https://sizzlejs.com/
- *
- * Copyright JS Foundation and other contributors
- * Released under the MIT license
- * https://js.foundation/
- *
- * Date: 2023-02-14
- */
-
-/*!
- * jQuery JavaScript Library v3.6.4
+ * jQuery JavaScript Library v3.7.0
  * https://jquery.com/
  *
- * Includes Sizzle.js
- * https://sizzlejs.com/
- *
  * Copyright OpenJS Foundation and other contributors
  * Released under the MIT license
  * https://jquery.org/license
  *
- * Date: 2023-03-08T15:28Z
+ * Date: 2023-05-11T18:29Z
  */
 
-/*! @silexlabs/grapesjs-loading - 1.0.7 */
-
-/*! grapesjs-style-filter - 1.0.1 */
+/*! @silexlabs/grapesjs-loading - 1.0.8 */
 
 /**
  * @license

package/dist/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CLIENT_CONFIG_FILE_NAME = void 0;
+exports.CLIENT_CONFIG_FILE_NAME = 'silex.js';

package/dist/page.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPageLink = exports.getPageSlug = void 0;
+function getPageSlug(pageName = 'index') {
+    return pageName
+        .toLowerCase()
+        .replace(/[^a-z0-9 -]/g, '')
+        .replace(/\s+/g, '-')
+        .replace(/-+/g, '-');
+}
+exports.getPageSlug = getPageSlug;
+function getPageLink(pageName = 'index') {
+    return `./${getPageSlug(pageName)}.html`;
+}
+exports.getPageLink = getPageLink;

package/dist/server/cli.js

@@ -12,6 +12,9 @@ const options = (0, cli_1.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;
@@ -31,4 +34,10 @@ 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'];
 require("./index");

package/dist/server/config.js

@@ -3,6 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ServerConfig = void 0;
 const silex_plugins_1 = require("@silexlabs/silex-plugins");
 const path_1 = require("path");
+const constants_1 = require("../constants");
+const express_1 = require("express");
+const promises_1 = require("fs/promises");
+const events_1 = require("../events");
 class ServerConfig extends silex_plugins_1.Config {
     url;
     debug;
@@ -20,10 +24,36 @@ exports.ServerConfig = ServerConfig;
 async function default_1() {
     const port = process.env.PORT || '6805';
     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');
+    if (clientConfigPath) {
+        config.on(events_1.EVENT_STARTUP_START, async ({ app }) => {
+            console.log(`> Serving client side config ${clientConfigPath} at ${constants_1.CLIENT_CONFIG_FILE_NAME}`);
+            const router = (0, express_1.Router)();
+            app.use(router);
+            let clientConfig = (await (0, promises_1.readFile)(clientConfigPath)).toString();
+            router.get(`/${constants_1.CLIENT_CONFIG_FILE_NAME}`, async (res, req, next) => {
+                if (config.debug) {
+                    console.log('[Debug mode] Reloading config file', clientConfigPath);
+                    clientConfig = (await (0, promises_1.readFile)(clientConfigPath)).toString();
+                }
+                req.header('Content-Type', 'application/javascript').send(clientConfig);
+            });
+        });
+    }
+    if (process.env.CONFIG) {
+        const userConfigPath = process.env.CONFIG;
+        console.log('> Loading user config', userConfigPath);
+        try {
+            await config.addPlugin(userConfigPath, {});
+        }
+        catch (e) {
+            throw new Error(`User config file ${userConfigPath} error: ${e.message}`);
+        }
+    }
     const configFilePath = (0, path_1.resolve)(__dirname, '../../.silex.js');
-    console.log('Loading config', configFilePath);
+    console.log('> Loading config', configFilePath);
     try {
         await config.addPlugin(configFilePath, {});
     }
@@ -35,16 +65,6 @@ async function default_1() {
             throw new Error(`Error in config file ${configFilePath}: ${e.message}`);
         }
     }
-    if (process.env.CONFIG) {
-        const userConfigPath = process.env.CONFIG;
-        console.log('Loading user config', userConfigPath);
-        try {
-            await config.addPlugin(userConfigPath, {});
-        }
-        catch (e) {
-            throw new Error(`User config file ${userConfigPath} not found: ${e.message}`);
-        }
-    }
     return config;
 }
 exports.default = default_1;

package/dist/server/{start.js → express.js}

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const express_1 = __importDefault(require("express"));
-const events_1 = require("./events");
+const events_1 = require("../events");
 async function default_1(config) {
     const app = (0, express_1.default)();
     await config.emit(events_1.EVENT_STARTUP_START, { app });

package/dist/server/index.js

@@ -27,10 +27,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const config_1 = __importDefault(require("./config"));
-const start_1 = __importDefault(require("./start"));
+const express_1 = __importDefault(require("./express"));
+const config = __importStar(require("./config"));
+const types = __importStar(require("../types"));
+const events = __importStar(require("../events"));
+const constants = __importStar(require("../constants"));
+const page = __importStar(require("../page"));
+exports.default = { config, types, events, constants, page };
 async function main() {
     const config = await (0, config_1.default)();
-    const app = await (0, start_1.default)(config);
+    const app = await (0, express_1.default)(config);
     console.info(`
 I'm ready, listening to port ${config.port}
   `);
@@ -46,7 +52,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/dist/types.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Unit = exports.defaultSite = exports.defaultPublicationSettings = void 0;
+exports.defaultPublicationSettings = {
+    path: 'publication',
+    url: '',
+    autoHomePage: true,
+    assets: { path: 'assets', url: '/assets' },
+    html: { path: '' },
+    css: { path: 'css', url: '/css' },
+};
+exports.defaultSite = {
+    pages: [{ name: 'Main', id: 'main', frames: [{ component: { type: 'text', stylable: [] }, components: [] }] }],
+    assets: [],
+    styles: [],
+    name: 'New website',
+    settings: {
+        description: '',
+        title: '',
+        head: '',
+        lang: '',
+        favicon: '',
+        'og:title': '',
+        'og:description': '',
+        'og:image': '',
+    },
+    fonts: [],
+    symbols: [],
+    publication: exports.defaultPublicationSettings,
+};
+var Unit;
+(function (Unit) {
+    Unit["PX"] = "px";
+})(Unit || (exports.Unit = Unit = {}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@silexlabs/silex",
   "description": "Free and easy website builder for everyone.",
-  "version": "3.0.0-alpha.30",
+  "version": "3.0.1-alpha.0",
   "version:backwardcompat": "3.0.0",
   "author": {
     "name": "Alex Hoyau",
@@ -52,9 +52,9 @@
     "release": "",
     "watch": "npm-watch",
     "start": "node dist/server/index.js",
-    "start:debug": "cross-env SILEX_DEBUG=true nodemon --watch dist/server dist/server/index.js",
-    "prepublishOnly": "npm run lint && npm test && npm run build",
-    "preversion": "npm run prepublishOnly",
+    "start:debug": "cross-env FS_ROOT=`pwd`/.silex cross-env SILEX_DEBUG=true nodemon --watch dist/server dist/server/index.js",
+    "prepublishOnly": "$npm_execpath run lint && $npm_execpath test && $npm_execpath run build",
+    "preversion": "$npm_execpath run prepublishOnly",
     "build": "run-s build:css:release build:html build:client:release build:server:release",
     "webpack": "webpack --config webpack.config.js",
     "build:css:release": "sass --load-path ../../node_modules --load-path node_modules --no-source-map src/css/index.scss dist/client/css/admin.css",
@@ -66,66 +66,67 @@
     "build:server:release": "tsc -p tsconfig-server-release.json",
     "build:server:debug": "SILEX_DEBUG=true tsc -p tsconfig-server-debug.json",
     "lint": "eslint 'src/ts/**/*.ts'",
-    "lint:fix": "npm run lint -- --fix",
+    "lint:fix": "$npm_execpath run lint -- --fix",
     "test": "node --experimental-vm-modules `node_modules jest`/jest/bin/jest.js",
-    "test:watch": "npm test -- --watch"
+    "test:watch": "$npm_execpath test -- --watch"
   },
   "dependencies": {
-    "@directus/sdk": "^10.3.3",
+    "@directus/sdk": "10.3.3",
     "@silexlabs/grapesjs-directus-storage": "1.0.15",
     "@silexlabs/grapesjs-fonts": "1.0.12",
-    "@silexlabs/grapesjs-loading": "1.0.7",
-    "@silexlabs/grapesjs-symbols": "1.0.18",
+    "@silexlabs/grapesjs-loading": "1.0.8",
+    "@silexlabs/grapesjs-symbols": "1.0.20",
     "@silexlabs/grapesjs-ui-suggest-classes": "1.0.23",
-    "@silexlabs/silex-plugins": "^1.0.6",
+    "@silexlabs/silex-plugins": "1.0.10",
     "adm-zip": "0.5.10",
     "body-parser": "1.20.2",
-    "cli": "^1.0.1",
+    "cli": "1.0.1",
     "compression": "1.7.4",
     "cookie-parser": "1.4.6",
     "cookie-session": "2.0.0",
+    "cors": "2.8.5",
     "cross-env": "7.0.3",
     "express": "4.18.2",
     "express-force-ssl": "0.3.2",
     "formidable": "2.1.1",
-    "grapesjs": "0.21.1",
-    "grapesjs-blocks-basic": "1.0.1",
-    "grapesjs-custom-code": "1.0.1",
-    "grapesjs-plugin-forms": "2.0.5",
-    "grapesjs-style-filter": "1.0.1",
-    "html-minifier": "^4.0.0",
-    "lit-html": "2.7.2",
+    "grapesjs": "0.21.2",
+    "grapesjs-blocks-basic": "1.0.2",
+    "grapesjs-custom-code": "1.0.2",
+    "grapesjs-plugin-forms": "2.0.6",
+    "grapesjs-style-filter": "1.0.2",
+    "html-minifier": "4.0.0",
+    "lit-html": "2.7.4",
     "mkdirp": "3.0.1",
     "node_modules-path": "2.0.7",
-    "node-fetch": "^2.6.9",
+    "node-fetch": "2.6.9",
     "normalize.css": "8.0.1",
     "object-path": "0.11.8",
     "promise-sequential": "1.1.1",
-    "sass": "1.62.0",
+    "sass": "1.63.6",
     "serve-static": "1.15.0"
   },
   "devDependencies": {
     "@types/express": "4.17.17",
-    "@types/jest": "29.5.1",
-    "@types/node": "18.16.0",
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.59.1",
-    "css-loader": "6.7.3",
-    "eslint": "8.39.0",
+    "@types/jest": "29.5.2",
+    "@types/node": "20.3.1",
+    "@typescript-eslint/eslint-plugin": "5.60.0",
+    "@typescript-eslint/parser": "5.60.0",
+    "css-loader": "6.8.1",
+    "eslint": "8.43.0",
     "file-loader": "6.2.0",
     "jest": "29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "livereload": "^0.9.3",
+    "jest-environment-jsdom": "29.5.0",
+    "livereload": "0.9.3",
     "nodemon": "2.0.22",
     "npm-run-all": "4.1.5",
     "npm-watch": "0.11.0",
     "pug-cli": "1.0.0-alpha6",
-    "style-loader": "3.3.2",
-    "ts-jest": "^29.1.0",
-    "ts-loader": "9.4.2",
-    "typescript": "5.0.4",
-    "webpack": "5.80.0",
-    "webpack-cli": "5.0.2"
+    "style-loader": "3.3.3",
+    "ts-jest": "29.1.0",
+    "ts-loader": "9.4.3",
+    "typescript": "5.1.3",
+    "webpack": "5.88.0",
+    "webpack-cli": "5.1.4"
   },
   "repository": {
     "type": "git",

package/public/silex.js

@@ -0,0 +1,25 @@
+// This file is loaded by Silex when the user opens the editor
+// Unless you override the default config with the environment variable SILEX_CLIENT_CONFIG or the CLI option --client-config
+export default async function (config) {
+  // // For example add a GrapesJs plugin like this
+  // config.editor.plugins.push(plugin)
+  // config.editor.pluginsOpts[plugin] = {
+  // }
+  // // Or like this to override the default options
+  // // See the docs for the list of options
+  // return {
+  //   ...config,
+  //   editor: {
+  //     ...config.editor,
+  //     plugins: [
+  //       ...config.editor.plugins,
+  //       plugin,
+  //     ],
+  //     pluginsOpts: {
+  //       ...config.editor.pluginsOpts,
+  //       [plugin]: {
+  //       },
+  //     },
+  //   },
+  // }
+}

package/src/example-client-config.js

@@ -0,0 +1,47 @@
+import directusStorage from 'https://unpkg.com/@silexlabs/grapesjs-directus-storage'
+console.log('directusStorage', directusStorage, directusStorage?.default)
+
+// Use the environment variable SILEX_CLIENT_CONFIG or the CLI option --client-config to override the default config with this file
+export default async function (config, options) {
+  console.log('In example config')
+  //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',
+      },
+      plugins: [
+        ...config.editor.plugins,
+        directusStorage,
+      ],
+      pluginsOpts: {
+        ...config.editor.pluginsOpts,
+        [directusStorage]: {
+          directusUrl: 'http://localhost:8055',
+        },
+      },
+    },
+  }
+}
+

package/src/plugins/DefaultBackend.js

@@ -1,4 +1,4 @@
-const { readFile, writeFile, mkdir, copyFile } = require('node:fs/promises')
+const { readFile, writeFile, mkdir, copyFile, readdir, stat, rm } = require('node:fs/promises')
 const { join, dirname, basename } = require('path')
 const { homedir } = require('os')
 
@@ -20,8 +20,6 @@ async function mkdirIfNotExists(path, options = null) {
 const FS_ROOT = process.env.FS_ROOT || join(homedir(), '.silex')
 const ASSETS_PATH = 'assets'
 const ASSETS_URL = 'assets'
-const HTML_PATH = ''
-const CSS_PATH = ''
 const DATA_FILE_NAME = '/.silex.data.json'
 const PUBLICATION_PATH = 'publication'
 
@@ -45,9 +43,47 @@ exports.init = async function (id) {
   await mkdirIfNotExists(uploadDir, { recursive: true, })
 }
 
+exports.del = async function (id) {
+  const folder = path(id)
+  console.log('Delete', folder)
+  await rm(folder, {recursive: true})
+  return {ok: true}
+}
+
+// List projects
+exports.list = async function () {
+  try {
+    const ids = await readdir(FS_ROOT)
+    return Promise.all(ids.map(async id => ({
+      id,
+      ...await exports.readData(id),
+      stats: await stat(path(id) + DATA_FILE_NAME),
+    })))
+  } catch (error) {
+    if (error.code === 'ENOENT') {
+      console.log(`\nError: Directory ${FS_ROOT} does not exist.\nIf your want to read from a different folder ues the FS_ROOT environment variable or --fs-root command line argument?\n`);
+      const betterError = new Error(`The directory ${FS_ROOT} does not exist`)
+      betterError.code = 'ENOENT'
+      throw betterError
+    }
+    throw error
+  }
+}
 // Read project data
 exports.readData = async function (id) {
-  return readFile(path(id) + DATA_FILE_NAME)
+  const filePath = path(id) + DATA_FILE_NAME
+  try {
+    const data = await readFile(filePath)
+    return JSON.parse(data.toString())
+  } catch (error) {
+    if (error.code === 'ENOENT') {
+      console.log(`\nError: File ${filePath} or directory ${FS_ROOT} do not exist.\nIf your want to read from a different folder use the FS_ROOT environment variable or --fs-root command line argument?\n`);
+      const betterError = new Error(`The website ${id} does not exist`)
+      betterError.code = 'ENOENT'
+      throw betterError
+    }
+    throw error
+  }
 }
 // Write project data
 exports.writeData = async function (id, data) {

package/src/plugins/ExpressPlugin.js

@@ -2,6 +2,7 @@ const bodyParser = require('body-parser')
 const compression = require('compression')
 const cookieParser = require('cookie-parser')
 const session = require('cookie-session')
+const cors = require('cors')
 
 module.exports = async function(config, opts = {}) {
   // Options with defaults
@@ -10,10 +11,18 @@ module.exports = async function(config, opts = {}) {
     textLimit: process.env.SILEX_EXPRESS_TEXT_LIMIT || '10mb',
     sessionName: process.env.SILEX_SESSION_NAME || 'silex-session',
     sessionSecret: process.env.SILEX_SESSION_SECRET || 'replace this session secret in env vars',
+    cors: process.env.SILEX_CORS_URL,
     ...opts,
   }
 
   config.on('silex:startup:start', ({app}) => {
+    // CORS
+    if (options.cors) {
+      console.log('> CORS are ENABLED:', options.cors)
+      app.use(cors({
+        origin: options.cors,
+      }))
+    }
     // compress gzip when possible
     app.use(compression())
 

package/src/plugins/PublishPlugin.js

@@ -28,9 +28,9 @@ module.exports = async function(config, opts = {}) {
     router.post('/publish', async function(req, res) {
       const { pages, files, id } = req.body.data
       if (!pages || !id) {
-        console.error('Error in the request, pages and id parmas required', {id})
+        console.error('Error in the request, pages and id params required', {id})
         res.status(400).send({
-          message: 'Error in the request, pages and id parmas required',
+          message: 'Error in the request, pages and id params required',
         })
       } else {
         // Optim
@@ -46,7 +46,7 @@ module.exports = async function(config, opts = {}) {
           }).trim()
         })
         // Publication
-        await config.emit(EVENT_PUBLISH_START, { id, files, req})
+        await config.emit('silex:publish:start', { id, files, req})
         let url
         try {
           url = await publish(id, files, req.body.data)
@@ -56,7 +56,7 @@ module.exports = async function(config, opts = {}) {
           return
         }
         const mutable = { id, files, req, res, url, statusUrl: options.statusUrl }
-        await config.emit(EVENT_PUBLISH_END, mutable)
+        await config.emit('silex:publish:end', mutable)
         res.json({
           url: mutable.url,
           statusUrl: mutable.statusUrl,