foldkit 0.120.0 → 0.121.0

package/dist/subscription/fromEvent.d.ts

@@ -1,4 +1,4 @@
-import { Stream } from 'effect';
+import { Option, Stream } from 'effect';
 /**
  * Configuration for the `fromEvent` Stream helper.
  *
@@ -18,6 +18,80 @@ export type FromEventConfig<EventType extends Event, Message> = Readonly<{
     toMessage: (event: EventType) => Message;
     options?: AddEventListenerOptions;
 }>;
+/**
+ * Configuration for the `fromEventFilterMap` Stream helper.
+ *
+ * `target` is read inside the acquire Effect, never before it, so the
+ * resolved `EventTarget` is captured at the moment the Subscription's scope
+ * opens. Pass a thunk when the target may not exist until the scope opens, or
+ * pass the `EventTarget` directly for always-present globals like `window` or
+ * `document`.
+ *
+ * `toMessage(event)` returns `Option.some(message)` to emit a Message for the
+ * event, or `Option.none()` to ignore it. The mapper runs synchronously in the
+ * same call stack as the browser's event dispatch, so calling
+ * `event.preventDefault()` inside it works as expected.
+ */
+export type FromEventFilterMapConfig<EventType extends Event, Message> = Readonly<{
+    target: EventTarget | (() => EventTarget);
+    type: string;
+    toMessage: (event: EventType) => Option.Option<Message>;
+    options?: AddEventListenerOptions;
+}>;
+/**
+ * Build a Stream that emits a Message for the dispatches of a DOM event the
+ * mapper chooses to keep, registering the listener when the Stream's scope
+ * opens and removing it when the scope closes.
+ *
+ * This is the filtered variant of `fromEvent`. Its `toMessage` returns
+ * `Option.some(message)` to emit and `Option.none()` to ignore the event, so a
+ * single listener can react to some dispatches while passing on the rest.
+ *
+ * Reach for this over a downstream `Stream.filterMap` whenever the decision to
+ * keep an event is paired with `event.preventDefault()`. The mapper runs
+ * synchronously inside the browser's event dispatch, so `preventDefault()`
+ * takes effect, while a downstream filter would run on a later turn after the
+ * default action has already happened.
+ *
+ * The listener lifecycle uses `Effect.acquireRelease`. The `addEventListener`
+ * call happens inside the acquire Effect, and the matching
+ * `removeEventListener` is registered only after acquire completes, so the
+ * listener never leaks on interruption.
+ *
+ * This is a Stream, not a Subscription entry. Wrap it with
+ * `Subscription.persistent` for a listener whose lifetime spans the whole
+ * Subscriptions record, or plug it into a `Subscription.make` entry's
+ * `dependenciesToStream` (typically behind `Stream.when`) to gate it on a
+ * Model condition.
+ *
+ * @example
+ * ```typescript
+ * const subscriptions = Subscription.make<Model, Message>()(entry => ({
+ *   searchShortcut: entry(
+ *     { isListening: S.Boolean },
+ *     {
+ *       modelToDependencies: model => ({ isListening: model.isListening }),
+ *       dependenciesToStream: ({ isListening }) =>
+ *         Stream.when(
+ *           Subscription.fromEventFilterMap<KeyboardEvent, Message>({
+ *             target: window,
+ *             type: 'keydown',
+ *             toMessage: event => {
+ *               if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
+ *                 event.preventDefault()
+ *                 return Option.some(OpenedSearch())
+ *               }
+ *               return Option.none()
+ *             },
+ *           }),
+ *           Effect.sync(() => isListening),
+ *         ),
+ *     },
+ *   ),
+ * }))
+ * ```
+ */
+export declare const fromEventFilterMap: <EventType extends Event, Message>(config: FromEventFilterMapConfig<EventType, Message>) => Stream.Stream<Message>;
 /**
  * Build a Stream that emits a Message for every dispatch of a DOM event,
  * registering the listener when the Stream's scope opens and removing it when
@@ -34,6 +108,9 @@ export type FromEventConfig<EventType extends Event, Message> = Readonly<{
  * `dependenciesToStream` (typically behind `Stream.when`) to gate it on a
  * Model condition.
  *
+ * For a listener that reacts to only some events, reach for
+ * `fromEventFilterMap`, whose mapper returns `Option<Message>`.
+ *
  * @example
  * ```typescript
  * const subscriptions = Subscription.make<Model, Message>()(entry => ({

package/dist/subscription/fromEvent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fromEvent.d.ts","sourceRoot":"","sources":["../../src/subscription/fromEvent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,MAAM,EAAE,MAAM,QAAQ,CAAA;AAE9C;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,eAAe,CAAC,SAAS,SAAS,KAAK,EAAE,OAAO,IAAI,QAAQ,CAAC;IACvE,MAAM,EAAE,WAAW,GAAG,CAAC,MAAM,WAAW,CAAC,CAAA;IACzC,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,OAAO,CAAA;IACxC,OAAO,CAAC,EAAE,uBAAuB,CAAA;CAClC,CAAC,CAAA;AAMF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,SAAS,GAAI,SAAS,SAAS,KAAK,EAAE,OAAO,EACxD,QAAQ,eAAe,CAAC,SAAS,EAAE,OAAO,CAAC,KAC1C,MAAM,CAAC,MAAM,CAAC,OAAO,CAmBrB,CAAA"}
+{"version":3,"file":"fromEvent.d.ts","sourceRoot":"","sources":["../../src/subscription/fromEvent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,MAAM,EAAS,MAAM,EAAE,MAAM,QAAQ,CAAA;AAEtD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,eAAe,CAAC,SAAS,SAAS,KAAK,EAAE,OAAO,IAAI,QAAQ,CAAC;IACvE,MAAM,EAAE,WAAW,GAAG,CAAC,MAAM,WAAW,CAAC,CAAA;IACzC,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,OAAO,CAAA;IACxC,OAAO,CAAC,EAAE,uBAAuB,CAAA;CAClC,CAAC,CAAA;AAMF;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,wBAAwB,CAClC,SAAS,SAAS,KAAK,EACvB,OAAO,IACL,QAAQ,CAAC;IACX,MAAM,EAAE,WAAW,GAAG,CAAC,MAAM,WAAW,CAAC,CAAA;IACzC,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;IACvD,OAAO,CAAC,EAAE,uBAAuB,CAAA;CAClC,CAAC,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,eAAO,MAAM,kBAAkB,GAAI,SAAS,SAAS,KAAK,EAAE,OAAO,EACjE,QAAQ,wBAAwB,CAAC,SAAS,EAAE,OAAO,CAAC,KACnD,MAAM,CAAC,MAAM,CAAC,OAAO,CAsBrB,CAAA;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,eAAO,MAAM,SAAS,GAAI,SAAS,SAAS,KAAK,EAAE,OAAO,EACxD,QAAQ,eAAe,CAAC,SAAS,EAAE,OAAO,CAAC,KAC1C,MAAM,CAAC,MAAM,CAAC,OAAO,CAIpB,CAAA"}

package/dist/subscription/fromEvent.js

@@ -1,9 +1,19 @@
-import { Effect, Queue, Stream } from 'effect';
+import { Effect, Option, Queue, Stream } from 'effect';
 const resolveTarget = (target) => (typeof target === 'function' ? target() : target);
 /**
- * Build a Stream that emits a Message for every dispatch of a DOM event,
- * registering the listener when the Stream's scope opens and removing it when
- * the scope closes.
+ * Build a Stream that emits a Message for the dispatches of a DOM event the
+ * mapper chooses to keep, registering the listener when the Stream's scope
+ * opens and removing it when the scope closes.
+ *
+ * This is the filtered variant of `fromEvent`. Its `toMessage` returns
+ * `Option.some(message)` to emit and `Option.none()` to ignore the event, so a
+ * single listener can react to some dispatches while passing on the rest.
+ *
+ * Reach for this over a downstream `Stream.filterMap` whenever the decision to
+ * keep an event is paired with `event.preventDefault()`. The mapper runs
+ * synchronously inside the browser's event dispatch, so `preventDefault()`
+ * takes effect, while a downstream filter would run on a later turn after the
+ * default action has already happened.
  *
  * The listener lifecycle uses `Effect.acquireRelease`. The `addEventListener`
  * call happens inside the acquire Effect, and the matching
@@ -19,16 +29,22 @@ const resolveTarget = (target) => (typeof target === 'function' ? target() : tar
  * @example
  * ```typescript
  * const subscriptions = Subscription.make<Model, Message>()(entry => ({
- *   shortcut: entry(
+ *   searchShortcut: entry(
  *     { isListening: S.Boolean },
  *     {
  *       modelToDependencies: model => ({ isListening: model.isListening }),
  *       dependenciesToStream: ({ isListening }) =>
  *         Stream.when(
- *           Subscription.fromEvent<KeyboardEvent, Message>({
+ *           Subscription.fromEventFilterMap<KeyboardEvent, Message>({
  *             target: window,
  *             type: 'keydown',
- *             toMessage: event => PressedKey({ key: event.key }),
+ *             toMessage: event => {
+ *               if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
+ *                 event.preventDefault()
+ *                 return Option.some(OpenedSearch())
+ *               }
+ *               return Option.none()
+ *             },
  *           }),
  *           Effect.sync(() => isListening),
  *         ),
@@ -37,14 +53,61 @@ const resolveTarget = (target) => (typeof target === 'function' ? target() : tar
  * }))
  * ```
  */
