teleport code generators

نحن لسنا بعيدين عن الإصدار الرسمي الأول لمولدات الأكواد، ولكن في الوقت نفسه، ضع في اعتبارك أن بعض أجزاء النظام البيئي تجريبية.

؟ ما هذا؟

teleportHQ عبارة عن منصة منخفضة التعليمات البرمجية تمكن الفرق من إنشاء التطبيقات عبر واجهة أداة تصميم مألوفة في الوقت الفعلي.

يحتوي هذا المستودع على مولدات الأكواد التي تعمل على تشغيل المحرر المرئي للنظام الأساسي.

النقل الفضائي-home.mp4

الرابط بين النظام الأساسي ومولدات الأكواد هو معيار UIDL . يحدد UIDL واجهات المستخدم بطريقة مجردة ، مستقلة عن أي إطار عمل أو حتى منصة الويب نفسها. بدءًا من UIDL، يمكنك تحويل هذا التجريد إلى أنواع مختلفة من البرمجة (مثل React وVue وWebComponents وما إلى ذلك).

تعد مولدات الأكواد هذه جزءًا من نظام بيئي أكبر، والذي نقوم ببنائه بنشاط في محاولة لتبسيط عملية إنشاء تطبيقات الويب. يمكنك قراءة المزيد عن بدايتنا في هذه المقالة.

الفلسفة وراء مولدات الكود هي:

• تنقسم واجهات المستخدم إلى مكونات ، ومن هنا يتم التركيز على إنشاء المكونات
• ما يمكن إنشاؤه باستخدام React ، يمكن أيضًا إنشاؤه باستخدام Vue أو أعلى معيار Web Components - نحن ندعم أهدافًا متعددة
• يجب أن يتمتع المشروع الذي تم إنشاؤه باستخدام المحرر المرئي بمستوى عالٍ من الجودة (بما في ذلك الأداء والأمان وإمكانية الوصول)
• يجب أن تكون جودة التعليمات البرمجية التي تم إنشاؤها عالية قدر الإمكان، حتى يتمكن أي مطور من متابعة العمل من الآن فصاعدًا وتحسين المشروع
• إن بنية إنشاء التعليمات البرمجية مفتوحة وقابلة للتوسيع، ونحن ندعو الجميع للمساهمة!

اقرأ المزيد عن معيار UIDL.

الإعداد السريع

أسهل طريقة للانتقال إلى نظام النقل الآني هي تجربة أحد مولدات المكونات التي تم تكوينها مسبقًا:

npm install @teleporthq/teleport-component-generator-react
npm install @teleporthq/teleport-component-generator-vue
npm install @teleporthq/teleport-component-generator-angular

أو باستخدام الغزل:

yarn add @teleporthq/teleport-component-generator-react
yarn add @teleporthq/teleport-component-generator-vue
yarn add @teleporthq/teleport-component-generator-angular

لإنشاء مكون بسيط، عليك أن تبدأ من مكون UIDL :

{
  "name" : " My First Component " ,
  "node" : {
    "type" : " element " ,
    "content" : {
      "elementType" : " text " ,
      "children" : [
        {
          "type" : " static " ,
          "content" : " Hello World! "
        }
      ]
    }
  }
}

يعد استخدام مولدات المكونات المكونة مسبقًا أمرًا سهلاً مثل استدعاء وظيفة غير متزامنة :

 import ReactGenerator from '@teleporthq/teleport-component-generator-react'

const uidl = { ... } // your sample here

const { files } = await ReactGenerator . generateComponent ( uidl )
console . log ( files [ 0 ] . content )

سيكون إخراج وحدة التحكم شيئًا مثل:

 import React from 'react'

const MyFirstComponent = ( props ) => {
  return < span > Hello World! < / span >
}

export default MyFirstComponent

بالنسبة للأطر الأخرى، ما عليك سوى تبديل الحزمة:

 import VueGenerator from '@teleporthq/teleport-component-generator-vue'

const uidl = { ... } // your sample here

const { files } = await VueGenerator . generateComponent ( uidl )
console . log ( files [ 0 ] . content )

سيكون إخراج وحدة التحكم شيئًا مثل:

< template >
  < span >Hello World!</ span >
</ template >

< script >
export default {
  name : ' MyFirstComponent ' ,
}
</ script >

يمكنك اللعب ببنية UIDL وكذلك ملاحظة الكود الذي تم إنشاؤه في REPL عبر الإنترنت. أثناء وجودك هناك، يمكنك أيضًا التحقق من أمثلة مختلفة للمكونات المكتوبة بتنسيق UIDL.

؟ النظام البيئي

يتكون النظام البيئي للنقل الآني من ثلاث فئات رئيسية من الحزم: مولدات المكونات ، ومولدات المشروع ، وحزم المشروع .

مولدات المكونات

