main.tsx

import { App, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian';
import * as React from 'react';
import { render } from 'react-dom';

function DiceRoller() {
	const [numDice, setNumDice] = React.useState(1);
	const [diceSides, setDiceSides] = React.useState(20);
	const [modifier, setModifier] = React.useState(0);

	return (<>
		<input type="text" value={numDice} onChange={(e: React.SyntheticEvent) => setNumDice(e.target.value)} />
		<button onClick={(e: React.MouseEvent) => console.log(numDice)}>Roll!</button>
	</>);
}

let test = document.createElement('div');
render(DiceRoller(), test);

interface MyPluginSettings {
	mySetting: string;
}

const DEFAULT_SETTINGS: MyPluginSettings = {
	mySetting: 'default'
}

export default class MyPlugin extends Plugin {
	settings: MyPluginSettings;

	async onload() {
		await this.loadSettings();

		const openDiceRoller = () => {
			const inputModal = new InputModal(this.app);
			inputModal.open();
		}

		this.addRibbonIcon('dice', 'Roll dice', openDiceRoller);

		this.addSettingTab(new SampleSettingTab(this.app, this));
	}

	onunload() {
		console.log('unloading plugin');
	}

	async loadSettings() {
		this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
	}

	async saveSettings() {
		await this.saveData(this.settings);
	}
}

class InputModal extends Modal {

	constructor(app: App, closeCallback: (value: string) => any) {
		super(app);
	}

	onOpen() {
		let { contentEl } = this;
		contentEl.appendChild(test);
	}

	onClose() {
		let { contentEl } = this;
		contentEl.empty();
	}
}

// Haven't changed anything below here.
class SampleSettingTab extends PluginSettingTab {
	plugin: MyPlugin;

	constructor(app: App, plugin: MyPlugin) {
		super(app, plugin);
		this.plugin = plugin;
	}

	display(): void {
		let { containerEl } = this;

		containerEl.empty();

		containerEl.createEl('h2', { text: 'Settings for my awesome plugin.' });

		new Setting(containerEl)
			.setName('Setting #1')
			.setDesc('It\'s a secret')
			.addText(text => text
				.setPlaceholder('Enter your secret')
				.setValue('')
				.onChange(async (value) => {
					console.log('Secret: ' + value);
					this.plugin.settings.mySetting = value;
					await this.plugin.saveSettings();
				}));
	}
}

package.json

{
  "name": "dice-roller",
  "version": "0.9.7",
  "description": "This is a sample plugin for Obsidian (https://obsidian.md)",
  "main": "main.js",
  "scripts": {
    "dev": "rollup --config rollup.config.js -w",
    "build": "rollup --config rollup.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "@rollup/plugin-commonjs": "^15.1.0",
    "@rollup/plugin-node-resolve": "^9.0.0",
    "@rollup/plugin-typescript": "^6.0.0",
    "@types/node": "^14.14.2",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.2",
    "obsidian": "https://github.com/obsidianmd/obsidian-api/tarball/master",
    "rollup": "^2.32.1",
    "tslib": "^2.0.3",
    "typescript": "^4.0.3"
  },
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}

rollup.config.js

import typescript from '@rollup/plugin-typescript';
import {nodeResolve} from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

const banner =
`/*
THIS IS A GENERATED/BUNDLED FILE BY ROLLUP
if you want to view the source visit the plugins github repository
*/
`;

export default {
  input: 'main.tsx',
  output: {
    dir: '.',
    sourcemap: 'inline',
    format: 'cjs',
    exports: 'default',
    banner,
  },
  external: ['obsidian'],
  plugins: [
    typescript(),
    nodeResolve({browser: true}),
    commonjs(),
  ]
};

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "inlineSourceMap": true,
    "inlineSources": true,
    "module": "ESNext",
    "target": "es6",
    "allowJs": true,
    "noImplicitAny": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "lib": [
      "dom",
      "es5",
      "scripthost",
      "es2015"
    ],
    "jsx": "react",
  },
  "include": [
    "**/*.tsx"
  ]
}