react playground

React-Exercise-Playground

Este é um editor de código on-line do React que pode executar o código React em tempo real, suporta a introdução dinâmica de arquivos personalizados e pacotes de dependência de terceiros, suporta TS, TSX e pode ser incorporado em projetos.

Exemplos básicos

exemplo de Ahooks

Exemplo de fi-design-parts

Exemplo de ANTD

Características

• O código do React pode ser editado on-line para fornecer demonstrações interativas em tempo real
• Apoie a introdução de bibliotecas de terceiros (formato ESM)
• Carregue automaticamente o arquivo TS TIPT TERCEIRO BIBLIOTECA, fornecendo dicas de codificação amigável
• Arquivos personalizados e introduzidos dinamicamente, suportando TS/TSX/JS/JSX/CSS/JSON
• O código é salvo automaticamente no URL e compartilhe o URL para compartilhar o código
• A implantação pura do front-end, nenhuma dependência do servidor, pode ser implantada internamente com pacotes internos

Em seguida

• Libere pacotes NPM para apoiar o uso incorporado em projetos
• Forneça exemplos de cenário
• Documentos ricos e práticos
• Suporte TS, TSX
• Suporta a importação automática de dependências de terceiros nos tipos de TS
• Libere a versão 1.0
• Altere o compilador para Esbuild-wasm para melhorar a velocidade de visualização
• Tente determinar: separar pacotes de playground e sandbox

Pode haver algumas alterações na API e novos recursos antes da versão 1.0. Vou consertar e estabilizá -lo o mais rápido possível. Se você estiver interessado, pode prestar atenção.

Instalar

npm install react-exercise-playground --save
# or
pnpm install react-exercise-playground --save

Exemplo de uso

 import { Playground } from 'react-exercise-playground'

export const Demo1 = ( ) => {
  return < Playground />
}

Playground é um componente de página, que é invasivo para o ambiente do host quando usado (alguns JS e CSS serão carregados dinamicamente e o hash URL será alterado por padrão. Você pode cancelar a alteração no URL configurando saveOnUrl={false} ).

PlaygroundSandBox

PlaygroundSandbox é um componente que possui Playground de sandbox, com funções e itens de configuração completamente consistentes, e é completamente isolado do ambiente do host.

Se você for usado apenas em documentos ou projetos, é recomendável usar o componente PlaygroundSandbox .

Comando de quotação: import {PlaygroundSandbox} from 'react-exercise-playground/PlaygroundSandbox'

PlaygroundSandbox fará o download de pacotes da CDN, com um volume de apenas 10kb+ e 2kb+ após o gzip

Um pacote completo será adicionado no futuro, que pode ser usado sem ambientes de rede externos, e o volume será muito maior.

Código de exemplo:

 import { PlaygroundSandbox } from 'react-exercise-playground'
// import {PlaygroundSandbox} from 'react-exercise-playground/PlaygroundSandbox'

export const Demo2 = ( ) => {
  const files = {
    'App.tsx' : `import {title} from './const'
function App() {
  return <h1>this is {title}</h1>
}
export default App
` ,
    'const.ts' : {
      code : 'export const title = "demo2"' ,
    } ,
  }

  return (
    < >
      < h1 >作为组件使用： </ h1 >
      < PlaygroundSandbox
        showHeader = { false }
        showCompileOutput = { false }
        fileSelectorReadOnly
        width = { 700 }
        height = { 400 }
        files = { files }
        border
        theme = 'dark'
        options = { {
          lineNumbers : false ,
        } }
      />
      < div style = { { height : '60vh' } } > </ div >
      < div >滚动到可视范围内才会加载</ div >
      < PlaygroundSandbox
        showHeader = { false }
        showCompileOutput = { false }
        fileSelectorReadOnly
        width = { 700 }
        height = { 400 }
        files = { files }
        border
        theme = 'dark'
        options = { {
          lineNumbers : false ,
        } }
      />
    </ >
  )
}

Adereços

Nome	Tipo	Padrão	Descrição
largura	String 丨 Número 丨 indefinido	100VW	largura
altura	String 丨 Número 丨 indefinido	100VH	alto
tema	'Dark' '' 'Light' 丨 indefinido	'luz'	tema
Showheader	booleano 丨 indefinido	verdadeiro	Se deve exibir a cabeça
fronteira	booleano 丨 indefinido	falso	Se deve exibir fronteiras
ShowFileSelector	booleano 丨 indefinido	verdadeiro	Se deve exibir a guia Arquivo
fileSelectRoReadoNly	booleano 丨 indefinido	falso	A guia Arquivo é apenas leitura?
ShowComPileOutput	booleano 丨 indefinido	verdadeiro	Se deve exibir o código compilado
Padrão do Padrão	Número [] 丨 indefinido	[100.100]	Editor e escala de largura da área de visualização
opções	{linenumbers?: boolean; fontsize?: número; tabsize?: número} 丨 indefinido	indefinido	Configuração do editor
arquivos	Arquivo	Objeto	Código de inicialização
ImportMap	{importações: registro <string, string>}	defaultImportMap	Inicialize o ImportMap
saveonurl	booleano	verdadeiro	O código é armazenado no URL
onfileschange	(Hash: string) => void	indefinido	O retorno de chamada após a mudança do código, o parâmetro de retorno de chamada é o valor do hash do arquivo

Arquivo

 interface File {
  [ key : string ] :
    | string
    | {
    code : string
    active ?: boolean
    hidden ?: boolean
  }
}

defaultImportMap

{
  "imports" : {
    "react" : " https://esm.sh/[email protected] " ,
    "react-dom/client" : " https://esm.sh/[email protected] "
  }
}

outro

Escrevi um artigo sobre os princípios e processos de implementação deste componente. Se você estiver interessado, pode dar uma olhada no React finalmente tem um playground: um editor online que pode executar o código do React em tempo real

Atualizar log

0.1.93

• Dividir o componente PlaygroundSandBox separadamente, suporta o carregamento sob demanda
• Corrija alguns bugs no PlaygroundSandBox

0.1.5

• Versão atualizada

0.1.4

• Erro de caminho do tipo de correção

0.1.2

• Prompt de carregamento de arquivo de tipo adicionado
• Adicionado componente PlaygroundSandBox (a função é consistente com o componente original do playground, ele é renderizado apenas em um iframe e não afeta o ambiente do host. Recomenda -se usá -lo)
• Embalagem e código otimizados
• Corrija o erro de inicialização da configuração de tópico