@runopencode/rx-stencil 0.4.1 → 0.4.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.
Files changed (114) hide show
  1. package/README.md +12 -11
  2. package/dist/cjs/app-globals-V2Kpy_OQ.js +5 -0
  3. package/dist/cjs/index-CbERigo8.js +1211 -0
  4. package/dist/cjs/index.cjs.js +166 -447
  5. package/dist/cjs/loader.cjs.js +4 -6
  6. package/dist/cjs/rx-async.cjs.entry.js +29 -63
  7. package/dist/cjs/rx-stencil.cjs.js +14 -14
  8. package/dist/cjs/set-property-BZHuI0P5.js +9525 -0
  9. package/dist/collection/collection-manifest.json +2 -2
  10. package/dist/collection/components/async/async.css +3 -0
  11. package/dist/collection/components/async/async.js +62 -61
  12. package/dist/collection/index.js +0 -1
  13. package/dist/collection/rx/decorator/index.js +0 -1
  14. package/dist/collection/rx/decorator/query-selector-all.js +26 -27
  15. package/dist/collection/rx/decorator/query-selector.js +32 -33
  16. package/dist/collection/rx/index.js +0 -1
  17. package/dist/collection/rx/observable/index.js +1 -1
  18. package/dist/collection/rx/observable/mutation-observable.js +8 -9
  19. package/dist/collection/rx/observable/properties-observable.js +13 -0
  20. package/dist/collection/rx/observable/property-observable.js +20 -21
  21. package/dist/collection/rx/observable/render-observable.js +15 -16
  22. package/dist/collection/rx/operator/index.js +0 -1
  23. package/dist/collection/rx/operator/schedule-render.js +9 -10
  24. package/dist/collection/rx/operator/to-property.js +8 -9
  25. package/dist/collection/rx/operator/until-disconnected.js +56 -57
  26. package/dist/collection/rx/subscriber/index.js +0 -1
  27. package/dist/collection/rx/subscriber/set-property.js +12 -13
  28. package/dist/collection/utils/get-property-descriptor.js +10 -11
  29. package/dist/collection/utils/index.js +0 -1
  30. package/dist/components/index.d.ts +2 -0
  31. package/dist/components/index.js +1 -562
  32. package/dist/components/rx-async.d.ts +2 -2
  33. package/dist/components/rx-async.js +1 -86
  34. package/dist/components/set-property.js +1 -1150
  35. package/dist/esm/app-globals-DQuL1Twl.js +3 -0
  36. package/dist/esm/index-BIBww8qU.js +1202 -0
  37. package/dist/esm/index.js +167 -447
  38. package/dist/esm/loader.js +5 -5
  39. package/dist/esm/rx-async.entry.js +29 -61
  40. package/dist/esm/rx-stencil.js +14 -13
  41. package/dist/esm/set-property-CpZKE-Xu.js +9520 -0
  42. package/dist/rx-stencil/index.esm.js +1 -2
  43. package/dist/rx-stencil/p-77100dee.entry.js +1 -0
  44. package/dist/rx-stencil/p-BIBww8qU.js +2 -0
  45. package/dist/rx-stencil/p-DQuL1Twl.js +1 -0
  46. package/dist/rx-stencil/p-IbpJ_cRo.js +1 -0
  47. package/dist/rx-stencil/rx-stencil.esm.js +1 -2
  48. package/dist/types/components/async/async.d.ts +5 -5
  49. package/dist/types/components.d.ts +7 -1
  50. package/dist/types/rx/decorator/query-selector-all.d.ts +9 -9
  51. package/dist/types/rx/decorator/query-selector.d.ts +9 -9
  52. package/dist/types/rx/observable/index.d.ts +1 -0
  53. package/dist/types/rx/observable/properties-observable.d.ts +6 -0
  54. package/dist/types/rx/subscriber/set-property.d.ts +12 -12
  55. package/dist/types/stencil-public-runtime.d.ts +225 -17
  56. package/docs/creation-operators.md +62 -3
  57. package/loader/cdn.js +1 -3
  58. package/loader/index.cjs.js +1 -3
  59. package/loader/index.d.ts +3 -0
  60. package/loader/index.es2017.js +1 -3
  61. package/loader/index.js +1 -3
  62. package/package.json +11 -10
  63. package/dist/cjs/index-5f6f12ab.js +0 -1265
  64. package/dist/cjs/index-5f6f12ab.js.map +0 -1
  65. package/dist/cjs/index.cjs.js.map +0 -1
  66. package/dist/cjs/loader.cjs.js.map +0 -1
  67. package/dist/cjs/rx-async.cjs.entry.js.map +0 -1
  68. package/dist/cjs/rx-stencil.cjs.js.map +0 -1
  69. package/dist/cjs/set-property-88176225.js +0 -1167
  70. package/dist/cjs/set-property-88176225.js.map +0 -1
  71. package/dist/collection/components/async/async.js.map +0 -1
  72. package/dist/collection/components/async/async.scss +0 -3
  73. package/dist/collection/index.js.map +0 -1
  74. package/dist/collection/rx/decorator/index.js.map +0 -1
  75. package/dist/collection/rx/decorator/query-selector-all.js.map +0 -1
  76. package/dist/collection/rx/decorator/query-selector.js.map +0 -1
  77. package/dist/collection/rx/index.js.map +0 -1
  78. package/dist/collection/rx/observable/index.js.map +0 -1
  79. package/dist/collection/rx/observable/mutation-observable.js.map +0 -1
  80. package/dist/collection/rx/observable/property-observable.js.map +0 -1
  81. package/dist/collection/rx/observable/render-observable.js.map +0 -1
  82. package/dist/collection/rx/operator/index.js.map +0 -1
  83. package/dist/collection/rx/operator/schedule-render.js.map +0 -1
  84. package/dist/collection/rx/operator/to-property.js.map +0 -1
  85. package/dist/collection/rx/operator/until-disconnected.js.map +0 -1
  86. package/dist/collection/rx/subscriber/index.js.map +0 -1
  87. package/dist/collection/rx/subscriber/set-property.js.map +0 -1
  88. package/dist/collection/utils/get-property-descriptor.js.map +0 -1
  89. package/dist/collection/utils/index.js.map +0 -1
  90. package/dist/components/index.js.map +0 -1
  91. package/dist/components/rx-async.js.map +0 -1
  92. package/dist/components/set-property.js.map +0 -1
  93. package/dist/esm/index-9102de09.js +0 -1236
  94. package/dist/esm/index-9102de09.js.map +0 -1
  95. package/dist/esm/index.js.map +0 -1
  96. package/dist/esm/loader.js.map +0 -1
  97. package/dist/esm/polyfills/core-js.js +0 -11
  98. package/dist/esm/polyfills/dom.js +0 -79
  99. package/dist/esm/polyfills/es5-html-element.js +0 -1
  100. package/dist/esm/polyfills/index.js +0 -34
  101. package/dist/esm/polyfills/system.js +0 -6
  102. package/dist/esm/rx-async.entry.js.map +0 -1
  103. package/dist/esm/rx-stencil.js.map +0 -1
  104. package/dist/esm/set-property-7fa82bef.js +0 -1150
  105. package/dist/esm/set-property-7fa82bef.js.map +0 -1
  106. package/dist/rx-stencil/index.esm.js.map +0 -1
  107. package/dist/rx-stencil/p-01af4414.entry.js +0 -2
  108. package/dist/rx-stencil/p-01af4414.entry.js.map +0 -1
  109. package/dist/rx-stencil/p-0cd0b2da.js +0 -2
  110. package/dist/rx-stencil/p-0cd0b2da.js.map +0 -1
  111. package/dist/rx-stencil/p-8411601b.js +0 -3
  112. package/dist/rx-stencil/p-8411601b.js.map +0 -1
  113. package/dist/rx-stencil/rx-stencil.esm.js.map +0 -1
  114. package/loader/package.json +0 -11
