All Versions
81
Latest Version
Avg Release Cycle
31 days
Latest Release
486 days ago
Changelog History
Page 3
Changelog History
Page 3
-
v5.6.0 Changes
January 04, 2021- ๐ Web Components
- Added new Web Components based on Framework Plugins
<export-to-csv-service>
based onjs/plugins/exportToCsv.js
<highlighter-service>
based onjs/plugins/highlighter.js
<filter-service>
based onjs/plugins/filter.js
. This service Web Component would be used instead of<input is="input-filter">
for apps that use clickable elements to filter and other advanced functionality not included in the smallerinput-filter
Component.- Example for all new Components is provided in
http://127.0.0.1:8080/log-table-web-services#/10
- Updated
<nav is="spa-links">
to include new option[data-nav-match="start"]
- Bug Fix for function
setElementText()
from filejs/web-components/utils.js
- Elements
input, select, textarea
were having theinnerText
set rather than thevalue
property to to a string compare error - Affected
<json-data>
for[data-bind]
and<url-router>
for[url-param]
- โก๏ธ Framework Updates
- Added ability to define CSS Variable Polyfill/Ponyfill automatically for older browsers.
- Previously the main site and a number of examples had custom code included directly on each page to make this happen.
- Now a
[data-css-vars-ponyfill]
attribute simply needs to be included on the style sheet, example: ~~~html ~~~ - When used this automatically downloads and runs
css-vars-ponyfill
one time when the page is first loaded. - https://github.com/jhildenbiddle/css-vars-ponyfill
- As of 2021 this will mostly used on sites that support IE 11. Unless a very old version of Mobile Safari or Android Device is used they will typically support CSS Variables.
- This feature includes new a function
app.cssVarsPonyfill()
and a new propertyapp.settings.cssPonyfillUrl
js/plugins/exportToCsv.js
- Added support to export using[data-value]
attributes if they exist.data-value
is used for Sorting and if used contains the expected number or date format needed for exporting.- Updated
js/plugins/navLinks.js
to include new option[data-nav-match="start"]
- Set
enumerable: true
for theversion
property. Affects two files:- Main
DataFormsJS.js
file - React
jsxLoader.js
file
- Main
- ๐ Web Components
-
v5.5.0 Changes
December 13, 20205.5.0 (December 13, 2020)
- ๐ Web Component
<json-data>
- Added setter properties for
url
andurlParams
. Previously only getters were defined and this resulted in the Component not working with Preact. - With this release DataFormsJS Web Components now work with Preact in addition to React
- Demo:
- https://www.dataformsjs.com/examples/web-components-with-preact.htm
- Added setter properties for
Started including
version
property for two files:- Main
DataFormsJS.js
file - React
jsxLoader.js
file - The version property is updated automatically from
scripts/build.js
using the value frompackage.json
when the version changes. Version is included in the full sourceDataFormsJS.js, jsxLoader.js
and in the*.min.js
files.
// FrameworkDataFormsJS.version === '5.5.0'app.version === '5.5.0'// JSX LoaderjsxLoader.version === '5.5.0'
- Main
JSX Loader
- Added default fetch options for fetching JSX Templates
- To use different options set this as soon as the script is loaded and before the document
DOMContentLoaded
event runs. - The default options provide for flexibility with 'cors', prevention of caching issues with 'no-store', and security by using 'same-origin' for
credentials
.
// New default optionsjsxLoader.fetchOptions = {mode: 'cors',cache: 'no-store',credentials: 'same-origin',};// Previously
null
was used forfetch(url, null)
so the following// can be used if needed orfetchOptions
can be customized for apps// that need to use security to fetch JSX Templates:jsxLoader.fetchOptions = null;React Components
- Updated the ES5 build for all React Components so that the compiled code from Babel is enclosed in Immediately Invoked Function Expressions (IIFE) and only needed Component and Classes are assigned to the global
window
object. - The resulting code is slightly smaller for each Component and variables intended for private module scope are no longer made available globally.
- Updated the ES5 build for all React Components so that the compiled code from Babel is enclosed in Immediately Invoked Function Expressions (IIFE) and only needed Component and Classes are assigned to the global
- ๐ Web Component
-
v5.4.1 Changes
December 10, 2020๐ Web Component
<markdown-content>
- Fix so that loading screen shows when using
url, show-source, loading-selector
attributes together. - DOM event order would trigger the loading screen to clear when using
show-source
while content fromurl
was still being downloaded. - Example Code:
<markdown-contenturl="https://raw.githubusercontent.com/dataformsjs/dataformsjs/master/README.md" show-sourceloading-selector="#loading-screen"></markdown-content>
- Online basic example:
- https://dataformsjs.com/examples/markdown-web.htm
- Fix so that loading screen shows when using
-
v5.4.0 Changes
December 04, 2020- React jsxLoader
- Added support for
data-type="module"
on scripts. This feature was added on Babel Standalone7.10.0
- See Babel Standalone Docs: https://babeljs.io/docs/en/babel-standalone
- Updated Babel Standalone CDN Version used for old browsers from
7.12.6
to the latest version7.12.9
.
- Added support for
- โก๏ธ Updated all NPM Dev Dependencies to use latest version for Build and Minification
- React jsxLoader
-
v5.3.1 Changes
December 03, 2020- ๐ Web Component
<input is="input-filter">
could previously run too soon for long running web services when the content was waiting on data downloaded from<json-data>
. The result was0 Records Found
message depending on the app. This has now been fixed. - ๐ Web Component Polyfill File now sets
window.usingWebComponentsPolyfill = true
as soon as the file will be used. This allows for apps to handle logic much quicker whenDOMContentLoaded
is handled. - ๐ Framework Control
<markdown-content>
has an addedvalue
property to match the API of the related Web Component.
- ๐ Web Component
-
v5.3.0 Changes
November 24, 2020- Thanks crazy4groovy for helping with ideas to help improve the documentation related to
jsxLoader
updates with this release! - โก๏ธ Updates for DataFormsJS Markdown Components
- All 3 versions updated:
- Web Component
<markdown-content>
- Framework Control
<markdown-content>
- React Component
<Markdown>
- Added option to sanitize the HTML for security if DOMPurify is loaded: https://github.com/cure53/DOMPurify
- 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.
- Added default option that updates relative links and images based on the path of the Markdown Document. The option can be turned off through HTML Attributes or a React Prop.
- Performance update for React Component so that Markdown is rendered to HTML outside of the React Component
render()
function. - Added ability to optionally cache up to 100 markdown fetched downloads in memory if using related HTML Attributes or Component Props. The component can easily be customized to allow a larger number or fewer items.
- See code examples for full details, more detailed documentation will be published in the near future.
- Source:
- https://github.com/dataformsjs/dataformsjs/blob/master/examples/markdown-react.htm
- https://github.com/dataformsjs/dataformsjs/blob/master/examples/markdown-react.jsx
- https://github.com/dataformsjs/dataformsjs/blob/master/examples/markdown-web.htm
- https://github.com/dataformsjs/dataformsjs/blob/master/examples/markdown-vue.htm
- https://github.com/dataformsjs/dataformsjs/blob/master/examples/markdown-hbs.htm
- Online Examples:
- ๐ Memory and API improvements for the DataFormsJS Framework core function so if
app.loadJsControl(element)
is called and the control is already loaded on screen it will be re-used rather than have multiple references in memory. Use of the specific API was not needed in the past outside of internal Framework calls however with the new Web Components Polyfill it now has practical use for apps.
- Thanks crazy4groovy for helping with ideas to help improve the documentation related to
-
v5.2.0 Changes
November 23, 2020- โ Add React Component
<Markdown>
- Based on DataFormsJS Web Component
<markdown-content>
- The DataFormsJS
<Markdown>
React Component makes it easy to display markdown content from a web service or URL: ~~~jsx const url = "https://raw.githubusercontent.com/dataformsjs/dataformsjs/master/README.md" } className="markdown" /> ~~~
- Based on DataFormsJS Web Component
- ๐ Fix
js/web-components/markdown-content.js
so that it shows it shows the correct background color and full CSS styles for Code Syntax when usinghighlight.js
. With previous releases this worked with the Framework versionjs/controls/markdown-content.js
- โก๏ธ Updates for both Framework and Web Component
<markdown-content>
- Fix issue where there were running
highlight.js
against the document rather than only elements under<markdown-content>
- Added default use of
remarkable.linkify
plugin when using Remarkable - Added error handling to display an error through
showError()
orapp.showError()
for Markdown fetch errors. For example if a 404 occurs.
- Fix issue where there were running
- ๐ Framework Control now makes requests through
app.fetch()
so that custom security or other app defined Request Headers will be included. - ๐
<nav is="spa-links">
Web Component - Set links on initialconnectedCallback()
event. Previously it was first called based on router events however this caused a timing issue depending on when the file was loaded in related to the<url-router>
.
- โ Add React Component
-
v5.1.1 Changes
November 21, 2020- ๐ฆ Several of the
*.min.js
files were built showingversion 5.0.2
in the header comments. Package has been republished to show correct version.
- ๐ฆ Several of the
-
v5.1.0 Changes
November 21, 2020- ๐ Changes will likely be published to NPM this weekend (November 21 or 22 of 2020)
- โ Add Web Component and Framework JavaScript Control for viewing Markdown:
js/web-components/markdown-content.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/web-components/markdown-content.jsjs/controls/markdown-content.js
https://github.com/dataformsjs/dataformsjs/blob/master/js/controls/markdown-content.js- The
<markdown-content>
components use one of 3 widely used Markdown Libraries: marked, markdown-it, and remarkable - Additionally if highlight.js is included on the page it will be used for Syntax Highlighting.
- Options are preset, however the Web Component and related JS Control are small in size and easy to modify if you have a site with different markdown needs.
- ๐ Optimizations for
js/web-components/polyfill.js
so that it downloads fewer files on page load and has improved flexibility for adding addition Web Components in the future.
-
v5.0.2 Changes
November 20, 2020- ๐ Fixed Web Component
<nav is="spa-links">
so that it works on Safari.
- ๐ Fixed Web Component