@mnaoumov/create-obsidian-plugin 0.0.0-stage → 1.0.1

package/templates/default/src/views/sample-preact-view.tsx_dev-utils.ejs

@@ -0,0 +1,45 @@
+import { ItemView } from 'obsidian';
+// eslint-disable-next-line import-x/no-deprecated -- Only the third `replaceNode` parameter is deprecated; the two-argument form this file uses is not.
+import { render } from 'preact';
+
+import type { SamplePreactComponentProps } from '../preact-components/sample-preact-component.tsx';
+
+import {
+  AppContext,
+  SamplePreactComponent
+} from '../preact-components/sample-preact-component.tsx';
+
+export const SAMPLE_PREACT_VIEW_TYPE = '<%= pluginId %>-SamplePreactView';
+
+export class SamplePreactView extends ItemView {
+  public override getDisplayText(): string {
+    return 'Sample Preact view';
+  }
+
+  public override getViewType(): string {
+    return SAMPLE_PREACT_VIEW_TYPE;
+  }
+
+  public override onClose(): Promise<void> {
+    // eslint-disable-next-line import-x/no-deprecated -- See the import: the two-argument form is not deprecated.
+    render(null, this.contentEl);
+    return super.onClose();
+  }
+
+  public override onOpen(): Promise<void> {
+    const START_COUNT = 10;
+    const props: SamplePreactComponentProps = {
+      startCount: START_COUNT
+    };
+
+    // eslint-disable-next-line import-x/no-deprecated -- See the import: the two-argument form is not deprecated.
+    render(
+      <AppContext.Provider value={this.app}>
+        <SamplePreactComponent {...props} />
+      </AppContext.Provider>,
+      this.contentEl
+    );
+
+    return super.onOpen();
+  }
+}

package/templates/default/src/views/sample-preact-view.tsx_standalone.ejs

@@ -0,0 +1,42 @@
+import { ItemView } from 'obsidian';
+import { render } from 'preact';
+
+import type { SamplePreactComponentProps } from '../preact-components/sample-preact-component.tsx';
+
+import {
+  AppContext,
+  SamplePreactComponent
+} from '../preact-components/sample-preact-component.tsx';
+
+export const SAMPLE_PREACT_VIEW_TYPE = '<%= pluginId %>-SamplePreactView';
+
+export class SamplePreactView extends ItemView {
+  public override getDisplayText(): string {
+    return 'Sample Preact view';
+  }
+
+  public override getViewType(): string {
+    return SAMPLE_PREACT_VIEW_TYPE;
+  }
+
+  public override onClose(): Promise<void> {
+    render(null, this.contentEl);
+    return super.onClose();
+  }
+
+  public override onOpen(): Promise<void> {
+    const START_COUNT = 10;
+    const props: SamplePreactComponentProps = {
+      startCount: START_COUNT
+    };
+
+    render(
+      <AppContext.Provider value={this.app}>
+        <SamplePreactComponent {...props} />
+      </AppContext.Provider>,
+      this.contentEl
+    );
+
+    return super.onOpen();
+  }
+}

package/templates/default/src/views/sample-react-view.tsx_dev-utils.ejs

@@ -0,0 +1,47 @@
+import type { Root } from 'react-dom/client';
+
+import { ItemView } from 'obsidian';
+import { AppContext } from 'obsidian-dev-utils/obsidian/react/app-context';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import type { SampleReactComponentProps } from '../react-components/sample-react-component.tsx';
+
+import { SampleReactComponent } from '../react-components/sample-react-component.tsx';
+
+export const SAMPLE_REACT_VIEW_TYPE = '<%= pluginId %>-SampleReactView';
+
+export class SampleReactView extends ItemView {
+  private root: null | Root = null;
+
+  public override getDisplayText(): string {
+    return 'Sample React view';
+  }
+
+  public override getViewType(): string {
+    return SAMPLE_REACT_VIEW_TYPE;
+  }
+
+  public override onClose(): Promise<void> {
+    this.root?.unmount();
+    return super.onClose();
+  }
+
+  public override onOpen(): Promise<void> {
+    const START_COUNT = 10;
+    const props: SampleReactComponentProps = {
+      startCount: START_COUNT
+    };
+
+    this.root = createRoot(this.contentEl);
+    this.root.render(
+      <StrictMode>
+        <AppContext.Provider value={this.app}>
+          <SampleReactComponent {...props} />
+        </AppContext.Provider>
+      </StrictMode>
+    );
+
+    return super.onOpen();
+  }
+}

