Skip to content

Commit 670a889

Browse files
ConradSollittConradSollitt
committed
🚀 Dev Updates for Next Release
1 parent bc3d5cb commit 670a889

Some content is hidden

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

51 files changed

+259
-250
lines changed

‎CHANGELOG.md‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,15 @@ Overall the core Framework files and API are expected to remain stable however t
5555
* New file `js/extensions/format.js` which is used with the Web Components Polyfill
5656
* Updated `js/plugins/filter.js` so that it shows 0 count for empty tables. Previously it expected the table to have at least one `<tbody>` element. A similar update was made for `js/web-components/input-filter.js`
5757
* Previously if using `<template>` with `jsonData` page types all `.is-loading, .has-error, .is-loaded` elements could quickly flash on screen during page changes. This has been fixed.
58-
* Added `app.plugins.i18n.getUserDefaultLang()` to `js/plugins/i18n.js`
58+
* Routes and JavaScript controls will have empty data HTML attributes mapped to `true` by default instead of an empty string. Previously `data-load-only-once="true"` was used on many pages but now only `data-load-only-once` is required.
59+
* `js/plugins/i18n.js`
60+
* Added `app.plugins.i18n.getUserDefaultLang()`
61+
* The following global API was added so that it can be used easily with templating or by app custom logic. This was based on the Web Component verison which uses simple JavaScript templating and basic functions.
62+
~~~js
63+
window.i18n_Locale = 'en|fr|es|zh-CN'; // Selected language, updated on each page change
64+
window.i18nText(key) // Returns I18n content for the current page
65+
~~~
66+
* data-load-only-once="true"
5967
* Enhancements for "JavaScript Controls" in the standard Framework. The Framework JavaScript Controls are a similar concept to Web Components but work with all Browsers.
6068
* Added ability to easily reload by calling `app.activeJsControls(control)`. Updating already loaded controls is not common but can be used in very specific scenarios. For example the new Web Components Polyfill uses it.
6169
* Update API to include `model` as a parameter in `control.onLoad(element, model)`

‎docs/to-do-list.txt‎

Lines changed: 6 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -51,15 +51,7 @@ TODO List
5151
dataformsjs\examples\html\places-info-web.htm
5252
http://127.0.0.1:8080/places-demo-web#/en/info
5353
http://127.0.0.1:8080/image-classification-web#/en/info
54-
- <json-data>
55-
Instead of:
56-
load-only-once="true"
57-
Only require the attribute itself:
58-
load-only-once
5954
- Must verify new [defineExtendsPolyfill] with the versions of Safari or other Legacy modern browsers
60-
- Log Demo Pages
61-
When using Polyfill the error currently does not show:
62-
http://127.0.0.1:8080/log-table-web#/error
6355
- <data-table>
6456
- New Attributes [template-returns-html] and [list-item-name] used in <data-list> need to be included
6557
- <data-list> should also support both <template> and <script type="text/x-template">
@@ -118,12 +110,6 @@ TODO List
118110
still being used by an app.
119111
- [old-browser-warning.min.js] will be kept as commented out in the templates with comments that
120112
the polyfill works for older browsers.
121-
- Breaking change on [js/plugins/filter.js] to consider keeping but add another option,
122-
for example a new attribute that allows the new behavior.
123-
At line #144 this:
124-
filterError('Column filter requires a table to be correctly defined');
125-
Was replaced with some comments and `return settings;`
126-
Do more testing to make sure this change makes sense.
127113
- On the templates (and probably all examples) add the HTML [crossorigin] attribute
128114
so good errors can show in `window.onerror` from DataFormsJS. Need to test and confirm.
129115
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
@@ -162,6 +148,7 @@ TODO List
162148
- If needed after release create a demo repository showing how to use DataFormsJS with webpack
163149
- Handle and remove all `NOTE` comments in [polyfill.js] before npm publishing
164150
- Before release update docs and example code that use <url-hash-router> to use <url-router> with the new CDN link
151+
Also update markdown docs to use [load-only-once] instead of [load-only-once="true"]
165152
- After new release publish here:
166153
https://www.webcomponents.org/publish-collection
167154

