@creact-labs/creact 0.2.1 → 0.2.3

package/README.md

@@ -1,100 +1,60 @@
-# CReact
-
-**Declarative reactive runtime for AI agents, cloud infrastructure, and automation.**
-
-Build complex workflows with JSX. Describe *what* you want — CReact figures out *how*.
-
-## Install
-
-```bash
-npm install @creact-labs/creact
-```
+<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>
 
-## Example: AI Content Pipeline
+# CReact
 
-A workflow that generates blog posts and publishes to multiple channels — all reactive and declarative:
+What if you could generate SEO-optimized product pages by researching competitors automatically?
 
 ```tsx
-import { CReact, renderCloudDOM, useInstance, createSignal } from '@creact-labs/creact';
-
-// 🤖 AI generates content from a topic
-function AIWriter({ topic, children }) {
-  const content = useInstance(OpenAICompletion, {
-    model: 'gpt-4',
-    prompt: `Write a blog post about: ${topic}`,
-  });
-  return children(content);
-}
-
-// 📝 Publish to your blog
-function BlogPost({ title, content }) {
-  return useInstance(WordPressPost, { title, content, status: 'published' });
-}
-
-// 🐦 Share on social
-function Tweet({ content }) {
-  return useInstance(TwitterPost, { 
-    text: content.summary(),
-    thread: true,
-  });
-}
-
-// 💬 Notify your team
-function SlackNotify({ channel, message }) {
-  return useInstance(SlackMessage, { channel, text: message });
-}
-
-// 🔗 Compose the pipeline
-function ContentPipeline({ topic }) {
-  return (
-    <AIWriter topic={topic}>
-      {(content) => (
-        <>
-          <BlogPost title={content.title()} content={content.body()} />
-          <Tweet content={content} />
-          <SlackNotify 
-            channel="#content" 
-            message={`✨ New post published: ${content.title()}`} 
-          />
-        </>
+<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>
+          )}
+        </ExtractText>
       )}
-    </AIWriter>
-  );
-}
-
-// Run it
-await renderCloudDOM(<ContentPipeline topic="Why CReact changes everything" />);
+    </GoogleSearch>
+  )}
+</FormTrigger>
 ```
 
-**Change the topic → everything updates.** The blog post regenerates, tweet updates, Slack notifies.
+Form → Search → Extract → AI → branches to Sheets and Slack. Each construct is one action.
 
-## Why CReact?
-
-| Traditional Approach | CReact |
-|---------------------|--------|
-| Imperative scripts that break | Declarative specs that reconcile |
-| Manual dependency tracking | Automatic reactive updates |
-| Scattered state across files | Single source of truth |
-| Hard to test and reason about | Composable, testable components |
+```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
 
-- [Tutorial: Build an AI Agent](./docs/getting-started/1-setup.md)
-- [Thinking in CReact](./docs/concepts/thinking-in-creact.md)
-- [Constructs](./docs/concepts/constructs.md)
-- [Components](./docs/concepts/components.md)
-- [Reactivity](./docs/concepts/reactivity.md)
-- [Providers](./docs/concepts/providers.md)
+- [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,16 @@ Example entrypoint:
   }
 `);
 }
+async function runEntrypoint(entrypoint) {
+    const url = pathToFileURL(entrypoint).href;
+    // FIXME: Cache-busting causes memory leak as old modules stay in V8 cache.
+    // Acceptable for dev watch mode, but consider worker threads for long sessions.
+    const cacheBustUrl = `${url}?t=${Date.now()}`;
+    const module = await tsImport(cacheBustUrl, 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 +60,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 +80,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,6 +1,7 @@
 {
   "name": "@creact-labs/creact",
-  "version": "0.2.1",
+  "version": "0.2.3",
+  "type": "module",
   "description": "Declarative universal reactive runtime",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",