Skip to content

Commit dbb838e

Browse files
mayank1513mayank1513
committed
Update readme
1 parent 9ef0317 commit dbb838e

File tree

3 files changed

+104
-196
lines changed

3 files changed

+104
-196
lines changed

‎.tkb‎

Lines changed: 2 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,16 @@
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": "run `yarn rebrand` to rebrand and clean up the repo; the `rebrand` script will automatically rebrand the repo, adjust workflows, and create a commit",
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": "Install dependencies using `pnpm`: run `pnpm i`.",
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-
},
29-
"RX4J5v4y5IOe_ucf8pMRT": {
30-
"id": "RX4J5v4y5IOe_ucf8pMRT",
31-
"description": "🌟 Enable [private vulnerability reporting](https://github.com/tiny-md/esbuild-plugin-peggy/security) (For public repo - do this after updating visibility to public)",
32-
"columnId": "column-todo"
33-
},
34-
"EdPbrbJLllUHfZmCS80f7": {
35-
"id": "EdPbrbJLllUHfZmCS80f7",
36-
"description": "Set up `CodeCov`\n - Visit Codecov and set up your repo\n - Create [repository secret]((https://github.com/tiny-md/esbuild-plugin-peggy/settings/secrets/actions)) for `CODECOV_TOKEN`",
37-
"columnId": "column-todo"
38-
},
394
"MLLUsAhCKaKxvEXFY0HSq": {
405
"id": "MLLUsAhCKaKxvEXFY0HSq",
416
"description": "Set up `CodeClimate`\n - Visit CodeClimate and set up your repo\n - Create [repository secret] for `CC_TEST_REPORTER_ID`\n - Add `*.test.*` to ignore patterns on the website\n - Update Code Climate badge",
427
"columnId": "column-todo"
438
},
44-
"gMYfaAh2RABMP8uZRQgNx": {
45-
"id": "gMYfaAh2RABMP8uZRQgNx",
46-
"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`",
47-
"columnId": "column-todo"
48-
},
49-
"_BfuX7quWBANpDK1bI7YM": {
50-
"id": "_BfuX7quWBANpDK1bI7YM",
51-
"description": "Update description in `lib/package.json`",
52-
"columnId": "column-todo"
53-
},
54-
"dC7QDBLH8BmHUfaYmIt81": {
55-
"id": "dC7QDBLH8BmHUfaYmIt81",
56-
"description": "(Optional) Add Repo Stats by visiting and setting up [repobeats](https://repobeats.axiom.co/)",
57-
"columnId": "column-todo"
58-
},
59-
"P_NrSJQ8m91Odgz8E1fS6": {
60-
"id": "P_NrSJQ8m91Odgz8E1fS6",
61-
"description": "Create your library and update examples",
62-
"columnId": "column-todo"
63-
},
649
"1dRWJhy45E1Rq5wZAmPHt": {
6510
"id": "1dRWJhy45E1Rq5wZAmPHt",
6611
"description": "Update README as required",
6712
"columnId": "column-todo"
6813
},
69-
"5vS1JNXoMhDl5IBljwh2v": {
70-
"id": "5vS1JNXoMhDl5IBljwh2v",
71-
"description": "Set up GitHub pages to deploy docs\n - Go to [repo settings](https://github.com/tiny-md/esbuild-plugin-peggy/settings/pages) -> pages (On the left panel); Select deploy from a branch; Then Select `main` and `/docs`",
72-
"columnId": "column-todo"
73-
},
74-
"55DAZwduwTvlaxaJC8hlX": {
75-
"id": "55DAZwduwTvlaxaJC8hlX",
76-
"description": "(Optional) Set up [Deepsource](https://app.deepsource.com/login) for static code analysis",
77-
"columnId": "column-todo"
78-
},
79-
"FDFqCQvLm2mUlnTJ3Gna5": {
80-
"id": "FDFqCQvLm2mUlnTJ3Gna5",
81-
"description": "Push your changes/Create PR and see your library being automatically tested and published",
82-
"columnId": "column-todo"
83-
},
84-
"O1qAByMoxhHOR-a_guL91": {
85-
"id": "O1qAByMoxhHOR-a_guL91",
86-
"description": "Optionally deploy your examples to Vercel.",
87-
"columnId": "column-todo"
88-
},
89-
"0499BqWDwJ5cxqtC9Nr82": {
90-
"id": "0499BqWDwJ5cxqtC9Nr82",
91-
"description": "Feel free to star this template, contribute, and/or sponsor the [`terborepo-template`](https://github.com/react18-tools/turborepo-template) project or my [other open-source work](https://github.com/sponsors/mayank1513)",
92-
"columnId": "column-todo"
93-
},
94-
"IjuAtNquJ4-Ut874rHKIW": {
95-
"id": "IjuAtNquJ4-Ut874rHKIW",
96-
"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.",
97-
"columnId": "column-todo"
98-
},
9914
"_JiH9RZLmUF5nxD7lBC5B": {
10015
"id": "_JiH9RZLmUF5nxD7lBC5B",
10116
"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.",
@@ -117,25 +32,8 @@
11732
"id": "column-todo",
11833
"title": "To do",
11934
"tasksIds": [
120-
"G-1H47JpSI69kav1qZ-kp",
121-
"Y5__aEZl3Pbxp7r90HKpV",
122-
"jcpymbi71e702p7n6fwvZ",
123-
"gbzyhx0FwFfzRoE-iqVeu",
124-
"jdZxwLymOo7w2eZeNpvsN",
125-
"RX4J5v4y5IOe_ucf8pMRT",
126-
"EdPbrbJLllUHfZmCS80f7",
12735
"MLLUsAhCKaKxvEXFY0HSq",
128-
"gMYfaAh2RABMP8uZRQgNx",
129-
"_BfuX7quWBANpDK1bI7YM",
130-
"dC7QDBLH8BmHUfaYmIt81",
131-
"P_NrSJQ8m91Odgz8E1fS6",
132-
"1dRWJhy45E1Rq5wZAmPHt",
133-
"5vS1JNXoMhDl5IBljwh2v",
134-
"55DAZwduwTvlaxaJC8hlX",
135-
"FDFqCQvLm2mUlnTJ3Gna5",
136-
"O1qAByMoxhHOR-a_guL91",
137-
"0499BqWDwJ5cxqtC9Nr82",
138-
"IjuAtNquJ4-Ut874rHKIW"
36+
"1dRWJhy45E1Rq5wZAmPHt"
13937
]
14038
},
14139
{
@@ -153,4 +51,4 @@
15351
]
15452
}
15553
]
156-
}
54+
}

