Template as entry point for UI components

[patrick-steele-idem]

NOTE: This issue was moved over from the marko-widgets repo. For more discussion please see the earlier Github issue: marko-js-archive/marko-widgets#167

Current setup:

src/components/my-component/

index.js

module.exports = require('marko-widgets').defineComponent({
    template: require('./template.marko'),
    getTemplateData: function(state) { ... },
    ...
});

template.marko

<div w-bind>
    ...
</div>

Proposed solution

The above setup is not bad, but there is some boilerplate that we would like to remove by making the following changes:

• Rename: index.js → component.js
• Rename: template.marko → index.marko (the template becomes the entry point)
• Remove: require('marko-widgets').defineComponent(...)
• Remove: template: require('./template.marko')

Marko Widgets will detect that the template is the entry point and compile the template differently such that it no longer exports a Template instance, but rather it will be a module that exports two methods:

• render(input) - Allows the UI component be rendered via a JavaScript API (e.g., require('my-component').render({ name: 'Frank' }).appendTo(document.body);)
• renderer(input, out) - Used by the custom tag renderer

The previous setup would now be simplified as shown below:

src/components/my-component/

component.js

module.exports = {
    getTemplateData: function(state) { ... },
    ...
};

index.marko

<div w-bind>
    ...
</div>

Additional thoughts

Future improvements

By making the template the entry point, we can do a lot more things that were not previously possible. This is because we have full control over how a Marko template is compiled while we don't have control how the user writes the JavaScript code.

Single file component

We could easily support inlining the JavaScript code for the component into the template as shown below:

<div w-bind>
    ...
</div>

<script marko-component>
var Component = {
    getTemplateData: function(state) { ... },
    ...
};
</script>

No references to marko-widgets

With the new setup, there are no references to the marko-widgets module when building a UI component. This is a good thing since it makes it easier to merge Marko Widgets functionality into the core marko package (future proposal).

Backwards compatibility

We intend to maintain backwards compatibility. Developers could start to use the new, simplified setup, but old code would continue to work.

Related proposals

• Marko Widgets Issue #167 - Proposal: Template as entry point for UI components
• Marko Widgets Issue #152 - Proposal: Marko Widgets with ES6 and inline Marko templates