https://2ality.com/2022/01/esm-specifiers.html

Import-maps, provide a great way to develop applications without a whole bundler, transpiler setup. (JSPM is going to release a series of blogs in comings days, if that helps before our pulic announcement. We can link all of them here).

From our announcement of es-modules from ESM Modules and @teleportHQ. You might have already known that all components and styles and tokens can be exported as individual modules. But there is a difference that you might have noticed on the way, the external-dependencies are handled in these modules, when compared to a module providers.

Let's load react-dom module from it. We can see the external dependencies of the package are also imported using external url's.

react-dom

import ReactDOM from 'https://cdn.skypack.dev/-/[email protected]/dist=es2020,mode=imports/optimized/react-dom.js'

import aa from "/-/[email protected]/dist=es2020,mode=imports/optimized/react.js";
import m from "/-/[email protected]/dist=es2020,mode=imports/optimized/object-assign.js";
import r from "/-/[email protected]/dist=es2020,mode=imports/optimized/scheduler.js";

Module from teleportHQ

import React from 'react';
import { variant } from 'styled-system';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import Globals from 'https://jscdn.teleporthq.io/new-project-dqpb/globals.js@646826692c3ac0769586600c4719b2024c8a399a';
import { projectStyleVariants, TOKENS } from 'https://jscdn.teleporthq.io/new-project-dqpb/style.js@35ff99074a6491e551432d47881ebdce23a21cef';

Modules from teleportHQ uses "bare-module-specifiers" We encourage user to use import-maps when working with teleportHQ deisgn components in plain setup. Here is a example from codesandbox with import-maps and components

Configuring your application to use import-maps and es-modules.

• We can generate a import-map using jspm-generator which is available online or as a npm package. https://generator.jspm.io
• You can enter, all the dependencies that you are using. In our case, react, react-dom, styled-components and prop-types and styled-system. https://generator.jspm.io/#PckxDsMgDAVQphylG1ZoRBjL2LVHqJIvZQBsYS/cvpGidH3vMTk3vQwFwt3eHyedxdsQaA6REj1dx3czv3PNIdH8hwOlwvJKgeaL7lcbBbvfuAo3NNMcaaHldh1qqKcFij//m4dgfwA
• You can copy the import-map and use it, from the components from teleportHQ studio.

Here is a pre-configured template for using.

Codesandbox