{"id":13716219,"url":"https://github.com/M-CreativeLab/jsar-dom","last_synced_at":"2025-05-07T05:32:25.177Z","repository":{"id":210156560,"uuid":"721074653","full_name":"M-CreativeLab/jsar-dom","owner":"M-CreativeLab","description":"The 3D-first designed DOM implementation for XR applications","archived":false,"fork":false,"pushed_at":"2024-09-02T03:29:39.000Z","size":9616,"stargazers_count":38,"open_issues_count":7,"forks_count":2,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-05T23:24:45.880Z","etag":null,"topics":["dom","jsar","webxr","xr"],"latest_commit_sha":null,"homepage":"https://m-creativelab.github.io/jsar-dom/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/M-CreativeLab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2023-11-20T09:59:56.000Z","updated_at":"2024-12-11T00:04:19.000Z","dependencies_parsed_at":"2024-08-15T06:21:53.393Z","dependency_job_id":"81472621-9c1e-46ff-9ac4-dccf5a8016df","html_url":"https://github.com/M-CreativeLab/jsar-dom","commit_stats":null,"previous_names":["m-creativelab/jsar-dom"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/M-CreativeLab%2Fjsar-dom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/M-CreativeLab%2Fjsar-dom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/M-CreativeLab%2Fjsar-dom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/M-CreativeLab%2Fjsar-dom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/M-CreativeLab","download_url":"https://codeload.github.com/M-CreativeLab/jsar-dom/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252823157,"owners_count":21809702,"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":["dom","jsar","webxr","xr"],"created_at":"2024-08-03T00:01:08.199Z","updated_at":"2025-05-07T05:32:21.648Z","avatar_url":"https://github.com/M-CreativeLab.png","language":"TypeScript","funding_links":[],"categories":["Development"],"sub_categories":["Frameworks and Libraries"],"readme":"# JSAR-DOM\n\n[![npm version](https://badge.fury.io/js/@yodaos-jsar%2Fdom.svg)](https://badge.fury.io/js/@yodaos-jsar%2Fdom)\n[![Build Status](https://github.com/M-CreativeLab/jsar-dom/actions/workflows/build.yml/badge.svg)](https://github.com/M-CreativeLab/jsar-dom/actions/workflows/build.yml)\n[![Integration Test Status](https://github.com/M-CreativeLab/jsar-dom/actions/workflows/integration-tests-build.yml/badge.svg)](https://github.com/M-CreativeLab/jsar-dom/actions/workflows/integration-tests-build.yml)\n\nThis project JSAR-DOM is a [TypeScript][] implementation of many Web standards, notably the WHATWG [DOM][], [CSSOM][], [WebXR][] and XSML, for use in Node.js and browser.\n\nThis project is a part of the [JSAR][], which is a Web-compatible runtime for integrating XR applications (especially Interactive Digital Product) into native environments like Unity.\n\n\u003e JSAR-DOM is a fork of [jsdom/jsdom][] project and its children projects with a [TypeScript][] rewrite and added the support for XSML and SCSS.\n\n\u003e **Interactive Digital Product (IDP)** represents a virtual entity designed to digitally replicate and interactively showcase real-world products in metaverse. This representation emphasizes the digital nature of the item, allowing users to engage with it in an interactive manner. IDPs serve as dynamic and immersive digital counterparts to physical products, offering a novel and engaging user experience within a virtual environment.\n\n## Features\n\n- **Web-standards APIs** notably including WHATWG [DOM][], [CSSOM][], [WebXR][] and XSML.\n- **ECMAScript Modules** with [TypeScript][], [WebAssembly][] and non-script assets supports.\n- **No Build At All** to get started for application developers.\n\n## Getting Started\n\nJSAR-DOM is designed to be a drop-in and easy-to-use replacement for the `jsdom` package. After installing it, you just need to change your `require` or `import` call from `jsdom` to `@yodaos-jsar/dom`:\n\n```js\nimport { JSARDOM } from '@yodaos-jsar/dom';\n// or\nconst { JSARDOM } = require('@yodaos-jsar/dom');\n```\n\nThen you can use it exactly as you would use `jsdom`:\n\n```js\nconst dom = new JSARDOM(`\n\u003cxsml\u003e\n  \u003chead\u003e\n    \u003cstyle\u003e\n      cube {\n        rotation: 0 45 30;\n      }\n      plane {\n        position: 0.25 0.5 -1;\n      }\n    \u003c/style\u003e\n  \u003c/head\u003e\n  \u003cspace\u003e\n    \u003ccube /\u003e\n    \u003cplane height=\"0.5\" width=\"1.5\"\u003e\n      \u003cdiv\u003e\n        \u003cspan\u003eHello JSAR!\u003c/span\u003e\n        \u003cspan style=\"font-size: 50px;\"\u003eType your XSML in the below input\u003c/span\u003e\n      \u003c/div\u003e\n      \u003cstyle type=\"text/css\"\u003e\n        div {\n          display: flex;\n          flex-direction: column;\n          height: 100%;\n          width: 100%;\n          gap: 20px;\n        }\n        span {\n          flex: 1;\n          color: red;\n          font-size: 150px;\n          line-height: 1.5;\n        }\n      \u003c/style\u003e\n    \u003c/plane\u003e\n  \u003c/space\u003e\n\u003c/xsml\u003e\n`, {\n  url: 'https://m-creativelab.github.io/jsar-dom/',\n  nativeDocument: yourNativeDocument,\n});\n\nawait dom.load();\n```\n\u003e The above code is available at https://m-creativelab.github.io/jsar-dom/.\n\nBecause JSAR-DOM is not going to be a emulator of the traditional browser, it's an in-production implementation of the WHATWG [DOM][], [CSSOM][], [WebXR][] and XSML for XR applications, so an instance of implementing the `NativeDocument` interface must be pass to the constructor, which implemented the underlying stuffs like rendering and event handling.\n\n### Using headless `NativeDocument` implementation\n\nIf you want to use JSAR-DOM in a headless environment, you can use the `HeadlessNativeDocument` implementation, which is a headless implementation of the `NativeDocument` interface.\n\n```sh\n$ ts-node src/impl-headless.ts ./fixtures/simple.xsml\n```\n\nAt JSAR-DOM project, we use the this implementation for tests purpose, you could also use it to see how to write a `NativeDocument` implementation, or just run a XSML application in a headless environment.\n\n### Using Babylon.js `NativeDocument` implementation\n\nInside the JSAR-DOM project, we also provide a Babylon.js implementation of the `NativeDocument` interface, which is an implementation of the `NativeDocument` interface based on the [Babylon.js](https://www.babylonjs.com/) engine on classic Web browsers.\n\nTo use it, open the GitHub hosted [m-creativelab.github.io/jsar-dom](https://m-creativelab.github.io/jsar-dom/) or build locally by following instructions:\n\n```sh\n$ cd pages\n$ npm install\n$ npx webpack\n$ open ./index.html\n```\n\n![](pages/screenshot.png)\n\nThen you could type a HTTP or HTTPS URL of a XSML to view in the browser.\n\n\u003e Babylon.js Implementation is a good example of how to integrate JSAR-DOM applications into a classic Web ecosystem, see [./pages/impl-babylonjs.ts](./pages/impl-babylonjs.ts) for the full source code.\n\n## Installation\n\n```sh\nnpm install @yodaos-jsar/dom\n```\n\n## What's XSML?\n\nXSML: eXtensible Spatial Markup Language.\n\nIt is a XML-based markup language for describing XR applications. It's designed to be a subset of HTML, and it's also a part of the JSAR project.\n\n\u003e **Why not X3D**\n\u003e\n\u003e [X3D][] is a great standard for describing 3D scenes after [VRML][], but it's not designed for Web developers and not extending the HTML standard, XSML is designed to be a subset of HTML and it's easy to learn for Web developers.\n\nAn example of XSML:\n\n```xml\n\u003cxsml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eHello JSAR-DOM\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cspace\u003e\n    \u003csphere /\u003e\n  \u003c/space\u003e\n\u003c/xsml\u003e\n```\n\n## What's SCSS?\n\nSCSS: Spatial Cascading Style Sheets.\n\nIt's a CSS-like language for styling XSML elements, it's designed to be a part of new CSS standard and compatible with the CSS3 standard. SCSS added some new features for styling spatial elements, like `rotation`, `position`, `scaling`, materials and textures.\n\nAn example of SCSS:\n\n```css\n@material litered {\n  diffuse-color: red;\n}\n\nsphere {\n  scaling: 1.2 1.2 1;\n  material: \"litered\"\n}\n```\n\n## License\n\nSee [Apache-2.0](./LICENSE).\n\n[jsdom/jsdom]: https://github.com/jsdom/jsdom\n[DOM]: https://dom.spec.whatwg.org/\n[CSSOM]: https://drafts.csswg.org/cssom/\n[WebXR]: https://www.w3.org/TR/webxr/\n[JSAR]: https://jsar.netlify.app/\n[X3D]: https://en.wikipedia.org/wiki/X3D\n[VRML]: https://en.wikipedia.org/wiki/VRML\n[TypeScript]: https://www.typescriptlang.org/\n[WebAssembly]: https://webassembly.org/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FM-CreativeLab%2Fjsar-dom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FM-CreativeLab%2Fjsar-dom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FM-CreativeLab%2Fjsar-dom/lists"}