Skip to content

Commit 5ddafcb

Browse files
ConradSollittConradSollitt
committed
⚛️ Add additional Preact Demos
1 parent 569dff3 commit 5ddafcb

16 files changed

Lines changed: 478 additions & 4 deletions

‎docs/jsx-loader.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,11 +114,17 @@ The `jsxLoader.js` script is very small to download (5.7 kB - min and gzip) and
114114
* https://www.dataformsjs.com/examples/countries-no-spa-graphql.htm
115115
* https://www.dataformsjs.com/examples/hacker-news-react.htm
116116
* https://www.dataformsjs.com/examples/web-components-with-react.htm
117+
* https://www.dataformsjs.com/getting-started/en/template-react.htm
118+
* https://www.dataformsjs.com/getting-started/en/template-react-graphql.htm
117119

118120
### Preact <img src="https://www.dataformsjs.com/img/logos/preact.svg" width="32" height="32">
119121
* https://www.dataformsjs.com/examples/hello-world/en/preact.htm
122+
* https://www.dataformsjs.com/examples/places-demo-preact.htm
120123
* https://www.dataformsjs.com/examples/countries-no-spa-preact.htm
121124
* https://www.dataformsjs.com/examples/image-gallery-preact.htm
125+
* https://www.dataformsjs.com/getting-started/en/template-preact.htm
126+
* https://www.dataformsjs.com/getting-started/en/template-preact-router.htm
127+
* https://www.dataformsjs.com/getting-started/en/template-preact-graphql.htm
122128

123129
### Vue 3 <img src="https://www.dataformsjs.com/img/logos/vue.svg" width="32" height="32">
124130
* https://www.dataformsjs.com/examples/hello-world/en/vue3-with-jsx.htm

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,11 +114,17 @@ O script `jsxLoader.js` é muito pequeno para baixar (5.7 kB - min e em gzip) e
114114
* https://www.dataformsjs.com/examples/countries-no-spa-graphql.htm
115115
* https://www.dataformsjs.com/examples/hacker-news-react.htm
116116
* https://www.dataformsjs.com/examples/web-components-with-react.htm
117+
* https://www.dataformsjs.com/getting-started/en/template-react.htm
118+
* https://www.dataformsjs.com/getting-started/en/template-react-graphql.htm
117119

118120
### Preact <img src="https://www.dataformsjs.com/img/logos/preact.svg" width="32" height="32">
119121
* https://www.dataformsjs.com/examples/hello-world/pt-BR/preact.htm
122+
* https://www.dataformsjs.com/examples/places-demo-preact.htm
120123
* https://www.dataformsjs.com/examples/countries-no-spa-preact.htm
121124
* https://www.dataformsjs.com/examples/image-gallery-preact.htm
125+
* https://www.dataformsjs.com/getting-started/en/template-preact.htm
126+
* https://www.dataformsjs.com/getting-started/en/template-preact-router.htm
127+
* https://www.dataformsjs.com/getting-started/en/template-preact-graphql.htm
122128

123129
### Vue 3 <img src="https://www.dataformsjs.com/img/logos/vue.svg" width="32" height="32">
124130
* https://www.dataformsjs.com/examples/hello-world/en/vue3-with-jsx.htm

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,11 +114,17 @@ CLI开发工具,如`webpack`, `babel`,`create-react-app`是非常好的工具，
114114
* https://www.dataformsjs.com/examples/countries-no-spa-graphql.htm
115115
* https://www.dataformsjs.com/examples/hacker-news-react.htm
116116
* https://www.dataformsjs.com/examples/web-components-with-react.htm
117+
* https://www.dataformsjs.com/getting-started/en/template-react.htm
118+
* https://www.dataformsjs.com/getting-started/en/template-react-graphql.htm
117119

118120
### Preact <img src="https://www.dataformsjs.com/img/logos/preact.svg" width="32" height="32">
119121
* https://www.dataformsjs.com/examples/hello-world/zh-CN/preact.htm
122+
* https://www.dataformsjs.com/examples/places-demo-preact.htm
120123
* https://www.dataformsjs.com/examples/countries-no-spa-preact.htm
121124
* https://www.dataformsjs.com/examples/image-gallery-preact.htm
125+
* https://www.dataformsjs.com/getting-started/en/template-preact.htm
126+
* https://www.dataformsjs.com/getting-started/en/template-preact-router.htm
127+
* https://www.dataformsjs.com/getting-started/en/template-preact-graphql.htm
122128

123129
### Vue 3 <img src="https://www.dataformsjs.com/img/logos/vue.svg" width="32" height="32">
124130
* https://www.dataformsjs.com/examples/hello-world/en/vue3-with-jsx.htm

‎docs/to-do-list.txt‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,15 @@ TODO List
2222
|
2323
--------------------------------------------------------------------------
2424

