Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Build separate bundle for React Native #309

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Build separate bundle for React Native #309

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions package-scripts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ module.exports = {
concurrent.nps(
'build.es',
'build.cjs',
'build.native',
'build.umd.main',
'build.umd.min',
'copyTypes'
Expand All @@ -39,6 +40,10 @@ module.exports = {
description: 'run rollup build with CommonJS format',
script: 'rollup --config --environment FORMAT:cjs'
},
native: {
description: 'run rollup build resolving alias files for React Native',
script: 'rollup --config --environment NATIVE,FORMAT:cjs'
},
umd: {
min: {
description: 'run the rollup build with sourcemaps',
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"main": "dist/react-final-form.cjs.js",
"jsnext:main": "dist/react-final-form.es.js",
"module": "dist/react-final-form.es.js",
"react-native": "dist/react-final-form.native.js",
"typings": "dist/index.d.ts",
"files": [
"dist"
Expand Down
13 changes: 10 additions & 3 deletions rollup.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,15 @@ import pkg from './package.json'

const minify = process.env.MINIFY
const format = process.env.FORMAT
const native = process.env.NATIVE
const es = format === 'es'
const umd = format === 'umd'
const cjs = format === 'cjs'

let output

if (es) {
output = { file: `dist/react-final-form.es.js`, format: 'es' }
output = { file: pkg.module, format: 'es' }
} else if (umd) {
if (minify) {
output = {
Expand All @@ -25,8 +26,10 @@ if (es) {
} else {
output = { file: `dist/react-final-form.umd.js`, format: 'umd' }
}
} else if (native) {
output = { file: pkg['react-native'], format: 'cjs' }
} else if (cjs) {
output = { file: `dist/react-final-form.cjs.js`, format: 'cjs' }
output = { file: pkg.main, format: 'cjs' }
} else if (format) {
throw new Error(`invalid format specified: "${format}".`)
} else {
Expand Down Expand Up @@ -54,7 +57,11 @@ export default {
...Object.keys(pkg.peerDependencies || {})
],
plugins: [
resolve({ jsnext: true, main: true }),
resolve({
jsnext: true,
main: true,
extensions: native ? [ '.native.js', '.js' ] : undefined
}),
flow(),
commonjs({ include: 'node_modules/**' }),
babel({
Expand Down
2 changes: 0 additions & 2 deletions src/Field.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import type {
ReactContext
} from './types'
import renderComponent from './renderComponent'
import isReactNative from './isReactNative'
import getValue from './getValue'

const all: FieldSubscription = fieldSubscriptionItems.reduce((result, key) => {
Expand Down Expand Up @@ -147,7 +146,6 @@ class Field extends React.Component<Props, State> {
event,
this.state.state && this.state.state.value,
_value,
isReactNative
)
: event
this.state.state &&
Expand Down
6 changes: 1 addition & 5 deletions src/getValue.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,14 @@ const getValue = (
event: SyntheticInputEvent<*>,
currentValue: any,
valueProp: any,
isReactNative: boolean
) => {
if (
!isReactNative &&
event.nativeEvent &&
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

when event.nativeEvent.text is present in non-RN environment (I'm assuming browser target)?

(event.nativeEvent: Object).text !== undefined
) {
return (event.nativeEvent: Object).text
}
if (isReactNative && event.nativeEvent) {
return (event.nativeEvent: any).text
}

const detypedEvent: any = event
const { target: { type, value, checked } } = detypedEvent
switch (type) {
Expand Down
13 changes: 13 additions & 0 deletions src/getValue.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
// @flow

const getValue = (
event: SyntheticInputEvent<*>,
currentValue: any,
valueProp: any,
) => {
if (event.nativeEvent) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've extracted this bit from the previous version of getValue, but it seems wrong to me, I have 0 experience with React Native though, so cant validate it :/

maybe this should be just

const getValue = (event, currentValue, valueProp) => event.nativeEvent.text

?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also have zero RN experience. Maybe we should find someone who does?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc @MichelDiz @rafaelcorreiapoli @geowarin @erickjth @bogdansoare @ibratoev @cosmith @maciejmyslinski @ghoshabhi

I think you guys were using (at least at some point in time) this library in RN. Could you take a look at this PR?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've never used react-final-form with react native. I asked my friends who code in react native for help, though.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool! Sorry for pinging you then, I've looked through RN-related topics and pinged everyone who was involved.

return (event.nativeEvent: any).text
}
}

export default getValue
8 changes: 0 additions & 8 deletions src/isReactNative.js
View file
Open in desktop

This file was deleted.