update to latest gridstack.js

[adumesny]

noticed from your package.json that you are using
"gridstack": "^0.4.0"

which is VERY old - might want to update to the latest (1.1.0) or at least 0.6.5 since that lib is being maintained. Ping me if you have any questions.

[dceejay]

have you tried upgrading ? does the layout capability still function ?

[adumesny]

I'm not using this lib, but the maintainer of gridstack. thank you.

[dceejay]

Ok a quick test shows that gulp no longer builds it even with version 0.5 ( something about singular glob scss file missing.) so not an easy upgrade for something that isn’t broken.

Error: File not found with singular glob: /Users/foo/Projects/node-red-dashboard/node_modules/gridstack/src/gridstack-extra.scss (if this was purposeful, use `allowEmpty` option)

we need it as we default to 30 columns... and I see the src has been removed from the npm package... so we may be stuck on 0.4.0 for a while

(EDIT _ forgive me - the src is still there in 0.5.0 so we could go to there at least)

[dceejay]

hmm - removing jquery would be nice (moving to 1.x) - but any clues how to load that scss file via npm ?

[adumesny]

that scss hasn't changed in years so you could just have it locally (ideally just generate 30 columns not 1-30 which is a lot of styles IFF you don't let users change the column number). not sure why NPM included the source code files in the past!

How were you setting $gridstack-columns to 30 anyway ? didn't you have to modify ?
I suppose I could include in the dist/ npm package since I mention using in doc for custom columns but hasn't looked how people use it during builds...

Also since 0.4.0 there has been 300+ commits since then - surely something you could use :)
for one thing jquery-ui I bundle is 1/5th the original size!
https://github.com/gridstack/gridstack.js/releases/tag/v0.4.0

as for removing jquery, it's work in progress. In the1.0 API it is removed so you can switch now and it will go away as a load in the future...

Also how come gridstack is not a package dependency but a dev dependency ? I see you had 75k download a year ago but gridstack was more like 8k back then so wondering how that's possible...
in case you are wondering, I'm trying to show more actual usage of gridstack so more people use it and contribute back.

[dceejay]

We run it through gulp - so that did the sass thing to build the .min.css for us. We load all extra libs as dev deps and then gulp does the build for us to just copy in the relevant files into our dist.

OK I guess we'll just grab that one file manually and add it to the build - see what happens :-)
hmm though a quick look says the latest scss has change just 10 days ago...so I don't know if it's backwards compatible.

So far I can get to 0.5.5 ok - trying 0.6 breaks something in the drag drop between groups - seems to create duplicates that are ephemeral and cant be interacted with.

[adumesny]

yeah I changed it to generate 2-11 by default since 12 and 1 are already done in the default css. no biggy...
Were you able to pass in $gridstack-columns without changing the file itself ?

6.x sends a LOT LESS events (only what changed) so if you just add a new node you will get a single added event no change event if nothing else on the grid changed. maybe you depended on that broken behavior ? just listen to added/deleted too.

would be great if you could external depend on gridstack instead of compiling it. odd your package compiles everything in instead... user have no choice of a more recent npm build, etc...

you should also just include gridtsack.all.js and .css as that include jquery/jquery-ui trimmed down versions.

[dceejay]

currently the gulp function does this - happy to take advice to update

function gridstack() {
    gulp.src('node_modules/gridstack/dist/gridstack.min.css').pipe(gulp.dest('dist/css/'));
    gulp.src('node_modules/gridstack/dist/gridstack.jQueryUI.min.js').pipe(gulp.dest('dist/js/'));
    gulp.src('node_modules/gridstack/dist/gridstack.min.js').pipe(gulp.dest('dist/js/'));
    gulp.src('node_modules/gridstack/dist/gridstack.min.map').pipe(gulp.dest('dist/js/'));
    gulp.src('node_modules/lodash/lodash.min.js').pipe(gulp.dest('dist/js/'));
    return gulp.src('src/gridstack-extra.scss')
        .pipe(replace('$gridstack-columns: 12 !default;','$gridstack-columns: 30;'))
        .pipe(sass({outputStyle: 'compressed'}))
        .pipe(rename({extname: '.min.css'}))
        .pipe(gulp.dest('dist/css'))
}

and we have to fix/pin it- precisely in order not to break when you upgrade things ! Users don't want choice - they want it to work,

[adumesny]

that's why you have npm 0.5.x vs 0.6.x vs 1.x - those can be breaking changes!
you saying your lib never ever breaks things for your users ?

I see about the gulp replace... neat. guess for now include a copy of the latest, and maybe I will export in next release again. that would be v1.1.1 if you need it.

as for the script it should for 0.6.4 / 1.x:

function gridstack() {
    gulp.src('node_modules/gridstack/dist/gridstack.min.css').pipe(gulp.dest('dist/css/'));
    gulp.src('node_modules/gridstack/dist/gridstack.all.js').pipe(gulp.dest('dist/js/'));
    return gulp.src('src/gridstack-extra.scss')
        .pipe(replace('$gridstack-columns: 11 !default;','$gridstack-columns: 30;'))
        .pipe(sass({outputStyle: 'compressed'}))
        .pipe(rename({extname: '.min.css'}))
        .pipe(gulp.dest('dist/css'))
}

we NO LONGER use lodash (450k!) and jquery/jquery-ui trimmed are part of all.js (which will get smaller over time wihout changing your needs) so don't include those elsewhere

[adumesny]

I will be happy to help you with making gridstack an external dependency (with fixed range you can control what works). this way users can update a module (within spec or force it outside) if they so desire because it releases at a different schedule than you do... if a bug fix dot release comes out, they can't have it until you rev - and won't know since you hide what you use... This is the reason you've been using a 2 years old release that is 300 commits behind... think about it. This wouldn't work enterprise software (what I do) where you need to know your open source dependencies AND do security patches often.

[dceejay]

Well in theory changes from 0.5 -> 0.6 should not really include breaking changes... so removing events is a bad idea... but yes if below version 1 they are allowed (within semantic rules:-( ).

Enterprise "customers" have plenty more resources than the typical open source project and can quite easily inspect the package.json and license files of any project using tools like https://libraries.io/npm/node-red-dashboard - and it would be great if they offered up help to fix anything they may want to rely on.

I'll try those gulp changes and see how we go. Thanks.

[adumesny]

are you hard-coding to 30 columns or letting the customer pick (or change based on screen resolution - because in 0.6.x I made setColumn(N) work A LOT better for responsive design.
The reason I'm asking is because we could modify the extra.css to only generate for column=30 (I can add a start number) which would make the CSS file a LOT smaller and more efficient than having 30+29+28+27+... sets of styles.

[dceejay]

Most of the time they would be using 6 or so... maybe 9, 12 etc... but there is nothing to stop a user going larger if they wanted to... (indeed I'm not sure why the limit is 30 :-).

So far experiments show that there is indeed a lot of breakage trying to goto 1.0 - so i think we'll aim for 0.6.x - though I'm even struggling to see why that is failing. It seems to be when we drop a cell into a new group and it has to auto-resize... it seems to create a new smaller cell (correct) but leave the old larger one... which then causes other errors of course.

Is there a list of methods that changed going to 0.6 ?

[adumesny]

no api change in 0.6.x, just event changes and implementation of setColumn(N) which was experimental (and not working well at all).

Are you including jquery/jquery-ui yourself or using ours ? 1.x has it included in gridtsack.all.js, which older build have it separate. When did this behavior issue started appearing ?