@manyducks.co/dolla 0.69.2 → 0.69.3

package/README.md

@@ -24,7 +24,7 @@ States come in two varieties, each with a constructor function and a TypeScript
   - `.set(value: T)` to replace the stored value.
   - `.update(callback: (current: T) => T)` which takes a function that receives the current value and returns a new one.
 
-The constructor functions are `$` for `Readable`s and `$$` for `Writable`s. By convention, the names for each are prefixed with the same number of `$`s to indicate its type. This makes the data flow in code a lot easier to understand at a glance.
+The constructor functions are `$` for `Readable` and `$$` for `Writable`. By convention, the names of each are prefixed with `$` or `$$` to indicate its type, making the data flow a lot easier to understand at a glance.
 
 ```js
 import { $, $$ } from "@manyducks.co/dolla";
@@ -131,12 +131,12 @@ Notice that the structure above composes a data pipeline; if any of the data cha
 The `unwrap` function returns the current value of a Readable or Writable, or if passed a non-Readable value returns that exact value. This function is used to guarantee you have a plain value when you may be dealing with either a container or a plain value.
 
 ```js
-import { unwrap } from "@manyducks.co/dolla";
+import { $, $$, unwrap } from "@manyducks.co/dolla";
 
 const $$number = $$(5);
 
 unwrap($$number); // 5
-unwrap(State.readable(5)); // 5
+unwrap($(5)); // 5
 unwrap(5); // 5
 ```
 
@@ -398,7 +398,10 @@ Stores are helpful for managing persistent state that needs to be accessed in ma
 ```js
 import { App } from "@manyducks.co/dolla";
 
-const app = App();
+const app = App({
+  view: LayoutView,
+  stores: [MessageStore],
+});
 
 // We define a store that just exports a message.
 function MessageStore() {
@@ -407,9 +410,6 @@ function MessageStore() {
   };
 }
 
-// Register it on the app.
-app.store(MessageStore);
-
 // All instances of MessageView will share just one instance of MessageStore.
 function MessageView(props, ctx) {
   const store = ctx.getStore(MessageStore);
@@ -431,9 +431,6 @@ function LayoutView() {
   );
 }
 
-// Use LayoutView as the app's main view.
-app.main(LayoutView);
-
 // Connect the app.
 app.connect("#app");
 ```
@@ -537,15 +534,20 @@ const app = App({
       </div>
     );
   },
-});
-
-app.addStore(RouterStore, {
-  hash: true, // Use hash-based routing (default false)
 
-  // Here are a couple of routes to be rendered into our layout:
-  routes: [
-    { path: "/tasks", view: TasksView },
-    { path: "/completed", view: CompletedView },
+  stores: [
+    {
+      store: RouterStore,
+      options: {
+        hash: true, // Use hash-based routing (default false)
+
+        // Here are a couple of routes to be rendered into our layout:
+        routes: [
+          { path: "/tasks", view: TasksView },
+          { path: "/completed", view: CompletedView },
+        ],
+      },
+    },
   ],
 });
 ```
@@ -553,25 +555,32 @@ app.addStore(RouterStore, {
 Routes can also be nested. Just like the main view and its routes, subroutes will be displayed in the outlet of their parent view.
 
 ```jsx
-app.addStore(RouterStore, {
-  routes: [
+const app = App({
+  stores: [
     {
-      path: "/tasks",
-      view: TasksView,
-      routes: [
-        { path: "/", view: TaskListView },
-
-        // In routes, `{value}` is a dynamic value that matches anything,
-        // and `{#value}` is a dynamic value that matches a number.
-        { path: "/{#id}", view: TaskDetailsView },
-        { path: "/{#id}/edit", view: TaskEditView },
-
-        // If the route is any other than the ones defined above, redirect to the list.
-        // Redirects support './' and '../' style relative paths.
-        { path: "*", redirect: "./" },
-      ],
+      store: RouterStore,
+      options: {
+        routes: [
+          {
+            path: "/tasks",
+            view: TasksView,
+            routes: [
+              { path: "/", view: TaskListView },
+
+              // In routes, `{value}` is a dynamic value that matches anything,
+              // and `{#value}` is a dynamic value that matches a number.
+              { path: "/{#id}", view: TaskDetailsView },
+              { path: "/{#id}/edit", view: TaskEditView },
+
+              // If the route is any other than the ones defined above, redirect to the list.
+              // Redirects support './' and '../' style relative paths.
+              { path: "*", redirect: "./" },
+            ],
+          },
+          { path: "/completed", view: CompletedView },
+        ],
+      },
     },
-    { path: "/completed", view: CompletedView },
   ],
 });
 ```
@@ -606,22 +615,27 @@ Now, here are some route examples in the context of an app:
 import { App, RouterStore } from "@manyducks.co/dolla";
 import { PersonDetails, ThingIndex, ThingDetails, ThingEdit, ThingDelete } from "./components.js";
 
-const app = App();
-
-app.addStore(RouterStore, {
-  routes: [
-    { path: "/people/{name}", view: PersonDetails },
+const app = App({
+  stores: [
     {
-      // A `null` component with subroutes acts as a namespace for those subroutes.
-      // Passing a view instead of `null` results in subroutes being rendered inside that view wherever `ctx.outlet()` is called.
-      path: "/things",
-      view: null,
-      routes: [
-        { path: "/", view: ThingIndex }, // matches `/things`
-        { path: "/{#id}", view: ThingDetails }, // matches `/things/{#id}`
-        { path: "/{#id}/edit", view: ThingEdit }, // matches `/things/{#id}/edit`
-        { path: "/{#id}/delete", view: ThingDelete }, // matches `/things/{#id}/delete`
-      ],
+      store: RouterStore,
+      options: {
+        routes: [
+          { path: "/people/{name}", view: PersonDetails },
+          {
+            // A `null` component with subroutes acts as a namespace for those subroutes.
+            // Passing a view instead of `null` results in subroutes being rendered inside that view wherever `ctx.outlet()` is called.
+            path: "/things",
+            view: null,
+            routes: [
+              { path: "/", view: ThingIndex }, // matches `/things`
+              { path: "/{#id}", view: ThingDetails }, // matches `/things/{#id}`
+              { path: "/{#id}/edit", view: ThingEdit }, // matches `/things/{#id}/edit`
+              { path: "/{#id}/delete", view: ThingDelete }, // matches `/things/{#id}/delete`
+            ],
+          },
+        ],
+      },
     },
   ],
 });

