bluetel / ezplatform-admin-ui-entrypoint-components
Set of admin UI components for loading assets directly from the webpack encore entrypoint.json
Installs: 3 970
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 5
Forks: 0
Open Issues: 1
Type:symfony-bundle
Requires
This package is auto-updated.
Last update: 2024-11-26 18:53:46 UTC
README
This package adds a few new admin UI components for including assets from the entrypoints.json file that can be used as part of the Ez platform admin UI component system. This is useful for when you want to use encore generated assets in the CMS.
Compatibility:
Currently these components have only been tested on eZ platform 3.0+
Usage:
This package adds 3 new admin ui components:
Bluetel\EzEntrypointComponentBundle\Component\EntrypointComponent
Bluetel\EzEntrypointComponentBundle\Component\EntrypointCSSComponent
Bluetel\EzEntrypointComponentBundle\Component\EntrypointScriptComponent
To use these components add / a new entrypoint into your webpack.config.js
file.
In our example we will be adding a new entrypoint for extending the create_form
component. Adding a new entry into our webpack config exposes the webpack assets in our entrypoints.json file.
// Webpack.config.js Encore .addEntry('admin_ui_create_form_extend', './src/Resources/public/assets/js/main.js')
When running webpack your entrypoints.json will now look something like this depending on the assets you are exporting from new entrypoint
//public/assets/build/entrypoints.json { "admin_ui_create_form_extend": { "js": [ "/assets/build/runtime.js", "/assets/build/admin_ui_create_form_extend.js" ], "css": [ "/assets/build/admin_ui_create_form_extend.css" ] } }, ... }
Once we have a new entrypoint defined you can add a extend definition like
services: app.cms.extend.content_create_form: parent: Bluetel\EzEntrypointComponentBundle\Component\EntrypointCSSComponent autowire: true autoconfigure: false arguments: $entryName: "admin_ui_create_form_extend" tags: - { name: ezplatform.admin_ui.component, group: content-create-form-after }
Adding this will automatically add include statements for all files listed under the CSS
and JS
keys in the entrypoints.json
file generated by webpack.
Detailed Reference
Including all assets for an entry:
The EntrypointComponent
component includes all assets for a given entrypoint.json
file. The available arguments to pass to it are:
$entryName
REQUIRED: The name of the entry that should be included$entrypointName
: The entrypoint collection to use
Including only JS files from a given entry:
The EntrypointScriptComponent
allows you to include all the scripts given in the js
key under the entrypoint.json
. All attributes are applied globally across included scripts for the entrypoint.
The available arguments to pass to it are:
$entryName
REQUIRED: The name of the entry that should be included$entrypointName
: The entrypoint collection to use$async
: If the scripts should be included as async or not. See attr-async for more info on this$defer
: If the script should be load deferred. Seeattr-deferred
for more info.$crossorigin
: If the asset should be loaded cross origin or not. See attr-cross-origin for more info.$integrity
: Metadata for verifying the integrity of the given assets. See attr-integrity for more info.
Including only CSS files from a given entry
The EntrypointCSSComponent
allows you to include all the stylesheets given in the css
key under the entrypoint.json
. All attributes are applied globally across included scripts for the entrypoint.
The available arguments to pass to it are:
$entryName
REQUIRED: The name of the entry that should be included$entrypointName
: The entrypoint collection to use$crossorigin
: If the asset should be loaded cross origin or not. See attr-cross-origin for more info.$integrity
: Metadata for verifying the integrity of the given assets. See attr-integrity for more info.