Javascript Modules - Revision history

Devdocsbot: Protected "Javascript Modules": Developer Docs Migration ([Edit=Allow only administrators] (indefinite))

2022-12-09T13:19:12Z

Protected "Javascript Modules": Developer Docs Migration ([Edit=Allow only administrators] (indefinite))

← Older revision	Revision as of 13:19, 9 December 2022
(No difference)

Devdocsbot: Update migration status and path

2022-12-09T13:16:51Z

Update migration status and path

Show changes

Stronk7: /* Install NVM and Node */

2022-06-08T16:59:03Z

Install NVM and Node

← Older revision		Revision as of 16:59, 8 June 2022
Line 34:		Line 34:
	If your primary use of NodeJS is for Moodle then we recommend that you set NodeJS version {{NodeJSExactVersion}} as your default version. You can do this by running:		If your primary use of NodeJS is for Moodle then we recommend that you set NodeJS version {{NodeJSExactVersion}} as your default version. You can do this by running:
	nvm alias default {{NodeJSExactVersion}}		nvm alias default {{NodeJSExactVersion}}

	== Install grunt ==		== Install grunt ==
	The AMD modules in Moodle must be processed by some build tools before they will be visible to your web browser. We use "[[grunt]]" as a build tool to wrap our different processes. Grunt is a build tool written in Javascript that runs in the "[http://nodejs.org/ nodejs]" environment.		The AMD modules in Moodle must be processed by some build tools before they will be visible to your web browser. We use "[[grunt]]" as a build tool to wrap our different processes. Grunt is a build tool written in Javascript that runs in the "[http://nodejs.org/ nodejs]" environment.

Tim+Hunt: /* Install grunt */

2022-03-02T09:43:50Z

Install grunt

← Older revision		Revision as of 09:43, 2 March 2022
Line 41:		Line 41:
	'''This may mention vulnerabilities, that's fine and doesn't apply.'''		'''This may mention vulnerabilities, that's fine and doesn't apply.'''
	npm install -g grunt-cli		npm install -g grunt-cli
	Troubleshooting: on Mac, if you get weird errors, try running <code>sudo xcode-select --reset</code>.		Troubleshooting: on Mac, if you get weird errors, try running <code>sudo xcode-select --reset</code>. And, this probably means that you need to have Xcode or simlar build tools installed and resonably up to date.

	== Development mode (Moodle v2.9 to v3.7) ==		== Development mode (Moodle v2.9 to v3.7) ==
	To avoid having to constantly run grunt, make sure you set the following in your config.php		To avoid having to constantly run grunt, make sure you set the following in your config.php

Tim+Hunt: /* Install grunt */

2022-03-02T09:32:47Z

Install grunt

← Older revision		Revision as of 09:32, 2 March 2022
Line 34:		Line 34:
	If your primary use of NodeJS is for Moodle then we recommend that you set NodeJS version {{NodeJSExactVersion}} as your default version. You can do this by running:		If your primary use of NodeJS is for Moodle then we recommend that you set NodeJS version {{NodeJSExactVersion}} as your default version. You can do this by running:
	nvm alias default {{NodeJSExactVersion}}		nvm alias default {{NodeJSExactVersion}}

	== Install grunt ==		== Install grunt ==
	The AMD modules in Moodle must be processed by some build tools before they will be visible to your web browser. We use "[[grunt]]" as a build tool to wrap our different processes. Grunt is a build tool written in Javascript that runs in the "[http://nodejs.org/ nodejs]" environment.		The AMD modules in Moodle must be processed by some build tools before they will be visible to your web browser. We use "[[grunt]]" as a build tool to wrap our different processes. Grunt is a build tool written in Javascript that runs in the "[http://nodejs.org/ nodejs]" environment.
Line 42:		Line 41:
	'''This may mention vulnerabilities, that's fine and doesn't apply.'''		'''This may mention vulnerabilities, that's fine and doesn't apply.'''
	npm install -g grunt-cli		npm install -g grunt-cli
			Troubleshooting: on Mac, if you get weird errors, try running <code>sudo xcode-select --reset</code>.

	== Development mode (Moodle v2.9 to v3.7) ==		== Development mode (Moodle v2.9 to v3.7) ==
	To avoid having to constantly run grunt, make sure you set the following in your config.php		To avoid having to constantly run grunt, make sure you set the following in your config.php

