fragtml 0.0.2 → 0.0.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.
- package/README.md +62 -51
- package/index.d.ts +1 -1
- package/index.d.ts.map +1 -1
- package/index.js +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -156,45 +156,15 @@ html`<button ?disabled="${loading}">Save</button>`
|
|
|
156
156
|
html`<button ?disabled='${loading}'>Save</button>`
|
|
157
157
|
```
|
|
158
158
|
|
|
159
|
-
##
|
|
160
|
-
|
|
161
|
-
`html(options)` returns a configured tag. This is useful for fragment rendering and for editor syntax highlighting, because many editors highlight tagged templates better when the tag is a simple identifier.
|
|
162
|
-
|
|
163
|
-
```js
|
|
164
|
-
import { createHtml, render } from 'fragtml'
|
|
165
|
-
|
|
166
|
-
export function view ({ fragmentId }) {
|
|
167
|
-
const html = createHtml({ fragmentId })
|
|
168
|
-
|
|
169
|
-
return render(html`
|
|
170
|
-
<main>...</main>
|
|
171
|
-
`)
|
|
172
|
-
}
|
|
173
|
-
```
|
|
174
|
-
|
|
175
|
-
`createHtml` is an alias of `html`:
|
|
176
|
-
|
|
177
|
-
```js
|
|
178
|
-
import html, { createHtml } from 'fragtml'
|
|
179
|
-
|
|
180
|
-
createHtml === html
|
|
181
|
-
```
|
|
159
|
+
## Fragments
|
|
182
160
|
|
|
183
|
-
|
|
161
|
+
Fragments mark named ranges inside a larger template. Calling `html(fragmentId)` on that template renders either the full template or one selected fragment:
|
|
184
162
|
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
163
|
+
- `html()` / `html(undefined)` renders the full template.
|
|
164
|
+
- `html('archive-ui')` renders only the `archive-ui` fragment.
|
|
165
|
+
- `html({ fragmentId: 'archive-ui' })` is the options-object form.
|
|
188
166
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
```js
|
|
192
|
-
const html = createHtml({ fragmentId: 'archive-ui' })
|
|
193
|
-
```
|
|
194
|
-
|
|
195
|
-
## Fragments
|
|
196
|
-
|
|
197
|
-
Fragments mark a named range inside a larger template. Rendering without `fragmentId` returns the whole template. Rendering with `fragmentId` returns only that fragment.
|
|
167
|
+
This lets one view function serve both full-page requests and htmx-style fragment requests by passing the requested fragment ID through to `html(fragmentId)`.
|
|
198
168
|
|
|
199
169
|
This mirrors the htmx article’s idea:
|
|
200
170
|
|
|
@@ -215,12 +185,10 @@ ${html.fragment.end}
|
|
|
215
185
|
### Example
|
|
216
186
|
|
|
217
187
|
```js
|
|
218
|
-
import {
|
|
188
|
+
import html, { render } from 'fragtml'
|
|
219
189
|
|
|
220
190
|
export function contactDetail ({ contact, fragmentId }) {
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
return render(html`
|
|
191
|
+
return render(html(fragmentId)`
|
|
224
192
|
<html>
|
|
225
193
|
<body>
|
|
226
194
|
<div hx-target="this">
|
|
@@ -253,6 +221,51 @@ contactDetail({ contact, fragmentId: 'archive-ui' })
|
|
|
253
221
|
|
|
254
222
|
Fragment boundary tokens are not included in either output.
|
|
255
223
|
|
|
224
|
+
If you want a simple local tag name for editor highlighting or repeated use, `frag` is an alias of `html`:
|
|
225
|
+
|
|
226
|
+
```js
|
|
227
|
+
import { frag, render } from 'fragtml'
|
|
228
|
+
|
|
229
|
+
export function contactDetail ({ contact, fragmentId }) {
|
|
230
|
+
const html = frag(fragmentId)
|
|
231
|
+
|
|
232
|
+
return render(html`
|
|
233
|
+
${html.fragment.start('archive-ui')}
|
|
234
|
+
<button>${contact.archived ? 'Unarchive' : 'Archive'}</button>
|
|
235
|
+
${html.fragment.end}
|
|
236
|
+
`)
|
|
237
|
+
}
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
In TypeScript, you can use an explicit fragment-name union to type-check both incoming fragment IDs and declared fragment boundaries:
|
|
241
|
+
|
|
242
|
+
```ts
|
|
243
|
+
import { frag, render } from 'fragtml'
|
|
244
|
+
|
|
245
|
+
const contactFragments = {
|
|
246
|
+
archiveUi: 'archive-ui',
|
|
247
|
+
details: 'details'
|
|
248
|
+
} as const
|
|
249
|
+
|
|
250
|
+
type ContactFragment = typeof contactFragments[keyof typeof contactFragments]
|
|
251
|
+
|
|
252
|
+
export function contactDetail ({
|
|
253
|
+
contact,
|
|
254
|
+
fragmentId
|
|
255
|
+
}: {
|
|
256
|
+
contact: Contact
|
|
257
|
+
fragmentId?: ContactFragment
|
|
258
|
+
}) {
|
|
259
|
+
const html = frag<ContactFragment>(fragmentId)
|
|
260
|
+
|
|
261
|
+
return render(html`
|
|
262
|
+
${html.fragment.start(contactFragments.archiveUi)}
|
|
263
|
+
<button>${contact.archived ? 'Unarchive' : 'Archive'}</button>
|
|
264
|
+
${html.fragment.end}
|
|
265
|
+
`)
|
|
266
|
+
}
|
|
267
|
+
```
|
|
268
|
+
|
|
256
269
|
### Fragment rules
|
|
257
270
|
|
|
258
271
|
- Fragment IDs must be unique within a rendered template.
|
|
@@ -266,12 +279,10 @@ Fragment boundary tokens are not included in either output.
|
|
|
266
279
|
Nested fragments are supported with stack semantics. This is useful when a larger region can be re-rendered as a whole, but a smaller region inside it is also a valid htmx update target.
|
|
267
280
|
|
|
268
281
|
```js
|
|
269
|
-
import {
|
|
282
|
+
import html, { render } from 'fragtml'
|
|
270
283
|
|
|
271
284
|
export function page ({ fragmentId }) {
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
return render(html`
|
|
285
|
+
return render(html(fragmentId)`
|
|
275
286
|
${html.fragment.start('outer')}
|
|
276
287
|
<section>
|
|
277
288
|
<h2>Outer</h2>
|
|
@@ -311,21 +322,21 @@ Safe-by-default template tag.
|
|
|
311
322
|
html`<p>${value}</p>`
|
|
312
323
|
```
|
|
313
324
|
|
|
314
|
-
|
|
325
|
+
Pass a fragment ID before the tagged template to render a selected fragment from that template:
|
|
315
326
|
|
|
316
327
|
```js
|
|
317
|
-
|
|
318
|
-
|
|
328
|
+
html('name')`...`
|
|
329
|
+
html({ fragmentId: 'name' })`...`
|
|
319
330
|
```
|
|
320
331
|
|
|
321
|
-
### `
|
|
332
|
+
### `frag`
|
|
322
333
|
|
|
323
|
-
Alias of `html`,
|
|
334
|
+
Alias of `html`, useful when you want a local tag name for editor highlighting or repeated use:
|
|
324
335
|
|
|
325
336
|
```js
|
|
326
|
-
import {
|
|
337
|
+
import { frag } from 'fragtml'
|
|
327
338
|
|
|
328
|
-
const html =
|
|
339
|
+
const html = frag(fragmentId)
|
|
329
340
|
```
|
|
330
341
|
|
|
331
342
|
### `render(value)`
|
package/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export default html;
|
|
2
2
|
import { html } from './lib/html.js';
|
|
3
|
-
export const
|
|
3
|
+
export const frag: import("./lib/create-tag.js").HtmlTag;
|
|
4
4
|
import { raw } from './lib/raw.js';
|
|
5
5
|
import { render } from './lib/render.js';
|
|
6
6
|
export { html, raw, render };
|
package/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":";qBAAqB,eAAe;AAIpC
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":";qBAAqB,eAAe;AAIpC,yDAAiB;oBAHG,cAAc;uBACX,iBAAiB"}
|
package/index.js
CHANGED
|
@@ -2,8 +2,8 @@ import { html } from './lib/html.js'
|
|
|
2
2
|
import { raw } from './lib/raw.js'
|
|
3
3
|
import { render } from './lib/render.js'
|
|
4
4
|
|
|
5
|
-
const
|
|
5
|
+
const frag = html
|
|
6
6
|
|
|
7
7
|
export default html
|
|
8
|
-
export {
|
|
8
|
+
export { frag, html, raw, render }
|
|
9
9
|
export { DuplicateFragmentError, FragmentBoundaryError, FragmentNotFoundError } from './lib/render.js'
|
package/package.json
CHANGED