@yodaos-jsar/dom NPM

JSAR-DOM

This 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.

This 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.

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.
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.

Features

Web-standards APIs notably including WHATWG DOM, CSSOM, WebXR and XSML.
ECMAScript Modules with TypeScript, WebAssembly and non-script assets supports.
No Build At All to get started for application developers.

Getting Started

JSAR-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:

import { JSARDOM } from '@yodaos-jsar/dom';
// or
const { JSARDOM } = require('@yodaos-jsar/dom');

Then you can use it exactly as you would use jsdom:

const dom = new JSARDOM(`
<xsml>
  <head>
    <style>
      cube {
        rotation: 0 45 30;
      }
      plane {
        position: 0.25 0.5 -1;
      }
    </style>
  </head>
  <space>
    <cube />
    <plane height="0.5" width="1.5">
      <div>
        <span>Hello JSAR!</span>
        <span style="font-size: 50px;">Type your XSML in the below input</span>
      </div>
      <style type="text/css">
        div {
          display: flex;
          flex-direction: column;
          height: 100%;
          width: 100%;
          gap: 20px;
        }
        span {
          flex: 1;
          color: red;
          font-size: 150px;
          line-height: 1.5;
        }
      </style>
    </plane>
  </space>
</xsml>
`, {
  url: 'https://m-creativelab.github.io/jsar-dom/',
  nativeDocument: yourNativeDocument,
});

await dom.load();

The above code is available at https://m-creativelab.github.io/jsar-dom/.

Because 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.

Using headless `NativeDocument` implementation

If 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.

$ ts-node src/impl-headless.ts ./fixtures/simple.xsml

At 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.

Using Babylon.js `NativeDocument` implementation

Inside 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 engine on classic Web browsers.

To use it, open the GitHub hosted m-creativelab.github.io/jsar-dom or build locally by following instructions:

$ cd pages
$ npm install
$ npx webpack
$ open ./index.html

npm.io

Then you could type a HTTP or HTTPS URL of a XSML to view in the browser.

Babylon.js Implementation is a good example of how to integrate JSAR-DOM applications into a classic Web ecosystem, see ./pages/impl-babylonjs.ts for the full source code.

Installation

npm install @yodaos-jsar/dom

What's XSML?

XSML: eXtensible Spatial Markup Language.

It 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.

Why not X3D
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.

An example of XSML:

<xsml>
  <head>
    <title>Hello JSAR-DOM</title>
  </head>
  <space>
    <sphere />
  </space>
</xsml>

What's SCSS?

SCSS: Spatial Cascading Style Sheets.

It'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.

An example of SCSS:

@material litered {
  diffuse-color: red;
}

sphere {
  scaling: 1.2 1.2 1;
  material: "litered"
}

License

See Apache-2.0.

dom jsar

@everything-registry/sub-chunk-1042

0.3.1-alpha.20240510.1715335774270

22 hours ago

0.3.1-alpha.20240509.1715249409796

2 days ago

0.3.1-alpha.20240508.1715162908198

3 days ago

0.3.1-alpha.20240507.1715076593248

4 days ago

0.3.1-alpha.20240506.1714990141740

5 days ago

0.3.1-alpha.20240505.1714903729193

6 days ago

0.3.1-alpha.20240504.1714817277300

7 days ago

0.3.1-alpha.20240503.1714730953949

8 days ago

0.3.1-alpha.20240502.1714644568452

9 days ago

0.3.1-alpha.20240501.1714558176642

10 days ago

0.3.1-alpha.20240430.1714471758916

11 days ago

0.3.1-alpha.20240429.1714385354913

12 days ago

0.3.1-alpha.20240428.1714298872055

13 days ago

0.3.1-alpha.20240427.1714212586934

14 days ago

0.3.1-alpha.20240426.1714126104573

15 days ago

0.3.1-alpha.20240425.1714039725377

16 days ago

0.3.1-alpha.20240424.1713953404071

17 days ago

0.3.1-alpha.20240423.1713866924058

18 days ago

0.3.1-alpha.20240422.1713780601868

19 days ago

0.3.1-alpha.20240421.1713694050413

20 days ago

