npm - fragtml - Versions diffs - 0.0.2 → 0.0.4 - Mend

fragtml 0.0.2 → 0.0.4

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.

Files changed (19) hide show

package/README.md CHANGED Viewed

@@ -156,45 +156,15 @@ html`<button ?disabled="${loading}">Save</button>`
 html`<button ?disabled='${loading}'>Save</button>`
 ```
-## Bound tags
-`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.
-```js
-import { createHtml, render } from 'fragtml'
-export function view ({ fragmentId }) {
-  const html = createHtml({ fragmentId })
-  return render(html`
-    <main>...</main>
-  `)
-}
-```
-`createHtml` is an alias of `html`:
-```js
-import html, { createHtml } from 'fragtml'
-createHtml === html
-```
-You can also use the short fragment-target form:
+## Fragments
-```js
-const html = createHtml('archive-ui')
-```
+Fragments mark named ranges inside a larger template. Calling `html(fragmentId)` on that template renders either the full template or one selected fragment:
-which is equivalent to:
+- `html()` / `html(undefined)` renders the full template.
+- `html('archive-ui')` renders only the `archive-ui` fragment.
+- `html({ fragmentId: 'archive-ui' })` is the options-object form.
-```js
-const html = createHtml({ fragmentId: 'archive-ui' })
-```
-## Fragments
-Fragments mark a named range inside a larger template. Rendering without `fragmentId` returns the whole template. Rendering with `fragmentId` returns only that fragment.
+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)`.
 This mirrors the htmx article’s idea:
@@ -215,12 +185,10 @@ ${html.fragment.end}
 ### Example
 ```js
