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

package/templates/default/src/plugin.ts_standalone.ejs

@@ -0,0 +1,56 @@
+import {
+  Notice,
+  Plugin as ObsidianPlugin
+} from 'obsidian';
+
+import type { Editor } from 'obsidian';
+
+import {
+  DEFAULT_SETTINGS,
+  <%= pluginShortName %>SettingTab
+} from './settings.ts';
+<%- render('import') -%>
+
+import type { PluginSettings } from './settings.ts';
+
+export class Plugin extends ObsidianPlugin {
+  // `Plugin.settings` is declared as `settings?: unknown` by Obsidian itself, so a redeclaration needs both
+  // `override` and an initializer to narrow it.
+  public override settings: PluginSettings = { ...DEFAULT_SETTINGS };
+
+  public override async onload(): Promise<void> {
+    await this.loadSettings();
+
+    this.addCommand({
+      callback: () => {
+        new Notice('Sample command');
+      },
+      id: 'sample',
+      name: 'Sample'
+    });
+
+    this.addCommand({
+      editorCallback: (editor: Editor) => {
+        editor.replaceSelection('Sample Editor Command');
+      },
+      id: 'sample-editor',
+      name: 'Sample editor'
+    });
+
+    this.addSettingTab(new <%= pluginShortName %>SettingTab(this.app, this));
+<%- render('onload') -%>
+  }
+
+  public override onunload(): void {
+    // Cleanup
+  }
+
+  public async loadSettings(): Promise<void> {
+    this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData() as Partial<PluginSettings>);
+  }
+
+  public async saveSettings(): Promise<void> {
+    await this.saveData(this.settings);
+  }
+<%- render('method') -%>
+}

package/templates/default/src/plugin.ts_standalone@import_codemirror.ejs

@@ -0,0 +1,3 @@
+import { sampleStateField } from './editor-extensions/sample-state-field.ts';
+import { sampleViewPlugin } from './editor-extensions/sample-view-plugin.ts';
+import { SampleEditorSuggest } from './editor-suggests/sample-editor-suggest.ts';

package/templates/default/src/plugin.ts_standalone@import_i18next.ejs

@@ -0,0 +1 @@
+import { initI18n } from './i18n/index.ts';

package/templates/default/src/plugin.ts_standalone@import_lit.ejs

@@ -0,0 +1,4 @@
+import {
+  SAMPLE_LIT_VIEW_TYPE,
+  SampleLitView
+} from './views/sample-lit-view.ts';

package/templates/default/src/plugin.ts_standalone@import_preact.ejs

@@ -0,0 +1,4 @@
+import {
+  SAMPLE_PREACT_VIEW_TYPE,
+  SamplePreactView
+} from './views/sample-preact-view.tsx';

package/templates/default/src/plugin.ts_standalone@import_react.ejs

@@ -0,0 +1,4 @@
+import {
+  SAMPLE_REACT_VIEW_TYPE,
+  SampleReactView
+} from './views/sample-react-view.tsx';

package/templates/default/src/plugin.ts_standalone@import_solid.ejs

@@ -0,0 +1,4 @@
+import {
+  SAMPLE_SOLID_VIEW_TYPE,
+  SampleSolidView
+} from './views/sample-solid-view.tsx';

package/templates/default/src/plugin.ts_standalone@import_svelte.ejs

@@ -0,0 +1,4 @@
+import {
+  SAMPLE_SVELTE_VIEW_TYPE,
+  SampleSvelteView
+} from './views/sample-svelte-view.ts';

package/templates/default/src/plugin.ts_standalone@import_typesafe-i18n.ejs

@@ -0,0 +1 @@
+import { t } from './i18n/index.ts';

package/templates/default/src/plugin.ts_standalone@import_vue.ejs

@@ -0,0 +1,4 @@
+import {
+  SAMPLE_VUE_VIEW_TYPE,
+  SampleVueView
+} from './views/sample-vue-view.ts';

package/templates/default/src/plugin.ts_standalone@import_wasm.ejs

@@ -0,0 +1 @@
+import { registerSampleWasmCommand } from './wasm/sample-command.ts';

package/templates/default/src/plugin.ts_standalone@method_ui-view.ejs

