rxliuli | 琉璃的博客、微博、哔哩哔哩、即刻、推特、Telegram 的 RSS

rxliuli | 琉璃 RSS 预览

在 Chrome 插件中将 ArrayBuffer 从网页传递到 Devtools Panel

2024-11-13 02:52:02

背景

最近使用了 ZenFS 在浏览器中模拟文件系统，以在浏览器中像使用 node fs api 一样存储一些文件。但想要可视化的检查当前存储的文件时，却没有一个可以直观的工具来完成。所以就创建了一个 Chrome Devtools Extension ZenFS Viewer，以实现这个目标。在此过程中就遇到了如何传递 ArrayBuffer 从网页到 devtools panel 线程的问题，一些尝试如下。

browser.devtools.inspectedWindow.eval

首先尝试了最简单的方法，browser.devtools.inspectedWindow.eval 可以在网页执行任意代码并得到结果，例如

1	browser.devtools.inspectedWindow.eval(`__zenfs__.readdir('/')`)

然而 inspectedWindow.eval 并不支持 Promise 返回值，例如下面的表达式无法得到 Promise 结果

1	browser.devtools.inspectedWindow.eval(`await __zenfs__.promises.readdir('/')`)

同样的，也无法支持 ArrayBuffer。所以这个显而易见的 API 被放弃了。

1
2
3

browser.devtools.inspectedWindow.eval(
`await __zenfs__.promises.readFile('/test.png')`,
)

chrome.runtime.sendMessage

接下来就是思想体操的时候了，一开始考虑的方案就是通过 devtools panel => background script => content-script(isolation) => content-script(main) 进行中转通信，以此在 devtools panel 中调用网页的全局变量并传递和获取 ArrayBuffer 的响应。大概示意图如下

然而在使用 chrome.runtime.sendMessage 时也遇到了和 inspectedWindow.eval 类似的问题，无法传递 ArrayBuffer，仅支持 JSON Value。当然可以序列化 ArrayBuffer 为 JSON，但在传输视频之类的大型数据时并不现实。

解决

之后经过一些搜索和思考，找到了一种方法可以绕道 chrome.runtime.message，因为注入的 iframe 和 devtools panel 同源，所以可以使用 BroadcastChannel 通信，而 iframe 和注入的 content-script(main world) 之间尽管不同源，但仍然可以通过 postMessage/onMessage 来通信，并且两者都支持传递 ArrayBuffer，这样便可绕道成功。

Content-Script <=> Iframe

网页与注入的 iframe 之间，通信可以使用基本的 postMessage/onMessage 实现，为了减少冗余代码，这里使用 comlink 来实现。

先看看注入的 content-script，它主要是负责对 iframe 暴露一些 API 的。

// entrypoints/main-content.ts
import { expose, windowEndpoint } from 'comlink'

export default defineUnlistedScript(() => {
const map = new Map<string, ArrayBuffer>()

interface IFS {
readFile: (path: string) => Promise<ArrayBuffer>
writeFile: (path: string, data: ArrayBuffer) => Promise<void>
readdir: (path: string) => Promise<string[]>
  }

expose(
    {
readFile: async (path: string) => {
return map.get(path) || new Uint8Array([1, 2, 3]).buffer
      },
writeFile: async (path: string, data: ArrayBuffer) => {
        map.set(path, data)
      },
readdir: async (path: string) => {
return Array.from(map.keys()).filter((p) => p.startsWith(path))
      },
    } as IFS,
windowEndpoint(
      (document.querySelector('#inject-iframe')! as HTMLIFrameElement)
        .contentWindow!,
    ),
  )
console.log('main-content')
})

而在 iframe 中，则需要转发所有来自 BroadcastChannel 的请求通过 postMessage 传递到上层注入的 content-script 中，其中在每次传递 ArrayBuffer 时都需要使用 transfer 来转移对象到不同线程。

// entrypoints/iframe/main.ts
import { expose, transfer, windowEndpoint, wrap } from 'comlink'

interface IFS {
readFile: (path: string) => Promise<ArrayBuffer>
writeFile: (path: string, data: ArrayBuffer) => Promise<void>
readdir: (path: string) => Promise<string[]>
}

async function main() {
const tabId = (await browser.tabs.getCurrent())!.id
if (!tabId) {
return
  }
const ipc = wrap<IFS>(windowEndpoint(globalThis.parent))
const bc = new BroadcastChannel(
`${browser.runtime.getManifest().name}-iframe-${tabId}`,
  )
expose(
    {
readFile: async (path: string) => {
const r = await ipc.readFile(path)
// 将 ArrayBuffer 通过 transfer 传递回 devtools-panel 中
return transfer(r, [r])
      },
writeFile: async (path: string, data: ArrayBuffer) => {
// 将 ArrayBuffer 通过 transfer 传递到 content-script 中
await ipc.writeFile(path, transfer(data, [data]))
      },
readdir: async (path: string) => {
console.log('readdir', path)
return await ipc.readdir(path)
      },
    } as IFS,
    bc,
  )

console.log('iframe main')
}

main()

Iframe <=> Devtools

而在 Devtools 中，要做的事情有一点点多 🤏。首先需要注入两个 content-script，而其中 isolation-content.js 是用来创建 iframe 的 content-script。

// entrypoints/devtools-panel/main.ts
import { PublicPath } from 'wxt/browser'