Tim+Hunt: /* Install NVM and Node */

2022-03-02T09:30:22Z

Install NVM and Node

← Older revision		Revision as of 09:30, 2 March 2022
Line 23:		Line 23:

	For Linux and Mac, follow https://github.com/nvm-sh/nvm#installing-and-updating		For Linux and Mac, follow https://github.com/nvm-sh/nvm#installing-and-updating

	For Windows, use https://github.com/coreybutler/nvm-windows/releases -- Note! NVM 1.1.7 for Windows has bugs. You should upgrade to at least 1.1.9.)		For Windows, use https://github.com/coreybutler/nvm-windows/releases -- Note! NVM 1.1.7 for Windows has bugs. You should upgrade to at least 1.1.9.)

Tim+Hunt: /* Install NVM and Node */

2022-03-02T09:30:08Z

Install NVM and Node

← Older revision		Revision as of 09:30, 2 March 2022
Line 22:		Line 22:
	The recommended way of installing NodeJS is via the [https://github.com/nvm-sh/nvm Node Version Manager], or NVM. NVM allows you to have several different versions of NodeJS installed at and in-use at any once on your computer. Supported versions of Moodle all use version {{NodeJSExactVersion}} of NodeJS.		The recommended way of installing NodeJS is via the [https://github.com/nvm-sh/nvm Node Version Manager], or NVM. NVM allows you to have several different versions of NodeJS installed at and in-use at any once on your computer. Supported versions of Moodle all use version {{NodeJSExactVersion}} of NodeJS.

	https://github.com/nvm-sh/nvm#installing-and-updating		For Linux and Mac, follow https://github.com/nvm-sh/nvm#installing-and-updating
			For Windows, use https://github.com/coreybutler/nvm-windows/releases -- Note! NVM 1.1.7 for Windows has bugs. You should upgrade to at least 1.1.9.)

	Confirm it is working:		Confirm it is working (version below in on Linux, and probably not current):
	$ nvm --version		$ nvm --version
	0.35.3		0.35.3
Line 32:		Line 33:
	If your primary use of NodeJS is for Moodle then we recommend that you set NodeJS version {{NodeJSExactVersion}} as your default version. You can do this by running:		If your primary use of NodeJS is for Moodle then we recommend that you set NodeJS version {{NodeJSExactVersion}} as your default version. You can do this by running:
	nvm alias default {{NodeJSExactVersion}}		nvm alias default {{NodeJSExactVersion}}

	== Install grunt ==		== Install grunt ==
	The AMD modules in Moodle must be processed by some build tools before they will be visible to your web browser. We use "[[grunt]]" as a build tool to wrap our different processes. Grunt is a build tool written in Javascript that runs in the "[http://nodejs.org/ nodejs]" environment.		The AMD modules in Moodle must be processed by some build tools before they will be visible to your web browser. We use "[[grunt]]" as a build tool to wrap our different processes. Grunt is a build tool written in Javascript that runs in the "[http://nodejs.org/ nodejs]" environment.

Tim+Hunt: Update docs to match this month's flavour of the month for JS>

2022-01-27T15:18:07Z

Update docs to match this month's flavour of the month for JS>

Show changes

Mudrd8mz: Text replacement - "`" to ""`


2021-07-15T08:07:15Z
Text replacement - "<code (.*)>" to "<syntaxhighlight lang="$1">"

				
				
				
				
				
				← Older revision
				Revision as of 08:07, 15 July 2021
				
Line 141:
Line 141:
This shows the absolute minimum module you need to get started adding modules to your plugins. It's actually quite simple... This shows the absolute minimum module you need to get started adding modules to your plugins. It's actually quite simple...



<code javascript> <syntaxhighlight lang="javascript">
// Put this file in path/to/plugin/amd/src // Put this file in path/to/plugin/amd/src
// You can call it anything you like // You can call it anything you like
Line 156:
Line 156:



For older versions of Moodle prior to 3.8, you will need to use the legacy ES5 format instead: For older versions of Moodle prior to 3.8, you will need to use the legacy ES5 format instead:
<code javascript> <syntaxhighlight lang="javascript">
define([], function() { define([], function() {



Line 173:
Line 173:



This code passes the jquery module into our function (parameter $). There are a number of other useful modules available in Moodle, some of which you'll probably need in a practical application. See [[Useful_core_Javascript_modules]]. Simply list them in both the define() first parameter and the function callback. E.g., This code passes the jquery module into our function (parameter $). There are a number of other useful modules available in Moodle, some of which you'll probably need in a practical application. See [[Useful_core_Javascript_modules]]. Simply list them in both the define() first parameter and the function callback. E.g.,
<code javascript> <syntaxhighlight lang="javascript">
import jQuery from 'jquery'; // We recommend that you strongly consider whether you really need jQuery. It is typically not needed in modern code. import jQuery from 'jquery'; // We recommend that you strongly consider whether you really need jQuery. It is typically not needed in modern code.
import * as Str from 'core/str'; import * as Str from 'core/str';
Line 198:
Line 198:
...calls ...calls



<code javascript> <syntaxhighlight lang="javascript">
export const init = (first, last) { export const init = (first, last) {
     window.console.log(`The first name was '${first}' and the last name was '${last}'`);      window.console.log(`The first name was '${first}' and the last name was '${last}'`);
Line 218:
Line 218:



blocks/overview/amd/src/helloworld.js blocks/overview/amd/src/helloworld.js
<code javascript> <syntaxhighlight lang="javascript">
// Standard license block omitted. // Standard license block omitted.
/* /*
Line 264:
Line 264:
What do you do if you don't know in advance which modules will be required? In a limited number of situations you may not know the modules that you need until you call them. You can make use of dynamic imports to import them when you know what they are. Note: This is not the recommended approach in most cases. What do you do if you don't know in advance which modules will be required? In a limited number of situations you may not know the modules that you need until you call them. You can make use of dynamic imports to import them when you know what they are. Note: This is not the recommended approach in most cases.



<code javascript> <syntaxhighlight lang="javascript">
export const showTheThing = thingToShow => { export const showTheThing = thingToShow => {
     // Load the module for this thing.      // Load the module for this thing.
Line 281:
Line 281:
'''Warning: if the library you download, supports AMD but is already "named" you will not be able to include it directly''' '''Warning: if the library you download, supports AMD but is already "named" you will not be able to include it directly'''
e.g.   e.g.  
<code javascript> <syntaxhighlight lang="javascript">
// DO NOT DO THIS - IT DOES NOT WORK IN MOODLE // DO NOT DO THIS - IT DOES NOT WORK IN MOODLE
define("typeahead.js", *[ "jquery" ], function(a0) { define("typeahead.js", *[ "jquery" ], function(a0) {
Line 306:
Line 306:



Javascript module: Javascript module:
<code javascript> <syntaxhighlight lang="javascript">
// /theme/mytheme/amd/src/countdowntimer.js // /theme/mytheme/amd/src/countdowntimer.js
import Countdown from 'theme_mytheme/jquery.countdown'); import Countdown from 'theme_mytheme/jquery.countdown');
Line 319:
Line 319:



2. Call your Javascript module from your template: 2. Call your Javascript module from your template:
<code javascript> <syntaxhighlight lang="javascript">
// /theme/mytheme/templates/countdowntimer.mustache // /theme/mytheme/templates/countdowntimer.mustache
<span id="theme_mytheme-clock-{{uniqid}}"></span> <span id="theme_mytheme-clock-{{uniqid}}"></span>
Line 345:
Line 345:
</syntaxhighlight> </syntaxhighlight>
Then in your JS module in the plugin: Then in your JS module in the plugin:
<code javascript> <syntaxhighlight lang="javascript">
define([colorpicker], function(ColorPicker) { define([colorpicker], function(ColorPicker) {
     const button = document.getElementById('my_picker');      const button = document.getElementById('my_picker');
Line 356:
Line 356:
  NOTE: It is advised to move away from [[jQuery]] related plugins, as Moodle core is moving away from jQuery.   NOTE: It is advised to move away from [[jQuery]] related plugins, as Moodle core is moving away from jQuery.
<br> <br>
<code javascript> <syntaxhighlight lang="javascript">
import ColourPicker from 'local_myplugin/bootstrap-colorpicker'; import ColourPicker from 'local_myplugin/bootstrap-colorpicker';



Mudrd8mz: Text replacement - "" to ""

2021-07-14T13:30:44Z
Text replacement - "<code php>" to "<syntaxhighlight lang="php">"

				
				
				
				
				
				← Older revision
				Revision as of 13:30, 14 July 2021
				
Line 63:
Line 63:
To avoid having to constantly run grunt, make sure you set the following in your config.php To avoid having to constantly run grunt, make sure you set the following in your config.php



<code php> <syntaxhighlight lang="php">
// Prevent JS caching // Prevent JS caching
$CFG->cachejs = false; $CFG->cachejs = false;
Line 80:
Line 80:



To enable development mode set the '''cachejs''' config value to '''false''' in the admin settings or directly in your config.php file: To enable development mode set the '''cachejs''' config value to '''false''' in the admin settings or directly in your config.php file:
<code php> <syntaxhighlight lang="php">
// Prevent JS caching // Prevent JS caching
$CFG->cachejs = false; $CFG->cachejs = false;
Line 184:
Line 184:
The idea here is that we will run the 'init' function from our (PHP) code to set things up. This is called from PHP like this... The idea here is that we will run the 'init' function from our (PHP) code to set things up. This is called from PHP like this...



<code php> <syntaxhighlight lang="php">
     $PAGE->requires->js_call_amd('frankenstyle_path/your_js_filename', 'init');      $PAGE->requires->js_call_amd('frankenstyle_path/your_js_filename', 'init');
</syntaxhighlight> </syntaxhighlight>
Line 192:
Line 192:
js_call_amd takes a third parameter which is an ''array'' of parameters. These will translate to individual parameters in the 'init' function call. For example... js_call_amd takes a third parameter which is an ''array'' of parameters. These will translate to individual parameters in the 'init' function call. For example...



<code php> <syntaxhighlight lang="php">
     $PAGE->requires->js_call_amd('block_iomad_company_admin/department_select', 'init', array($first, $last));      $PAGE->requires->js_call_amd('block_iomad_company_admin/department_select', 'init', array($first, $last));
</syntaxhighlight> </syntaxhighlight>
Line 301:
Line 301:



In your PHP file: In your PHP file:
<code php> <syntaxhighlight lang="php">
$this->page->requires->js_call_amd('theme_mytheme/countdowntimer', 'init', $params); $this->page->requires->js_call_amd('theme_mytheme/countdowntimer', 'init', $params);
</syntaxhighlight> </syntaxhighlight>
Line 339:
Line 339:
You need to configure requirejs in your plugin to use third-party library: You need to configure requirejs in your plugin to use third-party library:



<code php> <syntaxhighlight lang="php">
$config = ['paths' => ['colorpicker' => 'CDN or local path...']]; $config = ['paths' => ['colorpicker' => 'CDN or local path...']];
$requirejs = 'require.config(' . json_encode($config) . ')'; $requirejs = 'require.config(' . json_encode($config) . ')';
Line 366:
Line 366:
So you have created lots of cool Javascript modules. Great. How do we actually call them? Any javascript code that calls an AMD module must execute AFTER the requirejs module loader has finished loading. We have provided a function "js_call_amd" that will call a single function from an AMD module with parameters.    So you have created lots of cool Javascript modules. Great. How do we actually call them? Any javascript code that calls an AMD module must execute AFTER the requirejs module loader has finished loading. We have provided a function "js_call_amd" that will call a single function from an AMD module with parameters.   



<code php> <syntaxhighlight lang="php">
$PAGE->requires->js_call_amd($modulename, $functionname, $params); $PAGE->requires->js_call_amd($modulename, $functionname, $params);
</syntaxhighlight> </syntaxhighlight>

← Older revision		Revision as of 08:07, 15 July 2021
Line 141:		Line 141:
	This shows the absolute minimum module you need to get started adding modules to your plugins. It's actually quite simple...		This shows the absolute minimum module you need to get started adding modules to your plugins. It's actually quite simple...

	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	// Put this file in path/to/plugin/amd/src		// Put this file in path/to/plugin/amd/src
	// You can call it anything you like		// You can call it anything you like
Line 156:		Line 156:

	For older versions of Moodle prior to 3.8, you will need to use the legacy ES5 format instead:		For older versions of Moodle prior to 3.8, you will need to use the legacy ES5 format instead:
	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	define([], function() {		define([], function() {

Line 173:		Line 173:

	This code passes the jquery module into our function (parameter $). There are a number of other useful modules available in Moodle, some of which you'll probably need in a practical application. See [[Useful_core_Javascript_modules]]. Simply list them in both the define() first parameter and the function callback. E.g.,		This code passes the jquery module into our function (parameter $). There are a number of other useful modules available in Moodle, some of which you'll probably need in a practical application. See [[Useful_core_Javascript_modules]]. Simply list them in both the define() first parameter and the function callback. E.g.,
	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	import jQuery from 'jquery'; // We recommend that you strongly consider whether you really need jQuery. It is typically not needed in modern code.		import jQuery from 'jquery'; // We recommend that you strongly consider whether you really need jQuery. It is typically not needed in modern code.
	import * as Str from 'core/str';		import * as Str from 'core/str';
Line 198:		Line 198:
	...calls		...calls

	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	export const init = (first, last) {		export const init = (first, last) {
	window.console.log(`The first name was '${first}' and the last name was '${last}'`);		window.console.log(`The first name was '${first}' and the last name was '${last}'`);
Line 218:		Line 218:

	blocks/overview/amd/src/helloworld.js		blocks/overview/amd/src/helloworld.js
	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	// Standard license block omitted.		// Standard license block omitted.
	/*		/*
Line 264:		Line 264:
	What do you do if you don't know in advance which modules will be required? In a limited number of situations you may not know the modules that you need until you call them. You can make use of dynamic imports to import them when you know what they are. Note: This is not the recommended approach in most cases.		What do you do if you don't know in advance which modules will be required? In a limited number of situations you may not know the modules that you need until you call them. You can make use of dynamic imports to import them when you know what they are. Note: This is not the recommended approach in most cases.

	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	export const showTheThing = thingToShow => {		export const showTheThing = thingToShow => {
	// Load the module for this thing.		// Load the module for this thing.
Line 281:		Line 281:
	'''Warning: if the library you download, supports AMD but is already "named" you will not be able to include it directly'''		'''Warning: if the library you download, supports AMD but is already "named" you will not be able to include it directly'''
	e.g.		e.g.
	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	// DO NOT DO THIS - IT DOES NOT WORK IN MOODLE		// DO NOT DO THIS - IT DOES NOT WORK IN MOODLE
	define("typeahead.js", *[ "jquery" ], function(a0) {		define("typeahead.js", *[ "jquery" ], function(a0) {
Line 306:		Line 306:

	Javascript module:		Javascript module:
	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	// /theme/mytheme/amd/src/countdowntimer.js		// /theme/mytheme/amd/src/countdowntimer.js
	import Countdown from 'theme_mytheme/jquery.countdown');		import Countdown from 'theme_mytheme/jquery.countdown');
Line 319:		Line 319:

	2. Call your Javascript module from your template:		2. Call your Javascript module from your template:
	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	// /theme/mytheme/templates/countdowntimer.mustache		// /theme/mytheme/templates/countdowntimer.mustache
	<span id="theme_mytheme-clock-{{uniqid}}"></span>		<span id="theme_mytheme-clock-{{uniqid}}"></span>
Line 345:		Line 345:
	</syntaxhighlight>		</syntaxhighlight>
	Then in your JS module in the plugin:		Then in your JS module in the plugin:
	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	define([colorpicker], function(ColorPicker) {		define([colorpicker], function(ColorPicker) {
	const button = document.getElementById('my_picker');		const button = document.getElementById('my_picker');
Line 356:		Line 356:
	NOTE: It is advised to move away from [[jQuery]] related plugins, as Moodle core is moving away from jQuery.		NOTE: It is advised to move away from [[jQuery]] related plugins, as Moodle core is moving away from jQuery.
	<br>		<br>
	<~~code~~ javascript>		<syntaxhighlight lang="javascript">
	import ColourPicker from 'local_myplugin/bootstrap-colorpicker';		import ColourPicker from 'local_myplugin/bootstrap-colorpicker';

← Older revision		Revision as of 13:30, 14 July 2021
Line 63:		Line 63:
	To avoid having to constantly run grunt, make sure you set the following in your config.php		To avoid having to constantly run grunt, make sure you set the following in your config.php

	<~~code~~ php>		<syntaxhighlight lang="php">
	// Prevent JS caching		// Prevent JS caching
	$CFG->cachejs = false;		$CFG->cachejs = false;
Line 80:		Line 80:

	To enable development mode set the '''cachejs''' config value to '''false''' in the admin settings or directly in your config.php file:		To enable development mode set the '''cachejs''' config value to '''false''' in the admin settings or directly in your config.php file:
	<~~code~~ php>		<syntaxhighlight lang="php">
	// Prevent JS caching		// Prevent JS caching
	$CFG->cachejs = false;		$CFG->cachejs = false;
Line 184:		Line 184:
	The idea here is that we will run the 'init' function from our (PHP) code to set things up. This is called from PHP like this...		The idea here is that we will run the 'init' function from our (PHP) code to set things up. This is called from PHP like this...

	<~~code~~ php>		<syntaxhighlight lang="php">
	$PAGE->requires->js_call_amd('frankenstyle_path/your_js_filename', 'init');		$PAGE->requires->js_call_amd('frankenstyle_path/your_js_filename', 'init');
	</syntaxhighlight>		</syntaxhighlight>
Line 192:		Line 192:
	js_call_amd takes a third parameter which is an ''array'' of parameters. These will translate to individual parameters in the 'init' function call. For example...		js_call_amd takes a third parameter which is an ''array'' of parameters. These will translate to individual parameters in the 'init' function call. For example...

	<~~code~~ php>		<syntaxhighlight lang="php">
	$PAGE->requires->js_call_amd('block_iomad_company_admin/department_select', 'init', array($first, $last));		$PAGE->requires->js_call_amd('block_iomad_company_admin/department_select', 'init', array($first, $last));
	</syntaxhighlight>		</syntaxhighlight>
Line 301:		Line 301:

	In your PHP file:		In your PHP file:
	<~~code~~ php>		<syntaxhighlight lang="php">
	$this->page->requires->js_call_amd('theme_mytheme/countdowntimer', 'init', $params);		$this->page->requires->js_call_amd('theme_mytheme/countdowntimer', 'init', $params);
	</syntaxhighlight>		</syntaxhighlight>
Line 339:		Line 339:
	You need to configure requirejs in your plugin to use third-party library:		You need to configure requirejs in your plugin to use third-party library:

	<~~code~~ php>		<syntaxhighlight lang="php">
	$config = ['paths' => ['colorpicker' => 'CDN or local path...']];		$config = ['paths' => ['colorpicker' => 'CDN or local path...']];
	$requirejs = 'require.config(' . json_encode($config) . ')';		$requirejs = 'require.config(' . json_encode($config) . ')';
Line 366:		Line 366:
	So you have created lots of cool Javascript modules. Great. How do we actually call them? Any javascript code that calls an AMD module must execute AFTER the requirejs module loader has finished loading. We have provided a function "js_call_amd" that will call a single function from an AMD module with parameters.		So you have created lots of cool Javascript modules. Great. How do we actually call them? Any javascript code that calls an AMD module must execute AFTER the requirejs module loader has finished loading. We have provided a function "js_call_amd" that will call a single function from an AMD module with parameters.

	<~~code~~ php>		<syntaxhighlight lang="php">
	$PAGE->requires->js_call_amd($modulename, $functionname, $params);		$PAGE->requires->js_call_amd($modulename, $functionname, $params);
	</syntaxhighlight>		</syntaxhighlight>