diff --git a/CHANGELOG.md b/CHANGELOG.md index 377f6e6..0bcd650 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,10 @@ 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. +## Documentation (Feb 14, 2025) + +* Thank you to Andrés https://github.com/andr33sdev of Buenos Aires, Argentina for helping with Spanish Translations. + ## 5.15.5 (Sep 9, 2024) * Security update for the starter/example webserver that is included with the main project. diff --git a/README.md b/README.md index da08c08..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. diff --git a/docs/i18n-readme/README.es.md b/docs/i18n-readme/README.es.md index 860f0a9..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 diff --git a/docs/i18n-readme/README.ja.md b/docs/i18n-readme/README.ja.md index cd4dcf1..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サイトは別のリポジトリに存在します。 diff --git a/docs/i18n-readme/README.pt-BR.md b/docs/i18n-readme/README.pt-BR.md index 31a2755..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. diff --git a/docs/i18n-readme/README.zh-CN.md b/docs/i18n-readme/README.zh-CN.md index e3ffc71..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。 diff --git a/docs/jsx-loader.md b/docs/jsx-loader.md index f1a911d..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`. @@ -152,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 🚀 diff --git a/docs/jsx-loader.pt-BR.md b/docs/jsx-loader.pt-BR.md index 4529ee2..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`. @@ -152,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 diff --git a/docs/jsx-loader.zh-CN.md b/docs/jsx-loader.zh-CN.md index bfe3bf6..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`之间的性能差异的例子. @@ -152,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 ## 在线代码编辑器上尝试 🚀 diff --git a/examples/image-gallery-preact.htm b/examples/image-gallery-preact.htm index b2f3720..c2e3bf7 100644 --- a/examples/image-gallery-preact.htm +++ b/examples/image-gallery-preact.htm @@ -162,10 +162,12 @@

Example Usage and Code

+ + diff --git a/examples/image-gallery-react.htm b/examples/image-gallery-react.htm index 0dbfd60..bd6f47f 100644 --- a/examples/image-gallery-react.htm +++ b/examples/image-gallery-react.htm @@ -156,10 +156,12 @@

Example Usage and Code

+ +