[WIP] Basset v2 Changes Shortlist

[tabacitu]

TODO:

• A. 🔴 Remove the need for symlink by saving the files in the public folder (public/bassets), GIT IGNORED:
  • PROS:
  • Easier to install: No need to create a symlink.
  • Easier to develop: You run php artisan basset:cache on install, then have the assets (no more DEV_MODE);
  • CONS: none
• B. 🔴🟡 File map/manifesto to easily track file versions across multiple files
• C. 🟡 In airgapped servers, we have no support for files with variables (eg. multiple languages: select2/en/select2.js, select2/pt/select2.js) - basically add support for @basset('http://example.com/select2.'.$lang.'.js', ['lang' => ['en', 'ro', 'pt', 'it']])
• D. 🟡⁉️ Deprecate zips, load the files directly from http://raw.github.com/someone/somerepo/tag/1.2.3/asset.js
• E. 🔴 eliminate DEV_MODE - the different behaviour in local/staging/production is causing more trouble than it's worth

--

ALSO TO DO:

• F. 🔴 Remember assets in git (do NOT gitignore public/bassets):
  • PROS:
  • Faster deployments: No need to run php artisan basset:cache on deploy;
  • Safer deployments: If CDN is down during deployment, no problem;
  • Easier to install: No need to create a symlink.
  • Easier to develop: You run php artisan basset:cache on install, then have the assets (no more DEV_MODE);
  • CONS:
  • Big git repo size: All the CSS and JS assets will be commited to repo, whether you use them or not; ✅
  • Dirty commits: Every time you run php artisan basset:refresh on local, you override the changed CSS and JS files => dirty diffs; ⚠️
  • Dirty repo in staging/prod: If an asset has NOT been internalized in local, it will be internalized in staging/prod and dirty that repo; possibly preventing the next deployment; ⚠️

DON'T DO:

• G. ⚫ Do not "cache" @bassetBlocks, they are already on the page, no need to put them on a file to get an additional file

--

LET'S NOT TALK ABOUT IT:

• 🟡 Create a way to don't push not used assets (eg: if you don't use select2, don't push it).
• 🔵 no easy way to update assets used (no php artisan basset:update)
• 🔵 no easy way to get notified when an asset has security issues
• 🔵 checksums (aka. integrity checks)

Examples:

@basset('http://example.com/select2.js')

{
  "select2.js" : "http://example.com/select2.js"
}

@basset('select2.js')

[tabacitu]

How everything would work - notes from conversation with @pxpm :

<?php

/** IN PRO COMPOSER PACKAGE */

// Step 1. Use the key in your blade file:
@basset('bp-datepicker-js')
@basset('bp-select2-js-'.$lang)
@basset('bp-bootstrap-js')
@basset('bp-slider-js', true, ['lazy' => true])
@basset('https://cdn.com/easymde.js')

// Step 2A. In ProServiceProvider:
Basset::map("bp-datepicker-js", "http://example.com/datepicker.js");
foreach ($languages as $lang) {
    Basset::map('bp-select2-js-'.$lang, "https://cdn.com/$lang/select2.js");
}

/** IN MAIN PROJECT (LARAVEL APP) */
/** TO OVERRIDE A KEY */

// Step 1. In a custom class Bassets specifies, do:
Basset::map("bp-datepicker-js", "http://example.com/datepicker.1.1.js");
foreach ($languages as $lang) {
    Basset::map('bp-select2-js-'.$lang, "https://cdn.com/$lang/select2.1.js");
}
Basset::map("bp-bootstrap-js", "http://bootstrap.com/smth.js", [
    'integrity' => "80eh1iud01hiefe10eij10fks10f",
])
Basset::map("bp-slider-js", "http://slider.com/script.js")
Basset::map("https://cdn.com/easymde.js", "https://npmjs.com/easymde/easymde.js")

// Step 2. Optionally, run:
php artisan basset:cache

---

# Behind the scenes:
# .basset.cache:
"bp-datepicker-js" => "Web/user/public/example.com/datepicker.1.1.js"
"bp-select2-en-js" => "Web/user/public/cdn.com/en/select.2.1.js"
"bp-select2-ro-js" => "Web/user/public/cdn.com/ro/select.2.1.js"
"bp-select2-fr-js" => "Web/user/public/cdn.com/fr/select.2.1.js"
"bp-select2-pt-js" => "Web/user/public/cdn.com/pt/select.2.1.js"
"bp-bootstrap-js" => "Web/user/public/bootstrap.com/smth.js"
"bp-slider-js" => "Web/user/public/slider.com/script.js"
"bp-slider-js" => "Web/user/public/slider.com/script.js"
"https://cdn.com/easymde.js" => "Web/user/public/npmjs.com/easymde/easymde.js"