yFiles for HTML 2.2.0.1 demos

Author: micschro

demos/README.html

@@ -93,7 +93,7 @@
   </aside>
   <div class="content">
     <p id="general-intro" class="first-paragraph">
-      The <a href="https://www.yworks.com/products/yfiles-for-html">yFiles for HTML 2.2</a> demos and tutorials are extensive sample applications that present the
+      The <a href="https://www.yworks.com/products/yfiles-for-html">yFiles for HTML 2.2.0.1</a> demos and tutorials are extensive sample applications that present the
       features of the yFiles for HTML diagramming library.</p>
     <div id="tutorial-getting-started" class="hidden">
       <p>
@@ -148,8 +148,7 @@
       The complete source code of all of these samples is part of the yFiles for HTML package and available at <a
       href="https://github.com/yWorks/yfiles-for-html-demos">GitHub</a>.</p>
     <p>
-      To execute a specific sample, click on its card below or open the <code>index.html</code> file in the sample's
-      subdirectory.</p>
+      To execute a specific sample, click on its card below.</p>
     <p id="online-notice">
       All of these demos are also hosted at the <a href="https://live.yworks.com/demos/" target="_blank">yFiles for HTML
       Online Demos page</a>.</p>

demos/demo-server/server.js

@@ -59,6 +59,12 @@ app.use((req, res, next) => {
   res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept')
   res.header('Access-Control-Expose-Headers', 'X-Powered-By, X-yFiles-for-HTML-Demo-Server')
   res.header('X-yFiles-for-HTML-Demo-Server', 'true')
+  if (req.path && /demos[\\/](?!node_modules).*\.js$/i.test(req.path)) {
+    // disables caching
+    res.header('Cache-Control', 'no-store')
+  } else {
+    res.header('Cache-Control', 'public, max-age=31536000')
+  }
   next()
 })
 

demos/loading/webpack/README.html

@@ -48,7 +48,7 @@
 <div class="content">
   <div class="content-centered">
     <p>
-      This demo shows how to integrate the yFiles library in a <a href="https://webpack.js.org/">webpack 3</a> project.
+      This demo shows how to integrate the yFiles library in a <a href="https://webpack.js.org/">webpack</a> project.
     </p>
   </div>
   <div class="content-centered" style="padding-bottom: 20px">

demos/loading/webpack/index.template.html

@@ -52,7 +52,7 @@
   <h1 class="demo-sidebar-header">Description</h1>
   <div class="demo-sidebar-content">
     <p>
-      This demo shows how to integrate the yFiles library in a <a href="https://webpack.js.org/" target="_blank">webpack 4</a> project.
+      This demo shows how to integrate the yFiles library in a <a href="https://webpack.js.org/" target="_blank">webpack</a> project.
       Also note our <a href="https://github.com/yWorks/generator-yfiles-app" target="_blank">yeoman generator</a> that scaffolds yFiles
       projects with webpack 3 and webpack 4.
     </p>

demos/loading/webpack/webpack.config.js

@@ -26,6 +26,7 @@
  ** SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  **
  ***************************************************************************/
+const path = require('path')
 const CleanWebpackPlugin = require('clean-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
@@ -71,7 +72,12 @@ const baseConfig = {
       },
       {
         test: /\.(png|svg|jpg|gif)$/,
-        use: ['file-loader']
+        use: {
+          loader: 'file-loader',
+          options: {
+            publicPath: '.'
+          }
+        }
       }
     ]
   },
@@ -81,7 +87,14 @@ const baseConfig = {
       filename: '[name].css',
       chunkFilename: '[id].css'
     })
-  ]
+  ],
+  output: {
+    filename: '[name].js',
+    path: path.resolve(__dirname, 'dist'), // This is necessary when using the webpack dev server, so the bundles can
+    // be loaded from dist/
+    // https://webpack.js.org/configuration/output/#output-publicpath
+    publicPath: 'dist'
+  }
 }
 
 module.exports = function(env, options) {

demos/loading/webpack/webpack.dev.js

@@ -67,12 +67,5 @@ module.exports = {
       // add source maps for non-library code to enable convenient debugging
       exclude: ['yfiles.js']
     })
-  ],
-  output: {
-    filename: '[name].js',
-    path: path.resolve(__dirname, 'dist'), // This is necessary when using the webpack dev server, so the bundles can
-    // be loaded from dist/
-    // https://webpack.js.org/configuration/output/#output-publicpath
-    publicPath: 'dist'
-  }
+  ]
 }

demos/loading/webpack/webpack.prod.js

@@ -49,11 +49,6 @@ module.exports = {
     })
   ],
   output: {
-    filename: '[name].[hash].js',
-    path: path.resolve(__dirname, 'dist'),
-    // This is necessary when using the webpack dev server, so the bundles can
-    // be loaded from dist/
-    // https://webpack.js.org/configuration/output/#output-publicpath
-    publicPath: 'dist'
+    filename: '[name].[hash].js'
   }
 }

demos/toolkit/react/index.html

@@ -36,8 +36,7 @@
 
   <title>React Demo [yFiles for HTML]</title>
 
-  <link rel="stylesheet" href="../../node_modules/yfiles/yfiles.css">
-  <link rel="stylesheet" href="../../resources/style/demo.css">
+  <link rel="stylesheet" href="dist/app.css">
 
   <script src="../../resources/filesystem-warning.js"></script>
 </head>

demos/toolkit/react/package.json

@@ -17,12 +17,16 @@
     "yfiles": "^2.2.0"
   },
   "devDependencies": {
-    "@yworks/optimizer": "^1.0.0",
     "@babel/cli": "^7.2.3",
     "@babel/core": "^7.4.0",
     "@babel/preset-env": "^7.4.2",
     "@babel/preset-react": "^7.0.0",
+    "@yworks/optimizer": "^1.0.0",
     "babel-loader": "^8.0.5",
+    "clean-webpack-plugin": "^2.0.1",
+    "css-loader": "^2.1.1",
+    "file-loader": "^3.0.1",
+    "mini-css-extract-plugin": "^0.5.0",
     "webpack": "4.17.1",
     "webpack-cli": "3.1.0"
   }

demos/toolkit/react/src/app.jsx

@@ -1,3 +1,6 @@
+import 'yfiles/yfiles.css'
+import '../../../resources/style/demo.css'
+
 import React from 'react'
 import ReactGraphComponent from './ReactGraphComponent.jsx'
 import {DefaultGraph, ShapeNodeStyle} from 'yfiles'