package/templates/default/src/views/sample-react-view.tsx_standalone.ejs

@@ -0,0 +1,49 @@
+import type { Root } from 'react-dom/client';
+
+import { ItemView } from 'obsidian';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import type { SampleReactComponentProps } from '../react-components/sample-react-component.tsx';
+
+import {
+  AppContext,
+  SampleReactComponent
+} from '../react-components/sample-react-component.tsx';
+
+export const SAMPLE_REACT_VIEW_TYPE = '<%= pluginId %>-SampleReactView';
+
+export class SampleReactView extends ItemView {
+  private root: null | Root = null;
+
+  public override getDisplayText(): string {
+    return 'Sample React view';
+  }
+
+  public override getViewType(): string {
+    return SAMPLE_REACT_VIEW_TYPE;
+  }
+
+  public override onClose(): Promise<void> {
+    this.root?.unmount();
+    return super.onClose();
+  }
+
+  public override onOpen(): Promise<void> {
+    const START_COUNT = 10;
+    const props: SampleReactComponentProps = {
+      startCount: START_COUNT
+    };
+
+    this.root = createRoot(this.contentEl);
+    this.root.render(
+      <StrictMode>
+        <AppContext.Provider value={this.app}>
+          <SampleReactComponent {...props} />
+        </AppContext.Provider>
+      </StrictMode>
+    );
+
+    return super.onOpen();
+  }
+}

package/templates/default/src/views/sample-solid-view.tsx_dev-utils.ejs

@@ -0,0 +1,46 @@
+import { ItemView } from 'obsidian';
+import { render } from 'solid-js/web';
+
+import type { SampleSolidComponentProps } from '../solid-components/sample-solid-component.tsx';
+
+import {
+  AppContext,
+  SampleSolidComponent
+} from '../solid-components/sample-solid-component.tsx';
+
+export const SAMPLE_SOLID_VIEW_TYPE = '<%= pluginId %>-SampleSolidView';
+
+export class SampleSolidView extends ItemView {
+  private dispose: (() => void) | null = null;
+
+  public override getDisplayText(): string {
+    return 'Sample Solid view';
+  }
+
+  public override getViewType(): string {
+    return SAMPLE_SOLID_VIEW_TYPE;
+  }
+
+  public override onClose(): Promise<void> {
+    this.dispose?.();
+    return super.onClose();
+  }
+
+  public override onOpen(): Promise<void> {
+    const START_COUNT = 10;
+    const props: SampleSolidComponentProps = {
+      startCount: START_COUNT
+    };
+
+    this.dispose = render(
+      () => (
+        <AppContext.Provider value={this.app}>
+          <SampleSolidComponent {...props} />
+        </AppContext.Provider>
+      ),
+      this.contentEl
+    );
+
+    return super.onOpen();
+  }
+}

package/templates/default/src/views/sample-solid-view.tsx_standalone.ejs

