Hyrule - electron+react app开发实践

const win = new BrowserWindow({
  // 创建一个window, 用于加载html
  title: app.getName(),
  minHeight: 750,
  minWidth: 1090,
  webPreferences,
  show: false, // 避免app启动时候显示出白屏
  backgroundColor: '#2e2c29'
})
if (isDev) {
  win.loadURL('http://localhost:8989/') // 开发环境访问dev-server提供的页面
  // 配置react-dev-tool
  const {
    default: installExtension,
    REACT_DEVELOPER_TOOLS
  } = require('electron-devtools-installer')
  installExtension(REACT_DEVELOPER_TOOLS)
    .then(name => console.log(`Added Extension:  ${name}`))
    .catch(err => console.log('An error occurred: ', err))
  // win.webContents.openDevTools()
} else {
  // 生产环境直接加载index.html
  win.loadFile(`${__dirname}/../../../renderer/index.html`)
}

{
  "scripts": {
    "dev:web": "node ./build/devServer.js",
    "build:web": "webpack --progress --hide-modules --colors --config=build/prod.conf.js",
    "dev:main": "yarn build:main --watch",
    "build:main": "tsc -p tsconfig.electron.json",
    "dev:electron": "nodemon --watch ./dist/main --exec electron ./dist/electron/src/main/main.js",
    "build:package": "electron-builder --config ./electronrc.js -mwl",
    "build": "yarn build:web && yarn build:main && yarn build:package"
  }
}

// base64转blob
async function b64toblob(b64Data, contentType = 'application/octet-stream') {
  const url = `data:${contentType};base64,${b64Data}`
  const response = await fetch(url)
  const blob = await response.blob()
  return blob
}

// 注册协议
function registerStreamProtocol() {
  protocol.registerStreamProtocol('github', (req, callback) => {
    const { url } = req
    getImageByApi(url, getToken(), callback)
  })
}

function getImageByApi(
  url: string,
  _token: string,
  callback: (
    stream?: NodeJS.ReadableStream | Electron.StreamProtocolResponse
  ) => void
) {
  // 解析url
  const [, src] = url.split('//')
  if (!src) return
  const [owner, repo, sha, name] = src.split('/')
  const [, ext] = name.split('.')
  // 获取图片数据
  fetch(`https://api.github.com/repos/${owner}/${repo}/git/blobs/${sha}`, {
    headers: {
      Authorization: `token ${_token}`,
      'content-type': 'application/json'
    }
  }).then(async res => {
    const data = (await res.json()) as any
    // 转成Buffer
    const buf = Buffer.from(data.content, 'base64')
    // 构造Readable
    const read = new Readable()
    read.push(buf)
    read.push(null)
    res.headers
    callback({
      statusCode: res.status,
      data: read,
      // 将对应头部也带上
      headers: {
        'Content-Length': data.size,
        'Content-Type': `image/${ext}`,
        'Cache-Control:': 'public',
        'Accept-Ranges': 'bytes',
        Status: res.headers.get('Status'),
        Date: res.headers.get('date'),
        Etag: res.headers.get('etag'),
        'Last-Modified': res.headers.get('Last-Modified')
      }
    })
  })
}

function getImageByRaw(
  url: string,
  _token: string,
  callback: (
    stream?: NodeJS.ReadableStream | Electron.StreamProtocolResponse
  ) => void
) {
  const [, src] = url.split('//')
  // /repos/:owner/:repo/git/blobs/:sha
  const [owner, repo, , name] = src.split('/')
  // 直接fetch raw文件, 并且带上authorization即可
  fetch(`https://raw.githubusercontent.com/${owner}/${repo}/master/${name}`, {
    headers: {
      Authorization: `token ${_token}`
    }
  }).then(res => {
    // 直接返回reabable
    // 但是太慢了, 不知道为何
    callback({
      headers: res.headers.raw(),
      data: res.body,
      statusCode: res.status
    })
  })
}

class Cache<T> {
  _cache: {
    [k: string]: T
  } = {}
  set(key: string, data: T) {
    this._cache[key] = data
  }
  get(key: string) {
    const ret = this._cache[key]
    return ret
  }
  has(key: string) {
    return key in this._cache
  }
  clear() {
    this._cache = {}
  }
}

export type ImgType = {
  name: string
  url?: string
  sha: string
}

export type DirType = {
  [k: string]: string
}

export type DataJsonType = {
  images: ImgType[]
  dir: DirType
  sha: string
}

class ImageCache extends Cache<DataJsonType> {
  addImg(path: string, img: ImgType) {
    this.get(path).images.push(img)
  }
  delImg(path: string, img: ImgType) {
    const cac = this.get(path)
    cac.images = cac.images.filter(each => each.sha !== img.sha)
  }
}

