Skip to content

Commit 46b83f8

Browse files
ConradSollittConradSollitt
committed
🚀 Dev Updates for Next Release
1 parent bae483b commit 46b83f8

File tree

16 files changed

+67
-60
lines changed

16 files changed

+67
-60
lines changed

‎docs/jsx-loader.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,9 @@ The `jsxLoader.js` script is very small to download (5.4 kB - min and gzip) and
116116
* https://www.dataformsjs.com/examples/hello-world/en/preact.htm
117117
* https://www.dataformsjs.com/examples/countries-no-spa-preact.htm
118118

119+
### Vue 3 <img src="https://www.dataformsjs.com/img/logos/vue.svg" width="32" height="32">
120+
* https://www.dataformsjs.com/examples/hello-world/en/vue3-with-jsx.htm
121+
119122
### Rax <img src="https://www.dataformsjs.com/img/logos/rax.png" width="32" height="32">
120123
* https://www.dataformsjs.com/examples/hello-world/en/rax.htm
121124

‎docs/jsx-loader.pt-BR.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,9 @@ O script `jsxLoader.js` é muito pequeno para baixar (5.4 kB - min e em gzip) e
116116
* https://www.dataformsjs.com/examples/hello-world/pt-BR/preact.htm
117117
* https://www.dataformsjs.com/examples/countries-no-spa-preact.htm
118118

119+
### Vue 3 <img src="https://www.dataformsjs.com/img/logos/vue.svg" width="32" height="32">
120+
* https://www.dataformsjs.com/examples/hello-world/en/vue3-with-jsx.htm
121+
119122
### Rax <img src="https://www.dataformsjs.com/img/logos/rax.png" width="32" height="32">
120123
* https://www.dataformsjs.com/examples/hello-world/pt-BR/rax.htm
121124

‎docs/jsx-loader.zh-CN.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,9 @@ CLI开发工具,如`webpack`, `babel`,`create-react-app`是非常好的工具，
116116
* https://www.dataformsjs.com/examples/hello-world/zh-CN/preact.htm
117117
* https://www.dataformsjs.com/examples/countries-no-spa-preact.htm
118118

119+
### Vue 3 <img src="https://www.dataformsjs.com/img/logos/vue.svg" width="32" height="32">
120+
* https://www.dataformsjs.com/examples/hello-world/en/vue3-with-jsx.htm
121+
119122
### Rax <img src="https://www.dataformsjs.com/img/logos/rax.png" width="32" height="32">
120123
* https://www.dataformsjs.com/examples/hello-world/zh-CN/rax.htm
121124

‎docs/to-do-list.txt‎

