lhasa-ligand-builder 0.3.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -4
- package/bundler_plugins/README.md +15 -0
- package/dist/assets/lhasa.js +2 -2
- package/dist/assets/lhasa.wasm +0 -0
- package/dist/lhasa-ligand-builder.js +4861 -4847
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -2,9 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
Frontend for Lhasa - Moorhen's ligand builder: a React + WebAssembly version of Layla (Coot's ligand builder).
|
|
4
4
|
|
|
5
|
+
LhasaReact can also be used standalone, outside of Moorhen.
|
|
6
|
+
|
|
5
7
|
## Installation / embedding
|
|
6
8
|
|
|
7
|
-
There is an
|
|
9
|
+
There is an npm package available: [`lhasa-ligand-builder`](https://www.npmjs.com/package/lhasa-ligand-builder).
|
|
10
|
+
It makes it easy to embed Lhasa into your own React app!
|
|
11
|
+
|
|
12
|
+
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.
|
|
8
13
|
|
|
9
14
|
### Quick start
|
|
10
15
|
|
|
@@ -65,6 +70,28 @@ Both plugins accept an options object:
|
|
|
65
70
|
| `outputPath` | `'lhasa-assets'` | Sub-path in the build output where assets are placed. |
|
|
66
71
|
| `assets` | All entries | Array of asset names to copy: `'lhasa.js'`, `'lhasa.wasm'`, `'Components-inchikey.ich'`, `'icons'`. |
|
|
67
72
|
|
|
73
|
+
```js
|
|
74
|
+
// vite.config.js — custom output path
|
|
75
|
+
lhasaCopyAssets({
|
|
76
|
+
outputPath: 'static/lhasa',
|
|
77
|
+
// Optional override of defaults - if you know what you are doing
|
|
78
|
+
// assets: ['lhasa.js', 'lhasa.wasm'],
|
|
79
|
+
})
|
|
80
|
+
|
|
81
|
+
// webpack.config.js — custom output path
|
|
82
|
+
new LhasaCopyAssetsPlugin({
|
|
83
|
+
outputPath: 'static/lhasa',
|
|
84
|
+
// Optional override of defaults - if you know what you are doing
|
|
85
|
+
// assets: ['lhasa.js', 'lhasa.wasm'],
|
|
86
|
+
})
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
Remember to update `assetsBaseUrl` on `LhasaEmbedder` to match your chosen `outputPath`:
|
|
90
|
+
|
|
91
|
+
```tsx
|
|
92
|
+
<LhasaEmbedder assetsBaseUrl="/static/lhasa/" />
|
|
93
|
+
```
|
|
94
|
+
|
|
68
95
|
#### Manual copy (fallback)
|
|
69
96
|
|
|
70
97
|
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'
|
|
|
97
124
|
/>
|
|
98
125
|
```
|
|
99
126
|
|
|
100
|
-
## Building from source
|
|
127
|
+
## Building from source (alternative)
|
|
101
128
|
|
|
102
|
-
|
|
129
|
+
You can also build everything from source yourself.
|
|
103
130
|
|
|
104
|
-
Lhasa
|
|
131
|
+
Lhasa's C++ sources are a part of [Coot](https://github.com/pemsley/coot) and you need to compile the C++ WebAssembly module first.
|
|
105
132
|
|
|
106
133
|
NOTE: All build scripts are Unix scripts. On Windows, you may need WSL.
|
|
107
134
|
|
|
@@ -128,7 +155,10 @@ After building and copying the WebAssembly module:
|
|
|
128
155
|
|
|
129
156
|
```bash
|
|
130
157
|
npm install
|
|
158
|
+
# and then
|
|
131
159
|
npm run dev
|
|
160
|
+
# or, alternatively:
|
|
161
|
+
npx vite serve
|
|
132
162
|
```
|
|
133
163
|
|
|
134
164
|
### Building the library
|
|
@@ -138,3 +168,11 @@ npm run build:lib
|
|
|
138
168
|
```
|
|
139
169
|
|
|
140
170
|
This produces `dist/` with the ESM bundle, CSS, type declarations, and all WASM/icon/data assets.
|
|
171
|
+
|
|
172
|
+
### Building the standalone demo app
|
|
173
|
+
|
|
174
|
+
```bash
|
|
175
|
+
npm run build
|
|
176
|
+
# or, if you want more options passed to vite underneath:
|
|
177
|
+
npm run build -- --outDir dist_dir/ --base /lhasa
|
|
178
|
+
```
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
# bundler_plugins/
|
|
2
|
+
|
|
3
|
+
These plugins are **for consumers of the `lhasa-ligand-builder` npm package**, not for building the library itself.
|
|
4
|
+
|
|
5
|
+
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.
|
|
6
|
+
|
|
7
|
+
## Files
|
|
8
|
+
|
|
9
|
+
- `vite.mjs` — Vite plugin. Copies assets on production build (`closeBundle` hook) and serves them via dev-server middleware during development.
|
|
10
|
+
- `webpack.cjs` — Webpack plugin. Copies assets after emit (`afterEmit` hook) and exposes a `devServerStatic()` helper for webpack-dev-server.
|
|
11
|
+
- `utils.mjs` — Shared constants (asset list, path to `dist/assets/`).
|
|
12
|
+
|
|
13
|
+
## Relation to the library build
|
|
14
|
+
|
|
15
|
+
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.
|