Add Angular and React generators

build/gulp/generator/gulpfile.js

@@ -0,0 +1,80 @@
+const gulp = require('gulp');
+const { generateComponents } = require('devextreme-generator/component-compiler');
+const generator = require('devextreme-generator/preact-generator').default;
+const ts = require('gulp-typescript');
+const lint = require('gulp-eslint');
+const plumber = require('gulp-plumber');
+const gulpIf = require('gulp-if');
+const merge = require('merge-stream');
+const babel = require('gulp-babel');
+
+const SRC = 'js/renovation/**/*.tsx';
+const DEST = 'js/renovation/';
+
+const GLOB_TS = require('../ts').GLOB_TS;
+const COMMON_SRC = ['js/**/*.*', '!' + GLOB_TS];
+
+const knownErrors = [
+    'Cannot find module \'preact\'.',
+    'Cannot find module \'preact/hooks\'.'
+];
+
+gulp.task('generate-components', function() {
+    const tsProject = ts.createProject('build/gulp/generator/ts-configs/preact.tsconfig.json');
+    generator.defaultOptionsModule = 'js/core/options/utils';
+
+    return gulp.src(SRC)
+        .pipe(generateComponents(generator))
+        .pipe(plumber(()=>null))
+        .pipe(tsProject({
+            error(e) {
+                if(!knownErrors.some(i => e.message.endsWith(i))) {
+                    console.log(e.message);
+                }
+            },
+            finish() {}
+        }))
+        .pipe(gulpIf(file => file.extname === '.js',
+            lint({
+                quiet: true,
+                fix: true,
+                useEslintrc: true
+            })
+        ))
+        .pipe(lint.format())
+        .pipe(gulp.dest(DEST));
+});
+
+function addGenerationTask(approach, knownErrors = []) {
+    const generator = require(`devextreme-generator/${approach}-generator`).default;
+    gulp.task(`generate-${approach}`, function() {
+        const tsProject = ts.createProject(`build/gulp/generator/ts-configs/${approach}.tsconfig.json`);
+        generator.defaultOptionsModule = 'js/core/options/utils';
+
+        return merge(
+            gulp.src(COMMON_SRC),
+            gulp.src('js/**/*.tsx')
+                .pipe(generateComponents(generator))
+                .pipe(plumber(() => null))
+                .pipe(tsProject({
+                    error(e) {
+                        if(!knownErrors.some(i => e.message.endsWith(i))) {
+                            console.log(e.message);
+                        }
+                    },
+                    finish() { }
+                }))
+        ).pipe(babel())
+            .pipe(gulp.dest(`artifacts/${approach}`));
+    });
+}
+
+addGenerationTask('react', ['Cannot find module \'csstype\'.']);
+addGenerationTask('angular', [
+    'Cannot find module \'@angular/core\'.',
+    'Cannot find module \'@angular/common\'.'
+]);
+
+gulp.task('generate-components-watch', gulp.series('generate-components', function() {
+    gulp.watch([SRC], gulp.series('generate-components'));
+}));

build/gulp/generator/ts-configs/angular.tsconfig.json

@@ -0,0 +1,15 @@
+{
+    "compilerOptions": {
+        "target": "ES2016",
+        "module": "ESNext",
+        "strict": false,
+        "jsx": "react",
+        "esModuleInterop": false,
+        "typeRoots": ["node_modules/@types"],
+        "forceConsistentCasingInFileNames": true,
+        "experimentalDecorators": true
+    },
+    "exclude": [
+        "node_modules"
+    ]
+}

build/gulp/generator/ts-configs/react.tsconfig.json

@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+        "target": "ES2016",
+        "module": "ESNext",
+        "strict": false,
+        "esModuleInterop": false,
+        "typeRoots": ["node_modules/@types"],
+        "forceConsistentCasingInFileNames": true,
+        "allowSyntheticDefaultImports": true,
+        "jsx": "react",
+        "declaration": true
+    },
+    "exclude": [
+        "node_modules"
+    ]
+}

build/gulp/transpile.js

@@ -8,10 +8,10 @@ const notify = require('gulp-notify');
 
 const context = require('./context.js');
 
-require('./generator');
+require('./generator/gulpfile');
 
 const GLOB_TS = require('./ts').GLOB_TS;
-const SRC = ['js/**/*.*', '!' + GLOB_TS, '!js/**/*.tsx', '!js/component_declaration/*.ts'];
+const SRC = ['js/**/*.*', '!' + GLOB_TS, '!js/**/*.tsx'];
 const TESTS_PATH = 'testing';
 const TESTS_SRC = TESTS_PATH + '/**/*.js';
 

gulpfile.js

@@ -21,7 +21,7 @@ require('./build/gulp/vendor');
 require('./build/gulp/ts');
 require('./build/gulp/localization');
 require('./build/gulp/style-compiler');
-require('./build/gulp/generator');
+require('./build/gulp/generator/gulpfile');
 require('./build/gulp/scss/tasks');
 
 const TEST_CI = Boolean(process.env['DEVEXTREME_TEST_CI']);

js/events/pointer.js

@@ -1,4 +1,4 @@
-import support from '../core/utils/support';
+import * as support from '../core/utils/support';
 import { each } from '../core/utils/iterator';
 import browser from '../core/utils/browser';
 import devices from '../core/devices';

js/renovation/widget.tsx

@@ -11,6 +11,10 @@ import {
     Ref,
     Slot,
 } from 'devextreme-generator/component_declaration/common';
+
+import '../events/click';
+import '../events/hover';
+
 import { active, dxClick, focus, hover, keyboard, resize, visibility } from '../events/short';
 import { each } from '../core/utils/iterator';
 import { extend } from '../core/utils/extend';

package.json

