jjn1056 / Template-Pure

Logic-less, markup driven HTML templates inspired by pure.js
2 stars 2 forks source link

Template::Pure::Component #6

Closed jjn1056 closed 8 years ago

jjn1056 commented 8 years ago

I think we can start to sketch out what a component could be like. This would be a new allowed object type as an action target

<? pure-component from='Timestamp' as 'pure-timestamp' />
<? pure-component from='AjaxForms' as 'pure-ajaxform' />
<html>
  <head>...</head>
  <body>
    <pure-timestamp tz="USA/CGI" sformat="YYYY" />
    <pure-ajaxform>
    </pure-ajaxform>
  </body>
</html>

We could start be defining a package Template::Pure::Component that works like the current system for when an action target is a Template::Pure object, just instead we'd parse something like

<template>
  <script>...</script>
  <style>...</style>
 ...stuff
</template>

and we'd automatically want to pull out the script and style tags and add them to the head area as expected. A component should own its own data, and receive any dom its wrapping (and should be able to modify it.

Maybe the best way to to approach this is to skip the markup side and find do this exclusively on the directive side

directives => [
  'form#login' => Template::Pure::Component::AjaxForm->new(%args),
...
];

and then

package Template::Pure::Component::AjaxForm;

use base 'Template::Pure::Component';

my $template  = qq[
  <template>
  <head>...</head>
  <body>
    <form></form>
  </body>
 </template>
];

my @directives = (
  'form@target' => 'self.target',
...
);

sub render {
  my ($self, $pure, $dom, $data) = @_;
}

Perhaps the script and css bit should be separate variables?

jjn1056 commented 8 years ago

got a good start on this I think