how to import "jquery.terminal/js/xml_formatting.js" #1001

rikkarth · 2025-01-04T19:01:15Z

rikkarth
Jan 4, 2025

Hi everyone,

I would like to ask if any of you know how to import "jquery.terminal/js/xml_formatting.js" using npm modules.

This is how I'm currently using jquery.terminal and it's working well - but without xml_formatting.

import jQuery from "jquery";
import jQueryTerminal from "jquery.terminal";
import "jquery.terminal/js/xml_formatting.js" // i try to import here but xml tags are parsed literally (raw)
import "jquery.terminal/css/jquery.terminal.css";

const $ = jQueryTerminal(jQuery, this);

// package.json
{
  "devDependencies": {
    "vite": "^6.0.5"
  },
  "dependencies": {
    "figlet": "^1.8.0",
    "jquery": "^3.7.1",
    "jquery.terminal": "^2.44.1",
  }
}

References where I sourced the solution from:

I'm using only vanilla JS, NPM and Vite.

How to reproduce

1. Create a new JS project using Vite and just accept the defaults

npm create vite@latest

This will create a very basic JS project.

2. Install jquery and jquery.terminal using NPM

npm install jquery

npm install jquery.terminal

3. Cleanup the project for our test

Delete everything in main.js
(Optional) you can also cleanup the index.html and delete all the other files, but this won't have any impact.

You should have this index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

I prepared a simple terminal with just a prompt for our test

import jQuery from "jquery";
import jQueryTerminal from "jquery.terminal";
import "jquery.terminal/js/xml_formatting.js"; // i try to import here but xml tags are parsed literally (raw)
import "jquery.terminal/css/jquery.terminal.css";

const $ = jQueryTerminal(jQuery, this);

const root = "~";
let cwd = root;

function options() {
  return {
    greetings: false,
    checkArity: false,
    exit: false,
    completion: true,
    prompt: prompt,
  };
}

function prompt() {
  const user = "guest";
  const server = "jquery.terminal";
  return `[[;lightgreen;]${user}][[;fuchsia;]@][[;orange;]${server}]:[[;aqua;]${cwd}][[;fuchsia;]$] `;
}

function promptXml() {
  const user = "guest";
  const server = "jquery.terminal";
  return `<lightgreen>${user}</lightgreen><Fuchsia>@</Fuchsia><orange>${server}:</orange><aqua>${cwd}</aqua><Fuchsia>$</Fuchsia> `;
}

function commands() {
  return {
    echo(...args) {
      if (args.length > 0) {
        this.echo(args.join(" "));
      }
    },
  };
}

$("body").terminal(commands(), options()); // render the terminal

This should produce a terminal like this

Testing XML

Now if I swap the prompt() function with promptXml() - this is how the terminal is rendered

When working in CDN mode, everything works, including the xml, but I really need this to work with the installed modules and ideally with import statements.

I hope I was able to provide all the context from my question and I will appreciate it a lot if you can help me solve this one. Thank you! I really like this library. :)

jcubic · 2025-01-04T20:47:50Z

jcubic
Jan 4, 2025
Maintainer

You import it the same as jQuery Terminal

import $ from 'jquery';
import Terminal from "jquery.terminal";
import XMLFormatter from "jquery.terminal/js/xml_formatting.js";
import "jquery.terminal/css/jquery.terminal.css";

Terminal(window, $);
XMLFormatter(window, $);

$('body').terminal({
    echo(...args) {
        this.echo(`<white>${args.join(' ')}</white>`);
    }
}, {
    checkArity: false
});

And jQuery is optional because Terminal import it if it's not defined, so you can use code like this:

import Terminal from "jquery.terminal";
import XMLFormatter from "jquery.terminal/js/xml_formatting.js";
import "jquery.terminal/css/jquery.terminal.css";

const $ = Terminal(window);
XMLFormatter(window, $);

1 reply

rikkarth Jan 4, 2025
Author

This worked flawlessly! Thank you so much! I really appreciate it!!!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

how to import "jquery.terminal/js/xml_formatting.js" #1001

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

how to import "jquery.terminal/js/xml_formatting.js" #1001

rikkarth Jan 4, 2025

How to reproduce

1. Create a new JS project using Vite and just accept the defaults

2. Install jquery and jquery.terminal using NPM

3. Cleanup the project for our test

Testing XML

Replies: 1 comment · 1 reply

jcubic Jan 4, 2025 Maintainer

rikkarth Jan 4, 2025 Author

rikkarth
Jan 4, 2025

Replies: 1 comment 1 reply

jcubic
Jan 4, 2025
Maintainer

rikkarth Jan 4, 2025
Author