@silexlabs/silex 3.0.0-alpha.39 → 3.0.0-alpha.41

package/src/ts/types.ts

@@ -19,65 +19,9 @@
  * @fileoverview define types for Silex client and server
  */
 
-// Note: paths begin and end **without** slash
-export const defaultPublicationSettings: PublicationSettings = {
-  path: 'publication',
-  url: '',
-  autoHomePage: true,
-  assets: { path: 'assets', url: '/assets' },
-  html: { path: '' },
-  css: { path: 'css', url: '/css' },
-}
-
-export const defaultSite: WebsiteData = {
-  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: defaultPublicationSettings,
-}
-
-export interface WebsiteSettings {
-  description: string,
-  title: string,
-  lang: string,
-  head: string,
-  favicon: string,
-  'og:title': string,
-  'og:description': string,
-  'og:image': string,
-}
-
-export interface WebsiteData {
-  pages: Page[],
-  assets: Asset[],
-  styles: Style[],
-  name: string,
-  settings: WebsiteSettings,
-  fonts: Font[],
-  symbols: symbol[],
-  publication: PublicationSettings,
-}
-
-export interface Font {
-  name: string,
-  value: string,
-  variants: string[],
-}
+// Publication API
 export interface PublicationSettings {
-  path?: string, // Folder to publish to
+  backend?: BackendData, // Set by the postMessage from the login callback page
   url?: string, // URL to display where the website is published to
   autoHomePage?: boolean, // Name the first page `index` instead of its name
   assets?: {
@@ -95,13 +39,73 @@ export interface PublicationSettings {
   },
 }
 
-export interface File {
+export interface WebsiteFile {
   html: string,
   css: string,
   htmlPath: string,
   cssPath: string,
 }
 
+export type ApiResponseError = { message: string }
+export type ApiPublicationPublishRequestBody = WebsiteData
+export type ApiPublicationPublishRequestQuery = { id: WebsiteId }
+export type ApiPublicationPublishResponse = { url: string, job: PublicationJobData }
+export type ApiPublicationStatusRequestQuery = { jobId: JobId }
+export type ApiPublicationStatusResponse = PublicationJobData
+export type ApiWebsiteReadRequestQuery = { id?: WebsiteId, backendId?: BackendId }
+export type ApiWebsiteReadResponse = WebsiteMeta[] | WebsiteData
+export type ApiWebsiteWriteRequestQuery = { id: WebsiteId, backendId?: BackendId }
+export type ApiWebsiteWriteRequestBody = WebsiteData
+export type ApiWebsiteWriteResponse = { message: string }
+export type ApiWebsiteDeleteRequestQuery = { id: WebsiteId, backendId?: BackendId }
+export type ApiWebsiteAssetsReadRequestQuery = { id: WebsiteId, backendId?: BackendId }
+export type ApiWebsiteAssetsReadRequestParams = { path: string }
+export type ApiWebsiteAssetsReadResponse = string
+export type ApiWebsiteAssetsWriteRequestQuery = { id: WebsiteId, backendId?: BackendId }
+export type ApiWebsiteAssetsWriteRequestBody = ClientSideFile[]
+export type ApiWebsiteAssetsWriteResponse = { data: string[] }
+export type ApiBackendListRequestQuery = { type: BackendType }
+export type ApiBackendListResponse = BackendData[]
+export type ApiBackendLoginRequestQuery = { backendId: BackendId, type: BackendType, options?: string, error?: string }
+export type ApiBackendLoggedInPostMessage = { type: string, error: boolean, message: string, backendId: BackendId }
+export type ApiBackendLogoutRequestQuery = { backendId: BackendId, type: BackendType }
+export type ApiBackendLoginStatusRequestQuery = { id?: WebsiteId, backendId?: BackendId, type: BackendType }
+export type ApiBackendLoginStatusResponse = { user: BackendUser, backend: BackendData, websiteMeta?: WebsiteMeta}
+
+// **
+// Website API
+export interface WebsiteData {
+  pages: Page[],
+  assets: Asset[],
+  styles: Style[],
+  name: string,
+  settings: WebsiteSettings,
+  fonts: Font[],
+  symbols: symbol[],
+  publication: PublicationSettings,
+}
+
+export interface PublicationData extends WebsiteData {
+  files?: WebsiteFile[], // Added by the client for publish
+}
+
+export interface WebsiteSettings {
+  description: string,
+  title: string,
+  lang: string,
+  head: string,
+  favicon: string,
+  'og:title': string,
+  'og:description': string,
+  'og:image': string,
+}
+
+export interface Font {
+  name: string,
+  value: string,
+  variants: string[],
+}
+
 export interface Page {
   name?: string,
   id: string,
@@ -147,3 +151,107 @@ export type Selector = string | {
   type: number,
 }
 
+// **
+// Backend API
+/**
+ * Type for a backend id
+ */
+export type BackendId = string
+
+/**
+ * Type for a client side file
+ * @see backend/File
+ */
+export interface ClientSideFile {
+  path: string,
+  content: Buffer | string
+}
+
+/**
+ * Type for file listing
+ */
+export interface FileMeta {
+  name: string
+  isDir: boolean
+  size: number
+  createdAt: Date
+  updatedAt: Date
+  metadata?: object
+}
+
+/**
+ * Enum to express if the backend is a storage or a hosting
+ */
+export enum BackendType {
+  STORAGE = 'STORAGE',
+  HOSTING = 'HOSTING',
+}
+
+/**
+ * Type for a website id
+ */
+export type WebsiteId = string
+
+/**
+ * Back end data sent to the front end
+ */
+export interface BackendData {
+  backendId: BackendId
+  type: BackendType
+  displayName: string
+  icon: string
+  disableLogout: boolean
+  isLoggedIn: boolean
+  authUrl: string | null
+}
+
+/**
+ * Back end data sent to the front end
+ */
+export interface BackendUser {
+  name: string
+  email?: string
+  picture?: string
+  metadata?: object
+}
+
+/**
+ * Back end data sent to the front end
+ * Meta data can be the root path of the websites, or the bucket name, etc.
+ */
+export interface WebsiteMeta {
+  websiteId: WebsiteId
+  createdAt: Date
+  updatedAt: Date
+  metadata?: object
+}
+
+/**
+ * Enum to express if the job is in progress or finished or errored
+ */
+export enum JobStatus {
+  IN_PROGRESS = 'IN_PROGRESS',
+  SUCCESS = 'SUCCESS',
+  ERROR = 'ERROR',
+}
+
+/**
+ * Id used to track the progress of a publication
+ */
+export type JobId = string
+
+/**
+ * Data structure which is sent to the client to display the progress of a job
+ */
+export interface JobData {
+  jobId: JobId // The job id
+  status: JobStatus // status code
+  message: string // status to display
+  url?: string // url of the published website
+  _timeout?: ReturnType<typeof setTimeout> // Internal use
+}
+
+export interface PublicationJobData extends JobData {
+  logs: string[][]
+  errors: string[][]
+}

package/dist/client/client/grapesjs/publish.d.ts

@@ -1,18 +0,0 @@
-export declare const cmdPublish = "publish-open-dialog";
-export declare const publishPlugin: any;
-export declare function getDialogElements(): {
-    dialog: Element;
-    primary: Element;
-    secondary: Element;
-};
-export declare const STATUS_NONE = "STATUS_NONE";
-export declare const STATUS_PENDING = "STATUS_PENDING";
-export declare const STATUS_ERROR = "STATUS_ERROR";
-export declare const STATUS_SUCCESS = "STATUS_SUCCESS";
-export declare let status: string;
-export declare let open: boolean;
-export declare function closeDialog(editor: any): Promise<void>;
-export declare function toggleDialog(editor: any): Promise<void>;
-export declare function openDialog(editor: any): Promise<void>;
-export declare function startPublication(editor: any): Promise<void>;
-export declare function trackProgress(editor: any, statusUrl: any): Promise<void>;

package/dist/page.js

@@ -1,15 +0,0 @@
-"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/src/plugins/AuthPlugin.js

@@ -1,21 +0,0 @@
-const express = require('express')
-const { Directus } = require('@directus/sdk')
-
-module.exports = async function(config, opts = {}) {
-  config.on('silex:startup:start', ({app}) => {
-    const router = express.Router()
-    router.post(['/publish', '/website', '/assets'], async function(req, res, next) {
-      try {
-        const token = req.body.token || opts.directusToken
-        const directus = new Directus(opts.directusUrl)
-        directus.storage.auth_token = token
-        const me = await directus.users.me.read()
-        next()
-      } catch(err) {
-        console.error('Publish failed in auth module. Did you provide a directus token?', err.message)
-        res.status(403).json({ message: err.message })
-      }
-    })
-    app.use(router)
-  })
-}

package/src/plugins/Cache.js

@@ -1,11 +0,0 @@
-exports.noCache = function (req, res, next) {
-  res.header('Cache-Control', 'private,no-cache,no-store,must-revalidate,proxy-revalidate')
-  res.header('Expires', '-1')
-  res.header('Pragma', 'no-cache')
-  next()
-}
-
-exports.withCache = function (req, res, next) {
-  res.header('Cache-Control', 'public,max-age=86400,immutable') // 24h
-  next()
-}

package/src/plugins/DefaultBackend.js

@@ -1,149 +0,0 @@
-const { readFile, writeFile, mkdir, copyFile, readdir, stat, rm } = require('node:fs/promises')
-const { join, dirname, basename } = require('path')
-const { homedir } = require('os')
-
-//const { URLRewriter, URLTranslator } = require('cssurl')
-
-async function mkdirIfNotExists(path, options = null) {
-  try {
-    return await mkdir(path, options)
-  } catch (err) {
-    if (err.code === 'EEXIST') {
-      return
-    } else {
-      throw err
-    }
-  }
-}
-
-// Paths
-const FS_ROOT = process.env.FS_ROOT || join(homedir(), '.silex')
-const ASSETS_PATH = 'assets'
-const ASSETS_URL = 'assets'
-const DATA_FILE_NAME = '/.silex.data.json'
-const PUBLICATION_PATH = 'publication'
-
-function path(id = 'default') {
-  return join(FS_ROOT, id)
-}
-
-exports.assetsDir = async function (id) {
-  return join(path(id), ASSETS_PATH)
-}
-
-exports.assetUrl = async function (id, fileName) {
-  return `${ASSETS_URL}/${fileName}`
-}
-
-// Init files for projects and each project
-exports.init = async function (id) {
-  await mkdirIfNotExists(FS_ROOT)
-  const folder = path(id)
-  const uploadDir = join(folder, ASSETS_PATH)
-  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) {
-  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) {
-  return writeFile(path(id) + DATA_FILE_NAME, JSON.stringify(data))
-}
-function required(prop, name) {
-  if (!prop) throw new Error(`Error missing required param ${name}`)
-}
-exports.publish = async function (id, files, data) {
-  const { assets, settings, publication } = data
-  required(assets, 'assets')
-  required(files, 'files')
-  required(id, 'id')
-  const folder = path(id)
-  const publicationDir = join(folder, publication?.path || PUBLICATION_PATH)
-
-  // HTML and CSS
-  await Promise.all(files
-    .map(async (file) => {
-      // // Process the page CSS to have correct relative URLs
-      // let css = file.css
-      // try {
-      //   if(settings?.html?.path != settings?.css?.path) {
-      //     const rewriter = new URLRewriter(function(url) {
-      //       const translator = new URLTranslator()
-      //       return translator.translate(url, settings?.html?.path, settings?.css?.path)
-      //     })
-      //     css = rewriter.rewrite(css)
-      //   }
-      // } catch (err) {
-      //   console.error('Error processing CSS', err, file)
-      //   throw new Error(`Error processing CSS. ${err.message}`)
-      // }
-      try {
-        // Paths
-        const htmlPath = join(publicationDir, file.htmlPath)
-        const cssPath = join(publicationDir, file.cssPath)
-        // Init
-        await mkdirIfNotExists(dirname(htmlPath), { recursive: true, })
-        await mkdirIfNotExists(dirname(cssPath), { recursive: true, })
-        // Write
-        await writeFile(htmlPath, file.html)
-        await writeFile(cssPath, file.css)
-      } catch (err) {
-        throw new Error(`Publication error: could not write files ${file.cssPath} and ${file.htmlPath}. ${err.message}`)
-      }
-    }))
-  // Assets
-  const assetsFolder = join(publicationDir, publication?.assets?.path || ASSETS_PATH)
-  await mkdirIfNotExists(assetsFolder, { recursive: true, })
-
-  assets.forEach(async asset => {
-    required(asset.src, 'asset\'s "src" attribute')
-    const src = join(folder, asset.src)
-    const dst = join(assetsFolder, basename(asset.src))
-    try {
-      await copyFile(src, dst)
-    } catch (err) {
-      throw new Error(`Publication error: could not copy asset file ${src} to ${dst}. ${err.message}`)
-    }
-  })
-  return publication?.url
-}

package/src/plugins/ExpressPlugin.js

@@ -1,39 +0,0 @@
-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
-  const options = {
-    jsonLimit: process.env.SILEX_EXPRESS_JSON_LIMIT || '1mb',
-    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())
-
-    // cookie & session
-    app.use(bodyParser.json({limit: options.jsonLimit}))
-    app.use(bodyParser.text({limit: options.textLimit}))
-    app.use(cookieParser())
-    app.use(session({
-      name: options.sessionName,
-      secret: options.sessionSecret,
-    }))
-  })
-}
-

