splendid/build/Splendid.js

const { Replaceable, replace } = require('../stdlib');
const { ensurePath, write, exists, read } = require('../stdlib');
const { clone } = require('../stdlib');
const { ensurePathSync } = require('../stdlib');
const { copyFileSync } = require('fs');
const { resolve, join, dirname, relative, basename, isAbsolute } = require('path');
const { c } = require('../stdlib');
const { writeFileSync, lstatSync, readFileSync, existsSync } = require('fs');
const { differently } = require('../stdlib');
const { deepStrictEqual } = require('assert');
const { controlStyle } = require('../stdlib');
const { compileStylesheetsSync } = require('../stdlib');
const { resolveInternal, stat, resolveFile, CLOSURE_STYLESHEETS } = require('./lib');
const { log, error } = require('./lib/logging');
const { render } = require('../stdlib');
const { aqt } = require('../stdlib');
const { sipsResolution } = require('./elements/img/lib');
const makeClassGetter = require('./lib/make-class-getter');
const { wrapSlash } = require('./lib/resource-stream');

let writingCache = Promise.resolve()

/**
 * The Splendid object unique for each page, that contains its metadata, including assets, used components, _etc_.
 */
class Splendid {
  /**
   * @param {Object} options
   * @param {string} [options.env] The environment for which Splendid is run.
   * @param {import('..').Page} [options.page] The page being processed.
   * @param {Array<import('..').Page>} [options.pages] The array of all pages.
   * @param {import('..').Config} [options.config] The configuration object.
   * @param {import('./App').default} [options.app] The app.
   */
  constructor({
    env, page, pages, config, cache = {}, app,
  }) {
    if (!app) throw new Error('The app is required.')
    if (!config) throw new Error('Config is required.')
    if (!page) throw new Error('Page is required.')
    if (!page.key) throw new Error('Page must have a key.')
    /**
     * This is used to wrap Ajax content in a div. Only use when there's additional markup around {{ content }} in a `div id="Content"` element.
     */
    this._ajaxWrapper = null

    /**
     * When called from components, this will return the name of the current file being processed.
     * @return {string}
     */
    this.currentFile = null
    /**
     * The environment for which Splendid is run.
     */
    this.env = env
    /**
     * The current page being processed.
     */
    this.page = page
    /**
     * The array of all pages in the app.
     */
    this.pages = pages
    /**
     * The configuration object.
     */
    this._config = config
    /**
     * The reference to the content stream.
     * @type {import('./lib/streams/ContentStream').default}
     */
    this.contentStream = null
    this.cache = cache

    /**
     * The styles added by the content and layout.
     */
    this._styles = []
    /**
     * The styles added by the content and layout for NOJS version.
     * @type {{ href: string }[]}
     */
    this._noJSstyles = []
    /**
     * The styles added by components to be inlined.
     * @type {!Array<string>}
     */
    this._inlineStyles = []
    /**
     * The scripts and modules that are to be added before the closing body tag.
     * @type {Array<{ src: string, type: string, 'data-onload': boolean, 'nocompile': boolean }>}
     */
    this._scripts = []
    /**
     * The links that should be added to the page as `<link href="..." props>`
     * @type {{ href: string }[]}
     */
    this._links = []
    this._externs = []
    /**
     * The inline scripts.
     * @type {Array<{ js: string, type: string }>}
     */
    this._js = []
    this._components = []
    /** All rename maps of CSS added by the components for compilation. */
    this._css = {}
    /** Rename maps that are exported for components. */
    this._renameMaps = {}

    /**
     * Strings that should be appended before the body end.
     */
    this.preBodyCode = []

    const splendidDir = dirname(require.resolve('splendid/package.json'))
    /**
     * This is required to construct the components invocation in layout stream by
     * calling competent.makeComps().
     */
    this.componentsMap = Object.entries(app.map).reduce((acc, [key, val]) => {
      let newKey
      if (key.startsWith(splendidDir)) {
        const inSplendid = key.replace(splendidDir, '') // e.g., /src or /build
        if (inSplendid.startsWith('/build')) {
          newKey = join('splendid', inSplendid) // already prepared transpiled JSX 👍
            .replace(/\.js$/, '')
        } else if (inSplendid.startsWith('/src') && !process.env.SPLENDID_SRC) {
          newKey = join('splendid', inSplendid.replace('/src', '/build'))
            .replace(/\.jsx?$/, '')
        } else { // local linking Splendid case
          // have to use paths because
          // JSX in node_modules is not transpiled
          const rel = relative(join(config.appDir, 'comps', dirname(this.page.key)), 'node_modules/splendid')
          newKey = key.replace(splendidDir, rel)
        }
      } else newKey = relative(resolve(
        config.appDir, 'comps', dirname(this.page.key)
      ), key)
      acc[newKey] = val
      return acc
    }, {})
    /**
     * The unprocessed map with real locations.
     */
    this._realComponentsMap = app.map

    this._writingCache = Promise.resolve()
    this._seed = 1

    this.polyfills = {}

    /**
     * The app holding replacements.
     */
    this.app = app

    /**
     * Whether the styles should be combined across the whole app.
     * Set by the `combine-css` components.
     */
    this.combineStyles = false

    /**
     * The code to be executed after ajax requests.
     */
    this._postAjax = []

    this.usedComponents = {} // the map
    // @todo: map components, elements, blocks
    /**
     * @type {Array<{re, replacement}>}
     */
    this.replacements = [...app.areaReplacements, ...app.replacements]

    this.headings = []
    /**
     * What selectors to hide with `no-js` class on html.
     */
    this.hiddenNoJs = []

    /**
     * Scripts that should be combined into a bundle (imported in comps file).
     */
    this.combinedScripts = []
    /**
     * Replacements that will be put back at the very end so that they don't participate in rules.
     * @type {string[]}
     */
    this.deferredReplacements = []
    /**
     * Rules added by components for post processing.
     */
    this.postProcessRules = {}
    /**
     * Init scripts that need to be invoked.
     */
    this._initComponents = []
    /**
     * Which parts of the big chunk of incoming data correspond
     * to what input file.
     */
    this._areas = []
    this._ids = {}

    /**
     * Whether Bootstrap selectors should be renamed.
     */
    this._renameBootstrap = false
    /**
     * Whether selectors from Bootstrap should be dropped.
     */
    this._dropBootstrap = false
    /**
     * @type {string}
     * Whether to embed combined CSS on the page. The `combine-css` component will set this to a marker
     * that will be replaced after after all pages are compiled.
     */
    this._embedCombined = null

    /**
     * Scripts in the head element.
     */
    this.headInlineScripts = []

    /**
     * The size of the root content column.
     */
    this.colSize = null
  }
  /**
   * Manually replace (render) a string block.
   * @param {string} data The block to replace.
   * @param {Array<Replacement>} [replacements] The rules.
   */
  async replace(data, replacements = this.replacements) {
    const rs = new Replaceable(replacements)
    rs.splendid = this
    const r = await replace(rs, data)
    return r
  }
  /**
   * @param {string} data
   * @param {Splendid} splendid
   */
  static async replace(data, splendid) {
    const rs = new Replaceable(splendid.replacements)
    const s = new Splendid({
      env: splendid.env,
      config: splendid.config,
      page: splendid.page,
      pages: splendid.pages,
      app: splendid.app,
    })
    rs.splendid = s
    const r = await replace(rs, data)
    return r
  }
  /**
   * Returns the actual deferred value based on a marker.
   * @param {string} value
   */
  getDeferred(value) {
    const r = value.startsWith('SPLENDID-DEFER-')
    if (!r) return value
    const [i] = /\d+/.exec(value)
    const v = this.deferredReplacements[i]
    return v
  }
  get controlStyle() {
    return controlStyle
  }
  get resolveInternal() {
    return resolveInternal
  }
  /**
   * Adds a link to the head tag.
   */
  addLink(link) {
    const h = JSON.stringify(link)
    if (this._links.some((a) => JSON.stringify(a) == h)) return
    this._links.push(link)
  }
  addPostProcessRule(name, rule) {
    this.postProcessRules[name] = rule
  }
  addHeading({ level, title }) {
    const id = Splendid.getId(title)
    this.headings.push({ level, title, id })
    return id
  }
  /**
   * Creates a string that is safe to put into the `id` attribute.
   * @param {string} title The string to convert into ID.
   */
  static getId(title) {
    const id = title.toLocaleLowerCase()
      .replace(/<\/?\w+\s+[\s\S]+?>/g, '')
      .replace(/\s+/g, '-')
      .replace(/([^-\w\d]|_)/g, '')
    return id
  }
  /**
   * Hide this selector when no-js is present. This will add
   * `<script>document.documentElement.classList.remove("no-js")</script>`
   * in the head.
   * @param {string} selector The selector to hide.
   */
  hideNoJs(selector) {
    if (!this.hiddenNoJs.includes(selector)) this.hiddenNoJs.push(selector)
  }
  get config() {
    return this._config
    // return {
    //   bundle: {
    //     css: 'combine-all',
    //     ...this._config.bundle || {},
    //   },
    //   ...this._config,
    // }
  }
  random(n = 5) {
    const nn = Math.pow(10, n)
    let x = Math.sin(this._seed++) * nn
    return Math.floor((x - Math.floor(x)) * nn)
  }
  /**
   * Returns html-save id with stripped tags.
   * @param {string} title Some string to convert into ID.
   */
  getId(title) {
    return Splendid.getId(title)
  }
  /**
   * @param {string} path The path to the file to add.
   * @param {boolean} [nocache] Bypass cache.
   */
  async addFile(path, nocache = this.config.nocache) {
    if (path in this.cache) return
    const { source, file } = resolveFile(path, this.config.appDir, this.page.dir)
    this.cache[path] = file
    const exi = await exists(source)
    const output = this.getDocPath(file)
    if (!exi) {
      const docExi = await exists(output)
      if (!docExi) {
        this.logError2('addFile', 'File %s was not added as it does not exist',
          c(relative('', source), 'red'))
      } else {
        // const e = await compareFiles(source, j) // could this be cached better
        // if (e) return
      }
      return
    }

    const mtime = await this.getLocaleMtime(source)
    const m = this.getCache('add-file', source)
    if (!nocache && m == mtime) return

    await clone(source, dirname(output))
    this.log2('addFile', relative('', source))
    if (!nocache) await this.appendCache('add-file', { [source]: mtime })
    return ''
  }
  /**
   * Add multiple files at once.
   * @param {string[]} paths Paths to files.
   * @param {boolean} nocache Don't use `add-files.json` cache.
   */
  async addFiles(paths, nocache = this.config.nocache) {
    const p = paths.filter((path) => {
      return !(path in this.cache)
    })
    const sources = (await Promise.all(p.map(async (path) => {
      const { source, file } = resolveFile(path, this.config.appDir, this.page.dir)
      this.cache[path] = file
      const exi = await exists(source)
      const output = this.getDocPath(file)
      if (!exi) {
        this.logError2('addFile', 'File %s was not added as it does not exist',
          c(relative('', source), 'red'))
        return
      }
      const s = relative('', source)
      return { source: s, output, date: new Date(exi.mtime).toLocaleString() }
    }))).filter(Boolean).reduce((acc, { source, output, date }) => {
      acc[source] = { output, date }
      return acc
    }, {})
    const mtimes = Object.entries(sources).reduce((acc, [key, { date }]) => {
      acc[key] = date
      return acc
    }, {})
    const cache = this.getCache('add-files')
    const pp = nocache ? mtimes : Object.entries(mtimes).reduce((acc, [key, val]) => {
      const current = cache[key]
      if (current == val) return acc
      acc[key] = val
      return acc
    }, {})
    await Promise.all(Object.keys(pp).map(async source => {
      const { output } = sources[source]
      await clone(source, dirname(output))
      this.log2('addFile', source)
    }))
    if (!nocache) await this.appendCache('add-files', pp)
  }
  /**
   * Escapes the >, < and & in the string wit HTML entities.
   * @param {string} string
   */
  escapeHTML(string = '') {
    return string
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
  }
  /**
   * @param {string} path The path to the file to add.
   * @param {boolean} [nocache] Bypass cache.
   */
  addFileSync(path, nocache = this.config.nocache) {
    if (path in this.cache) return
    const { source, file } = resolveFile(path, this.config.appDir)
    this.cache[path] = file
    const exi = existsSync(source)
    const output = this.getDocPath(file)
    if (!exi) {
      const docExi = existsSync(output)
      if (!docExi) {
        this.logError2('addFile', 'File %s was not added as it does not exist',
          c(relative('', source), 'red'))
      } else {
        // const e = await compareFiles(source, j) // could this be cached better
        // if (e) return
      }
      return
    }

    const mtime = this.getLocaleMtimeSync(source)
    const m = this.getCache('add-file', source)
    if (!nocache && m == mtime) return

    ensurePathSync(output)
    copyFileSync(source, output)
    this.log2('addFile', relative('', source))
    if (!nocache) this.appendCacheSync('add-file', { [source]: mtime })
    return ''
  }
  // /**
  //  * @param {string} path
  //  */
  // normalise(path) {
  //   if (path.startsWith(process.cwd())) {
  //     return relative(resolve(this.getPath('')), path)
  //   }
  //   return path
  // }
  /**
   * Returns the change mtime in local date format.
   * @param {string} path
   */
  async getLocaleMtime(path) {
    const s = await stat(path)
    const mtime = s.mtime.toLocaleString()
    return mtime
  }
  /**
   * Returns the change mtime in local date format.
   * @param {string} path
   */
  getLocaleMtimeSync(path) {
    const s = lstatSync(path)
    const mtime = s.mtime.toLocaleString()
    return mtime
  }
  /**
   * If the path starts with `.`, the return will be path relative to current file being processed in the splendid dir.
   * @param {string} src
   * @return {string}
   */
  resolveRelative(src) {
    // implemented by SplendidProxy in components/index.js

  }
  _resolveRelative(src, position) {
    if (!src) return src
    if (src.startsWith('~/')) {
      src = relative(this.config.appDir, src.replace('~/', ''))
    } else if (src.startsWith('.')) {
      if (!position) {
        this.logError2('resolve-relative', 'no position to resolve %s', src)
        return src
      }
      const currentFile = this._getCurrentFile(position)
      const thePath = join(dirname(currentFile), src)
      src = relative(this.config.appDir, thePath)
    }
    return src
  }
  /**
   * Marks the component for export and compilation as a JS Preact component on the page.
   */
  addComponent(key, id, props, children) {
    this._components.push({ key, id, props, children })
  }
  /**
   * Use `style` instead.
   * @depreacted
   */
  addStyle(...args) {
    this.logError('.addStyle is deprecated. Use .style instead.')
    return this.style(...args)
  }
  /**
   * Adds a style that should be combined together with other styles.
   * @param {string} path The location of the stylesheet.
   */
  style(path) {
    if (typeof path != 'string') throw new Error('A string only is expected.')
    // const style = typeof href == 'string' ? { href } : href
    // Object.assign(style, props)

    // if (style.preload) return this.preload(style)

    // const h = JSON.stringify(style)
    // if (this._styles.some((a) => JSON.stringify(a) == h)) return
    if (this._styles.includes(path)) return
    this._styles.push(path)
  }
  /**
   * Add a `<link href="{href}" rel="preload" as="{as}" ...props>` element to the head.
   * @param {Object|string} link The link as string or hash with href and other param.
   * @param {string} [as] The as attribute. Can be omitted for css and js files.
   */
  preload(link, as) {
    if (typeof link == 'string') link = { href: link }
    if (!as && !link.as) {
      if (link.href.endsWith('.css')) as = 'style'
      else if (link.href.endsWith('.js')) as = 'script'
      else throw new Error('The "as" attribute must be specified for a preload link.')
    }
    link.rel = 'preload'
    if (!link.as) link.as = as
    return this.addLink(link)
  }
  /**
   * @param {Object|string} href The stylesheet as string or hash with href and other param.
   * @param {Object} props Additional properties.
   */
  stylesheet(href, props = {}) {
    const link = typeof href == 'string' ? { href } : href
    Object.assign(link, props)
    link.rel = 'stylesheet'
    return this.addLink(link)
  }
  /**
   * Add the external style via the link element wrapped around <noscript>
   * @param {string} href
   */
  addNoJSStyle(href, props = {}) {
    const link = typeof href == 'string' ? { href } : href
    Object.assign(link, props)
    link.rel = 'stylesheet'

    const h = JSON.stringify(link)
    if (this._noJSstyles.some((a) => JSON.stringify(a) == h)) return
    this._noJSstyles.push(link)
  }
  /**
   * Add the style by inlining it inside of the head element.
   * @param {string} style
   */
  addInlineStyle(style) {
    if (!this._inlineStyles.includes(style))
      this._inlineStyles.push(style)
  }
  /**
   * Read the style, compile it and inline in the head element.
   * @param {string} path The path to the css inside the splendid app dir.
   * @param {Object} props Properties.
   * @param {string} [props.rootSelector] The root selector for each ruleset.
   */
  inlineCSS(path, props = {}) {
    const { rootSelector } = props
    const { source } = isAbsolute(path) ? { source: path } : resolveFile(path, this.config.appDir)

    const mtime = this.getLocaleMtimeSync(source)
    const { mtime: m, data } = this.getCache('inline-stylesheet', path)
    if (m == mtime) return this.addInlineStyle(data)

    this.log2('inlineCSS', 'Compiling %s', c(source, 'magenta'))

    const { status, stderr, stylesheet, block } = compileStylesheetsSync(source, {
      path: CLOSURE_STYLESHEETS,
      allowUnrecognizedProperties: true,
      prettyPrint: this.config.prettyCombineCSS,
      expandBrowserPrefix: true,
      rootSelector,
      rename: null,
    })
    if (status) {
      throw new Error(
        `Could not process inline stylesheet:\n${block || stderr}.`)
    } else if (stylesheet) {
      this.addInlineStyle(stylesheet)
      this.appendCacheSync('inline-stylesheet', { [path]: { mtime, data: stylesheet } })
    }
  }

