@silexlabs/silex 3.0.0-alpha.21

package/src/ts/client/grapesjs/symbolDialogs.ts

@@ -0,0 +1,21 @@
+import * as grapesjs from 'grapesjs/dist/grapes.min.js'
+import { cmdAddSymbol } from '@silexlabs/grapesjs-symbols/src'
+
+export const cmdPromptAddSymbol = 'symbol-prompt-add'
+
+export default grapesjs.plugins.add(name, (editor, opts) => {
+  function getNext(prefix) {
+    let idx = 1
+    while(editor.Symbols.find(s => s.get('label') === prefix + idx)) {
+      idx++
+    }
+    return prefix + idx
+  }
+  editor.Commands.add(cmdPromptAddSymbol, {
+    run: (_, sender) => {
+      const label = prompt('Label', getNext('Symbol '))
+      const icon = prompt('Icon', 'fa-list')
+      editor.runCommand(cmdAddSymbol, { label, icon })
+    }
+  })
+})

package/src/ts/client/grapesjs/template.ts

@@ -0,0 +1,166 @@
+import {html, render} from 'lit-html'
+import {styleMap} from 'lit-html/directives/style-map.js'
+import grapesjs from 'grapesjs/dist/grapes.min.js'
+import { onAll } from '../utils'
+
+const pluginName = 'template'
+const templateType = 'templateType'
+const templateKey = 'template'
+
+export const templatePlugin = grapesjs.plugins.add(pluginName, (editor, opts) => {
+  // Add the new trait to all component types
+  editor.DomComponents.getTypes().map(type => {
+    editor.DomComponents.addType(type.id, {
+      model: {
+        defaults: {
+          traits: [
+            // Keep the type original traits
+            ...editor.DomComponents.getType(type.id).model.prototype.defaults.traits,
+            // Add the new trait
+            {
+              label: false,
+              type: templateType,
+              name: pluginName,
+            },
+          ]
+        }
+      }
+    })
+  })
+
+  function doRender(el) {
+    const template = editor.getSelected()?.get(templateKey) || {}
+    const taStyle = opts.styles?.textarea ?? styleMap({
+      backgroundColor: 'var(--darkerPrimaryColor)',
+    })
+    const sepStyle = opts.styles?.sep ?? styleMap({ height: '10px' })
+    const labels = {
+      before: html`<strong>Before</strong> the element`,
+      replace: html`<strong>Replace</strong> the element's children`,
+      after: html`<strong>After</strong> the element`,
+      attributes: html`HTML attributes`,
+      classname: html`CSS classes`,
+      style: html`CSS styles`,
+    }
+    render(html`
+      <div>
+        <h3>Template</h3>
+        <p>This will be inserted in the published version</p>
+      </div>
+      ${['classname', 'attributes', 'style'].map(id => html`
+      <label>
+        ${labels[id]}
+        <input
+          id="template-${id}"
+          .value=${template[id] || ''}
+          style=${taStyle}
+          />
+      </label>
+      `)}
+      ${['before', 'replace', 'after'].map(id => html`
+        <label
+          for="template-${id}"
+          >${labels[id]}</label>
+        <textarea
+          id="template-${id}"
+          style=${taStyle}
+          .value=${template[id] || ''}
+          ></textarea>
+      `)}
+    `, el)
+  }
+
+  editor.TraitManager.addType(templateType, {
+    createInput({ trait }) {
+      // Create a new element container and add some content
+      const el = document.createElement('div')
+      el.classList.add('gjs-one-bg')
+      // update the UI when a page is added/renamed/removed
+      editor.on('page', () => doRender(el))
+      doRender(el)
+      // this will be the element passed to onEvent and onUpdate
+      return el
+    },
+    // Update the component based on UI changes
+    // `elInput` is the result HTMLElement you get from `createInput`
+    onEvent({ elInput, component, event }) {
+      const template = {
+        before: elInput.querySelector('#template-before').value,
+        replace: elInput.querySelector('#template-replace').value,
+        after: elInput.querySelector('#template-after').value,
+        attributes: elInput.querySelector('#template-attributes').value,
+        classname: elInput.querySelector('#template-classname').value,
+        style: elInput.querySelector('#template-style').value,
+      }
+
+      // Store the new template
+      if(Object.values(template).filter(val => !!val && !!cleanup(val)).length > 0) {
+        component.set(templateKey, template)
+      } else {
+        component.set(templateKey)
+      }
+    },
+    // Update UI on the component change
+    onUpdate({ elInput, component }) {
+      doRender(elInput)
+    },
+  })
+
+  // Make html attribute
+  // Quote strings, no values for boolean
+  function makeAttribute(key, value) {
+    switch(typeof value) {
+    case 'boolean': return value ? key : ''
+    default: return `${key}="${value}"`
+    }
+  }
+  // Remove empty lines in templates
+  function cleanup(template) {
+    return template
+      // split in lines
+      .split('\n')
+      // remove lines with only spaces
+      .map(line => line.trim())
+      .filter(line => !!line)
+      // put back together
+      .join('\n')
+  }
+  editor.on(opts.eventStart || 'publish:before', () => {
+    // Insert templates
+    onAll(editor, c => {
+      const template = c.get(templateKey)
+      const toHTML = c.toHTML
+      const classes = c.getClasses()
+      const before = cleanup(template?.before || '')
+      const replace = cleanup(template?.replace || '')
+      const after = cleanup(template?.after || '')
+      const classname = cleanup(template?.classname || '')
+      const style = cleanup(template?.style || '')
+      const attributes = cleanup(template?.attributes || '')
+      // Store the initial method
+      if(!c.has('tmpHtml')) c.set('tmpHtml', toHTML)
+      // Override the method
+      c.toHTML = () => {
+        return `${
+          before
+        }${ c.get('tagName') ? `<${c.get('tagName')}
+            ${Object.entries(c.get('attributes')).map(([key, value]) => makeAttribute(key, value)).join(' ')}
+            ${classes.length || classname ? `class="${classes.join(' ')} ${classname}"` : ''}
+            ${attributes}
+            ${style ? `style="${style}"` : ''}
+            >` : '' }${
+          replace || c.getInnerHTML()
+        }${ c.get('tagName') ? `</${c.get('tagName')}>` : '' }${
+          after
+        }`
+      }
+    })
+  })
+  editor.on(opts.eventStop || 'publish:stop', () => {
+    onAll(editor, c => {
+      // Restore the original method
+      c.toHTML = c.get('tmpHtml')
+    })
+  })
+})
+

