playroom

---

ออกแบบในรูปแบบและขนาดหน้าจอที่หลากหลายพร้อมกันขับเคลื่อนโดย JSX และไลบรารีส่วนประกอบของคุณเอง

ห้องเด็กเล่นช่วยให้คุณสร้างสภาพแวดล้อมการออกแบบที่เน้นรหัสแบบไม่มีการติดตั้งซึ่งสร้างขึ้นในชุดมัดแบบสแตนด์อโลนที่สามารถปรับใช้ควบคู่ไปกับเอกสารระบบการออกแบบที่มีอยู่ของคุณ

• ย้ำในการออกแบบของคุณในสื่อสุดท้าย

• สร้างการจำลองอย่างรวดเร็วและต้นแบบแบบโต้ตอบด้วยรหัสจริง

• ออกกำลังกายและประเมินความยืดหยุ่นของระบบการออกแบบของคุณ

• แบ่งปันงานของคุณกับผู้อื่นโดยเพียงแค่คัดลอก URL

การสาธิต

ระบบออกแบบถักเปีย (ธีม)

คนโง่

พิกัดเกินพิกัด

Cubes (ธีม)

ระบบการออกแบบตาข่าย (ธีม)

ระบบออกแบบMística (ธีม)

polaris shopify

ระบบออกแบบการเกษตร

ส่ง PR ให้เราหากคุณต้องการอยู่ในรายการนี้!

เริ่มต้น

 $ NPM Install-ห้องเด็กเล่น Save-Dev

