Skip to content

Commit 4b19d50

Browse files
ConradSollittConradSollitt
committed
📄 Example and Doc Updates for new release
1 parent 7ff5d55 commit 4b19d50

73 files changed

Lines changed: 317 additions & 394 deletions

File tree

Some content is hidden

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

‎README.md‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ This example uses Vue for templating. If you save it with a text editor you can
109109
<html lang="en">
110110
<head>
111111
<meta charset="utf-8">
112-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
112+
<meta name="viewport" content="width=device-width, initial-scale=1">
113113
<title>DataFormsJS Example using Vue</title>
114114
</head>
115115
<body>
@@ -179,7 +179,7 @@ This example uses React with the `jsxLoader.min.js` script for converting JSX to
179179
<html lang="en">
180180
<head>
181181
<meta charset="utf-8">
182-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
182+
<meta name="viewport" content="width=device-width, initial-scale=1">
183183
<title>DataFormsJS Example using React</title>
184184
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui-flag@2.4.0/flag.min.css">
185185
</head>
@@ -243,16 +243,15 @@ This example uses React with the `jsxLoader.min.js` script for converting JSX to
243243
</html>
244244
```
245245

246-
This example uses DataFormsJS Web Components and can be used on modern browsers. Web Components are well defined standard and provide for functionally similar to JavaScript Frameworks while using less code.
246+
This example uses DataFormsJS Web Components. Web Components are well defined standard and provide for functionally similar to JavaScript Frameworks while using less JavaScript code.
247247

248248
```html
249249
<!doctype html>
250250
<html lang="en">
251251
<head>
252252
<meta charset="utf-8">
253-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
253+
<meta name="viewport" content="width=device-width, initial-scale=1">
254254
<title>DataFormsJS Example using Web Components</title>
255-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui-flag@2.4.0/flag.min.css">
256255
</head>
257256
<body>
258257
<header>
@@ -264,12 +263,14 @@ This example uses DataFormsJS Web Components and can be used on modern browsers.
264263

265264
<main id="view"></main>
266265

266+
<template id="loading-screen">
267+
<h2>Loading...</h2>
268+
</template>
269+
267270
<!--
268-
Single Page App (SPA) Routes can be defined using <url-router>
269-
and <url-route>. This works for both #hash routes and Web History
270-
(pushState / popstate).
271+
<url-router> and <url-route> will be used to define #hash routes
271272
-->
272-
<url-router view-selector="#view">
273+
<url-router view-selector="#view" loading-template-selector="#loading-screen">
273274
<!-- Home Page -->
274275
<url-route path="/">
275276
<template>
@@ -280,8 +281,11 @@ This example uses DataFormsJS Web Components and can be used on modern browsers.
280281
<!--
281282
Display a list of Countries from a JSON Service. Elements
282283
with [data-bind] are populated with data from the Web Service.
284+
285+
[lazy-load] is used along with `window.lazyLoad` near the bottom
286+
of this file to dynamically load scripts only if they will be used.
283287
-->
284-
<url-route path="/data">
288+
<url-route path="/data" lazy-load="json_data, data_list, flags">
285289
<template>
286290
<json-data url="https://www.dataformsjs.com/data/geonames/countries">
287291
<is-loading>
@@ -303,8 +307,7 @@ This example uses DataFormsJS Web Components and can be used on modern browsers.
303307
</url-router>
304308

305309
<!--
306-
Template for <data-list> using Template literals (Template strings).
307-
Variables are safely escaped for HTML when using <data-list>.
310+
Template for <data-list> using Template literals (Template strings)
308311
-->
309312
<template id="country">
310313
<li>
@@ -313,19 +316,16 @@ This example uses DataFormsJS Web Components and can be used on modern browsers.
313316
</li>
314317
</template>
315318

