lasso-js / lasso Goto Github PK

Candidate modules to use:

• https://www.npmjs.org/package/spritesmith

The marko-taglib.json references the components dir. You add your tag to your page and in addition to that you have to link every single component optimizer.json in the page optimizer.json

Is there a way to avoid this duplicate linking? The tag itself and the link in the optimizer.json?

For example add an attribute to the tag similar to w-bind instead of the optimizer.json link?

Thanks
-Vivian

Will include inline script:

    { "path": "./lib/script.js", "slot": "body", "inline": false }
    { "path": "./lib/script.js", "slot": "body", "inline": true }

Will include script as a resource:

    { "path": "./lib/script.js", "slot": "body" }

Example:

{
    "dependencies": [
        {
            "if-flag": "foo",
            "dependencies": [
                "./foo.js",
                "./foo.css"
            ]
        }
    ]
}

I get the following when I try to install on OSX:

npm install optimizer
npm WARN package.json [email protected] No repository field.
npm ERR! Darwin 13.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "install" "optimizer"
npm ERR! node v0.10.28
npm ERR! npm v2.0.2
npm ERR! code ETARGET

npm ERR! notarget No compatible version found: raptor-listeners@'>=1.0.0 <2.0.0'
npm ERR! notarget Valid install targets:
npm ERR! notarget ["0.2.0-beta","0.2.1-beta","0.2.2-beta","1.0.0-beta","1.0.1-beta"]
npm ERR! notarget
npm ERR! notarget This is most likely not a problem with npm itself.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

Looks like raptor-listeners needs to come out of beta, or optimizer needs to relax the requirements.

I did a proof-of-concept with babel and I was able to enable ES6 support with some minor changes to optimizer-require. My proof-of-concept sends all required JavaScript code through the babel transpiler and then the output is parsed again with esprima to find the require() expressions and to do simple transformations. It's possible that we can avoid this re-parsing by utilizing the babel Plugin API which is currently be discussed as a feature enhancement. See babel/babel#987

Sending all JavaScript code through the babel transpiler adds some overhead but the optimizer caching layer will ensure that subsequent builds are significantly faster.

The default module dialect created by babel is CommonJS which works well with optimizer. There's some additional testing before I can make this change official.

Both of the following should be supported:

// The following will only work in client-side code
require('./test.css');

// The following will work on both the server and the client
require.resolve('./test.css');

"flags" is a more logical name. "extensions" needs to be deprecated, but it should continue to work.

Perhaps something like this:

require('optimizer').addAppModulePath(dir)

This should cause "commonjs-search-path" dependencies to automatically be added to builds when require dependencies are found.

There are still some implementation details to work out, but this is generally the idea.

Currently, the RaptorJS Optimizer requires that the user register separate middleware to serve up the dynamically generated static files. These generated files typically get placed in a directory named "static" so with Express the user must do the following:

Install the serve-static middleware:

npm install serve-static --save

Enable the serve-static middleware:

var serveStatic = require('serve-static');
app.use('/static', serveStatic(__dirname + '/static', config.serveStatic));

This could be simplified, if the optimizer came bundled with middleware to serve up the static files using the output directory that the optimizer was configured to use. For example:

app.use('/static', require('optimizer/middleware').serveStatic());

Pros:

• One less module to install and configure
• User can choose to use the bundled middleware or not
• Caching headers can be set based on how the optimizer was configured. For example, "cache forever" if fingerprints are enabled, or use etags if not.

Cons:

• New dependency on "serve-static"

Example usage:

Input:

<link rel="shortcut icon" optimizer-href="./favicon.ico">
<img optimizer-src="./image.png">

Output:

<link rel="shortcut icon" href="/static/favicon-a46d0c.ico">
<img src="/static/image-abc123.png">

Currently, the following is supported to accomplish the same thing, but it requires more code:

Input:

<optimizer-resource path="./favicon.ico" var="favicon"/>
<optimizer-resource path="./image.png" var="someImage"/>

<link rel="shortcut icon" href="${favicon.url}">
<img src="${someImage.url}">

Output:

<link rel="shortcut icon" href="/static/favicon-a46d0c.ico">
<img src="/static/image-abc123.png">

See #34 for further discussion.

Someone should create a plugin to integrate the autoprefixer module.

@patrick-steele-idem

https://github.com/raptorjs/optimizer/blob/master/lib/reader.js#L173 is passing only 2 params while https://github.com/raptorjs/optimizer/blob/master/lib/reader.js#L10 expects 3 params. Looks like you are missing transformer param.

CURRENTLY, $rloaderMeta is generated as:
$rloaderMeta={...}

PROPOSED:
$rloaderMeta=extend($rloaderMeta, {...})

Given the following code:

require('./foo.css');

