improve repo structure

.eslintrc.js

@@ -128,9 +128,9 @@ module.exports = {
       },
     },
     {
-      files: ['*.test.*.ts', '**/test/**/*.ts'],
+      files: ['*.test.*', '**/test/**/*'],
       extends: [...defaultExtends, 'plugin:@typescript-eslint/recommended'],
-      plugins: defaultPlugins,
+      plugins: [...defaultPlugins, 'jest-dom'],
       parser: '@typescript-eslint/parser',
       parserOptions: {
         tsconfigRootDir: __dirname,

examples/vue/package.json

@@ -9,7 +9,6 @@
     "@vitejs/plugin-vue": "^3.0.3",
     "@vitejs/plugin-vue-jsx": "^2.0.1",
     "@vue/tsconfig": "^0.1.3",
-    "npm-run-all": "^4.1.5",
     "typescript": "~4.7.4",
     "vite": "^3.0.9",
     "vue-tsc": "^0.40.7"

local/config/package.json

@@ -7,7 +7,8 @@
     "./playwright.coverage": "./src/playwright.coverage.js",
     "./jest": "./src/jest.js",
     "./jest-babel": "./src/jest.babel.js",
-    "./full-coverage": "./src/full-coverage.js"
+    "./full-coverage": "./src/full-coverage.js",
+    "./vitest": "./src/vitest.js"
   },
   "version": "0.0.0"
 }

local/config/src/vitest.js

@@ -0,0 +1,9 @@
+const { resolve } = require('path');
+const { defineConfig } = require('vitest/config');
+
+module.exports = defineConfig({
+  test: {
+    setupFiles: resolve(__dirname, 'vitest.setup.js'),
+    environment: 'jsdom',
+  },
+});

local/config/src/vitest.setup.js

@@ -0,0 +1,4 @@
+import matchers from '@testing-library/jest-dom/matchers';
+import { expect } from 'vitest';
+
+expect.extend(matchers);

package.json

@@ -21,6 +21,8 @@
     "@babel/runtime": "^7.18.2",
     "@playwright/test": "^1.22.2",
     "@testing-library/dom": "^7.26.3",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^28.1.6",
     "@typescript-eslint/eslint-plugin": "^5.31.0",
     "@typescript-eslint/parser": "^5.31.0",
@@ -31,6 +33,7 @@
     "eslint-import-resolver-typescript": "^3.5.1",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^26.8.0",
+    "eslint-plugin-jest-dom": "^4.0.2",
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-prettier": "^4.2.1",
@@ -39,6 +42,7 @@
     "eslint-plugin-tailwindcss": "^3.6.2",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
+    "npm-run-all": "^4.1.5",
     "playwright": "^1.22.2",
     "playwright-chromium": "^1.22.2",
     "playwright-core": "^1.22.2",
@@ -49,17 +53,23 @@
     "should": "^13.2.3",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4",
