benoitvallon / react-native-nw-react-calculator Goto Github PK

/home/gzp/code/reactnative/react-native-nw-react-calculator/node_modules/.6.24.1@babel-core/lib/transformation/file/index.js:590
throw err;
^

SyntaxError: /home/gzp/code/reactnative/react-native-nw-react-calculator/node_modules/.0.21.0@react-native/local-cli/runIOS/findXcodeProject.js: Unexpected token, expected ; (15:5)
13 | const path = require('path');
14 |
15 | type ProjectInfo = {
\\\\\\\ | ^
16 | name: string;
17 | isWorkspace: boolean;
18 | }
at Parser.pp$5.raise (/home/gzp/code/reactnative/react-native-nw-react-calculator/node_modules/.6.16.1@babylon/lib/index.js:4373:13)
at Parser.pp.unexpected (/home/gzp/code/reactnative/react-native-nw-react-calculator/node_modules/.6.16.1@babylon/lib/index.js:1716:8)
at Parser.pp.semicolon (/home/gzp/code/reactnative/react-native-nw-react-calculator/node_modules/.6.16.1@babylon/lib/index.js:1697:38)
at Parser.pp$1.parseExpressionStatement (/home/gzp/code/reactnative/react-native-nw-react-calculator/node_modules/.6.16.1@babylon/lib/index.js:2191:8)
at Parser.pp$1.parseStatement (/home/gzp/code/reactnative/react-native-nw-react-calculator/node_modules/.6.16.1@babylon/lib/index.js:1866:17)
at Parser.pp$1.parseBlockBody (/home/gzp/code/reactnative/react-native-nw-react-calculator/node_modules/.6.16.1@babylon/lib/index.js:2223:21)
at Parser.pp$1.parseTopLevel (/home/gzp/code/reactnative/react-native-nw-react-calculator/node_modules/.6.16.1@babylon/lib/index.js:1733:8)
at Parser.parse (/home/gzp/code/reactnative/react-native-nw-react-calculator/node_modules/.6.16.1@babylon/lib/index.js:1628:17)
at parse (/home/gzp/code/reactnative/react-native-nw-react-calculator/node_modules/.6.16.1@babylon/lib/index.js:7083:37)
at File.parse (/home/gzp/code/reactnative/react-native-nw-react-calculator/node_modules/.6.24.1@babel-core/lib/transformation/file/index.js:517:15)

Please, add demo to show the running application.

After #15 's merge,

npm run build
cd dist
git init && git add . && git commit -m "Pages"
git remote add github [email protected]:benoitvallon/react-native-nw-react-calculator.git
git push -f github master:gh-pages

I tried it on my side.
my demo
my branch

I think this demo should use redux instead of flux,since redux is simplify the design

[email protected] start /Users/zjh-mac/Documents/react/react-native-nw-react-calculator-master
node node_modules/react-native/local-cli/cli.js start

┌────────────────────────────────────────────────────────────────────────────┐
│ Running packager on port 8081. │
│ │
│ Keep this packager running while developing on any JS projects. Feel │
│ free to close this tab and run your own packager instance if you │
│ prefer. │
│ │
│ https://github.com/facebook/react-native │
│ │
└────────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
/Users/zjh-mac/Documents/react/react-native-nw-react-calculator-master

[下午8:33:55] Building Dependency Graph
[下午8:33:55] Crawling File System
(node:5844) [DEP0022] DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
[Hot Module Replacement] Server listening on /hot

React packager ready.

2018-04-14 20:34 node[5844] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2018-04-14 20:34 node[5844] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
2018-04-14 20:34 node[5844] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
ERROR Error watching file for changes: EMFILE
{"errno":"EMFILE","code":"EMFILE","syscall":"Error watching file for changes:","filename":null}
Error: Error watching file for changes: EMFILE
at _errnoException (util.js:1003:13)
at FSEvent.FSWatcher._handle.onchange (fs.js:1382:9)

