Add SSR support

DAB0mB · DAB0mB · commit 30c6d74f2ac7 · 2021-01-07T00:27:42.000+02:00
diff --git a/.npmignore b/.npmignore
@@ -1,3 +1,4 @@
 **
 !lib/**/*
 !index.js
+!style.css
diff --git a/README.md b/README.md
@@ -26,6 +26,10 @@ Modals, tabs, side menus, popovers, popups, dropdowns, notifications; These are
 
 This library is currently only available for the web, and since it uses Web Animations API it's recommended to load a [polyfill](https://github.com/web-animations/web-animations-js) for comparability reasons with older browsers. This library is also very new and may have some missing features. Please, don't hesitate and open a ticket in the [issues](https://github.com/DAB0mB/react-layers-stack/issues) section if you encounter one, and I will address it as soon as I can.
 
+### SSR
+
+The library does work with SSR frameworks e.g. Gatsby or Next.JS, just make sure to import `react-layers-stack/style.css` file additionally.
+
 ### Examples
 
 This repo contains example React apps under the [examples](/examples) dir. To run an example app, first make sure it's initialized by running `yarn` and then you can run it using `yarn start`.
@@ -47,6 +51,7 @@ Below is a detailed documentation regards the library's API, but I also encourag
 This is the main stack container that will define the boundaries for our layers and provide them with the necessary context. A React element of this component type HAS to be created if we want to use react-layers-stack and its React hooks. Initialization is as simple as the following:
 
 ```js
+import 'react-layers-stack/style.css';
 import { Stack } from 'react-layers-stack';
 
 const MyApp = () => {
@@ -59,6 +64,7 @@ const MyApp = () => {
 By providing a render function as children, you can also define a fixed layout that will keep displaying on top of layers, e.g. a header of a navigation bar:
 
 ```js
+import 'react-layers-stack/style.css';
 import { Stack } from 'react-layers-stack';
 
 const MyApp = () => {
@@ -78,6 +84,7 @@ const MyApp = () => {
 Internally, the render function is used as the body of a separate component, which means that react-layers-stack hooks can also be used:
 
 ```js
+import 'react-layers-stack/style.css';
 import { Stack, usePopLayer } from 'react-layers-stack';
 
 const MyApp = () => {
@@ -106,6 +113,7 @@ const MyApp = () => {
 You can also initialize a Stack with a predefined layers state like the following:
 
 ```js
+import 'react-layers-stack/style.css';
 import { Stack, createLayer } from 'react-layers-stack';
 
 const MyApp = () => {
@@ -145,6 +153,7 @@ This hook will initialize a callback that will push a new layer on top of the st
 Here's an example:
 
 ```js
+import 'react-layers-stack/style.css';
 import { usePushLayer } from 'react-layers-stack';
 
 const usePushMyLayer = () => {
@@ -161,7 +170,7 @@ const usePushMyLayer = () => {
             timing: {
                 duration: 500,
             },
-            overlay: {
+            mask: {
                 background: '#000',
             },
         });
diff --git a/examples/hamburger/src/index.js b/examples/hamburger/src/index.js
@@ -1,3 +1,4 @@
+import 'react-layers-stack/style.css';
 import './index.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
diff --git a/examples/widgets/src/index.js b/examples/widgets/src/index.js
@@ -1,3 +1,4 @@
+import 'react-layers-stack/style.css';
 import './index.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-layers-stack",
   "description": "Push and pop React view layers with transitions",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "license": "MIT",
   "author": "DAB0mB",
   "repository": {
@@ -34,6 +34,7 @@
     "eslint-plugin-react": "^7.18.3",
     "husky": "^4.2.1",
     "lint-staged": "^10.0.7",
+    "raw-loader": "^4.0.2",
     "typescript": "^4.0.3",
     "webpack": "^4.41.5",
     "webpack-cli": "^3.3.10",
diff --git a/src/index.js b/src/index.js
@@ -2,49 +2,13 @@ export * from './contexts/LayerContext';
 export * from './contexts/StackContext';
 export * from './components/Layer';
 
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 
 import { StackProvider } from './contexts/StackContext';
 
 export const Stack = ({ layersState, style, className, children }) => {
   const [layers, setLayers] = layersState ?? useState([]);
 
-  useMemo(() => {
-    let styleEl = document.getElementById('rls-style');
-
-    if (styleEl) {
-      return;
-    }
-
-    styleEl = document.createElement('style');
-    styleEl.id = 'rls-style';
-    styleEl.innerHTML = `
-      .rls-stack {
-        position: relative;
-        width: 100%;
-        height: 100%;
-      }
-
-      .rls-layer {
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        position: absolute;
-      }
-
-      .rls-mask {
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        position: absolute;
-      }
-    `;
-
-    document.head.append(styleEl);
-  }, []);
-
   return (
     <StackProvider layersState={[layers, setLayers]}>
       {stack => (
diff --git a/style.css b/style.css
@@ -0,0 +1,21 @@
+.rls-stack {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.rls-layer {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+}
+
+.rls-mask {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -5,7 +5,7 @@ module.exports = {
   mode: 'production',
   devtool: 'sourcemap',
   entry: {
-    index: path.resolve(__dirname, 'src/index'),
+    index: path.resolve(__dirname, 'src/index.js'),
   },
   output: {
     path: path.resolve(__dirname, 'lib'),
@@ -24,8 +24,12 @@ module.exports = {
       },
       {
         test: /\.json$/,
-        loader: 'json-loader',
-      }
+        use: 'json-loader',
+      },
+      {
+        test: /\.css$/i,
+        use: ['raw-loader']
+      },
     ]
   },
   externals: [
diff --git a/yarn.lock b/yarn.lock
@@ -920,7 +920,7 @@
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
-"@types/json-schema@^7.0.5":
+"@types/json-schema@^7.0.5", "@types/json-schema@^7.0.6":
   version "7.0.6"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
   integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==
@@ -1141,6 +1141,16 @@ ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.4:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+ajv@^6.12.5:
+  version "6.12.6"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
 ansi-colors@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
@@ -3290,6 +3300,15 @@ loader-utils@^1.2.3, loader-utils@^1.4.0:
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
+loader-utils@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0"
+  integrity sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
+
 locate-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
@@ -4043,6 +4062,14 @@ randomfill@^1.0.3:
     randombytes "^2.0.5"
     safe-buffer "^5.1.0"
 
+raw-loader@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6"
+  integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -4311,6 +4338,15 @@ schema-utils@^2.6.5:
     ajv "^6.12.4"
     ajv-keywords "^3.5.2"
 
+schema-utils@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.0.0.tgz#67502f6aa2b66a2d4032b4279a2944978a0913ef"
+  integrity sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==
+  dependencies:
+    "@types/json-schema" "^7.0.6"
+    ajv "^6.12.5"
+    ajv-keywords "^3.5.2"
+
 semver-compare@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+import 'react-layers-stack/style.css';`
`1`	`2`	`import './index.css';`
`2`	`3`	`import React from 'react';`
`3`	`4`	`import ReactDOM from 'react-dom';`