@figtreejs/browser 0.0.1-beta.0

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@figtreejs/browser",
+  "version": "0.0.1-beta.0",
+  "description": "A standalone library for phylogenetic visualization",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/figtreo/figtreejs.git"
+  },
+  "license": "MIT",
+  "author": "Andrew Rambaut and JT McCrone",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "./dist/*",
+    "./src/*"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "check-types": "tsc --noEmit ",
+    "dev": "vite",
+    "lint": "eslint src/"
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx}": [
+      "eslint",
+      "prettier --write --ignore-unknown"
+    ],
+    "!(*.js|*.ts)": [
+      "prettier --write --ignore-unknown"
+    ]
+  },
+  "dependencies": {
+    "@figtreejs/core": "0.0.1-beta.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@figtreejs/typescript-config": "*",
+    "@figtreejs/eslint-config": "*",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.1.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.2",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.8"
+  }
+}

package/src/figtree-options.ts

@@ -0,0 +1,5 @@
+import type { FigtreeProps } from "@figtreejs/core";
+
+export interface FigTreeOptions extends FigtreeProps {
+  svg: SVGSVGElement;
+}

package/src/figtree-render.ts

@@ -0,0 +1,51 @@
+import React from "react";
+import { createRoot, type Root } from "react-dom/client";
+
+import { FigTree, type FigtreeProps } from "@figtreejs/core";
+import ReactDOMServer from "react-dom/server";
+import type { FigTreeOptions } from "./figtree-options";
+const rootMap = new Map<SVGElement, Root>();
+
+//TODO update children to be called Baubles
+export default function figtreeRender(options: FigTreeOptions) {
+  const svg = options.svg;
+
+  const root = rootMap.get(svg);
+  if (root !== undefined) {
+    root.render(React.createElement(FigTree, options));
+  } else {
+    const root = createRoot(svg);
+    rootMap.set(svg, root);
+    root.render(React.createElement(FigTree, options));
+  }
+}
+
+export function figtreeStatic(options: FigtreeProps) {
+  const element = React.createElement(FigTree, options);
+  const markup = ReactDOMServer.renderToStaticMarkup(element);
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${options.width}" height="${options.height}">${markup}</svg>`;
+}
+
+//TODO set up setters so can use an object style
+
+// export function optionalSetGet(key,value){
+//     if(value){
+//         this[key]=value;
+//         this.render();
+//         return this;
+//     }
+//     else{
+//         return this[key];
+//     }
+// };
+
+// export function optionalDeepSetGet(key,innerKey,value){
+//     if(value!==null){
+//         this[key][innerKey]=value;
+//         this.render();
+//         return this;
+//     }
+//     else{
+//         return this[key][innerKey];
+//     }
+// }

package/src/index.ts

@@ -0,0 +1,15 @@
+// src/index.ts
+import * as Core from "@figtreejs/core";
+import figtree from "./figtree-render";
+import { figtreeStatic } from "./figtree-render";
+
+// named export
+export * from "@figtreejs/core";
+export { figtree, figtreeStatic };
+
+// default export as a convenient namespace:
+type FT = typeof Core & {
+  figtree: typeof figtree;
+  figtreeStatic: typeof figtreeStatic;
+};
+export const ft: FT = { ...Core, figtree, figtreeStatic };