hnxml

hnxml include Hnxml Standard and hnxml.js

Hnxml Standard is a TypeScript-based XML schema specification for Hacknet Extension, and it is defined by hnxml.js. hnxml.js provides JSX/TSX compatible authoring support with types and additional generator tools for Hacknet-related content generating.

Example: PCS-OS

Hnxml Standard

You can access Hnxml Standard through:

• Website generated by Typedoc: hnxml.js.org (Most recommended)
• Source code: GitHub Repository
• JSR package page

Use hnxml.js with TSX

Add package @modernschoolproject/hnxml. Check the hnxml JSR package page to see how to install JSR packages using other package managers.

deno add jsr:@modernschoolproject/hnxml # deno 
npx jsr add @modernschoolproject/hnxml # npm
pnpm i jsr:@modernschoolproject/hnxml # pnpm
Copy

Edit compilerOptions in tsconfig.json or deno.json

{
  "compilerOption": {
    "jsx": "react-jsx",
    "jsxImportSource": "@modernschoolproject/hnxml"
  }
}
Copy

Then create a .jsx or .tsx file and import render from hnxml/jsx. For example:

// main.tsx
import { render } from "@modernschoolproject/hnxml/jsx";

console.log(
  render(
    <mission
      id="missionID"
      activeCheck="true"
      shouldIgnoreSenderVerification="true"
    >
      ...
    </mission>,
  ).end({
    headless: true,
    prettyPrint: true,
    allowEmptyTags: false,
    spaceBeforeSlash: true,
  }),
);
Copy

Tips: you can use this way to set default XMLBuilderCreateOptions.

// render.ts
import { render as _render } from "hnxml/jsx";
import { JsxXmlElement } from "hnxml/jsx-runtime";

export function render(element: JsxXmlElement): string {
  return _render(element).end({
    headless: true,
    prettyPrint: true,
    allowEmptyTags: false,
    spaceBeforeSlash: true,
  });
}
Copy

// main.tsx
import { render } from "./render.ts";

console.log(
  <mission
    id="missionID"
    activeCheck="true"
    shouldIgnoreSenderVerification="true"
  >
    ...
  </mission>,
);
Copy