async function injectScript() {
const includeIframe = await new Promise((resolve) => {
    browser.devtools.inspectedWindow.eval(
`!!document.querySelector('#inject-iframe')`,
(result) => {
resolve(result)
      },
    )
  })
if (includeIframe) {
return
  }
const tabId = browser.devtools.inspectedWindow.tabId
if (!tabId) {
return
  }
await browser.scripting.executeScript({
target: { tabId },
files: ['/isolation-content.js' as PublicPath],
world: 'ISOLATED',
  })
await browser.scripting.executeScript({
target: { tabId },
files: ['/main-content.js' as PublicPath],
world: 'MAIN',
  })
}

// entrypoints/isolation-content.ts
function createIframeUi() {
const wrapper = document.createElement('div')
  wrapper.style.height = '0'
  wrapper.style.width = '0'
const ifr = document.createElement('iframe')
  wrapper.appendChild(ifr)
  ifr.src = browser.runtime.getURL('/iframe.html')
  ifr.style.width = '0'
  ifr.style.height = '0'
  ifr.style.zIndex = '-9999'
  ifr.style.border = 'none'
  ifr.id = 'inject-iframe'
document.body.appendChild(wrapper)
return ifr
}

export default defineUnlistedScript(() => {
console.log('isolation-content', createIframeUi())
})

接下来就可以在 devtools-panel 中获取数据了，由于 iframe 的注入完成的时机并不能确定，所以需要加个简单的通知机制。

// entrypoints/iframe/main.ts
import { wrap } from 'comlink'

async function main() {
// Other code...
console.log('iframe main')
await wrap<{
onReady: () => void
  }>(bc).onReady()
}

main()

// entrypoints/devtools-panel/main.ts
async function main() {
await injectScript()
interface IFS {
readFile: (path: string) => Promise<ArrayBuffer>
writeFile: (path: string, data: ArrayBuffer) => Promise<void>
readdir: (path: string) => Promise<string[]>
  }
const tabId = browser.devtools.inspectedWindow.tabId
if (!tabId) {
return
  }
const bc = new BroadcastChannel(
`${browser.runtime.getManifest().name}-iframe-${tabId}`,
  )
await new Promise<void>((resolve) => expose({ onReady: resolve }, bc))
console.log('onReady')
// Test code...
const ipc = wrap<IFS>(bc)
const r = await ipc.readdir('/')
console.log(r)
const data = new Uint8Array([1, 2, 3]).buffer
await ipc.writeFile('/test.txt', transfer(data, [data]))
const r2 = await ipc.readFile('/test.txt')
console.log(r2)
}

main()

完整代码参考: https://github.com/rxliuli/devtools-webpage-message-demo

总结

至今为止，仍然没有简单的方法来支持 Devtools Extension 与 Webpage 之间的通信来替代 inspectedWindow.eval，确实是有点神奇。

Mac Tips 分享：创建一个 Shortcut 快速调整窗口尺寸

2024-10-16 00:26:52

场景

之前发布 Chrome 扩展到 Chrome WebStore 时，WebStore 要求提供几张截图，而且必须是 1280x800 或者 640x400，而如果想要手动调整窗口大小为特定尺寸的话，会非常痛苦。所以一直想找到一种方法可以快速调整窗口尺寸到指定的大小。之前尝试过 AppleScript，甚至想过开发一个 Mac 原生应用来解决，但都遇到了一些问题（主要是权限问题），直到昨天看到一篇文章启发了吾辈。之前从未使用过 Shortcuts，没想到 Mac 自带的自动化工具还不错，完全解决了吾辈的问题。

尝试

AppleScript

在早前，吾辈曾经就该问题询问过 AI，得到的答案是创建一个 AppleScript 来自动化这个操作，看起来脚本很简单。

tell application "System Events"
set frontApp to name of first application process whose frontmost is true
tell process frontApp
set position of window 1 to {0, 0}
set size of window 1 to {1280, 800}
end tell
end tell

事实上，如果在 Automactor 中直接执行，也确实符合预期，可以修改窗口大小。但在吾辈将之保存为 App 后，再次运行却出现了权限错误。

1
2

Can’t get window 1 of «class prcs» "Resize1280x800" of application "System Events". Invalid index.
System Events got an error: Can’t get window 1 of process "Resize1280x800". Invalid index. (-1719)

而 System Event 也确实是给了的，不知道发生了什么。🤷

Mac App 开发

在使用简单的脚本实现受挫之后，吾辈考虑快速开发一个 Mac App 来解决这个问题，但实际上仍然遇到了一些问题。主要是对 Swift 没有任何先验知识，XCode 相比之前使用 IDE（Jetbrains/VSCode）非常难用，再加上 AI 对 Swift 代码生成和修改支持并不好，所以开发起来很痛苦，而且最终仍然遇到了与上面 AppleScript 类似的权限问题。吾辈猜测这是个愚蠢的问题，熟悉 Mac App 开发的人或许十分钟就能解决，但确实卡住了吾辈。

Shortcuts

终于，Shortcuts 可以以低代码的方式创建一个应用。基本思路是，获取所有窗口 => 找到置顶的窗口 => 修改窗口尺寸。

拖拽一个 Find Windows Action
修改 Find Windows 配置
再拖拽一个 Resize Window Action
修改 Resize Window 的配置
尝试运行一下，确保没有问题
现在，可以使用 Spotlight Search 输入 Resize Window 来快速运行这个 Shortcut 啦

