{"id":50781902,"url":"https://github.com/collagejs/imo","last_synced_at":"2026-06-14T05:01:40.324Z","repository":{"id":362564199,"uuid":"1126393271","full_name":"collagejs/imo","owner":"collagejs","description":"Performs import map entry overriding for ES modules, and posts the resulting import map to Vite development servers.","archived":false,"fork":false,"pushed_at":"2026-06-05T22:43:41.000Z","size":95,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-12T04:22:37.084Z","etag":null,"topics":["collagejs","import-map","import-maps","micro-frontend","micro-frontends","vite"],"latest_commit_sha":null,"homepage":"https://collagejs.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/collagejs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-01-01T20:21:18.000Z","updated_at":"2026-06-04T21:08:50.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/collagejs/imo","commit_stats":null,"previous_names":["collagejs/imo"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/collagejs/imo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/collagejs%2Fimo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/collagejs%2Fimo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/collagejs%2Fimo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/collagejs%2Fimo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/collagejs","download_url":"https://codeload.github.com/collagejs/imo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/collagejs%2Fimo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34309655,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-14T02:00:07.365Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["collagejs","import-map","import-maps","micro-frontend","micro-frontends","vite"],"created_at":"2026-06-12T04:02:04.383Z","updated_at":"2026-06-14T05:01:40.269Z","avatar_url":"https://github.com/collagejs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cimg src=\"https://raw.githubusercontent.com/collagejs/core/HEAD/src/logos/collagejs-48.svg\" alt=\"CollageJS Logo\" width=\"48\" height=\"48\" align=\"left\"\u003e\u0026nbsp;@collagejs/imo\n\nThis is *CollageJS*' version for the popular `import-map-overrides` from `single-spa`.  It has significant improvements in user interface and functionality while dropping support for non-standard modules.  If you still work with non-ES modules like `SystemJS`, this won't work for you.\n\n## Comparison to `import-map-overrides`\n\nThis is what they have in common:\n\n- Both process `overridable-importmap` scripts in the HEAD HTML element.\n- Both provide a way to override specific entries in the import map's `imports` section.\n- Both provide a user interface to manage entry overriding.\n\nThis is what's different:\n\n- This one cannot work with non-ES modules and has dropped all support for everythinig except `overridable-importmap`.\n- This one supports overriding entries in maps inside the import map's `scopes` section (experimental).\n- This one provides a modern and very fast user interface (powered by Svelte).\n- This one supports the `@collagejs/vite-aim` Vite plug-in by posting the resulting import map back to Vite development servers for bare module specifier resolution while in serve mode (`npm run dev`).\n\n## How To Use\n\nWhen doing *CollageJS* piece (micro-frontend) projects, we don't have to do much.  We simply tell the `@collagejs/vite-im` Vite plug-in to add it.  The plug-in will inject the map-overriding script and the user interface module (which itself is a *CollageJS* piece).  See that plug-in's documentation for more information.\n\n### Using On Its Own\n\nImport map overriding works outside the confines of *CollageJS* projects.  No problem.  Use it if you find it useful.  How, you say?  Before answering this question, one must know this package.\n\nThis is a 2-part project.  The NPM package contains:\n\n- The import-map-overriding script.  It is an IIFE that runs as soon as it is available.  Once it finishes, the import map will contain any defined overrides.\n- The *CollageJS* piece (micro-frontend).  This is the package's user interface that is used to manage overrides (add, remove, disable, etc.).  This is not required for the overriding functionality, but then one must provide a way to define overrides.  Your choice:  Use this UI, or figure out the values needed in local storage.\n\nℹ️ Both items above are bundled and minified inside the NPM package:\n\n- `dist/imo.min.js`:  The IIFE script.\n- `dist/ui/piece.js`:  The *CollageJS* piece (MFE) script.\n- `dist/ui/assets/cjcss(imo)piece.css`:  The piece's CSS.\n\n#### Referencing from CDN\n\nThis is the recommended way because it is simple, and bundling (the other option) doesn't really provide any advantages.  Everything works either way.\n\nIn your HTML page, after all overridable import maps, inject the script with a `\u003cscript\u003e` tag:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chead\u003e\n    \u003cscript type=\"overridable-importmap\"\u003e\n        {\n            \"imports\": {...},\n            \"scopes\": { ... }\n        }\n    \u003c/script\u003e\n    \u003c!-- ETC. Other overridable import maps, if any. --\u003e\n    \u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/@collagejs/imo@latest/dist/imo/imo.min.js\"\u003e\u003c/script\u003e\n    \u003cmeta name=\"collagejs-imo-base\" content=\"https://cdn.jsdelivr.net/npm/@collagejs/imo@latest/dist/imo\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    ...\n    \u003cscript type=\"module\" src=\"https://cdn.jsdelivr.net/npm/@collagejs/imo@latest/dist/imo/piece.min.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\nThe first script is the import-map-entry-overriding script; the second one in the body is an ES module that mounts the user interface.  The `\u003cmeta\u003e` element is to tell the *CollageJS* piece (MFE) where to find its CSS.  We're letting it know we didn't install it and that we're reading files from our CDN of choice.\n\n\u003e ⚠️ The above code uses `@latest` in the URL to pull the latest version, but you should **not** do this in production.  You should always fix your code to the version that you have tested and know it works.  But then again, maybe you don't want this in production, so we don't really know.  Do as you wish! 😁\n\n#### Bundling\n\nTODO:  This section needs verification.\n\nTo bundle the script that overrides import maps, simply import it from a project file:\n\n```typescript\nimport from '@collagejs/imo/imo';\n```\n\nAs for the UI, the script that mounts it is not available for import.  Instead, one can import the `imoUiFactory()` function and use to mount the UI under our own conditions:\n\n```typescript\nimport { imoUiFactory } from '@collagejs/imo';\n```\n\n\u003e ℹ️ See below for information on how to use it.\n\nThis will tell bundlers to bundle the associated code.  All that remains is the CSS, which can be bundled by importing it as a side effects module:\n\n```typescript\nimport from '@collagejs/imo/css';\n```\n\n## API\n\nOnly one API is exported from this NPM package.\n\n### imoUiFactory\n\nFunction that creates a CollageJS piece that can be mounted in a web document's DOM element.\n\n```typescript\nasync function imoUiFactory(options?: ImoUiFactoryOptions): Promise\u003cCorePiece\u003c{}\u003e\u003e;\n\nexport type ImoUiFactoryOptions = {\n    base?: string;\n    shadowDom?: boolean;\n    ui?: {\n        position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n        language?: string | undefined;\n        theme?: 'light' | 'dark' | 'system';\n        localStorageTrigger?: string | undefined;\n        glass?: {\n            enabled?: boolean;\n            opacity?: number;\n            blur?: number;\n            saturation?: number;\n        };\n    };\n}\n```\n\n#### Options\n\n- `base`: Base path used to locate the user interface's CSS.\n- `shadowDom`: Set to `true` to have the piece mount in Shadow DOM.\n- `ui.position`: The position of the dev-mode user interface being mounted.\n- `ui.language`: The language used in the user interface.\n- `ui.theme`: The user interface theme.\n- `ui.localStorageTrigger`: The name of the key that is defined in local storage to trigger the appearance of the user interface.\n- `ui.glass.enabled`: Enables the glass effects in the user interface.\n- `ui.glass.opacity`: Controls the opacity used to create the glass effect.\n- `ui.glass.blur`: Controls the blur used to create the glass effect.\n- `ui.glass.saturation`: Controls the saturation used to create the glass effect.\n\n\u003e 🚧 English is the only supported language for now.\n\n## Development\n\nThis repository contains, in essence, a **Vite + Svelte** project.  In other words:  A web application.  The build process, however, is not standard:  It's been changed to create bundles of a **CollageJS** piece (the IMO user interface, done in Svelte), plus an IIFE in charge of performing import map overriding.\n\n### Setting Up\n\nJust clone the repository, then install packages:\n\n```bash\nnpm install\n```\n\nAt this point, things should work.  Run Vite's development server.  The project runs in port `4444`:\n\n```bash\nnpm run dev\n```\n\n### Build Setup\n\nVite is used for building.  It has been given 3 plug-ins:\n\n- **CollageJS**' `@collagejs/vite-css`, which is the one used by micro-frontend projects that configures the entry points and injects the CSS mounting algorithm.\n- An ad-hoc `viteTest()` plug-in that injects a simple overridable import map into the HTML's HEAD element.\n- An ad-hoc `viteIife()` plug-in in charge of creating the IIFE bundle of the code that overrides import maps.\n\nThe rest is standard Vite configuration where minification is turned on and the output filename pattern is defined.\n\n#### post-build.ps1\n\nIn order to build, Powershell is needed because there is this small PS script that put the files where package.json states they will be.\n\nAnything Vite cannot do by itself now or in the future that is needed for building, will be added to this post-building script.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcollagejs%2Fimo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcollagejs%2Fimo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcollagejs%2Fimo/lists"}