Give Fabricator Assemble the ability to output materials/partials in …

[SimonKenyonShepard]

…independent files in final distribution.
This allows you to see the separated materials in an isolated browser environment and also allows the main fabricator program to preview the components in an iframe. I can share the gist with what we have done to the fabricator project to make this very useful.

[mahish]

Hey @SimonKenyonShepard can you share it please? I would find it useful:)

[SimonKenyonShepard]

sure, you should be able to see the diff'd changes here : https://github.com/fbrctr/fabricator-assemble/pull/35/files

[mahish]

Yea, I've seen it. Eventually, I made it to work. Thanks! However, I've wondered about your front-end solution/implementation too:)

[SimonKenyonShepard]

ah sure, well, firstly we added this to the gulp file

gulp.task('assemble', function (done) {
    assemble({
        logErrors: config.dev,
        materialPreviews : "preview"
    });
    done();
});

then the important thing was to include this in the f-item-content file

<div class="f-item-preview">
    <iframe class="material preview-bordered" src="./preview/{{filename}}.html" width="100%" onload="resizeIframe(this)"></iframe>
</div>

basically then we created a JS method that grew and shrank the f-item-preview div to different break points which triggered the responsive behaviour of the component in the the iframe

[dandenney]

If anyone is still watching this, I would love some help. I'd really owe you one. I've forked the core and made line-by-line changes according to the index.js in this PR. I'm not great at tooling, so I've made an error somewhere. The app runs, but it doesn't generate the iframes and there's an error in the start script.

Fork: https://github.com/dandenney/fabricator
(I dumped the index.js from node_modules/fabricator-assemble/index.js in the root. I tried allowing it in .gitignore to no avail.

Error:

Error (fabricator-assemble): Cannot read property 'replace' of undefined
 TypeError: Cannot read property 'replace' of undefined
    at wrapPage (/Users/dandenney/Repos/styleguide/node_modules/fabricator-assemble/index.js:272:15)
    at createIndependentMaterialPreviews (/Users/dandenney/Repos/styleguide/node_modules/fabricator-assemble/index.js:681:16)
    at assemble (/Users/dandenney/Repos/styleguide/node_modules/fabricator-assemble/index.js:667:3)
    at module.exports (/Users/dandenney/Repos/styleguide/node_modules/fabricator-assemble/index.js:703:3)
    at Gulp.gulp.task (/Users/dandenney/Repos/styleguide/gulpfile.js:147:3)
    at module.exports (/Users/dandenney/Repos/styleguide/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/Users/dandenney/Repos/styleguide/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/Users/dandenney/Repos/styleguide/node_modules/orchestrator/index.js:214:10)
    at /Users/dandenney/Repos/styleguide/node_modules/orchestrator/index.js:279:18
    at finish (/Users/dandenney/Repos/styleguide/node_modules/orchestrator/lib/runTask.js:21:8)

It seems that I'm passing undefined into wrapPage, but I'm not sure why.

[LukeAskew]

@dandenney You need to add a preview.html layout template in src/views/layouts. Your code is looking for a layout named 'preview' since that's what materialPreviews is set to in your gulpfile.