@@ -295,20 +282,9 @@ TODO List
295282

296283

297284
*) Web Components Updates
298-
- These are wish list items that may never be developed. The reason is that as
299-
features are added the Web Components go from simple HTML elements to more of a full
300-
featured Framework. After development and real-world usage it seems to make sense
301-
to keep advanced features in the framework while keeping Web Components small and
302-
simple to use. If too many features are added the size of the Web Components can
303-
increase a lot and grouping related features (security, shared state, etc) makes
304-
more sense for a Framework or React code.
305-
- Long Term goal - Add Unit Testing
285+
- Add Unit Testing
306286
- Currently only the main Framework and the React [jsxLoader.js] have Unit Testing
307287
- <json-data>
308-
- Add support on <is-loading> for new [template-selector] attribute
309-
It would work similar to the <data-List> control to render the model with JavaScript template literal string:
310-
const tmpl = new Function('data', 'render', 'with(data){return render`' + template.innerHTML + '`}');
311-
If using this [data-bind] would likely not need to be called.
312288
- Add support for custom Request Headers.
313289
- For how the standard Framework handles this see code related to [app.settings.requestHeaders].
314290
- React <JsonData> uses props
@@ -317,39 +293,15 @@ TODO List
317293
window.requestHeaders = {}
318294
window.requestHeadersByHostName = {}
319295
And then the Framework [app.getRequestHeaders] and related code can be used as a starting point
320-
- Create an [I18N] API for Web Components and initially use with:
321-
http://127.0.0.1:8080/places-demo-web
322-
- API is not yet started on so it has be decided first
323-
- Possibly several development versions will be created and tested
324-
with the best one selected
325-
- <i18n-service> outside of the hash router or <i18n-service url-params> under the hash router.
326-
- How to do something like this with <data-table>?
327-
<a href="#/{{../i18n_Locale}}/regions/{{iso}}">
328-
Possibly:
329-
col-link-template="#/:window.i18n_Locale/regions/:iso"
330-
- Another option if using <i18n-service> outside of the hash router could be to define
331-
[i18n-key="value"] attributes on elements that <i18n-service> would update.
332-
- The <i18n-service> then might might have to runs after 'app:routeChanged' or 'app:contentReady' events
333-
- Likely try several versions to see what makes the most sense
334-
- Since [polyfill.js] has been created this would need compatability with the main Framework Plugin.
335-
- Possible first version to try:
336-
- Try <i18n-service> outside of the main view element. Default file = root-file="_"
337-
<i18n-service default-lang="en" locales="en,ja,es,pt-BR,ar,fr,zh-CN" root-file="countries">
338-
<div id="view" dir="auto"></div>
339-
- Routes that have specific i18n files can have them in the data attribute
340-
then <i18n-service> can handle route changes and set the HTML content
341-
<url-route path="/" data-i18n-file="home-page">
342-
- This version would likely be easy to make compatability with the main Framework
343-
- See the new [dataformsjs\js\web-components\spa-links.js] because it handles router
344-
events so if <i18n-service> it may include similar event handling.
345-
- See also new file [dataformsjs\js\web-components\keydown-action-service.js] which provides
346-
a "service" to other elements on the page. <i18n-service> would use a similar "service" concept.
347-
* This will likely use the new [WebComponentService] class just like <keydown-action-service>
348296
- Create a new <form is="entry-form"> Component
349297
- A Framework JavaScript control could be created as the Polyfill. Ideally the new control
350298
would use functions from the main entryForm page object so it doesn't have to be duplicated.
351299
- Existing Framework Demo:
352300
https://www.dataformsjs.com/examples/entry-form-demo-vue.htm
301+
- This may or may not ever be created. It's not a priorty until needed for an actual production site.
302+
Web Components (as of release 5.0.0) contain a new easy to use JavaScript API that allows for
303+
a site to be extended using only basic JavaScript functions so it's easy to build custom
304+
entry form apps.
353305

