Refactor core

.github/actions/setup-node-and-install/action.yml

@@ -15,6 +15,6 @@ runs:
           ${{ runner.os }}-pnpm-
     - uses: pnpm/action-setup@v2.0.1
       with:
-        version: 6.23.6
+        version: 7.6.0
     - run: pnpm install --frozen-lockfile
       shell: bash

.gitignore

@@ -1,6 +1,7 @@
 node_modules
-dist/
-**/dist/
+**/node_modules
+**/dist
+dist
 .DS_Store
 coverage
 tsconfig.tsbuildinfo

.vscode/settings.json

@@ -1,9 +1,26 @@
 {
   "eslint.enable": true,
+  "explorer.excludeGitIgnore": true,
+  "vite.autoStart": false,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true,
     "source.fixAll.eslint.format": true
   },
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true,
+    "**/Thumbs.db": true,
+    "**/dist": true
+  },
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/bower_components": true,
+    "**/*.code-search": true,
+    "**/dist": true
+  },
   "explorer.fileNesting.patterns": {
     "*.ts": "${capture}.js",
     "*.js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts, ${capture}.d.ts.map",
@@ -18,7 +35,7 @@
   "vitest.enable": true,
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.preferences.importModuleSpecifier": "project-relative",
-  "typescript.tsserver.experimental.enableProjectDiagnostics": false,
+  "typescript.tsserver.experimental.enableProjectDiagnostics": true,
   "json.schemas": [
     {
       "fileMatch": ["manifest.json"],
@@ -33,5 +50,6 @@
   },
   "[shellscript]": {
     "editor.defaultFormatter": "foxundermoon.shell-format"
-  }
+  },
+  "testing.automaticallyOpenPeekView": "never"
 }

demos/jsnation/src/components/DataTable.tsx

@@ -1,4 +1,4 @@
-import { Cell, Formula } from "@starbeam/core";
+import { Cell, FormulaFn } from "@starbeam/core";
 import { LOGGER, LogLevel } from "@starbeam/debug";
 import { useProp, useReactiveSetup } from "@starbeam/react";
 import { DevTools } from "@starbeamx/devtool";
