Fabricator DNA
Fabricator module that creates a dependency tracker within the notes section of each material.
Installation
npm install fabricator-dna --save-dev
Adding to Fabricator
Open the Fabricator gulp.js
file and include the module.
const dna = ;
Add the helpers to your config
object.
config = helpers: "dependencies": dnadependencies "dependents" : dnadependents "hasDependencies": dnahasDependencies "hasDependents": dnahasDependents
Exclude the dependencies.json
file from the config.templates.watch
array. This will ensure that changes to the file will not trigger a rebuild and recursive loop.
config = templates: watch: 'src/**/*.{html,md,json,yml}' '!src/data/dependencies.json'
Add the helpers to the assembler
gulp task.
* Note: You will use the config.helpers
object here.
gulp;
Create the dna
gulp task. If you've changed the location of your data
, materials
, or views
, you will want to reflect that in the dna.scan()
parameters.
gulp;
Add the dna
gulp task to the assemble:watch
task.
* Note: In order for the task to accurately generate the dependencies, put the dna
task before the assembler
task.
gulp;
Adding to the Toolkit
Update ~/src/views/layouts/includes/f-item-contents.html
with the following:
{{#if notes}} Notes {{{notes}}} {{/if}} {{#if this.data.dna}} {{#hasDependents this.data.dna @root.dependencies.helix}} Dependents Files Selectors {{#dependents this.data.dna @root.dependencies.helix}} {{this.file}} {{#each this.selectors}} {{this}} {{/each}} {{this.count}} {{/dependents}} {{/hasDependents}} {{#hasDependencies this.data.dna @root.dependencies.helix}} Dependencies Files Selectors {{#dependencies this.data.dna @root.dependencies.helix}} {{this.file}} {{#each this.selectors}} {{this}} {{/each}} {{this.count}} {{/dependencies}} {{/hasDependencies}} {{/if}} {{{material @key @root}}} {{material @key @root}}
Usage
Within your partials you will need to add the following front-matter:
"dna": "btn" "btn-primary" "btn-secondary" "btn-success" "btn-info" "btn-warning" "btn-outline-primary" "btn-outline-secondary" "btn-outline-success" "btn-outline-info" "btn-outline-warning"
The first element in the dna
array is the ID of the partial and must be unique. The other values are css selectors that relate to the partial.
Optionally you can just specify a string:
"dna": "btn"
Within your HTML you will need to apply the data-dna
attribute. The value of the attribute should be the same as the dna
ID.
Primary
As you use the partial through out your toolkit, be sure to include the data-dna
attribute. When the dna.scan()
function executes, it will add any file containing data-dna="btn"
or id="btn"
to the dependents list.
Knowing that this could be a bit of work in exsisting projects, if you specify class selectors in the dna
front-matter array, the dna.scan()
function will add any file containing any of the specified classes to the dependents list. For instance if you specified class="btn-primary"
anywhere in your toolkit, that file would then be added to the dependents list.