# cf-dts-resolver

**Repository Path**: janpoem/cf-dts-resolver

## Basic Information

- **Project Name**: cf-dts-resolver
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-15
- **Last Updated**: 2025-03-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# cf-dts-resolver

众所周知，d.ts 是 TS 开发重要的依赖和保障，但基于 package.json 维护的方式实在太麻烦。

该项目属于本人的在线代码平台计划中所依赖的一个子系统，即通过简易的 http url
即可匹配到对应 package 的 d.ts ，并通过更简易的方式嵌入到 Web IDE 中。

即当，我们在 Web IDE 中输入 `import React from 'react'` ，根据语法分析，得出 import
语法，以提取出 `react` ，然后触发 IDE 自动去远程拉取对应的 .d.ts 文件，补充进 IDE
的附加库中。

该项目即作为远程 .d.ts 供给的实现方案。

[在 monaco-editor 中调用该服务的例子](https://static.kephp.com/react-monaco/0.0.1/index.html)

其中，基于 cloudflare worker 极其低成本的部署机制，本项目作为 dts-resolver
的一个原型，优先考虑基于 cloudflare 做实现。

## 更新说明

### 25/03/20

- 优化 d.ts 文件内 `import/export` 的相对路径，改为 `pkgName/path`
  ，如：[react/jsx-runtime](https://dts.kephp.com/pkg/react/jsx-runtime)
  ```
  import * as React from "./"
  ```
  改为：
  ```
  import * as React from "react"
  ```
- 如果 package 输出的是 typings ，在输出的 JSON 会额外 `"typings":true`
  ，如：[pkg/monaco-editor](https://dts.kephp.com/pkg/pkg/monaco-editor)

## 访问说明

目前可以通过诸如：[https://dts.kephp.com/pkg/react](https://dts.kephp.com/pkg/react)
这样的 url 进行直接访问。

一、路径支持指定版本号或版本号查询语法，诸如：

[https://dts.kephp.com/pkg/@mui/material@6.4.7](https://dts.kephp.com/pkg/@mui/material@6.4.7)

[https://dts.kephp.com/pkg/@mui/material@^5](https://dts.kephp.com/pkg/@mui/material@^5)

二、支持子模块的 d.ts 请求，诸如：

[https://dts.kephp.com/pkg/react@^18/jsx-runtime](https://dts.kephp.com/pkg/react@^18/jsx-runtime)

[https://dts.kephp.com/pkg/@mui/material@6.4.7/StepConnector](https://dts.kephp.com/pkg/@mui/material@6.4.7/StepConnector)

三、每个 d.ts 导出的是一个 json 结构：

```json
{
  "name": "package_name",
  "version": "version",
  "path": "路径名",
  // 是否转换处理 ts 三斜杠的 reference 语法
  "isEmberRefs": false,
  "url": "远程 CDN URL",
  "source": "d.ts 源代码",
  // 该文件内涉及的依赖，主要是 d.ts 文件中的 import/export 语法的解析
  "deps": [
    {
      "name": "依赖包名",
      "version": "依赖包版本号",
      "path": "请求路径，可能为空",
      "url": "该引入文件的 d.ts 的请求 url",
      // ref | import | export
      "type": "import"
    }
  ]
}
```

`deps` 包含的是当前 d.ts 文件中关联的 imports/exports ，用于发起二次请求，以补充扩展库。

请求的参数可选参数 `refs`
，如：[https://dts.kephp.com/pkg/react?ref](https://dts.kephp.com/pkg/react?ref)
会将源代码中的 `/// <reference />` 语法进行嵌入处理（增加额外的请求时间），有些库的
reference 实在是难以优化。

## 补充说明

这个东西，其实我另外有一套本地实现版，其实走数据库，能极大提升访问速度。但我本地的版本，整合了
esm 转处理。

目前考虑单独将 dts 服务拆出来，主要是为了 monaco-editor 可以更直接简单的调用。

这个项目之作为一个临时草案。

本地开发，可使用 Bun 环境，开发效率更高，直接搞 TS。wrangler 国内搞还是有点慢，特别是基于
TS 更加不稳定。