@@ -0,0 +1,7 @@
+
+  private openViewOnLayoutReady(viewType: string): void {
+    this.app.workspace.onLayoutReady(() => {
+      // `onLayoutReady` takes a synchronous callback; `void` is the marker `no-floating-promises` accepts.
+      void this.app.workspace.ensureSideLeaf(viewType, 'right');
+    });
+  }

package/templates/default/src/plugin.ts_standalone@onload_codemirror.ejs

@@ -0,0 +1,4 @@
+
+    this.registerEditorExtension([sampleViewPlugin, sampleStateField]);
+
+    this.registerEditorSuggest(new SampleEditorSuggest(this.app));

package/templates/default/src/plugin.ts_standalone@onload_i18next.ejs

@@ -0,0 +1,2 @@
+
+    await initI18n();

package/templates/default/src/plugin.ts_standalone@onload_lit.ejs

@@ -0,0 +1,4 @@
+
+    this.registerView(SAMPLE_LIT_VIEW_TYPE, (leaf) => new SampleLitView(leaf));
+
+    this.openViewOnLayoutReady(SAMPLE_LIT_VIEW_TYPE);

package/templates/default/src/plugin.ts_standalone@onload_preact.ejs

@@ -0,0 +1,4 @@
+
+    this.registerView(SAMPLE_PREACT_VIEW_TYPE, (leaf) => new SamplePreactView(leaf));
+
+    this.openViewOnLayoutReady(SAMPLE_PREACT_VIEW_TYPE);

package/templates/default/src/plugin.ts_standalone@onload_react.ejs

@@ -0,0 +1,4 @@
+
+    this.registerView(SAMPLE_REACT_VIEW_TYPE, (leaf) => new SampleReactView(leaf));
+
+    this.openViewOnLayoutReady(SAMPLE_REACT_VIEW_TYPE);

package/templates/default/src/plugin.ts_standalone@onload_solid.ejs

@@ -0,0 +1,4 @@
+
+    this.registerView(SAMPLE_SOLID_VIEW_TYPE, (leaf) => new SampleSolidView(leaf));
+
+    this.openViewOnLayoutReady(SAMPLE_SOLID_VIEW_TYPE);

package/templates/default/src/plugin.ts_standalone@onload_svelte.ejs

@@ -0,0 +1,4 @@
+
+    this.registerView(SAMPLE_SVELTE_VIEW_TYPE, (leaf) => new SampleSvelteView(leaf));
+
+    this.openViewOnLayoutReady(SAMPLE_SVELTE_VIEW_TYPE);

package/templates/default/src/plugin.ts_standalone@onload_typesafe-i18n.ejs

@@ -0,0 +1,8 @@
+
+    this.addCommand({
+      callback: (): void => {
+        new Notice(t('greeting'));
+      },
+      id: 'greeting',
+      name: 'Greeting'
+    });

package/templates/default/src/plugin.ts_standalone@onload_vue.ejs

@@ -0,0 +1,4 @@
+
+    this.registerView(SAMPLE_VUE_VIEW_TYPE, (leaf) => new SampleVueView(leaf));
+
+    this.openViewOnLayoutReady(SAMPLE_VUE_VIEW_TYPE);

package/templates/default/src/plugin.ts_standalone@onload_wasm.ejs

@@ -0,0 +1,2 @@
+
+    registerSampleWasmCommand(this);

package/templates/default/src/preact-components/sample-preact-component.tsx_dev-utils.ejs

@@ -0,0 +1,47 @@
+import type { App } from 'obsidian';
+import type { JSX } from 'preact';
+
+import { createContext } from 'preact';
+import {
+  useContext,
+  useState
+} from 'preact/hooks';
+
+// The view always provides the app, so the context default is never read. Widened through its own
+// `unknown` binding rather than asserted twice in one expression: `undefined` does not overlap `App`,
+// so a direct assertion is TS2352, and `as unknown as` in one expression is what the shared lint config
+// bans.
+const UNSET_APP: unknown = undefined;
+
+export const AppContext = createContext<App>(UNSET_APP as App);
+
+export interface SamplePreactComponentProps {
+  startCount: number;
+}
+
+export function SamplePreactComponent(props: SamplePreactComponentProps): JSX.Element {
+  const [count, setCount] = useState(props.startCount);
+  const app = useContext(AppContext);
+
+  function increment(): void {
+    setCount(count + 1);
+  }
+
+  return (
+    <>
+      <h4>Sample Preact Component!</h4>
+
+      <div>
+        <span>
+          My number is {count}
+          !
+        </span>
+      </div>
+
+      <button onClick={increment} type="button">Increment</button>
+      <div>
+        Vault name: {app.vault.getName()}
+      </div>
+    </>
+  );
+}