另外吾辈已经把这个 Shortcut 导出放到 GitHub 上了，可以自行下载使用：https://github.com/rxliuli/mac-resize-window

参考

The Easiest Way to Resize All Windows on Your Mac Simultaneously to the Same Dimensions

旅行 2024-09

2024-09-27 16:21:46

自从九月初从广州出发继续北上旅行，刚好躲过了一次台风摩羯。虽然旅行仍然能带来一些新鲜感，但或多或少已经有些不足了，所以在江浙连续碰上两次台风之后，九月下旬便匆匆赶回来了。

衡山

第一站去往了衡山，之前前往山东时没能爬上泰山，这次顺路去爬下衡山。刚到衡山就被出租车上了一课，滴滴叫了车但司机实收很低线下想让吾辈额外付费，之前在广西阳朔、后面在江苏镇江都遇到过类似的糟心事，也许越是小地方越是不讲规则？

刚到就去了附近的万寿广场，35 度的天气下对吾辈和相机都是考验。

之后前往旁边的南岳大庙，本身吾辈并不信佛道，但拍拍风景也是好的。

晚上出来拍点夜景，偶然还看到了五岳特种兵的宣传牌，之前完全不知道这个活动。

次日一早开始爬衡山，说是爬山，也是要坐很久的区间车，在最后的山顶附近才开始爬。由于雾气很大，没能拍出来什么照片。相比于爬山爱好者，来此求神拜佛者更是络绎不绝。

影集

长沙

第二站选在了长沙，之前去了湖南的张家界，却没去省会城市，这次补上。不过前往之前刷到了一些关于臭豆腐的坏消息，所以臭豆腐一点也没尝。虽然耳边还记得那句“来长沙不吃长沙臭豆腐等于白来”的广告语。

先去城市里随便逛逛扫个街，有一说一，第一次看到把辣条作为宣传的。

大楼的阴凉处，好多正在直播的人，也许附近有“直播小区”？

途经坡子街，到处都是小吃和茶饮，尤其是茶颜悦色，非常显眼。

之后，来到湘江之畔，走在翠幕之下的河岸边，可以眺望对面的橘子洲。树荫之下，人们三三两两的坐着，或是聊天，或是休息。

途经太平老街，中午简单吃了个饭，随即前往河对岸，只是天色渐晚，遂未登岳麓山。

走了一天也有些累了，之后便回到青旅暂作休息。

次日早晨，前往湖南省博物馆，其中付费的两个场地人数不多，值得一看，尤其是数字科技展览部分。

不幸的是，下午刚出博物馆就遇上了暴雨，无奈之下只能打车回去，暂时避雨。直到傍晚，才出来去杜甫江阁附近观赏晚霞与夜景。

可能唯一留下不好印象的就是小巷之中贴的到处都是的标语了。众所周知，通常缺什么才写什么。。。

影集

南京

第三站是南京，可以说是整个行程中最满意的一个城市，是这次旅行中照片最多的城市。

当晚就去了知名的秦淮河畔，表面看上去光鲜亮丽无比。

实则水质较差，隐有臭味，把相机吓得都变形了。

第二天前往中山陵和明孝陵，后者超级超级超级大，逛了好几个小时还没走完，直到下午 4 点钟才离开。

在离开中山陵，进入明孝陵之后，首先碰到了钟山文学馆，江南园林看起来永远都很舒服。

之后是颜真卿碑林，第一看到时突然想起来黑猴里面第四章见到二姐时的屋顶，可能最近看到黑猴的视频太多了 emmmm。

临近中午到达了紫霞湖，许多大爷大妈们在这儿野餐和游泳。

到达中午，终于抵达了明孝陵。

之后更是收集到了红粉黄橙白五种颜色的彼岸花。

里面还有非常非常多的小园子，不再一一赘述。之后打算前往明长城看看，结果下午 5 点就关闭了。

次日去了鸡鸣寺和城墙，吾辈是从电视剧《明王朝》的视频中看到过这个，实际去了之后也没什么。

在城墙上散步时，看到一个很漂亮的小园子，只是忘记记下具体的位置了。

影集

镇江

第四站是镇江，到的时候还不能办理入住，所以先去了金山寺转转。

第二天遇到了台风，天气非常非常糟糕，所以完全没有出门。第三天倒是去了附近的南山风景区，台风刚过，天气异常的好。

下山之后，附近的风景也非常棒，真的很喜欢这种蓝天白云的干净。旁边还有一处隐秘的日月潭，还有人在那里游泳。

晚上去了当地的历史文化街区，无甚新意，直接略过。

次日前往焦山，相比于自然风景似乎其历史文化意义更为丰富，不太感冒。

影集

无锡

好了，终于到达了最后一站无锡，刚经历过一场台风，下一场台风接踵而至，气的吾辈提前回广东了，可以说这是最糟糕的一站。

抵达当晚便前往惠山古镇，因为预报明天就开始有雨，在旅行中下雨是最烦人的天气了。

夜景还算不错？

探索阴暗的小巷子。

由于台风的影响，旁边的公园也没有开放。

嗯？这就结束了？
是的，由于下雨呆了一天，在下一场台风来临之前便坐上火车回去了。

影集

惠山古镇

总结

可以说，出去旅行排解心情的效果愈发糟糕，还是需要寻找到主线任务。

