fite/lib/compile-vue.js

/**
 * {}
 * @author yutent<yutent.io@gmail.com>
 * @date 2022/09/06 14:43:01
 */

import fs from 'iofs'
import scss from '@bytedo/sass'
import { createHash } from 'crypto'
import Es from 'esbuild'
import { join } from 'path'
import { compile } from '@vue/compiler-dom'

import {
  JS_EXP,
  STYLE_EXP,
  HTML_EXP,
  CSS_SHEET_EXP,
  HMR_SCRIPT
} from './constants.js'

const OPTIONS = {
  indentType: 'space',
  indentWidth: 2
}

// 修正路径合并 避免在windows下被转义
function urlJoin(...args) {
  return join(...args).replace(/\\/g, '/')
}

function md5(str = '') {
  let sum = createHash('md5')
  sum.update(str, 'utf8')
  return sum.digest('hex').slice(0, 8)
}

function scopeCss(css = '', hash) {
  return css.replace(CSS_SHEET_EXP, (m, selector) => {
    if (!selector.startsWith('@')) {
      selector = selector.split(',')

      selector = selector
        .map(s => {
          let tmp = s.split(' ')
          let last = tmp.pop()
          if (last.includes(':')) {
            last = last.replace(':', `[data-${hash}]:`)
          } else {
            last += `[data-${hash}]`
          }
          tmp.push(last)
          return tmp.join(' ')
        })
        .join(', ')
    }
    return selector + '{'
  })
}

/**
 * 编译scss为css
 * @param file <String> 文件路径或scss代码
 * @param mini <Boolean> 是否压缩
 */
export function compileScss(file, mini = true) {
  let style = mini ? 'compressed' : 'expanded'
  try {
    if (fs.isfile(file)) {
      return scss.compile(file, { style, ...OPTIONS }).css.trim()
    } else {
      return scss.compileString(file, { style, ...OPTIONS }).css.trim()
    }
  } catch (err) {
    console.log('compile scss: ', file)
    console.error(err)
  }
}

/**
 * 解析js
 * 主要是处理js的依赖引用
 * @param code <String> js代码
 */