0.3.1-alpha.20240420.1713607712538

21 days ago

0.3.1-alpha.20240419.1713521315722

22 days ago

0.3.1-alpha.20240418.1713434978462

23 days ago

0.3.1-alpha.20240417.1713348579138

24 days ago

0.3.1-alpha.20240416.1713262120806

25 days ago

0.3.1-alpha.20240415.1713175642733

26 days ago

0.3.1-alpha.20240414.1713094201463

27 days ago

0.3.1-alpha.20240413.1713002857929

28 days ago

0.3.1-alpha.20240412.1712916541204

29 days ago

0.3.1-alpha.20240411.1712830151428

30 days ago

0.3.1-alpha.20240410.1712743691957

1 month ago

0.3.1-alpha.20240409.1712657352874

1 month ago

0.3.1-alpha.20240408.1712571019351

1 month ago

0.3.1-alpha.20240407.1712484461440

1 month ago

0.3.1-alpha.20240406.1712398117377

1 month ago

0.3.1-alpha.20240405.1712311753189

1 month ago

0.3.1-alpha.20240404.1712225306318

1 month ago

0.3.1-alpha.20240402.1712052575677

1 month ago

0.3.1-alpha.20240403.1712138962629

1 month ago

0.3.1-alpha.20240401.1711966193855

1 month ago

0.3.1-alpha.20240331.1711879638441

1 month ago

0.3.1-alpha.20240330.1711793303781

1 month ago

0.3.1-alpha.20240329.1711706947980

1 month ago

0.3.1-alpha.20240328.1711620515402

1 month ago

0.3.1-alpha.20240327.1711534115997

1 month ago

0.3.1-alpha.20240326.1711447766077

2 months ago

0.3.1-alpha.20240325.1711361323646

2 months ago

0.3.1-alpha.20240324.1711274907383

2 months ago

0.3.1-alpha.20240323.1711188500810

2 months ago

0.3.1-alpha.20240322.1711102088538

2 months ago

0.3.1-alpha.20240321.1711015692091

2 months ago

0.3.1-alpha.20240320.1710929309591

2 months ago

0.3.1-alpha.20240319.1710842914558

2 months ago

0.3.1-alpha.20240318.1710756559489

2 months ago

0.3.1-alpha.20240317.1710670054149

2 months ago

0.3.1-alpha.20240316.1710583698924

2 months ago

0.3.1-alpha.20240315.1710497271856

2 months ago

0.3.1-alpha.20240313.1710324517267

2 months ago

0.3.1-alpha.20240314.1710410911256

2 months ago

0.3.1-alpha.20240312.1710238114481

2 months ago

0.3.1-alpha.20240311.1710151828553

2 months ago

0.3.1-alpha.20240310.1710065232042

2 months ago

0.3.1-alpha.20240309.1709978901787

2 months ago

0.3.1-alpha.20240308.1709892567931

2 months ago

0.3.1-alpha.20240307.1709806097526

2 months ago

0.3.1-alpha.20240306.1709719732432

2 months ago

0.3.1-alpha.20240305.1709633350062

2 months ago

0.3.1-alpha.20240304.1709551230142

2 months ago

0.3.1-alpha.20240303.1709460533679

2 months ago

0.3.1-alpha.20240302.1709374046195

2 months ago

0.3.1-alpha.20240301.1709287720105

2 months ago

0.3.1-alpha.20240229.1709201298082

2 months ago

0.3.1-alpha.20240228.1709114935225

2 months ago

0.3.1-alpha.20240227.1709028523596

2 months ago

0.3.1-alpha.20240224.1708769226038

3 months ago

0.3.1-alpha.20240225.1708855638917

3 months ago

0.3.1-alpha.20240222.1708596491686

3 months ago

0.3.1-alpha.20240226.1708942141003

2 months ago

0.3.1-alpha.20240223.1708682951582

3 months ago

0.3.1-alpha.20240221.1708510134951

3 months ago

0.3.1-alpha.20240219.1708337352035

3 months ago

0.3.1-alpha.20240220.1708423706802

3 months ago

0.3.1-alpha.20240218.1708250833201

3 months ago