เพิ่มสคริปต์ต่อไปนี้ใน package.json :

 {"สคริปต์": {"ห้องเด็กเล่น: เริ่มต้น": "ห้องเด็กเล่นเริ่ม", "ห้องเด็กเล่น: สร้าง": "ห้องเด็กเล่น"
  -
-

เพิ่มไฟล์ playroom.config.js ไปยังรูทของโครงการของคุณ:

 module.exports = {
  ส่วนประกอบ: './src/components'
  OutputPath: './dist/playroom'

  // ไม่จำเป็น:
  Title: 'My Awesome Library'
  ชุดรูปแบบ: './src/themes'
  ตัวอย่าง: './playroom/snippets.js'
  framecomponent: './playroom/framecomponent.js'
  ขอบเขต: './playroom/usescope.js'
  ความกว้าง: [320, 768, 1024]
  พอร์ต: 9000
  OpenBrowser: จริง
  paramtype: 'ค้นหา', // ค่าเริ่มต้นคือ 'แฮช'
  ExampleCode: `<Button> Hello World!    </button> `
  BaseUrl: '/ห้องเด็กเล่น/'
  webpackConfig: () => ({// config webpack config ไปที่นี่ ...
  -
  iframesandbox: 'อนุญาตสคริปต์',
  defaultVisibleWidths: [// ชุดย่อยของความกว้างที่จะแสดงบนโหลดแรก
  -
  defaultVisiBleThemes: [// ชุดย่อยของธีมที่จะแสดงบนโหลดแรก
  -

หมายเหตุ: ตัวเลือก port และ openBrowser จะถูกตั้งค่าเป็น 9000 และ true (ตามลำดับ) โดยค่าเริ่มต้นเมื่อใดก็ตามที่พวกเขาถูกละเว้นจากการกำหนดค่าด้านบน

ไฟล์ components ของคุณคาดว่าจะส่งออกวัตถุเดียวหรือชุดการส่งออกที่มีชื่อ ตัวอย่างเช่น:

 ส่งออก {ค่าเริ่มต้นเป็นข้อความ} จาก '../text'; // ส่งออกใหม่การส่งออกเริ่มต้น {ปุ่ม} จาก '../button'; // ส่งออกใหม่ที่มีชื่อส่งออก // ฯลฯ ...

ตัวเลือก iframeSandbox สามารถใช้เพื่อตั้งค่าแอตทริบิวต์ sandbox บน iframe ของห้องเด็กเล่น จำเป็นต้องใช้ allow-scripts อย่างน้อยที่สุดเพื่อให้ห้องเด็กเล่นทำงานได้

ตอนนี้โครงการของคุณได้รับการกำหนดค่าแล้วคุณสามารถเริ่มต้นเซิร์ฟเวอร์การพัฒนาท้องถิ่น:

 $ npm run playroom: เริ่มต้น

เพื่อสร้างสินทรัพย์ของคุณสำหรับการผลิต:

 $ NPM Run Room: Build

ตัวอย่าง

ห้องเด็กเล่นช่วยให้คุณสามารถแทรกตัวอย่างโค้ดที่กำหนดไว้ล่วงหน้าได้อย่างรวดเร็วโดยให้ตัวอย่างสดผ่านธีมและวิวพอร์ตในขณะที่คุณนำทางรายการ ตัวอย่างเหล่านี้สามารถกำหนดค่าได้ผ่านไฟล์ snippets ที่มีลักษณะเช่นนี้:

 ค่าเริ่มต้นส่งออก [
  {Group: 'ปุ่ม', ชื่อ: 'strong', รหัส: `<button weight =" Strong "> ปุ่ม </button>`,,,
  -
  // ฯลฯ ... ];

ส่วนประกอบเฟรมที่กำหนดเอง

หากส่วนประกอบของคุณจำเป็นต้องซ้อนอยู่ภายในส่วนประกอบของผู้ให้บริการที่กำหนดเองคุณสามารถจัดเตรียมไฟล์คอมโพเนนต์ปฏิกิริยาที่กำหนดเองผ่านตัวเลือก frameComponent ซึ่งเป็นพา ธ ไปยังไฟล์ที่ส่งออกส่วนประกอบ ตัวอย่างเช่นหากไลบรารีส่วนประกอบของคุณมีหลายธีม:

 นำเข้าปฏิกิริยาจาก 'react'; นำเข้า {Themeprovider} จาก '../path/to/your/theming-system'; export ฟังก์ชั่นเริ่มต้น framecomponent ({Theme, Children}) {
  return <themeprovider theme = {Theme}> {เด็ก ๆ } </theprovider>;}

ขอบเขตที่กำหนดเอง

คุณสามารถให้ตัวแปรพิเศษภายในขอบเขตของ JSX ของคุณผ่านตัวเลือก scope ซึ่งเป็นเส้นทางไปยังไฟล์ที่ส่งออกตะขอ useScope ที่ส่งคืนวัตถุขอบเขต ตัวอย่างเช่นหากคุณต้องการเปิดเผยตัวแปร theme ตามบริบทให้กับผู้บริโภคในห้องเด็กเล่นของคุณ:

 นำเข้า {usetheme} จาก '../path/to/your/theming-system'; export ฟังก์ชั่นเริ่มต้น usescope () {
  return {Theme: usetheme (),
  -

การสนับสนุนธีม

หากไลบรารีส่วนประกอบของคุณมีหลายธีมคุณสามารถปรับแต่งห้องเด็กเล่นเพื่อแสดงชุดรูปแบบทุกชุดพร้อมกันผ่านตัวเลือกการกำหนดค่า themes

คล้ายกับไฟล์ components ของคุณไฟล์ themes ของคุณคาดว่าจะส่งออกวัตถุเดียวหรือชุดการส่งออกที่มีชื่อ ตัวอย่างเช่น:

 ส่งออก {Themea} จาก './themea'; export {Themeb} จาก' ./themeb';// etc ...

การสนับสนุน TypeScript

หากไฟล์ tsconfig.json มีอยู่ในโครงการของคุณประเภทเสาคงที่จะถูกแยกวิเคราะห์โดยใช้ React-Docgen-typescript เพื่อให้การเติมข้อความอัตโนมัติที่ดีขึ้นในตัวแก้ไขห้องเด็กเล่น

โดยค่าเริ่มต้นไฟล์ .ts และ .tsx ทั้งหมดในไดเรกทอรีการทำงานปัจจุบันจะรวมอยู่โดยไม่รวม node_modules

หากคุณต้องการปรับแต่งพฤติกรรมนี้คุณสามารถให้ตัวเลือก typeScriptFiles ใน playroom.config.js ซึ่งเป็นอาร์เรย์ของ Globs

 module.exports = {
  -
  TypeScriptFiles: ['src/ส่วนประกอบ/**/*. {ts, tsx}', '! **/node_modules'],};

หากคุณต้องการปรับแต่งตัวเลือกตัวแยกวิเคราะห์คุณสามารถให้ตัวเลือก reactDocgenTypescriptConfig ใน playroom.config.js

ตัวอย่างเช่น:

 module.exports = {
  -
  reactDocGentypescriptConfig: {propfilter: (prop, component) => {// ... },
  -

การสนับสนุน ESM

ห้องเด็กเล่นรองรับการโหลดไฟล์การกำหนดค่า ESM โดยค่าเริ่มต้นห้องเด็กเล่นจะมองหาไฟล์กำหนดค่าห้องเด็กเล่นที่มีส่วนขยายไฟล์ .js , .mjs หรือ .cjs

การรวมหนังสือนิทาน

หากคุณสนใจที่จะรวมห้องเด็กเล่นเข้ากับหนังสือนิทานลองดูนิทาน Addon-Playroom

การสนับสนุนเบราว์เซอร์

ห้องเด็กเล่นถูกสร้างขึ้นเพื่อทำงานกับเบราว์เซอร์รายใหญ่รุ่นล่าสุดที่มั่นคง คุณสมบัติบางอย่างอาจไม่ทำงานตามที่คาดไว้ในเบราว์เซอร์รุ่นเก่า

ใบอนุญาต

MIT