@manyducks.co/dolla 2.0.0-alpha.9 → 3.0.0

package/notes/scratch.md

@@ -1,233 +0,0 @@
-# Scratch Note
-
-Bring the $ back and the name full circle.
-
-```js
-import { $, $$ } from "@manyducks.co/dolla";
-
-// Shorthand dolla sign
-
-// An initial value (with optional options object) creates a state.
-const [$count, setCount] = $(0);
-// = createState(0)
-
-// An array and a function derives a state.
-const $doubled = $([$count], (count) => count * 2);
-// = derive([$count], (count) => count * 2);
-
-// A state returns the same state.
-const $sameCount = $.of($count);
-const $wrapped = $.of({ message: "This is a state with no setter." });
-// = toState($count)
-
-// Get value from a state. Values that are not states are returned directly.
-const count = $.value($count);
-
-// An initial value creates a SettableState
-const $$count = $$(5);
-// = createSettableState(5);
-
-// Merge state and setter into a SettableState
-const $$count = $$($count, setCount);
-// = toSettableState($count, setCount);
-
-// Split a SettableState into a state and setter
-const [$count, setCount] = $($$count);
-```
-
----
-
-What if Dolla was just a global object that you don't instantiate. I have never personally run into a use case for having more than one app on a page at once. In all my projects, the page and the app are synonymous.
-
-Doing this would make it possible to access things inside the Dolla app from _outside_ code such as Quill blots. Effectively all code that has access to your Dolla import is _inside_ the app.
-
-- Remove stores in favor of just exporting variables and functions from ES modules and importing them where desired.
--
-
-```jsx
-import Dolla from "@manyducks.co/dolla";
-
-// Languages: add translation, set language and get localized string as a signal
-Dolla.i18n.setup({
-  initialLanguage: Dolla.i18n.detect({ fallback: "ja" }), // Detect user's language and fall back to passed value
-  languages: [
-    { name: "ja", path: "/static/locales/ja.json" },
-    {
-      name: "en",
-      fetch: async () => {
-        // Pass a path string, or if additional logic is needed, a fetch function.
-        const res = await Dolla.http.get("/static/locales/en.json");
-        return res.body;
-      }
-    }
-  ]
-});
-
-Dolla.i18n.$locale
-Dolla.i18n.t$()
-
-// A single setup call to keep things contained (must happen before mount)
-Dolla.router.setup({
-  // Initial path must point to a route that actually exists (will be validated on mount) (initialPath is "/" by default)
-  initialPath: "/",
-  routes: [
-    { path: "/", view: SomeView }
-  ]
-});
-// And then you can route from anywhere.
-Dolla.router.go("/some/path");
-// Or get route information from anywhere.
-Dolla.router.$path;
-Dolla.router.$params;
-
-// Also utils are available
-const joinedPath = Dolla.router.utils.joinPath("/api/records", "5");
-const resolvedPath = Dolla.router.utils.resolvePath("../"); // Resolves with window.location.href as the base
-
-// Initializes the app and matches first route
-Dolla.mount("#app");
-// If you pass a view as the second argument it becomes the root view (this works for simple apps without a router)
-Dolla.mount("#app", MyRootView);
-// If router setup function wasn't called then the root view is mounted equivalent to the following:
-Dolla.router.setup({
-  defaultPath: "/",
-  routes: [
-    { path: "/*", view: MyRootView },
-  ]
-});
-
-// Add HTTP middleware
-Dolla.http.use(async (req, next) => {
-  const res = await next()
-});
-// Make HTTP calls
-const res = await Dolla.get("/some/path");
-
-// Adjust log level
-Dolla.setLogLevel(Dolla.LOG_LEVEL_INFO);
-Dolla.setLogFilter("*,-Dolla/*")
-// Create a scoped logger
-const debug = Dolla.createLogger("debug-logger");
-debug.log("HELLO");
-debug.warn("THIS IS A SCOPED LOGGER");
-
-// Efficiently and safely read and mutate the DOM using Dolla's render batching
-Dolla.render.read(() => {
-  // Reference DOM nodes
-});
-Dolla.render.update(() => {
-  // Mutate the DOM as part of Dolla's next batch
-}, "some-key");
-
-// Respond to lifecycle events
-Dolla.onMount(() => {});
-Dolla.onRouteMatch(() => {});
-// Dolla.onWhatever(() => {});
-
-interface SomeViewProps {}
-
-function SomeView (props: SomeViewProps, ctx: Dolla.ViewContext) {
-  const debug = Dolla.createLogger("SomeView");
-
-  // returns a signal and a setter function
-  const [$someValue, setSomeValue] = Dolla.createState(4);
-
-  // Router is now a part of the Dolla object
-  Dolla.router.$path;
-  Dolla.router.$params;
-
-  Dolla.router.go("/some-other-path");
-
-  ctx.watch([$someValue], (value) => {
-    debug.log(value);
-  });
-
-  // View helpers are on ViewContext
-  ctx.repeat()
-  ctx.cond()
-  ctx.render([...states], (...values) => {
-    // return Renderable (equivalent to Dolla.derive(states, (...values) => Renderable))
-  })
-  ctx.portal()
-  ctx.outlet()
-
-  // TODO: Add Dolla.dialog.show() and Dolla.toast.show() or create separate libraries?
-
-  return <h1>{ctx.t$("home.headerText")}</h1>;
-}
-```
-
-```tsx
-// import { signal, computed } from "@manyducks.co/dolla";
-
-function signal(initialValue, options = {}) {}
-
-function computed();
-
-function WhateverView(props, c) {
-  // IDEA: Have state, computed and effect be methods on the view context.
-  // PROBLEM: Then what are the types when passing as props? State? ComputedState? or just a generic Dynamic<T> for readable/writable?
-
-  // Context variables (replacement for stores)
-  c.set("name", {
-    value: 5,
-  });
-
-  // Can get in the same context scope or on a child.
-  // Throws an error if value is not set.
-  c.get("name");
-
-  // If we use this $readable and set function pattern then we only have a single type of signal which is read-only.
-  // Take props as Signal<T> and deal with setting in callbacks. Simple and predictable.
-  const [$count, setCount] = signal(5);
-
-  const $doubled = derived($count, (value) => value * 2);
-
-  // const watcher = new SignalWatcher($count, (value) => {
-  //   c.debug.log("watcher received value: " + value);
-  // });
-
-  // watcher.start();
-  // watcher.stop();
-
-  $count.get(); // returns the current value
-  setCount(10); // updates the value
-
-  // Observe and trigger side effects.
-  c.watch($count, (count) => {
-    c.debug.log(`The value of count is: ${count}`);
-  });
-
-  // Exposes language and translation tools.
-  c.i18n.translate$("");
-  c.i18n.$language;
-  c.i18n.setLanguage();
-
-  // Exposes internal HTTP client.
-  c.http.get(); // put, post, patch, delete, etc.
-
-  // Exposes router helpers and variables.
-  c.route.go("/");
-  c.route.$params;
-  c.route.$path;
-  c.route.$query;
-  c.route.setQuery({
-    value: 1,
-  });
-
-  return html`
-    <h1>This is the template</h1>
-
-    ${render($count, (count) => {
-      // Render rebuilds the markup within when any of the dependencies change.
-      return html`<p>The count is ${count}</p>`;
-
-      // Other view helpers are also provided as exports
-      repeat();
-      cond();
-      outlet();
-      portal();
-    })}
-  `;
-}
-```

