From 34bbda89cf84a4d686ce04727faebcd72d09fffc Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Tue, 18 Jul 2023 16:51:48 +0800 Subject: [PATCH] docs: add typesciprt support document and others --- website/docs/plugins/guide/init-env.md | 2 +- .../docs/plugins/guide/typescript-support.md | 51 +++++++++++++++++++ website/docs/plugins/start.mdx | 2 + .../current/plugins/guide/create-theme.md | 2 +- .../current/plugins/guide/init-env.md | 2 +- .../plugins/guide/typescript-support.md | 51 +++++++++++++++++++ .../current/plugins/start.mdx | 2 + 7 files changed, 109 insertions(+), 3 deletions(-) create mode 100644 website/docs/plugins/guide/typescript-support.md create mode 100644 website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/plugins/guide/typescript-support.md diff --git a/website/docs/plugins/guide/init-env.md b/website/docs/plugins/guide/init-env.md index 04f635c6..fca7407c 100644 --- a/website/docs/plugins/guide/init-env.md +++ b/website/docs/plugins/guide/init-env.md @@ -3,7 +3,7 @@ sidebar_position: 1 title: Init Plugin Develop Env --- -Before developing a plugin, we need to create a plugin development environment. This environment can be the environment where the official source code of Tailchat is directly reused (https://github.com/msgbyte/tailchat/tree/master/client/web/plugins), It can also be an independent project +Before developing a plugin, we need to create a plugin development environment. This environment can directly reuse the plugin environment of Tailchat official source code ([https://github.com/msgbyte/tailchat/tree/master/client/web/plugins](https://github.com/msgbyte/tailchat/tree/master/client/web/plugins)), It can also be an independent project Here we mainly teach you how to create an independent plugin development environment diff --git a/website/docs/plugins/guide/typescript-support.md b/website/docs/plugins/guide/typescript-support.md new file mode 100644 index 00000000..aa08be8b --- /dev/null +++ b/website/docs/plugins/guide/typescript-support.md @@ -0,0 +1,51 @@ +--- +sidebar_position: 2 +title: Typescript Support +--- + +In `Tailchat`, there are some utility functions or components shared from the core project, which you can import via `@capital/common` or `@capital/component`. + +Of course, there are some type issues if quoted directly. Because at this time, the type system of typescript does not know what can be introduced and what types there are. + +There may be two situations here: + +## Develop in the Tailchat ontology project + +You can import files in the same directory through the `paths` field of `tsconfig.json`, so that typescript can directly load the complete type system when parsing + +for example: + +```json +{ + "compilerOptions": { + "baseUrl": "./src", + "esModuleInterop": true, + "jsx": "react", + "paths": { + "@capital/*": ["../../../src/plugin/*"], + } + } +} +``` + +## Develop in a standalone project + +You can develop by getting Tailchat's pre-generated declaration files. + +> Because the type needs to be manually rewritten then some types are still any. But it can guarantee that developers will not introduce functions that do not exist + +If you are using the `tailchat create` command to create the project, the command line tool template has added the following commands for you + +```json +"scripts": { + "sync:declaration": "tailchat declaration github" +}, +``` + +usage + +```bash +pnpm sync: declaration +``` + +This command will automatically pull the remote configuration file and write it into the `types/tailchat.d.ts` file in the current directory. If you manually created the project, you can add it to your `package.json` for subsequent use diff --git a/website/docs/plugins/start.mdx b/website/docs/plugins/start.mdx index 2ffa477c..cc5ab7fe 100644 --- a/website/docs/plugins/start.mdx +++ b/website/docs/plugins/start.mdx @@ -18,6 +18,8 @@ import TabItem from '@theme/TabItem'; +> First, make sure you have installed `tailchat-cli`, for command line tools, please refer to: [tailchat-cli](../cli/tailchat-cli) + Move to the project directory (can be a custom project): ```bash diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/plugins/guide/create-theme.md b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/plugins/guide/create-theme.md index f47c0290..f043e5d7 100644 --- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/plugins/guide/create-theme.md +++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/plugins/guide/create-theme.md @@ -1,5 +1,5 @@ --- -sidebar_position: 2 +sidebar_position: 3 title: 开发一个主题插件 --- diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/plugins/guide/init-env.md b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/plugins/guide/init-env.md index 8493bd6c..f76f90e2 100644 --- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/plugins/guide/init-env.md +++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/plugins/guide/init-env.md @@ -3,7 +3,7 @@ sidebar_position: 1 title: 初始化插件开发环境 --- -在开发一个插件之前，我们需要创建一个插件开发环境，这个环境可以是直接复用 Tailchat 官方源码的环境(https://github.com/msgbyte/tailchat/tree/master/client/web/plugins)，也可以是一个独立的项目 +在开发一个插件之前，我们需要创建一个插件开发环境，这个环境可以是直接复用 Tailchat 官方源码的插件环境([https://github.com/msgbyte/tailchat/tree/master/client/web/plugins](https://github.com/msgbyte/tailchat/tree/master/client/web/plugins))，也可以是一个独立的项目 这里主要教大家怎么创建一个独立的插件开发环境 diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/plugins/guide/typescript-support.md b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/plugins/guide/typescript-support.md new file mode 100644 index 00000000..b9986a4e --- /dev/null +++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/plugins/guide/typescript-support.md @@ -0,0 +1,51 @@ +--- +sidebar_position: 2 +title: Typescript 类型支持 +--- + +在 `Tailchat` 中拥有一些从核心项目共享出来的工具函数或者组件，你可以通过 `@capital/common` 或 `@capital/component` 来引用。 + +当然，如果直接引用的话会有一些类型问题。因为此时typescript的类型系统是不知道能够引入什么以及有什么类型的。 + +在这里可能会有两种情况: + +## 在Tailchat本体项目中进行开发 + +你可以通过`tsconfig.json`的`paths`字段来引入同一目录下的文件, 这样在解析时typescript可以直接加载完整的类型系统 + +如: + +```json +{ + "compilerOptions": { + "baseUrl": "./src", + "esModuleInterop": true, + "jsx": "react", + "paths": { + "@capital/*": ["../../../src/plugin/*"], + } + } +} +``` + +## 在独立项目中进行开发 + +你可以通过获取 Tailchat 预生成好的声明文件进行开发。 + +> 因为类型要手动重写因为有部分类型尚是any。但是能够保证开发者不会引入不存在的函数 + +如果你使用的是 `tailchat create` 命令创建的项目，命令行工具模板已为您添加了如下命令 + +```json +"scripts": { + "sync:declaration": "tailchat declaration github" +}, +``` + +用法 + +```bash +pnpm sync:declaration +``` + +该命令会自动拉取远程的配置文件并写入当前目录下的 `types/tailchat.d.ts` 文件中。如果你是手动创建的项目，你可以将其添加到你的`package.json`中以方便后续使用 diff --git a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/plugins/start.mdx b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/plugins/start.mdx index ae6483c4..f9746491 100644 --- a/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/plugins/start.mdx +++ b/website/i18n/zh-Hans/docusaurus-plugin-content-docs/current/plugins/start.mdx @@ -17,6 +17,8 @@ import TabItem from '@theme/TabItem'; +> 首先确保你已经安装了 `tailchat-cli`, 关于命令行工具可参照: [tailchat-cli](../cli/tailchat-cli) + 移动到项目目录下(可以是自定义项目): ```bash