@@ -1,16 +1,16 @@
1
1
  import { ComponentInterface } from '../../stencil-public-runtime';
2
2
  export type SetPropertyOptions = {
3
- /**
4
- * Whether to schedule a render of the component after the
5
- * property is updated. By default, this value is set to
6
- * `false`, assuming that the property is annotated with
7
- * either @State or @Prop decorator.
8
- */
9
- scheduleRender?: boolean;
10
- /**
11
- * Whether to schedule a render of the component on the next
12
- * tick. By default, this value is set to `true`.
13
- */
14
- nextTick?: boolean;
3
+ /**
4
+ * Whether to schedule a render of the component after the
5
+ * property is updated. By default, this value is set to
6
+ * `false`, assuming that the property is annotated with
7
+ * either @State or @Prop decorator.
8
+ */
9
+ scheduleRender?: boolean;
10
+ /**
11
+ * Whether to schedule a render of the component on the next
12
+ * tick. By default, this value is set to `true`.
13
+ */
14
+ nextTick?: boolean;
15
15
  };
16
16
  export declare function setProperty<T = any>(cmp: ComponentInterface, property: string, options?: SetPropertyOptions): (value: T) => void;
@@ -1,8 +1,20 @@
1
- declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
1
+ type CustomMethodDecorator<T> = (target: object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
2
+ type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
3
+ type MixinInstance<F> = F extends (base: MixedInCtor) => MixedInCtor<infer I> ? I : never;
2
4
  export interface ComponentDecorator {
3
5
  (opts?: ComponentOptions): ClassDecorator;
4
6
  }
5
7
  export interface ComponentOptions {
8
+ /**
9
+ * When set to `true` this component will be form-associated. See
10
+ * https://stenciljs.com/docs/next/form-associated documentation on how to
11
+ * build form-associated Stencil components that integrate into forms like
12
+ * native browser elements such as `<input>` and `<textarea>`.
13
+ *
14
+ * The {@link AttachInternals} decorator allows for access to the
15
+ * `ElementInternals` object to modify the associated form.
16
+ */
17
+ formAssociated?: boolean;
6
18
  /**
7
19
  * Tag name of the web component. Ideally, the tag name must be globally unique,
8
20
  * so it's recommended to choose an unique prefix for all your components within the same collection.
@@ -51,6 +63,12 @@ export interface ShadowRootOptions {
51
63
  * focusable part is given focus, and the shadow host is given any available `:focus` styling.
52
64
  */
53
65
  delegatesFocus?: boolean;
66
+ /**
67
+ * Sets the slot assignment mode for the shadow root. When set to `'manual'`, enables imperative
68
+ * slotting using the `HTMLSlotElement.assign()` method. Defaults to `'named'` for standard
69
+ * declarative slotting behavior.
70
+ */
71
+ slotAssignment?: 'manual' | 'named';
54
72
  }
55
73
  export interface ModeStyles {
56
74
  [modeName: string]: string | string[];
@@ -107,9 +125,34 @@ export interface EventOptions {
107
125
  */
108
126
  composed?: boolean;
109
127
  }
128
+ export interface AttachInternalsOptions {
129
+ /**
130
+ * Initial custom states to set on the ElementInternals.states CustomStateSet.
131
+ * Each key is the state name and the value is the initial boolean state.
132
+ *
133
+ * These states can be targeted with the CSS `:state()` pseudo-class.
134
+ *
135
+ * @example
136
+ * ```tsx
137
+ * @AttachInternals({ states: { open: true, active: false } })
138
+ * internals: ElementInternals;
139
+ * ```
140
+ *
141
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/CustomStateSet
142
+ */
143
+ states?: {
144
+ [stateName: string]: boolean;
145
+ };
146
+ }
147
+ export interface AttachInternalsDecorator {
148
+ (opts?: AttachInternalsOptions): PropertyDecorator;
149
+ }
110
150
  export interface ListenDecorator {
111
151
  (eventName: string, opts?: ListenOptions): CustomMethodDecorator<any>;
112
152
  }
153
+ export interface ResolveVarFunction {
154
+ <T>(variable: T): string;
155
+ }
113
156
  export interface ListenOptions {
114
157
  /**
115
158
  * Handlers can also be registered for an event other than the host itself.
@@ -138,7 +181,15 @@ export interface StateDecorator {
138
181
  (): PropertyDecorator;
139
182
  }
140
183
  export interface WatchDecorator {
141
- (propName: string): CustomMethodDecorator<any>;
184
+ (propName: any, watchOptions?: {
185
+ immediate?: boolean;
186
+ }): CustomMethodDecorator<(newValue?: any, oldValue?: any, propName?: any, ...args: any[]) => any | void>;
187
+ }
188
+ export interface PropSerializeDecorator {
189
+ (propName: any): CustomMethodDecorator<(newValue?: any, propName?: string, ...args: any[]) => string | null>;
190
+ }
191
+ export interface AttrDeserializeDecorator {
192
+ (propName: any): CustomMethodDecorator<(newValue?: any, propName?: string, ...args: any[]) => any>;
142
193
  }
143
194
  export interface UserBuildConditionals {
144
195
  isDev: boolean;
@@ -175,12 +226,36 @@ export declare const Element: ElementDecorator;
175
226
  * https://stenciljs.com/docs/events
176
227
  */
177
228
  export declare const Event: EventDecorator;
229
+ /**
230
+ * If the `formAssociated` option is set in options passed to the
231
+ * `@Component()` decorator then this decorator may be used to get access to the
232
+ * `ElementInternals` instance associated with the component.
233
+ */
234
+ export declare const AttachInternals: AttachInternalsDecorator;
178
235
  /**
179
236
  * The `Listen()` decorator is for listening DOM events, including the ones
180
237
  * dispatched from `@Events()`.
181
238
  * https://stenciljs.com/docs/events#listen-decorator
182
239
  */
183
240
  export declare const Listen: ListenDecorator;
241
+ /**
242
+ * The `resolveVar()` function is a compile-time utility that resolves const variables
243
+ * and object properties to their string literal values. This allows variables to be
244
+ * used in `@Listen` and `@Event` decorators instead of hardcoded strings.
245
+ *
246
+ * @example
247
+ * ```ts
248
+ * const MY_EVENT = 'myEvent';
249
+ * @Listen(resolveVar(MY_EVENT))
250
+ * ```
251
+ *
252
+ * @example
253
+ * ```ts
254
+ * const EVENTS = { MY_EVENT: 'myEvent' } as const;
255
+ * @Event({ eventName: resolveVar(EVENTS.MY_EVENT) })
256
+ * ```
257
+ */
258
+ export declare const resolveVar: ResolveVarFunction;
184
259
  /**
185
260
  * The `@Method()` decorator is used to expose methods on the public API.
186
261
  * Class methods decorated with the @Method() decorator can be called directly
@@ -214,6 +289,14 @@ export declare const State: StateDecorator;
214
289
  * https://stenciljs.com/docs/reactive-data#watch-decorator
215
290
  */
216
291
  export declare const Watch: WatchDecorator;
292
+ /**
293
+ * Decorator to serialize a property to an attribute string.
294
+ */
295
+ export declare const PropSerialize: PropSerializeDecorator;
296
+ /**
297
+ * Decorator to deserialize an attribute string to a property.
298
+ */
299
+ export declare const AttrDeserialize: AttrDeserializeDecorator;
217
300
  export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
218
301
  export type ErrorHandler = (err: any, element?: HTMLElement) => void;
219
302
  /**
@@ -241,6 +324,25 @@ export declare function setPlatformHelpers(helpers: {
241
324
  * @returns the base path
242
325
  */
243
326
  export declare function getAssetPath(path: string): string;
327
+ /**
328
+ * Method to render a virtual DOM tree to a container element.
329
+ *
330
+ * @example
331
+ * ```tsx
332
+ * import { render } from '@stencil/core';
333
+ *
334
+ * const vnode = (
335
+ * <div>
336
+ * <h1>Hello, world!</h1>
337
+ * </div>
338
+ * );
339
+ * render(vnode, document.body);
340
+ * ```
341
+ *
342
+ * @param vnode - The virtual DOM tree to render
343
+ * @param container - The container element to render the virtual DOM tree to
344
+ */
345
+ export declare function render(vnode: VNode, container: Element): void;
244
346
  /**
245
347
  * Used to manually set the base path where assets can be found. For lazy-loaded
246
348
  * builds the asset path is automatically set and assets copied to the correct
@@ -311,6 +413,58 @@ export declare function readTask(task: RafCallback): void;
311
413
  * Unhandled exception raised while rendering, during event handling, or lifecycles will trigger the custom event handler.
312
414
  */
313
415
  export declare const setErrorHandler: (handler: ErrorHandler) => void;
416
+ export type TagTransformer = (tag: string) => string;
417
+ /**
418
+ * Sets a tag transformer to be used when rendering your custom elements.
419
+ * ```ts
420
+ * setTagTransformer((tag) => {
421
+ * if (tag.startsWith('my-')) return `new-${tag}`
422
+ * return tag;
423
+ * });
424
+ * ```
425
+ * Will mean all your components that start with `my-` are defined instead with `new-my-` prefix.
426
+ *
427
+ * @param transformer the transformer function to use which must return a string.
428
+ */
429
+ export declare function setTagTransformer(transformer: TagTransformer): void;
430
+ /**
431
+ * Transforms a tag name using a transformer set via `setTagTransformer`
432
+ *
433
+ * @param tag - the tag to transform e.g. `my-tag`
434
+ * @returns the transformed tag e.g. `new-my-tag`
435
+ */
436
+ export declare function transformTag(tag: string): string;
437
+ /**
438
+ * @deprecated - Use `MixedInCtor` instead:
439
+ * ```ts
440
+ * import { MixedInCtor } from '@stencil/core';
441
+ *
442
+ * const AFactoryFn = <B extends MixedInCtor>(Base: B) => {class A extends Base { propA = A }; return A;}
443
+ * ```
444
+ */
445
+ export type MixinFactory = (base: MixedInCtor) => MixedInCtor;
446
+ export type MixedInCtor<T = {}> = new (...args: any[]) => T;
447
+ /**
448
+ * Compose multiple mixin classes into a single constructor.
449
+ * The resulting class has the combined instance types of all mixed-in classes.
450
+ *
451
+ * Example:
452
+ * ```ts
453
+ * import { Mixin, MixedInCtor } from '@stencil/core';
454
+ *
455
+ * const AWrap = <B extends MixedInCtor>(Base: B) => {class A extends Base { propA = A }; return A;}
456
+ * const BWrap = <B extends MixedInCtor>(Base: B) => {class B extends Base { propB = B }; return B;}
457
+ * const CWrap = <B extends MixedInCtor>(Base: B) => {class C extends Base { propC = C }; return C;}
458
+ *
459
+ * class X extends Mixin(AWrap, BWrap, CWrap) {
460
+ * render() { return <div>{this.propA} {this.propB} {this.propC}</div>; }
461
+ * }
462
+ * ```
463
+ *
464
+ * @param mixinFactories mixin factory functions that return a class which extends from the provided class.
465
+ * @returns a class that is composed from extending each of the provided classes in the order they were provided.
466
+ */
467
+ export declare function Mixin<const TMixins extends readonly MixinFactory[]>(...mixinFactories: TMixins): abstract new (...args: any[]) => UnionToIntersection<MixinInstance<TMixins[number]>>;
314
468
  /**
315
469
  * This file gets copied to all distributions of stencil component collections.
316
470
  * - no imports
@@ -483,7 +637,7 @@ export interface FunctionalUtilities {
483
637
  map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];
484
638
  }
485
639
  export interface FunctionalComponent<T = {}> {
486
- (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[];
640
+ (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[] | null;
487
641
  }
488
642
  /**
489
643
  * A Child VDOM node
@@ -525,6 +679,7 @@ export declare namespace h {
525
679
  function h(sel: any, data: VNodeData | null, text: string): VNode;
526
680
  function h(sel: any, data: VNodeData | null, children: Array<VNode | undefined | null>): VNode;
527
681
  function h(sel: any, data: VNodeData | null, children: VNode): VNode;
682
+ function h(sel: any, data: VNodeData | null, ...children: (VNode | string | number)[]): VNode;
528
683
  namespace JSX {
529
684
  interface IntrinsicElements extends LocalJSX.IntrinsicElements, JSXBase.IntrinsicElements {
530
685
  [tagName: string]: any;
@@ -539,6 +694,36 @@ export declare function h(sel: any, children: Array<VNode | undefined | null>):
539
694
  export declare function h(sel: any, data: VNodeData | null, text: string): VNode;
540
695
  export declare function h(sel: any, data: VNodeData | null, children: Array<VNode | undefined | null>): VNode;
541
696
  export declare function h(sel: any, data: VNodeData | null, children: VNode): VNode;
697
+ export declare function h(sel: any, data: VNodeData | null, ...children: (VNode | string | number)[]): VNode;
698
+ /**
699
+ * Automatic JSX runtime functions for TypeScript's react-jsx mode.
700
+ * These functions are called automatically by TypeScript when using "jsx": "react-jsx".
701
+ * @param type type of node
702
+ * @param props properties of node
703
+ * @param key optional key for the node
704
+ * @returns a jsx vnode
705
+ */
706
+ export declare function jsx(type: any, props: any, key?: string): VNode;
707
+ /**
708
+ * Automatic JSX runtime functions for TypeScript's react-jsxmode with multiple children.
709
+ * @param type type of node
710
+ * @param props properties of node
711
+ * @param key optional key for the node
712
+ * @returns a jsx vnode
713
+ */
714
+ export declare function jsxs(type: any, props: any, key?: string): VNode;
715
+ /**
716
+ * Automatic JSX runtime functions for TypeScript's react-jsxdev mode.
717
+ * These functions are called automatically by TypeScript when using "jsx": "react-jsxdev".
718
+ * @param type type of node
719
+ * @param props properties of node
720
+ * @param key optional key for the node
721
+ * @param isStaticChildren indicates if the children are static
722
+ * @param source source information
723
+ * @param self reference to the component instance
724
+ * @returns a jsx vnode
725
+ */
726
+ export declare function jsxDEV(type: any, props: any, key?: string | number, isStaticChildren?: boolean, source?: any, self?: any): VNode;
542
727
  /**
543
728
  * A virtual DOM node
544
729
  */
@@ -568,7 +753,7 @@ declare namespace LocalJSX {
568
753
  export { LocalJSX as JSX };
569
754
  export declare namespace JSXBase {
570
755
  interface IntrinsicElements {
571
- slot: JSXBase.SlotAttributes;
756
+ slot: JSXBase.SlotAttributes<HTMLSlotElement>;
572
757
  a: JSXBase.AnchorHTMLAttributes<HTMLAnchorElement>;
573
758
  abbr: JSXBase.HTMLAttributes;
574
759
  address: JSXBase.HTMLAttributes;
@@ -738,7 +923,7 @@ export declare namespace JSXBase {
738
923
  use: JSXBase.SVGAttributes;
739
924
  view: JSXBase.SVGAttributes;
740
925
  }
741
- interface SlotAttributes extends JSXAttributes {
926
+ interface SlotAttributes<T = HTMLSlotElement> extends JSXAttributes<T> {
742
927
  name?: string;
743
928
  slot?: string;
744
929
  onSlotchange?: (event: Event) => void;
@@ -749,6 +934,7 @@ export declare namespace JSXBase {
749
934
  hrefLang?: string;
750
935
  hreflang?: string;
751
936
  media?: string;
937
+ ping?: string;
752
938
  rel?: string;
753
939
  target?: string;
754
940
  referrerPolicy?: ReferrerPolicy;
@@ -775,7 +961,6 @@ export declare namespace JSXBase {
775
961
  cite?: string;
776
962
  }
777
963
  interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
778
- autoFocus?: boolean;
779
964
  disabled?: boolean;
780
965
  form?: string;
781
966
  formAction?: string;
@@ -791,6 +976,12 @@ export declare namespace JSXBase {
791
976
  name?: string;
792
977
  type?: string;
793
978
  value?: string | string[] | number;
979
+ popoverTargetAction?: string;
980
+ popoverTargetElement?: Element | null;
981
+ popoverTarget?: string;
982
+ command?: string;
983
+ commandFor?: string;
984
+ commandfor?: string;
794
985
  }
795
986
  interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {
796
987
  height?: number | string;
@@ -804,7 +995,8 @@ export declare namespace JSXBase {
804
995
  }
805
996
  interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> {
806
997
  open?: boolean;
807
- onToggle?: (event: Event) => void;
998
+ name?: string;
999
+ onToggle?: (event: ToggleEvent) => void;
808
1000
  }
809
1001
  interface DelHTMLAttributes<T> extends HTMLAttributes<T> {
810
1002
  cite?: string;
@@ -899,8 +1091,6 @@ export declare namespace JSXBase {
899
1091
  autocapitalize?: string;
900
1092
  autoComplete?: string;
901
1093
  autocomplete?: string;
902
- autoFocus?: boolean;
903
- autofocus?: boolean | string;
904
1094
  capture?: string;
905
1095
  checked?: boolean;
906
1096
  crossOrigin?: string;
@@ -952,10 +1142,11 @@ export declare namespace JSXBase {
952
1142
  webkitdirectory?: boolean;
953
1143
  webkitEntries?: any;
954
1144
  width?: number | string;
1145
+ popoverTargetAction?: string;
1146
+ popoverTargetElement?: Element | null;
1147
+ popoverTarget?: string;
955
1148
  }
956
1149
  interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
957
- autoFocus?: boolean;
958
- autofocus?: boolean | string;
959
1150
  challenge?: string;
960
1151
  disabled?: boolean;
961
1152
  form?: string;
@@ -968,7 +1159,6 @@ export declare namespace JSXBase {
968
1159
  interface LabelHTMLAttributes<T> extends HTMLAttributes<T> {
969
1160
  form?: string;
970
1161
  htmlFor?: string;
971
- htmlfor?: string;
972
1162
  }
973
1163
  interface LiHTMLAttributes<T> extends HTMLAttributes<T> {
974
1164
  value?: string | string[] | number;
@@ -995,6 +1185,8 @@ export declare namespace JSXBase {
995
1185
  autoPlay?: boolean;
996
1186
  autoplay?: boolean | string;
997
1187
  controls?: boolean;
1188
+ controlslist?: 'nodownload' | 'nofullscreen' | 'noremoteplayback';
1189
+ controlsList?: 'nodownload' | 'nofullscreen' | 'noremoteplayback';
998
1190
  crossOrigin?: string;
999
1191
  crossorigin?: string;
1000
1192
  loop?: boolean;
@@ -1079,7 +1271,6 @@ export declare namespace JSXBase {
1079
1271
  interface OutputHTMLAttributes<T> extends HTMLAttributes<T> {
1080
1272
  form?: string;
1081
1273
  htmlFor?: string;
1082
- htmlfor?: string;
1083
1274
  name?: string;
1084
1275
  }
1085
1276
  interface ParamHTMLAttributes<T> extends HTMLAttributes<T> {
@@ -1104,7 +1295,6 @@ export declare namespace JSXBase {
1104
1295
  type?: string;
1105
1296
  }
1106
1297
  interface SelectHTMLAttributes<T> extends HTMLAttributes<T> {
1107
- autoFocus?: boolean;
1108
1298
  disabled?: boolean;
1109
1299
  form?: string;
1110
1300
  multiple?: boolean;
@@ -1115,11 +1305,13 @@ export declare namespace JSXBase {
1115
1305
  autocomplete?: string;
1116
1306
  }
1117
1307
  interface SourceHTMLAttributes<T> extends HTMLAttributes<T> {
1308
+ height?: number;
1118
1309
  media?: string;
1119
1310
  sizes?: string;
1120
1311
  src?: string;
1121
1312
  srcSet?: string;
1122
1313
  type?: string;
1314
+ width?: number;
1123
1315
  }
1124
1316
  interface StyleHTMLAttributes<T> extends HTMLAttributes<T> {
1125
1317
  media?: string;
@@ -1137,8 +1329,6 @@ export declare namespace JSXBase {
1137
1329
  interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
1138
1330
  autoComplete?: string;
1139
1331
  autocomplete?: string;
1140
- autoFocus?: boolean;
1141
- autofocus?: boolean | string;
1142
1332
  cols?: number;
1143
1333
  disabled?: boolean;
1144
1334
  form?: string;
@@ -1191,6 +1381,8 @@ export declare namespace JSXBase {
1191
1381
  interface HTMLAttributes<T = HTMLElement> extends DOMAttributes<T> {
1192
1382
  innerHTML?: string;
1193
1383
  accessKey?: string;
1384
+ autoFocus?: boolean;
1385
+ autofocus?: boolean | string;
1194
1386
  class?: string | {
1195
1387
  [className: string]: boolean;
1196
1388
  };
@@ -1202,6 +1394,7 @@ export declare namespace JSXBase {
1202
1394
  draggable?: boolean;
1203
1395
  hidden?: boolean;
1204
1396
  id?: string;
1397
+ inert?: boolean;
1205
1398
  lang?: string;
1206
1399
  spellcheck?: 'true' | 'false' | any;
1207
1400
  style?: {
@@ -1210,6 +1403,7 @@ export declare namespace JSXBase {
1210
1403
  tabIndex?: number;
1211
1404
  tabindex?: number | string;
1212
1405
  title?: string;
1406
+ popover?: string | null;
1213
1407
  inputMode?: string;
1214
1408
  inputmode?: string;
1215
1409
  enterKeyHint?: string;
@@ -1508,6 +1702,13 @@ export declare namespace JSXBase {
1508
1702
  z?: number | string;
1509
1703
  zoomAndPan?: string;
1510
1704
  }
1705
+ /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent) */
1706
+ interface ToggleEvent extends Event {
1707
+ /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/newState) */
1708
+ readonly newState: string;
1709
+ /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/oldState) */
1710
+ readonly oldState: string;
1711
+ }
1511
1712
  interface DOMAttributes<T> extends JSXAttributes<T> {
1512
1713
  slot?: string;
1513
1714
  part?: string;
@@ -1524,6 +1725,10 @@ export declare namespace JSXBase {
1524
1725
  onCompositionstartCapture?: (event: CompositionEvent) => void;
1525
1726
  onCompositionupdate?: (event: CompositionEvent) => void;
1526
1727
  onCompositionupdateCapture?: (event: CompositionEvent) => void;
1728
+ onBeforeToggle?: (event: ToggleEvent) => void;
1729
+ onBeforeToggleCapture?: (event: ToggleEvent) => void;
1730
+ onToggle?: (event: ToggleEvent) => void;
1731
+ onToggleCapture?: (event: ToggleEvent) => void;
1527
1732
  onFocus?: (event: FocusEvent) => void;
1528
1733
  onFocusCapture?: (event: FocusEvent) => void;
1529
1734
  onFocusin?: (event: FocusEvent) => void;
@@ -1553,7 +1758,7 @@ export declare namespace JSXBase {
1553
1758
  onKeyUp?: (event: KeyboardEvent) => void;
1554
1759
  onKeyUpCapture?: (event: KeyboardEvent) => void;
1555
1760
  onAuxClick?: (event: MouseEvent) => void;
1556
- onClick?: (event: MouseEvent) => void;
1761
+ onClick?: (event: PointerEvent) => void;
1557
1762
  onClickCapture?: (event: MouseEvent) => void;
1558
1763
  onContextMenu?: (event: MouseEvent) => void;
1559
1764
  onContextMenuCapture?: (event: MouseEvent) => void;
@@ -1633,6 +1838,8 @@ export declare namespace JSXBase {
1633
1838
  onTransitionRunCapture?: (event: TransitionEvent) => void;
1634
1839
  onTransitionStart?: (event: TransitionEvent) => void;
1635
1840
  onTransitionStartCapture?: (event: TransitionEvent) => void;
1841
+ [key: `aria-${string}`]: string | boolean | undefined;
1842
+ [key: `aria${string}`]: string | boolean | undefined;
1636
1843
  }
1637
1844
  }
1638
1845
  export interface JSXAttributes<T = Element> {
@@ -1643,6 +1850,7 @@ export interface CustomElementsDefineOptions {
1643
1850
  exclude?: string[];
1644
1851
  resourcesUrl?: string;
1645
1852
  syncQueue?: boolean;
1853
+ /** @deprecated in-favour of `setTagTransformer` and `transformTag` */
1646
1854
  transformTagName?: (tagName: string) => string;
1647
1855
  jmp?: (c: Function) => any;
1648
1856
  raf?: (c: FrameRequestCallback) => number;
@@ -33,9 +33,20 @@ There are many use cases where this operator can be used, however, a simple exam
33
33
  computed property is given in example below:
34
34
 
35
35
  ```typescript jsx
36
- import { Component, ComponentInterface, Prop } from '@stencil/core';
37
- import { combineLatest, map } from 'rxjs';
38
- import { propertyObservable, untilDisconnected, scheduleRender } from '@runopencode/rx-stencil';
36
+ import {
37
+ Component,
38
+ ComponentInterface,
39
+ Prop,
40
+ } from '@stencil/core';
41
+ import {
42
+ combineLatest,
43
+ map,
44
+ } from 'rxjs';
45
+ import {
46
+ propertyObservable,
47
+ untilDisconnected,
48
+ scheduleRender,
49
+ } from '@runopencode/rx-stencil';
39
50
 
40
51
  @Component({
41
52
  tag: 'my-component',
@@ -67,6 +78,54 @@ class MyComponent implements ComponentInterface {
67
78
  }
68
79
  ```
69
80
 
81
+ ## propertiesObservable()
82
+
83
+ Similar to `propertyObservable()`, with exception that you are able to observe changes of multiple properties at once.
84
+
85
+ Function signature is: `propertiesObservable<T extends any[]>(cmp: ComponentInterface, ...properties: string[]): Observable<T>`
86
+
87
+ Obvious use case is to observe changes of multiple properties at once and set the value of computed one.
88
+
89
+ ```typescript jsx
90
+ import {
91
+ Component,
92
+ ComponentInterface,
93
+ Prop,
94
+ } from '@stencil/core';
95
+ import { map } from 'rxjs';
96
+ import {
97
+ propertiesObservable,
98
+ scheduleRender,
99
+ untilDisconnected
100
+ } from '@runopencode/rx-stencil';
101
+
102
+ @Component({
103
+ tag: 'my-component',
104
+ })
105
+ class MyComponent implements ComponentInterface {
106
+
107
+ @Prop()
108
+ public first: number = 0;
109
+
110
+ @Prop()
111
+ public second: number = 0;
112
+
113
+ private sum: number = 0;
114
+
115
+ public connectedCallback(): void {
116
+ propertiesObservable(this, 'first', 'second').pipe(
117
+ untilDisconnected(this),
118
+ map(([first, second]) => first + second),
119
+ scheduleRender(this),
120
+ ).subscribe(sum => this.sum = sum);
121
+ }
122
+
123
+ public render(): any {
124
+ return <div>{this.sum}</div>;
125
+ }
126
+ }
127
+ ```
128
+
70
129
  ## renderObservable()
71
130
 
72
131
  This operator is used to create an observable which will emit new value after `render()` function of the component is
package/loader/cdn.js CHANGED
@@ -1,3 +1 @@
1
-
2
- module.exports = require('../dist/cjs/loader.cjs.js');
3
- module.exports.applyPolyfills = function() { return Promise.resolve() };
1
+ module.exports = require('../dist/cjs/loader.cjs.js');
@@ -1,3 +1 @@
1
-
2
- module.exports = require('../dist/cjs/loader.cjs.js');
3
- module.exports.applyPolyfills = function() { return Promise.resolve() };
1
+ module.exports = require('../dist/cjs/loader.cjs.js');
package/loader/index.d.ts CHANGED
@@ -9,6 +9,9 @@ export interface CustomElementsDefineOptions {
9
9
  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
10
10
  }
11
11
  export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
12
+ /**
13
+ * @deprecated
14
+ */
12
15
  export declare function applyPolyfills(): Promise<void>;
13
16
 
14
17
  /**
@@ -1,3 +1 @@
1
-
2
- export * from '../dist/esm/polyfills/index.js';
3
- export * from '../dist/esm/loader.js';
1
+ export * from '../dist/esm/loader.js';
package/loader/index.js CHANGED
@@ -1,4 +1,2 @@
1
-
2
1
  (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
3
- export * from '../dist/esm/polyfills/index.js';
4
- export * from '../dist/esm/loader.js';
2
+ export * from '../dist/esm/loader.js';
package/package.json CHANGED
@@ -1,11 +1,13 @@
1
1
  {
2
2
  "name": "@runopencode/rx-stencil",
3
- "version": "0.4.1",
3
+ "version": "0.4.3",
4
4
  "description": "ReactiveX (RxJS) utilities for Stencil",
5
5
  "keywords": [
6
6
  "stencil",
7
7
  "stenciljs",
8
- "rxjs"
8
+ "rxjs",
9
+ "web components",
10
+ "reactive programming"
9
11
  ],
10
12
  "main": "dist/index.cjs.js",
11
13
  "module": "dist/index.js",
@@ -31,18 +33,17 @@
31
33
  "test.watch": "stencil test --spec --e2e --watchAll",
32
34
  "generate": "stencil generate"
33
35
  },
34
- "dependencies": {
35
- "@stencil/core": "^4.0.0"
36
- },
37
36
  "peerDependencies": {
37
+ "@stencil/core": "^4.0",
38
38
  "rxjs": "^7.0"
39
39
  },
40
40
  "devDependencies": {
41
- "@types/jest": "^27.5.2",
42
- "@types/node": "^16.18.11",
43
- "jest": "^27.5.1",
44
- "jest-cli": "^27.5.1",
45
- "puppeteer": "21.1.1"
41
+ "@stencil/sass": "^3.2.3",
42
+ "@types/jest": "^29.5.14",
43
+ "@types/node": "^22.13.5",
44
+ "jest": "^29.7.0",
45
+ "jest-cli": "^29.7.0",
46
+ "puppeteer": "^24.3.0"
46
47
  },
47
48
  "license": "MIT"
48
49
  }