pthrasher / snockets Goto Github PK
View Code? Open in Web Editor NEWSprockets-style script concatenation for Node
snockets's People
Contributors
Stargazers
Watchers
Forkers
rlidwka airhorns freewil ksava djwglpuppy stefankutko kenperkins vjpr mizchi toots blax jfrux kamui maxbrunsfeld jameskyburz kevinrobinson coen-hyde truongsinh sh-ft skandel buunguyen filearts fresheyeball alappe asrail calvinwiebe maksjs pushrax ibawt robotony magec p3drosola nicholasrq saimonmoore sevifives cawmsnockets's Issues
client-side jade support (patch)
i'm monkey patching snockets to provide support for requiring client-side jade templates (to be used with jade.js):
snockets = require('connect-assets/node_modules/snockets/lib/snockets')
snockets.compilers.jade =
match: /.js$/
compileSync: (sourcePath, source) ->
"jade_" + path.basename(sourcePath, '.jade') + " = jade.compile(" + JSON.stringify(source) + ", {filename: " + JSON.stringify(sourcePath) + "});"
maybe you just want to support a few template engines like that out of the box, or at the very least support for .txt, so that you can just compile them yourself without having to write inline template code
non-sequitur:
also i found it annoying that package.json refers to main as "main": "lib/snockets.js" - that meant i had to cake after every modification. not much point to it when depending on coffee-script anyway
#= require ../script
I'm not pretty sure, but #= require ../script seems not to work.
compilers[x].match needed?
All the examples of the compilers hash include a match key, like here:
module.exports.compilers = compilers =
coffee:
match: /\.js$/
compileSync: ...But AFAICT that's never used. Is there a reason for it to be there?
Filename patterns
We've all been there: You update the jQuery lib in your project. Several modules depend on jQuery. But you want the file to retain its version number. So you have to do a project-wide find-and-replace from
require jquery-1.6.2
to
require jquery-1.6.3
Instead of doing that, I'd like to support wildcards, so that jquery-* scans for any file with a matching name.
CoffeeScript classes result in verbose compilation
Consider the following example:
Animal.coffee:
class AnimalCat.coffee:
#= require Animal
class Cat extends AnimalDog.coffee:
#= require Animal
class Dog extends Animalapp.coffee:
#= require Cat
#= require Dog
cat = new Cat()
dog = new Dog()The following is the output of compiling app.coffee:
(function() {
var Animal;
Animal = (function() {
function Animal() {}
return Animal;
})();
}).call(this);
(function() {
var Dog,
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
Dog = (function(_super) {
__extends(Dog, _super);
function Dog() {
return Dog.__super__.constructor.apply(this, arguments);
}
return Dog;
})(Animal);
}).call(this);
(function() {
var Cat,
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
Cat = (function(_super) {
__extends(Cat, _super);
function Cat() {
return Cat.__super__.constructor.apply(this, arguments);
}
return Cat;
})(Animal);
}).call(this);
(function() {
var cat, dog;
cat = new Cat();
dog = new Dog();
}).call(this);There are two issues with the way this is compiled:
- First,
Cat,Dog, andAnimalare out of scope of each other so inheritance doesn't work and they are defined outside the scope of the compiledapp.coffeeso they cannot be instantiated. - Second, CoffeeScript is littering the output of each compiled file with their own
__extendsand__hasPropfunctions. Even if each file is compiled individually with--barea minifier would not know that only one of these declarations is necessary (I have tested uglifyjs and closure, they both overwrite the extension functionality for each declared class).
My proposed solution is to concatenate CoffeeScript files in the proper order and then compile them. Following that process manually we end up with the following output:
(function () {
var Animal, Cat, Dog, cat, dog,
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
Animal = (function() {
function Animal() {}
return Animal;
})();
Cat = (function(_super) {
__extends(Cat, _super);
function Cat() {
return Cat.__super__.constructor.apply(this, arguments);
}
return Cat;
})(Animal);
Dog = (function(_super) {
__extends(Dog, _super);
function Dog() {
return Dog.__super__.constructor.apply(this, arguments);
}
return Dog;
})(Animal);
cat = new Cat();
dog = new Dog();
}).call(this);
Now we only have one declaration of __extends and __hasProp and everything is in proper scope. I would be happy to go ahead and code this up and send a pull request but I just wanted to see if you had any concerns first.
precompiler
i've been thinking of thing that would concat js files using config files. so that you can put several config files into dir & they all woultd be processed. usual files with #= require could be used as this config files.
i've made this:
fs = require 'fs'
path = require 'path'
flow = require 'flow'
Snockets = require 'snockets'
snockets = new Snockets()
module.exports = (params, callback) ->
if 'function' == typeof params
[params, callback] = [{}, params]
params.snockets ||= './snockets'
params.targets ||= './js'
params.sources ||= './source'
flow.exec(
-> fs.readdir params.snockets, @
(err, files) ->
for file in files
ext = path.extname file
continue unless ext in ['.js', '.coffee']
basename = path.basename file, ext
minify = '.min' == path.extname basename
cb_file = @MULTI()
snockets.getConcatenation file, minify: minify, (err, js) ->
return cb_file err if err
target = "#{params.targets}/#{basename}.js"
fs.writeFile js, target, cb_file
true
(results) ->
callback flow.anyError results
)it can be used like this
snockets_compiler = require 'my_module'
snockets_compiler (err) -> console.log 'finished!' #default opts
snockets_compiler
snockets: '/my/config/is/here'
sources: '/take/sources/here'
targets: '/put/results/there'
(err) -> console.log 'done'but i can't find how to set sources dir. Is it possible to make snockets to take required files not relatively to current file but to specific directory?
commandline usage
Would be good to use this from the commandline. I'm trying to bundle up files that don't necessarily belong to a node project, and a simple snockets command would be sweet
Use tilt.js?
I know that sprockets uses a dependency called tilt. There's a port of tilt to js: https://github.com/stdbrouw/tilt.js
I haven't looked at it at all, but just thought I'd throw it on the radar here and if anyone has/gets experience with it, they can note below.
separating requires by newline matters
I found that if you put a space between requires, such as
#= require foo
#= require bar
it is not the same as
#= require foo
#= require bar
This behavior is different from how Sprockets behaves. I'm not sure if this is intentional, but I didn't find a closed issue for it.
coffeescript closure pains
I've found that I have an issue with the way that coffeescript plays with asset pipeline libraries.
As an example, when dealing with a larger project, sometimes you'll want to split your js into multiple files then concat them at the end (exactly what snockets/sprockets is for), but when using coffeescript, there's hardly any use to concatenating your files since the extra closure on compile ensures that no code can be shared between the two files anyway. The only way around this issue is to attach shared functions to the window object, which is exactly what the extra closure is trying to prevent.
Ideally, I would want to have a single closure wrapper that I can put in myself inside an app.coffee file, for example, then inside that closure I could require all my other files which are split out for organization purposes, and have all the files compile bare (without the closure). This way, it's easy to organize code cleanly, export functions/variables from the different files, and all your code is still protected by an anonymous function closure. Ah, the dream.
So I set about seeing if I could make this happen. Initially I thought it would be easy to fork snockets and add an extra option on initialization (like bare: true) which would add the {bare: true} option into the coffeescript compile function. I did this, and it was just fantastic and only like 2 lines of code. But when I tested it, I found a rather strange result, illustrated below:
# main.coffee
->
#= require 'other'
console.log 'hello from the main file!'
# other.coffee
console.log 'hello from the other file!'
This is the coffeescript code I started out with, figuring that if things went magically well, I would end up with this result as the compiled js:
# main.js (imaginary)
(function(){
console.log('hello from the other file!')
console.log('hello from the main file!');
});
...however, what I actually ended up with was this:
# main.js
console.log('hello from the other file!')
(function(){
console.log('hello from the main file!');
});
Now, I can totally understand why this is happening, and I feel like fixing the way the concatentation through requires works might be a pretty large a fundamental change to the library, with other possible consequences I didn't think of, as I haven't had nearly as much experience building asset pipeline libraries as you have. But I just wanted to run it by you to see your thoughts. Would this be something worth me looking into submitting a pull request for? Would it be something maybe better suited to be built as it's own tiny coffeescript requires library? Did this explanation not even exactly make sense to you and I should try re-writing this since I suck at writing? Either way, let me know!
Cheers, and thanks for reading through this epically long and ridiculous issue! : )
EDIT: Just saw this #23, read it through, and that probably is a better solution than my forked version, but either way this doesn't really change my overall issue
(Old) uglfiy-js hangs forever
uglfiy-js (1.0.7) fails to process the following code (taken from jinjs):
function parse_BINARY_OPERATOR() {
var cacheKey = 'BINARY_OPERATOR@' + pos;
var cachedResult = cache[cacheKey];
if (cachedResult) {
pos = cachedResult.nextPos;
return cachedResult.result;
}
if (input.substr(pos, 3) === ">>>") {
var result28 = ">>>";
pos += 3;
} else {
var result28 = null;
if (reportMatchFailures) {
matchFailed("\">>>\"");
}
}
if (result28 !== null) {
var result0 = result28;
} else {
if (input.substr(pos, 3) === "===") {
var result27 = "===";
pos += 3;
} else {
var result27 = null;
if (reportMatchFailures) {
matchFailed("\"===\"");
}
}
if (result27 !== null) {
var result0 = result27;
} else {
if (input.substr(pos, 3) === "!==") {
var result26 = "!==";
pos += 3;
} else {
var result26 = null;
if (reportMatchFailures) {
matchFailed("\"!==\"");
}
}
if (result26 !== null) {
var result0 = result26;
} else {
if (input.substr(pos, 2) === "==") {
var result25 = "==";
pos += 2;
} else {
var result25 = null;
if (reportMatchFailures) {
matchFailed("\"==\"");
}
}
if (result25 !== null) {
var result0 = result25;
} else {
if (input.substr(pos, 2) === "!=") {
var result24 = "!=";
pos += 2;
} else {
var result24 = null;
if (reportMatchFailures) {
matchFailed("\"!=\"");
}
}
if (result24 !== null) {
var result0 = result24;
} else {
if (input.substr(pos, 2) === ">=") {
var result23 = ">=";
pos += 2;
} else {
var result23 = null;
if (reportMatchFailures) {
matchFailed("\">=\"");
}
}
if (result23 !== null) {
var result0 = result23;
} else {
if (input.substr(pos, 2) === "<=") {
var result22 = "<=";
pos += 2;
} else {
var result22 = null;
if (reportMatchFailures) {
matchFailed("\"<=\"");
}
}
if (result22 !== null) {
var result0 = result22;
} else {
if (input.substr(pos, 2) === "&&") {
var result21 = "&&";
pos += 2;
} else {
var result21 = null;
if (reportMatchFailures) {
matchFailed("\"&&\"");
}
}
if (result21 !== null) {
var result0 = result21;
} else {
if (input.substr(pos, 2) === "||") {
var result20 = "||";
pos += 2;
} else {
var result20 = null;
if (reportMatchFailures) {
matchFailed("\"||\"");
}
}
if (result20 !== null) {
var result0 = result20;
} else {
if (input.substr(pos, 2) === "<<") {
var result19 = "<<";
pos += 2;
} else {
var result19 = null;
if (reportMatchFailures) {
matchFailed("\"<<\"");
}
}
if (result19 !== null) {
var result0 = result19;
} else {
if (input.substr(pos, 2) === ">>") {
var result18 = ">>";
pos += 2;
} else {
var result18 = null;
if (reportMatchFailures) {
matchFailed("\">>\"");
}
}
if (result18 !== null) {
var result0 = result18;
} else {
if (input.substr(pos, 2) === "+=") {
var result17 = "+=";
pos += 2;
} else {
var result17 = null;
if (reportMatchFailures) {
matchFailed("\"+=\"");
}
}
if (result17 !== null) {
var result0 = result17;
} else {
if (input.substr(pos, 2) === "-=") {
var result16 = "-=";
pos += 2;
} else {
var result16 = null;
if (reportMatchFailures) {
matchFailed("\"-=\"");
}
}
if (result16 !== null) {
var result0 = result16;
} else {
if (input.substr(pos, 2) === "%=") {
var result15 = "%=";
pos += 2;
} else {
var result15 = null;
if (reportMatchFailures) {
matchFailed("\"%=\"");
}
}
if (result15 !== null) {
var result0 = result15;
} else {
if (input.substr(pos, 2) === "/=") {
var result14 = "/=";
pos += 2;
} else {
var result14 = null;
if (reportMatchFailures) {
matchFailed("\"/=\"");
}
}
if (result14 !== null) {
var result0 = result14;
} else {
if (input.substr(pos, 2) === "*=") {
var result13 = "*=";
pos += 2;
} else {
var result13 = null;
if (reportMatchFailures) {
matchFailed("\"*=\"");
}
}
if (result13 !== null) {
var result0 = result13;
} else {
if (input.substr(pos, 1) === "=") {
var result12 = "=";
pos += 1;
} else {
var result12 = null;
if (reportMatchFailures) {
matchFailed("\"=\"");
}
}
if (result12 !== null) {
var result0 = result12;
} else {
if (input.substr(pos, 1) === "|") {
var result11 = "|";
pos += 1;
} else {
var result11 = null;
if (reportMatchFailures) {
matchFailed("\"|\"");
}
}
if (result11 !== null) {
var result0 = result11;
} else {
if (input.substr(pos, 1) === "/") {
var result10 = "/";
pos += 1;
} else {
var result10 = null;
if (reportMatchFailures) {
matchFailed("\"/\"");
}
}
if (result10 !== null) {
var result0 = result10;
} else {
if (input.substr(pos, 1) === "^") {
var result9 = "^";
pos += 1;
} else {
var result9 = null;
if (reportMatchFailures) {
matchFailed("\"^\"");
}
}
if (result9 !== null) {
var result0 = result9;
} else {
if (input.substr(pos, 1) === "&") {
var result8 = "&";
pos += 1;
} else {
var result8 = null;
if (reportMatchFailures) {
matchFailed("\"&\"");
}
}
if (result8 !== null) {
var result0 = result8;
} else {
if (input.substr(pos, 1) === "|") {
var result7 = "|";
pos += 1;
} else {
var result7 = null;
if (reportMatchFailures) {
matchFailed("\"|\"");
}
}
if (result7 !== null) {
var result0 = result7;
} else {
if (input.substr(pos, 1) === "+") {
var result6 = "+";
pos += 1;
} else {
var result6 = null;
if (reportMatchFailures) {
matchFailed("\"+\"");
}
}
if (result6 !== null) {
var result0 = result6;
} else {
if (input.substr(pos, 1) === ">") {
var result5 = ">";
pos += 1;
} else {
var result5 = null;
if (reportMatchFailures) {
matchFailed("\">\"");
}
}
if (result5 !== null) {
var result0 = result5;
} else {
if (input.substr(pos, 1) === "<") {
var result4 = "<";
pos += 1;
} else {
var result4 = null;
if (reportMatchFailures) {
matchFailed("\"<\"");
}
}
if (result4 !== null) {
var result0 = result4;
} else {
if (input.substr(pos, 1) === "%") {
var result3 = "%";
pos += 1;
} else {
var result3 = null;
if (reportMatchFailures) {
matchFailed("\"%\"");
}
}
if (result3 !== null) {
var result0 = result3;
} else {
if (input.substr(pos, 1) === "-") {
var result2 = "-";
pos += 1;
} else {
var result2 = null;
if (reportMatchFailures) {
matchFailed("\"-\"");
}
}
if (result2 !== null) {
var result0 = result2;
} else {
if (input.substr(pos, 1) === "*") {
var result1 = "*";
pos += 1;
} else {
var result1 = null;
if (reportMatchFailures) {
matchFailed("\"*\"");
}
}
if (result1 !== null) {
var result0 = result1;
} else {
var result0 = null;
;
};
};
};
};
};
};
};
};
};
};
};
};
};
};
};
};
};
};
};
};
};
};
};
};
};
};
};
}
return result0;
}Remove node_modules from source control
Ability to use this in a regular web project? Such as a CLI "snocket watch" setup?
Any options for this? how tricky would it be to add it?
Possibly utilizing something like this:
https://github.com/jorritd/node-watch as a a folder watcher?
Minification should only happen if cache is invalidated
See https://github.com/TrevorBurnham/connect-assets/issues/15. The problem here is
if flags.minify then concatenation = minify concatenation
which is a big "whoops"—minification is expensive, and calling
snockets.getConcatenation 'foo.js'
ten times should only trigger minification once.
Ability to point to some additional subdirectories while resolving file paths
Sorry if I'm bothering you in vain and if such functionality already exists, but quick glance at code still had not dispelled my doubts on whether this issue relevants or not.
I'm requesting for something like env = Sprockets::Environment.new; env.append_path SOME_PATH. With such feature it would be possible to keep files common to different projects in some common folder, quite a common thing actually for any kind of dependency resolving tools.
allow ignoring files
It would be awesome to have a gitignore style ignore file to allow ignore emacs temp files/ vim temp files/etc
Redundant requires break the dependency chain
In snockets master, there are test fixtures x.coffee, y.js, and z.coffee. z depends on y and y depends on x.
If I add alphabet.coffee which looks like this:
#= require y.js
#= require z.coffeeI would expect the dependency chain to look like this:
chain = snockets.depGraph.getChain('alphabet.coffee')
test.deepEqual chain, ['x.coffee', 'y.js', 'z.coffee']alphabet requires y, which requires x, and then requires z, which requires y, which has already been required. So, x first as needed by y and z, then y because it's listed first in alphabet, and then z because it's listed second and all its dependencies have been required already.
However, the chain doesn't look like that, it looks like this:
AssertionError: [ 'y.js', 'x.coffee', 'z.coffee' ] deepEqual [ 'x.coffee', 'y.js', 'z.coffee' ]
Note the order is y, x, z instead of x, y, z, which might break the code in y since it relies on things in x but comes before it.
I pushed my failing test case to hornairs@4d330756f698d8211efc539cf4d2a8c36925dc4e.
getConcatenation doesn't throw an error when it should.
I've run into a case where getConcatenation should throw an error (because a required file doesn't exist), but no error is thrown. This seems to happen when a block of code precedes the require statement.
Pass assetName argument to compileSync method
So, instead of
compileSync: (sourcePath, source) ->We will have
compileSync: (sourcePath, source, assetName) ->This would be of particular use for adding compilers for template engines.
For example, I would be able to do this.
assets.jsCompilers.mustache =
namespace: "TEMPLATES"
match: /\.js$/
compileSync: (sourcePath, source, assetName) ->
compiled = hogan.compile(source, asString: true)
"(function() { window.#{@namespace} = window.#{@namespace} || {}; window.#{@namespace}['#{assetName}'] = #{compiled}; })();"Make it easier to add template compilers
If you are able to add support for issue #11, then we can also have a method for adding template compilers.
module.exports.compilers = compilers =
template: (name, compiler, namespace = "TEMPLATES") ->
match: /\.js$/
namespace: namespace
compileSync: (sourcePath, source, assetName) ->
"(function() { window.#{@namespace} = window.#{@namespace} || {}; window.#{@namespace}['#{assetName}'] = #{compiler(source, assetName, sourcePath)}; })();"
coffee:
match: /\.js$/
compileSync: (sourcePath, source, assetName) ->
CoffeeScript.compile source, {filename: sourcePath}Then we would be able to add new template compilers like so.
snockets.compilers.template 'mustache', (source) -> Hogan.compile(source, asString: true)or
connectAssets.jsCompilers.template 'mustache', (source) -> Hogan.compile(source, asString: true)Windows support for require and cake
Require statements for files in subfolders do not work on Windows. This is because the file is requested as folder/file.js, but cached as folder\file.js. Since it is supported to access files using forward slash instead of backslash as directory separator, I suggest just replacing all backslashes with forward slashes.
Also, on Windows the Cakefile tasks needs to spawn "coffee" and "docco" with a .cmd suffix for them to run.
question
sorry it is not clear ...
can i convert coffescript to js with this library?
bare: true options
would be nice if I could bare care
require by index file
Some similar pre-compile solution, such as Sprocket and Stylus, support to require a folder by its index file.
├── app.coffee
├── lib
└── index.coffee
└── foo.coffee
└── bar.coffee
in app.coffee:
#= require lib
and in index.coffee:
#= require foo
#= require bar
How about supporting it in Snockets?
Upgrade Dependencies
undercore:1.4.3 - things look good
coffee-script:1.4.0 - 4 tests fail after updating
uglify-js:2.2.3 - 2 test fail after updating
update all - 6 tests fail (so at least they're independent)
new minify api looks like...
minify = (js) ->
result = uglify_js.minify js, {fromString: true}
result.code
Stitch support
It may be nice to add stitch support somewhere, so we can "plug" node's module inside our normal client-side javascript in a really easy way.
npm version out of date
The git version of this repo allows turning variable mangling to false, the npm version does not. However the version numbers are the same.
Support for require_self
Hi,
It would be really nice for snockets to support the require_self directive:
https://github.com/sstephenson/sprockets#the-require_self-directive
Asynchronous compilation
Hey guys,
Just wondering: why is Snockets only able to work with synchronous compilation steps? (Snockets.compilers.coffee.compileSync) Is this a design decision made early-on?
It seems like it's possible to adapt Snockets to use async compilers (like Stylus and Less).
Add eco support
It would be great if snockets would support including eco templates.
'require' parsing is broken
(Copy/pasted from closed connect-assets issue #20).
While I can't seem to produce a stand-alone test case, I have found in my application that:
#= require dep1 dep2 dep3
works (generates correct dependency tags and order in generated output), whereas:
#= require dep1
#= require dep2
#= require dep3
does not. I will keep trying to find a small test case that exhibits this problem.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.