diff --git a/JSDemos/Demos/Localization/UsingGlobalize/React/App.js b/JSDemos/Demos/Localization/UsingGlobalize/React/App.js deleted file mode 100644 index d408a1adaf4..00000000000 --- a/JSDemos/Demos/Localization/UsingGlobalize/React/App.js +++ /dev/null @@ -1,119 +0,0 @@ -/* eslint-disable import/no-unresolved */ -/* eslint-disable import/no-webpack-loader-syntax */ -import React from 'react'; -import DataGrid, { Column, Editing, FilterRow } from 'devextreme-react/data-grid'; -import SelectBox from 'devextreme-react/select-box'; - -import 'devextreme/localization/globalize/number'; -import 'devextreme/localization/globalize/date'; -import 'devextreme/localization/globalize/currency'; -import 'devextreme/localization/globalize/message'; - -import deMessages from 'npm:devextreme/localization/messages/de.json!json'; -import ruMessages from 'npm:devextreme/localization/messages/ru.json!json'; - -import deCldrData from 'npm:devextreme-cldr-data/de.json!json'; -import ruCldrData from 'npm:devextreme-cldr-data/ru.json!json'; -import supplementalCldrData from 'npm:devextreme-cldr-data/supplemental.json!json'; - -import Globalize from 'globalize'; - -import service from './data.js'; - -const editPopupOptions = { - width: 700, - height: 345, -}; -const amountEditorOptions = { - format: 'currency', - showClearButton: true, -}; -const selectBoxInputAttr = { id: 'selectInput' }; - -class App extends React.Component { - constructor(props) { - super(props); - this.state = { - locale: this.getLocale(), - }; - this.locales = service.getLocales(); - this.payments = service.getPayments(); - this.initGlobalize(); - this.changeLocale = this.changeLocale.bind(this); - } - - getLocale() { - const locale = sessionStorage.getItem('locale'); - return locale != null ? locale : 'en'; - } - - setLocale(locale) { - sessionStorage.setItem('locale', locale); - } - - initGlobalize() { - Globalize.load( - deCldrData, - ruCldrData, - supplementalCldrData, - ); - Globalize.loadMessages(deMessages); - Globalize.loadMessages(ruMessages); - Globalize.loadMessages(service.getDictionary()); - Globalize.locale(this.state.locale); - } - - changeLocale(e) { - this.setState({ - locale: e.value, - }); - this.setLocale(e.value); - document.location.reload(); - } - - render() { - return ( -
- - - - - - - - - -
-
Options
-
- -   - -
-
-
- ); - } -} - -export default App; diff --git a/JSDemos/Demos/Localization/UsingGlobalize/React/App.tsx b/JSDemos/Demos/Localization/UsingGlobalize/React/App.tsx new file mode 100644 index 00000000000..87ceb9902e1 --- /dev/null +++ b/JSDemos/Demos/Localization/UsingGlobalize/React/App.tsx @@ -0,0 +1,115 @@ +/* eslint-disable import/no-unresolved */ +/* eslint-disable import/no-webpack-loader-syntax */ +import React from 'react'; +import DataGrid, { Column, Editing, FilterRow } from 'devextreme-react/data-grid'; +import SelectBox, { SelectBoxTypes } from 'devextreme-react/select-box'; + +import 'devextreme/localization/globalize/number'; +import 'devextreme/localization/globalize/date'; +import 'devextreme/localization/globalize/currency'; +import 'devextreme/localization/globalize/message'; + +import deMessages from 'devextreme/localization/messages/de.json'; +import ruMessages from 'devextreme/localization/messages/ru.json'; + +import deCldrData from 'devextreme-cldr-data/de.json'; +import ruCldrData from 'devextreme-cldr-data/ru.json'; +import supplementalCldrData from 'devextreme-cldr-data/supplemental.json'; + +import Globalize from 'globalize'; + +import service from './data.ts'; + +const editPopupOptions = { + width: 700, + height: 345, +}; +const amountEditorOptions = { + format: 'currency', + showClearButton: true, +}; +const selectBoxInputAttr = { id: 'selectInput' }; + +Globalize.load( + deCldrData, + ruCldrData, + supplementalCldrData, +); +Globalize.loadMessages(deMessages); +Globalize.loadMessages(ruMessages); +Globalize.loadMessages(service.getDictionary()); +Globalize.locale(sessionStorage.getItem('locale') || 'en'); + +const App = () => { + const [locale, setLocale] = React.useState(sessionStorage.getItem('locale') || 'en'); + const locales = service.getLocales(); + const payments = service.getPayments(); + + const changeLocale = (e: SelectBoxTypes.ValueChangedEvent) => { + setLocale(e.value); + sessionStorage.setItem('locale', e.value); + document.location.reload(); + }; + + return ( +
+ + + + + + + + + +
+
Options
+
+ +   + +
+
+
+ ); +}; + +export default App; diff --git a/JSDemos/Demos/Localization/UsingGlobalize/React/data.js b/JSDemos/Demos/Localization/UsingGlobalize/React/data.ts similarity index 100% rename from JSDemos/Demos/Localization/UsingGlobalize/React/data.js rename to JSDemos/Demos/Localization/UsingGlobalize/React/data.ts diff --git a/JSDemos/Demos/Localization/UsingGlobalize/React/index.html b/JSDemos/Demos/Localization/UsingGlobalize/React/index.html index fb33a47d3fb..7aef756bcb4 100644 --- a/JSDemos/Demos/Localization/UsingGlobalize/React/index.html +++ b/JSDemos/Demos/Localization/UsingGlobalize/React/index.html @@ -12,7 +12,7 @@ diff --git a/JSDemos/Demos/Localization/UsingGlobalize/React/index.js b/JSDemos/Demos/Localization/UsingGlobalize/React/index.tsx similarity index 81% rename from JSDemos/Demos/Localization/UsingGlobalize/React/index.js rename to JSDemos/Demos/Localization/UsingGlobalize/React/index.tsx index d9d7442ce76..8acbec4b617 100644 --- a/JSDemos/Demos/Localization/UsingGlobalize/React/index.js +++ b/JSDemos/Demos/Localization/UsingGlobalize/React/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import App from './App.js'; +import App from './App.tsx'; ReactDOM.render( , diff --git a/JSDemos/Demos/Localization/UsingGlobalize/ReactJs/App.js b/JSDemos/Demos/Localization/UsingGlobalize/ReactJs/App.js new file mode 100644 index 00000000000..857adb99641 --- /dev/null +++ b/JSDemos/Demos/Localization/UsingGlobalize/ReactJs/App.js @@ -0,0 +1,101 @@ +/* eslint-disable import/no-unresolved */ +/* eslint-disable import/no-webpack-loader-syntax */ +import React from 'react'; +import DataGrid, { Column, Editing, FilterRow } from 'devextreme-react/data-grid'; +import SelectBox from 'devextreme-react/select-box'; +import 'devextreme/localization/globalize/number'; +import 'devextreme/localization/globalize/date'; +import 'devextreme/localization/globalize/currency'; +import 'devextreme/localization/globalize/message'; +import deMessages from 'devextreme/localization/messages/de.json'; +import ruMessages from 'devextreme/localization/messages/ru.json'; +import deCldrData from 'devextreme-cldr-data/de.json'; +import ruCldrData from 'devextreme-cldr-data/ru.json'; +import supplementalCldrData from 'devextreme-cldr-data/supplemental.json'; +import Globalize from 'globalize'; +import service from './data.js'; + +const editPopupOptions = { + width: 700, + height: 345, +}; +const amountEditorOptions = { + format: 'currency', + showClearButton: true, +}; +const selectBoxInputAttr = { id: 'selectInput' }; +Globalize.load(deCldrData, ruCldrData, supplementalCldrData); +Globalize.loadMessages(deMessages); +Globalize.loadMessages(ruMessages); +Globalize.loadMessages(service.getDictionary()); +Globalize.locale(sessionStorage.getItem('locale') || 'en'); +const App = () => { + const [locale, setLocale] = React.useState(sessionStorage.getItem('locale') || 'en'); + const locales = service.getLocales(); + const payments = service.getPayments(); + const changeLocale = (e) => { + setLocale(e.value); + sessionStorage.setItem('locale', e.value); + document.location.reload(); + }; + return ( +
+ + + + + + + + + +
+
Options
+
+ +   + +
+
+
+ ); +}; +export default App; diff --git a/JSDemos/Demos/Localization/UsingGlobalize/ReactJs/data.js b/JSDemos/Demos/Localization/UsingGlobalize/ReactJs/data.js new file mode 100644 index 00000000000..d12fc07e9b1 --- /dev/null +++ b/JSDemos/Demos/Localization/UsingGlobalize/ReactJs/data.js @@ -0,0 +1,120 @@ +const payments = [ + { + PaymentId: 1, + ContactName: 'Nancy Davolio', + CompanyName: 'Premier Buy', + Amount: 1740, + PaymentDate: '2013/01/06', + }, + { + PaymentId: 2, + ContactName: 'Andrew Fuller', + CompanyName: 'ElectrixMax', + Amount: 850, + PaymentDate: '2013/01/13', + }, + { + PaymentId: 3, + ContactName: 'Janet Leverling', + CompanyName: 'Video Emporium', + Amount: 2235, + PaymentDate: '2013/01/07', + }, + { + PaymentId: 4, + ContactName: 'Margaret Peacock', + CompanyName: 'Screen Shop', + Amount: 1965, + PaymentDate: '2013/01/03', + }, + { + PaymentId: 5, + ContactName: 'Steven Buchanan', + CompanyName: 'Braeburn', + Amount: 880, + PaymentDate: '2013/01/10', + }, + { + PaymentId: 6, + ContactName: 'Michael Suyama', + CompanyName: 'PriceCo', + Amount: 5260, + PaymentDate: '2013/01/17', + }, + { + PaymentId: 7, + ContactName: 'Robert King', + CompanyName: 'Ultimate Gadget', + Amount: 2790, + PaymentDate: '2013/01/21', + }, + { + PaymentId: 8, + ContactName: 'Laura Callahan', + CompanyName: 'EZ Stop', + Amount: 3140, + PaymentDate: '2013/01/01', + }, + { + PaymentId: 9, + ContactName: 'Anne Dodsworth', + CompanyName: 'Clicker', + Amount: 6175, + PaymentDate: '2013/01/24', + }, + { + PaymentId: 10, + ContactName: 'Clark Morgan', + CompanyName: 'Store of America', + Amount: 4575, + PaymentDate: '2013/01/11', + }, +]; +const locales = [ + { + Name: 'English', + Value: 'en', + }, + { + Name: 'Deutsch', + Value: 'de', + }, + { + Name: 'Русский', + Value: 'ru', + }, +]; +const dictionary = { + en: { + Number: 'Number', + Contact: 'Contact', + Company: 'Company', + Amount: 'Amount', + PaymentDate: 'Payment Date', + }, + de: { + Number: 'Nummer', + Contact: 'Ansprechpartner', + Company: 'Firma', + Amount: 'Betrag', + PaymentDate: 'Zahlungsdatum', + }, + ru: { + Number: 'Номер', + Contact: 'Имя', + Company: 'Организация', + Amount: 'Сумма', + PaymentDate: 'Дата оплаты', + }, +}; +export default { + getPayments() { + return payments; + }, + getLocales() { + return locales; + }, + getDictionary() { + return dictionary; + }, +}; diff --git a/JSDemos/Demos/Localization/UsingGlobalize/ReactJs/index.html b/JSDemos/Demos/Localization/UsingGlobalize/ReactJs/index.html new file mode 100644 index 00000000000..4d0ee54d8eb --- /dev/null +++ b/JSDemos/Demos/Localization/UsingGlobalize/ReactJs/index.html @@ -0,0 +1,44 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + +
+
+
+ + diff --git a/JSDemos/Demos/Localization/UsingGlobalize/ReactJs/index.js b/JSDemos/Demos/Localization/UsingGlobalize/ReactJs/index.js new file mode 100644 index 00000000000..b853e0be824 --- /dev/null +++ b/JSDemos/Demos/Localization/UsingGlobalize/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/JSDemos/Demos/Localization/UsingGlobalize/ReactJs/styles.css b/JSDemos/Demos/Localization/UsingGlobalize/ReactJs/styles.css new file mode 100644 index 00000000000..d30c1bc016b --- /dev/null +++ b/JSDemos/Demos/Localization/UsingGlobalize/ReactJs/styles.css @@ -0,0 +1,23 @@ +.options { + padding: 20px; + background-color: rgba(191, 191, 191, 0.15); + margin-top: 20px; +} + +.option { + margin-top: 10px; +} + +.caption { + font-size: 18px; + font-weight: 500; +} + +.option > label { + margin-right: 10px; +} + +.option > .dx-selectbox { + display: inline-block; + vertical-align: middle; +} diff --git a/JSDemos/Demos/Localization/UsingIntl/React/App.js b/JSDemos/Demos/Localization/UsingIntl/React/App.js deleted file mode 100644 index 7b76a225083..00000000000 --- a/JSDemos/Demos/Localization/UsingIntl/React/App.js +++ /dev/null @@ -1,105 +0,0 @@ -/* eslint-disable import/no-unresolved */ -/* eslint-disable import/no-webpack-loader-syntax */ -import React from 'react'; -import DataGrid, { Column, Editing, FilterRow } from 'devextreme-react/data-grid'; -import SelectBox from 'devextreme-react/select-box'; - -import deMessages from 'npm:devextreme/localization/messages/de.json!json'; -import ruMessages from 'npm:devextreme/localization/messages/ru.json!json'; - -import { locale, loadMessages, formatMessage } from 'devextreme/localization'; - -import service from './data.js'; - -const editPopupOptions = { - width: 700, - height: 345, -}; -const amountEditorOptions = { - format: 'currency', - showClearButton: true, -}; -const selectBoxInputAttr = { id: 'selectInput' }; - -class App extends React.Component { - constructor(props) { - super(props); - this.state = { - locale: this.getLocale(), - }; - this.locales = service.getLocales(); - this.payments = service.getPayments(); - this.initMessages(); - locale(this.state.locale); - this.changeLocale = this.changeLocale.bind(this); - } - - getLocale() { - const storageLocale = sessionStorage.getItem('locale'); - return storageLocale != null ? storageLocale : 'en'; - } - - setLocale(savingLocale) { - sessionStorage.setItem('locale', savingLocale); - } - - initMessages() { - loadMessages(deMessages); - loadMessages(ruMessages); - loadMessages(service.getDictionary()); - } - - changeLocale(e) { - this.setState({ - locale: e.value, - }); - this.setLocale(e.value); - document.location.reload(); - } - - render() { - return ( -
- - - - - - - - - -
-
Options
-
- -   - -
-
-
- ); - } -} - -export default App; diff --git a/JSDemos/Demos/Localization/UsingIntl/React/App.tsx b/JSDemos/Demos/Localization/UsingIntl/React/App.tsx new file mode 100644 index 00000000000..c0ec8395827 --- /dev/null +++ b/JSDemos/Demos/Localization/UsingIntl/React/App.tsx @@ -0,0 +1,103 @@ +/* eslint-disable import/no-unresolved */ +/* eslint-disable import/no-webpack-loader-syntax */ +import React from 'react'; +import DataGrid, { Column, Editing, FilterRow } from 'devextreme-react/data-grid'; +import SelectBox, { SelectBoxTypes } from 'devextreme-react/select-box'; + +import deMessages from 'devextreme/localization/messages/de.json'; +import ruMessages from 'devextreme/localization/messages/ru.json'; +import { locale, loadMessages, formatMessage } from 'devextreme/localization'; + +import service from './data.ts'; + +const editPopupOptions = { + width: 700, + height: 345, +}; + +const amountEditorOptions = { + format: 'currency', + showClearButton: true, +}; + +const selectBoxInputAttr = { id: 'selectInput' }; + +locale(sessionStorage.getItem('locale') || 'en'); + +loadMessages(deMessages); +loadMessages(ruMessages); +loadMessages(service.getDictionary()); + +const App = () => { + const [localeState, setLocaleState] = React.useState(sessionStorage.getItem('locale') || 'en'); + const locales = service.getLocales(); + const payments = service.getPayments(); + + const changeLocale = (e: SelectBoxTypes.ValueChangedEvent) => { + sessionStorage.setItem('locale', e.value); + setLocaleState(e.value); + document.location.reload(); + }; + + return ( +
+ + + + + + + + + +
+
Options
+
+ +   + +
+
+
+ ); +}; + +export default App; diff --git a/JSDemos/Demos/Localization/UsingIntl/React/data.js b/JSDemos/Demos/Localization/UsingIntl/React/data.ts similarity index 100% rename from JSDemos/Demos/Localization/UsingIntl/React/data.js rename to JSDemos/Demos/Localization/UsingIntl/React/data.ts diff --git a/JSDemos/Demos/Localization/UsingIntl/React/index.html b/JSDemos/Demos/Localization/UsingIntl/React/index.html index fb33a47d3fb..7aef756bcb4 100644 --- a/JSDemos/Demos/Localization/UsingIntl/React/index.html +++ b/JSDemos/Demos/Localization/UsingIntl/React/index.html @@ -12,7 +12,7 @@ diff --git a/JSDemos/Demos/Localization/UsingIntl/React/index.js b/JSDemos/Demos/Localization/UsingIntl/React/index.tsx similarity index 81% rename from JSDemos/Demos/Localization/UsingIntl/React/index.js rename to JSDemos/Demos/Localization/UsingIntl/React/index.tsx index d9d7442ce76..8acbec4b617 100644 --- a/JSDemos/Demos/Localization/UsingIntl/React/index.js +++ b/JSDemos/Demos/Localization/UsingIntl/React/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import App from './App.js'; +import App from './App.tsx'; ReactDOM.render( , diff --git a/JSDemos/Demos/Localization/UsingIntl/ReactJs/App.js b/JSDemos/Demos/Localization/UsingIntl/ReactJs/App.js new file mode 100644 index 00000000000..7d3830ea39a --- /dev/null +++ b/JSDemos/Demos/Localization/UsingIntl/ReactJs/App.js @@ -0,0 +1,93 @@ +/* eslint-disable import/no-unresolved */ +/* eslint-disable import/no-webpack-loader-syntax */ +import React from 'react'; +import DataGrid, { Column, Editing, FilterRow } from 'devextreme-react/data-grid'; +import SelectBox from 'devextreme-react/select-box'; +import deMessages from 'devextreme/localization/messages/de.json'; +import ruMessages from 'devextreme/localization/messages/ru.json'; +import { locale, loadMessages, formatMessage } from 'devextreme/localization'; +import service from './data.js'; + +const editPopupOptions = { + width: 700, + height: 345, +}; +const amountEditorOptions = { + format: 'currency', + showClearButton: true, +}; +const selectBoxInputAttr = { id: 'selectInput' }; +locale(sessionStorage.getItem('locale') || 'en'); +loadMessages(deMessages); +loadMessages(ruMessages); +loadMessages(service.getDictionary()); +const App = () => { + const [localeState, setLocaleState] = React.useState(sessionStorage.getItem('locale') || 'en'); + const locales = service.getLocales(); + const payments = service.getPayments(); + const changeLocale = (e) => { + sessionStorage.setItem('locale', e.value); + setLocaleState(e.value); + document.location.reload(); + }; + return ( +
+ + + + + + + + + +
+
Options
+
+ +   + +
+
+
+ ); +}; +export default App; diff --git a/JSDemos/Demos/Localization/UsingIntl/ReactJs/data.js b/JSDemos/Demos/Localization/UsingIntl/ReactJs/data.js new file mode 100644 index 00000000000..d12fc07e9b1 --- /dev/null +++ b/JSDemos/Demos/Localization/UsingIntl/ReactJs/data.js @@ -0,0 +1,120 @@ +const payments = [ + { + PaymentId: 1, + ContactName: 'Nancy Davolio', + CompanyName: 'Premier Buy', + Amount: 1740, + PaymentDate: '2013/01/06', + }, + { + PaymentId: 2, + ContactName: 'Andrew Fuller', + CompanyName: 'ElectrixMax', + Amount: 850, + PaymentDate: '2013/01/13', + }, + { + PaymentId: 3, + ContactName: 'Janet Leverling', + CompanyName: 'Video Emporium', + Amount: 2235, + PaymentDate: '2013/01/07', + }, + { + PaymentId: 4, + ContactName: 'Margaret Peacock', + CompanyName: 'Screen Shop', + Amount: 1965, + PaymentDate: '2013/01/03', + }, + { + PaymentId: 5, + ContactName: 'Steven Buchanan', + CompanyName: 'Braeburn', + Amount: 880, + PaymentDate: '2013/01/10', + }, + { + PaymentId: 6, + ContactName: 'Michael Suyama', + CompanyName: 'PriceCo', + Amount: 5260, + PaymentDate: '2013/01/17', + }, + { + PaymentId: 7, + ContactName: 'Robert King', + CompanyName: 'Ultimate Gadget', + Amount: 2790, + PaymentDate: '2013/01/21', + }, + { + PaymentId: 8, + ContactName: 'Laura Callahan', + CompanyName: 'EZ Stop', + Amount: 3140, + PaymentDate: '2013/01/01', + }, + { + PaymentId: 9, + ContactName: 'Anne Dodsworth', + CompanyName: 'Clicker', + Amount: 6175, + PaymentDate: '2013/01/24', + }, + { + PaymentId: 10, + ContactName: 'Clark Morgan', + CompanyName: 'Store of America', + Amount: 4575, + PaymentDate: '2013/01/11', + }, +]; +const locales = [ + { + Name: 'English', + Value: 'en', + }, + { + Name: 'Deutsch', + Value: 'de', + }, + { + Name: 'Русский', + Value: 'ru', + }, +]; +const dictionary = { + en: { + Number: 'Number', + Contact: 'Contact', + Company: 'Company', + Amount: 'Amount', + PaymentDate: 'Payment Date', + }, + de: { + Number: 'Nummer', + Contact: 'Ansprechpartner', + Company: 'Firma', + Amount: 'Betrag', + PaymentDate: 'Zahlungsdatum', + }, + ru: { + Number: 'Номер', + Contact: 'Имя', + Company: 'Организация', + Amount: 'Сумма', + PaymentDate: 'Дата оплаты', + }, +}; +export default { + getPayments() { + return payments; + }, + getLocales() { + return locales; + }, + getDictionary() { + return dictionary; + }, +}; diff --git a/JSDemos/Demos/Localization/UsingIntl/ReactJs/index.html b/JSDemos/Demos/Localization/UsingIntl/ReactJs/index.html new file mode 100644 index 00000000000..4d0ee54d8eb --- /dev/null +++ b/JSDemos/Demos/Localization/UsingIntl/ReactJs/index.html @@ -0,0 +1,44 @@ + + + + DevExtreme Demo + + + + + + + + + + + + + +
+
+
+ + diff --git a/JSDemos/Demos/Localization/UsingIntl/ReactJs/index.js b/JSDemos/Demos/Localization/UsingIntl/ReactJs/index.js new file mode 100644 index 00000000000..b853e0be824 --- /dev/null +++ b/JSDemos/Demos/Localization/UsingIntl/ReactJs/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './App.js'; + +ReactDOM.render(, document.getElementById('app')); diff --git a/JSDemos/Demos/Localization/UsingIntl/ReactJs/styles.css b/JSDemos/Demos/Localization/UsingIntl/ReactJs/styles.css new file mode 100644 index 00000000000..d30c1bc016b --- /dev/null +++ b/JSDemos/Demos/Localization/UsingIntl/ReactJs/styles.css @@ -0,0 +1,23 @@ +.options { + padding: 20px; + background-color: rgba(191, 191, 191, 0.15); + margin-top: 20px; +} + +.option { + margin-top: 10px; +} + +.caption { + font-size: 18px; + font-weight: 500; +} + +.option > label { + margin-right: 10px; +} + +.option > .dx-selectbox { + display: inline-block; + vertical-align: middle; +} diff --git a/JSDemos/configs/React/config.bundle.js b/JSDemos/configs/React/config.bundle.js index 0719bb84b0f..bed0ac0ea38 100644 --- a/JSDemos/configs/React/config.bundle.js +++ b/JSDemos/configs/React/config.bundle.js @@ -26,6 +26,7 @@ const bundleConfig = { }, map: { 'devextreme.react.systemjs.js': '../../../../../bundles/devextreme.react.systemjs.js', + 'devextreme/localization/messages': 'npm:devextreme/localization/messages', }, packages: { 'react': { @@ -36,6 +37,14 @@ const bundleConfig = { defaultExtension: 'js', main: 'umd/react-dom.development.js', }, + 'devextreme/localization/messages': { + format: 'json', + defaultExtension: '', + }, + 'devextreme-cldr-data': { + format: 'json', + defaultExtension: '', + }, }, }; diff --git a/JSDemos/configs/React/config.js b/JSDemos/configs/React/config.js index 53c79d5ee5a..64f402e287a 100644 --- a/JSDemos/configs/React/config.js +++ b/JSDemos/configs/React/config.js @@ -134,6 +134,7 @@ window.config = { 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', + 'devextreme-cldr-data': 'npm:devextreme-cldr-data', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', @@ -153,9 +154,17 @@ window.config = { 'devextreme/events/utils': { main: 'index', }, + 'devextreme/localization/messages': { + format: 'json', + defaultExtension: '', + }, 'devextreme/events': { main: 'index', - }/** globalize--vue&react */, + }/** globalize */, + 'devextreme-cldr-data': { + format: 'json', + defaultExtension: '', + }/**//** globalize--vue&react */, 'globalize': { main: '../globalize.js', defaultExtension: 'js', diff --git a/JSDemos/configs/ReactJs/config.bundle.js b/JSDemos/configs/ReactJs/config.bundle.js index 0719bb84b0f..754c39a693d 100644 --- a/JSDemos/configs/ReactJs/config.bundle.js +++ b/JSDemos/configs/ReactJs/config.bundle.js @@ -26,6 +26,7 @@ const bundleConfig = { }, map: { 'devextreme.react.systemjs.js': '../../../../../bundles/devextreme.react.systemjs.js', + 'devextreme/localization/messages': 'npm:devextreme/localization/messages', }, packages: { 'react': { diff --git a/JSDemos/configs/ReactJs/config.js b/JSDemos/configs/ReactJs/config.js index 410f9ceb321..64f402e287a 100644 --- a/JSDemos/configs/ReactJs/config.js +++ b/JSDemos/configs/ReactJs/config.js @@ -14,6 +14,9 @@ window.config = { 'typescript': { 'exports': 'ts', }, + 'devextreme/time_zone_utils.js': { + 'esModule': true, + }, 'devextreme/localization.js': { 'esModule': true, }, @@ -46,6 +49,7 @@ window.config = { 'react': 'npm:react/umd/react.development.js', 'react-dom': 'npm:react-dom/umd/react-dom.development.js', 'prop-types': 'npm:prop-types/prop-types.js', + 'sha-1': 'npm:sha-1/dist/sha1.cjs.js', /** signalr */ '@aspnet/signalr': 'npm:@aspnet/signalr/dist/cjs', @@ -130,6 +134,7 @@ window.config = { 'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js', + 'devextreme-cldr-data': 'npm:devextreme-cldr-data', // SystemJS plugins 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', @@ -149,9 +154,17 @@ window.config = { 'devextreme/events/utils': { main: 'index', }, + 'devextreme/localization/messages': { + format: 'json', + defaultExtension: '', + }, 'devextreme/events': { main: 'index', - }/** globalize--vue&react */, + }/** globalize */, + 'devextreme-cldr-data': { + format: 'json', + defaultExtension: '', + }/**//** globalize--vue&react */, 'globalize': { main: '../globalize.js', defaultExtension: 'js', diff --git a/utils/bundle/index.js b/utils/bundle/index.js index bc2b10a4fc1..61f1b279f24 100644 --- a/utils/bundle/index.js +++ b/utils/bundle/index.js @@ -140,6 +140,10 @@ const prepareConfigs = (framework) => { pathValue: 'node_modules/react-dom/*', }]; + additionPaths = { + 'devextreme/localization/messages/*': 'node_modules/devextreme/localization/messages/*', + }; + packages = [ 'react/umd/react.development.js', 'react-dom/umd/react-dom.development.js', diff --git a/utils/ts-to-js-converter/converter.ts b/utils/ts-to-js-converter/converter.ts index ab1f233adfa..2026da30298 100644 --- a/utils/ts-to-js-converter/converter.ts +++ b/utils/ts-to-js-converter/converter.ts @@ -57,6 +57,7 @@ const makeConfig = ( noEmit: false, skipLibCheck: true, allowSyntheticDefaultImports: true, + resolveJsonModule: true, }, });