1.4.4 • Published 10 months ago

@betteridea/codecell v1.4.4

Weekly downloads
-
License
GPL-3.0-only
Repository
github
Last release
10 months ago

BetterIDEa CodeCell

Now you can integrate our code cells into your webapps and run AO LUA anywhere 🎉

npm downloads X Follow

Installation

npm install @betteridea/codecell

API

<CodeCell .../>

A react component to render a code cell in your app.

Props

PropTypeDescription
cellIdstringUnique id for the cell
appNamestringUnique app name
codestringInitial code for the cell
nowalletbooleanSet this to true if you dont want to use a web wallet, and generate a local jwk file (works on mobile) Recommended for playgrounds
enableToastsbooleanSet this to true if you want to enable toast notifications for the cell
onAOProcess(pid:string) => voidCallback function that run whenever a process is is loaded
onNewMessage(msgs: msg[]) => voidCallback function, runs whenever process gets new messages
onInbox(inbox: msg[]) => voidCallback function, runs whenever Inbox is received after calling getInbox()
widthstringWidth of the cell
heightstringHeight of the cell
classNamestringClass names for styling
styleReact.CSSPropertiesInline styles
devModebooleanBoolean to enable dev mode

getInbox(...)

Fetches latest Inbox messages from the process.

Arguments

ArgumentTypeDescription
cellIdstringUnique id of the cell
devModebooleanBoolean to enable dev mode

setCellCode(...)

To update the code in a cell, after it has been rendered. It is discouraged to update code by changing the code prop directly, since it re-renders the webview, again this is personal preference.

Arguments

ArgumentTypeDescription
cellIdstringUnique id of the cell
codestringCode to set in the cell
devModebooleanBoolean to enable dev mode

Usage

import { CodeCell } from '@betteridea/codecell';

// in your react app
<CodeCell
  cellId="1"
  appName="BetterIDEa-Code-Cell"
  code="print('Portable code cell ftw!')"
  onAOProcess={(pid)=> console.log("using process: ", pid)}
  onNewMessage={(msgs) => console.log("new messages: ", msgs)}
  onInbox={(inbox) => console.log("got inbox: ", inbox)}
/>

To update the cell with a different code snippet, you can use the setCellCode function.

import { setCellCode, getInbox } from '@betteridea/codecell';

...

// This will update the code in the cell with the id provided
setCellCode("1", "print('Updated code!')");

// This will fetch the latest inbox messages from the process
getInbox("1");
// as soon as the inbox is received, onInbox callback will be called

runCell() function has been deprecated due to security reasons, since it might be possible anyone can run some mischevious code in your process without you knowing.

runCell(...) (deprecated due to security reasons)

To run the code in a cell, after it has been rendered (optional, since the cell already has a run button)

Arguments

  • cellId - Unique id of the cell to run
  • devMode - Boolean to enable dev mode
import { runCell } from '@betteridea/codecell';

...

// This will run whatever code is typed in the cell with the id provided
runCell("1");

Developing

To start the vite development server, run:

cd packages/codecell
npm install
npm run dev

then make changes to the component and run function and test them in the vite app at http://localhost:5173

  1. CodeCell component -> ./src/components/CodeCell.tsx

  2. Library functions -> ./src/lib

  3. /codecell webview -> next_app/src/pages/codecell.tsx

The package is essentially a wrapper around https://ide.betteridea.dev/codecell route from the main IDE to run code in any webapp through a webview.

1.2.0

1 year ago

1.1.1

1 year ago

1.1.0

1 year ago

1.4.4

10 months ago

1.4.3

1 year ago

1.4.2

1 year ago

1.4.1

1 year ago

1.4.0

1 year ago

1.3.1

1 year ago

1.3.0

1 year ago

1.0.6

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago