vitext - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #llm #go #macos #nodejs #windows #awesome #kubernetes #vue #awesome-list #security #openai #ios

vitext

(★ 391)

The Next.js like React framework for better User & Developer experience!

File Explorer

Download Latest Version (.zip)

- ci.json
- - ci.yml
  - release.yml
- - .gitignore
  - .npmignore
  - index.js
  - package.json
  - README.md
- - package.json
  - shims.d.ts
  - testEnv.d.ts
  - testUtils.ts
  - tsconfig.json
- - .gitignore
  - .npmignore
  - package.json
  - react-shim.js
  - rollup.config.js
  - tsconfig.json
  - yarn-error.log
- jestEnv.js
- jestGlobalSetup.js
- jestGlobalTeardown.js
- jestPerTestSetup.ts
- release.js
.eslintrc.js
.gitignore
CONTRIBUTING.md
jest.config.ts
LICENSE
package.json
prettier.config.js
README.md
tsconfig.json
workspace.code-workspace
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/Aslemammad/vitext

Downloads the entire project code from GitHub to your computer.

cd vitext

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install vitext

Downloads and installs the libraries listed in package.json.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Vitext ⚡🚀

[![Discord](https://img.shields.io/discord/815937377888632913.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/Rhg9cEghMF)

> The Next.js like React framework for better User & Developer experience

-  💡 Instant Server Start
-   💥 Suspense support
-   ⚫ Next.js like API
-  📦 Optimized Build
-   💎 Build & Export on fly
-   🚀 Lightning SSG/SSR
-  ⚡  Fast HMR
-   🔑 Vite & Rollup Compatible

https://user-images.githubusercontent.com/37929992/128530290-41165a31-29a5-4108-825b-843a09059deb.mp4
```
npm install vitext
```

Vitext (Vite + Next) is a lightning fast SSG/SSR tool that lets you develop better and quicker front-end apps. It consists of these major parts:
 
### 💡 Instant Server Start
The development server uses native ES modules, So you're going to have your React app server-rendered and client rendered very fast, under a half a second for me.

###  💥 Suspense support
Vitext supports React Suspense & Lazy out of the box.  
```ts
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 like API
If you're coming from a Next.js background, everything will work the same way for you. Vitext has a similar API design to Next.js.
```ts
// 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` are optional. If `getPaths`' running got done, then every `paths` item is going to be passed to a `getProps` function, And when the user requests for the specific page, they're going to receive the exported html (SSG). But if `getPaths` wasn't done or there's no exported html page for the user's request, then the `getProps` is going to get called with the request url's params (SSR). 
###  📦 Optimized Build
Vitext uses Vite's building and bundling approach, So it bundles your code in a fast and optimized way.

###   💎 Build & Export on fly
You don't need to wait for HTML exports of your app because Vitext exports pages to HTML simultaneously while serving your app, So no `next export`.
 
###   🚀 Lightning SSR/SSG
ES modules, Fast compiles and Web workers empower the Vitext SSR/SSG strategy, so you'll have an astonishingly fast SSR/SSG.

###  ⚡ Fast HMR
Vitext uses [@vitejs/plugin-react-refresh](https://github.com/vitejs/vite/tree/main/packages/plugin-react-refresh) under the hood, So you have a fast HMR right here.

###   🔑 Vite & Rollup Compatible
We can call Vitext a superset of Vite; It means that Vitext supports everything Vite supports with `vitext.config.js`.
```ts
// exact Vite's config API 
export default {
  plugins: [...],
  optimizeDeps: {...},
  ...
};
```
## Examples
You can checkout [packages/examples](https://github.com/Aslemammad/vitext/tree/master/packages/examples) directory to see examples that have been implemented using vitext.

## Contribution

We're in the early stages now, So we need your help on Vitext; please try things out, recommend new features, and issue stuff. You can also check out the issues to see if you can work on some.

## License

MIT