थीम आइलैंड्स

आइलैंड्स इंटरैक्टिव React घटक हैं जो सर्वर पर प्री-रेंडर होते हैं और क्लाइंट पर हाइड्रेट होते हैं।

आइलैंड्स कैसे काम करते हैं

बिल्ड समय: थीम आइलैंड्स को सीरियलाइज़्ड प्रॉप्स के साथ HTML के रूप में रेंडर करती हैं
बंडल समय: एक अलग Vite प्रक्रिया आइलैंड कोड को @mp/islands.js में बंडल करती है
रनटाइम: क्लाइंट @mp/islands.js लोड करता है और प्रत्येक आइलैंड को उसके data-mp-island एट्रीब्यूट द्वारा हाइड्रेट करता है

export default defineTheme({
  islands: ['theme-toggle', 'search-palette', 'library-explorer'],
});

SSR के दौरान, आइलैंड्स इस प्रकार रेंडर होते हैं:

html

<div data-mp-island="theme-toggle" data-mp-props='{"initial":"light"}'>
  <button>Toggle theme</button>
</div>

आइलैंड्स रनटाइम (@mineproj/client) सभी [data-mp-island] एलिमेंट्स ढूँढता है और उन्हें हाइड्रेट करता है।

आइलैंड्स केवल उन पृष्ठों पर लोड होते हैं जो उनका उपयोग करते हैं। बिना आइलैंड्स वाले पृष्ठ आइलैंड बंडल को बिल्कुल लोड नहीं करते हैं।