Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Inserting a string from external file inside a generated js file brings an undesired newline #11

Closed
augusto-herrmann opened this Issue · 7 comments

3 participants

@augusto-herrmann

Description

We're trying to build a js file that has a string whose content comes from another external file (e.g. for inserting css styles dynamically into the DOM). The problem is, in Javascript, strings must be contained in a single line, and when assetgen imports the file, a newline gets added at the end.

How to reproduce

Take any file (in this example, assets/single-line.css) that has a single line (contains no newlines) in it. Use the following yaml configuration file to generate a new .js file (in this case, runtime-styles.js). For the record, we're using Linux (in case the newline stuff makes any difference).

# newline-bug.yaml:

generate:

- runtime-styles.js:
    source:
      - raw: "insert_css('"
      - assets/single-line.css
      - raw: "');" # closing function
    compress: false

js.uglify.bin: uglifyjs
output.directory: build
output.hashed: false

The generated runtime-styles.js file will have to lines. An unwanted newline will appear before the closing part (i.e. ");").

@tav
Owner

Are you sure that assets/single-line.css doesn't have a newline at the end of it? That's the only explanation I can see why there might be an unwanted newline in the generated file. Some text editors automatically put in a closing newline, e.g. with nano you have to explicitly call nano -L to stop it from inserting newlines.

@nitaibezerra
@tav
Owner

Hey Nitai,

As it is, it's left up to the developer to decide whether they want a newline or not by putting them in or leaving them out of the source files that they are including. I think that's the simplest approach and provides no surprises since it outputs exactly what is provided as input.

However, your use case suggested that there might be value in having a js.template config value. So I just implemented it using the Mako templating language. Once you've upgraded assetgen to the new 0.3.2 release, you can achieve what you want with:

generate:

- runtime-styles.js:
    source:
      - assets/single-line.css
    compress: false
    template: |
        insert_css(${source|trim,jsliteral});

js.uglify.bin: uglifyjs
output.directory: build
output.hashed: false

The trim filter strips the newlines for you and I also added a jsliteral filter to quote the source properly as a JavaScript string. I hope that satisfies your needs. Let me know what you think. Thanks.

@augusto-herrmann

Hi, Tav!

Thanks for implementing this so quickly! This solution works as desired.

However, it's unclear what the expected behavior should be when we have more than one source file. As experimented, it seems that the ${source} parameter inside the Mako template applies the content of the first source file. Example:

generate:

- composite.js:
    source:
      - assets/some-content.html
      - assets/behavior.coffee
      - raw: "})();"
    template: |
        (function(){var htmlContent = '${source|trim,jsliteral}';

This works, but it probably should be explicit, should you have more than one source file, don't you think so?

@tav
Owner

Ah, my bad, should have been clearer on the usage. It applies the template to every source file (i.e. not raw strings) which is not processed in any way, i.e. not CoffeeScript/TypeScript files. And, oh, it only works when source maps are disabled.

Hope that makes sense?

@tav tav closed this
@augusto-herrmann

Thanks! I've updated the example in the README so people can see and use this new feature. Even though at some point I think we should have a full blown documentation (e.g. on readthedocs.org, using Sphinx). I don't have experience with that yet, but this could be an excuse to learn. :)

@tav
Owner

Thanks again and, yeah, proper documentation would be very cool. If you are up for it, that would be fantastic!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.