export function parseJs(
  code = '',
  imports,
  { IS_MPA, currentPage, IS_ENTRY, DEPLOY_PATH } = {},
  isBuild
) {
  let fixedStyle = '\n\n'
  let ASSETS_JS = '/$ASSETS_JS/'
  let ASSETS_CSS = '/$ASSETS_CSS/'

  if (isBuild) {
    ASSETS_JS = '/assets/js/'
    ASSETS_CSS = '/assets/css/'
  }
  code = Es.transformSync(code).code || ''

  return (
    code
      .replace(/\r\n/g, '\n')
      .replace(
        /import ([\w\W]*?) from (["'])(.*?)\2/g,
        function (m, alias, q, name) {
          if (name.startsWith('@/')) {
            name = name.replace('@/', urlJoin(DEPLOY_PATH, ASSETS_JS))
          }

          if (!imports[name]) {
            if (name.startsWith('./') || name.startsWith('../')) {
              if (IS_ENTRY) {
                if (IS_MPA) {
                  name = `${currentPage}/` + name
                }
                name = urlJoin(DEPLOY_PATH, ASSETS_JS, name)
              }
            } else if (
              name.startsWith('/') &&
              !name.startsWith('//') &&
              !name.startsWith(urlJoin(DEPLOY_PATH, ASSETS_JS))
            ) {
              name = name.replace(/^\//, urlJoin(DEPLOY_PATH, ASSETS_JS))
            }

            if (!name.endsWith('.js') && !name.endsWith('.vue')) {
              if (name.includes('components')) {
                name += '.vue'
              } else {
                name += '.js'
              }
            }
          }
          if (isBuild) {
            name = name.replace(/\.vue$/, '.js')
          }
          return `import ${alias} from '${name}'`
        }
      )
      .replace(/import\((['"])(.*?)\1\)/g, function (m, q, name) {
        if (isBuild) {
          name = name.replace(/\.vue$/, '.js')
        }
        if (name.startsWith('@/')) {
          name = name.replace('@/', urlJoin(DEPLOY_PATH, ASSETS_JS))
        }
        return `import('${name}')`
      })
      .replace(/import (["'])(.*?)\1/g, function (m, q, name) {
        if (name.endsWith('.css') || name.endsWith('.scss')) {
          if (name.startsWith('@/')) {
            name = name.replace('@/', '/')
          }

          if (isBuild) {
            name = name.replace(/\.scss/, '.css')
          }
          let tmp = `style${Date.now()}`
          fixedStyle += `document.adoptedStyleSheets.push(${tmp})\n`

          // 修正那反人类的windows路径
          return `import ${tmp} from '${name}' assert { type: 'css' }\n${tmp}.path = '${name.replace(
            /\\/g,
            '/'
          )}'`
        } else {
          if (name.startsWith('@/')) {
            name = name.replace('@/', urlJoin(DEPLOY_PATH, ASSETS_JS))
          }
          //
          if (!imports[name]) {
            if (name.startsWith('./') || name.startsWith('../')) {
              if (IS_ENTRY) {
                if (IS_MPA) {
                  name = `${currentPage}/` + name
                }
                name = urlJoin(DEPLOY_PATH, ASSETS_JS, name)
              }
            } else if (
              name.startsWith('/') &&
              !name.startsWith('//') &&
              !name.startsWith(urlJoin(DEPLOY_PATH, ASSETS_JS))
            ) {
              name = name.replace(/^\//, urlJoin(DEPLOY_PATH, ASSETS_JS))
            }

            if (!name.endsWith('.js') && !name.endsWith('.vue')) {
              name += '.js'
            }
          }

          return `import '${name}'`
        }
      }) + fixedStyle
  )
}

/**
 * 将vue转为js
 * @param file <String> 文件路径
 * @return <String> 返回转换后的js代码
 */
export function compileVue(file, imports, options = {}, isBuild) {
  let filename = file.slice(options.SOURCE_DIR.length).replace(/\\/g, '/')
  let code = (fs.cat(file) || '').toString().replace(/\r\n/g, '\n')
  let CACHE = options.CACHE || {}
  let output = '',
    scoped = false

  let js = code.match(JS_EXP)
  let scss = [...code.matchAll(STYLE_EXP)]
  let html = code.match(HTML_EXP) || ['', '']

  let hash = md5(file)
  let scopeId = 'data-' + hash

  scss = scss
    .map(it => {
      let css
      if (it.length > 2) {
        css = compileScss(it[2])

        if (it[1].includes('scoped')) {
          scoped = true
          css = scopeCss(css, hash)
        }
      } else {
        css = compileScss(it[1])
      }
      return css
    })
    .join(' ')

  js = js ? js[1] : ''

  html = compile(html[1], {
    mode: 'module',
    prefixIdentifiers: true,
    hoistStatic: true,
    cacheHandlers: true,
    scopeId: scoped ? scopeId : void 0,
    sourceMap: false,
    isCustomElement: tag => tag.startsWith('wc-')
  }).code.replace('export function render', 'function render')

  output += html + '\n\n'

  if (CACHE[file]) {
    CACHE[file] = {
      changed: CACHE[file].js !== js || CACHE[file].html !== html,
      js,
      html
    }
  } else {
    CACHE[file] = { changed: false, js, html }
  }

  output += parseJs(js, imports, options, isBuild).replace(
    'export default {',
    'const __sfc__ = {\n  render,\n'
  )

  if (scss) {
    CACHE[file].css = scss

    // 修正那反人类的windows路径
    output += `
let stylesheet = new CSSStyleSheet()
stylesheet.path = '${filename}'
stylesheet.replaceSync(\`${scss}\`)
document.adoptedStyleSheets.push(stylesheet)
`
  }
  if (scoped) {
    output += `__sfc__.__scopeId = '${scopeId}'\n`
  }
  output += `__sfc__.__file = '${filename}'\nexport default __sfc__`

  return output
}

/**
 * 解析模板html
 */
export function parseHtml(html, { page, imports, entry }, isBuild = false) {
  return html
    .replace(/\r\n/g, '\n')
    .replace(
      '</head>',
      `  <script>window.process = {env: {NODE_ENV: '${
        isBuild ? 'production' : 'development'
      }'}}</script>\n${
        isBuild
          ? ''
          : `  <script>${
              Es.transformSync(HMR_SCRIPT, { minify: true }).code
            }</script>`
      }</head>`
    )
    .replace('{{title}}', page.title || '')
    .replace('{{keywords}}', page.keywords || '')
    .replace('{{description}}', page.description || '')
    .replace('{{importmap}}', JSON.stringify({ imports }))
    .replace(
      '<script src="main.js"></script>',
      `<script type="module">\n${entry}\n</script>`
    )
}