From 07406e955fe23debf6536ec05eee8919f3f01a51 Mon Sep 17 00:00:00 2001 From: Conrad Sollitt Date: Sat, 26 Feb 2022 14:32:05 -0800 Subject: [PATCH 01/31] =?UTF-8?q?=F0=9F=93=84=20Point=20Examples=20to=20CD?= =?UTF-8?q?N=20after=20new=20Release?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/to-do-list.txt | 7 ------- examples/countries-no-spa-hbs.htm | 6 ++---- examples/countries-no-spa-js.htm | 6 ++---- examples/countries-no-spa-vue.htm | 6 ++---- examples/countries-no-spa-web.htm | 3 +-- examples/export-table-js.htm | 3 +-- examples/export-table-web.htm | 3 +-- examples/places-demo-graphql.htm | 9 +++------ examples/places-demo-hbs.htm | 9 +++------ examples/places-demo-js.htm | 9 +++------ examples/places-demo-vue.htm | 9 +++------ examples/places-demo-web.htm | 9 +++------ 12 files changed, 24 insertions(+), 55 deletions(-) diff --git a/docs/to-do-list.txt b/docs/to-do-list.txt index c0334a4..a4f44a8 100644 --- a/docs/to-do-list.txt +++ b/docs/to-do-list.txt @@ -22,13 +22,6 @@ TODO List | -------------------------------------------------------------------------- -**) Current Updates for release 5.13.0 - - Published 2022-02-25 - - After CDN changes take effect (24 hours or longer) update all local "../js/" to the CDN Page. - Use global search of "../js/" to find files that need to be updated. - This applies to the example page and once update changes will be published - to the main server. - **) Update the Getting Started CSS Template used here: https://www.dataformsjs.com/en/getting-started So that it looks similar to the places demo and can be used for apps as decent starting template diff --git a/examples/countries-no-spa-hbs.htm b/examples/countries-no-spa-hbs.htm index a46466a..84950b2 100644 --- a/examples/countries-no-spa-hbs.htm +++ b/examples/countries-no-spa-hbs.htm @@ -85,10 +85,8 @@

Countries

- - - + + \ No newline at end of file diff --git a/examples/countries-no-spa-js.htm b/examples/countries-no-spa-js.htm index 965e698..d047d17 100644 --- a/examples/countries-no-spa-js.htm +++ b/examples/countries-no-spa-js.htm @@ -85,9 +85,7 @@

Countries

- - - + + \ No newline at end of file diff --git a/examples/countries-no-spa-vue.htm b/examples/countries-no-spa-vue.htm index f7361da..9c30760 100644 --- a/examples/countries-no-spa-vue.htm +++ b/examples/countries-no-spa-vue.htm @@ -111,9 +111,7 @@

Countries

- - - + + \ No newline at end of file diff --git a/examples/countries-no-spa-web.htm b/examples/countries-no-spa-web.htm index 7b37edc..aceec80 100644 --- a/examples/countries-no-spa-web.htm +++ b/examples/countries-no-spa-web.htm @@ -114,7 +114,6 @@

Countries

- - + \ No newline at end of file diff --git a/examples/export-table-js.htm b/examples/export-table-js.htm index 00bd0f0..a0a234a 100644 --- a/examples/export-table-js.htm +++ b/examples/export-table-js.htm @@ -77,8 +77,7 @@

Export Table Demo | DataFormsJS Framework

- - + diff --git a/examples/export-table-web.htm b/examples/export-table-web.htm index 917a12c..17bf1af 100644 --- a/examples/export-table-web.htm +++ b/examples/export-table-web.htm @@ -76,8 +76,7 @@

Export Table Demo | Web Components

- - + diff --git a/examples/places-demo-graphql.htm b/examples/places-demo-graphql.htm index 1aaca33..9733fb8 100644 --- a/examples/places-demo-graphql.htm +++ b/examples/places-demo-graphql.htm @@ -155,8 +155,7 @@

{{i18n 'Error'}} - {{errorMessage}}

data-export-file-name="{{i18n fileName}}.csv"> - - + @@ -164,10 +163,8 @@

