Skip to content

Commit 6cea80b

Browse files
committed
🚀 Dev Updates for Next Release
1 parent 8e24866 commit 6cea80b

54 files changed

Lines changed: 683 additions & 433 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

CHANGELOG.md

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,14 +23,20 @@ Overall the core Framework files and API are expected to remain stable however t
2323
* Many updates have been made for overall improvement of DataFormsJS Web Components
2424
* The updates are significant and make using the Web Components much easier for complex apps and sites; and provide for wider browser support.
2525
* 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.
26-
* Added ability to polyfill Web Components for older browsers using the standard Framework that gets loaded from a single file.
27-
* Examples:
26+
* 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.
27+
* Web Component Examples:
2828
* https://www.dataformsjs.com/examples/hello-world/en/web.htm
2929
* https://www.dataformsjs.com/examples/hello-world/en/web-url-router.htm
3030
* https://www.dataformsjs.com/examples/places-demo-web.htm
3131
* https://www.dataformsjs.com/examples/log-table-web.htm#/10
3232
* https://www.dataformsjs.com/examples/countries-no-spa-web.htm
3333
* https://www.dataformsjs.com/examples/image-gallery-web.htm
34+
* `http://127.0.0.1:8080/image-classification-web`
35+
* `http://127.0.0.1:8080/web-components-with-react`
36+
* `http://127.0.0.1:8080/web-components-template`
37+
* `http://127.0.0.1:8080/web-components-data-list`
38+
* `http://127.0.0.1:8080/web-components-format`
39+
* `http://127.0.0.1:8080/hacker-news-web`
3440
* Added new easier to use API for `<url-router>` and `<json-data>` Web Components
3541
* Added ability to define custom `<template>` for table `<tr>` in `<data-table>`
3642
* Improvements for `<json-data>`
@@ -46,22 +52,23 @@ Overall the core Framework files and API are expected to remain stable however t
4652
* A similar update has been made for the main DataFormsJS Framework `app.buildUrl()`.
4753
* 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.
4854
* 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.
49-
* `<url-router>` and `<url-hash-router>` are now combined into one component `<url-router>` and `<url-hash-router>` has been removed
55+
* `<url-router>` and `<url-hash-router>` are now combined into one component `<url-router>` and `<url-hash-router>` has been removed.
5056
* `<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.
5157
* New Class `WebComponentService` which can be used to define "service" Web Components
5258
* 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.
5359
* 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.
54-
* This will be used by all DataFormsJS Web Components that end with "service" in the component name.
60+
* This will be used by all DataFormsJS Web Components that end with "service" in the component name.
5561
* Added new Web Component `<data-view>` and related Framework JavaScript Control for viewing data from `<json-data>` or other web components.
5662
* Added new Web Component `<keydown-action-service>`. Based on Framework Plugin `js/plugins/keydownAction.js`
5763
* Added new Web Component `<html-import-service>`. Based on standard framework features for `[data-template-url]` and `[data-template-id]`.
5864
* Added new Web Component `<show-errors-service>`. Based on standard framework features for `<html data-show-errors>`.
5965
* Added new Web Component `<prism-service>`. Based on Framework Plugin `js/plugins/prism.js`
6066
* Added ability to style errors using CSS from `utils.js` when calling `showError(element, message)` or `showErrorAlert(message)`.
6167
* New functions in `utils.js`: `loadCss(id, css)`, `isAttachedToDom(element)`
62-
* Added `[X]` Close Button for `js/web-components/old-browser-warning.js` so that users can close the alert. With the new close button using `js/web-components/safari-nomodule.js` is no longer needed, however the file is stil being kept for reference and sites that want to customize and use it.
68+
* Added `[X]` Close Button for `js/web-components/old-browser-warning.js` so that users can close the alert. With the new close button using `js/web-components/safari-nomodule.js` is no longer needed, however the file is still being kept for reference and sites that want to customize and use it.
6369
* `js\web-components\data-list.js`
6470
* 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.
71+
* 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).
6572
* Added Node Support for `jsxLoader`
6673
* Previously `jsxLoader` only worked in a browser.
6774
* Now several API's are available for node `{ jsxLoader, transform(jsx, options) }`
@@ -94,6 +101,7 @@ Overall the core Framework files and API are expected to remain stable however t
94101
* `.image-gallery-overlay div.no-title { justify-content: center; }`
95102
* Bug fix for `js/pages/entryForm.js` where the `saveUrl` did not allow for variables from the model if the URL of the page did not include any URL parameters.
96103
* All Leaflet code has been updated to download map images using `https` instead of `http`; originally when DataFormsJS was published `https` was not available as a free option for leaflet.
104+
* Additionally error messages have been improved for Leaflet.
97105
* Files updates:
98106
* `<leaflet-map>` Web Component
99107
* `LeafletMap` React Component and main `DataFormsJS.js` React file
@@ -108,7 +116,9 @@ The Web Components have the most complex breaking changes related to API usage h
108116
* Removed `<url-hash-router>`
109117
* This can now be replaced with `<url-router>`
110118
* `<url-router>` previously only worked with HTML5 History Routes `pushState/popstate`. To use history routes now use `<url-router mode="history">`
111-
* `js/web-components/utils.js` - Removed `showOldBrowserWarning()`. The feature has been replaced with the new `js/web-components/polyfill.js` and a function `usingWebComponentsPolyfill()`
119+
* `js/web-components/utils.js`
120+
* Removed `showOldBrowserWarning()`. The feature has been replaced with the new `js/web-components/polyfill.js` and also the file `js/web-components/old-browser-warning.js` now includes a [X] close button so it it runs on Safari 10.1 or an old Chromium browser that doesn't support [nomodule] the user can simply close the alert.
121+
* Removed `componentsAreSetup()`. This function is no longer needed and the logic related to it's usage prevented Web Components from working with React and was not fully valid based on Custom Element specs because elements were writing HTML attributes on their `constructor()`.
112122
* Web Components API for `<json-data>`, `<url-router>` have been changed significantly. Previously the API required `async/await` from module JavaScript and was complex to use. It has now been simplified so that events bubble up to the document can be handled easily from the root document event listener and so standard JavaScript functions can be called from HTML attributes.
113123
* **Before Update:** https://github.com/dataformsjs/dataformsjs/blob/c23bf5e4cd9e826c61313877ae0c2d2da6d6f889/examples/places-demo-web.htm
114124
* **After Update:** https://github.com/dataformsjs/dataformsjs/blob/master/examples/places-demo-web.htm

docs/to-do-list.txt

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,11 @@ TODO List
3030
- Until updates are finished many of the web component examples will be pointing
3131
to local build files rather than CDN.
3232
- The next release will likely be published sometime in November of 2020
33+
- It appears jsxLoader currently cannot handle empty attributes at the end of an element.
34+
- This was found when testing Web Components with React, example:
35+
<json-data url="https://www.dataformsjs.com/data/geonames/countries" load-only-once>
36+
- Solved temporarily by using:
37+
<json-data url="https://www.dataformsjs.com/data/geonames/countries" load-only-once="true">
3338
- More testing and updates related to jsxLoader Node Support
3439
https://github.com/dataformsjs/dataformsjs/issues/16
3540
More details will be published in the main JSX Loader doc:
@@ -45,6 +50,8 @@ TODO List
4550
<script type="module" src="https://dataformsjs.s3-us-west-1.amazonaws.com/js/pre-release/5.0.0/web-components/sortable-table.min.js"></script>
4651
<script nomodule src="https://dataformsjs.s3-us-west-1.amazonaws.com/js/pre-release/5.0.0/web-components/polyfill.min.js"></script>
4752
- Items currently needed before this will be published to npm
53+
- Create a file for Vue that is similar to the React test:
54+
web-components-with-react.htm
4855
- Playground Site
4956
- Calculator Page needs to be created for Web Component Version (if time permits a React version as well)
5057
- For [polyfill.js] should a new attribute be added that shows an error for specific
@@ -53,10 +60,6 @@ TODO List
5360
would add one (assuming that it's running from a legacy browser). This would allow for a page
5461
to have some content work from old browsers and provide a simple warning for specific content
5562
that does not have a polyfill.
56-
- New demo page to test all features of the new [utils-format.js] file
57-
- On the templates (and probably all examples) add the HTML [crossorigin] attribute
58-
so good errors can show in `window.onerror` from DataFormsJS. Need to test and confirm.
59-
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
6063
- Test mixing Framework and Web Components, likely provide an error alert from Web Components if that
6164
happens. Currently the intention is to use one or the other.
6265
- Before release look for all files with: <script src="../js/ and point them to the AWS S3 site for testing
@@ -71,7 +74,6 @@ TODO List
7174
dataformsjs\examples\hacker-news-react.htm
7275
dataformsjs\examples\hacker-news-web.htm
7376
- This would use a custom page object and JavaScript rather than nested JSON controls
74-
- Test using some Web Components with React and Vue to see how they work with other frameworks
7577
- Test using local build with webpack
7678
https://webpack.js.org/
7779
- If needed after release create a demo repository showing how to use DataFormsJS with webpack
@@ -185,6 +187,22 @@ TODO List
185187
- [one-page-and-spa-hbs.htm] was started based on the [template-files-hbs.htm] page
186188
so some content on the SPA pages is not needed
187189

190+
*) Add option for lazy load scripts from [app.loadScript], [app.loadScripts], and Web Component
191+
`window.lazyLoad = {}` to include support for additional attributes. For example without
192+
the [crossorigin] attribute on <script> elements detailed errors are not shown. However
193+
[crossorigin] can't be included by default because it actually requires the server to
194+
support CORS. To see an example use the playground and add this to the bottom of the
195+
main page. Then run it with an without 'crossorigin'.
196+
document.addEventListener('DOMContentLoaded', function() {
197+
var url = 'https://dataformsjs.s3-us-west-1.amazonaws.com/tmp/calcPage.js';
198+
var script = document.createElement('script');
199+
script.setAttribute('crossorigin', 'anonymous');
200+
script.src = url;
201+
document.head.appendChild(script);
202+
});
203+
Mozilla Docs:
204+
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
205+
188206
*) Version for deno of [dataformsjs/server/app.js]
189207
Allow server to start with either deno or node
190208

@@ -194,6 +212,7 @@ TODO List
194212
- Possible new URL:
195213
https://www.dataformsjs.com/en/unit-tests
196214
- The current URL would then redirect
215+
- If adding documentation to the main site these could simply be linked from that page
197216
- New page would need to look nice and provide a brief overview
198217
- Currently many Vue unit tests fail if using IE so this might have to be fixed first
199218
(either that or simply add notes to the page regarding IE and Vue)

0 commit comments

Comments
 (0)