Lines changed: 23 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -76,43 +76,7 @@ TODO List
7676
would add one (assuming that it's running from a legacy browser). This would allow for a page
7777
to have some content work from old browsers and provide a simple warning for specific content
7878
that does not have a polyfill.
79-
- <data-table>
80-
- New Attributes [template-returns-html] and [list-item-name] used in <data-list> need to be included
81-
- <data-list> should also support both <template> and <script type="text/x-template">
82-
- This is for better IE 11 support, with the current demos it's not needed but one should be created
83-
- Search for `const tmplHtml = template.innerHTML`
84-
- For now the `replace` calls are only used when using [template-returns-html]
85-
tmplHtml.replace(/&amp;/g, '&').replace(/&gt;/g, '>').replace(/&lt;/g, '<');
86-
- Additionally other characters are likely needed and more research to see how different browsers handle this.
87-
- <data-table> needs the `replace` calls
88-
- Likely create a new function in [utils.js] `compileJsTemplate()` that will be shared and allow
89-
for caching of the template functions similar to the new framework file: [dataformsjs\js\extensions\jsTemplate.js]
90-
- Also make any related updates needed in the new <data-view>
91-
- This issue is avoided when using <script type="text/x-template"> so add comments in docs on it (or code comments at least)
92-
- Review all comments in [js/web-components/polyfill.js] and handle all issues.
93-
The file is mostly complete and properly working but still in active development.
9479
- New demo page to test all features of the new [utils-format.js] file
95-
- At a minimum the new script Polyfill scripts needs to handle IE 11, older Safari (example iOS 9), UC Browser.
96-
iOS 9 support because older devices such as iPad 2 can't upgrade past it and iPhone 6
97-
phones that are not upgraded still use it.
98-
- Add [template-selector] to <data-table> similar to <data-list> and vice-versa add ability
99-
to specify <template> inside of <data-list>
100-
- Related to current updates [dataformsjs\examples\html\cities-web.htm] now shows
101-
both Meters and Feet using `formatElevation(elevation)`. The other demos currently
102-
display meters only but should also be updated to display both.
103-
- Provide examples of how [polyfill.js].[getRootUrl()] works for documentation.
104-
- Or add a markdown doc for it
105-
- Here is an example of an defining a custom URL from the app:
106-
<script>
107-
window.dataformsjsUrl = 'http://127.0.0.1:8080/js/';
108-
window.dataformsjsMinFiles = false; // Optional (defaults to `true`)
109-
</script>
110-
<script nomodule src="../js/web-components/polyfill.js"></script>
111-
- By default the path will be determined from where [/web-components/polyfill.js] is defined:
112-
<script src="../js/web-components/polyfill.min.js"></script>
113-
[*.min.js] Framework files will be downloaded
114-
<script src="../js/web-components/polyfill.js"></script>
115-
Full [*.js] Framework files will be downloaded
11680
- On the templates (and probably all examples) add the HTML [crossorigin] attribute
11781
so good errors can show in `window.onerror` from DataFormsJS. Need to test and confirm.
11882
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
@@ -154,13 +118,33 @@ TODO List
154118
- Test using local build with webpack
155119
https://webpack.js.org/
156120
- If needed after release create a demo repository showing how to use DataFormsJS with webpack
157-
- Handle and remove all `NOTE` comments in [polyfill.js] before npm publishing
158121
- For the `npm start` on the main repository update the default page to use <data-list>
159122
with a simple filter to list the examples.
123+
- Handle and remove all `NOTE` comments in [polyfill.js] before npm publishing
124+
- At a minimum the new script Polyfill scripts needs to handle IE 11, older Safari (example iOS 9), UC Browser.
125+
iOS 9 support because older devices such as iPad 2 can't upgrade past it and iPhone 6
126+
phones that are not upgraded still use it. Currently all of these browsers are confirmed to work.
160127
- Before release update docs and example code that use <url-hash-router> to use <url-router> with the new CDN link
161128
Also update markdown docs to use [load-only-once] instead of [load-only-once="true"]
162-
- After new release publish here:
163-
https://www.webcomponents.org/publish-collection
129+
130+
**) After next release create a markdown overview doc using Web Components
131+
- After new release publish here:
132+
https://www.webcomponents.org/publish-collection
133+
- Will cover overview and details - similar to the JSX Loader doc:
134+
https://github.com/dataformsjs/dataformsjs/blob/master/docs/jsx-loader.md
135+
- Provide examples of how [polyfill.js].[getRootUrl()] works for documentation.
136+
- Or add a markdown doc for it
137+
- Here is an example of an defining a custom URL from the app:
138+
<script>
139+
window.dataformsjsUrl = 'http://127.0.0.1:8080/js/';
140+
window.dataformsjsMinFiles = false; // Optional (defaults to `true`)
141+
</script>
142+
<script nomodule src="../js/web-components/polyfill.js"></script>
143+
- By default the path will be determined from where [/web-components/polyfill.js] is defined:
144+
<script src="../js/web-components/polyfill.min.js"></script>
145+
[*.min.js] Framework files will be downloaded
146+
<script src="../js/web-components/polyfill.js"></script>
147+
Full [*.js] Framework files will be downloaded
164148

165149
**) Playground Site
166150
- Need to add support for JSON file/resource type

