CODEWITHSUNDEEP
raphaellegacyaurelia
unchewyglees
unchewyglees

Reputation: 31

Aurelia: Using Functions from Raphael.js, a legacy 3rd party library

I am new to web development and therefore, Aurelia as well. I've been going through other questions and forums to try different ideas, but haven't found a solution. I think I may be missing something simple, but I'm not sure if my problem lies with how I'm adding the library, adding it into the module, bundling it, etc.

I am using Aurelia CLI and NPM.

In my test.js, I am trying to add the following, shown in the Raphael documentation:

let paper = new Raphael(document.getElementById('canvasArea'), 100, 100);
let rect = paper.rect(0, 0, 10, 10);

My test.js is this:

import {inject} from 'aurelia-framework';
import * as raphael from 'raphael';
@inject(raphael)
export class Test {
    constructor() {
        this.raphael = raphael;
        console.log(raphael);
    }
    attached() {
        this.createCan();
    }

    createCan() {
         let paper = new Raphael(document.getElementById('canvasArea'), 100, 100);
         let rect = paper.rect(0, 0, 10, 10);
    }
}

My test.html is this:

<template>
    <div id="canvasArea"></div>
</template>

My error, in the browser console, when loading the page is:

Unhandled rejection ReferenceError: Raphael is not defined at Test.createCan...

The console log for raphael is an object.

Object
    > _ISURL: /^url\(['"]?(.+?)['"]?\)$/i
    > _Paper: ()
    > _availableAnimAttrs: Object
    > _availableAttrs: Object
    > ...

Some of the various ways I have tried without success are the following:

To add Raphael.js, I did:

npm install raphael --save

and added the following to my aurelia.json file:

"dependencies" : [
    {
        "name": "raphael",
        "path": "../node_modules/raphael",
        "main": "raphael.min",
        "deps": ["eve-raphael"]
    }
]

Any help would be greatly appreciated such as possible solutions, better way to ask this question, where to look/what to read, other way to implement my end goal, etc. Thanks!

Edits 1. Clarification on location of error 2. Add some of console log for raphael

Upvotes: 0

Views: 306

Answers (2)

unchewyglees
unchewyglees

Reputation: 31

The solution is to add Raphael.js in the prepend section for the vendor-bundle in aurelia.json. I had tried this before, but I must have had other errors at that time too, such as new Raphael(...) instead of just Raphael (thanks @LStarky).

"prepend": [
    ...
    "node_modules/raphael/raphael.min.js",
    ...
]

While looking up what a legacy library was (thanks @LStarky), I got to the "A Very Stubborn Legacy Library" in the Aurelia Documentation, which stated how sometimes libraries can't "work with the module loading system". My assumption is my problem falls under this category, especially since following this allowed me to use the 3rd party library.

Test.js now looks like this:

export class Test {
    constructor() {
    }
    attached() {
        this.createCan();
    }
    createCan() {
        let paper = Raphael(document.getElementById('canvasArea'), 100, 100);
        let rect = paper.rect(0, 0, 10, 10);
    }
}

Upvotes: 2

LStarky
LStarky

Reputation: 2777

Based on what you've shared, and without any prior knowledge of raphael.js, your problem is maybe related to the dependency definitions in aurelia.json. Since you've listed eve-raphael as a dependency of raphael, you'll need to also add eve-raphael to your aurelia.json file.

Or, you could try deleting the deps line from aurelia.json (and the preceding comma), to see whether it really requires that dependency.

If this is not the solution, could you please copy/paste the specific errors you're getting when you run au run --watch?

Edit:

If this is a legacy 3rd party library, you also can most likely delete the Aurelia-specific instantiation in Test.js, like this:

import {inject} from 'aurelia-framework';
import 'raphael';
export class Test {
    constructor() {
    }
    attached() {
        this.createCan();
    }

    createCan() {
         let paper = Raphael(document.getElementById('canvasArea'), 100, 100);
         let rect = paper.rect(0, 0, 10, 10);
    }
}

Upvotes: 1

Related Questions