feat: initial commit

.gitignore

@@ -0,0 +1,105 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+dev/dist/*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022-Present Denis Olsem
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,71 @@
+# Perfectly Scrollable
+
+[![size](https://img.shields.io/bundlephobia/minzip/perfectly-scrollable?style=for-the-badge)](https://bundlephobia.com/package/perfectly-scrollable)
+[![](https://img.shields.io/npm/v/perfectly-scrollable?style=for-the-badge)](https://www.npmjs.com/package/perfectly-scrollable)
+![](https://img.shields.io/npm/dw/perfectly-scrollable?style=for-the-badge)
+
+SolidJS higher-order component for [Perfect Scrollbar](https://perfectscrollbar.com/).
+
+## Installation
+
+```bash
+npm install perfectly-scrollable
+```
+
+## Example Usage
+
+Define a scrollable component like this:
+```tsx
+// MyComponent.tsx
+import { PerfectlyScrollable } from 'perfectly-scrollable';
+import { Component } from 'solid-js';
+
+const MyComponent: Component<{ ref?: JSX.IntrinsicAttributes['ref'], title: string }> => (props) => {
+  return (
+    // Make sure to pass the ref down to the element you want to make scrollable
+    // You should also make sure the CSS position property is set on the element
+    <div ref={props.ref} style={{ position: 'relative' }}>
+      <h1>{props.title}</h1>
+    </div>
+  );
+};
+
+export default PerfectlyScrollable(MyComponent);
+```
+
+The resulting component props will include all `MyComponent` props and [all Perfect Scrollbar props](https://perfectscrollbar.com/#section-options):
+```tsx
+// App.tsx
+import { MyComponent } from './MyComponent.tsx';
+import { Component } from 'solid-js';
+
+export default () => {
+  return (
+    <MyComponent title="some title" suppressScrollX />
+  );
+};
+```
+
+You can add Perfect Scrollbar to native elements as well:
+```tsx
+// MyComponent.tsx
+import { PerfectlyScrollable } from 'perfectly-scrollable';
+import { Component } from 'solid-js';
+
+const ScrollableDiv = PerfectlyScrollable('div');
+
+const MyComponent: Component<{ ref?: JSX.IntrinsicAttributes['ref'], title: string }> => (props) => {
+  return (
+    // Don't forget to set the position property
+    <ScrollableDiv ref={props.ref} style={{ position: 'relative' }} suppressScrollX>
+      <h1>{props.title}</h1>
+    </ScrollableDiv>
+  );
+};
+
+export default MyComponent;
+```
+
+## Demo
+
+View a functional demo on CodeSandbox: https://codesandbox.io/s/nxso2r.

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "perfectly-scrollable",
+  "version": "0.2.0",
+  "description": "SolidJS HOC for Perfect Scrollbar",
+  "author": "Denis Olsem",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dolsem/perfectly-scrollable.git"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/dolsem/perfectly-scrollable/issues"
+  },
+  "homepage": "https://github.com/dolsem/perfectly-scrollable#readme",
+  "scripts": {
+    "build": "tsc"
+  },
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "solid": "./dist/index.js",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "solid",
+    "scrollbar",
+    "bootstrap",
+    "perfect-scrollbar"
+  ],
+  "dependencies": {
+    "perfect-scrollbar": "^1.5.5",
+    "solid-js": "^1.3.16"
+  },
+  "devDependencies": {
+    "typescript": "^4.5.5"
+  }
+}

src/index.ts

@@ -0,0 +1,67 @@
+import PerfectScrollbar from 'perfect-scrollbar';
+import 'perfect-scrollbar/css/perfect-scrollbar.css';
+import { Component, createComponent, JSX, mergeProps, onMount, splitProps } from 'solid-js';
+import { template, spread } from 'solid-js/web';
+
+const localProps = [
+  'ref',
+  'handlers',
+  'maxScrollbarLength',
+  'minScrollbarLength',
+  'scrollingThreshold',
+  'scrollXMarginOffset',
+  'scrollYMarginOffset',
+  'suppressScrollX',
+  'suppressScrollY',
+  'swipeEasing',
+  'useBothWheelAxes',
+  'wheelPropagation',
+  'wheelSpeed',
+] as Array<keyof PerfectScrollbar.Options|'ref'>;
+
+const templates = Object.create(null) as Record<string, Element>;
+const cache = new WeakMap<Component<any>|Element, Component<any>>();
+
+type PropsWithRef = { ref?: JSX.IntrinsicAttributes['ref'] };
+
+export function PerfectlyScrollable<P extends PropsWithRef, T extends keyof JSX.IntrinsicElements>(component: Component<P>): Component<P&PerfectScrollbar.Options>;
+export function PerfectlyScrollable<P extends PropsWithRef, T extends keyof JSX.IntrinsicElements>(component: T): Component<P&JSX.IntrinsicElements[T]>;
+export function PerfectlyScrollable<P extends PropsWithRef, T extends keyof JSX.IntrinsicElements>(
+  component: Component<P>|T
+) {
+    let element = typeof component === 'string' && templates[component];
+    if (typeof element === 'undefined') {
+      element = template(`<${component}></${component}>`, 2);
+      templates[component as string] = element;
+    }
+    const derivedComponent = element || (component as Component<P>);
+
+    let wrappedComponent = cache.get(derivedComponent);
+    if (!wrappedComponent) {
+      wrappedComponent = (props: P&PerfectScrollbar.Options) => {
+        let ref: any;
+        const [local, others] = splitProps(props, localProps);
+        const { ref: passedRef, ...scrollbarOptions } = local;
+        const newProps = mergeProps({
+          ref: (element: any) => {
+            ref = element;
+            if (typeof passedRef === 'function') passedRef(element);
+          }
+        }, others);
+
+        onMount(() => {
+          new PerfectScrollbar(ref, scrollbarOptions);
+        });
+        if (typeof component === 'string') {
+          const el = (element as Element).cloneNode(true) as Element;
+          spread(el, newProps, false, false);
+          return el;
+        }
+        return createComponent(component, newProps as any);
+      }
+
+      cache.set(derivedComponent, wrappedComponent);
+    }
+
+    return wrappedComponent;
+  };

tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "emitDeclarationOnly": false,
+    "declaration": true,
+    "module": "ESNext",
+    "target": "ESNext",
+    "newLine": "LF",
+    "moduleResolution": "node",
+    "strict": true,
+    "allowSyntheticDefaultImports": true,
+    "strictNullChecks": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "types": [
+      "solid-js"
+    ]
+  },
+  "include": [
+    "./src"
+  ],
+  "exclude": ["node_modules"]
+}