feat: introduce sidecar

theKashey · Jun 8, 2019 · 2ca7f59 · 2ca7f59
1 parent 941290c
commit 2ca7f59
Show file tree

Hide file tree

Showing 17 changed files with 1,126 additions and 308 deletions.
diff --git a/.size-limit b/.size-limit
@@ -1,7 +1,17 @@
 [
  {
  path: "dist/es2015/index.js",
- ignore: ["react-dom", "tslib"],
- limit: "2.1 KB"
+ ignore: ["react-dom", "tslib", "use-sidecar"],
+ limit: "2.4 KB"
+ },
+ {
+ path: "dist/es2015/sidecar.js",
+ ignore: ["react-dom", "tslib", "use-sidecar"],
+ limit: "2.0 KB"
+ },
+ {
+ path: "dist/es2015/UI.js",
+ ignore: ["react-dom", "tslib", "use-sidecar"],
+ limit: "0.5 KB"
  }
 ]
diff --git a/README.md b/README.md
@@ -27,6 +27,23 @@ import {RemoveScroll} from 'react-remove-scroll';
 - `[className]` - className for an internal div
 - `[removeScrollBar]` - to control scroll bar removal. Set to false, if you prefer to keep it (wheel and touch scroll still disabled).
 
+# Size
+- (🧩 full) 1.5kb after compression (excluding tslib).
+---
+- (👁 UI) __400b__, visual elements only
+- (🚗 sidecar) 1kb, side effects
+```js
+import {sidecar} from "use-sidecar";
+import {RemoveScroll} from 'react-remove-scroll/UI';
+
+const sidecar = sidecar(() => import('react-remove-scroll/sidecar'));
+
+<RemoveScroll sideCar={sidecar}>
+ Will load logic from a sidecar when needed
+</RemoveScroll> 
+```
+
+
 ## Internal div
 But default RemoveScroll will create a div to handle and capture events.
 You may specify `className` for it, if you need, or __remove it__.
@@ -71,9 +88,6 @@ We have to use synchronous scroll/touch handler, and it may affect scrolling per
 
 Consider using `noIsolation` mode, if you have large scrollable areas.
 