package/notes/views.md

@@ -1,195 +0,0 @@
-```tsx
-import { View, Store, $, $$ } from "@manyducks.co/dolla";
-
-const SomeView = View("SomeView")
-  .props((t) => ({
-    // Define prop types which are validated and enforced in dev mode
-    $name: t.readable(t.string().optional()).optional(), // Readable<string | undefined> | undefined
-  }))
-  .build(({ $name }, ctx) => {
-    const { $value } = ctx.getStore(SomeStore);
-
-    return <h1>Hello {$name}</h1>;
-  });
-
-const SomeStore = Store("SomeStore").build((ctx) => {
-  const $$value = $$(0);
-
-  return {
-    $value: $($$value),
-  };
-});
-```
-
-Thoughts on reintegrating core APIs instead of keeping them as modular stores. In the case of things like the router, they really are core pieces masquerading as modular stores.
-
-```tsx
-import { App } from "@manyducks.co/dolla";
-
-const app = new App();
-
-// All routes are defined using a config object.
-app.route({
-  path: "/",
-  view: RootView,
-  routes: [
-    { path: "/example", view: ExampleView },
-    { path: "/notes", view: NotesView },
-  ],
-});
-app.route({ path: "*", redirect: "/example" });
-
-function SomeView(props, ctx) {
-  // Route info and routing are exposed on ctx.route
-  ctx.route.go("/some-route", { preserveQuery: true, replace: false });
-  ctx.route.back();
-  ctx.route.forward();
-  ctx.route.$$query;
-  ctx.route.$params;
-  ctx.route.$path;
-  ctx.route.$pattern;
-}
-```
-
-HTTP is also integrated:
-
-```tsx
-function SomeView(props, ctx) {
-  ctx.http.get("/some-route");
-  ctx.http.post("/some-route", { body: { data: 123 } });
-  // ... and the rest of the methods
-}
-```
-
-Language support is also integrated:
-
-```tsx
-const app = new App();
-
-app.language({ name: "en", path: "/locale/en.json" });
-app.language({ name: "ja", path: "/locale/ja.json" });
-app.setLanguage("en" /* or localStorage.getItem("appLanguage") or something */);
-
-function SomeView(props, ctx) {
-  ctx.language.$current;
-  ctx.language.set("ja");
-  ctx.language.translate$("some.key");
-
-  // I would probably use it like this:
-  const { translate$ } = ctx.language;
-  translate$("some.key");
-}
-```
-
-## Stores vs Context variables
-
-Now, these are going away as stores. But what about stores? I'd like to replace stores with context variables, like this:
-
-```tsx
-function ParentView(props, ctx) {
-  // Variables can be set in this context...
-
-  ctx.set("fixedValue", 1);
-
-  const $$writable = $$(2);
-  ctx.set("$$writableValue", $$writable);
-
-  return <ChildView />;
-}
-
-function ChildView(props, ctx) {
-  // ... and accessed in a child context.
-
-  const fixed = ctx.get<number>("fixedValue"); // 1
-  const $$writable = ctx.get<Writable<number>>("$$writableValue"); // Writable(2)
-
-  // Overriding values will not change parent variables. This value will take effect for this context and any child context.
-  ctx.set("fixedValue", 2);
-
-  return <span>{$$writable}</span>;
-}
-
-// Now stores can be written and used in this way:
-
-function ExampleStore(ctx: ViewContext) {
-  ctx.beforeConnect(() => {
-    // Takes whatever arguments, in this case the ViewContext itself so it can attach lifecycle methods.
-  });
-
-  return {
-    whatever: 1,
-  };
-}
-
-function ExampleView(props, ctx) {
-  ctx.set("example", ExampleStore(ctx));
-
-  // ...
-}
-
-function ChildView(props, ctx) {
-  const example = ctx.get("example");
-
-  ctx.log(example.whatever); // prints: 1
-}
-```
-
-Or as a class-based thing:
-
-```tsx
-import { View, Store } from "@manyducks.co/dolla";
-
-// Stores are basically an observable map with computed properties.
-const example = new Store({
-  computed: {
-    uppercased: (values) => values.key.toUpperCase(),
-  },
-});
-
-// Set one or more properties at a time.
-example.set({ key: "value" });
-
-// Get the current value of any property by name.
-example.get("uppercased"); // "VALUE"
-
-// Can subscribe to specific entries.
-const sub = example.subscribe("key", (value) => {
-  // Do something when value changes.
-});
-sub.unsubscribe();
-sub.current; // get current value of entry
-
-// Get a two-way binding to a particular entry.
-const bound = example.bind("key");
-const boundSub = bound.subscribe((value) => {
-  // Do something when value changes.
-});
-boundSub.current; // get current value
-bound.get();
-bound.set(newValue);
-
-// Now Views have a state that works in a very similar way.
-
-interface ExampleViewState {
-  whatever: number;
-}
-
-interface ExampleViewProps {
-  // Bound values can be passed as props to child views.
-  something: Bound<string>;
-}
-
-class ExampleView extends View<ExampleViewState, ExampleViewProps> {
-  create() {
-    this.state.set({ whatever: 5 });
-
-    const whatever = this.state.bind("whatever");
-
-    this.state.subscribe("whatever", (value) => {
-      // This will be automatically cleaned up when the view is disconnected.
-    });
-
-    this.props.something.get(); // get the value of the bound prop.
-  }
-}
-```