لدينا مولدات مكونات رسمية لعدد من أطر عمل الواجهة الأمامية للويب الشهيرة. تحقق من المستندات الرسمية للحصول على فهم متعمق للبنية وراء مولدات المكونات.

تعرض جميع مولدات المكونات مثيلًا لحزمة teleport-component-generator . يمكنك أيضًا تثبيت هذه الحزمة وإنشاء المولد الخاص بك باستخدام المكونات الإضافية والتعيينات والمعالجات اللاحقة.

ستجد في المستندات دليلاً كاملاً حول كيفية إنشاء منشئ المكونات المخصصة لديك.

النكهات

• teleport-component-generator-react - مع التصميم: css-modules ، styled-components ، و styled-jsx ، وما إلى ذلك.
• teleport-component-generator-vue - إنشاء ملفات .vue القياسية
• teleport-component-generator-angular - يُنشئ ملفات .ts و .html و .css
• teleport-component-generator-html - (تجريبي)
• teleport-component-generator-svelte - (قريبًا)

القدرات

فيما يلي قائمة بالوظائف التي يدعمها UIDL ومولدات المكونات في الوقت الحالي، إلى جانب طبقة العرض الواضحة:

• القيم الديناميكية (الدعائم، الحالة) داخل عقد html أو على مستوى السمة
• تعريفات الكتابة لدعائم المكونات (PropTypes في React، والدعائم في Vue)
• تعريف التبعيات الخارجية
• حالة مكون بسيطة (باستخدام الخطافات في React، ومثيل المكون في Vue)
• معالجات الأحداث (المتعلقة بتغييرات الحالة)
• هياكل التكرار (.map في React، وv-for في Vue)
• دعم فتحات

مولدات المشروع

يعتمد مولدو المشروع على مدخلات ProjectUIDL وعلى استراتيجية المشروع . سيحتوي ProjectUIDL على كافة المعلومات حول التوجيه والصفحات والمكونات والإعدادات العامة. ستخبر الإستراتيجية المولدات بمكان وضع كل ملف وأي مولد مكون يجب استخدامه.

ستقوم المولدات بإخراج بنية مجردة تحتوي على المجلدات والملفات، دون كتابة أي شيء على القرص. يتم تكليف أداة تعبئة المشروع بأخذ مخرجات منشئ المشروع ونشرها في مكان ما.

تحقق من الأدلة الرسمية حول كيفية استخدام منشئ مشروع موجود أو كيفية إنشاء التكوين المخصص الخاص بك

النكهات

• teleport-project-generator-react - react + react-router css-modules أعلى create-react-app
• teleport-project-generator-next - استنادًا إلى Next.js
• teleport-project-generator-vue - بهيكل يبدأ من vue-cli
• teleport-project-generator-nuxt - استنادًا إلى Nuxt.js
• teleport-project-generator-angular - بناءً على angular-cli
• teleport-project-generator-html (تجريبي)

القدرات

إلى جانب الملفات والمجلدات العادية التي يتم إنشاؤها في نهاية العملية، يعتني مولدو المشروع أيضًا بما يلي:

• دعم الإعدادات العامة، والعلامات الوصفية، والنمط، والبرامج النصية، وما إلى ذلك.
• استخراج كافة التبعيات الخارجية وإضافتها إلى package.json .
• إنشاء نقطة الدخول لكل تطبيق (يمكن أن تكون ملف index.html أو أي شيء خاص بإطار العمل).
• إنشاء ملف توجيه لمسارات العميل الخاصة بالمشروع.
• إنشاء بيان ويب لدعم PWA.

باكرز المشروع

بمجرد قيام المولد بإنشاء التعليمات البرمجية للمكونات والصفحات، سيأخذ القائم على تعبئة المشروع تلك المخرجات، ويضعها فوق قالب مشروع موجود، ويضيف أي أصول محلية مطلوبة، ثم يقوم بتمرير النتيجة بأكملها إلى الناشر . الناشرون متخصصون في نشر بنية المجلد بالكامل إلى جهة خارجية مثل vercel أو github ، أو في إنشاء ملف zip في الذاكرة أو ببساطة كتابة المجلد على disk .

الناشرين

• teleport-publisher-vercel
• teleport-publisher-github
• teleport-publisher-codesandbox
• teleport-publisher-zip
• teleport-publisher-disk
• teleport-publisher-netlify (قريبًا)

مزيد من القراءة

بعض الروابط المفيدة التي تساعدك على متابعة النظام البيئي للنقل الآني بأكمله:

• التوثيق الكامل
• مخططات المكونات والمشروع JSON
• رد على الانترنت

تطوير

يستخدم هذا المشروع:

• TypeScript لسلامة الكتابة وإعادة البناء بسهولة
• lerna لإدارة monorepo مع حزم npm المتعددة
• jest لجميع أنواع الاختبارات ولحساب تغطية الكود

