search

cmawhorter / fancy

1 stars 2 forks source link

Globals are only global within template #9

Open cmawhorter opened 8 years ago

cmawhorter commented 8 years ago

The globals.json file can contain static information that is available globally from within the template only.

This is a bit confusing. The file/feature should be renamed or globals should be available truly everywhere -- including content.

Shipping fancy with a built-in component for reading globals would work and also serve as an example for how to write your own.

cmawhorter commented 8 years ago

FWIW here's a component that does the job:

globals.json

{ 
  "some_product": { 
    "title": "hello" 
  }
}

components/global/index.js

'use strict';

var _globals = require('../../data/globals.json');

module.exports = function($el, callback) {
  var val = null;
  var key = ($el.text() || '').toString().trim();
  try {
    eval('val = _globals.' + key + ';');
  }
  catch (err) {
    console.log('global component error', err);
  }
  var html = $el.text(val || '').html();
  $el.replaceWith(html);
  callback(null);
};

data/content/some_page.html => <body>

<h1><fancy-global>some_product.title</fancy-global></h1>

... rendered as ...

<h1>hello</h1>
cmawhorter commented 8 years ago

That feels a bit clunky and breaks down for html content meta properties.

For example, this won't work:

<head>
<title><fancy-global>some_product.title</fancy-global></title>
</head>

And all other content types (js, json, yml, etc.) don't work either.

Maybe content data should have a pre-processing step that string replaces for globals? string_replace('{{some_product.title}}', globals.some_product.title);

cmawhorter commented 8 years ago

another usecase vote for pre-processing: components sometimes need the ability to access global data e.g. pricing. there is no way to do <fancy-some-component>[globals.price.tier1]. Pre-processing would fix that too.

Or maybe post-processing? Last step before render is a processing step? Then you could pass {{something}} into a component as well as a component could write out {{something}}, which could be useful for component reusability.