@muze-labs/simplyflow 0.9.0 → 0.10.0

package/README.md

@@ -5,7 +5,7 @@ SimplyFlow is an experimental browser library for building small reactive web ap
 The intended beginner-facing API is:
 
 ```javascript
-import { app } from 'simplyflow/src/flow.mjs'
+import { app } from '@muze-labs/simplyflow'
 
 const counter = app({
   container: document.getElementById('counter'),
@@ -108,19 +108,19 @@ const notes = simply.app({
 ## Install
 
 ```shell
-npm install simplyflow
+npm install @muze-labs/simplyflow
 ```
 
 or using Git:
 
 ```shell
-git clone https://github.com/SimplyEdit/simplyflow.git
+git clone https://github.com/muze-labs/simplyflow.git
 ```
 
 ## Browser bundle
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/simplyflow/dist/simply.flow.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@muze-labs/simplyflow/dist/simply.flow.js"></script>
 ```
 
 Then use the beginner-facing `simply.app()` API:
@@ -159,32 +159,88 @@ const page = simply.app({
 })
 ```
 
+
+For no-build module examples that use an import map, prefer mapping the complete browser bundle instead of every split workspace package:
+
+```html
+<script type="importmap">
+{
+  "imports": {
+    "@muze-labs/simplyflow": "https://cdn.jsdelivr.net/npm/@muze-labs/simplyflow/dist/simply.flow.js",
+    "@muze-nl/metro": "https://cdn.jsdelivr.net/npm/@muze-nl/metro@0.6.19/src/everything.mjs"
+  }
+}
+</script>
+<script type="module">
+import '@muze-labs/simplyflow'
+import '@muze-nl/metro'
+
+const hnpwa = simply.app({
+  data: { items: [] }
+})
+</script>
+```
+
+This is the recommended beginner/example path: import the complete SimplyFlow bundle, plus any external library the example directly uses. Advanced users can still use the split packages or subpath imports below when they want smaller, tree-shakeable bundles with a build step.
+
 Module imports are still available when you prefer explicit imports:
 
 ```javascript
-import { signal, effect, batch } from 'simplyflow/src/state.mjs'
-import { bind } from 'simplyflow/src/bind.mjs'
-import { model, paging, sort, filter, columns } from 'simplyflow/src/model.mjs'
+import { signal, effect, batch } from '@muze-labs/simplyflow/state'
+import { bind } from '@muze-labs/simplyflow/bind'
+import { model, paging, sort, filter, columns } from '@muze-labs/simplyflow/model'
 
 const data = signal({ title: 'Hello' })
 bind({ root: data })
 ```
 
+## Package structure and tree-shakeable imports
+
+SimplyFlow is maintained as a small monorepo. The main `@muze-labs/simplyflow` package is a convenience package for beginners and script-tag users. The implementation is split into smaller ESM packages that can also be imported directly:
+
+```javascript
+import { signal, effect } from '@muze-labs/simplyflow-state'
+import { bind } from '@muze-labs/simplyflow-bind'
+import { model } from '@muze-labs/simplyflow-model'
+import { app } from '@muze-labs/simplyflow-app'
+```
+
+For projects that prefer one dependency, the main package keeps stable subpath exports:
+
+```javascript
+import { signal, effect } from '@muze-labs/simplyflow/state'
+import { bind } from '@muze-labs/simplyflow/bind'
+```
+
+The `state`, `bind`, `model`, and `app` packages are pure ESM and marked as side-effect-free so bundlers can tree-shake unused exports. The main `@muze-labs/simplyflow` entry point still intentionally initializes the browser global API and registers `<simply-render>`, so use subpath or direct package imports when minimum bundle size matters.
+
 
 ## Documentation
 
-- [App API](docs/app.md)
-- [Binding API](docs/bind.md)
-- [Model API](docs/model.md)
-- [State API](docs/state.md)
-- [Commands](docs/command.md)
-- [Actions](docs/action.md)
-- [Routes](docs/route.md)
-- [Behaviors](docs/behavior.md)
-- [Includes](docs/include.md)
+- [App API](docs/reference/app.md)
+- [Binding API](docs/reference/bind.md)
+- [Model API](docs/reference/model.md)
+- [State API](docs/reference/state.md)
+- [Commands](docs/reference/command.md)
+- [Actions](docs/reference/action.md)
+- [Routes](docs/reference/route.md)
+- [Behaviors](docs/reference/behavior.md)
+- [Includes](docs/reference/include.md)
 
 Or check the [examples](examples/) for more information.
 
+## Development
+
+This repository is a private npm workspace root. The published main package lives in `packages/simplyflow`; the smaller layer packages live in `packages/state`, `packages/bind`, `packages/model`, and `packages/app`.
+
+```shell
+npm install
+npm test
+npm run build
+```
+
+When publishing the split packages, publish the dependency packages first (`state`, then `bind`/`model`, then `app`, then `simplyflow`) so the main package can resolve its package dependencies.
+
 ## License
 
 [MIT](LICENSE) &copy; Muze.nl