odesza
Advanced tools
Comparing version 0.2.3 to 0.2.4
| { | ||
| "name": "odesza", | ||
| "version": "0.2.3", | ||
| "version": "0.2.4", | ||
| "description": "Write clean, expressive templates with just HTML and inline JavaScript", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
| # Odesza | ||
| Odesza allows you to write clean, expressive templates with inline JavaScript. It offers the flexibility of multiple inheritance and inline programming logic with the simplicity of writing plain HTML and JS. | ||
| Odesza allows you to write clean, expressive templates with inline JavaScript. | ||
@@ -8,8 +8,19 @@ - multiple inheritance (extends, includes, blocks) | ||
| - support for Express | ||
| - no magic or new language to learn | ||
| ## Variables & Expressions | ||
| Variables are passed in when Odesza templates are rendered. Scope is maintained through includes and extends. You can also treat `${}` as a function statement. | ||
| ### Inspiration | ||
| I find learning templating languages to be more of a hassle than just writing the HTML. Hence, there is no magic or shorthand code in Odesza templates. Odesza simply provides a structure for you to write complex templating systems without having to learn a new language. Simply put, it offers the flexibility of multiple inheritance and inline programming logic with the familiarity of writing plain HTML and JS. | ||
| code | ||
| ### Variables & Expressions | ||
| Variables are passed in when Odesza templates are rendered. Scope is maintained through includes and extends. You can also treat `${}` as a function statement. | ||
| **hello.ode** | ||
| ```javascript | ||
| <title>${title}</title> | ||
| <p> | ||
| Welcome, ${names.map(n => `<i>${n}</i>`).join(', ')}! | ||
| </p> | ||
| ``` | ||
| **code** | ||
| ```javascript | ||
| var vars = { | ||
@@ -20,12 +31,5 @@ title: 'hello world', | ||
| odesza.compile('hello', vars); | ||
| odesza.compile('hello.ode', vars); | ||
| ``` | ||
| hello.ode | ||
| ```javascript | ||
| <title>${title}</title> | ||
| <p> | ||
| Welcome, ${names.map(n => `<i>${n}</i>`).join(', ')}! | ||
| </p> | ||
| ``` | ||
| output | ||
| **output** | ||
| ```html | ||
@@ -38,15 +42,7 @@ <title>hello world</title> | ||
| ## Inline JavaScript | ||
| ### Inline JavaScript | ||
| Odesza makes it easy to write inline JavaScript in your templates. Under the hood, templates are evaluated as ES6 template strings, which means you have access to `${}` expressions. If you need more flexibility with inline js, you can create a self-executing function expression with code inside it like this: `${(() => { ... })()}`. | ||
| code | ||
| **greetings.ode** | ||
| ```javascript | ||
| var vars = { | ||
| names: ['wells', 'joe', 'dom'] | ||
| }; | ||
| odesza.compile('greetings.ode', vars); | ||
| ``` | ||
| greetings.ode | ||
| ```javascript | ||
| <h2>welcome ${names.join(', ')}!</h2> | ||
@@ -70,3 +66,11 @@ | ||
| ``` | ||
| output | ||
| **code** | ||
| ```javascript | ||
| var vars = { | ||
| names: ['wells', 'joe', 'dom'] | ||
| }; | ||
| odesza.compile('greetings.ode', vars); | ||
| ``` | ||
| **output** | ||
| ```html | ||
@@ -79,10 +83,10 @@ <h2>welcome wells, joe, dom!</h2> | ||
| ## Partials | ||
| ### Partials | ||
| Odesza makes it easy to nest templates within each other. You can include templates as many levels deep as you like. Variables maintain scope in included files. | ||
| greeting.ode | ||
| **greeting.ode** | ||
| ```javascript | ||
| hello! | ||
| ``` | ||
| welcome.ode | ||
| **welcome.ode** | ||
| ```javascript | ||
@@ -93,3 +97,3 @@ include greeting | ||
| ``` | ||
| question.ode | ||
| **question.ode** | ||
| ```javascript | ||
@@ -100,3 +104,3 @@ include welcome | ||
| ``` | ||
| code | ||
| **code** | ||
| ```javascript | ||
@@ -107,5 +111,5 @@ var vars = { | ||
| odesza.compile('question', vars); | ||
| odesza.compile('question,ode', vars); | ||
| ``` | ||
| output | ||
| **output** | ||
| ``` | ||
@@ -118,6 +122,6 @@ hello! | ||
| ## Inheritance | ||
| # Inheritance | ||
| Odesza gives you access to multiple inheritance through extending templates and block scopes. | ||
| layout.ode | ||
| **layout.ode** | ||
| ```jade | ||
@@ -136,3 +140,3 @@ <!doctype html> | ||
| ``` | ||
| page.ode (extends layout.ode) | ||
| **page.ode** (extends layout.ode) | ||
| ```html | ||
@@ -151,3 +155,3 @@ extends layout | ||
| ``` | ||
| extended_page.ode (extends page.ode, overwrites 'content' block) | ||
| **extended_page.ode** (extends page.ode, overwrites 'content' block) | ||
| ```html | ||
@@ -162,3 +166,3 @@ extends page | ||
| ``` | ||
| code | ||
| **code** | ||
| ```javascript | ||
@@ -172,3 +176,3 @@ var vars = { | ||
| ``` | ||
| output | ||
| **output** | ||
| ```html | ||
@@ -190,4 +194,4 @@ <!doctype html> | ||
| ## Express Support | ||
| index.js | ||
| ### Express Support | ||
| **index.js** | ||
| ```javascript | ||
@@ -197,3 +201,3 @@ app.set('view engine', 'ode'); | ||
| ``` | ||
| controller | ||
| **controller** | ||
| ```javascript | ||
@@ -205,3 +209,3 @@ res.render('template', { | ||
| ## Command Line | ||
| ### Command Line | ||
| You can compile odesza templates from the command line to `stdout` or an output file. | ||
@@ -212,3 +216,3 @@ ``` | ||
| ## Install | ||
| ### Install | ||
| ``` | ||
@@ -218,3 +222,3 @@ npm install odesza --save | ||
| ## License | ||
| ### License | ||
| MIT |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by2.74%
16113
- Number of lines in readme file
- increased by1.97%
207
No dependency changes