+    "vite": "^3.0.0",
+    "vitest": "^0.24.3",
     "webpack": "^5.74.0"
   },
   "scripts": {
     "test": "npm run test --workspace=overlayscrollbars",
+    "test-wrapper": "run-p test:*",
     "test:react": "npm run test --workspace=overlayscrollbars-react",
     "test:vue": "npm run test --workspace=overlayscrollbars-vue",
     "test:ngx": "npm run test --workspace=overlayscrollbars-ngx",
+    "test:svelte": "npm run test --workspace=overlayscrollbars-svelte",
     "build": "npm run build --workspace=overlayscrollbars",
+    "build-wrapper": "run-p build:*",
     "build:react": "npm run build --workspace=overlayscrollbars-react",
     "build:vue": "npm run build --workspace=overlayscrollbars-vue",
     "build:ngx": "npm run build --workspace=overlayscrollbars-ngx",
+    "build:svelte": "npm run build --workspace=overlayscrollbars-svelte",
     "example:react": "npm run build:react && cd examples/react && npm i --install-links && npm run start",
     "example:vue": "npm run build:vue && cd examples/vue && npm i --install-links && npm run dev",
     "example:ngx": "npm run build:ngx && cd examples/angular && npm i --install-links && npm run start",

packages/overlayscrollbars-ngx/angular.json

@@ -12,8 +12,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
-            "project": "ng-package.json",
+            "project": "ng-package.json"
-            "tsConfig": "tsconfig.lib.prod.json"
           },
           "configurations": {
             "production": {

packages/overlayscrollbars-ngx/package.json

@@ -2,28 +2,23 @@
   "name": "overlayscrollbars-ngx",
   "version": "0.4.0",
   "private": true,
-  "scripts": {
-    "ng": "ng",
-    "example": "ng serve",
-    "build": "ng build overlayscrollbars-ngx",
-    "test": "ng test"
-  },
   "peerDependencies": {
-    "@angular/common": ">=10.0.0",
+    "@angular/common": ">=12.0.0",
-    "@angular/core": ">=10.0.0"
+    "@angular/core": ">=12.0.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1002.4",
+    "@angular-devkit/build-angular": "^12.0.0",
-    "@angular/animations": "^10.0.0",
+    "@angular/animations": "^12.0.0",
-    "@angular/cli": "^10.0.0",
+    "@angular/cli": "^12.0.0",
-    "@angular/common": "^10.0.0",
+    "@angular/common": "^12.0.0",
-    "@angular/compiler": "^10.0.0",
+    "@angular/compiler": "^12.0.0",
-    "@angular/compiler-cli": "^10.0.0",
+    "@angular/compiler-cli": "^12.0.0",
-    "@angular/core": "^10.0.0",
+    "@angular/core": "^12.0.0",
-    "@angular/forms": "^10.0.0",
+    "@angular/forms": "^12.0.0",
-    "@angular/platform-browser": "^10.0.0",
+    "@angular/platform-browser": "^12.0.0",
-    "@angular/platform-browser-dynamic": "^10.0.0",
+    "@angular/platform-browser-dynamic": "^12.0.0",
-    "@angular/router": "^10.0.0",
+    "@angular/router": "^12.0.0",
+    "@testing-library/angular": "^10.11.1",
     "@types/jasmine": "~4.0.0",
     "jasmine-core": "~4.3.0",
     "karma": "~6.4.0",
@@ -31,12 +26,16 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
-    "ng-packagr": "^10.0.0",
+    "ng-packagr": "^12.0.0",
-    "rxjs": "^6.5.3",
+    "rxjs": "~6.6.0",
-    "typescript": "^3.9.0",
+    "typescript": "~4.3.5",
-    "zone.js": "~0.10.3"
+    "zone.js": "~0.11.4"
   },
   "dependencies": {
-    "tslib": "^2.0.0"
+    "tslib": "^2.4.0"
+  },
+  "scripts": {
+    "build": "ng build overlayscrollbars-ngx",
+    "test": "ng test --watch=false"
   }
 }

packages/overlayscrollbars-ngx/tsconfig.json

@@ -25,7 +25,6 @@
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
-    "strictTemplates": true,
+    "strictTemplates": true
-    "enableIvy": false
   }
 }

packages/overlayscrollbars-react/babel.config.js

@@ -1 +0,0 @@
-module.exports = require('@~local/config/jest-babel');

packages/overlayscrollbars-react/jest.config.js

@@ -1,7 +0,0 @@
-/** @type {import('jest').Config} */
-module.exports = {
-  coverageDirectory: './.coverage',
-  testEnvironment: 'jsdom',
-  testMatch: ['**/test/**/*.test.[jt]s?(x)'],
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
-};

packages/overlayscrollbars-react/jest.setup.js

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

packages/overlayscrollbars-react/package.json

@@ -21,29 +21,19 @@
     "react": ">=16.4.0"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.19.4",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.18.6",
-    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
     "@types/node": "^16.11.68",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^2.1.0",
