basic cleanup, add TSX, imporve production bundle size

Author: liamcain

Diff for: manifest.json

@@ -1,7 +1,7 @@
 {
   "id": "react-starter",
   "name": "React Starter",
-  "description": "react starter...",
+  "description": "Obsidian + ReactJS",
   "version": "0.0.0",
   "author": "Liam Cain",
   "authorUrl": "https://github.com/liamcain/",

Diff for: package.json

@@ -1,55 +1,44 @@
 {
-  "name": "react-starter",
+  "name": "obsidian-react-starter",
   "version": "0.0.0",
-  "description": "Sync Things.app Logbook with Obsidian",
+  "description": "Obsidian + ReactJS",
   "author": "liamcain",
   "main": "main.js",
   "license": "MIT",
   "scripts": {
     "lint": "eslint . --ext .ts",
-    "build": "npm run lint && rollup -c",
-    "build:nolint": "rollup -c",
+    "dev": "npm run lint && rollup -c",
+    "build:nolint": "NODE_ENV=production rollup -c",
+    "build": "NODE_ENV=production npm run lint && rollup -c",
     "test": "jest",
     "test:watch": "yarn test -- --watch"
   },
   "dependencies": {
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.2",
+    "@types/react": "17.0.3",
+    "@types/react-dom": "17.0.2",
     "obsidian": "obsidianmd/obsidian-api#master",
-    "obsidian-daily-notes-interface": "0.7.7",
-    "papaparse": "5.3.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "tslib": "^2.1.0"
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "tslib": "2.1.0"
   },
   "devDependencies": {
-    "@babel/preset-react": "^7.12.13",
-    "@rollup/plugin-babel": "^5.3.0",
+    "@babel/core": "7.13.8",
+    "@babel/preset-react": "7.12.13",
+    "@babel/preset-typescript": "7.13.0",
+    "@rollup/plugin-babel": "5.3.0",
     "@rollup/plugin-commonjs": "17.1.0",
     "@rollup/plugin-json": "4.1.0",
+    "@rollup/plugin-typescript": "8.2.0",
     "@rollup/plugin-node-resolve": "11.2.0",
     "@rollup/plugin-replace": "2.4.1",
-    "@types/jest": "26.0.20",
     "@types/moment": "2.13.0",
     "@types/node": "14.14.34",
     "@types/papaparse": "5.2.5",
     "@typescript-eslint/eslint-plugin": "4.17.0",
     "@typescript-eslint/parser": "4.17.0",
-    "babel": "^6.23.0",
+    "babel": "6.23.0",
     "eslint": "7.22.0",
-    "jest": "26.6.3",
-    "moment": "2.29.1",
     "rollup": "2.41.2",
-    "rollup-plugin-typescript2": "^0.30.0",
-    "typescript": "^4.2.3"
-  },
-  "jest": {
-    "moduleNameMapper": {
-      "src/(.*)": "<rootDir>/src/$1"
-    },
-    "moduleFileExtensions": [
-      "js",
-      "ts"
-    ]
+    "typescript": "4.2.3"
   }
 }

Diff for: rollup.config.js

@@ -1,7 +1,9 @@
 import babel from "@rollup/plugin-babel";
-import resolve from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
+import replace from "@rollup/plugin-replace";
+import resolve from "@rollup/plugin-node-resolve";
 import typescript from "@rollup/plugin-typescript";
+import { env } from "process";
 
 export default {
   input: "src/index.ts",
@@ -16,8 +18,11 @@ export default {
     resolve({
       browser: true,
     }),
+    replace({
+      "process.env.NODE_ENV": JSON.stringify(env.NODE_ENV),
+    }),
     babel({
-      presets: ["@babel/preset-react"],
+      presets: ["@babel/preset-react", "@babel/preset-typescript"],
     }),
     commonjs(),
   ],

Diff for: src/constants.ts

@@ -4,11 +4,13 @@ import ReactDOM from "react-dom";
 
 import DiceRoller from "./ui/DicerRoller";
 
+const VIEW_TYPE = "react-view";
+
 class MyReactView extends ItemView {
-  private reactComponent: any;
+  private reactComponent: React.ReactElement;
 
   getViewType(): string {
-    return "react-view";
+    return VIEW_TYPE;
   }
 
   getDisplayText(): string {
@@ -20,10 +22,10 @@ class MyReactView extends ItemView {
   }
 
   async onOpen(): Promise<void> {
-    this.reactComponent = ReactDOM.render(
-      React.createElement(DiceRoller),
-      (this as any).contentEl
-    );
+    this.reactComponent = React.createElement(DiceRoller);
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ReactDOM.render(this.reactComponent, (this as any).contentEl);
   }
 }
 
@@ -32,19 +34,19 @@ export default class ReactStarterPlugin extends Plugin {
 
   async onload(): Promise<void> {
     this.registerView(
-      "react-view",
+      VIEW_TYPE,
       (leaf: WorkspaceLeaf) => (this.view = new MyReactView(leaf))
     );
 
     this.app.workspace.onLayoutReady(this.onLayoutReady.bind(this));
   }
 
   onLayoutReady(): void {
-    if (this.app.workspace.getLeavesOfType("react-view").length) {
+    if (this.app.workspace.getLeavesOfType(VIEW_TYPE).length) {
       return;
     }
     this.app.workspace.getRightLeaf(false).setViewState({
-      type: "react-view",
+      type: VIEW_TYPE,
     });
   }
 }

Diff for: src/fileUtils.ts

@@ -0,0 +1,54 @@
+import * as React from "react";
+
+function randomNumber(min: number, max: number): number {
+  return Math.random() * (max - min) + min;
+}
+
+function rollDice(
+  numDice: number,
+  diceSides: number,
+  modifier: number
+): number {
+  let result = 0;
+
+  for (let i = 0; i < numDice; i++) {
+    result += randomNumber(1, diceSides);
+  }
+
+  return result + modifier;
+}
+
+export default function DiceRoller(): JSX.Element {
+  const [numDice, setNumDice] = React.useState(1);
+  const [diceSides, setDiceSides] = React.useState(20);
+  const [modifier, setModifier] = React.useState(0);
+  const [result, setResult] = React.useState(null);
+
+  return (
+    <>
+      <div>
+        <input
+          type="number"
+          value={diceSides}
+          onChange={(e) => setNumDice(parseInt(e.target.value, 10))}
+        />
+        D
+        <input
+          type="number"
+          value={numDice}
+          onChange={(e) => setDiceSides(parseInt(e.target.value, 10))}
+        />
+        +
+        <input
+          type="number"
+          value={modifier}
+          onChange={(e) => setModifier(parseInt(e.target.value, 10))}
+        />
+      </div>
+      <h4>{result}</h4>
+      <button onClick={() => setResult(rollDice(numDice, diceSides, modifier))}>
+        Roll!
+      </button>
+    </>
+  );
+}

Diff for: src/index.ts

@@ -4,6 +4,7 @@
     "allowSyntheticDefaultImports": true,
     "inlineSourceMap": true,
     "inlineSources": true,
+    "jsx": "react",
     "module": "ESNext",
     "target": "esnext",
     "allowJs": true,
@@ -12,5 +13,5 @@
     "importHelpers": true,
     "lib": ["dom", "esnext"]
   },
-  "include": ["**/*.ts"]
+  "include": ["**/*.ts", "**/*.tsx"]
 }