unic / estatico-nou

Static site generator for frontend engineers
https://unic.com
13 stars 6 forks source link

[Change] Simplify module data #73

Open backflip opened 6 years ago

backflip commented 6 years ago

As suggested by @marbor3 about 25 years ago, we should probably simplify our data files.

marbor3 commented 6 years ago

A general comment. I had a look into it in current project, based on old Estatico, but still, this is still valid for nou one.

What we wanted to achieve:

  1. Remove boilerplate and simplify code for creating module meta
  2. Create a simple and readable way of creating variants
  3. If possible create module data examples only on that modules data.js files

We started by creating a ModuleMeta wrapper, so creating meta data for module looked like:

new ModuleMeta({
        moduleName: 'teaser',
        jira: 'jira-180',
        title: 'Teaser'
    }, {
        data: data
    });

hbs, md files, some keys need to follow naming convention so it's the same and in the same folder and has the same file name as module but for simplicity I can give up option to have this as a variable. data here is the data for default module variant.

And that's it, to create the most simple module you need:

const ModuleMeta = require('../../../helpers/modulemeta.js');

module.exports = new ModuleMeta({
        moduleName: 'teaser',
        jira: 'jira-180',
        title: 'Teaser'
    }, {
        data: {
            title: 'my title'
        }
    });

And that’s your whole data.js file for a module with default variant only.

To simply add another variant there’s another simple helper:

moduleMetaInstance.addVariant('variantKey', 'New Variant', { title: 'second variant' });

Each variant creates a data object that can be reused in other places like this:

moduleMetaInstance.getData('variantKey'); // { title: 'second variant' }

And just on additional method, creating data without creating a variant that shows on preview:

moduleMetaInstance.addData('third', { title: 'hurray!' });

So it can be used:

moduleMetaInstance.getData('third'); // { title: 'hurray!' }

We try to work in a way that data sets for module are created using addData in the module where it belongs, and then in modules that would want to inject another module we import this data only:

const heroImage = require('../image/image.data.js').getData('hero');

Project has this setup since about 6 months, over 50 modules created, so far it’s pretty easy to use, we’re quite happy, downsides - since we try the data to be logic less it’s sometimes a lot of duplicates, we tried with additional helper methods, still have a bunch, code is cleaner but way less readable, you really need to know your tools to code and debug fast, there’s also larger learning curve, so in the end we voted for simplicity and just like two methods mostly :)

CLAassistant commented 5 years ago

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
2 out of 3 committers have signed the CLA.

:white_check_mark: orioltf
:white_check_mark: backflip
:x: Christian Sany


Christian Sany seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
You have signed the CLA already but the status is still pending? Let us recheck it.

marbor3 commented 2 years ago

Cleaning up my to review list and ... hmm, it's been a while since I've been here. Shall we merge? :p

backflip commented 2 years ago

@marbor3, I would close it. New projects should use de-facto standardized tooling like Storybook anyway and I don't think anyone should spend time updating data files in an existing project but rather migrate it to a new setup instead.

marbor3 commented 2 years ago

agreed