0.3.1-alpha.20240217.1708164451817

3 months ago

0.3.1-alpha.20240216.1708078093891

3 months ago

0.3.1-alpha.20240215.1707991733285

3 months ago

0.3.1-alpha.20240214.1707905326529

3 months ago

0.3.1-alpha.20240213.1707818896018

3 months ago

0.3.1-alpha.20240212.1707732633967

3 months ago

0.3.1-alpha.20240211.1707646066621

3 months ago

0.3.1-alpha.20240210.1707559642668

3 months ago

0.3.1-alpha.20240209.1707473302075

3 months ago

0.3.1-alpha.20240208.1707386887616

3 months ago

0.3.1-alpha.20240207.1707300556422

3 months ago

0.3.1-alpha.20240206.1707214105307

3 months ago

0.3.1-alpha.20240204.1707041280704

3 months ago

0.3.1-alpha.20240205.1707127754549

3 months ago

0.3.1-alpha.20240203.1706954863582

3 months ago

0.3.1-alpha.20240202.1706868536973

3 months ago

0.3.1-alpha.20240201.1706782128127

3 months ago

0.3.1-alpha.20240131.1706695699961

3 months ago

0.3.1-alpha.20240129.1706522928344

3 months ago

0.3.1-alpha.20240130.1706609366117

3 months ago

0.3.1

3 months ago

0.3.1-alpha.20240128.1706436433789

3 months ago

0.3.1-alpha.20240127.1706350011124

3 months ago

0.3.1-alpha.20240125.1706177321612

4 months ago

0.3.1-alpha.20240126.1706284416742

4 months ago

0.3.1-alpha.20240126.1706263683236

4 months ago

0.3.1-alpha.20240125.1706175760704

4 months ago

0.3.1-alpha.20240124.1706104125284

4 months ago

0.3.1-alpha.20240124.1706090932301

4 months ago

0.3.1-alpha.20240123.1706015126214

4 months ago

0.3.1-alpha.20240123.1706004533265

4 months ago

0.3.1-alpha.20240121.1705831707095

4 months ago

0.3.1-alpha.20240122.1705918165751

4 months ago

0.3.1-alpha.20240120.1705745273350

4 months ago

0.3.1-alpha.20240119.1705658916469

4 months ago

0.3.1-alpha.20240118.1705570624102

4 months ago

0.3.1-alpha.20240118.1705572560270

4 months ago

0.3.1-alpha.20240118.1705567476168

4 months ago

0.3.1-alpha.20240118.1705563328166

4 months ago

0.3.1-alpha.20240118.1705566500122

4 months ago

0.3.1-alpha.20240117.1705494038380

4 months ago

0.3.1-alpha.20240117.1705486144927

4 months ago

0.3.1-alpha.20240117.1705482422789

4 months ago

0.3.1-alpha.20240117.1705489415653

4 months ago

0.3.1-alpha.20240114.1705226898283

4 months ago

0.3.1-alpha.20240115.1705321670227

4 months ago

0.3.1-alpha.20240115.1705313361079

4 months ago

0.3.1-alpha.20240116.1705405313440

4 months ago

0.3.1-alpha.20240116.1705382341741

4 months ago

0.3.1-alpha.20240115.1705300640525

4 months ago

0.3.1-alpha.20240116.1705377856735

4 months ago

0.3.1-alpha.20240116.1705399733599

4 months ago

0.3.1-alpha.20240116.1705411698969

4 months ago

0.3.1-alpha.20240115.1705325552061

4 months ago

0.3.1-alpha.20240113.1705140461766

4 months ago

0.3.1-alpha.20240112.1705064837464

4 months ago

0.3.1-alpha.20240112.1705054140490

4 months ago

0.3.1-alpha.20240111.1704967716436

4 months ago

0.3.1-alpha.20240110.1704894941790

4 months ago

0.3.1-alpha.20240110.1704892084485

4 months ago

0.3.1-alpha.20240110.1704887519991

4 months ago

0.3.1-alpha.20240110.1704881317025

4 months ago

0.3.1-alpha.20240109.1704794936071

4 months ago

0.3.1-alpha.20240108.1704734731524

4 months ago

