@rhtml/component 0.0.136 → 0.0.138

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 (5) hide show
  1. package/dist/index.d.ts +3 -0
  2. package/dist/index.js +23 -0
  3. package/dist/index.js.map +1 -1
  4. package/package.json +2 -2
  5. package/src/index.ts +16 -0
package/dist/index.d.ts CHANGED
@@ -17,6 +17,9 @@ export type RenderResult<S, D, K extends LitElement> = (deps: D) => (this: K, st
17
17
  export interface Options extends Without<CustomElementConfig<never>, 'template'> {
18
18
  deepCloneState?: boolean;
19
19
  }
20
+ export interface OnRendererLoaded {
21
+ OnRendererLoaded(): void;
22
+ }
20
23
  export declare const Partial: <S, D, K extends LitElement = LitElement>(options: Options) => (deps?: D) => (state?: StateToRender<S, D, K>) => (loading?: () => PossibleRender) => (error?: (e: Error | unknown) => PossibleRender) => (render?: RenderResult<S, D, K>) => <K_1 extends new (...args: any[]) => {}>(Base: K_1) => {
21
24
  new (...args: any[]): {
22
25
  getTemplateResult(): any;
package/dist/index.js CHANGED
@@ -1,4 +1,13 @@
1
1
  "use strict";
2
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4
+ return new (P || (P = Promise))(function (resolve, reject) {
5
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
9
+ });
10
+ };
2
11
  Object.defineProperty(exports, "__esModule", { value: true });
3
12
  exports.Component = exports.Partial = exports.DefineDependencies = void 0;
4
13
  require("@rhtml/renderer");
@@ -12,9 +21,23 @@ const DefineDependencies = (...deps) => (injection) => {
12
21
  return deps;
13
22
  };
14
23
  exports.DefineDependencies = DefineDependencies;
24
+ /**
25
+ * This method waits for the parent component to finish loading and then triggers event
26
+ * OnRendererLoaded is a specially designed hook to wait for the last dom rerender
27
+ * before calling the callback
28
+ */
29
+ function waitBeforeTrigger() {
30
+ var _a;
31
+ return __awaiter(this, void 0, void 0, function* () {
32
+ yield this.updateComplete;
33
+ yield new Promise(requestAnimationFrame);
34
+ (_a = this.OnRendererLoaded) === null || _a === void 0 ? void 0 : _a.call(this);
35
+ });
36
+ }
15
37
  const Partial = (options) => (deps = []) => (state = () => ({})) => (loading = () => null) => (error = () => null) => (render = () => state) => (0, lit_html_1.Component)(Object.assign(Object.assign({}, options), { template() {
16
38
  return (0, lit_html_1.html) `
17
39
  <r-renderer
40
+ @loaded=${waitBeforeTrigger.bind(this)}
18
41
  .options=${{
19
42
  state: state.bind(this).call(this, deps),
20
43
  loading: loading.bind(this),
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,2BAAyB;AAEzB,6CAMwB;AAiBjB,MAAM,kBAAkB,GAC7B,CAA0B,GAAG,IAAO,EAAE,EAAE,CACxC,CAAC,SAAoB,EAAoB,EAAE;IACzC,KAAK,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;QAC1C,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,KAAK,EAAE;YACjC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,SAAS,IAAI,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;SACxE,CAAC,CAAC;IACL,CAAC;IACD,OAAO,IAAa,CAAC;AACvB,CAAC,CAAC;AATS,QAAA,kBAAkB,sBAS3B;AAsBG,MAAM,OAAO,GAClB,CAA0C,OAAgB,EAAE,EAAE,CAC9D,CAAC,OAAU,EAAW,EAAE,EAAE,CAC1B,CAAC,QAAgC,GAAG,EAAE,CAAC,CAAC,EAAY,CAAA,EAAE,EAAE,CACxD,CAAC,UAAgC,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE,CAC/C,CAAC,QAAgD,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE,CAC/D,CAAC,SAAgC,GAAG,EAAE,CAAC,KAAc,EAAE,EAAE,CACvD,IAAA,oBAAiB,kCACZ,OAAO,KACV,QAAQ;QACN,OAAO,IAAA,eAAI,EAAA;;uBAEI;YACT,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;YACxC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;YAC3B,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;YACvB,cAAc,EAAE,OAAO,CAAC,cAAc;YACtC,MAAM,EAAE,CACN,KAAQ,EACR,QAAwB,EACxB,UAAsB,EACtB,EAAE;gBACF,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;gBACnC,OAAO,MAAM,CAAC,IAAI,CAAC;qBAChB,IAAI,CAAC,IAAI,CAAC;qBACV,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC;YAC7C,CAAC;SACO;;SAEb,CAAC;IACJ,CAAC,IACD,CAAC;AA/BM,QAAA,OAAO,WA+Bb;AAEP,SAAgB,SAAS,CAA0C,EACjE,QAAQ,EACR,SAAS,EACT,KAAK,EACL,MAAM,EACN,OAAO,EACP,KAAK,GAQN;IACC,OAAO,IAAA,eAAO,EAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;AACrE,CAAC;AAhBD,8BAgBC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,2BAAyB;AAEzB,6CAMwB;AAiBjB,MAAM,kBAAkB,GAC7B,CAA0B,GAAG,IAAO,EAAE,EAAE,CACxC,CAAC,SAAoB,EAAoB,EAAE;IACzC,KAAK,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;QAC1C,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,KAAK,EAAE;YACjC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,SAAS,IAAI,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;SACxE,CAAC,CAAC;IACL,CAAC;IACD,OAAO,IAAa,CAAC;AACvB,CAAC,CAAC;AATS,QAAA,kBAAkB,sBAS3B;AA0BJ;;;;GAIG;AACH,SAAe,iBAAiB;;;QAC9B,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,MAAM,IAAI,OAAO,CAAC,qBAAqB,CAAC,CAAC;QACzC,MAAA,IAAI,CAAC,gBAAgB,0CAAE,IAAI,CAAC,IAAI,CAAC,CAAC;;CACnC;AAEM,MAAM,OAAO,GAClB,CAA0C,OAAgB,EAAE,EAAE,CAC9D,CAAC,OAAU,EAAW,EAAE,EAAE,CAC1B,CAAC,QAAgC,GAAG,EAAE,CAAC,CAAC,EAAY,CAAA,EAAE,EAAE,CACxD,CAAC,UAAgC,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE,CAC/C,CAAC,QAAgD,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE,CAC/D,CAAC,SAAgC,GAAG,EAAE,CAAC,KAAc,EAAE,EAAE,CACvD,IAAA,oBAAiB,kCACZ,OAAO,KACV,QAAQ;QACN,OAAO,IAAA,eAAI,EAAA;;sBAEG,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC;uBAC3B;YACT,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;YACxC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;YAC3B,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;YACvB,cAAc,EAAE,OAAO,CAAC,cAAc;YACtC,MAAM,EAAE,CACN,KAAQ,EACR,QAAwB,EACxB,UAAsB,EACtB,EAAE;gBACF,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;gBACnC,OAAO,MAAM,CAAC,IAAI,CAAC;qBAChB,IAAI,CAAC,IAAI,CAAC;qBACV,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC;YAC7C,CAAC;SACO;;SAEb,CAAC;IACJ,CAAC,IACD,CAAC;AAhCM,QAAA,OAAO,WAgCb;AAEP,SAAgB,SAAS,CAA0C,EACjE,QAAQ,EACR,SAAS,EACT,KAAK,EACL,MAAM,EACN,OAAO,EACP,KAAK,GAQN;IACC,OAAO,IAAA,eAAO,EAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;AACrE,CAAC;AAhBD,8BAgBC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rhtml/component",
3
- "version": "0.0.136",
3
+ "version": "0.0.138",
4
4
  "description": "Reactive HyperText Markup Language",
5
5
  "scripts": {
6
6
  "start": "npx parcel ./examples/index.html --out-dir build/examples",
@@ -18,7 +18,7 @@
18
18
  },
19
19
  "dependencies": {
20
20
  "@rxdi/lit-html": "^0.7.178",
21
- "@rhtml/renderer": "0.0.136"
21
+ "@rhtml/renderer": "0.0.138"
22
22
  },
23
23
  "peerDependencies": {
24
24
  "rxjs": "^7.8.0"
package/src/index.ts CHANGED
@@ -54,6 +54,21 @@ export interface Options
54
54
  deepCloneState?: boolean;
55
55
  }
56
56
 
57
+ export interface OnRendererLoaded {
58
+ OnRendererLoaded(): void;
59
+ }
60
+
61
+ /**
62
+ * This method waits for the parent component to finish loading and then triggers event
63
+ * OnRendererLoaded is a specially designed hook to wait for the last dom rerender
64
+ * before calling the callback
65
+ */
66
+ async function waitBeforeTrigger(this: LitElement & OnRendererLoaded) {
67
+ await this.updateComplete;
68
+ await new Promise(requestAnimationFrame);
69
+ this.OnRendererLoaded?.call(this);
70
+ }
71
+
57
72
  export const Partial =
58
73
  <S, D, K extends LitElement = LitElement>(options: Options) =>
59
74
  (deps: D = [] as never) =>
@@ -66,6 +81,7 @@ export const Partial =
66
81
  template(this: K) {
67
82
  return html`
68
83
  <r-renderer
84
+ @loaded=${waitBeforeTrigger.bind(this)}
69
85
  .options=${{
70
86
  state: state.bind(this).call(this, deps),
71
87
  loading: loading.bind(this),