316-
<!--
317-
DataFormsJS Web Components
318-
Legacy Browsers can be polyfilled using the DataFormsJS Framework
319-
-->
319+
<!-- DataFormsJS Web Components -->
320320
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@latest/js/web-components/url-router.min.js"></script>
321-
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@latest/js/web-components/json-data.min.js"></script>
322-
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@latest/js/web-components/data-list.min.js"></script>
323321
<script nomodule src="https://cdn.jsdelivr.net/npm/dataformsjs@latest/js/web-components/polyfill.min.js"></script>
324-
325-
<!-- Optional - Show a warning for Older browsers instead of using Polyfill (IE, Older Mobile Devices, etc) -->
326-
<!--
327-
<script nomodule src="https://cdn.jsdelivr.net/npm/dataformsjs@latest/js/web-components/safari-nomodule.min.js"></script>
328-
-->
322+
<script>
323+
window.lazyLoad = {
324+
json_data: { module: 'https://cdn.jsdelivr.net/npm/dataformsjs@latest/js/web-components/json-data.min.js' },
325+
data_list: { module: 'https://cdn.jsdelivr.net/npm/dataformsjs@latest/js/web-components/data-list.min.js' },
326+
flags: 'https://cdn.jsdelivr.net/npm/semantic-ui-flag@2.4.0/flag.min.css',
327+
};
328+
</script>
329329
</body>
330330
</html>
331331
```
@@ -365,8 +365,8 @@ _All sizes are based on minified scripts and gzip compression from the web serve
365365
* Additional files (controllers, plugins, etc) are typically only 1-3 kB each.
366366
* In general when using the Framework expect about 15 kB for the initial page load, and then several kB for additional pages that load extra plugins, pages, controllers, etc.
367367

368-
* **React JSX Loader – 5.4 kB** (77 kB full version uncompressed)
369-
* **React (All Components in JavaScript) – 7.0 kB**
368+
* **React JSX Loader – 5.7 kB** (85 kB full version uncompressed)
369+
* **React (Core Components) – 5.1 kB**
370370
* Individual React Components are between 3 and 12 kB when uncompressed and including comments.
371371
* Web Components are typically around 1 to 3 kB each, typically you will use a number of components so in the example apps this adds up to about 15 kB for each app.
372372

‎docs/i18n-readme/README.es.md‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ Este ejemplo usa Vue para crear plantillas. Si lo guarda con un editor de texto,
8282
<html lang="en">
8383
<head>
8484
<meta charset="utf-8">
85-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
85+
<meta name="viewport" content="width=device-width, initial-scale=1">
8686
<title>Ejemplo de DataFormsJS usando Vue</title>
8787
</head>
8888
<body>
@@ -152,7 +152,7 @@ This example uses React with the `jsxLoader.min.js` script for converting JSX to
152152
<html lang="en">
153153
<head>
154154
<meta charset="utf-8">
155-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
155+
<meta name="viewport" content="width=device-width, initial-scale=1">
156156
<title>DataFormsJS Example using React</title>
157157
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui-flag@2.4.0/flag.min.css">
158158
</head>
@@ -216,16 +216,15 @@ This example uses React with the `jsxLoader.min.js` script for converting JSX to
216216
</html>
217217
```
218218

219-
This example uses DataFormsJS Web Components and can be used on modern browsers. Web Components are well defined standard and provide for functionally similar to JavaScript Frameworks while using less code.
219+
This example uses DataFormsJS Web Components. Web Components are well defined standard and provide for functionally similar to JavaScript Frameworks while using less JavaScript code.
220220