在 Web 中实现一个 TypeScript Editor

2024-09-12 22:49:12

前言

最近为 Chrome 开发了可以直接在浏览器运行 TypeScript 的插件 TypeScript Console，需要将代码编辑器集成到 Chrome Devtools 面板。其实要在 Web 中引入代码编辑器也是类似的，下面分享一下如何实现。

实现

首先来看看有什么问题

代码编辑器选择什么？
如何在浏览器编译和运行代码？
如何使用 npm 包呢？
使用 npm 包怎么有类型定义提示？

了解 Monaco

首先，考虑到要编写的是 TypeScript 编辑器，所以选择 Monaco Editor。它是 VSCode 的底层编辑器，所以对 TypeScript 的支持度是毋庸置疑的。来看看如何使用它

安装依赖

1	`pnpm i monaco-editor`

引入它，注意 MonacoEnvironment 部分，使用 TypeScript LSP 服务需要使用 WebWorker 引入对应的语言服务。

// src/index.ts
import './style.css'
import * as monaco from 'monaco-editor'
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'

self.MonacoEnvironment = {
getWorker: (_: any, label: string) => {
if (label === 'typescript' || label === 'javascript') {
return new tsWorker()
    }
return new editorWorker()
  },
}

const value = `const add = (a: number, b: number) => a + b

console.log(add(1, 2))`

const editor = monaco.editor.create(document.getElementById('app')!, {
  value,
language: 'typescript',
automaticLayout: true,
})

style.css

#app {
width: 100vw;
height: 100vh;
}

现在就有了一个基本的 TypeScript 编辑器了。

编译和运行

接下来如何编译和运行呢？编译 TypeScript 为 JavaScript 代码有多种多样的选择，包括 TypeScript、Babel、ESBuild、SWC 等等，这里考虑到性能和尺寸，选择 ESBuild，它提供 WASM 版本以在浏览器中使用。

安装依赖

1	`pnpm i esbuild-wasm`

基本使用

import { initialize, transform } from 'esbuild-wasm'
import esbuildWasmUrl from 'esbuild-wasm/esbuild.wasm?url'

let isInit = false
async function compileCode(code: string): Promise<string> {
if (!isInit) {
await initialize({
wasmURL: esbuildWasmUrl,
    })
    isInit = true
  }

const result = await transform(code, {
loader: 'ts',
format: 'iife',
  })
return result.code
}

console.log(
await compileCode(`const add = (a: number, b: number) => a + b

console.log(add(1, 2))`),
)

编译结果

接下来，如何运行编译好的代码呢？最简单的方式是直接使用 eval 执行，或者根据需要使用 WebWorker/Iframe 来运行不安全的代码。

eval(`(() => {
  const add = (a, b) => a + b;
  console.log(add(1, 2));
})();`)

或者也可以使用 WebWorker。

const code = `(() => {
  const add = (a, b) => a + b;
  console.log(add(1, 2));
})();`
new Worker(
URL.createObjectURL(new Blob([code], { type: 'application/javascript' })),
)

现在，结合一下上面的代码，在按下 Ctrl/Cmd+S 时触发编译执行代码。

// other code...

let worker: Worker
function executeCode(code: string) {
if (worker) {
    worker.terminate()
  }
const blobUrl = URL.createObjectURL(
new Blob([code], { type: 'application/javascript' }),
  )
  worker = new Worker(blobUrl)
}

window.addEventListener('keydown', async (e) => {
if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault()
const compiledCode = await compileCode(editor.getValue())
executeCode(compiledCode)
  }
})

完整代码

import './style.css'
import * as monaco from 'monaco-editor'
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'

self.MonacoEnvironment = {
getWorker: (_: any, label: string) => {
if (label === 'typescript' || label === 'javascript') {
return new tsWorker()
    }
return new editorWorker()
  },
}

const value = `const add = (a: number, b: number) => a + b

console.log(add(1, 2))`

const editor = monaco.editor.create(document.getElementById('app')!, {
  value,
language: 'typescript',
automaticLayout: true,
})

import { initialize, transform } from 'esbuild-wasm'
import esbuildWasmUrl from 'esbuild-wasm/esbuild.wasm?url'

let isInit = false
async function compileCode(code: string): Promise<string> {
if (!isInit) {
await initialize({
wasmURL: esbuildWasmUrl,
    })
    isInit = true
  }

const result = await transform(code, {
loader: 'ts',
format: 'iife',
  })
return result.code
}

let worker: Worker
function executeCode(code: string) {
if (worker) {
    worker.terminate()
  }
const blobUrl = URL.createObjectURL(
new Blob([code], { type: 'application/javascript' }),
  )
  worker = new Worker(blobUrl)
}

window.addEventListener('keydown', async (e) => {
if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault()
const compiledCode = await compileCode(editor.getValue())
executeCode(compiledCode)
  }
})

引用 npm 包

接下来，应该看看如何支持引用 npm 包了。不使用构建工具时一般是怎么引用 npm 包呢？先看看来自 Preact 的官方示例吧

<script type="module">
  import { h, render } from 'https://esm.sh/preact'

  // Create your app
  const app = h('h1', null, 'Hello World!')

  render(app, document.body)
</script>

可以看到，这里借助浏览器支持 ESModule 的特性，结合上 esm.sh 这个服务，便可以引用任意 npm 包。

