استراتيجية حقن الأنماط في كل طرف

استراتيجية حقن الأنماط في كل طرف

يوفّر share محتوى الأنماط فقط (مصدر SCSS + الرموز)، أما طريقة الحقن فتختارها كل مكتبة واجهة لنفسها. تختلف استراتيجية الطرفين، وهذا قرار تصميمي لا عيب. ولا يُسمح لأي طرف بإمساك نسخة محلية من scss المكوّن لذلك السبب (الخط الأحمر 2).

مقارنة الطرفين

	lh-ui-plus (Vue3)	lh-ui-vue2
الحقن عند مدخل المكتبة	أثر جانبي كامل: يستورد src/index.ts لكل مكوّن import '@lh-ui/share/styles/<name>'، فيحصل المستخدم على كل الأنماط بمجرد استيراد المكتبة	لا يحقن شيئًا؛ يستورد المستخدم عند الطلب @lh-ui/vue2/theme.css + @lh-ui/vue2/style/<name>
مخرجات الأنماط	es|lib/<name>/style/index.css + es/<name>/style/index.scss (يُوزَّع مصدر scss مع المخرجات، وتُعاد كتابة @use إلى bare specifier)	es|lib/components/<name>/style/index.css (css فقط)
مخرجات السمة	theme/index.css + dist/index.css (السمة + الكل)	dist/theme/index.css (فاتح) + dist/theme/index-dark.css (داكن)
المسارات الفرعية عند الطلب	./style/* → es/*/style/index.scss؛ ./style-css/* → es/*/style/index.css	./style/* → es/components/*/style/index.css؛ ./theme.css و ./theme-dark.css
سكريبتات البناء	lh-ui-plus/scripts/build-styles.mjs (يفحص قائمة المكوّنات وفق packages/components)	lh-ui-vue2/scripts/build-styles.mjs (يفحص وفق src/components، ويتخطى تلقائيًا المكوّنات التي لا تملك مصدر أنماط في share)

لماذا يختلف الطرفان

• طرف Vue3 يستهدف الأغلبية التي تريد «استيراد المكتبة والاستخدام مباشرة»: بيئة vite صديقة لحقن الأنماط كأثر جانبي، ويوفّر الحقن الكامل على المستخدم تكلفة التهيئة عند الطلب؛ كما أن tree-shaking لا فائدة منه مع الأنماط أصلًا، فيكون الكامل أبسط.
• طرف Vue2 يستهدف المشاريع القديمة والحالات الحساسة للحجم: كان من السهل إعداد حقن الآثار الجانبية بشكل خاطئ في عصر webpack 4، بينما طريقة الاستيراد عند الطلب (استيرادان) أكثر تحكمًا، وتتيح للمستخدم استيراد الفاتح فقط أو الداكن فقط.

التغطية عند إضافة مكوّن جديد

عند إضافة مكوّن جديد تغطّيه سكريبتات البناء في الطرفين تلقائيًا (كلٌّ منهما يفحص دليل مكوّناتها)، لكن يجب أن يوجد <name>/index.scss مقابل في styles/ داخل share — وإلا فلن يكون لذلك المكوّن مخرجات أنماط في أحد الطرفين (تخطٍّ صامت دون خطأ). وهذا مباشرةً نتيجة الخط الأحمر «المصدر الوحيد للأنماط»: أنشئ النمط في share أولًا، ثم أنشئ المكوّن في كل طرف.

أسماء أصناف الانتقال عبر الأطراف: ثلاثة mixin تستوعبها

أسماء أصناف الانتقال في Vue2 هي -enter / -leave، وفي Vue3 / React هي -enter-from / -leave-from (أما -leave-to فاسمان متطابقان في الطرفين). ولا بد من كتابة نسختين يدويًا فينحرفان حتمًا، لذا يُستخدم @include دائمًا:

@use '@lh-ui/share/styles/theme/common/transition' as *;

.lh-dialog-fade {
  @include lh-enter-both;          // -enter + -enter-from (Vue3)
  @include lh-leave-both;          // -leave + -leave-from
  @include lh-transition-ends;     // -enter-to + -leave-to (اسمان متطابقان في الطرفين)
}

عند الحاجة إلى تعليق الحالة على عقدة سليل، مرِّر المعامل الثاني:

@include lh-transition-ends('.lh-drawer-fade', '.lh-drawer__panel--right');

يُمنع إعادة كتابة نسختي أسماء أصناف الانتقال يدويًا في أنماط المكوّن.

قيود حقن مخرجات تخصيص السمة

يُنتج buildPresetStyleText(vars) نص <style> قابلًا للحقن (كتلة :root + كتلة داكنة). وعند تبنّي طبقة واجهة المستخدم لها يجب كتابة عنصر <style> فقط، لا كتابة style مضمَّن (inline) على documentElement:

تخصص style المضمَّن أعلى من خصائص var-dark.scss الكاملة للوضع الداكن، ما يؤدي إلى تشوّش ألوان الوضع الداكن.

انظر تخصيص السمة.