Skip to content

[4.0][RFC] Elephant can manage assets also. The WebAssetRegistry class to manage assets and it`s dependacies #22435

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.

Sign up for GitHub

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

Merged
wilsonge merged 37 commits into from
Oct 14, 2018
Merged

[4.0][RFC] Elephant can manage assets also. The WebAssetRegistry class to manage assets and it`s dependacies #22435

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
b96359c
WebAssetFactory/Item
Fedik Sep 24, 2018
2f4b9af
Add asset item to a registry while runing of a vendor update
Fedik Sep 24, 2018
2fb4520
Sync. Merge branch '4.0-dev' into asset4
Fedik Sep 25, 2018
b16aaf2
Update settings.json, add "provideAssets" propertie
Fedik Sep 25, 2018
f63ecf9
WebAssetFactory dependacies calculation
Fedik Sep 25, 2018
742e1ca
Attach Assets to Document
Fedik Sep 25, 2018
dc7f629
Support of attribute per Asset file
Fedik Sep 26, 2018
db4e281
A factory to registry
Fedik Sep 26, 2018
92cb5c5
Add example of registry data file
Fedik Sep 26, 2018
b188004
resolvePath method
Fedik Sep 26, 2018
0560da5
WebAsset ServiceProvider
Fedik Sep 26, 2018
4e5fb00
Explicitly add Registry File, instead of blind search.
Fedik Sep 27, 2018
b3d30a8
WebAsset improve attach() process
Fedik Sep 27, 2018
ebd0ef8
Update settings
Fedik Sep 27, 2018
2602592
WebAsset more assets
Fedik Sep 27, 2018
67ed549
'bootstrap.framework' to use WebAsset
Fedik Sep 27, 2018
c99e017
WebAsset use full path
Fedik Sep 29, 2018
1d8201a
WebAsset remove legacy/joomla.asset.json
Fedik Sep 29, 2018
afe0482
WebAsset some renaming
Fedik Sep 29, 2018
53e18ea
WebAsset template.atum joomla.asset.json
Fedik Sep 29, 2018
ae01b9d
WebAsset: attach Assets to a document
Fedik Sep 29, 2018
6354dc8
WebAsset template.cassiopeia asset
Fedik Sep 29, 2018
d05d9e7
WebAsset small reordering
Fedik Sep 29, 2018
8681e75
WebAsset HtmlBehavior use assets
Fedik Sep 30, 2018
7438e0a
WebAsset set up Dispatcher
Fedik Sep 30, 2018
fa7edb6
WebAsset correct a 'subject'
Fedik Sep 30, 2018
4e223d5
WebAsset -rtl for rtl
Fedik Sep 30, 2018
c4d03bc
phpcs
Fedik Sep 30, 2018
3b05879
phpcs
Fedik Sep 30, 2018
0740ee2
WebAsset fix typo
Fedik Oct 1, 2018
4266eee
WebAsset return types
Fedik Oct 1, 2018
38d5a6f
Move stuff from __constructor to service and app:dispatch()
Fedik Oct 1, 2018
c9d1ce9
WebAsset rename attach() method
Fedik Oct 1, 2018
f0322eb
WebAsset append real version
Fedik Oct 1, 2018
848611a
WebAsset check whether the asset exists before override
Fedik Oct 1, 2018
30f2331
phpcs
Fedik Oct 1, 2018
7ade928
WebAsset Event subclasses
Fedik Oct 6, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 4 additions & 15 deletions administrator/templates/atum/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
$app = Factory::getApplication();
$lang = Factory::getLanguage();
$input = $app->input;
$wa = $this->getWebAssetManager();

// Detecting Active Variables
$option = $input->get('option', '');
Expand All @@ -31,20 +32,8 @@
$logo = $this->baseurl . '/templates/' . $this->template . '/images/logo.svg';
$logoBlue = $this->baseurl . '/templates/' . $this->template . '/images/logo-blue.svg';

