Code Monkey home page Code Monkey logo

htmlizer's People

Contributors

munawwar avatar papandreou avatar rolandliwag avatar sarathsaleem avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar

Forkers

papandreou sarathsaleem mwoc rab1

htmlizer's Issues

Update tests

There are two things that I'd like to update:

  1. Sizzle now supports selectors in documentfragment.
    So get rid of helper functions and use Sizzle instead.
  2. Move away from assert and use expected or unexpected.

<script> contents are being escaped

Test case:

  var template = new Htmlizer('<script type="text/html" id="shopping-cart">\
      <div>The shopping cart</div>\
  </script>');

  template.toString();

Expected output:

  <script type="text/html" id="shopping-cart">
      <div>The shopping cart</div>
  </script>

Actual output:

  <script type="text/html" id="shopping-cart">
      &lt;div&gt;The shopping cart&lt;/div&gt;
  </script>

data-i18n in development

Htmlizer templates can be used with assetgraph-builder via the data-i18n attribute and this works fine when the template is run through buildProduction. But I'd like to be able to use the templates during development as well. Any ideas?

DOCTYPE lost when the template is a complete document 

$ node -p -e 'new (require("htmlizer"))("<!DOCTYPE html>\n<html><head></head><body></body></html>").toString()'

<html><head></head><body></body></html>

Expected output:

<!DOCTYPE html>
<html><head></head><body></body></html>

Update jsdom in htmlizer 0.x

We're using htmlizer 0.8.0 in a project we wish to update to node v6, without updating to htmlizer v2 in the same iteration. This breaks due to jsdom's interface supposedly breaking when recompiling on nodejs v6:

___/htmlizer/node_modules/jsdom/lib/jsdom/level1/core.js:553
Array.prototype.splice.call(this._childNodes, refChildIndex, 0, newChild);
^

TypeError: Cannot set property length of [object Object] which has only a getter
at DocumentFragment.core.Node.insertBefore (/htmlizer/node_modules/jsdom/lib/jsdom/level1/core.js:553:30)
at DocumentFragment. (/htmlizer/node_modules/jsdom/lib/jsdom/level2/events.js:332:20)
at DocumentFragment.proto.(anonymous function) as insertBefore
at DocumentFragment.core.Node.appendChild (_/htmlizer/node_modules/jsdom/lib/jsdom/level1/core.js:671:17)
at ___/htmlizer/src/jquery.js:3:2360
at __/htmlizer/src/jquery.js:3:2615
at b.object.module.object.module.exports.module.exports (/htmlizer/src/jquery.js:2:201)
at window (_/htmlizer/src/Htmlizer.js:15:32)
at Object. (_/htmlizer/src/Htmlizer.js:24:2)

I tested with small increments to the jsdom version, and found that updating from 0.10.3 to 1.5.0 seems enough. For now, we've made a fork at https://github.com/mwoc/htmlizer/tree/v0 with this update, which probably is ok - but if others might need htmlizer v0.x to work on nodejs v6, then maybe an official patch might be worthwhile.

Prefix for containerless bindings

I would like this mostly to get it working with assetgraph-builder which strips html comments out except for certain conditions. And Andreas is willing to make an exception if we agree upon an easily recognizable prefix.

Quotes in attribute values not entitified 

$ node -p -e 'new (require("htmlizer"))("<div data-bind=\"attr: {foo: bar}\"></div>").toString({bar: "\""})'
<div foo="""></div>

Expected output:

<div foo="&quot;"></div>

or:

<div foo="&#34;"></div>

Template expression not rendering, if its name is a variable

The following code expected to render, template person-template like knockout templating, but its gives an error.

var html = `<!-- ko template: { name: tpl, data: buyer } --><!-- /ko -->'
    <!-- ko template: { name: tpl, foreach: [buyer] } --><!-- /ko -->`;

var cfg = {
    templates: {
        "person-template": `<h3 data-bind="text: name"></h3>
            <p>Credits: <span data-bind="text: credits"></span></p>`
    }
};

var outputHtml = (new Htmlizer(html, cfg)).toString({
        tpl: "person-template",
        buyer: {
            name: 'Franklin',
            credits: 250
        }
    });

Preserve unrecognized data binding

Use case: To use htmlizer on server-side to do a render, but preserve any event binding for client-side so that it can be used with knockoutjs.

However, the use case I only anticipated is that the same template would be used on client and server side, and so currently data-bind attribute is completely stripped off by htmlizer.

Note: There could be a second use case, where user needs to do a partial render with htmlizer. To solve that, we'll need a separate attribute like data-htmlizer or something.

Containerless foreach changes HTML nodes

Here's a reproducible bit of code:

<ul>
    <!-- foreach: products -->
        <li><a data-bind="text: name"></a></li>
    <!-- /foreach -->
</ul>

The output from this is:

<ul>
    <li></li><a>Name 1</a>
    <li></li><a>Name 2</a>
</ul>

Containerless if with not-condition ends render

Here's an example:

<div>
<!-- if: !value -->
blah blah
<!-- /if -->

<p>This is after</p>
</div>

If you try to render that with value set to a non-falsy value, This is after will not be rendered.

TODO List

  • Properly support all the binding contexts. <- Done
  • support following bindings:
    • ifnot <- Done
    • with <- Done
    • template

Optional bindings:

  • visible, enable, disable, value. <- Done
  • options

Add an option to persist data-bind attributes

I would like a feature that allows a data-bind to be applied, but also persisted.

It has some drawbacks- in particular regarding inlined templates - but it is something that will enable us to easily bootstrap parts of a knockout application server side to help non-js users and crawlers.

add support for nodejs 4.0

Currently we cannot build htmlizer under nodejs 4.0 as the jsdom dependency is too old.

I'm not sure if there's a version of jsdom that works across all node.js versions.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.