CODEWITHSUNDEEP
javascriptaurelia
Bronzato
Bronzato

Reputation: 9332

Integrate Salvattore inside my Aurelia application

I tried to integrate Salvattore (Masonry alternative in CSS) inside my Aurelia app but unfortunately it doesn't work. After trying a lot of things I'm disappointed and think maybe it is not possible at all to have Salvattore working inside an Aurelia app.

Here is what I did: I created a new Aurelia project thanks to the CLI au new and inside this project I created an html page inside my Aurelia project with this code:

<div id="grid" data-columns>
    <div>Item #1</div>
    <div>Item #2</div>
    <div>Item #3</div>
    <div>Item #4</div>
</div>

With this css:

#grid[data-columns]::before {
    content: '3 .column.size-1of3'; 
}

/* These are the classes that are going to be applied: */
.column { float: left; }
.size-1of3 { width: 33.333%; }

At first, I tried simply to reference Salvattore's js code inside my index.html page (just above the close body tag) like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Aurelia</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, height=device-height />
  </head>

  <body aurelia-app="main">
    <script src="scripts/vendor-bundle.js" data-main="aurelia-bootstrapper"></script>
    <script src="javascript/salvattore.min.js"></script>
  </body>
</html>

It doesn't work, I got errors in the console.

enter image description here

I also tried to install Salvattore through npm install salvattore --save and I add it in the aurelia.json. In main.ts I tried to reference it: import 'salvattore'; but it doesn't work neither. I mean, no errors this time but nothing happened. Finally I tried to inject the Salvattore js script directly inside my page at the end thanks to the scriptinjector component. Once again, it dosn't work, nothing happened.

Do I have to draw the conclusion that Salvattore is simply not compatible with any Aurelia projects ? In that case, do you know any alternative ?

Below sample codepen using Salvattore in a basic html page (not Aurelia)

https://codepen.io/mitour/pen/wWMOvw

Upvotes: 1

Views: 68

Answers (2)

Bronzato
Bronzato

Reputation: 9332

Here is the solution:

  • In package.json add "salvattore": "^1.0.9"
  • In aurelia.json add "salvattore"

In your typescript page (.ts):

 import * as salvattore from 'salvattore';

 export class MyPage {
     attached() {
         salvattore.init();
     } 
 }

Upvotes: 0

user1375096
user1375096

Reputation:

You have to understand cli bundler is an AMD bundler. Your <script src="javascript/salvattore.min.js"></script> is below vendor-bundle, so an AMD loader (requirejs/systemjs) is already in place when browser reads salvattore.min.js. That's why salvattore tries to load itself as an AMD module instead of creating a global var.

You can move salvattore.min.js to above vendor-bundle script tag. Or using prepend in aurelia.json, add salvattore before requirejs in the prepend list.

The other thing you can try is to use it as a module. Don't add script tag in html, don't add it prepend. But add this line in your main.js or main.ts.

import "salvattore"; // this will load it as an AMD module

Upvotes: 4

Related Questions