Custom Resolutions In Configuration

[AngelMunoz]

Is your feature request related to a problem? Please describe.

At the moment we need to manually edit the perla.json.importmap file when we need to add a custom resolution e.g. "lz-string": "https://esm.sh/lz-string" but since these are manually added to the import file they are easy to be removed when we're either re-generating or adding a new import to the map via the Perla's add command.

Describe the solution you'd like I'd like to add a new node in the perla.json file

{ // perla.json
  "index": "./index.html",
  "provider": "jspm",
  "paths": {
    "lz-string": "https://esm.sh/lz-string",
    "@app/components/": "./features/components/",
    "app:auth-module/": "./features/services/auth/"
  },
  "dependencies": [
    { "name": "react", version: "0.18.2" }
  ]
}

In turn this would produce an import map similar to this

{
  "imports": {
    "react": "https://path.to-react.com/react"

    "lz-string": "https://esm.sh/lz-string",
    "@app/components/": "./features/components/",
    "App:auth-module": "./features/services/auth.js",
    // if we take #105 into account as well
    "App:Environment": "/env.js"
  }
}

and thus, allowing the following imports

import React, { useState } from "react";
import { thing } from "lz-string"
import { AppButton } from "@app/components/button.js"
// instead of 
// import { AppButton } from "../../../../../components/button.js"
import { login, logout } from "App:auth-module"

And similar situations

Also we can add the following flag to the add command

• --as-resolution

For cases where we need to install a nested dependency in the import map e.g.

• perla add react-dom/client --as-resolution

Alternatively:

• perla add react-dom/client --as-alias
• perla add react-dom/client --as-path

It should update the perla.json and import map files to the following:

{ // perla.json
  "index": "./index.html",
  "provider": "jspm",
  "paths": {
    "lz-string": "https://esm.sh/lz-string",
    "@app/components/": "./features/components/",
    "app:auth-module": "./features/services/auth.js",
    "react-dom/client": "https://the-path-to-that/react-dom/client"
  },
  "dependencies": [
    { "name": "react", version: "0.18.2" },
    { "name":"react-dom", "version": "0.18.2" }
  ]
}

In turn this would produce an import map similar to this

{
  "imports": {
    "react": "https://path.to-react.com/react"
    "react-dom/client": "https://the-path-to-that/react-dom/client",
    "lz-string": "https://esm.sh/lz-string",
    "@app/components/": "./features/components/",
    "App:auth-module": "./features/services/auth.js",
    // if we take #105 into account as well
    "App:Environment": "/env.js"
  }
}

This would help to track non-standard dependencies as well as standard dependencies, aliases and other stuff we currently have no idea how to deal with other than writing the resolutions directly to the import map and wishing they don't get blown out in the next re-generation

Things to Also consider:

• Allow Custom Resolutions for scopes as well not just imports

Describe alternatives you've considered N/A

Additional context

A similar existing feature in the wild is typescript's paths which can serve as an inspiration for this feature as well

[AngelMunoz]

released in beta 19