feat: next js, unfinished

docs/ssr/next-js.md

@@ -0,0 +1,47 @@
+# Moti + Next.js
+
+## Step 1
+
+Add `moti` to transpile modules.
+
+```sh
+yarn add next-transpile-modules
+```
+
+Your `next.config.js` file should look something like this:
+
+```js
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { withExpo } = require('@expo/next-adapter')
+const withFonts = require('next-fonts')
+const withImages = require('next-images')
+const withPlugins = require('next-compose-plugins')
+
+const withTM = require('next-transpile-modules')([
+  'moti',
+  // you can add other modules that need traspiling here
+])
+
+module.exports = withPlugins(
+  [withTM, withFonts, withImages, [withExpo, { projectRoot: __dirname }]],
+  {
+    // ...
+  }
+)
+```
+
+## Step 2
+
+Add the `raf` polyfill.
+
+`yarn add raf`
+
+Then add this in `pages/_app.js`
+
+```jsx
+import 'raf/polyfill' // add this at the top
+
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />
+}
+```

example/app.json → examples/with-expo/app.json

@@ -1,9 +1,9 @@
 {
-  "name": "moti-example",
-  "displayName": "BobMonorepo Example",
+  "name": "with-expo",
+  "displayName": "Moti Expo example",
   "expo": {
-    "name": "moti-example",
-    "slug": "moti-example",
+    "name": "with-expo",
+    "slug": "with-expo",
     "description": "Example app for moti",
     "privacy": "public",
     "version": "1.0.0",

example/package.json → examples/with-expo/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "moti-example",
+  "name": "with-expo",
   "description": "Example app for moti",
   "version": "0.0.1",
   "private": true,

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

@@ -2,7 +2,8 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "moti": ["../packages/moti/src"]
+      "moti": ["../../packages/moti/src"],
+      "@moti/*": ["../../packages/*/src"]
     },
     "jsx": "react-native",
     "target": "esnext",

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

@@ -2,17 +2,16 @@
 const createExpoWebpackConfigAsync = require('@expo/webpack-config')
 const fs = require('fs')
 const path = require('path')
-const webpack = require('webpack')
 
 const packageName = 'moti'
 
-const node_modules = path.resolve(__dirname, '..', 'node_modules')
-const packages = path.resolve(__dirname, '..', 'packages')
+const node_modules = path.resolve(__dirname, '../..', 'node_modules')
+const packages = path.resolve(__dirname, '../..', 'packages')
 
 module.exports = async function (env, argv) {
   const config = await createExpoWebpackConfigAsync(env, argv)
 
-  config.context = path.resolve(__dirname, '..')
+  config.context = path.resolve(__dirname, '../..')
 
   config.module.rules.push({
     test: /\.(js|ts|tsx)$/,
@@ -47,7 +46,7 @@ module.exports = async function (env, argv) {
       ] = path.resolve(
         packages,
         name,
-        require(`../packages/${name}/package.json`).source
+        require(`../../packages/${name}/package.json`).source
       )
     })
 

examples/with-next/.gitignore

@@ -0,0 +1,25 @@
+# @generated: @expo/next-adapter@2.1.0
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+web-report/
+
+# debug
+yarn-debug.log*
+yarn-error.log*
+
+# macOS
+.DS_Store
+
+# misc
+.DS_Store
+.env*
+
+.next

examples/with-next/App.tsx

@@ -0,0 +1,54 @@
+import { AnimatePresence } from 'framer-motion'
+import React, { useReducer, useState } from 'react'
+import { StyleSheet, Pressable } from 'react-native'
+import * as Moti from 'moti'
+
+const { View } = Moti
+
+function Shape() {
+  return (
+    <View
+      from={{
+        opacity: 0,
+        scale: 0.9,
+      }}
+      animate={{
+        opacity: 1,
+        scale: 1,
+      }}
+      exit={{
+        opacity: 0,
+        scale: 0.9,
+      }}
+      style={styles.shape}
+    />
+  )
+}
+
+export default function Presence() {
+  const [visible, toggle] = useReducer((s) => !s, true)
+
+  return (
+    <Pressable onPress={toggle} style={styles.container}>
+      <AnimatePresence>{visible && <Shape />}</AnimatePresence>
+    </Pressable>
+  )
+}
+
+const styles = StyleSheet.create({
+  shape: {
+    justifyContent: 'center',
+    height: 250,
+    width: 250,
+    borderRadius: 25,
+    marginRight: 10,
+    backgroundColor: 'white',
+  },
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    backgroundColor: '#9c1aff',
+  },
+})

examples/with-next/README.md

@@ -0,0 +1,24 @@
+# Dripsy + [Next.js Example](https://www.nextjs.org/)
+
+To run this example, clone the root repository.
+
+```sh
+git clone https://github.com/nandorojo/dripsy
+cd dripsy
+```
+
+Link & install dependencies
+
+```sh
+yarn
+yarn link
+cd next-example
+yarn
+yarn link dripsy
+```
+
+Run it
+
+```sh
+yarn next
+```

examples/with-next/app.json

@@ -0,0 +1,19 @@
+{
+  "name": "dripsy-next-example",
+  "displayName": "Dripsy Example",
+  "expo": {
+    "name": "dripsy-next-example",
+    "slug": "dripsy-next-example",
+    "description": "Example app for expo-theme-ui",
+    "privacy": "public",
+    "version": "1.0.0",
+    "platforms": ["ios", "android", "web"],
+    "ios": {
+      "supportsTablet": true
+    },
+    "assetBundlePatterns": ["**/*"],
+    "packagerOpts": {
+      "config": "metro.config.js"
+    }
+  }
+}

examples/with-next/babel.config.js

@@ -0,0 +1,4 @@
+// @generated: @expo/next-adapter@2.1.32
+// Learn more: https://github.com/expo/expo/blob/master/docs/pages/versions/unversioned/guides/using-nextjs.md#shared-steps
+
+module.exports = { presets: ['@expo/next-adapter/babel'] }

examples/with-next/metro.config.js

@@ -0,0 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { createMetroConfiguration } = require('expo-yarn-workspaces')
+
+module.exports = createMetroConfiguration(__dirname)

examples/with-next/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

examples/with-next/next.config.js

@@ -0,0 +1,45 @@
+/* eslint-disable @typescript-eslint/camelcase */
+/* eslint-disable @typescript-eslint/no-var-requires */
+// @generated: @expo/next-adapter@2.1.0
+// Learn more: https://github.com/expo/expo/blob/master/docs/pages/versions/unversioned/guides/using-nextjs.md#withexpo
+const { withExpo } = require('@expo/next-adapter')
+const withPlugins = require('next-compose-plugins')
+const path = require('path')
+const fs = require('fs')
+
+const packages = path.resolve(__dirname, '../..', 'packages')
+
+const getPackageName = (name) => {
+  if (name === 'moti') return 'moti'
+  else return `@moti/${name}`
+}
+
+const packageFolderNames = fs
+  .readdirSync(packages)
+  .filter((name) => !name.startsWith('.'))
+
+const withTM = require('next-transpile-modules')(
+  packageFolderNames.map((name) => getPackageName(name))
+)
+
+module.exports = withPlugins([
+  withTM({
+    webpack: (config) => {
+      packageFolderNames.forEach((name) => {
+        config.resolve.alias[getPackageName(name)] = path.resolve(
+          packages,
+          name,
+          require(`../../packages/${name}/package.json`).source
+        )
+      })
+
+      return config
+    },
+  }),
+  [
+    withExpo,
+    {
+      projectRoot: __dirname,
+    },
+  ],
+])

examples/with-next/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "next-dripsy-example",
+  "version": "0.0.1",
+  "main": "__generated__/AppEntry.js",
+  "dependencies": {
+    "next": "9.4.4",
+    "next-compose-plugins": "^2.2.0",
+    "next-transpile-modules": "3.3.0",
+    "expo": "^40.0.0",
+    "react": "~16.9.0",
+    "react-dom": "~16.9.0",
+    "react-native": "~0.61.5",
+    "react-native-unimodules": "~0.9.0",
+    "react-native-web": "^0.14.10"
+  },
+  "devDependencies": {
+    "@babel/core": "7.9.0",
+    "@expo/next-adapter": "2.1.0"
+  },
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "yarn next dev",
+    "eject": "expo eject",
+    "postinstall": "expo-yarn-workspaces postinstall"
+  },
+  "private": true
+}