I'm trying to import Html exposing (beginnerProgram), as it is shown there and there, but the compiler doesn't agree : "Module Html does not expose beginnerProgram".
Thanks in advance.
The above answer is for older versions of ELM. An updated answer is below.
Updated For Elm 0.19:
Add import statement:
import Browser exposing (sandbox)
Use sandbox: Note that we are not using Never - as in old code samples - we are using () instead:
main : Program () Model Msg
main = Browser.sandbox
{ init = initialModel
, view = view
, update = update
}
Works beautifully: and I hope this helps you.
Solved by importing from Html.App instead of Html.
Related
I need to modify 'preConfigureProduct' function under vuestorefront/core/modules/catalog/helpers/search.ts
https://github.com/vuestorefront/vue-storefront/blob/hotfix/v1.12.3/core/modules/catalog/helpers/search.ts#L51
I need to do the customisation based on my client requirement. Thus I need to override this function in my project.
But there is no document about how to override one function from helper. I am also new in vue storefront, so I dont fully understand module extending or mixins.
Thanks in advance.
I have figured out by myself, I will leave a short answer for who is stuck as well.
Additionally, I am not really sure it is a good practise, if you know a better way, leave it here please.
From what I understood is if you need to overwrite one function from helper, you also need to 'overwrite' the function which called your helper function.
In my case, I need to overwrite function preConfigureProduct , from module catalog helper.
The function called this preConfigureProduct is one asyc function configureProducts from module catalog-next, https://github.com/vuestorefront/vue-storefront/blob/hotfix/v1.12.3/core/modules/catalog-next/store/category/deprecatedActions.ts#L22.
(I know it is deprecatedActions. It is my next job to figure out how to switch to new ones)
Thus, I extended module catalog-next, and literally copy paste configureProducts(because I dont need to modify it), but import preConfigureProduct to my new file.
import { preConfigureProduct } from './helpers/search'
my new search.ts file:
import Vue from 'vue';
import config from 'config';
export const preConfigureProduct = ({ product, populateRequestCacheTags }) => {
.....
return product;
};
That is it !
Hopefully it helps others.
If there is any mistake, welcome to point it out.
I'm scanning QR code containing FB Dynamic Link inside from withing my app. I get something like this https://myapp.page.link/S8rq8wTHFE1KYj8D8.
The question is how do I resolve the underlying URL/link that was used when this link was created?
// add import
import dynamicLinks from '#react-native-firebase/dynamic-links';
// use this line in your code
// `deepLink` is your `https://myapp.page.link/S8rq8wTHFE1KYj8D8`
const resolvedLink = await dynamicLinks().resolveLink(deepLink);
Docs: https://rnfirebase.io/reference/dynamic-links#resolveLink
I'm trying to get Kendo working in Aurelia and it is not going too easy...
The following call inside the VM attached() hook throws a "jQuery(...).kendoPager is not a function" exception in shim.min.js:1444:
jQuery("#pager").kendoPager({
dataSource: dataSource
});
I've experimented with a number of ways to define the GlobalBehavior.jQueryPlugins() setting with the following being my best attempt thus far in main.js:
import {GlobalBehavior} from 'aurelia-templating-resources';
GlobalBehavior.jQueryPlugins["kendopager"] = "kendoPager";
Unfortunately there is not much documentation about this so one is prodding in the dark a bit so any help will be appreciated.
Normal jQuery functions work fine here so the problem does appear to be related to using Kendo.
Thanks in advance
You installed dependency with JSPM, but you also need to import it in your VM class file. Put this import statement at the top of the file:
import {kendoUi} from 'kendo-ui';
After that you will be able to use in attached hook:
jQuery("#pager").kendoPager({
dataSource: dataSource
});
Just one note, it's better not to refer to DOM elements but hardcoded selectors. You would better create a reference to element in template
<div ref="pager"></div>
and then in view-model have
jQuery(this.pager).kendoPager({
dataSource: dataSource
});
I'm trying to use humane.js with aurelia however I'm running in a problem.
It appears humane.js adds an element to the DOM when it's created and so far the only way I've found to do it is to force it like this....
showMessage(message) {
this.notify = humane.create();
this.notify.log(message);
}
However this creates a new instance of humane every time showMessage() is called. This breaks the queue as each one is rendered separately.
I've tried putting the create() in the activate() method of the view model but that doesn't seem to work either.
Any ideas?
This solved the problem, I've created a custom element for humane that is then included in app.html in the same way loading-indicator is in the skeleton app.
import humane from 'humane-js';
import 'humane-js/themes/original.css!';
import {inject, noView} from 'aurelia-framework';
import { EventAggregator } from 'aurelia-event-aggregator';
import { ApiStatus } from 'resources/messages';
#noView
#inject(EventAggregator)
export class StatusIndicator {
constructor(ea) {
this.ea = ea;
ea.subscribe(ApiStatus, msg => this.showMessage(msg.apistatus));
}
attached() {
this.humane = humane.create();
}
showMessage(message) {
this.humane.log(message);
}
}
The important part was the attached() this allows the setup of humane to work correctly.
Unfortunately for Aurelia, Humane will attach itself to the DOM automatically as a child of body, which Aurelia then replaces.
There is a really, really, simple fix for this:
Change your:
<body aurelia-app="main">
To this:
<body><div aurelia-app="main">
This way, Aurelia doesn't replace the div which is in body, you don't need to worry about attached() or where the import appears in your code, and humane works perfectly.
I have raised a humane github issue for this. https://github.com/wavded/humane-js/issues/69
Here is how I am using humane.js with Aurelia:
1) I load the CSS in the app index.html.
2) In each view model that requires humane, I import humane
import humane from 'humane-js/humane';
I do NOT inject human into the view model.
3) I show notifications like this:
humane.log('Error:, { addnCls: 'humane-libnotify-error' });
I hope this helps you.
I got div with if.bind working as was suggested in this question: Using literal JavaScript values in an Aurelia view. But then I noticed that showTemplate on viewModel is being constantly checked by framework, about 10 times per second. The stack is following:
execute._prototypeProperties.visible.get (welcome.js:29)
getValue (dirty-checking.js:93)
isDirty (dirty-checking.js:127)
check (dirty-checking.js:63)
(anonymous function) (dirty-checking.js:49)
Is it supposed to be like this? Seems to be not very resource-friendly.
Best regards, Eugene.
Aurelia uses Object.observe for simple Javascript properties. If showTemplate is a function or a getter/setter, then Aurelia currently reverts to dirty checking. This can be removed by declaring the dependencies of the function. This is outlined here: https://github.com/aurelia/binding/pull/41
I have created a version of the Aurelia Skeleton project that implements this: https://github.com/ashleygrant/skeleton-navigation/tree/declare_dependencies
To implement this, you must switch to using the aurelia-main attribute. Add a main.js file:
import {LogManager} from 'aurelia-framework';
import {ConsoleAppender} from 'aurelia-logging-console';
import {ComputedObservationAdapter, ObjectObservationAdapter} from 'aurelia-framework';
LogManager.addAppender(new ConsoleAppender());
LogManager.setLevel(LogManager.levels.debug);
export function configure(aurelia) {
aurelia.use
.defaultBindingLanguage()
.defaultResources()
.router()
.eventAggregator();
aurelia.container
.registerSingleton(ObjectObservationAdapter, ComputedObservationAdapter);
aurelia.start().then(a => a.setRoot('app', document.body));
}
Then, in welcome.js, add the following import statement:
import {declarePropertyDependencies} from 'aurelia-framework';
and then outside the Welcome class, add the following method call:
declarePropertyDependencies(Welcome, 'fullName', ['firstName', 'lastName']);