354306
*) Many Docs need to be created along with API page(s)
355307
- API needs a quick search/filter feature to look up any attribute/class/function/etc

‎examples/binary-classification-hbs.htm‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
data-url="https://www.dataformsjs.com/data/ai-ml/sample-data/pima-indians-diabetes"
3737
data-use-save-api="false"
3838
data-lazy-load="binaryPredictionPage"
39-
data-load-only-once="true"
39+
data-load-only-once
4040
data-src="html/binary-home-hbs.htm">
4141
</script>
4242

@@ -53,7 +53,7 @@
5353
data-route="/:lang/training-data"
5454
data-page="jsonData"
5555
data-url="https://www.dataformsjs.com/data/ai-ml/sample-training-data/pima-indians-diabetes"
56-
data-load-only-once="true"
56+
data-load-only-once
5757
data-lazy-load="jsonData, clickToHighlight"
5858
src="html/binary-training-hbs.htm">
5959
</script>

‎examples/binary-classification-vue.htm‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
data-page="binaryPredictionPage"
3939
data-url="https://www.dataformsjs.com/data/ai-ml/sample-data/pima-indians-diabetes"
4040
data-save-url="https://www.dataformsjs.com/data/ai-ml/predict/pima-indians-diabetes"
41-
data-load-only-once="true"
41+
data-load-only-once
4242
data-use-save-api="false"
4343
data-lazy-load="binaryPredictionPage"
4444
data-src="html/binary-home-vue.htm"
@@ -69,7 +69,7 @@
6969
data-route="/:lang/training-data"
7070
data-page="jsonData"
7171
data-url="https://www.dataformsjs.com/data/ai-ml/sample-training-data/pima-indians-diabetes"
72-
data-load-only-once="true"
72+
data-load-only-once
7373
data-lazy-load="jsonData, clickToHighlight"
7474
src="html/binary-training-vue.htm"
7575
data-columns

‎examples/countries-no-spa-web.htm‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
<div id="view">
2020
<h1>Countries</h1>
2121

22-
<json-data url="https://www.dataformsjs.com/data/geonames/countries" load-only-once="true">
22+
<json-data url="https://www.dataformsjs.com/data/geonames/countries" load-only-once>
2323
<is-loading>
2424
<span class="loading">Loading...</span>
2525
</is-loading>

‎examples/css/image-classification.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ ul.results li {
1919
body { margin:40px; }
2020
nav, h2 { padding:20px; }
2121
ul.info { margin-left:20px; }
22+
input[type='text'] { margin-bottom: 20px; }
2223
}
2324

2425
/* Page Style */

‎examples/html/cities-web.htm‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,9 @@ <h1><span data-i18n="Largest Cities in"></span> <span url-param="country"></span
55
<a href="#/en/regions/[country]" data-i18n="Regions" url-attr-param="href" data-i18n-href></a>
66
</nav>
77

8-
<json-data
9-
url="{rootApiUrl}/cities/:country/:region"
10-
url-params
11-
load-only-once="true">
12-
<is-loading>
13-
<h3 class="loading" data-i18n="Loading..."></h3>
14-
</is-loading>
15-
<has-error>
16-
<h3 class="error"><span data-i18n="Error"></span> - <span data-bind="errorMessage"></span></h3>
17-
</has-error>
8+
<json-data url="{rootApiUrl}/cities/:country/:region" url-params load-only-once>
9+
<is-loading template-selector="#loading-screen"></is-loading>
10+
<has-error template-selector="#error-screen"></has-error>
1811
<is-loaded class="flex-col">
1912
<input
2013
is="input-filter"

