lhasa-ligand-builder 0.3.0 → 0.4.0

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, using the `build_wasm.sh` script found in this repo.
 
-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 the C++ WebAssembly module needs to be compiled first.
 
 NOTE: All build scripts are Unix scripts. On Windows, you may need WSL.
 
@@ -113,14 +140,25 @@ NOTE: All build scripts are Unix scripts. On Windows, you may need WSL.
 * meson
 * curl, tar, etc.
 
-Clone the [Coot](https://github.com/pemsley/coot) repo and go to `lhasa/`.
+Conveniently, now there is a build script: `build_wasm.sh`.
+It clones the [Coot](https://github.com/pemsley/coot) repo and builds the sources found at `lhasa/` and `layla/`.
 
-The build procedure is very much like [Moorhen](https://github.com/moorhen-coot/Moorhen)'s:
+You can just simply run 
+```bash
+./build_wasm.sh
+```
+and it will do everything for you, including downloading and building all C++ dependencies.
+For more options, run:
+```bash
+./build_wasm.sh --help
+```
+By default, the script will output artifacts to `wasm_build/outputs` (This is configurable with environment variables).
 
-* Run `get_sources` (download C++ dependencies)
-* Run `initial_build.sh` to build all the necessary dependencies using Emscripten
-* Run `build_lhasa.sh` to build the Lhasa WebAssembly module
-* Copy `lhasa.js`, `lhasa.worker.js` (if it exists) and `lhasa.wasm` from `Coot/lhasa/lhbuild/` to `LhasaReact/public`
+Then, after the build finishes, you can run:
+```bash
+./build_wasm.sh --install
+```
+in order to copy the freshly generated `lhasa.js` and `lhasa.wasm` to `LhasaReact/public` (and `lhasa.d.ts` to `LhasaReact/src/types.d.ts`)
 
 ### Running LhasaReact locally
 
@@ -128,7 +166,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 +179,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.