@shardev/vite-plugin-modular 1.1.0 → 1.2.0
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.
- package/README.md +81 -172
- package/dist/index.cjs +128 -219
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -9
- package/dist/index.d.ts +2 -9
- package/dist/index.js +128 -219
- package/dist/index.js.map +1 -1
- package/package.json +16 -11
package/README.md
CHANGED
|
@@ -1,240 +1,149 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @shardev/vite-plugin-modular
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
> Monorepo-ready. Namespace-aware. Production-focused.
|
|
3
|
+
Vite plugin for modular Laravel applications.
|
|
5
4
|
|
|
6
|
-
|
|
5
|
+
This plugin allows you to:
|
|
7
6
|
|
|
8
|
-
|
|
7
|
+
- Discover Vite modules inside `packages/`
|
|
8
|
+
- Automatically merge aliases and rollup inputs
|
|
9
|
+
- Enable per-module HMR
|
|
10
|
+
- Watch either `srcDir` or `publishedDir`
|
|
11
|
+
- Respect module enable/disable via `modules.json`
|
|
12
|
+
- Keep modules fully isolated
|
|
9
13
|
|
|
10
|
-
-
|
|
11
|
-
- 🔥 Namespace resolution (`vendor:package::file`)
|
|
12
|
-
- 🧠 Smart alias injection
|
|
13
|
-
- 🏗️ Workspace vs Published detection
|
|
14
|
-
- 📄 Manifest rewriting with namespaced keys
|
|
15
|
-
- ⚡ Compatible with **Vite 7+**
|
|
16
|
-
- 🧩 Designed for **Laravel + React + TypeScript** stacks
|
|
14
|
+
Designed for large-scale Laravel + modular monorepo architectures.
|
|
17
15
|
|
|
18
16
|
------------------------------------------------------------------------
|
|
19
17
|
|
|
20
|
-
|
|
18
|
+
# Installation
|
|
21
19
|
|
|
22
20
|
``` bash
|
|
23
|
-
npm install @shardev/vite-plugin --save-dev
|
|
21
|
+
npm install @shardev/vite-plugin-modular --save-dev
|
|
24
22
|
```
|
|
25
23
|
|
|
26
24
|
------------------------------------------------------------------------
|
|
27
25
|
|
|
28
|
-
|
|
26
|
+
# Architecture Overview
|
|
27
|
+
|
|
28
|
+
The system is composed of two plugins:
|
|
29
|
+
|
|
30
|
+
1. `laravelModule` -- Used inside each module.
|
|
31
|
+
2. `laravelModules` -- Used at the root Vite config to auto-discover
|
|
32
|
+
modules.
|
|
33
|
+
|
|
34
|
+
------------------------------------------------------------------------
|
|
35
|
+
|
|
36
|
+
# Module Structure Example
|
|
29
37
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
38
|
+
packages/
|
|
39
|
+
└── shardevcom/
|
|
40
|
+
└── blog/
|
|
41
|
+
├── vite.config.ts
|
|
42
|
+
└── resources/
|
|
43
|
+
└── react/
|
|
44
|
+
└── src/
|
|
45
|
+
└── main.ts
|
|
33
46
|
|
|
34
47
|
------------------------------------------------------------------------
|
|
35
48
|
|
|
36
|
-
#
|
|
49
|
+
# Module-Level Configuration
|
|
37
50
|
|
|
38
|
-
|
|
51
|
+
`packages/shardevcom/blog/vite.config.ts`
|
|
39
52
|
|
|
40
53
|
``` ts
|
|
41
54
|
import { defineConfig } from 'vite'
|
|
42
|
-
import
|
|
43
|
-
import { laravelModules } from '@shardev/vite-plugin'
|
|
55
|
+
import { laravelModule } from '@shardev/vite-plugin-modular'
|
|
44
56
|
|
|
45
57
|
export default defineConfig({
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
})
|
|
58
|
-
]
|
|
58
|
+
plugins: [
|
|
59
|
+
laravelModule({
|
|
60
|
+
name: 'blog',
|
|
61
|
+
mode: 'integrated',
|
|
62
|
+
srcDir: 'resources/react/src',
|
|
63
|
+
input: {
|
|
64
|
+
main: 'resources/react/src/main.ts'
|
|
65
|
+
},
|
|
66
|
+
buildDir: 'build/blog'
|
|
67
|
+
})
|
|
68
|
+
]
|
|
59
69
|
})
|
|
60
70
|
```
|
|
61
71
|
|
|
62
72
|
------------------------------------------------------------------------
|
|
63
73
|
|
|
64
|
-
|
|
74
|
+
# Root Configuration
|
|
65
75
|
|
|
66
|
-
`
|
|
76
|
+
`vite.config.ts`
|
|
67
77
|
|
|
68
78
|
``` ts
|
|
69
79
|
import { defineConfig } from 'vite'
|
|
70
|
-
import {
|
|
80
|
+
import { laravelModules } from '@shardev/vite-plugin-modular'
|
|
71
81
|
|
|
72
82
|
export default defineConfig({
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
83
|
+
plugins: [
|
|
84
|
+
laravelModules({
|
|
85
|
+
modulesDir: 'packages',
|
|
86
|
+
statusesFile: 'modules.json',
|
|
87
|
+
debug: false,
|
|
88
|
+
useMetaCache: true
|
|
89
|
+
})
|
|
90
|
+
]
|
|
79
91
|
})
|
|
80
92
|
```
|
|
81
93
|
|
|
82
94
|
------------------------------------------------------------------------
|
|
83
95
|
|
|
84
|
-
#
|
|
85
|
-
|
|
86
|
-
Inside your Laravel Blade view:
|
|
87
|
-
|
|
88
|
-
``` blade
|
|
89
|
-
<!DOCTYPE html>
|
|
90
|
-
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
91
|
-
<head>
|
|
92
|
-
<meta charset="utf-8">
|
|
93
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
94
|
-
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
95
|
-
<title>Module</title>
|
|
96
|
-
|
|
97
|
-
@viteReactRefresh
|
|
98
|
-
@vite(['shardevcom:packagemanager::index.tsx'])
|
|
99
|
-
</head>
|
|
100
|
-
<body>
|
|
101
|
-
<div id="packagesmanager"></div>
|
|
102
|
-
</body>
|
|
103
|
-
</html>
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
### ✅ What's happening here?
|
|
107
|
-
|
|
108
|
-
- `shardevcom:packagemanager::index.tsx`\
|
|
109
|
-
Uses the namespace format:
|
|
110
|
-
|
|
111
|
-
vendor:package::file
|
|
112
|
-
|
|
113
|
-
- The plugin resolves automatically to:
|
|
114
|
-
|
|
115
|
-
packages/shardevcom/packagemanager/resources/react/src/index.tsx
|
|
96
|
+
# Module Enable / Disable
|
|
116
97
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
This allows clean, modular asset loading directly from Blade without
|
|
120
|
-
manual path management.
|
|
121
|
-
|
|
122
|
-
------------------------------------------------------------------------
|
|
123
|
-
|
|
124
|
-
# 📂 Recommended Project Structure
|
|
125
|
-
|
|
126
|
-
project-root/
|
|
127
|
-
│
|
|
128
|
-
├─ packages/
|
|
129
|
-
│ └─ vendor/
|
|
130
|
-
│ └─ package/
|
|
131
|
-
│ ├─ resources/react/src/
|
|
132
|
-
│ └─ vite.config.ts
|
|
133
|
-
│
|
|
134
|
-
├─ resources/
|
|
135
|
-
├─ modules.json
|
|
136
|
-
└─ vite.config.ts
|
|
137
|
-
|
|
138
|
-
------------------------------------------------------------------------
|
|
139
|
-
|
|
140
|
-
# 📑 modules.json
|
|
141
|
-
|
|
142
|
-
Enable or disable modules easily:
|
|
98
|
+
Create a `modules.json` file:
|
|
143
99
|
|
|
144
100
|
``` json
|
|
145
101
|
{
|
|
146
|
-
|
|
147
|
-
|
|
102
|
+
"blog": true,
|
|
103
|
+
"shop": false
|
|
148
104
|
}
|
|
149
105
|
```
|
|
150
106
|
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
# 🧠 How It Works
|
|
154
|
-
|
|
155
|
-
### 🔍 Module Discovery
|
|
156
|
-
|
|
157
|
-
- Scans `packages/`
|
|
158
|
-
- Loads each module's `vite.config.ts`
|
|
159
|
-
- Extracts metadata from `laravelModule()`
|
|
107
|
+
If a module is set to `false`, it will not be loaded.
|
|
160
108
|
|
|
161
109
|
------------------------------------------------------------------------
|
|
162
110
|
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
You can reference files like:
|
|
111
|
+
# Watch Behavior
|
|
166
112
|
|
|
167
|
-
|
|
113
|
+
Each module registers a watcher based on:
|
|
168
114
|
|
|
169
|
-
|
|
115
|
+
usePublished && publishedDir ? publishedDir : srcDir
|
|
170
116
|
|
|
171
|
-
|
|
117
|
+
This allows:
|
|
172
118
|
|
|
173
|
-
|
|
119
|
+
- Developing directly from source
|
|
120
|
+
- Or watching compiled/published output
|
|
174
121
|
|
|
175
122
|
------------------------------------------------------------------------
|
|
176
123
|
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
The plugin rewrites `manifest.json` and injects:
|
|
180
|
-
|
|
181
|
-
vendor:package::file.tsx
|
|
182
|
-
|
|
183
|
-
So Laravel can resolve namespaced assets cleanly.
|
|
184
|
-
|
|
185
|
-
------------------------------------------------------------------------
|
|
186
|
-
|
|
187
|
-
# ⚙ API
|
|
188
|
-
|
|
189
|
-
## laravelModules(options)
|
|
190
|
-
|
|
191
|
-
Option Type Default
|
|
192
|
-
-------------- -------- ----------------
|
|
193
|
-
modulesDir string "packages"
|
|
194
|
-
statusesFile string "modules.json"
|
|
124
|
+
# HMR Behavior
|
|
195
125
|
|
|
196
|
-
|
|
126
|
+
When a file changes inside a module:
|
|
197
127
|
|
|
198
|
-
|
|
128
|
+
- The module graph invalidates the affected module
|
|
129
|
+
- A manual HMR update is triggered
|
|
130
|
+
- Only the affected module is refreshed
|
|
199
131
|
|
|
200
|
-
|
|
201
|
-
-------------- ------------ ------------------------
|
|
202
|
-
name string required
|
|
203
|
-
vendor string "shardevcom"
|
|
204
|
-
srcDir string "resources/react/src"
|
|
205
|
-
inputs string\[\] \["main.tsx"\]
|
|
206
|
-
buildDir string build/{vendor}/{name}
|
|
207
|
-
publishedDir string resources/react/{name}
|
|
132
|
+
This ensures isolation between modules.
|
|
208
133
|
|
|
209
134
|
------------------------------------------------------------------------
|
|
210
135
|
|
|
211
|
-
#
|
|
212
|
-
|
|
213
|
-
``` bash
|
|
214
|
-
npm run build
|
|
215
|
-
npm run dev
|
|
216
|
-
```
|
|
217
|
-
|
|
218
|
-
------------------------------------------------------------------------
|
|
136
|
+
# Production Behavior
|
|
219
137
|
|
|
220
|
-
|
|
138
|
+
During `vite build`:
|
|
221
139
|
|
|
222
|
-
|
|
140
|
+
- All module inputs are merged
|
|
141
|
+
- Aliases are merged
|
|
142
|
+
- Rollup handles all entries
|
|
143
|
+
- Outputs remain isolated per module
|
|
223
144
|
|
|
224
145
|
------------------------------------------------------------------------
|
|
225
146
|
|
|
226
|
-
#
|
|
227
|
-
|
|
228
|
-
This plugin is designed to evolve into a **modular frontend framework
|
|
229
|
-
layer for Laravel**.
|
|
230
|
-
|
|
231
|
-
It enables:
|
|
232
|
-
|
|
233
|
-
- Enterprise module isolation
|
|
234
|
-
- Frontend domain separation
|
|
235
|
-
- Scalable monorepo architecture
|
|
236
|
-
- Clean namespace asset resolution
|
|
237
|
-
|
|
238
|
-
------------------------------------------------------------------------
|
|
147
|
+
# License
|
|
239
148
|
|
|
240
|
-
|
|
149
|
+
MIT
|