Skip to content

Commit 835430e

Browse files
committed
🚀 Dev Updates for Next Release
1 parent 911b5c1 commit 835430e

29 files changed

Lines changed: 252 additions & 329 deletions

.eslintrc.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ module.exports = {
3535
overrides: [
3636
// React and Web Components use modern module syntax
3737
{
38-
files: ['**/js/web-components/*', '**/js/react/es6/*'],
38+
files: ['**/js/web-components/*', '**/js/react/es6/*', '/scripts/build.js'],
3939
excludedFiles: ['jsPlugins.js', 'polyfill.js'],
4040
parserOptions: {
4141
ecmaVersion: 11,

CHANGELOG.md

Lines changed: 48 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ Overall the core Framework files and API are expected to remain stable however t
1717

1818
* **Thanks ElevateBart** for helping with the idea and API proposal related to `jsxLoader` updates with this release: https://github.com/elevatebart
1919
* https://github.com/dataformsjs/dataformsjs/issues/16
20-
* The result is that jsxLoader can not be used from both node and webpack without side effects. Originally jsxLoader was intended only for browser use and it would always check if polyfills or babel standalone were needed based on the browser environment. Now this can be turned off.
20+
* The result is that jsxLoader can not be used from both node and webpack without side effects. Originally jsxLoader was intended only for browser use and it would always check if polyfills or babel standalone were needed based on the browser environment. Now this can be turned off.
2121

2222
### Release Overview
2323

24-
* Many updates have been made for overall improvement of DataFormsJS Web Components
24+
* **Many updates have been made for overall improvement of DataFormsJS Web Components**
2525
* The updates are significant and make using the Web Components much easier for complex apps and sites; and provide for wider browser support.
2626
* The new features make for an easier to use API for customizing content on page after data is displayed. Previously the places demo required a lot of custom JavaScript on the page in order to display flag icons, format table data, and additional items.
2727
* Added ability to polyfill Web Components for older browsers using the standard Framework that gets loaded from a single file and then that file `polyfill.js` loads additional framework files as needed.
@@ -44,7 +44,7 @@ Overall the core Framework files and API are expected to remain stable however t
4444
* Added ability to define custom `<template>` for table `<tr>` in `<data-table>`
4545
* Improvements for `<json-data>`
4646
* Added option for formatting text from (date, time, number, custom functions, etc)
47-
* Added ability to use new attribute `click-selector` for search forms similar to the main Framework.
47+
* Added ability to use new attribute `click-selector` for search forms similar to the main Framework.
4848
* Added `data-show="js-expression"` to show or hide items. It works similar to Vue `v-show`.
4949
* Added ability to include global variables from window scope using `{variable}` syntax
5050
* `<json-data url="{rootApiUrl}/web-service">`
@@ -55,12 +55,12 @@ Overall the core Framework files and API are expected to remain stable however t
5555
* A similar update has been made for the main DataFormsJS Framework `app.buildUrl()`.
5656
* Added new attribute `[transform-data]` that allows for a JavaScript function to be specified and used to transform the downloaded data before it is passed to other elements.
5757
* Added new Web Component `<nav is="spa-links">`. Previously SPA Nav Links were handled from custom JavaScript code on the page. Now this functionality is much easier for a site to include as only HTML is needed.
58-
* `<url-router>` and `<url-hash-router>` are now combined into one component `<url-router>` and `<url-hash-router>` has been removed.
58+
* `<url-router>` and `<url-hash-router>` are now combined into one component `<url-router>` and `<url-hash-router>` has been removed.
5959
* `<url-router>` now has the ability to lazy load scripts (CSS and JavaScript) per route in a similar manner to the main framework using the new `window.lazyLoad` option and related HTML Attributes.
6060
* New Class `WebComponentService` which can be used to define "service" Web Components
6161
* The term "service" is used here because the intended use is that components created with this class do not render content but rather provide a service that updates other elements on the page based on HTML attributes element class names, etc. and that the service needs to run when content on the page changes from SPA routes or JSON Services.
6262
* This is a similar concept to the DataFormsJS Framework Plugins feature allowing for custom functionality to be defined easily and with little API code outside of standard DOM and JavaScript.
63-
* This will be used by all DataFormsJS Web Components that end with "service" in the component name.
63+
* This will be used by all DataFormsJS Web Components that end with "service" in the component name.
6464
* Added new Web Component `<data-view>` and related Framework JavaScript Control for viewing data from `<json-data>` or other web components.
6565
* Added new Web Component `<keydown-action-service>`. Based on Framework Plugin `js/plugins/keydownAction.js`
6666
* Added new Web Component `<html-import-service>`. Based on standard framework features for `[data-template-url]` and `[data-template-id]`.
@@ -72,10 +72,11 @@ Overall the core Framework files and API are expected to remain stable however t
7272
* `js\web-components\data-list.js`
7373
* Added HTML attribute `root-attr` which allows for any attribute to be set on the root element. Previously only the `class` could be set from `root-class`. The attribute `root-class` is still supported.
7474
* For `<url-router>` and DataFormsJS Framework when using HTMl5 History Mode (pushState, popstate) the Mac `Command` Key is now supported so users can open SPA links in a separate tab. Previously the only the `{Control}` key worked which is used on Windows for new tags and on Mac for a context menu (right-click menu).
75-
* `jsxLoader` Updates
75+
76+
* **DataFormsJS React Components and jsxLoader Updates**
7677
* Minor bug fix where empty data props were not parsed correctly in a specific condition if this previous prop was not empty; this was found when updating Web Components for full React Support.
7778
* Added Node Support
78-
* Added ability for jsxLoader to run from webpack (or in a browser) without any side effects if only the compiler is needed.
79+
* Added ability for jsxLoader to run from webpack (or in a browser) without any side effects if only the compiler is needed. Documentation will be updated after npm release on how this can be handled.
7980
* Previously `jsxLoader` only worked in a browser.
8081
* jsxLoader is now available as a node API and it works in the browser.
8182
* Added new compiler settings and options:
@@ -97,7 +98,22 @@ Overall the core Framework files and API are expected to remain stable however t
9798
~~~
9899
* Updated the CDN version of Babel Standalone used for old browsers from `7.10.4` to `7.12.6`
99100
* Added improved error message for compile errors where the number of opening tags did not match the number of closing tags. Previously some of these errors were only caught at runtime and not compile time.
100-
* Enhancements for DataFormsJS Framework files:
101+
* Updated `.eslintrc.js` for improved syntax validation when using VS Code with `*.jsx` example and test files
102+
* When calling `jsxLoader.usePreact` a global `React` variable pointing to `preact` will be assigned to `window` by default if not already set and Preact is loaded.
103+
* ES6 `*.min.js` Components can now be loaded in a web browser using `[type="module"]`. Previously only the ES5 min files could be loaded in a browser.
104+
~~~html
105+
<!-- Previous Release typical CDN usage -->
106+
<script src="dataformsjs/js/react/es5/DataFormsJS.min.js"></script>
107+
108+
<!--
109+
With the latest release of DataFormsJS modern browsers can use the smaller files with
110+
modern code syntax while legacy browsers still the es5 build.
111+
-->
112+
<script type="module" src="dataformsjs/js/react/es6/DataFormsJS.min.js"></script>
113+
<script nomodule src="dataformsjs/js/react/es5/DataFormsJS.min.js"></script>
114+
~~~
115+
116+
* **Enhancements for DataFormsJS Framework files and general updates:**
101117
* Added `app.updateTemplatesForIE(rootElement)`. IE 11 considers `<template>` elements as valid elements so it applies `querySelector()` and related methods to elements under `<templates>`'s so replace with them `<script type="text/x-template">`. This avoids issues of `<template>` elements that contain embedded content. Previously this was only handled once per page load but now is handled (for IE only) when views are rendered.
102118
* Added features in `js/plugins/dataBind.js` based on the Web Components version.
103119
* New file `js/extensions/format.js` which is used with the Web Components Polyfill
@@ -135,12 +151,35 @@ Overall the core Framework files and API are expected to remain stable however t
135151
* `@babel/standalone` updated from `7.7.7` to `7.12.6`, used to build es5 version of React Components
136152
* `uglify-js` updated from `3.7.3` to `3.11.6`
137153
* `eslint` updated from `7.3.1` to `7.13.0`
138-
* Updated `.eslintrc.js` for improved syntax validation when using VS Code with `*.jsx` example and test files
139154

140155
### Breaking Changes
141156

142157
For the standard Framework most breaking changes are minor and only expected to affect internal API's and examples. Several Framework "JavaScript Controls" were updated to match behavior of the Web Components in order to provide more features and so they can be used with the new Web Components Polyfill. If you developed a site or app with any of the breaking changes they are quick to update and if you need help please open an issue.
143158
159+
For React Components one component `LeafletMap` and one class `I18n` that would not be commonly used in most apps have been droped from the core ES5 build file `js/react/es5/DataFormsJS.js`. However new options exist so they (along with all other components and classes) have improved options for loading.
160+
~~~html
161+
<!-- Previous Release included [I18n, LeafletMap] and was ES5 sytnax only for CDN -->
162+
<script src="../js/react/es5/DataFormsJS.min.js"></script>
163+
164+
<!--
165+
In the places demo the above script was replaced with the following.
166+
-->
167+
<script type="module" src="../js/react/es6/DataFormsJS.min.js"></script>
168+
<script type="module" src="../js/react/es6/I18n.min.js"></script>
169+
<script type="module" src="../js/react/es6/LeafletMap.min.js"></script>
170+
171+
<script nomodule src="../js/react/es5/DataFormsJS.min.js"></script>
172+
<script nomodule src="../js/react/es5/I18n.min.js"></script>
173+
<script nomodule src="../js/react/es5/LeafletMap.min.js"></script>
174+
175+
<!--
176+
However for most sites this will be enough and it results in a smaller
177+
download size for the end user and modern code for most users.
178+
-->
179+
<script type="module" src="../js/react/es6/DataFormsJS.min.js"></script>
180+
<script nomodule src="../js/react/es5/DataFormsJS.min.js"></script>
181+
~~~
182+
144183
The Web Components have the most complex breaking changes related to API usage however due to the complexity of the earlier API it's unlikely to affect any site. If a site did use the earlier API it is generally quick to update as well.
145184

146185
* Removed `<url-hash-router>`

docs/to-do-list.txt

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -37,27 +37,21 @@ TODO List
3737
<script type="module" src="https://dataformsjs.s3-us-west-1.amazonaws.com/js/pre-release/5.0.0/web-components/url-router.min.js"></script>
3838
<script nomodule src="https://dataformsjs.s3-us-west-1.amazonaws.com/js/pre-release/5.0.0/web-components/polyfill.min.js"></script>
3939
- Items currently needed before this will be published to npm
40-
- More testing and updates related to jsxLoader Node Support
41-
https://github.com/dataformsjs/dataformsjs/issues/16
42-
More details will be published in the main JSX Loader doc:
43-
https://github.com/dataformsjs/dataformsjs/blob/master/docs/jsx-loader.md
44-
* Unit tests updated - now confirm in more browsers (UC Browser, Safari)
40+
- https://github.com/dataformsjs/dataformsjs/issues/16
4541
- Add a markdown import example to:
46-
dataformsjs/examples/vue3-dynamic-jsx.htm
47-
- React Components build items to test and decide on
48-
- Replace `import React from"react";` with empty string on [react/es6/*.min.js] files?
49-
- That way the could be used in the browser as <script type="module" src="..."> and use native import as well
50-
- Need to test and see if it works.
51-
- This could result in an smaller download size for most users if allows for code such as:
52-
<script type="module" src="react/es6/JsonData.min.js">
53-
<script nomodule src="react/es5/JsonData.js">
54-
- Should 'use strict' be included at the top of the files?
42+
dataformsjs/examples/vue3-dynamic-jsx.htm
5543
- For build try using [terser] instead of [uglify-es]
5644
- See related comments later in this file.
45+
- Finish testing new React Build and update all example files that use the React Components
46+
<script type="module" src="../js/react/es6/DataFormsJS.min.js"></script>
47+
<script nomodule src="../js/react/es5/DataFormsJS.min.js"></script>
48+
- See releated comments and examples in places demo, changelog, and unit tests
5749
- More testing of examples using different devices and browsers
5850
- Both examples and unit tests
5951
- Prepare all quick ref docs before publishing so changes are quick to publish once npm is updated
60-
- Handle and remove all `NOTE` comments in [polyfill.js] before npm publishing
52+
- Handle and remove all `NOTE` comments in [polyfill.js] before npm publishing
53+
- Confirm with local testing all pages in https://awesome-web-react.js.org/ using the new jsxLoader build.
54+
Don't publish updates though until 5.0.0 is published on jsdelivr
6155
- Before release update docs and example code that use <url-hash-router> to use <url-router> with the new CDN link
6256
Also update markdown docs to use [load-only-once] instead of [load-only-once="true"]
6357

@@ -80,6 +74,12 @@ TODO List
8074
will be used instead after release.
8175
- All 3 sites should be tested more with a variety of devices and browsers to make sure everything works properly
8276
- After @latest is updated on jsdelivr with 5.0.0 release verify all readme code snippets
77+
- Confirm updates work as expected with webpack and create-react-app after new release
78+
- Update jsxLoader docs on how the new build works and how files can be used:
79+
<script type="module" src="../js/react/es6/DataFormsJS.min.js"></script>
80+
<script nomodule src="../js/react/es5/DataFormsJS.min.js"></script>
81+
- Also update doc based on updates and findings from this issue:
82+
https://github.com/dataformsjs/dataformsjs/issues/16
8383
- After new release publish here:
8484
https://www.webcomponents.org/publish-collection
8585

examples/places-demo-react.htm

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,31 @@
3131
<script src="https://unpkg.com/react-router/umd/react-router.min.js"></script>
3232
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
3333

34-
<!-- DataFormsJS React Components -->
34+
<!--
35+
DataFormsJS React Components
36+
37+
The Core file includes commonly used React Components for data apps:
38+
[ErrorBoundary, InputFilter, JsonData, LazyLoad, SortableTable]
39+
and JavaScript Classes [Cache, Format].
40+
41+
Additional components and classes [LeafletMap, I18n] are loaded individually.
42+
43+
The [es6] scripts will be loaded for modern browsers because [type="module"] is used.
44+
and [es5] scripts will be loaded for legacy browsers because [nomodule] is used.
45+
-->
46+
<script type="module" src="../js/react/es6/DataFormsJS.min.js"></script>
47+
<script type="module" src="../js/react/es6/I18n.min.js"></script>
48+
<script type="module" src="../js/react/es6/LeafletMap.min.js"></script>
49+
50+
<script nomodule src="../js/react/es5/DataFormsJS.min.js"></script>
51+
<script nomodule src="../js/react/es5/I18n.min.js"></script>
52+
<script nomodule src="../js/react/es5/LeafletMap.min.js"></script>
53+
54+
<!--
55+
Unminimized Components would need to use [type="text/babel"] because
56+
import React from 'react';
57+
is used on most source files which is not compatable with web browsers.
58+
-->
3559
<!--
3660
<script type="text/babel" src="../js/react/es6/ErrorBoundary.js"></script>
3761
<script type="text/babel" src="../js/react/es6/LazyLoad.js"></script>
@@ -43,7 +67,6 @@
4367
<script type="text/babel" src="../js/react/es6/LeafletMap.js"></script>
4468
<script type="text/babel" src="../js/react/es6/Cache.js"></script>
4569
-->
46-
<script src="../js/react/es5/DataFormsJS.js"></script>
4770

4871
<!-- DataFormsJS JSX Loader -->
4972
<script src="../js/react/jsxLoader.js"></script>

0 commit comments

Comments
 (0)