dataformsjs

• Update <data-list> Web Component to clear innerHTML when an empty list is passed to the value property.
  • This matches the intended behavior for applications and matches the Framework JavaScript <data-list> Control
  • An example of when this would happen is on a search screen. If the previous search returned data and the next search returns an error then both error and past data would show. This fixes the issue.
• Update functions format.date(), format.dateTime(), format.time() to handle null or empty strings
  • Update affects related code for all version:
    • Web Components: js/web-components/utils-format.js
    • React Class: js/react/es6/Format.js
    • Framework: js/extensions/format.js
  • Example of the issue
    • If Web Component <data-table> or other templating code called <td>${format.date(startDate)}</td> and startDate was null then the value 12/31/1969 would be displayed because it's the starting Unix time.
    • The previous work-around was to use logic in the templating code like this: <td>${startDate === null ? '' : format.date(startDate)}</td>

• JSX Loader Updates
  • Improvements for Legacy Browsers (IE, UC Browser, Legacy Edge, etc)
    • Add default support for destructuring assignment using spread operator, previously this was available but required extra config. This is commonly used with reducers (both Redux and native React Hooks).
    • Updated version of @babel/standalone from 7.12.9 to 7.12.12. At the time of release Babel is update to version 7.13.12 however builds starting at 7.12.13 have a broken regex for IE
  • Add support for <hr/>. With previous releases <hr/> caused a compiler error while including the space <hr /> worked.
• DataFormsJS Framework app
  • Updated CDN Version for css-vars-ponyfill from 2.4.2 to 2.4.3 and added support for CSS Ponyfill/Polyfill on inline <style> elements that include the attribute data-css-vars-ponyfill
• Added Class CssVars for React
  • Allows for ability to define CSS Variable Polyfill/Ponyfill automatically for older browsers.
  • Previously some of the 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:

  <link rel="stylesheet" href="css/site.css" data-css-vars-ponyfill>
  

  • Then call CssVars.ponyfill() from JavaScript
  • This class is available in the root DataFormsJS React Namespace
  • 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.

• Updated Framework filter.js Plugin to handle sort.js classes data-sort-class-odd and data-sort-class-even when using table column filters (typically for a click to filter event). Previously the classes were handled for general table filters.

• Added Features to <data-table> Web Component and Framework Control
  • https://github.com/dataformsjs/dataformsjs/blob/master/js/web-components/data-table.js
  • https://github.com/dataformsjs/dataformsjs/blob/master/js/controls/data-table.js
  • Added support for Footer templates when using new attribute data-footer with either <template data-footer> or <script type="text/x-template" data-footer>
  • A <tfoot> element will be rendered and it allows for summary functions to report off of table details:
    • count()
    • sum('field')
    • min('field')
    • max('field')
    • avg('field')
  • Try demo http://127.0.0.1:8080/web-components-data-table and view source https://github.com/dataformsjs/dataformsjs/blob/master/examples/web-components-data-table.htm
• Added format.round(number, decimalPlaces), function added for Web Components, Framework, and React Class:
  • https://github.com/dataformsjs/dataformsjs/blob/master/js/web-components/utils-format.js
  • https://github.com/dataformsjs/dataformsjs/blob/master/js/extensions/format.js
  • https://github.com/dataformsjs/dataformsjs/blob/master/js/react/es6/Format.js
• React <JsonData> Component
  • Added new property childProps which can be used to pass props from a higher level component to the child components in the isLoaded property. This can be used to pass hook functions and data needed by the child component that doesn't come from the Web Service.
  • https://github.com/dataformsjs/dataformsjs/blob/master/js/react/es6/JsonData.js
• Updated app.jsTemplate.compile() to support an array for the first parameter.
  • This was added for new features related to <data-table>
  • https://github.com/dataformsjs/dataformsjs/blob/master/js/extensions/jsTemplate.js

5.6.1 (January 4, 2021)

• Fix to load CSS Variable Polyfill/Ponyfill from Web Components polyfill.js for basic Web Pages when not SPA

5.6.0 (January 4, 2021)

• Web Components
  • Added new Web Components based on Framework Plugins
    • <export-to-csv-service> based on js/plugins/exportToCsv.js
    • <highlighter-service> based on js/plugins/highlighter.js
    • <filter-service> based on js/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 smaller input-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 file js/web-components/utils.js
    • Elements input, select, textarea were having the innerText set rather than the value 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:

    <link rel="stylesheet" href="css/site.css" data-css-vars-ponyfill>
    

    • 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 property app.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 the version property. Affects two files:
  • Main DataFormsJS.js file
  • React jsxLoader.js file

5.5.0 (December 13, 2020)

• Web Component <json-data>
  • Added setter properties for url and urlParams. 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
• 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 from package.json when the version changes. Version is included in the full source DataFormsJS.js, jsxLoader.js and in the *.min.js files.

  // Framework
  DataFormsJS.version === '5.5.0'
  app.version === '5.5.0'
  
  // JSX Loader
  jsxLoader.version === '5.5.0'
  

• 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 options
  jsxLoader.fetchOptions = {
    mode: 'cors',
    cache: 'no-store',
    credentials: 'same-origin',
  };
  
  // Previously `null` was used for `fetch(url, null)` so the following
  // can be used if needed or `fetchOptions` 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.

• 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 from url was still being downloaded.
  • Example Code:

  <markdown-content
    url="https://raw.githubusercontent.com/dataformsjs/dataformsjs/master/README.md"
    show-source
    loading-selector="#loading-screen">
  </markdown-content>
  

  • Online basic example:
    • https://dataformsjs.com/examples/markdown-web.htm

• React jsxLoader
  • Added support for data-type="module" on scripts. This feature was added on Babel Standalone 7.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 version 7.12.9.
• Updated all NPM Dev Dependencies to use latest version for Build and Minification

• 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 was 0 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 when DOMContentLoaded is handled.
• Framework Control <markdown-content> has an added value property to match the API of the related Web Component.

There have been a total of 56 versions of DataFormsJS published on npm since it was first published a little over a year ago:
https://www.npmjs.com/package/dataformsjs

However starting today with release 5.3.0 each version will also be published with a Github release.

Details of all past releases are documented in the CHANGELOG:
https://github.com/dataformsjs/dataformsjs/blob/master/CHANGELOG.md