Assets Linker (Monaco UI)

Description

When working with WebView in React Native, managing HTML, CSS, and JavaScript assets can be cumbersome. These files are often embedded as strings, which makes development, debugging, and maintenance difficult.

This extension allows you to link external asset files directly to your project. You can keep your assets as standalone files, edit them with full tooling support, and seamlessly integrate them into your app.

Features

• Use real .html, .css, .js files instead of inline strings
• Bundle multiple assets into a single file
• Supports ESM and CommonJS
• Per-asset overrides for output and format
• Keeps your workflow clean and maintainable

📦 Configuration

Create a file-assets-linker.json file in your project root.

🧾 Example

[
    {
        "output": "./assets/test.ts",
        "format": "esm",
        "assets": [
            {
                "name": "indexHtml",
                "path": "../ContextMenu/index.html"
            },
            {
                "name": "webStyle",
                "path": "../ContextMenu/style.css",
                "type": "css"
            },
            {
                "output": "./assets/test2.js",
                "format": "CommonJS",
                "name": "indexJs",
                "path": "../ContextMenu/index.js"
            }
        ]
    },
    {
        "output": "./assets/test3.js",
        "format": "CommonJS",
        "assets": [
            {
                "path": "../ContextMenu/test/content.js"
            }
        ]
    }
]

Preview

🧠 How it works

Each object in the array is a build group.

A build group: - collects asset files - processes them (e.g. minify/format) - outputs them into a single file

1. Right click on the file and choose "Assets Linker: Open Editor"
2. Edit files + Build
3. After build, You will be able to use them inside your project as assets.

---

⚙️ Properties

output

Path to the generated file.

"output": "./assets/test.ts"

minify

"minify": false // default:true

compress

This avoids the need for JSON.stringify when handling JS, CSS, and HTML files.

"compress": true // default:false

json indent

"output": 4 // default 0

keys

each assets group could containes keys. those keys could be refer to in js, html and css

example

{
  "output": "./assets/test.ts",
  "keys":{
    "settings",
    "data",
    "test",
    "item":{
        "name": ""
    }
  }    

 // in css you could use var(--AssetsLinkEditor-keys-settings)
 // in js you could use AssetsLinkEditor.keys.settings
  // in html you could use var(--AssetsLinkEditor-keys-settings) or --AssetsLinkEditor-keys-settings in style tags or AssetsLinkEditor.keys.settings in script tags and --AssetsLinkEditor-keys-settings in html tags
// get method below could handle assigning data to those keys.
// when you open editor, you could edit those keys there.
}

globalVar

for keys object we use AssetsLinkEditor as above. You could change it by assigning this value

---

format

Defines how exports are generated.

Format Description

---

esm Uses ES Modules (export, export default) CommonJS Uses module.exports

---

assets

Array of files to include in the output.

---

📄 Asset Properties

path (required)

Path to the source file (relative to config file).

"path": "../ContextMenu/index.html"

---

name (optional)

Name used when exporting the asset.

"name": "indexHtml"

If omitted, the name is generated from the file name.

---

type (optional)

Defines how the file is processed.

"type": "css"

Usually inferred from file extension.

---

output (optional)

Overrides the parent output for this asset.

"output": "./assets/test2.js"

---

format (optional)

Overrides the parent format for this asset.

"format": "CommonJS"

---

🔁 Overrides

Assets can override their parent group settings:

{
  "output": "./assets/test.ts",
  "format": "esm",
  "assets": [
    {
      "output": "./assets/test2.js",
      "format": "CommonJS",
      "path": "../ContextMenu/index.js"
    }
  ]
}

---

📤 Output Examples

ESM

...
export default data;
export const indexHtml = data.indexHtml.content;
export const webStyle = data.webStyle.content;
export const get = data.get;

get

incase you want to pass/replace keys in the js, css ot html, you could use get method

if you look above at section prop keys.

// so if we have --AssetsLinkEditor-keys-settings somewhere in html or css
// or AssetsLinkEditor.keys.settings in js or <script>

let html = get("indexHtml", ["settings","data"],["name", "alen"],...);
// now the result will be data and name = alen

keyBuilder

for better controll use this method instead of get to pass/replace keys in you files

keyBuilder("indexHtml").key("settings", "data").key("name", "alen").get();

File Referenses/Join

You could join/boundle two files. and this is done inside the file it self, eg as for example import and export

for css and html you have --AssetsLinkEditor-loadFiles(--AssetsLinkEditor-cssFile-bookCss) and --AssetsLinkEditor-loadFiles(--AssetsLinkEditor-htmlFile-bookCss)

for js you have AssetsLinkEditor.loadFiles("bookJs", "systemJs");

example

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=10.0, user-scalable=yes" />
  <style class="custom">
    body {
      background: var(--AssetsLinkEditor-keys-backgroundColor);
    }

    --AssetsLinkEditor-loadFiles(--AssetsLinkEditor-cssFile-bookCss)
  </style>
  <link type="text/css" rel="stylesheet" href="--AssetsLinkEditor-keys-address/novelCss" />
  <link type="text/css" rel="stylesheet" href="--AssetsLinkEditor-keys-address/novelFonts/--AssetsLinkEditor-keys-fontName" />
  <script src="--AssetsLinkEditor-keys-address/novelScript"></script>
  <script>
    // add files
    AssetsLinkEditor.loadFiles("bookJs")
  </script>
</head>

<body class="--AssetsLinkEditor-keys-novelType" imageaddress="--AssetsLinkEditor-keys-address/images">
--AssetsLinkEditor-loadFiles(--AssetsLinkEditor-cssFile-bookHtml)
</body>

</html>

Embedded images

For adding images as base64, you could use --AssetsLinkEditor-base64() or AssetsLinkEditor.base64()

Example

<img src="--AssetsLinkEditor-base64(https://forum.cogsci.nl/uploads/886/65KXQK97PG23.png)" />
<img src="--AssetsLinkEditor-base64(../images/myimage.png)" />

funcMapper

This method(helper) is usefull when using webview, in your js files you could mapp function to be transfered to the .ts file as type.

So you could keep tracks of which methods exist in which js file.

// on top of the js file, systemJs file
AssetsLinkEditor.funcMaps("loadSettings", "window.test", "window.timerJs");
function loadSettings(data){

}

// now after build, in .ts file. offcourse the file have to be injected into the webview before triggering this
funcMapper<"systemJs">(webview).exec("loadSettings", {user:...});
// you could also do something like this,as long as the args is empty
 funcMapper(webView.current).exec("window.timerJs(()=> window.checkProtection(), 20, true)");

inbuild

Somtimes you would want to use a file in other js but not inc it in the finel build. You could set this to false on asset, to execlude it from the final build. Note that if that file is used by --AssetsLinkEditor-loadFiles it will be inc in that file.

cleanRegexp

You could remove some unwanted strings from the file by assigning this.

  {
                "name": "bookJs",
                "path": "../WebAssets/book.js",
                "cleanRegexp": "/\\bexport \\b/gi"
  }

useOnlineEditor

The boundled editor files are to many and to big to load fast. if you have access to internet I would suggest using the online cdn version as it load very fast. the editor load fast even in the boundled version, but the language packs eg css, ts, js ,html takes more times to load sadly