📪 🐈 ♟️ Kotlin पर एक और डीएसएल या मैंने प्रतिक्रिया से पीडीएफ कैसे प्रिंट किया 🧐 🎏 🐡

आप प्रतिक्रिया में लिखे गए पृष्ठ को केवल ले और प्रिंट नहीं कर सकते हैं: पृष्ठ विभाजक, इनपुट फ़ील्ड हैं। इसके अलावा, मैं एक बार एक रेंडर लिखना चाहता हूं ताकि यह रिएक्टडॉम और नियमित एचटीएमएल दोनों उत्पन्न करे, जिसे पीडीएफ में बदला जा सके।

सबसे मुश्किल हिस्सा यह है कि रिएक्ट का अपना डीएसएल है, और html का अपना है। इस समस्या को कैसे हल करें? एक और लिखो!

मैं लगभग भूल गया, यह सब कोटलिन में लिखा जाएगा, इसलिए यह वास्तव में कोटलिन डीएसएल के बारे में एक लेख है।

हमें अपने खुद के उरुक-है की आवश्यकता क्यों है?

मेरी परियोजना में बहुत सारी रिपोर्टें हैं और उन सभी को मुद्रित करने में सक्षम होना चाहिए। ऐसा करने के लिए कई विकल्प हैं:

प्रिंट शैलियों के साथ खेलें, वह सब कुछ छिपाएं जिसकी आपको आवश्यकता नहीं है और आशा है कि सबकुछ ठीक हो जाएगा। केवल बटन, फ़िल्टर और जैसी है मुद्रित की जाएगी। और यह भी, अगर बहुत सारे टेबल हैं, तो यह आवश्यक है कि प्रत्येक अलग पृष्ठ पर हो। और व्यक्तिगत रूप से, जोड़ा लिंक, दिनांक, आदि जो साइट से प्रिंट करते समय निकलते हैं, मुझे क्रोधित कर रहे हैं
प्रतिक्रिया पर कुछ विशेष पुस्तकालय का उपयोग करने का प्रयास करें, जो पीडीएफ को प्रस्तुत कर सकता है। मुझे यह एक मिला, यह बीटा और इसमें, ऐसा लगता है, आप सामान्य प्रतिक्रिया घटकों का पुन: उपयोग नहीं कर सकते।
एचटीएमएल को कैनवस में बदल दें और पीडीएफ को इससे बाहर कर दें। लेकिन इसके लिए हमें HTML की आवश्यकता होती है, बिना बटन और पसंद के। बाद में इसे मुद्रित करने के लिए इसे एक छिपे हुए तत्व में प्रस्तुत करना होगा। लेकिन ऐसा नहीं लगता है कि इस विकल्प में आप पृष्ठ विराम को नियंत्रित कर सकते हैं।

अंत में, मैंने ReactDom और HTML दोनों को जेनरेट करने में सक्षम कोड लिखने का फैसला किया। मैं पृष्ठ के बारे में विशेष टैग डालकर पीडीएफ को प्रिंट करने के लिए बैकएंड पर HTML भेज सकता हूं।

कोटलिन के पास रिएक्ट के साथ काम करने के लिए एक लेयर लाइब्रेरी है जो रिएक्ट के साथ काम करने के लिए टाइप-सेफ डीएसएल प्रदान करती है। यह सामान्य रूप से कैसा दिखता है यह मेरे पिछले लेख में पाया जा सकता है।

JetBrains ने HTML जेनरेट करने के लिए एक लाइब्रेरी भी लिखी है। यह क्रॉस-प्लेटफॉर्म है, अर्थात यह जावा और जेएस दोनों में इस्तेमाल किया जा सकता है। यह भी dsl है, संरचना में बहुत समान है।

हमें पुस्तकालयों के बीच स्विच करने का एक तरीका खोजने की जरूरत है, इस पर निर्भर करते हुए कि हमें ReactDom या शुद्ध HTML की आवश्यकता है।

हमारे पास क्या सामग्री है?

उदाहरण के लिए, शीर्ष लेख में खोज बॉक्स के साथ एक तालिका लें। इस तरह से रिएक्ट और HTML पर तालिका का प्रतिपादन इस प्रकार है:

प्रतिक्रिया एचटीएमएल

