open-index/open-npm huggingface dataset:
npm package: @laffery/cos-db
Description: A useful lib to access COS as a database
Author: Laffery
Latest version: 1.2.0

# COS DB

> A database based on Tencent COS

## Demo

```js
import COSClient from "@laffery/cos-db";

const config = {
  secret: {
    id: "xxx",
    key: "xxx",
  },
  bucket: "xxx",
  region: "ap-xxx",
};

const cos = new COS(config);

(async () => {
  const res = await cos.list("/test");
  console.log(res);
})()

(async () => {
  const res = await cos.put("/test/a.json", '{\n\t"key": "hello world"\n}');
  console.log(res);
})();

(async () => {
  const res = await cos.delete("/test/a.json");
  console.log(res);
})();
```

## Issues

Any questions or good ideas, add your issues [here](https://github.com/Laffery/Laffery/issues), with a milestone `@laffery/cos-db`.
npm package: @laffery/create-webpack-app
Description: webpack starter kit for react + typescript
Author: Laffery
Latest version: 0.5.1

# Getting Started with Webpack Starter Kit

> Typescript is supported! \
> Server Side Render is supported!

## Features

- Webpack@5
- React@17 / React@18
- TypeScript
- SSR

## Motivation

As a fresh man in front-end field, lots of technology run into my eyes, such as [Next.js](https://github.com/vercel/next.js). Even though they are powerful and convenient enough for normal development, it isn't benefit to a programmer's growth in the long run.\
For easier react development experience, I create these templates from scratch, with the latest tool chains from dev to build to production.

## CLI

### Install

```sh
# npm
npm i -g @laffery/webpack-starter-kit

# or yarn
yarn add -g @laffery/webpack-starter-kit

# or pnpm
pnpm add -g @laffery/webpack-starter-kit
```

### Create app

Run `npx create-webpack-app -h` to look up usages:

```txt
Usage: create app <name> [options]

Arguments:
  name                     project name (default: "my-app")
  template                 template name (default: "react-ts")

Options:
  -V, --version            output the version number
  -O, --output <string>    output directory (default: ".")
  -l, --list               list all templates available
  -t, --template <string>  project template name
  -h, --help               display help for command
```

Now you can feel free to run the following command to create you own app and enjoy coding!

```sh
# npm
npm create @laffery/webpack-app@latest

# or yarn
yarn create @laffery/webpack-app

# or pnpm
pnpm create @laffery/webpack-app
```

## Available Templates

- [react-ts](./packages/react-typescript-template/)
- [react-ssr-ts](./packages/react-ssr-typescript-template/)
- [react18-ts](./packages/react18-typescript-template/)
- [react18-ssr-ts](./packages/react18-ssr-typescript-template/)

You can see more details in the [manifest file](./template.manifest.json)
npm package: @laffery/webpack-react-ssr-ts
Description: template for webpack + react + ssr + typescript
Author: Laffery
Latest version: 0.3.10

# Webpack React SSR Typescript Template

> Server-Side Render is supported

## Available Scripts

In the project directory, you can run:

### `npm run dev`

Runs the app in the development mode. \
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.\
You will also see any lint errors in the console.

### `npm run start`

Runs the app in the production mode. \
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

### `npm run build`

Builds the app for production to the `dist` folder. \
The client side code is built in `dist/client` folder, and the server side code is built in `dist/server` folder. \
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. \
Your app is ready to be deployed!

## SSR

There are several pages in the example project.

- [`/`](http://localhost:3000/): homepage(SSR)
- [`ssr`](http://localhost:3000/ssr): SSR page
  - [`foo`](http://localhost:3000/ssr/foo): SSR sub page
- [`csr`](http://localhost:3000/csr): CSR page
  - [`bar`](http://localhost:3000/csr/bar): CSR sub page

You can try them on their own page. \
Even though the SSR pages are rendered on the server side, they can response to events as the CSR pages do after `hydrating` on the client side.

### Developing SSR page

You need do nothing to define a SSR page, but only to export an async function named `getServerSideProps`, and define data-fetch logic in it, we will automatically fetch the data and inject to somewhere client can access directly, which will be seen as a `props` argument to invoke the relative page component.

```tsx
import { GetServerSideProps } from "app";
import HelloWorld from "@/components/hello-world";

export default function Homepage(props: { mode?: "CSR" | "SSR" }) {
  return <HelloWorld page="src/pages/ssr/index.tsx" {...props} />;
}

export const getServerSideProps: GetServerSideProps = async () => {
  return { props: { mode: "SSR" } };
};
```

As the above page says, you will see "CSR" on the page while the page is rendered in client side, otherwise you will see "SSR" on the page while the page is rendered in server side.

## Route

### Conventional routing is supported

Similar to `Next.js`, we also have a file-system based router built on the concept of pages.
When a file is added to the pages directory, it's automatically available as a route.
The files inside the pages directory can be used to define most common patterns.

### Serverless API is supported

Write your API handlers in `server/services`, then visit `http://localhost:3000/api/echo`

```ts
router.get("/echo", (req, res) => {
    return res.end("hello world");
  });
// hello world
```
npm package: @laffery/webpack-react-ts
Description: template for webpack + react + typescript
Author: Laffery
Latest version: 0.1.11

# Webpack React Typescript Template

## Available Scripts

In the project directory, you can run:

### `npm run dev`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.\
You will also see any lint errors in the console.


### `npm run start`

Runs the app in the production mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

### `npm run build`

Builds the app for production to the `dist` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
npm package: @laffery/webpack-react18-ssr-ts
Description: template for webpack + react18 + ssr + typescript
Author: Laffery
Latest version: 0.1.5

# Webpack React SSR Typescript Template

> Server-Side Render is supported

## Available Scripts

In the project directory, you can run:

### `npm run dev`

Runs the app in the development mode. \
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.\
You will also see any lint errors in the console.

### `npm run start`

Runs the app in the production mode. \
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

### `npm run build`

Builds the app for production to the `dist` folder. \
The client side code is built in `dist/client` folder, and the server side code is built in `dist/server` folder. \
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. \
Your app is ready to be deployed!

## SSR

There are several pages in the example project.

- [`/`](http://localhost:3000/): homepage(SSR)
- [`ssr`](http://localhost:3000/ssr): SSR page
  - [`foo`](http://localhost:3000/ssr/foo): SSR sub page
- [`csr`](http://localhost:3000/csr): CSR page
  - [`bar`](http://localhost:3000/csr/bar): CSR sub page

You can try them on their own page. \
Even though the SSR pages are rendered on the server side, they can response to events as the CSR pages do after `hydrating` on the client side.

### Developing SSR page

You need do nothing to define a SSR page, but only to export an async function named `getServerSideProps`, and define data-fetch logic in it, we will automatically fetch the data and inject to somewhere client can access directly, which will be seen as a `props` argument to invoke the relative page component.

```tsx
import { GetServerSideProps } from "app";
import HelloWorld from "@/components/hello-world";

export default function Homepage(props: { mode?: "CSR" | "SSR" }) {
  return <HelloWorld page="src/pages/ssr/index.tsx" {...props} />;
}

export const getServerSideProps: GetServerSideProps = async () => {
  return { props: { mode: "SSR" } };
};
```

As the above page says, you will see "CSR" on the page while the page is rendered in client side, otherwise you will see "SSR" on the page while the page is rendered in server side.

## Route

### Conventional routing is supported

Similar to `Next.js`, we also have a file-system based router built on the concept of pages.
When a file is added to the pages directory, it's automatically available as a route.
The files inside the pages directory can be used to define most common patterns.

### Serverless API is supported

Write your API handlers in `server/services`, then visit `http://localhost:3000/api/echo`

```ts
router.get("/echo", (req, res) => {
    return res.end("hello world");
  });
// hello world
```
npm package: @laffery/webpack-react18-ts
Description: template for webpack + react18 + typescript
Author: Laffery
Latest version: 0.1.3

# Webpack React18 Typescript Template

## Available Scripts

In the project directory, you can run:

### `npm run dev`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.\
You will also see any lint errors in the console.


### `npm run start`

Runs the app in the production mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

### `npm run build`

Builds the app for production to the `dist` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
npm package: @laffery/webpack-starter-kit
Description: webpack starter kit for react + typescript
Author: Laffery
Latest version: 0.4.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Getting Started with Webpack Starter Kit

> Typescript is supported! \
> Server Side Render is supported!

## Features

- Webpack@5
- React@17 / React@18
- Typescript
- SSR

## Motivation

As a fresh man in front-end field, lots of technology run into my eyes, such as [Next.js](https://github.com/vercel/next.js). Even though they are powerful and convenient enough for normal development, it isn't benefit to a programmer's growth in the long run.\
For easier react development experience, I create these templates from scratch, with the latest tool chains from dev to build to production.

## CLI

### Install

We provide a command tool named `create-app`, we recommend that you install this package globally, run with

```sh
# npm
npm i -g @laffery/webpack-starter-kit

# or yarn
yarn add -g @laffery/webpack-starter-kit

# or pnpm
pnpm add -g @laffery/webpack-starter-kit
```

### Create app

Run `npx create-app -h` to look up usages:

```txt
Usage: create app <name> [options]

Arguments:
  name                     project name (default: "my-app")
  template                 template name (default: "react-ts")

Options:
  -V, --version            output the version number
  -O, --output <string>    output directory (default: ".")
  -l, --list               list all templates available
  -t, --template <string>  project template name
  -h, --help               display help for command
```

Now you can feel free to run `npx create-app my-app` to create you own app and enjoy coding!

## Available Templates

- [react-ts](./packages/react-typescript-template/)
- [react-ssr-ts](./packages/react-ssr-typescript-template/)
- [react18-ts](./packages/react18-typescript-template/)
- [react18-ssr-ts](./packages/react18-ssr-typescript-template/)

You can see more details in the [manifest file](./template.manifest.json)