‎examples/html/regions-web.htm‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ <h1><span>Regions for Country Code</span> <span url-param="country"></span></h1>
88
The variable ":country" is bound from <url-route path="/:lang/regions/:country">
99
Because <json-data> includes [url-params] all parameters from the path
1010
will be passed to <json-data> triggering the JSON service to run.
11-
11+
1212
[load-only-once] allows for the JSON data to be cached in memory.
1313
-->
1414
<json-data url="{rootApiUrl}/regions/:country" url-params load-only-once>
@@ -31,25 +31,30 @@ <h1><span>Regions for Country Code</span> <span url-param="country"></span></h1>
3131
3232
Another commented version below uses [col-link-template] and [columns]
3333
to specify which data to show and the link.
34+
35+
[row-item-name] is option and can be used to name the row object
36+
for the template. When not included all fields are available at the
37+
root template scope (used in other demos for this app).
3438
-->
3539
<data-table
3640
data-bind="regions"
3741
highlight-class="highlight"
3842
labels="Code, Name, Population, Timezone, Date Last Modified"
3943
data-i18n-attr="labels"
44+
row-item-name="country"
4045
table-attr="is=sortable-table,
4146
data-sort-class-odd=row-odd,
4247
data-sort-class-even=row-even">
4348
<script type="text/x-template">
4449
<tr>
45-
<td><a href="#/${i18n_Locale}/cities/${country_code}/${admin1_code}">${admin1_code}</a></td>
50+
<td><a href="#/${i18n_Locale}/cities/${country.country_code}/${country.admin1_code}">${country.admin1_code}</a></td>
4651
<td>
47-
<i class="${country_code.toLowerCase()} flag"></i>
52+
<i class="${country.country_code.toLowerCase()} flag"></i>
4853
${name}
4954
</td>
50-
<td class="align-right" data-value="${population}">${format.number(population)}</td>
51-
<td>${timezone}</td>
52-
<td class="align-right">${format.date(modification_date)}</td>
55+
<td class="align-right" data-value="${country.population}">${format.number(country.population)}</td>
56+
<td>${country.timezone}</td>
57+
<td class="align-right">${format.date(country.modification_date)}</td>
5358
</tr>
5459
</script>
5560
</data-table>

‎js/controls/data-table.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
colClass: null,
4747
colLinkTemplate: null,
4848
colLinkFields: null,
49+
rowItemName: null,
4950
},
5051

5152
/**
@@ -219,7 +220,7 @@
219220
throw Error('Error - When using <data-table> with a template the script [js/extensions/jsTemplate.js] is required.');
220221
}
221222
// Render each item using the template
222-
var render = app.jsTemplate.compile(null, false, template.innerHTML);
223+
var render = app.jsTemplate.compile(this.rowItemName, false, template.innerHTML);
223224
for (var index = 0, count = list.length; index < count; index++) {
224225
item = list[index];
225226
try {

‎js/controls/data-table.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/extensions/jsTemplate.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
* It converts basic templates but will not handle advanced templates.
77
*
88
* This is not intended as a full featured templating engine rather
9-
* it's created for a specific purpose to be used with with DataFormsJS
10-
* Framework JS Controls <data-list> and <data-table>.
9+
* it's created for a specific purpose to be used with DataFormsJS
10+
* Framework JS Controls <data-list>, <data-table>, and <data-view>.
1111
*
1212
* Example Usage:
1313
* var returnsHtml = false;

‎js/web-components/data-list.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -153,9 +153,9 @@ class DataList extends HTMLElement {
153153

154154
// By default content to render is escaped using the `render` Tagged Template Literal function.
155155
// If not then then template is likely mixing more advanced JavaScript with HTML so replace
156-
// certain HTML escape characters.
156+
// certain HTML escape characters if using a <template> instead of a <script>.
157157
const renderFn = (this.getAttribute('template-returns-html') === null ? 'render' : '');
158-
if (!renderFn) {
158+
if (!renderFn && template.nodeName === 'TEMPLATE') {
159159
tmplHtml = tmplHtml.replace(/&amp;/g, '&').replace(/&gt;/g, '>').replace(/&lt;/g, '<');
160160
}
161161

0 commit comments

Comments
 (0)