See http://facebook.github.io/react-native/docs/troubleshooting.html
for common problems and solutions.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: node node_modules/react-native/local-cli/cli.js start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/zjh-mac/.npm/_logs/2018-04-14T12_34_01_174Z-debug.log
zjh-macdeMacBook-Pro:react-native-nw-react-calculator-master zjh-mac$ npm run server-web
npm ERR! missing script: server-web

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/zjh-mac/.npm/_logs/2018-04-14T12_34_38_857Z-debug.log

Hello, benoitvallon, it's a very nice example 👍
But i think that you may make general css for components.
You may delete "styles/main.css" and transfer all styles from "main.css" to component.
https://github.com/gajus/react-css-modules - a good library for this idea.
Will it have a problem with this task? )

I am unable to create an equation which involves more than one operator. When I type 3+3, then click * to try to do 3+3*3, it just replaces the + with a . Making the equation 33 and giving me the answer 9.

Hi, I managed to successfully run the demo using electron but not with react-native on Android. Here's what I get when trying with react-native run-android

╭─reis@Asakura ~/Documents/Testcode/react-native-nw-react-calculator  ‹master› 
╰─➤  react-native run-android                                            
Starting JS server...
Building and installing the app on the device (cd android && ./gradlew installDebug)...
:app:preBuild UP-TO-DATE
:app:preDebugBuild UP-TO-DATE
:app:checkDebugManifest
:app:preReleaseBuild UP-TO-DATE
:app:prepareComAndroidSupportAppcompatV72301Library UP-TO-DATE
:app:prepareComAndroidSupportRecyclerviewV72301Library UP-TO-DATE
:app:prepareComAndroidSupportSupportV42301Library UP-TO-DATE
:app:prepareComFacebookFrescoDrawee081Library UP-TO-DATE
:app:prepareComFacebookFrescoFbcore081Library UP-TO-DATE
:app:prepareComFacebookFrescoFresco081Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipeline081Library UP-TO-DATE
:app:prepareComFacebookFrescoImagepipelineOkhttp081Library UP-TO-DATE
:app:prepareComFacebookReactReactNative0210Library UP-TO-DATE
:app:prepareOrgWebkitAndroidJscR174650Library UP-TO-DATE
:app:prepareDebugDependencies
:app:compileDebugAidl UP-TO-DATE
:app:compileDebugRenderscript UP-TO-DATE
:app:generateDebugBuildConfig UP-TO-DATE
:app:generateDebugAssets UP-TO-DATE
:app:mergeDebugAssets UP-TO-DATE
:app:generateDebugResValues UP-TO-DATE
:app:generateDebugResources UP-TO-DATE
:app:mergeDebugResources UP-TO-DATE
:app:bundleDebugJsAndAssets SKIPPED
:app:processDebugManifest UP-TO-DATE
:app:processDebugResources UP-TO-DATE
:app:generateDebugSources UP-TO-DATE
:app:processDebugJavaRes UP-TO-DATE
:app:compileDebugJavaWithJavac UP-TO-DATE
:app:compileDebugNdk UP-TO-DATE
:app:compileDebugSources UP-TO-DATE
:app:preDexDebug UP-TO-DATE
:app:dexDebug UP-TO-DATE
:app:validateDebugSigning
:app:packageDebug UP-TO-DATE
:app:zipalignDebug UP-TO-DATE
:app:assembleDebug UP-TO-DATE
:app:installDebug
Installing APK 'app-debug.apk' on 'Nexus_5X_API_25_x86(AVD) - 7.1.1'
Installed on 1 device.

BUILD SUCCESSFUL

Total time: 9.438 secs

This build could be faster, please consider using the Gradle Daemon: http://gradle.org/docs/2.4/userguide/gradle_daemon.html
Starting the app (adb shell am start -n com.reactnativenwreactcalculator/.MainActivity)...
╭─reis@Asakura ~/Documents/Testcode/react-native-nw-react-calculator  ‹master› 
╰─➤ 

nothing shows on my emulator. I've turned it on via

./emulator -avd Nexus_5X_API_25_x86

Hi Benoit, first of all, many thanks for the nice demo!

