# Emera Component Manager <span class="image-right">![[Emera Component Manager-2024-12-08-c9e4a2753d7b6acd83edd65e80610288.webp]]</span> [ECM](https://github.com/AriTheElk/ECM) is a general purpose component installer and updater for [Obsidian](https://obsidian.md/). It opens the door for distribution of self-hosted components inside emera and obsidian! ## Installation I'm currently working on an easy installer for ECM. So right now, you'll have to do a manual installation 🙁 If you would like to see a demo vault with emera up and running with ECM, checkout the canonical [ECM Vault](https://github.com/AriTheElk/ECM). This is where I'll be storing all my pre-release goodies ✨ ### Manual Installation First, install [Emera](https://github.com/OlegWock/obsidian-emera) After you have emera installed and pointed at whatever folder you want to use for your components, create a new folder inside your components directory named `ECM` Inside that new folder, download [ESM.jsx](https://pkg.elk.wtf/ecm/ECM.jsx) and place it inside the `ECM` folder. Then, create a new file inside `ECM` named `index.js` and paste the following code inside: ```javascript export * from "./ECM"; ``` Next we need to create a `manifest.md` file inside the `ECM` folder. This file will contain the manifest for the ECM component. Paste the following code inside: ```yaml --- components: - name: ECM version: 0.1.0 source: https://pkg.elk.wtf/ecm/ECM.jsx protected: true requires: - name: sugar version: 0.1.0 manifest: https://pkg.elk.wtf/sugar/manifest.json source: https://pkg.elk.wtf/sugar/sugar.js filePath: Obsidian/Components/ECM/ECM.jsx manifest: https://pkg.elk.wtf/ecm/manifest.json --- ``` Now open up Obisidian, open settings -> emera and click the refresh button. You're now able to use ECM! Create a new note somewhere in your vault and add the following code anywhere in the note: ```md `emera:<ECM path="Obsidian/Components/ECM" />` ``` Replace the `path` attribute with the path to your `Components/ECM` folder. ## Folder Structure I highly recommend separating ECM from the rest of your components. Mostly because ECM is still very new and it functions pretty aggressively, meaning there's no real guardrails to prevent naming clashes when installing or deleting components. Here's what I consider the golden standard for how ECM should be configured: ``` Components/ |----------index.js (this contains `export * from './ECM'`) |----------ECM/ |--------------ECM.jsx |--------------index.js (this is auto-generated by ECM) ``` This will ensure that any new components you install will be immediately available inside emera upon user module refresh. **Note: the location of the root `Components/` directory does not matter, you can place it wherever you'd like!** Any usage of other folder structures are not guaranteed to function as expected and may require manual editing of files to properly export components. ## Component Manifests ECM does not have a central registry, meaning that components can be hosted and installed from anywhere. This creates a lot of opportunity for rapid releases, but also can make things a little hairy in the future. If ECM becomes larger than I expect, I will likely have to build a central registry to prevent widespread naming conflicts. For now though, ECM functions on the principle of ✨decentralized manifests✨ What this means, is that to install a component, you have to copy the manifest URL into the add component input. Component manifests are structured like so: ```json { "name": string, // the component name "version": number, // version number "source": string, // the url to the component code "requires": [ // an optional list of dependencies { "manifest": string, // the url to the dependencies manifest "version": number, // the minimum version required } ] } ```