dataformsjs

• The file app.js uses a custom express-like API with a minimal web server which allows DataFormsJS examples to run using Node.js built-in features and no outside dependencies.
• A Path traversal vulnerability was found with credit thanks to Hamidreza Hamidi and Jafar Akhoundali.
• The issue was decodeURIComponent was called out of order allowing for Proof-of-concept (POC) Path traversal attacks on a local developer machine using URLs such as http://127.0.0.1:8080/..%2fpackage.json or bash 127.0.0.1:8080/%2e%2e%2f%2e%2e%2f%2e%2e%2f%2e%2e%2f%2e%2e%2f%2e%2e%2f%2e%2e%2f%2e%2e%2f%2e%2e%2f%2e%2e%2fetc%2fpasswd
• This impacts the development download of the project but not the NPM published release.

• The property jsxLoader.babelUrl was changed and can be set back to unpkg if needed by setting the URL prior to the page being loaded.
• All example pages and apps referenced unpkg for React and related libraries.
• Even though IE is no longer supported it still works on legacy Windows Servers but unpkg blocks it from downloading CDN content. Given this fact, its possible they may block other browsers in the future so switching to jsDelivr helps avoid issues were code could break and it allows jsxLoader plus all React examples to work out of the box for IE again.

• Edge browser started giving a deprecation warning when using this CSS media query.
• Additionally, the main site, the playground site, and many examples were updated to dynamically handle the CSS media query for IE but not other browsers.

• https://dataformsjs.com/unit-testing/react
• https://dataformsjs.com/unit-testing/preact
• http://127.0.0.1:4000/unit-testing-react
• http://127.0.0.1:4000/unit-testing-preact
• The pages were previously using the latest CDN version of Mocha and Chai; however their was a breaking change so now specific CDN versions are used rather than the latest version.

• This is due to a supply chain attack against the popular JS Polyfill Library and site polyfill.io.
• https://cdnjs.cloudflare.com/polyfill/
• https://www.akamai.com/blog/security/2024-polyfill-supply-chain-attack-what-to-know
• Based on how the Polyfill is loaded for DataFormsJS this error would have only affected users of IE (as of 2024 this is mainly old Windows Servers in a corporate environment).

• Related Issue: https://github.com/dataformsjs/dataformsjs/issues/22
• Previously JSX files were asynchronously download, compiled, and added to the page in the order that they downloaded.
• This caused issues when files downloaded in an unexpected order.

• This includes using data-format="number|date|dateTime|time|{function}" and custom functions.
• js/web-components/url-router.js https://github.com/dataformsjs/dataformsjs/blob/master/js/web-components/url-router.js

• Fixed issue where pinch-to-zoom on mobile devices would cause previous/next image navigation to occur.
• js/web-components/image-gallery.js https://github.com/dataformsjs/dataformsjs/blob/master/js/web-components/image-gallery.js
• js/plugins/imageGallery.js https://github.com/dataformsjs/dataformsjs/blob/master/js/plugins/imageGallery.js
• js/react/es6/ImageGallery.js https://github.com/dataformsjs/dataformsjs/blob/master/js/react/es6/ImageGallery.js

• Previously @license was included in the main comment which resulted in Vite including about 5 kB (uncompressed) and about 1.5 kB of extra code on the build process.
• Comments were updated so that they are not included on build resulting in smaller files.

• Update for en-US to use format {date} {time} instead of {date}, {time} because most people in the US (and software programs) do not use the comma while Chrome uses the comma.

• ~/js/DataFormsJS.js
• New Feature - Pass HTML Attributes as Properties to HTML Controls
  • This is similar in concept to passing props with React or Vue and allows easy and quick customization of content in the HTML control.
• Update - When manually calling app.refreshHtmlControl() nested HTML controls are now rendered
• Fix typo in error message
• Example of the new features is being published on the Handlebars Places Demo:
  • https://dataformsjs.com/examples/places-demo-hbs.htm
  • All pages with Excel and CSV export pass prop to a HTML Control
  • Search Screen renders nested HTML control when app.refreshHtmlControl() is called from the JS Control <json-data>

