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