_import.ts

// bookmarklet-title: ESM Imports
// bookmarklet-about: Test esbuild custom module resolution

// The following dependencies use static imports
// They are bundled with the bookmarklet (thereby increasing bundle size)
// Relative imports will resolve to files within the same gist

import { v4 as uuidRemoteStatic } from 'https://esm.sh/[email protected]';
console.log('UUID from remote static:', uuidRemoteStatic());

import uuidRelativeStatic from './export.ts';
console.log('UUID from relative static:', uuidRelativeStatic());

import uuidRelativeStaticDeeper from './exportDeeper.ts';
console.log('UUID from relative static deeper:', uuidRelativeStaticDeeper());

import _ from 'https://cdn.jsdelivr.net/npm/@esm-bundle/[email protected]/+esm';
console.log('Lodash test:', _.chunk([1, 2, 3, 4], [2]));

import axios from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
console.log('Axios test:', axios.isCancel(new axios.Cancel('test')));

import * as cheerio from 'https://esm.sh/cheerio';
console.log('Cheerio test:', cheerio.load('<ul id="fruits">...</ul>').html());

// The following static imports demonstrate loading different types of content
// Note that a custom loader can be defined using the loader import attribute

import css from './test.css';
console.log('CSS:', css);
import html from './test.html';
console.log('HTML:', html);
import data from './test.dat';
console.log('Data:', data);
import json from './test.json';
console.log('JSON:', json);
import svg from './test.svg';
console.log('SVG:', svg);
import png from 'https://placehold.co/10x10.png';
console.log('PNG:', png);
import base64 from 'https://placehold.co/10x10.png' with { loader: 'base64' };
console.log('PNG (custom loader):', base64);

// The following dependencies use dynamic imports
// Therefore, they are not bundled with the bookmarklet
// Rather, they are fetched on bookmarklet evaluation
// Note that relative imports can still be used

(async () => {
  const { v4: uuidRemoteDynamic } = await import('https://esm.sh/[email protected]');
  console.log('UUID from remote dynamic:', uuidRemoteDynamic());

  const { default: uuidRelativeDynamic } = await import('./export.ts');
  console.log('UUID from relative dynamic:', uuidRelativeDynamic());

  const { default: uuidRelativeDynamicDeeper } = await import('./exportDeeper.ts');
  console.log('UUID from relative dynamic deeper:', uuidRelativeDynamicDeeper());
})();

deeper.ts

import { v4 } from 'https://esm.sh/[email protected]';

export default () => v4();

export.ts

import { v4 } from 'https://esm.sh/[email protected]';

export default () => v4();

exportDeeper.ts

import v4 from './deeper.ts';

export default () => v4();

test.css

body {
  color: red;
}

test.dat

Hello, World!

test.html

<div>
  Hello, World!
</div>

test.json

{
  "string": "test",
  "array": [0, 1, 2, 3]
}

test.svg

<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
  <circle r="45" cx="50" cy="50" fill="red" />
</svg>