Packaging "components" for distribution

[Hasen el Judy]

Has anyone had experience extracting certain types of "widgets" they found themselves building over and over? I mean extracting a widget into a reusable component that can be maintained in its own project/repo and then included into new projects as needed.

I'm in the position where I feel like I need to extract some widgets I've made as reusable components, but I'm not exactly sure what's the best approach to packaging it.

The component is basically a set of js files, css files, and templates. By "templates" I mean html files which contain nothing but script tags (with type="text/html"). These partial templates would then be included in the main (server-side) template somehow. For me I use Python/Flask so the inclusion of these partial .html files is simple:

    {% include 'something.html' %}

Of course when I develop the widget within a larger project, each of the js, css, and html files are spread around. The templates is probably under project/templates, where as the js and css files are under project/static/{js,css}.

To package these files as a component, they all have to be in the same directory. This is not a problem for js and css files; if they go under project/static, they can be included easily in any page.

The problem is how to package the html files (which contain the knockout templates) in a reusable way.

If these html files are to be included directly by the server side template (as in my flask example above), they cannot be under the project/static directory.

If these html files were to be placed under the project/templates directory, this is kinda bad because the component is not self contained anymore; some parts of it will live under project/templates while other parts will live under project/static.

This is a problem because it makes updating and/or removing the component from the project kinda painful. Also, this kind of packaging would be very specific to Python/Flask; other server-side frameworks might have different opinions about where the static files go and where the template files go.

Any thoughts/suggestions?

Hasan

[Hasen el Judy]

I figured out a possible solution; not entirely sure of how robust it is.

Compile html files into javascript code that inserts the html code at the bottom of the body element, using `insertAdjacentHTML('beforeend', raw_html_string)`

I wrote a simple python script that does that. The usage pattern is roughly like this:

    cat component/templates/*.html | python template_compiler.py > component/build/tempaltes.js

The script reads the content via `stdin` and prints to `stdout`.

I'm using `json.dumps` to escape/quote the html text; it might be an overkill but I'm not sure if there's a simpler way to do it.

    import json

    def process_content(content):
        js_content = json.dumps(content)
        return "document.body.insertAdjacentHTML('beforeend', {0})".format(js_content)

    import sys

    def main():
        print process_content(sys.stdin.read())

    if __name__ == '__main__':
        main()

[Denys Khanzhiyev]

As for extracting models. parts of models se here

https://github.com/xdenser/knockout-component

As for packaging js +html+css in one file see example here:

https://github.com/xdenser/kc-tree-habr/blob/master/tree.js

2013/4/16 Hasen el Judy <hasan....@gmail.com>

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Hasen el Judy]

Hm, using comments inside functions is a very interesting approach! Very cool.