而关键在于这里使用了 esm 格式，而上面可以看到在构建时使用了 iife 格式，简单的解决方法是将运行时的代码修改为 esm 格式，复杂的方式是将 esm 格式转换为 iife 格式。

使用 esm 格式

先说简单的方法，修改之前的代码

@@ -10,7 +10,7 @@ async function compileCode(code: string): Promise<string> {

   const result = await transform(code, {
     loader: 'ts',
-    format: 'iife',
+    format: 'esm',
   })
   return result.code
 }
@@ -23,5 +23,5 @@ function executeCode(code: string) {
   const blobUrl = URL.createObjectURL(
     new Blob([code], { type: 'application/javascript' }),
   )
-  worker = new Worker(blobUrl)
+  worker = new Worker(blobUrl, { type: 'module' })
 }

现在，可以使用 esm.sh 上的 npm 包了。

1
2
3

import { sum } from 'https://esm.sh/lodash-es'

console.log(sum([1, 2, 3, 4]))

但实际代码中通常希望使用 import { sum } from 'lodash-es' 而非 import { sum } from 'https://esm.sh/lodash-es'，所以还是需要转换 import。这涉及到操作代码语法树，此处选择使用 babel，首先安装依赖。

1 2	`pnpm i @babel/standalone lodash-es pnpm i -D @babel/types @types/babel__core @types/babel__generator @types/babel__standalone @types/babel__traverse @babel/parser @types/lodash-es`

还需要给 @babel/standalone 打上类型定义的补丁（已提 PR）。

// src/vite-env.d.ts
declare module '@babel/standalone' {
import parser from '@babel/parser'
import * as types from '@babel/types'
import type * as t from '@babel/types'
import generator from '@babel/generator'
const packages = {
    parser,
    types,
generator: {
default: generator,
    },
  }
export { packages, t }
}

然后获取所有的 import 并转换。

function transformImports(code: string) {
const { parser, types, generator } = packages
const ast = parser.parse(code, {
sourceType: 'module',
plugins: ['typescript'],
sourceFilename: 'example.ts',
  })

const imports = ast.program.body.filter((it) => types.isImportDeclaration(it))
if (imports.length === 0) {
return code
  }
  imports.forEach((it) => {
    it.source.value = `https://esm.sh/${it.source.value}`
  })
const newCode = generator.default(ast).code
return newCode
}

然后在编译代码之前先处理一下 imports 就好了。

@@ -8,7 +8,7 @@ async function compileCode(code: string): Promise<string> {
     isInit = true
   }

-  const result = await transform(code, {
+  const result = await transform(transformImports(code), {
     loader: 'ts',
     format: 'esm',
   })

现在，编译时会自动处理 npm 模块了。

完整代码

import './style.css'
import * as monaco from 'monaco-editor'
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
import { groupBy } from 'lodash-es'

self.MonacoEnvironment = {
getWorker: (_: any, label: string) => {
if (label === 'typescript' || label === 'javascript') {
return new tsWorker()
    }
return new editorWorker()
  },
}

let value = `const add = (a: number, b: number) => a + b

console.log(add(1, 2))`

const editor = monaco.editor.create(document.getElementById('app')!, {
  value,
language: 'typescript',
automaticLayout: true,
})

import { initialize, transform } from 'esbuild-wasm'
import esbuildWasmUrl from 'esbuild-wasm/esbuild.wasm?url'

let isInit = false
async function compileCode(code: string): Promise<string> {
if (!isInit) {
await initialize({
wasmURL: esbuildWasmUrl,
    })
    isInit = true
  }

const result = await transform(transformImports(code), {
loader: 'ts',
format: 'esm',
  })
return result.code
}

let worker: Worker
function executeCode(code: string) {
if (worker) {
    worker.terminate()
  }
const blobUrl = URL.createObjectURL(
new Blob([code], { type: 'application/javascript' }),
  )
  worker = new Worker(blobUrl, { type: 'module' })
}

import { packages } from '@babel/standalone'

function transformImports(code: string) {
const { parser, types, generator } = packages
const ast = parser.parse(code, {
sourceType: 'module',
plugins: ['typescript'],
sourceFilename: 'example.ts',
  })

const imports = ast.program.body.filter((it) => types.isImportDeclaration(it))
if (imports.length === 0) {
return code
  }
  imports.forEach((it) => {
    it.source.value = `https://esm.sh/${it.source.value}`
  })
const newCode = generator.default(ast).code
return newCode
}

window.addEventListener('keydown', async (e) => {
if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault()
const compiledCode = await compileCode(editor.getValue())
executeCode(compiledCode)
  }
})

使用 iife 格式

esm 是新的标准格式，但旧的 iife 仍然有一些优势。例如不挑环境、可以直接粘贴运行等，下面将演示如何将 esm 转换为 iife。

下面两段代码是等价的，但前者无法在 Devtools Console 中运行，也无法使用 eval 执行，而后者则可以。

// before
import { sum } from 'https://esm.sh/lodash-es'
console.log(sum([1, 2, 3, 4]))

// after
const { sum } = await import('https://esm.sh/lodash-es')
console.log(sum([1, 2, 3, 4]))

需要将下面包含 import 的代码转换为动态 import 的，参考 amd 格式可以得到

// before
import { sum } from 'lodash-es'
console.log(sum([1, 2, 3, 4]))

// after
async function define(deps: string[], fn: (...args: any[]) => any) {
const args = await Promise.all(
    deps.map(async (dep) => {
const mod = await import('https://esm.sh/' + dep)
return 'default' in mod ? mod.default : mod
    }),
  )
return fn(...args)
}
define(['lodash-es'], ({ sum }) => {
console.log(sum([1, 2, 3, 4]))
})

接下来使用 babel 提取所有 imports 并生成一个 define 函数调用，清理所有 exports，并将自定义的 define 函数追加到顶部。

首先解析每个 import，它可能在 define 中生成多个参数，例如

1	`import _, { sum } from 'lodash-es'`

会得到

1	`define(['lodash-es', 'lodash-es'], (_, { sum }) => {})`

所以先实现解析 import

type ImportType = {
source: string
} & (
  | {
type: 'namespace'
name: string
    }
  | {
type: 'default'
name: string
    }
  | {
type: 'named'
imports: Record<string, string>
    }
)

function parseImport(imp: ImportDeclaration): ImportType[] {
const { types } = packages
const specifiers = imp.specifiers
const source = imp.source.value
const isNamespace =
    specifiers.length === 1 && types.isImportNamespaceSpecifier(specifiers[0])
const includeDefault = specifiers.some((it) =>
    types.isImportDefaultSpecifier(it),
  )
if (isNamespace) {
return [
      {
type: 'namespace',
        source,
name: specifiers[0].local.name,
      },
    ]
  }
const namedImport = specifiers.filter(
(it) => !types.isImportDefaultSpecifier(it),
  )
const result: ImportType[] = []
if (namedImport.length > 0) {
    result.push({
type: 'named',
      source,
imports: namedImport.reduce((acc, it) => {
        acc[((it as ImportSpecifier).imported as Identifier).name] =
          it.local.name
return acc
      }, {} as Record<string, string>),
    } as ImportType)
  }
if (includeDefault) {
    result.push({
type: 'default',
      source,
name: specifiers[0].local.name,
    } as ImportType)
  }
return result
}

然后修改 transformImports

@@ -7,14 +7,69 @@ function transformImports(code: string) {
     sourceFilename: 'example.ts',
   })

