الصفحة الرئيسية>المتعلقة بالبرمجة>كود الذكاء الاصطناعي
تنزيل

الدافع: أدوات DEV مستحيلة للتفاعل والتوليد الخلفي

بناء مواقع الويب الحديثة في متصفحك دون التخلي عن الكود.

الدافع خلاف

صنعها @krogovoy و ivolchenskov

تم إنشاء Impulse للعمل مع مواقع React في وضع dev (بمعنى ، يعمل على مضيفك المحلي).

يتيح لك تحرير واجهة المستخدم الخاصة بك مباشرة في المتصفح مع تغيير الكود تلقائيًا بالطريقة التي ستفعل بها يدويًا. يشبه امتداد محرر التعليمات البرمجية يتجاوز محرر الرمز.

  • مدمجة في تطبيقك: لا حاجة لتثبيت أي ملحقات أو تطبيقات سطح المكتب
  • لا توجد خدمات خارجية ، تعمل مباشرة مع الرمز
  • صنع حصريًا للمطورين ، وليس المصممين
  • Addon ، وليس بديلاً: يمنحك أداة جديدة مع عدم إضافة أي حدود

؟ انظر العروض التوضيحية في impulse.dev

بالمقارنة مع رمز الكتابة يدويًا:

  • أسرع
  • أكثر متعة
  • نفس الرمز المنتجة

متطلبات

اللغات:

  • ✅ JavaScript
  • ✅ TypeScript (طبقة مدمجة)

المكتبات التقديم:

  • ✅ رد فعل 17+
  • ⬜ Vue (ربما في المستقبل)
  • سفيلتي (لا توجد خطط للدعم)
  • Angular (لا توجد خطط للدعم)

تفاعل الأطر والحزم:

  • ✅ التالي
  • ✅ إنشاء تطبيق React
  • ✅ فيت
  • ✅ esbuild
  • ⬜ ريمكس
  • ⬜ الطرود
  • ✅ أي نظام مخصص مبني على قمة Babel/WebPack/Rollup

أطر عمل CSS:

  • ✅ Tailwind
  • لا توجد خطط لدعم أطر عمل CSS الأخرى في الوقت الحالي

المتصفحات:

  • ✅ قائم على الكروم
  • Firefox
  • سفاري

(يعتمد Impulse على واجهة برمجة تطبيقات الوصول إلى نظام الملفات التي تعمل بشكل جيد فقط في المتصفحات القائمة على الكروم)

تكامل المحرر:

  • ✅ مقابل الكود
  • ⬜ أكثر قادمة

ثَبَّتَ

هناك ثلاث طرق لمحاولة الدافع.

الخيار 1: حاول الآن

انسخ والصق الرمز أدناه في وحدة التحكم في المتصفح. 

 d = document ; s = d . createElement ( 'script' ) ; s . src = `https://cdn.jsdelivr.net/npm/@impulse.dev/runtime@latest/inject.js` ; d . body . appendChild ( s )

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

الخيار 2: NPM (موصى به)

الإعداد مرة واحدة وإلى الأبد للفريق بأكمله. 

npm i -D @impulse.dev/runtime@latest

الصق في أي ملف يتم استيراده دائمًا. عادةً ما يكون ملف React "الرئيسي" ، مثل _app.jsx في Next.js. 

 if ( process . env . NODE_ENV === 'development' ) {
  import ( '@impulse.dev/runtime' ) . then ( ( impulse ) => impulse . run ( ) )
}

الخيار 3: علامة <script>

الصق هذه علامة البرنامج النصي في نهاية <body> 

 {
  process . env . NODE_ENV === 'development' && (
    < script src = "https://cdn.jsdelivr.net/npm/@impulse.dev/runtime@latest/inject.js" > </ script >
  )
}

لا تشحن الدافع إلى الإنتاج

هام: تأكد من عدم شحن الدافع في بناء الإنتاج الخاص بك! سوف ينفخ حجم الحزمة الخاص بك!

