@orieljs/framework 0.1.0-alpha.11 → 0.1.0-alpha.12
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/dist/{chunk-KDE5BLI3.js → chunk-7NA4HALO.js} +2 -2
- package/dist/chunk-7NA4HALO.js.map +1 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/testing.js +1 -1
- package/docs/vite.md +35 -7
- package/package.json +32 -32
- package/dist/chunk-KDE5BLI3.js.map +0 -1
package/dist/index.d.ts
CHANGED
|
@@ -130,7 +130,7 @@ declare class ApplicationBuilder {
|
|
|
130
130
|
type LifecycleCallback = (app: Application$2) => void | Promise<void>;
|
|
131
131
|
declare class Application$1 extends Container implements Application$2 {
|
|
132
132
|
private readonly base;
|
|
133
|
-
readonly version = "0.1.0-alpha.
|
|
133
|
+
readonly version = "0.1.0-alpha.12";
|
|
134
134
|
private readonly providers;
|
|
135
135
|
private readonly bootingCallbacks;
|
|
136
136
|
private readonly bootedCallbacks;
|
package/dist/index.js
CHANGED
package/dist/testing.js
CHANGED
package/docs/vite.md
CHANGED
|
@@ -197,21 +197,48 @@ In your scripts, the names in class positions: `class` and `className` props, pr
|
|
|
197
197
|
`classList`, Angular's `[class.name]`. A string anywhere else keeps its words, so `type: 'hidden'` is still a hidden
|
|
198
198
|
input, and a name your CSS doesn't define keeps its name.
|
|
199
199
|
|
|
200
|
+
The build follows a class value back to its strings when they're in the same file: a variable, a list you join
|
|
201
|
+
yourself, a value standing alone in a template, a function's result, a table of classes, and a memo or a ref:
|
|
202
|
+
|
|
203
|
+
```tsx
|
|
204
|
+
declare const wide: boolean, active: boolean, size: 'sm' | 'lg', className: string
|
|
205
|
+
declare function useMemo<T>(make: () => T, deps: unknown[]): T
|
|
206
|
+
// ---cut---
|
|
207
|
+
const sizes = { sm: 'text-sm', lg: 'text-lg' }
|
|
208
|
+
const classes = [wide ? 'window-wide' : 'window', className].filter(Boolean).join(' ')
|
|
209
|
+
const tone = useMemo(() => (active ? 'text-accent' : 'text-body'), [active])
|
|
210
|
+
|
|
211
|
+
const views = [
|
|
212
|
+
<div className={classes} />,
|
|
213
|
+
<p className={`${sizes[size]} ${tone}`} />,
|
|
214
|
+
<NavLink className={({ isActive }) => (isActive ? 'nav-link active' : 'nav-link')} />,
|
|
215
|
+
]
|
|
216
|
+
// ---cut-after---
|
|
217
|
+
declare function NavLink(props: { className: (state: { isActive: boolean }) => string }): null
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
Vue's `computed()` and `ref()`, Svelte's `$derived` and Solid's `createMemo()` count as memos, and a variable named
|
|
221
|
+
like `buttonClass` or `classes` holds classes wherever it's used.
|
|
222
|
+
|
|
200
223
|
Your dependencies keep their class names, and so do the classes their style sheets define, so a library's markup
|
|
201
224
|
always matches its CSS, whether you import it or the library injects it. CSS modules' names are hashed already, and
|
|
202
225
|
stay as Vite wrote them. `dark` is never renamed: the kits' appearance script sets it before the page draws.
|
|
203
226
|
|
|
204
|
-
###
|
|
227
|
+
### Classes the build can't rename
|
|
205
228
|
|
|
206
229
|
A class built from pieces at run time can't be renamed: `` `btn-${variant}` `` asks for `btn-primary`, which the
|
|
207
|
-
built CSS calls something else.
|
|
230
|
+
built CSS calls something else. Nor can a class made by code the build can't follow, such as a function from another
|
|
231
|
+
file given strings. And a string that reads like your class names but sits outside any class value may be one of them,
|
|
232
|
+
used where the build doesn't look. The build lists each one it finds, with its file and line:
|
|
208
233
|
|
|
209
234
|
```text
|
|
210
|
-
|
|
211
|
-
resources/js/components/Button.tsx:12: `btn-${variant}` builds a class name from pieces
|
|
235
|
+
Scrambling can't rename these class names, so they'd lose their styles. Write each whole name where a class goes …
|
|
236
|
+
resources/js/components/Button.tsx:12: `btn-${variant}` builds a class name from pieces
|
|
237
|
+
resources/js/components/Badge.tsx:8: tone("badge", kind) makes classes the build can't follow
|
|
238
|
+
resources/js/styles.ts:3: 'card shadow-sm' reads like class names, outside any class value
|
|
212
239
|
```
|
|
213
240
|
|
|
214
|
-
Write the whole name
|
|
241
|
+
Write the whole name where a class goes instead:
|
|
215
242
|
|
|
216
243
|
```ts
|
|
217
244
|
declare const button: { className: string }
|
|
@@ -233,8 +260,9 @@ import { oriel } from '@orieljs/vite'
|
|
|
233
260
|
oriel({ input: ['resources/css/app.css', 'resources/js/app.ts'], obfuscate: { keep: ['btn-primary', 'btn-danger'] } })
|
|
234
261
|
```
|
|
235
262
|
|
|
236
|
-
`keep` is also for a class something outside the build looks for, such as a script on another site
|
|
237
|
-
|
|
263
|
+
`keep` is also for a class something outside the build looks for, such as a script on another site. Browser tests
|
|
264
|
+
that run against a production build see the short names, so find elements by role, label or text, as Playwright
|
|
265
|
+
recommends, rather than by class.
|
|
238
266
|
|
|
239
267
|
### Turning it off
|
|
240
268
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@orieljs/framework",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.12",
|
|
4
4
|
"description": "Oriel: a Laravel-style, full-stack TypeScript framework for Node.js and Bun.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -58,37 +58,37 @@
|
|
|
58
58
|
"pluralize": "8.0.0"
|
|
59
59
|
},
|
|
60
60
|
"devDependencies": {
|
|
61
|
-
"@orieljs/
|
|
62
|
-
"@orieljs/
|
|
63
|
-
"@orieljs/
|
|
64
|
-
"@orieljs/
|
|
65
|
-
"@orieljs/contracts": "0.1.0-alpha.
|
|
66
|
-
"@orieljs/
|
|
67
|
-
"@orieljs/
|
|
68
|
-
"@orieljs/
|
|
69
|
-
"@orieljs/
|
|
70
|
-
"@orieljs/
|
|
71
|
-
"@orieljs/
|
|
72
|
-
"@orieljs/
|
|
73
|
-
"@orieljs/filesystem": "0.1.0-alpha.
|
|
74
|
-
"@orieljs/
|
|
75
|
-
"@orieljs/
|
|
76
|
-
"@orieljs/
|
|
77
|
-
"@orieljs/
|
|
78
|
-
"@orieljs/
|
|
79
|
-
"@orieljs/
|
|
80
|
-
"@orieljs/
|
|
81
|
-
"@orieljs/
|
|
82
|
-
"@orieljs/
|
|
83
|
-
"@orieljs/
|
|
84
|
-
"@orieljs/
|
|
85
|
-
"@orieljs/
|
|
86
|
-
"@orieljs/
|
|
87
|
-
"@orieljs/
|
|
88
|
-
"@orieljs/
|
|
89
|
-
"@orieljs/
|
|
90
|
-
"@orieljs/
|
|
91
|
-
"@orieljs/
|
|
61
|
+
"@orieljs/config": "0.1.0-alpha.12",
|
|
62
|
+
"@orieljs/auth": "0.1.0-alpha.12",
|
|
63
|
+
"@orieljs/collections": "0.1.0-alpha.12",
|
|
64
|
+
"@orieljs/bus": "0.1.0-alpha.12",
|
|
65
|
+
"@orieljs/contracts": "0.1.0-alpha.12",
|
|
66
|
+
"@orieljs/database": "0.1.0-alpha.12",
|
|
67
|
+
"@orieljs/cookie": "0.1.0-alpha.12",
|
|
68
|
+
"@orieljs/encryption": "0.1.0-alpha.12",
|
|
69
|
+
"@orieljs/container": "0.1.0-alpha.12",
|
|
70
|
+
"@orieljs/events": "0.1.0-alpha.12",
|
|
71
|
+
"@orieljs/foundation": "0.1.0-alpha.12",
|
|
72
|
+
"@orieljs/hashing": "0.1.0-alpha.12",
|
|
73
|
+
"@orieljs/filesystem": "0.1.0-alpha.12",
|
|
74
|
+
"@orieljs/http": "0.1.0-alpha.12",
|
|
75
|
+
"@orieljs/inertia": "0.1.0-alpha.12",
|
|
76
|
+
"@orieljs/live": "0.1.0-alpha.12",
|
|
77
|
+
"@orieljs/log": "0.1.0-alpha.12",
|
|
78
|
+
"@orieljs/mail": "0.1.0-alpha.12",
|
|
79
|
+
"@orieljs/obfuscate": "0.1.0-alpha.12",
|
|
80
|
+
"@orieljs/pipeline": "0.1.0-alpha.12",
|
|
81
|
+
"@orieljs/queue": "0.1.0-alpha.12",
|
|
82
|
+
"@orieljs/routing": "0.1.0-alpha.12",
|
|
83
|
+
"@orieljs/cache": "0.1.0-alpha.12",
|
|
84
|
+
"@orieljs/console": "0.1.0-alpha.12",
|
|
85
|
+
"@orieljs/notifications": "0.1.0-alpha.12",
|
|
86
|
+
"@orieljs/support": "0.1.0-alpha.12",
|
|
87
|
+
"@orieljs/testing": "0.1.0-alpha.12",
|
|
88
|
+
"@orieljs/validation": "0.1.0-alpha.12",
|
|
89
|
+
"@orieljs/vercel": "0.1.0-alpha.12",
|
|
90
|
+
"@orieljs/view": "0.1.0-alpha.12",
|
|
91
|
+
"@orieljs/session": "0.1.0-alpha.12"
|
|
92
92
|
},
|
|
93
93
|
"peerDependencies": {
|
|
94
94
|
"pg": "^8.23.0",
|