npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

includedfile

v0.0.41

Published

inline file inclusions (and uglification) for browser served files

Downloads

13

Readme

includedfile

Write your browser javascript in multiple files, have them merged into one file to send to the browser.

You can specify if you want the file included as is, with minification(via uglify-js), prettification(via js-beautify), and/or wrapped in comment wrapper showing inclusion source.

Additionally, code not being included, but in the main file can be compressed via uglify-js.minify().

This is a brief readme for now, I will update with more detail later.

(This is part of a larger project, not in npm yet)

Please note this is very much alpha code, and is needed to exist before I can publish the main project.

As such it may change at any point. in the mean time feel free to have a look.

Basic concept

Write your javascript in a modular fashion, and when you serve the files statically pass the html through a static file handler that merges the top level file into a virtual file, which is cached until one of the dependant files changes.

During development the files can be used as is, with the marker tags acting as closure wrappers.

Additionally, there is an inline compression feature that can be used for code that is in the main file

In production code, closures can be retained (for variable scoping reasons), or abandonded (to reduce code size and increase speed.)

This can be defined inline, for each file you are including.

Has a few added features like uglification, and closure scoping.

Demo Included

There's a simple demo, which is included and served when you start the package from the command line. (note only tested under OSX to date, but should be ok under windows)


mkdir new_folder
cd new_folder
mkdir test_folder
cd test_folder

npm install includedfile

cd node_modules/includedfile
node .