// Add JavaScript
HTMLHelper::_('bootstrap.framework');
HTMLHelper::_('script', 'vendor/focus-visible/focus-visible.min.js', ['version' => 'auto', 'relative' => true]);
HTMLHelper::_('script', 'vendor/css-vars-ponyfill/css-vars-ponyfill.min.js', ['version' => 'auto', 'relative' => true]);

// Load the dependencies CSS files
HTMLHelper::_('stylesheet', 'bootstrap.css', ['version' => 'auto', 'relative' => true]);
HTMLHelper::_('stylesheet', 'font-awesome.css', ['version' => 'auto', 'relative' => true]);

// Load the template CSS file
HTMLHelper::_('stylesheet', 'template' . ($this->direction === 'rtl' ? '-rtl' : '') . '.css', ['version' => 'auto', 'relative' => true]);

// Load custom CSS file
HTMLHelper::_('stylesheet', 'user.css', array('version' => 'auto', 'relative' => true));
// Enable assets
$wa->enableAsset('template.atum.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'));

// Load specific language related CSS
HTMLHelper::_('stylesheet', 'administrator/language/' . $lang->getTag() . '/' . $lang->getTag() . '.css', array('version' => 'auto'));
Expand All @@ -54,7 +43,7 @@
// @TODO sync with _variables.scss
$this->setMetaData('theme-color', '#1c3d5c');

$this->addScriptDeclaration('cssVars();')
$this->addScriptDeclaration('cssVars();');

