Repository: DevExpress/devextreme-vue
Pull request #42 (2018-04-17 08:39:04)

Support common js vue bundle


Patch:
diff --git a/README.md b/README.md
index c0a1fd2..2dbb97b 100644
--- a/README.md
+++ b/README.md
@@ -106,7 +106,7 @@ new Vue({
 
 ... or directly in a vue template
 
-```
+```js
 new Vue({
   el: '#app',
   components: { DxButton },
@@ -171,9 +171,9 @@ For instance, you can specify the itemTemplate:
 ```html
 <div id="app">
     <dx-list :items="items">
-        <template slot="item" slot-scope="data">
+        <div slot="item" slot-scope="data">
             <i>This is my template for {{data}}</i>
-        </template>
+        </div>
     </dx-list>
 </div>
 ```
@@ -198,24 +198,12 @@ new Vue({
 
 ```html
 <div id="app">
-    <dx-list :items="items" itemTemplate="my-template">
-        <template slot="my-template" slot-scope="data">
-            <i>This is my template for {{data}}</i>
-        </template>
-    </dx-list>
-</div>
-```
-
-Note that in a single file component, you cannot use the `<template>` tag for a slot element (currently not allowed in Vue). Use `<div>` instead:
-
-```html
-<template>
-    <dx-list :items="items">
-        <div slot="item" slot-scope="data">
+    <dx-list :items="items" item-template="my-template">
+        <div slot="my-template" slot-scope="data">
             <i>This is my template for {{data}}</i>
         </div>
     </dx-list>
-</template>
+</div>
 ```
 
 ### <a name="components-with-transcluded-content"></a>Components with Transcluded Content ##
diff --git a/src/core/component.ts b/src/core/component.ts
index d2658bc..775a665 100644
--- a/src/core/component.ts
+++ b/src/core/component.ts
@@ -1,10 +1,12 @@
-import Vue, { VNode, VueConstructor } from "vue";
+import * as VueType from "vue";
+import { VNode, VueConstructor } from "vue";
 
 import * as events from "devextreme/events";
 
 const DX_TEMPLATE_WRAPPER_CLASS = "dx-template-wrapper";
 const DX_REMOVE_EVENT = "dxremove";
 
+const Vue = VueType.default || VueType;
 const DxComponent: VueConstructor = Vue.extend({
 
     render(createElement: (...args) => VNode): VNode {
diff --git a/tools/src/component-generator.ts b/tools/src/component-generator.ts
index a381111..f6a4baa 100644
--- a/tools/src/component-generator.ts
+++ b/tools/src/component-generator.ts
@@ -43,8 +43,10 @@ function createPropModel(p: IProp) {
 
 // tslint:disable:max-line-length
 const renderComponent: (model: IComponentModel) => string = createTempate(`
+import * as VueType from "vue";
+const Vue = VueType.default || VueType;
 import <#= it.widgetName #> from "devextreme/<#= it.dxExportPath #>";
-import Vue, { VueConstructor } from "vue";
+import { VueConstructor } from "vue";
 import BaseComponent from "<#= it.baseComponentPath #>";
 
 const Dx<#= it.name #>: VueConstructor = Vue.extend({


Test patch:
diff --git a/tools/src/component-generator.test.ts b/tools/src/component-generator.test.ts
index 5237ebd..f220d5f 100644
--- a/tools/src/component-generator.test.ts
+++ b/tools/src/component-generator.test.ts
@@ -3,8 +3,10 @@ import generate from "./component-generator";
 it("generates", () => {
     //#region EXPECTED
     const EXPECTED = `
+import * as VueType from "vue";
+const Vue = VueType.default || VueType;
 import CLASS_NAME from "devextreme/DX/WIDGET/PATH";
-import Vue, { VueConstructor } from "vue";
+import { VueConstructor } from "vue";
 import BaseComponent from "BASE_COMPONENT_PATH";
 
 const DxCLASS_NAME: VueConstructor = Vue.extend({
@@ -36,8 +38,10 @@ describe("props generation", () => {
     it("renders props in alphabetic order", () => {
         //#region EXPECTED
         const EXPECTED = `
+import * as VueType from "vue";
+const Vue = VueType.default || VueType;
 import CLASS_NAME from "devextreme/DX/WIDGET/PATH";
-import Vue, { VueConstructor } from "vue";
+import { VueConstructor } from "vue";
 import BaseComponent from "BASE_COMPONENT_PATH";
 
 const DxCLASS_NAME: VueConstructor = Vue.extend({
@@ -74,8 +78,10 @@ export { DxCLASS_NAME };
     it("renders props without type", () => {
         //#region EXPECTED
         const EXPECTED = `
+import * as VueType from "vue";
+const Vue = VueType.default || VueType;
 import CLASS_NAME from "devextreme/DX/WIDGET/PATH";
-import Vue, { VueConstructor } from "vue";
+import { VueConstructor } from "vue";
 import BaseComponent from "BASE_COMPONENT_PATH";
 
 const DxCLASS_NAME: VueConstructor = Vue.extend({
@@ -109,8 +115,10 @@ export { DxCLASS_NAME };
     it("renders props with type", () => {
         //#region EXPECTED
         const EXPECTED = `
+import * as VueType from "vue";
+const Vue = VueType.default || VueType;
 import CLASS_NAME from "devextreme/DX/WIDGET/PATH";
-import Vue, { VueConstructor } from "vue";
+import { VueConstructor } from "vue";
 import BaseComponent from "BASE_COMPONENT_PATH";
 
 const DxCLASS_NAME: VueConstructor = Vue.extend({
@@ -145,8 +153,10 @@ export { DxCLASS_NAME };
     it("renders props with acceptable values", () => {
         //#region EXPECTED
         const EXPECTED = `
+import * as VueType from "vue";
+const Vue = VueType.default || VueType;
 import CLASS_NAME from "devextreme/DX/WIDGET/PATH";
-import Vue, { VueConstructor } from "vue";
+import { VueConstructor } from "vue";
 import BaseComponent from "BASE_COMPONENT_PATH";
 
 const DxCLASS_NAME: VueConstructor = Vue.extend({
@@ -190,8 +200,10 @@ export { DxCLASS_NAME };
 it("generates class with model", () => {
     //#region EXPECTED
     const EXPECTED = `
+import * as VueType from "vue";
+const Vue = VueType.default || VueType;
 import CLASS_NAME from "devextreme/DX/WIDGET/PATH";
-import Vue, { VueConstructor } from "vue";
+import { VueConstructor } from "vue";
 import BaseComponent from "BASE_COMPONENT_PATH";
 
 const DxCLASS_NAME: VueConstructor = Vue.extend({