package/templates/default/src/preact-components/sample-preact-component.tsx_standalone.ejs

@@ -0,0 +1,47 @@
+import type { App } from 'obsidian';
+import type { JSX } from 'preact';
+
+import { createContext } from 'preact';
+import {
+  useContext,
+  useState
+} from 'preact/hooks';
+
+// The view always provides the app, so the context default is never read. Widened through its own
+// `unknown` binding rather than asserted twice in one expression: `undefined` does not overlap `App`,
+// so a direct assertion is TS2352, and `as unknown as` in one expression is what the shared lint config
+// bans.
+const UNSET_APP: unknown = undefined;
+
+export const AppContext = createContext<App>(UNSET_APP as App);
+
+export interface SamplePreactComponentProps {
+  startCount: number;
+}
+
+export function SamplePreactComponent(props: SamplePreactComponentProps): JSX.Element {
+  const [count, setCount] = useState(props.startCount);
+  const app = useContext(AppContext);
+
+  function increment(): void {
+    setCount(count + 1);
+  }
+
+  return (
+    <>
+      <h4>Sample Preact Component!</h4>
+
+      <div>
+        <span>
+          My number is {count}
+          !
+        </span>
+      </div>
+
+      <button onClick={increment} type="button">Increment</button>
+      <div>
+        Vault name: {app.vault.getName()}
+      </div>
+    </>
+  );
+}

package/templates/default/src/react-components/sample-react-component.tsx_dev-utils.ejs

@@ -0,0 +1,35 @@
+import type { JSX } from 'react';
+
+import { useApp } from 'obsidian-dev-utils/obsidian/react/app-context';
+import { useState } from 'react';
+
+export interface SampleReactComponentProps {
+  startCount: number;
+}
+
+export function SampleReactComponent(props: SampleReactComponentProps): JSX.Element {
+  const [count, setCount] = useState(props.startCount);
+  const app = useApp();
+
+  function increment(): void {
+    setCount(count + 1);
+  }
+
+  return (
+    <>
+      <h4>Sample React Component!</h4>
+
+      <div>
+        <span>
+          My number is {count}
+          !
+        </span>
+      </div>
+
+      <button onClick={increment} type="button">Increment</button>
+      <div>
+        Vault name: {app.vault.getName()}
+      </div>
+    </>
+  );
+}

package/templates/default/src/react-components/sample-react-component.tsx_standalone.ejs

@@ -0,0 +1,47 @@
+import type { App } from 'obsidian';
+import type { JSX } from 'react';
+
+import {
+  createContext,
+  useContext,
+  useState
+} from 'react';
+
+// The view always provides the app, so the context default is never read. Widened through its own
+// `unknown` binding rather than asserted twice in one expression: `undefined` does not overlap `App`,
+// so a direct assertion is TS2352, and `as unknown as` in one expression is what the shared lint config
+// bans.
+const UNSET_APP: unknown = undefined;
+
+export const AppContext = createContext<App>(UNSET_APP as App);
+
+export interface SampleReactComponentProps {
+  startCount: number;
+}
+
+export function SampleReactComponent(props: SampleReactComponentProps): JSX.Element {
+  const [count, setCount] = useState(props.startCount);
+  const app = useContext(AppContext);
+
+  function increment(): void {
+    setCount(count + 1);
+  }
+
+  return (
+    <>
+      <h4>Sample React Component!</h4>
+
+      <div>
+        <span>
+          My number is {count}
+          !
+        </span>
+      </div>
+
+      <button onClick={increment} type="button">Increment</button>
+      <div>
+        Vault name: {app.vault.getName()}
+      </div>
+    </>
+  );
+}

package/templates/default/src/settings.ts.ejs

