Skip to content

Commit 4c14ddd

Browse files
ConradSollittConradSollitt
committed
🚀 Dev Updates for Next Release
1 parent defb066 commit 4c14ddd

19 files changed

Lines changed: 358 additions & 105 deletions

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,15 @@ Overall the core Framework files and API are expected to remain stable however t
1313
* React Component `<Markdown>`
1414
* Added option to sanitize the HTML for security if DOMPurify is loaded: https://github.com/cure53/DOMPurify
1515
* Added new attributes and props that allow links to be updated after the content has rendered. These attributes make it easy to show content that links to other sites correctly and for the current page not to be changed when the user clicks a link.
16+
* Performance update for React Component so that Markdown is rendered to HTML outside of the React Component `render()` function.
17+
* Added ability to optionally cache up to 100 markdown fetched downloads in memory if using related HTML Attributes or Component Props.
1618
* See code examples for full details, more detailed documentation will be published in the near future.
1719
* https://github.com/dataformsjs/dataformsjs/blob/master/examples/markdown-react.htm
1820
* https://github.com/dataformsjs/dataformsjs/blob/master/examples/markdown-react.jsx
1921
* https://github.com/dataformsjs/dataformsjs/blob/master/examples/markdown-web.htm
2022
* https://github.com/dataformsjs/dataformsjs/blob/master/examples/markdown-vue.htm
2123
* https://github.com/dataformsjs/dataformsjs/blob/master/examples/markdown-hbs.htm
24+
* Memory and API improvements for the DataFormsJS Framework core function so if `app.loadJsControl(element)` is called and the control is aleady loaded on screen it will be re-used rather than have mulitple references in memory. Use of the specific API was not needed in the past however with the new Web Components Polyfill it now has practical use.
2225

2326
## 5.2.0 (November 23, 2020)
2427

‎docs/to-do-list.txt‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@ TODO List
2323
--------------------------------------------------------------------------
2424

2525
**) Active Development for next release (likely before the end of November 2020)
26-
- Updates needed for all versions of <markdown-content> and React <Markdown>
27-
- Optional Caching (in-memory similar to JsonData)
28-
- After all updates point markdown files from [src="../] to CDN (after npm release)
29-
26+
- After all updates point markdown files from [src="../] to CDN (after npm release)
27+
- Improve readme based on this advice:
28+
https://github.com/dataformsjs/dataformsjs/issues/17
29+
3030
**) Near future updates for documentation (Likely to be completed by the of December 2020)
3131
- Add Markdown and related docs to Quick Ref Section
3232
- Add Web Component API examples to quick ref section of the main site

‎examples/html/npm-start-page.htm‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,7 @@ <h1>DataFormsJS Examples</h1>
206206
markdown_it, markdown_it_emoji
207207
markdown_it_emoji
208208
-->
209-
<url-route path="/docs" lazy-load="markdown, highlightCss, highlightJs, markdown_it, markdown_it_emoji">
209+
<url-route path="/docs" lazy-load="markdown, highlightCss, highlightJs, marked">
210210
<template>
211211
<json-data url="docs" onready="setupDocLinks()">
212212
<is-loading>
@@ -244,6 +244,7 @@ <h1>DataFormsJS Documentation</h1>
244244
<!-- <markdown-content url="doc?dir=&file=README.md"></markdown-content> -->
245245

246246
<markdown-content
247+
load-only-once
247248
loading-selector="#loading-screen"
248249
link-target="_blank"
249250
link-rel="noopener"

‎examples/markdown-hbs.htm‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ <h1>DataFormsJS Framework &lt;markdown-content&gt; Control<br> with [<span id="s
2626
-->
2727
<markdown-content
2828
data-url="https://raw.githubusercontent.com/dataformsjs/dataformsjs/master/README.md"
29+
data-load-only-once
2930
data-loading-selector="#loading-screen"
3031
data-link-target="_blank"
3132
data-link-rel="noopener"

‎examples/markdown-react.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ function HomePage() {
3737
<Markdown
3838
url="https://raw.githubusercontent.com/dataformsjs/dataformsjs/master/README.md"
3939
className="markdown-content"
40+
loadOnlyOnce
4041
isLoading={<ShowLoading />}
4142
linkTarget="_blank"
4243
linkRel="noopener"

‎examples/markdown-vue.htm‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525

2626
<template data-route="/">
2727
<h1>DataFormsJS Framework &lt;markdown-content&gt; Control<br> with [<span id="selected-library"></span>] Markdown Library and Vue</h1>
28-
<markdown-content data-url="https://raw.githubusercontent.com/dataformsjs/dataformsjs/master/README.md"></markdown-content>
2928

3029
<!--
3130
To display markdown from a web service or site only [data-url] needs to be included:
@@ -39,6 +38,7 @@ <h1>DataFormsJS Framework &lt;markdown-content&gt; Control<br> with [<span id="s
3938
-->
4039
<markdown-content
4140
data-url="https://raw.githubusercontent.com/dataformsjs/dataformsjs/master/README.md"
41+
data-load-only-once
4242
data-loading-selector="#loading-screen"
4343
data-link-target="_blank"
4444
data-link-rel="noopener"

‎examples/markdown-web.htm‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ <h1>DataFormsJS &lt;markdown-content&gt; Web Component<br> with [<span id="selec
4040
-->
4141
<markdown-content
4242
url="https://raw.githubusercontent.com/dataformsjs/dataformsjs/master/README.md"
43+
load-only-once
4344
loading-selector="#loading-screen"
4445
link-target="_blank"
4546
link-rel="noopener"

‎js/DataFormsJS.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2211,7 +2211,7 @@
22112211
* only need to be called manually if custom page logic adds new
22122212
* HTML controls to a page.
22132213
*
2214-
* @param {HTMLElement} element
2214+
* @param {HTMLElement|object} element
22152215
* @param {object|undefined} model Uses [app.activeModel] if undefined
22162216
*/
22172217
loadJsControl: function (element, model) {
@@ -2237,6 +2237,12 @@
22372237
} else {
22382238
element = existingControl.element;
22392239
}
2240+
} else if (element.hasAttribute('data-control-loaded')) {
2241+
// If a control has already been loaded then app logic called this
2242+
// using the element so find and use the existing control.
2243+
existingControl = app.activeJsControls.find(function(control) {
2244+
return (control.element === element);
2245+
});
22402246
}
22412247

22422248
// Get control from element tag name and then assign it to the [data-control] attribute

‎js/DataFormsJS.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/controls/markdown-content.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,33 @@
4848
return (returnCode ? code : '');
4949
}
5050

51+
/**
52+
* Markdown Caching for when [load-only-once] is used.
53+
*/
54+
var markdownCache = [];
55+
var maxCacheSize = 100;
56+
57+
function saveMarkdownToCache(url, content, errorMessage) {
58+
if (markdownCache.length > maxCacheSize) {
59+
markdownCache.length = 0; // Clear array
60+
}
61+
for (var n = 0, m = markdownCache.length; n < m; n++) {
62+
if (url === markdownCache[n].url) {
63+
return; // Already saved
64+
}
65+
}
66+
markdownCache.push({ url:url, content:content, errorMessage:errorMessage });
67+
}
68+
69+
function getMarkdownFromCache(url) {
70+
for (var n = 0, m = markdownCache.length; n < m; n++) {
71+
if (url === markdownCache[n].url) {
72+
return markdownCache[n];
73+
}
74+
}
75+
return null;
76+
}
77+
5178
/**
5279
* DataFormsJS <markdown-content> Control
5380
*/
@@ -65,6 +92,7 @@
6592
linkTarget: null,
6693
linkRel: null,
6794
linkRootUrl: null,
95+
loadOnlyOnce: false,
6896
},
6997

7098
/**
@@ -148,6 +176,17 @@
148176
},
149177

150178
fetch: function (element) {
179+
// Option to load markdown from cache rather than fetching each time.
180+
if (this.loadOnlyOnce) {
181+
var cache = getMarkdownFromCache(this.url);
182+
if (cache) {
183+
this.content = cache.content;
184+
this.errorMessage = cache.errorMessage;
185+
markdownContent.render.call(this, element);
186+
return;
187+
}
188+
}
189+
151190
// Show loading screen
152191
if (this.loadingSelector) {
153192
var loading = document.querySelector(this.loadingSelector);
@@ -172,6 +211,11 @@
172211
var errorMessage = 'Error loading markdown content from [' + url + ']. Error: ' + error;
173212
control.errorMessage = errorMessage;
174213
markdownContent.render.call(control, element);
214+
})
215+
.finally(function() {
216+
if (control.loadOnlyOnce) {
217+
saveMarkdownToCache(url, control.content, control.errorMessage);
218+
}
175219
});
176220
},
177221

0 commit comments

Comments
 (0)