You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+5-2Lines changed: 5 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,15 +10,18 @@
10
10
11
11
**Lightweight ESBuild/TSUP plugin to import files as raw content — zero config required.**
12
12
13
-
> Import `.ts`, `.js`, `.css`, `.scss`, `.md`, `.html`, `.docx`, and more — perfect for documentation, live editors (`react-live`), markdown tooling, or template-driven workflows.
14
-
> Power users: Load `.docx` templates directly for [mdast2docx](https://github.com/md2docx/mdast2docx).
13
+
> 🔌Import `.ts`, `.js`, `.css`, `.scss`, `.md`, `.html`, `.docx`, and more — perfect for documentation, live editors (`react-live`), markdown tooling, or template-driven workflows.
14
+
> ⚡️Power users: Load `.docx` templates directly for [mdast2docx](https://github.com/md2docx/mdast2docx).
15
15
16
16
> <imgsrc="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png"style="height: 20px"/> Star [this repository](https://github.com/react18-tools/esbuild-raw-plugin) and share it with your dev circle.
17
17
18
18
---
19
19
20
20
## 🚀 Features
21
21
22
+
> 🔥 Import any file as raw content with zero config in ESBuild or TSUP — text, base64, binary, docx templates & more!\
23
+
> ⚡️ Fast, smart, and extensible → `esbuild-raw-plugin`
**An ESBuild/TSUP plugin to import files as raw text.**
6
-
Ideal for scenarios like importing code files for documentation, interactive tools like `react-live`, or other text-based use cases.
11
+
**Lightweight ESBuild/TSUP plugin to import files as raw content — zero config required.**
7
12
8
-
> <imgsrc="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png"style="height: 20px"/> Star [this repository](https://github.com/react18-tools/esbuild-raw-plugin) and share it with your friends.
13
+
> 🔌Import `.ts`, `.js`, `.css`, `.scss`, `.md`, `.html`, `.docx`, and more — perfect for documentation, live editors (`react-live`), markdown tooling, or template-driven workflows.
14
+
> ⚡️Power users: Load `.docx` templates directly for [mdast2docx](https://github.com/md2docx/mdast2docx).
15
+
16
+
> <imgsrc="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png"style="height: 20px"/> Star [this repository](https://github.com/react18-tools/esbuild-raw-plugin) and share it with your dev circle.
9
17
10
18
---
11
19
12
-
## Features
20
+
## 🚀 Features
13
21
14
-
- Import any file (e.g., `.js`, `.ts`, `.css`, etc.) as raw text.
15
-
- Works seamlessly with **ESBuild** and **TSUP**.
16
-
- Perfect for documentation generators, live code editors, and similar tools.
22
+
> 🔥 Import any file as raw content with zero config in ESBuild or TSUP — text, base64, binary, docx templates & more!\
23
+
> ⚡️ Fast, smart, and extensible → `esbuild-raw-plugin`
Add the following to your declaration file. If you do not have one, create a `declarations.d.ts` file and add the following:
86
+
Add this to your `declarations.d.ts` file:
80
87
81
-
```typescript
88
+
```ts
82
89
declaremodule"*?raw" {
83
-
constvalue:string;
84
-
exportdefaultvalue;
90
+
constcontent:string;
91
+
exportdefaultcontent;
85
92
}
86
93
```
87
94
88
-
## Importing Files as Raw Text
95
+
> For other suffixes (`?base64`, `?binary`, etc.), add similar declarations if needed.
89
96
90
-
With the plugin enabled, you can import files as raw text directly:
97
+
---
98
+
99
+
## 📥 Importing Raw Files
91
100
92
-
```js
93
-
importmyCodefrom"./example.js?raw";
101
+
```ts
102
+
importcontentfrom"./example.js?raw";
94
103
95
-
console.log(myCode);
96
-
// Outputs the content of 'example.js' as a string.
104
+
console.log(content); // Entire file content as string or Buffer
97
105
```
98
106
99
-
### Good News:
107
+
### ✅ Simplified Imports
100
108
101
-
With the latest update, you no longer need to specify the file extension explicitly.
109
+
You don’t need to specify full filenames or extensions:
102
110
103
-
```js
104
-
importmyCodefrom"./example?raw";
111
+
```ts
112
+
importcodefrom"./utils?raw";// Resolves to utils/index.ts, utils.js, etc.
105
113
```
106
114
107
-
This works seamlessly! Additionally, if you're exporting from files like `index.tsx`, `index.jsx`, etc., you can simplify imports. For example, if your file path is `my-lib/index.ts`, you can import the raw content like this:
115
+
Great for:
108
116
109
-
```js
110
-
importmyCodefrom"./my-lib?raw";
111
-
```
117
+
- Library or folder-level imports
118
+
- Auto-resolving `.ts`, `.tsx`, `.css`, `.scss`, etc.
119
+
120
+
---
112
121
113
-
### Extension Options (Optional)
122
+
##⚙️ Plugin Options
114
123
115
124
```ts
116
125
exportinterfaceRawPluginOptions {
117
-
/**
118
-
* Extensions to check in order if the file does not exist.
119
-
* If it's a directory, the plugin will look for `dir/index.[ext]`.
This library is licensed under the MPL-2.0 open-source license.
215
+
Licensed under the **MPL-2.0** open-source license.
203
216
204
-
> <imgsrc="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.
217
+
> <imgsrc="https://raw.githubusercontent.com/mayank1513/mayank1513/main/popper.png"style="height: 20px"/> Please consider [sponsoring](https://github.com/sponsors/mayank1513) or [joining a course](https://mayank-chaudhari.vercel.app/courses) to support this work.
205
218
206
-
<hr />
219
+
---
207
220
208
221
<palign="center"style="text-align:center">with 💖 by <ahref="https://mayank-chaudhari.vercel.app"target="_blank">Mayank Kumar Chaudhari</a></p>
0 commit comments