{"id":22160368,"url":"https://github.com/rozek/yjs-bundle","last_synced_at":"2025-07-26T09:31:29.121Z","repository":{"id":173349022,"uuid":"623429251","full_name":"rozek/yjs-bundle","owner":"rozek","description":"bundles several yjs packages in a single module in order to avoid \"Yjs was already imported\" problems","archived":false,"fork":false,"pushed_at":"2025-04-02T13:53:23.000Z","size":2691,"stargazers_count":2,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-04T10:43:17.866Z","etag":null,"topics":["y-indexeddb","y-keyvalue","y-webrtc","y-websocket","yjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/rozek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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}},"created_at":"2023-04-04T11:01:41.000Z","updated_at":"2025-04-02T13:53:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"5a391f95-0e89-4150-bb8f-01167aca5d43","html_url":"https://github.com/rozek/yjs-bundle","commit_stats":null,"previous_names":["rozek/yjs-bundle"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rozek/yjs-bundle","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fyjs-bundle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fyjs-bundle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fyjs-bundle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fyjs-bundle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rozek","download_url":"https://codeload.github.com/rozek/yjs-bundle/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rozek%2Fyjs-bundle/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267145508,"owners_count":24042650,"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","status":"online","status_checked_at":"2025-07-26T02:00:08.937Z","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":["y-indexeddb","y-keyvalue","y-webrtc","y-websocket","yjs"],"created_at":"2024-12-02T04:07:35.909Z","updated_at":"2025-07-26T09:31:28.583Z","avatar_url":"https://github.com/rozek.png","language":"TypeScript","readme":"# yjs-bundle #\n\nbundles several yjs packages in a single module in order to avoid \"[Yjs was already imported](https://github.com/yjs/yjs/issues/438)\" problems\n\n## Background ##\n\nWhen using [Yjs](https://github.com/yjs/yjs) in a browser (or another no-build environment, typical import statements such as\n\n```\nimport * as Y                from 'yjs'\nimport { WebsocketProvider } from 'y-websocket'\nimport { YKeyValue }         from 'y-utility/y-keyvalue'\n```\n\nmay lead to a **completely unpredictable behaviour of Yjs**.\n\nA brief look into the browser console will reveal one or multiple error messages starting with `Yjs was already imported. This breaks constructor checks and will lead to issues!`\n\nAs written by [dmonad](https://github.com/dmonad): this message has to be taken seriously - **Yjs will not work as expected**!\n\nBut how does it then become possible to use Yjs within a browser without having to use a build environment (which will collect all required imports and build a large package including every import only once - together with other advantages)?\n\nOne possibility is to just bundle Yjs and all packages that depend on it into one module which may then be safely imported into a script - such an approach is by no means elegant but makes Yjs usable even within no-build environments.\n\nThis is what this repo wants to provide.\n\nIt currently bundles\n\n* Yjs\n* y-indexeddb\n* y-websocket\n* y-webrtc\n* y-keyvalue and\n* y-lwwmap\n\ninto a single monolith.\n\n## Usage ##\n\nAs a consequence, import statements like those shown above will either have to be rewritten as\n\n```\nimport * as Y                from 'https://rozek.github.io/yjs-bundle/dist/yjs-bundle.esm.js'\nimport { WebsocketProvider } from 'https://rozek.github.io/yjs-bundle/dist/yjs-bundle.esm.js'\nimport { YKeyValue }         from 'https://rozek.github.io/yjs-bundle/dist/yjs-bundle.esm.js'\nimport { LWWMap }            from 'https://rozek.github.io/yjs-bundle/dist/yjs-bundle.esm.js'\n```\n\nor - and that's the **recommended approach** - you will have to provide an importmap with the following contents:\n\n```\n\u003cscript type=\"importmap\"\u003e\n{\n  \"imports\": {\n    \"yjs\":          \"https://rozek.github.io/yjs-bundle/dist/yjs-bundle.esm.js\",\n    \"y-indexeddb\":  \"https://rozek.github.io/yjs-bundle/dist/yjs-bundle.esm.js\",\n    \"y-websocket\":  \"https://rozek.github.io/yjs-bundle/dist/yjs-bundle.esm.js\",\n    \"y-webrtc\":     \"https://rozek.github.io/yjs-bundle/dist/yjs-bundle.esm.js\",\n    \"y-utility/y-keyvalue\":\"https://rozek.github.io/yjs-bundle/dist/yjs-bundle.esm.js\",\n    \"y-lwwmap\":     \"https://rozek.github.io/yjs-bundle/dist/yjs-bundle.esm.js\"\n  }\n}\n\u003c/script\u003e\n```\n\nand use the same import statements as shown in the docs.\n\nThe **potential disadvantage of importmaps**, however, is that you - or your customers - will need a reasonably modern browser. Definitely supported browsers include:\n\n* Chrome ≥ 89\n* MS Edge ≥ 89\n* Safari ≥ 16.4\n* Firefox ≥ 108\n* Opera ≥ 76\n\u003cbr\u003e\u0026nbsp;\u003cbr\u003e\n* Chrome for Android ≥ 111\n* Safari on iOS ≥ 16.4\n\n(see \"[Can I use](https://caniuse.com/import-maps)\" for additional details, especially if your browser is not listed above)\n \n## Build Instructions ##\n\nYou may easily build this package yourself.\n\nJust install [NPM](https://docs.npmjs.com/) according to the instructions for your platform and follow these steps:\n\n1. either clone this repository using [git](https://git-scm.com/) or [download a ZIP archive](https://github.com/rozek/yjs-bundle/archive/refs/heads/main.zip) with its contents to your disk and unpack it there \n2. open a shell and navigate to the root directory of this repository\n3. run `npm install` in order to install the complete build environment\n4. execute `npm run build` to create a new build\n\nYou may also look into the author's [build-configuration-study](https://github.com/rozek/build-configuration-study) for a general description of his build environment.\n\n## License ##\n\n[MIT License](LICENSE.md)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frozek%2Fyjs-bundle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frozek%2Fyjs-bundle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frozek%2Fyjs-bundle/lists"}