diff --git a/docs/intro/installation/npm.md b/docs/intro/installation/npm.md index 8df5fa0a153..e3699a1994c 100644 --- a/docs/intro/installation/npm.md +++ b/docs/intro/installation/npm.md @@ -69,6 +69,10 @@ As of the 2022.3.1109 version, the `package.json` file comes with three [fields To bundle the Kendo UI scripts by using one of the [module systems](#3-choose-a-module-system-to-use), you can use a plugin such as [rollup](https://rollupjs.org/guide/en/). +> Starting from version 2023.3.718, the `kendo` instance is exported as a default export for the CommonJS and ECMAScript modules. This allows you to: +> * Use the `import kendo from '@progress/kendo-ui'` syntax to import the Kendo UI scripts in your application. +> * Use the `kendo` instance to get the jQuery in which the Kendo UI widgets are defined. For example, `const $ = kendo.jQuery; $("#grid").kendoGrid({...});`. + ### ECMAScript To bundle the ECMAScript files: @@ -237,4 +241,5 @@ To bundle the UMD files: * [Installing Kendo UI for jQuery by Using the CDN Services]({% slug kendoui_cdn_services_installation %}) * [Installing Kendo UI for jQuery with NuGet]({% slug kendoui_nuget_packages %}) * [Getting Up and Running with Your Kendo UI for jQuery Project (Guide)]({% slug getting_started_installation_kendoui %}) +* [Module Bundlers]({% slug modulke_bundlers_integration_kendoui %}) * [Using Script License Code]({% slug using-license-code %}) diff --git a/docs/third-party/angular2.md b/docs/third-party/angular2.md index 0e49abb75a4..a187cd841ce 100644 --- a/docs/third-party/angular2.md +++ b/docs/third-party/angular2.md @@ -29,4 +29,5 @@ For the sake of distinction, Kendo UI Professional (subject of this documentatio * [Telerik Data Access]({% slug bindtotelerikdataaccesstool_integration_kendoui %}) * [SystemJS Support]({% slug systemjs_integration_kendoui %}) * [Webpack Support]({% slug webpacksupport_integration_kendoui %}) +* [Module Bundlers]({% slug module_bundlers_integration_kendoui %}) * [Aurelia]({% slug aurelia_integration_kendoui %}) diff --git a/docs/third-party/aurelia.md b/docs/third-party/aurelia.md index 2d553693ef7..97c7aaa1602 100644 --- a/docs/third-party/aurelia.md +++ b/docs/third-party/aurelia.md @@ -1,103 +1,104 @@ ---- -title: Aurelia -page_title: Aurelia - Kendo UI Third-Party Tools -description: "Create Aurelia applications by using Kendo UI controls through applying the Aurelia-KendoUI Bridge." -slug: aurelia_integration_kendoui ---- - -# Aurelia - -[Aurelia](http://aurelia.io/) is an open-source, vanilla-JavaScript client framework for mobile, desktop, and web. It is written in ECMAScript 2016 and helps you create a maintainable, testable, and extensible UI. - -## Aurelia-KendoUI Bridge - -The [Aurelia-KendoUI Bridge](http://aurelia-ui-toolkits.github.io/demo-kendo/#/about/about) creates native Aurelia components for the Kendo UI suite, so that developers are able to build Aurelia applications by using the Kendo UI toolkit. This interface is a structured and configurable collection of JavaScript classes. It wraps native Kendo UI controls and presents them as Aurelia components. - -The skeleton of the Bridge is the standard Aurelia plugin setup and the [KendoUI Components Catalog index](http://aurelia-ui-toolkits.github.io/demo-kendo/#/catalog-index) is the resulting output of its implementation and development. - -This Catalogue is an Aurelia application that serves two main purposes: - -* Allows developers to verify the correct function of the wrapper code, which presents the Kendo UI native control as an Aurelia component. -* Continuously shares the status of the project by demonstrating different ways of using each component to render Kendo UI controls. - -For more information on the Aurelia-KendoUI Bridge functionalities, refer to [this blog post by Aurelia's founder, Rob Eisenberg](http://blog.durandal.io/2016/01/28/aurelia-and-kendo-ui/). - -## Prerequisites and Installation - -To get your project up and running, refer to the page on [installing the Aurelia-KendoUI Bridge](http://aurelia-ui-toolkits.github.io/demo-kendo/#/installation). - -## Basic Usage - -The following example demonstrates code snippets for Grid components. For more runnable examples on all Aurelia-KendoUI controls the Bridge supports, refer to the [page of the Aurelia-KendoUI components catalog](http://aurelia-ui-toolkits.github.io/demo-kendo/#/samples/grid/basic-use). - -```tab-View - -``` -```tab-ViewModel - export class BasicUse { - - pageable = { - refresh: true, - pageSizes: true, - buttonCount: 10 - }; - - constructor() { - this.datasource = { - type: 'odata', - transport: { - read: '//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers' - }, - pageSize: 5 - }; - } - } -``` -```tab-CSS - #grid-basic-use .customer-photo { - display: inline-block; - width: 32px; - height: 32px; - border-radius: 50%; - background-size: 32px 35px; - background-position: center center; - vertical-align: middle; - line-height: 32px; - box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2); - margin-left: 5px; - } - - #grid-basic-use .customer-name { - display: inline-block; - vertical-align: middle; - line-height: 32px; - padding-left: 3px; - } -``` - -## See Also - -* [SharePoint Add-Ins]({% slug sharepoint_tutorials %}) -* [Twitter Bootstrap]({% slug twitterbootstrapintegration_integration_kendoui %}) -* [Angular 2.0]({% slug angular2support_integration_kendoui %}) -* [RequireJS]({% slug requirejs_integration_kendoui %}) -* [TypeScript]({% slug typescript_integration_kendoui %}) -* [Visual Studio IntelliSense]({% slug visualstudiointellisense_integration_kendoui %}) -* [Telerik Data Access]({% slug bindtotelerikdataaccesstool_integration_kendoui %}) -* [SystemJS Support]({% slug systemjs_integration_kendoui %}) -* [Webpack Support]({% slug webpacksupport_integration_kendoui %}) +--- +title: Aurelia +page_title: Aurelia - Kendo UI Third-Party Tools +description: "Create Aurelia applications by using Kendo UI controls and applying the Aurelia-KendoUI Bridge." +slug: aurelia_integration_kendoui +--- + +# Aurelia + +[Aurelia](http://aurelia.io/) is an open-source, vanilla-JavaScript client framework for mobile, desktop, and web. It is written in ECMAScript 2016 and helps you create a maintainable, testable, and extensible UI. + +## Aurelia-Kendo UI Bridge + +The [Aurelia-Kendo UI Bridge](http://aurelia-ui-toolkits.github.io/demo-kendo/#/about/about) creates native Aurelia components for the Kendo UI suite so that developers can build Aurelia applications by using the Kendo UI toolkit. This interface is a structured and configurable collection of JavaScript classes. It wraps native Kendo UI controls and presents them as Aurelia components. + +The skeleton of the Bridge is the standard Aurelia plugin setup and the [Kendo UI Components Catalog index](http://aurelia-ui-toolkits.github.io/demo-kendo/#/catalog-index) is the resulting output of its implementation and development. + +This Catalog is an Aurelia application that serves two main purposes: + +* Allows developers to verify the correct function of the wrapper code, which presents the Kendo UI native control as an Aurelia component. +* Continuously shares the status of the project by demonstrating different ways of using each component to render Kendo UI controls. + +For more information on the Aurelia-Kendo UI Bridge functionalities, refer to [this blog post by Aurelia's founder, Rob Eisenberg](http://blog.durandal.io/2016/01/28/aurelia-and-kendo-ui/). + +## Prerequisites and Installation + +To get your project up and running, refer to the page on [installing the Aurelia-Kendo UI Bridge](http://aurelia-ui-toolkits.github.io/demo-kendo/#/installation). + +## Basic Usage + +The following example demonstrates code snippets for Grid components. For more runnable examples of all Aurelia-Kendo UI controls that the Bridge supports, refer to the [Aurelia-Kendo UI components catalog](http://aurelia-ui-toolkits.github.io/demo-kendo/#/samples/grid/basic-use). + +```tab-View + +``` +```tab-ViewModel + export class BasicUse { + + pageable = { + refresh: true, + pageSizes: true, + buttonCount: 10 + }; + + constructor() { + this.datasource = { + type: 'odata', + transport: { + read: '//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers' + }, + pageSize: 5 + }; + } + } +``` +```tab-CSS + #grid-basic-use .customer-photo { + display: inline-block; + width: 32px; + height: 32px; + border-radius: 50%; + background-size: 32px 35px; + background-position: center center; + vertical-align: middle; + line-height: 32px; + box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2); + margin-left: 5px; + } + + #grid-basic-use .customer-name { + display: inline-block; + vertical-align: middle; + line-height: 32px; + padding-left: 3px; + } +``` + +## See Also + +* [SharePoint Add-Ins]({% slug sharepoint_tutorials %}) +* [Twitter Bootstrap]({% slug twitterbootstrapintegration_integration_kendoui %}) +* [Angular 2.0]({% slug angular2support_integration_kendoui %}) +* [RequireJS]({% slug requirejs_integration_kendoui %}) +* [TypeScript]({% slug typescript_integration_kendoui %}) +* [Visual Studio IntelliSense]({% slug visualstudiointellisense_integration_kendoui %}) +* [Telerik Data Access]({% slug bindtotelerikdataaccesstool_integration_kendoui %}) +* [SystemJS Support]({% slug systemjs_integration_kendoui %}) +* [Webpack Support]({% slug webpacksupport_integration_kendoui %}) +* [Module Bundlers]({% slug module_bundlers_integration_kendoui %}) diff --git a/docs/third-party/kinvey.md b/docs/third-party/kinvey.md index 38f72f03b0f..b7bd092d54d 100644 --- a/docs/third-party/kinvey.md +++ b/docs/third-party/kinvey.md @@ -123,4 +123,5 @@ The following example demonstrates how to configure the `destroy` transport oper * [Telerik Data Access]({% slug bindtotelerikdataaccesstool_integration_kendoui %}) * [SystemJS Support]({% slug systemjs_integration_kendoui %}) * [Webpack Support]({% slug webpacksupport_integration_kendoui %}) +* [Module Bundlers]({% slug module_bundlers_integration_kendoui %}) * [Aurelia]({% slug aurelia_integration_kendoui %}) diff --git a/docs/third-party/module-bundlers.md b/docs/third-party/module-bundlers.md new file mode 100644 index 00000000000..cdb9c253f80 --- /dev/null +++ b/docs/third-party/module-bundlers.md @@ -0,0 +1,183 @@ +--- +title: Module Bundlers +page_title: Module Bundlers - Kendo UI Third-Party Tools +description: "Learn how to use the @progress/kendo-ui package with modern module bundlers like webpack, rollup, esbuild, and Vite's dev server)." +slug: module_bundlers_integration_kendoui +--- + +# Module Bundlers + +The recommended approach to include Kendo UI is by using the NPM package. + +Version 2023.3.718 of the `@progress/kendo-ui` package provides various improvements in the support for modern module bundlers. If you use an older version, consider upgrading to the latest one to take advantage of the improvements. + +## Using NPM + +As of the Kendo UI 2016 Q2 SP1 release, both Kendo UI Core and Kendo UI Professional are distributed in an NPM format. For more details, refer to [the installation instructions]({% slug kendoui_npm_packages_kendoui_installation %}). + +The Kendo UI Core NPM package is available as [`kendo-ui-core`](https://www.npmjs.com/package/kendo-ui-core) on [http://npmjs.com/](http://npmjs.com/) and is accessible without credentials. +The Kendo UI NPM package is available as [`@progress/kendo-ui`](https://www.npmjs.com/package/@progress/kendo-ui) in the NPM registry. + +## Module Dependencies + +The Kendo UI NPM package requires jQuery—make sure you register it as a dependency in your project. + +``` + npm install --save jquery +``` + +or + +``` + { + "dependencies": { + "jquery": "^3.6.0" + } + } +``` + +## Handling the jQuery Instance + +The Kendo UI for jQuery library presumes that the jQuery instance is available as a global variable. With the modern module bundlers, you can register a global variable by following the specific instruction of the bundler. For example: + +* With rollup, use globals: + +```javascript + // rollup.config.js + export default { + input: 'index.js', + output: [{ + file: 'dist/bundled.js', + sourcemap: 'inline', + globals: { + jquery: '$' + } + }], + external: ['jquery'], + treeshake: false, + } +``` + +* With webpack, use the [ProvidePlugin](https://webpack.js.org/plugins/provide-plugin/): + +```javascript + // webpack.config.js + const webpack = require('webpack'); + + module.exports = { + //... + plugins: [ + new webpack.ProvidePlugin({ + $: 'jquery', + jQuery: 'jquery' + }) + ] + }; +``` + +Registering a global variable will ultimately enable you to avoid importing jQuery as a module in your JS/TS file and still have jQuery available globally: + +```javascript + import `@progress/kendo-ui`; + + $("#grid").kendoGrid({...grid configs...}); +``` + + +If the module bundler you are using cannot register a global variable (for example, esbuild and Vite's dev server), you can get the default export from the `@progress/kendo-ui` package and use it to get the jQuery instance imported by `@progress/kendo-ui`. + +> This approach is supported with version 2023.3.718 or later. + +```javascript + import kendo from '@progress/kendo-ui'; + + const $ = kendo.jQuery; + + $("#grid").kendoGrid({...grid configs...}); +``` + +## Using the @progress/kendo-ui Package as a Global Variable + +As with the jQuery instance, when possible, register the `@progress/kendo-ui` package as a global variable. That will ultimately enable you to avoid importing the package in your JS/TS file and still have the Kendo UI available globally: + +Webpack, for example, requires the following setup for the `webpack.config.js` and the JS/TS files: + +* `webpack.config.js`: + +```javascript + // webpack.config.js + const webpack = require('webpack'); + + module.exports = { + //... + plugins: [ + new webpack.ProvidePlugin({ + $: 'jquery', + jQuery: 'jquery', + kendo: '@progress/kendo-ui', + 'window.kendo': '@progress/kendo-ui' + }) + ] + }; +``` + +* JS/TS file: + +```javascript + $("#grid").kendoGrid({...grid configs...}); +``` + +## Picking Up the Right Modules + +Prior to version 2022.3.1109, the `@progress/kendo-ui` package was published only with CommonJS modules and bundlers. Using these versions of the module requires you to utilize a compatible CommonJS loader plugin to compile/bundle your code. + +As of version 2022.3.1109, the `@progress/kendo-ui` package includes both CommonJS and ES modules and the module bundler will automatically pick up the module system it requires based on your configuration and the type of project you are building. + +If, for some reason, you need to instruct the module bundler to pick up a specific module system, you can do that by using the `module` field in the `package.json` file or setting that up through the configuration of the module bundler. + +For example, with webpack you need to: + +* Set up the `resolve.mainFields` ([resolve.mainFields](https://webpack.js.org/configuration/resolve/#resolvemainfields)) to rearrange the order of the fields that webpack will search to find the entry point of the package: + +```javascript + // webpack.config.js + module.exports = { + //... + resolve: { + mainFields: ['main', 'module'] // Use the CommonJS module and ESM as a fallback. + } + }; +``` + +or + +* make an [alias](https://webpack.js.org/configuration/resolve/#resolvealias) for the `@progress/kendo-ui` package and point it to the `module` field of the package: + +```javascript + // webpack.config.js + module.exports = { + //... + resolve: { + alias: { + '@progress/kendo-ui': path.resolve(__dirname, 'node_modules/@progress/kendo-ui/js/kendo.all.js') // Use the CommonJS module. + } + } + }; +``` + +To set up the same with the module bundler you are using, refer to its documentation. + +## See Also + +* [Installing with NPM]({% slug kendoui_npm_packages_kendoui_installation %}) +* [Installing Kendo UI for jQuery by Using the CDN Services]({% slug kendoui_cdn_services_installation %}) +* [Installing Kendo UI for jQuery with NuGet]({% slug kendoui_nuget_packages %}) +* [SharePoint Add-Ins]({% slug sharepoint_tutorials %}) +* [Twitter Bootstrap]({% slug twitterbootstrapintegration_integration_kendoui %}) +* [Angular 2.0]({% slug angular2support_integration_kendoui %}) +* [RequireJS]({% slug requirejs_integration_kendoui %}) +* [TypeScript]({% slug typescript_integration_kendoui %}) +* [Visual Studio IntelliSense]({% slug visualstudiointellisense_integration_kendoui %}) +* [Telerik Data Access]({% slug bindtotelerikdataaccesstool_integration_kendoui %}) +* [SystemJS Support]({% slug systemjs_integration_kendoui %}) +* [Aurelia]({% slug aurelia_integration_kendoui %}) diff --git a/docs/third-party/react.md b/docs/third-party/react.md index 5635366f1a8..0ff408909df 100644 --- a/docs/third-party/react.md +++ b/docs/third-party/react.md @@ -97,4 +97,5 @@ The Kendo UI for jQuery widgets can be used inside a React application following * [Telerik Data Access]({% slug bindtotelerikdataaccesstool_integration_kendoui %}) * [SystemJS Support]({% slug systemjs_integration_kendoui %}) * [Webpack Support]({% slug webpacksupport_integration_kendoui %}) +* [Module Bundlers]({% slug module_bundlers_integration_kendoui %}) * [Aurelia]({% slug aurelia_integration_kendoui %}) diff --git a/docs/third-party/sharepoint-add-ins.md b/docs/third-party/sharepoint-add-ins.md index a5834fed25e..6857e3c371c 100644 --- a/docs/third-party/sharepoint-add-ins.md +++ b/docs/third-party/sharepoint-add-ins.md @@ -64,4 +64,5 @@ For more information on the Kendo UI Data Source abstraction, refer to [its intr * [Telerik Data Access]({% slug bindtotelerikdataaccesstool_integration_kendoui %}) * [SystemJS Support]({% slug systemjs_integration_kendoui %}) * [Webpack Support]({% slug webpacksupport_integration_kendoui %}) +* [Module Bundlers]({% slug module_bundlers_integration_kendoui %}) * [Aurelia]({% slug aurelia_integration_kendoui %}) diff --git a/docs/third-party/systemjs.md b/docs/third-party/systemjs.md index 0e29bf304c8..e1249fbe649 100644 --- a/docs/third-party/systemjs.md +++ b/docs/third-party/systemjs.md @@ -275,4 +275,5 @@ The following example demonstrates the configuration for SystemJS 0.20.x. * [Visual Studio IntelliSense]({% slug visualstudiointellisense_integration_kendoui %}) * [Telerik Data Access]({% slug bindtotelerikdataaccesstool_integration_kendoui %}) * [Webpack Support]({% slug webpacksupport_integration_kendoui %}) +* [Module Bundlers]({% slug module_bundlers_integration_kendoui %}) * [Aurelia]({% slug aurelia_integration_kendoui %}) diff --git a/docs/third-party/typescript.md b/docs/third-party/typescript.md index 4496c9cd5c8..cf87484c971 100644 --- a/docs/third-party/typescript.md +++ b/docs/third-party/typescript.md @@ -137,4 +137,5 @@ $(function () { * [Telerik Data Access]({% slug bindtotelerikdataaccesstool_integration_kendoui %}) * [SystemJS Support]({% slug systemjs_integration_kendoui %}) * [Webpack Support]({% slug webpacksupport_integration_kendoui %}) +* [Module Bundlers]({% slug module_bundlers_integration_kendoui %}) * [Aurelia]({% slug aurelia_integration_kendoui %}) diff --git a/docs/third-party/using-kendo-with-data-access.md b/docs/third-party/using-kendo-with-data-access.md index 410cdac4828..ac836c70bf8 100644 --- a/docs/third-party/using-kendo-with-data-access.md +++ b/docs/third-party/using-kendo-with-data-access.md @@ -141,4 +141,5 @@ The following example demonstrates some sample code you need. * [Visual Studio IntelliSense]({% slug visualstudiointellisense_integration_kendoui %}) * [SystemJS Support]({% slug systemjs_integration_kendoui %}) * [Webpack Support]({% slug webpacksupport_integration_kendoui %}) +* [Module Bundlers]({% slug module_bundlers_integration_kendoui %}) * [Aurelia]({% slug aurelia_integration_kendoui %}) diff --git a/docs/third-party/using-kendo-with-requirejs.md b/docs/third-party/using-kendo-with-requirejs.md index 73985747d73..074c224fb63 100644 --- a/docs/third-party/using-kendo-with-requirejs.md +++ b/docs/third-party/using-kendo-with-requirejs.md @@ -200,4 +200,5 @@ The following example demonstrates how to use a [custom Kendo script created wit * [Telerik Data Access]({% slug bindtotelerikdataaccesstool_integration_kendoui %}) * [SystemJS Support]({% slug systemjs_integration_kendoui %}) * [Webpack Support]({% slug webpacksupport_integration_kendoui %}) +* [Module Bundlers]({% slug module_bundlers_integration_kendoui %}) * [Aurelia]({% slug aurelia_integration_kendoui %}) diff --git a/docs/third-party/using-kendo-with-twitter-bootstrap.md b/docs/third-party/using-kendo-with-twitter-bootstrap.md index 2e8aedbdc81..07d89f8f4b6 100644 --- a/docs/third-party/using-kendo-with-twitter-bootstrap.md +++ b/docs/third-party/using-kendo-with-twitter-bootstrap.md @@ -148,4 +148,5 @@ The `form-control` Bootstrap CSS class is normally added to textboxes to apply b * [Telerik Data Access]({% slug bindtotelerikdataaccesstool_integration_kendoui %}) * [SystemJS Support]({% slug systemjs_integration_kendoui %}) * [Webpack Support]({% slug webpacksupport_integration_kendoui %}) +* [Module Bundlers]({% slug module_bundlers_integration_kendoui %}) * [Aurelia]({% slug aurelia_integration_kendoui %}) diff --git a/docs/third-party/vs-intellisense.md b/docs/third-party/vs-intellisense.md index 3593be68214..d3ee8e6dd7d 100644 --- a/docs/third-party/vs-intellisense.md +++ b/docs/third-party/vs-intellisense.md @@ -100,4 +100,5 @@ The following screenshots demonstrate how to declare variable types with [JSDoc * [Telerik Data Access]({% slug bindtotelerikdataaccesstool_integration_kendoui %}) * [SystemJS Support]({% slug systemjs_integration_kendoui %}) * [Webpack Support]({% slug webpacksupport_integration_kendoui %}) +* [Module Bundlers]({% slug module_bundlers_integration_kendoui %}) * [Aurelia]({% slug aurelia_integration_kendoui %}) diff --git a/docs/third-party/webpack.md b/docs/third-party/webpack.md index f4b7b8ad8e8..270585ad035 100644 --- a/docs/third-party/webpack.md +++ b/docs/third-party/webpack.md @@ -19,15 +19,10 @@ The Kendo UI NPM package is available as [`@progress/kendo-ui`](https://www.npmj > * The typescript step is optional—the NPM package can be consumed from vanilla JavaScript or with the Babel transpiler. > * The Kendo UI [TypeScript typings are global](https://github.com/typings/typings/blob/master/docs/faq.md#what-are-global-dependencies). This means that TypeScript will complain if you try to import the `kendo` object. Use the global reference instead. -```typescript -// This won't work -import kendo from 'kendo-ui-core'; +> Starting from version 2023.3.718, the `kendo` instance is exported as a default export for the CommonJS and ECMAScript modules. This allows you to: +> * Use the `import kendo from '@progress/kendo-ui'` syntax to import the Kendo UI scripts in your application. +> * Use the `kendo` instance to get the jQuery in which the Kendo UI widgets are defined. For example, `const $ = kendo.jQuery; $("#grid").kendoGrid({...});`. -// This works -import 'kendo-ui-core'; //or import '@progress/kendo-ui' to install the Kendo UI package - -console.log(kendo); -``` ## Using in JavaScript and TypeScript Applications To see the runnable examples on how to use Kendo UI with Webpack in both JavaScript and TypeScript applications, refer to the following [sample repository](https://github.com/telerik/kendo-ui-npm-example).