Skip to content

0.0.1 0.0.2

Jump to bottom
Ivan S Glazunov edited this page Jan 22, 2015 · 1 revision

OSWS Templates

version: 0.0.1-0.0.2 beta

How?

Install

npm install osws-templates

Include

Commonjs

You can use this paths on server:

  • module osws-templates
  • osws-templates with node_modules/osws-templates/templates.d.ts
TypeScript
/// <reference path="node_modules/osws-templates/templates.d.ts" />
import Templates = require('osws-templates');
JavaScript
var Templates = require('osws-templates');

Requirejs

You can use this paths on client:

  • file node_modules/osws-templates/templates.js
  • node_modules/osws-templates/templates.js with node_modules/osws-templates/templates.d.ts
JavaScript
define('osws-templates', function(Templates) {});

Example

Simple

with(Templates.tags) {
	div('.my-super-class.container')(
		a('[href=http://google.com/]')(
			img({src: 'http://google.com/images/logo.png'})
		)
	).render(function(error, result) {
		console.log(result);
		// <div class="my-super-class container"><a href="http://google.com/"><img src="http://google.com/images/logo.png"/></a></div>
	});
}

Extend

with(Templates.tags) {
	var buka = div('.my-super-class#buka')().extend(function(parent) {
		this.constructor = function() {
			parent.constructor.apply(this, arguments);
	
			// arguments[0] == this.arguments // '.info'
	
			this.content(
				a('[href=http://google.com/]')(
					img({src: 'http://google.com/images/logo.png'})
				)
			);
		};
	});
	
	var template = buka('.info')();
	
	template.render(function(error, result) {
		console.log(result);
		// <div id="buka" class="my-super-class info"><a href="http://google.com/"><img src="http://google.com/images/logo.png"/></a></div>
	});
}

Inherit

with(Templates.tags) {
	var buka = div('.my-super-class#buka')(
		a('[href=http://google.com/]')(
			img({src: 'http://google.com/images/logo.png'})
		)
	).inherit();

	var template = buka('.info')();

	template.render(function(error, result) {
		console.log(result);
		// <div id="buka" class="my-super-class info"><a href="http://google.com/"><img src="http://google.com/images/logo.png"/></a></div>
	});
}

Doctypes

Templates.doctypes.html().render(console.log); // <!DOCTYPE html>

What?

Content

