Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[6.x][WIP] Bassets 🐶 #4815

Closed
wants to merge 19 commits into from
Closed

[6.x][WIP] Bassets 🐶 #4815

wants to merge 19 commits into from

Conversation

promatik
Copy link
Contributor

@promatik promatik commented Dec 5, 2022

Solves: Laravel-Backpack/community-forum#116 (using Option 7)
Status: WIP (80%)

TLDR: instead of using NPM to pull the CSS and JS assets we need, then publish them, then re-publish... we point directly to assets on a CDN; the first time they're needed, they are "internalized" (downloaded to the app's server) so that they're actually used from there; this solves bloat issues, GDPR issues, loading time issues, inconvenience issues;

In order to get it working you need to use the bassets branch on all repos. Here are their respective PRs:

TODO: In order to consider this DONE, we need to resolve all the inline comments we added here.

@promatik promatik changed the base branch from main to v6 December 5, 2022 02:00
@pxpm
Copy link
Contributor

pxpm commented Dec 12, 2022

Hey @promatik please have a look at Laravel-Backpack/basset#35 issue.

I think it's a valid use case and our assets should support it from start.
I am not saying that we should implement the full support for it now, just leave open in the assets that someday we would probably need to set nounce="xxx" in the assets links.

👍

@tabacitu tabacitu changed the title [6.x] Bassets [6.x] Bassets 🐶 Jan 3, 2023
Copy link
Member

@tabacitu tabacitu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is very VERY promising. Thanks a lot for doing the heavy lifting on this @promatik ! I don't want to brag too much about this (yet 😅), but... this is quite an big innovation we've done here! It's a freakin' game-changer. I expected it to work the way I imagined it but now that it does... 🤯 man, I'm excited 😅

Though... we do have quite a few things quirks to iron out.
So let's do it, let's see if we can turn this into a 100% solution!

src/resources/views/base/inc/head.blade.php Outdated Show resolved Hide resolved
src/config/backpack/base.php Outdated Show resolved Hide resolved
src/config/backpack/base.php Outdated Show resolved Hide resolved
src/resources/views/base/inc/head.blade.php Show resolved Hide resolved
src/resources/views/base/inc/head.blade.php Outdated Show resolved Hide resolved
webpack.mix.js Outdated Show resolved Hide resolved
package.json Outdated Show resolved Hide resolved
…bassets