{{i18n 'Error'}} - {{errorMessage}}

- - - + + - - + @@ -191,10 +190,8 @@

{{i18n 'Countries'}}

- - - + + - - + - - - + + - - + - - - + + + @@ -198,8 +197,7 @@

- - + ``` diff --git a/docs/jsx-loader.pt-BR.md b/docs/jsx-loader.pt-BR.md index e1602fb..2f72347 100644 --- a/docs/jsx-loader.pt-BR.md +++ b/docs/jsx-loader.pt-BR.md @@ -107,9 +107,14 @@ O script `jsxLoader.js` é muito pequeno para baixar (6.6 kB - min e em gzip) e script will be added to the page as ``` diff --git a/docs/jsx-loader.zh-CN.md b/docs/jsx-loader.zh-CN.md index 0479c86..07602f8 100644 --- a/docs/jsx-loader.zh-CN.md +++ b/docs/jsx-loader.zh-CN.md @@ -107,9 +107,14 @@ CLI开发工具,如`webpack`, `babel`,`create-react-app`是非常好的工具, script will be added to the page as ``` From 79c6ad518709b13c3fbb28d1b991262b43ff157b Mon Sep 17 00:00:00 2001 From: Conrad Sollitt Date: Wed, 19 Apr 2023 00:01:58 -0700 Subject: [PATCH 13/31] =?UTF-8?q?=F0=9F=9A=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/react/jsxLoader.js | 62 ++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 58 insertions(+), 4 deletions(-) diff --git a/js/react/jsxLoader.js b/js/react/jsxLoader.js index b113b97..fc9c385 100644 --- a/js/react/jsxLoader.js +++ b/js/react/jsxLoader.js @@ -275,6 +275,38 @@ return; } + // Private function to Download JSX Source based on - - + + diff --git a/docs/i18n-readme/README.es.md b/docs/i18n-readme/README.es.md index 26a2b70..860f0a9 100644 --- a/docs/i18n-readme/README.es.md +++ b/docs/i18n-readme/README.es.md @@ -213,8 +213,8 @@ This example uses React with the `jsxLoader.min.js` script for converting JSX to ); - - + + diff --git a/docs/i18n-readme/README.ja.md b/docs/i18n-readme/README.ja.md index b397678..cd4dcf1 100644 --- a/docs/i18n-readme/README.ja.md +++ b/docs/i18n-readme/README.ja.md @@ -212,8 +212,8 @@ This example uses React with the `jsxLoader.min.js` script for converting JSX to ); - - + + diff --git a/docs/i18n-readme/README.pt-BR.md b/docs/i18n-readme/README.pt-BR.md index a006134..31a2755 100644 --- a/docs/i18n-readme/README.pt-BR.md +++ b/docs/i18n-readme/README.pt-BR.md @@ -212,8 +212,8 @@ Este exemplo utiliza React com o script `jsxLoader.min.js` para converter JSX pa ); - - + + diff --git a/docs/i18n-readme/README.zh-CN.md b/docs/i18n-readme/README.zh-CN.md index 28d42f8..e3ffc71 100644 --- a/docs/i18n-readme/README.zh-CN.md +++ b/docs/i18n-readme/README.zh-CN.md @@ -212,8 +212,8 @@ This example uses React with the `jsxLoader.min.js` script for converting JSX to ); - - + + diff --git a/docs/jsx-loader.md b/docs/jsx-loader.md index 9a6356b..f4faa2d 100644 --- a/docs/jsx-loader.md +++ b/docs/jsx-loader.md @@ -69,8 +69,8 @@ The `jsxLoader.js` script is very small to download (6.6 kB - min and gzip) and ```html - - + + - - + + - - + + - - + + - - + + diff --git a/examples/countries-no-spa-preact.htm b/examples/countries-no-spa-preact.htm index decf299..339aff4 100644 --- a/examples/countries-no-spa-preact.htm +++ b/examples/countries-no-spa-preact.htm @@ -27,7 +27,7 @@

Countries