-  const imports = ast.program.body.filter((it) => types.isImportDeclaration(it))
-  if (imports.length === 0) {
-    return code
-  }
-  imports.forEach((it) => {
-    it.source.value = `https://esm.sh/${it.source.value}`
-  })
+  const defineAst = parser.parse(
+    `export async function define(deps: string[], fn: (...args: any[]) => any) {
+  const args = await Promise.all(
+    deps.map(async (dep) => {
+      const mod = await import('https://esm.sh/' + dep)
+      return 'default' in mod ? mod.default : mod
+    }),
+  )
+  return fn(...args)
+}
+`,
+    {
+      sourceType: 'module',
+      plugins: ['typescript'],
+      sourceFilename: 'define.ts',
+    },
+  )
+
+  const grouped = groupBy(ast.program.body, (it) => {
+    if (types.isImportDeclaration(it)) {
+      return 'import'
+    }
+    if (types.isExportDeclaration(it)) {
+      return 'export'
+    }
+    return 'other'
+  })
+  const imports = (grouped.import || []) as ImportDeclaration[]
+  const other = (grouped.other || []) as Statement[]
+  const parsedImports = imports.flatMap(parseImport)
+  const params = parsedImports.map((imp) =>
+    imp.type === 'named'
+      ? types.objectPattern(
+          Object.entries(imp.imports).map((spec) =>
+            types.objectProperty(
+              types.identifier(spec[0]),
+              types.identifier(spec[1]),
+            ),
+          ),
+        )
+      : types.identifier(imp.name),
+  )
+  const newAst = types.program([
+    defineAst.program.body[0],
+    types.expressionStatement(
+      types.callExpression(types.identifier('define'), [
+        types.arrayExpression(
+          parsedImports.map((it) => types.stringLiteral(it.source)),
+        ),
+        types.arrowFunctionExpression(params, types.blockStatement(other)),
+      ]),
+    ),
+  ])
+
+  ast.program = newAst
+
   const newCode = generator.default(ast).code
   return newCode
 }

完整代码

import './style.css'
import * as monaco from 'monaco-editor'
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
import { groupBy } from 'lodash-es'

self.MonacoEnvironment = {
getWorker: (_: any, label: string) => {
if (label === 'typescript' || label === 'javascript') {
return new tsWorker()
    }
return new editorWorker()
  },
}

let value = `const add = (a: number, b: number) => a + b

console.log(add(1, 2))`

const editor = monaco.editor.create(document.getElementById('app')!, {
  value,
language: 'typescript',
automaticLayout: true,
})

import { initialize, transform } from 'esbuild-wasm'
import esbuildWasmUrl from 'esbuild-wasm/esbuild.wasm?url'

let isInit = false
async function compileCode(code: string): Promise<string> {
if (!isInit) {
await initialize({
wasmURL: esbuildWasmUrl,
    })
    isInit = true
  }

const result = await transform(transformImports(code), {
loader: 'ts',
format: 'iife',
  })
return result.code
}

let worker: Worker
function executeCode(code: string) {
if (worker) {
    worker.terminate()
  }
const blobUrl = URL.createObjectURL(
new Blob([code], { type: 'application/javascript' }),
  )
  worker = new Worker(blobUrl)
}