تقطع معظم الحزم جميع التعليمات البرمجية داخل if (process.env.NODE_ENV === 'development') { ... } ، ولكن يوصى ببناء إنتاج ومقارنة حجم الحزمة مع ما كان عليه من قبل.

تكوين

بمجرد التثبيت ، يكون الدافع جاهزًا للعمل. فيما يلي بعض الأشياء التي قد ترغب في إعدادها من أجل العمل بشكل أفضل من أجلك.

متصفح

إذا كنت تستخدم شجاعًا ، فقم بتمكين API للوصول إلى نظام الملفات:

  1. اذهب إلى الشجاعة: // أعلام
  2. ابحث عن file system access api
  3. قم بتغييره إلى "تمكين"

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

لأسباب أمنية ، يعمل API للوصول إلى نظام الملفات فقط مع localhost : //. إذا كنت تستخدم اسم مضيف مختلف على الرغم من أن البيئة محلية ، فيجب عليك:

  1. اذهب إلى Chrome: // أعلام
  2. ابحث عن Insecure origins treated as secure
  3. أضف أصلك (على سبيل المثال http: // my_origin) إلى القائمة

تهيئة أجمل

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

ومع ذلك ، لا يعرف حقًا كيفية تنسيق الكود الخاص بك.

إذا كنت تريد أن تستخدم أجمل بعد تغيير كل رمز (موصى به) ، فمرر run() : 

if (process.env.NODE_ENV === 'development') {
-  import('@impulse.dev/runtime').then((impulse) => impulse.run())
+  import('@impulse.dev/runtime').then((impulse) => impulse.run({
+    prettierConfig: require('./path_to/.prettierrc.js')
+  }))
}

تكوين Tailwind

إذا قمت بتوسيع السمة القياسية في Tailwind ، فالمرض الخاص بك tailwind.config.js run() : 

if (process.env.NODE_ENV === 'development') {
-  import('@impulse.dev/runtime').then((impulse) => impulse.run())
+  import('@impulse.dev/runtime').then((impulse) => impulse.run({
+     tailwindConfig: require('./path_to/tailwind.config.js'),
+  }))
}

يستخدم

  • الخيار/alt+انقر لتحديد أي عنصر في الصفحة
  • ESC لإزالة الاختيار والخروج من الدافع
  • مفاتيح السهم أو H ، J ، K ، L للتنقل في لوحة المفاتيح
  • استخدم محرر الفئة على اليمين لإضافة فئات Windwind أو استبدالها أو إزالة
  • مساحة أو أدخل لفتح شريط الأوامر
  • استخدم شريط الأوامر أو المفاتيح الساخنة (المحددة على اليمين لكل إجراء) لإجراء الإجراءات

شريط القيادة

ما يمكنك فعله:

  • القفز إلى رمز العنصر المحدد
  • القفز إلى حيث يسمى مكون React للعنصر المحدد
  • إضافة أو إزالة فئة (تعمل حتى الآن فقط إذا كانت قائمة الفئات في الكود مشفرًا بدون شروط)
  • إزالة العنصر
  • أدخل <div></div> جديد
  • قم بتغيير علامة العنصر (على سبيل المثال Div -> P)
  • أدخل نصًا جديدًا
  • نقل العناصر (مبادلة مع الأخوة السابقة/القادمة)
  • التراجع عن أحدث تغيير

احصل على المساعدة أو مشاركة التعليقات

  • خادم Discord
  • مناقشات على جيثب

يساهم

متطلبات:

  • العقدة 16+
  • NPM 8.9.0+

استنساخ الريبو: 

git clone [email protected]:impulse-oss/impulse.git && cd impulse

تثبيت التبعيات: 

npm install

قم بتشغيل خادم DEV: 

npm run dev

افتح http: // localhost: 3005/. هذا ملعب لتطوير واختبار التطبيق.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل