Update example for dev and sandbox

Author: Marek Rozmus

examples/package-lock.json

@@ -24,6 +24,7 @@
   "scripts": {
     "predeploy": "webpack --mode production",
     "start": "webpack-dev-server",
+    "dev": "webpack-dev-server --config webpack.config.dev.js",
     "deploy": "gh-pages -d dist"
   },
   "devDependencies": {
@@ -53,6 +54,7 @@
     "webpack-dev-server": "^3.8.0"
   },
   "dependencies": {
+    "@sandstreamdev/react-swipeable-list": "^0.2.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0"
   }

examples/package.json

@@ -1,5 +1,9 @@
 import React, { useState } from 'react';
-import { SwipeableList, SwipeableListItem } from 'react-swipeable-list';
+import {
+  SwipeableList,
+  SwipeableListItem
+} from '@sandstreamdev/react-swipeable-list';
+import '@sandstreamdev/react-swipeable-list/dist/styles.css';
 
 import ListItem from './ComplexListItem';
 import ComplexItemContent from './ComplexItemContent';

examples/src/App.js

@@ -0,0 +1,98 @@
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var path = require('path');
+var CssLoaderUtils = require('css-loader/dist/utils');
+
+const babelLoaderOptions = {
+  presets: ['@babel/env', '@babel/react'],
+  plugins: ['@babel/plugin-proposal-class-properties']
+};
+
+module.exports = {
+  devServer: {
+    port: 3000,
+    open: true,
+    inline: true,
+    hot: true,
+    watchOptions: {
+      ignored: /node_modules/
+    },
+    historyApiFallback: true
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: babelLoaderOptions
+        }
+      },
+      {
+        test: /\.css$/i,
+        use: [
+          { loader: 'style-loader' },
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                localIdentName: '[name]_[local]__[hash:base64:5]_',
+                getLocalIdent: (
+                  loaderContext,
+                  localIdentName,
+                  localName,
+                  options
+                ) => {
+                  if (loaderContext.resourcePath.includes('node_modules')) {
+                    return localName;
+                  }
+                  return CssLoaderUtils.getLocalIdent(
+                    loaderContext,
+                    localIdentName,
+                    localName,
+                    options
+                  );
+                }
+              }
+            }
+          }
+        ]
+      },
+      {
+        test: /\.svg$/,
+        use: [
+          {
+            loader: 'babel-loader'
+          },
+          {
+            loader: 'react-svg-loader'
+          }
+        ]
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './src/index.html',
+      filename: './index.html'
+    })
+  ],
+  resolve: {
+    alias: {
+      // replace with any css - cannot ignore this import
+      '@sandstreamdev/react-swipeable-list/dist/styles.css': path.join(
+        __dirname,
+        'src',
+        'app.css'
+      ),
+      // to import module sources
+      '@sandstreamdev/react-swipeable-list': path.join(__dirname, '..', 'src'),
+      // to make the module use same react as example
+      // (otherwise even if same version is in module sources used
+      // we get error about duplicated react and cannot use hooks)
+      react: path.resolve(__dirname, 'node_modules', 'react'),
+      'prop-types': path.resolve(__dirname, 'node_modules', 'prop-types')
+    },
+    extensions: ['.js']
+  }
+};

examples/webpack.config.dev.js

@@ -1,5 +1,5 @@
 var HtmlWebpackPlugin = require('html-webpack-plugin');
-var path = require('path');
+var CssLoaderUtils = require('css-loader/dist/utils');
 
 const babelLoaderOptions = {
   presets: ['@babel/env', '@babel/react'],
@@ -35,7 +35,23 @@ module.exports = {
             loader: 'css-loader',
             options: {
               modules: {
-                localIdentName: '[name]_[local]__[hash:base64:5]_'
+                localIdentName: '[name]_[local]__[hash:base64:5]_',
+                getLocalIdent: (
+                  loaderContext,
+                  localIdentName,
+                  localName,
+                  options
+                ) => {
+                  if (loaderContext.resourcePath.includes('node_modules')) {
+                    return localName;
+                  }
+                  return CssLoaderUtils.getLocalIdent(
+                    loaderContext,
+                    localIdentName,
+                    localName,
+                    options
+                  );
+                }
               }
             }
           }
@@ -59,17 +75,5 @@ module.exports = {
       template: './src/index.html',
       filename: './index.html'
     })
-  ],
-  resolve: {
-    alias: {
-      // to import module sources
-      'react-swipeable-list': path.join(__dirname, '..', 'src'),
-      // to make the module use same react as example
-      // (otherwise even if same version is in module sources used
-      // we get error about duplicated react and cannot use hooks)
-      react: path.resolve(__dirname, 'node_modules', 'react'),
-      'prop-types': path.resolve(__dirname, 'node_modules', 'prop-types')
-    },
-    extensions: ['.js']
-  }
+  ]
 };