lhasa-ligand-builder 0.2.2 → 0.3.1

package/README.md

@@ -2,9 +2,14 @@
 
 Frontend for Lhasa - Moorhen's ligand builder: a React + WebAssembly version of Layla (Coot's ligand builder).
 
+LhasaReact can also be used standalone, outside of Moorhen.
+
 ## Installation / embedding
 
-There is an experimental [`lhasa-ligand-builder`](https://www.npmjs.com/package/lhasa-ligand-builder) package.
+There is an npm package available: [`lhasa-ligand-builder`](https://www.npmjs.com/package/lhasa-ligand-builder).
+It makes it easy to embed Lhasa into your own React app!
+
+If you're not using React, have a look at `LhasaPlainJS` on [Github](https://github.com/moorhen-coot/LhasaPlainJS) and [npm](https://www.npmjs.com/package/lhasa-ligand-builder-plainjs) - it's a vanilla JavaScript wrapper version of this library.
 
 ### Quick start
 
@@ -65,6 +70,28 @@ Both plugins accept an options object:
 | `outputPath` | `'lhasa-assets'` | Sub-path in the build output where assets are placed. |
 | `assets` | All entries | Array of asset names to copy: `'lhasa.js'`, `'lhasa.wasm'`, `'Components-inchikey.ich'`, `'icons'`. |
 
+```js
+// vite.config.js — custom output path
+lhasaCopyAssets({
+  outputPath: 'static/lhasa',
+  // Optional override of defaults - if you know what you are doing
+  // assets: ['lhasa.js', 'lhasa.wasm'],
+})
+
+// webpack.config.js — custom output path
+new LhasaCopyAssetsPlugin({
+  outputPath: 'static/lhasa',
+  // Optional override of defaults - if you know what you are doing
+  // assets: ['lhasa.js', 'lhasa.wasm'],
+})
+```
+
+Remember to update `assetsBaseUrl` on `LhasaEmbedder` to match your chosen `outputPath`:
+
+```tsx
+<LhasaEmbedder assetsBaseUrl="/static/lhasa/" />
+```
+
 #### Manual copy (fallback)
 
 If you're not using Vite or Webpack, copy the assets from `node_modules/lhasa-ligand-builder/dist/assets/` to your public directory (e.g. `public/lhasa-assets/`).
@@ -97,11 +124,11 @@ import 'lhasa-ligand-builder/style.css'
 />
 ```
 
-## Building from source
+## Building from source (alternative)
 
-LhasaReact can be used standalone, outside of Moorhen.
+You can also build everything from source yourself.
 
-Lhasa is part of [Coot](https://github.com/pemsley/coot) and you need to compile the C++ WebAssembly module first.
+Lhasa's C++ sources are a part of [Coot](https://github.com/pemsley/coot) and you need to compile the C++ WebAssembly module first.
 
 NOTE: All build scripts are Unix scripts. On Windows, you may need WSL.
 
@@ -128,7 +155,10 @@ After building and copying the WebAssembly module:
 
 ```bash
 npm install
+# and then
 npm run dev
+# or, alternatively:
+npx vite serve
 ```
 
 ### Building the library
@@ -138,3 +168,11 @@ npm run build:lib
 ```
 
 This produces `dist/` with the ESM bundle, CSS, type declarations, and all WASM/icon/data assets.
+
+### Building the standalone demo app
+
+```bash
+npm run build
+# or, if you want more options passed to vite underneath:
+npm run build -- --outDir dist_dir/ --base /lhasa
+```

package/bundler_plugins/README.md

@@ -0,0 +1,15 @@
+# bundler_plugins/
+
+These plugins are **for consumers of the `lhasa-ligand-builder` npm package**, not for building the library itself.
+
+When a consumer installs the package, these plugins help them integrate Lhasa's runtime assets (`lhasa.js`, `lhasa.wasm`, `Components-inchikey.ich`, `icons/`) into their own build pipeline. The assets are sourced from this package's own `dist/assets/` directory (i.e. `node_modules/lhasa-ligand-builder/dist/assets/`) and copied into the consumer's build output.
+
+## Files
+
+- `vite.mjs` — Vite plugin. Copies assets on production build (`closeBundle` hook) and serves them via dev-server middleware during development.
+- `webpack.cjs` — Webpack plugin. Copies assets after emit (`afterEmit` hook) and exposes a `devServerStatic()` helper for webpack-dev-server.
+- `utils.mjs` — Shared constants (asset list, path to `dist/assets/`).
+
+## Relation to the library build
+
+The library's own build uses `scripts/copy-assets.mjs` to populate `dist/assets/`. These bundler plugins are downstream of that: they distribute those already-built assets into whatever project the consumer is building.

package/dist/Lhasa.d.ts

@@ -10,10 +10,11 @@ export interface LhasaComponentProps {
     }[];
     name_of_host_program?: string;
     smiles_callback?: (internal_id: number, id_from_prop: string | null, smiles: string) => void;
+    on_smiles_updated?: (smiles_array: [number, string | null, string, [string, string]?][]) => void;
     bansu_endpoint?: string | undefined;
     data_path_prefix?: string;
     dark_mode?: boolean;
     max_width?: number | null;
     max_height?: number | null;
 }
-export declare function LhasaComponent({ Lhasa, show_top_panel, show_footer, icons_path_prefix, rdkit_molecule_pickle_list, name_of_host_program, smiles_callback, bansu_endpoint, data_path_prefix, dark_mode, max_width, max_height }: LhasaComponentProps): import("react/jsx-runtime").JSX.Element;
+export declare function LhasaComponent({ Lhasa, show_top_panel, show_footer, icons_path_prefix, rdkit_molecule_pickle_list, name_of_host_program, smiles_callback, on_smiles_updated, bansu_endpoint, data_path_prefix, dark_mode, max_width, max_height }: LhasaComponentProps): import("react/jsx-runtime").JSX.Element;

package/dist/LhasaEmbedder.d.ts

@@ -1,10 +1,7 @@
 import { LhasaComponentProps } from './Lhasa';
 export interface LhasaEmbedderProps extends Omit<LhasaComponentProps, 'Lhasa'> {
-    /** Base URL where lhasa.js, lhasa.wasm, icons/, and Components-inchikey.ich are served from. */
     assetsBaseUrl?: string;
-    /** Custom loading indicator. Defaults to a simple "Loading Lhasa..." div. */
     loadingComponent?: React.ReactNode;
-    /** Custom error display. Receives the Error object. */
     errorComponent?: (error: Error) => React.ReactNode;
 }
 export declare function LhasaEmbedder({ assetsBaseUrl, loadingComponent, errorComponent, icons_path_prefix, data_path_prefix, ...lhasaProps }: LhasaEmbedderProps): import("react/jsx-runtime").JSX.Element | null;