18 代码走读实录

const RUNTIME_BODY_MAX_LENGTH = 500000
const DANGEROUS_RUNTIME_PATTERNS = [
  /\beval\s*\(/i,
  /\bnew\s+Function\s*\(/i,
  /\bFunction\s*\(\s*['"`]/i,
  /\bWebSocket\s*\(/i,
  /\bdocument\.write\s*\(/i,
  /\blocation\s*\.\s*(?:href|assign|replace)\s*=/i,
  /\bwindow\s*\.\s*location\s*=/i,
  /\btop\s*\.\s*(?:location|href)/i,
  /\bparent\s*\.\s*(?:location|href)/i,
]

function validateRuntimeBody(
  runtimeBody: string,
  { source = 'runtime', warnOnly = false }: { source?: string; warnOnly?: boolean } = {}
): boolean {
  if (runtimeBody.length > RUNTIME_BODY_MAX_LENGTH) {
    const message = 'SFC 编译产物过大，可能存在异常输入'
    if (warnOnly) { logger.warn('sfcRuntime', `${source} ${message}`); return false }
    throw new Error(message)
  }
  if (hasDangerousRuntimePatterns(runtimeBody)) {
    const message = 'SFC 编译产物包含不安全的运行时调用'
    if (warnOnly) { logger.warn('sfcRuntime', `${source} ${message}`); return false }
    throw new Error(message)
  }
  return true
}

function executeRuntimeBody(
  runtimeBody: string,
  deps: Record<string, unknown>,
  sfcHolder: { __sfc__: Component | null }
) {
  const sanitizedBody = runtimeBody
    .replace(/\beval\b/g, '__unsafe_eval__')
    .replace(/\barguments\b/g, '__unsafe_arguments__')

  const undeclaredVars = detectUndeclaredAssignments(sanitizedBody)
  const varDeclarations = undeclaredVars.map((v) => `var ${v};`).join('')

  const fn = new Function(
    '__deps__',
    '__sfc_holder__',
    '"use strict";\n' +
      'var parent=undefined, top=undefined, opener=undefined;\n' +
      'var __unsafe_eval__=undefined, __unsafe_arguments__=undefined;\n' +
      'var ROOT_PATH="/echarts-data";\n' +
      varDeclarations +
      sanitizedBody
  )
  fn(deps, sfcHolder)
}

  const { descriptor, errors } = parse(sfcSource, {
    filename: `${demoId || 'App'}.vue`,
  })

  if (errors.length) {
    throw new Error(`SFC 解析错误: ${formatCompilerErrors(errors)}`)
  }

  if (!descriptor.template || !descriptor.template.content.trim()) {
    throw new Error('缺少 <template> 内容')
  }

  const scopeId = `sfc-${demoId || Date.now()}`
  const hasScopedStyle = descriptor.styles.some((s) => s.scoped)

  if (descriptor.script || descriptor.scriptSetup) {
    try {
      const scriptResult = compileScript(descriptor, { id: scopeId })
      bindingMetadata = (scriptResult.bindings as Record<string, string>) || {}
      scriptCode = rewriteDefault(scriptResult.content, '__sfc__')
    } catch (err) {
      throw new Error(`Script 编译错误: ${err instanceof Error ? err.message : String(err)}`, {
        cause: err,
      })
    }
  }

      templateCode = templateResult.code
        .replace(/export\s+function\s+render\b/g, 'function __sfc_render__')
        .replace(/function\s+render\b/g, 'function __sfc_render__')

async function collectModuleDeps(
  scriptCode: string,
  templateCode: string,
  componentPath?: string
): Promise<{ deps: Record<string, unknown>; uniqueSources: string[] }> {
  const importSources: string[] = [
    ...extractImportSources(scriptCode),
    ...extractImportSources(templateCode),
    ...extractDynamicImportSources(scriptCode),
    ...extractDynamicImportSources(templateCode),
  ]
  const uniqueSources = [...new Set(importSources)]
  const deps: Record<string, unknown> = { vue }
  await Promise.all(
    uniqueSources.map(async (src) => {
      if (src !== 'vue') {
        deps[src] = await ensureModule(src, componentPath)
      }
    })
  )
  return { deps, uniqueSources }
}

  const rewrittenScript = rewriteDynamicImports(rewriteScriptImports(scriptCode))
  const rewrittenTemplate = rewriteDynamicImports(rewriteScriptImports(templateCode))

    `const __dynamicImport__ = (source) => {
  if (!Object.prototype.hasOwnProperty.call(__deps__, source)) {
    return Promise.reject(new Error(\`[sfcRuntime] 不允许的动态导入: \${source}\`))
  }
  const mod = __deps__[source]
  if (mod && (typeof mod === 'object' || typeof mod === 'function')) {
    return Promise.resolve(mod)
  }
  return Promise.resolve({ default: mod })
}`,

function buildSfcComponent(
  sfc: Component,
  demoId: string | undefined,
  scopeId: string,
  hasScopedStyle: boolean
): Component {
  const sfcRecord = sfc as Record<string, unknown>
  const origSetup =
    typeof sfcRecord.setup === 'function'
      ? (sfcRecord.setup as (props: unknown, ctx: unknown) => unknown).bind(sfc)
      : null
  const origRender = /* 同款 bind */
  const componentRegistry = getComponentRegistry()
  return defineComponent({
    ...sfc,
    name: (sfcRecord.name as string | undefined) ||
      (sfcRecord.__name as string | undefined) || `DemoComponent_${demoId}`,
    inheritAttrs: (sfcRecord.inheritAttrs as boolean | undefined) ?? false,
    components: {
      ...(sfcRecord.components as Record<string, Component> | undefined),
      ...Object.fromEntries(componentRegistry),
    },
    ...(hasScopedStyle ? { __scopeId: `data-v-${scopeId}` } : {}),
    ...(origSetup ? { setup(props, ctx) { return origSetup(props, ctx) } } : {}),
    ...(origRender
      ? {
          render(_ctx, _cache, $props, $setup, $data, $options) {
            try {
              return origRender(_ctx, _cache, $props, $setup, $data, $options)
            } catch (err) {
              logger.error('sfcRuntime', `${demoId} render 执行失败:`, err instanceof Error ? err.message : String(err))
              throw err
            }
          },
        }
      : {}),
  })
}

const OPTION_KINDS = ['option', 'api-async', 'antv-config'] as const

const usesSfc = computed(() => {
  const e = props.example
  if (!e.componentCode) return false
  if ((OPTION_KINDS as readonly string[]).includes(e.loaderKind) && e.optionCode) return false
  return true
})

async function renderEchartsOption(gen: number) {
  const container = chartContainerRef.value
  if (!container) return
  if (props.example.requiresGl) await import('echarts-gl')
  if (gen !== renderSeq) return
  const echarts = await import('echarts')
  if (props.example.requiresMap) {
    for (const [name, file] of [
      ['china', '/map-geojson/china.json'],
      ['world', '/map-geojson/world.json'],
    ] as const) {
      try {
        const geo = await fetchJson(file)
        if (gen !== renderSeq) return
        echarts.registerMap(name, geo as never)
      } catch {
        // 单张地图注册失败不阻断渲染：条目可能只用另一张或自备地理数据
      }
    }
  }
  const chart = echarts.init(container)
  if (gen !== renderSeq) {
    // 已被更新一轮渲染顶替：销毁本实例，避免同容器重复 init 与实例泄漏
    chart.dispose()
    return
  }
  chartInstance = chart

  let option: unknown
  if (props.example.optionCode) {
    const fn = new Function(
      'echarts',
      'myChart',
      'setOption',
      'fetchJson',
      'loadScript',
      'registerMap',
      'registerTransform',
      'ROOT_PATH',
      'console',
      '"use strict";\n' +
        'var option;\n' +
        props.example.optionCode +
        '\n;return (typeof option !== "undefined" && option !== null && typeof option.then !== "function") ? option : undefined;'
    ) as (...args: unknown[]) => unknown
    option = await fn(
      echarts,
      chart,
      (opt: unknown) => chart.setOption(opt as Record<string, unknown>),
      fetchJson,
      loadScript,
      (name: string, geoJson: unknown) => echarts.registerMap(name, geoJson as never),
      (t: unknown) => echarts.registerTransform(t as never),
      '/echarts-data',
      console
    )
  }

async function renderAntvConfig(gen: number) {
  const container = chartContainerRef.value
  if (!container) return
  const g2plot = await import('@antv/g2plot')
  if (gen !== renderSeq) return
  let payload: { plotClass?: string; options?: Record<string, unknown> } = {}
  if (props.example.optionCode) {
    // 官方 antv 脚本主流是函数体形态（`return { plotClass, options }`），按函数体执行；
    // 少数条目是无 return 的裸对象字面量，按表达式求值。
    // `return (code)` 的表达式包装对 return 语句必然语法错误，故必须二分。
    const code = props.example.optionCode.trim()
    const fn =
      code.startsWith('return') || code.includes('\nreturn')
        ? new Function('console', '"use strict";\n' + code)
        : new Function('"use strict"; return (' + code + ')')
    payload = (fn as (...args: unknown[]) => undefined)?.(console) ?? {}
  }
  // 失败必须可见（统一错误面板），静默返回会让用户面对无解释的空白画布
  if (!payload.plotClass) throw new Error('antv-config 条目缺少 plotClass 字段')
  const PlotClass = (g2plot as Record<string, unknown>)[payload.plotClass] as
    | (new (el: HTMLElement, opts: Record<string, unknown>) => { render(): void; destroy(): void })
    | undefined
  if (!PlotClass) throw new Error(`未知的 G2Plot 类型: ${payload.plotClass}`)
  if (!payload.options) throw new Error(`antv-config 条目 ${payload.plotClass} 缺少 options 配置`)
  antvPlotInstance = new PlotClass(container, payload.options)
  ;(antvPlotInstance as { render(): void }).render()
}

/**
 * 有界等待实例就绪：v-chart 挂载与 ECharts init 存在异步间隙，
 * 单次 nextTick 探测曾是"图表实例未初始化"竞态的来源；改为轮询直至超时。
 */
async function waitForInstance(timeoutMs = 1500): Promise<VChartInstance['chart'] | null> {
  const stepMs = 32
  for (let waited = 0; waited < timeoutMs; waited += stepMs) {
    await nextTick()
    const instance = resolveInstance()
    if (instance) return instance
    await new Promise((resolve) => setTimeout(resolve, stepMs))
  }
  return resolveInstance()
}

function buildMyChartProxy(): Record<string, unknown> {
  return new Proxy(
    {},
    {
      get(_t, prop) {
        const instance = resolveInstance()
        if (!instance) {
          console.warn('[EChartDemo] myChart.' + String(prop) + ' 实例尚未就绪')
          return () => undefined
        }
        if (prop === 'setOption') {
          // 走 vue-echarts 实例、默认 merge，不强制 notMerge
          return (opt: unknown, opts?: unknown) => {
            const c = chartRef.value
            if (c && typeof c.setOption === 'function') c.setOption(opt as never, opts as never)
          }
        }
        if (prop === 'getOption') return () => instance.getOption()
        if (prop === 'resize') return () => instance.resize()
        if (prop === 'on') return (...a: unknown[]) => (instance.on as AnyFn)(...a)
        if (prop === 'off') return (...a: unknown[]) => (instance.off as AnyFn)(...a)
        if (prop === 'dispose') return () => instance.dispose()
        const v = (instance as unknown as Record<string, unknown>)[prop as string]
        return typeof v === 'function' ? (v as AnyFn).bind(instance) : v
      },
    }
  )
}

async function run() {
  // 重试场景：先清掉上一轮 setup 的定时器/事件，避免叠加
  cleanupFn?.()
  cleanupFn = null
  loading.value = true
  error.value = null
  try {
    const instance = await waitForInstance()
    if (!instance) throw new Error('图表实例未初始化')

    if (props.scripts?.length) {
      const { loadScript } = await import('./loadScript')
      await Promise.all(props.scripts.map((s) => loadScript(s)))
    }

    // 静态 option 模式：无钩子时直接 setOption
    const staticOpt = normalizeOption()
    if (staticOpt && !props.onReady && !props.setup) {
      instance.setOption(staticOpt)
    }

    if (props.onReady) {
      const result = await props.onReady(buildContext())
      if (result) instance.setOption(result)
    }

    if (props.setup) {
      cleanupFn = (await props.setup(buildContext())) ?? null
    }
  } catch (e) {
    error.value = e instanceof Error ? e.message : '渲染失败'
    emit('error', error.value)
  } finally {
    loading.value = false
  }
}

onMounted(run)
onBeforeUnmount(() => {
  cleanupFn?.()
  cleanupFn = null
})