API Push

reka/api/collaboration.md

@@ -0,0 +1,7 @@
+@include "packages/collaboration/README.md"
+
+## API
+
+@start-typedoc collaboration/index.ts createCollabExtension
+
+@end-typedoc

reka/api/core.md

@@ -0,0 +1,156 @@
+# @rekajs/core
+
+The core package of Reka.
+
+## API
+
+@start-typedoc core/index.ts Reka
+
+!start-example
+
+```tsx
+import { Reka } from '@rekajs/core';
+import * as t from '@rekajs/types';
+
+import confetti from 'canvas-confetti';
+import { Header } from './path-to-header-component.tsx';
+
+const reka = Reka.create({
+  externals: {
+    states: {
+      myGlobalVariable: 0,
+    },
+    functions: (reka) => ({
+      getGlobalVariable: () => {
+        return reka.getExternalState('myGlobalVariable');
+      },
+      confetti: () => {
+        return confetti();
+      },
+    }),
+    components: [
+      t.externalComponent({
+        name: 'MyReactHeader',
+        render: (props) => {
+          return <Header {...props} />;
+        },
+      }),
+    ],
+  },
+});
+```
+
+!end-example
+
+!start-example change
+
+```tsx
+reka.change(() => {
+  reka.components.push(t.rekaComponent(...))
+})
+```
+
+!end-example
+
+!start-example listenToChangeset
+
+```tsx
+reka.listenToChangeset((payload) => {
+  console.log(
+    'node changed',
+    payload.type,
+    payload.newValue,
+    payload.oldValue,
+    payload.name
+  );
+});
+```
+
+!end-example
+
+!start-example getParentNode
+
+```tsx
+const state = t.state({
+  program: t.program({
+    components: [
+      t.rekaComponent({
+        name: "App"
+        ...
+      })
+    ]
+  })
+})
+
+reka.load(state);
+
+const appComponent = state.program.components[0];
+
+console.log(reka.getParentNode(appComponent) === state.program); // true
+```
+
+!end-example
+
+!start-example getNodeLocation
+
+```tsx
+const state = t.state({
+  program: t.program({
+    components: [
+      t.rekaComponent({
+        name: "App"
+        ...
+      })
+    ]
+  })
+})
+
+reka.load(state);
+
+const appComponent = state.program.components[0];
+
+const location = reka.getNodeLocation(appComponent);
+
+console.log(location.parent === state.program); // true
+console.log(location.path) // ["components", 0]
+```
+
+!end-example
+
+!start-example subscribe
+
+```tsx
+reka.subscribe(
+  (state) => ({
+    componentNames: state.program.components.map((component) => component.name),
+  }),
+  (collected) => {
+    console.log('component names', collected.componentNames);
+  }
+);
+```
+
+!end-example
+
+!start-example watch
+
+```tsx
+reka.watch(() => {
+  console.log(
+    'component names',
+    state.program.components.map((component) => component.name)
+  );
+});
+```
+
+!end-example
+
+@end-typedoc
+
+@start-typedoc core/index.ts Frame
+
+@end-typedoc
+
+@start-typedoc core/index.ts Extension
+
+@end-typedoc

reka/api/parser.md

@@ -0,0 +1,116 @@
+@include "packages/parser/README.md"
+
+## API Reference
+
+@start-typedoc parser/index.ts Parser
+
+!start-example
+
+```tsx
+import { Parser } from '@rekajs/parser';
+
+Parser.stringify(...);
+Parser.parse(...);
+```
+
+!end-example
+
+!start-example parseProgram
+
+```tsx
+import * as t from '@rekajs/types';
+import { Parser } from '@rekajs/parser';
+
+const result = Parser.parseProgram(`
+    val globalVariable = 0;
+
+    component Button() {} => (
+        <button>
+          <text value="Click me" />
+        </button>
+    )
+
+    component App(){} => (
+        <div>
+          <Button />
+        </div>
+    )
+`);
+
+console.log(result instanceof t.Program); // true
+console.log(result.components.length == 2); // true
+console.log(result.globals.length == 1); // true
+```
+
+!end-example
+
+!start-example parseExpression
+
+```tsx
+import * as t from '@rekajs/types';
+import { Parser } from '@rekajs/parser';
+
+const result = Parser.parseExpression('1+2');
+
+console.log(result instanceof t.BinaryExpression); // true
+console.log(result.left instanceof t.Literal); // true
+console.log(result.left.value == 1); // true;
+```
+
+If you know the expected return type of the source string, you could pass the Type constructor as the second argument:
+
+```tsx
+Parser.parseExpression('1+1', t.BinaryExpression);
+// ok
+
+Parser.parseExpression('10', t.BinaryExpression);
+// error, expected BinaryExpression but received Literal
+```
+
+!end-example
+
+!start-example stringify
+
+```tsx
+import * as t from '@rekajs/types';
+import { Parser } from '@rekajs/parser';
+
+Parser.stringify(
+  t.program({
+    components: [
+      t.rekaComponent({
+        name: 'App',
+        state: [t.val({ name: 'counter', init: t.literal({ value: 0 }) })],
+        props: [],
+        template: t.tagTemplate({
+          tag: 'div',
+          props: {},
+          children: [
+            t.tagTemplate({
+              tag: 'text',
+              props: { value: 'Hello!' },
+              children: [],
+            }),
+          ],
+        }),
+      }),
+    ],
+  })
+);
+```
+
+The above returns the following code:
+
+```
+component App() {
+    val counter = 0;
+} => (
+    <div>
+     <text value="Hello!" />
+    </div>
+)
+```
+
+!end-example
+
+@end-typedoc

reka/api/react.md

@@ -0,0 +1,60 @@
+# @rekajs/react
+
+Contains React-specific APIs for Reka.
+
+> Work in progress
+
+## Usage
+
+Wrap your React editor with the `RekaProvider` component:
+
+```tsx
+import { Reka } from '@rekajs/core';
+import { RekaProvider } from '@rekajs/react';
+
+import * as React from 'react';
+
+const reka = Reka.create();
+
+reka.load(...);
+
+export const App = () => {
+    return (
+        <RekaProvider reka={reka}>
+            ...
+        </RekaProvider>
+    )
+}
+```
+
+The Reka instance can be accessed anywhere within the provider via the `useReka` hook:
+
+```tsx
+const Editor = () => {
+    const { reka } = useReka();
+
+    return (
+        ...
+    )
+}
+```
+
+The `useReka` hook optionally accepts a callback to collect values from Reka data types:
+
+```tsx
+const Editor = () => {
+  const { componentNames } = useReka((reka) => ({
+    componentNames: reka.state.program.components.map(
+      (component) => component.name
+    ),
+  }));
+
+  return (
+    <div>
+      {componentNames.map((name) => (
+        <h2 key={name}>{name}</h2>
+      ))}
+    </div>
+  );
+};
+```