tomjs / vite-plugin-vscode Goto Github PK

import * as esbuild from 'esbuild'
import * as fs from 'node:fs'
import * as path from 'node:path'
import * as crypto from 'node:crypto'
import * as url from 'node:url'

interface HtmlPluginData {
  resolveDir: string
  fileName: string
  fullPath: string
}

export const htmlCompiler = (): esbuild.Plugin => {
  return {
    name: 'esbuild-plugin-html',
    setup: build => {
      // 处理 *.vue 文件中的 script
      build.onResolve({ filter: /\.html$/ }, async args => {
        const filePath = args.path
        const fileName = path.basename(filePath)
        const fullPath = path.resolve(args.resolveDir, filePath)

        return {
          path: args.path,
          namespace: 'vscode-html',
          pluginData: {
            ...args.pluginData,
            resolveDir: args.resolveDir,
            fileName,
            fullPath,
          } as HtmlPluginData,
        }
      })

      build.onLoad(
        { filter: /\.html$/, namespace: 'vscode-html' },
        async args => {
          const data = args.pluginData as HtmlPluginData
          const content = await fs.promises.readFile(data.fullPath, 'utf8')

          const code = new Array<string>()
          code.push('export default (data) =>')
          code.push(`  Object.entries(data).reduce(`)
          code.push(`    (html, [property, value]) =>`)
          code.push(
            '      html.replaceAll(`\\$\\{\\{${property}\\}\\}`, value),',
          )
          code.push(`    ${JSON.stringify(content)},`)
          code.push('  )')
          const contents = code.join('\n')

          return {
            contents,
            resolveDir: data.resolveDir,
            loader: 'js',
            watchFiles: [args.path],
          }
        },
      )
    },
  }
}

import html from './pages/ShpViewer.html'

// ...

    const stylesUri = this.buildUri(`index.css`)
    const scriptUri = this.buildUri(`index.js`)
    const nonce = crypto.randomUUID()
    const csp =
      [
        `default-src ${this.panel.webview.cspSource} data: blob:`,
        `style-src ${this.panel.webview.cspSource} 'unsafe-inline'`,
        `script-src ${this.panel.webview.cspSource} blob: 'unsafe-eval' 'nonce-${nonce}'`,
      ].join('; ') + ';'

    this.panel.webview.html = html({
      stylesUri: stylesUri,
      scriptUri: scriptUri,
      nonce: nonce,
      csp: csp,
    })