‎examples/html/image-categories-web.htm‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
<json-data
22
url="https://www.dataformsjs.com/data/ai-ml/categories/resnet50"
3-
load-only-once="true">
4-
<is-loading>
5-
<h2 data-i18n="Loading..."></h2>
6-
</is-loading>
7-
<has-error>
8-
<h2 class="download-error"><span data-i18n="Error"></span> - <span data-bind="errorMessage"></span></h2>
9-
</has-error>
3+
load-only-once>
4+
<is-loading template-selector="#loading-screen"></is-loading>
5+
<has-error template-selector="#error-screen"></has-error>
106
<is-loaded>
117
<section>
128
<div>

‎examples/html/image-home-web.htm‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
<json-data
22
url="https://www.dataformsjs.com/data/ai-ml/sample-data/resnet50"
3-
load-only-once="true"
3+
load-only-once
44
onready="setupFileUploads()">
5-
<is-loading>
6-
<h2 data-i18n="Loading..."></h2>
7-
</is-loading>
8-
<has-error>
9-
<h2 class="download-error"><span data-i18n="Error"></span> - <span data-bind="errorMessage"></span></h2>
10-
</has-error>
5+
<is-loading template-selector="#loading-screen"></is-loading>
6+
<has-error template-selector="#error-screen"></has-error>
117
<is-loaded>
128
<section>
139
<div class="content">
@@ -43,12 +39,13 @@ <h1 data-i18n="Image Prediction Demo"></h1>
4339
only text strings using a JavaScript Tagged Template Literal function or a Polyfill.
4440
4541
This template uses ES5 so it works with all Browsers and can be handled when using [polyfill.js].
42+
For ES5 support nested `${js}` expresssions are not supported.
4643
-->
4744
<template id="image">
4845
<li>
4946
<img src="${escapeHtml(image.src)}" />
50-
${image.isUploading === true ? '<div class="loading">Uploading</div>' : ''}
51-
${image.hasError === true ? '<div class="error">Error</div>' : ''}
47+
${image.isUploading === true ? '<div class="loading">' + i18nText('Uploading...') + '</div>' : ''}
48+
${image.hasError === true ? '<div class="error">' + i18nText('Error') + '</div>' : ''}
5249
${image.predictions.map(function(prediction) {
5350
return '<div class="' + resultClass(prediction.probability) + '">' + prediction.label + ' = <span>' + format.percent(prediction.probability, 5) + '</span></div>'
5451
}).join('')}
@@ -67,8 +64,8 @@ <h1 data-i18n="Image Prediction Demo"></h1>
6764
<template id="image-modern-js">
6865
<li>
6966
<img src="${escapeHtml(image.src)}" />
70-
${image.isUploading === true ? '<div class="loading">Uploading</div>' : ''}
71-
${image.hasError === true ? render`<div class="error">Error</div>` : ''}
67+
${image.isUploading === true ? render`<div class="loading">${i18nText('Uploading...')}</div>` : ''}
68+
${image.hasError === true ? render`<div class="error">${i18nText('Error')}</div>` : ''}
7269
${image.predictions.map(prediction => {
7370
return render`<div class="${resultClass(prediction.probability)}">
7471
${prediction.label} = <span>${format.percent(prediction.probability, 5)}</span>

‎examples/html/place-web.htm‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
1-
<json-data
2-
url="{rootApiUrl}/place/:id"
3-
url-params
4-
load-only-once="true">
5-
<is-loading>
6-
<h3 class="loading" data-i18n="Loading..."></h3>
7-
</is-loading>
8-
<has-error>
9-
<h3 class="error"><span data-i18n="Error"></span> - <span data-bind="errorMessage"></span></h3>
10-
</has-error>
1+
<json-data url="{rootApiUrl}/place/:id" url-params load-only-once>
2+
<is-loading template-selector="#loading-screen"></is-loading>
3+
<has-error template-selector="#error-screen"></has-error>
114
<is-loaded class="flex-col">
125
<h1 data-bind="place.name"></h1>
136

0 commit comments

Comments
 (0)