|
|   // Is not intended for final use! Only for core.
|   // This is the first and the last object that is created manually with `new`
|   // All of its expansion can be called without `new`
+-- Prototype: new () => instance: Prototype
    |   |
    |   +-- parent: Prototype
    |   +-- extend(injector: (parent: Prototype).call(instance: Prototype) => void) => instance: Prototype
    |   |
    |   | // `injector` is not equal to `constructor`. `constructor` inherited, `injector` no.
    |   | // The `constructor` and other class options are overridden in the `injector`.
    |   +-- returner: ().call(instance: Prototype) => any
    |   | // For internal use only.
    |   | // // Can be overridden!
    |   |
    |   | // Inherited option causes each extension?
    |   +-- constructor: ().call(instance: Prototype) => any
    |   | // For internal use only.
    |   | // Can be overridden!
    |   |
    |   | // Personal for each element Renderer.Queue
    |   +-- queue: Renderer.Queue
    |   | // Can be overridden!
    |   | // Override in `constructor`.
    |
    |   | // Nice Renderer.Queue .renderAsync wrapper.
    |   +-- render: (callback: IAsyncCallback) => void
    |   | // Can be overridden!
    |   | // Override in `constructor`.
    |
    | // Control flow of renderer queues
    +-- Flow: [new] () => instance: Prototype
    |   |   |
    |   |   | // Flow contents
    |   |   +-- contents: Renderer.Queue[]
    |   |   |
    |   |   | // Add contents flow to element queue
    |   |   +-- generator: () => void
    |   |   | // Override in `constructor`.
    |   |   | // Can be overridden!
    |   |   |
    |   |   | // Add content into tag before exists content
    |   |   +-- before: (...arguments: Array<selector:string|Prototype|Renderer.Queue|ISyncCallback|IAsyncCallback>) => instance:  rototype
    |   |   | // Override in `constructor`.
    |   |   | // Can be overridden!
    |   |   |
    |   |   | // Add content into tag after exists content
    |   |   +-- content: (...arguments: Array<selector:string|Prototype|Renderer.Queue|ISyncCallback|IAsyncCallback>) => instance:  rototype
    |   |   | // Override in `constructor`.
    |   |   | // Can be overridden!
    |   |   |
    |   |   | // Equal to content
    |   |   +-- after: (...arguments: Array<selector:string|Prototype|Renderer.Queue|ISyncCallback|IAsyncCallback>) => instance:  rototype
    |   |   | // Override in `constructor`.
    |   |   | // Can be overridden!
    |   |   |
    |   |   | // extend the one-time inheritance
    |   |   +-- inherit: () => constructor: Prototype
    |   |   | // Override in `constructor`.
    |   |   | // Can be overridden!
    |   |
    |   +-- content: [new] (...arguments: Array<selector:string|Prototype|Renderer.Queue|ISyncCallback|IAsyncCallback>) => instance:  rototype
    |
    |   // Tools for generatin double or single structures.
    |   // Not ready for manual use! Only inheritance.
    +-- Tag: [new] ([selector: string], [attributes: [name: string]: string]) => instance: Prototype
        |   |
        |   +-- parseSelectors: ([selector: string]) => void
        |   | // name priority: parent.name > instance.name > selector
        |   | // id priority: attributes > parent.attributes.id > instance.attributes.id > selector
        |   | // class prioryty: instance.attributes.class + parent.attributes.class + selector
        |   | // attributes priority: attributes > parent.attributes
        |   |
        |   +-- parseAttributes: ([attributes: [name: string]: string]) => void
        |   | // attributes priority: attributes > parent.attributes
        |   |
        |   | // Generate single/first double open tag quote
        |   +-- _singleOpen: () => string
        |   | // Override in `constructor`.
        |   | // Can be overridden!
        |   |
        |   | // Generate second double open tag quote
        |   +-- _doubleOpen: () => string
        |   | // Override in `constructor`.
        |   | // Can be overridden!
        |   |
        |   | // Generate close single tag quote
        |   +-- _singleClose: () => string
        |   | // Override in `constructor`.
        |   | // Can be overridden!
        |   |
        |   | // Generate close double tag quote
        |   +-- _doubleClose: () => string
        |   | // Override in `constructor`.
        |   | // Can be overridden!
        |   |
        |   | // Generate tag attributes
        |   +-- _attr: () => string
        |   | // Override in `constructor`.
        |   | // Can be overridden!
        |
        |   // Tool for single tags generating.
        +-- Single: [new] ([selector: string], [attributes: [name: string]: string]) => instance: Prototype
        |       |
        |       | // Generate single tag structore from `_singleClose` `name` and `_close` options
        |       +-- generator: () => void
        |       | // Override in `constructor`.
        |       | // Can be overridden!
        |       |
        |       | // Clear double tag variables inheritance.
        |       |
        |       +-- before = undefined
        |       +-- content = undefined
        |       +-- after = undefined
        |
        +-- single: [name: string]: Single;
        |   // tags: `br` `hr` `img` `input` `base` `frame` `link` `meta`
        |
        |   // Tool for double tags generating.
        +-- Double: [new] ([selector: string], [attributes: [name: string]: string]) => instance.content
        |       |
        |       | // Double tag returns content method when creates
        |       +-- returner: () => instance.content
        |       // Override in `constructor`.
        |       // Can be overridden!
        |
        +-- double: [name: string]: Double;
        |   // tags: `html` `body` `h1` `h2` `h3` `h4` `h5` `h6` `hgroup` `div` `p` `address` `blockquote` `pre` `ul` `ol` `li` `dl` `dt` `dd` `fieldset` `legend` `form` `noscript` `object` `table` `thead` `tbody` `tfoot` `tr` `td` `th` `col` `colgroup` `caption` `span` `b` `big` `strong` `i` `var` `cite` `em` `q` `del` `s` `strike` `tt` `code` `kbd` `samp` `small` `sub` `sup` `dfn` `bdo` `abbr` `acronym` `a` `button` `textarea` `select` `option` `article` `aside` `figcaption` `figure` `footer` `header` `section` `main` `nav` `menu` `audio` `video` `embed` `canvas` `output` `details` `summary` `mark` `meter` `progress` `template` `comment`
        |
        +-- tags: [name: string]: Single|Double;
        |
        |   // Tool for doctypes generating.
        +-- Doctype: [new] ([selector: string], [attributes: [name: string]: string]) => instance: Prototype
        |
        +-- doctypes: [name: string]: Doctype;
            // doctypes: `html` `xml` `transitional` `strict` `frameset` `basic` `mobile`

Latest Stable Release

Versions

0.3.0

Types

API

Node.js:

var T = require('oswst');

Require.js:

define(['oswst'], function(T) {});

window:

var T = window.oswst(_, async);
Clone this wiki locally