• ~/js/web-components/Component.js
• https://github.com/dataformsjs/dataformsjs/blob/master/js/web-components/Component.js
• Update so that props defined with camelCase will be available as dashed-case from HTML Observable Attributes
• Update HTML Observable Attributes to convert strings to correct type for true, false, null and empty values
• Example is being published with the Web Components Places Demo:
  • https://www.dataformsjs.com/examples/places-demo-web.htm

• ~/js/plugins/exportToCsv.js
• ~/js/plugins/exportToExcel.js
• Add support so that elements using the plugin are refreshed when app.refreshHtmlControl() is called.
• Minor fix handled by using onRendered(rootElement) instead of onRendered().
• For Excel text columns were the the max character width is less than 20 an extra 2 pixels of space will be added so content better fits.

• Framework Plugin ~/js/plugins/i18n.js
• Web Component ~/js/web-components/i18n-service.js
• Added ability to find and replace i18n keys inside of an attribute string by using syntax [[key]]
  • Example data-export-file-name="[[Countries]].xlsx" data-i18n-attr="data-export-file-name"
  • Previously both Countries and Countries.xlsx would have had to be defined for each language
  • Now only Countries has to be defined
  • For Vue apps this applies to the v-i18n-attr directive

• Default data-worksheet-name to data-export-file-name excluding file extension .xlsx if the attribute is not included
• Trim spaces for text fields
• Set header style (gray fill color, bold, etc) only on the cells used rather than the entire row

• Trim spaces for text fields

• Web Component:
  • ~/js/web-components/export-to-excel-service.js
  • https://github.com/dataformsjs/dataformsjs/blob/master/js/web-components/export-to-excel-service.js
• Framework Plugin:
  • ~/js/plugins/exportToExcel.js
  • https://github.com/dataformsjs/dataformsjs/blob/master/js/plugins/exportToExcel.js
• Both Web Component and Framework Plugin have the same behavior
• Exports happen directly in the browser through JavaScript and no server-side calls are made which makes the export/download appear almost instantly to the user.
• The script uses the external library ExcelJS and the first time the user exports an Excel file this service will download ExcelJS from a CDN. The generated Excel file contains a fixed header row using a gray and bold style and a filter set. The width of columns is based on the data. ExcelJS has many formatting options so if you need something similar or a custom version of this script then this file provides a good starting point for custom Excel Development.
• https://github.com/exceljs/exceljs/

• A new HTML attribute [data-export-all] was added to always export all rows regardless of filter.

• Log Demos
  • https://dataformsjs.com/examples/log-table-vue.htm#/10
  • And all other Log demos
• New Export Table Demo - Web Components
  • https://dataformsjs.com/examples/export-table-web.htm
  • ~/examples/export-table-web.htm
  • https://github.com/dataformsjs/dataformsjs/blob/master/examples/export-table-web.htm
• New Export Table Demo - Framework
  • https://dataformsjs.com/examples/export-table-js.htm
  • ~/examples/export-table-js.htm
  • https://github.com/dataformsjs/dataformsjs/blob/master/examples/export-table-js.htm

• Originally the DataFormsJS Framework was designed and developed prior to ES6 being supported among Web Browsers. Because of this custom app code was designed around ES5. This update allows for custom app code (Pages and Plugins) to use classes rather than objects which allows for modern style JavaScript development.
• Functions updated and added for the main App object:
  • https://github.com/dataformsjs/dataformsjs/blob/master/js/DataFormsJS.js
  • app.addPage()
  • app.addPlugin()
  • app.getClassFunctionNames() - New function
• Bug fix with Chosen Plugin for IE
  • https://github.com/dataformsjs/dataformsjs/blob/master/js/plugins/chosen.js
• New class version of the core jsonData page object:
  • js/pages/classes/JsonData.js
  • All variables and functions from the original file exist in the new one. The purpose of the new file is so that an app can extend it for custom page logic when defining pages as ES6 classes rather than ES5 objects.
