@ray-js/code-sandbox 0.0.3 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README-zh_CN.md +121 -0
- package/package.json +1 -1
package/README-zh_CN.md
ADDED
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
[English](./README.md) | 简体中文
|
|
2
|
+
|
|
3
|
+
# @ray-js/code-sandbox
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@ray-js/code-sandbox) [](https://www.npmjs.com/package/@ray-js/code-sandbox)
|
|
6
|
+
|
|
7
|
+
> 小程序 CodeSandbox 容器
|
|
8
|
+
|
|
9
|
+
## 安装
|
|
10
|
+
|
|
11
|
+
```sh
|
|
12
|
+
$ npm install @ray-js/code-sandbox
|
|
13
|
+
// 或者
|
|
14
|
+
$ yarn add @ray-js/code-sandbox
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## 开发
|
|
18
|
+
|
|
19
|
+
```sh
|
|
20
|
+
# 实时编译组件代码
|
|
21
|
+
yarn watch
|
|
22
|
+
# 实时编译Demo代码
|
|
23
|
+
yarn start:tuya
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## 使用
|
|
27
|
+
|
|
28
|
+
### 小程序对接
|
|
29
|
+
|
|
30
|
+
安装必须的依赖
|
|
31
|
+
|
|
32
|
+
```sh
|
|
33
|
+
yarn add @ray-js/code-sandbox
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
pages 目录下新建 playground 页面，内容如下
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
import React from 'react';
|
|
40
|
+
import CodeSandbox from '@ray-js/code-sandbox';
|
|
41
|
+
|
|
42
|
+
import * as RayComponents from '@ray-js/ray';
|
|
43
|
+
|
|
44
|
+
export default function Home() {
|
|
45
|
+
return (
|
|
46
|
+
<CodeSandbox
|
|
47
|
+
defaultTitle="CodeSandbox"
|
|
48
|
+
context={{
|
|
49
|
+
// CodeSandbox 中可 import from 的三方库
|
|
50
|
+
'@ray-js/ray': RayComponents,
|
|
51
|
+
}}
|
|
52
|
+
/>
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
页面 index.config 配置自定义 Topbar
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
export default {
|
|
61
|
+
navigationStyle: 'custom',
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### 平台对接
|
|
67
|
+
|
|
68
|
+
安装必须的依赖
|
|
69
|
+
|
|
70
|
+
```sh
|
|
71
|
+
yarn add @ray-js/code-sandbox antd axios styled-components lodash @saber2pr/monaco
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
方式1: 引入 CodeSandbox 编辑器到页面中：
|
|
75
|
+
|
|
76
|
+
```tsx
|
|
77
|
+
import { CodeSandboxButton } from '@ray-js/code-sandbox/lib/txp'
|
|
78
|
+
|
|
79
|
+
<CodeSandboxButton
|
|
80
|
+
title="Playground" // 编辑器弹窗的标题
|
|
81
|
+
code={`
|
|
82
|
+
import { Button } from '@ray-js/smartui';
|
|
83
|
+
|
|
84
|
+
export default function Demo() {
|
|
85
|
+
return <Button>测试</Button>
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
`}
|
|
89
|
+
txpCode="SmartUi" // 这里填写 TxP 上的组件code
|
|
90
|
+
pageName="playground" // 小程序项目中引入 codesandbox 组件的页面名，例如pages/playground/index，pageName就是playground
|
|
91
|
+
/>
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
点击按钮后就会弹窗打开 codesandbox 编辑器
|
|
95
|
+
|
|
96
|
+
方式2: 不使用按钮弹窗，直接接入编辑器+模拟器：
|
|
97
|
+
|
|
98
|
+
```tsx
|
|
99
|
+
import { CodeSandbox } from '@ray-js/code-sandbox/lib/txp'
|
|
100
|
+
|
|
101
|
+
<CodeSandbox
|
|
102
|
+
title="Button 组件" // demo 容器中的标题
|
|
103
|
+
code={`
|
|
104
|
+
import { Button } from '@ray-js/smartui';
|
|
105
|
+
|
|
106
|
+
export default function Demo() {
|
|
107
|
+
return <Button>测试</Button>
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
`}
|
|
111
|
+
txpCode="SmartUi" // 这里填写 TxP 上的组件code
|
|
112
|
+
pageName="playground" // 小程序项目中引入 codesandbox 组件的页面名，例如pages/playground/index，pageName就是playground
|
|
113
|
+
/>
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
### 注意
|
|
117
|
+
|
|
118
|
+
1. txpCode 指定的组件，需要在 TxP 平台上经过 ci Demo构建才可以接入到 CodeSandbox 模拟器中。
|
|
119
|
+
|
|
120
|
+
2. 编辑器涉及的资源、组件 Demo 容器都已上传到涂鸦 CDN，可在对外项目中使用。
|
|
121
|
+
3. 模拟器中大部分 BaseKit 能力支持，部分设备相关的 TTT 方法暂不支持。
|