221221
```html
222222
<!doctype html>
223223
<html lang="en">
224224
<head>
225225
<meta charset="utf-8">
226-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
226+
<meta name="viewport" content="width=device-width, initial-scale=1">
227227
<title>DataFormsJS Example using Web Components</title>
228-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui-flag@2.4.0/flag.min.css">
229228
</head>
230229
<body>
231230
<header>
@@ -237,12 +236,14 @@ This example uses DataFormsJS Web Components and can be used on modern browsers.
237236

238237
<main id="view"></main>
239238

239+
<template id="loading-screen">
240+
<h2>Loading...</h2>
241+
</template>
242+
240243
<!--
241-
Single Page App (SPA) Routes can be defined using <url-router>
242-
and <url-route>. This works for both #hash routes and Web History
243-
(pushState / popstate).
244+
<url-router> and <url-route> will be used to define #hash routes
244245
-->
245-
<url-router view-selector="#view">
246+
<url-router view-selector="#view" loading-template-selector="#loading-screen">
246247
<!-- Home Page -->
247248
<url-route path="/">
248249
<template>
@@ -253,8 +254,11 @@ This example uses DataFormsJS Web Components and can be used on modern browsers.
253254
<!--
254255
Display a list of Countries from a JSON Service. Elements
255256
with [data-bind] are populated with data from the Web Service.
257+
258+
[lazy-load] is used along with `window.lazyLoad` near the bottom
259+
of this file to dynamically load scripts only if they will be used.
256260
-->
257-
<url-route path="/data">
261+
<url-route path="/data" lazy-load="json_data, data_list, flags">
258262
<template>
259263
<json-data url="https://www.dataformsjs.com/data/geonames/countries">
260264
<is-loading>
@@ -276,8 +280,7 @@ This example uses DataFormsJS Web Components and can be used on modern browsers.
276280
</url-router>
277281

278282
<!--
279-
Template for <data-list> using Template literals (Template strings).
280-
Variables are safely escaped for HTML when using <data-list>.
283+
Template for <data-list> using Template literals (Template strings)
281284
-->
282285
<template id="country">
283286
<li>
@@ -286,19 +289,16 @@ This example uses DataFormsJS Web Components and can be used on modern browsers.
286289
</li>
287290
</template>
288291

289-
<!--
290-
DataFormsJS Web Components
291-
Legacy Browsers can be polyfilled using the DataFormsJS Framework
292-
-->
292+
<!-- DataFormsJS Web Components -->
293293
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@latest/js/web-components/url-router.min.js"></script>
294-
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@latest/js/web-components/json-data.min.js"></script>
295-
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@latest/js/web-components/data-list.min.js"></script>
296294
<script nomodule src="https://cdn.jsdelivr.net/npm/dataformsjs@latest/js/web-components/polyfill.min.js"></script>
297-
298-
<!-- Optional - Show a warning for Older browsers instead of using Polyfill (IE, Older Mobile Devices, etc) -->
299-
<!--
300-
<script nomodule src="https://cdn.jsdelivr.net/npm/dataformsjs@latest/js/web-components/safari-nomodule.min.js"></script>
301-
-->
295+
<script>
296+
window.lazyLoad = {
297+
json_data: { module: 'https://cdn.jsdelivr.net/npm/dataformsjs@latest/js/web-components/json-data.min.js' },
298+
data_list: { module: 'https://cdn.jsdelivr.net/npm/dataformsjs@latest/js/web-components/data-list.min.js' },
299+
flags: 'https://cdn.jsdelivr.net/npm/semantic-ui-flag@2.4.0/flag.min.css',
300+
};
301+
</script>
302302
</body>
303303
</html>
304304
```
@@ -338,8 +338,8 @@ _Todos los tamaños se basan en scripts minificados y compresión gzip del servi
338338
* Los archivos adicionales (controladores, complementos, etc.) suelen tener solo 1-3 kB cada uno.
339339
* En general, cuando use el Framework, espere aproximadamente 15 kB para la carga inicial de la página, y luego varios kB para páginas adicionales que carguen complementos, páginas, controladores, etc.
340340

341-
* **React JSX Loader – 5.4 kB** (77 kB versión completa sin comprimir)
342-
* **React (todos los componentes en JavaScript) – 7.0 kB**
341+
* **React JSX Loader – 5.7 kB** (85 kB versión completa sin comprimir)
342+
* **React (todos los componentes en JavaScript) – 5.1 kB**
343343
* Los componentes de reacción individuales tienen entre 3 y 12 kB cuando no están comprimidos e incluyen comentarios.
344344
* Los componentes web generalmente tienen entre 1 y 3 kB cada uno, por lo general, utilizará una serie de componentes, por lo que en las aplicaciones de ejemplo, esto suma aproximadamente 15 kB para cada aplicación.
345345

‎docs/i18n-readme/README.ja.md‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ This example uses Vue for templating. If you save it with a text editor you can
8181
<html lang="en">
8282
<head>
8383
<meta charset="utf-8">
84-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
84+
<meta name="viewport" content="width=device-width, initial-scale=1">
8585
<title>DataFormsJS Example using Vue</title>
8686
</head>
8787
<body>
@@ -151,7 +151,7 @@ This example uses React with the `jsxLoader.min.js` script for converting JSX to
151151
<html lang="en">
152152
<head>
153153
<meta charset="utf-8">
154-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
154+
<meta name="viewport" content="width=device-width, initial-scale=1">
155155
<title>DataFormsJS Example using React</title>
156156
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui-flag@2.4.0/flag.min.css">
157157
</head>
@@ -215,16 +215,15 @@ This example uses React with the `jsxLoader.min.js` script for converting JSX to
215215
</html>
216216
```
217217

218-
This example uses DataFormsJS Web Components and can be used on modern browsers. Web Components are well defined standard and provide for functionally similar to JavaScript Frameworks while using less code.
218+
This example uses DataFormsJS Web Components. Web Components are well defined standard and provide for functionally similar to JavaScript Frameworks while using less JavaScript code.
219219

220220
```html
221221
<!doctype html>
222222
<html lang="en">
223223
<head>
224224
<meta charset="utf-8">
225-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
225+
<meta name="viewport" content="width=device-width, initial-scale=1">
226226
<title>DataFormsJS Example using Web Components</title>
227-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui-flag@2.4.0/flag.min.css">
228227
</head>
229228
<body>
230229
<header>
@@ -236,12 +235,14 @@ This example uses DataFormsJS Web Components and can be used on modern browsers.
236235

