diff --git a/CHANGELOG.md b/CHANGELOG.md index 8f644f8..ad5c1dd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,38 @@ 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&` @@ -1041,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 bf6f5ee..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. @@ -249,8 +249,8 @@ This example uses React with the `jsxLoader.min.js` script for converting JSX to ); - - + + diff --git a/docs/i18n-readme/README.es.md b/docs/i18n-readme/README.es.md index 26a2b70..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 ); - - + + diff --git a/docs/i18n-readme/README.ja.md b/docs/i18n-readme/README.ja.md index b397678..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 ); - - + + diff --git a/docs/i18n-readme/README.pt-BR.md b/docs/i18n-readme/README.pt-BR.md index a006134..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 ); - - + + diff --git a/docs/i18n-readme/README.zh-CN.md b/docs/i18n-readme/README.zh-CN.md index 28d42f8..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 ); - - + + diff --git a/docs/jsx-loader.md b/docs/jsx-loader.md index 9a6356b..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 - - + + - - + + - - + + - - + + - - + + 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/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/hacker-news-react.htm b/examples/hacker-news-react.htm index ae12e34..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 @@ +