-import { createHtml, render } from 'fragtml'
+import html, { render } from 'fragtml'
 export function contactDetail ({ contact, fragmentId }) {
-  const html = createHtml({ fragmentId })
-  return render(html`
+  return render(html(fragmentId)`
     <html>
       <body>
         <div hx-target="this">
@@ -253,6 +221,51 @@ contactDetail({ contact, fragmentId: 'archive-ui' })
 Fragment boundary tokens are not included in either output.
+If you want a simple local tag name for editor highlighting or repeated use, `frag` is an alias of `html`:
+```js
+import { frag, render } from 'fragtml'
+export function contactDetail ({ contact, fragmentId }) {
+  const html = frag(fragmentId)
+  return render(html`
+    ${html.fragment.start('archive-ui')}
+    <button>${contact.archived ? 'Unarchive' : 'Archive'}</button>
+    ${html.fragment.end}
+  `)
+}
+```
+In TypeScript, you can use an explicit fragment-name union to type-check both incoming fragment IDs and declared fragment boundaries:
+```ts
+import { frag, render } from 'fragtml'
+import type { RenderOptions } from 'fragtml/types.js'
+const contactFragments = {
+  archiveUi: 'archive-ui',
+  details: 'details'
+} as const
+type ContactFragment = typeof contactFragments[keyof typeof contactFragments]
+export function contactDetail ({
+  contact,
+  fragmentId
+}: {
+  contact: Contact
+} & RenderOptions<ContactFragment>) {
+  const html = frag<ContactFragment>(fragmentId)
+  return render(html`
+    ${html.fragment.start(contactFragments.archiveUi)}
+    <button>${contact.archived ? 'Unarchive' : 'Archive'}</button>
+    ${html.fragment.end}
+  `)
+}
+```
 ### Fragment rules
 - Fragment IDs must be unique within a rendered template.
@@ -266,12 +279,10 @@ Fragment boundary tokens are not included in either output.
 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.
 ```js
-import { createHtml, render } from 'fragtml'
+import html, { render } from 'fragtml'
 export function page ({ fragmentId }) {
-  const html = createHtml({ fragmentId })
-  return render(html`
+  return render(html(fragmentId)`
     ${html.fragment.start('outer')}
     <section>
       <h2>Outer</h2>
@@ -311,21 +322,21 @@ Safe-by-default template tag.
 html`<p>${value}</p>`
 ```
-Also acts as a factory for bound tags:
+Pass a fragment ID before the tagged template to render a selected fragment from that template:
 ```js
-const h = html({ fragmentId: 'name' })
-const h = html('name')
+html('name')`...`
+html({ fragmentId: 'name' })`...`
 ```
-### `createHtml`
+### `frag`
-Alias of `html`, intended for local tag naming:
+Alias of `html`, useful when you want a local tag name for editor highlighting or repeated use:
 ```js
-import { createHtml } from 'fragtml'
+import { frag } from 'fragtml'
-const html = createHtml({ fragmentId })
+const html = frag(fragmentId)
 ```
 ### `render(value)`
@@ -344,6 +355,42 @@ Marks trusted HTML so it is inserted without escaping.
 html`<p>${raw('<strong>trusted</strong>')}</p>`
 ```
+### `HtmlResult`
+Class returned by `html` and `frag` tagged templates.
+```js
+import html, { HtmlResult } from 'fragtml'
+const result = html`<p>Hello</p>`
+result instanceof HtmlResult
+```
+### `RawHtml`
+Class returned by `raw(value)` and `html.raw(value)`.
+```js
+import { RawHtml, raw } from 'fragtml'
+const trusted = raw('<strong>trusted</strong>')
+trusted instanceof RawHtml
+```
+### Type guards
+Use the public type guards to narrow unknown values without importing from internal `lib/` paths:
+```js
+import {
+  isFragmentBoundary,
+  isHtmlResult,
+  isRawHtml
+} from 'fragtml'
+```
 ### Boolean attributes
 Use unquoted `?name=${condition}` syntax to toggle a boolean attribute.
@@ -382,6 +429,40 @@ import {
 `fragtml` is written in typed JavaScript and ships generated declaration files.
+Runtime classes such as `HtmlResult` and `RawHtml` are exported from the package root. Type-only aliases are exported from `fragtml/types.js`:
+```ts
+import type {
+  FragmentBoundary,
+  FragmentEndBoundary,
+  FragmentHelpers,
+  FragmentStartBoundary,
+  HtmlArrayScalarSubstitution,
+  HtmlArraySubstitution,
+  HtmlPrimitiveSubstitution,
+  HtmlSubstitution,
+  HtmlTag,
+  RawHtml,
+  RenderOptions,
+  TemplateStrings
+} from 'fragtml/types.js'
+```
+`HtmlResult` is both a runtime class from the package root and an importable type from `fragtml/types.js`:
+```ts
+import { HtmlResult } from 'fragtml'
+import type { HtmlResult as HtmlResultType } from 'fragtml/types.js'
+function sendHtml (result: HtmlResultType) {
+  return result.toString()
+}
+function isHtmlResultValue (value: unknown): value is HtmlResultType {
+  return value instanceof HtmlResult
+}
+```
 ## License
 MIT

package/index.d.ts CHANGED Viewed

@@ -1,8 +1,11 @@
 export default html;
+export { isFragmentBoundary } from "./lib/fragment.js";
 import { html } from './lib/html.js';
-export const createHtml: import("./lib/create-tag.js").HtmlTag;
+export const frag: import("./types.js").HtmlTag;
 import { raw } from './lib/raw.js';
 import { render } from './lib/render.js';
 export { html, raw, render };
+export { HtmlResult, isHtmlResult } from "./lib/html-result.js";
+export { RawHtml, isRawHtml } from "./lib/raw.js";
 export { DuplicateFragmentError, FragmentBoundaryError, FragmentNotFoundError } from "./lib/render.js";
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":";qBAAqB,eAAe;AAIpC~~,+DAAuB~~;~~oBAHH~~,cAAc;uBACX,iBAAiB"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.js"],"names":[],"mappings":";;qBAAqB,eAAe;AAIpC,gDAAiB;oBAHG,cAAc;uBACX,iBAAiB"}

package/index.js CHANGED Viewed

@@ -2,8 +2,11 @@ import { html } from './lib/html.js'
 import { raw } from './lib/raw.js'
 import { render } from './lib/render.js'
-const createHtml = html
+const frag = html
 export default html
-export { createHtml, html, raw, render }
+export { frag, html, raw, render }
+export { isFragmentBoundary } from './lib/fragment.js'
+export { HtmlResult, isHtmlResult } from './lib/html-result.js'
+export { RawHtml, isRawHtml } from './lib/raw.js'
 export { DuplicateFragmentError, FragmentBoundaryError, FragmentNotFoundError } from './lib/render.js'

package/lib/create-tag.d.ts CHANGED Viewed

@@ -1,17 +1,3 @@
 export const html: HtmlTag;
-export type RenderOptions = {
-    fragmentId?: string | undefined;
-};
-export type CompiledTemplate = {
-    strings: readonly string[];
-};
-export type HtmlTag = ((strings: TemplateStrings, ...substitutions: HtmlSubstitution[]) => HtmlResult) & ((options?: RenderOptions | string) => HtmlTag) & {
-    fragment: FragmentHelpers;
-    raw: (value: unknown) => RawHtml;
-};
-import type { TemplateStrings } from './html-types.js';
-import type { HtmlSubstitution } from './html-types.js';
-import { HtmlResult } from './html-result.js';
-import type { FragmentHelpers } from './fragment.js';
-import type { RawHtml } from './raw.js';
+import type { HtmlTag } from './html-types.js';
 //# sourceMappingURL=create-tag.d.ts.map

package/lib/create-tag.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"create-tag.d.ts","sourceRoot":"","sources":["create-tag.js"],"names":[],"mappings":"~~AAqFA~~,mBADW,OAAO,CACoB~~;;iBA1ExB,MAAM,GAAG,SAAS;;;aAKlB,SAAS,MAAM,EAAE;;sBAwElB,CAAC,CAAC,OAAO,EAAE,eAAe,EAAE,GAAG,aAAa,EAAE,gBAAgB,EAAE,KAAK,UAAU,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,EAAE,aAAa,GAAG,MAAM,KAAK,OAAO,CAAC,GAAG~~;~~IAAE~~,~~QAAQ,EAAE,eAAe,CAAC;IAAC,GAAG,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,CAAA;CAAE;qCAvF1J,~~iBAAiB~~;sCAAjB,iBAAiB;2BAI7C,kBAAkB;qCALR,eAAe;6BAEvB,UAAU~~"}
1	+ {"version":3,"file":"create-tag.d.ts","sourceRoot":"","sources":["create-tag.js"],"names":[],"mappings":"AA8EA,mBADW,OAAO,CACoB;6BA9E4E,iBAAiB"}

package/lib/create-tag.js CHANGED Viewed

@@ -1,22 +1,10 @@
-/** @import { FragmentHelpers } from './fragment.js' */
-/** @import { HtmlSubstitution, TemplateStrings } from './html-types.js' */
-/** @import { RawHtml } from './raw.js' */
+/** @import { CompiledTemplate, FragmentHelpers, HtmlSubstitution, HtmlTag, RenderOptions, TemplateStrings } from './html-types.js' */
 import { createFragmentHelpers } from './fragment.js'
 import { HtmlResult } from './html-result.js'
 import { raw } from './raw.js'
 import { renderResult } from './render.js'
-/**
- * @typedef {object} RenderOptions
- * @property {string | undefined} [fragmentId]
- */
-/**
- * @typedef {object} CompiledTemplate
- * @property {readonly string[]} strings
- */
 /** @type {WeakMap<TemplateStringsArray | readonly string[], CompiledTemplate>} */
 const templateCache = new WeakMap()
 const fragment = createFragmentHelpers()
@@ -44,26 +32,31 @@ function isTemplateStrings (value) {
 }
 /**
- * @param {RenderOptions | string | undefined} options
- * @returns {RenderOptions}
+ * @template {string} FragmentId
+ * @param {RenderOptions<FragmentId> | string | undefined} options
+ * @returns {RenderOptions<FragmentId>}
  */
 function normalizeOptions (options) {
-  if (typeof options === 'string') return { fragmentId: options }
+  if (typeof options === 'string') {
+    return /** @type {RenderOptions<FragmentId>} */ ({ fragmentId: options })
+  }
   return options ? { ...options } : {}
 }
 /**
- * @param {RenderOptions} options
- * @returns {HtmlTag}
+ * @template {string} FragmentId
+ * @param {RenderOptions<FragmentId>} options
+ * @returns {HtmlTag<FragmentId>}
  */
 function createBoundTag (options) {
   /**
-   * @param {TemplateStrings | RenderOptions | string | undefined} strings
-   * @param {...HtmlSubstitution} substitutions
+   * @template {string} NextFragmentId
+   * @param {TemplateStrings | RenderOptions<NextFragmentId> | string | undefined} strings
+   * @param {...HtmlSubstitution<FragmentId>} substitutions
    */
   function tag (strings, ...substitutions) {
     if (!isTemplateStrings(strings)) {
-      return createBoundTag(normalizeOptions(/** @type {RenderOptions | string | undefined} */ strings))
+      return createBoundTag(normalizeOptions(/** @type {RenderOptions<NextFragmentId> | string | undefined} */ strings))
     }
     return new HtmlResult(
@@ -74,9 +67,9 @@ function createBoundTag (options) {
     )
   }
-  const htmlTag = /** @type {HtmlTag} */ (tag)
+  const htmlTag = /** @type {HtmlTag<FragmentId>} */ (tag)
-  htmlTag.fragment = fragment
+  htmlTag.fragment = /** @type {FragmentHelpers<FragmentId>} */ (/** @type {unknown} */ (fragment))
   htmlTag.raw = raw
   return htmlTag
@@ -84,7 +77,3 @@ function createBoundTag (options) {
 /** @type {HtmlTag} */
 export const html = createBoundTag({})
-/**
- * @typedef {((strings: TemplateStrings, ...substitutions: HtmlSubstitution[]) => HtmlResult) & ((options?: RenderOptions | string) => HtmlTag) & { fragment: FragmentHelpers, raw: (value: unknown) => RawHtml }} HtmlTag
- */

package/lib/fragment.d.ts CHANGED Viewed

@@ -1,20 +1,5 @@
-export function createFragmentHelpers(): FragmentHelpers;
+export function createFragmentHelpers<FragmentId extends string = string>(): FragmentHelpers<FragmentId>;
 export function isFragmentBoundary(value: unknown): value is FragmentBoundary;
 export const fragmentBoundarySymbol: unique symbol;
-export type FragmentStartBoundary = {
-    [fragmentBoundarySymbol]: true;
-    kind: "start";
-    id: string;
-};
-export type FragmentEndBoundary = {
-    [fragmentBoundarySymbol]: true;
-    kind: "end";
-};
-export type FragmentBoundary = FragmentStartBoundary | FragmentEndBoundary;
-export type FragmentHelpers = {
-    start: typeof start;
-    end: FragmentEndBoundary;
-};
-declare function start(id: string): FragmentStartBoundary;
-export {};
+import type { FragmentHelpers } from './html-types.js';
 //# sourceMappingURL=fragment.d.ts.map

package/lib/fragment.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fragment.d.ts","sourceRoot":"","sources":["fragment.js"],"names":[],"mappings":"~~AAiCA~~,~~yCAFa~~,~~eAAe~~,~~CAI3B;AAMD~~,~~0CAHW~~,~~OAAO~~,~~GACL,KAAK,IAAI,~~gBAAgB,~~CAQrC;AAxCD~~,~~mDAAwE;oCAN3D;IAAE,~~CAAC,~~sBAAsB,CAAC,EAAE,IAAI,CAAC~~;~~IAAC~~,~~IAAI~~,~~EAAE,~~OAAO,~~CAAC;IAAC~~,~~EAAE~~,~~EAAE,MAAM,CAAA;CAAE;kCAC7D;IAAE,CAAC,sBAAsB,CAAC,EAAE,~~IAAI,~~CAAC;IAAC~~,~~IAAI,EAAE,KAAK,CAAA~~;~~CAAE;+BAC/C~~,~~qBAAqB,GAAG,mBAAmB~~;~~8BAC3C;IAAE~~,~~KAAK,EAAE,OAAO,KAAK,CAAC;IAAC,GAAG,EAAE,mBAAmB,CAAA;CAAE;AAc9D,2BAHW,MAAM,GACJ,qBAAqB,CAYjC~~"}
1	+ {"version":3,"file":"fragment.d.ts","sourceRoot":"","sources":["fragment.js"],"names":[],"mappings":"AAgCA,sCAHuB,UAAU,SAApB,MAAQ,cACR,gBAAgB,UAAU,CAAC,CAIvC;AAMD,0CAHW,OAAO,GACL,KAAK,IAAI,gBAAgB,CAQrC;AA5CD,mDAAwE;qCAFS,iBAAiB"}

package/lib/fragment.js CHANGED Viewed

@@ -1,9 +1,4 @@
-/**
- * @typedef {{ [fragmentBoundarySymbol]: true, kind: 'start', id: string }} FragmentStartBoundary
- * @typedef {{ [fragmentBoundarySymbol]: true, kind: 'end' }} FragmentEndBoundary
- * @typedef {FragmentStartBoundary | FragmentEndBoundary} FragmentBoundary
- * @typedef {{ start: typeof start, end: FragmentEndBoundary }} FragmentHelpers
- */
+/** @import { FragmentEndBoundary, FragmentHelpers, FragmentStartBoundary } from './html-types.js' */
 export const fragmentBoundarySymbol = Symbol('fragtml.fragmentBoundary')
@@ -13,23 +8,27 @@ const end = Object.freeze(/** @type {FragmentEndBoundary} */ ({
 }))
 /**
- * @param {string} id
- * @returns {FragmentStartBoundary}
+ * @template {string} FragmentId
+ * @param {FragmentId} id
+ * @returns {FragmentStartBoundary<FragmentId>}
  */
 function start (id) {
   if (typeof id !== 'string' || id.length === 0) {
     throw new TypeError('fragment.start(id) requires a non-empty string id')
   }
-  return {
+  const boundary = {
     [fragmentBoundarySymbol]: true,
     kind: 'start',
     id
   }
+  return /** @type {FragmentStartBoundary<FragmentId>} */ (boundary)
 }
 /**
- * @returns {FragmentHelpers}
+ * @template {string} [FragmentId=string]
+ * @returns {FragmentHelpers<FragmentId>}
  */
 export function createFragmentHelpers () {
   return Object.freeze({ start, end })

package/lib/html-result.d.ts CHANGED Viewed

@@ -11,7 +11,7 @@ export class HtmlResult {
     [Symbol.toPrimitive](): string;
     [htmlResultSymbol]: boolean;
 }
-import type { CompiledTemplate } from './create-tag.js';
+import type { CompiledTemplate } from './html-types.js';
 import type { HtmlSubstitution } from './html-types.js';
-import type { RenderOptions } from './create-tag.js';
+import type { RenderOptions } from './html-types.js';
 //# sourceMappingURL=html-result.d.ts.map

package/lib/html-result.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"html-result.d.ts","sourceRoot":"","sources":["html-result.js"],"names":[],"mappings":"~~AAqCA~~,oCAHW,OAAO,GACL,KAAK,IAAI,UAAU,CAQ/B;AAxCD,6CAA4D;AAE5D;IAOE,sBALW,gBAAgB,iBAChB,gBAAgB,EAAE,WAClB,aAAa,UACb,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,EAQxC;IAJC,2BAAwB;IACxB,kCAAkC;IAClC,uBAAsB;IACtB,iBAPkB,UAAU,KAAK,MAAM,CAOnB;IAGtB,mBAEC;IAED,kBAEC;IAED,+BAEC;IAjBC,4BAA6B;CAkBhC;~~sCA/BoD~~,iBAAiB;~~sCAChC~~,iBAAiB;~~mCADF~~,iBAAiB"}
1	+ {"version":3,"file":"html-result.d.ts","sourceRoot":"","sources":["html-result.js"],"names":[],"mappings":"AAoCA,oCAHW,OAAO,GACL,KAAK,IAAI,UAAU,CAQ/B;AAxCD,6CAA4D;AAE5D;IAOE,sBALW,gBAAgB,iBAChB,gBAAgB,EAAE,WAClB,aAAa,UACb,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,EAQxC;IAJC,2BAAwB;IACxB,kCAAkC;IAClC,uBAAsB;IACtB,iBAPkB,UAAU,KAAK,MAAM,CAOnB;IAGtB,mBAEC;IAED,kBAEC;IAED,+BAEC;IAjBC,4BAA6B;CAkBhC;sCA9BsE,iBAAiB;sCAAjB,iBAAiB;mCAAjB,iBAAiB"}

package/lib/html-result.js CHANGED Viewed

@@ -1,5 +1,4 @@
-/** @import { CompiledTemplate, RenderOptions } from './create-tag.js' */
-/** @import { HtmlSubstitution } from './html-types.js' */
+/** @import { CompiledTemplate, HtmlSubstitution, RenderOptions } from './html-types.js' */
 export const htmlResultSymbol = Symbol('fragtml.htmlResult')

package/lib/html-types.d.ts CHANGED Viewed

@@ -1,9 +1,30 @@
-import type { FragmentBoundary } from './fragment.js';
 import type { HtmlResult } from './html-result.js';
 import type { RawHtml } from './raw.js';
+export type FragmentStartBoundary<FragmentId extends string = string> = {
+    readonly kind: 'start';
+    readonly id: FragmentId;
+};
+export type FragmentEndBoundary = {
+    readonly kind: 'end';
+};
+export type FragmentBoundary<FragmentId extends string = string> = FragmentStartBoundary<FragmentId> | FragmentEndBoundary;
+export type FragmentHelpers<FragmentId extends string = string> = {
+    start: (id: FragmentId) => FragmentStartBoundary<FragmentId>;
+    end: FragmentEndBoundary;
+};
+export type RenderOptions<FragmentId extends string = string> = {
+    fragmentId?: FragmentId | undefined;
+};
+export type CompiledTemplate = {
+    strings: readonly string[];
+};
 export type HtmlPrimitiveSubstitution = string | number | bigint | boolean | null | undefined;
 export type HtmlArrayScalarSubstitution = HtmlPrimitiveSubstitution | HtmlResult | RawHtml;
 export type HtmlArraySubstitution = HtmlArrayScalarSubstitution | readonly HtmlArraySubstitution[];
-export type HtmlSubstitution = HtmlArraySubstitution | FragmentBoundary;
+export type HtmlSubstitution<FragmentId extends string = string> = HtmlArraySubstitution | FragmentBoundary<FragmentId>;
 export type TemplateStrings = TemplateStringsArray | readonly string[];
+export type HtmlTag<FragmentId extends string = string> = ((strings: TemplateStrings, ...substitutions: HtmlSubstitution<FragmentId>[]) => HtmlResult) & (<NextFragmentId extends string = string>(options?: RenderOptions<NextFragmentId> | string) => HtmlTag<NextFragmentId>) & {
+    fragment: FragmentHelpers<FragmentId>;
+    raw: (value: unknown) => RawHtml;
+};
 //# sourceMappingURL=html-types.d.ts.map

package/lib/html-types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"html-types.d.ts","sourceRoot":"","sources":["html-types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,~~gBAAgB~~,EAAE,MAAM,~~eAAe~~,CAAA;~~AACrD~~,OAAO,KAAK,EAAE,~~UAAU~~,EAAE,MAAM,~~kBAAkB~~,CAAA;~~AAClD~~,OAAO,KAAK,EAAE,~~OAAO~~,EAAE,MAAM,UAAU,CAAA;~~AAEvC~~,MAAM,MAAM,yBAAyB,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAA;AAC7F,MAAM,MAAM,2BAA2B,GAAG,yBAAyB,GAAG,UAAU,GAAG,OAAO,CAAA;AAC1F,MAAM,MAAM,qBAAqB,~~GAAG~~,2BAA2B,GAAG,SAAS,qBAAqB,EAAE,CAAA;~~AAClG~~,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,GAAG,gBAAgB,CAAA;~~AACvE~~,MAAM,MAAM,eAAe,GAAG,oBAAoB,GAAG,SAAS,MAAM,EAAE,CAAA"}
1	+ {"version":3,"file":"html-types.d.ts","sourceRoot":"","sources":["html-types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAClD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,MAAM,qBAAqB,CAAC,UAAU,SAAS,MAAM,GAAG,MAAM,IAAI;IACtE,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,EAAE,UAAU,CAAA;CACxB,CAAA;AACD,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAA;CACrB,CAAA;AACD,MAAM,MAAM,gBAAgB,CAAC,UAAU,SAAS,MAAM,GAAG,MAAM,IAC7D,qBAAqB,CAAC,UAAU,CAAC,GAAG,mBAAmB,CAAA;AACzD,MAAM,MAAM,eAAe,CAAC,UAAU,SAAS,MAAM,GAAG,MAAM,IAAI;IAChE,KAAK,EAAE,CAAC,EAAE,EAAE,UAAU,KAAK,qBAAqB,CAAC,UAAU,CAAC,CAAA;IAC5D,GAAG,EAAE,mBAAmB,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,aAAa,CAAC,UAAU,SAAS,MAAM,GAAG,MAAM,IAAI;IAC9D,UAAU,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;CACpC,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,OAAO,EAAE,SAAS,MAAM,EAAE,CAAA;CAC3B,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAA;AAC7F,MAAM,MAAM,2BAA2B,GAAG,yBAAyB,GAAG,UAAU,GAAG,OAAO,CAAA;AAC1F,MAAM,MAAM,qBAAqB,GAC/B,2BAA2B,GAAG,SAAS,qBAAqB,EAAE,CAAA;AAChE,MAAM,MAAM,gBAAgB,CAAC,UAAU,SAAS,MAAM,GAAG,MAAM,IAC7D,qBAAqB,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAA;AACtD,MAAM,MAAM,eAAe,GAAG,oBAAoB,GAAG,SAAS,MAAM,EAAE,CAAA;AACtE,MAAM,MAAM,OAAO,CAAC,UAAU,SAAS,MAAM,GAAG,MAAM,IACpD,CAAC,CAAC,OAAO,EAAE,eAAe,EAAE,GAAG,aAAa,EAAE,gBAAgB,CAAC,UAAU,CAAC,EAAE,KAAK,UAAU,CAAC,GAC5F,CAAC,CAAC,cAAc,SAAS,MAAM,GAAG,MAAM,EACtC,OAAO,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,GAAG,MAAM,KAC7C,OAAO,CAAC,cAAc,CAAC,CAAC,GAAG;IAC9B,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,CAAA;IACrC,GAAG,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,CAAA;CACjC,CAAA"}

package/lib/html-types.ts CHANGED Viewed

@@ -1,10 +1,41 @@
 // Type exports only. Do not add runtime implementations to this module.
-import type { FragmentBoundary } from './fragment.js'
 import type { HtmlResult } from './html-result.js'
 import type { RawHtml } from './raw.js'
+export type FragmentStartBoundary<FragmentId extends string = string> = {
+  readonly kind: 'start'
+  readonly id: FragmentId
+}
+export type FragmentEndBoundary = {
+  readonly kind: 'end'
+}
+export type FragmentBoundary<FragmentId extends string = string> =
+  FragmentStartBoundary<FragmentId> | FragmentEndBoundary
+export type FragmentHelpers<FragmentId extends string = string> = {
+  start: (id: FragmentId) => FragmentStartBoundary<FragmentId>
+  end: FragmentEndBoundary
+}
+export type RenderOptions<FragmentId extends string = string> = {
+  fragmentId?: FragmentId | undefined
+}
+export type CompiledTemplate = {
+  strings: readonly string[]
+}
 export type HtmlPrimitiveSubstitution = string | number | bigint | boolean | null | undefined
 export type HtmlArrayScalarSubstitution = HtmlPrimitiveSubstitution | HtmlResult | RawHtml
-export type HtmlArraySubstitution = HtmlArrayScalarSubstitution | readonly HtmlArraySubstitution[]
-export type HtmlSubstitution = HtmlArraySubstitution | FragmentBoundary
+export type HtmlArraySubstitution =
+  HtmlArrayScalarSubstitution | readonly HtmlArraySubstitution[]
+export type HtmlSubstitution<FragmentId extends string = string> =
+  HtmlArraySubstitution | FragmentBoundary<FragmentId>
 export type TemplateStrings = TemplateStringsArray | readonly string[]
+export type HtmlTag<FragmentId extends string = string> =
+  ((strings: TemplateStrings, ...substitutions: HtmlSubstitution<FragmentId>[]) => HtmlResult) &
+  (<NextFragmentId extends string = string>(
+    options?: RenderOptions<NextFragmentId> | string
+  ) => HtmlTag<NextFragmentId>) & {
+    fragment: FragmentHelpers<FragmentId>
+    raw: (value: unknown) => RawHtml
+  }

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "fragtml",
   "description": "WIP - nothing to see here",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "author": "Bret Comnes <bcomnes@gmail.com> (https://bret.io)",
   "bugs": {
     "url": "https://github.com/bcomnes/fragtml/issues"
@@ -30,6 +30,8 @@
     "index.js",
     "index.d.ts",
     "index.d.ts.map",
+    "types.d.ts",
+    "types.d.ts.map",
     "lib"
   ],
   "repository": {

package/types.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export type { CompiledTemplate, FragmentBoundary, FragmentEndBoundary, FragmentHelpers, FragmentStartBoundary, HtmlArrayScalarSubstitution, HtmlArraySubstitution, HtmlPrimitiveSubstitution, HtmlSubstitution, HtmlTag, RenderOptions, TemplateStrings } from './lib/html-types.js';
+export type { HtmlResult } from './lib/html-result.js';
+export type { RawHtml } from './lib/raw.js';
+//# sourceMappingURL=types.d.ts.map

package/types.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["types.ts"],"names":[],"mappings":"AACA,YAAY,EACV,gBAAgB,EAChB,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,qBAAqB,EACrB,2BAA2B,EAC3B,qBAAqB,EACrB,yBAAyB,EACzB,gBAAgB,EAChB,OAAO,EACP,aAAa,EACb,eAAe,EAChB,MAAM,qBAAqB,CAAA;AAC5B,YAAY,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AACtD,YAAY,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA"}