package/src/plugins/HooksPlugin.js

@@ -1,58 +0,0 @@
-import { Config } from '../config'
-import { EVENT_WRITE_END, EVENT_ASSET_WRITE_END } from './WebsitePlugin'
-import { EVENT_PUBLISH_END } from './PublishPlugin'
-import fetch from 'node-fetch'
-import { projectPath, assetsDir } from '../project'
-
-// type HooksOptions = {
-//   gitUrl?: string
-//   buildUrl?: string
-// }
-
-const rootPath = process.env.DATA_FOLDER
-
-module.exports = async function(config, opts = {}) {
-  // Options with defaults
-  const options = {
-    gitUrl: process.env.SILEX_HOOK_GIT,
-    buildUrl: process.env.SILEX_HOOK_BUILD,
-    ...opts
-  }
-  config.on(EVENT_WRITE_END, async ({ res, req, projectId, data }) => {
-    if(options.gitUrl) {
-      await hook(options.gitUrl, {
-        path: projectPath(projectId),
-        message: 'Change from Silex',
-      })
-    }
-  })
-  config.on(EVENT_ASSET_WRITE_END, async ({ res, req, projectId, uploadDir, form, data }) => {
-    if(options.gitUrl) {
-      await hook(options.gitUrl, {
-        path: projectPath(projectId),
-        message: 'Change from Silex',
-      })
-    }
-  })
-  config.on(EVENT_PUBLISH_END, async ({ projectId, files, req, res }) => {
-    if(options.buildUrl) {
-      await hook(options.buildUrl)
-    }
-  })
-}
-
-async function hook(url, params = {}) {
-  if(url) {
-    const urlObj = new URL(url)
-    console.log('Calling hook', {url})
-    try {
-      Object.keys(params)
-        .forEach(key => urlObj.searchParams.append(key, params[key]))
-      return fetch(urlObj.toString())
-    } catch(error) {
-      console.log('Hook call failed', {url, error})
-      return null
-    }
-  }
-}
-