-# Size
-1.5kb after compression (excluding tslib).
-
 # Scroll-Locky
 This is a refactoring of another library - [react-scroll-locky](https://github.com/theKashey/react-scroll-locky) -
 to make package smaller and more react-portals friendly.

diff --git a/UI/UI.d.ts b/UI/UI.d.ts
@@ -0,0 +1 @@
+export * from '../dist/es2015/UI'
diff --git a/UI/package.json b/UI/package.json
@@ -0,0 +1,8 @@
+{
+ "private": true,
+ "main": "../dist/cjs/UI.js",
+ "jsnext:main": "../dist/es2015/UI.js",
+ "module": "../dist/es2015/UI.js",
+ "types": "UI.d.ts",
+ "sideEffects": false
+}
diff --git a/example/app.tsx b/example/app.tsx
@@ -1,8 +1,10 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import {Component} from 'react';
-import {AppWrapper} from './styled';
-import {RemoveScroll} from "../src";
+import {RemoveScroll} from "../src/UI";
+import {sidecar} from "use-sidecar";
+
+const lockSideCar = sidecar(() => import ("../src/sidecar"));
 
 export interface AppState {
  counter: number;
@@ -37,7 +39,7 @@ const PDiv = () => (
 );
 
 const Portal = () => (
- ReactDOM.createPortal(<PDiv/>, document.getElementById('portal'))
+ ReactDOM.createPortal(<PDiv/>, document.getElementById('portal')!)
 )
 
 export default class App extends Component <{}, AppState> {
@@ -47,7 +49,7 @@ export default class App extends Component <{}, AppState> {
 
  componentDidMount() {
  setInterval(() => {
-  //this.setState({counter: this.state.counter ? 0 : 1})
+ //this.setState({counter: this.state.counter ? 0 : 1})
  }, 1000);
 
  setTimeout(() => {
@@ -57,7 +59,7 @@ export default class App extends Component <{}, AppState> {
 
  render() {
  return (
- <AppWrapper>
+ <div>
  <div style={{
  position: 'absolute',
  left: 0,
@@ -82,7 +84,10 @@ export default class App extends Component <{}, AppState> {
  // className={zeroRightClassName}
  >
  SCROLL (end of content would be hidden under "parent" scroll).
- {(<RemoveScroll enabled={true}>
+ {(<RemoveScroll
+ enabled={true}
+ sideCar={lockSideCar}
+ >
  <div
  style={{
  //position: 'absolute',
@@ -95,7 +100,7 @@ export default class App extends Component <{}, AppState> {
  color: '#FFF',
  backgroundColor: 'rgba(0,0,0,0.5)'
  }}
- // className={zeroRightClassName}
+  // className={RemoveScroll.classNames.zeroRight}
  >
  PRIMARY SCROLLABLE
  YY
@@ -114,86 +119,10 @@ export default class App extends Component <{}, AppState> {
  <p>SCROLL</p>
  </div>
 
- {false && (
- <RemoveScroll enabled={false && !!(this.state.counter % 2)}>
- <div
- style={{
- position: 'absolute',
- overflow: 'scroll',
- left: 0,
- right: 0,
- top: '100px',
- //width: '100%',
- height: '150px',
- backgroundColor: 'rgba(0,1,0,0.5)'
- }}
- // className={fullWidthClassName}
- >
- XXX
- XXX
- XXX
- {fill(20, 1).map(x => <p>{x}****</p>)}
- </div>
- </RemoveScroll>
- )}
-
- {false && (
- <>
- <div
- style={{
- position: 'fixed',
- overflow: 'scroll',
- left: 0,
- right: 0,
- top: '150px',
- //width: '100%',
- height: '50px',
- backgroundColor: 'rgba(0,0,0,0.5)'
- }}
- className={RemoveScroll.classNames.fullWidth}
- >
- XXX
- XXX
- XXX
- {fill(20, 1).map(x => <p>{x}****</p>)}
- </div>
-
-
- <div style={{
- position: 'absolute',
- overflow: 'scroll',
- left: 0,
- right: 0,
- top: 200,
- //width: '100%',
- height: 300,
- backgroundColor: 'rgba(0,0,0,0.5)'
- }}>
- XXX
- XXX
- XXX
-
- <div style={{
- position: 'absolute',
- overflow: 'scroll',
- width: 200,
- height: 200,
- backgroundColor: 'rgba(0,0,0,0.5)'
- }}>
- ZZZ
- ZZZ
- {fill(20, 1).map(x => <p>{x}****</p>)}
- </div>
-
- {fill(20, 1).map(x => <p>{x}****</p>)}
- </div>
- </>
- )}
-
  <p>FILLER (not scrollable)</p>
- {fill(100, 1).map((x, index) => <p>{index}**** </p>)}
+ {fill(100, 1).map((_, index) => <p>{index}**** </p>)}
  <p>END</p>
- </AppWrapper>
+ </div>
  )
  }
 }
diff --git a/example/styled.ts b/example/styled.ts
diff --git a/package.json b/package.json
@@ -22,7 +22,9 @@
  "author": "Anton Korzunov <thekashey@gmail.com>",
  "license": "MIT",
  "devDependencies": {
- "size-limit": "^0.21.1",
+ "react": "^16.8.6",
+ "react-dom": "^16.8.6",
+ "size-limit": "^1.3.6",
  "ts-react-toolbox": "^0.2.2"
  },
  "engines": {
@@ -39,8 +41,13 @@
  ],
  "repository": "https://github.com/theKashey/react-remove-scroll",
  "dependencies": {
- "react-remove-scroll-bar": "^1.1.5",
- "tslib": "^1.0.0"
+ "react-remove-scroll": "^1.0.8",
+ "react-remove-scroll-bar": "^1.2.0",
+ "tslib": "^1.0.0",
+ "use-sidecar": "^0.1.1"
  },
- "sideEffects": false
+ "sideEffects": false,
+ "resolutions": {
+ "typescript": "^3.0.0"
+ }
 }
diff --git a/sidecar/package.json b/sidecar/package.json
@@ -0,0 +1,8 @@
+{
+ "private": true,
+ "main": "../dist/cjs/sidecar.js",
+ "jsnext:main": "../dist/es2015/sidecar.js",
+ "module": "../dist/es2015/sidecar.js",
+ "types": "sidecar.d.ts",
+ "sideEffects": false
+}
diff --git a/sidecar/sidecar.d.ts b/sidecar/sidecar.d.ts
@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+declare var sidecar: React.SFC;
+
+export default sidecar;
diff --git a/src/Combination.tsx b/src/Combination.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import {RemoveScroll} from "./UI";
+import {IRemoveScrollProps} from './types';
+import {RemoveScrollSideCar} from './SideEffect';
+
+function ReactRemoveScroll(props: IRemoveScrollProps) {
+ return (
+ <RemoveScroll
+ {...props}
+ sideCar={RemoveScrollSideCar}
+ />
+ );
+}
+
+namespace ReactRemoveScroll {
+ export let classNames = RemoveScroll.classNames;
+}
+
+export default ReactRemoveScroll;