railcode 0.1.0 → 0.1.1

package/README.md

@@ -2,6 +2,33 @@
 
 TypeScript CLI for app builders working on static Railcode apps.
 
+## Install
+
+Install the CLI globally from npm:
+
+```bash
+npm install -g railcode
+railcode --version
+```
+
+On first install, log in from a terminal:
+
+```bash
+railcode login
+```
+
+If the CLI prompts for `Railcode auth/API domain`, enter your Railcode domain.
+Bare domains are treated as HTTPS, so `railcode.example.com` becomes
+`https://railcode.example.com`. Full `https://...` URLs and trailing slashes are
+also accepted. To skip the prompt, pass the domain up front:
+
+```bash
+railcode login --api-url railcode.example.com
+```
+
+The login flow opens a browser authorization link and saves the resulting API
+token under `~/.railcode/config.json`.
+
 ## Build
 
 ```bash
@@ -13,11 +40,12 @@ npm link
 ## Common Flow
 
 ```bash
+npm install -g railcode
+railcode login
 mkdir my-app
 cd my-app
 railcode init my-app
 railcode dev
-railcode login
 railcode design-system pull design-system.md
 railcode deploy
 ```

package/dist/index.js

@@ -8,7 +8,7 @@ import { basename, dirname, join, relative, resolve, sep } from "node:path";
 import process from "node:process";
 import { createInterface } from "node:readline/promises";
 import { fileURLToPath } from "node:url";
-const VERSION = "0.1.0";
+const VERSION = "0.1.1";
 const CLI_PACKAGE_NAME = "railcode";
 const SKILL_NAME = "create-railcode-app";
 const RAILCODE_HOME = process.env.RAILCODE_HOME || join(homedir(), ".railcode");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "railcode",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "CLI for building, testing, and deploying Railcode apps.",
   "license": "MIT",
   "type": "module",

package/railcode-templates/railcode-react/src/App.tsx

@@ -378,20 +378,20 @@ function SqlPanel() {
   return (
     <Panel
       title="Read-only SQL"
-      code="await postgres(name).runSQL(query, params)"
+      code="await dataConnectors(); await postgres(name).runSQL(query, params)"
       icon={<Database className="size-4" />}
       actions={
         <Button
           icon={<RefreshCcw className="size-4" />}
           onClick={() => void refreshConnections()}
         >
-          Connections
+          Connectors
         </Button>
       }
     >
       <form className="grid gap-3" onSubmit={submit}>
         <label className="grid gap-1.5 text-sm">
-          <span className="font-medium">Global connection</span>
+          <span className="font-medium">Data connector</span>
           <select
             className="h-9 rounded-md border border-input bg-canvas px-3 outline-none focus:border-rail focus:ring-2 focus:ring-rail/20"
             disabled={!hasConnections}
@@ -408,7 +408,7 @@ function SqlPanel() {
         </label>
         {!hasConnections ? (
           <div className="rounded-md border border-line bg-muted px-3 py-2 text-sm text-dim">
-            No global SQL connections are configured.
+            No data connectors are configured.
           </div>
         ) : null}
         <label className="grid gap-1.5 text-sm">

package/railcode-templates/railcode-react/src/lib/railcode.ts

@@ -100,11 +100,13 @@ export type SqlRows = Array<Record<string, unknown>> & {
   truncated?: boolean;
 };
 
-export type DatabaseConnectorInfo = {
+export type DataConnectorInfo = {
   engine: "postgres" | "mysql" | string;
   name: string;
 };
 
+export type DatabaseConnectorInfo = DataConnectorInfo;
+
 export type DatabaseHandle = {
   runSQL(query: string, params?: unknown[]): Promise<SqlRows>;
 };
@@ -182,6 +184,7 @@ declare global {
     };
     postgres?: DatabaseNamespace;
     mysql?: DatabaseNamespace;
+    dataConnectors?: () => Promise<DataConnectorInfo[]>;
     databaseConnectors?: () => Promise<DatabaseConnectorInfo[]>;
     llm?: {
       generate(
@@ -233,11 +236,23 @@ export const fileStore = {
   },
 };
 
+function requireDataConnectors(): () => Promise<DataConnectorInfo[]> {
+  const value = window.dataConnectors ?? window.databaseConnectors;
+  if (!value) {
+    throw new Error(
+      "Railcode SDK global 'dataConnectors' is not available. Make sure /_api/sdk.js loads before the app bundle.",
+    );
+  }
+  return value;
+}
+
 // -> [{ engine, name }, ...] every configured connection this app can query.
-export function databaseConnectors(): Promise<DatabaseConnectorInfo[]> {
-  return requireSdk("databaseConnectors")();
+export function dataConnectors(): Promise<DataConnectorInfo[]> {
+  return requireDataConnectors()();
 }
 
+export const databaseConnectors = dataConnectors;
+
 // Per-engine namespaces: `postgres('orders').runSQL(q, p)` targets a named
 // connection; `postgres.runSQL(q, p)` uses the connection named "default".
 function databaseNamespace(engine: "postgres" | "mysql"): DatabaseNamespace {

package/railcode-templates/railcode-react/src/store/app-store.ts

@@ -2,7 +2,7 @@ import { create } from "zustand";
 
 import { cleanError } from "@/lib/format";
 import {
-  DatabaseConnectorInfo,
+  DataConnectorInfo,
   FileEntry,
   Identity,
   KvRow,
@@ -10,7 +10,7 @@ import {
   SqlRows,
   AppUsers,
   collection,
-  databaseConnectors,
+  dataConnectors,
   fileStore,
   getIdentity,
   getAppUsers,
@@ -34,7 +34,7 @@ type AppState = {
   appUsers?: AppUsers;
   kvRows: KvRow<StarterDoc>[];
   files: FileEntry[];
-  connections: DatabaseConnectorInfo[];
+  connections: DataConnectorInfo[];
   sqlRows?: SqlRows;
   llmResult?: LlmResult;
   streamText: string;
@@ -51,7 +51,7 @@ type AppState = {
   querySql: (
     query: string,
     params: unknown[],
-    connector?: DatabaseConnectorInfo,
+    connector?: DataConnectorInfo,
   ) => Promise<void>;
   generateText: (prompt: string) => Promise<void>;
   streamTextResponse: (prompt: string) => Promise<void>;
@@ -81,6 +81,13 @@ function withError(error: unknown, area: ApiArea) {
   });
 }
 
+function namespaceFor(connector?: DataConnectorInfo) {
+  const engine = connector?.engine ?? "postgres";
+  if (engine === "postgres") return postgres;
+  if (engine === "mysql") return mysql;
+  throw new Error(`Unsupported data connector engine: ${engine}`);
+}
+
 export const useAppStore = create<AppState>((set, get) => ({
   kvRows: [],
   files: [],
@@ -106,7 +113,7 @@ export const useAppStore = create<AppState>((set, get) => ({
         getAppUsers(),
         starterCollection().list(),
         fileStore.list(),
-        databaseConnectors(),
+        dataConnectors(),
       ]);
       set((state) => ({
         identity,
@@ -210,7 +217,7 @@ export const useAppStore = create<AppState>((set, get) => ({
   async refreshConnections() {
     set(patchStatus("sql", "loading"));
     try {
-      const connections = await databaseConnectors();
+      const connections = await dataConnectors();
       set((state) => ({
         connections,
         status: { ...state.status, sql: "ready" },
@@ -223,10 +230,8 @@ export const useAppStore = create<AppState>((set, get) => ({
   async querySql(query, params, connector) {
     set(patchStatus("sql", "loading"));
     try {
-      const engine = connector?.engine ?? "postgres";
       const name = connector?.name ?? "default";
-      const ns = engine === "mysql" ? mysql : postgres;
-      const sqlRows = await ns(name).runSQL(query, params);
+      const sqlRows = await namespaceFor(connector)(name).runSQL(query, params);
       set((state) => ({
         sqlRows,
         status: { ...state.status, sql: "ready" },

package/static/sdk.js

@@ -12,7 +12,7 @@
  *     await files.upload('logo.png', blob, 'image/png');
  *
  *     // query an external database an admin configured for this app (read-only):
- *     const rows = await sql('select * from orders where id = $1', [orderId]);
+ *     const rows = await postgres('analytics').runSQL('select * from orders where id = $1', [orderId]);
  *   </script>
  *
  * Everything is scoped to THIS app automatically (derived from the hostname
@@ -75,7 +75,7 @@
       <button id="collapse">Hide \u203A</button>
     </header>
     <div class="log" id="log"></div>
-    <footer>Calls made via <code>sql()</code>, <code>llm</code>, <code>db</code>, <code>files</code>, <code>me()</code>, <code>appUsers()</code></footer>
+    <footer>Calls made via <code>postgres()</code>, <code>mysql()</code>, <code>llm</code>, <code>db</code>, <code>files</code>, <code>me()</code>, <code>appUsers()</code></footer>
   </div>`;
   function mount() {
     (document.body || document.documentElement).appendChild(host);
@@ -368,7 +368,8 @@
   };
   var postgres = namespace("postgres");
   var mysql = namespace("mysql");
-  var databaseConnectors = () => track("connections", "databaseConnectors()", () => call("GET", "/connections"));
+  var dataConnectors = () => track("connections", "dataConnectors()", () => call("GET", "/connections"));
+  var databaseConnectors = dataConnectors;
 
   // src/design-system.ts
   var designSystem = () => track("design-system", "designSystem()", () => call("GET", "/config/design-system"));
@@ -425,6 +426,7 @@
   window.llm = llm;
   window.postgres = postgres;
   window.mysql = mysql;
+  window.dataConnectors = dataConnectors;
   window.databaseConnectors = databaseConnectors;
   window.designSystem = designSystem;
   window.me = me;