From 62e7a756d559199ae62520aa31afbcb2a99f61ea Mon Sep 17 00:00:00 2001
From: Fernando Rojo <frojo@sas.upenn.edu>
Date: Wed, 19 May 2021 13:07:56 -0400
Subject: [PATCH 1/9] feat: remove SSR

---
 lerna.json                                    |   6 +-
 packages/core/src/components/index.tsx        |   1 -
 packages/core/src/css/breakpoints.ts          |   2 +
 .../core/src/css/create-themed-component.tsx  |  29 +++--
 packages/core/src/css/index.tsx               |  38 +------
 packages/core/src/css/ssr-component.tsx       |   5 +-
 packages/core/src/css/styled.tsx              |   4 +-
 packages/core/src/css/use-breakpoint-index.ts |  79 ++++++++------
 packages/core/src/index.ts                    |   2 -
 packages/core/src/provider/fresnel.tsx        |  20 +++-
 packages/core/src/provider/index.tsx          | 100 +++++++++++++-----
 packages/core/src/utils/deprecated-ssr.ts     |   4 +
 12 files changed, 164 insertions(+), 126 deletions(-)
 create mode 100644 packages/core/src/utils/deprecated-ssr.ts

diff --git a/lerna.json b/lerna.json
index b8880d4c..705aa70a 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,10 +1,8 @@
 {
-  "packages": [
-    "packages/*"
-  ],
+  "packages": ["packages/*"],
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "version": "1.5.18",
+  "version": "2.0.0",
   "command": {
     "publish": {
       "allowBranch": "master",
diff --git a/packages/core/src/components/index.tsx b/packages/core/src/components/index.tsx
index 92a67267..fbcdbf13 100644
--- 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
index 3b7ee962..9c4dce01 100644
--- 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
index 5729ab74..e77ba41c 100644
--- a/packages/core/src/css/create-themed-component.tsx
+++ b/packages/core/src/css/create-themed-component.tsx
@@ -1,5 +1,5 @@
 /* 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'
@@ -7,16 +7,10 @@ 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}
diff --git a/packages/core/src/css/index.tsx b/packages/core/src/css/index.tsx
index 24d9856f..55484f11 100644
--- a/packages/core/src/css/index.tsx
+++ b/packages/core/src/css/index.tsx
@@ -11,6 +11,7 @@ import { Platform, StyleSheet } from 'react-native'
 import type { ThemedOptions, StyledProps } from './types'
 import { defaultBreakpoints } from './breakpoints'
 import type { DripsyTheme } from '../utils/types'
+import { SUPPORT_FRESNEL_SSR } from '../utils/deprecated-ssr'
 
 export { ThemeProvider }
 
@@ -57,13 +58,9 @@ const responsive = (
       continue
     }
 
-    if (Platform.OS === 'web') {
+    if (Platform.OS === 'web' && SUPPORT_FRESNEL_SSR) {
       next.responsiveSSRStyles = next.responsiveSSRStyles || []
 
-      // fixed breakpoints for now, not customizable
-      // const breakpoints =
-      //   (Array.isArray(theme?.breakpoints) && theme?.breakpoints) ||
-      //   defaultBreakpoints
       const mediaQueries = [0, ...defaultBreakpoints]
 
       for (let i = 0; i < mediaQueries.length; i++) {
@@ -387,6 +384,9 @@ export const css = (
       continue
     }
 
+    /**
+     * @deprecated
+     */
     if (key === 'responsiveSSRStyles' && styles.responsiveSSRStyles) {
       result.responsiveSSRStyles = styles.responsiveSSRStyles.map(
         // here we extract theme values for each item
@@ -510,34 +510,6 @@ export const css = (
   return result
 }
 
-/**
- * This hook is useful when you need to know the responsive value from an array, but on the fly, rather than by rerendering your component.
- */
-// export function useStaticResponsiveValue() {
-//   const { theme } = useThemeUI()
-
-//   return useCallback(
-//     <T extends any>(values: Values<T>) => {
-//       const { width } = Dimensions.get('window')
-//       const getBreakpointIndex = () => {
-//         const breakpointPixels = [...defaultBreakpoints]
-//           .reverse()
-//           .find(breakpoint => width >= breakpoint)
-
-//         let breakpointIndex = defaultBreakpoints.findIndex(
-//           breakpoint => breakpointPixels === breakpoint
-//         )
-//         breakpointIndex = breakpointIndex === -1 ? 0 : breakpointIndex + 1
-//         return breakpointIndex
-//       }
-//       const array = typeof values === 'function' ? values(theme) : values
-//       const index = getBreakpointIndex()
-//       return array[index >= array.length ? array.length - 1 : index]
-//     },
-//     [theme]
-//   )
-// }
-
 export function mapPropsToStyledComponent<P, T>(
   props: StyledProps<P>,
   options: ThemedOptions<T>
diff --git a/packages/core/src/css/ssr-component.tsx b/packages/core/src/css/ssr-component.tsx
index 9a07d5c6..81a371b8 100644
--- a/packages/core/src/css/ssr-component.tsx
+++ b/packages/core/src/css/ssr-component.tsx
@@ -1,11 +1,10 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { jsx, SxProps } from '@theme-ui/core'
-import { ThemeUIStyleObject } from '@theme-ui/css'
-import React, { ComponentProps, ComponentType, Fragment } from 'react'
+import React, { ComponentProps, ComponentType } from 'react'
 import type { ResponsiveSSRStyles } from '.'
 import { SSRMediaQuery } from '../provider/fresnel'
-import { getWebContainerCachedStyle, StyleSheetCache } from './cache'
+import { StyleSheetCache } from './cache'
 
 type Props<T> = {
   Component: ComponentType<T>
diff --git a/packages/core/src/css/styled.tsx b/packages/core/src/css/styled.tsx
index 4d2ab434..cc971b42 100644
--- a/packages/core/src/css/styled.tsx
+++ b/packages/core/src/css/styled.tsx
@@ -2,8 +2,6 @@ import type { ComponentType } from 'react'
 import { createThemedComponent } from './create-themed-component'
 import type { ThemedOptions } from './types'
 
-// type Props<P> = Omit<StyledProps<P>, 'theme' | 'breakpoint'>
-
 /**
  * `styled` is little more than a recreation of `createThemedComponent`, with a nicer API. It does the same thing, but looks a bit nicer to use and has a clean name 😇
  *
@@ -24,7 +22,7 @@ export function styled<P, T>(
     defaultVariant,
   }: Pick<ThemedOptions<T>, 'themeKey' | 'defaultVariant'> = {}
 ) {
-  return (defaultStyle: ThemedOptions<T>['defaultStyle']) => {
+  return (defaultStyle?: ThemedOptions<T>['defaultStyle']) => {
     return createThemedComponent<P, T>(Component, {
       defaultVariant,
       themeKey,
diff --git a/packages/core/src/css/use-breakpoint-index.ts b/packages/core/src/css/use-breakpoint-index.ts
index aa776037..f242c031 100644
--- a/packages/core/src/css/use-breakpoint-index.ts
+++ b/packages/core/src/css/use-breakpoint-index.ts
@@ -2,17 +2,25 @@ import { useThemeUI } from '@theme-ui/core'
 import { Theme } from '@theme-ui/css'
 import { useEffect, useRef, useState } from 'react'
 import { Dimensions, Platform, ScaledSize } from 'react-native'
+import { SUPPORT_FRESNEL_SSR } from '../utils/deprecated-ssr'
+
+export const useBreakpoints = () =>
+  (useThemeUI().theme.breakpoints as number[] | undefined) ?? defaultBreakpoints
 
 import { defaultBreakpoints } from './breakpoints'
-// TODO: Do we need options?
 type DefaultOptions = {
   /**
+   * @deprecated SSR support removed
+   *
    * @default `0`.
    *
    * Pass an optional index as the first one. This is useful if you think you know what device users will be on.
+   *
    */
   defaultIndex?: number
   /**
+   * @deprecated SSR support removed
+   *
    * You're safe to ignore this. It's for internal use.
    *
    * ## Why?
@@ -22,27 +30,40 @@ type DefaultOptions = {
   __shouldDisableListenerOnWeb?: boolean
 }
 
-export function useBreakpointIndex({
-  defaultIndex = 0,
-  __shouldDisableListenerOnWeb = false,
-}: DefaultOptions = {}) {
-  // const { width = 0 } = useDimensions().window
+export const getBreakpointIndex = ({
+  width,
+  breakpoints,
+}: {
+  width: number
+  breakpoints: number[]
+}) => {
+  const breakpointPixels = [...breakpoints]
+    .reverse()
+    .find((breakpoint) => width >= breakpoint)
 
-  // const getIndex = useCallback(() => {
-  //   // return 1;
-  //   // const { width = 700 } = Dimensions.get("window");
-  //   const breakpointPixels = [...defaultBreakpoints]
-  //     .reverse()
-  //     .find(breakpoint => width >= breakpoint)
+  let breakpointIndex = breakpoints.findIndex(
+    (breakpoint) => breakpointPixels === breakpoint
+  )
+  breakpointIndex = breakpointIndex === -1 ? 0 : breakpointIndex + 1
 
-  //   let breakpoint = defaultBreakpoints.findIndex(
-  //     breakpoint => breakpointPixels === breakpoint
-  //   )
-  //   breakpoint = breakpoint === -1 ? 0 : breakpoint + 1
-  //   return breakpoint
-  // }, [width])
+  return breakpointIndex
+}
+
+export const useBreakpointIndex = ({
+  defaultIndex = 0,
+  __shouldDisableListenerOnWeb = false,
+}: DefaultOptions = {}) => {
+  const breakpoints = useBreakpoints()
+  const [index, setIndex] = useState(() => {
+    if (SUPPORT_FRESNEL_SSR && Platform.OS === 'web') {
+      return defaultIndex
+    }
 
-  const [index, setIndex] = useState(defaultIndex)
+    return getBreakpointIndex({
+      width: Dimensions.get('window').width,
+      breakpoints,
+    })
+  })
 
   const indexRef = useRef(index)
 
@@ -60,18 +81,10 @@ export function useBreakpointIndex({
       window: ScaledSize
       screen: ScaledSize
     }) => {
-      const breakpointPixels = [...defaultBreakpoints]
-        .reverse()
-        .find((breakpoint) => width >= breakpoint)
-
-      let breakpointIndex = defaultBreakpoints.findIndex(
-        (breakpoint) => breakpointPixels === breakpoint
-      )
-      breakpointIndex = breakpointIndex === -1 ? 0 : breakpointIndex + 1
+      const breakpointIndex = getBreakpointIndex({ width, breakpoints })
       if (breakpointIndex !== indexRef.current) {
         setIndex(breakpointIndex)
       }
-      // return breakpoint
     }
     if (!shouldDisableListener) {
       Dimensions.addEventListener('change', onChange)
@@ -85,18 +98,14 @@ export function useBreakpointIndex({
         Dimensions.removeEventListener('change', onChange)
       }
     }
-  }, [__shouldDisableListenerOnWeb])
+  }, [__shouldDisableListenerOnWeb, breakpoints])
 
   return index
-  // return getIndex()
 }
 
-type Values<T> = ((theme: Theme | null) => T[]) | T[]
+type ResponsiveValues<T> = ((theme: Theme | null) => T[]) | T[]
 
-export function useResponsiveValue<T>(
-  values: Values<T>
-  // options: defaultOptions = {}
-): T {
+export function useResponsiveValue<T>(values: ResponsiveValues<T>): T {
   const { theme } = useThemeUI()
   const array = typeof values === 'function' ? values(theme) : values
   const index = useBreakpointIndex()
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index e92de5ca..a644ba7f 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -5,8 +5,6 @@ export * from './provider/fresnel'
 export { setBreakpoints } from './css/breakpoints'
 export * from './css/use-breakpoint-index'
 export { Styles, css } from './css'
-// export { ThemeProvider, Th } from '@theme-ui/core'
-// export { InitializeColorMode } from 'theme-ui'
 export type { Theme } from '@theme-ui/css'
 export { styled } from './css/styled'
 
diff --git a/packages/core/src/provider/fresnel.tsx b/packages/core/src/provider/fresnel.tsx
index dfa68916..3e6351dc 100644
--- a/packages/core/src/provider/fresnel.tsx
+++ b/packages/core/src/provider/fresnel.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { createMedia } from '@artsy/fresnel'
 import { defaultBreakpoints } from '../css/breakpoints'
+import { SUPPORT_FRESNEL_SSR } from '../utils/deprecated-ssr'
 
 const {
   MediaContextProvider,
@@ -21,8 +22,21 @@ const {
 
 const ssrStyleReset = createMediaStyle()
 
-const SSRStyleReset = () => (
-  <style type="text/css" dangerouslySetInnerHTML={{ __html: ssrStyleReset }} />
-)
+/**
+ * @deprecated SSR support has been dropped. For more info, please see: https://github.com/nandorojo/dripsy/issues/100
+ */
+const SSRStyleReset = () => {
+  if (!SUPPORT_FRESNEL_SSR) {
+    console.error(
+      '[dripsy] <SSRStyleReset /> is deprecated, since SSR support has been dropped. For more info, please see: https://github.com/nandorojo/dripsy/issues/100'
+    )
+  }
+  return (
+    <style
+      type="text/css"
+      dangerouslySetInnerHTML={{ __html: ssrStyleReset }}
+    />
+  )
+}
 
 export { SSRMediaQuery, SSRStyleReset, ssrStyleReset, MediaContextProvider }
diff --git a/packages/core/src/provider/index.tsx b/packages/core/src/provider/index.tsx
index f45dddd2..d4a8c7da 100644
--- a/packages/core/src/provider/index.tsx
+++ b/packages/core/src/provider/index.tsx
@@ -1,37 +1,88 @@
-import React, { ComponentProps, useContext } from 'react'
+import React, { ComponentProps, useEffect, useRef, useState } from 'react'
 import { Platform } from 'react-native'
 import { ThemeProvider as ThemeUIProvider } from '@theme-ui/core'
 import { MediaContextProvider } from './fresnel'
+import { SUPPORT_FRESNEL_SSR } from '../utils/deprecated-ssr'
 
-type DripsyOptions = {
-  ssr?: boolean
-}
+type Props = ComponentProps<typeof ThemeUIProvider> &
+  (
+    | {
+        /**
+         * Set this boolean to `true` if you are using SSR on your app.
+         *
+         * Keep in mind, Dripsy doesn't support SSR anymore.
+         *
+         * Enabling this boolean just renders `null` until your app has mounted on web.
+         *
+         * Set this to `true` if you aren't gating your content already, and if you use responsive arrays in your app.
+         */
+        ssr?: false
+        ssrPlaceholder?: never
+      }
+    | {
+        /**
+         * Set this boolean to `true` if you are using SSR on your app.
+         *
+         * Keep in mind, Dripsy doesn't support SSR anymore.
+         *
+         * Enabling this boolean just renders `null` until your app has mounted on web.
+         *
+         * Set this to `true` if you aren't gating your content already, and if you use responsive arrays in your app.
+         */
+        ssr: true
+        /**
+         * When `ssr` is true, your app will return null on the first mount by default.
+         *
+         * You can use the ssrPlaceholder if you'd prefer.
+         *
+         * ```tsx
+         * <DripsyProvider ssr ssrPlaceholder={<LoadingScreen />}>{children}</DripsyProvider>
+         * ```
+         */
+        ssrPlaceholder?: React.ReactNode
+      }
+  )
 
-type Props = ComponentProps<typeof ThemeUIProvider> & {
-  // options?: DripsyOptions
-}
+const useIsSSRReady = ({ ssr = false }: Pick<Props, 'ssr'>) => {
+  const [ready, setReady] = useState(() => {
+    if (Platform.OS !== 'web') {
+      return true
+    }
+    if (ssr) {
+      return false
+    }
+    return true
+  })
 
-export let dripsyOptions: DripsyOptions = {
-  ssr: false,
-}
+  const isSSR = useRef(ssr)
 
-export const setDripsyOptions = (options: Partial<DripsyOptions>) => {
-  dripsyOptions = { ...dripsyOptions, ...options }
-}
+  useEffect(() => {
+    if (isSSR.current) {
+      setReady(true)
+    }
+  }, [])
 
-const DripsyContext = React.createContext<DripsyOptions>(dripsyOptions)
+  return {
+    ready,
+  }
+}
 
-export function DripsyProvider(props: Props) {
-  // if (options) setDripsyOptions(options)
+export function DripsyProvider(p: Props) {
+  const { ssrPlaceholder = null, ssr, ...props } = p
+  const { ready } = useIsSSRReady({ ssr })
 
   const ResponsiveContextProvider =
-    Platform.OS === 'web' ? MediaContextProvider : React.Fragment
+    Platform.OS === 'web' && SUPPORT_FRESNEL_SSR
+      ? MediaContextProvider
+      : React.Fragment
+
+  if (!ready) {
+    return ssrPlaceholder
+  }
 
   return (
     <ResponsiveContextProvider>
-      <DripsyContext.Provider value={dripsyOptions}>
-        <ThemeUIProvider {...props} />
-      </DripsyContext.Provider>
+      <ThemeUIProvider {...props} />
     </ResponsiveContextProvider>
   )
 }
@@ -39,11 +90,8 @@ export function DripsyProvider(props: Props) {
 /**
  * @deprecated use DripsyProvider instead
  */
-export function ThemeProvider(props: ComponentProps<typeof DripsyProvider>) {
-  console.warn(
-    '🍷 [Dripsy] ThemeProvider is deprecated, please use DripsyProvider instead. ThemeProvider will be removed next release.'
+export function ThemeProvider() {
+  throw new Error(
+    '🍷 [Dripsy] ThemeProvider is deprecated, please use DripsyProvider instead.'
   )
-  return <DripsyProvider {...props} />
 }
-
-export const useIsSSR = () => !!useContext(DripsyContext).ssr
diff --git a/packages/core/src/utils/deprecated-ssr.ts b/packages/core/src/utils/deprecated-ssr.ts
new file mode 100644
index 00000000..e3b7d8a0
--- /dev/null
+++ b/packages/core/src/utils/deprecated-ssr.ts
@@ -0,0 +1,4 @@
+/**
+ * @deprecated SSR IS DEPRECATED
+ */
+export const SUPPORT_FRESNEL_SSR = false

From 14877ea5462331c4a71639cbafd6bf8eaa23954d Mon Sep 17 00:00:00 2001
From: Fernando Rojo <frojo@sas.upenn.edu>
Date: Wed, 19 May 2021 13:17:06 -0400
Subject: [PATCH 2/9] version

---
 lerna.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lerna.json b/lerna.json
index 705aa70a..c56fded1 100644
--- a/lerna.json
+++ b/lerna.json
@@ -2,7 +2,7 @@
   "packages": ["packages/*"],
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "version": "2.0.0",
+  "version": "1.0.0",
   "command": {
     "publish": {
       "allowBranch": "master",

From 91dab9a6451426a33622298670f81aace13f284c Mon Sep 17 00:00:00 2001
From: Fernando Rojo <frojo@sas.upenn.edu>
Date: Wed, 19 May 2021 13:17:16 -0400
Subject: [PATCH 3/9] Publish

---
 CHANGELOG.md                       | 11 +++++++++++
 examples/next-example/CHANGELOG.md |  8 ++++++++
 examples/next-example/package.json |  2 +-
 lerna.json                         |  6 ++++--
 packages/core/CHANGELOG.md         | 11 +++++++++++
 packages/core/package.json         |  2 +-
 packages/dripsy/CHANGELOG.md       |  8 ++++++++
 packages/dripsy/package.json       |  4 ++--
 8 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2aba430c..6aa7afbf 100644
--- 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/examples/next-example/CHANGELOG.md b/examples/next-example/CHANGELOG.md
index d5d9a695..47081bac 100644
--- 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
index 5a83cd5d..ed8a3fa5 100644
--- 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/lerna.json b/lerna.json
index c56fded1..a02bd16e 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,8 +1,10 @@
 {
-  "packages": ["packages/*"],
+  "packages": [
+    "packages/*"
+  ],
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "version": "1.0.0",
+  "version": "2.0.0-alpha.0",
   "command": {
     "publish": {
       "allowBranch": "master",
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index 7052cfa1..a6693550 100644
--- 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
index 69abbb8c..0bf13102 100644
--- 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",
   "description": "🍷 A super-simple responsive design system for React Native Web.",
   "main": "build/index.js",
   "types": "build/index.d.ts",
diff --git a/packages/dripsy/CHANGELOG.md b/packages/dripsy/CHANGELOG.md
index 81fcd171..71193879 100644
--- a/packages/dripsy/CHANGELOG.md
+++ b/packages/dripsy/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/expo-theme-ui/compare/v1.5.18...v2.0.0-alpha.0) (2021-05-19)
+
+**Note:** Version bump only for package dripsy
+
+
+
+
+
 ## [1.5.18](https://github.com/nandorojo/expo-theme-ui/compare/v1.5.17...v1.5.18) (2021-05-09)
 
 
diff --git a/packages/dripsy/package.json b/packages/dripsy/package.json
index 955e0118..0b9913f0 100644
--- a/packages/dripsy/package.json
+++ b/packages/dripsy/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dripsy",
-  "version": "1.5.18",
+  "version": "2.0.0-alpha.0",
   "description": "🍷 A super-simple responsive design system for React Native Web.",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -78,7 +78,7 @@
     "typescript": "^4.1.2"
   },
   "dependencies": {
-    "@dripsy/core": "^1.5.18"
+    "@dripsy/core": "^2.0.0-alpha.0"
   },
   "sideEffects": false,
   "gitHead": "90347c0bbe4e9695a14a4e13f45b5e685b5a9725"

From bead46741f0e015f27aac57d1742bbef61e10d62 Mon Sep 17 00:00:00 2001
From: Fernando Rojo <frojo@sas.upenn.edu>
Date: Wed, 19 May 2021 13:23:56 -0400
Subject: [PATCH 4/9] canary versions

---
 packages/core/package.json   | 4 ++--
 packages/dripsy/package.json | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/core/package.json b/packages/core/package.json
index 0bf13102..f492946b 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dripsy/core",
-  "version": "2.0.0-alpha.0",
+  "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/dripsy/package.json b/packages/dripsy/package.json
index 0b9913f0..3b6a6443 100644
--- a/packages/dripsy/package.json
+++ b/packages/dripsy/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dripsy",
-  "version": "2.0.0-alpha.0",
+  "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",
@@ -78,8 +78,8 @@
     "typescript": "^4.1.2"
   },
   "dependencies": {
-    "@dripsy/core": "^2.0.0-alpha.0"
+    "@dripsy/core": "^2.0.0-alpha.0+91dab9a"
   },
   "sideEffects": false,
-  "gitHead": "90347c0bbe4e9695a14a4e13f45b5e685b5a9725"
+  "gitHead": "91dab9a6451426a33622298670f81aace13f284c"
 }

From d84cb85b55d0aafed7d84030ce182d94997290a5 Mon Sep 17 00:00:00 2001
From: Fernando Rojo <frojo@sas.upenn.edu>
Date: Thu, 20 May 2021 16:46:18 -0400
Subject: [PATCH 5/9] docs: deprecate webContainerSx...

---
 packages/core/src/css/types.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/core/src/css/types.ts b/packages/core/src/css/types.ts
index fc0fb656..e5078c19 100644
--- a/packages/core/src/css/types.ts
+++ b/packages/core/src/css/types.ts
@@ -28,6 +28,8 @@ export type StyledProps<P> = SxProps & {
   breakpoint?: number
   theme: Theme
   /**
+   * @deprecated SSR support was deprecated in v2. This prop is no longer needed. It won't do anything.
+   *
    * This styles the `div` that wraps your responsive item. CSS values are fine here, and they can also be responsive.
    */
   webContainerSx?: SxProps['sx']

From 9afb658c486ce24cd59074bab04b1047a50fec76 Mon Sep 17 00:00:00 2001
From: Fernando Rojo <frojo@sas.upenn.edu>
Date: Thu, 20 May 2021 16:48:25 -0400
Subject: [PATCH 6/9] errors: breakpoint validation

---
 packages/core/src/css/use-breakpoint-index.ts | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/css/use-breakpoint-index.ts b/packages/core/src/css/use-breakpoint-index.ts
index f242c031..15b48ca3 100644
--- a/packages/core/src/css/use-breakpoint-index.ts
+++ b/packages/core/src/css/use-breakpoint-index.ts
@@ -4,8 +4,30 @@ import { useEffect, useRef, useState } from 'react'
 import { Dimensions, Platform, ScaledSize } from 'react-native'
 import { SUPPORT_FRESNEL_SSR } from '../utils/deprecated-ssr'
 
-export const useBreakpoints = () =>
-  (useThemeUI().theme.breakpoints as number[] | undefined) ?? defaultBreakpoints
+export const useBreakpoints = () => {
+  const breakpoints = useThemeUI().theme.breakpoints as number[] | undefined
+  if (breakpoints) {
+    if (!Array.isArray(breakpoints)) {
+      const arrayError =
+        '[dripsy] theme.breakpoints must be an array. Or, you can leave it blank. However, you used \n' +
+        JSON.stringify(breakpoints) +
+        '\n Please turn this into an array, or remove the breakpoints from your theme.'
+      if (typeof __DEV__ !== 'undefined' && __DEV__) {
+        throw new Error(arrayError)
+      } else {
+        console.error(arrayError)
+      }
+    }
+    if (breakpoints.some((value) => typeof value !== 'number')) {
+      console.error(
+        '[dripsy] Invalid breakpoints passed to theme.breakpoints. Expected an array of numbers, but got this: \n',
+        JSON.stringify(breakpoints),
+        '\nPlease turn these into numbers, or remove the breakpoints array from your theme.'
+      )
+    }
+  }
+  return defaultBreakpoints
+}
 
 import { defaultBreakpoints } from './breakpoints'
 type DefaultOptions = {

From 83851e55f82ac8b95c08f34427cc31c5915f6f30 Mon Sep 17 00:00:00 2001
From: Fernando Rojo <frojo@sas.upenn.edu>
Date: Thu, 20 May 2021 16:48:35 -0400
Subject: [PATCH 7/9] fix provider types

---
 packages/core/src/provider/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/provider/index.tsx b/packages/core/src/provider/index.tsx
index d4a8c7da..10bf8f8e 100644
--- a/packages/core/src/provider/index.tsx
+++ b/packages/core/src/provider/index.tsx
@@ -77,7 +77,7 @@ export function DripsyProvider(p: Props) {
       : React.Fragment
 
   if (!ready) {
-    return ssrPlaceholder
+    return <>{ssrPlaceholder}</>
   }
 
   return (

From a602a5f3228c6aa10f89df5f3c08133b6dc0d6c7 Mon Sep 17 00:00:00 2001
From: Fernando Rojo <frojo@sas.upenn.edu>
Date: Thu, 20 May 2021 17:54:31 -0400
Subject: [PATCH 8/9] docs

---
 README.md | 71 +++++++++++++++++++++++++++++--------------------------
 1 file changed, 38 insertions(+), 33 deletions(-)

diff --git a/README.md b/README.md
index 94938ad1..543e7f79 100644
--- 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.

From 919d973b3c83357cfdf7073bef72c6f5e6cc16f3 Mon Sep 17 00:00:00 2001
From: Fernando Rojo <frojo@sas.upenn.edu>
Date: Thu, 20 May 2021 17:55:28 -0400
Subject: [PATCH 9/9] remove ssr code from _document

---
 examples/next-example/pages/_document.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/examples/next-example/pages/_document.js b/examples/next-example/pages/_document.js
index e5fcc5e3..d7f569ae 100644
--- 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>