Package Release Notes

Molio 的发布目标是一个 Vue 3 npm package、一个 GitHub Pages demo，以及部署在 /docs/ 的 VitePress 文档站。

Public Entries

• @shangchien/molio: exports MolEditor, plugin families, document types, RDKit runtime helpers, and package utilities.
• @shangchien/molio/utils: exports molecule parsing, validation, serialization, SVG rendering, and browser PNG rendering helpers.
• @shangchien/molio/style.css: generated stylesheet for component consumers.
• @shangchien/molio/RDKit_minimal.wasm: bundled RDKit wasm asset for consumers that want to self-host the default runtime.

Component State Sync

MolEditor supports both uncontrolled and controlled integration.

• Uncontrolled: pass mols, listen to document-change, and call getDocumentSnapshot() / restoreDocumentSnapshot() from the component ref.
• Controlled: pass documentSnapshot and listen to update:documentSnapshot, or use v-model:document-snapshot in Vue templates.
• Viewport/display control: use v-model:fullscreen, options.viewport.initial, options.viewport.autoFitOnInit, options.viewport.autoFitOnLoad, options.interaction.zoomInFactor, options.interaction.zoomOutFactor, or the component ref methods setFullscreen(), toggleFullscreen(), resize(), setViewport(), setScale(), autofit(), zoomBy(), and applyZoom().
• Command/config control: use options.defaultTool, PRESET_TOOLS, EDITOR_COMMANDS, executeCommand(), registerCommand(), hasCommand(), setGridVisible(), setGridSpacing(), selection state refs, clipboard helpers, export helpers, toggleExplicitHydrogens() / addExplicitHydrogens() / removeExplicitHydrogens(), and workflow helpers from the component ref instead of reaching into internal modules.

README now includes a dedicated parent-component integration example covering undo/redo/reset, file load, export, explicit hydrogen toggling, save, and share flows through the public component ref.

The controlled path guards against echo restores: a snapshot emitted by the component is not immediately restored again when the parent passes the same object back.

Utility API

The utility facade is browser-first for v1.

• validateSmiles() and validateMolBlock() initialize RDKit and return a typed result object.
• smilesToRdkitJson(), molBlockToRdkitJson(), and molOrSdfToRdkitJsons() wrap existing parser helpers with a stable result/error model.
• rdkitJsonToSvg(), smilesToSvg(), and molBlockToSvg() return SVG strings.
• rdkitJsonToPngBlob(), smilesToPngBlob(), and molBlockToPngBlob() return PNG Blobs and require a browser rasterization environment.

RDKit WASM

RDKit loading no longer assumes /RDKit_minimal.wasm. Use one of these modes:

import { configureRDKit } from '@shangchien/molio'

configureRDKit({ wasmUrl: '/assets/RDKit_minimal.wasm' })

or call individual utilities with { wasmUrl } through their rdkit option when applicable.

Build And Deploy

• pnpm run build:lib builds package artifacts into dist/.
• pnpm run build:demo builds the full-screen demo app into dist/.
• pnpm run build:docs builds VitePress docs into dist/docs/ with DOCS_BASE_URL=/docs/ by default.
• pnpm run build:site builds the demo and docs as one Pages artifact.
• CI runs typecheck, tests, library build, demo build, and docs build on Node 22.
• GitHub Pages deployment defaults to VITE_BASE_URL=/ and DOCS_BASE_URL=/docs/ for custom domains. It reads optional repository variables PAGES_BASE_URL and DOCS_BASE_URL when a repo subpath such as /mol-editor/ and /mol-editor/docs/ is required. The workflow uploads dist/ as the Pages artifact.