858640-update

SyncfusionExamples · Jan 5, 2024 · fb59796 · fb59796
1 parent 6d9e344
commit fb59796
Show file tree

Hide file tree

Showing 27 changed files with 240 additions and 374 deletions.
diff --git a/Save and Load/Load PDF file from URL/TypeScriptClient/.gitignore b/Save and Load/Load PDF file from URL/TypeScriptClient/.gitignore
@@ -1,3 +1,2 @@
-src/**/*.js
-!src/system.config.js
+dist/
 node_modules/
diff --git a/Save and Load/Load PDF file from URL/TypeScriptClient/README.md b/Save and Load/Load PDF file from URL/TypeScriptClient/README.md
@@ -2,7 +2,7 @@
 
 This project is a skeleton application used to create [Essential JS 2](https://www.syncfusion.com/products/essential-js2) web application.
 
-The application contains Essential JS 2 button component for preview and all common settings are preconfigured.
+>This application uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher.
 
 ## Getting Started
 
@@ -57,9 +57,9 @@ If JDK is not installed in your local machine, you can download it from [here](h
 
 ## Running
 
-The application is configured with `browser-sync`, so it will serve the web application in your default browser.
+The application is configured with [webpack-dev-server](https://webpack.js.org/configuration/dev-server/#devserver), so it will serve the web application in your default browser.
 
-We used `SystemJS` for module loading.
+We have used [Webpack](https://github.com/webpack/webpack) for module loading.
 
 You can use the below npm script to run the web application.
 

diff --git a/Save and Load/Load PDF file from URL/TypeScriptClient/e2e/protractor.conf.js b/Save and Load/Load PDF file from URL/TypeScriptClient/e2e/protractor.conf.js
@@ -11,6 +11,7 @@ exports.config = {
     jasmineNodeOpts: {
         defaultTimeoutInterval: 10000
     },
+    directConnect: true,
 
     onPrepare: function() {
         browser.waitForAngularEnabled(false);

diff --git a/Save and Load/Load PDF file from URL/TypeScriptClient/gulpfile.js b/Save and Load/Load PDF file from URL/TypeScriptClient/gulpfile.js
@@ -5,52 +5,18 @@ var gulp = require('gulp');
 /** 
  * Compile TypeScript to JS
  */
-gulp.task('compile', gulp.series(function(done) {
-    var ts = require('gulp-typescript');
-    // Default typescript config
-    var defaultConfig = {
-        typescript: require('typescript')
-    };
-    var tsProject, tsResult;
-    // Create the typescript project
-    tsProject = ts.createProject('tsconfig.json', defaultConfig);
-    // Get typescript result
-    tsResult = gulp.src(['./src/**/*.ts'], { base: '.' })
-        .pipe(ts(tsProject))
-        .pipe(gulp.dest('./'))
-        .on('error', function(e) {
-            done(e);
-            process.exit(1);
-        }).on('end', function() {
+gulp.task('compile', function (done) {
+    var webpack = require('webpack');
+    var webpackStream = require('webpack-stream');
+    gulp.src(['./src/app/app.ts']).pipe(webpackStream({
+        config: require('./webpack.config.js')
+    }, webpack))
+        .pipe(gulp.dest('./dist'))
+        .on('end', function () {
             done();
         });
-}));
-
-/**
- * Load the sample in src/app/index
- */
-gulp.task('start', gulp.series('compile', function(done) {
-    var browserSync = require('browser-sync');
-    var bs = browserSync.create('Essential JS 2');
-    var options = {
-        server: {
-            baseDir: ['./src', './']
-        },
-        ui: false
-    };
-    bs.init(options, done);
-
-    /**
-    * Watching typescript file changes
-    */
-    gulp.watch('src/**/*.ts', gulp.series('compile', bs.reload)).on('change', reportChanges);
-}));
-
-
+});
 
-function reportChanges(event) {
-    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
-}
 /**
  * Testing spec files
  */
@@ -64,33 +30,31 @@ gulp.task('e2e-webdriver-update', webdriver_update({
     webdriverManagerArgs: ['--ie', '--edge']
 }));
 
-gulp.task('e2e-test', gulp.series('compile', function(done) {
+gulp.task('e2e-test', gulp.series('compile', function (done) {
     var browserSync = require('browser-sync');
     var bs = browserSync.create('Essential JS 2');
     var options = {
         server: {
             baseDir: [
-                './src/app/',
-                './src/resource/',
-                './node_modules/@syncfusion/ej2/'
+                './dist/',
             ],
             directory: true
         },
         ui: false,
         open: false,
         notify: false
     };
-    bs.init(options, function() {
+    bs.init(options, function () {
         gulp.src(['./spec/**/*.spec.js'])
             .pipe(protractor({
                 configFile: 'e2e/protractor.conf.js'
             }))
-            .on('error', function(e) {
+            .on('error', function (e) {
                 console.error('Error: ' + e.message);
                 done();
                 process.exit(1);
             })
-            .on('end', function() {
+            .on('end', function () {
                 done();
                 process.exit(0);
             });

diff --git a/Save and Load/Load PDF file from URL/TypeScriptClient/package.json b/Save and Load/Load PDF file from URL/TypeScriptClient/package.json
@@ -1,29 +1,38 @@
 {
-    "name": "ej2-quickstart",
-    "version": "0.0.1",
-    "description": "Essential JS 2 typescript quick start application",
-    "author": "Syncfusion Inc.",
-    "license": "SEE LICENSE IN license",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/syncfusion/ej2-quickstart.git"
-    },
-    "dependencies": {
-        "@syncfusion/ej2": "*"
-    },
-    "devDependencies": {
-        "browser-sync": "^2.18.12",
-        "gulp": "*",
-        "gulp-protractor": "*",
-        "gulp-typescript": "*",
-        "jasmine": "^2.6.0",
-        "systemjs": "^0.20.14",
-        "typescript": "*"
-    },
-    "scripts": {
-        "start": "gulp start",
-        "serve": "gulp e2e-serve",
-        "test": "gulp e2e-test",
-        "update-webdriver": "gulp e2e-webdriver-update"
-    }
+  "name": "ej2-quickstart",
+  "version": "0.0.1",
+  "description": "Essential JS 2 typescript quick start application",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/syncfusion/ej2-quickstart.git"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --mode development",
+    "build": "webpack --mode production",
+    "serve": "gulp e2e-serve",
+    "test": "gulp e2e-test",
+    "update-webdriver": "gulp e2e-webdriver-update"
+  },
+  "devDependencies": {
+    "ajv": "^8.11.2",
+    "browser-sync": "^2.18.12",
+    "gulp": "*",
+    "typescript": "*",
+    "gulp-protractor": "*",
+    "gulp-typescript": "*",
+    "jasmine": "^2.6.0",
+    "css-loader": "^6.7.2",
+    "ts-loader": "^9.4.1",
+    "mini-css-extract-plugin": "^2.7.0",
+    "html-webpack-plugin": "^5.5.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.0",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-stream": "^7.0.0"
+  },
+  "dependencies": {
+    "@syncfusion/ej2": "*"
+  }
 }
diff --git a/Save and Load/Load PDF file from URL/TypeScriptClient/src/app/app.ts b/Save and Load/Load PDF file from URL/TypeScriptClient/src/app/app.ts
@@ -1,12 +1,12 @@
 import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, 
-         ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
+    ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
 
 PdfViewer.Inject( Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, 
-                  BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
+             BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
 
 let pdfviewer: PdfViewer = new PdfViewer();
 // Replace the "localhost:44396" with the actual URL of your server
 pdfviewer.serviceUrl = 'https://localhost:44396/pdfviewer';
 // Replace correct PDF Document URL want to load
-pdfviewer.documentPath="https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf"
+pdfviewer.documentPath="https://cdn.syncfusion.com/content/PDFViewer/pdf-succinctly.pdf"
 pdfviewer.appendTo('#PdfViewer');
diff --git a/Save and Load/Load PDF file from URL/TypeScriptClient/src/index.html b/Save and Load/Load PDF file from URL/TypeScriptClient/src/index.html
@@ -9,17 +9,10 @@
     <meta name="author" content="Syncfusion" />
     <link rel="shortcut icon" href="resources/favicon.ico" />
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
-
-    <!--style reference from app-->
-    <link href="/styles/styles.css" rel="stylesheet" />
-
-    <!--system js reference and configuration-->
-    <script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
-    <script src="system.config.js" type="text/javascript"></script>
 </head>
 
 <body>
-    <!--Element which will render as PdfViewer -->
+    <!--Element which will render as PDF Viewer -->
     <div id="PdfViewer"></div>
 </body>
 

diff --git a/Save and Load/Load PDF file from URL/TypeScriptClient/src/styles/styles.css b/Save and Load/Load PDF file from URL/TypeScriptClient/src/styles/styles.css
@@ -1,8 +1,9 @@
-@import '../node_modules/@syncfusion/ej2-base/styles/material.css';  
-@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
-@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
-@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
-@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
-@import "../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";
+@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';  
+@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';
+@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
+@import "../../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css";
+@import "../../node_modules/@syncfusion/ej2-notifications/styles/material.css";
diff --git a/Save and Load/Load PDF file from URL/TypeScriptClient/tsconfig.json b/Save and Load/Load PDF file from URL/TypeScriptClient/tsconfig.json
@@ -1,23 +1,12 @@
 {
-    "compilerOptions": {
-        "target": "es5",
-        "module": "amd",
-        "removeComments": true,
-        "noLib": false,
-        "sourceMap": true,
-        "pretty": true,
-        "allowUnreachableCode": false,
-        "allowUnusedLabels": false,
-        "noImplicitAny": true,
-        "noImplicitReturns": true,
-        "noImplicitUseStrict": false,
-        "noFallthroughCasesInSwitch": true,
-        "allowJs": false,
-        "noEmitOnError": true,
-        "forceConsistentCasingInFileNames": true,
-        "moduleResolution": "node",
-        "suppressImplicitAnyIndexErrors": true,
-        "lib": ["es6", "dom"]
-    },
-    "compileOnSave": false
-}
+  "compilerOptions": {
+    "target": "es2016",           
+    "module": "ES6",                                
+    "sourceMap": true,                                
+    "esModuleInterop": true,                             
+    "forceConsistentCasingInFileNames": true,            
+    "strict": true,                                      
+    "skipLibCheck": true,                               
+    "moduleResolution": "node"
+  }
+}
diff --git a/Save and Load/Load PDF file from base64 string/TypeScriptClient/.gitignore b/Save and Load/Load PDF file from base64 string/TypeScriptClient/.gitignore
@@ -1,3 +1,2 @@
-src/**/*.js
-!src/system.config.js
+dist/
 node_modules/
diff --git a/Save and Load/Load PDF file from base64 string/TypeScriptClient/README.md b/Save and Load/Load PDF file from base64 string/TypeScriptClient/README.md
@@ -2,7 +2,7 @@
 
 This project is a skeleton application used to create [Essential JS 2](https://www.syncfusion.com/products/essential-js2) web application.
 
-The application contains Essential JS 2 button component for preview and all common settings are preconfigured.
+>This application uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher.
 
 ## Getting Started
 
@@ -57,9 +57,9 @@ If JDK is not installed in your local machine, you can download it from [here](h
 
 ## Running
 
-The application is configured with `browser-sync`, so it will serve the web application in your default browser.
+The application is configured with [webpack-dev-server](https://webpack.js.org/configuration/dev-server/#devserver), so it will serve the web application in your default browser.
 
-We used `SystemJS` for module loading.
+We have used [Webpack](https://github.com/webpack/webpack) for module loading.
 
 You can use the below npm script to run the web application.
 

diff --git a/Save and Load/Load PDF file from base64 string/TypeScriptClient/e2e/protractor.conf.js b/Save and Load/Load PDF file from base64 string/TypeScriptClient/e2e/protractor.conf.js
@@ -11,6 +11,7 @@ exports.config = {
     jasmineNodeOpts: {
         defaultTimeoutInterval: 10000
     },
+    directConnect: true,
 
     onPrepare: function() {
         browser.waitForAngularEnabled(false);