0.3.1-alpha.20240105.1704435574820

4 months ago

0.3.1-alpha.20240104.1704362921170

4 months ago

0.3.1-alpha.20240102.1704190101947

4 months ago

0.3.1-alpha.20240103.1704242506912

4 months ago

0.3.1-alpha.20240103.1704276498462

4 months ago

0.3.1-alpha.20240101.1704103734812

4 months ago

0.3.1-alpha.20231231.1704017268775

4 months ago

0.3.1-alpha.20231230.1703930859224

4 months ago

0.3.1-alpha.20231229.1703880718155

4 months ago

0.3.1-alpha.20231229.1703844508269

4 months ago

0.3.1-alpha.20231228.1703758110742

4 months ago

0.3.1-alpha.20231227.1703671709802

5 months ago

0.3.1-alpha.20231226.1703585287791

5 months ago

0.3.1-alpha.20231223.1703326040549

5 months ago

0.3.1-alpha.20231224.1703412476143

5 months ago

0.3.1-alpha.20231223.1703294748437

5 months ago

0.3.1-alpha.20231225.1703498954867

5 months ago

0.3.1-alpha.20231223.1703356856891

5 months ago

0.3.1-alpha.20231223.1703363798558

5 months ago

0.3.0-alpha.20231222.1703239700675

5 months ago

0.3.0

5 months ago

0.3.0-alpha.20231221.1703153321343

5 months ago

0.3.0-alpha.20231220.1703066833824

5 months ago

0.3.0-alpha.20231219.1703005089039

5 months ago

0.3.0-alpha.20231219.1703007140301

5 months ago

0.3.0-alpha.20231219.1702972272440

5 months ago

0.3.0-alpha.20231219.1702973144205

5 months ago

0.3.0-alpha.20231218.1702908678074

5 months ago

0.3.0-alpha.20231219.1702980023769

5 months ago

0.3.0-alpha.20231219.1702973574921

5 months ago

0.3.0-alpha.20231219.1702981553858

5 months ago

0.3.0-alpha.20231219.1702980984182

5 months ago

0.3.0-alpha.20231218.1702894627223

5 months ago

0.3.0-alpha.20231218.1702894664685

5 months ago

0.3.0-alpha.20231217.1702808072622

5 months ago

0.3.0-alpha.20231216.1702721658462

5 months ago

0.3.0-alpha.20231217.1702811555330

5 months ago

0.3.0-alpha.20231215.1702635424846

5 months ago

0.3.0-alpha.20231215.1702629034464

5 months ago

0.3.0-alpha.20231215.1702628492008

5 months ago

0.3.0-alpha.20231215.1702645378796

5 months ago

0.3.0-alpha.20231215.1702628561003

5 months ago

0.3.0-alpha.20231214.1702580811140

5 months ago

0.3.0-alpha.20231214.1702574193124

5 months ago

0.3.0-alpha.20231214.1702580734110

5 months ago

0.3.0-alpha.20231214.1702574063307

5 months ago

0.3.0-alpha.20231214.1702574759359

5 months ago

0.3.0-alpha.20231214.1702582005508

5 months ago

0.3.0-alpha.20231214.1702574693716

5 months ago

0.3.0-alpha.20231214.1702581904875

5 months ago

0.3.0-alpha.20231214.1702548681714

5 months ago

0.3.0-alpha.20231214.1702549703626

5 months ago

0.3.0-alpha.20231214.1702564510439

5 months ago

0.3.0-alpha.20231214.1702548800806

5 months ago

0.3.0-alpha.20231214.1702564671965

5 months ago

0.3.0-alpha.20231214.1702549960938

5 months ago

0.3.0-alpha.20231214.1702549405182

5 months ago

0.3.0-alpha.20231214.1702549056392

5 months ago

0.3.0-alpha.20231214.1702540900162

5 months ago

0.3.0-alpha.20231214.1702541045816

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

JSAR-DOM

Features

Getting Started

Using headless NativeDocument implementation

Using Babylon.js NativeDocument implementation

Installation

What's XSML?

What's SCSS?

License

Using headless `NativeDocument` implementation

Using Babylon.js `NativeDocument` implementation