@@ -57,7 +57,7 @@
     "cldr-numbers-full": "latest",
     "cldrjs": "^0.5.0",
     "del": "^2.2.2",
-    "devextreme-generator": "^1.0.34",
+    "devextreme-generator": "^1.0.35",
     "devextreme-internal-tools": "~1.2.24",
     "enzyme": "^3.11.0",
     "enzyme-adapter-preact-pure": "^2.2.0",

playground/angular/README.md

@@ -0,0 +1,13 @@
+# README
+
+## Run Example
+
+Install packages using the following command:
+
+    npm install
+
+After instalation generate components and build scripts
+
+    npx gulp generate-angular
+
+Setup a local web server and run this application in it.

playground/angular/app/app.component.html

@@ -0,0 +1,7 @@
+<dx-button 
+  text="Click Me!"
+  (onClick)="onClick($event)"
+  icon="download"
+  iconPosition="right"
+>
+</dx-button>

playground/angular/app/app.component.ts

@@ -0,0 +1,27 @@
+import { NgModule, Component } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { DxButtonModule } from 'devextreme/renovation/button';
+
+@Component({
+    providers: [],
+    selector: 'demo-app',
+    styleUrls: [],
+    templateUrl: './app/app.component.html',
+})
+export class AppComponent {
+    onClick() {
+        alert('clicked');
+    }
+}
+@NgModule({
+    imports: [
+        BrowserModule,
+        DxButtonModule,
+    ],
+    declarations: [AppComponent],
+    bootstrap: [AppComponent],
+})
+export class AppModule {}
+
+platformBrowserDynamic().bootstrapModule(AppModule);

playground/angular/config.js

@@ -0,0 +1,56 @@
+System.config({
+    transpiler: 'ts',
+    typescriptOptions: {
+        module: 'commonjs',
+        emitDecoratorMetadata: true,
+        experimentalDecorators: true
+    },
+    meta: {
+        'typescript': {
+            'exports': 'ts'
+        }
+    },
+    paths: {
+        'npm:': 'https://unpkg.com/'
+    },
+    map: {
+        'ts': 'npm:[email protected]/lib/plugin.js',
+        'typescript': 'npm:[email protected]/lib/typescript.js',
+
+        '@angular/core': 'npm:@angular/[email protected]/bundles/core.umd.js',
+        '@angular/common': 'npm:@angular/[email protected]/bundles/common.umd.js',
+        '@angular/compiler': 'npm:@angular/[email protected]/bundles/compiler.umd.js',
+        '@angular/platform-browser': 'npm:@angular/[email protected]/bundles/platform-browser.umd.js',
+        '@angular/platform-browser-dynamic': 'npm:@angular/[email protected]/bundles/platform-browser-dynamic.umd.js',
+        '@angular/router': 'npm:@angular/[email protected]/bundles/router.umd.js',
+        '@angular/forms': 'npm:@angular/[email protected]/bundles/forms.umd.js',
+        '@angular/common/http': 'npm:@angular/[email protected]/bundles/common-http.umd.js',
+        'tslib': 'npm:tslib/tslib.js',
+
+        'rxjs': 'npm:[email protected]',
+        'rxjs/operators': 'npm:[email protected]/operators',
+
+        'jszip': 'npm:[email protected]/dist/jszip.min.js',
+        'quill': 'npm:[email protected]/dist/quill.js',
+        'devextreme': '../../artifacts/angular'
+    },
+    packages: {
+        'app': {
+            main: './app.component.ts',
+            defaultExtension: 'ts'
+        },
+        'devextreme': {
+            defaultExtension: 'js',
+        },
+        'devextreme/events': {
+            defaultExtension: 'js',
+            main: 'index.js'
+        },
+        'devextreme/events/utils': {
+            defaultExtension: 'js',
+            main: 'index.js'
+        },
+        'rxjs': { main: 'index.js', defaultExtension: 'js' },
+        'rxjs/operators': { main: 'index.js', defaultExtension: 'js' },
+    }
+});

playground/angular/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+    <title>DevExtreme Demo</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
+
+    <link rel="stylesheet" type="text/css" href="../../artifacts/css/dx.spa.css" />
+    <link rel="stylesheet" type="text/css" href="../../artifacts/css/dx.common.css" />
+    <link rel="stylesheet" type="text/css" href="../../artifacts/css/dx.light.css" />
+
+    <script src="https://unpkg.com/[email protected]/client/shim.min.js"></script>
+    <script src="https://unpkg.com/[email protected]/dist/zone.js"></script>
+    <script src="https://unpkg.com/[email protected]/Reflect.js"></script>
+    <script src="https://unpkg.com/[email protected]/dist/system.js"></script>
+
+    <script src="config.js"></script>
+    <script>
+        System.import('app').catch(console.error.bind(console));
+    </script>
+
+</head>
+
+<body class="dx-viewport">
+    <div class="demo-app">
+        <demo-app>Loading...</demo-app>
+    </div>
+</body>
+
+</html>

playground/angular/tsconfig.json

@@ -0,0 +1,29 @@
+{
+    "compileOnSave": false,
+    "compilerOptions": {
+      "baseUrl": "./",
+      "outDir": "./dist/out-tsc",
+      "sourceMap": true,
+      "declaration": false,
+      "downlevelIteration": true,
+      "experimentalDecorators": true,
+      "module": "esnext",
+      "moduleResolution": "node",
+      "importHelpers": true,
+      "target": "es2015",
+      "typeRoots": [
+        "node_modules/@types"
+      ],
+      "lib": [
+        "es2018",
+        "dom"
+      ]
+    },
+    "include": [
+        "app/**/*.ts"
+    ],
+    "angularCompilerOptions": {
+      "fullTemplateTypeCheck": true,
+      "strictInjectionParameters": true
+    }
+  }