asdasdasdass

.oxlintrc.json

@@ -1,4 +1,42 @@
 {
     "$schema": "./node_modules/oxlint/configuration_schema.json",
-  "ignorePatterns": ["dist/**"]
+    "ignorePatterns": ["dist/**", "node_modules/**"],
+    "plugins": ["typescript", "unicorn", "oxc", "promise"],
+    "env": {
+        "browser": true,
+        "builtin": true,
+        "es2024": true
+    },
+    "categories": {
+        "correctness": "error",
+        "suspicious": "warn",
+        "perf": "warn"
+    },
+    "rules": {
+        "no-console": "error",
+        "no-debugger": "error",
+        "eqeqeq": ["error", "always"],
+        "no-var": "error",
+        "prefer-const": "error",
+        "object-shorthand": "error",
+        "prefer-template": "error",
+        "unicorn/prefer-dom-node-append": "error",
+        "unicorn/prefer-dom-node-remove": "error",
+        "unicorn/prefer-dom-node-text-content": "error",
+        "unicorn/prefer-query-selector": "error",
+        "unicorn/prefer-add-event-listener": "error",
+        "typescript/no-explicit-any": "error",
+        "typescript/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
+        "promise/always-return": "error",
+        "promise/catch-or-return": "error",
+        "oxc/no-accumulating-spread": "error"
+    },
+    "overrides": [
+        {
+            "files": ["**/*.config.json", ".oxlintrc.json", ".prettierrc.json"],
+            "rules": {
+                "no-console": "off"
+            }
+        }
+    ]
 }

.prettierignore

@@ -0,0 +1,3 @@
+dist
+node_modules
+bun.lock

.prettierrc.json

@@ -0,0 +1,9 @@
+{
+    "semi": false,
+    "singleQuote": true,
+    "printWidth": 100,
+    "tabWidth": 4,
+    "useTabs": false,
+    "trailingComma": "none",
+    "arrowParens": "always"
+}

bun.lock

@@ -10,6 +10,7 @@
       },
       "devDependencies": {
         "oxlint": "^1.85.0",
+        "prettier": "^3.9.9",
         "typescript": "~6.0.2",
         "vite": "^8.3.0",
       },
