Skip to content

Commit fd85148

Browse files
mayank1513mayank1513
committed
update readme
1 parent be85961 commit fd85148

File tree

2 files changed

+20
-154
lines changed

2 files changed

+20
-154
lines changed

‎.tkb‎

Lines changed: 3 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,6 @@
11
{
22
"scope": "Workspace",
33
"tasks": {
4-
"G-1H47JpSI69kav1qZ-kp": {
5-
"id": "G-1H47JpSI69kav1qZ-kp",
6-
"description": "Star [this repository](https://github.com/react18-tools/turborepo-template/) for easy access and to show your support",
7-
"columnId": "column-todo"
8-
},
9-
"gbzyhx0FwFfzRoE-iqVeu": {
10-
"id": "gbzyhx0FwFfzRoE-iqVeu",
11-
"description": "🌟 **Update `sripts/rebrand.config.json` if required.**",
12-
"columnId": "column-todo"
13-
},
14-
"Y5__aEZl3Pbxp7r90HKpV": {
15-
"id": "Y5__aEZl3Pbxp7r90HKpV",
16-
"description": "Install `pnpm` using `npm i -g pnpm`",
17-
"columnId": "column-todo"
18-
},
19-
"jcpymbi71e702p7n6fwvZ": {
20-
"id": "jcpymbi71e702p7n6fwvZ",
21-
"description": "Close this Kanban Board tab and install dependencies using `pnpm`\n - Run `pnpm i` to install dependencies; the `rebrand` script will automatically rebrand the repo, adjust workflows, and create a commit",
22-
"columnId": "column-todo"
23-
},
24-
"jdZxwLymOo7w2eZeNpvsN": {
25-
"id": "jdZxwLymOo7w2eZeNpvsN",
26-
"description": "Run `yarn plop`, and follow prompts to generate server or client components for your library",
27-
"columnId": "column-todo"
28-
},
294
"RX4J5v4y5IOe_ucf8pMRT": {
305
"id": "RX4J5v4y5IOe_ucf8pMRT",
316
"description": "🌟 Enable [private vulnerability reporting](https://github.com/react18-tools/esbuild-plugin-webgl/security) (For public repo - do this after updating visibility to public)",
@@ -46,11 +21,6 @@
4621
"description": "Add `NPM_AUTH_TOKEN` to repository secrets to automate package publishing\n - Log in to your [`npm` account](https://www.npmjs.com/login) and create an automation token\n - Create a new repository secret `NPM_AUTH_TOKEN`",
4722
"columnId": "column-todo"
4823
},
49-
"_BfuX7quWBANpDK1bI7YM": {
50-
"id": "_BfuX7quWBANpDK1bI7YM",
51-
"description": "Update description in `lib/package.json`",
52-
"columnId": "column-todo"
53-
},
5424
"dC7QDBLH8BmHUfaYmIt81": {
5525
"id": "dC7QDBLH8BmHUfaYmIt81",
5626
"description": "(Optional) Add Repo Stats by visiting and setting up [repobeats](https://repobeats.axiom.co/)",
@@ -64,7 +34,7 @@
6434
"1dRWJhy45E1Rq5wZAmPHt": {
6535
"id": "1dRWJhy45E1Rq5wZAmPHt",
6636
"description": "Update README as required",
67-
"columnId": "column-todo"
37+
"columnId": "column-doing"
6838
},
6939
"5vS1JNXoMhDl5IBljwh2v": {
7040
"id": "5vS1JNXoMhDl5IBljwh2v",
@@ -95,47 +65,19 @@
9565
"id": "IjuAtNquJ4-Ut874rHKIW",
9666
"description": "You can also fork the [`terborepo-template`](https://github.com/react18-tools/turborepo-template/fork) and add your package to `scripts/featured.json`\n - If approved, your package will be automatically added to FEATURED.md and also published on the home page of this repo.",
9767
"columnId": "column-todo"
98-
},
99-
"_JiH9RZLmUF5nxD7lBC5B": {
100-
"id": "_JiH9RZLmUF5nxD7lBC5B",
101-
"description": "Create a new GitHub repository using this template.\n - Click the `Use this template` button at the top right -> `Create a new repository`\n - Click `Create repository` and wait for the setup workflow to finish rebranding your repo.",
102-
"columnId": "column-done"
103-
},
104-
"t5d22lVYbF7GuQHzv6DRO": {
105-
"id": "t5d22lVYbF7GuQHzv6DRO",
106-
"description": "Install and set up Node.js and your IDE (VSCode recommended)",
107-
"columnId": "column-done"
108-
},
109-
"wkDDELNeOfYSVmWI1eWu0": {
110-
"id": "wkDDELNeOfYSVmWI1eWu0",
111-
"description": "Install the recommended VSCode extensions:\n - [Trello Kanban](https://marketplace.visualstudio.com/items?itemName=mayank1513.trello-kanban-task-board)",
112-
"columnId": "column-done"
113-
},
114-
"J5lp9I5d12B4tpGKawaqF": {
115-
"id": "J5lp9I5d12B4tpGKawaqF",
116-
"description": "Run `node scripts/rebrand.js` to rebrand this repo.",
117-
"columnId": "column-todo"
11868
}
11969
},
12070
"columns": [
12171
{
12272
"id": "column-todo",
12373
"title": "To do",
12474
"tasksIds": [
125-
"G-1H47JpSI69kav1qZ-kp",
126-
"gbzyhx0FwFfzRoE-iqVeu",
127-
"Y5__aEZl3Pbxp7r90HKpV",
128-
"jcpymbi71e702p7n6fwvZ",
129-
"J5lp9I5d12B4tpGKawaqF",
130-
"jdZxwLymOo7w2eZeNpvsN",
13175
"RX4J5v4y5IOe_ucf8pMRT",
13276
"EdPbrbJLllUHfZmCS80f7",
13377
"MLLUsAhCKaKxvEXFY0HSq",
13478
"gMYfaAh2RABMP8uZRQgNx",
135-
"_BfuX7quWBANpDK1bI7YM",
13679
"dC7QDBLH8BmHUfaYmIt81",
13780
"P_NrSJQ8m91Odgz8E1fS6",
138-
"1dRWJhy45E1Rq5wZAmPHt",
13981
"5vS1JNXoMhDl5IBljwh2v",
14082
"55DAZwduwTvlaxaJC8hlX",
14183
"FDFqCQvLm2mUlnTJ3Gna5",
@@ -147,16 +89,9 @@
14789
{
14890
"id": "column-doing",
14991
"title": "Doing",
150-
"tasksIds": []
151-
},
152-
{
153-
"id": "column-done",
154-
"title": "Done",
15592
"tasksIds": [
156-
"_JiH9RZLmUF5nxD7lBC5B",
157-
"t5d22lVYbF7GuQHzv6DRO",
158-
"wkDDELNeOfYSVmWI1eWu0"
93+
"1dRWJhy45E1Rq5wZAmPHt"
15994
]
16095
}
16196
]
162-
}
97+
}

‎README.md‎

Lines changed: 17 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,7 @@
22

33
[![test](https://github.com/react18-tools/esbuild-plugin-webgl/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/esbuild-plugin-webgl/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/aa896ec14c570f3bb274/maintainability)](https://codeclimate.com/github/react18-tools/esbuild-plugin-webgl/maintainability) [![codecov](https://codecov.io/gh/react18-tools/esbuild-plugin-webgl/graph/badge.svg)](https://codecov.io/gh/react18-tools/esbuild-plugin-webgl) [![Version](https://img.shields.io/npm/v/esbuild-plugin-webgl.svg?colorB=green)](https://www.npmjs.com/package/esbuild-plugin-webgl) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/esbuild-plugin-webgl.svg)](https://www.npmjs.com/package/esbuild-plugin-webgl) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/esbuild-plugin-webgl) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
44

5-
Esbuild Plugin Webgl is a comprehensive library designed to unlock the full potential of React 18 server components. It provides customizable loading animation components and a fullscreen loader container, seamlessly integrating with React and Next.js.
6-
7-
✅ Fully Treeshakable (import from `esbuild-plugin-webgl/client/loader-container`)
8-
9-
✅ Fully TypeScript Supported
10-
11-
✅ Leverages the power of React 18 Server components
12-
13-
✅ Compatible with all React 18 build systems/tools/frameworks
14-
15-
✅ Documented with [Typedoc](https://react18-tools.github.io/esbuild-plugin-webgl) ([Docs](https://react18-tools.github.io/esbuild-plugin-webgl))
16-
17-
✅ Examples for Next.js, Vite, and Remix
5+
ESBuild plugin to load webGL shaders from `.glsl` files.
186

197
> <img src="https://github.com/react18-tools/esbuild-plugin-webgl/blob/main/popper.png?raw=true" style="height: 20px"/> Please consider starring [this repository](https://github.com/react18-tools/esbuild-plugin-webgl) and sharing it with your friends.
208
@@ -38,93 +26,36 @@ $ npm install esbuild-plugin-webgl
3826
$ yarn add esbuild-plugin-webgl
3927
```
4028

41-
## Want Lite Version? [![npm bundle size](https://img.shields.io/bundlephobia/minzip/esbuild-plugin-webgl-lite)](https://www.npmjs.com/package/esbuild-plugin-webgl-lite) [![Version](https://img.shields.io/npm/v/esbuild-plugin-webgl-lite.svg?colorB=green)](https://www.npmjs.com/package/esbuild-plugin-webgl-lite) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/esbuild-plugin-webgl-lite.svg)](https://www.npmjs.com/package/esbuild-plugin-webgl-lite)
29+
> If you are using `monorepo` or `workspaces`, you can install this plugin to the root using `-w` or to a specific workspace using `--filter your-package` or `--scope your-package` for `pnpm` or `yarn` workspaces, respectively.
4230
43-
```bash
44-
$ pnpm add esbuild-plugin-webgl-lite
45-
```
31+
## Use with `tsup`
4632

47-
**or**
33+
```ts
34+
// tsup.config.ts or tsup.config.js
35+
import { defineConfig } from "tsup";
36+
import { webglPlugin } from "esbuild-plugin-webgl";
4837

49-
```bash
50-
$ npm install esbuild-plugin-webgl-lite
38+
export default defineConfig(options => ({
39+
...
40+
esbuildPlugins:[webglPlugin()]
41+
}));
5142
```
5243

53-
**or**
44+
## Use with `esbuild`
5445

55-
```bash
56-
$ yarn add esbuild-plugin-webgl-lite
57-
```
58-
59-
> You need `r18gs` as a peer-dependency
60-
61-
### Import Styles
46+
```ts
47+
import { webglPlugin } from "esbuild-plugin-webgl";
6248

63-
You can import styles globally or within specific components.
64-
65-
```css
66-
/* globals.css */
67-
@import "esbuild-plugin-webgl/dist";
68-
```
69-
70-
```tsx
71-
// layout.tsx
72-
import "esbuild-plugin-webgl/dist/index.css";
73-
```
74-
75-
For selective imports:
76-
77-
```css
78-
/* globals.css */
79-
@import "esbuild-plugin-webgl/dist/client"; /** required if you are using LoaderContainer */
80-
@import "esbuild-plugin-webgl/dist/server/bars/bars1";
81-
```
82-
83-
### Usage
84-
85-
Using loaders is straightforward.
86-
87-
```tsx
88-
import { Bars1 } from "esbuild-plugin-webgl/dist/server/bars/bars1";
89-
90-
export default function MyComponent() {
91-
return someCondition ? <Bars1 /> : <>Something else...</>;
92-
}
93-
```
94-
95-
For detailed API and options, refer to [the API documentation](https://react18-tools.github.io/esbuild-plugin-webgl).
96-
97-
**Using LoaderContainer**
98-
99-
`LoaderContainer` is a fullscreen component. You can add this component directly in your layout and then use `useLoader` hook to toggle its visibility.
100-
101-
```tsx
102-
// layout.tsx
103-
<LoaderContainer />
104-
...
105-
```
106-
107-
```tsx
108-
// some other page or component
109-
import { useLoader } from "esbuild-plugin-webgl/dist/hooks";
110-
111-
export default MyComponent() {
112-
const { setLoading } = useLoader();
113-
useCallback(()=>{
114-
setLoading(true);
115-
...do some work
116-
setLoading(false);
117-
}, [])
49+
esbuild.build({
11850
...
119-
}
51+
plugins: [webglPlugin()],
52+
});
12053
```
12154

12255
## License
12356

12457
This library is licensed under the MPL-2.0 open-source license.
12558

126-
127-
12859
> <img src="https://github.com/react18-tools/esbuild-plugin-webgl/blob/main/popper.png?raw=true" style="height: 20px"/> Please consider enrolling in [our courses](https://mayank-chaudhari.vercel.app/courses) or [sponsoring](https://github.com/sponsors/mayank1513) our work.
12960
13061
<hr />

0 commit comments

Comments
 (0)