Create an Extension

1. Make sure all prerequisites are installed (see https://github.com/lisovin/scalejs/blob/master/README.md)

2. Start Visual Studio 2012. Create a new project, using "Scalejs Extension" template.

3. If you are creating an extension, there is a high probability it will depend upon another extension, such as scalejs.mvvm. If this is the case, then the following needs to be done.

• Right click on solution > manage nuget packages > install the package (ie, scalejs.mvvm).
• modify your config.js file. Installing a new package adds stuff to your config file you would like to ignore. Config file contains paths to script files which are referenced in the project, however, we would like to remove the path and replace it with "empty:". This ensures the built file does not contain the contents of these scripts. Here is an example:

var require = {
    "paths":  {
        "es5-shim":  "empty:",
        "json2":  "empty:",
        "knockout":  "empty:",
        "knockout.mapping":  "empty:",
        "scalejs":  "Scripts/scalejs-0.2.7.30",
        "scalejs.functional":  "empty:",
        "scalejs.mvvm":  "empty:",
        "text":  "empty:"
    },
    "scalejs":  {
        "extensions":  [
            "scalejs.functional",
            "scalejs.mvvm"
        ]
    }
};

• Now that you've added the dependency in your project, you must reference it in your nuspec file so it is automatically installed when your extension is installed via nuget. Expand the 'properties' file of your project and open the nuspec file. Add a with the same id as the package you have installed, within the section within .

• Repeat this process for any other dependencies which you have. For example, if you wanted to install a jQuery plugin, you would need to add a dependency to "scalejs.base-jquery".

• Now that you installed dependencies, it is also likely your extension will require new Scripts to be added to the project. Add any new Script files, eg base libraries your extension needs that do not have a scalejs extension, to the Scripts folder, show all the files in the project, and include it in your project. It is also possible that the extension will require other types of files, such as css or images. Include these as well within your project.

• These files need to be referenced in the nuspec file in order to be copied over. in the section, create a new file with a src which refers to the path of the file within the project, and a target of "content<targetLocation>"

• New Script files need to be referenced by the config.js file in order to be used within your extension. Add a new value to "paths" containing the name you would like it to be referenced by, and "empty:" so the file's contents is not included in the built extension file. Example:

var require = {
    "paths":  {
        "es5-shim":  "empty:",
        "jQuery":  "empty:",
        "jQuery-Migrate":  "empty:",
        "json2":  "empty:",
        "knockout":  "empty:",
        "knockout.mapping":  "empty:",
        "scalejs":  "Scripts/scalejs-0.2.7.30",
        "scalejs.functional":  "empty:",
        "scalejs.mvvm":  "empty:",
        "text": "empty:",
        "carousel": "empty:"
    },
    "scalejs":  {
        "extensions":  [
            "scalejs.functional",
            "scalejs.mvvm"
        ]
    },
    "shim":  {
        "jQuery":  {
            "exports":  "jQuery"
        },
        "jQuery-Migrate":  {
            "deps":  [
                "jQuery"
            ]
        }
    }
};

• New files in your config.js file also need to be added to the install.ps1 and uninstall.ps1 files so that the paths for these scripts are added to the target project's config file (and removed when uninstalled.) It is also very likely your new script file is not-AMD compliant. If that's the case, it also needs to be Shim-ed into the file, and it must reference any dependencies which it needs. Here is an example of an install.ps1 file:

param($installPath, $toolsPath, $package, $project)

$project |
	Add-Paths "{
		'scalejs.carousel' : 'Scripts/scalejs.carousel-$($package.Version)',
		'carousel' : 'Scripts/scalejs.carouFredSel-6.2.1'
	}" |
	Add-Shims "{
		'carousel'		: {
			deps: ['jQuery']
		}
	}" |
	Add-ScalejsExtension 'scalejs.carousel' |
	Out-Null

Here is an uninstall.ps1 file:

param($installPath, $toolsPath, $package, $project)

$project |
	Remove-Paths 'scalejs.carousel, carousel' |
	Remove-Shims 'carousel' |
	Remove-ScalejsExtension 'scalejs.carousel' |
	Out-Null

• Now you have completed your set up for a project. Press ctrl + shift + b to ensure that the project can be built.

• Be sure to pass references to your dependencies in the "define" function of your Script file! For example, even though you cannot reference 'scalejs.mvvm' as an object, you must reference it in your "define" block so require pre-loads mvvm before your script file.