$Loader is a library that allows injecting dependencies from your or other users' account into components in a seamlessly way. To start using it, just simply place this code in the top of your component: ``` const $ = VM.require("sdks.near/widget/Loader"); ``` ## How does it work? When you work with libraries, you need a way to keep your dependencies structured in a way that can be easily accessed by you or anyone that is building with it. To do so, you need a way to define what's the library structure and the components that compose it, and that's where the `Manifest` file comes in. ## Manifest The `Manifest` file is a JavaScript object component that needs to be placed at the root level of your account. This way, you can expose the libraries you have available and its structure, so `$Loader` is able to inject them on-demand. Example ``` return { libs: { "eth-signer": "SDKs.EthereumSigner.Main", lens: { definitions: ["SDKs.Lens.Constants", "SDKs.Lens.Interfaces"], api: ["SDKs.Lens.API.AuthAPI", "SDKs.Lens.API.HealthAPI"], queries: ["SDKs.Lens.Queries.Auth", "SDKs.Lens.Queries.Health"], sdk: ["SDKs.Lens.Main"], }, "light-client": ["SDKs.LightClient"], }, versions: { "light-client": { alpha: "111491053", beta: "111522001" } } }; ``` This `Manifest` exposes the `eth-signer`, `lens` and `light-client` libraries. # Types `$Loader` library is not meant to be able to load only dependencies, but also different types of data. For that reason, the `Manifest` object schema looks the following way: - `libs`: Here you can define the structure of your libraries - `images`: Here you can define images in your preferred way (IPFS URL, base64, NEAR Social's FS...) - `links`: Here you can define links to other websites or components that are commonly accessed by other people. This way you can ensure everyone has the same link, even if you change it! - `data`: Here you can define JavaScript objects with static data that can be later leveraged in a dApp - `releases`: This index allows you to define what are the versions available for the dependencies by linking it with the block height ## Dependency injection In order to inject resources to your component, you just have to pass `$Loader` the namespace of the resource you want to load. Namespaces have the following format: `<scope><account>/<resource>#<release>` Notes: The account name does not include the `.near` fragment. Specifying the release is optional, by default it loads latest version if not specified. Example ``` // Loading $Loader const $ = VM.require("sdks.near/widget/Loader"); // Importing libraries from skds.near const { EthereumSigner } = $("@sdks/eth-signer"); const { AuthAPI, HealthAPI } = $("@sdks/lens/api"); ``` In the example, we load the `EthereumSigner`, `AuthAPI` and `HealthAPI` from the `sdks.near` account. # Namespace structure - `<scope>`: It supports the following scopes - `@` - Library scope. Loads the dependencies under the `libs` index from the `Manifest` file - `img:` - Images scope. Loads the content under the `images` index from the `Manifest` file - `url:` - Links scope. Loads the content under the `links` index from the `Manifest` file - `json:` - JSON scope. Loads the content under the `data` index from the `Manifest` file - `<account>`: The NEAR account you want to load the resource from, without including the `.near` - `<resource>`: The name of the library. This name is the index of the `libs` object first level from the `Manifest` file - `#<release>`: The specific release. Optional parameter. By default is the latest version. If the version is specified in the Manifest file, the library will get loaded at specific block height.