@creact-labs/creact 0.2.0 → 0.2.2

package/README.md

@@ -1,88 +1,60 @@
-# CReact
-
-**Declarative universal reactive runtime.**
-
-## Install
+<p align="center">
+  <img src="https://img.shields.io/npm/v/@creact-labs/creact" alt="npm version" />
+  <img src="https://img.shields.io/npm/l/@creact-labs/creact" alt="license" />
+</p>
 
-```bash
-npm install creact
-```
+# CReact
 
-## Quick Example
+What if you could generate SEO-optimized product pages by researching competitors automatically?
 
 ```tsx
-// tsconfig.json: "jsxImportSource": "creact"
-
-import { CReact, renderCloudDOM, useInstance } from 'creact';
-
-// Define constructs
-class ChatModel {
-  constructor(public props: { model: string }) {}
-}
-
-class Memory {
-  constructor(public props: {}) {}
-}
-
-// Define components
-function Model({ model, children }) {
-  const out = useInstance(ChatModel, { model });
-  return children(out);
-}
-
-function Mem({ children }) {
-  const out = useInstance(Memory, {});
-  return children(out);
-}
-
-function App({ prompt }) {
-  return (
-    <Model model="gpt-4">
-      {(model) => (
-        <Mem>
-          {(memory) => (
-            <Agent
-              prompt={prompt}
-              modelId={model.id()}
-              messages={memory.messages()}
-            />
+<FormTrigger fields={['productTitle']}>
+  {(form) => (
+    <GoogleSearch query={`intitle:"${form.productTitle()}" pricing OR features`}>
+      {(results) => (
+        <ExtractText items={results.items()} fields={['title', 'snippet']}>
+          {(extracted) => (
+            <GeminiCompletion prompt={`Generate SEO meta and product description:\n${extracted.text()}`}>
+              {(content) => (
+                <>
+                  <ParseSections text={content.output()} format="seo,product">
+                    {(parsed) => (
+                      <GoogleSheetAppend doc="catalog" row={parsed.fields()} />
+                    )}
+                  </ParseSections>
+
+                  <SlackMessage channel="#products" text={`New: ${form.productTitle()}`} />
+                </>
+              )}
+            </GeminiCompletion>
           )}
-        </Mem>
+        </ExtractText>
       )}
-    </Model>
-  );
-}
+    </GoogleSearch>
+  )}
+</FormTrigger>
+```
 
-// Run
-CReact.provider = new AgentProvider();
-CReact.backend = new FileBackend({ directory: '.state' });
+Form → Search → Extract → AI → branches to Sheets and Slack. Each construct is one action.
 
-await renderCloudDOM(<App prompt="Hello" />, 'agent');
+```bash
+npm install @creact-labs/creact
 ```
 
-## The Four Pillars
+## How it works
 
-**Declarative** — Describe what you want, not how to get it.
+**Constructs** define what you want (props) and what you get (outputs).
 
-**Universal** — Works for AI agents, cloud infrastructure, APIs, anything.
+**Components** compose constructs with JSX. Dependencies flow through render props.
 
-**Reactive** — Automatically responds when things change.
+**Providers** execute constructs against real infrastructure (AWS, Terraform, APIs).
 
-**Runtime** — Keeps running continuously, handles events, recovers from crashes.
+**Backends** persist state for crash recovery and incremental updates.
 
 ## Documentation
 
-### Getting Started
-
-- [Tutorial: Build an AI Agent](./docs/getting-started/1-setup.md)
-
-### Concepts
-
-- [Thinking in CReact](./docs/concepts/thinking-in-creact.md) — The mental model
-- [Constructs](./docs/concepts/constructs.md) — Your building blocks
-- [Components](./docs/concepts/components.md) — Composing with JSX
-- [Reactivity](./docs/concepts/reactivity.md) — When things change
-- [Providers](./docs/concepts/providers.md) — Connecting to the real world
+- [Tutorial](./docs/getting-started/1-setup.md) — Build an AI agent with Wikipedia search
+- [Concepts](./docs/concepts/index.md) — Core mental model
 
 ## License
 

package/dist/cli.js

@@ -8,8 +8,10 @@
  * Runs a CReact application with the configured provider.
  * Uses tsx under the hood to execute TypeScript/TSX files.
  */
-import { spawn } from 'node:child_process';
-import { resolve } from 'node:path';
+import { tsImport } from 'tsx/esm/api';
+import { watch } from 'node:fs/promises';
+import { dirname, resolve } from 'node:path';
+import { pathToFileURL } from 'node:url';
 function showHelp() {
     console.log(`
 CReact CLI
@@ -41,6 +43,12 @@ Example entrypoint:
   }
 `);
 }
