react-native-blockly 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 AlanSilvaaa
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,91 @@
+<div align=center>
+  <img src="react-native-blockly-logo.png" alt="React native blockly logo" width="400">
+</div>
+
+<div align="center">
+
+[![Lint](https://img.shields.io/github/actions/workflow/status/AlanSilvaaa/react-native-blockly/ci.yml?branch=main&label=lint&logo=eslint)](https://github.com/AlanSilvaaa/react-native-blockly/actions/workflows/ci.yml)
+[![Test](https://img.shields.io/github/actions/workflow/status/AlanSilvaaa/react-native-blockly/ci.yml?branch=main&label=test&logo=jest)](https://github.com/AlanSilvaaa/react-native-blockly/actions/workflows/ci.yml)
+[![Build Library](https://img.shields.io/github/actions/workflow/status/AlanSilvaaa/react-native-blockly/ci.yml?branch=main&label=build%20library&logo=typescript)](https://github.com/AlanSilvaaa/react-native-blockly/actions/workflows/ci.yml)
+[![Build Web](https://img.shields.io/github/actions/workflow/status/AlanSilvaaa/react-native-blockly/ci.yml?branch=main&label=build%20web&logo=expo)](https://github.com/AlanSilvaaa/react-native-blockly/actions/workflows/ci.yml)
+
+</div>
+
+npm package that serves as a bridge between React Native and Google's [Blockly](https://developers.google.com/blockly) UNPKG version
+
+## General Overview
+
+This library bridges Google's Blockly visual programming framework with React Native by wrapping a WebView component. Some of the characteristics of the package are:
+
+- **Block Management**: Define custom blocks with configurable properties (type, messages, colors, tooltips, connections)
+- **Toolbox Configuration**: Create dynamic toolboxes with organized block categories and accessibility controls
+- **Workspace Customization**: Configure workspace behavior including scrolling, trash can, and visual settings
+- **HTML Generation**: Automatically transpile block definitions and configurations into executable HTML/JavaScript
+- **Validation System**: Built-in validation to ensure block-toolbox consistency and prevent runtime errors
+- **WebView Integration**: Seamless embedding of Blockly workspace within React Native components using react-native-webview
+
+> [!IMPORTANT]
+> Beause we are using the UNPKG version, somethings may not work the way the npm version of Blockly does, as stated by Google [here](https://developers.google.com/blockly/guides/get-started/get-the-code#unpkg).
+
+## Installation
+use npm or yarn to install the package:
+```bash
+npm install react-native-blockly
+```
+
+## Usage
+Here is a simple example of how to use the library:
+```tsx
+import BlocklyView, { Blockly, BlocklyViewConfig } from 'react-native-blockly'
+
+const blockly = new Blockly();
+const config = new BlocklyViewConfig();
+
+blockly.createBlock({
+  type: 'helloWorld',
+  message0: 'Hello World',
+  output: null,
+  colour: 230,
+  tooltip: 'Command to say hello',
+  helpUrl: '',
+  code: 'return "Hello World!"'
+});
+
+config.setToolbox({
+  kind: 'flyoutToolbox',
+  contents: [
+    {
+      kind: 'block',
+      type: 'helloWorld'
+    }
+  ]
+});
+
+function onMessage(data: string) {
+  console.log('Message from Blockly:', data); // on this case, data would be "Hello World!"
+}
+
+export default function App() {
+  return (
+    <BlocklyView Blockly={blockly} Config={config} onMessage={onMessage} />
+  );
+}
+```
+
+To see more examples, check the [examples directory](./example).
+
+
+## Contributing
+
+See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+
+## License
+
+MIT
+
+## Author
+[@AlanSilvaaa](https://github.com/AlanSilvaaa)
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/lib/module/classes/blockly.js

@@ -0,0 +1,24 @@
+"use strict";
+
+/**
+ * Blockly class to manage blockly configuration.
+ */
+export class Blockly {
+  blocks = [];
+  createBlocks(blocks) {
+    this.blocks.push(...blocks);
+  }
+
+  /**
+   * Creates a blockly block and add it to the blocks array.
+   *
+   * @param block - Block object to be added to the blocks array
+   */
+  createBlock(block) {
+    this.blocks.push(block);
+  }
+  getBlocks() {
+    return this.blocks;
+  }
+}
+//# sourceMappingURL=blockly.js.map

package/lib/module/classes/blockly.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Blockly","blocks","createBlocks","push","createBlock","block","getBlocks"],"sourceRoot":"..\\..\\..\\src","sources":["classes/blockly.ts"],"mappings":";;AAEA;AACA;AACA;AACA,OAAO,MAAMA,OAAO,CAAC;EACnBC,MAAM,GAAY,EAAE;EAEpBC,YAAYA,CAACD,MAAe,EAAQ;IAClC,IAAI,CAACA,MAAM,CAACE,IAAI,CAAC,GAAGF,MAAM,CAAC;EAC7B;;EAEA;AACF;AACA;AACA;AACA;EACEG,WAAWA,CAACC,KAAY,EAAQ;IAC9B,IAAI,CAACJ,MAAM,CAACE,IAAI,CAACE,KAAK,CAAC;EACzB;EAEAC,SAASA,CAAA,EAAY;IACnB,OAAO,IAAI,CAACL,MAAM;EACpB;AACF","ignoreList":[]}

package/lib/module/classes/blocklyViewConfig.js

@@ -0,0 +1,39 @@
+"use strict";
+
+import { DEFAULT_BUTTON_TEXT, DEFAULT_BUTTON_STYLE } from "../utils/defaults.js";
+export class BlocklyViewConfig {
+  toolbox = {
+    kind: '',
+    contents: []
+  };
+  workspace = {
+    scrollbars: false,
+    trashcan: false
+  };
+  buttonConfig = {
+    text: DEFAULT_BUTTON_TEXT,
+    style: DEFAULT_BUTTON_STYLE
+  };
+  setToolbox(toolbox) {
+    this.toolbox = toolbox;
+  }
+  getToolbox() {
+    return this.toolbox;
+  }
+  setWorkspace(workspace) {
+    this.workspace = workspace;
+  }
+  getWorkspace() {
+    return this.workspace;
+  }
+  setButtonConfig(buttonConfig) {
+    this.buttonConfig = {
+      ...this.buttonConfig,
+      ...buttonConfig
+    };
+  }
+  getButtonConfig() {
+    return this.buttonConfig;
+  }
+}
+//# sourceMappingURL=blocklyViewConfig.js.map

package/lib/module/classes/blocklyViewConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DEFAULT_BUTTON_TEXT","DEFAULT_BUTTON_STYLE","BlocklyViewConfig","toolbox","kind","contents","workspace","scrollbars","trashcan","buttonConfig","text","style","setToolbox","getToolbox","setWorkspace","getWorkspace","setButtonConfig","getButtonConfig"],"sourceRoot":"..\\..\\..\\src","sources":["classes/blocklyViewConfig.ts"],"mappings":";;AAEA,SAASA,mBAAmB,EAAEC,oBAAoB,QAAQ,sBAAmB;AAE7E,OAAO,MAAMC,iBAAiB,CAAC;EAC7BC,OAAO,GAAY;IAAEC,IAAI,EAAE,EAAE;IAAEC,QAAQ,EAAE;EAAG,CAAC;EAC7CC,SAAS,GAAc;IAAEC,UAAU,EAAE,KAAK;IAAEC,QAAQ,EAAE;EAAM,CAAC;EAC7DC,YAAY,GAAiB;IAC3BC,IAAI,EAAEV,mBAAmB;IACzBW,KAAK,EAAEV;EACT,CAAC;EAEDW,UAAUA,CAACT,OAAgB,EAAQ;IACjC,IAAI,CAACA,OAAO,GAAGA,OAAO;EACxB;EAEAU,UAAUA,CAAA,EAAY;IACpB,OAAO,IAAI,CAACV,OAAO;EACrB;EAEAW,YAAYA,CAACR,SAAoB,EAAQ;IACvC,IAAI,CAACA,SAAS,GAAGA,SAAS;EAC5B;EAEAS,YAAYA,CAAA,EAAc;IACxB,OAAO,IAAI,CAACT,SAAS;EACvB;EAEAU,eAAeA,CAACP,YAA0B,EAAQ;IAChD,IAAI,CAACA,YAAY,GAAG;MAAE,GAAG,IAAI,CAACA,YAAY;MAAE,GAAGA;IAAa,CAAC;EAC/D;EAEAQ,eAAeA,CAAA,EAAiB;IAC9B,OAAO,IAAI,CAACR,YAAY;EAC1B;AACF","ignoreList":[]}

package/lib/module/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+import WebView from 'react-native-webview';
+import { parseBlocksToString, parseToolboxToString, parseWorkspaceToString, parseButtonConfigToString } from "./parsers/parseToString.js";
+import { stringToBlockly } from "./parsers/stringToBlockly.js";
+import { Blockly } from "./classes/blockly.js";
+import { BlocklyViewConfig } from "./classes/blocklyViewConfig.js";
+import { blockInToolbox, noReturnStatement } from "./utils/showWarnings.js";
+
+// Export both classes so they can be imported by users
+import { jsx as _jsx } from "react/jsx-runtime";
+export { Blockly, BlocklyViewConfig };
+/**
+ * BlocklyView wrapper for rendering the Blockly workspace.
+ *
+ * It takes an instance of the Blockly class, a BlocklyViewConfig instance, and an optional onMessage callback and
+ * parses the contents to generate an HTML and load it on the WebView.
+ *
+ * @param param0 - Props for the component
+ * @returns JSX.Element
+ */
+export default function BlocklyView({
+  Blockly,
+  Config,
+  onMessage,
+  style
+}) {
+  /**
+   * parse the contents of the Blockly instance and Config to generate the HTML string
+   * that will be loaded in the WebView.
+   */
+  const blocks = parseBlocksToString(Blockly.getBlocks());
+  const toolbox = parseToolboxToString(Config.getToolbox());
+  const workspace = parseWorkspaceToString(Config.getWorkspace());
+  const buttonConfig = parseButtonConfigToString(Config.getButtonConfig());
+  const blocklyHtml = stringToBlockly(blocks, toolbox, workspace, buttonConfig);
+
+  /**
+   * Show warnings
+   */
+  blockInToolbox(Blockly.getBlocks(), Config.getToolbox());
+  noReturnStatement(Blockly.getBlocks());
+  return /*#__PURE__*/_jsx(WebView, {
+    originWhitelist: ['*'],
+    source: {
+      html: blocklyHtml,
+      baseUrl: 'file:///android_asset/'
+    },
+    style: style || {
+      flex: 1
+    },
+    onMessage: event => {
+      // console.log('Message received from webview:', event.nativeEvent.data);
+      if (onMessage) {
+        onMessage(event.nativeEvent.data); // Call the callback with the data
+      }
+    }
+  });
+}
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["WebView","parseBlocksToString","parseToolboxToString","parseWorkspaceToString","parseButtonConfigToString","stringToBlockly","Blockly","BlocklyViewConfig","blockInToolbox","noReturnStatement","jsx","_jsx","BlocklyView","Config","onMessage","style","blocks","getBlocks","toolbox","getToolbox","workspace","getWorkspace","buttonConfig","getButtonConfig","blocklyHtml","originWhitelist","source","html","baseUrl","flex","event","nativeEvent","data"],"sourceRoot":"..\\..\\src","sources":["index.tsx"],"mappings":";;AAAA,OAAOA,OAAO,MAAM,sBAAsB;AAK1C,SACEC,mBAAmB,EACnBC,oBAAoB,EACpBC,sBAAsB,EACtBC,yBAAyB,QACpB,4BAAyB;AAChC,SAASC,eAAe,QAAQ,8BAA2B;AAC3D,SAASC,OAAO,QAAQ,sBAAmB;AAC3C,SAASC,iBAAiB,QAAQ,gCAA6B;AAC/D,SAASC,cAAc,EAAEC,iBAAiB,QAAQ,yBAAsB;;AAExE;AAAA,SAAAC,GAAA,IAAAC,IAAA;AACA,SAASL,OAAO,EAAEC,iBAAiB;AAGnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASK,WAAWA,CAAC;EAClCN,OAAO;EACPO,MAAM;EACNC,SAAS;EACTC;AACgB,CAAC,EAAE;EACnB;AACF;AACA;AACA;EACE,MAAMC,MAAM,GAAGf,mBAAmB,CAACK,OAAO,CAACW,SAAS,CAAC,CAAC,CAAC;EACvD,MAAMC,OAAO,GAAGhB,oBAAoB,CAACW,MAAM,CAACM,UAAU,CAAC,CAAC,CAAC;EACzD,MAAMC,SAAS,GAAGjB,sBAAsB,CAACU,MAAM,CAACQ,YAAY,CAAC,CAAC,CAAC;EAC/D,MAAMC,YAAY,GAAGlB,yBAAyB,CAACS,MAAM,CAACU,eAAe,CAAC,CAAC,CAAC;EACxE,MAAMC,WAAW,GAAGnB,eAAe,CAACW,MAAM,EAAEE,OAAO,EAAEE,SAAS,EAAEE,YAAY,CAAC;;EAE7E;AACF;AACA;EACEd,cAAc,CAACF,OAAO,CAACW,SAAS,CAAC,CAAC,EAAEJ,MAAM,CAACM,UAAU,CAAC,CAAC,CAAC;EACxDV,iBAAiB,CAACH,OAAO,CAACW,SAAS,CAAC,CAAC,CAAC;EAEtC,oBACEN,IAAA,CAACX,OAAO;IACNyB,eAAe,EAAE,CAAC,GAAG,CAAE;IACvBC,MAAM,EAAE;MAAEC,IAAI,EAAEH,WAAW;MAAEI,OAAO,EAAE;IAAyB,CAAE;IACjEb,KAAK,EAAEA,KAAK,IAAI;MAAEc,IAAI,EAAE;IAAE,CAAE;IAC5Bf,SAAS,EAAGgB,KAAK,IAAK;MACpB;MACA,IAAIhB,SAAS,EAAE;QACbA,SAAS,CAACgB,KAAK,CAACC,WAAW,CAACC,IAAI,CAAC,CAAC,CAAC;MACrC;IACF;EAAE,CACH,CAAC;AAEN","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/module/parsers/parseToString.js

@@ -0,0 +1,86 @@
+"use strict";
+
+/**
+ * Parses the blocks array to a string representation.
+ *
+ * If the block has a 'code' property, it uses that as the code generation logic.
+ * Otherwise, it defaults to returning a function call with the block type name.
+ * e.g. for a block of type 'moveForward', it will generate code: `return 'moveForward()\n'`; if
+ * no code property is provided.
+ *
+ * @param blocks - array of Block objects
+ * @returns a string representation of the blocks in JSON format
+ */
+export function parseBlocksToString(blocks) {
+  let htmlString = '';
+  blocks.forEach(block => {
+    htmlString += `
+      Blockly.defineBlocksWithJsonArray([
+        {
+          "type": "${block.type}",
+          "message0": "${block.message0}",
+          "colour": ${block.colour || 230},
+          "tooltip": "${block.tooltip || 'No tooltip'}",
+          "previousStatement": null,
+          "nextStatement": null,
+          "helpUrl": ""
+        }
+      ]);
+
+      javascript.javascriptGenerator.forBlock['${block.type}'] = function (block) {
+        ${block.code ? block.code : `return '${block.type}()\\n'`};
+      };
+    `;
+  });
+  return htmlString;
+}
+
+/**
+ * Parses the toolbox object to a string representation.
+ *
+ * @param toolbox - toolbox object
+ * @returns a string representation of the toolbox in JSON format
+ */
+export function parseToolboxToString(toolbox) {
+  return JSON.stringify(toolbox);
+}
+
+/**
+ * Parses the workspace object to a string representation.
+ *
+ * @param workspace - workspace object
+ * @returns a string representation of the workspace in JSON format
+ */
+export function parseWorkspaceToString(workspace) {
+  return JSON.stringify(workspace);
+}
+
+/**
+ * Converts a CSSProperties object to an inline style string
+ *
+ * @param styles CSS properties object
+ * @returns inline style string
+ */
+export function cssObjectToString(styles) {
+  return Object.entries(styles).map(([key, value]) => {
+    // Convert camelCase to kebab-case
+    const kebabKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+    return `${kebabKey}: ${value}`;
+  }).join('; ');
+}
+
+/**
+ * Parses the button configuration to string representation.
+ *
+ * @param buttonConfig - button configuration object
+ * @returns an object with text and style as strings
+ */
+export function parseButtonConfigToString(buttonConfig) {
+  const text = buttonConfig?.text ?? '';
+  const style = buttonConfig?.style ? cssObjectToString(buttonConfig.style) : '';
+  return {
+    text,
+    style
+  };
+}
+//# sourceMappingURL=parseToString.js.map

package/lib/module/parsers/parseToString.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["parseBlocksToString","blocks","htmlString","forEach","block","type","message0","colour","tooltip","code","parseToolboxToString","toolbox","JSON","stringify","parseWorkspaceToString","workspace","cssObjectToString","styles","Object","entries","map","key","value","kebabKey","replace","toLowerCase","join","parseButtonConfigToString","buttonConfig","text","style"],"sourceRoot":"..\\..\\..\\src","sources":["parsers/parseToString.ts"],"mappings":";;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,mBAAmBA,CAACC,MAAe,EAAU;EAC3D,IAAIC,UAAU,GAAG,EAAE;EACnBD,MAAM,CAACE,OAAO,CAAEC,KAAY,IAAK;IAC/BF,UAAU,IAAI;AAClB;AACA;AACA,qBAAqBE,KAAK,CAACC,IAAI;AAC/B,yBAAyBD,KAAK,CAACE,QAAQ;AACvC,sBAAsBF,KAAK,CAACG,MAAM,IAAI,GAAG;AACzC,wBAAwBH,KAAK,CAACI,OAAO,IAAI,YAAY;AACrD;AACA;AACA;AACA;AACA;AACA;AACA,iDAAiDJ,KAAK,CAACC,IAAI;AAC3D,UAAUD,KAAK,CAACK,IAAI,GAAGL,KAAK,CAACK,IAAI,GAAG,WAAWL,KAAK,CAACC,IAAI,QAAQ;AACjE;AACA,KAAK;EACH,CAAC,CAAC;EACF,OAAOH,UAAU;AACnB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASQ,oBAAoBA,CAACC,OAAgB,EAAU;EAC7D,OAAOC,IAAI,CAACC,SAAS,CAACF,OAAO,CAAC;AAChC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASG,sBAAsBA,CAACC,SAAoB,EAAU;EACnE,OAAOH,IAAI,CAACC,SAAS,CAACE,SAAS,CAAC;AAClC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,iBAAiBA,CAACC,MAAqB,EAAU;EAC/D,OAAOC,MAAM,CAACC,OAAO,CAACF,MAAM,CAAC,CAC1BG,GAAG,CAAC,CAAC,CAACC,GAAG,EAAEC,KAAK,CAAC,KAAK;IACrB;IACA,MAAMC,QAAQ,GAAGF,GAAG,CAACG,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAACC,WAAW,CAAC,CAAC;IAC7D,OAAO,GAAGF,QAAQ,KAAKD,KAAK,EAAE;EAChC,CAAC,CAAC,CACDI,IAAI,CAAC,IAAI,CAAC;AACf;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,yBAAyBA,CAACC,YAA0B,EAGlE;EACA,MAAMC,IAAI,GAAGD,YAAY,EAAEC,IAAI,IAAI,EAAE;EACrC,MAAMC,KAAK,GAAGF,YAAY,EAAEE,KAAK,GAC7Bd,iBAAiB,CAACY,YAAY,CAACE,KAAK,CAAC,GACrC,EAAE;EAEN,OAAO;IAAED,IAAI;IAAEC;EAAM,CAAC;AACxB","ignoreList":[]}

package/lib/module/parsers/stringToBlockly.js

@@ -0,0 +1,87 @@
+"use strict";
+
+import { DEFAULT_BUTTON_TEXT, DEFAULT_BUTTON_STYLE } from "../utils/defaults.js";
+import { cssObjectToString } from "./parseToString.js";
+
+/**
+ * Main function to convert all of the characteristics of a Blockly instance into a string
+ *
+ * @param blocks blocks string
+ * @param toolbox toolbox string
+ * @param workspace workspace string (JSON stringified workspace configuration)
+ * @param buttonConfig parsed button configuration with text and style as strings
+ * @returns a complete HTML string ready to be loaded in the WebView
+ */
+export function stringToBlockly(blocks, toolbox, workspace, buttonConfig) {
+  return `
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Custom Blockly Block</title>
+    <style>
+      html, body {
+        font-family: Arial, sans-serif;
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+      body {
+        display: flex;
+        flex-direction: column;
+      }
+      #blocklyDiv {
+        flex: 1;
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="blocklyDiv"></div>
+    <button id="runCodeButton" style="${buttonConfig.style || cssObjectToString(DEFAULT_BUTTON_STYLE)}">${buttonConfig.text || DEFAULT_BUTTON_TEXT}</button>
+
+    <!-- Import required Blockly packages -->
+    <script src="https://unpkg.com/blockly/blockly_compressed.js"></script>
+    <script src="https://unpkg.com/blockly/blocks_compressed.js"></script>
+    <script src="https://unpkg.com/blockly/javascript_compressed.js"></script>
+    <script src="https://unpkg.com/blockly/msg/en.js"></script>
+    <script>
+      // Define the custom block using JSON
+      console.log('Blockly namespace:', typeof Blockly);
+      console.log('Blockly.JavaScript namespace:', typeof Blockly.JavaScript);
+      console.log('javascript.javascriptGenerator:', typeof javascript.javascriptGenerator);
+
+      ${blocks ?? ''}
+
+      // Define the toolbox with the custom block
+      const toolbox = ${toolbox || `{}`};
+
+      // Parse workspace configuration
+      const workspaceConfig = ${workspace || `{}`};
+
+      // Inject Blockly into the workspace
+      const workspace = Blockly.inject('blocklyDiv', {
+        toolbox: toolbox,
+        ...workspaceConfig,
+      });
+
+      // Run the code when the button is clicked
+      document.getElementById('runCodeButton').addEventListener('click', () => {
+        const code = Blockly.JavaScript.workspaceToCode(workspace);
+        console.log('Generated Code:', code); // For debugging
+        try {
+          // eval(code); // Execute the code
+          window.ReactNativeWebView.postMessage(code); // Send the code to the app
+        } catch (error) {
+          alert('Error: ' + error.message);
+        }
+      });
+    </script>
+  </body>
+</html>
+  `;
+}
+//# sourceMappingURL=stringToBlockly.js.map

package/lib/module/parsers/stringToBlockly.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DEFAULT_BUTTON_TEXT","DEFAULT_BUTTON_STYLE","cssObjectToString","stringToBlockly","blocks","toolbox","workspace","buttonConfig","style","text"],"sourceRoot":"..\\..\\..\\src","sources":["parsers/stringToBlockly.ts"],"mappings":";;AAAA,SAASA,mBAAmB,EAAEC,oBAAoB,QAAQ,sBAAmB;AAC7E,SAASC,iBAAiB,QAAQ,oBAAiB;;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,eAAeA,CAC7BC,MAAc,EACdC,OAAe,EACfC,SAAiB,EACjBC,YAA6C,EACrC;EACR,OAAO;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wCAAwCA,YAAY,CAACC,KAAK,IAAIN,iBAAiB,CAACD,oBAAoB,CAAC,KAAKM,YAAY,CAACE,IAAI,IAAIT,mBAAmB;AAClJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQI,MAAM,IAAI,EAAE;AACpB;AACA;AACA,wBAAwBC,OAAO,IAAI,IAAI;AACvC;AACA;AACA,gCAAgCC,SAAS,IAAI,IAAI;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH","ignoreList":[]}

package/lib/module/types/blockly-types.d.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=blockly-types.d.js.map

package/lib/module/types/blockly-types.d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["types/blockly-types.d.ts"],"mappings":"","ignoreList":[]}

package/lib/module/types/blockly-view-types.d.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=blockly-view-types.d.js.map

package/lib/module/types/blockly-view-types.d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"..\\..\\..\\src","sources":["types/blockly-view-types.d.ts"],"mappings":"","ignoreList":[]}

package/lib/module/utils/blocklyConstants.js

@@ -0,0 +1,36 @@
+"use strict";
+
+/**
+ * Array of standard Blockly block types that are available by default.
+ * These blocks are built into the Blockly library and don't need to be
+ * defined in the custom blocks array.
+ */
+export const STANDARD_BLOCKLY_BLOCK_TYPES = [
+// Logic blocks
+'logic_compare', 'logic_operation', 'logic_negate', 'logic_boolean', 'logic_null', 'logic_ternary',
+// Control flow blocks
+'controls_if', 'controls_ifelse', 'controls_repeat_ext', 'controls_whileUntil', 'controls_for', 'controls_forEach', 'controls_flow_statements',
+// Math blocks
+'math_number', 'math_arithmetic', 'math_single', 'math_trig', 'math_constant', 'math_number_property', 'math_round', 'math_on_list', 'math_modulo', 'math_constrain', 'math_random_int', 'math_random_float', 'math_atan2',
+// Text blocks
+'text', 'text_multiline', 'text_join', 'text_append', 'text_length', 'text_isEmpty', 'text_indexOf', 'text_charAt', 'text_getSubstring', 'text_changeCase', 'text_trim', 'text_count', 'text_replace', 'text_reverse', 'text_print', 'text_prompt_ext',
+// List blocks
+'lists_create_with', 'lists_create_empty', 'lists_repeat', 'lists_length', 'lists_isEmpty', 'lists_indexOf', 'lists_getIndex', 'lists_setIndex', 'lists_getSublist', 'lists_split', 'lists_sort', 'lists_reverse',
+// Color blocks
+'colour_picker', 'colour_random', 'colour_rgb', 'colour_blend',
+// Variable blocks
+'variables_get', 'variables_set',
+// Function/Procedure blocks
+'procedures_defnoreturn', 'procedures_defreturn', 'procedures_callnoreturn', 'procedures_callreturn', 'procedures_ifreturn'];
+
+/**
+ * Set of standard Blockly block types for efficient lookup.
+ * Used for runtime validation.
+ */
+export const STANDARD_BLOCKLY_BLOCKS = new Set(STANDARD_BLOCKLY_BLOCK_TYPES);
+
+/**
+ * Type representing all standard Blockly block types.
+ * Derived from the constant array to ensure type and runtime values stay in sync.
+ */
+//# sourceMappingURL=blocklyConstants.js.map

package/lib/module/utils/blocklyConstants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["STANDARD_BLOCKLY_BLOCK_TYPES","STANDARD_BLOCKLY_BLOCKS","Set"],"sourceRoot":"..\\..\\..\\src","sources":["utils/blocklyConstants.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,4BAA4B,GAAG;AAC1C;AACA,eAAe,EACf,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,YAAY,EACZ,eAAe;AACf;AACA,aAAa,EACb,iBAAiB,EACjB,qBAAqB,EACrB,qBAAqB,EACrB,cAAc,EACd,kBAAkB,EAClB,0BAA0B;AAC1B;AACA,aAAa,EACb,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,eAAe,EACf,sBAAsB,EACtB,YAAY,EACZ,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,mBAAmB,EACnB,YAAY;AACZ;AACA,MAAM,EACN,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,aAAa,EACb,cAAc,EACd,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,iBAAiB,EACjB,WAAW,EACX,YAAY,EACZ,cAAc,EACd,cAAc,EACd,YAAY,EACZ,iBAAiB;AACjB;AACA,mBAAmB,EACnB,oBAAoB,EACpB,cAAc,EACd,cAAc,EACd,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,gBAAgB,EAChB,kBAAkB,EAClB,aAAa,EACb,YAAY,EACZ,eAAe;AACf;AACA,eAAe,EACf,eAAe,EACf,YAAY,EACZ,cAAc;AACd;AACA,eAAe,EACf,eAAe;AACf;AACA,wBAAwB,EACxB,sBAAsB,EACtB,yBAAyB,EACzB,uBAAuB,EACvB,qBAAqB,CACb;;AAEV;AACA;AACA;AACA;AACA,OAAO,MAAMC,uBAAuB,GAAG,IAAIC,GAAG,CAACF,4BAA4B,CAAC;;AAE5E;AACA;AACA;AACA","ignoreList":[]}

package/lib/module/utils/defaults.js

@@ -0,0 +1,20 @@
+"use strict";
+
+/**
+ * Default text for the run code button
+ */
+export const DEFAULT_BUTTON_TEXT = 'Run Code';
+
+/**
+ * Default CSS styles for the run code button
+ */
+export const DEFAULT_BUTTON_STYLE = {
+  marginTop: '15px',
+  padding: '10px 20px',
+  backgroundColor: '#007bff',
+  color: 'white',
+  border: 'none',
+  borderRadius: '5px',
+  cursor: 'pointer'
+};
+//# sourceMappingURL=defaults.js.map

package/lib/module/utils/defaults.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DEFAULT_BUTTON_TEXT","DEFAULT_BUTTON_STYLE","marginTop","padding","backgroundColor","color","border","borderRadius","cursor"],"sourceRoot":"..\\..\\..\\src","sources":["utils/defaults.ts"],"mappings":";;AAEA;AACA;AACA;AACA,OAAO,MAAMA,mBAAmB,GAAG,UAAU;;AAE7C;AACA;AACA;AACA,OAAO,MAAMC,oBAAmC,GAAG;EACjDC,SAAS,EAAE,MAAM;EACjBC,OAAO,EAAE,WAAW;EACpBC,eAAe,EAAE,SAAS;EAC1BC,KAAK,EAAE,OAAO;EACdC,MAAM,EAAE,MAAM;EACdC,YAAY,EAAE,KAAK;EACnBC,MAAM,EAAE;AACV,CAAC","ignoreList":[]}

package/lib/module/utils/showWarnings.js

@@ -0,0 +1,75 @@
+"use strict";
+
+import { STANDARD_BLOCKLY_BLOCKS } from "./blocklyConstants.js";
+
+/**
+ * Validates if blocks and toolbox have matching pairs and shows warnings for mismatches
+ *
+ * @param blocks - Array of block definitions
+ * @param toolbox - Toolbox configuration
+ */
+export function blockInToolbox(blocks, toolbox) {
+  const warnings = [];
+  const missingInToolbox = [];
+  const missingInBlocks = [];
+
+  // If no toolbox is provided, show warning and return
+  if (!toolbox) {
+    console.warn('No toolbox provided. Blocks will not be accessible in the workspace.');
+    return;
+  }
+
+  // Extract block types from blocks array
+  const blockTypes = new Set(blocks.map(block => block.type));
+
+  // Extract block types from toolbox contents
+  const toolboxTypes = new Set(toolbox.contents.filter(item => item.kind === 'block').map(item => item.type));
+
+  // Check for blocks that are defined but not in toolbox
+  blockTypes.forEach(blockType => {
+    if (!toolboxTypes.has(blockType)) {
+      missingInToolbox.push(blockType);
+      warnings.push(`Block '${blockType}' is defined but not available in the toolbox. Users won't be able to access this block.`);
+    }
+  });
+
+  // Check for toolbox items that reference undefined blocks
+  // Exclude standard Blockly blocks from this check
+  toolboxTypes.forEach(toolboxType => {
+    if (!blockTypes.has(toolboxType) && !STANDARD_BLOCKLY_BLOCKS.has(toolboxType)) {
+      missingInBlocks.push(toolboxType);
+      warnings.push(`Toolbox references block '${toolboxType}' but this block is not defined. This will cause runtime errors.`);
+    }
+  });
+
+  // Show warnings if any issues found
+  if (warnings.length > 0) {
+    console.warn('Block/Toolbox validation issues found:');
+    warnings.forEach(warning => console.warn(warning));
+  }
+}
+
+/**
+ * Validates if blocks with custom code have a return statement and shows warnings for missing returns
+ *
+ * @param blocks - Array of block definitions
+ */
+export function noReturnStatement(blocks) {
+  const warnings = [];
+
+  // Check each block that has custom code
+  blocks.forEach(block => {
+    if (block.code && typeof block.code === 'string') {
+      // Check if the code contains a return statement
+      const hasReturnStatement = /\breturn\b/.test(block.code);
+      if (!hasReturnStatement) {
+        warnings.push(`Block '${block.type}' has custom code but no return statement. This may cause unexpected behavior in code generation.`);
+      }
+    }
+  });
+  if (warnings.length > 0) {
+    console.warn('Block code validation issues found:');
+    warnings.forEach(warning => console.warn(warning));
+  }
+}
+//# sourceMappingURL=showWarnings.js.map

package/lib/module/utils/showWarnings.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["STANDARD_BLOCKLY_BLOCKS","blockInToolbox","blocks","toolbox","warnings","missingInToolbox","missingInBlocks","console","warn","blockTypes","Set","map","block","type","toolboxTypes","contents","filter","item","kind","forEach","blockType","has","push","toolboxType","length","warning","noReturnStatement","code","hasReturnStatement","test"],"sourceRoot":"..\\..\\..\\src","sources":["utils/showWarnings.ts"],"mappings":";;AACA,SACEA,uBAAuB,QAElB,uBAAoB;;AAE3B;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,cAAcA,CAACC,MAAe,EAAEC,OAAuB,EAAQ;EAC7E,MAAMC,QAAkB,GAAG,EAAE;EAC7B,MAAMC,gBAA0B,GAAG,EAAE;EACrC,MAAMC,eAAyB,GAAG,EAAE;;EAEpC;EACA,IAAI,CAACH,OAAO,EAAE;IACZI,OAAO,CAACC,IAAI,CACV,sEACF,CAAC;IACD;EACF;;EAEA;EACA,MAAMC,UAAU,GAAG,IAAIC,GAAG,CAACR,MAAM,CAACS,GAAG,CAAEC,KAAK,IAAKA,KAAK,CAACC,IAAI,CAAC,CAAC;;EAE7D;EACA,MAAMC,YAAY,GAAG,IAAIJ,GAAG,CAC1BP,OAAO,CAACY,QAAQ,CACbC,MAAM,CAAEC,IAAI,IAAKA,IAAI,CAACC,IAAI,KAAK,OAAO,CAAC,CACvCP,GAAG,CAAEM,IAAI,IAAKA,IAAI,CAACJ,IAAI,CAC5B,CAAC;;EAED;EACAJ,UAAU,CAACU,OAAO,CAAEC,SAAS,IAAK;IAChC,IAAI,CAACN,YAAY,CAACO,GAAG,CAACD,SAAS,CAAC,EAAE;MAChCf,gBAAgB,CAACiB,IAAI,CAACF,SAAS,CAAC;MAChChB,QAAQ,CAACkB,IAAI,CACX,UAAUF,SAAS,0FACrB,CAAC;IACH;EACF,CAAC,CAAC;;EAEF;EACA;EACAN,YAAY,CAACK,OAAO,CAAEI,WAAW,IAAK;IACpC,IACE,CAACd,UAAU,CAACY,GAAG,CAACE,WAAW,CAAC,IAC5B,CAACvB,uBAAuB,CAACqB,GAAG,CAACE,WAAgC,CAAC,EAC9D;MACAjB,eAAe,CAACgB,IAAI,CAACC,WAAW,CAAC;MACjCnB,QAAQ,CAACkB,IAAI,CACX,6BAA6BC,WAAW,kEAC1C,CAAC;IACH;EACF,CAAC,CAAC;;EAEF;EACA,IAAInB,QAAQ,CAACoB,MAAM,GAAG,CAAC,EAAE;IACvBjB,OAAO,CAACC,IAAI,CAAC,wCAAwC,CAAC;IACtDJ,QAAQ,CAACe,OAAO,CAAEM,OAAO,IAAKlB,OAAO,CAACC,IAAI,CAACiB,OAAO,CAAC,CAAC;EACtD;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,iBAAiBA,CAACxB,MAAe,EAAQ;EACvD,MAAME,QAAkB,GAAG,EAAE;;EAE7B;EACAF,MAAM,CAACiB,OAAO,CAAEP,KAAK,IAAK;IACxB,IAAIA,KAAK,CAACe,IAAI,IAAI,OAAOf,KAAK,CAACe,IAAI,KAAK,QAAQ,EAAE;MAChD;MACA,MAAMC,kBAAkB,GAAG,YAAY,CAACC,IAAI,CAACjB,KAAK,CAACe,IAAI,CAAC;MAExD,IAAI,CAACC,kBAAkB,EAAE;QACvBxB,QAAQ,CAACkB,IAAI,CACX,UAAUV,KAAK,CAACC,IAAI,mGACtB,CAAC;MACH;IACF;EACF,CAAC,CAAC;EAEF,IAAIT,QAAQ,CAACoB,MAAM,GAAG,CAAC,EAAE;IACvBjB,OAAO,CAACC,IAAI,CAAC,qCAAqC,CAAC;IACnDJ,QAAQ,CAACe,OAAO,CAAEM,OAAO,IAAKlB,OAAO,CAACC,IAAI,CAACiB,OAAO,CAAC,CAAC;EACtD;AACF","ignoreList":[]}

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/src/classes/blockly.d.ts

@@ -0,0 +1,16 @@
+import type { Block } from '../types/blockly-types';
+/**
+ * Blockly class to manage blockly configuration.
+ */
+export declare class Blockly {
+    blocks: Block[];
+    createBlocks(blocks: Block[]): void;
+    /**
+     * Creates a blockly block and add it to the blocks array.
+     *
+     * @param block - Block object to be added to the blocks array
+     */
+    createBlock(block: Block): void;
+    getBlocks(): Block[];
+}
+//# sourceMappingURL=blockly.d.ts.map

package/lib/typescript/src/classes/blockly.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blockly.d.ts","sourceRoot":"","sources":["../../../../src/classes/blockly.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAEpD;;GAEG;AACH,qBAAa,OAAO;IAClB,MAAM,EAAE,KAAK,EAAE,CAAM;IAErB,YAAY,CAAC,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI;IAInC;;;;OAIG;IACH,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAI/B,SAAS,IAAI,KAAK,EAAE;CAGrB"}

package/lib/typescript/src/classes/blocklyViewConfig.d.ts

@@ -0,0 +1,14 @@
+import type { Toolbox, Workspace } from '../types/blockly-types';
+import type { ButtonConfig } from '../types/blockly-view-types';
+export declare class BlocklyViewConfig {
+    toolbox: Toolbox;
+    workspace: Workspace;
+    buttonConfig: ButtonConfig;
+    setToolbox(toolbox: Toolbox): void;
+    getToolbox(): Toolbox;
+    setWorkspace(workspace: Workspace): void;
+    getWorkspace(): Workspace;
+    setButtonConfig(buttonConfig: ButtonConfig): void;
+    getButtonConfig(): ButtonConfig;
+}
+//# sourceMappingURL=blocklyViewConfig.d.ts.map

package/lib/typescript/src/classes/blocklyViewConfig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blocklyViewConfig.d.ts","sourceRoot":"","sources":["../../../../src/classes/blocklyViewConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAGhE,qBAAa,iBAAiB;IAC5B,OAAO,EAAE,OAAO,CAA8B;IAC9C,SAAS,EAAE,SAAS,CAA0C;IAC9D,YAAY,EAAE,YAAY,CAGxB;IAEF,UAAU,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAIlC,UAAU,IAAI,OAAO;IAIrB,YAAY,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI;IAIxC,YAAY,IAAI,SAAS;IAIzB,eAAe,CAAC,YAAY,EAAE,YAAY,GAAG,IAAI;IAIjD,eAAe,IAAI,YAAY;CAGhC"}