digitallyhappy / assets Goto Github PK

I think we can call the class LoadedAssets. That way it'd make sense to call:

LoadedAssets::add($asset_path) // instead of markAssetAsLoaded
LoadedAssets::has($asset_path) // instead of isAssetLoaded
LoadedAssets::get() // instead of getLoadedAssets

Then again, why not make LoadedAssets be an instance of Collection? More than that, a Collection of a new Asset object:

class Asset
{
    public $path;
    public $type; // style or script
    protected $id; // generated by constructor if not given

    public function __construct($path, $id = null) {
        $this->path = $path;
        $this->id = $path;
        // $this->type = 'automatically set depending on extension';
    }

    public function echo()
    {
         // spit it out a <?php ?> script, depending on if it's style or script
     }
}

Then we could do:

LoadedAssets::all();
LoadedAssets::where('path', $asset_path);
LoadedAssets::has($asset_path);
LoadedAssets::push($asset_path);

The benefit of having an Asset object is that we can then add more features to it. For example we could add:

public function isLocal() {}  // whether the path is local, HTTP or HTTPS
public function isExternal() {} // the opposite of the above
public function localize() {} // if the asset is from a CDN, put it on the local filesystem with a conventional public path, so that next time we can get it from there
public function getPath() {} // gets the path to the file... local if the asset is local, URL if the asset is from CDN; if both (the asset is from CDN but has been localized) it'll get the local path
public function addToLocalizingQueue() {} // if the asset is from CDN, this would add the URL to a queue, which once in a while will localize the CDN assets

Something like the above. Then we could have a simple @loadAsset() blade directive which:

• echoes <link> or <script> automatically depending on the file extension;
• if the localizing queue has been enabled, when @loadAsset('https://some/path/to/cdn/file.js') has been called, it will
  • check if the file exists at the standard localized path (public/assets/localized/some/path/to/cdn/file.js)
    • if so, it'll load that local asset;
    • otherwise, it'll load the asset from the CDN;

If loading something from a CDN, the dev might want to pass integrity and crossorigin. Or hell, maybe even something for lazy-loading. Currently we have no way of doing that. So after #6 I think we should add a second parameter, so that you can do:

@loadOnce('http://domain.com/some.js', [
    'integrity' => 'sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=',
    'crossorigin' => 'anonymous',
])

It's not pretty, but... it should be useful. The implementation isn't difficult at all, it's basically the same thing we do in the script widget in Backpack. And this parameter would be optional, so it'd be a non-breaking change.

Just writing it out so we don't forget about it.

This same package could/should also solve the problem of localizing CDN assets.

We could add:

• a config variable, so that the dev can choose his assets to be automatically localized (or not);
• when an item is first loaded, if that asset is from a CDN (we know that because it begins with http://, https:// or ://), we check if it doesn't also exist on the local file system (storage/app/public/assets/localized/);
  • if it's been localized, we use the local path instead;
  • if it has NOT been localized, we add that asset to a queue of files to be localized;
• when running the queue, if the file hasn't been localized in the meantime, each CDN file will be pulled from the CDN and put into storage/app/public/assets/localized/ so it can be used from there next time;

After that, the docs could also have a section with something like:

// FOR ASSETS FROM CDNs
@asset('https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js')
// will output <link href="{{ asset('https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js')"> the first time
// and it will add 'https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js' to a queue of files to be downloaded;
// after that queue has been run (you choose how often), the file has been "localized", which means it's
// also available in your /public/assets/localized/cdn.jsdelivr.net/npm/axios/dist/axios.min.js
// so this package will just load it from there instead, by outputting
// will output <link href="{{ asset('assets/localized/cdn.jsdelivr.net/npm/axios/dist/axios.min.js')">
//
// This has HUUUGE power, because now you can use CDN assets just like they were local. You do NOT have to
// provide them in your public directory, this package will do it for you.

We could add a config option, if the dev would also like us to tag add ?v=8a9hafha9h to the end of the echoed string, for cachebusting.

Pedro said - what if we only have:

// if there's a file extension... it's a file
// (alternatively, if it has dots or slashes... it's a path or URL)
@loadOnce('path/to/js.js')
@loadOnce('path/to/css.css')

// if it doesn't have an extension... it's a block
@loadOnce('unique_name_for_code_block')
    <script>
        <!-- Your JS here -->
    </script>

    <!-- OR -->

    <style>
        <!-- Your CSS here -->
    </style>
@endLoadOnce

This package can tell if it's a CSS or JS asset by the file extension. So then... why do we ask the developer to use two different directives, when they could remember just one? And if it's just one directive, how beautiful would it be to just use

@asset('path/to/file.css')
@asset('path/to/file.js')

PROs:

• beautiful
• simple
• readable

CONs:

• maybe too broad? Is it possible they're using a different package that has an @asset() directive?
• may be confusing... what does the @asset directive do and what does the asset() helper do? Pretty much the same thing, with the difference that
  • the @asset directive spits out the HTML to include that asset
  • the asset() helper spits out only the proper URL to that asset

If we ARE doing the above, the @loadOnce and @endLoadOnce directives might need to change too... maybe to @assetBlock and @endAssetBlock? Or maybe not... I guess @asset() and @loadOnce() will be clear enough.

Don't know. Thoughts?

We've decided to do this:

@basset('https://domain.com/operations/reorder.js') // if HTTPS, then internalize
@basset(base_path('resources/operations/reorder.js')) // if absolute path, then internalize
@basset(resource_path('operations/reorder.js')) // if absolute path, then internalize
@basset(public_path('operations/reorder.js')) // if public_path, then do not internalize
@basset('operations/reorder.js') // if simple string, assume it's a public path

And let's also do this:

@bassetBlock('unique_name_for_code_block.js')
    <!-- Your JS here -->
@bassetBlock

@bassetBlock('unique_name_for_code_block.css')
    <!-- Your CSS here -->
@endBassetBlock