+async function runEntrypoint(entrypoint) {
+    const module = await tsImport(pathToFileURL(entrypoint).href, import.meta.url);
+    if (typeof module.default === 'function') {
+        await module.default();
+    }
+}
 async function main() {
     const args = process.argv.slice(2);
     if (args.length === 0 || args[0] === '--help' || args[0] === '-h') {
@@ -48,11 +56,11 @@ async function main() {
         process.exit(0);
     }
     // Parse --watch / -w flag and get entrypoint
-    let watch = false;
+    let watchMode = false;
     let entrypointArg;
     const firstArg = args[0];
     if (firstArg === '--watch' || firstArg === '-w') {
-        watch = true;
+        watchMode = true;
         const arg = args[1];
         if (!arg) {
             console.error('Error: --watch requires an entrypoint');
@@ -68,21 +76,18 @@ async function main() {
         process.exit(0);
     }
     const entrypoint = resolve(process.cwd(), entrypointArg);
-    // Build tsx command
-    const tsxArgs = watch ? ['tsx', 'watch', entrypoint] : ['tsx', entrypoint];
-    // Spawn tsx to run the entrypoint
-    const child = spawn('npx', tsxArgs, {
-        stdio: 'inherit',
-        cwd: process.cwd(),
-        shell: true,
-    });
-    child.on('error', (error) => {
-        console.error('Error running CReact application:');
-        console.error(error.message);
-        process.exit(1);
-    });
-    child.on('exit', (code) => {
-        process.exit(code ?? 0);
-    });
+    // Initial run
+    await runEntrypoint(entrypoint);
+    // Watch mode: async iterator keeps process alive
+    if (watchMode) {
+        console.log('Watching for changes...');
+        const watcher = watch(dirname(entrypoint), { recursive: true });
+        for await (const event of watcher) {
+            if (event.filename?.match(/\.(tsx?|jsx?)$/)) {
+                console.log(`\nRestarting...`);
+                await runEntrypoint(entrypoint);
+            }
+        }
+    }
 }
 main();

package/dist/index.d.ts

@@ -5,17 +5,9 @@ export { createElement, Fragment, jsx, jsxs } from './jsx/jsx-runtime';
 export { createContext, useContext } from './primitives/context';
 export { useInstance } from './primitives/instance';
 export { createStore } from './primitives/store';
-export type { AuditLogEntry, Backend, ChangeSet, DeploymentState, DeploymentStatus, ResourceState, SerializedNode, } from './provider/backend';
-export { serializeNode, serializeNodes } from './provider/backend';
+export { createEffect } from './reactive/effect';
+export { CReact, renderCloudDOM } from './runtime/run';
+export type { AuditLogEntry, Backend, DeploymentState } from './provider/backend';
 export type { OutputChangeEvent, Provider } from './provider/interface';
 export { createMockProvider } from './provider/interface';
-export { createEffect, onCleanup } from './reactive/effect';
-export { createSignal } from './reactive/signal';
-export { batch, untrack } from './reactive/tracking';
-export type { DependencyGraph } from './runtime/reconcile';
-export { buildDependencyGraph, computeParallelBatches, hasNewNodes, reconcile, topologicalSort, } from './runtime/reconcile';
-export type { CReactOptions } from './runtime/run';
-export { CReact, renderCloudDOM, resetRuntime, run, runWithBackend } from './runtime/run';
-export type { StateMachineOptions } from './runtime/state-machine';
-export { StateMachine } from './runtime/state-machine';
-export type { Accessor, Context, Fiber, InstanceNode, JSXElement, OutputAccessors, SetStoreFunction, Setter, } from './types';
+export type { Context, InstanceNode, JSXElement, OutputAccessors, SetStoreFunction, } from './types';

package/dist/index.js

@@ -7,16 +7,7 @@ export { createContext, useContext } from './primitives/context';
 // Primitives
 export { useInstance } from './primitives/instance';
 export { createStore } from './primitives/store';
-// Backend
-export { serializeNode, serializeNodes } from './provider/backend';
-// Provider
-export { createMockProvider } from './provider/interface';
-// Reactive
-export { createEffect, onCleanup } from './reactive/effect';
-export { createSignal } from './reactive/signal';
-export { batch, untrack } from './reactive/tracking';
-// Reconciler
-export { buildDependencyGraph, computeParallelBatches, hasNewNodes, reconcile, topologicalSort, } from './runtime/reconcile';
+export { createEffect } from './reactive/effect';
 // Runtime
-export { CReact, renderCloudDOM, resetRuntime, run, runWithBackend } from './runtime/run';
-export { StateMachine } from './runtime/state-machine';
+export { CReact, renderCloudDOM } from './runtime/run';
+export { createMockProvider } from './provider/interface';

package/package.json

@@ -1,9 +1,27 @@
 {
   "name": "@creact-labs/creact",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Declarative universal reactive runtime",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./jsx-runtime": {
+      "types": "./dist/jsx/jsx-runtime.d.ts",
+      "default": "./dist/jsx/jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./dist/jsx/jsx-dev-runtime.d.ts",
+      "default": "./dist/jsx/jsx-dev-runtime.js"
+    },
+    "./jsx": {
+      "types": "./dist/jsx/index.d.ts",
+      "default": "./dist/jsx/index.js"
+    }
+  },
   "typesVersions": {
     "*": {
       "jsx": [