Preact https://preactjs.com/ --> - + diff --git a/examples/countries-no-spa-react.htm b/examples/countries-no-spa-react.htm index d35a039..82ea715 100644 --- a/examples/countries-no-spa-react.htm +++ b/examples/countries-no-spa-react.htm @@ -18,11 +18,11 @@

Countries

- - + + diff --git a/examples/hacker-news-react.htm b/examples/hacker-news-react.htm index ae12e34..0c43618 100644 --- a/examples/hacker-news-react.htm +++ b/examples/hacker-news-react.htm @@ -29,8 +29,8 @@ React https://reactjs.org --> - - + + - + - - + + - - + + diff --git a/examples/image-gallery-preact.htm b/examples/image-gallery-preact.htm index 37f1b20..b2f3720 100644 --- a/examples/image-gallery-preact.htm +++ b/examples/image-gallery-preact.htm @@ -148,7 +148,7 @@

Example Usage and Code

Preact https://preactjs.com --> - + diff --git a/examples/image-gallery-react.htm b/examples/image-gallery-react.htm index d1dfd9b..0dbfd60 100644 --- a/examples/image-gallery-react.htm +++ b/examples/image-gallery-react.htm @@ -146,11 +146,11 @@

Example Usage and Code

- - + + diff --git a/examples/jsx-loader-dev.htm b/examples/jsx-loader-dev.htm index 3351d84..300971a 100644 --- a/examples/jsx-loader-dev.htm +++ b/examples/jsx-loader-dev.htm @@ -21,18 +21,18 @@ - - + + - + - - + + - - + + - - + + - - + + - + - - + + @@ -45,8 +45,8 @@ https://reacttraining.com/react-router/ https://github.com/ReactTraining/react-router --> - - + + - - + + - - + + - - + + - + - - + + - - + + - - + + - - + + - - + + - - + + - + - - + + - + \n \n";const dataCache=[];function saveDataToCache(t,e,s){for(const a of dataCache)if(a.url===t)return a.params=JSON.stringify(e),void(a.data=s);dataCache.push({url:t,params:JSON.stringify(e),data:s})}function getDataFromCache(t,e){for(const s of dataCache)if(s.url===t){if(e===s.params||null===e&&"null"===s.params)return s.data;break}return null}function copyTemplateSelector(t){const e=t.getAttribute("template-selector");if(e&&0===t.childNodes.length){const s=document.querySelector(e);s?t.appendChild(s.content.cloneNode(!0)):showError(t,`Error - Could not find template from <${t.tagName.toLowerCase()} [template-selector="${e}"]>.`)}}class JsonData extends HTMLElement{constructor(){super();this.attachShadow({mode:"open"}).appendChild(shadowTmpl.content.cloneNode(!0)),this.state={isLoading:!1,hasError:!1,isLoaded:!1,errorMessage:null},this.handleButtonClick=this.handleButtonClick.bind(this)}static get observedAttributes(){return["url","url-params"]}attributeChangedCallback(t,e){switch(t){case"url":case"url-params":null===e||this.manualFetchMode||this.fetch()}}connectedCallback(){if(this.elements={isLoading:this.querySelector("is-loading"),hasError:this.querySelector("has-error"),isLoaded:this.querySelector("is-loaded"),clickButton:null},null===this.clickSelector)void 0===this.state||this.state.isLoading||this.state.hasError||this.state.isLoaded||this.manualFetchMode||this.fetch();else if(this.elements.clickButton=document.querySelector(this.clickSelector),null===this.elements.clickButton){const t="Element not found for Web Component using [click-selector]: "+String(this.clickSelector);showErrorAlert(t)}else this.elements.clickButton.addEventListener("click",this.handleButtonClick)}disconnectedCallback(){this.elements&&null!==this.elements.clickButton&&(this.elements.clickButton.removeEventListener("click",this.handleButtonClick),this.elements.clickButton=null)}handleButtonClick(){"boolean"==typeof this.elements.clickButton.disabled&&(this.elements.clickButton.disabled=!0);const t=document.querySelectorAll("input[data-bind],select[data-bind],textarea[data-bind]"),e={};for(const s of t){const t=s.getAttribute("data-bind");"INPUT"===s.nodeName&&"checkbox"===s.type?e[t]=s.checked:e[t]=s.value}this.setAttribute("url-params",""),this.setAttribute("url-params",JSON.stringify(e))}get url(){return this.getAttribute("url")}set url(t){this.setAttribute("url",t)}get urlParams(){return this.getAttribute("url-params")}set urlParams(t){"object"==typeof t?this.setAttribute("url-params",JSON.stringify(t)):this.showError(`When setting [urlParams] of the value must be an object but was instead a type of [${typeof t}].`)}get loadOnlyOnce(){return null!==this.getAttribute("load-only-once")}get clickSelector(){return this.getAttribute("click-selector")}get manualFetchMode(){return null!==this.getAttribute("manual-fetch-mode")}get isLoading(){return this.state.isLoading}set isLoading(t){this.state.isLoading=!0===t,this.elements.isLoading&&(this.elements.isLoading.style.display=this.state.isLoading?"":"none")}get hasError(){return this.state.hasError}set hasError(t){this.state.hasError=!0===t,this.elements.hasError&&(this.elements.hasError.style.display=this.state.hasError?"":"none")}get isLoaded(){return this.state.isLoaded}set isLoaded(t){this.state.isLoaded=!0===t,this.elements.isLoaded&&(this.elements.isLoaded.style.display=this.state.isLoaded?"":"none")}dispatchContentReady(){this.dispatchEvent(new Event(appEvents.contentReady,{bubbles:!0}));const t=this.getAttribute("onready");if(t)try{if(!this.isConnected)return;const e=new Function("return "+t)();"function"==typeof e&&e()}catch(e){showErrorAlert(`Error from function : ${e.message}`),console.error(e)}}async fetch(){const t=this.url;let e=t;if(null===e||""===e)return await this.showError("Error, element is missing attribute [url]"),void this.dispatchContentReady();let s=this.getAttribute("url-params");if(""!==s||!e.includes(":")){if(this.loadOnlyOnce){const e=getDataFromCache(t,s);if(null!==e)return await this._setLoadedState(e),void this.dispatchContentReady()}s&&(s=JSON.parse(s)),e=buildUrl(e,s),this.isLoading=!0,this.isLoaded=!1,this.hasError=!1,await this.bindData(),fetch(e,{mode:"cors",cache:"no-store",credentials:"same-origin"}).then((t=>{const e=t.status;if(e>=200&&e<300||304===e)return Promise.resolve(t);{const s="Error loading data. Server Response Code: "+e+", Response Text: "+t.statusText;return Promise.reject(s)}})).then((t=>t.json())).then((async e=>{this.loadOnlyOnce&&saveDataToCache(t,s,e),await this._setLoadedState(e)})).catch((async t=>{await this.showError(t)})).finally((()=>{null!==this.elements.clickButton&&"boolean"==typeof this.elements.clickButton.disabled&&(this.elements.clickButton.disabled=!1),this.dispatchContentReady()}))}}async showError(t){this.isLoading=!1,this.isLoaded=!1,this.hasError=!0,this.state.errorMessage=t,this.dispatchEvent(new CustomEvent(appEvents.error,{bubbles:!0,detail:t})),await this.bindData(),console.error(t)}async _setLoadedState(t){this.isLoading=!1,this.isLoaded=!0,this.hasError=!1,this.state.errorMessage=null;const e=this.getAttribute("transform-data");if(e)try{if("function"==typeof window[e]){const s=window[e](t);"object"==typeof s&&null!==s?Object.assign(this.state,s):await this.showError(`Function [${e}()] must return an object.`)}else await this.showError(`Function [${e}()] was not found.`)}catch(t){await this.showError(t)}else Object.assign(this.state,t);"boolean"==typeof t.hasError&&(this.hasError=t.hasError),await this.bindData()}async bindData(){await componentsAreDefined(this,"[data-bind]");let t=this.querySelectorAll("[data-bind]");for(const e of t){const t=e.getAttribute("data-bind"),s=""===t?this.state:getBindValue(this.state,t);setElementText(e,formatData(e,s))}t=this.querySelectorAll("[data-bind-attr]");for(const e of t)bindAttrTmpl(e,"data-bind-attr",this.state);t=this.querySelectorAll("[data-show]");for(const e of t)if(this.state.isLoading)e.style.display="none";else{const t=e.getAttribute("data-show");try{const s=new Function("state","format","with(state){return "+t+"}")(this.state,format);e.style.display=!0===s?"":"none"}catch(s){e.style.display="",console.error(`Error evaluating JavaScript expression from [data-show="${t}"] attribute.`),console.error(s)}}t=this.querySelectorAll("[data-bind-refresh]");for(const e of t){const t=e.getAttribute("data-bind-refresh");try{e[t]()}catch(s){console.error(`Error calling function from element with [data-bind-refresh="${t}"].`),console.error(s),console.log(e)}}polyfillCustomElements()}}window.customElements.define("json-data",JsonData),window.customElements.define("is-loading",class extends HTMLElement{constructor(){super();this.attachShadow({mode:"open"}).appendChild(shadowTmpl.content.cloneNode(!0))}connectedCallback(){"JSON-DATA"===this.parentNode.nodeName&&!0===this.parentNode.isLoading||(this.style.display="none"),copyTemplateSelector(this)}}),window.customElements.define("has-error",class extends HTMLElement{constructor(){super();this.attachShadow({mode:"open"}).appendChild(shadowTmpl.content.cloneNode(!0))}connectedCallback(){"JSON-DATA"===this.parentNode.nodeName&&!0===this.parentNode.hasError||(this.style.display="none"),copyTemplateSelector(this)}}),window.customElements.define("is-loaded",class extends HTMLElement{constructor(){super();this.attachShadow({mode:"open"}).appendChild(shadowTmpl.content.cloneNode(!0))}connectedCallback(){"JSON-DATA"===this.parentNode.nodeName&&!0===this.parentNode.isLoaded||(this.style.display="none"),copyTemplateSelector(this)}}); \ No newline at end of file diff --git a/js/web-components/url-router.min.js b/js/web-components/url-router.min.js index c56f897..4eebe6d 100644 --- a/js/web-components/url-router.min.js +++ b/js/web-components/url-router.min.js @@ -1,5 +1,5 @@ // @link https://www.dataformsjs.com -// @version 5.14.4 +// @version 5.14.5 // @author Conrad Sollitt (https://conradsollitt.com) // @license MIT import{render,setElementText,formatData,bindAttrTmpl,polyfillCustomElements,showError,showErrorAlert,componentsAreDefined}from"./utils.min.js";const appEvents={routeChanged:"app:routeChanged",error:"app:error"},shadowTmpl=document.createElement("template");shadowTmpl.innerHTML="\n \n \n";class UrlRouter extends HTMLElement{constructor(){super();this.attachShadow({mode:"open"}).appendChild(shadowTmpl.content.cloneNode(!0)),this.currentRoute=null,this.currentUrlParams=null,this.updateView=this.updateView.bind(this),this.handlePushStateClick=this.handlePushStateClick.bind(this),this.useHistoryMode="history"===this.getAttribute("mode")}connectedCallback(){const t=this.useHistoryMode?"popstate":"hashchange";window.addEventListener(t,this.updateView),this.updateView()}disconnectedCallback(){const t=this.useHistoryMode?"popstate":"hashchange";window.removeEventListener(t,this.updateView)}async updateView(){this.currentRoute&&this.executeJsEvent("onunload"),this.currentRoute=null,this.currentUrlParams=null,await componentsAreDefined(this,"url-route");const t=this.getAttribute("view-selector");if(null===t||""===t)return void this.showFatalError("Error, element is missing attribute [view-selector]");const e=document.querySelector(t);if(null===e)return void this.showFatalError(render`Error, element from was not found on the page.`);const r=this.getAttribute("loading-template-selector");if(r){const t=document.querySelector(r);t?"TEMPLATE"===t.tagName?e.innerHTML=t.innerHTML:console.warn(`Unable to show loading screen from . Only