-export const fromEvent = (config) => Stream.callback(queue => Effect.acquireRelease(Effect.sync(() => {
+export const fromEventFilterMap = (config) => Stream.callback(queue => Effect.acquireRelease(Effect.sync(() => {
     const target = resolveTarget(config.target);
     const handleEvent = (event) => {
         /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-        Queue.offerUnsafe(queue, config.toMessage(event));
+        const maybeMessage = config.toMessage(event);
+        if (Option.isSome(maybeMessage)) {
+            Queue.offerUnsafe(queue, maybeMessage.value);
+        }
     };
     target.addEventListener(config.type, handleEvent, config.options);
     return { target, handleEvent };
 }), ({ target, handleEvent }) => Effect.sync(() => {
     target.removeEventListener(config.type, handleEvent, config.options);
 })).pipe(Effect.flatMap(() => Effect.never)));
+/**
+ * Build a Stream that emits a Message for every dispatch of a DOM event,
+ * registering the listener when the Stream's scope opens and removing it when
+ * the scope closes.
+ *
+ * The listener lifecycle uses `Effect.acquireRelease`. The `addEventListener`
+ * call happens inside the acquire Effect, and the matching
+ * `removeEventListener` is registered only after acquire completes, so the
+ * listener never leaks on interruption.
+ *
+ * This is a Stream, not a Subscription entry. Wrap it with
+ * `Subscription.persistent` for a listener whose lifetime spans the whole
+ * Subscriptions record, or plug it into a `Subscription.make` entry's
+ * `dependenciesToStream` (typically behind `Stream.when`) to gate it on a
+ * Model condition.
+ *
+ * For a listener that reacts to only some events, reach for
+ * `fromEventFilterMap`, whose mapper returns `Option<Message>`.
+ *
+ * @example
+ * ```typescript
+ * const subscriptions = Subscription.make<Model, Message>()(entry => ({
+ *   shortcut: entry(
+ *     { isListening: S.Boolean },
+ *     {
+ *       modelToDependencies: model => ({ isListening: model.isListening }),
+ *       dependenciesToStream: ({ isListening }) =>
+ *         Stream.when(
+ *           Subscription.fromEvent<KeyboardEvent, Message>({
+ *             target: window,
+ *             type: 'keydown',
+ *             toMessage: event => PressedKey({ key: event.key }),
+ *           }),
+ *           Effect.sync(() => isListening),
+ *         ),
+ *     },
+ *   ),
+ * }))
+ * ```
+ */
+export const fromEvent = (config) => fromEventFilterMap({
+    ...config,
+    toMessage: event => Option.some(config.toMessage(event)),
+});

package/dist/subscription/public.d.ts

@@ -2,6 +2,6 @@ export { aggregate, lift, make, persistent } from '../runtime/subscription.js';
 export type { EntryWithoutKeepAlive, Subscription, Subscriptions, } from '../runtime/subscription.js';
 export { animationFrame } from './animationFrame.js';
 export type { AnimationFrameConfig } from './animationFrame.js';
-export { fromEvent } from './fromEvent.js';
-export type { FromEventConfig } from './fromEvent.js';
+export { fromEvent, fromEventFilterMap } from './fromEvent.js';
+export type { FromEventConfig, FromEventFilterMapConfig } from './fromEvent.js';
 //# sourceMappingURL=public.d.ts.map

package/dist/subscription/public.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/subscription/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAE9E,YAAY,EACV,qBAAqB,EACrB,YAAY,EACZ,aAAa,GACd,MAAM,4BAA4B,CAAA;AAEnC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAE/D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C,YAAY,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../src/subscription/public.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AAE9E,YAAY,EACV,qBAAqB,EACrB,YAAY,EACZ,aAAa,GACd,MAAM,4BAA4B,CAAA;AAEnC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAEpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAE/D,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAE9D,YAAY,EAAE,eAAe,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/subscription/public.js

@@ -1,3 +1,3 @@
 export { aggregate, lift, make, persistent } from '../runtime/subscription.js';
 export { animationFrame } from './animationFrame.js';
-export { fromEvent } from './fromEvent.js';
+export { fromEvent, fromEventFilterMap } from './fromEvent.js';

package/dist/test/apps/{svgAttributes.d.ts → attributes.d.ts}

@@ -1,11 +1,12 @@
 import { Schema as S } from 'effect';
-import type { Html } from '../../html/index.js';
-export declare const Model: S.Struct<{}>;
-export type Model = typeof Model.Type;
+import type { Attribute, Html } from '../../html/index.js';
 export declare const IgnoredInteraction: import("../../schema/index.js").CallableTaggedStruct<"IgnoredInteraction", {}>;
 export declare const Message: S.Union<readonly [import("../../schema/index.js").CallableTaggedStruct<"IgnoredInteraction", {}>]>;
 export type Message = typeof Message.Type;
-export declare const initialModel: Model;
+export type Model = Readonly<{
+    attribute: Attribute<Message>;
+}>;
 export declare const update: (model: Model, message: Message) => readonly [Model, ReadonlyArray<never>];
-export declare const view: (_model: Model) => Html;
-//# sourceMappingURL=svgAttributes.d.ts.map
+export declare const testId = "attribute-host";
+export declare const view: (model: Model) => Html;
+//# sourceMappingURL=attributes.d.ts.map

package/dist/test/apps/attributes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attributes.d.ts","sourceRoot":"","sources":["../../../src/test/apps/attributes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEhD,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAM1D,eAAO,MAAM,kBAAkB,gFAA0B,CAAA;AAEzD,eAAO,MAAM,OAAO,oGAAgC,CAAA;AACpD,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,MAAM,MAAM,KAAK,GAAG,QAAQ,CAAC;IAAE,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,CAAA;CAAE,CAAC,CAAA;AAI/D,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAMrC,CAAA;AAMH,eAAO,MAAM,MAAM,mBAAU,CAAA;AAE7B,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,KAAG,IAInC,CAAA"}

package/dist/test/apps/attributes.js

@@ -0,0 +1,17 @@
+import { Match as M, Schema as S } from 'effect';
+import { html } from '../../html/index.js';
+import { m } from '../../message/index.js';
+// MESSAGE
+export const IgnoredInteraction = m('IgnoredInteraction');
+export const Message = S.Union([IgnoredInteraction]);
+// UPDATE
+export const update = (model, message) => M.value(message).pipe(M.withReturnType(), M.tagsExhaustive({
+    IgnoredInteraction: () => [model, []],
+}));
+// VIEW
+const TEST_ID = 'attribute-host';
+export const testId = TEST_ID;
+export const view = (model) => {
+    const h = html();
+    return h.div([h.DataAttribute('testid', TEST_ID), model.attribute], []);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "foldkit",
-  "version": "0.120.0",
+  "version": "0.121.0",
   "description": "A TypeScript frontend framework, built on Effect and architected like Elm",
   "type": "module",
   "main": "./dist/index.js",

package/dist/test/apps/svgAttributes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"svgAttributes.d.ts","sourceRoot":"","sources":["../../../src/test/apps/svgAttributes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEhD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAM/C,eAAO,MAAM,KAAK,cAAe,CAAA;AACjC,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,eAAO,MAAM,kBAAkB,gFAA0B,CAAA;AAEzD,eAAO,MAAM,OAAO,oGAAgC,CAAA;AACpD,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,eAAO,MAAM,YAAY,EAAE,KAAU,CAAA;AAIrC,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,SAAS,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAMrC,CAAA;AAIH,eAAO,MAAM,IAAI,GAAI,QAAQ,KAAK,KAAG,IAgHpC,CAAA"}

package/dist/test/apps/svgAttributes.js

@@ -1,106 +0,0 @@
-import { Match as M, Schema as S } from 'effect';
-import { html } from '../../html/index.js';
-import { m } from '../../message/index.js';
-// MODEL
-export const Model = S.Struct({});
-// MESSAGE
-export const IgnoredInteraction = m('IgnoredInteraction');
-export const Message = S.Union([IgnoredInteraction]);
-// INIT
-export const initialModel = {};
-// UPDATE
-export const update = (model, message) => M.value(message).pipe(M.withReturnType(), M.tagsExhaustive({
-    IgnoredInteraction: () => [model, []],
-}));
-// VIEW
-export const view = (_model) => {
-    const h = html();
-    return h.svg([
-        h.DataAttribute('testid', 'svg-root'),
-        h.ViewBox('0 0 100 100'),
-        h.PreserveAspectRatio('xMidYMid meet'),
-        h.Color('black'),
-        h.Overflow('visible'),
-    ], [
-        h.text([
-            h.DataAttribute('testid', 'svg-text'),
-            h.Dx('1'),
-            h.Dy('2'),
-            h.Rotate('15'),
-            h.TextAnchor('middle'),
-            h.DominantBaseline('central'),
-            h.AlignmentBaseline('middle'),
-            h.BaselineShift('super'),
-            h.TextLength('40'),
-            h.LengthAdjust('spacing'),
-            h.FontFamily('serif'),
-            h.FontSize('12'),
-            h.FontWeight('bold'),
-            h.FontStyle('italic'),
-            h.LetterSpacing('1'),
-            h.WordSpacing('2'),
-            h.TextDecoration('underline'),
-            h.WritingMode('horizontal-tb'),
-            h.Visibility('visible'),
-            h.Display('inline'),
-            h.Cursor('pointer'),
-            h.PointerEvents('none'),
-        ], ['Label']),
-        h.rect([
-            h.DataAttribute('testid', 'svg-rect'),
-            h.Rx('4'),
-            h.Ry('4'),
-            h.PathLength('100'),
-            h.FillOpacity('0.5'),
-            h.StrokeOpacity('0.8'),
-            h.StrokeMiterlimit('2'),
-            h.PaintOrder('stroke'),
-            h.VectorEffect('non-scaling-stroke'),
-            h.ShapeRendering('crispEdges'),
-            h.TextRendering('optimizeLegibility'),
-            h.ImageRendering('pixelated'),
-            h.ClipPath('url(#clip)'),
-            h.Mask('url(#mask)'),
-            h.Filter('url(#filter)'),
-            h.MarkerStart('url(#start)'),
-            h.MarkerMid('url(#mid)'),
-            h.MarkerEnd('url(#end)'),
-        ], []),
-        h.linearGradient([
-            h.DataAttribute('testid', 'svg-gradient'),
-            h.GradientUnits('userSpaceOnUse'),
-            h.GradientTransform('rotate(45)'),
-            h.SpreadMethod('reflect'),
-            h.Fx('0.1'),
-            h.Fy('0.2'),
-            h.Fr('0.3'),
-            h.ClipPathUnits('userSpaceOnUse'),
-            h.MaskUnits('userSpaceOnUse'),
-            h.MaskContentUnits('userSpaceOnUse'),
-            h.FilterUnits('userSpaceOnUse'),
-            h.PrimitiveUnits('userSpaceOnUse'),
-        ], [
-            h.stop([
-                h.DataAttribute('testid', 'svg-stop'),
-                h.Offset('0.5'),
-                h.StopColor('red'),
-                h.StopOpacity('0.9'),
-            ], []),
-        ]),
-        h.pattern([
-            h.DataAttribute('testid', 'svg-pattern'),
-            h.PatternUnits('userSpaceOnUse'),
-            h.PatternContentUnits('userSpaceOnUse'),
-            h.PatternTransform('scale(2)'),
-        ], []),
-        h.marker([
-            h.DataAttribute('testid', 'svg-marker'),
-            h.MarkerWidth('6'),
-            h.MarkerHeight('6'),
-            h.MarkerUnits('strokeWidth'),
-            h.RefX('3'),
-            h.RefY('3'),
-            h.Orient('auto'),
-        ], []),
-    ]);
-};