val ListDataSource = ReactNative.ListView.asInstanceOf[js.Dynamic].DataSource
js.Dynamic.newInstance(ListDataSource)(args).asInstanceOf[ListViewDataSource[T]]
this code is working fine in react-native 0.5.0 ,but when i upgraded to 0.6 i am getting following error
Cannot call a class as a function
in js land nothing changed!
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
Edit : ok i lied , there is a change in jsworld ,react-native using babel in 0.6 instead of jstransform .
function _classCallCheck(instance,Constructor){
if(!(instance instanceof Constructor)){throw new TypeError('Cannot call a class as a function');
}}
function ListViewDataSource(params){_classCallCheck(this,ListViewDataSource);
https://github.com/babel/babel/issues/798
Related
I'm using Angular 8 and NGRX 8. I have an action:
export const loadEnvironment = createAction(
LicencingActionTypes.LoadEnvironment,
props<{environment: Environment}>()
);
and corresponding effect:
loadEnvironment = createEffect(() => this.actions$.pipe(
ofType(LicencingActionTypes.LoadEnvironment),
exhaustMap((action) =>
this.authService.
getToken(LicencingEffects.getAuthDetailsForEnvironment(action.environment))
.pipe(
switchMap((token) => [
AuthActions.onLogin({token: token}),
LicencingActions.onLoadEnvironment({environment: action.environment})
]),
catchError(error => of(AuthActions.onLoginError({error: error})))
)
)
));
I've been reading the documentation on NGRX 8 (https://ngrx.io/guide/effects#incorporating-state).
Their example shows that you can just use the action property without casting the type of the action:
...
exhaustMap(action =>
this.authService.login(action.credentials)
...
Webpack won't compile, and I get the following error:
ERROR in src/app/licencing/effects/licencing.effects.ts(20,69): error TS2339: Property 'environment' does not exist on type 'never'.
Screenshot of code with errors highlighted
Where am I going wrong?
Actions must be declared in a type union at the bottom of the actions file:
const all = union({
info,
appError
});
export type CoreActionsUnion = typeof all;
and then in the Effects class constructor injected in with that type as the type parameter of Actions:
constructor(private actions$: Actions<CoreActionsUnion>) { }
Instead of passing the Enum of the action, just pass the function instead. At least it works for me. (Angular 14.x, TS 4.7 and NgrxEffects 13.x, RxJS 7.5.x )
This is what my code looks like where I'm updating a spare part
readonly updatePart$ = createEffect(() =>
this.actions$.pipe(
ofType(updatePart),
concatMap(action =>
this.partService
.updatePart(action.part)
Action itself
export const updatePart = createAction(
PartActions.update,
props<{ part: Required<Part> }>()
);
Try changing your effect as below -
loadEnvironment = createEffect(() => this.actions$.pipe(
ofType(loadEnvironment), //<-- this is your action
exhaustMap(action => //<-- getting rid of extra parenthesis
this.authService.
getToken(LicencingEffects.getAuthDetailsForEnvironment(action.environment))
.pipe(
switchMap((token) => [
AuthActions.onLogin({token: token}),
LicencingActions.onLoadEnvironment({environment: action.environment})
]),
catchError(error => of(AuthActions.onLoginError({error: error})))
)
)
));
Sample reference implementation
I am creating a website using ReasonReact, but I encounter this error message when using a normal component. Does anyone know what is happening?
module Component1 = {
let component = ReasonReact.statelessComponent("Component1");
let make = () => {...component, render: self => <div />};
};
module Component2 = {
let component = ReasonReact.statelessComponent("Component1");
let make = () => {
...component,
render: self => <div> <Component1 /></div>, /*error on compenent1*/
};
Here is the error message:
(
React.component('props),
'props
) => React.element
<root>/node_modules/reason-react/src/React.re
Error: This expression has type
unit =>
ReasonReact.componentSpec(ReasonReact.stateless,
ReasonReact.stateless,
ReasonReact.noRetainedProps,
ReasonReact.noRetainedProps,
ReasonReact.actionless)
but an expression was expected of type
React.component(unit) = unit => React.element
Type
ReasonReact.componentSpec(ReasonReact.stateless,
ReasonReact.stateless,
ReasonReact.noRetainedProps,
ReasonReact.noRetainedProps,
ReasonReact.actionless)
is not compatible with type React.element
The problem seems to be that you're using a project configured to use JSX version 3 with components designed for JSX version 2.
JSX version 3 was introduced in ReasonReact 0.7.0, along with a new method for defining react components that supports hooks, but still supports the method you're using as long as you configure your project to use JSX version 2. If this is a new project, which it seems to be, I would recommend using the new component style, where your code would simply look like this:
module Component1 = {
[#react.component]
let make = () =>
<div />;
};
module Component2 = {
[#react.component]
let make = () =>
<div> <Component1 /> </div>;
};
Alternatively, you can continue using the old style of components and JSX version 2 by specifying the following in bsconfig.json:
{
...
"reason": {"react-jsx": 2}
}
See the blog post on ReasonReact 0.7.0 for more details.
So I am using Kevin Hill's excellent PHP wrapper for Google Charts, 'LavaCharts' and am following his guide on how to access the image URI of each (I need to output the charts in an image format so that I can export the page as a PDF).
https://github.com/kevinkhill/lavacharts/wiki/Getting-a-chart-as-an-image-3.0.x
I am getting the following error: 'getImageCallBack is not defined'
I am registering the 'getImageCallBack' event on each chart from the Controller:
\Lava::PieChart('TotalCallsReceived', $totalCallsReceived, [
'events' => ['ready' => 'getImageCallBack'],
'title' => 'Total Calls Received & Transferred',
'is3D' => false,
]);
And then in the head of my page I have the following. (I will figure out what to do with the URI once I've solved this error. For now logging it is fine)
<script type="text/javascript">
function getImageCallback(event, chart) {
console.log(chart.getImageURI());
// This will return in the form of "data:image/png;base64,iVBORw0KGgoAAAAUA..."
}
</script>
Has anybody else overcome this problem?
the function names are different and need to match case...
the "B" is capitalized here...
'events' => ['ready' => 'getImageCallBack'],
and not here...
function getImageCallback(event, chart) {
I am using yeoman angular full stack generator. Trying out ToDo items tutorial with MongoDB.
Everything worked fine i.e. I was able to read from DB using $http.get. However I decided to go further and create a factory so I can perform CURD.
After creating factory I tried to inject it but getting error as follows:
Error: [$injector:unpr] Unknown provider: factToDoProvider <- factToDo
http://errors.angularjs.org/1.2.6/$injector/unpr?p0=factToDoProvider%20%3C-NaNactToDo
at http://localhost:9000/bower_components/angular/angular.js:78:12
at http://localhost:9000/bower_components/angular/angular.js:3538:19
at Object.getService [as get] (http://localhost:9000/bower_components/angular/angular.js:3665:39)
at http://localhost:9000/bower_components/angular/angular.js:3543:45
at getService (http://localhost:9000/bower_components/angular/angular.js:3665:39)
at invoke (http://localhost:9000/bower_components/angular/angular.js:3687:13)
at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:3708:23)
at http://localhost:9000/bower_components/angular/angular.js:6758:28
at link (http://localhost:9000/bower_components/angular-route/angular-route.js:897:26)
at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:6212:13)
Main.js controller looks like
'use strict';
angular.module('angularFsApp')
.controller('MainCtrl', function ($scope, $http, factToDo) {
$http.get('/api/awesomeThings').success(function(awesomeThings) {
$scope.awesomeThings = awesomeThings;
});
$http.get('/todo/todoItems').success(function(todoItems) {
$scope.todoItems = todoItems;
});
//$scope.newtodoItems = factToDo.getAllItems();
});
Where factToDo is my factory which look like as follows (todo.js)
angular.module('angularFsApp')
.factory('factToDo', function() {
return {
getAllItems: function () {
return [
{description: 'Hello World 1', priority: '15'},
{description: 'Hello World 2', priority: '15'},
{description: 'Love for all', priority: '1500'}
];
}
}
});
I tried by changing my code in main.js as described in AngularJS error ref as follows
angular.module('angularFsApp')
.controller('MainCtrl', ['$scope', '$http', 'factToDo', function ($scope, $http, factToDo) {
as well as I tried Dan Wahlin but i got same issue.
Make sure the file with the 'factToDo' is included into your app.
For a convenient development and to avoid issues like this in the future try the Grunt task runner to concatenate all your code for you and include it as a one file.
This tutorial seems to be sufficient for starting with Grunt and file concatenation.
RequireJS and mocha have some problem working together.
I figured this is because mocha does not wait for requireJS's asynchronous operations to finish and decides testing is done.
As a hot fix I wrapped requireJS 's loading calls in mocha's it() calls.
Somehow mocha knows when I add a callback, that it should wait for the asynchronous methods to finish.
But I'd like to know whether there is no other, more convenient setup than the one I'm using now. The current setup isn't really nice nor flexible.
This is my test.coffee script:
describe 'Ink', ->
describe '#constructor', ->
it 'should return an Ink instance', ( done ) ->
requirejs [ "build/ink/core/Ink" ], ->
# commence testing
a = new Ink( '<div></div>' )
assert.equal( new Ink instanceof Ink, false )
assert.equal( new Ink instanceof window.jQuery, true )
done()
describe 'Mixin', ->
f : ( Mixin ) ->
# test mixin
class A
constructor : ( #a ) ->
class m extends Mixin
constructor : () -> #mixin_prop = 42
increment : ( arg ) -> return arg + 1
class B extends A
Mixin.mixin( m, # )
b = new B()
return b
it 'should chain the constructor', ( done ) ->
requirejs [ "build/ink/core/Mixin" ], ( Mixin ) ->
b = f( Mixin )
assert.equal( b.mixin_prop, 42 )
done()
it 'should add the methods from the mixin to the new class', ( done ) ->
requirejs [ "build/ink/core/Mixin" ], ( Mixin ) ->
b = f( Mixin )
assert.equal( b.increment( 42 ), 42 )
done()
I initialize my modules in beforeEach, and use a callback to trigger async:
describe...
var Module
beforeEach(function(callback){
requirejs
Module = loadedFile
callback(); // suites will now run
})
I have a bootstrap here: https://github.com/clubajax/mocha-bootstrap
Mocha provides a done callback to the function you invoke with it, and it works nicely for this purpose. Here's an example of how I'm currently using it--note that I'm using require to load my test config as well, and obviously this is straight JS, not CoffeeScript, but it should obtain.
define([
'chai',
'SystemUnderTest'
], function(chai, SystemUnderTest) {
var expect = chai.expect;
describe('A functioning system', function() {
it('knows when to foo', function(done) {
sut = new SystemUnderTest();
expect(sut.foo()).to.be.ok;
done();
});
});
So mocha's support for async testing, which you might 'normally' use to test async services, can also be used to support testing of asynchronously loaded modules.
Mocha's async documentation
I haven't used requirejs in my tests, but I think the before function might help:
describe 'Mixin - ', ->
before (done) ->
console.log dateFormat(new Date(), "HH:MM:ss");
requirejs [ "build/ink/core/Ink" ], ->
# commence testing
a = new Ink( '<div></div>' )
assert.equal( new Ink instanceof Ink, false )
assert.equal( new Ink instanceof window.jQuery, true )
done()
beforeEach ->
....
describe ...