package/src/ts/client/index.ts

@@ -0,0 +1,38 @@
+/**
+ * @fileoverview
+ * Defines the entry point of Silex client side application
+ *
+ */
+
+// 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'
+
+/**
+ * Start Silex, called from host HTML page with window.silex.start()
+ */
+export async function start(options = {}) {
+  const config = new SilexConfig()
+  Object.assign(config, options)
+
+  // Initial config file
+  if(CONFIG_URL) {
+    await config.addPlugin(CONFIG_URL, {})
+  }
+
+  // Debug mode
+  if (config.debug) {
+    console.warn('Silex starting in debug mode.', {config})
+  }
+
+  // Start grapesjs
+  initEditor(config.editor)
+
+  // End of loading
+  getEditor().on('load', () => {
+    document.querySelector('.silex-loader').classList.add('silex-dialog-hide')
+    document.querySelector('#gjs').classList.remove('silex-dialog-hide')
+  })
+}

package/src/ts/client/utils.ts

@@ -0,0 +1,9 @@
+
+// Browse all elements of all pages
+export function onAll(editor, cbk) {
+  editor.Pages.getAll()
+    .forEach(page => {
+      page.getMainComponent()
+        .onAll(c => cbk(c))
+    })
+}

package/src/ts/externs.ts

@@ -0,0 +1 @@
+

package/src/ts/page.ts

@@ -0,0 +1,14 @@
+// Page related functions
+// This is used on the client and the server
+export function getPageSlug(pageName = 'index') {
+  return pageName
+    .toLowerCase()
+    .replace(/[^a-z0-9 -]/g, '')
+    // Collapse whitespace and replace by -
+    .replace(/\s+/g, '-')
+    // Collapse dashes
+    .replace(/-+/g, '-')
+}
+export function getPageLink(pageName = 'index') {
+  return `./${getPageSlug(pageName)}.html`
+}