If Node.js executes the above line then it will throw an error because it will try to load the ./foo.css as a JavaScript module when it really just CSS code. The reason for including require('./foo.css') in the JavaScript code is allow the ./foo.css dependency to be discovered via static code analysis by the Lasso.js tool and automatically bundled with all of the other require CSS code. On the server (and in the browser) the actual require should be a no-op.

Quite often, my node app crashes due to the following error from the optimizer:

uncaughtException Async fragment failed (optimizer-slot:head). Exception: Error: Error while writing bundle "index (body, js)" Error: Error: Reading dependency timed out after 5000ms: [js: path="/app/src/static/js/jquery.min.js"]

Optimizer version: 1.8.2

I also use the minification modules, "optimizer-minify-js": "^1.1.2" and "optimizer-minify-css": "^1.1.2"

Please advice.

Karthik

Currently, there is no easy way for a static resource (such as a favicon) to go through the optimizer and for the resulting URL to be injected into the final HTML output.

For example:

<link rel="shortcut icon" href="/common/favicon.ico">

Ideally, we would like to see output similar to the following:

<link rel="shortcut icon" href="/static/favicon-a46d0c.ico">

Proposals:

Option 1:

<link rel="shortcut icon" optimizer-href="/common/favicon.ico">

Option 2:

<optimizer-resource path="/common/favicon.ico" var="favicon"/>
<link rel="shortcut icon" href="${favicon.url}">

Initial discussion: https://groups.google.com/forum/#!msg/raptorjs/B8l86j90ROY/6YsDPaNuSdcJ

require('optimizer').configure({
    fileSets: {
        'images': {
            includes: ['**/*.{png|jpg|gif}']
        }
    },
    plugins: [
        {
            plugin: 'optimizer-reverse-image',
            config: {
                fileSet: 'images'
            }
        }
    ]
});

A plugin would need to be "fileset aware". A plugin implementation should be able to get access to a file set using the following code:

var fileSetFilter = pageOptimizer.getFileSetFilter('images');
pageOptimizer.addTransform({ filter: fileSetFilter, ... });

Support dependencies in the following forms:

• "require: *.js"
• "*.less"
• "*/.less"
• "*.sass"

Glob searches will be relative to the location of where they are declared. For example, if they are declared in a optimizer.json then we will resolve the glob search relative to directory where optimizer.json is located.

This code is being used to "sanitize" the bundle name:

var pageBundleName = pageName.replace(/^[^A-Za-z0-9_\-\.]*/g, '');

This is effectively removing "special characters" at the start of the page name when forming the bundle name. However, there is no reason to sanitize the bundle name. The mangling of the bundle name prevents predictable lookup of information from the LassoPageResult after the lassoPage operation completes.

PSEUDO CODE:

• If path starts with ".", resolve as relative path
• Otherwise:
  • Try using requireResolvePath
  • If requireResolvePath fails then try resolve as relative path
  • If still not resolved, then throw error

Add support for something like this:
{'type': 'js', 'path': 'b', 'if-not-extension': 'a'}

This is already supported:
{'type': 'js', 'path': 'a', 'if-extension': 'a'},

Currently, the renderer for the <optimizer-page> tag defaults to the basename of the current template's directory. This causes the same cache key to be used if two pages have the same parent directory name. Instead, the full template path should be used as the cache key. The "pageName" should continue to be based on the name of the parent directory to give output bundles a good name.

Why would you use registerRequireType instead of registerRequireExtension?

I think the difference is that registerRequireType will wrap the required dependency with CommonJS module definition but I could be wrong about this. The use case should be clarified so that writing plugins is easier.

With wildcards allowed like:

".//.js",

It would be help to have an exclude filter.

Minimatch uses starting with an ! as the negate/exclude filter. https://github.com/isaacs/minimatch

Minimatch is used by tons of projects: https://www.npmjs.com/browse/depended/minimatch

A notion of filters make it a easier for register transforms that should only be applied to certain paths.

A filter should be a function that takes a path argument and a callback(err, keep) argument. If callback is invoked with keep set to true then the filter will be applied to the path. Otherwise, the filter will not be applied to the resource with the given path.

Example:

pageOptimizer.addTransform({
    filter: function(path, callback) { ... },
    name: module.id,
    stream: true,
    transform: function(inStream, contentType, optimizerContext) {
        ...
    }
});

As a separate feature, there should be away to define file sets (that act as filters) that can be provided to plugins.

Details TBD

The output file for "raptor-modules-meta.js" name should always include the page name or a fingerprint when bundling is disabled. Otherwise, it will be overwritten for each page. Including a fingerprint is probably safer.

OPTION 1:

Create new <optimizer-image-info> tag to read image metadata:

<optimizer-image-info src="someFilePath" var="imageInfo" />
<img src="imageInfo.url" width="imageInfo.width" height="imageInfo.height" /> 

OPTION 2:

Extend existing <optimizer-resource> tag to conditionally read image information:

