nandorojo · nandorojo · May 20, 2021 · May 19, 2021 · May 19, 2021 · May 19, 2021
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0-alpha.0](https://github.com/nandorojo/expo-theme-ui/compare/v1.5.18...v2.0.0-alpha.0) (2021-05-19)
+
+
+### Features
+
+* remove SSR ([62e7a75](https://github.com/nandorojo/expo-theme-ui/commit/62e7a756d559199ae62520aa31afbcb2a99f61ea))
+
+
+
+
+
 ## [1.5.18](https://github.com/nandorojo/expo-theme-ui/compare/v1.5.17...v1.5.18) (2021-05-09)
 
 

diff --git a/README.md b/README.md
@@ -22,7 +22,7 @@ A **dead-simple**, **responsive** design system for Expo / React Native Web. Hea
 - Universal (Android, iOS, Web, & more)
 - Works with Expo
 - Works with Vanilla React Native
-- Works with Next.js / server-side rendering
+- Works with Next.js
 - Full theme support
 - Custom theme variants
 - TypeScript support (TypeScript theme support is in the works too)
@@ -59,7 +59,7 @@ yarn add dripsy
 npm i dripsy
 ```
 
-If you're using Next.js or another SSR app, scroll down to see how to configure.
+If you're using Next.js or another SSR app, scroll down to see how to configure it.
 
 # 🛠 Set up
 
@@ -92,16 +92,16 @@ const theme = {
     circular: {
       default: 'Circular-StdBook',
       bold: 'Circular-StdBold',
-      black: 'Circular-StdBlack'
-    }
+      black: 'Circular-StdBlack',
+    },
   },
   space: [10, 12, 14],
   text: {
     thick: {
       fontFamily: 'root',
-      fontWeight: 'black' // 'Circular-StdBlack'
-    }
-  }
+      fontWeight: 'black', // 'Circular-StdBlack'
+    },
+  },
 }
 
 export default function App() {
@@ -127,7 +127,7 @@ If you're using `expo start:web`, this section is for you. If you're using Expo
 
 `yarn add -D @expo/webpack-config`
 
-Create a custom `webpack.config.js` file: 
+Create a custom `webpack.config.js` file:
 
 ```js
 const createExpoWebpackConfigAsync = require('@expo/webpack-config')
@@ -136,7 +136,9 @@ module.exports = async function (env, argv) {
   const config = await createExpoWebpackConfigAsync(
     {
       ...env,
-      babel: { dangerouslyAddModulePathsToTranspile: ['dripsy', '@dripsy'] },
+      babel: {
+        dangerouslyAddModulePathsToTranspile: ['dripsy', '@dripsy/core'],
+      },
     },
     argv
   )
@@ -145,17 +147,16 @@ module.exports = async function (env, argv) {
 }
 ```
 
-
 ## For SSR apps (Next.js, Gatsby, etc.)
 
-If you are not using Next.js, skip down to #3 below.
+If you are using SSR without Next.js, skip down to #3 below.
 
 Steps 1 & 2 are required for Next.js apps (for example, if you're using Expo + Next.js.)
 
 **1. Install dependencies**
 
 ```sh
-yarn add next-compose-plugins next-transpile-modules
+yarn add -D next-compose-plugins next-transpile-modules
 ```
 
 **2. Edit your `next.config.js` file to look like this:**
@@ -164,37 +165,40 @@ yarn add next-compose-plugins next-transpile-modules
 const withPlugins = require('next-compose-plugins')
 const withTM = require('next-transpile-modules')([
   'dripsy',
-  '@dripsy/core'
+  '@dripsy/core',
   // you can add other packages here that need transpiling
 ])
 
 const { withExpo } = require('@expo/next-adapter')
 
-module.exports = withPlugins(
-  [withTM],
-  withExpo({
-    projectRoot: __dirname,
-  })
-)
+module.exports = withPlugins([withTM, [withExpo, { projectRoot: __dirname }]])
 ```
 
-3. Add `SSRStyleReset` to the top of your `body`
+**3. Set `ssr={true}` on `DripsyProvider`**
 
-Import `SSRStyleReset` and inject it at the top of your `body` HTML tag.
+```js
+// pages/_app.js
 
-```jsx
-import { SSRStyleReset } from 'dripsy'
-;<body>
-  <SSRStyleReset />
-  <YourApp />
-</body>
+export default function App({ pageProps, Component }) {
+  return (
+    <>
+      <DripsyProvider
+        ssr
+        ssrPlaceholder={<LoadingScreen />} // optional
+        theme={theme}
+      >
+        <Component {...pageProps} />
+      </DripsyProvider>
+    </>
+  )
+}
 ```
 
-If you're using Next.js, this should go in `pages/_document.js`.
+What does `ssr: true` do, exactly? All it does is return `null` until your app is mounted (on web). This is because Dripsy uses the `Dimensions` API from `react-native`, which isn't compatible with server-side rendering.
 
-Your `pages/_document.js` should look something like [this](https://github.com/nandorojo/dripsy/blob/master/examples/next-example/pages/_document.js).
+If your app already returns `null` on the first render, then you don't need to set `ssr: true`. For instance, using `react-native-safe-area-context`'s `SafeAreaProvider` already does this for you.
 
-We'll add other library examples here too, such as Gatsby.
+If you're curious how you can still leverage Next.js's great static generation feature for SEO with dynamic meta tags, check out the **SEO Recommendations** section on [this PR](https://github.com/nandorojo/dripsy/pull/101).
 
 ---
 
@@ -211,8 +215,9 @@ export default {
     background: '#fff',
     primary: 'tomato',
   },
-  spacing: [10, 12, 14],
-  fontSizes: [16, 20, 24],
+  // set 0 first, then double for consistent nested spacing
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+  fontSizes: [16, 20, 24, 32],
   text: {
     h1: {
       fontSize: 3, // this is 24px, taken from `fontSize` above
@@ -712,7 +717,7 @@ To improve the performance of loading your fonts on web, you can add something l
   href="/fonts/circ/CircularStd-Medium.ttf"
   as="font"
   crossOrigin=""
-/> 
+/>
 ```
 
 Create a `link` for each font you're importing, and make sure to keep the `preload` prop to make it load early.

diff --git a/examples/next-example/CHANGELOG.md b/examples/next-example/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0-alpha.0](https://github.com/nandorojo/dripsy/compare/v1.5.18...v2.0.0-alpha.0) (2021-05-19)
+
+**Note:** Version bump only for package next-dripsy-example
+
+
+
+
+
 ## [1.5.8](https://github.com/nandorojo/dripsy/compare/v1.5.7...v1.5.8) (2021-04-20)
 
 **Note:** Version bump only for package next-dripsy-example

diff --git a/examples/next-example/package.json b/examples/next-example/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next-dripsy-example",
-  "version": "1.5.8",
+  "version": "2.0.0-alpha.0",
   "main": "__generated__/AppEntry.js",
   "dependencies": {
     "expo": "^40.0.0",

diff --git a/examples/next-example/pages/_document.js b/examples/next-example/pages/_document.js
@@ -2,7 +2,6 @@
 // and https://github.com/expo/expo-cli/blob/master/packages/webpack-config/web-default/index.html
 import NextDocument, { Head, Main, NextScript } from 'next/document'
 import * as React from 'react'
-import { SSRStyleReset } from 'dripsy'
 
 import { AppRegistry } from 'react-native'
 
@@ -66,7 +65,6 @@ export class Document extends NextDocument {
     return (
       <html>
         <Head>
-          <SSRStyleReset />
           <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
         </Head>
         <body>

diff --git a/lerna.json b/lerna.json
@@ -4,7 +4,7 @@
   ],
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "version": "1.5.18",
+  "version": "2.0.0-alpha.0",
   "command": {
     "publish": {
       "allowBranch": "master",

diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0-alpha.0](https://github.com/nandorojo/expo-theme-ui/compare/v1.5.18...v2.0.0-alpha.0) (2021-05-19)
+
+
+### Features
+
+* remove SSR ([62e7a75](https://github.com/nandorojo/expo-theme-ui/commit/62e7a756d559199ae62520aa31afbcb2a99f61ea))
+
+
+
+
+
 ## [1.5.18](https://github.com/nandorojo/expo-theme-ui/compare/v1.5.17...v1.5.18) (2021-05-09)
 
 

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dripsy/core",
-  "version": "1.5.18",
+  "version": "2.0.0-alpha.0+91dab9a",
   "description": "🍷 A super-simple responsive design system for React Native Web.",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -87,5 +87,5 @@
     "@theme-ui/css": "^0.4.0-rc.1"
   },
   "sideEffects": false,
-  "gitHead": "90347c0bbe4e9695a14a4e13f45b5e685b5a9725"
+  "gitHead": "91dab9a6451426a33622298670f81aace13f284c"
 }
diff --git a/packages/core/src/components/index.tsx b/packages/core/src/components/index.tsx
@@ -10,7 +10,6 @@ import {
 } from '@expo/html-elements'
 
 import {
-  // TODO I could import * as Native, but would that break tree shaking?
   View as rView,
   Text as rText,
   ScrollView as rScrollView,

diff --git a/packages/core/src/css/breakpoints.ts b/packages/core/src/css/breakpoints.ts
@@ -12,6 +12,8 @@ let hasSetBreakpoints = false
  *
  * import { DripsyProvider } from 'dripsy'
  * ```
+ *
+ * @deprecated use `breakpoints` in your theme instead
  */
 export function setBreakpoints(breakpoints: typeof defaultBreakpoints) {
   if (hasSetBreakpoints) {

diff --git a/packages/core/src/css/create-themed-component.tsx b/packages/core/src/css/create-themed-component.tsx
@@ -1,22 +1,16 @@
 /* eslint-disable @typescript-eslint/ban-ts-ignore */
-import React, { ComponentType, ComponentProps, useMemo } from 'react'
+import React, { ComponentType, ComponentProps } from 'react'
 import type { ThemedOptions, StyledProps } from './types'
 import { useThemeUI } from '@theme-ui/core'
 import { useBreakpointIndex } from './use-breakpoint-index'
 import { SSRComponent } from './ssr-component'
 import { Platform, StyleSheet } from 'react-native'
 import { StyleSheetCache } from './cache'
 import { mapPropsToStyledComponent } from '.'
+import { SUPPORT_FRESNEL_SSR } from '../utils/deprecated-ssr'
 
 type Props<P> = Omit<StyledProps<P>, 'theme' | 'breakpoint'>
 
-// const cache: Record<
-//   string,
-//   {
-//     dripsyStyle: Record<string, unknown>
-//   }
-// > = {}
-
 export function createThemedComponent<P, T>(
   Component: ComponentType<P>,
   { defaultStyle: baseStyle, ...options }: ThemedOptions<T> = {}
@@ -25,10 +19,11 @@ export function createThemedComponent<P, T>(
     ComponentProps<typeof Component> &
     T &
     P &
-    // needed for the ref field in TS
+    /**
+     * TODO this doesn't work.
+     */
     React.RefAttributes<typeof Component>
 > {
-  // without styled-components...
   const WrappedComponent = React.forwardRef<
     typeof Component,
     Props<P> & ComponentProps<typeof Component> & T
@@ -53,16 +48,14 @@ export function createThemedComponent<P, T>(
 
     const { theme } = useThemeUI()
     const breakpoint = useBreakpointIndex({
-      __shouldDisableListenerOnWeb: true,
+      __shouldDisableListenerOnWeb: SUPPORT_FRESNEL_SSR,
     })
-    // const ssr = useIsSSR()
-    // change/remove this later maybe
-    const ssr = Platform.OS === 'web'
 
     const { responsiveSSRStyles, ...styles } = mapPropsToStyledComponent<P, T>(
       {
         theme,
-        breakpoint: Platform.OS === 'web' && ssr ? undefined : breakpoint,
+        breakpoint:
+          Platform.OS === 'web' && SUPPORT_FRESNEL_SSR ? undefined : breakpoint,
         variant,
         sx,
         style,
@@ -78,7 +71,11 @@ export function createThemedComponent<P, T>(
 
     const TheComponent = SuperComponent || Component
 
-    if (Platform.OS === 'web' && ssr && !!responsiveSSRStyles?.length) {
+    if (
+      Platform.OS === 'web' &&
+      SUPPORT_FRESNEL_SSR &&
+      !!responsiveSSRStyles?.length
+    ) {
       return (
         <SSRComponent
           {...props}