refactor/break: rename style.currentTheme$ -> style.currentTheme

.ignore

@@ -3,3 +3,4 @@
 /packages/docs/static/js/ace-builds/
 /packages/docs/themes/hugo-book/
 package-lock.json
+.git/

CHANGELOG.md

@@ -20,6 +20,7 @@ Changelog
 - Removed `Component.pierceShadow`. This feature was way too hacky and usage could quickly
   degreade performance. Hopefully browsers will allow overwriting Shadow DOM CSS natively
   in the future.
+- Renamed `style.currentTheme$` to `style.currentTheme` for consistency.
 - Advanced: Removed `wheel` event from `fromAllEvents`. This means `rx.bind` will no
   longer update a value on a mouse wheel event.
 

packages/core/cypress/component/rx/multicast-streams.cy.ts

@@ -4,19 +4,19 @@ describe('MulticastStream', () => {
 
   it('they are multicast', () => {
     let resource = 0;
-    const obs$ = new rx.Stream<number>(observer => {
+    const obs = new rx.Stream<number>(observer => {
       resource++;
       // console.log(observer.next);
       observer.next(1); observer.next(2); observer.next(3);
     })
 
-    const subj$ = new rx.MulticastStream<number>();
-    // console.log(subj$);
+    const subj = new rx.MulticastStream<number>();
+    // console.log(subj);
 
-    subj$.subscribe();
-    subj$.subscribe();
+    subj.subscribe();
+    subj.subscribe();
 
-    obs$.subscribe(subj$);
+    obs.subscribe(subj);
 
     expect(resource).to.be.eq(1);
   })

packages/core/cypress/component/rx/state.cy.ts

@@ -3,78 +3,78 @@ import { attempt } from '../../support/helpers';
 
 describe('state', () => {
   it('subscribe & unsubscribe', attempt(() => {
-    const subj$ = new rx.State(1);
+    const subj = new rx.State(1);
     const result: number[] = [];
 
-    expect((subj$ as any).observers.length).to.be.eq(0);
+    expect((subj as any).observers.length).to.be.eq(0);
 
-    const unsubcribe = subj$.subscribe(v => result.push(v));
+    const unsubcribe = subj.subscribe(v => result.push(v));
 
-    expect((subj$ as any).observers.length).to.be.eq(1);
+    expect((subj as any).observers.length).to.be.eq(1);
     expect(result).to.deep.eq([1]);
-    subj$.next(2);
+    subj.next(2);
     expect(result).to.deep.eq([1, 2]);
-    subj$.next(3);
+    subj.next(3);
     expect(result).to.deep.eq([1, 2, 3]);
     unsubcribe();
-    expect((subj$ as any).observers.length).to.be.eq(0);
-    subj$.next(4);
+    expect((subj as any).observers.length).to.be.eq(0);
+    subj.next(4);
     expect(result).to.deep.eq([1, 2, 3]);
-    expect((subj$ as any).observers.length).to.be.eq(0);
+    expect((subj as any).observers.length).to.be.eq(0);
   }))
 
 
   it('subscribe & unsubscribe with operator chain', attempt(() => {
-    const subj$ = new rx.State(1);
+    const subj = new rx.State(1);
     const result: number[] = [];
 
-    expect((subj$ as any).observers.length).to.be.eq(0);
+    expect((subj as any).observers.length).to.be.eq(0);
 
-    const unsubcribe = subj$
+    const unsubcribe = subj
       .map(v => v + 1)
       .map(v => v + 1)
       .subscribe(v => result.push(v));
 
-    expect((subj$ as any).observers.length).to.be.eq(1);
+    expect((subj as any).observers.length).to.be.eq(1);
 
     expect(result).to.deep.eq([3]);
-    subj$.next(2);
+    subj.next(2);
     expect(result).to.deep.eq([3, 4]);
-    subj$.next(3);
+    subj.next(3);
     expect(result).to.deep.eq([3, 4, 5]);
     unsubcribe();
-    subj$.next(4);
+    subj.next(4);
     expect(result).to.deep.eq([3, 4, 5]);
 
-    expect((subj$ as any).observers.length).to.be.eq(0);
+    expect((subj as any).observers.length).to.be.eq(0);
   }))
 
   it('completing', attempt(() => {
-    const subj$ = new rx.State(1);
+    const subj = new rx.State(1);
     const result: number[] = [];
     let completed = false;
 
-    subj$
+    subj
       .map(v => v + 2)
       .subscribe({
         next(v) { result.push(v) },
         complete() { completed = true; }
       });
 
-    expect((subj$ as any).observers.length).to.be.eq(1);
+    expect((subj as any).observers.length).to.be.eq(1);
 
     expect(result).to.deep.eq([3]);
-    subj$.next(2);
+    subj.next(2);
     expect(result).to.deep.eq([3, 4]);
-    subj$.next(3);
+    subj.next(3);
     expect(result).to.deep.eq([3, 4, 5]);
     expect(completed).to.be.false;
-    subj$.complete();
+    subj.complete();
     expect(completed).to.be.true;
-    subj$.next(4);
+    subj.next(4);
     expect(result).to.deep.eq([3, 4, 5]);
 
-    expect((subj$ as any).observers.length).to.be.eq(0);
+    expect((subj as any).observers.length).to.be.eq(0);
   }))
 
   it('partial linked state', attempt(() => {

packages/core/cypress/component/rx/streams.cy.ts

@@ -7,12 +7,12 @@ context('Reactivity', () => {
     it('subscribing to a synchronous definition returns the correct result',
       attempt(() => {
 
-        const obs$ = new rx.Stream<number>(observer => {
+        const obs = new rx.Stream<number>(observer => {
           observer.next(1); observer.next(2); observer.next(3);
         })
 
         const result: number[] = [];
-        obs$.subscribe(v => result.push(v));
+        obs.subscribe(v => result.push(v));
         expect(result.length).to.be.eq(3);
         expect(result).to.deep.eq([1, 2, 3]);
       }))
@@ -59,7 +59,7 @@ context('Reactivity', () => {
 
 
     it('error handling', attempt(() => {
-      const obs$ = new rx.Stream<number>(observer => {
+      const obs = new rx.Stream<number>(observer => {
         observer.next(1);
         observer.next(2);
         // note that if we threw in a setTimeout here, the error would not be caught. while
@@ -72,7 +72,7 @@ context('Reactivity', () => {
       let result: number[] = [];
       let calledError = false;
 
-      obs$.map(v => v + 1).subscribe({
+      obs.map(v => v + 1).subscribe({
         next(v) { result.push(v) },
         error(e) {
           calledError = true;
@@ -114,61 +114,61 @@ context('Reactivity', () => {
 
     it('streams are unicast', attempt(() => {
       let resource = 0;
-      const obs$ = new rx.Stream<number>(observer => {
+      const obs = new rx.Stream<number>(observer => {
         resource++;
         observer.next(1); observer.next(2); observer.next(3);
       })
 
-      obs$.subscribe();
-      obs$.subscribe();
+      obs.subscribe();
+      obs.subscribe();
 
       expect(resource).to.eq(2);
     }))
 
     it('pipe', attempt(() => {
-      const obs$ = new rx.Stream<number>(observer => {
+      const obs = new rx.Stream<number>(observer => {
         observer.next(1); observer.next(2); observer.next(3);
       })
 
       const result: number[] = [];
-      obs$.pipe(
+      obs.pipe(
         rx.map(v => v + 1), rx.map(v => v + 2),
       ).subscribe(v => result.push(v));
       expect(result.length).to.eq(3);
       expect(result).to.deep.eq([4, 5, 6]);
     }))
 
     it('map operator', attempt(() => {
-      const obs$ = new rx.Stream<number>(observer => {
+      const obs = new rx.Stream<number>(observer => {
         observer.next(1); observer.next(2); observer.next(3);
       })
 
       const result: number[] = [];
-      obs$.map(v => v + 3).subscribe(v => result.push(v));
+      obs.map(v => v + 3).subscribe(v => result.push(v));
       expect(result.length).to.eq(3);
       expect(result).to.deep.eq([4, 5, 6]);
     }))
 
     it('filter operator', attempt(() => {
-      const obs$ = new rx.Stream<number>(observer => {
+      const obs = new rx.Stream<number>(observer => {
         observer.next(1); observer.next(2); observer.next(3);
       })
 
       const result: number[] = [];
-      obs$.filter(v => v === 2 || v === 3).subscribe(v => result.push(v));
+      obs.filter(v => v === 2 || v === 3).subscribe(v => result.push(v));
       expect(result.length).to.eq(2);
       expect(result).to.deep.eq([2, 3]);
     }))
 
 
     it('map & filter chain', attempt(() => {
-      const obs$ = new rx.Stream<number>(observer => {
+      const obs = new rx.Stream<number>(observer => {
         observer.next(1); observer.next(2); observer.next(3);
         observer.next(4); observer.next(5); observer.next(6);
       })
 
       let result: (number | string)[] = [];
-      obs$.map(v => v + 2)
+      obs.map(v => v + 2)
         .filter(v => v % 2 === 0)
         .map(v => v === 4 ? 'hi' : v)
         .subscribe(v => result.push(v));
@@ -177,7 +177,7 @@ context('Reactivity', () => {
       expect(result).to.deep.eq(['hi', 6, 8]);
 
       result = [];
-      obs$.pipe(
+      obs.pipe(
         rx.map(v => v + 2),
         rx.filter(v => v % 2 === 0),
         rx.map(v => v === 4 ? 'hi' : v),
@@ -189,7 +189,7 @@ context('Reactivity', () => {
 
 
     it('custom operators', attempt(() => {
-      const obs$ = new rx.Stream<number>(observer => {
+      const obs = new rx.Stream<number>(observer => {
         observer.next(1); observer.next(2); observer.next(3);
         observer.next(4); observer.next(5); observer.next(6);
       })
@@ -202,7 +202,7 @@ context('Reactivity', () => {
         );
 
       const result: (number | string)[] = [];
-      obs$.pipe(
+      obs.pipe(
         customOperator(),
       ).subscribe(v => result.push(v));
 

packages/core/src/component.ts

@@ -597,7 +597,7 @@ export default abstract class Component<
     // --- setup attributes, events, props, class fields
     if (el.params) {
 
-      let events$: Stream<Event> | undefined;
+      let events: Stream<Event> | undefined;
 
       const bindAttrOrField = <T>(
         bind: State<T>,
@@ -607,8 +607,8 @@ export default abstract class Component<
         let ignoreNextDown = false;
 
         // dataflow: upwards
-        if (!events$) events$ = fromAllEvents(thisEl);
-        this.subscribe(events$.pipe(
+        if (!events) events = fromAllEvents(thisEl);
+        this.subscribe(events.pipe(
           map(_ => getter()),
           distinctUntilChanged(),
         ), v => {

packages/core/src/rx/index.ts

@@ -4,10 +4,10 @@
 
    @example
    ```typescript
-   const state$ = new rx.State(0);
-   state$.map(v => v + 1).subscribe(console.log);
+   const state = new rx.State(0);
+   state.map(v => v + 1).subscribe(console.log);
 
-   state$.next(1); state$.next(2);
+   state.next(1); state.next(2);
 
    // Logs: 1 2 3
    ```

packages/core/src/rx/operators/creation/combineLatest.ts

@@ -44,11 +44,11 @@ export default function combineLatest<T extends { [key: string]: Stream<any> }>(
 export default function combineLatest(
   ...args: any[]
 ): any {
-  if (args[0] instanceof Array) { // combineLatest([obs1$, obs2$])
+  if (args[0] instanceof Array) { // combineLatest([obs1, obs2])
     return _combineLatestArr(args[0]);
-  } else if (args.length > 1) { // combineLatest(obs1$, obs2$)
+  } else if (args.length > 1) { // combineLatest(obs1, obs2)
     return _combineLatestArr(args);
-  } else { // combineLatest({o1: obs1$, o2: obs2$})
+  } else { // combineLatest({o1: obs1, o2: obs2})
     return _combineLatestObj(args[0]);
   }
 }

packages/core/src/rx/state.ts

@@ -8,10 +8,10 @@ import { identity } from "../util/other";
  *
  * @example
  * ```typescript
- * const state$ = new State(1);
- * state$.map(v => v + 1).subscribe(console.log);
+ * const state = new State(1);
+ * state.map(v => v + 1).subscribe(console.log);
  *
- * state$.next(4); state$.next(3);
+ * state.next(4); state.next(3);
  *
  * // Logs: 2 5 4
  *

packages/core/src/style/theme.ts

@@ -81,7 +81,7 @@ export const getTheme = (libName: string): { [key: string]: string } | false =>
 
 
 // TODO: share with refcount
-const _currentTheme$ = new Stream<'dark' | 'light'>(observer => {
+const _currentTheme = new Stream<'dark' | 'light'>(observer => {
   if (!window.matchMedia) {
     observer.next('light');
     return;
@@ -105,7 +105,7 @@ const _currentTheme$ = new Stream<'dark' | 'light'>(observer => {
 });
 
 /** Subscribe to this to get the current browser theme. */
-export const currentTheme$ = new State<'dark' | 'light'>(
+export const currentTheme = new State<'dark' | 'light'>(
   window.matchMedia
     ? (
       window.matchMedia('(prefers-color-scheme: dark)').matches
@@ -114,4 +114,4 @@ export const currentTheme$ = new State<'dark' | 'light'>(
     )
     : "dark"
 );
-_currentTheme$.subscribe(currentTheme$);
+_currentTheme.subscribe(currentTheme);

packages/docs/content/docs/reactivity/02-synchronous.md

@@ -117,13 +117,13 @@ the store.
 
 {{<codeview output-height="100px">}}
 ```typescript
-import { rx } from '@mvuijs/core';
+import { rx, util } from '@mvuijs/core';
 
 const store = new rx.Store({
   initialState: { p1: 4, p2: 'hi' },
   reducers: {
-    lower: v => ({ ...v, p2: v.p2.toLowerCase() }),
-    upper: v => ({ ...v, p2: v.p2.toUpperCase() }),
+    lower: v => util.patchObject(v, { p2: v.p2.toLowerCase() }),
+    upper: v => util.patchObject(v, { p2: v.p2.toUpperCase() }),
     concat: (v, add: string) => ({ ...v, p2: v.p2 + add }),
   },
   selectors: {
@@ -132,7 +132,7 @@ const store = new rx.Store({
 });
 
 const unsub = store.state.subscribe(console.log);
-store.reduce.lower();
+store.reduce.upper();
 store.reduce.concat(' hey');
 unsub();
 console.log(store.select.appendWorld.value);

packages/docs/content/docs/reactivity/03-asynchronous.md

@@ -50,7 +50,7 @@ rx.interval(2000).pipe(
 
 Fundamentally, there are two different *types* of operators: **creation** operators (such
 as `rx.interval`) which create a `Stream` and **transformation** operators, which
-transform an existing `Stream` with a function (like `rx.map`, `rx.filter` and `rx.take`).
+transform an existing `Stream` with a function (like `rx.map`, `rx.filter` and `rx.take`). For a list of available operators, see the [API docs](/mvui/reference/rx/rx/#stream-operators).
 
 With these basic concepts, you can build complex processing pipelines with little
 code. For example, you can process user events from an input, debounce them, make HTTP API