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.
Related
In my nuxt.js application, I have a script that imports an NPM package which is only compatible with browser contexts (it references document, location, window, etc.)
Is there a way to exclude this from SSR?
import thing from "#vendor/thing"; // causes `document not defined` error
export default showThing(){
if (process.client) {
thing();
}
}
I can use the method with process.client but this file is still imported in my components.
You could import it dynamically rather than in every context.
As explained in my answer here: https://stackoverflow.com/a/67825061/8816585
In your example, that would be something like this
export default showThing(){
if (process.client) {
const thing = await import('#vendor/thing')
thing()
}
}
I would like to make a js module file that imports vue component and register there.
and then inherit this component and use it for the app's main component.
I've found similar cases but the thing is, I don't use vue cli.
custom.js
import customMain from '/custom/components/main/main.js';
window.Vue.defineComponent('custom-main', customMain);
and in the app.js
import Main from '/global/components/main/main.js';
var App = createApp({
...
components: {
'global-main': Main,
},
template: `<component :is='mainComponent'></component>`,
computed: {
mainComponent() {
if(this.settings.customComponent){
return 'custom-main';
}else{
return 'global-main';
}
}
is this doable? what should I do to make this work?
is there other alternative way to load components dynamically?
The best approach for this case is defining a plugin named registerComponents in the plugins folder : plugins/registerComponents.js
import customMain from '/custom/components/main/main.js';
export default {
install: (app, options) => {
app.component('custom-main', customMain);
}
}
in App.js use the plugin:
import registerComponents from './plugins/registerComponents'
var App = createApp({....})
App.use(registerComponents)
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 update an app based in pluralsight course "Building Applications with Aurelia" with methods to make a custom component globally available to DOM.
The course still has globalizeResources because it was written before 0.15 or whatnot and hasn't been updated.
Note that <require> does work to display the custom component contained in resources...
none of these methods seem to:
in main.js:
aurelia.use
.standardConfiguration()
.developmentLogging()
.globalResources("./resources/nav-menu");
or
aurelia.use
.standardConfiguration()
.developmentLogging()
.feature("resources");
with ./resources/index.js containing
export function configure(aurelia) {
aurelia.globalResources("./nav-menu");
}
or
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin("./resources/nav-menu");
Has this changed again, or ...?
Not sure which chapter of the course you use, but this is taken from the 5th chapter. Didn't follow the course, but it shows Movies and then the nav :-)
See this gistrun for a working example:
https://gist.run/?id=ef855f42433dd22c533e1f52e48dfc45
(run it in chrome, for best gistrun support)
I have installed toastr in my Aurelia app. I am able to import and use it in different views, but I can't figure out how to set/modify its global options.
Ideas?
The most trivial place to do that is in you application constructor. You must also have your toaster script loaded at this point. Here's how your app.js could look like:
import {Router} from 'aurelia-router';
import toastr from 'toastr';
export class App {
static inject() { return [Router]; }
constructor(router) {
toastr.options.closeButton = true;
// ... setup your routing etc
}
}
I assume you already have your toaster script loaded at this point. You can also move toastr initialization to any other Aurelia constructor, or any other place, I don't see any technical restrictions.