@@ -0,0 +1,32 @@
+import type { SettingDefinitionItem } from 'obsidian';
+
+import { PluginSettingTab } from 'obsidian';
+
+export interface PluginSettings {
+  mySetting: string;
+}
+
+export const DEFAULT_SETTINGS: PluginSettings = {
+  mySetting: 'default'
+};
+
+/**
+ * The settings tab is declarative: return one definition per row from `getSettingDefinitions()` and Obsidian renders
+ * them and indexes them for the settings search. A `control` row's `key` names a property of `plugin.settings`, which
+ * `PluginSettingTab` reads and persists itself.
+ */
+export class <%= pluginShortName %>SettingTab extends PluginSettingTab {
+  public override getSettingDefinitions(): SettingDefinitionItem[] {
+    return [
+      {
+        control: {
+          key: 'mySetting',
+          placeholder: 'Enter your value',
+          type: 'text'
+        },
+        desc: 'Description',
+        name: 'Setting #1'
+      }
+    ];
+  }
+}

package/templates/default/src/solid-components/sample-solid-component.tsx_dev-utils.ejs

@@ -0,0 +1,47 @@
+import type { App } from 'obsidian';
+import type { JSX } from 'solid-js';
+
+import {
+  createContext,
+  createSignal,
+  useContext
+} from 'solid-js';
+
+// The view always provides the app, so the context default is never read. Widened through its own
+// `unknown` binding rather than asserted twice in one expression: `undefined` does not overlap `App`,
+// so a direct assertion is TS2352, and `as unknown as` in one expression is what the shared lint config
+// bans.
+const UNSET_APP: unknown = undefined;
+
+export const AppContext = createContext<App>(UNSET_APP as App);
+
+export interface SampleSolidComponentProps {
+  startCount: number;
+}
+
+export function SampleSolidComponent(props: SampleSolidComponentProps): JSX.Element {
+  const [count, setCount] = createSignal(props.startCount);
+  const app = useContext(AppContext);
+
+  function increment(): void {
+    setCount(count() + 1);
+  }
+
+  return (
+    <>
+      <h4>Sample Solid Component!</h4>
+
+      <div>
+        <span>
+          My number is {count()}
+          !
+        </span>
+      </div>
+
+      <button onClick={increment} type="button">Increment</button>
+      <div>
+        Vault name: {app.vault.getName()}
+      </div>
+    </>
+  );
+}

package/templates/default/src/solid-components/sample-solid-component.tsx_standalone.ejs

@@ -0,0 +1,47 @@
+import type { App } from 'obsidian';
+import type { JSX } from 'solid-js';
+
+import {
+  createContext,
+  createSignal,
+  useContext
+} from 'solid-js';
+
+// The view always provides the app, so the context default is never read. Widened through its own
+// `unknown` binding rather than asserted twice in one expression: `undefined` does not overlap `App`,
+// so a direct assertion is TS2352, and `as unknown as` in one expression is what the shared lint config
+// bans.
+const UNSET_APP: unknown = undefined;
+
+export const AppContext = createContext<App>(UNSET_APP as App);
+
+export interface SampleSolidComponentProps {
+  startCount: number;
+}
+
+export function SampleSolidComponent(props: SampleSolidComponentProps): JSX.Element {
+  const [count, setCount] = createSignal(props.startCount);
+  const app = useContext(AppContext);
+
+  function increment(): void {
+    setCount(count() + 1);
+  }
+
+  return (
+    <>
+      <h4>Sample Solid Component!</h4>
+
+      <div>
+        <span>
+          My number is {count()}
+          !
+        </span>
+      </div>
+
+      <button onClick={increment} type="button">Increment</button>
+      <div>
+        Vault name: {app.vault.getName()}
+      </div>
+    </>
+  );
+}

package/templates/default/src/styles/css-modules.d.ts.ejs

@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const classes: Record<string, string>;
+  export default classes;
+}

package/templates/default/src/styles/main.css_dev-utils.ejs

@@ -0,0 +1,17 @@
+<%- render('content') -%>
+/**
+ * You can remove this file if you don't need any styles
+ * See default library styles: https://github.com/mnaoumov/obsidian-dev-utils/blob/main/src/styles/main.scss
+ * See available library css classes: https://github.com/mnaoumov/obsidian-dev-utils/blob/main/src/CssClass.ts
+ */
+
+.<%= pluginId %>.obsidian-dev-utils {
+  /* Override library styles */
+}
+
+/* The word-count widget the sample editor extension renders. Styled here rather than through
+   `element.style`, so a theme can restyle it. */
+.cm-sample-word-count {
+  font-size: 0.85em;
+  opacity: 0.5;
+}

package/templates/default/src/styles/main.css_dev-utils@content_tailwind.ejs

@@ -0,0 +1 @@
+@import "tailwindcss";

package/templates/default/src/styles/main.css_standalone.ejs

