Module preview: Show rendered html and data model, move logic from gulp to data layer

unic / estatico

[DEPRECATED] Estático – Static site generator for frontend unicorns

Other

121 stars 18 forks source link

Module preview: Show rendered html and data model, move logic from gulp to data layer #26

Closed backflip closed 7 years ago

backflip commented 7 years ago

Goals:

Show not only the handlebars template but also the data model and the resulting HTML. This is done for every variant. Currently, it is a "dumb" linear view, it would probably make sense to display this with tabs instead. However, since the module preview page needs some UX love anyway, I didn't tackle this here.
Move logic from the html task to the data layer. The idea is to make it more obvious what's going on. While explicitly setting up variant data in the .data.js file instead of the gulp task might be a bit more "laborious", it should make it easier to debug and extend.
Better structure data by splitting it into meta and props (for both modules and pages)

Visual result:

What do you think?

corinneroelli commented 7 years ago

@backflip There are some qunit tests failing:

Test failed: slideshow: Test whether clicking next button updates "currentItem" property
[16:55:17] Failed assertion: currentItem is 1, expected: 1, but was: 0

For any reasons, the prev() function works fine, but the next() function doesn't calculate properly.

backflip commented 7 years ago

@corinneroelli, nice catch, the slideshow demo page had no initial slides but only dynamically loaded ones (due to a data inheritance issue) and the JavaScript did not account for dynamically added slides, preventing the paging from working correctly. Both issues fixed.

Our demo QUnit test is rather useful!

backflip commented 7 years ago

@orioltf, yep, rebasing is ongoing.

backflip commented 7 years ago

Rebased.

However, the change in https://github.com/unic/estatico/pull/17 was apparently a bad idea since it prevented the data helper from accessing the same handlebars instance (necessary to have the same partials and helpers as the html task's handlebars instance). That's why I had to refactor the helpers/handlebars.js (and all the tasks relying on it).