<optimizer-resource path="someFilePath" image-type="png" var="imageInfo"/>
<img src="imageInfo.url" width="imageInfo.width" height="imageInfo.height" /> 

NOTE: Presence of image-type attribute would trigger reading of image metadata (width and height at a minimum)

This tag should leverage:
https://github.com/raptorjs/optimizer-image

optimizer.json:

{
    "requireRemap": [
        {
            "from": "./foo.js",
            "to": "./foo-mobile.js",
            "if-extension": "mobile"
        }
    ]
}

An "intersection" dependency type is already supported which is useful for creating optimized bundles. For example, to find all common dependencies between the three given widgets:

dependencies: [
    {
        intersection: [
            'require: ./a/widget',
            'require: ./b/widget',
            'require: ./c/widget',
        ]
    }
]

We should also support a less strict intersection condition that can be expressed as a threshold.

For example, to find select those dependencies that are among at least two of the widgets:

dependencies: [
    {
        threshold: 2,
        intersection: [
            'require: ./a/widget',
            'require: ./b/widget',
            'require: ./c/widget',
        ]
    }
]

This could also be expressed as a percentage:

dependencies: [
    {
        threshold: '66%',
        intersection: [
            'require: ./a/widget',
            'require: ./b/widget',
            'require: ./c/widget',
        ]
    }
]

Some tools/applications might want to fetch information about a specific bundle after the lassoPage operation completes (I ran into this use case).

For this reason, the LassoPageResult object should be extended so that this information can be easily retrieved:

• Output file for bundle by name
• URL for bundle name

Proposed solution:

Introduce a new "intersection" dependency type that would return a new package that contains an array dependencies that are common across an input array of package dependencies.

"bundles": [
    {
        "name": "common",
        "dependencies": [
            {
                "intersection": [
                    "./src/pages/home/optimizer.json",
                    "./src/pages/help/optimizer.json",
                    "./src/pages/store/optimizer.json"
                ]
            }
        ]
    }
]

Optimizer when invoked from global command it tries to access global cache.

rscheibinger@rscheibinger-Precision-T5600:~/code/hackweek/example-project/app$ optimizer less/app.less --main scripts/main.js --inject index.html 
Config:
{
    "outputDir": "/home/rscheibinger/code/hackweek/example-project/app/static",
    "urlPrefix": "%STATIC_PATH%"
}

Optimizing page "index"...

/usr/lib/node_modules/optimizer-cli/node_modules/mkdirp/index.js:89
                    throw err0;
                          ^
Error: EACCES, permission denied '/usr/lib/.cache'
    at Object.fs.mkdirSync (fs.js:653:18)
    at sync (/usr/lib/node_modules/optimizer-cli/node_modules/mkdirp/index.js:70:13)
    at sync (/usr/lib/node_modules/optimizer-cli/node_modules/mkdirp/index.js:76:24)
    at sync (/usr/lib/node_modules/optimizer-cli/node_modules/mkdirp/index.js:76:24)
    at sync (/usr/lib/node_modules/optimizer-cli/node_modules/mkdirp/index.js:76:24)
    at Function.sync (/usr/lib/node_modules/optimizer-cli/node_modules/mkdirp/index.js:76:24)
    at Object.DiskStore (/usr/lib/node_modules/optimizer-cli/node_modules/optimizer/node_modules/raptor-cache/lib/DiskStore.js:509:12)
    at Object.raptorCache.createCache (/usr/lib/node_modules/optimizer-cli/node_modules/optimizer/node_modules/raptor-cache/lib/raptor-cache.js:17:25)
    at CacheManager.getCache (/usr/lib/node_modules/optimizer-cli/node_modules/optimizer/node_modules/raptor-cache/lib/CacheManager.js:68:53)
    at Object.OptimizerCache.getCache (/usr/lib/node_modules/optimizer-cli/node_modules/optimizer/lib/OptimizerCache.js:110:34)

In addition to this when this case happens optimizer does not fill out head and body slots.
To reproduce add missing optimizer dependency or require-run and run optimizer in the full application page flow and observe that js/css resources completely missing in the page source.

Two proposals:

1. Add raptor-loader as a dependency for raptor-optimizer and automatically add "require: raptor-loader" dependency if async package encountered
2. Merge raptor-loader into raptor-optimer (not much value in keeping them separate in my opinion)

Lets say you have a client-side JS code, if you try to load this module using the optimizer.
if will not respect the if statement and will blindly download all the resources.

we are having a lot of usecases that we don't want to share the server code with the client.

        if (typeof window === 'undefined') {

            var Joi = require('joi');
            var schema = Joi.object().keys({
                imgAttrs: Joi.object().optional(),
                figureAttrs: Joi.object().optional(),
                anchorAttrs: Joi.object().optional()
            }).optional();

            Joi.validate(viewConfig, schema, function (err, value) { 
                if(err){
                    throw new Error(err);
                }
            }); 

        }