Publish this project on NPM

[marceloemanoel]

Hey, @allpro.

We use npm as our package manager. Right now we have to use Napa to install jquery-ui-layout but, this process is flacky and would be so much easier and reliable to use directly from npm repository. Do you have plans to publish jquery-ui-layout as an npm package?

[GedMarc]

Hmm,
In the strictest sense, NPM modules are specific for server and build modules, And bower is specific for web packages.
While I understand that some have broken this pattern and chose to deploy twice. You would never include your node modules directory in your web package without serious refactoring, and it should never be done. For me specifically with the jquery 3 branch, there is a very large No around this request.

[marceloemanoel]

Hey, @GedMarc. I use it with webpack. So it takes the npm packages combine, remove dead code and minify them for me. The approach with Napa turns the repo into a node_module, and we import what's important only. However this approach is unreliable, and a perfect solution would be to have it as an npm package.

[GedMarc]

I understand your approach, however the refactoring requirements for NPM are simply bundled into a single webpack app rather than doing it yourself.

I think wait to hear from (The Dev God) Kevin, and see his thoughts on releasing the master branch to NPM then.

My personal opinion is using an app like web pack, while it is a workaround to a fundamental environment problem (where NPM is used for web package retrieval), it simply doesn't justify add web packages into NPM for an incorrect environment, and polluting the server and build library with web packages.

[allpro]

Layout relies on, and exists within, a jQuery global object. The current version can never be a normal npm package without major refactoring, so I'm hesitant to maintain it as one.

However it can still be imported like a package because WebPack can use GitHub URLs as dependencies. AFAIK, a package.json is not required for this...

https://docs.npmjs.com/files/package.json#git-urls-as-dependencies

I think you should be able to specify it as below in the app package that contains your UI code...

"dependencies": {
    "layout": "allpro/layout",
    ...

Then import the library file in your main JS file, after importing the global jQuery package. (I assume you already have jQuery configured as a global.)

// Layout expects a 'jQuery' global var
import jQuery from 'jquery';
import init_layout from 'layout/source/stable/jquery-layout';

const $ = jQuery; // convenience

export function initLayout() {
    $(".selector").layout({ ... });
}

The act of importing adds Layout to the global jQuery object/instance. Therefore you should be able to import this into other JS files as well, and access the existing Layout plugin...

import $ from 'jquery';

export function initLayout() {
    $(".selector").layout({ ... });
}

The important part of this sample is importing directly from GitHub, as if it were a package. I haven't actually tried this, so would be interested to know if it works for you.

You could, of course, just include a copy of Layout with your own JS files inside your app package, and import it from there. It seems that WebPack should bundle it the same way in either case.

[SamFromDaUk]

I'd like to second having this project on NPM, we are importing directly from our fork on bitbucket, but would much prefer to import this from npm.

"jquery-layout": "[email protected]:organisation/jquery-layout.git",

[allpro]

Hi Sam. Have you tried importing Layout directly from Github using the syntax in my post above? I'd like to confirm that it works as advertised. If it does, then this addresses the need, at least for now.

[SamFromDaUk]

It mostly works yes.

In my package.json we have our own fork of the repo: "jquery-layout": "[email protected]:organisation/jquery-layout.git",

We are then using require.js to pull in the file.

require.config({
    ...
    paths: {
        'jquery-layout': '../../node_modules/jquery-layout/source/stable/jquery.layout.min'
        ...
    },
    ...
});

Because jQuery Layout isn't an AMD module its not working entirely right, due to jQuery draggable not being initialised when jQuery layout is pulled in. We fixed this by adding this line at the bootstrap of the project.

$.layout.plugins.draggable = true;

[dfn-certling]

However it can still be imported like a package because WebPack can use GitHub URLs as dependencies. AFAIK, a package.json is not required for this...

https://docs.npmjs.com/files/package.json#git-urls-as-dependencies

At least with npm directly, this does not seem to work. It results in a

$ npm install allpro/layout
npm ERR! premature close

There is an issue in the npm project (npm/npm#20824) that a package.json is necessary for this to work. Indeed just copying the existing layout.jquery.json to package.json allows to install via npm.