package/src/plugins/PublishPlugin.js

@@ -1,69 +0,0 @@
-const express = require('express')
-const { resolve } = require('path')
-
-const { noCache } = require('./Cache')
-const { minify } = require('html-minifier')
-
-const router = express.Router()
-
-// type PublishOptions = {
-//   statusUrl?: string
-// }
-
-module.exports = async function(config, opts = {}) {
-  const options = {
-    // Defaults
-    statusUrl: process.env.SILEX_PUBLICATION_STATUS_URL,
-    backend: 'src/plugins/DefaultBackend.js',
-    // Options
-    ...opts,
-  }
-
-  // Link to the desired backend
-  const backend = resolve(__dirname, '../..', options.backend)
-  const { publish } = require(backend)
-
-  config.on('silex:startup:start', ({app}) => {
-    // Start publication
-    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 params required', {id})
-        res.status(400).send({
-          message: 'Error in the request, pages and id params required',
-        })
-      } else {
-        // Optim
-        files.forEach(file => {
-          file.html = minify(file.html, {
-            continueOnParseError: true,
-            collapseInlineTagWhitespace: true,
-            collapseWhitespace: true,
-            minifyCSS: true,
-            minifyJS: true,
-            removeScriptTypeAttributes: true,
-            removeStyleLinkTypeAttributes: true,
-          }).trim()
-        })
-        // Publication
-        await config.emit('silex:publish:start', { id, files, req})
-        let url
-        try {
-          url = await publish(id, files, req.body.data)
-        } catch (err) {
-          console.error('Error publishing the website', err)
-          res.status(500).json({ message: `Error publishing the website. ${err.message}`})
-          return
-        }
-        const mutable = { id, files, req, res, url, statusUrl: options.statusUrl }
-        await config.emit('silex:publish:end', mutable)
-        res.json({
-          url: mutable.url,
-          statusUrl: mutable.statusUrl,
-        })
-      }
-    })
-
-    app.use(noCache,  router)
-  })
-}