-    "babel-jest": "^29.2.1",
-    "jest": "^27.5.1",
-    "npm-run-all": "^4.1.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "^4.8.4",
+    "typescript": "^4.8.4"
-    "vite": "^3.1.8"
   },
   "scripts": {
     "build": "run-p build-js build-types",
     "build-js": "vite build",
     "build-types": "tsc --emitDeclarationOnly -p tsconfig.types.json",
-    "test": "jest"
+    "test": "vitest run"
   }
 }

packages/overlayscrollbars-react/test/App.test.tsx

@@ -1,9 +0,0 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import { OverlayScrollbarsComponents } from "../src/overlayscrollbars-react";
-
-test("renders learn react link", () => {
-  render(<OverlayScrollbarsComponents msg="hi" />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

packages/overlayscrollbars-react/test/OverlayScrollbarsComponent.test.tsx

@@ -0,0 +1,9 @@
+import { test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { OverlayScrollbarsComponent } from '~/overlayscrollbars-react';
+
+test('renders learn react link', () => {
+  render(<OverlayScrollbarsComponent msg="hi" />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

packages/overlayscrollbars-react/tsconfig.json

@@ -6,7 +6,10 @@
     "strict": true,
     "module": "ES2015",
     "moduleResolution": "node",
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
-  },
+    "baseUrl": ".",
-  "include": ["src/**/*"]
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  }
 }

packages/overlayscrollbars-react/tsconfig.types.json

@@ -5,5 +5,6 @@
     "outDir": "dist",
     "declaration": true,
     "types": ["react"]
-  }
+  },
+  "include": ["src/**/*"]
 }

packages/overlayscrollbars-react/vite.config.js

@@ -5,6 +5,8 @@ import react from '@vitejs/plugin-react';
 
 export default defineConfig({
   build: {
+    sourcemap: true,
+    outDir: 'dist',
     lib: {
       entry: resolve(__dirname, 'src/overlayscrollbars-react.ts'),
       name: 'OverlayScrollbarsReact',
@@ -13,8 +15,6 @@ export default defineConfig({
     rollupOptions: {
       external: ['react'],
       output: {
-        sourcemap: true,
-        dir: 'dist',
         globals: {
           react: 'React',
         },

packages/overlayscrollbars-react/vitest.config.js

@@ -0,0 +1,5 @@
+import { mergeConfig } from 'vite';
+import vitestConfig from '@~local/config/vitest';
+import viteConfig from './vite.config';
+
+export default mergeConfig(viteConfig, vitestConfig);

packages/overlayscrollbars-svelte/.gitignore

@@ -0,0 +1,8 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/dist
+.env
+.env.*
+!.env.example

packages/overlayscrollbars-svelte/README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

packages/overlayscrollbars-svelte/env.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svelte' {
+  const svelte: any;
+  export default svelte;
+}

packages/overlayscrollbars-svelte/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "overlayscrollbars-svelte",
+  "private": true,
+  "version": "0.4.0",
+  "scripts": {
+    "build": "svelte-kit sync && svelte-package",
+    "test": "vitest run --environment jsdom",
+    "prepublishOnly": "echo 'Did you mean to publish `./package/`, instead of `./`?' && exit 1",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+  },
+  "peerDependencies": {
+    "svelte": "^3.44.0"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "next",
+    "@sveltejs/kit": "next",
+    "@sveltejs/package": "next",
+    "@sveltejs/vite-plugin-svelte": "^1.0.9",
+    "@testing-library/svelte": "^3.2.2",
+    "svelte": "^3.44.0",
+    "svelte-check": "^2.7.1",
+    "svelte-preprocess": "^4.10.6",
+    "tslib": "^2.3.1",
+    "typescript": "^4.7.4"
+  },
+  "type": "module"
+}

packages/overlayscrollbars-svelte/src/OverlayScrollbarsComponent.svelte

@@ -0,0 +1,3 @@
+<h1>Welcome to your library project</h1>
+<p>Create your package using @sveltejs/package and preview/showcase your work with SvelteKit</p>
+<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

packages/overlayscrollbars-svelte/src/index.ts

@@ -0,0 +1 @@
+export * from './OverlayScrollbarsComponent.svelte';

packages/overlayscrollbars-svelte/svelte.config.js

@@ -0,0 +1,17 @@
+import preprocess from 'svelte-preprocess';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  // Consult https://github.com/sveltejs/svelte-preprocess
+  // for more information about preprocessors
+  preprocess: preprocess({ sourceMap: true }),
+  compilerOptions: {
+    enableSourcemap: true,
+  },
+  package: {
+    source: './src/',
+    dir: './dist',
+  },
+};
+
+export default config;

packages/overlayscrollbars-svelte/test/OverlayScrollbarsComponent.test.ts

@@ -0,0 +1,14 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { cleanup, render } from '@testing-library/svelte';
+import OverlayScrollbarsComponent from '~/OverlayScrollbarsComponent.svelte';
+
+describe('Hello.svelte', () => {
+  // TODO: @testing-library/svelte claims to add this automatically but it doesn't work without explicit afterEach
+  afterEach(() => cleanup());
+
+  it('mounts', () => {
+    const { container } = render(OverlayScrollbarsComponent);
+    expect(container).toBeTruthy();
+    expect(container.innerHTML).toContain('Welcome to your library project');
+  });
+});

packages/overlayscrollbars-svelte/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.d.ts"]
+}

packages/overlayscrollbars-svelte/vite.config.js

@@ -0,0 +1,13 @@
+import { fileURLToPath, URL } from 'node:url';
+import { defineConfig } from 'vitest/config';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+// only used for tests
+export default defineConfig({
+  plugins: [svelte()],
+  resolve: {
+    alias: {
+      '~': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+});

packages/overlayscrollbars-svelte/vitest.config.js

@@ -0,0 +1,5 @@
+import { mergeConfig } from 'vite';
+import vitestConfig from '@~local/config/vitest';
+import viteConfig from './vite.config';
+
+export default mergeConfig(viteConfig, vitestConfig);

packages/overlayscrollbars-vue/package.json

@@ -27,17 +27,14 @@
     "@vue/test-utils": "^2.1.0",
     "@vue/tsconfig": "^0.1.3",
     "jsdom": "^20.0.0",
-    "npm-run-all": "^4.1.5",
     "terser": "^5.14.2",
     "typescript": "~4.7.4",
-    "vite": "^3.0.0",
-    "vitest": "^0.18.1",
     "vue": "^3.2.25",
     "vue-tsc": "^1.0.8"
   },
   "scripts": {
     "build": "run-p build-js build-types",
-    "test": "vitest --environment jsdom",
+    "test": "vitest run",
     "build-js": "vite build",
     "build-types": "vue-tsc --emitDeclarationOnly -p tsconfig.types.json --composite false"
   }

packages/overlayscrollbars-vue/tsconfig.json

@@ -5,6 +5,5 @@
     "paths": {
       "~/*": ["./src/*"]
     }
-  },
+  }
-  "include": ["src/**/*"]
 }

packages/overlayscrollbars-vue/tsconfig.types.json

@@ -5,5 +5,6 @@
     "outDir": "dist",
     "declaration": true,
     "types": []
-  }
+  },
+  "include": ["src/**/*"]
 }

packages/overlayscrollbars-vue/vite.config.js

@@ -5,6 +5,8 @@ import vue from '@vitejs/plugin-vue';
 
 export default defineConfig({
   build: {
+    sourcemap: true,
+    outDir: 'dist',
     lib: {
       entry: resolve(__dirname, 'src/overlayscrollbars-vue.ts'),
       name: 'OverlayScrollbarsVue',
@@ -13,8 +15,6 @@ export default defineConfig({
     rollupOptions: {
       external: ['vue'],
       output: {
-        sourcemap: true,
-        dir: 'dist',
         globals: {
           vue: 'Vue',
         },

packages/overlayscrollbars-vue/vitest.config.js

@@ -0,0 +1,5 @@
+import { mergeConfig } from 'vite';
+import vitestConfig from '@~local/config/vitest';
+import viteConfig from './vite.config';
+
+export default mergeConfig(viteConfig, vitestConfig);