@manyducks.co/dolla 2.0.0-alpha.1 → 2.0.0-alpha.2

package/README.md

@@ -3,16 +3,15 @@
 ![bundle size](https://img.shields.io/bundlephobia/min/@manyducks.co/dolla)
 ![bundle size](https://img.shields.io/bundlephobia/minzip/@manyducks.co/dolla)
 
-> WARNING: This package is pre-1.0 and therefore may contain serious bugs and releases may introduce breaking changes without notice.
+> WARNING: This package is in active development. It may contain serious bugs and releases may introduce breaking changes without notice.
 
-Dolla is a batteries-included JavaScript frontend framework covering the needs of complex modern single page apps (SPA). Dolla provides:
+Dolla is a batteries-included JavaScript frontend framework covering the needs of moderate-to-complex single page apps:
 
-- Components
+- Reactive DOM updates (Signals)
+- Reusable components (Views)
 - Routing
-- State management
-  - Declarative templating and DOM updates via signals
-- An HTTP client
--
+- HTTP client
+- Localization (translations as JSON files and a `t` function to get strings)
 
 Let's first get into some examples.
 
@@ -58,28 +57,86 @@ import { createSignal, derive } from "@manyducks.co/dolla";
 
 const [$count, setCount] = createSignal(0);
 const $doubled = derive([$count], (count) => count * 2);
+
+setCount(1); // $count = 1, $doubled = 2
+setCount(256); // $count = 256, $doubled = 512
+setCount(-37); // $count = -37, $doubled = -74
 ```
 
-## A Basic Component
+## A Basic View
 
-```tsx
-import Dolla from "@manyducks.co/dolla";
+```js
+import Dolla, { html } from "@manyducks.co/dolla";
 
-function Counter(props, c) {
+function Counter(props, ctx) {
   const [$count, setCount] = Dolla.createSignal(0);
 
   function increment() {
     setCount((count) => count + 1);
   }
 
-  return (
+  return html`
     <div>
-      <p>Clicks: {$count}</p>
-      <button onClick={increment}>Click Me</button>
+      <p>Clicks: ${$count}</p>
+      <button onclick=${increment}>Click here to increment</button>
     </div>
-  );
+  `;
+}
+
+Dolla.mount(document.body, Counter);
+```
+
+The above example, annotated:
+
+```js
+import Dolla, { html } from "@manyducks.co/dolla";
+
+function Counter(props, ctx) {
+  const [$count, setCount] = Dolla.createSignal(0);
+
+  function increment() {
+    setCount((count) => count + 1);
+  }
+
+  return html`
+    <div>
+      <p>Clicks: ${$count}</p>
+      <button onclick=${increment}>Click here to increment</button>
+    </div>
+  `;
+}
+
+Dolla.mount(document.body, Counter);
+```
+
+Localized:
+
+```js
+import Dolla, { html, t } from "@manyducks.co/dolla";
+
+function Counter(props, ctx) {
+  const [$count, setCount] = Dolla.createSignal(0);
+
+  function increment() {
+    setCount((count) => count + 1);
+  }
+
+  return html`
+    <div>
+      <p>Clicks: ${$count}</p>
+      <button onclick=${increment}>${t("buttonLabel")}</button>
+    </div>
+  `;
 }
 
+Dolla.language.setup({
+  initialLanguage: "en",
+  languages: [
+    { name: "en", strings: { buttonLabel: "Click here to increment" } },
+    { name: "ja", strings: { buttonLabel: "ここに押して増加する" } },
+  ],
+});
+
 Dolla.mount(document.body, Counter);
 ```
 
@@ -87,8 +144,6 @@ If you've ever used React before (and chances are you have if you're interested
 
 The biggest difference is that the Counter function runs only once when the component is mounted. All updates after that point are a direct result of the `$count` signal being updated.
 
-You'll notice that signals are typically named with a `$` at the beginning to indicate that they contain special values that may change over time.
-
 ## Advanced Componentry
 
 Component functions take two arguments; props and a `Context` object. Props are passed from parent components to child components, and `Context` is provided by the app.
@@ -405,6 +460,24 @@ function ExampleView() {
 
 A view function takes a `props` object as its first argument. This object contains all properties passed to the view when it's invoked.
 
+```js
+import { html } from "@manyducks.co/dolla";
+
+function ListView(props, ctx) {
+  return html`
+    <ul>
+      <${ListItemView} label="Squirrel" />
+      <${ListItemView} label="Chipmunk" />
+      <${ListItemView} label="Groundhog" />
+    </ul>
+  `;
+}
+
+function ListItemView(props, ctx) {
+  return html`<li>${props.label}</li>`;
+}
+```
+
 ```jsx
 function ListView() {
   return (

package/dist/index.d.ts

@@ -1,38 +1,15 @@
-export type { Environment } from "./modules/dolla.js";
-export type { HTTPRequest, HTTPResponse } from "./modules/http.js";
 export { createSettableSignal, createSignal, createSignalSetter, derive, designalify, signalify, toSettableSignal, watch, } from "./signals.js";
 export type { MaybeSignal, SettableSignal, Signal, StopFunction } from "./signals.js";
-export { router };
 import { Dolla } from "./modules/dolla.js";
 declare const dolla: Dolla;
-export declare const beforeMount: (callback: () => void | Promise<void>) => void;
-export declare const onMount: (callback: () => void) => void;
-export declare const beforeUnmount: (callback: () => void | Promise<void>) => void;
-export declare const onUnmount: (callback: () => void) => void;
-export declare const mount: {
-    (selector: string, view?: import("./view.js").ViewFunction<any> | undefined): Promise<void>;
-    (element: HTMLElement, view?: import("./view.js").ViewFunction<any> | undefined): Promise<void>;
-};
-export declare const unmount: () => Promise<void>;
-export declare const http: import("./modules/http.js").HTTP;
-export declare const render: import("./modules/render.js").Render;
-export declare const createLogger: (name: string | import("./signals.js").Signal<string>, options?: import("./modules/dolla.js").LoggerOptions | undefined) => import("./modules/dolla.js").Logger;
-export declare const setLogFilter: (filter: string | RegExp) => void;
-export declare const setLogges: (options: Partial<import("./modules/dolla.js").Loggles>) => void;
 export declare const t: (key: string, values?: Record<string, import("./types.js").Stringable | import("./signals.js").Signal<import("./types.js").Stringable>> | undefined) => import("./signals.js").Signal<string>;
-import * as router from "./modules/router.js";
-export { cond, createMarkup, portal, repeat, createRef, isRef } from "./markup.js";
-export type { DOMHandle, Ref } from "./markup.js";
-/**
- * Generate markup with HTML in a tagged template literal.
- */
-export declare const html: (strings: TemplateStringsArray, ...values: any[]) => import("./markup.js").Markup | import("./markup.js").Markup[];
-export type { ViewFunction } from "./view.js";
-export { Fragment } from "./views/fragment.js";
-export declare const constructView: <P>(view: import("./view.js").ViewFunction<P>, props: P, children?: import("./markup.js").Markup[]) => import("./markup.js").DOMHandle;
-export type { Markup } from "./markup.js";
+export { html, cond, createMarkup, portal, repeat, createRef, isRef } from "./markup.js";
+export type { Markup, MarkupNode, Ref } from "./markup.js";
+export type { ViewFunction, ViewContext, ViewNode } from "./view.js";
+export type { CrashViewProps } from "./views/default-crash-view.js";
 export type { InputType, Renderable } from "./types.js";
-export type { ViewContext } from "./view.js";
+export type { Environment } from "./modules/dolla.js";
+export type { HTTPRequest, HTTPResponse } from "./modules/http.js";
 import type { IntrinsicElements as Elements } from "./types";
 declare global {
     namespace JSX {