@codecanvas-ide/engine 0.1.0 → 0.3.0

package/README.md

@@ -1,12 +1,14 @@
 # @codecanvas-ide/engine
 
-The canvas of [CodeCanvas](https://github.com/d-feliz/codecanvas-ide): it shows a TypeScript file as a
-zoomable diagram and lets you edit it there. Every function, class, variable and import is a block;
+The canvas of [CodeCanvas](https://github.com/d-feliz/codecanvas-ide): it shows a TypeScript or JavaScript
+file as a zoomable diagram and lets you edit it there. Every function, class, variable and import is a block;
 usages are drawn as lines; anything changed on the canvas is written back to the text.
 
 - Blocks with previews, nested blocks, and a stable layout you can save in the repo
 - Usage lines, references across files, rename across files (TypeScript language service)
 - Syntax and type errors on the blocks
+- React: components, state and render links, turned on by itself in React files; the toolbar
+  shows the language (JS, TS, React JS/TS/JSX/TSX), also as `model.language`
 - Changes against a base version (e.g. the last commit), and merge conflicts
 - No framework: plain TypeScript and the DOM
 
@@ -31,6 +33,17 @@ const canvas = new CodeCanvas(document.getElementById('canvas')!, {
 canvas.openFile('src/cart.ts', cartText);
 ```
 
+Give the project the folder's TypeScript settings, so imports resolve as in the editor. In a monorepo,
+pass every config file and `package.json`: each config gets its own program, and packages that import
+each other by name resolve to their source.
+
+```ts
+project.setWorkspace({
+  configFiles: [{ path: 'packages/web/tsconfig.json', text: webConfigText }],
+  packageFiles: { 'packages/utils/package.json': utilsManifestText },
+});
+```
+
 To keep TypeScript work off the page's thread, run the project in a worker: `serveProject(self)` in the
 worker script, and `connectProjectWorker(worker)` in place of `new Project()` on the page.