This will start a server that you can point your browser to which should serve /index.html (which includes demo.js as script tag in it's head.) use your dev tools to look at the source, and you can compare the contents to that stored under ./demo/js/demo.js

demo.js



var aNumber = 1234;

console.log("I am currently in the main file, which is called",(function(thisFilename){})());

(function(includedFile){

    console.log("This is test code, because",includedFile.includedFile,"was not loaded by the server");
    aNumber++;

    console.log("It's here so a developer can define some test settings that won't appear on the main site");

    console.log("loading direct in the browser off disk however, will allow this code to execute");

})({"includedFile":"./demo/js/included.js",
    "style":"ugly",
    "comment": true,
    "scope":{"somestuff":"for included.js have locally in scope"},
    "end":"includedFile"});
console.log("back in the main file",(function(includedFileLine){})());

included.js



console.log("I got",includedFile,"from",(function(includerFilename){})());

console.log("I am here in file:",(function(includedFileLine){})());

aNumber += 5000;

if (this.window) {

    this.window.document.head.title = "hello world";


    (function(includedFile){

// this comment won't be in the final served file.

    })({"includedFile":"./demo/js/included_child.js",
        "style":"pretty",
        "comment": true,
        "showpath": false,
        "scope":true,
        "end":"includedFile"});


}

included_child.js




console.log("hello world from ",(function(thisFilename){})());


(function(compressedSourceBegins){})();

console.log("Everything in this section will be uglifed.");

// code lifted from punycode.js for demo purposes (not included in the readme file for brevity)



(function(compressedSourceEnds){})();

final output (served live as /demo.js )


var aNumber = 1234;

console.log("I am currently in the main file, which is called","demo.js");
(function (includedFile){

/* included file /experimental/node_modules/includedfile/demo/js/included.js begins */

console.log("I got",includedFile,"from","demo.js"),console.log("I am here file:",function(){return{included:4}}()),aNumber+=5e3,this.window&&(this.window.document.head.title="hello world",function(){console.log("hello world from ","included_child.js"),console.log("Everything in this section will be uglifed."),function(root){function error(type){throw RangeError(errors[type])}function map(array,fn){for(var length=array.length;length--;)array[length]=fn(array[length]);return array}function mapDomain(string,fn){return map(string.split(regexSeparators),fn).join(".")}function ucs2decode(string){for(var value,extra,output=[],counter=0,length=string.length;length>counter;)value=string.charCodeAt(counter++),55296==(63488&value)&&length>counter?(extra=string.charCodeAt(counter++),56320==(64512&extra)?output.push(((1023&value)<<10)+(1023&extra)+65536):output.push(value,extra)):output.push(value);return output}function ucs2encode(array){return map(array,function(value){var output="";return value>65535&&(value-=65536,output+=stringFromCharCode(value>>>10&1023|55296),value=56320|1023&value),output+=stringFromCharCode(value)}).join("")}function basicToDigit(codePoint){return 10>codePoint-48?codePoint-22:26>codePoint-65?codePoint-65:26>codePoint-97?codePoint-97:base}function digitToBasic(digit,flag){return digit+22+75*(26>digit)-((0!=flag)<<5)}function adapt(delta,numPoints,firstTime){var k=0;for(delta=firstTime?floor(delta/damp):delta>>1,delta+=floor(delta/numPoints);delta>baseMinusTMin*tMax>>1;k+=base)delta=floor(delta/baseMinusTMin);return floor(k+(baseMinusTMin+1)*delta/(delta+skew))}function decode(input){var out,basic,j,index,oldi,w,k,digit,t,baseMinusT,output=[],inputLength=input.length,i=0,n=initialN,bias=initialBias;for(basic=input.lastIndexOf(delimiter),0>basic&&(basic=0),j=0;basic>j;++j)input.charCodeAt(j)>=128&&error("not-basic"),output.push(input.charCodeAt(j));for(index=basic>0?basic+1:0;inputLength>index;){for(oldi=i,w=1,k=base;index>=inputLength&&error("invalid-input"),digit=basicToDigit(input.charCodeAt(index++)),(digit>=base||digit>floor((maxInt-i)/w))&&error("overflow"),i+=digit*w,t=bias>=k?tMin:k>=bias+tMax?tMax:k-bias,!(t>digit);k+=base)baseMinusT=base-t,w>floor(maxInt/baseMinusT)&&error("overflow"),w*=baseMinusT;out=output.length+1,bias=adapt(i-oldi,out,0==oldi),floor(i/out)>maxInt-n&&error("overflow"),n+=floor(i/out),i%=out,output.splice(i++,0,n)}return ucs2encode(output)}function encode(input){var n,delta,handledCPCount,basicLength,bias,j,m,q,k,t,currentValue,inputLength,handledCPCountPlusOne,baseMinusT,qMinusT,output=[];for(input=ucs2decode(input),inputLength=input.length,n=initialN,delta=0,bias=initialBias,j=0;inputLength>j;++j)currentValue=input[j],128>currentValue&&output.push(stringFromCharCode(currentValue));for(handledCPCount=basicLength=output.length,basicLength&&output.push(delimiter);inputLength>handledCPCount;){for(m=maxInt,j=0;inputLength>j;++j)currentValue=input[j],currentValue>=n&&m>currentValue&&(m=currentValue);for(handledCPCountPlusOne=handledCPCount+1,m-n>floor((maxInt-delta)/handledCPCountPlusOne)&&error("overflow"),delta+=(m-n)*handledCPCountPlusOne,n=m,j=0;inputLength>j;++j)if(currentValue=input[j],n>currentValue&&++delta>maxInt&&error("overflow"),currentValue==n){for(q=delta,k=base;t=bias>=k?tMin:k>=bias+tMax?tMax:k-bias,!(t>q);k+=base)qMinusT=q-t,baseMinusT=base-t,output.push(stringFromCharCode(digitToBasic(t+qMinusT%baseMinusT,0))),q=floor(qMinusT/baseMinusT);output.push(stringFromCharCode(digitToBasic(q,0))),bias=adapt(delta,handledCPCountPlusOne,handledCPCount==basicLength),delta=0,++handledCPCount}++delta,++n}return output.join("")}function toUnicode(domain){return mapDomain(domain,function(string){return regexPunycode.test(string)?decode(string.slice(4).toLowerCase()):string})}function toASCII(domain){return mapDomain(domain,function(string){return regexNonASCII.test(string)?"xn--"+encode(string):string})}var punycode,key,freeDefine="function"==typeof define&&"object"==typeof define.amd&&define.amd&&define,freeExports="object"==typeof exports&&exports,freeModule="object"==typeof module&&module,maxInt=2147483647,base=36,tMin=1,tMax=26,skew=38,damp=700,initialBias=72,initialN=128,delimiter="-",regexPunycode=/^xn--/,regexNonASCII=/[^ -~]/,regexSeparators=/\x2E|\u3002|\uFF0E|\uFF61/g,errors={overflow:"Overflow: input needs wider integers to process","not-basic":"Illegal input >= 0x80 (not a basic code point)","invalid-input":"Invalid input"},baseMinusTMin=base-tMin,floor=Math.floor,stringFromCharCode=String.fromCharCode;if(punycode={version:"1.2.0",ucs2:{decode:ucs2decode,encode:ucs2encode},decode:decode,encode:encode,toASCII:toASCII,toUnicode:toUnicode},freeExports)if(freeModule&&freeModule.exports==freeExports)freeModule.exports=punycode;else for(key in punycode)punycode.hasOwnProperty(key)&&(freeExports[key]=punycode[key]);else freeDefine?define("punycode",punycode):root.punycode=punycode}(this)}({test:!0}));

/* included file /experimental/node_modules/includedfile/demo/js/included.js ends */

})({"settings":34});console.log("back in the main file",(function (){return {demo:20};})());