DataFormsJS uses Semantic Versioning.
Overall the core Framework files and API are expected to remain stable however the version number is expected to increase to much larger numbers in the future due to the changes to smaller scripts and components. This change log includes Framework release history and new website features or major changes.
- New Feature - Image Gallery
- Framework Plugin:
js/plugins/imageGallery.js
- Web Component:
js/web-components/image-gallery.js
- Framework Plugin:
- New Framework Plugin
js/plugins/onePageSite.js
- This plugin allows for one page style web sites where a nav link will scroll to a target element on the page.
- By default DataFormsJS is used for single page apps however when using this script other framework plugins and controls can be easily used with one page sites.
- Demo Pages:
examples/one-page-site-hbs.htm
examples/one-page-and-spa-hbs.htm
js/DataFormsJS.js
- Added new API function for plugins
onAllowRouteChange(path)
that allows for plugins to cancel the route from changing on Single Page Apps (SPA) - This API function was created for the new
onePageSite.js
plugin
- Added new API function for plugins
js/extensions/handlebars-helpers.js
- New Helper function
jsonEncode
- Encode an object as a JSON value, this is useful when adding related object data for an element in a [data-*] attribute of the element.
- New Helper function
js/react/jsxLoader.js
- Added
jsxLoader.globalNamespaces
and improvedjsxLoader.addBabelPolyfills()
so that global namespaces can be defined more with less code and so that more modules are handled automatically. This is being added for a new demo withReact-Toastify
at https://awesome-web-react.js.org/ which will be published after the new release. - Added
Object.values
andArray.prototype.findIndex
tojsxLoader.polyfillUrl
. - Updated 'jsxLoader.babelUrl' from version
7.8.4
to version7.10.4
. New URL:https://unpkg.com/@babel/[email protected]/babel.js
- Added
- Added config file for ESLint
.eslintrc.js
and addedeslint
as a dev dependency inpackage.json
- All code is valid based on defined rules so no changes to framework code were needed.
js/DataFormsJS.js
- Improvements for Vue 2 so that long running tasks can still run in the background after a user goes to a new page in an SPA.
- New setting added
app.settings.clearVue2WatchersOnRouteUnload
which defaults tofalse
. - Originally Vue 2 Instances View Models were converted back to plain JavaScript objects on route changes to reduce the number of watchers that exist in memory when a models was not for the active page.
- By default this will result in more Vue watchers being created on SPA's that have many pages, however for pages that have long running functions in the background that update the model the results are more predictable for the user because when they go back to the original page it will show the updates.
- In general this has a minimal performance impact for most apps but if needed watchers can still be cleared using the new setting.
- To see how this works try this example: https://www.dataformsjs.com/examples/image-classification-vue.htm
- When using Vue 2 upload several images then quickly move to another tab while the images are still uploading.
- After you have clicked off the main page type
app.models
into DevTools and you can see that the model for the main page is a Vue Model. - Once you come back to the original page then the prediction should be displayed for each image.
- Then from DevTools execute
app.settings.clearVue2WatchersOnRouteUnload = true
and try the same steps. - If you type
app.models
into DevTools from another page you will now see that the original model is a plain JavaScript object. - Once you come back to the original page the images will still show
Loading ...
however there will be fewer Vue watchers for the app. - This does not affect Vue 3 or other view engines such as Handlebars because the original model reference is still kept in memory at
app.models
.
js/plugins/filter.js
- Updated anonymous functions on event handlers to used named function expressions which makes it easier to find the source code from Browser DevTools.
- Updated code comments in
onRouteUnload()
with more details on how it works with Vue 3 compared to other plugins.
- Started including version number in code comments of several minimized files. This makes it clear which version is being used if referencing the latest version (rather than a specific version) from a CDN. For example: https://cdn.jsdelivr.net/npm/dataformsjs@latest/js/DataFormsJS.min.js
js/DataFormsJS.min.js
js/react/jsxLoader.min.js
js/react/es5/DataFormsJS.min.js
js/web-components/json-data.min.js
js/web-components/url-hash-router.min.js
- Added Support for Vue 3 (Beta 15) to the main DataFormsJS Framework, updated files:
js/DataFormsJS.js
js/controls/json-data.js
js/extensions/vue-directives.js
js/plugins/filter.js
js/plugins/i18n.js
- For all example pages and the Code Playground Templates Vue 2 can simply be swapped out with Vue 3 and the pages/apps will work as expected.
- Vue 3 is still in Beta so additional updates may be required before or after the final release of Vue 3.
- Vue 2 - Improved support for the
v-cloak
directive to hide the view while it is rendering. Previously this was set on individual elements in the template however for compatibility with both Vue 2 and Vue 3 this is now handled automatically by DataFormsJS on the main view element. By default DataFormsJS adds required CSS for v-clock from the propertiesapp.vueCss
andvueStyleId
. - Vue 2 - Added support for
computed
properties to be defined directly on the page object. Previouslycomputed
properties had to be defined on the controller object which made it harder to definecomputed
properties since controllers are typically setup in HTML rather than JavaScript. Also works with Vue 3. Example usage:examples/template-files-vue.htm
- Added support to allow model properties the
filter.js
attributesdata-filter-results-text-all
anddata-filter-results-text-filtered
, example usage:examples/html/regions-vue.htm
andexamples/html/regions-hbs.htm
- Web Component
<data-list>
new features for rendering templates from<template>
elements using Template literals- The update includes 3 new attributes for
<data-list>
:[template-selector], [root-element], [root-class]
- Example Source: https://github.com/dataformsjs/dataformsjs/blob/master/examples/web-components-data-list.htm
- Example Demo: https://dataformsjs.com/examples/web-components-data-list.htm
- The update includes 3 new attributes for
- Thanks Li Jun Hui and eGirlAsm for helping with Chinese translations!
jsxLoader.js
- Fix for incorrect parsing of JavaScript comments nested with-in elements
- Breaking Changes - Relatively minor but they are breaking so a new major release number is being used:
- Removed previously depreciated
PolyfillService
Component/Class. - Removed support for
I18n
without the use of afetch
polyfill for legacy browsers. - Both of these items are no longer needed due to creation of
jsxLoader.js
and for build toolscreate-react-app
, etc Polyfills can be bundled.
- Removed previously depreciated
jsxLoader.js
- General improvements for additional JSX Syntax- Fixed issue where links
https://
were being partially parsed as single-line comments inside of an element - Improved loop syntax elements needed to be enclosed in a
()
in certain situtations
// Before {props.data && props.data.categories && props.data.categories.map(category => { return (<Category item={category} />) })} // After {props.data && props.data.categories && props.data.categories.map(category => { return <Category item={category} /> })}
- Fixed issue where some characters such as '>' were being parsed within prop strings:
<InputFilter filter-selector="section.category ul > li" />
- Added
Array.prototype.find
to Polyfill Bundle for Legacy Browsers
- Fixed issue where links
- Added new JavaScript class
Cache
for simple state caching and re-use with React and Preact Apps. - React
InputFilter
Component- Added a new
afterFilter
property to allow applications to define a custom events once data is filtered - Previously if using a label to show filter results from [filter-results-selector] both [filter-results-text-all] and [filter-results-text-filtered] were required; now only one property is required.
- Added a new
- DataFormsJS Framework Object
DataFormsJS.js
- Added
app.settings.lazyLoadingViewSelector
to allow for loading screens between page views when usingapp.lazyLoad
. In most cases loading logic is used on actual page content however this helps with the user experince to indicate page change on slow mobile devices and scripts are being loaded. - Added
Array.prototype.find
to Polyfill Bundle for Legacy Browsers
- Added
jsxLoader.js
- Added support for Shorthand React.Fragment Syntax
<>
- Switched Babel Standalone from Version 6 to Version 7.8.4
- Switched eval code syntax to use
new Function('"use strict";' + jsxLoader.evalCode)();
instead ofeval(jsxLoader.evalCode);
- Load additional Polyfills from
polyfill.io
service and addedjsxLoader.addAdditionalPolyfills()
function. - Added additional Unit Tests
- Added support for Shorthand React.Fragment Syntax
- Bug fix
<LazyLoad>
so that it works with Safari on iOS 9 when using Dynamic Components in theisLoaded
prop.
- Added Web Based Compiler for React/JSX
jsxLoader.js
.- For use as an alternative to Babel, webpack, etc
- Also works for React alternatives including Preact and Alibaba Rax
- All React Demos on the main web site and repository now use
jsxLoader.js
- Added additional demos to the main site for React and initial demos for Preact and Rax
- Added new
LazyLoad
React Component for code splitting of JSX code on large apps and lazy loading of JavaScript and CSS files. - Added Initial Unit Testing for React Components and the JSX Loader
JsonData
Component- Added GraphQL Support with new properties:
graphQL={true}
query="{query}"
querySrc="{url}"
variables={}
- Added GraphQL Support with new properties:
- Added
js/scripts/polyfills.js
using feature detection to polyfilltrimStart()
,trimEnd()
,trimLeft()
, andtrimRight()
- With the new features this
PolyfillService
Component/Class is being depreciated and will be removed in a future release. A console warning is provided if using the class. A console warning is also included in theI18n
class which currently uses eitherfetch
orXMLHttpRequest
.
DataFormsJS
- Added pollyfill check and support ifPromise.prototype.finally
is missing. This was found to affect the UC Browser.JsonData
Component- Added support for missing
isLoaded
elements so thatJsonData
can be used to ping the server without displaying data. For example<JsonData url="https://www.dataformsjs.com/data/geonames/countries" />
- Update for
onViewUpdated
event so that is called on the initial loading state before data is fetched. Previously it was only called after data has downloaded or if there was an error downloading data. - Added Error Handling for custom
onViewUpdated
events. The prevents issues from display data when an error occurs in third-party or app code.
- Added support for missing
- Improved Support for Preact when using React Components
- React Components ES5 Build Version will detect if
preact
is being used instead ofReact
and work automatically InputFilter
will detect ifpreact
is being used as an alias in a web page forReact
and then useonInput
instead ofonChange
- React Components ES5 Build Version will detect if
- Improvements for IE 11
- Bug fix for when
template
elements were used that included embedded HTML. IE doesn't support thetemplate
element so DataFormsJS converts them toscript type="text/x-template"
elements when the page is loaded. Previously it simply hide thetemplate
elements but an edge case error was found when Framework JavaScript controls were used in the embedded templates. - Added Cache Busting for IE when
app.fetch()
is called withcache = no-cache|no-store
. Earlier pre-release versions of DataFormsJS used this but it was removed once the GitHub fetch Polyfill was used.
- Bug fix for when
- Updated Unit Tests so that they work with Firefox and IE 11. Originally Unit Testing occurred in all Browsers but changed to Webkit only prior to the initial release due to time constrains.
- Updates for React Components - Removed the requirement for custom
import and exports
definitions when usingbabel-standalone
from a browser.
js/DataFormsJS.js
- Bug fix for HTML5 History API nav menus with Safari on iOS 9 (iPad 2, iPhone 6, and older devices)
- Improvments for using
Vue
js/DataFormsJS.js
- When the Vue Instance Model is destroyed using$destroy()
it is now added back to theapp.models
cache as a plain JavaScript Object. Minor update so a site will use less memory and allow for easier debugging from Browser Dev Tools.js/DataFormsJS.js
- When themounted()
event is called it waits forvm.$nextTick
and also callsapp.loadAllJsControls();
js/controls/json-data.js
- Only assigned key control properties[isLoading, isLoaded, hasError, errorMessage]
are set to the active Vue Model, this prevents issues with thejs/pages/jsonData.js
and related controllers/pages such as overwritting common controller properties[url, graphqlId, etc.]
.- These improvements for
Vue
improve how framework JS controls work with Vue. Example is on search screen in the places demo: https://www.dataformsjs.com/examples/places-demo-vue.htm#/en/search
- Added ability to use
js/controls/json-data.js
withVue
- Previously the control only worked with
HandlebarsJS
or other other templating engines and not Virtual DOM. - Update includes ablity to use Vue with non-SPA apps.
- Demos:
- Previously the control only worked with
- Improvements for
Vue
with the main framework app filejs/DataFormsJS.js
app.refreshPlugins()
- Plugins do not call theonRendered()
function until$nextTick()
of the Active Vue Modelapp.updateView()
- Better support for Framework JavaScript Controls by callingapp.loadAllJsControls()
in$nextTick()
after the Vue Model is initially updated.
- DataFormsJS Namespace for React Components
js/react/es6/DataFormsJS.js
- Added theLeafletMap
Component - Edge case bug fix to prevent
app.loadJsControl()
from callingcontrol.onLoad()
while it is still loading
- HTML5 History API Update so that if [ctrl] is held down when a link is clicked then the click event is ignored so that the link can be opened in a new tab.
- Affects files
DataFormsJS.js
andjs/web-components/url-router.js
- Affects files
- React Class
I18n
- Now sets the roothtml lang="lang"
attribute when language has been changed - Updated Build Process to use local npm
devDependencies
frompackage.json
rather than Global CLI commands and a Browser-based page for Babel
- Spanish
es
translations complete for all JSON files on the main site- https://www.dataformsjs.com/es/
- Thanks Tibaldo Pirela Reyes for helping with translations! https://github.com/tpirelar
- Fix for
plugins/i18n.js
to read settings before the first route loads, behavior similar to all releases before3.4.0
.
- New features for i18n Support to use a user's default language for multilingual sites
- Main
DataFormsJS.js
andplugins/i18n.js
files work together and usenavigator.languages
to redirect to a user default language when language is not specified in initial URL - React Class
I18n
, added propertygetUserDefaultLang
which can be used by an app withsupportedLocales
to get the locale for the user
- Main
- Readme file update so images show in npm
- Fixed Web Components edge case error if both
utils.js
andutils.min.js
are used on the same page, error only showed up in console and didn't impact the page. https://github.com/dataformsjs/dataformsjs/blob/master/js/web-components/utils.js
- Fixed error
app.routingMode is not a function
when standard pluginsi18n.js, navList.js, navLinks.js
are used with React or Web Components
- Added Support for HTML5 History API
- Hash URL's and Routing are still used at default
- To use with the main Framework specify the routing mode in the root HTML element
html data-routing-mode="history"
- Main framework file
DataFormsJS.js
updated with new public functionschangeRoute(path), routingMode(), pushStateClick(event)
- https://github.com/dataformsjs/dataformsjs/blob/master/js/DataFormsJS.js - Updated Plugins:
i18n.js, navList.js, navLinks.js
- https://github.com/dataformsjs/dataformsjs/tree/master/js/plugins - Web Components - Added
url-router
andurl-route
in https://github.com/dataformsjs/dataformsjs/blob/master/js/web-components/url-router.js - Web Components Example Page - https://www.dataformsjs.com/examples/hello-world/en/web-url-router.htm
- Plugin
i18n.js
- Changed textContent ofdata-i18n-nav-lang
to use specified capitalization rather than upper-case. The previous release3.1.5
should have actually been3.2.0
because it introduced new features.
- Plugin
i18n.js
- Added support for i18n nav menus for the selected page and multiple languages with new attributesdata-i18n-nav-lang
anddata-i18n-nav-selected
.
- Updated readme file for npm
- Fixed error when using multiple rendering engines in a single app where changes to the URL source on existing HTML controls would use the wrong rendering engine. Rare edge case error that affected the main site.
- Updated npm package.json file to include the broswer property
- Fixed error from previous fix where plugins that call
next(false)
fromonRouteLoad(next)
would not trigger the next route to finish loading. Affectedjs/plugins/i18n.js
.
- DataFormsJS.js - Fix for race conditions where a previous page is still loading and the new page is called multiple times. The errors would only show on pages that use a lot of custom JavaScript and if the user clicks quickly from page to page while services or resources were still loading.
- Web Components - New functions in
js/web-components/utils.js
-showErrorAlert()
andshowOldBrowserWarning()
- Web Components -
showOldBrowserWarning()
checks modern browsers that supportscript type="module
but do not support custom elements (known to affect MS Edge using the EdgeHTML rendering engine) - Web Components - Check Old Browsers from
url-hash-router
andjson-data
- Web Components - Updated all
*.min.js
files to use the*.min.js
version of related files from import statements
- Web Components - Add polyfill support for specific components for Safari, Samsung Internet, and Edge
- Breaking change for Web Component
ul is="data-list"
- Changed element to"data-list"
- utils.js - Added new function polyfillCustomElements()
input-filter.js, sortable-table.js, leaflet-map.js
- Addedwindow._webComponentPolyfills
and related code
- Breaking change for Web Component
- React Component
JsonData
- Added new optional propsfetchOptions
andfetchHeaders
- Web Component
json-data
- Added data caching support with new attributeload-only-once="true"
DataFormsJS.js
- Set scroll position to0, 0
on hash change for SPA'sDataFormsJS.js
andjsPlugins.js
for both React and Web Components - Updated CSSwhite-space
style for.dataformsjs-error
and.dataformsjs-fatal-error
- Breaking change for React Components File Structure, no new features added.
- Switched React Components from JSX to JavaScript so that
npm install dataformsjs
works better withcreate-react-app
. - Updated build process for React Components.
- Fix package.json file for NPM Publishing
- Initial public release