react playground

react-exercise-playground

Ini adalah editor kode reaksi online yang dapat menjalankan kode React secara real time, mendukung pengenalan dinamis file khusus dan paket ketergantungan pihak ketiga, mendukung TS, TSX, dan dapat tertanam dalam proyek.

Contoh dasar

Contoh Ahooks

Contoh Ant-Design-Charts

Contoh Antd

Fitur

• Kode bereaksi dapat diedit secara online untuk memberikan demonstrasi interaktif waktu nyata
• Dukung Pengenalan Perpustakaan Pihak Ketiga (Format ESM)
• Secara otomatis memuat file tipe TS Library ketiga, memberikan kiat penyandian yang ramah
• File khusus dan diperkenalkan secara dinamis, mendukung TS/TSX/JS/JSX/CSS/JSON
• Kode secara otomatis disimpan ke URL, dan membagikan URL untuk membagikan kode
• Penyebaran front-end murni, tidak ada ketergantungan server, dapat digunakan secara internal dengan paket internal

Di sebelah todo

• Lepaskan paket NPM untuk mendukung penggunaan tertanam dalam proyek
• Berikan contoh skenario
• Dokumen yang kaya dan praktis
• Dukung TS, TSX
• Mendukung impor otomatis dependensi pihak ketiga pada tipe TS
• Rilis versi 1.0
• Ubah kompiler ke Esbuild-Wasm untuk meningkatkan kecepatan pratinjau
• Cobalah untuk menentukan: Paket taman bermain dan kotak pasir terpisah

Mungkin ada beberapa perubahan API dan fitur baru sebelum versi 1.0. Saya akan memperbaiki dan menstabilkannya sesegera mungkin. Jika Anda tertarik, Anda dapat memperhatikan.

Memasang

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

Contoh penggunaan

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

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

Playground adalah komponen halaman, yang invasif ke lingkungan host saat digunakan (beberapa JS dan CSS akan dimuat secara dinamis dan hash URL akan diubah secara default. Anda dapat membatalkan perubahan ke URL dengan mengkonfigurasi properti saveOnUrl={false} ).

Playgroundsandbox

PlaygroundSandbox adalah komponen yang memiliki Playground kotak pasir, dengan fungsi dan item konfigurasi yang sepenuhnya konsisten, dan sepenuhnya terisolasi dari lingkungan host.

Jika Anda hanya digunakan dalam dokumen atau proyek, disarankan untuk menggunakan komponen PlaygroundSandbox .

Perintah Kutipan: import {PlaygroundSandbox} from 'react-exercise-playground/PlaygroundSandbox'

PlaygroundSandbox akan mengunduh paket dari CDN, dengan volume hanya 10kb+, dan 2kb+ setelah GZIP

Paket lengkap akan ditambahkan di masa mendatang, yang dapat digunakan tanpa lingkungan jaringan eksternal, dan volumenya akan jauh lebih besar.

Kode contoh:

 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 ,
        } }
      />
    </ >
  )
}

Alat peraga

Nama	Jenis	Bawaan	Keterangan
lebar	String 丨 Nomor 丨 Tidak ditentukan	100VW	lebar
tinggi	String 丨 Nomor 丨 Tidak ditentukan	100VH	tinggi
tema	'Gelap' 丨 'terang' 丨 tidak ditentukan	'lampu'	tema
Showheader	Boolean 丨 tidak ditentukan	BENAR	Apakah akan menampilkan kepala
berbatasan	Boolean 丨 tidak ditentukan	PALSU	Apakah akan menampilkan perbatasan
ShowFileselector	Boolean 丨 tidak ditentukan	BENAR	Apakah akan menampilkan tab file
FileSelectorreadonly	Boolean 丨 tidak ditentukan	PALSU	Apakah tab file hanya dibaca?
ShowCompileOutput	Boolean 丨 tidak ditentukan	BENAR	Apakah akan menampilkan kode yang dikompilasi
Defaultsizes	Nomor [] 丨 Tidak ditentukan	[100.100]	Skala Lebar Area Editor dan Pratinjau
opsi	{linenumbers?: boolean; fontsize ?: number; tabsize ?: number} 丨 tidak ditentukan	belum diartikan	Konfigurasi Editor
file	Mengajukan	Obyek	Kode Inisialisasi
Importmap	{Impor: Rekam <String, String>}	DefaultImportMap	Inisialisasi ImportMap
saveonurl	Boolean	BENAR	Adalah kode yang disimpan di URL
OnFileschange	(hash: string) => void	belum diartikan	Callback setelah kode diubah, parameter callback adalah nilai hash file

Mengajukan

 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] "
  }
}

lainnya

Saya menulis artikel tentang prinsip dan proses implementasi komponen ini. Jika Anda tertarik, Anda dapat melihat React akhirnya memiliki taman bermain: editor online yang dapat menjalankan kode React secara real time

Perbarui log

0.1.93

• Komponen PlaygroundSandbox secara terpisah, dukungan pemuatan sesuai permintaan
• Perbaiki beberapa bug di playgroundsandbox

0.1.5

• Versi yang diperbarui

0.1.4

• Perbaiki kesalahan jalur jenis

0.1.2

• Tambah Tipe Tipe Prompt Loading File
• Komponen PlaygroundSandbox yang ditambahkan (fungsinya konsisten dengan komponen bermain asli, itu hanya diterjemahkan dalam iframe dan tidak mempengaruhi lingkungan host. Dianjurkan untuk menggunakannya)
• Kemasan dan kode yang dioptimalkan
• Perbaiki kesalahan inisialisasi konfigurasi topik