?>
<!DOCTYPE html>
Expand Down
48 changes: 48 additions & 0 deletions administrator/templates/atum/joomla.asset.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
{
"name": "atum",
"version": "4.0.0",
"description": "Atum is the Joomla 4 administrator template",
"license": "GPL-2.0+",
"assets": {
"template.atum.base": {
"name": "template.atum.base",
"dependencies": [
"core",
"jquery-noconflict",
"font-awesome",
"bootstrap.css",
"bootstrap.js.bundle",
"css-vars-ponyfill"
],
"js": []
},
"template.atum.ltr": {
"name": "template.atum.ltr",
"dependencies": ["template.atum.base"],
"css": [
"template.min.css",
"user.css"
]
},
"template.atum.rtl": {
"name": "template.atum.rtl",
"dependencies": ["template.atum.base"],
"css": [
"template-rtl.min.css",
"user.css"
]
},
"bootstrap.css": {
"name": "bootstrap.css",
"css": [
"bootstrap.min.css"
]
},
"font-awesome": {
"name": "font-awesome",
"css": [
"font-awesome.min.css"
]
}
}
}
106 changes: 102 additions & 4 deletions build/build-modules-js/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,13 @@
"awesomplete.min.js.map": "js/awesomplete.min.js.map",
"awesomplete.css.map": "css/awesomplete.css.map"
},
"provideAssets": [
{
"name": null,
Copy link
Copy Markdown
Contributor

@dgrammatiko dgrammatiko Sep 30, 2018

Choose a reason for hiding this comment

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

@Fedik this should be awesomplete or will it work with the actual name of the parent object?

Copy link
Copy Markdown
Member Author

@Fedik Fedik Sep 30, 2018

Choose a reason for hiding this comment

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

yeap, it will take a name of the parent if it is empty here,
I made name:null just to show that the name can be specified here also, when need different name

"js": ["awesomplete.min.js"],
"css": ["awesomplete.css"]
}
],
"dependencies": [],
"licenseFilename": "LICENSE"
},
Expand Down Expand Up @@ -100,6 +107,27 @@
"dist/css/bootstrap-reboot.min.css.map": "css/bootstrap-reboot.min.css.map",
"scss": "scss"
},
"provideAssets": [
{
"name": "bootstrap.js",
"js": ["bootstrap.min.js"],
"dependencies": ["jquery"]
},
{
"name": "bootstrap.js.bundle",
"js": ["bootstrap.bundle.min.js"],
"dependencies": ["jquery"]
},
{
"name": "bootstrap.css",
"css": ["bootstrap.min.css"]
},
{
"name": "bootstrap.css.grid",
"css": ["bootstrap-grid.min.css"],
"dependencies": ["bootstrap.css"]
}
],
"dependencies": [],
"licenseFilename": "LICENSE"
},
Expand All @@ -113,6 +141,13 @@
"dist/cropper.css": "css/cropper.css",
"dist/cropper.min.css": "css/cropper.min.css"
},
"provideAssets": [
{
"name": null,
"js": ["cropper.min.js"],
"css": ["cropper.min.css"]
}
],
"dependencies": [],
"licenseFilename": "LICENSE"
},
Expand All @@ -122,6 +157,12 @@
"dist/diff.js": "js/diff.js",
"dist/diff.min.js": "js/diff.min.js"
},
"provideAssets": [
{
"name": null,
"js": ["diff.js"]
}
],
"dependencies": [],
"licenseFilename": "LICENSE"
},
Expand All @@ -135,6 +176,13 @@
"dist/dragula.css": "css/dragula.css",
"dist/dragula.min.css": "css/dragula.min.css"
},
"provideAssets": [
{
"name": null,
"js": ["dragula.min.js"],
"css": ["dragula.min.css"]
}
],
"dependencies": [],
"licenseFilename": "license"
},
Expand All @@ -145,6 +193,12 @@
"dist/focus-visible.min.js": "js/focus-visible.min.js",
"dist/focus-visible.min.js.map": "js/focus-visible.min.js.map"
},
"provideAssets": [
{
"name": null,
"js": ["focus-visible.min.js"]
}
],
"dependencies": [],
"licenseFilename": "LICENSE.md"
},
Expand All @@ -159,6 +213,12 @@
"scss": "scss",
"fonts": "fonts"
},
"provideAssets": [
{
"name": null,
"css": ["font-awesome.min.css"]
}
],
"dependencies": [],
"licenseFilename": ""
},
Expand All @@ -171,8 +231,11 @@
"filesExtra": {
"dist/jquery.min.map": "js/jquery.min.map"
},
"include": [
"jquery-migrate"
"provideAssets": [
{
"name": null,
"js": ["jquery.min.js"]
}
],
"dependencies": [],
"licenseFilename": "LICENSE.txt"
Expand All @@ -183,6 +246,13 @@
"dist/jquery-migrate.js": "js/jquery-migrate.js",
"dist/jquery-migrate.min.js": "js/jquery-migrate.min.js"
},
"provideAssets": [
{
"name": null,
"js": ["jquery-migrate.min.js"],
"dependencies": ["jquery"]
}
],
"dependencies": [
"jquery"
],
Expand Down Expand Up @@ -240,6 +310,12 @@
"js": {
"punycode.js": "js/punycode.js"
},
"provideAssets": [
{
"name": null,
"js": ["punycode.js"]
}
],
"dependencies": [],
"licenseFilename": "LICENSE-MIT.txt"
},
Expand All @@ -255,6 +331,14 @@
"filesExtra": {
"jquery.minicolors.png": "css/jquery.minicolors.png"
},
"provideAssets": [
{
"name": null,
"js": ["jquery.minicolors.min.js"],
"css": ["jquery.minicolors.css"],
"dependencies": ["jquery"]
}
],
"dependencies": [
"jquery"
],
Expand Down Expand Up @@ -286,7 +370,13 @@
"dist/css-vars-ponyfill.js": "js/css-vars-ponyfill.js",
"dist/css-vars-ponyfill.min.js": "js/css-vars-ponyfill.min.js",
"dist/css-vars-ponyfill.min.js.map": "js/css-vars-ponyfill.min.js.map"
}
},
"provideAssets": [
{
"name": null,
"js": ["css-vars-ponyfill.min.js"]
}
]
},
"chosen-js": {
"name": "chosen",
Expand All @@ -297,7 +387,15 @@
"chosen.css": "css/chosen.css",
"chosen-sprite.png": "css/chosen-sprite.png",
"chosen-sprite@2x.png": "css/chosen-sprite@2x.png"
}
},
"provideAssets": [
{
"name": null,
"js": ["chosen.jquery.js"],
"css": ["chosen.css"],
"dependencies": ["jquery"]
}
]
}
},
"errorPages": {
Expand Down
77 changes: 54 additions & 23 deletions build/build-modules-js/update.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ const copyFiles = (options) => {
version: options.version,
description: options.description,
license: options.license,
vendors: {},
assets: {},
};

if (!fsExtra.existsSync(mediaVendorPath)) {
Expand All @@ -105,13 +105,6 @@ const copyFiles = (options) => {
// eslint-disable-next-line global-require, import/no-dynamic-require
const moduleOptions = require(modulePathJson);

const registryItem = {
package: packageName,
name: vendorName,
version: moduleOptions.version,
dependencies: vendor.dependencies || [],
};

if (packageName === 'codemirror') {
const itemvendorPath = Path.join(rootPath, `media/vendor/${packageName}`);
if (!fsExtra.existsSync(itemvendorPath)) {
Expand Down Expand Up @@ -197,15 +190,7 @@ const copyFiles = (options) => {
if (!vendor[type]) return;

const dest = Path.join(mediaVendorPath, vendorName);
const files = copyFilesTo(vendor[type], modulePathRoot, dest, type);

// Add to registry, in format suported by JHtml
if (type === 'js' || type === 'css') {
registryItem[type] = [];
files.forEach((filePath) => {
registryItem[type].push(`vendor/${vendorName}/${Path.basename(filePath)}`);
});
}
copyFilesTo(vendor[type], modulePathRoot, dest, type);
});

// Copy the license if exists
Expand All @@ -229,18 +214,64 @@ const copyFiles = (options) => {
fs.writeFileSync(chosenPath, ChosenJs, { encoding: 'UTF-8' });
}

registry.vendors[vendorName] = registryItem;
// Add provided Assets to a registry, if any
if (vendor.provideAssets && vendor.provideAssets.length) {
vendor.provideAssets.forEach((assetInfo) => {

const registryItem = {
package: packageName,
name: assetInfo.name || vendorName,
version: moduleOptions.version,
dependencies: assetInfo.dependencies || [],
js: [],
css: [],
attribute: {}
};

// Update path for JS and CSS files
assetInfo.js && assetInfo.js.length && assetInfo.js.forEach((assetJS) => {
let itemPath = assetJS;

// Check for external path
if (itemPath.indexOf('http://') !== 0 && itemPath.indexOf('https://') !== 0 && itemPath.indexOf('//') !== 0) {
itemPath = `media/vendor/${vendorName}/js/${itemPath}`;
}
registryItem.js.push(itemPath);

// Check if there are any attribute to this file, then update the path
if (assetInfo.attribute && assetInfo.attribute[assetJS]) {
registryItem.attribute[itemPath] = assetInfo.attribute[assetJS]
}
});
assetInfo.css && assetInfo.css.length && assetInfo.css.forEach((assetCSS) => {
let itemPath = assetCSS;

// Check for external path
if (itemPath.indexOf('http://') !== 0 && itemPath.indexOf('https://') !== 0 && itemPath.indexOf('//') !== 0) {
itemPath = `media/vendor/${vendorName}/css/${itemPath}`;
}
registryItem.css.push(itemPath);

// Check if there are any attribute to this file, then update the path
if (assetInfo.attribute && assetInfo.attribute[assetCSS]) {
registryItem.attribute[itemPath] = assetInfo.attribute[assetCSS]
}
});

registry.assets[registryItem.name] = registryItem;
});
}

// eslint-disable-next-line no-console
console.log(`${packageName} was updated.`);
}

// Write assets registry
// fs.writeFileSync(
// Path.join(mediaVendorPath, 'joomla.asset.json'),
// JSON.stringify(registry, null, 2),
// {encoding: 'UTF-8'}
// );
fs.writeFileSync(
Path.join(mediaVendorPath, 'joomla.asset.json'),
JSON.stringify(registry, null, 2),
{encoding: 'UTF-8'}
);
};

const recreateMediaFolder = () => {
Expand Down
Loading