@@ -0,0 +1,46 @@
+import { ItemView } from 'obsidian';
+import { render } from 'solid-js/web';
+
+import type { SampleSolidComponentProps } from '../solid-components/sample-solid-component.tsx';
+
+import {
+  AppContext,
+  SampleSolidComponent
+} from '../solid-components/sample-solid-component.tsx';
+
+export const SAMPLE_SOLID_VIEW_TYPE = '<%= pluginId %>-SampleSolidView';
+
+export class SampleSolidView extends ItemView {
+  private dispose: (() => void) | null = null;
+
+  public override getDisplayText(): string {
+    return 'Sample Solid view';
+  }
+
+  public override getViewType(): string {
+    return SAMPLE_SOLID_VIEW_TYPE;
+  }
+
+  public override onClose(): Promise<void> {
+    this.dispose?.();
+    return super.onClose();
+  }
+
+  public override onOpen(): Promise<void> {
+    const START_COUNT = 10;
+    const props: SampleSolidComponentProps = {
+      startCount: START_COUNT
+    };
+
+    this.dispose = render(
+      () => (
+        <AppContext.Provider value={this.app}>
+          <SampleSolidComponent {...props} />
+        </AppContext.Provider>
+      ),
+      this.contentEl
+    );
+
+    return super.onOpen();
+  }
+}

package/templates/default/src/views/sample-svelte-view.ts.ejs

@@ -0,0 +1,47 @@
+import { ItemView } from 'obsidian';
+import {
+  mount,
+  unmount
+} from 'svelte';
+
+import type {
+  SampleSvelteComponentExports,
+  SampleSvelteComponentProps
+} from '../svelte-components/sample-svelte-component.d.ts';
+
+import SampleSvelteComponent from '../svelte-components/sample-svelte-component.svelte';
+
+export const SAMPLE_SVELTE_VIEW_TYPE = '<%= pluginId %>-SampleSvelteView';
+
+export class SampleSvelteView extends ItemView {
+  private sampleSvelteComponent: null | SampleSvelteComponentExports = null;
+
+  public override getDisplayText(): string {
+    return 'Sample Svelte view';
+  }
+
+  public override getViewType(): string {
+    return SAMPLE_SVELTE_VIEW_TYPE;
+  }
+
+  public override async onClose(): Promise<void> {
+    if (this.sampleSvelteComponent) {
+      await unmount(this.sampleSvelteComponent);
+    }
+  }
+
+  public override onOpen(): Promise<void> {
+    const START_COUNT = 10;
+    const props: SampleSvelteComponentProps = {
+      startCount: START_COUNT
+    };
+
+    this.sampleSvelteComponent = mount(SampleSvelteComponent, {
+      props,
+      target: this.contentEl
+    }) as SampleSvelteComponentExports;
+
+    this.sampleSvelteComponent.increment();
+    return super.onOpen();
+  }
+}

package/templates/default/src/views/sample-view.ts.ejs

@@ -0,0 +1,37 @@
+import { ItemView } from 'obsidian';
+
+export const SAMPLE_VIEW_TYPE = '<%= pluginShortName %>-SampleView';
+
+export class SampleView extends ItemView {
+  public override getDisplayText(): string {
+    return 'Sample view';
+  }
+
+  public override getViewType(): string {
+    return SAMPLE_VIEW_TYPE;
+  }
+
+  public override onOpen(): Promise<void> {
+    const container = this.contentEl;
+    container.empty();
+    container.createEl('h4', { text: '<%= pluginName %>' });
+
+    const vaultName = this.app.vault.getName();
+    container.createEl('p', { text: `Vault: ${vaultName}` });
+
+    const files = this.app.vault.getMarkdownFiles();
+    container.createEl('p', { text: `Markdown files: ${String(files.length)}` });
+
+    const list = container.createEl('ul');
+    const MAX_FILES = 10;
+    for (const file of files.slice(0, MAX_FILES)) {
+      list.createEl('li', { text: file.path });
+    }
+
+    if (files.length > MAX_FILES) {
+      list.createEl('li', { text: `... and ${String(files.length - MAX_FILES)} more` });
+    }
+
+    return super.onOpen();
+  }
+}

package/templates/default/src/views/sample-vue-view.ts.ejs

