first commit

.eslintignore

@@ -0,0 +1,4 @@
+# folders
+dist
+node_modules
+*.spec.tsx

.eslintrc

@@ -0,0 +1,30 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "env": {
+      "browser": true,
+      "node": true
+  },
+  "extends": ["airbnb", "prettier", "prettier/react"],
+  "plugins": [
+      "react-hooks",
+      "prettier"
+  ],
+  "rules": {
+      "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "warn",
+      "import/prefer-default-export": 0,
+      "react/require-default-props": 0,
+      "prettier/prettier": ["error"]
+  },
+  "settings": {
+      "import/resolver": {
+          "node": {
+            "extensions": [".js", ".jsx", ".ts", ".tsx"]
+          }
+      }
+  },
+  "globals": {
+      "React": "writable"
+  }
+}

.github/workflows/ci.yml

@@ -0,0 +1,31 @@
+name: CI
+
+on: [pull_request, push]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v1
+    - name: Setup Node
+      uses: actions/setup-node@v1
+      with:
+        node-version: '10'
+
+    - name: Install Dependencies
+      run: yarn
+
+    - name: Lint, test and build
+      run: |
+        yarn lint
+        yarn test:coverage
+        yarn build
+
+    - name: Send test code coverage
+      uses: codecov/codecov-action@v1
+      with:
+        token: ${{ secrets.codecov_token }}
+        file: ./coverage/lcov.info
+

.github/workflows/npm-publish.yml

@@ -0,0 +1,24 @@
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+
+  publish-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+          registry-url: https://registry.npmjs.org/
+          scope: '@mpth'
+      - run: yarn
+      - run: |
+          yarn test
+          npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}
+

.gitignore

@@ -0,0 +1,12 @@
+.DS_Store
+.idea
+.vscode
+
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+
+node_modules
+
+coverage
+dist

.npmignore

@@ -0,0 +1,14 @@
+*.swp
+*~
+*.iml
+.*.haste_cache.*
+.DS_Store
+.idea
+.babelrc
+.eslintrc
+.prettierrc
+coverage
+jest.config.js
+jest.setup.js
+src
+yarn-error.log

.npmrc

@@ -0,0 +1 @@
+save-exact=true

.prettierrc

@@ -0,0 +1,10 @@
+{
+    "printWidth": 80,
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false
+}

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 MPTHHHHHHHHH
+
+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,67 @@
+# @mpth/react-no-ssr-in-view
+> React component to wrap a non SSR component and only show it when it comes into our viewport, speeding up the eventloop while rendering pages SSR amd only truly load/show it when it comes into the users view. Works with React >= 16.5.0
+
+When working with Server Side Rendering(SSR) enabled apps, you have to deal with client only components. This wrapper makes it simple to work with those components when you wanted to load data and or when the component comes into the view.
+[npmjs.com/package/@mpth/react-no-ssr-in-view](https://www.npmjs.com/package/@mpth/react-no-ssr-in-view)
+
+### Installation
+
+```
+yarn add @mpth/react-no-ssr-in-view
+```
+
+### Usage
+
+`Foo` is our **client only** component:
+
+```js
+import React from 'react';
+import NoSSR from '@mpth/react-no-ssr';
+import Foo from '../modules/foo';
+import Bar from '../modules/bar';
+
+const Page = () => (
+  <>
+    <h1>Page</h1>
+    <Bar />
+    <NoSSRinView>
+      <Foo />
+    </NoSSRinView>
+  </>
+);
+```
+
+Then, `<Foo />` component is only rendered on the client just after it's mounted and in our view. Its possible to add css to the main component to have an aspect ratio to prevent reflows for example. Also can you tweak from how many pixels it starts painting it.
+
+options:
+
+1. fallback
+2. rootMargin
+3. className
+
+### ad 1. Render a Component on SSR with a personal fallback
+
+Usually, we need to add some loading text or similar until `<Foo />` component starts to render. Here's how to do it.
+
+```js
+const Loading = () => (<div>Loading...</div>);
+const Page = () => (
+  <>
+    ....
+    <NoSSRinView fallback={<Loading />}>
+      <Foo />
+    </NoSSRinView>
+  </>
+);
+```
+
+Now `<Loading />` component will be rendered until `<Foo />` component comes in the viewport.
+
+### ad 2.
+Set of values serves to grow or shrink each side of the root element's bounding box before computing intersections. For example '20px 0px 280px 0px'
+
+### ad 3. 
+Add your own css to the main container for example to set a min-height, or aspect ratio or preloading.
+
+[![Codecov Coverage](https://img.shields.io/codecov/c/github/maapteh/react-no-ssr-in-view/master.svg?style=flat-square)](https://codecov.io/gh/maapteh/react-no-ssr-in-view/)
+

jest.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+    transform: {
+        '^.+\\.tsx?$': 'ts-jest',
+    },
+    testRegex: '(/src.*(\\.|/)(test|spec))\\.(tsx?|ts?)$',
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+    modulePathIgnorePatterns: ['dist'],
+    collectCoverage: true,
+    coverageReporters: ['json', 'lcov', 'text', 'text-summary'],
+    setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
+    globals: {
+        'ts-jest': {
+            diagnostics: false,
+            tsConfig: './jest.tsconfig.json',
+        },
+    },
+    rootDir: process.cwd(),
+};

jest.tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+      "module": "commonjs",
+      "target": "esnext",
+      "jsx": "react",
+      "sourceMap": false,
+      "experimentalDecorators": true,
+      "noImplicitUseStrict": true,
+      "removeComments": true,
+      "moduleResolution": "node",
+      "lib": ["es2017", "dom"],
+      "typeRoots": ["node_modules/@types", "src/@types"],
+      "types": ["jest"],
+      "esModuleInterop": true
+    },
+    "exclude": ["node_modules", "dist"]
+}