من أجل إضفاء طابع محلي عليها، نوصي باستخدام yarn ، لأنه يتكامل بشكل أفضل مع lerna ويستخدمه جميع المساهمين:

 yarn

يؤدي هذا إلى تثبيت التبعيات في المجلد الجذر، ولكنه يقوم أيضًا بإنشاء الارتباطات الرمزية بين الوحدات المستقلة داخل مجلد packages .

لإكمال إعداد lerna، عليك تشغيل:

 yarn build

سيؤدي هذا إلى تشغيل مهمة build داخل كل حزمة فردية، مما يؤدي إلى إنشاء مجلد lib الناتج. لدينا مخرجان لكل حزمة: cjs - وحدات نمط js الشائعة و esm - وحدات es الحديثة. إذا كنت تريد تسريع وقت البناء، فيمكنك تشغيل build:cjs فقط لتجنب إنشاء esm .

تشغيل مجموعة الاختبار:

 yarn test
yarn test:coverage

علاوة على ذلك، هناك حزمة private داخل مجلد lerna تسمى teleport-test . يمكن استخدام هذه الحزم لاختبار عملية إنشاء التعليمات البرمجية/الملفات بأي نكهة لمولد المشروع/المكونات. من أجل إعطائها تدورًا، سيتعين عليك:

 cd packages/teleport-test
npm run standalone

يستخدم الإصدار المستقل حزمة teleport-code-generator والقوالب المعلنة بشكل ثابت. للاختبار باستخدام قوالب جيثب ومثيل الباكر المخصص، يجب عليك:

 cp config.example.json config.json

سيكون عليك استبدال العنصر النائب برمز جيثب الخاص بك. وبعد ذلك يمكنك تشغيله باستخدام:

 npm run packer

يستخدم هذا الإصدار من أداة التعبئة UIDLs من examples/uidl-sample . إذا تم تشغيل العملية بنجاح، فسترى الردود من أداة تعبئة المشروع بالتنسيق: { success: true, payload: 'dist' } . تستخدم المهمة حزمة teleport-publisher-disk وتقوم بإنشاء أربعة ملفات مشروع مختلفة في مجلد dist .

يرجى فتح مشكلة لأي مخالفة أو خطأ محتمل تجده أثناء تشغيل هذا، أو إذا كان لديك أي أسئلة أو فضول حول هذا المشروع.

؟ تخطيط

لا يعد الكود الخاص بنا مفتوح المصدر فحسب، بل نخطط أيضًا لتطوير مولدات الكود على GitHub. لدينا عدد من القضايا المفتوحة ونتوقع المزيد من المساهمات في هذا الشأن.

نحن مهتمون بشكل خاص بفتح المناقشات حول المشكلات التي تحمل علامة discussion .

الإصدار الرسمي

سيكون الإصدار الرسمي هو التبديل إلى الإصدار 1.0 . الوقت المتوقع لهذا هو حوالي نهاية عام 2019.

؟ المساهمات

سنكون سعداء للغاية بمشاركة المجتمع حول هذا المشروع. نحن نؤمن بشدة بقوة المصدر المفتوح ، لذلك نخطط لبناء أفضل مولدات الأكواد الممكنة، جنبًا إلى جنب مع مجتمع التطوير بأكمله.

نحن نتصور أنواعًا مختلفة من المشاركة بدءًا من هذه النقطة فصاعدًا:

• تجربة المولدات والإبلاغ عن أي أخطاء ونقاط التحسين المحتملة
• المساهمة في حل المشكلات الحالية، سواء في الوحدات الأساسية أو في المولدات والمكونات الإضافية الموجودة
• استكشاف وبناء مكونات إضافية جديدة للمولدات الحالية
• استكشاف وبناء مولدات جديدة على أساس البنية القائمة

الشكر موصول لهؤلاء الأشخاص الرائعين (مفتاح الرموز التعبيرية):

أليكس مولدوفان ؟	فلاد نيكولا ؟	بول بري ؟ ؟	com.mihaitaba ؟	ميهاي سيربان	جايا كريشنا نامبورو ؟	أناماريا أوروس
ovidiuionut94	com.alexpausan	ميهاي سامباليانو ؟	أوتو	andreiTnu	كزافييه كازالوت	تشافدا بهافيك
إليزا نيتوي	تيودورسي ؟	دوروتيا فيرينتش ؟	ويليام جونوت

يتبع هذا المشروع مواصفات جميع المساهمين. المساهمات من أي نوع موضع ترحيب!

✍️ الاتصال

تواصل معنا على أي من هذه القنوات:

• ؟ اكتب بريدًا إلكترونيًا
• الفتنة
• ؟ ترك رسالة على تويتر
• موقع إلكتروني