@kohi9noor/hotloop 1.3.0 → 1.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +2 -2
  2. package/readme.md +53 -132
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kohi9noor/hotloop",
3
- "version": "1.3.0",
3
+ "version": "1.3.3",
4
4
  "description": "Minimal, framework-free development tool for small-scale browser extensions. TypeScript, HMR, and Node module support—nothing else.",
5
5
  "author": "kohi9noor",
6
6
  "license": "MIT",
@@ -30,11 +30,11 @@
30
30
  "dist"
31
31
  ],
32
32
  "dependencies": {
33
+ "esbuild": "^0.27.3",
33
34
  "ws": "^8.19.0"
34
35
  },
35
36
  "devDependencies": {
36
37
  "@types/node": "^25.3.2",
37
- "esbuild": "^0.27.3",
38
38
  "typescript": "^5.9.3"
39
39
  }
40
40
  }
package/readme.md CHANGED
@@ -1,107 +1,29 @@
1
1
  # Hotloop
2
2
 
3
- Minimal development tooling for browser extensions.
4
-
5
- TypeScript. HMR. Node modules.
6
- No frameworks. No plugin circus.
7
-
8
- ---
9
-
10
- ## Why Hotloop Exists
11
-
12
- Most extension tooling assumes you're building a mini web app.
13
-
14
- They integrate Vite pipelines, plugin systems, framework layers, and opinionated structures. That’s great for complex extensions with routing, heavy UI, or framework-driven architecture.
15
-
16
- But what if you're not?
17
-
18
- What if:
19
-
20
- - You're building a small extension with 2–5 focused features
21
- - You want clean architecture
22
- - You want TypeScript
23
- - You want fast rebuilds
24
- - You want node module support
25
- - But you **don’t** want React, Vue, or framework assumptions
26
-
27
- Hotloop is built for that.
28
-
29
- It gives you modern development essentials without pushing you into a frontend framework ecosystem.
30
-
31
- It doesn’t try to define your architecture.
32
- It just improves your development loop.
33
-
34
- ---
35
-
36
- ## Philosophy
37
-
38
- Hotloop is built around one idea:
39
-
40
- You should be able to write vanilla extension code
41
- with proper engineering discipline
42
- without importing half the frontend world.
43
-
44
- You get:
45
-
46
- - TypeScript for safety
47
- - esbuild for speed
48
- - HMR for fast iteration
49
- - Node module support
50
- - A single config file
51
- - No framework lock-in
52
-
53
- That’s it.
54
-
55
- If you want routing systems, plugin ecosystems, or integrated framework support, tools like WXT or CRXJS are excellent choices.
56
-
57
- Hotloop intentionally stays smaller.
58
-
59
- ---
60
-
61
- ## Comparison
62
-
63
- | Feature | Hotloop | WXT | CRXJS |
64
- | --------------------- | ---------------- | -------------------------- | ----------------------- |
65
- | TypeScript Support | ✅ | ✅ | ✅ |
66
- | Hot Module Reloading | ✅ | ✅ | ✅ |
67
- | Node Module Support | ✅ | ✅ | ✅ |
68
- | Build System | esbuild | Vite | Vite |
69
- | Framework Assumptions | ❌ | Optional | Optional |
70
- | Plugin Ecosystem | ❌ | ✅ | ✅ |
71
- | Config Complexity | Minimal | Moderate | Moderate |
72
- | Best For | Small extensions | Structured / scalable apps | Chrome-focused projects |
73
-
74
- Hotloop does less on purpose.
75
-
76
- ---
3
+ Minimal development tooling for browser extensions. TypeScript. HMR. Node modules. No frameworks. No plugin circus.
77
4
 
78
5
  ## Getting Started
79
6
 
80
7
  ### Create a New Project
81
8
 
82
- Scaffold a new extension project using `npx`:
9
+ Scaffold a new extension project instantly:
83
10
 
84
11
  ```bash
85
- npx hotloop init my-extension
12
+ npx @kohi9noor/hotloop init my-extension
86
13
  cd my-extension
87
14
  npm install
88
- ```
89
-
90
- Then start development:
91
-
92
- ```bash
93
15
  npm run dev
94
16
  ```
95
17
 
96
18
  ### Install in an Existing Project
97
19
 
98
- Install as a dev dependency:
20
+ Install the dependency:
99
21
 
100
22
  ```bash
101
- npm install --save-dev hotloop
23
+ npm install --save-dev @kohi9noor/hotloop
102
24
  ```
103
25
 
104
- Add scripts to your `package.json`:
26
+ Add scripts to package.json:
105
27
 
106
28
  ```json
107
29
  {
@@ -112,76 +34,75 @@ Add scripts to your `package.json`:
112
34
  }
113
35
  ```
114
36
 
115
- Run:
37
+ ### Configure and Run
116
38
 
