Module Resolution

import { createPlayground } from 'livecodes';

// Bare imports work automatically
createPlayground('#container', {
  config: {
    script: {
      language: 'javascript',
      content: `
import { v4 } from 'uuid';           // npm module
import React from 'react';            // npm module
import { useState } from 'react';     // Named import
console.log(v4());
      `,
    },
  },
});

// Default: uses esm.sh CDN
import { v4 } from 'uuid';
import React from 'react';
import { useState, useEffect } from 'react';
import { format } from 'date-fns';

// Specifying version
import React from 'react@18'; // React 18.x
import React from 'react@18.2.0'; // Exact version
import _ from 'lodash@4.17.21'; // Lodash specific version

// esm.sh (default)
import React from 'react';
import React from 'esm.sh:react';

// Skypack
import React from 'skypack:react';

// jsDelivr
import React from 'jsdelivr:react';

// unpkg
import React from 'unpkg:react';

// Deno bundle
import { uuid } from 'deno:uuid';

// Full URL imports work too
import React from 'https://esm.sh/react@18';

// Deno.land/x (TS files auto-bundled)
import { uuid } from 'https://deno.land/x/uuid/mod.ts';

// JSR (Deno's npm-compatible registry)
import { yassify } from 'jsr:@kwhinnery/yassify';

// GitHub files (auto-bundled)
import { flatten } from 'https://github.com/remeda/remeda/blob/master/src/flatten.ts';

// Skip bundling with #nobundle
import { flatten } from 'https://github.com/remeda/remeda/blob/master/src/flatten.ts#nobundle';

// pkg.pr.new (unpublished packages)
import { Bench } from 'pr:tinybench@a832a55';

// Via SDK config
createPlayground('#container', {
  config: {
    imports: {
      'my-lib': 'https://my-cdn.com/lib.js',
      'my-lib/utils': 'https://my-cdn.com/utils.js',
      'my-private-package': 'https://my-server.com/package/index.js',
    },
    script: {
      language: 'javascript',
      content: `
import { something } from 'my-lib';
import { helper } from 'my-lib/utils';
      `,
    },
  },
});

// Via custom settings in standalone app
// Settings → Custom Settings:
{
  "imports": {
    "my-lib": "https://my-cdn.com/lib.js"
  }
}

const config = {
  customSettings: {
    defaultCDN: 'skypack', // Use Skypack for all bare imports
  },
  script: {
    language: 'javascript',
    content: `import React from 'react'; // Now uses skypack`,
  },
};

// URL ending in .css becomes <link>
import 'https://unpkg.com/github-markdown-css/github-markdown.css';

// Bare import for CSS
import 'github-markdown-css/github-markdown.css';
// Becomes: <link href="https://unpkg.com/github-markdown-css/github-markdown.css">

// Import compiled CSS from style editor
import styles from './style.css';
console.log(styles); // CSS string

// React from different CDNs are DIFFERENT instances
import React from 'esm.sh:react'; // React instance A
import { createRoot } from 'skypack:react-dom/client'; // React instance B
// BREAKS: createRoot expects React instance A

// Always use same CDN (or no prefix = default)
import React from 'react';
import { createRoot } from 'react-dom/client';

// Or explicit same CDN
import React from 'esm.sh:react';
import { createRoot } from 'esm.sh:react-dom/client';

const { v4 } = require('uuid'); // Works, converted to ESM
const React = require('react'); // Works

import { v4 } from 'uuid';
import React from 'react';

// Without #nobundle, this gets bundled by bundlejs.com
import { flatten } from 'https://github.com/remeda/remeda/blob/master/src/flatten.ts';

// With #nobundle, get the raw URL
import { flatten } from 'https://github.com/remeda/remeda/blob/master/src/flatten.ts#nobundle';