diff --git a/CHANGELOG.md b/CHANGELOG.md index 5e0da3c..ad5c1dd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,81 @@ DataFormsJS uses [Semantic Versioning](https://docs.npmjs.com/about-semantic-ver Overall the core Framework files, React Components, and Web Components 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 all npm release history and new website features or major changes. +## 5.14.6 + +* Thanks for Aaron Huggins https://github.com/aaronhuggins for submitting and update to the jsxLoader +* Support emitting the end of tag name when newline and tab are used: https://github.com/dataformsjs/dataformsjs/pull/24 + +## Documentation (Feb 14, 2025) + +* Thank you to Andrés https://github.com/andr33sdev of Buenos Aires, Argentina for helping with Spanish Translations. + +## 5.14.5 (Sep 9, 2024) + +* Security update for the starter/example webserver that is included with the main project. + * The file [app.js](https://github.com/dataformsjs/dataformsjs/blob/master/server/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](https://github.com/JafarAkhondali/). + * 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. +* Replaced CDN https://unpkg.com/ with https://www.jsdelivr.com/ + * 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. +* Updated several ImageGallery React and Web Components so that css `@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {}` would only be included if the browser is IE 11. + * 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. +* Fixed Unit Tests for React and Preact pages + * 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](https://mochajs.org/) and [Chai](https://www.chaijs.com/); however their was a breaking change so now specific CDN versions are used rather than the latest version. +* Updated Unit Tests to run from Port 4000 instead of Port 5000 because Port 5000 is now used by default on Mac for AirPlay and was causing a conflict when running tests on a Mac. + +## 5.14.4 (Aug 19, 2024) + +* Replace all instances of the Polyfill Service `https://polyfill.io/v3/polyfill.min.js?` with `https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?version=4.8.0&` + * 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). + +## 5.14.3 (Jan 29, 2023) + +* jsxLoader Update so that JSX Files are compiled and added to the page only after all files are downloaded + * 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. +* **Special Thanks to m1sta for opening this issue and providing great examples to show the error** https://github.com/m1sta + +## 5.14.2 (Jan 29, 2023) + +* Web Components - Renamed function `[utils.js].isAttachedToDom()` to `[utils.js].isDomAttached()` because the text string `ToDom` would show up when searching source code for case-insensitive `todo`. This is a minor update but prevents the files from showing up in external projects by accident. This could be considered a breaking change if an app calls the function but that is unlikely the case and it's mostly an internal function because it's undocumented outside of the changelog; that is the reason why a patch version is being released. + +## 5.14.1 (Dec 7, 2022) + +* Fixed a bug in Web Component `` that was introduced on the previous build where `format.{func}` was not working in `[data-show]` attributes. + +## 5.14.0 (Nov 28, 2022) + +* Added ability to use HTML Attribute `[data-format]` from Web Component `` when using attribute `[url-param]`. The same functionality when using Web Component `` with attribute `[data-bind]` is provided. + * 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 +* Updated Image Gallery Controls/Components: + * 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 + +## 5.13.1 (May 2, 2022) + +* Update Code Comments on React Component `` + * Previously `@license` was included in the main comment which resulted in [Vite](https://vitejs.dev/) 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 Framework, React, and Web Components for Date/Time formatting: + * 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. + ## 5.13.0 (February 25, 2022) * DataFormsJS App Object @@ -998,7 +1073,7 @@ The Web Components have the most complex breaking changes related to API usage h * `js/react/jsxLoader.js` * Added `jsxLoader.globalNamespaces` and improved `jsxLoader.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 with `React-Toastify` at https://awesome-web-react.js.org/ which will be published after the new release. * Added `Object.values` and `Array.prototype.findIndex` to `jsxLoader.polyfillUrl`. - * Updated 'jsxLoader.babelUrl' from version `7.8.4` to version `7.10.4`. New URL: `https://unpkg.com/@babel/standalone@7.10.4/babel.js` + * Updated 'jsxLoader.babelUrl' from version `7.8.4` to version `7.10.4`. New URL: `https://cdn.jsdelivr.net/npm/@babel/standalone@7.10.4/babel.js` * Added config file for ESLint `.eslintrc.js` and added `eslint` as a dev dependency in `package.json` * All code is valid based on defined rules so no changes to framework code were needed. diff --git a/README.md b/README.md index ea81abd..617d8c9 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ -DataFormsJS is a JavaScript Framework and Standalone React and Web Components. A tiny browser-based [JSX Compiler](https://github.com/dataformsjs/dataformsjs/blob/master/docs/jsx-loader.md) is also included as part of this Framework. DataFormsJS is small in size, easy to learn, designed for fast development, and to make for a great experience for both developers and end-users. DataFormsJS was first published in November of 2019, however it was written and used over many years and is extremely stable containing a large number of unit tests. +DataFormsJS is a JavaScript Framework and Standalone React and Web Components. A tiny browser-based [JSX Compiler](https://github.com/dataformsjs/dataformsjs/blob/master/docs/jsx-loader.md) is also included as part of this Framework. DataFormsJS is small in size, easy to learn, designed for fast development, and to make for a great experience for both developers and end-users. DataFormsJS was first published in November of 2019; and it was written and used over many years prior to its release. As of 2024 has been used in a variety of applications and websites and is extremely stable and contains many unit tests. This repository contains DataFormsJS’s Framework, Example Pages, and Unit Tests. The main website exists on another repository. @@ -74,24 +74,31 @@ The start screen allows you to quickly filter and view many different examples a DataFormsJS npm start page

-JavaScript files for the Framework and standalone React and Web Components exist under the `js` directory. Full Directory Structure: +JavaScript files for the Framework and standalone React and Web Components exist under the `js` directory. Full Directory Structure and Key files: ``` dataformsjs ├── docs +│ ├── examples │ ├── *.htm │ └── server.js +│ └── js │ ├── DataFormsJS.js │ ├── react\*.js │ ├── web-components\*.js │ └── *\*.js +│ ├── scripts\*.js -├── server\app.js -└── test - ├── *.htm - └── server.js +│ +├── server\*.js +│ +├── test +│ ├── *.htm +│ └── server.js +│ +└── server\app.js ``` **Develop online** using the code playground: https://www.dataformsjs.com/en/playground @@ -242,8 +249,8 @@ This example uses React with the `jsxLoader.min.js` script for converting JSX to ); - - + + @@ -268,6 +275,13 @@ import { // Use Redux import { createStore } from 'redux' import { Provider, connect } from 'react-redux'; + +// Import Individual DataFormsJS React Components +import JsonData from 'dataformsjs/js/react/es6/JsonData'; +import LazyLoad from 'dataformsjs/js/react/es6/LazyLoad'; +import Format from 'dataformsjs/js/react/es6/Format'; +import ErrorBoundary from 'dataformsjs/js/react/es6/ErrorBoundary'; +// [Cache, CssVars, I18n, ImageGallery, InputFilter, LeafletMap, Markdown, SortableTable] ``` When working with the `jsxLoader` and compiling JSX directly in a browser the recommend method for importing is to simply reference the global classes or functions of the libraries that you need for your app: @@ -424,7 +438,7 @@ _All sizes are based on minified scripts and gzip compression from the web serve * **React JSX Loader – 6.6 kB** (91 kB full version uncompressed) * **React (Core Components) – 5.7 kB** * Individual React Components are between 3 and 12 kB when uncompressed and including comments. -* Web Components are typically around 1 to 3 kB each, typically you will use a number of components so in the example apps this adds up to about 15 kB for each app. +* **Web Components are typically around 1 to 3 kB each**, typically you will use a number of components so in the example apps this adds up to about 15 kB for each app. While the DataFormsJS Framework is small it will generally be used with a larger Templating or View Engine: diff --git a/docs/i18n-readme/README.es.md b/docs/i18n-readme/README.es.md index a371f6d..dd9e3f1 100644 --- a/docs/i18n-readme/README.es.md +++ b/docs/i18n-readme/README.es.md @@ -7,7 +7,7 @@ **¡Gracias por su visita!** 🌠👍 -DataFormsJS es un nuevo marco de JavaScript y componentes independientes de reacción y web. A tiny browser-based [JSX Compiler](https://github.com/dataformsjs/dataformsjs/blob/master/docs/jsx-loader.md) is also included as part of this Framework. DataFormsJS es de tamaño pequeño, fácil de aprender, diseñado para un desarrollo rápido y para ofrecer una gran experiencia tanto para desarrolladores como para usuarios finales. Aunque es nuevo (publicado por primera vez en noviembre de 2019) DataFormsJS fue escrito y utilizado durante muchos años y es extremadamente estable y contiene una gran cantidad de pruebas unitarias. +DataFormsJS es un nuevo marco de JavaScript y componentes independientes de React y Web. Un pequeño [JSX Compiler](https://github.com/dataformsjs/dataformsjs/blob/master/docs/jsx-loader.md) basado en el navegador también se incluye como parte de este framework. DataFormsJS es de tamaño pequeño, fácil de aprender, diseñado para un desarrollo rápido y para ofrecer una gran experiencia tanto para desarrolladores como para usuarios finales. DataFormsJS se publicó por primera vez en noviembre de 2019 y se escribió y utilizó durante muchos años antes de su lanzamiento. A partir de 2024, se ha utilizado en una variedad de aplicaciones y sitios web, es extremadamente estable y contiene muchas pruebas unitarias. Este repositorio contiene el Marco de DataFormsJS, Páginas de ejemplo y Pruebas unitarias. El sitio web principal existe en otro repositorio. @@ -151,7 +151,8 @@ Este ejemplo usa Vue para crear plantillas. Si lo guarda con un editor de texto, ``` -This example uses React with the `jsxLoader.min.js` script for converting JSX to JS directly it the browser and it includes DataFormsJS React Components from `DataFormsJS.min.js`. If you copy the contents of this code it will also work in a browser. All React Components are also compatible with Preact when using jsxLoader. +Este ejemplo utuliza React con el script `jsxLoader.min.js` para convertir JSX a JS directamente en el navegador e incluye componentes de React de DataFormsJS desde `DataFormsJS.min.js`. +Si copias el contenido de este código también funcionará en un navegador. Todos los componentes de React son también compatibles con Preact cuando se utilice jsxLoader. ```html @@ -213,8 +214,8 @@ This example uses React with the `jsxLoader.min.js` script for converting JSX to ); - - + + @@ -239,6 +240,13 @@ import { // Use Redux import { createStore } from 'redux' import { Provider, connect } from 'react-redux'; + +// Import Individual DataFormsJS React Components +import JsonData from 'dataformsjs/js/react/es6/JsonData'; +import LazyLoad from 'dataformsjs/js/react/es6/LazyLoad'; +import Format from 'dataformsjs/js/react/es6/Format'; +import ErrorBoundary from 'dataformsjs/js/react/es6/ErrorBoundary'; +// [Cache, CssVars, I18n, ImageGallery, InputFilter, LeafletMap, Markdown, SortableTable] ``` When working with the `jsxLoader` and compiling JSX directly in a browser the recommend method for importing is to simply reference the global classes or functions of the libraries that you need for your app: @@ -393,7 +401,7 @@ _Todos los tamaños se basan en scripts minificados y compresión gzip del servi * **React JSX Loader – 6.6 kB** (91 kB versión completa sin comprimir) * **React (todos los componentes en JavaScript) – 5.7 kB** * Los componentes de reacción individuales tienen entre 3 y 12 kB cuando no están comprimidos e incluyen comentarios. -* Los componentes web generalmente tienen entre 1 y 3 kB cada uno, por lo general, utilizará una serie de componentes, por lo que en las aplicaciones de ejemplo, esto suma aproximadamente 15 kB para cada aplicación. +* **Los componentes web generalmente tienen entre 1 y 3 kB cada uno**, por lo general, utilizará una serie de componentes, por lo que en las aplicaciones de ejemplo, esto suma aproximadamente 15 kB para cada aplicación. Si bien el marco DataFormsJS es pequeño, generalmente se utilizará con un motor de visualización o plantilla más grande: diff --git a/docs/i18n-readme/README.ja.md b/docs/i18n-readme/README.ja.md index 29f8de2..8b17b16 100644 --- a/docs/i18n-readme/README.ja.md +++ b/docs/i18n-readme/README.ja.md @@ -6,7 +6,7 @@ **訪問してくれてありがとう！** 🌠👍 -DataFormsJSは、新しいJavaScriptフレームワークとスタンドアロンのReactおよびWebコンポーネントです。A tiny browser-based [JSX Compiler](https://github.com/dataformsjs/dataformsjs/blob/master/docs/jsx-loader.md) is also included as part of this Framework. DataFormsJSはサイズが小さく、習得が容易で、迅速な開発のために設計されており、開発者とエンドユーザーの両方に素晴らしい体験を提供します。 新しい（2019年11月に最初に公開された）DataFormsJSは長年にわたって記述および使用されており、多数の単体テストを含む非常に安定しています。 +DataFormsJSは、新しいJavaScriptフレームワークとスタンドアロンのReactおよびWebコンポーネントです。A tiny browser-based [JSX Compiler](https://github.com/dataformsjs/dataformsjs/blob/master/docs/jsx-loader.md) is also included as part of this Framework. DataFormsJSはサイズが小さく、習得が容易で、迅速な開発のために設計されており、開発者とエンドユーザーの両方に素晴らしい体験を提供します。DataFormsJS は 2019 年 11 月に初めて公開され、リリース前に何年もかけて作成され、使用されていました。2024 年現在、さまざまなアプリケーションや Web サイトで使用されており、非常に安定しており、多くのユニット テストが含まれています。 このリポジトリには、DataFormsJSのフレームワーク、サンプルページ、ユニットテストが含まれています。 メインWebサイトは別のリポジトリに存在します。 @@ -212,8 +212,8 @@ This example uses React with the `jsxLoader.min.js` script for converting JSX to ); - - + + @@ -238,6 +238,13 @@ import { // Use Redux import { createStore } from 'redux' import { Provider, connect } from 'react-redux'; + +// Import Individual DataFormsJS React Components +import JsonData from 'dataformsjs/js/react/es6/JsonData'; +import LazyLoad from 'dataformsjs/js/react/es6/LazyLoad'; +import Format from 'dataformsjs/js/react/es6/Format'; +import ErrorBoundary from 'dataformsjs/js/react/es6/ErrorBoundary'; +// [Cache, CssVars, I18n, ImageGallery, InputFilter, LeafletMap, Markdown, SortableTable] ``` When working with the `jsxLoader` and compiling JSX directly in a browser the recommend method for importing is to simply reference the global classes or functions of the libraries that you need for your app: @@ -392,7 +399,7 @@ _All sizes are based on minified scripts and gzip compression from the web serve * **React JSX Loader – 6.6 kB** (91 kB full version uncompressed) * **React (All Components in JavaScript) – 5.7 kB** * Individual React Components are between 3 and 12 KB when uncompressed and including comments. -* Web Components are typically around 1 to 3 KB each, typically you will use a number of components so in the example apps this adds up to about 15 kB for each app. +* **Web Components are typically around 1 to 3 KB each**, typically you will use a number of components so in the example apps this adds up to about 15 kB for each app. While the DataFormsJS Framework is small it will generally be used with a larger Templating or View Engine: diff --git a/docs/i18n-readme/README.pt-BR.md b/docs/i18n-readme/README.pt-BR.md index 57e7e1a..ee91195 100644 --- a/docs/i18n-readme/README.pt-BR.md +++ b/docs/i18n-readme/README.pt-BR.md @@ -6,7 +6,7 @@ **Obrigado pela visita!** 🌠👍 -DataFormsJS é um novo framework JavaScript e app autônomo de React e Web Components. A tiny browser-based [JSX Compiler](https://github.com/dataformsjs/dataformsjs/blob/master/docs/jsx-loader.pt-BR.md) is also included as part of this Framework. Sendo pequeno, fácil de aprender, projetado para desenvolvimento rápido o DataFormsJS proporcionando uma grande experiência para desenvolvedores e usuários finais. Mesmo sendo novo (publicado em novembro de 2019), o DataFormsJS foi escrito e usado por muitos anos e tem um sólido nível de estabilidade com um grande número de testes de unidade. +DataFormsJS é um novo framework JavaScript e app autônomo de React e Web Components. A tiny browser-based [JSX Compiler](https://github.com/dataformsjs/dataformsjs/blob/master/docs/jsx-loader.pt-BR.md) is also included as part of this Framework. Sendo pequeno, fácil de aprender, projetado para desenvolvimento rápido o DataFormsJS proporcionando uma grande experiência para desenvolvedores e usuários finais. O DataFormsJS foi publicado pela primeira vez em novembro de 2019; e foi escrito e usado por muitos anos antes de seu lançamento. Em 2024, foi usado em uma variedade de aplicativos e sites e é extremamente estável e contém muitos testes de unidade. Este repositório contém o framework DataFormsJS, páginas exemplo e testes de unidade. O site principal (/website) está em outro repositório. @@ -212,8 +212,8 @@ Este exemplo utiliza React com o script `jsxLoader.min.js` para converter JSX pa ); - - + + @@ -238,6 +238,13 @@ import { // Use Redux import { createStore } from 'redux' import { Provider, connect } from 'react-redux'; + +// Import Individual DataFormsJS React Components +import JsonData from 'dataformsjs/js/react/es6/JsonData'; +import LazyLoad from 'dataformsjs/js/react/es6/LazyLoad'; +import Format from 'dataformsjs/js/react/es6/Format'; +import ErrorBoundary from 'dataformsjs/js/react/es6/ErrorBoundary'; +// [Cache, CssVars, I18n, ImageGallery, InputFilter, LeafletMap, Markdown, SortableTable] ``` When working with the `jsxLoader` and compiling JSX directly in a browser the recommend method for importing is to simply reference the global classes or functions of the libraries that you need for your app: @@ -391,7 +398,7 @@ _Todos os tamanhos são baseados nas versões minificadas dos scripts e compress * **React JSX Loader – 6.6 kB** (91 kB da versão completa e descompactada) * **React (Todos so componentes em JavaScript) – 5.7 kB** * Components React individuais estão entre 3 e 12 kB ao descompactar e incluindo componentes. -* Web Components são tipicamente em torno de 1 a 3 kB cada, você usará um conjunto de componentes então nos apps de exemplo isso adiciona em torno de 15 kB para cada app. +* **Web Components são tipicamente em torno de 1 a 3 kB cada**, você usará um conjunto de componentes então nos apps de exemplo isso adiciona em torno de 15 kB para cada app. Enquanto o framework DataFormsJS for pequeno ele será geralmente utilizado com mecanismos de Modelos ou de Visualização: diff --git a/docs/i18n-readme/README.zh-CN.md b/docs/i18n-readme/README.zh-CN.md index 9f15fdf..e707aec 100644 --- a/docs/i18n-readme/README.zh-CN.md +++ b/docs/i18n-readme/README.zh-CN.md @@ -6,7 +6,7 @@ **非常感谢您的访问!** 🌠👍 -DataFormsJS是一个新的JavaScript框架独立于React和Web组件。A tiny browser-based [JSX Compiler](https://github.com/dataformsjs/dataformsjs/blob/master/docs/jsx-loader.zh-CN.md) is also included as part of this Framework. DataFormsJS体积小，易于学习，设计用于快速开发，并为开发人员和最终用户带来极好的体验。虽然它是新的(2019年11月首次发布)，但DataFormsJS经过多年的编写和使用，非常稳定，包含了大量的单元测试。 +DataFormsJS是一个新的JavaScript框架独立于React和Web组件。A tiny browser-based [JSX Compiler](https://github.com/dataformsjs/dataformsjs/blob/master/docs/jsx-loader.zh-CN.md) is also included as part of this Framework. DataFormsJS体积小，易于学习，设计用于快速开发，并为开发人员和最终用户带来极好的体验。DataFormsJS 於 2019 年 11 月首次發布；它在發布之前已經編寫和使用了很多年。截至 2024 年已在各種應用程式和網站中使用，並且極其穩定並包含許多單元測試。 该项目包含DataFormsJS的框架、示例页面和单元测试。主网站代码位于 dataformsjs/websie。 @@ -212,8 +212,8 @@ This example uses React with the `jsxLoader.min.js` script for converting JSX to ); - - + + @@ -257,6 +257,13 @@ const Link = ReactRouterDOM.Link; const Provider = ReactRedux.Provider; const connect = ReactRedux.connect; const createStore = Redux.createStore; + +// Import Individual DataFormsJS React Components +import JsonData from 'dataformsjs/js/react/es6/JsonData'; +import LazyLoad from 'dataformsjs/js/react/es6/LazyLoad'; +import Format from 'dataformsjs/js/react/es6/Format'; +import ErrorBoundary from 'dataformsjs/js/react/es6/ErrorBoundary'; +// [Cache, CssVars, I18n, ImageGallery, InputFilter, LeafletMap, Markdown, SortableTable] ``` Many examples exist for popular React Libraries using `jsxLoader` at the following site: @@ -392,7 +399,7 @@ _所有大小都基于来自Web服务器的缩小脚本和gzip压缩. The file s * **React JSX Loader – 6.6 kB** (91 kB 未压缩时) * **React (包含所有组件) – 5.7 kB** * 单独的Reaction组件在解压缩并包含注释时在3到12 kB之间. -* 每个Web组件通常约为1至3 kB，通常您将使用多个组件，因此在示例应用程序中，每个应用程序的总大小约为15 kB. +* **每个Web组件通常约为1至3 kB**，通常您将使用多个组件，因此在示例应用程序中，每个应用程序的总大小约为15 kB. 虽然DataFormsJS框架很小，但它通常会与较大的模板或视图引擎一起使用: diff --git a/docs/jsx-loader.md b/docs/jsx-loader.md index 207f0a1..61330b3 100644 --- a/docs/jsx-loader.md +++ b/docs/jsx-loader.md @@ -27,13 +27,15 @@ A single JavaScript file `jsxLoader.js` that compiles / [transpiles](https://en. **Demo:** https://dataformsjs.com/examples/hello-world/en/react.htm +**Many Examples** https://awesome-web-react.js.org/ + ## Why ❓ The `jsxLoader.js` script was created to provide a fast method for including React with JSX on web pages and web apps with no build process, CLI tools, or large dependencies needed; simply use React with JSX in a webpage or site and include the needed CDN or JavaScript files. CLI Development tools such as `webpack`, `babel`, and `create-react-app` are great but they do not make sense for all sites, web pages, and development workflows; and `Babel Standalone` is huge to include on each page - 320 kB when gzipped and 1.5 MB of JavaScript for the Browser to process. With a browser based options for JSX you can **easily include React Components on any page** without having to build the entire site using React or JSX. -Old Browsers typically account for less than 5 % of users for most sites - mostly IE and old iOS/Safari. Generally if someone is browsing from IE they are used to slow pages and if someone is browsing from an old iPhone or iPad they end up with many broken sites so simply having a site working is good even if it's slow. This script provides a good trade-off - fast for most users with modern browsers and it still works on old browsers. +As of 2024 over 99% of the global population views webpages with modern browsers so the 6.6 kb `jsxLoader.js` will compile and load JSX code on webpages for all modern browsers; for the smaller percentage of the population that views websites on a legacy browser (IE 11 on Windows Server, old iOS, and old Android) `jsxLoader.js` will automatically download Babel Standalone and use it to correctly compile and load JSX code. `jsxLoader.js` provides a good trade-off - fast for most users with modern browsers and it still works on old browsers. Prior to the `jsxLoader.js` being created all React demos on DataFormsJS used Babel Standalone. Babel Standalone is great for prototyping and works with React DevTools however due to its size it takes a lot of memory and causes an initial delay in loading the page so it’s generally avoided on production sites. On mobile devices the delay can be many seconds. Here is an example of before and after performance differences when using `Babel` vs `jsxLoader`. @@ -69,8 +71,8 @@ The `jsxLoader.js` script is very small to download (6.6 kB - min and gzip) and ```html - - + + ``` @@ -147,7 +154,7 @@ The `jsxLoader.js` script is very small to download (6.6 kB - min and gzip) and ### Rax * https://dataformsjs.com/examples/hello-world/en/rax.htm -### Node +### Node * https://github.com/dataformsjs/dataformsjs/blob/master/scripts/jsx-loader-node-demo.js ## Try it online in the Code Playground 🚀 @@ -282,8 +289,8 @@ function LoadMapAndPage(props) { return ( } @@ -482,7 +489,7 @@ cd test node server.js # View the unit test site and run tests: -# http://127.0.0.1:5000/ +# http://127.0.0.1:4000/ ``` Or try Unit Tests directly on the main web server: diff --git a/docs/jsx-loader.pt-BR.md b/docs/jsx-loader.pt-BR.md index e1602fb..4f7f57d 100644 --- a/docs/jsx-loader.pt-BR.md +++ b/docs/jsx-loader.pt-BR.md @@ -27,13 +27,15 @@ Um único arquivo JavaScript `jsxLoader.js` que compila / [transcompila](https:/ **Demo:** https://www.dataformsjs.com/examples/hello-world/pt-BR/react.htm +**Many Examples** https://awesome-web-react.js.org/ + ## Por quê ❓ O script `jsxLoader.js` foi criado para fornecer um método rápido para incluir React com JSX em página web e apps web sem processo de compilação, ferramentas CLI, ou grandes dependências necessárias; simplesmente utilize React com JSX em uma webpage ou site e inclua os CDN ou arquivos JavaScript necessários. Ferramentas de Desenvolvimento CLI como `webpack`, `babel` e `create-react-app` são ótimas, mas elas não fazem sentido para todos os sites, páginas web e fluxos de desenvolvimento; e o `Babel Standalone` é gigante para ser incluído em cada página - 320 kB em gzipp e 1.5 MB de JavaScript para o Navegador processar. Com opções baseadas em um navegador para JSX você pode **facilmente incluir componentes React em qualquer página** sem ter que compilar todo o site utilizando React ou JSX. -Navegadores antigos geralmente representam menos de 5 % dos usuários para a maioria dos sites - na maioria IE e versões antigas de iOS/Safari. Geralmente se alguém está navegando com o IE, eles estão acostumado a páginas lentas e se alguém estiver navegando em um iPhone ou iPad antigo eles acabam com muitos sites quebrados, então, simplesmente ter um site funcionando é bom mesmo se ele for lento. Esse script forncece um boa troca - rápido para a maioria dos usuário com navegadores modernos e continua funcionando em navegadores antigos. +As of 2024 over 99% of the global population views webpages with modern browsers so the 6.6 kb `jsxLoader.js` will compile and load JSX code on webpages for all modern browsers; for the smaller percentage of the population that views websites on a legacy browser (IE 11 on Windows Server, old iOS, and old Android) `jsxLoader.js` will automatically download Babel Standalone and use it to correctly compile and load JSX code. `jsxLoader.js` provides a good trade-off - fast for most users with modern browsers and it still works on old browsers. Antes do `jsxLoader.js` ser criado todos os demos React no DataFormsJS utilizavam Babel Standalone. Babel Standalone é ótimo para prototipars e funciona com React DevTools, entretanto, devido ao seu tamanho ele ocupa muita memória e causa um atraso inicial ao carregar a página, então, é geralmente evitado em site em produção. Em dispositivos móveis o atraso pode ser vários segundos. Aqui está um exemplo de diferença de desempenho antes e depois utilizando `Babel` vs `jsxLoader`. @@ -69,8 +71,8 @@ O script `jsxLoader.js` é muito pequeno para baixar (6.6 kB - min e em gzip) e ```html - - + + ``` @@ -147,7 +154,7 @@ O script `jsxLoader.js` é muito pequeno para baixar (6.6 kB - min e em gzip) e ### Rax * https://www.dataformsjs.com/examples/hello-world/pt-BR/rax.htm -### Node +### Node * https://github.com/dataformsjs/dataformsjs/blob/master/scripts/jsx-loader-node-demo.js @@ -284,8 +291,8 @@ function LoadMapAndPage(props) { return ( } @@ -485,7 +492,7 @@ cd test node server.js # Verja o site de teste de unidade e rode os testes: -# http://127.0.0.1:5000/ +# http://127.0.0.1:4000/ ``` Ou tente Testes de unidade diretamente no servidor web principal: diff --git a/docs/jsx-loader.zh-CN.md b/docs/jsx-loader.zh-CN.md index 0479c86..6139d54 100644 --- a/docs/jsx-loader.zh-CN.md +++ b/docs/jsx-loader.zh-CN.md @@ -27,13 +27,15 @@ **演示:** https://dataformsjs.com/examples/hello-world/zh-CN/react.htm +**Many Examples** https://awesome-web-react.js.org/ + ## 为什么 ❓ `jsxLoader.js`脚本的创建是为了提供一种快速在web页面和web应用程序中加入React和JSX的方法,而无需构建过程，CLI工具或大型依赖,只需在网页或站点中使用React和JSX,并加入所需的CDN或JavaScript文件. CLI开发工具,如`webpack`, `babel`,`create-react-app`是非常好的工具，但是他们并不适用于所有的站点,网页以及开发工作流程.`Babel Standalone`非常庞大,每个页面上都包含-gzip压缩后为320 kB和1.5 MB JavaScript文件供浏览器处理.使用基于浏览器的JSX选项,您可以**轻松地在任何页面中使用React组件**而无需使用React或JSX构建整个网站. -对于大多数网站来说,旧的浏览器通常只占不到5%的用户,主要是IE和旧的IOS以及Safari.一般来说,如果有人在IE上浏览网页,他们习惯了缓慢的网页,如果有人在旧的iPhone或iPad上浏览,他们会遇到很多损坏的网站.所以，简单的有个运行的网站是不错的,即使它的速度很慢.这个脚本提供了一个很好的折中方案，对于使用新浏览器的用户来说，速度很快，并仍然能在旧的浏览器上工作. +As of 2024 over 99% of the global population views webpages with modern browsers so the 6.6 kb `jsxLoader.js` will compile and load JSX code on webpages for all modern browsers; for the smaller percentage of the population that views websites on a legacy browser (IE 11 on Windows Server, old iOS, and old Android) `jsxLoader.js` will automatically download Babel Standalone and use it to correctly compile and load JSX code. `jsxLoader.js` provides a good trade-off - fast for most users with modern browsers and it still works on old browsers. 在创建`jsxLoader.js`之前,DataFormsJS上的所有React演示都使用了Babel Standalone.Babel Standalone非常适合用于原型制作，并且能和React DevTools一起使用,但是由于其体积大,需要占用大量内存,并且会导致页面加载的初始延迟,因此通常在创建站点上是避免这种情况的.在移动设备上,延迟可能长达数秒. 下面是一个使用`Babel`和`jsxLoader`之间的性能差异的例子. @@ -69,8 +71,8 @@ CLI开发工具,如`webpack`, `babel`,`create-react-app`是非常好的工具， ```html - - + + ``` @@ -147,7 +154,7 @@ CLI开发工具,如`webpack`, `babel`,`create-react-app`是非常好的工具， ### Rax * https://dataformsjs.com/examples/hello-world/zh-CN/rax.htm -### Node +### Node * https://github.com/dataformsjs/dataformsjs/blob/master/scripts/jsx-loader-node-demo.js ## 在线代码编辑器上尝试 🚀 @@ -282,8 +289,8 @@ function LoadMapAndPage(props) { return ( } @@ -482,7 +489,7 @@ cd test node server.js # View the unit test site and run tests: -# http://127.0.0.1:5000/ +# http://127.0.0.1:4000/ ``` 或直接在主Web服务器上尝试单元测试： diff --git a/docs/to-do-list.txt b/docs/to-do-list.txt index c0334a4..64292f3 100644 --- a/docs/to-do-list.txt +++ b/docs/to-do-list.txt @@ -22,13 +22,6 @@ TODO List | -------------------------------------------------------------------------- -**) Current Updates for release 5.13.0 - - Published 2022-02-25 - - After CDN changes take effect (24 hours or longer) update all local "../js/" to the CDN Page. - Use global search of "../js/" to find files that need to be updated. - This applies to the example page and once update changes will be published - to the main server. - **) Update the Getting Started CSS Template used here: https://www.dataformsjs.com/en/getting-started So that it looks similar to the places demo and can be used for apps as decent starting template @@ -543,33 +536,6 @@ TODO List *) Create Unit Tests for the following functions: Controller.onRouteUnload -*) Improve Unit tests for IE 11 - - Typically they work about 50% of the time, however several routes have an - issue related to calls for [tester.pageTester2] - - It appears that [app.onUpdateViewComplete] is being called twice the first time - that it should be called. The reason for this is not yet known. - - It's not yet determine if this is a bug or related to IE behavior. Regardless - DataFormsJS has been used extensively with IE Users for many years before it was - released so it's known to work well with IE. - - To test the issue find and update the following code in [dataformsjs\test\js\unit-testing-core.js]: - // After checking the 'Page is Loading' message define a new - // [onUpdateViewComplete] function to check the final response. - app.onUpdateViewComplete = function () { - // Now check the 2nd state (usually after a web service response) - assert.equal(window.location.hash, hash, 'Hash Check - ' + hash); - if (expectHtml2 !== null) { - //// **** This block is the section to add for manual testing. - if (hash === '#/page-json-data-load-only-once' || hash === '#/page-reload-json-data' || hash === '#/missing-page-json-data') { - var html = document.getElementById('view').textContent.trim(); - if (html !== expectHtml2) { - console.log(hash); - console.log(expectHtml2); - console.log(html); - } - } - tester.checkElement('view', expectHtml2, assert); - } - *) Additional Unit Testing for the following functions, props, etc: data-engine: Validate error message in [app.setup()] at [(viewEngine === ViewEngines.Unknown)] diff --git a/examples/code-playground-react.htm b/examples/code-playground-react.htm index e49c45d..b7a06c6 100755 --- a/examples/code-playground-react.htm +++ b/examples/code-playground-react.htm @@ -237,8 +237,8 @@ React https://reactjs.org/ --> - - + + - - + + diff --git a/examples/countries-no-spa-hbs.htm b/examples/countries-no-spa-hbs.htm index a46466a..84950b2 100644 --- a/examples/countries-no-spa-hbs.htm +++ b/examples/countries-no-spa-hbs.htm @@ -85,10 +85,8 @@

Countries

- - - + + \ No newline at end of file diff --git a/examples/countries-no-spa-js.htm b/examples/countries-no-spa-js.htm index 965e698..d047d17 100644 --- a/examples/countries-no-spa-js.htm +++ b/examples/countries-no-spa-js.htm @@ -85,9 +85,7 @@

Countries

- - - + + \ No newline at end of file diff --git a/examples/countries-no-spa-preact.htm b/examples/countries-no-spa-preact.htm index decf299..339aff4 100644 --- a/examples/countries-no-spa-preact.htm +++ b/examples/countries-no-spa-preact.htm @@ -27,7 +27,7 @@

Countries

Preact https://preactjs.com/ --> - + diff --git a/examples/countries-no-spa-react.htm b/examples/countries-no-spa-react.htm index d35a039..82ea715 100644 --- a/examples/countries-no-spa-react.htm +++ b/examples/countries-no-spa-react.htm @@ -18,11 +18,11 @@

Countries

- - + + diff --git a/examples/countries-no-spa-vue.htm b/examples/countries-no-spa-vue.htm index f7361da..9c30760 100644 --- a/examples/countries-no-spa-vue.htm +++ b/examples/countries-no-spa-vue.htm @@ -111,9 +111,7 @@

Countries

- - - + + \ No newline at end of file diff --git a/examples/countries-no-spa-web.htm b/examples/countries-no-spa-web.htm index 7b37edc..aceec80 100644 --- a/examples/countries-no-spa-web.htm +++ b/examples/countries-no-spa-web.htm @@ -114,7 +114,6 @@

Countries

- - + \ No newline at end of file diff --git a/examples/css/image-classification-ie.css b/examples/css/image-classification-ie.css new file mode 100644 index 0000000..ba98fb6 --- /dev/null +++ b/examples/css/image-classification-ie.css @@ -0,0 +1,15 @@ +/* IE Fallback for basic layout with key elements */ +@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { + .content, + ul.results li { + padding: 20px; + margin: 20px; + box-shadow: 0 1px 2px 1px rgba(0,0,0,0.5); + } + + ul.image-categories { width:90vh; } + body { margin:40px; } + nav, h2 { padding:20px; } + ul.info { margin-left:20px; } + input[type='text'] { margin-bottom: 20px; } +} diff --git a/examples/css/image-classification.css b/examples/css/image-classification.css index 4505299..5de7612 100644 --- a/examples/css/image-classification.css +++ b/examples/css/image-classification.css @@ -7,21 +7,6 @@ --padding: 20px; } -/* IE Fallback for basic layout with key elements */ -.content, -ul.results li { - padding: 20px; - margin: 20px; - box-shadow: 0 1px 2px 1px rgba(0,0,0,0.5); -} -@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { - ul.image-categories { width:90vh; } - body { margin:40px; } - nav, h2 { padding:20px; } - ul.info { margin-left:20px; } - input[type='text'] { margin-bottom: 20px; } -} - /* Page Style */ body { background-color: rgba(240, 248, 255, 1); diff --git a/examples/export-table-js.htm b/examples/export-table-js.htm index 00bd0f0..a0a234a 100644 --- a/examples/export-table-js.htm +++ b/examples/export-table-js.htm @@ -77,8 +77,7 @@

Export Table Demo | DataFormsJS Framework

- - + diff --git a/examples/export-table-web.htm b/examples/export-table-web.htm index 917a12c..17bf1af 100644 --- a/examples/export-table-web.htm +++ b/examples/export-table-web.htm @@ -76,8 +76,7 @@

Export Table Demo | Web Components

- - + diff --git a/examples/hacker-news-react.htm b/examples/hacker-news-react.htm index 406fe8d..0c43618 100644 --- a/examples/hacker-news-react.htm +++ b/examples/hacker-news-react.htm @@ -29,8 +29,8 @@ React https://reactjs.org --> - - + + - + - - + + - - + + diff --git a/examples/image-classification-vue.htm b/examples/image-classification-vue.htm index ac43715..54dc282 100644 --- a/examples/image-classification-vue.htm +++ b/examples/image-classification-vue.htm @@ -11,6 +11,12 @@ +