117
- ```bash
118
- npm run dev
119
- ```
120
-
121
- Build for production:
122
-
123
- ```bash
124
- npm run build
125
- ```
39
+ Create your config (see below), then run `npm run dev` and load the `dist` directory as an unpacked extension in your browser.
126
40
 
127
- Load the `dist` directory as an unpacked extension.
41
+ ## Configuration
128
42
 
129
- Configuration
130
-
131
- Create a hotloop.config.js in your project root:
43
+ Create a `hotloop.config.js` in your project root. This is the entire configuration surface—no plugin arrays or layered overrides.
132
44
 
45
+ ```javascript
133
46
  export default {
134
- entries: [
135
- { input: "src/background/index.ts", output: "dist/background/index.js" },
136
- { input: "src/content/index.ts", output: "dist/content/index.js" },
137
- { input: "src/ui/popup.ts", output: "dist/ui/popup.js" },
138
- ],
139
-
140
- manifest: {
141
- src: "src/manifest.json",
142
- dest: "dist/manifest.json",
143
-
47
+ entries: [
48
+ { input: "src/background/index.ts", output: "dist/background/index.js" },
49
+ { input: "src/content/index.ts", output: "dist/content/index.js" },
50
+ { input: "src/ui/popup.ts", output: "dist/ui/popup.js" },
51
+ ],
52
+
53
+ manifest: {
54
+ src: "src/manifest.json",
55
+ dest: "dist/manifest.json",
144
56
  // Injects HMR client only in development mode
145
57
  hmrMatches: ["<all_urls>"],
58
+ },
146
59
 
147
- },
60
+ copy: [
61
+ { src: "src/ui/popup.html", dest: "dist/ui/popup.html" },
62
+ { src: "src/ui/popup.css", dest: "dist/ui/popup.css" },
63
+ ],
148
64
 
149
- copy: [
150
- { src: "src/ui/popup.html", dest: "dist/ui/popup.html" },
151
- { src: "src/ui/popup.css", dest: "dist/ui/popup.css" },
152
- ],
153
-
154
- port: 8000,
65
+ port: 8000,
155
66
  };
67
+ ```
68
+
69
+ ## Philosophy
156
70
 
157
- That’s the entire configuration surface.
71
+ Hotloop is built around one idea: You should be able to write vanilla extension code with proper engineering discipline without importing half the frontend world.
158
72
 
159
- No plugin arrays.
160
- No layered overrides.
161
- No framework presets.
73
+ Most extension tooling assumes you're building a complex web app with routing and heavy UI. Hotloop is for when you want:
162
74
 
163
- ## Features
75
+ - Clean architecture without React/Vue.
76
+ - TypeScript safety and Node module support.
77
+ - Fast rebuilds that don't break your flow.
164
78
 
165
- **Entry Points** – Bundle background scripts, content scripts, and UI scripts independently.
79
+ It doesn't try to define your architecture; it just improves your development loop.
166
80
 
167
- **Manifest Handling** – Copies and optionally injects development scripts during dev mode.
81
+ ## Features
168
82
 
169
- **Hot Module Reloading** – WebSocket-based HMR improves iteration speed without full extension reload cycles.
83
+ - **Fast Builds** – Powered by esbuild for near-instant rebuilds.
84
+ - **Hot Module Reloading** – WebSocket-based HMR improves iteration speed without full extension reload cycles.
85
+ - **Entry Points** – Bundle background scripts, content scripts, and UI scripts independently.
86
+ - **Manifest Handling** – Automatically copies and injects development scripts during dev mode.
87
+ - **Node Modules** – Import npm packages compatible with browser environments seamlessly.
170
88
 
171
- **Node Modules** – Import npm packages compatible with browser environments.
89
+ ## Comparison
172
90
 
173
- **Fast Builds** – Powered by esbuild for near-instant rebuilds.
91
+ | Feature | Hotloop | WXT | CRXJS |
92
+ | :---------------- | :--------------- | :------------------------- | :---------------------- |
93
+ | Build System | esbuild | Vite | Vite |
94
+ | Frameworks | None (Vanilla) | Optional | Optional |
95
+ | HMR | ✅ | ✅ | ✅ |
96
+ | Config Complexity | Minimal | Moderate | Moderate |
97
+ | Best For | Small extensions | Structured / scalable apps | Chrome-focused projects |
174
98
 
175
99
  ## What Hotloop Is Not
176
100
 
177
- - Not a UI framework
178
- - Not a plugin platform
179
- - Not an opinionated architecture
180
- - Not a meta-framework
181
-
182
- It’s a dev loop optimizer for vanilla extensions.
101
+ - Not a UI framework.
102
+ - Not a plugin platform.
103
+ - Not an opinionated architecture.
104
+ - Not a meta-framework.
183
105
 
184
106
  ## License
185
107
 
186
108
  MIT
187
-