25+
**) Look into why DataFormsJS Web Components are not working with Preact.
26+
They work with React in all tested browsers (including the polyfill with IE).
27+
Source:
28+
examples/web-components-with-preact.htm
29+
React Version:
30+
https://www.dataformsjs.com/examples/web-components-with-react.htm
31+
Preact Version:
32+
https://www.dataformsjs.com/examples/web-components-with-preact.htm
33+
2534
**) Combine Main Server and AI/ML Server into one.
2635
- Servers:
2736
https://www.dataformsjs.com/

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ <h1>Countries</h1>
7878
<p>
7979
<ul>
8080
<li>This demo uses <a href="https://preactjs.com/" target="_blank">Preact</a> instead of React and is based on the React Demo.</li>
81-
<li>Almost all code is the same as the react version except that [jsxLoader.usePreact()] is called on the page to support Preact.</li>
81+
<li>Almost all code is the same as the React version except that [jsxLoader.usePreact()] is called on the page to support Preact.</li>
8282
<li>[jsxLoader.usePreact()] allows for React Components and to be replaced with [preact.Component] which makes it easy to use Preact with existing React Code.</li>
8383
<li>Use a diff viewer with the React version to see all differences.</li>
8484
</ul>

‎examples/html/search-places-react.jsx‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11

22
// This demo can use either [jQuery] and [chosen] or [React Select] depending on the value of `useChosen`.
3-
const useChosen = false;
3+
// Currently using [React Select] for the React Demo and [chosen] for the Preact Demo.
4+
// Chosen works with both but React Select only works with React.
5+
//
6+
// const useChosen = true;
7+
const useChosen = (window.preact === undefined ? false : true);
48

59
// jQuery / chosen:
610
// https://harvesthq.github.io/chosen/
@@ -111,19 +115,29 @@ class ShowSearchPage extends React.Component {
111115
this.setState({
112116
country: '',
113117
waitToSearch: true,
118+
}, () => {
119+
// Reset the <h1> tag as it will show the previous search results
120+
// from <InputFilter /> using DOM methods rather than React VDom.
121+
// This is by design.
122+
document.querySelector('h1').textContent = i18n.text('Search');
114123
});
115124
return;
116125
}
117126
this.setState({
118127
country: (event.target !== undefined ? event.target.value : event.value),
119128
waitToSearch: true,
129+
}, () => {
130+
document.querySelector('h1').textContent = i18n.text('Search');
120131
});
121132
}
122133

123134
handleCityChange(event) {
124135
this.setState({
125136
city: event.target.value,
126137
waitToSearch: true,
138+
}, () => {
139+
// See comments in above `handleCountryChange()` function
140+
document.querySelector('h1').textContent = i18n.text('Search');
127141
});
128142
}
129143

@@ -292,6 +306,12 @@ class Chosen extends React.Component {
292306
}
293307

294308
handleChange(e) {
309+
// Preact will convert `onChange` to `onInput`
310+
// https://preactjs.com/guide/v10/differences-to-react#use-oninput-instead-of-onchange
311+
if (window.preact && typeof this.props.onInput === 'function') {
312+
this.props.onInput(e);
313+
return;
314+
}
295315
this.props.onChange(e);
296316
}
297317

‎examples/i18n/countries.ar.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"Countries Demo | Handlebars": "البلدان التجريبي | Handlebars",
33
"Countries Demo | Vue": "البلدان التجريبي | Vue",
44
"Countries Demo | React": "البلدان التجريبي | React",
5+
"Countries Demo | Preact": "البلدان التجريبي | Preact",
56
"Countries Demo | JavaScript": "البلدان التجريبي | JavaScript",
67
"Countries Demo | GraphQL": "البلدان التجريبي | GraphQL",
78
"Countries Demo | Web Components": "البلدان التجريبي | Web Components",

‎examples/i18n/countries.en.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"Countries Demo | Handlebars": "Countries Demo | HandlebarsJS",
33
"Countries Demo | Vue": "Countries Demo | Vue",
44
"Countries Demo | React": "Countries Demo | React",
5+
"Countries Demo | Preact": "Countries Demo | Preact",
56
"Countries Demo | JavaScript": "Countries Demo | JavaScript",
67
"Countries Demo | GraphQL": "Countries Demo | GraphQL",
78
"Countries Demo | Web Components": "Countries Demo | Web Components",

‎examples/i18n/countries.es.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"Countries Demo | Handlebars": "Demo de Países | Handlebars",
33
"Countries Demo | Vue": "Demo de Países | Vue",
44
"Countries Demo | React": "Demo de Países | React",
5+
"Countries Demo | Preact": "Demo de Países | Preact",
56
"Countries Demo | JavaScript": "Demo de Países | JavaScript",
67
"Countries Demo | GraphQL": "Demo de Países | GraphQL",
78
"Countries Demo | Web Components": "Demo de Países | Web Components",

‎examples/i18n/countries.fr.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"Countries Demo | Handlebars": "Démo des pays | Handlebars",
33
"Countries Demo | Vue": "Démo des pays | Vue",
44
"Countries Demo | React": "Démo des pays | React",
5+
"Countries Demo | Preact": "Démo des pays | Preact",
56
"Countries Demo | JavaScript": "Démo des pays | JavaScript",
67
"Countries Demo | GraphQL": "Démo des pays | GraphQL",
78
"Countries Demo | Web Components": "Démo des pays | Web Components",

0 commit comments

Comments
 (0)