@troyio/vite-file-router 0.4.1 → 0.6.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 +704 -536
- package/devtools/app.js +833 -51
- package/devtools/index.html +119 -76
- package/devtools/style.css +730 -156
- package/dist/devtools-app.d.ts +40 -2
- package/dist/devtools.d.ts +27 -0
- package/dist/index.d.ts +20 -0
- package/dist/index.js +577 -43
- package/dist/scanner.d.ts +3 -1
- package/package.json +1 -1
- package/types/index.d.ts +3 -0
package/devtools/index.html
CHANGED
|
@@ -21,6 +21,18 @@
|
|
|
21
21
|
<symbol id="icon-open" viewBox="0 0 16 16">
|
|
22
22
|
<path d="M9 3h4v4M13 3L7.5 8.5M11 9.5V13H3V5h3.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
|
23
23
|
</symbol>
|
|
24
|
+
<symbol id="icon-go" viewBox="0 0 16 16">
|
|
25
|
+
<path d="M3 8h9M8.5 4.5L12 8l-3.5 3.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
|
26
|
+
</symbol>
|
|
27
|
+
<symbol id="icon-timeline" viewBox="0 0 16 16">
|
|
28
|
+
<path d="M3 4h10M3 8h6M3 12h8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
|
|
29
|
+
</symbol>
|
|
30
|
+
<symbol id="icon-code" viewBox="0 0 16 16">
|
|
31
|
+
<path d="M6 4.5L2.5 8 6 11.5M10 4.5L13.5 8 10 11.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
|
32
|
+
</symbol>
|
|
33
|
+
<symbol id="icon-copy" viewBox="0 0 16 16">
|
|
34
|
+
<path d="M5.5 5.5h7v7h-7zM3.5 10.5v-7h7" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round" />
|
|
35
|
+
</symbol>
|
|
24
36
|
<symbol id="icon-route" viewBox="0 0 16 16">
|
|
25
37
|
<circle cx="4" cy="4" r="1.8" fill="none" stroke="currentColor" stroke-width="1.4" />
|
|
26
38
|
<circle cx="12" cy="12" r="1.8" fill="none" stroke="currentColor" stroke-width="1.4" />
|
|
@@ -55,93 +67,124 @@
|
|
|
55
67
|
</header>
|
|
56
68
|
|
|
57
69
|
<p class="alert" id="error" role="alert" hidden></p>
|
|
58
|
-
<section class="conflicts" id="conflicts" aria-label="Route conflicts" hidden></section>
|
|
59
70
|
|
|
60
|
-
<
|
|
61
|
-
<
|
|
62
|
-
<
|
|
63
|
-
<
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
<
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
</
|
|
72
|
-
<
|
|
73
|
-
|
|
71
|
+
<div class="app">
|
|
72
|
+
<nav class="page-nav" id="page-nav" aria-label="Panel pages">
|
|
73
|
+
<a href="#routes" data-page="routes" aria-current="page">
|
|
74
|
+
<svg aria-hidden="true"><use href="#icon-route" /></svg>
|
|
75
|
+
<span>Routes</span>
|
|
76
|
+
<span class="nav-count" id="warning-count" hidden></span>
|
|
77
|
+
</a>
|
|
78
|
+
<a href="#timeline" data-page="timeline">
|
|
79
|
+
<svg aria-hidden="true"><use href="#icon-timeline" /></svg>
|
|
80
|
+
<span>Timeline</span>
|
|
81
|
+
<span class="nav-count" id="timeline-count" hidden></span>
|
|
82
|
+
</a>
|
|
83
|
+
<a href="#code" data-page="code">
|
|
84
|
+
<svg aria-hidden="true"><use href="#icon-code" /></svg>
|
|
85
|
+
<span>Generated code</span>
|
|
86
|
+
</a>
|
|
87
|
+
</nav>
|
|
74
88
|
|
|
75
|
-
<
|
|
76
|
-
<section class="
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
89
|
+
<div class="page" id="page-routes">
|
|
90
|
+
<section class="conflicts" id="conflicts" aria-label="Route conflicts" hidden></section>
|
|
91
|
+
<section class="warnings" id="warnings" aria-label="Route warnings" hidden></section>
|
|
92
|
+
|
|
93
|
+
<main class="layout">
|
|
94
|
+
<section class="panel tree-panel" aria-label="Route tree">
|
|
95
|
+
<div class="panel-toolbar">
|
|
96
|
+
<label class="field">
|
|
97
|
+
<svg class="field-icon" aria-hidden="true"><use href="#icon-search" /></svg>
|
|
98
|
+
<span class="visually-hidden">Filter routes</span>
|
|
99
|
+
<input id="filter" type="search" placeholder="Filter by path, param, or file" autocomplete="off" spellcheck="false" />
|
|
100
|
+
</label>
|
|
101
|
+
<button class="icon-button" id="toggle" type="button" aria-label="Collapse all" title="Collapse all">
|
|
102
|
+
<svg><use href="#icon-collapse" /></svg>
|
|
103
|
+
</button>
|
|
81
104
|
</div>
|
|
82
|
-
<div class="
|
|
83
|
-
</
|
|
84
|
-
<div id="current" aria-live="polite"></div>
|
|
85
|
-
</section>
|
|
105
|
+
<div class="tree" id="tree" role="tree" aria-label="Routes"></div>
|
|
106
|
+
</section>
|
|
86
107
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
108
|
+
<aside class="side">
|
|
109
|
+
<section class="panel current-panel" aria-labelledby="current-title">
|
|
110
|
+
<div class="panel-header panel-header-row">
|
|
111
|
+
<div>
|
|
112
|
+
<h2 id="current-title">Current page</h2>
|
|
113
|
+
<p id="current-subtitle">Follows the route your app is showing.</p>
|
|
114
|
+
</div>
|
|
115
|
+
<div class="tab-picker" id="tab-picker" role="group" aria-label="App tabs" hidden></div>
|
|
116
|
+
</div>
|
|
117
|
+
<div id="current" aria-live="polite"></div>
|
|
118
|
+
</section>
|
|
93
119
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
120
|
+
<section class="panel" aria-labelledby="tester-title">
|
|
121
|
+
<div class="panel-header">
|
|
122
|
+
<h2 id="tester-title">Test a URL</h2>
|
|
123
|
+
<p>Shows which route files handle a URL.</p>
|
|
124
|
+
</div>
|
|
125
|
+
<form class="tester" id="tester">
|
|
126
|
+
<label class="field field-mono">
|
|
127
|
+
<span class="visually-hidden">URL to match</span>
|
|
128
|
+
<input id="tester-input" type="text" placeholder="/users/42?tab=posts" autocomplete="off" spellcheck="false" />
|
|
129
|
+
</label>
|
|
130
|
+
<button class="button" type="submit">Match</button>
|
|
131
|
+
</form>
|
|
132
|
+
<div id="tester-result" aria-live="polite"></div>
|
|
133
|
+
</section>
|
|
134
|
+
|
|
135
|
+
<section class="panel" aria-labelledby="details-title">
|
|
136
|
+
<div class="panel-header">
|
|
137
|
+
<h2 id="details-title">Route details</h2>
|
|
138
|
+
</div>
|
|
139
|
+
<div id="details"></div>
|
|
140
|
+
</section>
|
|
141
|
+
</aside>
|
|
142
|
+
</main>
|
|
143
|
+
</div>
|
|
144
|
+
|
|
145
|
+
<div class="page" id="page-timeline" hidden>
|
|
146
|
+
<section class="panel" aria-labelledby="timeline-title">
|
|
147
|
+
<div class="panel-header panel-header-row">
|
|
148
|
+
<div>
|
|
149
|
+
<h2 id="timeline-title">Loader and action timeline</h2>
|
|
150
|
+
<p>Calls made by your app, newest first.</p>
|
|
151
|
+
</div>
|
|
152
|
+
<button class="icon-button text-button" id="timeline-clear" type="button">Clear</button>
|
|
99
153
|
</div>
|
|
100
|
-
<
|
|
101
|
-
<
|
|
102
|
-
<
|
|
103
|
-
<
|
|
154
|
+
<div class="timeline-toolbar">
|
|
155
|
+
<div class="segmented" id="timeline-types" role="group" aria-label="Filter by call type">
|
|
156
|
+
<button type="button" data-type="all" aria-pressed="true">All</button>
|
|
157
|
+
<button type="button" data-type="loader" aria-pressed="false">Loaders</button>
|
|
158
|
+
<button type="button" data-type="action" aria-pressed="false">Actions</button>
|
|
159
|
+
<button type="button" data-type="middleware" aria-pressed="false">Middleware</button>
|
|
160
|
+
<button type="button" data-type="revalidate" aria-pressed="false">Revalidation</button>
|
|
161
|
+
</div>
|
|
162
|
+
<span class="route-pill" id="timeline-route" hidden></span>
|
|
163
|
+
<label class="field">
|
|
164
|
+
<svg class="field-icon" aria-hidden="true"><use href="#icon-search" /></svg>
|
|
165
|
+
<span class="visually-hidden">Filter calls</span>
|
|
166
|
+
<input id="timeline-filter" type="search" placeholder="Filter by route, URL, or outcome" autocomplete="off" spellcheck="false" />
|
|
104
167
|
</label>
|
|
105
|
-
<button class="button" type="submit">Match</button>
|
|
106
|
-
</form>
|
|
107
|
-
<div id="tester-result" aria-live="polite"></div>
|
|
108
|
-
</section>
|
|
109
|
-
|
|
110
|
-
<section class="panel" aria-labelledby="details-title">
|
|
111
|
-
<div class="panel-header">
|
|
112
|
-
<h2 id="details-title">Route details</h2>
|
|
113
168
|
</div>
|
|
114
|
-
<
|
|
169
|
+
<ol class="timeline" id="timeline" aria-label="Calls"></ol>
|
|
115
170
|
</section>
|
|
116
|
-
|
|
171
|
+
</div>
|
|
117
172
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
</div>
|
|
125
|
-
<button class="icon-button text-button" id="timeline-clear" type="button">Clear</button>
|
|
126
|
-
</div>
|
|
127
|
-
<div class="timeline-toolbar">
|
|
128
|
-
<div class="segmented" id="timeline-types" role="group" aria-label="Filter by call type">
|
|
129
|
-
<button type="button" data-type="all" aria-pressed="true">All</button>
|
|
130
|
-
<button type="button" data-type="loader" aria-pressed="false">Loaders</button>
|
|
131
|
-
<button type="button" data-type="action" aria-pressed="false">Actions</button>
|
|
132
|
-
<button type="button" data-type="revalidate" aria-pressed="false">Revalidation</button>
|
|
133
|
-
</div>
|
|
134
|
-
<label class="field">
|
|
135
|
-
<svg class="field-icon" aria-hidden="true"><use href="#icon-search" /></svg>
|
|
136
|
-
<span class="visually-hidden">Filter calls</span>
|
|
137
|
-
<input id="timeline-filter" type="search" placeholder="Filter by route, URL, or outcome" autocomplete="off" spellcheck="false" />
|
|
138
|
-
</label>
|
|
173
|
+
<div class="page" id="page-code" hidden>
|
|
174
|
+
<section class="panel code-panel" aria-labelledby="code-title">
|
|
175
|
+
<div class="panel-header panel-header-row">
|
|
176
|
+
<div>
|
|
177
|
+
<h2 id="code-title">Generated code</h2>
|
|
178
|
+
<p>The modules the plugin generates from your route files.</p>
|
|
139
179
|
</div>
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
180
|
+
</div>
|
|
181
|
+
<div class="code-layout">
|
|
182
|
+
<div class="code-modules" id="code-modules" role="tablist" aria-label="Generated modules"></div>
|
|
183
|
+
<div class="code-view" id="code-view" role="tabpanel" aria-live="polite"></div>
|
|
184
|
+
</div>
|
|
185
|
+
</section>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
145
188
|
<script type="module" src="/__vite-file-router/app.js"></script>
|
|
146
189
|
</body>
|
|
147
190
|
</html>
|