@@ -0,0 +1,34 @@
+import type { App as VueApp } from 'vue';
+
+import { ItemView } from 'obsidian';
+import { createApp } from 'vue';
+
+import SampleVueComponent from '../vue-components/sample-vue-component.vue';
+
+export const SAMPLE_VUE_VIEW_TYPE = '<%= pluginId %>-SampleVueView';
+
+export class SampleVueView extends ItemView {
+  private vueApp: null | VueApp = null;
+
+  public override getDisplayText(): string {
+    return 'Sample Vue view';
+  }
+
+  public override getViewType(): string {
+    return SAMPLE_VUE_VIEW_TYPE;
+  }
+
+  public override onClose(): Promise<void> {
+    this.vueApp?.unmount();
+    return super.onClose();
+  }
+
+  public override onOpen(): Promise<void> {
+    const START_COUNT = 10;
+    this.vueApp = createApp(SampleVueComponent, {
+      startCount: START_COUNT
+    });
+    this.vueApp.mount(this.contentEl);
+    return super.onOpen();
+  }
+}

package/templates/default/src/vue-components/sample-vue-component.d.ts.ejs

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
+  export default component;
+}

package/templates/default/src/vue-components/sample-vue-component.vue.ejs

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps<{
+  startCount: number;
+}>();
+
+const count = ref(props.startCount);
+
+function increment(): void {
+  count.value += 1;
+}
+</script>
+
+<template>
+  <h4>Sample Vue Component!</h4>
+
+  <div>
+    <span>My number is {{ count }}!</span>
+  </div>
+
+  <button type="button" @click="increment">
+    Increment
+  </button>
+</template>

package/templates/default/src/wasm/README.md.ejs

