feat(examples): add Vanilla JavaScript example for Swiperia usage

Created a new example demonstrating how to use Swiperia in a Vanilla JavaScript environment. This example includes HTML, CSS, and JavaScript files that showcase the initialization of swipe detection on a draggable element using both MouseSwipeDetector and TouchSwipeDetector from the swiperia-js package. Configurations and interactions are detailed to illustrate practical application.

.vscode/extensions.json

@@ -1,3 +1,7 @@
 {
-  "recommendations": ["nrwl.angular-console", "esbenp.prettier-vscode"]
+  "recommendations": [
+    "nrwl.angular-console",
+    "esbenp.prettier-vscode",
+    "ms-playwright.playwright"
+  ]
 }

examples/vanilla-js-e2e/.eslintrc.json

@@ -0,0 +1,22 @@
+{
+  "extends": ["plugin:playwright/recommended", "../../.eslintrc.base.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["src/**/*.{ts,js,tsx,jsx}"],
+      "rules": {}
+    }
+  ]
+}

examples/vanilla-js-e2e/playwright.config.ts

@@ -0,0 +1,69 @@
+import { defineConfig, devices } from '@playwright/test';
+import { nxE2EPreset } from '@nx/playwright/preset';
+
+import { workspaceRoot } from '@nx/devkit';
+
+// For CI, you may want to set BASE_URL to the deployed application.
+const baseURL = process.env['BASE_URL'] || 'http://localhost:4200';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  ...nxE2EPreset(__filename, { testDir: './src' }),
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    baseURL,
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npx nx serve vanilla-js',
+    url: 'http://localhost:4200',
+    reuseExistingServer: !process.env.CI,
+    cwd: workspaceRoot,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    // Uncomment for mobile browsers support
+    /* {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+    {
+      name: 'Mobile Safari',
+      use: { ...devices['iPhone 12'] },
+    }, */
+
+    // Uncomment for branded browsers
+    /* {
+      name: 'Microsoft Edge',
+      use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    },
+    {
+      name: 'Google Chrome',
+      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    } */
+  ],
+});

examples/vanilla-js-e2e/project.json

@@ -0,0 +1,9 @@
+{
+  "name": "vanilla-js-e2e",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "examples/vanilla-js-e2e/src",
+  "projectType": "application",
+  "implicitDependencies": ["vanilla-js"],
+  "// targets": "to see all targets run: nx show project vanilla-js-e2e --web",
+  "targets": {}
+}

examples/vanilla-js-e2e/src/example.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('/');
+
+  // Expect h1 to contain a substring.
+  expect(await page.locator('h1').innerText()).toContain('Welcome');
+});

examples/vanilla-js-e2e/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "sourceMap": false
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.js",
+    "playwright.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.spec.js",
+    "src/**/*.test.ts",
+    "src/**/*.test.js",
+    "src/**/*.d.ts"
+  ]
+}

examples/vanilla-js/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@nx/js/babel"]
+}

examples/vanilla-js/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.base.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

examples/vanilla-js/.swcrc

@@ -0,0 +1,8 @@
+{
+  "jsc": {
+    "parser": {
+      "syntax": "typescript"
+    },
+    "target": "es2016"
+  }
+}

examples/vanilla-js/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>VanillaJs</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+    />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="stylesheet" href="/src/styles.scss" />
+  </head>
+  <body>
+    <div class="example-container">
+      <div id="draggable">
+        <div id="direction">Drag me!</div>
+      </div>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

examples/vanilla-js/project.json

@@ -0,0 +1,9 @@
+{
+  "name": "vanilla-js",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "examples/vanilla-js/src",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project vanilla-js --web",
+  "targets": {}
+}

examples/vanilla-js/src/main.ts

@@ -0,0 +1,37 @@
+import {
+  MouseSwipeDetector,
+  SwipeDetector,
+  TouchSwipeDetector,
+} from 'swiperia-js';
+
+const target = document.getElementById('draggable')!;
+const direction = document.getElementById('direction')!;
+
+const swiperia = new SwipeDetector(target, [
+  MouseSwipeDetector,
+  TouchSwipeDetector,
+]);
+
+swiperia.listen((e) => {
+  switch (e.type) {
+    case 'end':
+      target.style.transform = 'none';
+      document.body.style.cursor = 'unset';
+      direction.innerText = 'Swiped ' + e.direction;
+      break;
+    case 'cancel':
+      target.style.transform = 'none';
+      document.body.style.cursor = 'unset';
+      direction.innerText = 'Canceled';
+      break;
+    case 'start':
+    case 'move':
+      document.body.style.cursor = 'grabbing';
+      target.style.transform = `translate(${e.deltaX}px, ${e.deltaY}px)`;
+      break;
+    default:
+      target.style.transform = 'none';
+      direction.innerText = 'Drag me!';
+      break;
+  }
+});

examples/vanilla-js/src/styles.scss

@@ -0,0 +1,50 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+@mixin centered {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+$border-radius: 30px;
+
+body {
+  @include centered;
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(
+    180deg,
+    rgb(111, 211, 127) 0%,
+    rgb(37, 83, 105) 100%
+  );
+  font-family: Roboto, sans-serif;
+}
+
+.example-container {
+  @include centered;
+  width: 300px;
+  height: 300px;
+  border-radius: $border-radius;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
+  backdrop-filter: blur(2.7px);
+  -webkit-backdrop-filter: blur(2.7px);
+  border: 1px solid rgba(255, 255, 255, 0.43);
+}
+
+#draggable {
+  @include centered;
+  background: white;
+  border-radius: $border-radius;
+  width: 150px;
+  height: 150px;
+}
+
+#direction {
+  user-select: none;
+}

examples/vanilla-js/tsconfig.app.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"],
+  "include": ["src/**/*.ts"]
+}

examples/vanilla-js/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "Node",
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src"],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

examples/vanilla-js/tsconfig.spec.json

@@ -0,0 +1,26 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vitest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}