# @pi-top/blockly

> To make it easy to develop there is a example project which simply loads the module and displays it (for now), in the left column is a textarea you can type or paste Python into, in the middle Blockly renders the Blocks and on the right you can see the Py

Latest version **1.15.1** (published 2023-01-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install @pi-top/blockly
pnpm add @pi-top/blockly
yarn add @pi-top/blockly
bun add @pi-top/blockly
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.15.1 |
| Published | 2023-01-11 |
| First published | 2021-07-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | angusjfw, olivierwilkinson, pi-top-bot |

## Links

- npm: https://www.npmjs.com/package/@pi-top/blockly
- Repository: https://github.com/pi-top/pi-top-blockly
- Homepage: https://github.com/pi-top/pi-top-blockly#readme
- Issues: https://github.com/pi-top/pi-top-blockly/issues
- npm.io page: https://npm.io/package/@pi-top/blockly

## Dependencies (6)

- [skulpt](https://npm.io/package/skulpt.md) ^1.2.0
- [blockly](https://npm.io/package/blockly.md) ^8.0.3
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.14.8
- [babel-loader](https://npm.io/package/babel-loader.md) ^8.2.2
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.14.8
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.14.5

## Recent versions

- 1.15.1 (latest) — 2023-01-11
- 1.0.1-prerelease.2 (prerelease) — 2021-07-22
- 1.15.0 — 2023-01-04
- 1.14.0 — 2022-10-18
- 1.13.0 — 2022-10-18
- 1.12.1 — 2022-09-14
- 1.12.0 — 2022-09-09
- 1.11.1 — 2022-09-02
- 1.11.0 — 2022-08-31
- 1.9.0 — 2022-08-30
- 1.8.0 — 2022-07-27
- 1.7.1 — 2022-07-26
- 1.7.0 — 2022-03-07
- 1.6.4 — 2022-03-02
- 1.6.3 — 2022-03-01
- … 20 more at https://npm.io/package/@pi-top/blockly/versions

## README

# pi-top-blockly

To make it easy to develop there is a example project which simply loads the module and displays it (for now), in the left column is a textarea you can type or paste Python into, in the middle Blockly renders the Blocks and on the right you can see the Python generated by Blockly, you will need to trigger a event in Blockly to see the output. simplest simply click the top block and drag it a tiny amount.

to make this work:

```
cd example
npm start
```

it should hot reload changes as you make them.

## Usage

This is a React app but you can use the python->blocks without React, all you need is the piBlocks folder.

import { codeToBlocks } from "./piBlocks/piBlocks";
const blockly_xml = codeToBlocks(pythonCode),

then instantiate Blockly using the generated blockly_xml

to regenate Python from these blocks you will need to use the blockDefs. some of these use the JSON format some use the JS function format:

import { blockDefs, jsonBlockDefs } from "./piBlocks/ast/blockDefs";

Blockly.Blocks = {
...Blockly.Blocks,
...blockDefs,
};

Blockly.defineBlocksWithJsonArray(jsonBlockDefs);

## when using NPM link

you have to delete React & ReactDom from the dev dependencies in package.json, although they are needed for running react-testing-library they cause a 'cannot use two versions of react' error when you try to import into Further.

do this before you run npm link as npm link seems to run an npm install as part of the process of creation.

also pretty sure you have get rid of package-lock.json too for the changes in package.json to work

use '''npm i --legacy-peer-deps''' otherwise npm will install React because its a peer depencency

make sure you have run build '''npm run build'' and have a dist folder when using npm link

when running unit tests on Further you can't use the linked local package, you have to be running against the one from npm. I don't know why and there's no information in the test output/error.

npm -g ls --depth 0 is useful - if successful you should see @pi-top/blockly in the list

---
_Source: https://npm.io/package/@pi-top/blockly · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._