# Conflicts:
#	mix-manifest.json
#	package-lock.json
#	package.json
#	src/public/packages/backpack/base/css/blue-bundle.css
#	src/public/packages/backpack/base/css/bundle.css
#	src/public/packages/ckeditor/CHANGES.md
#	src/public/packages/ckeditor/ckeditor.js
#	src/public/packages/ckeditor/lang/af.js
#	src/public/packages/ckeditor/lang/ar.js
#	src/public/packages/ckeditor/lang/az.js
#	src/public/packages/ckeditor/lang/bg.js
#	src/public/packages/ckeditor/lang/bn.js
#	src/public/packages/ckeditor/lang/bs.js
#	src/public/packages/ckeditor/lang/ca.js
#	src/public/packages/ckeditor/lang/cs.js
#	src/public/packages/ckeditor/lang/cy.js
#	src/public/packages/ckeditor/lang/da.js
#	src/public/packages/ckeditor/lang/de-ch.js
#	src/public/packages/ckeditor/lang/de.js
#	src/public/packages/ckeditor/lang/el.js
#	src/public/packages/ckeditor/lang/en-au.js
#	src/public/packages/ckeditor/lang/en-ca.js
#	src/public/packages/ckeditor/lang/en-gb.js
#	src/public/packages/ckeditor/lang/en.js
#	src/public/packages/ckeditor/lang/eo.js
#	src/public/packages/ckeditor/lang/es-mx.js
#	src/public/packages/ckeditor/lang/es.js
#	src/public/packages/ckeditor/lang/et.js
#	src/public/packages/ckeditor/lang/eu.js
#	src/public/packages/ckeditor/lang/fa.js
#	src/public/packages/ckeditor/lang/fi.js
#	src/public/packages/ckeditor/lang/fo.js
#	src/public/packages/ckeditor/lang/fr-ca.js
#	src/public/packages/ckeditor/lang/fr.js
#	src/public/packages/ckeditor/lang/gl.js
#	src/public/packages/ckeditor/lang/gu.js
#	src/public/packages/ckeditor/lang/he.js
#	src/public/packages/ckeditor/lang/hi.js
#	src/public/packages/ckeditor/lang/hr.js
#	src/public/packages/ckeditor/lang/hu.js
#	src/public/packages/ckeditor/lang/id.js
#	src/public/packages/ckeditor/lang/is.js
#	src/public/packages/ckeditor/lang/it.js
#	src/public/packages/ckeditor/lang/ja.js
#	src/public/packages/ckeditor/lang/ka.js
#	src/public/packages/ckeditor/lang/km.js
#	src/public/packages/ckeditor/lang/ko.js
#	src/public/packages/ckeditor/lang/ku.js
#	src/public/packages/ckeditor/lang/lt.js
#	src/public/packages/ckeditor/lang/lv.js
#	src/public/packages/ckeditor/lang/mk.js
#	src/public/packages/ckeditor/lang/mn.js
#	src/public/packages/ckeditor/lang/ms.js
#	src/public/packages/ckeditor/lang/nb.js
#	src/public/packages/ckeditor/lang/nl.js
#	src/public/packages/ckeditor/lang/no.js
#	src/public/packages/ckeditor/lang/oc.js
#	src/public/packages/ckeditor/lang/pl.js
#	src/public/packages/ckeditor/lang/pt-br.js
#	src/public/packages/ckeditor/lang/pt.js
#	src/public/packages/ckeditor/lang/ro.js
#	src/public/packages/ckeditor/lang/ru.js
#	src/public/packages/ckeditor/lang/si.js
#	src/public/packages/ckeditor/lang/sk.js
#	src/public/packages/ckeditor/lang/sl.js
#	src/public/packages/ckeditor/lang/sq.js
#	src/public/packages/ckeditor/lang/sr-latn.js
#	src/public/packages/ckeditor/lang/sr.js
#	src/public/packages/ckeditor/lang/sv.js
#	src/public/packages/ckeditor/lang/th.js
#	src/public/packages/ckeditor/lang/tr.js
#	src/public/packages/ckeditor/lang/tt.js
#	src/public/packages/ckeditor/lang/ug.js
#	src/public/packages/ckeditor/lang/uk.js
#	src/public/packages/ckeditor/lang/vi.js
#	src/public/packages/ckeditor/lang/zh-cn.js
#	src/public/packages/ckeditor/lang/zh.js
#	src/public/packages/ckeditor/plugins/a11yhelp/dialogs/lang/en-au.js
#	src/public/packages/ckeditor/plugins/a11yhelp/dialogs/lang/gl.js
#	src/public/packages/ckeditor/plugins/a11yhelp/dialogs/lang/it.js
#	src/public/packages/ckeditor/plugins/a11yhelp/dialogs/lang/sr-latn.js
#	src/public/packages/ckeditor/plugins/a11yhelp/dialogs/lang/sr.js
#	src/public/packages/ckeditor/plugins/autocomplete/plugin.js
#	src/public/packages/ckeditor/plugins/autolink/plugin.js
#	src/public/packages/ckeditor/plugins/emoji/plugin.js
#	src/public/packages/ckeditor/plugins/iframe/lang/pt-br.js
#	src/public/packages/ckeditor/plugins/image2/dialogs/image2.js
#	src/public/packages/ckeditor/plugins/image2/plugin.js
#	src/public/packages/ckeditor/plugins/link/dialogs/anchor.js
#	src/public/packages/ckeditor/plugins/mentions/plugin.js
#	src/public/packages/ckeditor/plugins/table/dialogs/table.js
#	src/public/packages/ckeditor/plugins/tableresize/plugin.js
#	src/public/packages/ckeditor/plugins/tabletools/dialogs/tableCell.js
#	src/public/packages/ckeditor/skins/kama/editor.css
#	src/public/packages/ckeditor/skins/kama/editor_ie.css
#	src/public/packages/ckeditor/skins/kama/editor_ie7.css
#	src/public/packages/ckeditor/skins/kama/editor_ie8.css
#	src/public/packages/ckeditor/skins/kama/editor_iequirks.css
#	src/public/packages/ckeditor/skins/moono-lisa/editor.css
#	src/public/packages/ckeditor/skins/moono-lisa/editor_gecko.css
#	src/public/packages/ckeditor/skins/moono-lisa/editor_ie.css
#	src/public/packages/ckeditor/skins/moono-lisa/editor_ie8.css
#	src/public/packages/ckeditor/skins/moono-lisa/editor_iequirks.css
#	src/public/packages/ckeditor/skins/moono/editor.css
#	src/public/packages/ckeditor/skins/moono/editor_gecko.css
#	src/public/packages/ckeditor/skins/moono/editor_ie.css
#	src/public/packages/ckeditor/skins/moono/editor_ie7.css
#	src/public/packages/ckeditor/skins/moono/editor_ie8.css
#	src/public/packages/ckeditor/skins/moono/editor_iequirks.css
#	src/public/packages/datatables.net-bs4/css/dataTables.bootstrap4.css
#	src/public/packages/datatables.net-bs4/css/dataTables.bootstrap4.min.css
#	src/public/packages/datatables.net-bs4/js/dataTables.bootstrap4.js
#	src/public/packages/datatables.net-bs4/js/dataTables.bootstrap4.min.js
#	src/public/packages/datatables.net/js/jquery.dataTables.js
#	src/public/packages/datatables.net/js/jquery.dataTables.min.js
#	src/public/packages/datatables.net/types/types.d.ts
#	src/public/packages/easymde/dist/easymde.min.css
#	src/public/packages/easymde/dist/easymde.min.js
#	src/public/packages/tinymce/CHANGELOG.md
#	src/public/packages/tinymce/plugins/advlist/plugin.js
#	src/public/packages/tinymce/plugins/advlist/plugin.min.js
#	src/public/packages/tinymce/plugins/anchor/plugin.js
#	src/public/packages/tinymce/plugins/anchor/plugin.min.js
#	src/public/packages/tinymce/plugins/autolink/plugin.js
#	src/public/packages/tinymce/plugins/autolink/plugin.min.js
#	src/public/packages/tinymce/plugins/autoresize/plugin.js
#	src/public/packages/tinymce/plugins/autoresize/plugin.min.js
#	src/public/packages/tinymce/plugins/autosave/plugin.js
#	src/public/packages/tinymce/plugins/autosave/plugin.min.js
#	src/public/packages/tinymce/plugins/bbcode/plugin.js
#	src/public/packages/tinymce/plugins/bbcode/plugin.min.js
#	src/public/packages/tinymce/plugins/charmap/plugin.js
#	src/public/packages/tinymce/plugins/charmap/plugin.min.js
#	src/public/packages/tinymce/plugins/code/plugin.js
#	src/public/packages/tinymce/plugins/code/plugin.min.js
#	src/public/packages/tinymce/plugins/codesample/plugin.js
#	src/public/packages/tinymce/plugins/codesample/plugin.min.js
#	src/public/packages/tinymce/plugins/colorpicker/plugin.js
#	src/public/packages/tinymce/plugins/colorpicker/plugin.min.js
#	src/public/packages/tinymce/plugins/contextmenu/plugin.js
#	src/public/packages/tinymce/plugins/contextmenu/plugin.min.js
#	src/public/packages/tinymce/plugins/directionality/plugin.js
#	src/public/packages/tinymce/plugins/directionality/plugin.min.js
#	src/public/packages/tinymce/plugins/emoticons/plugin.js
#	src/public/packages/tinymce/plugins/emoticons/plugin.min.js
#	src/public/packages/tinymce/plugins/fullpage/plugin.js
#	src/public/packages/tinymce/plugins/fullpage/plugin.min.js
#	src/public/packages/tinymce/plugins/fullscreen/plugin.js
#	src/public/packages/tinymce/plugins/fullscreen/plugin.min.js
#	src/public/packages/tinymce/plugins/help/plugin.js
#	src/public/packages/tinymce/plugins/help/plugin.min.js
#	src/public/packages/tinymce/plugins/hr/plugin.js
#	src/public/packages/tinymce/plugins/hr/plugin.min.js
#	src/public/packages/tinymce/plugins/image/plugin.js
#	src/public/packages/tinymce/plugins/image/plugin.min.js
#	src/public/packages/tinymce/plugins/imagetools/plugin.js
#	src/public/packages/tinymce/plugins/imagetools/plugin.min.js
#	src/public/packages/tinymce/plugins/importcss/plugin.js
#	src/public/packages/tinymce/plugins/importcss/plugin.min.js
#	src/public/packages/tinymce/plugins/insertdatetime/plugin.js
#	src/public/packages/tinymce/plugins/insertdatetime/plugin.min.js
#	src/public/packages/tinymce/plugins/legacyoutput/plugin.js
#	src/public/packages/tinymce/plugins/legacyoutput/plugin.min.js
#	src/public/packages/tinymce/plugins/link/plugin.js
#	src/public/packages/tinymce/plugins/link/plugin.min.js
#	src/public/packages/tinymce/plugins/lists/plugin.js
#	src/public/packages/tinymce/plugins/lists/plugin.min.js
#	src/public/packages/tinymce/plugins/media/plugin.js
#	src/public/packages/tinymce/plugins/media/plugin.min.js
#	src/public/packages/tinymce/plugins/nonbreaking/plugin.js
#	src/public/packages/tinymce/plugins/nonbreaking/plugin.min.js
#	src/public/packages/tinymce/plugins/noneditable/plugin.js
#	src/public/packages/tinymce/plugins/noneditable/plugin.min.js
#	src/public/packages/tinymce/plugins/pagebreak/plugin.js
#	src/public/packages/tinymce/plugins/pagebreak/plugin.min.js
#	src/public/packages/tinymce/plugins/paste/plugin.js
#	src/public/packages/tinymce/plugins/paste/plugin.min.js
#	src/public/packages/tinymce/plugins/preview/plugin.js
#	src/public/packages/tinymce/plugins/preview/plugin.min.js
#	src/public/packages/tinymce/plugins/print/plugin.js
#	src/public/packages/tinymce/plugins/print/plugin.min.js
#	src/public/packages/tinymce/plugins/quickbars/plugin.js
#	src/public/packages/tinymce/plugins/quickbars/plugin.min.js
#	src/public/packages/tinymce/plugins/save/plugin.js
#	src/public/packages/tinymce/plugins/save/plugin.min.js
#	src/public/packages/tinymce/plugins/searchreplace/plugin.js
#	src/public/packages/tinymce/plugins/searchreplace/plugin.min.js
#	src/public/packages/tinymce/plugins/spellchecker/plugin.js
#	src/public/packages/tinymce/plugins/spellchecker/plugin.min.js
#	src/public/packages/tinymce/plugins/tabfocus/plugin.js
#	src/public/packages/tinymce/plugins/tabfocus/plugin.min.js
#	src/public/packages/tinymce/plugins/table/plugin.js
#	src/public/packages/tinymce/plugins/table/plugin.min.js
#	src/public/packages/tinymce/plugins/template/plugin.js
#	src/public/packages/tinymce/plugins/template/plugin.min.js
#	src/public/packages/tinymce/plugins/textcolor/plugin.js
#	src/public/packages/tinymce/plugins/textcolor/plugin.min.js
#	src/public/packages/tinymce/plugins/textpattern/plugin.js
#	src/public/packages/tinymce/plugins/textpattern/plugin.min.js
#	src/public/packages/tinymce/plugins/toc/plugin.js
#	src/public/packages/tinymce/plugins/toc/plugin.min.js
#	src/public/packages/tinymce/plugins/visualblocks/plugin.js
#	src/public/packages/tinymce/plugins/visualblocks/plugin.min.js
#	src/public/packages/tinymce/plugins/visualchars/plugin.js
#	src/public/packages/tinymce/plugins/visualchars/plugin.min.js
#	src/public/packages/tinymce/plugins/wordcount/plugin.js
#	src/public/packages/tinymce/plugins/wordcount/plugin.min.js
#	src/public/packages/tinymce/themes/mobile/theme.js
#	src/public/packages/tinymce/themes/mobile/theme.min.js
#	src/public/packages/tinymce/themes/silver/theme.js
#	src/public/packages/tinymce/themes/silver/theme.min.js
#	src/public/packages/tinymce/tinymce.js
#	src/public/packages/tinymce/tinymce.min.js
#	src/resources/assets/scss/customs/_form.scss
#	src/resources/assets/scss/customs/_list.scss
#	webpack.mix.js
@tabacitu tabacitu changed the base branch from v6 to main-without-assets January 4, 2023 10:13
@tabacitu tabacitu mentioned this pull request Jan 4, 2023
9 tasks
@tabacitu tabacitu marked this pull request as ready for review January 4, 2023 10:50
@tabacitu tabacitu changed the title [6.x] Bassets 🐶 [6.x][WIP] Bassets 🐶 Jan 4, 2023
@tabacitu
Copy link
Member

tabacitu commented Jan 4, 2023

Update: I've continued this branch, it's now as clean as it can get (without provoking huge changes in diffs). We've now removed ALL of the JS and CSS, and are only loading it using Bassets.

This does spark a few problems though. But we can consider them minor / solvable. See the inline comments above. After those are solved, we can do another round of testing... re-merge and close this 💪

@tabacitu tabacitu changed the base branch from main-without-assets to v6 February 20, 2023 07:32
@tabacitu tabacitu changed the base branch from v6 to main-without-assets February 20, 2023 07:32
@tabacitu
Copy link
Member

Merged into the v6 branch. We're done here 🎉

#4860

@tabacitu tabacitu closed this Feb 20, 2023
@tabacitu
Copy link
Member

Keeping this PR just for the diff.

@tabacitu tabacitu deleted the bassets branch February 20, 2023 07:33
@scrutinizer-notifier
Copy link

The inspection completed: 89 new issues

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

4 participants