installing companion css/less/scss file with my js script

[zanona]

Hey guys, I am trying to figure out what to do if my JS script has a companion styles file. Let’s assume it is a jquery widget and that a css is provided along with it.

Because I still want my js script to be expanded into my baseUrl just like jquery etc, I don’t want to change the package type to directory in this situation, where it would e inside it’s own folder inside baseUrl directory.

So my current repo look like this:

my-widget.js
my-widget.css
README
LICENSE
/docs
/samples

So in this case the only files I would like from it are my-widget.js and my-widget.css to be expanded into the baseUrl like:

jquery.js
my-widget.js
my-widget.css
hammer.js
…

The only problem is that considering this the only way I can make it work at the moment is by declaring the following in my package.json file.

{
    "name": "my-widget",
    "description": "does some crazy magic",
    "main": "my-widget",
    "volo": {
         "dependencies": {
               "jquery": "jquery/1.11.0",
               "my-widget.css": "username/my-widget#my-widget.css"
         }
    }
}

However, as you can see, this comes as a completely separate dependencies with variation in version since the {version} expansion will not work here.

I have then noticed under package.json documentation the files parameter which, in theory, gives support to any extra file you would like to provide with you module. I believe that perhaps this could make it work nicely where having a package.json like:

{
    "name": "my-widget",
    "description": "does some crazy magic",
    "main": "my-widget",
    "files" : ["my-widget.css"],
    "volo": {
         "dependencies": {
               "jquery": "jquery/1.11.0"
         }
    }
}

[jrburke]

If the package you want to install contains/needs my-widget.js and my-widget.css to be fully functional, then the expectation is that those live in a directory that contains those two files.

volo by default will create an adapter file in the baseUrl area that points to the main module in that directory. So, after install, it would look like this (inside baseUrl):

• my-widget.js (created by volo, just contains define(['my-widget/my-widget'], function(m) { return m; })
• my-widget/
  • my-widget.js
  • my-widget.css

If not using AMD modules for the JS, then just the my-widget/ folder is created.

In general, that is the expectation for volo: if it is just a single file package, then it can just be dropped in the baseUrl. If it really is a collection of files, then they should go in a subdirectory under baseUrl.

Closing as a discussion ticket, feel free to continue discussion here.

[zanona]

hey @jrburke thank you for the explanation. It definitely makes sense. The only issue I am running into is that when installing my-widget a hard-copy of the current file structure is simply being cloned. Including all files along with it and not just the .js and .css files. How can I make sure only these files are installed?

Could you please provide an example of a package.json file that would address that? In, fact it got me worried because even the examples listed on the wiki are generating the same file structure as the repository without creating adapters, etc.

I am running Volo 0.3.3, however, testing it locally with volo install /Users/me/path-to-local-repo , I am not sure if this could affect the behaviour of volo.

Thanks James