package/src/ts/server/cli.ts

@@ -0,0 +1,23 @@
+import { parse } from 'cli'
+
+const options = parse({
+  config: [ 'c', 'Path for the server side config file to load at startup', 'file'],
+  port: [ 'p', 'Port to listen to', 'int'],
+  'ssl-port': [ false, 'Port to listen to for SSL/HTTPS', 'int'],
+  'force-https': [ false, 'Force HTTPS', 'true'],
+  'ssl-private-key': [ false, 'Path to private key for SSL', 'file'],
+  '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', 'true'],
+  'session-secret': ['s', 'Session secret', 'string'],
+}, {})
+
+if(options.config) process.env.CONFIG = options.config
+if(options.port) process.env.PORT = options.port
+if(options['ssl-port']) process.env.SSL_PORT = options['ssl-port']
+if(options['force-https']) process.env.SILEX_FORCE_HTTPS = options['force-https']
+if(options['ssl-private-key']) process.env.SILEX_SSL_PRIVATE_KEY = options['ssl-private-key']
+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']
+
+import('./index')

package/src/ts/server/config.ts

@@ -0,0 +1,62 @@
+/**
+ * @fileoverview This is where the default config is defined. Also use this object as an event emitter to listen to Silex events
+ * The values can be overriden with env vars or before passing the config to Silex
+ */
+
+/**
+ * @class default config for Silex server
+ */
+
+import { Config, Plugin } from '@silexlabs/silex-plugins'
+import { resolve } from 'path'
+
+/**
+ * Config types definitions
+ */
+export class ServerConfig extends Config {
+  constructor(
+      public url: string,
+      public debug: boolean,
+      public port: string,
+      public apiPath: string
+  ) {
+    super()
+  }
+}
+
+// Get config async function
+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 url = process.env.SERVER_URL || `http://localhost:${port}`
+  const config = new ServerConfig(url, debug, port, '/api')
+
+  // Config file in root folder
+  const configFilePath: Plugin = resolve(__dirname, '../../.silex.js')
+  console.log('Loading config', configFilePath)
+  try {
+    // Initiate the process with the config file which is just another plugin
+    await config.addPlugin(configFilePath, {})
+  } catch(e) {
+    if(e.code === 'MODULE_NOT_FOUND') {
+      console.info('No config found', configFilePath)
+    } else {
+      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/events.ts

@@ -0,0 +1,2 @@
+export const EVENT_STARTUP_START = 'silex:startup:start'
+export const EVENT_STARTUP_END = 'silex:startup:end'

package/src/ts/server/index.ts

@@ -0,0 +1,35 @@
+import getConfig from './config'
+import start  from './start'
+
+// Main app
+async function main() {
+  // Get the default config object
+  const config = await getConfig()
+
+  // Here one can mutate the config object
+  // Check the docs, look for the "add silex to your project as an npm dependency"
+
+  // start silex
+  const app = await start(config)
+
+  console.info(`
+I'm ready, listening to port ${config.port}
+  `)
+  if (config.debug) {
+    startLiverReload()
+  }
+}
+main()
+
+// livereload
+import { createServer } from 'livereload'
+import { resolve } from 'path'
+function startLiverReload() {
+  const dist = resolve(__dirname, '../client')
+  const server = createServer({
+    delay: 0,
+  }, () => {
+    console.info(`\nDebug mode\nLive reload server is running.\nWatching ${dist}`)
+  })
+  server.watch(dist)
+}

package/src/ts/server/start.ts

@@ -0,0 +1,18 @@
+import express, { Application } from 'express'
+
+import { ServerConfig } from './config'
+import { EVENT_STARTUP_START, EVENT_STARTUP_END } from './events'
+
+export default async function(config: ServerConfig): Promise<Application> {
+  // Plugins hook to create API routes
+  const app = express()
+  await config.emit(EVENT_STARTUP_START, { app })
+
+  // Start server
+  return new Promise((resolve, reject) => {
+    app.listen(config.port, () => {
+      config.emit(EVENT_STARTUP_END, { app })
+      resolve(app)
+    })
+  })
+}