‎README.md‎

Lines changed: 81 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,28 @@
1-
# Esbuild Plugin Peggy <img src="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png" style="height: 40px"/>
1+
# Esbuild Plugin Peggy <img src="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png" height="40" alt="popper"/>
22

3-
[![test](https://github.com/tiny-md/esbuild-plugin-peggy/actions/workflows/test.yml/badge.svg)](https://github.com/tiny-md/esbuild-plugin-peggy/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/aa896ec14c570f3bb274/maintainability)](https://codeclimate.com/github/tiny-md/esbuild-plugin-peggy/maintainability) [![codecov](https://codecov.io/gh/tiny-md/esbuild-plugin-peggy/graph/badge.svg)](https://codecov.io/gh/tiny-md/esbuild-plugin-peggy) [![Version](https://img.shields.io/npm/v/esbuild-plugin-peggy.svg?colorB=green)](https://www.npmjs.com/package/esbuild-plugin-peggy) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/esbuild-plugin-peggy.svg)](https://www.npmjs.com/package/esbuild-plugin-peggy) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/esbuild-plugin-peggy) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
3+
[![Test](https://github.com/tiny-md/esbuild-plugin-peggy/actions/workflows/test.yml/badge.svg)](https://github.com/tiny-md/esbuild-plugin-peggy/actions/workflows/test.yml)
4+
[![Maintainability](https://api.codeclimate.com/v1/badges/aa896ec14c570f3bb274/maintainability)](https://codeclimate.com/github/tiny-md/esbuild-plugin-peggy/maintainability)
5+
[![Coverage](https://codecov.io/gh/tiny-md/esbuild-plugin-peggy/graph/badge.svg)](https://codecov.io/gh/tiny-md/esbuild-plugin-peggy)
6+
[![npm version](https://img.shields.io/npm/v/esbuild-plugin-peggy.svg?colorB=green)](https://www.npmjs.com/package/esbuild-plugin-peggy)
7+
[![npm downloads](https://img.shields.io/npm/dm/esbuild-plugin-peggy.svg)](https://www.npmjs.com/package/esbuild-plugin-peggy)
8+
[![Bundle size](https://img.shields.io/bundlephobia/minzip/esbuild-plugin-peggy)](https://bundlephobia.com/package/esbuild-plugin-peggy)
9+
[![Gitpod Ready](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
410

5-
Esbuild Plugin Peggy 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.
11+
> 🔌 Seamlessly load `.pegjs` or `.peggy` grammar files directly into your esbuild pipeline
612
7-
✅ Fully Treeshakable (import from `esbuild-plugin-peggy/client/loader-container`)
13+
---
814

9-
✅ Fully TypeScript Supported
15+
## ✨ Features
1016

11-
✅ Leverages the power of React 18 Server components
17+
- Compile `.pegjs` / `.peggy` files as ES modules with zero config
18+
- Fully compatible with both **JavaScript** and **TypeScript**
19+
- No Node.js-only dependencies get into your codebase — frontend safe!
20+
- Supports custom parser options and per-file overrides
21+
- Simple, fast, and modern integration with esbuild
1222

13-
✅ Compatible with all React 18 build systems/tools/frameworks
23+
---
1424

15-
✅ Documented with [Typedoc](https://tiny-md.github.io/esbuild-plugin-peggy) ([Docs](https://tiny-md.github.io/esbuild-plugin-peggy))
16-
17-
✅ Examples for Next.js, and Vite
18-
19-
> <img src="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png" style="height: 20px"/> Star [this repository](https://github.com/tiny-md/esbuild-plugin-peggy) and share it with your friends.
20-
21-
## Getting Started
22-
23-
### Installation
25+
## 📦 Installation
2426

2527
```bash
2628
pnpm add esbuild-plugin-peggy
@@ -38,95 +40,99 @@ npm install esbuild-plugin-peggy
3840
yarn add esbuild-plugin-peggy
3941
```
4042

41-
## Want Lite Version? [![npm bundle size](https://img.shields.io/bundlephobia/minzip/esbuild-plugin-peggy-lite)](https://www.npmjs.com/package/esbuild-plugin-peggy-lite) [![Version](https://img.shields.io/npm/v/esbuild-plugin-peggy-lite.svg?colorB=green)](https://www.npmjs.com/package/esbuild-plugin-peggy-lite) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/esbuild-plugin-peggy-lite.svg)](https://www.npmjs.com/package/esbuild-plugin-peggy-lite)
43+
---
4244

43-
```bash
44-
pnpm add esbuild-plugin-peggy-lite
45-
```
45+
## 🚀 Usage
4646

47-
**or**
47+
```ts
48+
// esbuild.config.ts
49+
import { build } from "esbuild";
50+
import { peggyPlugin } from "esbuild-plugin-peggy";
4851

49-
```bash
50-
npm install esbuild-plugin-peggy-lite
52+
build({
53+
entryPoints: ["src/index.ts"],
54+
bundle: true,
55+
outfile: "dist/bundle.js",
56+
plugins: [peggyPlugin()],
57+
});
5158
```
5259

53-
**or**
60+
Then in your source code:
5461

55-
```bash
56-
yarn add esbuild-plugin-peggy-lite
62+
```ts
63+
import parser from "./grammar.pegjs";
64+
65+
const result = parser.parse("your input here");
5766
```
5867

59-
> You need `r18gs` as a peer-dependency
68+
---
6069

61-
### Import Styles
70+
## ⚙️ Plugin Options
6271

63-
You can import styles globally or within specific components.
72+
You can pass either a global config or a list of per-file configs using `ParserBuildOptions` from [peggy](https://github.com/peggyjs/peggy).
6473

65-
```css
66-
/* globals.css */
67-
@import "esbuild-plugin-peggy/dist";
68-
```
74+
### Global options
6975

70-
```tsx
71-
// layout.tsx
72-
import "esbuild-plugin-peggy/dist/index.css";
76+
```ts
77+
peggyPlugin({
78+
allowedStartRules: ["Expression"],
79+
});
7380
```
7481

75-
For selective imports:
82+
### Per-file options
7683

77-
```css
78-
/* globals.css */
79-
@import "esbuild-plugin-peggy/dist/client"; /** required if you are using LoaderContainer */
80-
@import "esbuild-plugin-peggy/dist/server/bars/bars1";
84+
```ts
85+
peggyPlugin([
86+
{
87+
pathPattern: /calculator\.pegjs$/,
88+
options: { allowedStartRules: ["Calc"] },
89+
},
90+
]);
8191
```
8292

83-
### Usage
93+
---
94+
95+
## 📁 Supported File Types
96+
97+
- `.pegjs`
98+
- `.peggy`
8499

85-
Using loaders is straightforward.
100+
---
86101

87-
```tsx
88-
import { Bars1 } from "esbuild-plugin-peggy/dist/server/bars/bars1";
102+
## 🛠 Example
89103

90-
export default function MyComponent() {
91-
return someCondition ? <Bars1 /> : <>Something else...</>;
92-
}
104+
```ts
105+
import parser from "./math.pegjs";
106+
107+
console.log(parser.parse("2 + 2")); // 4
93108
```
94109

95-
For detailed API and options, refer to [the API documentation](https://tiny-md.github.io/esbuild-plugin-peggy).
110+
---
96111

97-
**Using LoaderContainer**
112+
## ✅ Why Use This?
98113

99-
`LoaderContainer` is a fullscreen component. You can add this component directly in your layout and then use `useLoader` hook to toggle its visibility.
114+
- Skip manual parser builds — just import and use
115+
- Compatible with modern tooling and frameworks
116+
- Great for in-browser parsing and visual tooling
117+
- Keeps frontend builds clean of Node-only deps
100118

101-
```tsx
102-
// layout.tsx
103-
<LoaderContainer />
104-
...
105-
```
119+
---
106120

107-
```tsx
108-
// some other page or component
109-
import { useLoader } from "esbuild-plugin-peggy/dist/hooks";
110-
111-
export default MyComponent() {
112-
const { setLoading } = useLoader();
113-
useCallback(()=>{
114-
setLoading(true);
115-
...do some work
116-
setLoading(false);
117-
}, [])
118-
...
119-
}
120-
```
121+
> <img src="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png" height="20"/>
122+
> Star this [repository](https://github.com/tiny-md/esbuild-plugin-peggy) and share it with friends.
121123
122-
## License
124+
---
123125

124-
This library is licensed under the MPL-2.0 open-source license.
126+
## 📜 License
125127

128+
Licensed under the **MPL-2.0** license.
129+
© [Mayank Chaudhari](https://github.com/mayank1513)
126130

131+
---
127132

128-
> <img src="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png" style="height: 20px"/> Please enroll in [our courses](https://mayank-chaudhari.vercel.app/courses) or [sponsor](https://github.com/sponsors/mayank1513) our work.
133+
> <img src="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png" height="20"/>
134+
> 📚 Enroll in [our courses](https://mayank-chaudhari.vercel.app/courses) or [sponsor](https://github.com/sponsors/mayank1513) our work.
129135
130-
<hr />
136+
---
131137

132-
<p align="center" style="text-align:center">with 💖 by <a href="https://mayank-chaudhari.vercel.app" target="_blank">Mayank Kumar Chaudhari</a></p>
138+
<p align="center"><sub>Made with 💖 by <a href="https://mayank-chaudhari.vercel.app" target="_blank">Mayank Kumar Chaudhari</a></sub></p>

‎lib/package.json‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -52,22 +52,26 @@
5252
}
5353
],
5454
"keywords": [
55-
"React",
56-
"React Loaders",
57-
"React 18",
58-
"React 19",
59-
"Next.js",
60-
"Next.js 14",
61-
"Next.js 15",
62-
"React server components",
63-
"Customizable",
64-
"Cutting-edge",
65-
"Compatibility",
66-
"Frontend development",
67-
"UI components",
68-
"Web development",
69-
"Progressive",
70-
"Modern",
71-
"Seamless integration"
55+
"esbuild",
56+
"esbuild-plugin",
57+
"peggy",
58+
"pegjs",
59+
"peg",
60+
"parser",
61+
"grammar",
62+
"peg-parser",
63+
"esbuild-peggy",
64+
"esbuild-loader",
65+
"pegjs-loader",
66+
"peggy-loader",
67+
"typescript",
68+
"javascript",
69+
"frontend",
70+
"build-tool",
71+
"plugin",
72+
"syntax-parser",
73+
"compiler",
74+
"frontend-development",
75+
"mayank1513"
7276
]
7377
}

0 commit comments

Comments
 (0)