package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@mpth/react-no-ssr-in-view",
+  "version": "0.0.1",
+  "description": "React component to wrap non SSR components and only when it comes in our view.",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/maapteh/react-no-ssr-in-view.git"
+  },
+  "license": "MIT",
+  "scripts": {
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "build": "tsc --p tsconfig.json",
+    "format": "prettier --write \"src/**/*.tsx\"",
+    "lint": "eslint './src/**/*.{ts,tsx}'",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm test && npm run lint",
+    "preversion": "npm run lint",
+    "version": "npm run format && git add -A src",
+    "postversion": "git push && git push --tags"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@testing-library/jest-dom": "4.2.4",
+    "@testing-library/react": "9.3.2",
+    "@testing-library/react-hooks": "3.2.1",
+    "@types/jest": "24.0.23",
+    "@typescript-eslint/parser": "2.8.0",
+    "eslint": "6.7.0",
+    "eslint-config-airbnb": "18.0.1",
+    "eslint-config-prettier": "6.7.0",
+    "eslint-plugin-import": "2.18.2",
+    "eslint-plugin-jsx-a11y": "6.2.3",
+    "eslint-plugin-prettier": "3.1.1",
+    "eslint-plugin-react": "7.16.0",
+    "eslint-plugin-react-hooks": "2.3.0",
+    "jest": "24.9.0",
+    "jsdom": "15.2.1",
+    "prettier": "1.19.1",
+    "react": "16.12.0",
+    "react-dom": "16.12.0",
+    "react-intersection-observer": "8.25.1",
+    "rimraf": "3.0.0",
+    "ts-jest": "24.2.0",
+    "typescript": "3.7.2"
+  },
+  "peerDependencies": {
+    "react": ">16.5.0",
+    "react-dom": ">16.5.0",
+    "react-intersection-observer": ">8.25.1"
+  },
+  "files": [
+    "dist/**/*"
+  ],
+  "bugs": {
+    "url": "https://github.com/maapteh/react-no-ssr/issues"
+  },
+  "homepage": "https://github.com/maapteh/react-no-ssr#readme",
+  "keywords": [
+    "react",
+    "component",
+    "SSR",
+    "react-no-ssr"
+  ],
+  "author": "MPTH"
+}

renovate.json

@@ -0,0 +1,10 @@
+{
+  "extends": [
+    "config:base",
+    "schedule:earlyMondays"
+  ],
+  "automerge": true,
+  "major": {
+    "automerge": false
+  }
+}