Convert tooltip-body to svelte

Author: liamcmitchell

assets/build/build.js

@@ -6,6 +6,7 @@ const fsExtra = require('fs-extra')
 const fs = require('node:fs/promises')
 const handlebars = require('handlebars')
 const util = require('node:util')
+const sveltePlugin = require('esbuild-svelte')
 
 const exec = util.promisify(cp.exec)
 
@@ -43,14 +44,14 @@ Promise.all(formatters.map(async ({formatter, ...options}) => {
  // Clean outdir.
  await fsExtra.emptyDir(options.outdir)
 
- await esbuild.build({
+ options = {
  entryNames: watchMode ? '[name]-dev' : '[name]-[hash]',
  bundle: true,
+ conditions: [watchMode ? 'development' : 'production'],
  minify: !watchMode,
  logLevel: watchMode ? 'warning' : 'info',
- watch: watchMode,
  ...options,
- plugins: [{
+ plugins: [sveltePlugin(), {
  name: 'ex_doc',
  setup (build) {
  // Pre-compile handlebars templates.
@@ -98,7 +99,14 @@ Promise.all(formatters.map(async ({formatter, ...options}) => {
  }
  }
  }]
- })
+ }
+
+ if (watchMode) {
+ const ctx = (await esbuild.context(options))
+ await ctx.watch()
+ } else {
+ await esbuild.build(options)
+ }
 })).catch((error) => {
  console.error(error)
  process.exit(1)

assets/js/handlebars/templates/tooltip-body.handlebars

@@ -0,0 +1,21 @@
+<script>
+const { isPlain, hint } = $props()
+</script>
+
+{#if isPlain}
+ <section class="docstring docstring-plain">
+ {hint.description}
+ </section>
+{:else}
+ <div class="detail-header">
+ <h1 class="signature">
+ <span translate="no">{hint.title}</span>
+ <div class="version-info" translate="no">{hint.version}</div>
+ </h1>
+ </div>
+ {#if hint.description}
+ <section class="docstring">
+ {@html hint.description}
+ </section>
+ {/if}
+{/if}

assets/js/handlebars/templates/tooltip-body.svelte

@@ -1,7 +1,8 @@
 import { qs, qsAll } from '../helpers'
 import { settingsStore } from '../settings-store'
 import { cancelHintFetchingIfAny, getHint, HINT_KIND, isValidHintHref } from './hints'
-import tooltipBodyTemplate from '../handlebars/templates/tooltip-body.handlebars'
+import tooltipBodyTemplate from '../handlebars/templates/tooltip-body.svelte'
+import {mount} from 'svelte'
 
 const TOOLTIP_HTML = '<div class="tooltip"><div class="tooltip-body"></div></div>'
 
@@ -92,17 +93,18 @@ function handleHoverStart (event) {
 }
 
 function renderTooltip (hint) {
- const tooltipBodyHtml = tooltipBodyTemplate({
- isPlain: hint.kind === HINT_KIND.plain,
- hint
- })
-
  let tooltipBody = qs(TOOLTIP_BODY_SELECTOR)
  if (!tooltipBody) {
  qs(CONTENT_INNER_SELECTOR).insertAdjacentHTML('beforeend', TOOLTIP_HTML)
  tooltipBody = qs(TOOLTIP_BODY_SELECTOR)
  }
- tooltipBody.innerHTML = tooltipBodyHtml
+ mount(tooltipBodyTemplate, {
+ target: tooltipBody,
+ props: {
+ isPlain: hint.kind === HINT_KIND.plain,
+ hint
+ }
+ })
 
  updateTooltipPosition()