package/src/plugins/StaticPlugin.js

@@ -1,48 +0,0 @@
-const express = require('express')
-const nodeModules = require('node_modules-path')
-const serveStatic = require('serve-static')
-const { withCache } = require('./Cache')
-
-const Path = require('path')
-
-// type StaticOptions = {
-//   routes?: {
-//     path?: string
-//     route?: string
-//     module?: string
-//   }[]
-// }
-
-module.exports = async function(config, opts = {}) {
-  // Options with defaults
-  const options = {
-    rootPath: Path.join(__dirname, '../..'),
-    routes: [
-      {
-        route: '/',
-        path: 'public',
-      }, {
-        route: '/',
-        path: 'dist/client',
-      },
-    ]
-    // add project route for source maps
-    .concat(config.debug ? [{
-      route: '/',
-      path: './',
-    }] : []),
-    ...opts,
-  }
-
-  config.on('silex:startup:start', ({app}) => {
-    const router = express.Router()
-    options.routes
-      .forEach(folder => {
-        // either the module root folder or silex root folder
-        const path = Path.join(options.rootPath, folder.path || '')
-        if (!folder.route) throw new Error('The config for static module has no `route` attribute: ' + folder)
-        router.use(folder.route, serveStatic(path))
-      })
-    app.use(withCache,  router)
-  })
-}