import { packages } from '@babel/standalone'
import type {
Identifier,
ImportDeclaration,
ImportSpecifier,
Statement,
} from '@babel/types'

type ImportType = {
source: string
} & (
  | {
type: 'namespace'
name: string
    }
  | {
type: 'default'
name: string
    }
  | {
type: 'named'
imports: Record<string, string>
    }
)

function parseImport(imp: ImportDeclaration): ImportType[] {
const { types } = packages
const specifiers = imp.specifiers
const source = imp.source.value
const isNamespace =
    specifiers.length === 1 && types.isImportNamespaceSpecifier(specifiers[0])
const includeDefault = specifiers.some((it) =>
    types.isImportDefaultSpecifier(it),
  )
if (isNamespace) {
return [
      {
type: 'namespace',
        source,
name: specifiers[0].local.name,
      },
    ]
  }
const namedImport = specifiers.filter(
(it) => !types.isImportDefaultSpecifier(it),
  )
const result: ImportType[] = []
if (namedImport.length > 0) {
    result.push({
type: 'named',
      source,
imports: namedImport.reduce((acc, it) => {
        acc[((it as ImportSpecifier).imported as Identifier).name] =
          it.local.name
return acc
      }, {} as Record<string, string>),
    } as ImportType)
  }
if (includeDefault) {
    result.push({
type: 'default',
      source,
name: specifiers[0].local.name,
    } as ImportType)
  }
return result
}

function transformImports(code: string) {
const { parser, types, generator } = packages
const ast = parser.parse(code, {
sourceType: 'module',
plugins: ['typescript'],
sourceFilename: 'example.ts',
  })

const defineAst = parser.parse(
`export async function define(deps: string[], fn: (...args: any[]) => any) {
  const args = await Promise.all(
    deps.map(async (dep) => {
      const mod = await import('https://esm.sh/' + dep)
      return 'default' in mod ? mod.default : mod
    }),
  )
  return fn(...args)
}
`,
    {
sourceType: 'module',
plugins: ['typescript'],
sourceFilename: 'define.ts',
    },
  )

const grouped = groupBy(ast.program.body, (it) => {
if (types.isImportDeclaration(it)) {
return 'import'
    }
if (types.isExportDeclaration(it)) {
return 'export'
    }
return 'other'
  })
const imports = (grouped.import || []) as ImportDeclaration[]
const other = (grouped.other || []) as Statement[]
const parsedImports = imports.flatMap(parseImport)
const params = parsedImports.map((imp) =>
    imp.type === 'named'
      ? types.objectPattern(
Object.entries(imp.imports).map((spec) =>
            types.objectProperty(
              types.identifier(spec[0]),
              types.identifier(spec[1]),
            ),
          ),
        )
      : types.identifier(imp.name),
  )
const newAst = types.program([
    defineAst.program.body[0],
    types.expressionStatement(
      types.callExpression(types.identifier('define'), [
        types.arrayExpression(
          parsedImports.map((it) => types.stringLiteral(it.source)),
        ),
        types.arrowFunctionExpression(params, types.blockStatement(other)),
      ]),
    ),
  ])

  ast.program = newAst

const newCode = generator.default(ast).code
return newCode
}

window.addEventListener('keydown', async (e) => {
if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault()
const compiledCode = await compileCode(editor.getValue())
console.log(compiledCode)
executeCode(compiledCode)
  }
})

处理类型定义

现在，代码可以正常编译和运行了，但在编辑器中引入的 npm 包仍然有类型错误提示，这又应当如何解决呢？

得益于 TypeScript 的生态发展，现在实现这个功能非常简单。首先，安装依赖

1	`pnpm i @typescript/ata typescript`

然后引入 @typescript/ata

import { setupTypeAcquisition } from '@typescript/ata'
import ts from 'typescript'

function initTypeAcquisition(
  addLibraryToRuntime: (code: string, path: string) => void,
) {
return setupTypeAcquisition({
projectName: 'TypeScript Playground',
typescript: ts,
logger: console,
delegate: {
receivedFile: (code: string, path: string) => {
addLibraryToRuntime(code, path)
// console.log('Received file', code, path)
      },
progress: (dl: number, ttl: number) => {
// console.log({ dl, ttl })
      },
started: () => {
console.log('ATA start')
      },
finished: (f) => {
console.log('ATA done')
      },
    },
  })
}
const ta = initTypeAcquisition((code: string, path: string) => {
const _path = 'file://' + path
  monaco.languages.typescript.typescriptDefaults.addExtraLib(code, _path)
})
editor.onDidChangeModelContent(async () => {
// 判断是否有错误
const value = editor.getValue()
await ta(value)
})
// editor 初始化完成后，执行一次 ta
ta(editor.getValue())

还需要为编辑器设置一个 Model，主要是需要指定一个虚拟文件路径让 Monaco Editor 的 TypeScript 能正确找到虚拟 node_modules 下的类型定义文件。

const model = monaco.editor.createModel(
  value,
'typescript',
  monaco.Uri.file('example.ts'),
)
editor.setModel(model)

完整代码

import './style.css'
import * as monaco from 'monaco-editor'
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
import { groupBy } from 'lodash-es'

self.MonacoEnvironment = {
getWorker: (_: any, label: string) => {
if (label === 'typescript' || label === 'javascript') {
return new tsWorker()
    }
return new editorWorker()
  },
}

