mirror of
https://github.com/adiguno/hello-nemesis.git
synced 2026-07-22 05:37:31 +00:00
add working react view
This commit is contained in:
parent
49bef1ce37
commit
d2ff2fa9fd
3 changed files with 23 additions and 4 deletions
|
|
@ -2,10 +2,15 @@ import { ItemView, WorkspaceLeaf } from "obsidian";
|
||||||
// Each view is uniquely identified by a text string
|
// Each view is uniquely identified by a text string
|
||||||
// and several operations require that you specify the view you'd like to use.
|
// and several operations require that you specify the view you'd like to use.
|
||||||
// Extracting it to a constant, VIEW_TYPE_EXAMPLE, is a good idea—as you will see later in this guide.
|
// Extracting it to a constant, VIEW_TYPE_EXAMPLE, is a good idea—as you will see later in this guide.
|
||||||
|
import { Root, createRoot } from "react-dom/client";
|
||||||
|
import * as React from "react";
|
||||||
|
import { ExampleReactView } from "./ReactView";
|
||||||
|
|
||||||
export const VIEW_TYPE_EXAMPLE = "example-view";
|
export const VIEW_TYPE_EXAMPLE = "example-view";
|
||||||
|
|
||||||
export class ExampleView extends ItemView {
|
export class ExampleView extends ItemView {
|
||||||
|
root: Root | null = null;
|
||||||
|
|
||||||
constructor(leaf: WorkspaceLeaf) {
|
constructor(leaf: WorkspaceLeaf) {
|
||||||
super(leaf);
|
super(leaf);
|
||||||
}
|
}
|
||||||
|
|
@ -19,12 +24,17 @@ export class ExampleView extends ItemView {
|
||||||
}
|
}
|
||||||
|
|
||||||
async onOpen() {
|
async onOpen() {
|
||||||
const container = this.containerEl.children[1];
|
// const container = this.containerEl.children[1];
|
||||||
container.empty();
|
// container.empty();
|
||||||
container.createEl("h4", { text: "Example view" });
|
// container.createEl("h4", { text: "Example view" });
|
||||||
|
this.root = createRoot(this.containerEl.children[1]);
|
||||||
|
// this.root.render(<div>asdf</div>);
|
||||||
|
// this.root.render(<ExampleReactView />);
|
||||||
|
this.root.render(React.createElement(ExampleReactView));
|
||||||
}
|
}
|
||||||
|
|
||||||
async onClose() {
|
async onClose() {
|
||||||
// Nothing to clean up.
|
// Nothing to clean up.
|
||||||
|
this.root?.unmount();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
9
ReactView.tsx
Normal file
9
ReactView.tsx
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import * as React from "react";
|
||||||
|
export const ExampleReactView = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1>Hello Nemesis</h1>
|
||||||
|
<p>This is a React view</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
"isolatedModules": true,
|
"isolatedModules": true,
|
||||||
"strictNullChecks": true,
|
"strictNullChecks": true,
|
||||||
"lib": ["DOM", "ES5", "ES6", "ES7"],
|
"lib": ["DOM", "ES5", "ES6", "ES7"],
|
||||||
"jsx": "react-jsx"
|
"jsx": "react"
|
||||||
},
|
},
|
||||||
"include": ["**/*.ts"]
|
"include": ["**/*.ts"]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue