English | 简体中文

@ray-js/code-sandbox

CodeSandBox container

Installation

$ npm install @ray-js/code-sandbox
# or
$ yarn add @ray-js/code-sandbox

Develop

# watch compile component code
yarn watch
# watch compile demo
yarn start:tuya

Usage

Mini -program docking

Must -dependencies in installation

yarn add @ray-js/code-sandbox @ray-js/ray

Create a new Playground page in the PAGES directory, the content is as follows

import React from 'react';
import CodeSandbox from '@ray-js/code-sandbox';

import * as RayComponents from '@ray-js/ray';

export default function Home() {
  return (
    <CodeSandbox
      defaultTitle="CodeSandbox"
      context={{
        // The three -party library of Import from in CODESANDBOX
        '@ray-js/ray': RayComponents,
      }}
    />
  );
}

Page index.config Configuration Custom Topbar

export default {
  navigationStyle: 'custom',
};

Platform docking

Must -dependencies in installation

yarn add @ray-js/code-sandbox antd axios styled-components lodash @saber2pr/monaco

Method 1: Introduce Codesandbox editor to the page:

import { CodeSandboxButton } from '@ray-js/code-sandbox/lib/txp'

<CodeSandboxButton
  title="Playground" // The title of Editor's pop -up window
  code={`
import { Button } from '@ray-js/smartui';

export default function Demo() {
return <Button>测试</Button>
}

`}
  txpCode="SmartUi" // Fill in the component Code on TXP here
  pageName="playground" // The page name of the CodeSandBox component is introduced in the applet project, such as Pages/Playground/Index, and Pagename is Playgroundd
/>

After clicking the button, you will pop up the window to open the CodesandBox editor

Method 2: Do not use the button pop -up window, directly access the editor+simulator:

import { CodeSandbox } from '@ray-js/code-sandbox/lib/txp'

  <CodeSandbox
    title="Button 组件" // The title in DEMO container
    code={`
import { Button } from '@ray-js/smartui';

export default function Demo() {
  return <Button>测试</Button>
}

`}
    txpCode="SmartUi" // Fill in the component Code on TXP here
    pageName="playground" // The page name of the CodeSandBox component is introduced in the applet project, such as Pages/Playground/Index, and Pagename is Playgroundd
  />

Notice

1. The components specified by TXPCODE need to be built through CI DEMO on the TXP platform before they can be connected to the Codesandbox simulator.

2. The resources and component DEMO containers involved in the editor have been uploaded to the graffiti CDN, which can be used in external projects.

3. Most Basekit capabilities in the simulator support, some device -related TTT methods do not support it.