@@ -0,0 +1,29 @@
+# WebAssembly
+
+This folder holds a working WebAssembly module and the code that calls it. It is a sample: replace it with your own, and this note with what yours does.
+
+WebAssembly is how you use code written in Rust, C, Go or AssemblyScript from a plugin. Unlike a native Node binary it runs on **mobile** too, so it is the portable route — which is why it is worth a sample rather than a paragraph of instructions.
+
+## What is here
+
+| File | What it is |
+| --- | --- |
+| `module.wasm` | The compiled module: 39 bytes, one export, `answer()`, returning `42`. |
+| `module.wat` | The same module in WebAssembly's text format, so the binary is not opaque. Documentation only — nothing in the build reads it. |
+| `answer.ts` | Loads the module and exposes `getWasmAnswer()`. Written against the bundler you chose. |
+
+`src/plugin.ts` registers a **Sample WASM answer** command that calls `getWasmAnswer()` and shows the result. That call is not decoration: a bundler tree-shakes an export nothing uses, so without a real call site the module would be dropped from `main.js` and the whole WebAssembly integration would be dead with the build still green.
+
+## Replacing it with your own
+
+1. Build a `.wasm` and put it in this folder. With Rust: install [Rust](https://www.rust-lang.org/tools/install) and [wasm-pack](https://rustwasm.github.io/wasm-pack/installer/), `wasm-pack new my-wasm`, `wasm-pack build --target web`. With [AssemblyScript](https://www.assemblyscript.org/): `npm install assemblyscript`, then `npx asc assembly/index.ts --outFile src/wasm/module.wasm`.
+2. Point `answer.ts` at it and name your own exports. `src/wasm.d.ts` declares what a `.wasm` import yields under this project's bundler — that differs between bundlers, which is why the file is generated rather than copied.
+3. Keep something in `src/` calling into it, for the tree-shaking reason above.
+
+## The one rule that is not obvious
+
+Obsidian ships a plugin as `main.js` and `styles.css` and nothing else. A bundler that emits the module as a **separate** `.wasm` file next to the bundle produces a plugin that works in your repo and breaks the moment it is released — the file is simply not there. So the build is configured to **inline** the module into `main.js`, and every bundler needs telling that in its own way. If you swap bundlers, check that first.
+
+## Provenance
+
+`module.wasm` is the sample module from [CodeScript Toolkit](https://github.com/mnaoumov/obsidian-codescript-toolkit)'s demo vault, hand-written and 39 bytes long. `module.wat` is its source.

package/templates/default/src/wasm/answer.ts_esbuild.ejs

@@ -0,0 +1,23 @@
+import bytes from './module.wasm';
+
+/**
+ * Instantiates the sample WebAssembly module and calls its one export.
+ *
+ * The signature is the same on every bundler; the two lines above and below are not. A `.wasm` import
+ * yields something different under each of them -- bytes here, a loader function under rollup, a `data:`
+ * URL under vite, webpack and parcel -- so this file is written per bundler and everything else in the
+ * plugin talks to `getWasmAnswer()`.
+ *
+ * Here the import is the module's bytes: esbuild's `binary` loader inlines the file as base64 and gives
+ * this module a `Uint8Array`.
+ */
+export async function getWasmAnswer(): Promise<number> {
+  // `compile` then `instantiate`, rather than `instantiate(bytes)` in one call: `WebAssembly.Module` is
+  // Declared as an EMPTY interface, so a `Uint8Array` satisfies it too and the one-call form resolves to
+  // The overload taking an already-compiled module -- whose result is a bare `Instance` with no
+  // `instance` property on it, which is TS2339 rather than anything about WebAssembly.
+  const compiled = await WebAssembly.compile(bytes);
+  const instance = await WebAssembly.instantiate(compiled);
+  const answer = instance.exports['answer'] as () => number;
+  return answer();
+}

package/templates/default/src/wasm/answer.ts_parcel.ejs

@@ -0,0 +1,29 @@
+import dataUrl from 'data-url:./module.wasm';
+
+/**
+ * Instantiates the sample WebAssembly module and calls its one export.
+ *
+ * The signature is the same on every bundler; the two lines above and below are not. A `.wasm` import
+ * yields something different under each of them -- a `data:` URL here, bytes under esbuild, a loader
+ * function under rollup -- so this file is written per bundler and everything else in the plugin talks
+ * to `getWasmAnswer()`.
+ *
+ * Parcel's `data-url:` scheme carries the module inside `main.js`, which is decoded here rather than
+ * fetched: `atob` is synchronous and needs no network stack, and it works the same in Obsidian's desktop
+ * and mobile runtimes.
+ */
+export async function getWasmAnswer(): Promise<number> {
+  // Percent-DECODED before it is base64-decoded, because parcel writes its data URL with the payload
+  // Percent-encoded -- `/` reaches the bundle as `%2F`, and `atob` on that throws. Base64 never contains
+  // A `%`, so this is a no-op on the plain payloads the other bundlers write.
+  const base64 = decodeURIComponent(dataUrl.slice(dataUrl.indexOf(',') + 1));
+  const bytes = Uint8Array.from(atob(base64), (character) => character.codePointAt(0) ?? 0);
+  // `compile` then `instantiate`, rather than `instantiate(bytes)` in one call: `WebAssembly.Module` is
+  // Declared as an EMPTY interface, so a `Uint8Array` satisfies it too and the one-call form resolves to
+  // The overload taking an already-compiled module -- whose result is a bare `Instance` with no
+  // `instance` property on it, which is TS2339 rather than anything about WebAssembly.
+  const compiled = await WebAssembly.compile(bytes);
+  const instance = await WebAssembly.instantiate(compiled);
+  const answer = instance.exports['answer'] as () => number;
+  return answer();
+}

package/templates/default/src/wasm/answer.ts_rollup.ejs

@@ -0,0 +1,19 @@
+import load from './module.wasm';
+
+/**
+ * Instantiates the sample WebAssembly module and calls its one export.
+ *
+ * The signature is the same on every bundler; the two lines above and below are not. A `.wasm` import
+ * yields something different under each of them -- a loader function here, bytes under esbuild, a
+ * `data:` URL under vite, webpack and parcel -- so this file is written per bundler and everything else
+ * in the plugin talks to `getWasmAnswer()`.
+ *
+ * `@rollup/plugin-wasm` replaces the import with a function that decodes the inlined base64 and
+ * instantiates it. The empty imports object is load-bearing: without an argument the plugin compiles
+ * rather than instantiates, and resolves to a module with no `exports` on it.
+ */
+export async function getWasmAnswer(): Promise<number> {
+  const { instance } = await load({});
+  const answer = instance.exports['answer'] as () => number;
+  return answer();
+}

package/templates/default/src/wasm/answer.ts_vite.ejs

@@ -0,0 +1,29 @@
+import dataUrl from './module.wasm?url';
+
+/**
+ * Instantiates the sample WebAssembly module and calls its one export.
+ *
+ * The signature is the same on every bundler; the two lines above and below are not. A `.wasm` import
+ * yields something different under each of them -- a `data:` URL here, bytes under esbuild, a loader
+ * function under rollup -- so this file is written per bundler and everything else in the plugin talks
+ * to `getWasmAnswer()`.
+ *
+ * Vite inlines the asset into `main.js` as a `data:` URL, which is decoded here rather than fetched:
+ * `atob` is synchronous and needs no network stack, and it works the same in Obsidian's desktop and
+ * mobile runtimes.
+ */
+export async function getWasmAnswer(): Promise<number> {
+  // Percent-DECODED before it is base64-decoded, because parcel writes its data URL with the payload
+  // Percent-encoded -- `/` reaches the bundle as `%2F`, and `atob` on that throws. Base64 never contains
+  // A `%`, so this is a no-op on the plain payloads the other bundlers write.
+  const base64 = decodeURIComponent(dataUrl.slice(dataUrl.indexOf(',') + 1));
+  const bytes = Uint8Array.from(atob(base64), (character) => character.codePointAt(0) ?? 0);
+  // `compile` then `instantiate`, rather than `instantiate(bytes)` in one call: `WebAssembly.Module` is
+  // Declared as an EMPTY interface, so a `Uint8Array` satisfies it too and the one-call form resolves to
+  // The overload taking an already-compiled module -- whose result is a bare `Instance` with no
+  // `instance` property on it, which is TS2339 rather than anything about WebAssembly.
+  const compiled = await WebAssembly.compile(bytes);
+  const instance = await WebAssembly.instantiate(compiled);
+  const answer = instance.exports['answer'] as () => number;
+  return answer();
+}

package/templates/default/src/wasm/answer.ts_webpack.ejs

@@ -0,0 +1,29 @@
+import dataUrl from './module.wasm';
+
+/**
+ * Instantiates the sample WebAssembly module and calls its one export.
+ *
+ * The signature is the same on every bundler; the two lines above and below are not. A `.wasm` import
+ * yields something different under each of them -- a `data:` URL here, bytes under esbuild, a loader
+ * function under rollup -- so this file is written per bundler and everything else in the plugin talks
+ * to `getWasmAnswer()`.
+ *
+ * The `asset/inline` rule in `scripts/webpack.config.ts` carries the module inside `main.js` as a
+ * `data:` URL, which is decoded here rather than fetched: `atob` is synchronous and needs no network
+ * stack, and it works the same in Obsidian's desktop and mobile runtimes.
+ */
+export async function getWasmAnswer(): Promise<number> {
+  // Percent-DECODED before it is base64-decoded, because parcel writes its data URL with the payload
+  // Percent-encoded -- `/` reaches the bundle as `%2F`, and `atob` on that throws. Base64 never contains
+  // A `%`, so this is a no-op on the plain payloads the other bundlers write.
+  const base64 = decodeURIComponent(dataUrl.slice(dataUrl.indexOf(',') + 1));
+  const bytes = Uint8Array.from(atob(base64), (character) => character.codePointAt(0) ?? 0);
+  // `compile` then `instantiate`, rather than `instantiate(bytes)` in one call: `WebAssembly.Module` is
+  // Declared as an EMPTY interface, so a `Uint8Array` satisfies it too and the one-call form resolves to
+  // The overload taking an already-compiled module -- whose result is a bare `Instance` with no
+  // `instance` property on it, which is TS2339 rather than anything about WebAssembly.
+  const compiled = await WebAssembly.compile(bytes);
+  const instance = await WebAssembly.instantiate(compiled);
+  const answer = instance.exports['answer'] as () => number;
+  return answer();
+}

package/templates/default/src/wasm/module.wat.ejs

@@ -0,0 +1,12 @@
+;; The sample WebAssembly module this plugin ships, in text form.
+;;
+;; `module.wasm` beside this file is the 39 bytes it compiles to, and that binary is what `answer.ts`
+;; imports. NOTHING IN THE BUILD READS THIS FILE -- it is here so the binary is not opaque. This is
+;; what is inside it: one exported function taking nothing and returning the constant 42.
+;;
+;; Recompile after an edit, with wabt's `wat2wasm`:
+;;
+;;     wat2wasm src/wasm/module.wat -o src/wasm/module.wasm
+(module
+  (func (export "answer") (result i32)
+    i32.const 42))

package/templates/default/src/wasm/sample-command.ts.ejs

@@ -0,0 +1,33 @@
+import type { Plugin } from 'obsidian';
+
+import { Notice } from 'obsidian';
+
+import { getWasmAnswer } from './answer.ts';
+
+/**
+ * Registers the command that calls into the sample WebAssembly module.
+ *
+ * This is not decoration, and deleting it does more than remove a command. A bundler tree-shakes an
+ * export nothing calls, so with no real call site the module drops out of `main.js` entirely -- and the
+ * build stays green while the whole WebAssembly integration is silently absent. Whatever replaces this
+ * sample, keep something in `src/` calling into the module.
+ *
+ * Bundler-independent on purpose: `answer.ts` beside it is written per bundler, and this file is what
+ * every preset's `src/plugin.ts` calls, so the per-bundler half stays one file.
+ */
+export function registerSampleWasmCommand(plugin: Plugin): void {
+  plugin.addCommand({
+    // `Command.callback` is typed `() => any`, so an async callback is not a misused promise -- and awaiting
+    // Here needs no `void`, which one preset's lint config bans and the other's does not.
+    callback: async () => {
+      await showWasmAnswer();
+    },
+    id: 'sample-wasm-answer',
+    name: 'Sample WASM answer'
+  });
+}
+
+async function showWasmAnswer(): Promise<void> {
+  const answer = await getWasmAnswer();
+  new Notice(`WebAssembly says: ${String(answer)}`);
+}

package/templates/default/src/wasm.d.ts_esbuild.ejs

@@ -0,0 +1,12 @@
+// Esbuild has no loader for `.wasm` of its own, and the ESM-integration plugin (`esbuild-plugin-wasm`)
+// Cannot be used here: it emits a TOP-LEVEL `await`, which esbuild supports only for the `esm` output
+// Format, and an Obsidian plugin is `cjs`. So the build turns on esbuild's built-in `binary` loader,
+// Which inlines the file as base64 and hands the importing module its bytes.
+declare module '*.wasm' {
+  // `Uint8Array<ArrayBuffer>` rather than a bare `Uint8Array`: that defaults to `ArrayBufferLike`, which
+  // Admits a `SharedArrayBuffer` and so is NOT assignable to `BufferSource` -- TS2345 at every
+  // `WebAssembly` call. esbuild's `binary` loader emits a plain `new Uint8Array(...)` over an ordinary
+  // Buffer, so the narrower type is also the true one.
+  const bytes: Uint8Array<ArrayBuffer>;
+  export default bytes;
+}