vitext

Vitext ⚡

Die nächsten.js wie React Framework für bessere Benutzer- und Entwicklererfahrung

• Instant Server Start
• ? Suspense -Unterstützung
• ⚫ Weiter.js wie API
• ? Optimierter Build
• ? Bauen und exportieren bei Fly
• Lightning SSG/SSR
• ⚡ Schnelles HMR
• ? Vite & rollup kompatibel

Intro.mp4

 npm install vitext

Vitext (Vite + Next) ist ein Blitz-Schnell-SSG/SSR-Tool, mit dem Sie bessere und schnellere Front-End-Apps entwickeln können. Es besteht aus diesen Hauptteilen:

Instant Server Start

Der Entwicklungsserver verwendet native ES-Module, sodass für mich Ihr React App-Server und der Client für mich sehr schnell unter einer halben Sekunde gerendert werden.

? Suspense -Unterstützung

Vitext unterstützt React Suspense & Lazy aus der 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 >
  ) ;
} ;

⚫ Weiter.js wie API

Wenn Sie aus einem nächsten Hintergrund kommen, funktioniert alles für Sie genauso. Vitext hat einen ähnlichen API -Design wie 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 sind optional. Wenn getPaths 'Laufen erledigt wurde, wird jedes paths an eine getProps -Funktion übergeben, und wenn der Benutzer nach der spezifischen Seite die exportierte HTML (SSG) anfordert. Aber wenn getPaths nicht fertiggestellt wurde oder es keine exportierte HTML -Seite für die Anfrage des Benutzers gibt, werden die getProps mit den Params der Anfrage -URL (SSR) angerufen.

? Optimierter Build

Vitext verwendet den Gebäude- und Bündelungsansatz von Vite und bündelt Ihren Code schnell und optimiert.

? Bauen und exportieren bei Fly

Sie müssen nicht auf HTML -Exporte Ihrer App warten, da Vitext beim Servieren von Seiten gleichzeitig Seiten nach HTML exportiert, während Sie Ihre App bedienen, also keinen next export .

Lightning SSR/SSG

ES -Module, schnelle Kompilierungen und Webarbeiter stärken die Vitext SSR/SSG -Strategie, sodass Sie eine erstaunlich schnelle SSR/SSG haben.

⚡ Schnelles HMR

Vitext verwendet @viteJS/Plugin-React-Refresh unter der Haube, sodass Sie hier einen schnellen HMR haben.

? Vite & rollup kompatibel

Wir können Vitext eine Superset von Vite nennen; Dies bedeutet, dass Vitext alles unterstützt, was Vite mit vitext.config.js unterstützt.

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

Beispiele

Sie können Pakete/Beispiele -Verzeichnisse überprüfen, um Beispiele anzuzeigen, die mit Vitext implementiert wurden.

Beitrag

Wir sind jetzt in den frühen Stadien, also brauchen wir Ihre Hilfe bei Vitext. Bitte probieren Sie die Dinge aus, empfehlen Sie neue Funktionen und geben Sie Dinge aus. Sie können auch die Probleme überprüfen, um festzustellen, ob Sie an einigen arbeiten können.

Lizenz

MIT