Más contenido relacionado La actualidad más candente (20) Similar a Upgrade your javascript to drupal 8 (20) Más de Théodore Biadala (9) Upgrade your javascript to drupal 82. Upgrade your JavaScript
to Drupal 8
Théodore'nod_'Biadala
JS Maintainer for Drupal core
Technical consultant @ Acquia
DrupalCon, Prague 2013
3. Few things before starting
Who can write a custom module?
Who knows about render array?
Who knows about #attached?
Who knows about hook_library()?
11. hook_library_info ?
$libraries['myscript'] = array(
'js' => array('script.js'),
'dependencies' => array(
array('system', 'jquery'),
array('system', 'drupal'),
array('system', 'drupalSettings'),
array('system', 'jquery.once'),
));
12. hook_library_info ?
$libraries['myscript'] = array(
'js' => array('script.js'),
'dependencies' => array(
array('system', 'jquery'),
array('system', 'drupal'),
array('system', 'drupalSettings'),
array('system', 'jquery.once'),
));
13. hook_library_info ?
$libraries['myscript'] = array(
'js' => array('script.js'),
'dependencies' => array(
array('system', 'jquery'),
array('system', 'drupal'),
array('system', 'drupalSettings'),
array('system', 'jquery.once'),
));
14. hook_library_info ?
$libraries['myscript'] = array(
'js' => array('script.js'),
'dependencies' => array(
array('system', 'jquery'),
array('system', 'drupal'),
array('system', 'drupalSettings'),
array('system', 'jquery.once'),
));
15. hook_library_info ?
$libraries['myscript'] = array(
'js' => array('script.js'),
'dependencies' => array(
array('system', 'jquery'),
array('system', 'drupal'),
array('system', 'drupalSettings'),
array('system', 'jquery.once'),
));
18. AFTER
function my_module_library_info () {
$libraries['myscript'] = array(
'js' => array($module_path . '/script.js'),
'dependencies' => array( /* … */ ) );
return $libraries;
}
function my_page() {
return array( '#theme' => 'item_list',
'#items' => array('one', 'two', 'three'),
'#attach'=>array('library'=>array(array('my_module','myscript')) );
}
19. Maybe if patch #1996238 gets in
my_module.library.yml:
myscript:
js:
- { file: script.js }
dependencies:
- system/jquery
- system/drupal
- system/drupalSettings
- system/jquery.once
my_module.module:
function my_page() {
return array(
'#theme' => 'item_list',
'#items' => array( /* … */ ),
'#attach'=>array(
'library'=>array(
'my_module/myscript',
)) );
}
25. D8 solutions
Update all third party JS libraries
Declare all script dependencies
Strict mode & JSHint
Coding standards
26. D8 solutions
Update all third party JS libraries
Declareallscriptdependencies
Strict mode & JSHint
Coding standards