package/notes/views.md

@@ -1,5 +1,5 @@
 ```js
-import { View, Store, State } from "@manyducks.co/dolla";
+import { View, Store, $, $$ } from "@manyducks.co/dolla";
 
 const SomeView = View("SomeView")
   .props((t) => ({
@@ -13,16 +13,10 @@ const SomeView = View("SomeView")
   });
 
 const SomeStore = Store("SomeStore").build((ctx) => {
-  const $$value = State(0);
+  const $$value = $$(0);
 
   return {
-    $value: $$value.readable(),
+    $value: $($$value),
   };
 });
-
-// Stores can be configured in an app like so:
-
-const app = App();
-
-app.addStore(SomeStore.configure(options));
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manyducks.co/dolla",
-  "version": "0.69.2",
+  "version": "0.69.3",
   "description": "Front-end components, routing and state management.",
   "main": "lib/index.js",
   "types": "./index.d.ts",

package/notes/state.md

@@ -1,71 +0,0 @@
-# State
-
-I want to update the state API to be a single constructor object, similar to built-ins like `Math` and `Array`. The current API has a lot of separate functions that work together in various ways, but I feel it would be easier to explain and understand if these functions were under one namespace.
-
-Current API:
-
-```ts
-import { readable, writable, computed, unwrap, proxy, type Readable, type Writable } from "@manyducks.co/dolla";
-
-const $$writable = writable({ someValue: 5, otherValue: "test" });
-const $readable = readable($$writable);
-const $computed = computed($$writable, (value) => value.someValue * 256);
-const unwrapped = unwrap($computed);
-const $$proxy = proxy($$writable, {
-  get(source) {
-    return source.get().someValue;
-  },
-  set(source, value) {
-    source.update((current) => {
-      return { ...current, someValue: value };
-    });
-  },
-});
-const $multiComputed = computed([$one, $$two, $three], ([one, two, three], [oldOne, oldTwo, oldThree]) => {
-  return one + two + three;
-});
-
-$$writable.get();
-$$writable.set({ someValue: 12, otherValue: null });
-$$writable.update((current) => ({ ...current, someValue: 100 }));
-
-$readable.get();
-```
-
-The main problem with the above is that we have two things (readable and writable) and a bunch of disconnected utility functions.
-
-Proposed API:
-
-```ts
-import { State, type Readable, type Writable } from "@manyducks.co/dolla";
-
-const $$writable = State.writable({ someValue: 5, otherValue: "test" }); // Longhand
-const $$writable = State({ someValue: 5, otherValue: "test" }); // Shorthand
-const $readable = State.readable($$writable);
-const $readable = $$writable.readable(); // Directly from a writable
-const $computed = State.from($$writable, (value) => value.someValue * 256);
-const unwrapped = State.unwrap($computed);
-const $$proxy = State.proxy($$writable, {
-  get(current) {
-    return current.someValue;
-  },
-  set(value, update) {
-    update((current) => {
-      return { ...current, someValue: value };
-    });
-  },
-});
-const $multiComputed = State.from($one, $$two, $three, (one, two, three, ctx) => {
-  // ctx.lastValues = [oldOne, oldTwo, oldThree];
-  // ctx.lastReturned = oldOne + oldTwo + oldThree
-  return one + two + three;
-});
-
-$$writable.get();
-$$writable.set({ someValue: 12, otherValue: null });
-$$writable.update((current) => ({ ...current, someValue: 100 }));
-
-$readable.get();
-```
-
-Now we have one state primitive (`State`), all instances of which implement `Readable` and some of which implement `Writable`. All utility functions are under the same namespace. This also avoids conflicts with Node streams' Readable and Writable which can be an issue with automatic imports.