प्रतिक्रिया	एचटीएमएल
`fun RBuilder.renderReactTable( search: String, onChangeSearch: (String) -> Unit ) { table { thead { tr { th { attrs.colSpan = "2" //(1) attrs.style = js { border = "solid" borderColor = "red" } //(2) +":" search(search, onChangeSearch) //(3) } } tr { th { +"" } th { +"" } } } tbody { tr { td { +"" } td { +"" } } tr { td { +"" } td { +"" } } } } }`	`fun TagConsumer<*>.renderHtmlTable( search: String ) { table { thead { tr { th { colSpan = "2" //(1) style = """ border: solid; border-color: red; """ //(2) +": " +(search?:"") //(3) } } tr { th { +"" } th { +"" } } } tbody { tr { td { +"" } td { +"" } } tr { td { +"" } td { +"" } } } } }`

fun RBuilder.renderReactTable( search: String, onChangeSearch: (String) -> Unit ) { table { thead { tr { th { attrs.colSpan = "2" //(1) attrs.style = js { border = "solid" borderColor = "red" } //(2) +":" search(search, onChangeSearch) //(3) } } tr { th { +"" } th { +"" } } } tbody { tr { td { +"" } td { +"" } } tr { td { +"" } td { +"" } } } } }

 fun TagConsumer<*>.renderHtmlTable( search: String ) { table { thead { tr { th { colSpan = "2" //(1) style = """ border: solid; border-color: red; """ //(2) +": " +(search?:"") //(3) } } tr { th { +"" } th { +"" } } } tbody { tr { td { +"" } td { +"" } } tr { td { +"" } td { +"" } } } } }

हमारा कार्य तालिका के बाएँ और दाएँ पक्ष को संयोजित करना है।

सबसे पहले, आइए जानें कि अंतर क्या है:

Html में, style और colSpan शीर्ष स्तर पर, रिएक्ट में, colSpan नेस्टेड ऑब्जेक्ट पर दिया जाता है
शैली अलग तरह से भरती है। यदि HTML में यह एक स्ट्रिंग के रूप में नियमित सीएसएस है, तो प्रतिक्रिया में यह एक जेएस ऑब्जेक्ट है, जिसका फ़ील्ड नाम जेएस सीमाओं के कारण मानक सीएसएस से थोड़ा अलग है।
प्रतिक्रिया संस्करण में, हम खोज के लिए इनपुट का उपयोग करते हैं, HTML में हम केवल पाठ प्रदर्शित करते हैं। यह पहले से ही समस्या के बयान से शुरू हो रहा है।

अच्छी तरह से और सबसे महत्वपूर्ण: ये अलग-अलग उपभोक्ताओं और अलग-अलग एपीआई के साथ अलग-अलग डीएसएल हैं। संकलक के लिए, वे पूरी तरह से अलग हैं। उन्हें सीधे पार करना असंभव है, इसलिए आपको एक ऐसी परत लिखनी होगी, जो लगभग एक जैसी लगे, लेकिन रिएक्ट एपीआई और एचटीएमएल एपी दोनों के साथ काम कर सकते हैं।

कंकाल को इकट्ठा करो

अभी के लिए, केवल एक खाली सेल से एक टैबलेट बनाएं:

 table { thead { tr { th { } } } }

हमारे पास एक HTML ट्री है और इसे प्रोसेस करने के दो तरीके हैं। क्लासिक समाधान समग्र और आगंतुक पैटर्न को लागू करना है। केवल हम आगंतुक के लिए एक इंटरफ़ेस नहीं होगा। क्यों - यह बाद में देखा जाएगा।

मुख्य इकाइयाँ ParentTag और TagWithParent होंगी। पेरेंटटैग को कोटलिन आपी से HTML टैग द्वारा जेनरेट किया जाता है (शुक्र है कि यह HTML और रिएक्ट एपीआई दोनों में उपयोग किया जाता है), और टैगविथपेंट खुद टैग को और दो फंक्शन्स को स्टोर करता है जो इसे दो वाई वेरिएंट में पेरेंट में डालते हैं।

 abstract class ParentTag<T : HTMLTag> { val tags: MutableList<TagWithParent<*, T>> = mutableListOf() //     protected fun RDOMBuilder<T>.withChildren() { ... } //  reactAppender    protected fun T.withChildren() { ... } //  htmlAppender    } class TagWithParent<T, P : HTMLTag>( val tag: T, val htmlAppender: (T, P) -> Unit, val reactAppender: (T, RDOMBuilder<P>) -> Unit )

आपको इतने सारे जेनरिक की आवश्यकता क्यों है? समस्या यह है कि संकलन करते समय HTML के लिए dsl बहुत सख्त है। यदि React में आप कहीं से भी, यहां तक कि एक div से td कॉल कर सकते हैं, तो HTML के मामले में आप इसे केवल tr के संदर्भ से कॉल कर सकते हैं। इसलिए, हमें हर जगह जेनेरिक के रूप में संकलन के लिए संदर्भ को खींचना होगा।

अधिकांश टैगों को लगभग उसी तरह लिखा जाता है:

हम दो विज़िट विधियों को लागू करते हैं। एक प्रतिक्रिया के लिए, एक HTML के लिए। वे अंतिम प्रतिपादन के लिए जिम्मेदार हैं। ये विधियाँ शैलियों, वर्गों और इस तरह जोड़ते हैं।
हम एक एक्सटेंशन लिखते हैं जो पैरेंट में टैग सम्मिलित करता है।

यहाँ थ्रेड का एक उदाहरण दिया गया है

 class THead : ParentTag<THEAD>() { fun visit(builder: RDOMBuilder<TABLE>) { builder.thead { withChildren() } } fun visit(builder: TABLE) { builder.thead { withChildren() } } } fun Table.thead(block: THead.() -> Unit) { tags += TagWithParent(THead().also(block), THead::visit, THead::visit) }

अंत में, आप बता सकते हैं कि विज़िटर के लिए इंटरफ़ेस का उपयोग क्यों नहीं किया गया था। समस्या यह है कि tr को thead और tbody दोनों में डाला जा सकता है। मैं इसे एक इंटरफ़ेस के ढांचे के भीतर व्यक्त नहीं कर सका। यात्रा समारोह के चार अधिभार सामने आए।

नकल का एक गुच्छा जिसे टाला नहीं जा सकता

 class Tr( val classes: String? ) : ParentTag<TR>() { fun visit(builder: RDOMBuilder<THEAD>) { builder.tr(classes) { withChildren() } } fun visit(builder: THEAD) { builder.tr(classes) { withChildren() } } fun visit(builder: RDOMBuilder<TBODY>) { builder.tr(classes) { withChildren() } } fun visit(builder: TBODY) { builder.tr(classes) { withChildren() } } }

मांस का निर्माण

सेल में टेक्स्ट जोड़ें:

  table { thead { tr { th { +": " } } } }

'+' के साथ ध्यान केंद्रित करना काफी सरल है: टैग में unaryPlus को फिर से परिभाषित करना, जिसमें पाठ शामिल हो सकता है, पर्याप्त है।

 abstract class TableCell<T : HTMLTag> : ParentTag<T>() { operator fun String.unaryPlus() { ... } }

यह आपको td या th के संदर्भ में '+' कॉल करने की अनुमति देता है, जो पेड़ पर पाठ के साथ एक टैग जोड़ देगा।

त्वचा को निखारें

अब हमें उन स्थानों से निपटने की आवश्यकता है जो HTML में भिन्न हैं और एपीआई पर प्रतिक्रिया करते हैं। कोलस्पैन के साथ एक छोटा सा अंतर स्वयं हल हो जाता है, लेकिन शैली के गठन में अंतर अधिक जटिल है। अगर किसी को पता नहीं है, तो प्रतिक्रिया में, शैली एक जेएस ऑब्जेक्ट है, और आप फ़ील्ड नाम में एक हाइफ़न का उपयोग नहीं कर सकते। इसलिए इसके बजाय ऊंट का उपयोग किया जाता है। HTML एपीआई में हम हमसे नियमित सीएसएस चाहते हैं। हमें इस समय और उस समय दोनों की आवश्यकता है।

मैं स्वचालित रूप से ऊँचा उठाने के लिए इसे लाने के लिए प्रयास कर सकता हूं और इसे रिएक्ट एपी में छोड़ सकता हूं, लेकिन मुझे नहीं पता कि यह हमेशा काम करेगा या नहीं। इसलिए, मैंने एक और परत लिखी:

जो आलसी नहीं है, वह देख सकता है कि वह कैसा दिखता है

 class Style { var border: String? = null var borderColor: String? = null var width: String? = null var padding: String? = null var background: String? = null operator fun invoke(callback: Style.() -> Unit) { callback() } fun toHtmlStyle(): String = properties .map { it.html to it.property(this) } .filter { (_, value) -> value != null } .joinToString("; ") { (name, value) -> "$name: $value" } fun toReactStyle(): String { val result = js("{}") properties .map { it.react to it.property(this) } .filter { (_, value) -> value != null } .forEach { (name, value) -> result[name] = value.toString() } return result.unsafeCast<String>() } class StyleProperty( val html: String, val react: String, val property: Style.() -> Any? ) companion object { val properties = listOf( StyleProperty("border", "border") { border }, StyleProperty("border-color", "borderColor") { borderColor }, StyleProperty("width", "width") { width }, StyleProperty("padding", "padding") { padding }, StyleProperty("background", "background") { background } ) } }

हां, मुझे पता है कि क्या आप एक और सीएसएस संपत्ति चाहते हैं - इस वर्ग में जोड़ें। हां, और एक कनवर्टर के साथ एक नक्शा लागू करना आसान होगा। लेकिन टाइप-सेफ। मैं भी स्थानों में enums का उपयोग करें। शायद, अगर मैंने अपने लिए नहीं लिखा, तो मैं किसी तरह सवाल को अलग तरीके से हल करूँगा।

मैंने थोड़ा धोखा दिया और परिणामी वर्ग के इस उपयोग की अनुमति दी:

 th { attrs.style { border = "solid" borderColor = "red" } }

यह कैसे जाता है: attr.style क्षेत्र में, डिफ़ॉल्ट रूप से, पहले से ही एक खाली शैली () है। यदि आप ऑपरेटर मज़ेदार आह्वान को परिभाषित करते हैं, तो ऑब्जेक्ट को फ़ंक्शन के रूप में उपयोग किया जा सकता है, अर्थात। आप attrs.style() को कॉल कर सकते हैं, हालांकि स्टाइल एक फ़ील्ड है, फ़ंक्शन नहीं। इस तरह के एक कॉल में, ऑपरेटर मज़ेदार आह्वान में निर्दिष्ट मापदंडों को पारित किया जाना चाहिए। इस मामले में, यह एक पैरामीटर है - कॉलबैक: स्टाइल। () -> यूनिट। चूंकि यह लंबोदर है, तो (कोष्ठक) वैकल्पिक हैं।

विभिन्न कवच पर कोशिश कर रहा है

यह सीखने के लिए रहता है कि कैसे रिएक्ट में इनपुट आकर्षित करें, और HTML में सिर्फ टेक्स्ट। मैं इस वाक्यविन्यास को प्राप्त करना चाहूंगा:

 react { search(search, onChangeSearch) } html { +(search?:"") }

यह कैसे काम करता है: प्रतिक्रिया समारोह Rreact एपीआई के लिए एक लंबो लेता है और सम्मिलित टैग को वापस करता है। टैग पर, आप इनफ़िक्स फ़ंक्शन को कॉल कर सकते हैं और एचटीएमएल एपीआई को लैम्ब्डा पास कर सकते हैं। Infix modifier html को बिना डॉट के कॉल करने की अनुमति देता है। अगर {} और {} के समान है। और जैसा कि अगर-और में, html कॉल वैकल्पिक है, यह कई बार काम में आया।

कार्यान्वयन

 class ReactTag<T : HTMLTag>( private val block: RBuilder.() -> Unit = {} ) { private var htmlAppender: (T) -> Unit = {} infix fun html(block: (T).() -> Unit) { htmlAppender = block } ... } fun <T : HTMLTag> ParentTag<T>.react(block: RBuilder.() -> Unit): ReactTag<T> { val reactTag = ReactTag<T>(block) tags += TagWithParent<ReactTag<T>, T>(reactTag, ReactTag<T>::visit, ReactTag<T>::visit) return reactTag }

सरुमन मार्क

एक और स्पर्श। पेरेंटटैग और टैगविथपैरेन्ट को एक विशेष रूप से घाव एनोटेशन के साथ विशेष रूप से घाव एनोटेशन के साथ विरासत में प्राप्त करना आवश्यक है, जिस पर एक विशेष एनोटेशन @ डीएसएलमार्कर खड़ा है, जो पहले से ही भाषा के मूल से है:

 @DslMarker annotation class StyledTableMarker @StyledTableMarker interface Tag

यह आवश्यक है ताकि कंपाइलर इन जैसे अजीब कॉल लिखने की अनुमति न दे:

 td { td { } } tr { thead { } }

हालांकि, यह स्पष्ट नहीं है कि कौन ऐसी बात लिखने के बारे में सोचेगा ...

लड़ाई के लिए!

हमारे लिए लेख की शुरुआत से एक तालिका बनाने के लिए सब कुछ तैयार है, लेकिन यह कोड पहले से ही ReactDom और HTML दोनों उत्पन्न करेगा। एक बार लिखो कहीं भी!

 fun Table.renderUniversalTable(search: String?, onChangeSearch: (String?) -> Unit) { thead { tr { th { attrs.colSpan = 2 attrs.style { border = "solid" borderColor = "red" } +":" react { search(search, onChangeSearch) //(*) } html { +(search?:"") } } } tr { th { +"" } th { +"" } } } tbody { tr { td { +"" } td { +"" } } tr { td { +"" } td { +"" } } } }

(*) पर ध्यान दें - यह ठीक वैसा ही खोज कार्य है जैसा कि रिएक्ट के लिए तालिका के मूल संस्करण में है। नए डीएसएल में केवल आम टैग के लिए सब कुछ स्थानांतरित करने की आवश्यकता नहीं है।

ऐसे कोड काम का परिणाम क्या हो सकता है? यहाँ मेरी परियोजना से एक रिपोर्ट के पीडीएफ प्रिंटआउट का एक उदाहरण है । स्वाभाविक रूप से, मैंने सभी संख्याओं और नामों को यादृच्छिक के साथ बदल दिया। तुलना के लिए, उसी पृष्ठ का एक पीडीएफ प्रिंटआउट , लेकिन ब्राउज़र द्वारा। ओवरलेइंग टेक्स्ट में पृष्ठों के बीच एक टेबल को तोड़ने की कलाकृतियां।

डीएसएल लिखते समय, आपको उपयोग के रूप पर पूरी तरह से केंद्रित अतिरिक्त कोड मिलता है। इसके अलावा, बहुत सारे कोटलिन सुविधाओं का उपयोग किया जाता है, जिन्हें आप रोजमर्रा की जिंदगी में भी नहीं सोचते हैं।

शायद अन्य मामलों में यह अलग होगा, लेकिन इस मामले में बहुत अधिक दोहराव भी था, जिससे मैं छुटकारा नहीं पा सकता था (जहाँ तक मुझे पता है, JetBarins HTML लाइब्रेरी लिखने के लिए कोड पीढ़ी का उपयोग करता है)।

लेकिन यह मुझे प्रतिक्रिया और एचटीएमएल एपि (मैं लगभग नहीं झांकता) के रूप में लगभग समान डीएसएल बनाने के लिए निकला। दिलचस्प है, डीएसएल की सुविधा के साथ, हमारे पास रेंडरिंग पर पूरा नियंत्रण है। आप पृष्ठों को अलग करने के लिए एक पृष्ठ टैग जोड़ सकते हैं। छपाई करते समय आप " समझौते " का विस्तार कर सकते हैं। और आप सर्वर पर इस कोड का पुन: उपयोग करने और खोज इंजन के लिए पहले से ही HTML उत्पन्न करने का एक तरीका खोजने का प्रयास कर सकते हैं।

PS निश्चित रूप से, पीडीएफ को आसान तरीके से प्रिंट करने के तरीके हैं

लेख के लिए स्रोत के साथ शलजम

कोटलिन के बारे में अन्य लेख:

कोटलिन से आफ्टरस्ट, भाग 1
कोटलिन के बाद का भाग, 2
कोटलिन के बाद का भाग, 3. कोरटाइन - शेयर प्रोसेसर समय
कोटलिन + रिएक्ट बनाम जवासट्रिप + रिएक्ट

Kotlin पर एक और डीएसएल या मैंने प्रतिक्रिया से पीडीएफ कैसे प्रिंट किया