Skip to content

Commit b7c4bb3

Browse files
zh-lxzh-lx
committed
feat: update docs
1 parent 8633e12 commit b7c4bb3

File tree

7 files changed

+117
-366
lines changed

7 files changed

+117
-366
lines changed

‎README.md

+30-46
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,45 @@
11
# CodePlayer
22

3-
CodePlayer 是一个轻量级的在线 WebIDE(Playground)，支持在线编写并运行 `html/js/css/ts/vue/react/less/scss` 等语法。实现了基于 esm 和 import-map 的纯浏览器构建，运行速度远超 `Stackblitz/CodeSandbox/CodePen` 等同类产品。
4-
5-
<p>
6-
<a href="https://sandbox-docs.fe-dev.cn">在线文档</a> |
7-
<a href="https://sandbox.fe-dev.cn">在线体验</a>
3+
<p align="center">
4+
<p>CodePlayer 是一款轻量、免登录、极快运行速度的 WebIDE，可以在线编写 vue2/3、react 等应用代码并运行，性能远超 CodePen、CodeSandbox、Stackblitz 等同类的产品。</p>
5+
<a href="https://play.fe-dev.cn">在线体验</a> |
6+
<a href="https://play.fe-dev.cn/docs">使用手册</a>
87
</p>
98

10-
[![NPM version](https://img.shields.io/npm/v/codeplayer.svg)](https://www.npmjs.com/package/codeplayer)
11-
[![GITHUB star](https://img.shields.io/github/stars/zh-lx/codeplayer.svg)](https://github.com/zh-lx/codeplayer)
12-
[![MIT-license](https://img.shields.io/npm/l/code-inspector.svg)](https://opensource.org/licenses/MIT)
13-
[![GITHUB-language](https://img.shields.io/github/languages/top/zh-lx/codeplayer.svg)](https://github.com/zh-lx/codeplayer)
14-
15-
![image](https://github.com/zh-lx/codeplayer/assets/73059627/e2df9937-3e36-433d-ad8d-89e19ed72eb8)
16-
17-
## Feature
18-
19-
- 极致的编译和构建速度
20-
- 内置 `Vue3 / React / Typescript / Javascript / HTML / CSS / Less / Sass` 等多种代码解析器
21-
- 支持通过 importMap 导入第三方库
22-
- 代码实时编码压缩同步至 url 以便于分享
9+
</div>
2310

24-
## Install
11+
![捕获](https://github.com/zh-lx/codeplayer/assets/73059627/4edd7fa7-f10b-4fbb-8a7e-ab3378ad7c57)
2512

26-
浏览器 `script` 引入:
13+
## 使用
2714

28-
```html
29-
<script src="https://unpkg.com/codeplayer"></script>
30-
```
15+
具体的使用参照[使用手册](http://play.fe-dev.cn/docs/guide/start.html)
3116

32-
使用 `npm` 或者 `yarn` 安装:
17+
## 支持语法
3318

34-
```perl
35-
npm install codeplayer
36-
# or
37-
yarn add codeplayer
38-
```
19+
- ✅ html
20+
- ✅ js/ts
21+
- ✅ css/less/scss
22+
- ✅ jsx/tsx
23+
- ✅ vue2/3
24+
- ✅ react
3925

40-
## Example
26+
## 速度对比
4127

42-
浏览器 script 使用：
28+
- 比较基准: 以 Antd 组件库的 [Button Demo](https://ant.design/components/button-cn#%E4%BB%A3%E7%A0%81%E6%BC%94%E7%A4%BA) 为例，分别访问各个平台，记录 Demo 加载完毕的总时长
29+
- 测试环境: Chrome v118、Windows 平台、100MB 带宽
4330

44-
```html
45-
<script src="https://unpkg.com/codeplayer"></script>
46-
<script>
47-
new CodePlayer('#container', {
48-
appType: 'react',
49-
});
50-
</script>
51-
```
31+
| 平台 | 首次访问(无缓存) | 后续访问(有缓存) | Demo 地址 |
32+
| ----------- | ---------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
33+
| CodePlayer | 8s | 2s | [CodePlayer](https://play.fe-dev.cn/?entry=index.html&activeFile=App.tsx&theme=dark#eNqNU9tq20AQ/ZWtXmyDpa0LheDIIomTQKBQExxoQS8b7cTadi+qtL5h/O+dWcmuDW7I045mzjk7c3a0i5SVsElKb3Q0jtJP99+n85+zB0aJLLcpnUwLu5jkEdg8whxjaQlChghjA16wohR1Ax5BL/PH+CqPGD+rl95XMfxZqhVCfsQvt/HUmUp49aoBwYWzHizRnx4mIBeUOxewwgCWVwrWlav9GWetpC8nElaqgDh8DJmyyiuh46YQGiaj5POpoldeQzZ1EmZabKFOeZsJs/HjcOmrk9sDR6oVUxJvE1WFNqQcEx3hCEubolaVZ35bUbPGySWN10koQ52zXsKNUDbxzaZ33Qq0NLKbB9+jYdSCYyOq5FfjLL7NjrB5V2jyaMxChnI1iAItGWNIRjdjzqExSVPyULkZXSVfyIHhGSGWzvD/s6jcMRF1pArr5UUSFW6+JqNRMsojQu9zu8dJDsPiCJ0DzyTP3mpn/vWOTnTVHSsw5+HZOc/2Z7DQcaEVPvsp47aqWhhai/HB2dziijSe1SQ0OVHtS1csDYokC/APGii82z7Jfg/ftjcYIJc4SQ34b9T9lPR5NsBZOvWLo/RCi3TxcZC7pffODtmjhs1hlB75dNoeao5bneRxin32B2ySsX7YjEBciAqXqTFCa1zidR0+6ThuVtpedNi7qlZG1Fssz9qoayTl7XnOyu7hTSy1fxd0kJaiKQHfP7sPwYc4Hjb4XNkcjw/htbK/Ef8Nj0v4lJMrGNI75RY2wWzZDYFuXkf7v6BCmeI=) |
34+
| CodePen | 12s | 4s | [CodePen](https://codepen.io/ischaqje-the-bold/pen/OJdgQew?editors=001) |
35+
| CodeSandbox | 19s | 17s | [CodeSandbox](https://codesandbox.io/s/yv7rzl) |
36+
| Stackblitz | 29s | 22s | [Stackblitz](https://stackblitz.com/edit/react-nxlcxa?file=demo.tsx) |
5237

53-
ES6 使用:
38+
## 交流与反馈
5439

55-
```ts
56-
import CodePlayer from 'codeplayer';
40+
任何使用问题欢迎添加作者微信 `zhoulx1688888` 或者 QQ 群 `245077601` 进行咨询与反馈:
5741

58-
new CodePlayer('#container', {
59-
appType: 'react',
60-
});
61-
```
42+
<div style="display: flex;">
43+
<img src="https://user-images.githubusercontent.com/73059627/226233691-848b2a40-f1a9-414e-a80f-3fc6c6209eb1.png" width="200" />
44+
<img src="https://github.com/zh-lx/codeplayer/assets/73059627/24851d9e-4d94-4a33-94c7-dcc09696a67b" width="200" />
45+
</div>

‎packages/core/README.md

+52-11
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,59 @@
1-
# Vue 3 + TypeScript + Vite
1+
# CodePlayer
22

3-
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
3+
<p align="center">
4+
<p>CodePlayer 是一款轻量、免登录、极快运行速度的 WebIDE，可以在线编写 vue2/3、react 等应用代码并运行，性能远超 CodePen、CodeSandbox、Stackblitz 等同类的产品。</p>
5+
<a href="https://play.fe-dev.cn">在线体验</a> |
6+
<a href="https://play.fe-dev.cn/docs">使用手册</a>
7+
</p>
48

5-
## Recommended IDE Setup
9+
[![NPM version](https://img.shields.io/npm/v/codeplayer.svg)](https://www.npmjs.com/package/codeplayer)
10+
[![GITHUB star](https://img.shields.io/github/stars/zh-lx/codeplayer.svg)](https://github.com/zh-lx/codeplayer)
11+
[![MIT-license](https://img.shields.io/npm/l/codeplayer.svg)](https://opensource.org/licenses/MIT)
612

7-
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
13+
</div>
814

9-
## Type Support For `.vue` Imports in TS
15+
![捕获](https://github.com/zh-lx/codeplayer/assets/73059627/4edd7fa7-f10b-4fbb-8a7e-ab3378ad7c57)
1016

11-
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
17+
## 安装
1218

13-
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
19+
```shell
20+
npm i codeplayer
21+
# or
22+
yarn add codeplayer
23+
# or
24+
pnpm add codeplayer
25+
```
1426

15-
1. Disable the built-in TypeScript Extension
16-
1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
17-
2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
18-
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
27+
## 使用
28+
29+
具体的使用参照[使用手册](http://play.fe-dev.cn/docs/guide/start.html)
30+
31+
## 支持语法
32+
33+
- ✅ html
34+
- ✅ js/ts
35+
- ✅ css/less/scss
36+
- ✅ jsx/tsx
37+
- ✅ vue2/3
38+
- ✅ react
39+
40+
## 速度对比
41+
42+
- 比较基准: 以 Antd 组件库的 [Button Demo](https://ant.design/components/button-cn#%E4%BB%A3%E7%A0%81%E6%BC%94%E7%A4%BA) 为例，分别访问各个平台，记录 Demo 加载完毕的总时长
43+
- 测试环境: Chrome v118、Windows 平台、100MB 带宽
44+
45+
| 平台 | 首次访问(无缓存) | 后续访问(有缓存) | Demo 地址 |
46+
| ----------- | ---------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
47+
| CodePlayer | 8s | 2s | [CodePlayer](https://play.fe-dev.cn/?entry=index.html&activeFile=App.tsx&theme=dark#eNqNU9tq20AQ/ZWtXmyDpa0LheDIIomTQKBQExxoQS8b7cTadi+qtL5h/O+dWcmuDW7I045mzjk7c3a0i5SVsElKb3Q0jtJP99+n85+zB0aJLLcpnUwLu5jkEdg8whxjaQlChghjA16wohR1Ax5BL/PH+CqPGD+rl95XMfxZqhVCfsQvt/HUmUp49aoBwYWzHizRnx4mIBeUOxewwgCWVwrWlav9GWetpC8nElaqgDh8DJmyyiuh46YQGiaj5POpoldeQzZ1EmZabKFOeZsJs/HjcOmrk9sDR6oVUxJvE1WFNqQcEx3hCEubolaVZ35bUbPGySWN10koQ52zXsKNUDbxzaZ33Qq0NLKbB9+jYdSCYyOq5FfjLL7NjrB5V2jyaMxChnI1iAItGWNIRjdjzqExSVPyULkZXSVfyIHhGSGWzvD/s6jcMRF1pArr5UUSFW6+JqNRMsojQu9zu8dJDsPiCJ0DzyTP3mpn/vWOTnTVHSsw5+HZOc/2Z7DQcaEVPvsp47aqWhhai/HB2dziijSe1SQ0OVHtS1csDYokC/APGii82z7Jfg/ftjcYIJc4SQ34b9T9lPR5NsBZOvWLo/RCi3TxcZC7pffODtmjhs1hlB75dNoeao5bneRxin32B2ySsX7YjEBciAqXqTFCa1zidR0+6ThuVtpedNi7qlZG1Fssz9qoayTl7XnOyu7hTSy1fxd0kJaiKQHfP7sPwYc4Hjb4XNkcjw/htbK/Ef8Nj0v4lJMrGNI75RY2wWzZDYFuXkf7v6BCmeI=) |
48+
| CodePen | 12s | 4s | [CodePen](https://codepen.io/ischaqje-the-bold/pen/OJdgQew?editors=001) |
49+
| CodeSandbox | 19s | 17s | [CodeSandbox](https://codesandbox.io/s/yv7rzl) |
50+
| Stackblitz | 29s | 22s | [Stackblitz](https://stackblitz.com/edit/react-nxlcxa?file=demo.tsx) |
51+
52+
## 交流与反馈
53+
54+
任何使用问题欢迎添加作者微信 `zhoulx1688888` 或者 QQ 群 `245077601` 进行咨询与反馈:
55+
56+
<div style="display: flex;">
57+
<img src="https://user-images.githubusercontent.com/73059627/226233691-848b2a40-f1a9-414e-a80f-3fc6c6209eb1.png" width="200" />
58+
<img src="https://github.com/zh-lx/codeplayer/assets/73059627/24851d9e-4d94-4a33-94c7-dcc09696a67b" width="200" />
59+
</div>

‎packages/docs/.vitepress/config.ts

+8-3
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { defineConfig } from 'vitepress';
44
export default defineConfig({
55
title: 'CodePlayer',
66
description: '浏览器端进行 Web 代码的编写及运行预览',
7+
base: '/docs/',
78
themeConfig: {
89
logo: '/logo.svg',
910
// https://vitepress.dev/reference/default-theme-config
@@ -16,14 +17,18 @@ export default defineConfig({
1617
{
1718
text: '指南',
1819
items: [
20+
{ text: '介绍', link: '/guide/introduction' },
1921
{ text: '快速开始', link: '/guide/start' },
20-
{ text: '第三方依赖(importmap)', link: '/guide/importmap' },
21-
{ text: '配置', link: '/guide/config' },
2222
],
2323
},
2424
{
2525
text: '参考',
26-
items: [{ text: '组件式使用', link: '/reference/deploy' }],
26+
items: [
27+
{ text: '第三方依赖(importmap)', link: '/guide/importmap' },
28+
{ text: '配置', link: '/guide/config' },
29+
{ text: '组件式使用', link: '/reference/deploy' },
30+
{ text: '支持语法', link: '/reference/support' },
31+
],
2732
},
2833
{
2934
text: '更多',

0 commit comments

Comments
 (0)