@shardev/vite-plugin-modular 1.1.1 โ 1.2.1
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 +80 -171
- package/dist/index.cjs +137 -220
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -9
- package/dist/index.d.ts +3 -9
- package/dist/index.js +137 -220
- package/dist/index.js.map +1 -1
- package/package.json +16 -11
package/README.md
CHANGED
|
@@ -1,23 +1,21 @@
|
|
|
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
21
|
npm install @shardev/vite-plugin-modular --save-dev
|
|
@@ -25,216 +23,127 @@ npm install @shardev/vite-plugin-modular --save-dev
|
|
|
25
23
|
|
|
26
24
|
------------------------------------------------------------------------
|
|
27
25
|
|
|
28
|
-
|
|
26
|
+
# Architecture Overview
|
|
27
|
+
|
|
28
|
+
The system is composed of two plugins:
|
|
29
29
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
1. `laravelModule` -- Used inside each module.
|
|
31
|
+
2. `laravelModules` -- Used at the root Vite config to auto-discover
|
|
32
|
+
modules.
|
|
33
33
|
|
|
34
34
|
------------------------------------------------------------------------
|
|
35
35
|
|
|
36
|
-
#
|
|
36
|
+
# Module Structure Example
|
|
37
37
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
plugins: [
|
|
47
|
-
laravelModules({
|
|
48
|
-
modulesDir: "packages",
|
|
49
|
-
statusesFile: "modules.json"
|
|
50
|
-
}),
|
|
51
|
-
laravel({
|
|
52
|
-
input: [
|
|
53
|
-
'resources/css/app.css',
|
|
54
|
-
'resources/react/app.tsx'
|
|
55
|
-
],
|
|
56
|
-
refresh: true
|
|
57
|
-
})
|
|
58
|
-
]
|
|
59
|
-
})
|
|
60
|
-
```
|
|
38
|
+
packages/
|
|
39
|
+
โโโ shardevcom/
|
|
40
|
+
โโโ blog/
|
|
41
|
+
โโโ vite.config.ts
|
|
42
|
+
โโโ resources/
|
|
43
|
+
โโโ react/
|
|
44
|
+
โโโ src/
|
|
45
|
+
โโโ main.ts
|
|
61
46
|
|
|
62
47
|
------------------------------------------------------------------------
|
|
63
48
|
|
|
64
|
-
|
|
49
|
+
# Module-Level Configuration
|
|
65
50
|
|
|
66
|
-
`packages/
|
|
51
|
+
`packages/shardevcom/blog/vite.config.ts`
|
|
67
52
|
|
|
68
53
|
``` ts
|
|
69
54
|
import { defineConfig } from 'vite'
|
|
70
55
|
import { laravelModule } from '@shardev/vite-plugin-modular'
|
|
71
56
|
|
|
72
57
|
export default defineConfig({
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
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
|
+
]
|
|
79
69
|
})
|
|
80
70
|
```
|
|
81
71
|
|
|
82
72
|
------------------------------------------------------------------------
|
|
83
73
|
|
|
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:
|
|
74
|
+
# Root Configuration
|
|
110
75
|
|
|
111
|
-
|
|
76
|
+
`vite.config.ts`
|
|
112
77
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
Or to the published path if it exists.
|
|
118
|
-
|
|
119
|
-
This allows clean, modular asset loading directly from Blade without
|
|
120
|
-
manual path management.
|
|
121
|
-
|
|
122
|
-
------------------------------------------------------------------------
|
|
123
|
-
|
|
124
|
-
# ๐ Recommended Project Structure
|
|
78
|
+
``` ts
|
|
79
|
+
import { defineConfig } from 'vite'
|
|
80
|
+
import { laravelModules } from '@shardev/vite-plugin-modular'
|
|
125
81
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
82
|
+
export default defineConfig({
|
|
83
|
+
plugins: [
|
|
84
|
+
laravelModules({
|
|
85
|
+
modulesDir: 'packages',
|
|
86
|
+
statusesFile: 'modules.json',
|
|
87
|
+
debug: false,
|
|
88
|
+
useMetaCache: true
|
|
89
|
+
})
|
|
90
|
+
]
|
|
91
|
+
})
|
|
92
|
+
```
|
|
137
93
|
|
|
138
94
|
------------------------------------------------------------------------
|
|
139
95
|
|
|
140
|
-
#
|
|
96
|
+
# Module Enable / Disable
|
|
141
97
|
|
|
142
|
-
|
|
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:
|
|
166
|
-
|
|
167
|
-
vendor:package::components/Button.tsx
|
|
111
|
+
# Watch Behavior
|
|
168
112
|
|
|
169
|
-
|
|
113
|
+
Each module registers a watcher based on:
|
|
170
114
|
|
|
171
|
-
|
|
115
|
+
usePublished && publishedDir ? publishedDir : srcDir
|
|
172
116
|
|
|
173
|
-
|
|
117
|
+
This allows:
|
|
174
118
|
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
### ๐ Manifest Enhancement
|
|
178
|
-
|
|
179
|
-
The plugin rewrites `manifest.json` and injects:
|
|
180
|
-
|
|
181
|
-
vendor:package::file.tsx
|
|
182
|
-
|
|
183
|
-
So Laravel can resolve namespaced assets cleanly.
|
|
119
|
+
- Developing directly from source
|
|
120
|
+
- Or watching compiled/published output
|
|
184
121
|
|
|
185
122
|
------------------------------------------------------------------------
|
|
186
123
|
|
|
187
|
-
#
|
|
188
|
-
|
|
189
|
-
## laravelModules(options)
|
|
124
|
+
# HMR Behavior
|
|
190
125
|
|
|
191
|
-
|
|
192
|
-
-------------- -------- ----------------
|
|
193
|
-
modulesDir string "packages"
|
|
194
|
-
statusesFile string "modules.json"
|
|
126
|
+
When a file changes inside a module:
|
|
195
127
|
|
|
196
|
-
|
|
197
|
-
|
|
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
|