class ImageKit {
  uploadImage(path: string, img: UploadImageType) {
    const { filename } = img
    const d = await uploadImg()
    // 获取缓存中数据
    cache.addImg(path, {
      name: filename,
      sha: d.sha
    })
  }
}

const queue = new Queue()
const d = await queue.exec(() => {
  return Promise.resolve(1000)
})
console.log(d) // 1000

this.editor = monaco.editor.create(document.getElementById('monaco-editor'), {
  value: content,
  language: 'markdown',
  automaticLayout: true,
  minimap: {
    enabled: false
  },
  wordWrap: 'wordWrapColumn',
  lineNumbers: 'off',
  roundedSelection: false,
  theme: 'vs-dark'
})

const KM = monaco.KeyMod
const KC = monaco.KeyCode
this.editor.addCommand(KM.CtrlCmd | KC.KEY_S, this.props.onSave)

window.addEventListener('paste', this.onPaste, true)
function onPaste(e: ClipboardEvent) {
  const { editor } = this
  if (editor.hasTextFocus()) {
    const startSelection = editor.getSelection()
    let { files } = e.clipboardData
    // 以startSelection为头, 创建range
    const createRange = (end: monaco.Selection) =>
      new monaco.Range(
        startSelection.startLineNumber,
        startSelection.startColumn,
        end.endLineNumber,
        end.endColumn
      )
    // 使用setTimeout, 可以确保光标恢复在选区之后
    setTimeout(async () => {
      let endSelection = editor.getSelection()
      let range = createRange(endSelection)
      // generate fileName
      const fileName = `${Date.now()}.${file.type.split('/').pop()}`
      // copy img url to editor
      editor.executeEdits('', [{ range, text: `![](Uploading...)` }])
      // get new range
      range = createRange(editor.getSelection())
      const { url } = uploadImage(file)
      // copy img url to editor
      editor.executeEdits('', [{ range, text: `![](${url})` }])
      editor.setPosition(editor.getPosition())
    })
  }
}

this.editor.onDidScrollChange(this.onScroll)
const onScroll = debounce(e => {
  if (!this._isMounted) return
  const { scrollHeight, scrollTop } = e
  let v = 0
  if (scrollHeight) {
    v = scrollTop / LINE_HEIGHT
  }
  this.props.onScroll(Math.round(v))
}, 0)

let dom = null
// 获取编辑器dom
function getDom(): HTMLDivElement {
  if (dom) return dom
  return document.getElementById('markdown-preview') as HTMLDivElement
}

let _div: HTMLDivElement = null
// content为所有markdown内容
// lineNumber为上一部获取的行数
function calcHeight(content: string, lineNumber) {
  // 根据空格分行
  const split = content.split(/[\n]/)
  // 截取前lineNumber行
  const hide = split.slice(0, lineNumber).join('\n')
  // 创建一个div, 并插入到body
  if (!_div) {
    _div = document.createElement('div')
    _div.classList.add('markdown-preview')
    _div.classList.add('hidden')
    document.body.append(_div)
  }
  // 将其宽度设成跟渲染区一样宽度, 方便高度计算
  _div.setAttribute('style', `width: ${getDom().clientWidth}`)
  // 渲染内容
  _div.innerHTML = parseMd(hide)
  // 获取div的高度
  // 此处-40是修正渲染区的paddingTop
  return _div.clientHeight - 40
}

getDom().scrollTo({
  top
})

module.exports = {
  productName: 'App name', // App 名称
  appId: 'com.App.name', // 程序的唯一标识符
  directories: {
    output: 'package'
  },
  files: ['dist/**/*'], // 构建好的dist目录
  // copyright: 'Copyright © 2019 zWing',
  asar: true, // 是否加密
  artifactName: '${productName}-${version}.${ext}',
  // compression: 'maximum', // 压缩程度
  dmg: {
    // MacOS dmg形式安装完后的界面
    contents: [
      {
        x: 410,
        y: 150,
        type: 'link',
        path: '/Applications'
      },
      {
        x: 130,
        y: 150,
        type: 'file'
      }
    ]
  },
  mac: {
    icon: 'build/icons/icon.png'
  },
  win: {
    icon: 'build/icons/icon.png',
    target: 'nsis',
    legalTrademarks: 'Eyas Personal'
  },
  nsis: {
    // windows的安装包配置
    allowToChangeInstallationDirectory: true,
    oneClick: false,
    menuCategory: true,
    allowElevation: false
  },
  linux: {
    icon: 'build/icons'
  },
  electronDownload: {
    mirror: 'http://npm.taobao.org/mirrors/electron/'
  }
}