@@ -146,6 +147,8 @@
 
     "postcss": ["postcss@8.5.28", "", { "dependencies": { "nanoid": "^3.3.18", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A=="],
 
+    "prettier": ["prettier@3.9.9", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-Z/CJHIkdujO/OtN7nXUii0Rf3VT5SRuhjBA82Xvu2XhBUgX3nhP67T0LHceBdQLex7OOFGTox+Q5Yg8Jk2Qivg=="],
+
     "rolldown": ["rolldown@1.2.10", "", { "dependencies": { "@oxc-project/types": "=0.151.0", "@rolldown/pluginutils": "^1.0.0" }, "optionalDependencies": { "@rolldown/binding-android-arm-eabi": "1.2.10", "@rolldown/binding-android-arm64": "1.2.10", "@rolldown/binding-darwin-arm64": "1.2.10", "@rolldown/binding-darwin-x64": "1.2.10", "@rolldown/binding-freebsd-x64": "1.2.10", "@rolldown/binding-linux-arm-gnueabihf": "1.2.10", "@rolldown/binding-linux-arm64-gnu": "1.2.10", "@rolldown/binding-linux-arm64-musl": "1.2.10", "@rolldown/binding-linux-ppc64-gnu": "1.2.10", "@rolldown/binding-linux-s390x-gnu": "1.2.10", "@rolldown/binding-linux-x64-gnu": "1.2.10", "@rolldown/binding-linux-x64-musl": "1.2.10", "@rolldown/binding-openharmony-arm64": "1.2.10", "@rolldown/binding-win32-arm64-msvc": "1.2.10", "@rolldown/binding-win32-x64-msvc": "1.2.10" }, "bin": { "rolldown": "./bin/cli.mjs" } }, "sha512-OxkA08pSryMK7B3XiFA09B4OJ1xJMPgIYCBMY2xchzpqgBGsV1o0DetPAE+Sl3N3L4oCPiEzmHVSOj7iR04Zog=="],
 
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],

index.html

@@ -1,6 +1,5 @@
 <!doctype html>
 <html lang="en">
-
     <head>
         <meta charset="UTF-8" />
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
@@ -19,11 +18,8 @@
                 <div class="slide-list-items"></div>
             </div>
             <div class="code"></div>
-    <div class="preview">
+            <div class="preview"></div>
-      <div class="slide"></div>
-    </div>
         </div>
         <script type="module" src="/src/main.ts"></script>
     </body>
-
 </html>

package.json

@@ -8,10 +8,13 @@
         "build": "tsc && vite build",
         "lint": "oxlint",
         "lint:fix": "oxlint --fix",
+        "format": "prettier --write .",
+        "format:check": "prettier --check .",
         "preview": "vite preview"
     },
     "devDependencies": {
         "oxlint": "^1.85.0",
+        "prettier": "^3.9.9",
         "typescript": "~6.0.2",
         "vite": "^8.3.0"
     },

src/code-to-element.ts

@@ -6,10 +6,7 @@ export interface CodeToElementOptions {
     styles?: string[]
 }
 
-export function codeToElement(
+export function codeToElement(code: string, options: CodeToElementOptions = {}): HTMLIFrameElement {
-  code: string,
-  options: CodeToElementOptions = {}
-): HTMLIFrameElement {
     const iframe = document.createElement('iframe')
     const sandbox = new Set<string>()
 
@@ -36,12 +33,16 @@ export async function createCodeThumbnail(
     iframe.style.position = 'fixed'
     iframe.style.left = '-10000px'
     iframe.style.border = '0'
-  document.body.appendChild(iframe)
+    document.body.append(iframe)
 
     try {
         await new Promise<void>((resolve, reject) => {
             iframe.addEventListener('load', () => resolve(), { once: true })
-      iframe.addEventListener('error', () => reject(new Error('Unable to render code thumbnail')), { once: true })
+            iframe.addEventListener(
+                'error',
+                () => reject(new Error('Unable to render code thumbnail')),
+                { once: true }
+            )
         })
 
         const content = iframe.contentDocument?.body

src/dom-to-image.ts

@@ -1,7 +1,6 @@
 export interface DomExportOptions {
     width?: number
     height?: number
-  scale?: number
 }
 
 function getElementSize(element: Element) {
@@ -21,15 +20,15 @@ function copyComputedStyles(source: Element, target: Element) {
     target.setAttribute('style', style)
 }
 
-function cloneWithStyles(source: Node, target: Node) {
+function cloneWithStyles(source: Node, target: ParentNode) {
     if (source.nodeType === Node.ELEMENT_NODE && target.nodeType === Node.ELEMENT_NODE) {
         copyComputedStyles(source as Element, target as Element)
     }
 
     source.childNodes.forEach((child) => {
-    const clonedChild = child.cloneNode(false)
+        const clonedChild = child.cloneNode(false) as ParentNode
         cloneWithStyles(child, clonedChild)
-    target.appendChild(clonedChild)
+        target.append(clonedChild)
     })
 }
 
@@ -45,48 +44,7 @@ function createSvg(element: Element, options: DomExportOptions) {
     return { svg, width, height }
 }
 
-export function domToSvgDataUrl(
+export function domToSvgDataUrl(element: Element, options: DomExportOptions = {}): string {
-  element: Element,
-  options: DomExportOptions = {}
-): string {
     const { svg } = createSvg(element, options)
     return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
 }
-
-export async function domToCanvas(
-  element: Element,
-  options: DomExportOptions = {}
-): Promise<HTMLCanvasElement> {
-  const size = getElementSize(element)
-  const width = options.width ?? size.width
-  const height = options.height ?? size.height
-  const scale = options.scale ?? 1
-  const svgDataUrl = domToSvgDataUrl(element, options)
-  const image = new Image()
-
-  await new Promise<void>((resolve, reject) => {
-    image.onload = () => resolve()
-    image.onerror = () => reject(new Error('Unable to render DOM export as an image'))
-    image.src = svgDataUrl
-  })
-
-  const canvas = document.createElement('canvas')
-  canvas.width = Math.max(1, Math.ceil(width * scale))
-  canvas.height = Math.max(1, Math.ceil(height * scale))
-  const context = canvas.getContext('2d')
-
-  if (!context) {
-    throw new Error('Unable to create a canvas context')
-  }
-
-  context.drawImage(image, 0, 0, canvas.width, canvas.height)
-  return canvas
-}
-
-export async function domToPngDataUrl(
-  element: Element,
-  options: DomExportOptions = {}
-): Promise<string> {
-  const canvas = await domToCanvas(element, options)
-  return canvas.toDataURL('image/png')
-}

src/editor.ts

@@ -22,13 +22,10 @@ self.MonacoEnvironment = {
 const MONACO_PARENT = '.code'
 
 export function createEditor() {
-  return monaco.editor.create(
+    return monaco.editor.create(document.querySelector(MONACO_PARENT)!, {
-    document.querySelector(MONACO_PARENT)!,
-    {
         value: 'test',
         language: 'html',
         theme: 'vs-dark',
         automaticLayout: true
-    }
+    })
-  )
 }

src/main.ts

@@ -67,7 +67,7 @@ async function generateSlideThumbnail(slide: Slide, i: number) {
 
     const thumbnail = await createCodeThumbnail(slide.code)
     slideInList.append(slideNumber, thumbnail)
-    slideElement.appendChild(slideInList)
+    slideElement.append(slideInList)
 
     if (i !== -1) {
         const deleteButton = document.createElement('button')
@@ -78,7 +78,7 @@ async function generateSlideThumbnail(slide: Slide, i: number) {
         deleteButton.addEventListener('click', () => {
             deleteSlide(Number(slideElement.dataset.slideId))
         })
-        slideElement.appendChild(deleteButton)
+        slideElement.append(deleteButton)
     }
 
     if (i === -1) {
@@ -110,22 +110,45 @@ async function refreshThumbnail(index: number, slide: Slide) {
     updateSelection()
 }
 
+const THUMBNAIL_CONCURRENCY = 6
+
+async function mapWithConcurrency<T, R>(
+    items: T[],
+    limit: number,
+    map: (item: T, index: number) => Promise<R>
+): Promise<R[]> {
+    const results: R[] = []
+    let nextIndex = 0
+
+    async function worker() {
+        while (nextIndex < items.length) {
+            const index = nextIndex++
+            // oxlint-disable-next-line no-await-in-loop -- each worker claims one index at a time; the await is what bounds concurrency
+            results[index] = await map(items[index], index)
+        }
+    }
+
+    await Promise.all(Array.from({ length: Math.min(limit, items.length) }, worker))
+    return results
+}
+
 async function setSlideList() {
-    const slideListSlidesList = [{ code: globalSlide }, ...slides]
+    const allSlides = [{ code: globalSlide }, ...slides]
     slideList.replaceChildren()
     slideElements.clear()
     globalSlideElement = null
 
-    for (let i = -1; i < slides.length; i++) {
+    const elements = await mapWithConcurrency(allSlides, THUMBNAIL_CONCURRENCY, (slide, index) =>
-        slideList.appendChild(await generateSlideThumbnail(slideListSlidesList[i + 1], i))
+        generateSlideThumbnail(slide, index - 1)
-    }
+    )
+    slideList.append(...elements)
     updateSelection()
 }
 
 function updateSlideOrder() {
     if (globalSlideElement) {
         globalSlideElement.dataset.slideId = '-1'
-        slideList.appendChild(globalSlideElement)
+        slideList.append(globalSlideElement)
     }
 
     for (const [index, slide] of slides.entries()) {
@@ -141,8 +164,10 @@ function updateSlideOrder() {
         if (slideNumber) {
             slideNumber.textContent = `${index + 1}`
         }
-        slideElement.querySelector<HTMLButtonElement>('.delete-slide')?.setAttribute('aria-label', `Delete slide ${index + 1}`)
+        slideElement
-        slideList.appendChild(slideElement)
+            .querySelector<HTMLButtonElement>('.delete-slide')
+            ?.setAttribute('aria-label', `Delete slide ${index + 1}`)
+        slideList.append(slideElement)
     }
     updateSelection()
 }
@@ -190,7 +215,7 @@ addSlideButton.addEventListener('click', async () => {
     const slide = { code: '' }
     slides.push(slide)
     const slideElement = await generateSlideThumbnail(slide, slides.length - 1)
-    slideList.appendChild(slideElement)
+    slideList.append(slideElement)
     updateSlideOrder()
     setSlide(slides.length - 1)
 })

src/style.css

@@ -31,8 +31,8 @@ body {
     gap: 0;
     grid-auto-flow: row;
     grid-template-areas:
-    "menubar menubar menubar"
+        'menubar menubar menubar'
-    "slidelist code preview";
+        'slidelist code preview';
     width: 100vw;
     height: 100vh;
 }
@@ -113,14 +113,6 @@ body {
     background-color: var(--bg);
 }
 
-.slide {
-  display: block;
-  width: 100%;
-  aspect-ratio: 16 / 9;
-  background: var(--slide-bg);
-  border: 1px solid var(--slide-border);
-}
-
 .slide-list-item {
     position: relative;
     display: grid;