package/tests/state.test.js

@@ -1,135 +0,0 @@
-import test from "node:test";
-import assert from "node:assert";
-
-import { createState, derive } from "../dist/index.js";
-
-test("signal", (t) => {
-  const [$count, setCount] = createState(5);
-
-  const defaultWatcher = t.mock.fn();
-  const stopDefault = $count.watch(defaultWatcher);
-
-  const lazyWatcher = t.mock.fn();
-  const stopLazy = $count.watch(lazyWatcher, { lazy: true });
-
-  assert.equal(defaultWatcher.mock.callCount(), 1, "watcher is called immediately by default");
-  assert.equal(lazyWatcher.mock.callCount(), 0, "lazy watcher is not called immediately");
-
-  assert.equal($count.get(), 5, "get returns the initial value");
-
-  setCount(12);
-
-  assert.equal($count.get(), 12, "setter updates the signal value");
-
-  assert.equal(defaultWatcher.mock.callCount(), 2, "default watcher is called");
-  assert.equal(lazyWatcher.mock.callCount(), 1, "lazy watcher is called");
-
-  assert.deepStrictEqual(defaultWatcher.mock.calls[1].arguments, [12], "default watcher is called with new value");
-  assert.deepStrictEqual(lazyWatcher.mock.calls[0].arguments, [12], "lazy watcher is called with new value");
-
-  setCount(12);
-
-  assert.equal(defaultWatcher.mock.callCount(), 2, "default watcher was not called with same value");
-  assert.equal(lazyWatcher.mock.callCount(), 1, "lazy watcher was not called with same value");
-
-  stopDefault();
-  stopLazy();
-
-  setCount(51);
-
-  assert.equal(defaultWatcher.mock.callCount(), 2, "default watcher has not been called again");
-  assert.equal(lazyWatcher.mock.callCount(), 1, "lazy watcher has not been called again");
-});
-
-test("derive", (t) => {
-  const [$one, setOne] = createState(5);
-  const [$two, setTwo] = createState(20);
-
-  const deriveSum = t.mock.fn((one, two) => one + two);
-  const deriveProduct = t.mock.fn((one, two) => one * two);
-
-  const $sum = derive([$one, $two], deriveSum);
-  const $product = derive([$one, $two], deriveProduct);
-
-  assert.equal($sum.get(), 25, "sum is calculated correctly");
-  assert.equal($product.get(), 100, "product is calculated correctly");
-
-  assert.equal(deriveSum.mock.callCount(), 1, "derive function has only been called once");
-
-  $sum.get();
-  $sum.get();
-  $sum.get();
-
-  assert.equal(deriveSum.mock.callCount(), 1, "derive function still only called once as dependencies haven't changed");
-
-  const defaultWatcher = t.mock.fn();
-  const stopDefault = $sum.watch(defaultWatcher);
-
-  const lazyWatcher = t.mock.fn();
-  const stopLazy = $product.watch(lazyWatcher, { lazy: true });
-
-  assert.equal(defaultWatcher.mock.callCount(), 1, "default watcher has been called");
-  assert.equal(lazyWatcher.mock.callCount(), 0, "lazy watcher has not been called yet");
-
-  assert.deepStrictEqual(defaultWatcher.mock.calls[0].arguments, [25], "default watcher was called with initial value");
-
-  setOne(6);
-
-  assert.equal(defaultWatcher.mock.callCount(), 2, "default watcher has been called");
-  assert.equal(lazyWatcher.mock.callCount(), 1, "lazy watcher has been called");
-
-  assert.deepStrictEqual(defaultWatcher.mock.calls[1].arguments, [26], "default watcher was called with new value");
-  assert.deepStrictEqual(lazyWatcher.mock.calls[0].arguments, [120], "lazy watcher was called with new value");
-
-  setTwo(20);
-
-  assert.equal(defaultWatcher.mock.callCount(), 2, "default watcher was not called with same value");
-  assert.equal(lazyWatcher.mock.callCount(), 1, "lazy watcher was not called with same value");
-
-  stopDefault();
-  stopLazy();
-
-  setOne(4);
-
-  assert.equal(defaultWatcher.mock.callCount(), 2, "default watcher was not called after stop");
-  assert.equal(lazyWatcher.mock.callCount(), 1, "lazy watcher was not called after stop");
-
-  assert.equal($sum.get(), 24, "sum is derived correctly");
-  assert.equal($product.get(), 80, "product is derived correctly");
-
-  assert.equal(deriveSum.mock.callCount(), 3, "sum has only been derived three times");
-});
-
-test("derive nested signals", (t) => {
-  const [$value, setValue] = createState(5);
-
-  const [$object, setObject] = createState({
-    href: derive([$value], (value) => `/projects/${value}/test`),
-  });
-
-  // o.href here is itself a derived value
-  const $href = derive([$object], (o) => o.href);
-
-  const watcher = t.mock.fn();
-  const stop = $href.watch(watcher);
-
-  assert.equal(watcher.mock.callCount(), 1);
-  assert.deepStrictEqual(watcher.mock.calls[0].arguments, ["/projects/5/test"]);
-
-  // Update value which href depends on.
-  setValue(12);
-
-  assert.equal(watcher.mock.callCount(), 2);
-  assert.deepStrictEqual(watcher.mock.calls[1].arguments, ["/projects/12/test"]);
-
-  // Now set the original object and replace the derived href.
-  // See that watcher still receives the latest value.
-  setObject({
-    href: derive([$value], (value) => `/projects/${value}/changed`),
-  });
-
-  assert.equal(watcher.mock.callCount(), 3);
-  assert.deepStrictEqual(watcher.mock.calls[2].arguments, ["/projects/12/changed"]);
-
-  stop();
-});

package/vite.config.js

@@ -1,28 +0,0 @@
-import { resolve } from "node:path";
-import { defineConfig } from "vite";
-
-export default defineConfig({
-  build: {
-    // minify: "terser",
-    // minify: false,
-    sourcemap: true,
-
-    lib: {
-      entry: {
-        index: resolve(__dirname, "src/index.ts"),
-        "jsx-runtime": resolve(__dirname, "src/jsx-runtime.js"),
-        "jsx-dev-runtime": resolve(__dirname, "src/jsx-dev-runtime.js"),
-      },
-      name: "Dolla",
-      formats: ["es"],
-    },
-    // rollupOptions: {
-    //   external: ["vue"],
-    //   output: {
-    //     globals: {
-    //       vue: "Vue",
-    //     },
-    //   },
-    // },
-  },
-});