{"id":13701323,"url":"https://github.com/muicss/johnnydepp","last_synced_at":"2025-08-20T01:32:16.882Z","repository":{"id":48029927,"uuid":"150752933","full_name":"muicss/johnnydepp","owner":"muicss","description":"A tiny dependency manager for modern browsers (992 bytes)","archived":false,"fork":false,"pushed_at":"2023-04-29T12:22:19.000Z","size":549,"stargazers_count":148,"open_issues_count":8,"forks_count":6,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-12-06T23:47:50.853Z","etag":null,"topics":["css","dependency-manager","html","javascript","web-development"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/muicss.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":"AUTHORS.txt","dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-28T14:31:25.000Z","updated_at":"2024-04-24T13:06:20.000Z","dependencies_parsed_at":"2024-11-06T23:23:30.725Z","dependency_job_id":"33517af6-93f2-4e0e-90f3-4eaea0eca141","html_url":"https://github.com/muicss/johnnydepp","commit_stats":{"total_commits":37,"total_committers":2,"mean_commits":18.5,"dds":"0.10810810810810811","last_synced_commit":"477ab7455584cc9bd0ed16422ea301162c968bde"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muicss%2Fjohnnydepp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muicss%2Fjohnnydepp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muicss%2Fjohnnydepp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/muicss%2Fjohnnydepp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/muicss","download_url":"https://codeload.github.com/muicss/johnnydepp/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230382859,"owners_count":18216854,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","dependency-manager","html","javascript","web-development"],"created_at":"2024-08-02T20:01:29.487Z","updated_at":"2024-12-19T05:08:55.050Z","avatar_url":"https://github.com/muicss.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# JohnnyDepp\n\n\u003cimg src=\"https://www.muicss.com/static/images/johnnydepp.svg\" width=\"250px\"\u003e\n\nJohnnyDepp is a tiny dependency manager for modern browsers (992 bytes).\n\n[![Dependency Status](https://david-dm.org/muicss/johnnydepp.svg)](https://david-dm.org/muicss/johnnydepp)\n[![devDependency Status](https://david-dm.org/muicss/johnnydepp/dev-status.svg)](https://david-dm.org/muicss/johnnydepp?type=dev)\n\n## Introduction\n\nJohnnyDepp is a tiny dependency manager for modern browsers (IE10+) that lets you fetch JavaScript, CSS and image files in parallel and execute code after your dependencies have been met. JohnnyDepp allows you to define code bundles and lazy-load the necessary files when you need them using the library's `require()` method. Each file will only be downloaded once so multiple calls to `require()` won't trigger duplicate downloads. The recommended way to use JohnnyDepp is to include the minified source of [depp.js](https://raw.githubusercontent.com/muicss/loadjs/master/dist/depp.min.js) in your \u0026lt;html\u0026gt; (possibly in the \u0026lt;head\u0026gt; tag) and then use the `depp` global to manage your dependencies after pageload.\n\nJohnnyDepp is based on the [LoadJS](https://github.com/muicss/loadjs) library which powers the file fetching and error handling functionality behind the scenes. JohnnyDepp loads JavaScript files with `async: false` which means they will be downloaded in parallel and executed in series. If you're looking for a lower level async loading library you should check out LoadJS to see if that meets your needs.\n\nHere's an example of what you can do with JohnnyDepp:\n\n```javascript\n// define dependencies\ndepp.define({\n  'jquery': ['/path/to/jquery.js'],\n  'plugin1': ['#jquery', '/path/to/plugin1.js', '/path/to/plugin1.css', '/path/to/plugin1.png'],\n  'plugin2': ['#jquery', '/path/to/plugin2.js', '/path/to/plugin2.css', '/path/to/plugin2.png']\n});\n\n// load dependencies\ndepp.require(['plugin1', 'plugin2'], function() {\n  /* plugin1 and plugin2 are ready to be used */\n});\n```\n\nThe latest version of JohnnyDepp can be found in the `dist/` directory in this repository:\n\n  * [depp.js](https://cdn.rawgit.com/muicss/johnnydepp/0.1.4/dist/depp.js)\n  * [depp.min.js](https://cdn.rawgit.com/muicss/johnnydepp/0.1.4/dist/depp.min.js)\n\nYou can also use it as a CJS or AMD module:\n\n```\n$ npm install --save johnnydepp\n```\n\n```javascript\nvar depp = require('johnnydepp');\n\ndepp.define({\n  'jquery': ['/path/to/jquery.js'],\n  'plugin1': ['#jquery', '/path/to/plugin1.js', '/path/to/plugin1.css', '/path/to/plugin1.png'],\n  'plugin2': ['#jquery', '/path/to/plugin2.js', '/path/to/plugin2.css', '/path/to/plugin2.png']\n});\n\ndepp.require(['plugin1', 'plugin2'], function() {\n  /* plugin1 and plugin2 are ready to be used */\n});\n```\n\nJohnnyDepp is 992 bytes (minified + gzipped).\n\n## Browser Support\n\n * IE10+\n * Opera 12+\n * Safari 5+\n * Chrome\n * Firefox\n * iOS 6+\n * Android 4.4+\n\n## Quickstart\n\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript src=\"//cdn.rawgit.com/muicss/johnnydepp/0.1.4/dist/depp.min.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n      // define dependencies\n      depp.define({\n        'jquery': [\n          '//code.jquery.com/jquery-3.3.1.min.js'\n        ],\n        'jquery-ui': [\n          '#jquery',\n          '//code.jquery.com/ui/1.12.1/jquery-ui.min.js',\n          '//code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css'\n        ]\n      });\n\n      // load dependencies\n      depp.require(['jquery-ui'], function() {\n        $(function() {\n          $(\"#datepicker\").datepicker();\n        });\n      });\n    \u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cp\u003eDate: \u003cinput type=\"text\" id=\"datepicker\"\u003e\u003c/p\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nhttp://jsfiddle.net/muicss/ezubwon4/\n\n## Examples\n\n1. Fetch a file bundle and execute code after the dependencies have been met\n\n   ```javascript\n   depp.define({\n     'mybundle': ['/path/to/file.js', '/path/to/file.css', '/path/to/file.png']\n   });\n\n   depp.require(['mybundle'], function() {\n     /* file.js, file.css and file.png loaded successfully */\n   });\n   ```\n\n1. Fetch multiple bundles\n\n   ```javascript\n   depp.define({\n     'bundle1': ['/path/to/bundle1.js', '/path/to/bundle1.css', '/path/to/bundle1.png'],\n     'bundle2': ['/path/to/bundle2.js', '/path/to/bundle2.css', '/path/to/bundle2.png']\n   });\n\n   depp.require(['bundle1', 'bundle2'], function() {\n     /* files for bundle1 and bundle2 loaded successfully */\n   });\n   ```\n\n1. Fetch bundles with nested dependencies\n\n   ```javascript\n   depp.define({\n     'jquery': ['/path/to/jquery.js'],\n     'bundle1': ['#jquery', '/path/to/bundle1.js', '/path/to/bundle1.css', '/path/to/bundle1.png'],\n     'bundle2': ['#jquery', '/path/to/bundle2.js', '/path/to/bundle2.css', '/path/to/bundle2.png']\n   });\n\n   depp.require(['bundle1'], function() {\n     /* jquery and bundle1 loaded successfully */\n   });\n\n   depp.require(['bundle2'], function() {\n     /* jquery and bundle2 loaded successfully */\n   });\n   ```\n\n1. Register bundle loads manually\n\n   ```javascript\n   if (window.jQuery) depp.done('jquery');\n   else depp.define({'jquery': ['/path/to/jquery.js']});\n\n   depp.require(['jquery'], function() {\n     /* jquery has loaded */\n   });\n   ```\n\n1. Register require callbacks before defining bundles\n\n   ```javascript\n   // register callback first\n   depp.require(['bundle1', 'bundle2'], function() {\n     /* jquery, bundle1 and bundle2 loaded successfully */\n   });\n\n   // define bundles later\n   depp.define({\n     'jquery': ['/path/to/jquery.js'],\n     'bundle1': ['#jquery', '/path/to/bundle1.js', '/path/to/bundle1.css', '/path/to/bundle1.png'],\n     'bundle2': ['#jquery', '/path/to/bundle2.js', '/path/to/bundle2.css', '/path/to/bundle2.png']\n   });\n   ```\n\n1. Execute an error callback\n\n   ```javascript\n   depp.define({\n     'bundle1': ['/path/to/bundle1.js', '/path/to/bundle1.css', '/path/to/bundle1.png'],\n     'bundle2': ['/path/to/bundle2.js', '/path/to/bundle2.css', '/path/to/bundle2.png']\n   });\n\n   depp.require(\n     ['bundle1', 'bundle2'],\n     function() {\n       /* bundle1 and bundle2 loaded successfully */\n     },\n     function(firstPathNotFound) {\n       // log reason for failure\n       console.log(firstPathNotFound + ' not found');\n     }\n   });\n   ```\n\n1. Implement SRI security checks\n\n   ```javascript\n   depp.define({\n     'jquery': ['/path/to/jquery.js'],\n     'plugin1': ['#jquery', '/path/to/jquery-plugin1.js'],\n     'plugin2': ['#jquery', '/path/to/jquery-plugin2.js']\n   });\n\n   depp.config({\n     before: function(path, scriptEl) {\n       if (path === '/path/to/jquery.js') scriptEl.integrity = 'shaXXX-hashgoeshere';\n       else if (path === '/path/to/jquery-plugin1.js') scriptEl.integrity = 'shaXXX-hashgoeshere';\n       else if (path === '/path/to/jquery-plugin2.js') scriptEl.integrity = 'shaXXX-hashgoeshere';\n       else return;\n\n       scriptEl.crossOrigin = 'anonymous';\n     }\n   });\n\n   depp.require(['plugin1', 'plugin2'], function() {\n     /* plugin1 and plugin2 loaded successfully */\n   });\n   ```\n\n## Documentation\n\n### API\n\n#### define() - Define file bundles\n\n```\ndefine(bundleDefs)\n\n  * bundleDefs {Object} - A mapping between bundle names and file paths\n\nExamples:\n\n1. Define a file bundle containing JavaScript, CSS and image files:\n\n   depp.define({\n     'mybundle': ['/path/to/foo.js', '/path/to/bar.css', '/path/to/thunk.png']\n   });\n\n2. Define multiple bundles simultaneously:\n\n   depp.define({\n     'bundle1': ['/path/to/bundle1.js', '/path/to/bundle1.css', '/path/to/bundle1.png'],\n     'bundle2': ['/path/to/bundle2.js', '/path/to/bundle2.css', '/path/to/bundle1.png']\n   });\n\n3. Define multiple bundles separately:\n\n   // define first bundle\n   depp.define({\n     'bundle1': ['/path/to/bundle1.js', '/path/to/bundle1.css', '/path/to/bundle1.png']\n   });\n\n   // define second bundle\n   depp.define({\n     'bundle2': ['/path/to/bundle2.js', '/path/to/bundle2.css', '/path/to/bundle2.png']\n   });\n\n4. Define bundles with nested dependencies:\n\n   depp.define({\n     'bundle1': ['/path/to/bundle1.js', '/path/to/bundle1.css'],\n     'bundle2': ['#bundle1', '/path/to/bundle2.js', '/path/to/bundle2.css']\n   });\n\n5. Force treat files as CSS stylesheets and images:\n\n   depp.define({\n     'mybundle': [\n       'css!/path/to/cssfile.custom',\n       'img!/path/to/image.custom'\n     ]\n   });\n\n```\n\n#### require() - Load file bundles and execute callback functions\n\n```\nrequire(bundleList[, successFn[, errorFn]])\n\n  * bundleList {Array or String} - A single bundle name or an array of names\n  * successFn {Function} - Callback function to execute when dependencies have been met (optional)\n  * errorFn {Function} - Callback function to execute on first dependency failure (optional)\n\nExamples:\n\n1. Load a file bundle and execute code when the dependencies have been met:\n\n   depp.define({'mybundle': ['/path/to/foo.js', '/path/to/bar.js']});\n\n   depp.require(['mybundle'], function() {\n     /* foo.js and bar.js loaded */\n   });\n\n2. Define bundles after registering require callback\n\n   depp.require(['mybundle'], function() {\n     /* foo.js and bar.js loaded */\n   });\n\n   depp.define({'mybundle': ['/path/to/foo.js', '/path/to/bar.js']});\n\n3. Define an error callback:\n\n   depp.define({\n     'bundle1': ['/path/to/bundle1.js', '/path/to/bundle1.css'],\n     'bundle2': ['/path/to/bundle2.js', '/path/to/bundle2.css']\n   });\n\n   depp.require(\n     ['bundle1', 'bundle2'],\n     function() {\n       // file bundles loaded successfully\n     },\n     function(firstPathNotFound) {\n       // log reason for failure\n       console.log(firstPathNotFound + ' not found');\n     }\n   );\n\n```\n\n#### config() - Configure library\n\n```\nconfig(configObj)\n   \n  * configObj {Object}\n    * before {Function} - Callback function to execute before every file load\n\nExamples:\n\n1. Load external JavaScript files using SRI security:\n\n   depp.config({\n     before: function(path, scriptEl) {\n       /* called for each script node before being embedded */\n       if (path === '/path/to/foo.js') {\n         scriptEl.integrity = 'shaXXX-hashgoeshere';\n         scriptEl.crossOrigin = true;\n       }\n     }\n   });\n\n```\n\n#### isDefined() - Check if a bundle has already been defined\n\n```\nisDefined(bundleName)\n\n  * bundleName {String} - The bundle name\n\nExamples:\n\n1. Check if a bundle has already been defined elsewhere:\n\n   if (!depp.isDefined('mybundle')) {\n     depp.define({'mybundle': ['/path/to/foo.js', '/path/to/bar.js']});\n   }\n   \n```\n\n#### done() - Register bundle load manually\n\n```\ndone(bundleName)\n\n* bundleName {String} - The bundle name\n\nExamples:\n\n1. Register bundle loads manually\n\n   if (window.jQuery) depp.done('jquery');\n   else depp.define({'jquery': ['/path/to/jquery.js']});\n\n   depp.require(['jquery'], function() {\n     /* jquery has loaded successfully */\n   });\n\n2. Register bundle loads after registering require callback\n\n   depp.require(['jquery'], function() {\n     /* jquery has loaded successfully */\n   });\n\n   if (window.jQuery) depp.done('jquery');\n   else depp.define({'jquery': ['/path/to/jquery.js']});\n\n```\n\n\n#### reset() - Reset dependency trackers and bundle definitions\n\n```\nreset()\n\nExamples:\n\n1. Remove all dependency trackers and bundle definitions from the JohnnyDepp library:\n\n   // define bundles\n   depp.define({'mybundle': ['/path/to/foo.js', '/path/to/bar.js']});\n\n   // remove all trackers and definitions\n   depp.reset();\n\n```\n\n### Async Loading\n\nTo make it easy to use JohnnyDepp asynchronously, the library dispatches a 'depp-load' browser event that will notify you when the library is ready to be used:\n\n```html\n\u003c!doctype html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript\u003e\n      // use the `depp-load` event to detect load time\n      document.addEventListener('depp-load', function() {\n        // now the `depp` global object is available\n        depp.define({\n          'jquery': [\n            '//code.jquery.com/jquery-3.3.1.min.js'\n          ],\n          'jquery-ui': [\n            '#jquery',\n            '//code.jquery.com/ui/1.12.1/jquery-ui.min.js',\n            '//code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css'\n          ]\n        });\n\n        // load dependencies\n        depp.require(['jquery-ui'], function() {\n          $(function() {\n            $(\"#datepicker\").datepicker();\n          });\n        });\n      });\n    \u003c/script\u003e\n    \u003cscript src=\"//cdn.rawgit.com/muicss/johnnydepp/0.1.4/dist/depp.min.js\" async\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cp\u003eDate: \u003cinput type=\"text\" id=\"datepicker\"\u003e\u003c/p\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Directory Structure\n\n\u003cpre\u003e\nloadjs/\n├── dist\n│   ├── depp.js\n│   ├── depp.min.js\n│   └── depp.umd.js\n├── examples\n├── gulpfile.js\n├── LICENSE.txt\n├── package.json\n├── package-lock.json\n├── README.md\n├── src\n│   └── depp.js\n├── test\n└── umd-templates\n\u003c/pre\u003e\n\n## Development Quickstart\n\n1. Install dependencies\n\n    * [nodejs](http://nodejs.org/)\n    * [npm](https://www.npmjs.org/)\n    * http-server (via npm)\n\n1. Clone repository\n\n    ```bash\n    $ git clone git@github.com:muicss/johnnydepp.git\n    $ cd johnnydepp\n    ```\n\n1. Install node dependencies using npm\n\n    ```bash\n    $ npm install\n    ```\n\n1. Build examples\n\n    ```bash\n    $ npm run build-examples\n    ```\n\n    To view the examples you can use any static file server. To use the `nodejs` http-server module:\n\n    ```bash\n    $ npm install http-server\n    $ npm run http-server -- -p 3000\n    ```\n\n    Then visit [http://localhost:3000/examples](http://localhost:3000/examples)\n\n1. Build distribution files\n\n    ```bash\n    $ npm run build-dist\n    ```\n\n    The files will be located in the `dist` directory.\n\n1. Run tests\n\n     To run the browser tests first build the `loadjs` library:\n\n     ```bash\n     $ npm run build-tests\n     ```\n\n     Then visit [http://localhost:3000/test](http://localhost:3000/test)\n\n1. Build all files\n\n     ```bash\n     $ npm run build-all\n     ```\n\nIcons made by [Freepik](http://www.freepik.com) from [www.flaticon.com](https://www.flaticon.com/) is licensed by [CC 3.0 BY](http://creativecommons.org/licenses/by/3.0/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmuicss%2Fjohnnydepp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmuicss%2Fjohnnydepp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmuicss%2Fjohnnydepp/lists"}