We are using Aurelia JS in our project.
On IE11 we get error conntected to missing "includes" method:
Object doesn't support property or method 'includes'
We've installed aurelia-polyfills plugin but it doens't work (or we use it in wrong way).
In main-webpack.js:
...
import 'aurelia-polyfills';
...
bootstrap(function (aurelia) {
aurelia.use
.standardConfiguration()
.defaultResources()
.developmentLogging()
...
.plugin(PLATFORM.moduleName('aurelia-polyfills'));
aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app-webpack'), document.body));
});
Our import statement is correct?
Should we do it in the same file?
SOLVED:
aurelia-polyfills handles only includes for Array object, not String.
My error concerned on String, so I needed to create separate JS file with polyfill and use this code snippet: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes
Related
I would like to create a viewer PDF files into electron/vuejs application.
I need to use the pdfjs librarie.
For that I installed this package : "pdfjs-dist": "2.6.347"
and in my component vuejs I try to used this by doing this :
import pdfjsLib from "pdfjs-dist/webpack";
This import instruction seeems to be running good. But If a start used this like this :
created()
{
pdfjsLib.getDocument()
}
I throw this error :
Cannot read property 'getDocument' of undefined"
I try lot of tricks but I don't find any solution for use this library in my component.
Anyone have a vuejs project with pdfjslib for viewing pdf ?
This seems to work:
import("pdfjs-dist").then((pdfjsLib) => {
pdfjsLib.getDocument();
});
It can be used inside either created() or mounted(). I'd personally use it in mounted.
Working demo here.
Also note calling getDocument() with no arguments seems to trigger some lib error (but that's outside the scope of current question):
Invalid parameter in getDocument, need either Uint8Array, string or a parameter object
I am using the vue-i18n for a vuejs app.
All good, except how can I access the translations from a class that is not an extension of vue. Below is a simple class containing validation methods for element-ui to use eg:
import Validate from '#/services/Validate';
class FormValidate {
public password(rule: any, value: string, callback: any) {
callback(Validate.password(value) ? undefined : new Error('errors.passwordInvalid'));
}
}
export default new FormValidate();
Above the Error "errors.passwordInvalid" is a key for the translation file.
Within a typical component $t('errors.passwordInvalid') will return the human friendly string in the correct language.
How can i access the translation lib from this isolated class?
There is a thread on vue i18n github there or there. Basically the answer seems to be that you should separate i18n related code from your main.js file into i18n.js file. Which could look like:
export default new VueI18n({
// with all your settings here
})
Then import it as pure js file and t() method should work everywhere.
This is Vue.js question, generally I'm trying to use 'scrollMonitor' function inside of my .vue instance(imported via main.js) but it gives me a typical 'this.scrollMonitor is not a function' error
mounted () {
let watcher = this.$scrollMonitor(this.$refs.nicer)
}
In main.js ScrollMonitor library seems to be properly imported(console shows what's expected):
import scrollMonitor from 'scrollmonitor'
Vue.use(scrollMonitor)
console.log(scrollMonitor)
Again main goal is using scrollMonitor functionality inside of .vue file(in vue component instance). Sorry if I'm missing something silly here - I'm already using some other libraries like Vue-Resource in that file so issue is not in 'filepath' but rather in the way I'm using scrollMonitor functionality, any help is much appreciated, thank you !
For those who are still looking: there is a way of adding plain js libraries to the main.js and then using them with ease globally in inner components(this is not about mixins):
import scrollmonitor from 'scrollmonitor'
Object.defineProperty(Vue.prototype, '$scrollmonitor', {
get() {return this.$root.scrollmonitor}
})
also it should be added to main Vue data object:
data () {
return { scrollmonitor }
},
And then it can be used within mounted() callback (not created() one) inside of the component itself, with scrollmonitor it may look like this(in my specific case the template had a div with ref="nicer" attribute, 'create' is a method specific to the library api):
mounted () {
this.$scrollmonitor.create(this.$refs.nicer)
}
Hooray, I hope someone may find this useful as I did!
Are you using a plain javascript library and trying to Vue.use it? That won't really work. Vue.use will only work with plugins designed to work with Vue. Import the library into the component that needs and and just use it there.
scrollMonitor(this.$refs.nicer)
I have a small Aurelia app built with Webpack. Under my src folder I have util folder with index.ts inside. In main.ts I turn the feature on like this:
import { Aurelia, PLATFORM } from "aurelia-framework";
export function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.feature(PLATFORM.moduleName("util"));
aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName("app")));
}
util/index.ts:
import { FrameworkConfiguration } from 'aurelia-framework';
export function configure(config: FrameworkConfiguration): void {
config.globalResources([
"./converters",
"./rest"
]);
}
converters and rest are Typescript modules under util.
I'm following the instructions from Aurelia Hub.
When I open the app in the browser I see the following error:
Uncaught (in promise) Error: Unable to find module with ID: util/index
at WebpackLoader.<anonymous> (aurelia-loader-webpack.js:187)
at step (aurelia-loader-webpack.js:36)
at Object.next (aurelia-loader-webpack.js:17)
at aurelia-loader-webpack.js:11
at Promise (<anonymous>)
at webpackJsonp.64.__awaiter (aurelia-loader-webpack.js:7)
at WebpackLoader.webpackJsonp.64.WebpackLoader._import (aurelia-loader-webpack.js:152)
at WebpackLoader.<anonymous> (aurelia-loader-webpack.js:252)
at step (aurelia-loader-webpack.js:36)
at Object.next (aurelia-loader-webpack.js:17)
If I reference the modules directly instead of the feature e.g.
import { Rest } from '../util/rest';
Then I get no errors and the app loads successfully. But I want to have these modules globally available.
Using aurelia-webpack-plugin version 2.0.0-rc.2
Would appreciate your advice.
Take a look at this:
https://github.com/aurelia/templating-resources/blob/master/src/aurelia-templating-resources.js
Edit:
I have gotten it working. The key is that you need to explicitly call PLATFORM.moduleName('./relative/path/to/file') on each path specifically and that the call needs to be made from the file (actually technically the same directory but still...) that calls config.globalResources().
In other words you can't shortcut the following code:
config.globalResources(
PLATFORM.moduleName('./resource1'),
PLATFORM.moduleName('./resource2')
);
Don't try to map the resources to PLATFORM.moduleName or to dynamically construct file names.
You should change your path PLATFORM.moduleName("util") into PLATFORM.moduleName("./util"). Then you can be able to use path relative to your util folder to register your globalResources. Also you can look into here for sample project structure. Also see this line of code, aurelia added /index to moduleName if it not included as it was based on convention.
If you already try using aurelia CLI, the created project under src/resources is registered as a feature.
I am trying to register a couple of plugins for my app however I am not sure how this should be done.
The plugins that I have, include two ValueConverters and the gooy/aurelia-animator-tinyanimate which I have installed via JSPM.
Here is my current implementation:
resources\index.ts/js
export function configure(aurelia) {
aurelia.globalResources('../from-now', '../date-format');
}
main.ts/js (this is the entry point of the app)
import {Aurelia} from 'aurelia-framework';
export function configure(aurelia: Aurelia): void {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('resources/index', 'gooy/aurelia-animator-tinyanimate');
aurelia.start().then(function () { return aurelia.setRoot('views/app'); });
}
The converters are working however I do not see the tinyanimate to be loaded.
Based on the above, I have the following questions:
how would I move the gooy/aurelia-animator-tinyanimate over to the index.js file?
what is the difference between plugin() and feature()?
Features are basically the same as a plugin, except that they live in your own source tree. Based on your index.js file, you would need to load your feature like this:
aurelia.use.feature('resources`);
Assuming that the feature's index.js file is located in the resources folder. You may want to change your index.js file to
export function configure(config) {
config.globalResources('./from-now', './date-format');
}
and update your directory structure to put from-now.js and date-format.js in the resources directory. You don't need to do this, but from an organizational standpoint, it would make sense. Changing the parameter name is simply to better describe what the parameter is (a FrameworkConfiguration instance).
To load gooy/aurelia-animator-tinyanimate in your main.js file, you will need to remove the 'resources/index' parameter from the call to plugin. Aurelia will then load the plugin properly for you. Your main.js file should end up looking like this:
export function configure(aurelia: Aurelia): void {
aurelia.use
.standardConfiguration()
.developmentLogging()
.feature('resources')
.plugin('gooy/aurelia-animator-tinyanimate');
aurelia.start().then(function () { return aurelia.setRoot('views/app'); });
}
Also, note that there is no need for the import {Aurelia} from 'aurelia-framework'; line in your main.ts.