let value = `import { sum } from 'lodash-es'
console.log(sum([1, 2, 3, 4]))`

const editor = monaco.editor.create(document.getElementById('app')!, {
  value,
language: 'typescript',
automaticLayout: true,
})

import { initialize, transform } from 'esbuild-wasm'
import esbuildWasmUrl from 'esbuild-wasm/esbuild.wasm?url'

let isInit = false
async function compileCode(code: string): Promise<string> {
if (!isInit) {
await initialize({
wasmURL: esbuildWasmUrl,
    })
    isInit = true
  }

const result = await transform(transformImports(code), {
loader: 'ts',
format: 'iife',
  })
return result.code
}

let worker: Worker
function executeCode(code: string) {
if (worker) {
    worker.terminate()
  }
const blobUrl = URL.createObjectURL(
new Blob([code], { type: 'application/javascript' }),
  )
  worker = new Worker(blobUrl)
}

import { packages } from '@babel/standalone'
import type {
Identifier,
ImportDeclaration,
ImportSpecifier,
Statement,
} from '@babel/types'

type ImportType = {
source: string
} & (
  | {
type: 'namespace'
name: string
    }
  | {
type: 'default'
name: string
    }
  | {
type: 'named'
imports: Record<string, string>
    }
)

function parseImport(imp: ImportDeclaration): ImportType[] {
const { types } = packages
const specifiers = imp.specifiers
const source = imp.source.value
const isNamespace =
    specifiers.length === 1 && types.isImportNamespaceSpecifier(specifiers[0])
const includeDefault = specifiers.some((it) =>
    types.isImportDefaultSpecifier(it),
  )
if (isNamespace) {
return [
      {
type: 'namespace',
        source,
name: specifiers[0].local.name,
      },
    ]
  }
const namedImport = specifiers.filter(
(it) => !types.isImportDefaultSpecifier(it),
  )
const result: ImportType[] = []
if (namedImport.length > 0) {
    result.push({
type: 'named',
      source,
imports: namedImport.reduce((acc, it) => {
        acc[((it as ImportSpecifier).imported as Identifier).name] =
          it.local.name
return acc
      }, {} as Record<string, string>),
    } as ImportType)
  }
if (includeDefault) {
    result.push({
type: 'default',
      source,
name: specifiers[0].local.name,
    } as ImportType)
  }
return result
}

function transformImports(code: string) {
const { parser, types, generator } = packages
const ast = parser.parse(code, {
sourceType: 'module',
plugins: ['typescript'],
sourceFilename: 'example.ts',
  })

const defineAst = parser.parse(
`export async function define(deps: string[], fn: (...args: any[]) => any) {
  const args = await Promise.all(
    deps.map(async (dep) => {
      const mod = await import('https://esm.sh/' + dep)
      return 'default' in mod ? mod.default : mod
    }),
  )
  return fn(...args)
}
`,
    {
sourceType: 'module',
plugins: ['typescript'],
sourceFilename: 'define.ts',
    },
  )

const grouped = groupBy(ast.program.body, (it) => {
if (types.isImportDeclaration(it)) {
return 'import'
    }
if (types.isExportDeclaration(it)) {
return 'export'
    }
return 'other'
  })
const imports = (grouped.import || []) as ImportDeclaration[]
const other = (grouped.other || []) as Statement[]
const parsedImports = imports.flatMap(parseImport)
const params = parsedImports.map((imp) =>
    imp.type === 'named'
      ? types.objectPattern(
Object.entries(imp.imports).map((spec) =>
            types.objectProperty(
              types.identifier(spec[0]),
              types.identifier(spec[1]),
            ),
          ),
        )
      : types.identifier(imp.name),
  )
const newAst = types.program([
    defineAst.program.body[0],
    types.expressionStatement(
      types.callExpression(types.identifier('define'), [
        types.arrayExpression(
          parsedImports.map((it) => types.stringLiteral(it.source)),
        ),
        types.arrowFunctionExpression(params, types.blockStatement(other)),
      ]),
    ),
  ])

  ast.program = newAst

const newCode = generator.default(ast).code
return newCode
}

window.addEventListener('keydown', async (e) => {
if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault()
const compiledCode = await compileCode(editor.getValue())
console.log(compiledCode)
executeCode(compiledCode)
  }
})

import { setupTypeAcquisition } from '@typescript/ata'
import ts from 'typescript'

function initTypeAcquisition(
  addLibraryToRuntime: (code: string, path: string) => void,
) {
return setupTypeAcquisition({
projectName: 'TypeScript Playground',
typescript: ts,
logger: console,
delegate: {
receivedFile: (code: string, path: string) => {
addLibraryToRuntime(code, path)
// console.log('Received file', code, path)
      },
progress: (dl: number, ttl: number) => {
// console.log({ dl, ttl })
      },
started: () => {
console.log('ATA start')
      },
finished: (f) => {
console.log('ATA done')
      },
    },
  })
}
const ta = initTypeAcquisition((code: string, path: string) => {
const _path = 'file://' + path
  monaco.languages.typescript.typescriptDefaults.addExtraLib(code, _path)
console.log('addExtraLib', _path)
})
editor.onDidChangeModelContent(async () => {
const value = editor.getValue()
await ta(value)
})
ta(editor.getValue())

const model = monaco.editor.createModel(
  value,
'typescript',
  monaco.Uri.file('example.ts'),
)
editor.setModel(model)