237236
<main id="view"></main>
238237

238+
<template id="loading-screen">
239+
<h2>Loading...</h2>
240+
</template>
241+
239242
<!--
240-
Single Page App (SPA) Routes can be defined using <url-router>
241-
and <url-route>. This works for both #hash routes and Web History
242-
(pushState / popstate).
243+
<url-router> and <url-route> will be used to define #hash routes
243244
-->
244-
<url-router view-selector="#view">
245+
<url-router view-selector="#view" loading-template-selector="#loading-screen">
245246
<!-- Home Page -->
246247
<url-route path="/">
247248
<template>
@@ -252,8 +253,11 @@ This example uses DataFormsJS Web Components and can be used on modern browsers.
252253
<!--
253254
Display a list of Countries from a JSON Service. Elements
254255
with [data-bind] are populated with data from the Web Service.
256+
257+
[lazy-load] is used along with `window.lazyLoad` near the bottom
258+
of this file to dynamically load scripts only if they will be used.
255259
-->
256-
<url-route path="/data">
260+
<url-route path="/data" lazy-load="json_data, data_list, flags">
257261
<template>
258262
<json-data url="https://www.dataformsjs.com/data/geonames/countries">
259263
<is-loading>
@@ -275,8 +279,7 @@ This example uses DataFormsJS Web Components and can be used on modern browsers.
275279
</url-router>
276280

277281
<!--
278-
Template for <data-list> using Template literals (Template strings).
279-
Variables are safely escaped for HTML when using <data-list>.
282+
Template for <data-list> using Template literals (Template strings)
280283
-->
281284
<template id="country">
282285
<li>
@@ -285,19 +288,16 @@ This example uses DataFormsJS Web Components and can be used on modern browsers.
285288
</li>
286289
</template>
287290

288-
<!--
289-
DataFormsJS Web Components
290-
Legacy Browsers can be polyfilled using the DataFormsJS Framework
291-
-->
291+
<!-- DataFormsJS Web Components -->
292292
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@latest/js/web-components/url-router.min.js"></script>
293-
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@latest/js/web-components/json-data.min.js"></script>
294-
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@latest/js/web-components/data-list.min.js"></script>
295293
<script nomodule src="https://cdn.jsdelivr.net/npm/dataformsjs@latest/js/web-components/polyfill.min.js"></script>
296-
297-
<!-- Optional - Show a warning for Older browsers instead of using Polyfill (IE, Older Mobile Devices, etc) -->
298-
<!--
299-
<script nomodule src="https://cdn.jsdelivr.net/npm/dataformsjs@latest/js/web-components/safari-nomodule.min.js"></script>
300-
-->
294+
<script>
295+
window.lazyLoad = {
296+
json_data: { module: 'https://cdn.jsdelivr.net/npm/dataformsjs@latest/js/web-components/json-data.min.js' },
297+
data_list: { module: 'https://cdn.jsdelivr.net/npm/dataformsjs@latest/js/web-components/data-list.min.js' },
298+
flags: 'https://cdn.jsdelivr.net/npm/semantic-ui-flag@2.4.0/flag.min.css',
299+
};
300+
</script>
301301
</body>
302302
</html>
303303
```
@@ -337,8 +337,8 @@ _All sizes are based on minified scripts and gzip compression from the web serve
337337
* Additional files (controllers, plugins, etc) are typically only 1-3 kB each.
338338
* In general when using the Framework expect about 15 kB for the intial page load, and then several kB for additional pages that load extra plugins, pages, controllers, etc.
339339

340-
* **React JSX Loader – 5.4 kB** (77 kB full version uncompressed)
341-
* **React (All Components in JavaScript) – 7.0 kB**
340+
* **React JSX Loader – 5.7 kB** (85 kB full version uncompressed)
341+
* **React (All Components in JavaScript) – 5.1 kB**
342342
* Individual React Components are between 3 and 12 KB when uncompressed and including comments.
343343
* Web Components are typically around 1 to 3 KB each, typically you will use a number of components so in the example apps this adds up to about 15 kB for each app.
344344

0 commit comments

Comments
 (0)