Vovk.ts Interactive Examples

Basic Controller Example
export default class BasicController {
@get('greeting')
static getHello() {
return { greeting: 'Hello world!' };
}
}
export default class BasicController {
@get('greeting')
static getHello() {
return { greeting: 'Hello world!' };
}
}
Basic Controller with Service
export default class BasicService {
static getHello() {
return { greeting: 'Hello world!' };
}
}
export default class BasicService {
static getHello() {
return { greeting: 'Hello world!' };
}
}
Form Example
setResponse(
await FormController.createUser({
body: { name, email },
})
);
setResponse(
await FormController.createUser({
body: { name, email },
})
);
React Hook Form Example
const {
register,
handleSubmit,
} = useForm<VovkBody</* ... */>({
resolver: zodResolver(userSchema),
});
const {
register,
handleSubmit,
} = useForm<VovkBody</* ... */>({
resolver: zodResolver(userSchema),
});
Server Component Example
export default async function ServerComponent() {
const response = await Controller.getHello();

return <div>{response.greeting}</div>;
}
export default async function ServerComponent() {
const response = await Controller.getHello();

return <div>{response.greeting}</div>;
}
Stream Example
using stream = await StreamController.streamTokens();

for await (const token of stream) {
setTokens((tokens) => [...tokens, token]);
}
using stream = await StreamController.streamTokens();

for await (const token of stream) {
setTokens((tokens) => [...tokens, token]);
}
Stream using Response Object
@get('tokens')
static async streamTokens() {
const response = new StreamResponse<Token>();
void this.streamService.streamTokens(response);
return response;
}
@get('tokens')
static async streamTokens() {
const response = new StreamResponse<Token>();
void this.streamService.streamTokens(response);
return response;
}
OpenAI Chat Example
yield* await openai.chat.completions.create({
messages,
model: 'gpt-3.5-turbo',
stream: true,
});
yield* await openai.chat.completions.create({
messages,
model: 'gpt-3.5-turbo',
stream: true,
});
WPC Class Example
HelloWorker.employ(/* ... */);

await HelloWorker.factorize(BigInt(value)));
HelloWorker.employ(/* ... */);

await HelloWorker.factorize(BigInt(value)));
WPC Class Generator Example
for await (
const pi of HelloWorker.approximatePi(/* ... */)
) {
setPi(pi);
}
for await (
const pi of HelloWorker.approximatePi(/* ... */)
) {
setPi(pi);
}

Other Examples

React Native Example

import { GreetingController } from 'vovk-client';

// ...
<Pressable
onPress={async () => {
setGreetingResponse(
await GreetingController.getGreeting()
);
}}
>
<Text>Get Greeting</Text>
</Pressable>
import { GreetingController } from 'vovk-client';

// ...
<Pressable
onPress={async () => {
setGreetingResponse(
await GreetingController.getGreeting()
);
}}
>
<Text>Get Greeting</Text>
</Pressable>

Next.js + Vovk.ts can be used as a back-end for React Native applications. For details see vovk-react-native-example repository.

Bundle the Client

// webpack.config.js
module.exports = {
entry: {
index: './index.ts',
},
devtool: 'inline-source-map',
// ...
};
// webpack.config.js
module.exports = {
entry: {
index: './index.ts',
},
devtool: 'inline-source-map',
// ...
};

The client REST API library bundle can be compiled into a single package and distributed thru NPM, CDN or any other way. The examples on this page are bundled with Webpack and served from NPM as vovk-examples package that's, in its turn is used by examples on vovk.dev website to render live demos.

Static JSON API

import { initVovk, generateStaticAPI } from 'vovk';

// ...

export function generateStaticParams() {
return generateStaticAPI(controllers);
}

export const { GET } = initVovk({ controllers, workers });

import { initVovk, generateStaticAPI } from 'vovk';

// ...

export function generateStaticParams() {
return generateStaticAPI(controllers);
}

export const { GET } = initVovk({ controllers, workers });

Thanks to generateStaticParams Next.js feature it's possible to generate static API that is compiled at build time and served from a static hosting. This approach is used at one of the examples on vovk.dev that is hosted on Github Pages.