I was playing with it using Android + Linux. The app builds and installs correctly (using react-native install-android) and even runs correctly on the first time. (The weird thing though is, on the first run it does not try to pull the JS using react packager - I see no trace of any requests there.)

However, when as I try to reload JS from the phone, the JS gets transferred correctly (confirmed by the packager logs) but I'm ending up with a blank screen, and the following errors in the log:

D/ReactNativeJS(13909): 'Running application "nativeApp" with appParams: {"initialProps":{},"rootTag":1}. __DEV__ === false, development-level warning are OFF, performance optimizations are ON'
D/ReactNativeJS(13909): 'Running application "nativeApp" with appParams: {"initialProps":{},"rootTag":1}. __DEV__ === false, development-level warning are OFF, performance optimizations are ON'
E/ReactNativeJS(13909): 'Error: \n stack: measureMethods@http://localhost:8081/src/index.android.bundle?platform=android&dev=true:53888:11\nhttp://localhost:8081/src/index.android.bundle?platform=android&dev=true:53166:25\nrequireImpl@http://localhost:8081/src/index.android.bundle?platform=android&dev=true:64:17\nrequire@http://localhost:8081/src/index.android.bundle?platform=android&dev=true:26:19\nhttp://localhost:8081/src/index.android.bundle?platform=android&dev=true:52928:34\nrequireImpl@http://localhost:8081/src/index.android.bundle?platform=android&dev=true:64:17\nrequire@http://localhost:8081/src/index.android.bundle?platform=android&dev=true:26:19\nhttp://localhost:8081/src/index.android.bundle?platform=android&dev=true:52806:34\nrequireImpl@http://localhost:8081/src/index.android.bundle?platform=android&dev=true:64:17\nrequire@http://localhost:8081/src/index.android.bundle?platform=android&dev=true:26:19\nhttp://localhost:8081/src/index.android.bundle?platform=android&dev=true:52762:21\nrequireImpl@http://localhost:8081/src/index.android.bundle?platform=android&dev=true:64:17\nrequire@http://localhost:8081/src/index.android.bundle?platform=android&dev=true:26:19\nhttp://localhost:8081/src/index.android.bundle?platform=android&dev=true:926:52\nrequireImpl@http://localhost:8081/src/index.android.bundle?platform=android&dev=true:64:17\nrequire@http://localhost:8081/src/index.android.bundle?platform=android&dev=true:26:19\nhttp://localhost:8081/src/index.android.bundle?platform=android&dev=true:896:218\nrequireImpl@http://localhost:8081/src/index.android.bundle?platform=android&dev=true:64:17\nrequireImpl@http://localhost:8081/src/index.android.bundle?platform=android&dev=true:34:32\nrequire@http://localhost:8081/src/index.android.bundle?platform=android&dev=true:26:19\nglobal code@http://localhost:8081/src/index.android.bundle?platform=android&dev=true:73756:9\n line: 53888\n message: Can\'t find variable: process', { [ReferenceError: Can't find variable: process]
E/ReactNativeJS(13909):   line: 53888,
E/ReactNativeJS(13909):   column: 11,
E/ReactNativeJS(13909):   sourceURL: 'http://localhost:8081/src/index.android.bundle?platform=android&dev=true' }
E/ReactNativeJS(13909): 'Error: \n stack: http://localhost:8081/src/index.android.bundle?platform=android&dev=true:54631:11\nrequireImpl@http://localhost:8081/src/index.android.bundle?platform=android&dev=true:64:17\nrequire@http://localhost:8081/src/index.android.bundle?platform=android&dev=true:26:19\nhttp://localhost:8081/src/index.android.bundle?platform=android&dev=true:2808:20\nrequireImpl@http://localhost:8081/src/index.android.bundle?platform=android&dev=true:64:17\nrequire@http://localhost:8081/src/index.android.bundle?platform=android&dev=true:26:19\nhttp://localhost:8081/src/index.android.bundle?platform=android&dev=true:2336:30\nrequireImpl@http://localhost:8081/src/index.android.bundle?platform=android&dev=true:64:17\nrequire@http://localhost:8081/src/index.android.bundle?platform=android&dev=true:26:19\nhttp://localhost:8081/src/index.android.bundle?platform=android&dev=true:2310:25\nrequireImpl@http://localhost:8081/src/index.android.bundle?platform=android&dev=true:64:17\nrequireImpl@http://localhost:8081/src/index.android.bundle?platform=android&dev=true:34:32\nrequire@http://localhost:8081/src/index.android.bundle?platform=android&dev=true:26:19\nglobal code\n line: 54631\n message: Can\'t find variable: process', { [ReferenceError: Can't find variable: process]
E/ReactNativeJS(13909):   line: 54631,
E/ReactNativeJS(13909):   column: 11,
E/ReactNativeJS(13909):   sourceURL: 'http://localhost:8081/src/index.android.bundle?platform=android&dev=true' }
E/ReactNative(13909): Got JS Exception: TypeError: undefined is not an object (evaluating 'require('BatchedBridge').flushedQueue')

(Note that the first error is actually Can\'t find variable: process', { [ReferenceError: Can't find variable: process] - you need to scroll to the right in the error log).

Any idea why is this failing? I actually tried Windows too, but that fails for different reasons, so let's leave this for now.

it was an error

Could you explain props of moving logic into Base class?

Hi, Could you explain how build tools 'knows' which files to import?
For example when you use import Render from './KeyRender'; how it knows if choose KeyRender.js, KeyRender.android.js or KeyRender.ios.js?
I can't find place where it's configured. For example when I want to change suffixes from .android.js to .myandroid.js which config should I edit?

EDIT:
Ok, I think I found it: https://facebook.github.io/react-native/docs/platform-specific-code.html#platform-specific-extensions
So react-native uses .android.js or .ios.js files (if exists - if not rn uses .js files)
Webpack (used for desktop and web) uses .js files

This is such a powerful project, it really doesn't make sense for hundreds of developers to try and individually fix all the errors in bringing this to 2018. Are there any up-to-date alternatives?

Repro steps:

1. git clone https://github.com/benoitvallon/react-native-nw-react-calculator
2. cd react-native-nw-react-calculator
3. npm install
4. npm install (again, per discussion in #3)
5. npm test

Actual results:

koi:✓:react-native-nw-react-calculator>> npm test

> [email protected] test /Users/whitley/src/3p/react-native-nw-react-calculator
> jest

Using Jest CLI v0.9.0, jasmine2

Error: Failed to build DependencyGraph: @providesModule naming collision:
  Duplicate module name: xhrSimpleDataSerializer
  Paths: /Users/whitley/src/3p/react-native-nw-react-calculator/node_modules/react-native/node_modules/fbjs/lib/xhrSimpleDataSerializer.js collides with /Users/whitley/src/3p/react-native-nw-react-calculator/node_modules/flux/node_modules/fbjs/flow/include/xhrSimpleDataSerializer.js

This error is caused by a @providesModule declaration with the same name accross two different files.

This is most likely a setup or configuration issue. To resolve a module name collision, change or blacklist one of the offending modules. See http://facebook.github.io/jest/docs/api.html#config-modulepathignorepatterns-array-string
npm ERR! Test failed.  See above for more details.

I've tried to repro with both node v5.5.0 (npm v3.3.12) and node v5.7.0 (npm v3.6.0), with the same error each time.

FWIW, I ended up here after having similar naming collision errors plaguing my attempts to bring up jest-based tests in a new RN project I'm working on. (BTW, thanks a LOT for including tests here. Very few public RN projects seem to bother.) I'm at a loss as to what could be causing this, aside from it being at least superficially related to facebook/react-native#3625 and facebook/react-native#3618. But those have been hanging around for some time, meanwhile the discussion on issues and PRs here suggest that the tests have been running well for you and others.

Any ideas?

Hi Benoit,
I am trying to reuse parts of your solution to add adroid app to the web app.
I have created different entry point for android, but do not understand how the built bundle is used later to create android app?

@benoitvallon do you have any guides for us how and what we have to change to change the application name / ID properly?

when i execute npm run build:
throw the error:
`WARNING in main.js from UglifyJs
Condition always true [.//react/lib/ReactMount.js:764,0]
Dropping side-effect-free statement [.//react-router/lib/deprecateObjectProperties.js:65,0]
Side effects in initialization of unused variable _ret [.//react-router/lib/deprecateObjectProperties.js:63,0]
Condition always true [.//react/lib/findDOMNode.js:46,0]
Condition always true [.//react/lib/instantiateReactComponent.js:80,0]
Dropping unreachable code [.//react/lib/shouldUpdateReactComponent.js:40,0]
Condition always true [.//react/lib/traverseAllChildren.js:158,0]
Condition always true [.//react-router/lib/Redirect.js:97,0]
Condition always false [.//style-loader/addStyles.js:24,0]
Dropping unreachable code [.//style-loader/addStyles.js:25,0]
Dropping unused variable r [.//es6-promise/dist/es6-promise.js:130,0]
Condition left of && always true [.//es6-promise/dist/es6-promise.js:944,0]
Dropping unused function lib$es6$promise$utils$$isMaybeThenable [.//es6-promise/dist/es6-promise.js:19,0]
Condition always true [.//history/lib/createMemoryHistory.js:67,0]
Condition always true [.//react-router/lib/IndexRedirect.js:58,0]
Condition always true [.//react-router/lib/IndexRoute.js:55,0]
Condition always true [.//react-router/lib/Route.js:50,0]
Dropping side-effect-free statement [.//react-router/lib/getComponents.js:56,0]
Side effects in initialization of unused variable _ret [.//react-router/lib/getComponents.js:54,0]
Condition always true [.//react/lib/ReactDOMComponent.js:907,0]
Dropping side-effect-free statement [.//react/lib/ReactEventListener.js:72,0]
Dropping unused function handleTopLevelWithPath [.//react/lib/ReactEventListener.js:98,0]
Dropping unused variable DOCUMENT_FRAGMENT_NODE_TYPE [.//react/lib/ReactEventListener.js:26,0]
Condition always false [.//style-loader!.//css-loader!.//normalize.css/normalize.css:10,0]
Dropping unreachable code [.//style-loader!.//css-loader!.//normalize.css/normalize.css:12,0]
Side effects in initialization of unused variable update [.//style-loader!.//css-loader!.//normalize.css/normalize.css:7,0]
Condition always false [.//style-loader!.//css-loader!./src/styles/main.css:10,0]
Dropping unreachable code [.//style-loader!.//css-loader!./src/styles/main.css:12,0]
Side effects in initialization of unused variable update [.//style-loader!.//css-loader!./src/styles/main.css:7,0]

ERROR in Cannot find module 'postcss-filter-plugins'
@ ./src/styles/main.css 4:14-78

ERROR in Cannot find module 'postcss-filter-plugins'
@ ./~/normalize.css/normalize.css 4:14-67
Warning: Task "webpack:dist" failed. Use --force to continue.

Aborted due to warnings.

npm ERR! Darwin 15.0.0
npm ERR! argv "/Users/admin/.nvm/versions/node/v5.6.0/bin/node" "/Users/admin/.nvm/versions/node/v5.6.0/lib/node_modules/cnpm/node_modules/.bin/npm" "--userconfig=/Users/admin/.cnpmrc" "--disturl=https://npm.taobao.org/mirrors/node" "--registry=https://registry.npm.taobao.org" "run" "build"
npm ERR! node v5.6.0
npm ERR! npm v3.8.6
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: grunt build
npm ERR! Exit status 3
npm ERR!
npm ERR! Failed at the [email protected] build script 'grunt build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ReactNativeNWReactCalculator package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! grunt build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs ReactNativeNWReactCalculator
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls ReactNativeNWReactCalculator
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/admin/Desktop/react-native-nw-react-calculator-master/npm-debug.log
`

Any samples of how to do this as an Android app?

I need to support both (especially since Android sells 5 devices per 1 sold by Apple).

Relay is Flux successor. Any plan to add support?

Followed every step of instruction but can not run the app in xcode

Xcode version: 8.3.3
npm version: 5.3.0
node version: 8.4.0