Add "Actions - Basics" example.

15 - Actions - TODO/1. Basics/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "svelte-actions-basics",
+  "description": "Actions - Basics",
+  "version": "1.0.0",
+  "author": "Rick Beerendonk",
+  "license": "EUPL-1.2",
+  "devDependencies": {
+    "cross-env": "7.0.0",
+    "css-loader": "3.4.2",
+    "html-webpack-plugin": "3.2.0",
+    "mini-css-extract-plugin": "0.9.0",
+    "serve": "11.3.0",
+    "style-loader": "1.1.3",
+    "svelte": "3.18.2",
+    "svelte-loader": "2.13.6",
+    "webpack": "4.41.6",
+    "webpack-cli": "3.3.11",
+    "webpack-dev-server": "3.10.3"
+  },
+  "scripts": {
+    "build": "cross-env NODE_ENV=production webpack",
+    "start": "webpack-dev-server --open"
+  }
+}

15 - Actions - TODO/1. Basics/src/App.svelte

@@ -0,0 +1,32 @@
+<script>
+  let show = true;
+
+  function action(node) {
+    console.log('> Element created: ', node);
+
+    return {
+      destroy() {
+        console.log('< Element destroyed: ', node);
+      }
+    };
+  }
+</script>
+
+<style>
+  .comment {
+    color: gray;
+  }
+</style>
+
+<p class="comment">
+  Open the console to see execution of action when the element is shown/hidden.
+</p>
+
+<button on:click={() => (show = !show)}>Toggle</button>
+
+{#if show}
+  <div use:action>Element</div>
+{/if}
+
+<!-- European Union Public License version 1.2 -->
+<!-- Copyright © 2020 Rick Beerendonk -->

15 - Actions - TODO/1. Basics/src/main.js

@@ -0,0 +1,10 @@
+/*! European Union Public License version 1.2 !*/
+/*! Copyright © 2020 Rick Beerendonk          !*/
+
+import App from './App';
+
+const app = new App({
+  target: document.body
+});
+
+export default app;

15 - Actions - TODO/1. Basics/webpack.config.js

@@ -0,0 +1,63 @@
+/*! European Union Public License version 1.2 !*/
+/*! Copyright © 2020 Rick Beerendonk          !*/
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const mode = process.env.NODE_ENV || 'development';
+const prod = mode === 'production';
+
+module.exports = {
+  entry: {
+    bundle: ['./src/main.js']
+  },
+  resolve: {
+    extensions: ['.mjs', '.js', '.svelte']
+  },
+  output: {
+    path: __dirname + '/dist',
+    filename: '[name].js',
+    chunkFilename: '[name].[id].js'
+  },
+  devtool: prod ? false : 'source-map',
+  devServer: {
+    contentBase: './dist',
+    port: 9100
+  },
+  mode,
+  module: {
+    rules: [
+      {
+        test: /\.svelte$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'svelte-loader',
+          options: {
+            dev: true,
+            emitCss: true,
+            hotReload: true
+          }
+        }
+      },
+      {
+        test: /\.css$/,
+        use: [
+          /**
+           * MiniCssExtractPlugin doesn't support HMR.
+           * For developing, use 'style-loader' instead.
+           * */
+          prod ? MiniCssExtractPlugin.loader : 'style-loader',
+          'css-loader'
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: 'Actions - Basics'
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].css'
+    })
+  ]
+};