Configuration

import { createPlayground } from 'livecodes';

// Full config object
createPlayground('#container', {
  config: {
    title: 'My Project',
    markup: { language: 'html', content: '<h1>Hello</h1>' },
    style: { language: 'css', content: 'h1 { color: blue; }' },
    script: { language: 'javascript', content: 'console.log("hi")' },
    activeEditor: 'script',
  },
});

// Query params (simpler syntax)
createPlayground('#container', {
  params: {
    html: '<h1>Hello</h1>',
    css: 'h1 { color: blue; }',
    js: 'console.log("hi")',
    console: 'open',
  },
});

const config = {
  markup: {
    language: 'markdown',
    content: '# Title\n\nParagraph',
    contentUrl: 'https://example.com/content.md', // Alternative to content
  },
  style: {
    language: 'scss',
    content: '$color: blue; h1 { color: $color; }',
  },
  script: {
    language: 'typescript',
    content: 'const x: number = 1;',
    hiddenContent: 'export function helper() {}', // Hidden but evaluated
  },
};

const config = {
  style: { language: 'css', content: '...' },
  processors: ['tailwindcss', 'autoprefixer'], // Processors run in order
};

const config = {
  stylesheets: ['https://cdn.jsdelivr.net/npm/tailwindcss@3/dist/tailwind.min.css'],
  scripts: ['https://cdn.jsdelivr.net/npm/lodash@4/lodash.min.js'],
};

const config = {
  tests: {
    language: 'typescript',
    content: `
      import { sum } from './script';
      test('sums numbers', () => {
        expect(sum(1, 2)).toBe(3);
      });
    `,
  },
};

const config = {
  mode: 'simple', // 'full' | 'focus' | 'simple' | 'lite' | 'editor' | 'codeblock' | 'result'
  view: 'result', // 'split' | 'editor' | 'result'
  readonly: true, // Read-only mode
};

const config = {
  editor: 'monaco', // 'monaco' | 'codemirror' | 'codejar' | 'auto'
  theme: 'dark', // 'light' | 'dark'
  editorTheme: 'vs-dark', // See themes in docs
  fontFamily: 'Fira Code',
  fontSize: 14,
  useTabs: false,
  tabSize: 2,
  lineNumbers: true,
  wordWrap: false,
  emmet: true,
  editorMode: 'vim', // 'vim' | 'emacs' | undefined
};

const config = {
  imports: {
    'my-lib': 'https://my-cdn.com/lib.js',
    'my-lib/submodule': 'https://my-cdn.com/sub.js',
  },
};

// Equivalent in createPlayground
createPlayground('#container', {
  params: {
    js: 'console.log("Hello")',
    console: 'open',
    theme: 'light',
  },
});

const config = {
  script: {
    language: 'javascript',
    content: 'export function myFunc() { return 42; }',
    hiddenContent: '// Hidden helper\nfunction helper() { return 1; }',
  },
  tests: {
    language: 'javascript',
    content: "import { myFunc } from './script';\ntest('works', () => expect(myFunc()).toBe(42))",
  },
};

createPlayground('#container', {
  config: {
    appUrl: 'https://my-server.com', // Wrong: appUrl belongs in EmbedOptions
    template: 'react', // Wrong: template belongs in EmbedOptions
  },
});

createPlayground('#container', {
  // EmbedOptions (SDK-level settings)
  appUrl: 'https://my-server.com',
  template: 'react',
  loading: 'lazy',
  headless: false,

  // Config (Project content)
  config: {
    title: 'My Project',
    markup: { language: 'html', content: '<h1>Hello</h1>' },
    style: { language: 'css', content: '...' },
    script: { language: 'javascript', content: '...' },
  },
});

createPlayground('#container', {
  config: {
    markup: { language: 'html', content: '<h1>A</h1>' },
  },
  params: {
    html: '<h1>B</h1>', // This overrides config.markup!
  },
});

// Use one source or understand precedence:
// params > config > import > template

createPlayground('#container', {
  params: {
    html: '<h1>B</h1>',
  },
  // No config needed for simple cases
});

// Or use config only
createPlayground('#container', {
  config: {
    markup: { language: 'html', content: '<h1>A</h1>' },
  },
});

const config = {
  script: { language: 'react.js', content: '...' }, // Invalid
};

// Use language name, extension, or alias
const config = {
  script: { language: 'react', content: '...' }, // Language name
  // or
  script: { language: 'jsx', content: '...' }, // Extension
  // or
  script: { language: 'react-jsx', content: '...' }, // Alias
};