@@ -39,8 +39,8 @@ export default function (props: { locale: string }) {
 
     const filter = Cell("", "filter");
 
-    const query = Formula(() => {
-      return people.filter(filter.current).sort("name", locale.current);
+    const query = FormulaFn(() => {
+      return people.filter(filter.current).sort("name", locale.read());
     });
 
     function rows() {

demos/jsnation/src/components/DateFormatter.tsx

@@ -17,7 +17,7 @@ export default function (props: { locale: string }) {
     const date = component.use(Clock(timeZone, locale));
 
     return () => {
-      const localeInfo = formatLocale(locale.current);
+      const localeInfo = formatLocale(locale.read());
 
       return (
         <>
@@ -36,7 +36,7 @@ export default function (props: { locale: string }) {
               >
                 {TIME_ZONES.map((tz) => (
                   <option key={tz} value={tz}>
-                    {timeZoneName(locale.current, tz)}
+                    {timeZoneName(locale.read(), tz)}
                   </option>
                 ))}
               </select>
@@ -65,7 +65,7 @@ function Clock(timeZone: Reactive<string>, locale: Reactive<string>) {
     });
 
     return () => ({
-      formatted: formatDate(date.current, locale.current, timeZone.current),
+      formatted: formatDate(date.current, locale.read(), timeZone.read()),
       refresh,
     });
   });

demos/jsnation/src/lib/table.ts

@@ -1,4 +1,4 @@
-import { TIMELINE } from "@starbeam/core";
+import { entryPoint } from "@starbeam/debug";
 import { reactive } from "@starbeam/js";
 
 export type Row<T> = {
@@ -58,7 +58,7 @@ export class Query<T> {
   }
 
   get rows(): Row<T>[] {
-    return TIMELINE.entryPoint(() => {
+    return entryPoint(() => {
       const filtered = this.#table.rows.filter((row) =>
         this.#filters.every((filter) => filter(row))
       );

demos/react-store/src/components/DataTable.tsx

@@ -44,7 +44,7 @@ export default function (props: { locale: string }) {
       const filter = Cell("", "filter");
 
       const query = () => {
-        return people.filter(filter.current).sort("name", locale.current);
+        return people.filter(filter.current).sort("name", locale.read());
       };
 
       function rows() {

demos/react-store/src/components/DateFormatter.tsx

@@ -17,7 +17,7 @@ export default function (props: { locale: string }) {
     const date = component.use(Clock(timeZone, locale));
 
     return () => {
-      const localeInfo = formatLocale(locale.current);
+      const localeInfo = formatLocale(locale.read());
 
       return (
         <>
@@ -36,7 +36,7 @@ export default function (props: { locale: string }) {
               >
                 {TIME_ZONES.map((tz) => (
                   <option key={tz} value={tz}>
-                    {timeZoneName(locale.current, tz)}
+                    {timeZoneName(locale.read(), tz)}
                   </option>
                 ))}
               </select>
@@ -65,7 +65,7 @@ function Clock(timeZone: Reactive<string>, locale: Reactive<string>) {
     });
 
     return () => ({
-      formatted: formatDate(date.current, locale.current, timeZone.current),
+      formatted: formatDate(date.current, locale.read(), timeZone.read()),
       refresh,
     });
   });

demos/react/src/components/db/Db-final.tsx

@@ -47,7 +47,7 @@ export default function Database(props: { locale: string }) {
 
     function sorted() {
       return people.rows.sort((a, b) =>
-        new Intl.Collator(locale.current).compare(a[1].name, b[1].name)
+        new Intl.Collator(locale.read()).compare(a[1].name, b[1].name)
       );
     }
 

demos/react/src/components/formatter/DateFormatter-v1.tsx

@@ -1,4 +1,4 @@
-import { Formula } from "@starbeam/core";
+import { FormulaFn } from "@starbeam/core";
 import js from "@starbeam/js";
 import { useReactiveSetup } from "@starbeam/react";
 
@@ -17,10 +17,7 @@ export default function DateFormatterStarbeam() {
             for {localeInfo.region} ({localeInfo.language})
           </h3>
 
-          <button
-            className="pure-button"
-            onClick={() => date.current.refresh()}
-          >
+          <button className="pure-button" onClick={() => date.read().refresh()}>
             🔃
           </button>
           <p className="output">{date.current.formatted}</p>
@@ -37,7 +34,7 @@ function Clock() {
     date.now = new Date();
   }
 
-  return Formula(() => {
+  return FormulaFn(() => {
     return {
       formatted: formatTime(date.now, {
         timeZone: SYSTEM_TZ,

demos/react/src/components/formatter/DateFormatter-v3.tsx

@@ -68,7 +68,7 @@ function Clock(timeZone: Reactive<string>) {
 
     return () => ({
       formatted: formatTime(date.now, {
-        timeZone: timeZone.current,
+        timeZone: timeZone.read(),
         locale: SYSTEM_LOCALE,
       }),
       refresh,

demos/react/src/components/formatter/DateFormatterFinal.tsx

@@ -65,8 +65,8 @@ function Clock(
 
     return () => ({
       formatted: formatTime(date.now, {
-        timeZone: typeof timeZone === "string" ? timeZone : timeZone.current,
-        locale: typeof locale === "string" ? locale : locale.current,
+        timeZone: typeof timeZone === "string" ? timeZone : timeZone.read(),
+        locale: typeof locale === "string" ? locale : locale.read(),
       }),
       refresh,
     });

framework/react/react/package.json

@@ -12,19 +12,14 @@
     "@starbeam/timeline": "workspace:^",
     "@starbeam/peer": "workspace:^",
     "@starbeam/js": "workspace:^",
-    "@starbeam/modifier": "workspace:^",
-    "@types/use-sync-external-store": "ts4.6",
-    "use-sync-external-store": "rc"
+    "@starbeam/modifier": "workspace:^"
   },
   "devDependencies": {
-    "@types/react": "^18.0.9",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "typescript": "next"
+    "@types/react": "^18.0.9"
   },
   "peerDependencies": {
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "publishConfig": {
     "main": "dist/index.cjs",
@@ -40,4 +35,4 @@
   "exports": {
     "default": "./index.ts"
   }
-}
+}