Merge pull request #50 from jpudysz/feature/ssr

Add support for SSR and NextJS

.gitignore

@@ -42,10 +42,10 @@ android.iml
 
 # Cocoapods
 #
-example/ios/Pods
+examples/expo/ios/Pods
 
 # Ruby
-example/vendor/
+examples/expo/vendor/
 
 # node.js
 #
@@ -76,7 +76,8 @@ android/keystores/debug.keystore
 
 # generated by bob
 lib/
-example/.yarn
+example/expo/.yarn
 
 #docs
 docs/.yarn
+coverage

README.md

@@ -8,7 +8,7 @@
 
 ![GitHub package.json version](https://img.shields.io/github/package-json/v/jpudysz/react-native-unistyles?style=for-the-badge)
 [![npm downloads](https://img.shields.io/npm/dm/react-native-unistyles.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-unistyles)
-![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS%20%7C%20RNWeb-blue.svg?style=for-the-badge)
+![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20IOS%20%7C%20SSR%20%7C%20Web-blue.svg?style=for-the-badge)
 [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)
 
 ## Features
@@ -18,7 +18,8 @@
 - 🖥️ Supports custom breakpoints and css-like media queries
 - 🎨 Access theme in your StyleSheets and components
 - 🪄 Supports dynamic functions to access values from JSX
-- 🥳 Compatible with Expo, Expo Go, Bare React Native and React Native Web
+- 🥳 Compatible with Expo, Expo Go, Bare React Native, React Native Web and SSR
+- 🛡️ ~99% Test coverage
 - ⚔️ No 3rd party dependencies
 
 *-based on this [benchmark](https://github.com/efstathiosntonas/react-native-style-libraries-benchmark)

docs/src/content/docs/index.mdx

@@ -11,7 +11,7 @@ hero:
       icon: right-arrow
       variant: primary
     - text: Examples
-      link: https://github.com/jpudysz/react-native-unistyles/tree/main/example
+      link: https://github.com/jpudysz/react-native-unistyles/tree/main/examples
       icon: external
 ---
 

example/babel.config.js → examples/expo/babel.config.js

@@ -1,5 +1,5 @@
 const path = require('path')
-const pak = require('../package.json')
+const pak = require('../../package.json')
 
 module.exports = function (api) {
     api.cache(true)
@@ -13,7 +13,7 @@ module.exports = function (api) {
                     extensions: ['.tsx', '.ts', '.js', '.json'],
                     alias: {
                         // For development, we want to alias the library to the source
-                        [pak.name]: path.join(__dirname, '..', pak.source)
+                        [pak.name]: path.join(__dirname, '../..', pak.source)
                     }
                 }
             ]

example/metro.config.js → examples/expo/metro.config.js

@@ -2,9 +2,9 @@ const path = require('path')
 const escape = require('escape-string-regexp')
 const { getDefaultConfig } = require('@expo/metro-config')
 const exclusionList = require('metro-config/src/defaults/exclusionList')
-const pak = require('../package.json')
+const pak = require('../../package.json')
 
-const root = path.resolve(__dirname, '..')
+const root = path.resolve(__dirname, '../..')
 const modules = Object.keys({ ...pak.peerDependencies })
 
 const defaultConfig = getDefaultConfig(__dirname)

example/tsconfig.json → examples/expo/tsconfig.json

@@ -3,7 +3,7 @@
   "extends": "expo/tsconfig.base",
   "references": [
     {
-      "path": "../"
+      "path": "../../"
     }
   ]
 }

example/webpack.config.js → examples/expo/webpack.config.js

@@ -2,7 +2,7 @@ const path = require('path')
 const createExpoWebpackConfigAsync = require('@expo/webpack-config')
 const { resolver } = require('./metro.config')
 
-const root = path.resolve(__dirname, '..')
+const root = path.resolve(__dirname, '../..')
 const modules = path.join(__dirname, 'node_modules')
 
 module.exports = async (env, argv) => {

examples/ssr/README.md

@@ -0,0 +1 @@
+Due to a package scoping issue with NextJS and Yarn, I decided to move the example to a separate repository, which can be found [here](https://github.com/jpudysz/react-native-unistyles-ssr-exmaple).

package.json

@@ -4,6 +4,7 @@
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",
+    "test:coverage": "jest --coverage",
     "tsc": "node_modules/typescript/bin/tsc --noEmit",
     "lint": "eslint . --ext .ts,.tsx",
     "clean": "del-cli lib",
@@ -84,7 +85,7 @@
     }
   },
   "workspaces": [
-    "example",
+    "examples/expo",
     "docs"
   ],
   "packageManager": "[email protected]",
@@ -94,9 +95,13 @@
   "jest": {
     "preset": "react-native",
     "modulePathIgnorePatterns": [
-      "<rootDir>/example/node_modules",
+      "<rootDir>/examples/expo/node_modules",
+      "<rootDir>/examples/ssr/node_modules",
       "<rootDir>/docs/node_modules",
       "<rootDir>/lib/"
+    ],
+    "coverageReporters": [
+      "html"
     ]
   },
   "commitlint": {