@twobirds/microcomponents 0.0.75 → 0.0.76
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/dist/formvValues.min.js +1 -1
- package/dist/microcomponents.min.js +1 -1
- package/dist/observables.d.ts.map +1 -1
- package/dist/observables.min.js +1 -1
- package/dist/observables.ts +169 -177
- package/package.json +1 -1
- package/public/formvValues.min.js +1 -1
- package/public/microcomponents.min.js +1 -1
- package/public/observables.d.ts.map +1 -1
- package/public/observables.js +118 -111
- package/public/observables.js.map +1 -1
- package/public/observables.min.js +1 -1
- package/public/observables.ts +169 -177
- package/public/src/observables.ts +169 -177
- package/public/test/microcomponents.min.js +1 -1
- package/public/test/observables.d.ts.map +1 -1
- package/public/test/observables.js +118 -111
- package/public/test/observables.js.map +1 -1
- package/public/test/observables.ts +169 -177
- package/public/test/test/testform.js +1 -1
- package/public/test/test.js +3 -3
- package/public/test/test.js.map +1 -1
- package/public/typedoc/classes/MC.DC.html +2 -2
- package/public/typedoc/classes/MC.MC.html +2 -2
- package/public/typedoc/classes/MC.McBase.html +2 -2
- package/public/typedoc/classes/MC.McEvent.html +2 -2
- package/public/typedoc/functions/MC.addListener.html +1 -1
- package/public/typedoc/functions/MC.autoload.html +1 -1
- package/public/typedoc/functions/MC.removeListener.html +1 -1
- package/public/typedoc/functions/elements.defineCE.html +1 -1
- package/public/typedoc/functions/elements.getCE.html +1 -1
- package/public/typedoc/functions/formValues.formValues.html +1 -1
- package/public/typedoc/functions/observables.observe.html +1 -1
- package/public/typedoc/interfaces/MC.HTMLMcElement.html +2 -2
- package/public/typedoc/modules/MC.html +1 -1
- package/public/typedoc/modules/elements.html +1 -1
- package/public/typedoc/modules/formValues.html +1 -1
- package/public/typedoc/modules/observables.html +1 -1
- package/public/typedoc/types/observables.Observable.html +1 -1
- package/src/observables.ts +169 -177
- package/src/test/test.ts +7 -7
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>MC | Micro Components</title><meta name="description" content="Documentation for Micro Components"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Micro Components</a></li><li><a href="MC.html">MC</a></li></ul><h1>Module MC</h1></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>MC | Micro Components</title><meta name="description" content="Documentation for Micro Components"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Micro Components</a></li><li><a href="MC.html">MC</a></li></ul><h1>Module MC</h1></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/9c050abd2a6b066c8097c3eb9c18a2ac4ae7db06/src/MC.ts#L1">src/MC.ts:1</a></li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><h3 class="tsd-index-heading uppercase">Index</h3><section class="tsd-index-section"><h3 class="tsd-index-heading">Classes</h3><div class="tsd-index-list"><a href="../classes/MC.DC.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-128"></use></svg><span>DC</span></a>
|
|
2
2
|
<a href="../classes/MC.MC.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-128"></use></svg><span>MC</span></a>
|
|
3
3
|
<a href="../classes/MC.McBase.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-128"></use></svg><span>Mc<wbr/>Base</span></a>
|
|
4
4
|
<a href="../classes/MC.McEvent.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-128"></use></svg><span>Mc<wbr/>Event</span></a>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>elements | Micro Components</title><meta name="description" content="Documentation for Micro Components"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Micro Components</a></li><li><a href="elements.html">elements</a></li></ul><h1>Module elements</h1></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>elements | Micro Components</title><meta name="description" content="Documentation for Micro Components"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Micro Components</a></li><li><a href="elements.html">elements</a></li></ul><h1>Module elements</h1></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/9c050abd2a6b066c8097c3eb9c18a2ac4ae7db06/src/elements.ts#L1">src/elements.ts:1</a></li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><h3 class="tsd-index-heading uppercase">Index</h3><section class="tsd-index-section"><h3 class="tsd-index-heading">Functions</h3><div class="tsd-index-list"><a href="../functions/elements.defineCE.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-64"></use></svg><span>defineCE</span></a>
|
|
2
2
|
<a href="../functions/elements.getCE.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-64"></use></svg><span>getCE</span></a>
|
|
3
3
|
</div></section></section></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>Micro Components</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>formValues | Micro Components</title><meta name="description" content="Documentation for Micro Components"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Micro Components</a></li><li><a href="formValues.html">formValues</a></li></ul><h1>Module formValues</h1></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>formValues | Micro Components</title><meta name="description" content="Documentation for Micro Components"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Micro Components</a></li><li><a href="formValues.html">formValues</a></li></ul><h1>Module formValues</h1></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/9c050abd2a6b066c8097c3eb9c18a2ac4ae7db06/src/formValues.ts#L1">src/formValues.ts:1</a></li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><h3 class="tsd-index-heading uppercase">Index</h3><section class="tsd-index-section"><h3 class="tsd-index-heading">Functions</h3><div class="tsd-index-list"><a href="../functions/formValues.formValues.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-64"></use></svg><span>form<wbr/>Values</span></a>
|
|
2
2
|
</div></section></section></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>Micro Components</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>observables | Micro Components</title><meta name="description" content="Documentation for Micro Components"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Micro Components</a></li><li><a href="observables.html">observables</a></li></ul><h1>Module observables</h1></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>observables | Micro Components</title><meta name="description" content="Documentation for Micro Components"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Micro Components</a></li><li><a href="observables.html">observables</a></li></ul><h1>Module observables</h1></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/9c050abd2a6b066c8097c3eb9c18a2ac4ae7db06/src/observables.ts#L1">src/observables.ts:1</a></li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><h3 class="tsd-index-heading uppercase">Index</h3><section class="tsd-index-section"><h3 class="tsd-index-heading">Type Aliases</h3><div class="tsd-index-list"><a href="../types/observables.Observable.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2097152"></use></svg><span>Observable</span></a>
|
|
2
2
|
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Functions</h3><div class="tsd-index-list"><a href="../functions/observables.observe.html" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-64"></use></svg><span>observe</span></a>
|
|
3
3
|
</div></section></section></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>Micro Components</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Observable | Micro Components</title><meta name="description" content="Documentation for Micro Components"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Micro Components</a></li><li><a href="../modules/observables.html">observables</a></li><li><a href="observables.Observable.html">Observable</a></li></ul><h1>Type Alias Observable</h1></div><div class="tsd-signature"><span class="tsd-kind-type-alias">Observable</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{ </span><br/><span> </span><span class="tsd-kind-property">bind</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">target</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">DocumentFragment</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">ShadowRoot</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">; </span><br/><span> </span><span class="tsd-kind-property">notify</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">; </span><br/><span> </span><span class="tsd-kind-property">observe</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">cb</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Callback</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">; </span><br/><span class="tsd-signature-symbol">}</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/
|
|
1
|
+
<!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Observable | Micro Components</title><meta name="description" content="Documentation for Micro Components"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Micro Components</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Micro Components</a></li><li><a href="../modules/observables.html">observables</a></li><li><a href="observables.Observable.html">Observable</a></li></ul><h1>Type Alias Observable</h1></div><div class="tsd-signature"><span class="tsd-kind-type-alias">Observable</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-symbol">{ </span><br/><span> </span><span class="tsd-kind-property">bind</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">target</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">HTMLElement</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">DocumentFragment</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">ShadowRoot</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">; </span><br/><span> </span><span class="tsd-kind-property">notify</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">; </span><br/><span> </span><span class="tsd-kind-property">observe</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">cb</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Callback</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">; </span><br/><span class="tsd-signature-symbol">}</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/9c050abd2a6b066c8097c3eb9c18a2ac4ae7db06/src/observables.ts#L194">src/observables.ts:194</a></li></ul></aside></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>Micro Components</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
|
package/src/observables.ts
CHANGED
|
@@ -194,215 +194,207 @@ function makePlaceholders(
|
|
|
194
194
|
export type Observable = {
|
|
195
195
|
observe: (cb: Callback) => void;
|
|
196
196
|
notify: () => void;
|
|
197
|
-
bind: (target: HTMLElement | DocumentFragment | ShadowRoot
|
|
197
|
+
bind: (target: HTMLElement | DocumentFragment | ShadowRoot) => void;
|
|
198
198
|
};
|
|
199
199
|
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
const Constructor = val.constructor,
|
|
209
|
-
ConstructorName: string = Constructor.name;
|
|
210
|
-
|
|
211
|
-
let ObservableClass = class extends Constructor {
|
|
212
|
-
#notify: boolean = true;
|
|
213
|
-
#callbacks: Array<Function> = [];
|
|
200
|
+
export const observe = (
|
|
201
|
+
target: LooseObject,
|
|
202
|
+
propertyName?: string
|
|
203
|
+
): LooseObject => {
|
|
204
|
+
let keys = !propertyName
|
|
205
|
+
? [...Object.getOwnPropertyNames(target)]
|
|
206
|
+
: [propertyName];
|
|
214
207
|
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
208
|
+
keys.forEach((key) => {
|
|
209
|
+
// console.log( 'co propname', key, typeof target[key], target[key] );
|
|
210
|
+
if (key[0] === '_' || target?.[key] === undefined) return target;
|
|
211
|
+
let val: any = target[key],
|
|
212
|
+
Constructor: any;
|
|
213
|
+
|
|
214
|
+
if (!val.prototype) {
|
|
215
|
+
switch (typeof val) {
|
|
216
|
+
case 'string':
|
|
217
|
+
Constructor = String;
|
|
218
|
+
break;
|
|
219
|
+
case 'number':
|
|
220
|
+
Constructor = Number;
|
|
221
|
+
break;
|
|
222
|
+
case 'boolean':
|
|
223
|
+
Constructor = Boolean;
|
|
224
|
+
break;
|
|
225
|
+
case 'object':
|
|
226
|
+
if (val instanceof Array) {
|
|
227
|
+
Constructor = Array;
|
|
228
|
+
} else {
|
|
229
|
+
Constructor = Object;
|
|
230
|
+
}
|
|
231
|
+
break;
|
|
232
|
+
default:
|
|
233
|
+
return;
|
|
223
234
|
}
|
|
224
235
|
}
|
|
225
236
|
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
this.#callbacks.push(f);
|
|
229
|
-
return this;
|
|
230
|
-
}
|
|
237
|
+
let Observable = class extends Constructor {
|
|
238
|
+
#notify: boolean = true;
|
|
231
239
|
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
const placeholders: unknown = [
|
|
240
|
-
...target.querySelectorAll('[_mc]'),
|
|
241
|
-
].filter((e) => !!(e as LooseObject)?._mc?._placeholders);
|
|
242
|
-
//console.log('placeholders:', target, placeholders);
|
|
243
|
-
const func = function callback(data: LooseObject) {
|
|
244
|
-
// avoid bubbling for speed
|
|
245
|
-
let d = flattenObject(data);
|
|
246
|
-
//console.log('inside callback', target, d);
|
|
247
|
-
(placeholders as DC[]).forEach((e) => {
|
|
248
|
-
// console.log('trigger callback', e);
|
|
249
|
-
if (!e) return;
|
|
250
|
-
(e as any)._mc.trigger('data', d);
|
|
240
|
+
constructor(val: any) {
|
|
241
|
+
super(val);
|
|
242
|
+
(this.constructor as LooseObject).callbacks = [];
|
|
243
|
+
if (isObservableObject(val)) {
|
|
244
|
+
// you cannot bind native values to the dom
|
|
245
|
+
Object.getOwnPropertyNames(val).forEach((key) => {
|
|
246
|
+
this[key] = val[key];
|
|
251
247
|
});
|
|
252
|
-
}
|
|
253
|
-
(that as any).#callbacks.push(func);
|
|
254
|
-
that.notify();
|
|
255
|
-
} else {
|
|
256
|
-
console.warn(
|
|
257
|
-
'IGNORED - cannot bind a non-Object to the dom, IS:',
|
|
258
|
-
typeof that.valueOf(),
|
|
259
|
-
that
|
|
260
|
-
);
|
|
248
|
+
}
|
|
261
249
|
}
|
|
262
250
|
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
let that = this,
|
|
268
|
-
data =
|
|
269
|
-
isObservableObject(that.valueOf()) &&
|
|
270
|
-
that.valueOf() instanceof Array === false
|
|
271
|
-
? structuredClone(Object.assign({}, that))
|
|
272
|
-
: that.valueOf();
|
|
273
|
-
|
|
274
|
-
if (notify !== undefined) {
|
|
275
|
-
that.#notify = notify;
|
|
276
|
-
// return;
|
|
251
|
+
observe(f: Function) {
|
|
252
|
+
//console.log('observe');
|
|
253
|
+
(this.constructor as any).callbacks.push(f);
|
|
254
|
+
return this;
|
|
277
255
|
}
|
|
278
256
|
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
//
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
257
|
+
bind(target: HTMLElement | DocumentFragment | ShadowRoot) {
|
|
258
|
+
const that = this,
|
|
259
|
+
iso = isObservableObject(that.valueOf());
|
|
260
|
+
//console.log('bind', iso, target);
|
|
261
|
+
|
|
262
|
+
if (iso) {
|
|
263
|
+
makePlaceholders(target);
|
|
264
|
+
const placeholders: unknown = [
|
|
265
|
+
...target.querySelectorAll('[_mc]'),
|
|
266
|
+
].filter((e) => !!(e as LooseObject)?._mc?._placeholders);
|
|
267
|
+
//console.log('placeholders:', target, placeholders);
|
|
268
|
+
const func = function callback(data: LooseObject) {
|
|
269
|
+
// avoid bubbling for speed
|
|
270
|
+
let d = flattenObject(data);
|
|
271
|
+
//console.log('inside callback', target, d);
|
|
272
|
+
(placeholders as DC[]).forEach((e) => {
|
|
273
|
+
// console.log('trigger callback', e);
|
|
274
|
+
if (!e) return;
|
|
275
|
+
(e as any)._mc.trigger('data', d);
|
|
276
|
+
});
|
|
277
|
+
};
|
|
278
|
+
(that.constructor as any).callbacks.push(func);
|
|
279
|
+
that.notify();
|
|
280
|
+
} else {
|
|
281
|
+
console.warn(
|
|
282
|
+
'IGNORED - cannot bind a non-Object to the dom, IS:',
|
|
283
|
+
typeof that.valueOf(),
|
|
284
|
+
that
|
|
285
|
+
);
|
|
286
|
+
}
|
|
289
287
|
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
};
|
|
288
|
+
return this;
|
|
289
|
+
}
|
|
293
290
|
|
|
294
|
-
|
|
291
|
+
notify(notify?: boolean) {
|
|
292
|
+
let that = this,
|
|
293
|
+
data =
|
|
294
|
+
isObservableObject(that.valueOf()) &&
|
|
295
|
+
that.valueOf() instanceof Array === false
|
|
296
|
+
? structuredClone(Object.assign({}, that))
|
|
297
|
+
: that.valueOf();
|
|
298
|
+
|
|
299
|
+
if (notify !== undefined) {
|
|
300
|
+
that.#notify = notify;
|
|
301
|
+
// return;
|
|
302
|
+
}
|
|
295
303
|
|
|
296
|
-
|
|
304
|
+
//if (that.#notify) console.log('notify', this, data);
|
|
305
|
+
(that.constructor as any).callbacks.forEach((f: Function) => {
|
|
306
|
+
// console.log(
|
|
307
|
+
// (this.constructor as any).callbacks,
|
|
308
|
+
// 'notify: exec callback',
|
|
309
|
+
// f,
|
|
310
|
+
// data
|
|
311
|
+
// );
|
|
312
|
+
f(data);
|
|
313
|
+
});
|
|
297
314
|
|
|
298
|
-
|
|
299
|
-
}
|
|
315
|
+
return that;
|
|
316
|
+
}
|
|
317
|
+
};
|
|
300
318
|
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
319
|
+
let o = new Observable(val);
|
|
320
|
+
|
|
321
|
+
Object.defineProperty(target, key, {
|
|
322
|
+
enumerable: true,
|
|
323
|
+
get() {
|
|
324
|
+
if (isObservableObject(o.valueOf())) {
|
|
325
|
+
let check = structuredClone(Object.assign({}, o));
|
|
326
|
+
setTimeout(
|
|
327
|
+
debounce(function checkChanges() {
|
|
328
|
+
let state = structuredClone(Object.assign({}, o));
|
|
329
|
+
//console.log( 'check changes', state, check );
|
|
330
|
+
if (!deepEqual(state, check)) {
|
|
331
|
+
//console.log( '-> not equal!' );
|
|
332
|
+
o.notify();
|
|
333
|
+
}
|
|
334
|
+
}, 0),
|
|
335
|
+
0
|
|
336
|
+
);
|
|
337
|
+
}
|
|
338
|
+
return o;
|
|
339
|
+
},
|
|
340
|
+
set(val: any) {
|
|
341
|
+
//console.log( 'SET:', isObservableObject( val.valueOf() ), 'set:', val, 'to', isObservableObject( o.valueOf() ), o, );
|
|
342
|
+
if (typeof val === typeof o.valueOf()) {
|
|
343
|
+
let iso =
|
|
344
|
+
isObservableObject(o.valueOf()) &&
|
|
345
|
+
o.valueOf() instanceof Array === false;
|
|
346
|
+
//console.log('target iso:', iso);
|
|
347
|
+
if (iso) {
|
|
348
|
+
let old = structuredClone(Object.assign({}, o));
|
|
349
|
+
//val = structuredClone(Object.assign({}, val));
|
|
350
|
+
|
|
351
|
+
//let callbacks = (o.constructor as LooseObject).callbacks;
|
|
352
|
+
if (o instanceof Observable === false) {
|
|
353
|
+
o = new Observable(structuredClone(Object.assign({}, val)));
|
|
354
|
+
copyGettersSetters(val, o);
|
|
355
|
+
o.seal();
|
|
356
|
+
}
|
|
357
|
+
Object.assign(o, val);
|
|
305
358
|
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
propertyName?: string
|
|
309
|
-
): LooseObject => {
|
|
310
|
-
let keys = !propertyName
|
|
311
|
-
? [...Object.getOwnPropertyNames(target)]
|
|
312
|
-
: [propertyName];
|
|
359
|
+
// console.log('after set o=', o, 'check', old);
|
|
360
|
+
// (o.constructor as LooseObject).callbacks = callbacks;
|
|
313
361
|
|
|
314
|
-
keys.forEach((key) => {
|
|
315
|
-
if (
|
|
316
|
-
target.hasOwnProperty(key)
|
|
317
|
-
&& typeof target[key] !== 'function'
|
|
318
|
-
&& !target?.[key]?.constructor?.prototype?.observe
|
|
319
|
-
) {
|
|
320
|
-
|
|
321
|
-
// console.log( 'co propname', key, typeof target[key], target[key] );
|
|
322
|
-
if (key[0] === '_' || target?.[key] === undefined) return target;
|
|
323
|
-
let val: any = target[key];
|
|
324
|
-
|
|
325
|
-
let o = new ( getConstructor(val) as Class<typeof val> )( val );
|
|
326
|
-
|
|
327
|
-
Object.defineProperty(target, key, {
|
|
328
|
-
enumerable: true,
|
|
329
|
-
get() {
|
|
330
|
-
if (isObservableObject(o.valueOf())) {
|
|
331
|
-
let check = structuredClone(Object.assign({}, o));
|
|
332
362
|
setTimeout(
|
|
363
|
+
// check for changes
|
|
333
364
|
debounce(function checkChanges() {
|
|
334
365
|
let state = structuredClone(Object.assign({}, o));
|
|
335
366
|
//console.log( 'check changes', state, check );
|
|
336
|
-
if (!deepEqual(state,
|
|
367
|
+
if (!deepEqual(state, old)) {
|
|
337
368
|
//console.log( '-> not equal!' );
|
|
338
369
|
o.notify();
|
|
339
370
|
}
|
|
340
371
|
}, 0),
|
|
341
372
|
0
|
|
342
373
|
);
|
|
343
|
-
}
|
|
344
|
-
return o;
|
|
345
|
-
},
|
|
346
|
-
set(val: any) {
|
|
347
|
-
//console.log( 'SET:', isObservableObject( val.valueOf() ), 'set:', val, 'to', isObservableObject( o.valueOf() ), o, );
|
|
348
|
-
if (typeof val === typeof o.valueOf()) {
|
|
349
|
-
let iso =
|
|
350
|
-
isObservableObject(o.valueOf()) &&
|
|
351
|
-
o.valueOf() instanceof Array === false;
|
|
352
|
-
//console.log('target iso:', iso);
|
|
353
|
-
if (iso) {
|
|
354
|
-
let old = structuredClone(Object.assign({}, o));
|
|
355
|
-
//val = structuredClone(Object.assign({}, val));
|
|
356
|
-
|
|
357
|
-
//let callbacks = (o.constructor as LooseObject).callbacks;
|
|
358
|
-
if (o?.constructor?.prototype?.observe === undefined ) {
|
|
359
|
-
o = new ( getConstructor(val) as Class<typeof val> )( structuredClone(Object.assign({}, val)) );
|
|
360
|
-
copyGettersSetters(val, o);
|
|
361
|
-
o.seal();
|
|
362
|
-
}
|
|
363
|
-
Object.assign(o, val);
|
|
364
|
-
|
|
365
|
-
// console.log('after set o=', o, 'check', old);
|
|
366
|
-
// (o.constructor as LooseObject).callbacks = callbacks;
|
|
367
|
-
|
|
368
|
-
setTimeout(
|
|
369
|
-
// check for changes
|
|
370
|
-
debounce(function checkChanges() {
|
|
371
|
-
let state = structuredClone(Object.assign({}, o));
|
|
372
|
-
//console.log( 'check changes', state, check );
|
|
373
|
-
if (!deepEqual(state, old)) {
|
|
374
|
-
//console.log( '-> not equal!' );
|
|
375
|
-
o.notify();
|
|
376
|
-
}
|
|
377
|
-
}, 0),
|
|
378
|
-
0
|
|
379
|
-
);
|
|
380
|
-
} else {
|
|
381
|
-
// simple native var
|
|
382
|
-
let old = o.valueOf(),
|
|
383
|
-
callbacks = (o.constructor as LooseObject).callbacks;
|
|
384
|
-
o = o = new ( getConstructor(val) as Class<typeof val> )( val );
|
|
385
|
-
(o.constructor as LooseObject).callbacks = callbacks;
|
|
386
|
-
if (val !== old) {
|
|
387
|
-
o.notify();
|
|
388
|
-
}
|
|
389
|
-
}
|
|
390
374
|
} else {
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
375
|
+
// simple native var
|
|
376
|
+
let old = o.valueOf(),
|
|
377
|
+
callbacks = (o.constructor as LooseObject).callbacks;
|
|
378
|
+
o = new Observable(val);
|
|
379
|
+
(o.constructor as LooseObject).callbacks = callbacks;
|
|
380
|
+
if (val !== old) {
|
|
381
|
+
o.notify();
|
|
382
|
+
}
|
|
398
383
|
}
|
|
399
|
-
}
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
384
|
+
} else {
|
|
385
|
+
console.warn(
|
|
386
|
+
'IGNORED - cannot change observable types, IS:',
|
|
387
|
+
typeof o.valueOf(),
|
|
388
|
+
o,
|
|
389
|
+
'- CANNOT BECOME:',
|
|
390
|
+
typeof val
|
|
391
|
+
);
|
|
392
|
+
}
|
|
393
|
+
},
|
|
394
|
+
});
|
|
405
395
|
|
|
396
|
+
// replace old property with proxy (observable)
|
|
397
|
+
target[key] = val;
|
|
406
398
|
});
|
|
407
399
|
|
|
408
400
|
return target;
|
package/src/test/test.ts
CHANGED
|
@@ -90,12 +90,6 @@ defineCE(
|
|
|
90
90
|
// render
|
|
91
91
|
target.innerHTML = this.#template;
|
|
92
92
|
|
|
93
|
-
// state
|
|
94
|
-
that.Dom = { counter: 0 };
|
|
95
|
-
|
|
96
|
-
// state: convert all props defined so far into observables
|
|
97
|
-
observe(that);
|
|
98
|
-
|
|
99
93
|
// add translator
|
|
100
94
|
DC.add(
|
|
101
95
|
target,
|
|
@@ -109,6 +103,12 @@ defineCE(
|
|
|
109
103
|
oneInit(ev: McEvent) {
|
|
110
104
|
let that = this;
|
|
111
105
|
|
|
106
|
+
// state
|
|
107
|
+
that.Dom = { counter: 0 };
|
|
108
|
+
|
|
109
|
+
// state: convert all props defined so far into observables
|
|
110
|
+
observe(that);
|
|
111
|
+
|
|
112
112
|
// bind Dom to target
|
|
113
113
|
(that.Dom as Observable).bind(that.target);
|
|
114
114
|
}
|
|
@@ -160,7 +160,7 @@ setTimeout(() => {
|
|
|
160
160
|
'font-weight: bold; color: black;',
|
|
161
161
|
'font-weight: normal;',
|
|
162
162
|
max,
|
|
163
|
-
max *
|
|
163
|
+
max * 3,
|
|
164
164
|
'font-weight: bold; color: blue;',
|
|
165
165
|
end - start
|
|
166
166
|
);
|