@silexlabs/silex 3.0.0-alpha.49 → 3.0.0-alpha.50

package/src/ts/server/utils/BackwardCompat.ts

@@ -20,532 +20,533 @@
  *
  */
 
-import * as Path from 'path'
-import * as fs from 'fs'
-
-import { Constants } from '../../constants'
-import {
-  ElementData,
-  ElementState,
-  ElementType,
-  Link,
-  LinkType
-} from '../../client/element-store/types'
-import { PageData } from '../../client/page-store/types'
-import { PersistantData } from '../../client/store/types'
-import {
-  cleanupBefore,
-  getElementsFromDomBC,
-  getPagesFromDom,
-  getSiteFromDom,
-  writeSiteStyles,
-  writeStyles
-} from './BackwardCompatV2.5.60'
-import { getDomElement } from '../../client/element-store/dom'
-import { setTagName } from '../../client/utils/dom'
-import { writeDataToDom } from '../../client/store/dom'
-
-/**
- * util function for the "fixes", @see fixes
- */
-function updateLinks<T extends { link?: Link }>(items: T[]): T[] {
-  return items
-    .map((item: T) => {
-      if(!!item.link && !item.link.linkType) {
-        // add new props
-        const link: any = {
-          ...item.link,
-          linkType: item.link.type as LinkType,
-          href: (item.link as any).value,
-        }
-        // remove old props
-        delete link.type
-        delete link.value
-        // return the updated element
-        return {
-          ...item,
-          link,
-        }
-      } else {
-        return item
-      }
-    })
-}
-
-/**
- * class name for containers which are created with sections
- */
-const SECTION_CONTAINER = 'silex-container-content'
-
-export default class BackwardCompat {
-  private data: PersistantData = null
-  private frontEndVersion: string[]
-  private silexVersion: number[]
-
-  constructor(private rootUrl: string, rootPath = __dirname + '/../../../..') {
-    /**
-     * the version of the website is stored in the generator tag as "Silex v-X-Y-Z"
-     * we get it from package.json
-     * used for backward compat and for the static files URLs taken from //{{host}}/static/{{Y-Z}}
-     */
-    const packageJson = JSON.parse(fs.readFileSync(Path.resolve(rootPath, 'package.json')).toString())
-    this.frontEndVersion = packageJson['version:frontend'].split('.').map((s) => parseInt(s))
-    this.silexVersion = packageJson['version:backwardcompat'].split('.').map((s) => parseInt(s))
-
-    // const components = require('../../../dist/client/libs/prodotype/components/components.json')
-    console.log(`\nStarting. Version is ${this.silexVersion} for the websites and ${this.frontEndVersion} for Silex\n`)
-  }
-
-  // remove all tags
-  // export for tests
-  removeIfExist(doc: HTMLDocument, selector: string) {
-    Array.from(doc.querySelectorAll(selector))
-      .forEach((tag) => tag.remove())
-  }
-
-  // remove all useless css class
-  // export for tests
-  removeUselessCSSClass(doc: HTMLDocument, className: string) {
-    Array.from(doc.querySelectorAll('.' + className))
-      .forEach((el) => el.classList.remove(className))
-  }
-
-  getVersion(doc): number[] {
-    // if no generator tag, create one
-    let metaNode = doc.querySelector('meta[name="generator"]')
-    if (!metaNode) {
-      metaNode = doc.createElement('meta')
-      metaNode.setAttribute('name', 'generator')
-      doc.head.appendChild(metaNode)
-    }
-    // retrieve the website version from generator tag
-    return (metaNode.getAttribute('content') || '')
-      .replace('Silex v', '')
-      .split('.')
-      .map((str) => parseInt(str, 10) || 0)
-  }
-
-  hasDataFile(doc): boolean {
-    return !this.hasToUpdate(this.getVersion(doc), [2, 2, 11])
-  }
-
-  /**
-   * handle backward compatibility issues
-   * Backwardcompatibility process takes place after opening a file
-   * @param {Document} doc
-   * @return {Promise} a Promise, resolve can be called with a warning message
-   */
-  async update(doc: HTMLDocument, data: PersistantData): Promise<[string, PersistantData]> {
-    // // fix an issue when the style tag has no type, then json is "broken"
-    // const styleTag = doc.querySelector('.' + Constants.JSON_STYLE_TAG_CLASS_NAME);
-    // if (styleTag) { styleTag.type = 'text/json'; } // old versions of silex have no json at all so do nothing in that case
-    // TODO: move this to the data model (e.g. data.site.silexVersion)
-
-    // we need this.data as to2_2_11 will extract it and set it from the dom
-    this.data = data
-
-    const version = this.getVersion(doc)
-    const hasToUpdate = this.hasToUpdate(version, this.silexVersion)
-
-    // warn the user
-    if (this.amIObsolete(version, this.silexVersion)) {
-      return ['This website has been saved with a newer version of Silex. Continue at your own risks.', this.data]
-    } else if (this.hasToUpdate(version, [2, 2, 7])) {
-      return Promise.reject({
-        message: 'This website has been saved with an older version of Silex, which is not supported anymore as of March 2018. In order to convert it to a newer version, please go to <a href="https://old.silex.me">old.silex.me</a> to open and then save your website. <a href="https://github.com/silexlabs/Silex/wiki/Website-saved-with-older-version-of-Silex">More about this here</a>',
-      })
-    } else if (hasToUpdate) {
-      // convert to the latest version
-      const allActions = {
-        '2.2.8': await this.to2_2_8(version, doc),
-        '2.2.9': await this.to2_2_9(version, doc),
-        '2.2.10': await this.to2_2_10(version, doc),
-        '2.2.11': await this.to2_2_11(version, doc), // this will set this.data
-        '2.2.12': await this.to2_2_12(version, doc),
-        '2.2.13': await this.to2_2_13(version, doc),
-        '2.2.14': await this.to2_2_14(version, doc),
-      }
-      // update the static scripts to match the current server and latest version
-      this.updateStatic(doc)
-      // store the latest version
-      const metaNode = doc.querySelector('meta[name="generator"]')
-      metaNode.setAttribute('content', 'Silex v' + this.silexVersion.join('.'))
-      // apply all-time fixes
-      this.fixes(doc)
-      // build the report for the user
-      const report = Object.keys(allActions)
-        .filter((_version) => allActions[_version].length > 0)
-        .map((_version) => {
-          return `<p>Update to version ${ _version }:
-            <ul>${ allActions[_version].map((_action) => `<li class="no-list">${ _action }</li>`).join('') }</ul>
-        </p>`
-        }).join('')
-      // save data to dom for front-end.js and other scripts
-      // in case data has been changed
-      // FIXME: should not have this.data mutated but returned by update scripts
-      writeDataToDom(doc, this.data)
-      // needs to reload if silex scripts and stylesheets have been updated
-      return [`
-        <p>This website has been updated to Silex latest version.</p>
-        <p>Before you save it, please check that everything is fine. Saving it with another name could be a good idea too (menu file > save as).</p>
-        <details>
-          <summary>Details</summary>
-          <small>
-            ${ report }
-          </small>
-        </details>
-      `,
-      this.data,
-      ]
-    } else {
-      // update the static scripts to match the current server URL
-      this.updateStatic(doc)
-      // apply all-time fixes
-      this.fixes(doc)
-      // resolve immediately
-      return ['', this.data]
-    }
-  }
-
-  /**
-   * Check for common errors in editable html files
-   */
-  fixes(doc: HTMLDocument) {
-    // const pages: HTMLElement[] = Array.from(doc.querySelectorAll(`.${Constants.PAGES_CONTAINER_CLASS_NAME} a[${Constants.TYPE_ATTR}="page"]`));
-    // if (pages.length > 0) {
-    //   console.log('Fix error of wrong silex type for', pages.length, 'pages');
-    //   pages.forEach((page) => page.setAttribute(Constants.TYPE_ATTR, Constants.TYPE_PAGE));
-    // }
-
-    // the following is a fix following the beta version of 07-2020
-    // for elements and pages:
-    // link.value becomes href
-    // link.type becomes linkType
-    this.data = {
-      site: this.data.site,
-      pages: updateLinks<PageData>(this.data.pages),
-      elements: updateLinks<ElementData>(this.data.elements),
-    }
-    // remove juery-ui at publication, in case the website has been updated before the fix of 2.6.2
-    Array.from(doc.querySelectorAll('script[src$="pageable.js"], script[src$="jquery-ui.js"]'))
-      .forEach((tag) => tag.setAttribute(Constants.ATTR_REMOVE_PUBLISH, ''))
-    // this does not work because sections can not be smaller than their content:
-    // // resizable sections
-    // this.data = {
-    //   ...this.data,
-    //   elements: this.data.elements
-    //     .map((el) => el.type === ElementType.SECTION ? {
-    //       ...el,
-    //       enableResize: {
-    //         bottom: true,
-    //         top: true,
-    //         left: false,
-    //         right: false,
-    //       }
-    //     } : el),
-    // }
-
-    // remove pages which do not exist (was caused by a bug in deletePages, fix 2021-03)
-    // also remove css classes which are pages  (was caused by a bug??)
-    this.data.elements = this.data.elements.map(el => ({
-      ...el,
-      pageNames: el.pageNames.filter(name => this.data.pages.some(p => p.id === name)),
-      classList: el.classList.filter(name => !this.data.pages.some(p => p.id === name)),
-    }))
-  }
-
-  /**
-   * update the static scripts to match the current server and latest version
-   */
-  updateStatic(doc: HTMLDocument) {
-    // update //{{host}}/2.x/... to latest version
-    Array.from(doc.querySelectorAll('[' + Constants.STATIC_ASSET_ATTR + ']'))
-      .forEach((element: HTMLElement) => {
-        const propName = element.hasAttribute('src') ? 'src' : 'href'
-        if (element.hasAttribute(propName)) {
-          const newUrl = this.getStaticResourceUrl(element[propName])
-          const oldUrl = element.getAttribute(propName)
-          if (oldUrl !== newUrl) {
-            element.setAttribute(propName, newUrl)
-          }
-        }
-      })
-  }
-
-  /**
-   * get the complete URL for the static file,
-   * * on the current Silex server
-   * * with the latest Silex version
-   *
-   * this will result in a URL on the current server, in the `/static/` folder
-   *
-   * @example `//localhost:6805/static/2.1/example/example.js` returns `//editor.silex.me/static/2.7/example/unslider.js`
-   * @example `/static/2.1/example/example.js` returns `//editor.silex.me/static/2.7/example/example.js`
-   *
-   * with the current version
-   * @param {string} url
-   * @return {string}
-   */
-  getStaticResourceUrl(url: string): string {
-    const pathRelativeToStaticMatch = url.match(/static\/[0-9]*\.[0-9]*\/(.*)/)
-    if (pathRelativeToStaticMatch == null) {
-      console.warn('Error: could not extract the path and file name of static asset', url)
-      return url
-    }
-    const pathRelativeToStatic = pathRelativeToStaticMatch[1]
-    return `${ this.rootUrl }/static/${ this.frontEndVersion[0] }.${ this.frontEndVersion[1] }/${ pathRelativeToStatic }`
-  }
-
-  /**
-   * check if the website has been edited with a newer version of Silex
-   * @param {Array.<number>} initialVersion the website version
-   * @param {Array.<number>} targetVersion  a given Silex version
-   * @return {boolean}
-   */
-  amIObsolete(initialVersion: number[], targetVersion: number[]): boolean {
-    return !!initialVersion[2] && initialVersion[0] > targetVersion[0] ||
-      initialVersion[1] > targetVersion[1] ||
-      initialVersion[2] > targetVersion[2]
-  }
-
-  /**
-   * check if the website has to be updated for the given version of Silex
-   * @param {Array.<number>} initialVersion the website version
-   * @param {Array.<number>} targetVersion  a given Silex version
-   * @return {boolean}
-   */
-  hasToUpdate(initialVersion: number[], targetVersion: number[]): boolean {
-    return initialVersion[0] < targetVersion[0] ||
-      initialVersion[1] < targetVersion[1] ||
-      initialVersion[2] < targetVersion[2]
-  }
-
-  to2_2_8(version: number[], doc: HTMLDocument): Promise<string[]> {
-    return new Promise((resolve, reject) => {
-      const actions = []
-      if (this.hasToUpdate(version, [2, 2, 8])) {
-        // cleanup the hamburger menu icon
-        const menuButton = doc.querySelector('.menu-button')
-        if (menuButton) {
-          menuButton.classList.remove('paged-element', 'paged-element-hidden', 'page-page-1', 'prevent-resizable')
-          menuButton.classList.add('hide-on-desktop')
-        }
-        // give the hamburger menu a size (TODO: add to the json model too)
-        doc.querySelector('.silex-inline-styles').innerHTML += '.silex-id-hamburger-menu {width: 50px;min-height: 40px;}'
-        // pages need to have href set
-        Array.from(doc.querySelectorAll('.page-element'))
-          .forEach((el: HTMLLinkElement) => {
-            el.setAttribute('href', '#!' + el.getAttribute('id'))
-          })
-        actions.push('I fixed the mobile menu so that it is compatible with the new publication (now multiple pages are generated instead of 1 single page for the whole website).')
-      }
-      resolve(actions)
-    })
-  }
-
-  to2_2_9(version: number[], doc: HTMLDocument): Promise<string[]> {
-    return new Promise((resolve, reject) => {
-      const actions = []
-      if (this.hasToUpdate(version, [2, 2, 9])) {
-        // remove the hamburger menu icon
-        const menuButton = doc.querySelector('.menu-button')
-        if (menuButton) {
-          menuButton.parentElement.removeChild(menuButton)
-          actions.push(
-            'I removed the mobile menu as there is now a component for that. <a target="_blank" href="https://github.com/silexlabs/Silex/wiki/Hamburger-menu">Read more about the Hamburger Menu component here</a>.',
-          )
-        }
-      }
-      resolve(actions)
-    })
-  }
-
-  to2_2_10(version: number[], doc: HTMLDocument): Promise<string[]> {
-    return new Promise((resolve, reject) => {
-      const actions = []
-      if (this.hasToUpdate(version, [2, 2, 10])) {
-        // the body is a drop zone, not selectable, not draggable, resizeable
-        doc.body.classList.add(
-          Constants.PREVENT_DRAGGABLE_CLASS_NAME,
-          Constants.PREVENT_RESIZABLE_CLASS_NAME,
-          Constants.PREVENT_SELECTABLE_CLASS_NAME)
-
-        // each section background and foreground is a drop zone, not selectable, not draggable, resizeable
-        const changedSections = Array.from(doc.querySelectorAll(`.${ElementType.SECTION}`)) as HTMLElement[]
-        changedSections.forEach((el: HTMLElement) => el.classList.add(
-          Constants.PREVENT_DRAGGABLE_CLASS_NAME,
-          Constants.PREVENT_RESIZABLE_CLASS_NAME,
-        ))
-
-        // we add classes to the elements so that we can tell the stage component if an element is draggable, resizeable, selectable...
-        const changedSectionsContent = Array.from(doc.querySelectorAll(`.${ElementType.SECTION}, .${ElementType.SECTION} .${SECTION_CONTAINER}`))
-        changedSectionsContent.forEach((el: HTMLElement) => el.classList.add(
-          Constants.PREVENT_DRAGGABLE_CLASS_NAME,
-          // Constants.PREVENT_RESIZABLE_LEFT_CLASS_NAME,
-          // Constants.PREVENT_RESIZABLE_RIGHT_CLASS_NAME
-        ))
-        actions.push(`Changed the body and ${changedSections.length} sections with new CSS classes to <a href="https://github.com/silexlabs/stage/" target="_blank">the new stage component.</a>`)
-
-        // types are now with a "-element" suffix
-        const changedElements = Array.from(doc.querySelectorAll(`[${Constants.TYPE_ATTR}]`))
-        changedElements.forEach((el: HTMLElement) => el.setAttribute(Constants.TYPE_ATTR, el.getAttribute(Constants.TYPE_ATTR) + '-element'))
-
-        actions.push(`Updated ${ changedElements.length } elements, changed their types to match the new version of Silex.`)
-      }
-      resolve(actions)
-    })
-  }
-
-  to2_2_11(version: number[], doc: HTMLDocument): Promise<string[]> {
-    return new Promise((resolve, reject) => {
-      const actions = []
-      if (this.hasToUpdate(version, [2, 2, 11])) {
-        // the body is supposed to be an element too
-        doc.body.classList.add(Constants.EDITABLE_CLASS_NAME)
-        actions.push('I made the body editable.')
-
-        const oldBodyId = doc.body.getAttribute('data-silex-id')
-        if (oldBodyId !== 'body-initial') {
-          actions.push('I udpated the body class name from "' + oldBodyId + '" to "body-initial".')
-          doc.body.setAttribute('data-silex-id', 'body-initial')
-          doc.body.classList.remove(oldBodyId)
-          doc.body.classList.add('body-initial')
-        }
-
-        // prepare the dom
-        cleanupBefore(doc)
-
-        // import elements
-        const elements = getElementsFromDomBC(doc)
-        writeStyles(doc, elements)
-
-        // site
-        const site = getSiteFromDom(doc)
-        writeSiteStyles(doc, site)
-
-        // pages
-        const pages = getPagesFromDom(doc)
-
-        if (elements.length && pages.length && site) {
-          this.data = {
-            site,
-            pages,
-            elements,
-          }
-          this.removeIfExist(doc, 'meta[name="website-width"]')
-          this.removeIfExist(doc, 'meta[name="hostingConnector"]')
-          this.removeIfExist(doc, 'meta[name="publicationPath"]')
-
-          // remove juery-ui at publication
-          Array.from(doc.querySelectorAll('script[src$="pageable.js"], script[src$="jquery-ui.js"]'))
-            .forEach((tag) => tag.setAttribute(Constants.ATTR_REMOVE_PUBLISH, ''))
-
-          ;['prevent-draggable', SECTION_CONTAINER].forEach((className) => this.removeUselessCSSClass(doc, className))
-
-          actions.push('I updated the model to the latest version of Silex.')
-          // pages
-          this.removeIfExist(doc, `.${Constants.PAGES_CONTAINER_CLASS_NAME}`)
-          actions.push('I removed the old pages system.')
-        } else {
-          console.error('Could not import site from v2.2.11', {elements, pages, site})
-        }
-      }
-      resolve(actions)
-    })
-  }
-
-  to2_2_12(version: number[], doc: HTMLDocument): Promise<string[]> {
-    return new Promise((resolve, reject) => {
-      const actions = []
-      if (this.hasToUpdate(version, [2, 2, 12])) {
-        // add empty metadata to the website object
-        this.data = {
-          ...this.data,
-          site: {
-            ...this.data.site,
-            data: {},
-          }
-        }
-        actions.push('add empty metadata to the website object')
-        // sections are now section tag
-        const changedSections = Array.from(doc.querySelectorAll(`.${ElementType.SECTION}`)) as HTMLElement[]
-        changedSections.forEach((el: HTMLElement) => setTagName(el, 'section'))
-        this.data = {
-          ...this.data,
-          elements: this.data.elements
-            .map((el) => ({
-              ...el,
-              tagName: getDomElement(doc, el as ElementState) ? getDomElement(doc, el as ElementState).tagName : 'DIV',
-            }))
-        }
-        actions.push('All sections have a &lt;SECTION&gt; tag name')
-      }
-      resolve(actions)
-    })
-  }
-
-  to2_2_13(version: number[], doc: HTMLDocument): Promise<string[]> {
-    return new Promise((resolve, reject) => {
-      const actions = []
-      if (this.hasToUpdate(version, [2, 2, 13])) {
-        Array.from(doc.querySelectorAll('[data-silex-href]'))
-          .forEach((tag: HTMLElement) => {
-            const newEl = setTagName(tag, 'A') as HTMLLinkElement
-            newEl.href = tag.getAttribute('data-silex-href')
-            newEl.removeAttribute('data-silex-href')
-          })
-        actions.push('Replaced old Silex links with standard HTML links.')
-      }
-      resolve(actions)
-    })
-  }
-
-  to2_2_14(version: number[], doc: HTMLDocument): Promise<string[]> {
-    return new Promise((resolve, reject) => {
-      const actions = []
-      if (this.hasToUpdate(version, [2, 2, 14])) {
-        // do not fix this: remove w3c warning "The type attribute is unnecessary for JavaScript resources"
-        //  because silex uses script type attr in WebsiteRouter
-        //  instead we remove the type at publication time in DomPublisher
-        // remove w3c warning "The type attribute for the style element is not needed and should be omitted."
-        const styles = Array.from(doc.querySelectorAll('style[type="text/css"]'))
-        if(styles.length) {
-          styles.forEach(el => el.removeAttribute('type'))
-          actions.push(`Fixed ${styles.length} w3c warning 'The type attribute for the style element is not needed and should be omitted.'`)
-        }
-        // This should not be useful (previous BC bug?)
-        // Remove empty attributes
-        // Sometimes we have style="", title=""...
-        let numEmpty = 0
-        const attrs = [
-          'href',
-          'style',
-          'rel',
-          'target',
-          'type',
-          'title',
-        ]
-        attrs.forEach((attr: string) => {
-          Array.from(doc.querySelectorAll(`[${attr}]`))
-            .forEach(el => {
-              if(el.hasAttribute(attr) && el.getAttribute(attr) === '') {
-                el.removeAttribute(attr)
-                numEmpty++
-              }
-            })
-        })
-        if(numEmpty) actions.push(`Removed ${numEmpty} empty attributes (${attrs.join(', ')})`)
-
-        // This should not be useful (previous BC bug?)
-        // Remove the href attribute from non <a> tags
-        // Sometimes we have href="null" on non a tags
-        const tagsWithWrongHref = Array.from(doc.querySelectorAll('[href]:not(a, link, base)'))
-        tagsWithWrongHref.forEach(el => {
-          el.removeAttribute('href')
-        })
-        if(tagsWithWrongHref.length) actions.push(`Removed ${tagsWithWrongHref.length} href attributes on non links tags`)
-      }
-      resolve(actions)
-    })
-  }
-}
+//import * as Path from 'path'
+//import * as fs from 'fs'
+//
+//import { Constants } from '../../constants'
+//import {
+//  ElementData,
+//  ElementState,
+//  ElementType,
+//  Link,
+//  LinkType
+//} from '../../client/element-store/types'
+//import { PageData } from '../../client/page-store/types'
+//import { PersistantData } from '../../client/store/types'
+//import {
+//  cleanupBefore,
+//  getElementsFromDomBC,
+//  getPagesFromDom,
+//  getSiteFromDom,
+//  writeSiteStyles,
+//  writeStyles
+//} from './BackwardCompatV2.5.60'
+//import { getDomElement } from '../../client/element-store/dom'
+//import { setTagName } from '../../client/utils/dom'
+//import { writeDataToDom } from '../../client/store/dom'
+//
+///**
+// * util function for the "fixes", @see fixes
+// */
+//function updateLinks<T extends { link?: Link }>(items: T[]): T[] {
+//  return items
+//    .map((item: T) => {
+//      if(!!item.link && !item.link.linkType) {
+//        // add new props
+//        const link: any = {
+//          ...item.link,
+//          linkType: item.link.type as LinkType,
+//          href: (item.link as any).value,
+//        }
+//        // remove old props
+//        delete link.type
+//        delete link.value
+//        // return the updated element
+//        return {
+//          ...item,
+//          link,
+//        }
+//      } else {
+//        return item
+//      }
+//    })
+//}
+//
+///**
+// * class name for containers which are created with sections
+// */
+//const SECTION_CONTAINER = 'silex-container-content'
+//
+//export default class BackwardCompat {
+//  private data: PersistantData = null
+//  private frontEndVersion: string[]
+//  private silexVersion: number[]
+//
+//  constructor(private rootUrl: string, rootPath = __dirname + '/../../../..') {
+//    /**
+//     * the version of the website is stored in the generator tag as "Silex v-X-Y-Z"
+//     * we get it from package.json
+//     * used for backward compat and for the static files URLs taken from //{{host}}/static/{{Y-Z}}
+//     */
+//    const packageJson = JSON.parse(fs.readFileSync(Path.resolve(rootPath, 'package.json')).toString())
+//    this.frontEndVersion = packageJson['version:frontend'].split('.').map((s) => parseInt(s))
+//    this.silexVersion = packageJson['version:backwardcompat'].split('.').map((s) => parseInt(s))
+//
+//    // const components = require('../../../dist/client/libs/prodotype/components/components.json')
+//    console.log(`\nStarting. Version is ${this.silexVersion} for the websites and ${this.frontEndVersion} for Silex\n`)
+//  }
+//
+//  // remove all tags
+//  // export for tests
+//  removeIfExist(doc: HTMLDocument, selector: string) {
+//    Array.from(doc.querySelectorAll(selector))
+//      .forEach((tag) => tag.remove())
+//  }
+//
+//  // remove all useless css class
+//  // export for tests
+//  removeUselessCSSClass(doc: HTMLDocument, className: string) {
+//    Array.from(doc.querySelectorAll('.' + className))
+//      .forEach((el) => el.classList.remove(className))
+//  }
+//
+//  getVersion(doc): number[] {
+//    // if no generator tag, create one
+//    let metaNode = doc.querySelector('meta[name="generator"]')
+//    if (!metaNode) {
+//      metaNode = doc.createElement('meta')
+//      metaNode.setAttribute('name', 'generator')
+//      doc.head.appendChild(metaNode)
+//    }
+//    // retrieve the website version from generator tag
+//    return (metaNode.getAttribute('content') || '')
+//      .replace('Silex v', '')
+//      .split('.')
+//      .map((str) => parseInt(str, 10) || 0)
+//  }
+//
+//  hasDataFile(doc): boolean {
+//    return !this.hasToUpdate(this.getVersion(doc), [2, 2, 11])
+//  }
+//
+//  /**
+//   * handle backward compatibility issues
+//   * Backwardcompatibility process takes place after opening a file
+//   * @param {Document} doc
+//   * @return {Promise} a Promise, resolve can be called with a warning message
+//   */
+//  async update(doc: HTMLDocument, data: PersistantData): Promise<[string, PersistantData]> {
+//    // // fix an issue when the style tag has no type, then json is "broken"
+//    // const styleTag = doc.querySelector('.' + Constants.JSON_STYLE_TAG_CLASS_NAME);
+//    // if (styleTag) { styleTag.type = 'text/json'; } // old versions of silex have no json at all so do nothing in that case
+//    // TODO: move this to the data model (e.g. data.site.silexVersion)
+//
+//    // we need this.data as to2_2_11 will extract it and set it from the dom
+//    this.data = data
+//
+//    const version = this.getVersion(doc)
+//    const hasToUpdate = this.hasToUpdate(version, this.silexVersion)
+//
+//    // warn the user
+//    if (this.amIObsolete(version, this.silexVersion)) {
+//      return ['This website has been saved with a newer version of Silex. Continue at your own risks.', this.data]
+//    } else if (this.hasToUpdate(version, [2, 2, 7])) {
+//      return Promise.reject({
+//        message: 'This website has been saved with an older version of Silex, which is not supported anymore as of March 2018. In order to convert it to a newer version, please go to <a href="https://old.silex.me">old.silex.me</a> to open and then save your website. <a href="https://github.com/silexlabs/Silex/wiki/Website-saved-with-older-version-of-Silex">More about this here</a>',
+//      })
+//    } else if (hasToUpdate) {
+//      // convert to the latest version
+//      const allActions = {
+//        '2.2.8': await this.to2_2_8(version, doc),
+//        '2.2.9': await this.to2_2_9(version, doc),
+//        '2.2.10': await this.to2_2_10(version, doc),
+//        '2.2.11': await this.to2_2_11(version, doc), // this will set this.data
+//        '2.2.12': await this.to2_2_12(version, doc),
+//        '2.2.13': await this.to2_2_13(version, doc),
+//        '2.2.14': await this.to2_2_14(version, doc),
+//      }
+//      // update the static scripts to match the current server and latest version
+//      this.updateStatic(doc)
+//      // store the latest version
+//      const metaNode = doc.querySelector('meta[name="generator"]')
+//      metaNode.setAttribute('content', 'Silex v' + this.silexVersion.join('.'))
+//      // apply all-time fixes
+//      this.fixes(doc)
+//      // build the report for the user
+//      const report = Object.keys(allActions)
+//        .filter((_version) => allActions[_version].length > 0)
+//        .map((_version) => {
+//          return `<p>Update to version ${ _version }:
+//            <ul>${ allActions[_version].map((_action) => `<li class="no-list">${ _action }</li>`).join('') }</ul>
+//        </p>`
+//        }).join('')
+//      // save data to dom for front-end.js and other scripts
+//      // in case data has been changed
+//      // FIXME: should not have this.data mutated but returned by update scripts
+//      writeDataToDom(doc, this.data)
+//      // needs to reload if silex scripts and stylesheets have been updated
+//      return [`
+//        <p>This website has been updated to Silex latest version.</p>
+//        <p>Before you save it, please check that everything is fine. Saving it with another name could be a good idea too (menu file > save as).</p>
+//        <details>
+//          <summary>Details</summary>
+//          <small>
+//            ${ report }
+//          </small>
+//        </details>
+//      `,
+//      this.data,
+//      ]
+//    } else {
+//      // update the static scripts to match the current server URL
+//      this.updateStatic(doc)
+//      // apply all-time fixes
+//      this.fixes(doc)
+//      // resolve immediately
+//      return ['', this.data]
+//    }
+//  }
+//
+//  /**
+//   * Check for common errors in editable html files
+//   */
+//  fixes(doc: HTMLDocument) {
+//    // const pages: HTMLElement[] = Array.from(doc.querySelectorAll(`.${Constants.PAGES_CONTAINER_CLASS_NAME} a[${Constants.TYPE_ATTR}="page"]`));
+//    // if (pages.length > 0) {
+//    //   console.log('Fix error of wrong silex type for', pages.length, 'pages');
+//    //   pages.forEach((page) => page.setAttribute(Constants.TYPE_ATTR, Constants.TYPE_PAGE));
+//    // }
+//
+//    // the following is a fix following the beta version of 07-2020
+//    // for elements and pages:
+//    // link.value becomes href
+//    // link.type becomes linkType
+//    this.data = {
+//      site: this.data.site,
+//      pages: updateLinks<PageData>(this.data.pages),
+//      elements: updateLinks<ElementData>(this.data.elements),
+//    }
+//    // remove juery-ui at publication, in case the website has been updated before the fix of 2.6.2
+//    Array.from(doc.querySelectorAll('script[src$="pageable.js"], script[src$="jquery-ui.js"]'))
+//      .forEach((tag) => tag.setAttribute(Constants.ATTR_REMOVE_PUBLISH, ''))
+//    // this does not work because sections can not be smaller than their content:
+//    // // resizable sections
+//    // this.data = {
+//    //   ...this.data,
+//    //   elements: this.data.elements
+//    //     .map((el) => el.type === ElementType.SECTION ? {
+//    //       ...el,
+//    //       enableResize: {
+//    //         bottom: true,
+//    //         top: true,
+//    //         left: false,
+//    //         right: false,
+//    //       }
+//    //     } : el),
+//    // }
+//
+//    // remove pages which do not exist (was caused by a bug in deletePages, fix 2021-03)
+//    // also remove css classes which are pages  (was caused by a bug??)
+//    this.data.elements = this.data.elements.map(el => ({
+//      ...el,
+//      pageNames: el.pageNames.filter(name => this.data.pages.some(p => p.id === name)),
+//      classList: el.classList.filter(name => !this.data.pages.some(p => p.id === name)),
+//    }))
+//  }
+//
+//  /**
+//   * update the static scripts to match the current server and latest version
+//   */
+//  updateStatic(doc: HTMLDocument) {
+//    // update //{{host}}/2.x/... to latest version
+//    Array.from(doc.querySelectorAll('[' + Constants.STATIC_ASSET_ATTR + ']'))
+//      .forEach((element: HTMLElement) => {
+//        const propName = element.hasAttribute('src') ? 'src' : 'href'
+//        if (element.hasAttribute(propName)) {
+//          const newUrl = this.getStaticResourceUrl(element[propName])
+//          const oldUrl = element.getAttribute(propName)
+//          if (oldUrl !== newUrl) {
+//            element.setAttribute(propName, newUrl)
+//          }
+//        }
+//      })
+//  }
+//
+//  /**
+//   * get the complete URL for the static file,
+//   * * on the current Silex server
+//   * * with the latest Silex version
+//   *
+//   * this will result in a URL on the current server, in the `/static/` folder
+//   *
+//   * @example `//localhost:6805/static/2.1/example/example.js` returns `//editor.silex.me/static/2.7/example/unslider.js`
+//   * @example `/static/2.1/example/example.js` returns `//editor.silex.me/static/2.7/example/example.js`
+//   *
+//   * with the current version
+//   * @param {string} url
+//   * @return {string}
+//   */
+//  getStaticResourceUrl(url: string): string {
+//    const pathRelativeToStaticMatch = url.match(/static\/[0-9]*\.[0-9]*\/(.*)/)
+//    if (pathRelativeToStaticMatch == null) {
+//      console.warn('Error: could not extract the path and file name of static asset', url)
+//      return url
+//    }
+//    const pathRelativeToStatic = pathRelativeToStaticMatch[1]
+//    return `${ this.rootUrl }/static/${ this.frontEndVersion[0] }.${ this.frontEndVersion[1] }/${ pathRelativeToStatic }`
+//  }
+//
+//  /**
+//   * check if the website has been edited with a newer version of Silex
+//   * @param {Array.<number>} initialVersion the website version
+//   * @param {Array.<number>} targetVersion  a given Silex version
+//   * @return {boolean}
+//   */
+//  amIObsolete(initialVersion: number[], targetVersion: number[]): boolean {
+//    return !!initialVersion[2] && initialVersion[0] > targetVersion[0] ||
+//      initialVersion[1] > targetVersion[1] ||
+//      initialVersion[2] > targetVersion[2]
+//  }
+//
+//  /**
+//   * check if the website has to be updated for the given version of Silex
+//   * @param {Array.<number>} initialVersion the website version
+//   * @param {Array.<number>} targetVersion  a given Silex version
+//   * @return {boolean}
+//   */
+//  hasToUpdate(initialVersion: number[], targetVersion: number[]): boolean {
+//    return initialVersion[0] < targetVersion[0] ||
+//      initialVersion[1] < targetVersion[1] ||
+//      initialVersion[2] < targetVersion[2]
+//  }
+//
+//  to2_2_8(version: number[], doc: HTMLDocument): Promise<string[]> {
+//    return new Promise((resolve, reject) => {
+//      const actions = []
+//      if (this.hasToUpdate(version, [2, 2, 8])) {
+//        // cleanup the hamburger menu icon
+//        const menuButton = doc.querySelector('.menu-button')
+//        if (menuButton) {
+//          menuButton.classList.remove('paged-element', 'paged-element-hidden', 'page-page-1', 'prevent-resizable')
+//          menuButton.classList.add('hide-on-desktop')
+//        }
+//        // give the hamburger menu a size (TODO: add to the json model too)
+//        doc.querySelector('.silex-inline-styles').innerHTML += '.silex-id-hamburger-menu {width: 50px;min-height: 40px;}'
+//        // pages need to have href set
+//        Array.from(doc.querySelectorAll('.page-element'))
+//          .forEach((el: HTMLLinkElement) => {
+//            el.setAttribute('href', '#!' + el.getAttribute('id'))
+//          })
+//        actions.push('I fixed the mobile menu so that it is compatible with the new publication (now multiple pages are generated instead of 1 single page for the whole website).')
+//      }
+//      resolve(actions)
+//    })
+//  }
+//
+//  to2_2_9(version: number[], doc: HTMLDocument): Promise<string[]> {
+//    return new Promise((resolve, reject) => {
+//      const actions = []
+//      if (this.hasToUpdate(version, [2, 2, 9])) {
+//        // remove the hamburger menu icon
+//        const menuButton = doc.querySelector('.menu-button')
+//        if (menuButton) {
+//          menuButton.parentElement.removeChild(menuButton)
+//          actions.push(
+//            'I removed the mobile menu as there is now a component for that. <a target="_blank" href="https://github.com/silexlabs/Silex/wiki/Hamburger-menu">Read more about the Hamburger Menu component here</a>.',
+//          )
+//        }
+//      }
+//      resolve(actions)
+//    })
+//  }
+//
+//  to2_2_10(version: number[], doc: HTMLDocument): Promise<string[]> {
+//    return new Promise((resolve, reject) => {
+//      const actions = []
+//      if (this.hasToUpdate(version, [2, 2, 10])) {
+//        // the body is a drop zone, not selectable, not draggable, resizeable
+//        doc.body.classList.add(
+//          Constants.PREVENT_DRAGGABLE_CLASS_NAME,
+//          Constants.PREVENT_RESIZABLE_CLASS_NAME,
+//          Constants.PREVENT_SELECTABLE_CLASS_NAME)
+//
+//        // each section background and foreground is a drop zone, not selectable, not draggable, resizeable
+//        const changedSections = Array.from(doc.querySelectorAll(`.${ElementType.SECTION}`)) as HTMLElement[]
+//        changedSections.forEach((el: HTMLElement) => el.classList.add(
+//          Constants.PREVENT_DRAGGABLE_CLASS_NAME,
+//          Constants.PREVENT_RESIZABLE_CLASS_NAME,
+//        ))
+//
+//        // we add classes to the elements so that we can tell the stage component if an element is draggable, resizeable, selectable...
+//        const changedSectionsContent = Array.from(doc.querySelectorAll(`.${ElementType.SECTION}, .${ElementType.SECTION} .${SECTION_CONTAINER}`))
+//        changedSectionsContent.forEach((el: HTMLElement) => el.classList.add(
+//          Constants.PREVENT_DRAGGABLE_CLASS_NAME,
+//          // Constants.PREVENT_RESIZABLE_LEFT_CLASS_NAME,
+//          // Constants.PREVENT_RESIZABLE_RIGHT_CLASS_NAME
+//        ))
+//        actions.push(`Changed the body and ${changedSections.length} sections with new CSS classes to <a href="https://github.com/silexlabs/stage/" target="_blank">the new stage component.</a>`)
+//
+//        // types are now with a "-element" suffix
+//        const changedElements = Array.from(doc.querySelectorAll(`[${Constants.TYPE_ATTR}]`))
+//        changedElements.forEach((el: HTMLElement) => el.setAttribute(Constants.TYPE_ATTR, el.getAttribute(Constants.TYPE_ATTR) + '-element'))
+//
+//        actions.push(`Updated ${ changedElements.length } elements, changed their types to match the new version of Silex.`)
+//      }
+//      resolve(actions)
+//    })
+//  }
+//
+//  to2_2_11(version: number[], doc: HTMLDocument): Promise<string[]> {
+//    return new Promise((resolve, reject) => {
+//      const actions = []
+//      if (this.hasToUpdate(version, [2, 2, 11])) {
+//        // the body is supposed to be an element too
+//        doc.body.classList.add(Constants.EDITABLE_CLASS_NAME)
+//        actions.push('I made the body editable.')
+//
+//        const oldBodyId = doc.body.getAttribute('data-silex-id')
+//        if (oldBodyId !== 'body-initial') {
+//          actions.push('I udpated the body class name from "' + oldBodyId + '" to "body-initial".')
+//          doc.body.setAttribute('data-silex-id', 'body-initial')
+//          doc.body.classList.remove(oldBodyId)
+//          doc.body.classList.add('body-initial')
+//        }
+//
+//        // prepare the dom
+//        cleanupBefore(doc)
+//
+//        // import elements
+//        const elements = getElementsFromDomBC(doc)
+//        writeStyles(doc, elements)
+//
+//        // site
+//        const site = getSiteFromDom(doc)
+//        writeSiteStyles(doc, site)
+//
+//        // pages
+//        const pages = getPagesFromDom(doc)
+//
+//        if (elements.length && pages.length && site) {
+//          this.data = {
+//            site,
+//            pages,
+//            elements,
+//          }
+//          this.removeIfExist(doc, 'meta[name="website-width"]')
+//          this.removeIfExist(doc, 'meta[name="hostingConnector"]')
+//          this.removeIfExist(doc, 'meta[name="publicationPath"]')
+//
+//          // remove juery-ui at publication
+//          Array.from(doc.querySelectorAll('script[src$="pageable.js"], script[src$="jquery-ui.js"]'))
+//            .forEach((tag) => tag.setAttribute(Constants.ATTR_REMOVE_PUBLISH, ''))
+//
+//          ;['prevent-draggable', SECTION_CONTAINER].forEach((className) => this.removeUselessCSSClass(doc, className))
+//
+//          actions.push('I updated the model to the latest version of Silex.')
+//          // pages
+//          this.removeIfExist(doc, `.${Constants.PAGES_CONTAINER_CLASS_NAME}`)
+//          actions.push('I removed the old pages system.')
+//        } else {
+//          console.error('Could not import site from v2.2.11', {elements, pages, site})
+//        }
+//      }
+//      resolve(actions)
+//    })
+//  }
+//
+//  to2_2_12(version: number[], doc: HTMLDocument): Promise<string[]> {
+//    return new Promise((resolve, reject) => {
+//      const actions = []
+//      if (this.hasToUpdate(version, [2, 2, 12])) {
+//        // add empty metadata to the website object
+//        this.data = {
+//          ...this.data,
+//          site: {
+//            ...this.data.site,
+//            data: {},
+//          }
+//        }
+//        actions.push('add empty metadata to the website object')
+//        // sections are now section tag
+//        const changedSections = Array.from(doc.querySelectorAll(`.${ElementType.SECTION}`)) as HTMLElement[]
+//        changedSections.forEach((el: HTMLElement) => setTagName(el, 'section'))
+//        this.data = {
+//          ...this.data,
+//          elements: this.data.elements
+//            .map((el) => ({
+//              ...el,
+//              tagName: getDomElement(doc, el as ElementState) ? getDomElement(doc, el as ElementState).tagName : 'DIV',
+//            }))
+//        }
+//        actions.push('All sections have a &lt;SECTION&gt; tag name')
+//      }
+//      resolve(actions)
+//    })
+//  }
+//
+//  to2_2_13(version: number[], doc: HTMLDocument): Promise<string[]> {
+//    return new Promise((resolve, reject) => {
+//      const actions = []
+//      if (this.hasToUpdate(version, [2, 2, 13])) {
+//        Array.from(doc.querySelectorAll('[data-silex-href]'))
+//          .forEach((tag: HTMLElement) => {
+//            const newEl = setTagName(tag, 'A') as HTMLLinkElement
+//            newEl.href = tag.getAttribute('data-silex-href')
+//            newEl.removeAttribute('data-silex-href')
+//          })
+//        actions.push('Replaced old Silex links with standard HTML links.')
+//      }
+//      resolve(actions)
+//    })
+//  }
+//
+//  to2_2_14(version: number[], doc: HTMLDocument): Promise<string[]> {
+//    return new Promise((resolve, reject) => {
+//      const actions = []
+//      if (this.hasToUpdate(version, [2, 2, 14])) {
+//        // do not fix this: remove w3c warning "The type attribute is unnecessary for JavaScript resources"
+//        //  because silex uses script type attr in WebsiteRouter
+//        //  instead we remove the type at publication time in DomPublisher
+//        // remove w3c warning "The type attribute for the style element is not needed and should be omitted."
+//        const styles = Array.from(doc.querySelectorAll('style[type="text/css"]'))
+//        if(styles.length) {
+//          styles.forEach(el => el.removeAttribute('type'))
+//          actions.push(`Fixed ${styles.length} w3c warning 'The type attribute for the style element is not needed and should be omitted.'`)
+//        }
+//        // This should not be useful (previous BC bug?)
+//        // Remove empty attributes
+//        // Sometimes we have style="", title=""...
+//        let numEmpty = 0
+//        const attrs = [
+//          'href',
+//          'style',
+//          'rel',
+//          'target',
+//          'type',
+//          'title',
+//        ]
+//        attrs.forEach((attr: string) => {
+//          Array.from(doc.querySelectorAll(`[${attr}]`))
+//            .forEach(el => {
+//              if(el.hasAttribute(attr) && el.getAttribute(attr) === '') {
+//                el.removeAttribute(attr)
+//                numEmpty++
+//              }
+//            })
+//        })
+//        if(numEmpty) actions.push(`Removed ${numEmpty} empty attributes (${attrs.join(', ')})`)
+//
+//        // This should not be useful (previous BC bug?)
+//        // Remove the href attribute from non <a> tags
+//        // Sometimes we have href="null" on non a tags
+//        const tagsWithWrongHref = Array.from(doc.querySelectorAll('[href]:not(a, link, base)'))
+//        tagsWithWrongHref.forEach(el => {
+//          el.removeAttribute('href')
+//        })
+//        if(tagsWithWrongHref.length) actions.push(`Removed ${tagsWithWrongHref.length} href attributes on non links tags`)
+//      }
+//      resolve(actions)
+//    })
+//  }
+//}
+//