  /**
   * @param {string} key
   * @param {Object} props
   */
  _addInitComponent(key, props) {
    this._initComponents.push({ key, props })
  }
  addCSS(...args) {
    this.logError('.addCSS is deprecated. Use .css instead.')
    return this.css(...args)
  }
  /**
   * This method is used by components to build the css.
   * @param {string} stylesheetPath The path to the stylesheet.
   * @param {string} [rootSelector] The root selector to start each ruleset with.
   * @param {Object} [opts]
   * @param {Array<string>|string} opts.whitelist Class names to whitelist.
   * @param {boolean} opts.exported Whether the component is exported and requires the rename map.
   * @param {boolean} [opts.dynamic=false] Whether the component will load the stylesheet manually (implementation must be provided).
   * @param {boolean} [opts.link=false] If the stylesheet will be included as a link in the head tag.
   * @param {boolean} [opts.inline=false] Compile and inline CSS in the head of the document.
   * @param {boolean} [opts.combined=true] Whether the style should be included on the page (default `true`).
   */
  css(stylesheetPath, rootSelector = null, opts = {}) {
    // 0. page-level cached already processed rename maps
    if (stylesheetPath in this._css) return this._css[stylesheetPath]

    let { whitelist, exported = true, inline, dynamic,
      link, combined = !(dynamic || link || inline), preload = false,
      allowUnrecognizedProperties,
    } = opts
    if (inline) return this.inlineCSS(stylesheetPath, { rootSelector })

    const { source: path, file } = resolveFile(stylesheetPath, this.config.appDir)

    if (whitelist && !Array.isArray(whitelist)) whitelist = [whitelist]

    const name = basename(file)
    const css = join('css', name) // create a name for file in splendid app dir

    if (dynamic) this.addNoJSStyle(css) // components will load it dynamically.
    else if (link) this.stylesheet(css) // add link to page
    else if (combined) this.style(css)  // adds style to the combined.css
    if (preload) this.preload(css, 'style')

    // 1. check cache
    const cache =  /** @type {{renameMap: Object, mtime: string}} */
      (this.  getCache('css', stylesheetPath))
    const mtime = this.getLocaleMtimeSync(path)
    if (cache.mtime == mtime && JSON.stringify(cache.whitelist) == JSON.stringify(whitelist)) {
      const d = makeClassGetter(cache.renameMap)
      this._css[stylesheetPath] = d
      if (exported) this._renameMaps[stylesheetPath] = cache.renameMap
      return d
    }

    // 2. compile

    this.log2('addCss', 'Compiling %s', c(path, 'magenta'))

    const { renameMap, stylesheet, status, stderr } = compileStylesheetsSync(path, {
      path: CLOSURE_STYLESHEETS,
      ...this.config.stylesheets,
      whitelist,
      rootSelector,
      expandBrowserPrefix: dynamic, // otherwise will be expanded during combine stage
      allowUnrecognizedProperties,
      // rename: 'SIMPLE',
      // whitelist: whitelist inthis.config.stylesheets.
    })

    if (status) {
      throw this.newError(`Could not compile CSS ${stylesheetPath}\n${stderr}`)
    }

    this.writeAppSync(css, stylesheet)

    // if (dynamic) writeFileSync(join('docs/css', name), stylesheet) ResourceStream will pick this up from nojs styles block

    const d = makeClassGetter(renameMap)
    this._css[stylesheetPath] = d

    if (exported) {
      writeRenameMap(this, stylesheetPath, renameMap)
      this._renameMaps[stylesheetPath] = renameMap
    }

    this.appendCacheSync('css', {
      [stylesheetPath]: {
        mtime,
        renameMap,
        ...(whitelist ? { whitelist } : {}),
      },
    })

    return d
  }
  deferRender(v) {
    const res = render(v)
    return this.deferReplacement(res)
  }
  newError(text) {
    const err = new Error(c(text, 'red'))
    err.stack = err.message
    return err
  }
  deferReplacement(value) {
    this.deferredReplacements.push(value)
    return `SPLENDID-DEFER-${this.deferredReplacements.length - 1}`
  }
  /**
   * Adds the polyfill to the build.
   * @param {string} name Available polyfills are: 'intersection-observer'.
   * @param {boolean} [combine] Whether to include into the PageComp rather that script tag.
   */
  polyfill(name, combine = false) {
    if (this.polyfills[name]) return
    if (name == 'intersection-observer') {
      this.script('splendid://js/polyfill/intersection-observer.js', false, {}, combine)
      this.addFile('splendid://js/polyfill/intersection-observer.js.map')
      // this.addJs(`if (!('IntersectionObserver' in window)) {
      //   var el = document.createElement('script')
      //   el.src = 'js/polyfill/intersection-observer.js'
      // }`, false, { id: 'io-polyfill' })
      this.polyfills[name] = true
    } else if (name == 'closest') {
      this.script('splendid://js/polyfill/closest.js', false, {}, combine)
      this.polyfills[name] = true
    } else if (name == 'replace-with') {
      this.script('splendid://js/polyfill/replace-with.js', false, {}, combine)
      this.polyfills[name] = true
    } else if (name == 'object-assign') {
      this.script('splendid://js/polyfill/object.assign.js', false, {}, combine)
      this.polyfills[name] = true
    }
    // if (this.polyfills[name])
    //   console.log('Successfully added %s polyfill', c(name, 'green'))
    // else
    //   console.log('Did not add %s polyfill', c(name, 'red'))
  }
  /**
   * Returns the path to the file inside of the app dir.
   * @param {string} path
   * @param {...string} args
   */
  getPath(path, ...args) {
    return join(this.config.appDir, path, ...args)
  }
  /**
   * Returns the path to the file inside of the output dir.
   * @param {string} path
   * @param {string[]} args
   */
  getDocPath(path, ...args) {
    const pp = join('/', path, ...args)
    return join(this.config.output, pp)
  }
  /**
   * Adds a script to the array.
   * @deprecated Use `script` instead.
   */
  addScript(...args) {
    this.logError('.addScript is deprecated. Use .script instead.')
    return this.script(...args)
  }
  /**
   * Adds a script to the array.
   * @param {string} script Path to the script relative to splendid app dir (e.g., js/script.js)
   * @param {boolean} [mod=false] Whether this is a module
   * @param {Object} [props] The properties.
   * @param {boolean|string} [combine=false] Whether to import the script in comps rather than embed using the `<script>` tag. If string is given, it is imported with name (todo).
   * @returns {boolean} Whether the script was added.
   */
  script(script, mod = false, props = {}, combine = false) {
    if (combine) {
      if (this.combinedScripts.includes(script)) return
      return this.combinedScripts.push(script)
    }

    const item = {
      src: script,
      ...(mod ? { type: 'module' } : {}),
      ...props,
    }

    const h = JSON.stringify(item)
    if (this._scripts.some((a) => JSON.stringify(a) == h)) return

    return this._scripts.push(item)
  }
  addJs(...args) {
    this.logError('.addJs is deprecated. Use .js instead.')
    return this.js(...args)
  }
  /**
   * Adds a script body to the document.
   * @param {string} js The JS source code to add.
   * @param {boolean} [mod=false] Whether to include this script as a module. Default `false`.
   * @param {Object} [props] The properties.
   * @param {boolean} [combine] Should this be part of PageComp (todo).
   */
  js(js, mod, props = {}, combine) {
    const item = {
      js,
      ...(mod ? { type: 'module' } : {}),
      ...props,
    }
    const h = JSON.stringify(item)
    if (this._js.some((a) => JSON.stringify(a) == h)) return
    return this._js.push(item)
  }
  /**
   * Adds an extern file for Closure.
   */
  addExtern(extern) {
    this.logError2('addExtern', 'deprecated, use `splendid.extern`.')
    this._externs.push(extern)
  }
  /**
   * Adds an extern file for Closure.
   */
  extern(extern) {
    if (!this._externs.includes(extern))
      this._externs.push(extern)
  }
  /**
   * Returns the cache for the given type as an object.
   * @param {string} type The type of the cache.
   * @param {string} [name] The name of the cache entry within the cache type.
   * @return {Object<string, *>}
   */
  getCache(type, name) {
    const p = resolve(this.config.appDir, `.cache/${type}.json`)
    delete require.cache[p]
    try {
      const r = require(p)
      if (name) {
        if (name in r) return r[name]
        return {}
      }
      return r
    } catch (err) {
      return {}
    }
  }
  /**
   * Returns a path according to the page's dir and mount.
   * @param {string} href The path to wrap.
   */
  wrapSlash(href) {
    return wrapSlash(href,
      this.config.mount, this.page.url, this.page.dir)
  }
  /**
   * Writes the file inside the app directory (`splendid`), after comparing to the existing version.
   * @param {string} path inside the app dir
   * @param {string|Buffer} data what to write
   */
  async writeApp(path, data) {
    const j = this.getPath(path)
    try {
      const current = await read(j)
      if (current == data) return j
    } catch (err) {
      debugger
      // ok
    }
    await ensurePath(j)
    await write(j, data)
    return j
  }
  /**
   * Returns the current file based on the position.
   * Called by competent implementation.
   * @param {number} pos
   * @param {Array<{file:string, from: number, length:number}>} areas
   */
  static getCurrentFile(pos, areas) {
    const area = areas.find(({ from, length }) => {
      const to = from + length
      return pos >= from && pos < to
    })
    if (!area) throw new Error(`Area for ${pos} not found`)
    return area.file
  }
  /**
   * Writes the file inside the app directory (`splendid`).
   * @param {string} path inside the app dir
   * @param {string|Buffer} data what to write
   */
  writeAppSync(path, data) {
    const j = this.getPath(path)

    try {
      const r = readFileSync(j, 'utf8')
      if (r == data) return
    } catch (err) {
      //
    }

    ensurePathSync(j)
    writeFileSync(j, data)
    return j
  }
  /**
   * Create a file in the docs directory.
   * @alias writeFile
   */
  writeDoc(path, data) {
    return this.writeFile(path, data)
  }
  /**
   * Create a file in the output directory.
   * @param {string} path The path in the docs dir.
   * @param {Buffer|string} data What to write.
   * @return {string} The path where the file was saved.
   */
  async writeFile(path, data) {
    const j = this.getDocPath(path)
    await ensurePath(j)
    await write(j, data)
    return j
  }
  appendCacheSync(type, value) {
    const r = this.getPath('.cache', `${type}.json`)
    ensurePathSync(r)
    const current = this.getCache(type)
    const v = { ...current, ...value }
    try {
      deepStrictEqual(v, current)
    } catch (err) {
      console.log('Updating cache for %s', r)
      console.log(differently(current, v).replace(': [object Object]', ''))
      const j = JSON.stringify(v, null, 2)
      writeFileSync(r, j)
    }
  }
  /**
   * The concurrency job for the component.
   */
  get concurrency() {
    return {}
  }
  async appendCache(type, value) {
    writingCache = writingCache.then(() => {
      // can't just spawn async fn otherwise errors won't be caught
      return new Promise(async (rr, jj) => {
        try {
          const r = this.getPath('.cache', `${type}.json`)
          await ensurePath(r)
          const current = this.getCache(type)
          const v = { ...current, ...value }
          try {
            deepStrictEqual(v, current)
          } catch (err) {
            console.log('Updating cache for %s', r)
            console.log(differently(current, v).replace(': [object Object]', ''))
            const j = JSON.stringify(v, null, 2)
            await this._writingCache
            const p = write(r, j)
            this._writingCache = p
            await p
          }
          rr()
        } catch (e) {
          jj(e)
        }
      })
    })
    return writingCache
  }
  /**
   * Call this method to make the component be initialised on pages.
   * @param {Object} props If passed, the HTML properties will be overriden with these new ones.
   */
  export(props) {
    // implementation in src/lib/components/index.js
  }
  /**
   * @param {boolean} enable Whether to enable pretty printing (default true).
   */
  setPretty(enable = true) {}
  /**
   * @param {boolean} enable Whether to enable pretty printing (default true).
   */
  pretty(enable = true) {}
  /**
   * By default, all elements will be rendered in two passes, to be able to render children.
   * This method controls this behaviour.
   * @param {boolean} [mightHaveRecursion] Whether to exclude the element key itself from second render.
   * Default `false`.
   * @param {boolean} shouldRender Should the second render happen. Default `true`.
   */
  renderAgain(mightHaveRecursion, shouldRender) {}
  /**
   * Logs data with the name of the component that is being replaced.
   */
  log(...args) {
    log('splendid', ...args)
  }
  /**
   * Logs error in red with the name of the component that is being replaced.
   */
  logError(...args) {
    error('splendid', ...args)
  }
  /**
   * Makes sure that the blank line won't appear in the output.
   * @returns {null}
   */
  removeLine() {
    return null
  }
  get log2() {
    return log
  }
  logError2(name, ...args) {
    error(name, ...args)
  }
  get COMPETENT_UPDATED() {
    if (_COMPETENT_UPDATED !== undefined) return false // just once per process
    const version = this.getCache('competent', 'version')
    _COMPETENT_UPDATED = version != COMPETENT_VERSION
    return _COMPETENT_UPDATED
  }
  get COMPETENT_VERSION() {
    return COMPETENT_VERSION
  }
  /**
   * Request a web page and return information including headers, statusCode, statusMessage along with the body (which is also parsed if JSON received).
   * @param {string} address The URL such as http://example.com/api.
   * @param {import('..').AqtOptions} [options] Configuration for requests.
   * @returns {Promise<import('..').AqtReturn>}
   */
  aqt(address, options) {
    return aqt(address, options)
  }
  /**
   * Gets image dimensions.
   * @param {string} input Path to the file.
   * @return {Promise<{width: number, height: number}>}
   */
  async imageDimensions(input) {
    const mtime = await this.getLocaleMtime(input)
    let { mtime: m, width, height } = this.getCache('image-dimensions', input)
    if (mtime == m) {
      return { width, height }
    }
    if (process.platform == 'darwin') {
      ({ pixelWidth: width, pixelHeight: height } = await sipsResolution(input))
    } else {
      throw new Error(`Platform ${
        process.platform} is not supported for image dimensions`)
    }
    await this.appendCache('image-dimensions', { [input]: {
      mtime, width, height } })
    return { width, height }
  }
  /**
   * Returns an array of suitable resizes.
   * @param {string} input The path to the image file.
   * @param {number[]} sizes The desired sizes
   * @param {number} max The maximum size.
   */
  async getResizes(input, sizes, max) {
    const { width, height } = await this.imageDimensions(input)
    const resizes = sizes
      .filter(s => s <= width && s <= max)
    return { resizes, width, height }
  }
}
let _COMPETENT_UPDATED
const COMPETENT_VERSION = '3.7.2'


/**
 * @param {Splendid} splendid
 * @param {string} stylesheetPath
 * @param {Object<string, string>} renameMap
 */
const writeRenameMap = (splendid, stylesheetPath, renameMap) => {
  // await ensurePath(splendid.getPath('comps', '__rename-maps', 't.js'))
  // await Object.entries(css).reduce(async (acc, [key, value]) => {
  // await acc
  const k = stylesheetPath.replace('splendid://', 'splendid/').replace(/\.css$/, '.js')
  const path = splendid.getPath('comps', '__rename-maps', k)
  ensurePathSync(path)
  const v = JSON.stringify(renameMap)
  writeFileSync(path, `export default ${v}`)
}


module.exports = Splendid