• Replaces all occurrences of String.prototype.substr() with String.prototype.substring(). IDE's such as VS Code show substr() as depreciated because it is a non-standard function.
• Updated package.json to use the latest and specific versions of @babel/standalone, terser, and uglify-js for the build process. This makes the build process work across systems as expected.

// Framework updates to support Classes

app.addPage('name', class Page {
    onRouteLoad() {}
    onBeforeRender() {}
    onRendered() {}
    onRouteUnload() {}
})

app.addPlugin('name', class Plugin {
    onRouteLoad() {}
    onBeforeRender() {}
    onRendered() {}
    onRouteUnload() {}
})

class MyPage extends JsonData {
    onRendered() {
        console.log('MyPage.onRendered()')
    }
}
app.addPage('MyPage', MyPage);

• jsxLoader: Less than operator assumed to be an open element - https://github.com/dataformsjs/dataformsjs/issues/20
• jsxLoader: Uncaught SyntaxError: Unexpected token ',' - https://github.com/dataformsjs/dataformsjs/issues/21
• Special Thanks to Björgvin Ragnarsson (nifgraup) for opening these issues and providing great examples to show the error https://github.com/nifgraup

• All 3 versions updated:
  • Web Component <markdown-content>
  • Framework Control <markdown-content>
  • React Component <Markdown>
• Add support for marked version 4.# which was released earlier this month. Previously version 3 was supported.
• Both versions 3 and 4 are now supported.

• These are Mac system files created automatically by finder when viewing a folder
• They are excluded from Github using rules from .gitignore, however npm published them
• In general these files cause no issues but they are binary files so malicious authors can use them for attacks which is why they do not belong in npm or git

• This is related to https://github.com/dataformsjs/dataformsjs/issues/19
• Special Thanks to ilovedesert001 for opening this issue and providing a great example and for helping with testing https://github.com/ilovedesert001

• Added HTML Attribute manual-fetch-mode, that if defined on an element prevents the web service from running when the page first loads. This allows for scenarios where one user may need to see the data and another user may not based on permissions. When this attribute is defined the fetch() method can be used to download the data.

<json-data url="..." manual-fetch-mode>

document.querySelector('json-data[manual-fetch-mode]').fetch()

<animation-service intersection-ratio="0.3"></animation-service>

<script>
  // Framework Plugin Property
  app.plugins.animation.intersectionRatio = 0.3
</script>

• This allows for easier debugging from Browser DevTools. This has been tested and confirmed to work with recent versions of Chrome/Edge, Firefox, and Safari.
• Requires isSupportedBrowser set to false so that Babel Standalone is used as the compiler.
• Example usage:

jsxLoader.isSupportedBrowser = false;
jsxLoader.sourceMaps = true;

• This is related to issue https://github.com/dataformsjs/dataformsjs/issues/18
• Special Thanks to Yang Zhao for opening this issue https://github.com/yangzhaox This issue helped improved how debugging works with the JSX Loader

• js/plugins/animation.js https://github.com/dataformsjs/dataformsjs/blob/master/js/plugins/animation.js
• js/web-components/animation-service.js https://github.com/dataformsjs/dataformsjs/blob/master/js/web-components/animation-service.js
• js/web-components/animation-service.css https://github.com/dataformsjs/dataformsjs/blob/master/js/web-components/animation-service.css

• Updated logic related to the HTML onready event attribute to only run JavaScript code if the <json-data> is still connected to the page when the web service completes.
• For SPA if the user clicks of the page on a long running task then fetch will still be running but the element will not longer be connected.
• This would result in an error being shown to the user if an expected element or other item is missing from the page.
• In the example below if the user clicked of the page quickly an error alert would be displayed by default, this update prevents the code from running so the end user has a better and expected experience.

  <json-data onready="() => { document.getElementById('element1').textContent = document.getElementById('element2').textContent; }"

• js/web-components/Component.js
• https://github.com/dataformsjs/dataformsjs/blob/master/js/web-components/Component.js
• This class can be used to speed development of custom Web Components by reducing the amount of code needed to create components.
• https://www.dataformsjs.com/examples/custom-web-components.htm