Add the as prop (Box)

Author: mobily

docs/api/components/box.mdx

@@ -212,6 +212,10 @@ const App = () => {
 render(<App />)
 ```
 
+### As
+
+You can use the `as` prop to render another element (for instance `Animated.View`) instead of `View` (available only in TypeScript).
+
 ### Props
 
 :::info
@@ -222,6 +226,12 @@ render(<App />)
 
 <Props
   data={[
+    {
+      name: 'as',
+      type: 'React.ComponentType',
+      required: false,
+      select: ['typescript']
+    },
     {
       name: 'alignX',
       type: 'responsiveProp<[#left | #center | #right | #top | #bottom | #between | #around | #evenly | #stretch]>',

docs/core/components.js

@@ -49,7 +49,14 @@ export const Props = props => {
   const { data } = props
 
   return data.map(values => {
-    const { name, type, required, defaultValue, rawTsType } = values
+    const {
+      name,
+      type,
+      required,
+      defaultValue,
+      rawTsType,
+      select = ['rescript', 'typescript'],
+    } = values
 
     return (
       <Fragment key={name}>
@@ -67,22 +74,26 @@ export const Props = props => {
           <li>
             type:
             <ul>
-              <li>
-                <TsLogo
-                  width={17}
-                  height={17}
-                  style={{ marginRight: 8, position: 'relative', top: 3 }}
-                />
-                <code>{rawTsType ? rawTsType : mapType(type)}</code>
-              </li>
-              <li>
-                <ResLogo
-                  width={17}
-                  height={17}
-                  style={{ marginRight: 8, position: 'relative', top: 3 }}
-                />
-                <code>{type}</code>
-              </li>
+              {select.includes('typescript') ? (
+                <li>
+                  <TsLogo
+                    width={17}
+                    height={17}
+                    style={{ marginRight: 8, position: 'relative', top: 3 }}
+                  />
+                  <code>{rawTsType ? rawTsType : mapType(type)}</code>
+                </li>
+              ) : null}
+              {select.includes('rescript') ? (
+                <li>
+                  <ResLogo
+                    width={17}
+                    height={17}
+                    style={{ marginRight: 8, position: 'relative', top: 3 }}
+                  />
+                  <code>{type}</code>
+                </li>
+              ) : null}
             </ul>
           </li>
           <li>

docs/docs/changelog.md

@@ -3,6 +3,10 @@ id: changelog
 title: Changelog
 ---
 
+### `v2.2.0`
+
+- ✨ added the [`as`](/api/components/box#as) prop to `Box`, which allows rendering another element (for instance `Animated.View`) instead of `View`
+
 ### `v2.1.0`
 
 - ✨ added the [`defaultWidth`](/api/components/columns#default-width) prop to `Columns`, which allows to set a default column width behavior ([@domeknn](https://github.com/domeknn))

src/Stacks_component_Box.res

@@ -161,7 +161,7 @@ let make = (
       }
     }
 
-    flatten([
+    coerce([
       padding,
       paddingX,
       paddingY,

src/Stacks_styles.res

@@ -1,7 +1,5 @@
 open ReactNative.Style
 
-open Stacks_externals
-
 @module("react-native") @scope("StyleSheet")
 external compose: (ReactNative.Style.t, ReactNative.Style.t) => ReactNative.Style.t = "compose"
 
@@ -68,8 +66,6 @@ let right = value => ReactNative.Style.unsafeStyle({"right": value})
 let bottom = value => ReactNative.Style.unsafeStyle({"bottom": value})
 let left = value => ReactNative.Style.unsafeStyle({"left": value})
 
-let flatten = xs => xs->coerce->ReactNative.StyleSheet.flatten
-
 let resolveAlignItemsX = Belt.Option.mapU(_, (. value) =>
   switch value {
   | #center => styles["alignCenter"]

tools/javascript-codemods/add-as-prop.ts

@@ -0,0 +1,53 @@
+import { API } from 'jscodeshift'
+
+const transform = (source: string, j: API['jscodeshift']): string => {
+  const root = j(source)
+  const component = root.find(j.FunctionDeclaration).filter(p => {
+    if (p.value.id?.type === 'Identifier') {
+      return /stacks_component_box/i.test(p.value.id.name)
+    }
+
+    return false
+  })
+
+  component.forEach(p => {
+    const root = j(p.value)
+
+    root.find(j.ReturnStatement).forEach(p => {
+      const statement = j(p.value)
+
+      statement
+        .find(j.CallExpression, {
+          callee: {
+            property: {
+              name: 'createElement',
+            },
+          },
+        })
+        .forEach(p => {
+          const arg = p.value.arguments.find(arg => {
+            return (
+              arg.type === 'MemberExpression' &&
+              arg.property.type === 'Identifier' &&
+              arg.property.name === 'View'
+            )
+          })
+
+          if (arg && arg.type === 'MemberExpression') {
+            p.value.arguments = [
+              j.logicalExpression(
+                '||',
+                j.memberExpression(j.identifier('Props'), j.identifier('as')),
+                arg,
+              ),
+              ...p.value.arguments.slice(1),
+            ]
+          }
+        })
+    })
+  })
+
+  return root.toSource()
+}
+
+export default transform

tools/javascript-codemods/index.ts

@@ -3,10 +3,11 @@ import { API, FileInfo } from 'jscodeshift'
 import uncurry from './uncurry-functions'
 import renameLiterals from './rename-literals'
 import cleanupComponents from './cleanup-components'
+import addAsProp from './add-as-prop'
 
 const transform = (file: FileInfo, api: API) => {
   const j = api.jscodeshift
-  const source = [uncurry, renameLiterals, cleanupComponents].reduce((acc, fn) => {
+  const source = [uncurry, renameLiterals, cleanupComponents, addAsProp].reduce((acc, fn) => {
     return fn(acc, j)
   }, file.source)
 

tools/typescript-codemods/add-as-prop.ts

@@ -0,0 +1,65 @@
+import { API } from 'jscodeshift'
+
+const transform = (source: string, j: API['jscodeshift']): string => {
+  const root = j(source)
+  const component = root.find(j.ExportNamedDeclaration).filter(p => {
+    if (p.value.declaration?.type === 'VariableDeclaration') {
+      return p.value.declaration.declarations.some(declaration => {
+        return (
+          declaration.type === 'VariableDeclarator' &&
+          declaration.init?.type === 'MemberExpression' &&
+          declaration.init.object.type === 'Identifier' &&
+          /stacks_component_box/i.test(declaration.init.object.name)
+        )
+      })
+    }
+
+    return false
+  })
+
+  component.forEach(_p => {
+    root
+      .find(j.ExportNamedDeclaration, {
+        declaration: {
+          id: {
+            name: 'Props',
+          },
+        },
+      })
+      .forEach(p => {
+        if (
+          p.value.declaration?.type === 'TSTypeAliasDeclaration' &&
+          p.value.declaration.typeAnnotation.type === 'TSTypeLiteral'
+        ) {
+          const signature = j.tsPropertySignature(
+            j.identifier('as'),
+            j.tsTypeAnnotation(
+              j.tsTypeReference(
+                j.tsQualifiedName(j.identifier('React'), j.identifier('ComponentType')),
+              ),
+            ),
+          )
+
+          signature.optional = true
+          signature.readonly = true
+
+          p.value.declaration.typeAnnotation.members = p.value.declaration.typeAnnotation.members
+            .map(p => {
+              if (p.type === 'TSPropertySignature' && p.key.type === 'Identifier') {
+                const signature = j.tsPropertySignature(j.identifier(p.key.name), p.typeAnnotation)
+                signature.optional = p.optional
+                signature.readonly = true
+                return signature
+              }
+
+              return p
+            })
+            .concat(signature)
+        }
+      })
+  })
+
+  return root.toSource()
+}
+
+export default transform

tools/typescript-codemods/index.ts

@@ -4,6 +4,7 @@ import transformReactNative from './transform-react-native'
 import prettifyStacksTypes from './prettify-stacks-types'
 import shrinkComponentType from './shrink-component-type'
 import renameLiterals from './rename-literals'
+import addAsProp from './add-as-prop'
 
 const transform = (file: FileInfo, api: API) => {
   const j = api.jscodeshift
@@ -12,6 +13,7 @@ const transform = (file: FileInfo, api: API) => {
     prettifyStacksTypes,
     shrinkComponentType,
     renameLiterals,
+    addAsProp,
   ].reduce((acc, fn) => {
     return fn(acc, j)
   }, file.source)