vitext

vitext ⚡

Next.js مثل React Framework لتجربة مستخدم ومطور أفضل

• بدء الخادم الفوري
• ؟ دعم التشويق
• ⚫ next.js مثل API
• ؟ بناء الأمثل
• ؟ بناء وتصدير على متن
• البرق SSG/SSR
• ⚡ سريع HMR
• ؟ متوافق مع Vite & Rollup

مقدمة

 npm install vitext

Vitext (Vite + Next) عبارة عن أداة SSG/SSR سريعة البرق تتيح لك تطوير تطبيقات أمامية أفضل وأسرع. يتكون من هذه الأجزاء الرئيسية:

بدء الخادم الفوري

يستخدم خادم التطوير وحدات ES الأصلية ، لذلك ستحصل على خادم تطبيق React الخاص بك ويقدم العميل بسرعة كبيرة ، تحت نصف ثانية بالنسبة لي.

؟ دعم التشويق

يدعم Vitext React Respense & Lazen Out Out of the Box.

 import { lazy , Suspense } from 'react' ;

const Component = lazy ( ( ) => import ( '../components/Component' ) ) ;
const Loading = ( ) => < p > Loading the Component < / p>;

const App = ( ) => {
  return (
    < Suspense fallback = { < Loading / > } >
	  < Component / >
    < / Suspense >
  ) ;
} ;

⚫ next.js مثل API

إذا كنت قادمًا من خلفية Next.js ، فسيعمل كل شيء بنفس الطريقة بالنسبة لك. Vitext لديه تصميم API مماثل إلى Next.js.

 // pages/Page/[id].jsx
const Page = ( { id } ) => {
  return < div > { id } < / div>;
} ;

// build time + request time (SSG/SSR/ISR)
export function getProps ( { req , res , query , params } ) {
  // props for `Page` component
  return { props : { id : params . id } } ;
}

// build time (SSG)
export async function getPaths ( ) {
  // an array of { params: ... }, which every `params` goes to `getProps`  
  return {
    paths : [ { id : 1 } ] ,
  } ;
}

export default IndexPage ;

getPaths و getProps اختياري. إذا تم تنفيذ تشغيل getPaths ، فسيتم تمرير كل عنصر paths إلى وظيفة getProps ، وعندما يطلب المستخدم للصفحة المحددة ، سيتلقى HTML المصدرة (SSG). ولكن إذا لم يتم تنفيذ getPaths أو لم تكن هناك صفحة HTML تم تصديرها لطلب المستخدم ، فسيتم استدعاء getProps مع Params URL للطلب (SSR).

؟ بناء الأمثل

يستخدم Vitext نهج Building Building و Bundling ، لذلك يحدد الكود الخاص بك بطريقة سريعة ومحسّنة.

؟ بناء وتصدير على متن

لا تحتاج إلى انتظار تصدير HTML لتطبيقك لأن Vitext يصدر صفحات إلى HTML في وقت واحد أثناء تقديم تطبيقك ، لذلك لا يوجد next export .

البرق SSR/SSG

وحدات ES ، تجميع سريع وعمال الويب تمكين استراتيجية Vitext SSR/SSG ، لذلك سيكون لديك SSR/SSG سريع المذهل.

⚡ سريع HMR

يستخدم Vitext @vitejs/plugin-React-Refresh تحت الغطاء ، لذلك لديك HMR سريع هنا.

؟ متوافق مع Vite & Rollup

يمكننا استدعاء Vitext مجموعة من Vite ؛ وهذا يعني أن Vitext يدعم كل ما يدعمه Vite مع vitext.config.js .

 // exact Vite's config API 
export default {
  plugins : [ ... ] ,
  optimizeDeps : { ... } ,
  ...
} ; 

أمثلة

يمكنك الخروج من الدليل/الأمثلة على رؤية أمثلة تم تنفيذها باستخدام Vitext.

مساهمة

نحن في المراحل المبكرة الآن ، لذلك نحتاج إلى مساعدتكم على Vitext ؛ يرجى تجربة الأشياء ، والتوصية بميزات جديدة ، وإصدار الأشياء. يمكنك أيضًا الاطلاع على المشكلات لمعرفة ما إذا كان يمكنك العمل على بعض.

رخصة

معهد ماساتشوستس للتكنولوجيا