@@ -0,0 +1,11 @@
+<%- render('content') -%>
+.<%= pluginId %> {
+  /* Add your plugin styles here */
+}
+
+/* The word-count widget the sample editor extension renders. Styled here rather than through
+   `element.style`, so a theme can restyle it. */
+.cm-sample-word-count {
+  font-size: 0.85em;
+  opacity: 0.5;
+}

package/templates/default/src/styles/main.css_standalone@content_tailwind.ejs

@@ -0,0 +1 @@
+@import "tailwindcss";

package/templates/default/src/styles/main.module.css.ejs

@@ -0,0 +1,3 @@
+.<%= pluginId %> {
+  /* Add your plugin styles here */
+}

package/templates/default/src/styles/main.scss_dev-utils.ejs

@@ -0,0 +1,16 @@
+/**
+ * You can remove this file if you don't need any styles
+ * See default library styles: https://github.com/mnaoumov/obsidian-dev-utils/blob/main/src/styles/main.scss
+ * See available library css classes: https://github.com/mnaoumov/obsidian-dev-utils/blob/main/src/CssClass.ts
+ */
+
+.<%= pluginId %>.obsidian-dev-utils {
+  /* Override library styles */
+}
+
+/* The word-count widget the sample editor extension renders. Styled here rather than through
+   `element.style`, so a theme can restyle it. */
+.cm-sample-word-count {
+  font-size: 0.85em;
+  opacity: 0.5;
+}

package/templates/default/src/styles/main.scss_standalone.ejs

@@ -0,0 +1,10 @@
+.<%= pluginId %> {
+  /* Add your plugin styles here */
+}
+
+/* The word-count widget the sample editor extension renders. Styled here rather than through
+   `element.style`, so a theme can restyle it. */
+.cm-sample-word-count {
+  font-size: 0.85em;
+  opacity: 0.5;
+}

package/templates/default/src/styles/styles.d.ts.ejs

@@ -0,0 +1,4 @@
+// `src/main.ts` imports the stylesheet for its side effect, so that the bundler emits `styles.css`.
+// TypeScript needs a declaration for that import; without one it fails with TS2882.
+declare module '*.css';
+declare module '*.scss';

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

@@ -0,0 +1,7 @@
+export interface SampleSvelteComponentExports {
+  increment: () => void;
+}
+
+export interface SampleSvelteComponentProps {
+  startCount: number;
+}

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { SampleSvelteComponentProps } from './sample-svelte-component.d.ts';
+
+  import { untrack } from 'svelte';
+
+  let { startCount }: SampleSvelteComponentProps = $props();
+
+  // `startCount` seeds the local state once and is deliberately not tracked afterwards. Reading it
+  // Directly here would make Svelte warn (`state_referenced_locally`) that only its initial value is
+  // Captured -- which is exactly the intent, so `untrack` says so.
+  let count = $state(untrack(() => startCount));
+
+  export function increment() {
+    count += 1;
+  }
+</script>
+
+<h4>Sample Svelte Component!</h4>
+
+<div>
+  <span>My number is {count}!</span>
+</div>
+
+<button type="button" onclick={increment}>Increment</button>

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

@@ -0,0 +1,30 @@
+import { ItemView } from 'obsidian';
+
+<%- render('lint-register-element') -%>
+import '../lit-elements/sample-lit-element.ts';
+
+export const SAMPLE_LIT_VIEW_TYPE = '<%= pluginId %>-SampleLitView';
+
+export class SampleLitView extends ItemView {
+  public override getDisplayText(): string {
+    return 'Sample Lit view';
+  }
+
+  public override getViewType(): string {
+    return SAMPLE_LIT_VIEW_TYPE;
+  }
+
+  public override onClose(): Promise<void> {
+    this.contentEl.empty();
+    return super.onClose();
+  }
+
+  public override onOpen(): Promise<void> {
+    const START_COUNT = 10;
+    const element = this.contentEl.createEl('sample-lit-element');
+    element.count = START_COUNT;
+    element.vaultName = this.app.vault.getName();
+
+    return super.onOpen();
+  }
+}

package/templates/default/src/views/sample-lit-view.ts@lint-register-element_dev-utils.ejs

@@ -0,0 +1 @@
+// eslint-disable-next-line import-x/no-unassigned-import -- Importing the module is what REGISTERS the custom element; there is nothing to bind.