setup example project

README.md

@@ -154,4 +154,4 @@ Huge credits to [https://github.com/Splidejs/splide](https://github.com/Splidejs
 [twitter-shield]: https://img.shields.io/badge/-Twitter-black.svg?style=flat-square&logo=twitter&colorB=555
 [twitter-url]: https://www.twitter.com/berndartmueller
 [product-screenshot]: images/screenshot.png
-[size-shield]: https://img.shields.io/bundlephobia/minzip/mailgo.svg?color=%23477998&style=flat-square
+[size-shield]: https://img.shields.io/bundlephobia/minzip/virchual@1.0.0-alpha.5.svg?color=%23477998&style=flat-square

examples/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "examples",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
+    "build": "cross-env TS_NODE_PROJECT=\"tsconfig.webpack.json\" NODE_ENV=production webpack"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "typescript": "^4.0.2",
+    "webpack": "^4.44.1"
+  },
+  "devDependencies": {
+    "@types/node": "^14.6.0",
+    "@types/webpack": "^4.41.21",
+    "cross-env": "^7.0.2",
+    "css-loader": "^4.2.2",
+    "ts-loader": "^8.0.3",
+    "tsconfig-paths": "^3.9.0",
+    "webpack-cli": "^3.3.12"
+  }
+}

examples/src/index.ts

@@ -0,0 +1,33 @@
+import { Virchual } from './../../src/virchual';
+
+[].forEach.call(document.querySelectorAll('.image-swiper'), (slider: HTMLElement) => {
+  const instance = new Virchual(slider, {
+    slides: () => {
+      const slides: string[] = [];
+
+      for (let i = 0; i < 10; i++) {
+        slides.push(`
+          <picture>
+            <source
+              type="image/webp"
+              srcset="
+                https://i.findheim.at/images/sm/6iBu4sycxr9kXMlcbyVyz.webp,
+                https://i.findheim.at/images/md/6iBu4sycxr9kXMlcbyVyz.webp 2x
+              " />
+            <source
+              type="image/jpeg"
+              srcset="
+                https://i.findheim.at/images/sm/6iBu4sycxr9kXMlcbyVyz.jpg,
+                https://i.findheim.at/images/md/6iBu4sycxr9kXMlcbyVyz.jpg 2x
+              " />
+            <img src="https://i.findheim.at/images/md/6iBu4sycxr9kXMlcbyVyz.jpg" itemprop="image"/>
+          </picture>
+        `);
+      }
+
+      return slides;
+    },
+  });
+
+  instance.mount();
+});

examples/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "noImplicitAny": false,
+    "outDir": "./dist",
+    "target": "esnext",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "types": ["node"],
+    "sourceMap": true
+  },
+  "include": ["src/index.ts"],
+  "exclude": ["node_modules"]
+}

examples/tsconfig.webpack.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "types": ["node"]
+  }
+}

examples/webpack.config.ts

@@ -0,0 +1,34 @@
+import path from 'path';
+import * as webpack from 'webpack';
+
+const config: webpack.Configuration = {
+  entry: './src/index.ts',
+  output: {
+    path: path.resolve(__dirname, './dist'),
+    publicPath: '/dist/',
+    filename: 'index.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        loader: 'ts-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]?[hash]',
+        },
+      },
+    ],
+  },
+  resolve: {
+    alias: {},
+    extensions: ['', '.js', '.ts'],
+  },
+  devtool: '#eval-source-map',
+};
+
+export default config;

package.json

@@ -31,6 +31,7 @@
     "dev": "NODE_ENV=development rollup -cw && tsc",
     "lint-staged": "lint-staged",
     "typecheck": "tsc --noUnusedParameters false --noUnusedLocals false --outDir ./tmpDist --declarationDir ./tmpDist && rm -rf tmpDist",
+    "prepublish": "npm run build:prod",
     "publish-docs": "cd website && GIT_USER=berndartmueller CURRENT_BRANCH=master npm run publish-gh-pages"
   },
   "lint-staged": {

src/virchual.ts

@@ -252,35 +252,3 @@ export class Virchual {
     this.goTo(event.control);
   }
 }
-
-[].forEach.call(document.querySelectorAll('.image-swiper'), (slider: HTMLElement) => {
-  const instance = new Virchual(slider, {
-    slides: () => {
-      const slides: string[] = [];
-
-      for (let i = 0; i < 10; i++) {
-        slides.push(`
-          <picture>
-            <source
-              type="image/webp"
-              srcset="
-                https://i.findheim.at/images/sm/6iBu4sycxr9kXMlcbyVyz.webp,
-                https://i.findheim.at/images/md/6iBu4sycxr9kXMlcbyVyz.webp 2x
-              " />
-            <source
-              type="image/jpeg"
-              srcset="
-                https://i.findheim.at/images/sm/6iBu4sycxr9kXMlcbyVyz.jpg,
-                https://i.findheim.at/images/md/6iBu4sycxr9kXMlcbyVyz.jpg 2x
-              " />
-            <img src="https://i.findheim.at/images/md/6iBu4sycxr9kXMlcbyVyz.jpg" itemprop="image"/>
-          </picture>
-        `);
-      }
-
-      return slides;
-    },
-  });
-
-  instance.mount();
-});