zurb/tribute

First of all you would include it in you app.js instead.

Go into your /resources/js/app.js and add this line (i am just assuming you are adding your javascript directly inside a blade file)

window.Tribute = require('tributejs');

I also suggest watching this: https://laracasts.com/series/learn-laravel-mix and later this https://laracasts.com/series/webpack-for-everyone

okay I will try it out thank you

Hello Sinnbeck,

how did you know that you have to put it on the browser object model?

How did you know to put window.?

In the offical description they say:

https://github.com/zurb/tribute

Import into your ES6 code.

import Tribute from "tributejs"; but that doesnt work ...

where instead what u said window. (BOM) works ....

i dont understand ho wyou knew that?

Let me give you a small intro to modern js :)

In old times you just just load your external libs using a scripts tag, and these would the populate the window (global) namespace with their names. That worked, but could give you issues. What happens when you have two different packages with the same global name?

In comes webpack. It takes all js and keeps it internal and manages naming conflicts by having the user importing/requiring what they need and naming it as well. That means that you can only call js from inside js. If you call a js function directly inside you html, it will be undefined.

Now you can then manually send them to the window (global space), and name them in the process. That is what I showed you how to do.

In their example they never use the js outside of js, and therefor does not need to send it it window. Personally I have no js outside of my js files and therefor never need to send anything to window (but that is a matter of preference)

Btw.. Adding a tag to your html does not count as "Inside js". I am only talking about .js files inside the resources directory

WoW what a great answer mate really, even the last sentence was really valuable to me.

I will ask you one last question just to understand it sorry you are the best person that I can ask for help

So this is the example of the package owners.

    <script src="../dist/tribute.js"></script>
    <script>
      // example of alternative callback
      var tribute = new Tribute({
        // menuContainer: document.getElementById('content'),
        values: [
          {
            key: "Jordan Humphreys",
            value: "Jordan Humphreys",
            email: "[email protected]"
          },
          {
            key: "Sir Walter Riley",
            value: "Sir Walter Riley",
            email: "[email protected]"
          }
        ],

as you can see inside their example file they never use the BOM (window.) global and it still works ...

does that mean I have to use webpack somehow if I want to integrate the package without the BOM?

Or would you say it doesn't matter if i use the BOM or not?

In your last message you said:

quote: In their example they never use the js outside of js

But when you look at this example file I mean they do ?! don't they?

https://github.com/zurb/tribute/blob/master/example/index.html

Let me explain window to you. window. is like a super global that works across the browser window. That means inside js files, in html and so forth. As we in old times would just load in a package using , this would get bound to window. But you would never write window.$ to call jquery for instance. That is because it will automatically get them in the global scope of window (it is implied). You can do the same inside a regular js file inside of the public folder, but not in resources. That is because webpack is very strict and will throw an error as it does not know the variable (it does not load from window automatically).

So an example. If inside a script that these two lines are the same.

var tribute = new Tribute({ //implied window.Tribute
var tribute = new window.Tribute({ //explicit window.Tribute

Be aware that they might use some other method of binding Tribute to window. This could be done in webpack instead. The way I showed you is just the simplest.

Edit: They are using gulp with browserify to bind it globally

browserify('src/index.js', {
            debug: true, standalone: "Tribute"
        })

what about this?

Webpack

To add Tribute to your webpack build process, start by adding it to your package.json and running npm install.

After installing, you need to update your Babel module loader to not exclude Tribute from being compiled by Webpack:

{
    test: /\.js$/,
    loader: 'babel',
    exclude: /node_modules\/(?!tributejs)/
}

Would this fix my problem?

You can give it a try :) Should be as easy as running npm install, then adding that, then commenting out the window.Tribute part, and recompiling

Hello @sinnbeck do you know where in laravel I can update my babel module loader?

It seems a bit complicated to go though the laravel mix config

I added it

 // Add support for loading cursor files.
    rules.push({
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules\/(?!tributejs)/
    });

to the

C:\Users\Anonymous\Desktop\JS\zurb\test\node_modules\laravel-mix\src\builder\webpack-rules.js

than i removed the window.tribute part and recompiled but it did not work :(

I am really confused right now

so this

Tribute = require('tributejs');

is working

and this

let Tribute = require('tributejs');

is not working ...