Publically hosted examples

Author: jakmeier

README.md

@@ -15,7 +15,9 @@ defined in JavaScript into the element.
 
 ## Examples
 
-Have a look at the examples in example directory. The best way is to clone the repository and run it locally, so you can play around with the code.
+The examples in this crate are hosted online: [div-rs Examples](https://div.paddlers.ch/)
+
+Have a look at the code in example directory. The best way is to clone the repository and run it locally, so you can play around with the code.
 
 You need npm, webpack, and wasm-pack for the examples to run on your machine.
 ```

examples/www/package.json

@@ -8,7 +8,8 @@
     },
     "scripts": {
         "build": "wasm-pack build ../hello_svelte; wasm-pack build ../hello_world; wasm-pack build ../reposition/; wasm-pack build ../styled/; wasm-pack build ../toggle; webpack --config webpack.config.js",
-        "start": "webpack-dev-server"
+        "start": "webpack-dev-server",
+        "release": "wasm-pack build ../hello_svelte; wasm-pack build ../hello_world; wasm-pack build ../reposition/; wasm-pack build ../styled/; wasm-pack build ../toggle; webpack --config webpack.prod.js"
     },
     "repository": {
         "type": "git",
@@ -35,12 +36,13 @@
     },
     "devDependencies": {
         "copy-webpack-plugin": "^5.0.0",
+        "css-loader": "^4.3.0",
+        "style-loader": "^1.2.1",
+        "svelte": "^3.29.0",
+        "svelte-loader": "^2.13.6",
         "webpack": "^4.29.3",
         "webpack-cli": "^3.1.0",
         "webpack-dev-server": "^3.1.5",
-        "svelte": "^3.29.0",
-        "css-loader": "^4.3.0",
-        "style-loader": "^1.2.1",
-        "svelte-loader": "^2.13.6"
+        "webpack-merge": "^5.2.0"
     }
 }

examples/www/webpack.common.js

@@ -0,0 +1,31 @@
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const path = require('path');
+
+module.exports = {
+    entry: "./bootstrap.js",
+    output: {
+        path: path.resolve(__dirname, "dist"),
+        filename: "bootstrap.js",
+    },
+    resolve: {
+        extensions: ['.mjs', '.js', '.svelte'],
+        mainFields: ['svelte', 'browser', 'module', 'main'],
+        modules: [path.resolve(__dirname, 'node_modules'), 'node_modules']
+    },
+    module: {
+        rules: [{
+            test: /\.(html|svelte)$/,
+            exclude: /node_modules/,
+            use: 'svelte-loader'
+        }, {
+            test: /\.css$/,
+            use: [
+                'style-loader',
+                'css-loader'
+            ]
+        }]
+    },
+    plugins: [
+        new CopyWebpackPlugin(['index.html'])
+    ],
+};

examples/www/webpack.config.js

@@ -1,32 +1,7 @@
-const CopyWebpackPlugin = require("copy-webpack-plugin");
-const path = require('path');
+const { merge } = require('webpack-merge');
 
-module.exports = {
-    entry: "./bootstrap.js",
-    output: {
-        path: path.resolve(__dirname, "dist"),
-        filename: "bootstrap.js",
-    },
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
     mode: "development",
-    resolve: {
-        extensions: ['.mjs', '.js', '.svelte'],
-        mainFields: ['svelte', 'browser', 'module', 'main'],
-        modules: [path.resolve(__dirname, 'node_modules'), 'node_modules']
-    },
-    module: {
-        rules: [{
-            test: /\.(html|svelte)$/,
-            exclude: /node_modules/,
-            use: 'svelte-loader'
-        }, {
-            test: /\.css$/,
-            use: [
-                'style-loader',
-                'css-loader'
-            ]
-        }]
-    },
-    plugins: [
-        new CopyWebpackPlugin(['index.html'])
-    ],
-};
+});

examples/www/webpack.prod.js

@@ -0,0 +1,7 @@
+const { merge } = require('webpack-merge');
+
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+    mode: "production",
+});