react-native-blockly 0.1.0

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,16 @@
+import type { BlocklyViewProps, ButtonConfig } from './types/blockly-view-types';
+import { Blockly } from './classes/blockly';
+import { BlocklyViewConfig } from './classes/blocklyViewConfig';
+export { Blockly, BlocklyViewConfig };
+export type { ButtonConfig };
+/**
+ * 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, }: BlocklyViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,gBAAgB,EAChB,YAAY,EACb,MAAM,4BAA4B,CAAC;AAQpC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAIhE,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,CAAC;AACtC,YAAY,EAAE,YAAY,EAAE,CAAC;AAE7B;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAO,EACP,MAAM,EACN,SAAS,EACT,KAAK,GACN,EAAE,gBAAgB,2CA8BlB"}

package/lib/typescript/src/parsers/parseToString.d.ts

@@ -0,0 +1,47 @@
+import type { Block, Toolbox, Workspace } from '../types/blockly-types';
+import type { ButtonConfig } from '../types/blockly-view-types';
+import type { CSSProperties } from 'react';
+/**
+ * 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 declare function parseBlocksToString(blocks: Block[]): string;
+/**
+ * Parses the toolbox object to a string representation.
+ *
+ * @param toolbox - toolbox object
+ * @returns a string representation of the toolbox in JSON format
+ */
+export declare function parseToolboxToString(toolbox: Toolbox): string;
+/**
+ * Parses the workspace object to a string representation.
+ *
+ * @param workspace - workspace object
+ * @returns a string representation of the workspace in JSON format
+ */
+export declare function parseWorkspaceToString(workspace: Workspace): string;
+/**
+ * Converts a CSSProperties object to an inline style string
+ *
+ * @param styles CSS properties object
+ * @returns inline style string
+ */
+export declare function cssObjectToString(styles: CSSProperties): string;
+/**
+ * Parses the button configuration to string representation.
+ *
+ * @param buttonConfig - button configuration object
+ * @returns an object with text and style as strings
+ */
+export declare function parseButtonConfigToString(buttonConfig: ButtonConfig): {
+    text: string;
+    style: string;
+};
+//# sourceMappingURL=parseToString.d.ts.map

package/lib/typescript/src/parsers/parseToString.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseToString.d.ts","sourceRoot":"","sources":["../../../../src/parsers/parseToString.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM,CAsB3D;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,CAE7D;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,SAAS,GAAG,MAAM,CAEnE;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,aAAa,GAAG,MAAM,CAQ/D;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CAAC,YAAY,EAAE,YAAY,GAAG;IACrE,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAOA"}

package/lib/typescript/src/parsers/stringToBlockly.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 declare function stringToBlockly(blocks: string, toolbox: string, workspace: string, buttonConfig: {
+    text: string;
+    style: string;
+}): string;
+//# sourceMappingURL=stringToBlockly.d.ts.map

package/lib/typescript/src/parsers/stringToBlockly.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stringToBlockly.d.ts","sourceRoot":"","sources":["../../../../src/parsers/stringToBlockly.ts"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAC5C,MAAM,CAuER"}

package/lib/typescript/src/utils/blocklyConstants.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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 declare const STANDARD_BLOCKLY_BLOCK_TYPES: readonly ["logic_compare", "logic_operation", "logic_negate", "logic_boolean", "logic_null", "logic_ternary", "controls_if", "controls_ifelse", "controls_repeat_ext", "controls_whileUntil", "controls_for", "controls_forEach", "controls_flow_statements", "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", "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", "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", "colour_picker", "colour_random", "colour_rgb", "colour_blend", "variables_get", "variables_set", "procedures_defnoreturn", "procedures_defreturn", "procedures_callnoreturn", "procedures_callreturn", "procedures_ifreturn"];
+/**
+ * Set of standard Blockly block types for efficient lookup.
+ * Used for runtime validation.
+ */
+export declare const STANDARD_BLOCKLY_BLOCKS: Set<"logic_compare" | "logic_operation" | "logic_negate" | "logic_boolean" | "logic_null" | "logic_ternary" | "controls_if" | "controls_ifelse" | "controls_repeat_ext" | "controls_whileUntil" | "controls_for" | "controls_forEach" | "controls_flow_statements" | "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" | "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" | "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" | "colour_picker" | "colour_random" | "colour_rgb" | "colour_blend" | "variables_get" | "variables_set" | "procedures_defnoreturn" | "procedures_defreturn" | "procedures_callnoreturn" | "procedures_callreturn" | "procedures_ifreturn">;
+/**
+ * Type representing all standard Blockly block types.
+ * Derived from the constant array to ensure type and runtime values stay in sync.
+ */
+export type StandardBlockType = (typeof STANDARD_BLOCKLY_BLOCK_TYPES)[number];
+//# sourceMappingURL=blocklyConstants.d.ts.map

package/lib/typescript/src/utils/blocklyConstants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blocklyConstants.d.ts","sourceRoot":"","sources":["../../../../src/utils/blocklyConstants.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,4BAA4B,qoCA0E/B,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,uBAAuB,+rCAAwC,CAAC;AAE7E;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,4BAA4B,CAAC,CAAC,MAAM,CAAC,CAAC"}

package/lib/typescript/src/utils/defaults.d.ts

@@ -0,0 +1,10 @@
+import type { CSSProperties } from 'react';
+/**
+ * Default text for the run code button
+ */
+export declare const DEFAULT_BUTTON_TEXT = "Run Code";
+/**
+ * Default CSS styles for the run code button
+ */
+export declare const DEFAULT_BUTTON_STYLE: CSSProperties;
+//# sourceMappingURL=defaults.d.ts.map

package/lib/typescript/src/utils/defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../../src/utils/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;GAEG;AACH,eAAO,MAAM,mBAAmB,aAAa,CAAC;AAE9C;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,aAQlC,CAAC"}

package/lib/typescript/src/utils/showWarnings.d.ts

@@ -0,0 +1,15 @@
+import type { Block, Toolbox } from '../types/blockly-types';
+/**
+ * Validates if blocks and toolbox have matching pairs and shows warnings for mismatches
+ *
+ * @param blocks - Array of block definitions
+ * @param toolbox - Toolbox configuration
+ */
+export declare function blockInToolbox(blocks: Block[], toolbox: Toolbox | null): void;
+/**
+ * Validates if blocks with custom code have a return statement and shows warnings for missing returns
+ *
+ * @param blocks - Array of block definitions
+ */
+export declare function noReturnStatement(blocks: Block[]): void;
+//# sourceMappingURL=showWarnings.d.ts.map

package/lib/typescript/src/utils/showWarnings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"showWarnings.d.ts","sourceRoot":"","sources":["../../../../src/utils/showWarnings.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAM7D;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,CAoD7E;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAqBvD"}

package/package.json

@@ -0,0 +1,155 @@
+{
+  "name": "react-native-blockly",
+  "version": "0.1.0",
+  "description": "Blockly implementation on react native using webview.",
+  "source": "./src/index.tsx",
+  "main": "./lib/module/index.js",
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-blockly-example",
+    "test": "jest",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "release": "release-it"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alanSilvaaa//react-native-blockly.git"
+  },
+  "author": "AlanSilvaaa <alanbsr4@gmail.com> (https://github.com/alanSilvaaa/)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/alanSilvaaa//react-native-blockly/issues"
+  },
+  "homepage": "https://github.com/alanSilvaaa//react-native-blockly#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.6.0",
+    "@eslint/compat": "^1.2.7",
+    "@eslint/eslintrc": "^3.3.0",
+    "@eslint/js": "^9.22.0",
+    "@evilmartians/lefthook": "^1.5.0",
+    "@react-native/eslint-config": "^0.78.0",
+    "@release-it/conventional-changelog": "^9.0.2",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^19.0.12",
+    "commitlint": "^19.6.1",
+    "del-cli": "^5.1.0",
+    "eslint": "^9.22.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-prettier": "^5.2.3",
+    "jest": "^29.7.0",
+    "prettier": "^3.0.3",
+    "react": "19.0.0",
+    "react-native": "0.79.5",
+    "react-native-builder-bob": "^0.38.3",
+    "release-it": "^17.10.0",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@3.6.1",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "create-react-native-library": {
+    "languages": "js",
+    "type": "library",
+    "version": "0.49.2"
+  },
+  "dependencies": {
+    "react-native-webview": "^13.15.0"
+  }
+}

package/src/classes/blockly.ts

@@ -0,0 +1,25 @@
+import type { Block } from '../types/blockly-types';
+
+/**
+ * Blockly class to manage blockly configuration.
+ */
+export class Blockly {
+  blocks: Block[] = [];
+
+  createBlocks(blocks: Block[]): void {
+    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: Block): void {
+    this.blocks.push(block);
+  }
+
+  getBlocks(): Block[] {
+    return this.blocks;
+  }
+}

package/src/classes/blocklyViewConfig.ts

@@ -0,0 +1,36 @@
+import type { Toolbox, Workspace } from '../types/blockly-types';
+import type { ButtonConfig } from '../types/blockly-view-types';
+import { DEFAULT_BUTTON_TEXT, DEFAULT_BUTTON_STYLE } from '../utils/defaults';
+
+export class BlocklyViewConfig {
+  toolbox: Toolbox = { kind: '', contents: [] };
+  workspace: Workspace = { scrollbars: false, trashcan: false };
+  buttonConfig: ButtonConfig = {
+    text: DEFAULT_BUTTON_TEXT,
+    style: DEFAULT_BUTTON_STYLE,
+  };
+
+  setToolbox(toolbox: Toolbox): void {
+    this.toolbox = toolbox;
+  }
+
+  getToolbox(): Toolbox {
+    return this.toolbox;
+  }
+
+  setWorkspace(workspace: Workspace): void {
+    this.workspace = workspace;
+  }
+
+  getWorkspace(): Workspace {
+    return this.workspace;
+  }
+
+  setButtonConfig(buttonConfig: ButtonConfig): void {
+    this.buttonConfig = { ...this.buttonConfig, ...buttonConfig };
+  }
+
+  getButtonConfig(): ButtonConfig {
+    return this.buttonConfig;
+  }
+}

package/src/index.tsx

@@ -0,0 +1,65 @@
+import WebView from 'react-native-webview';
+import type {
+  BlocklyViewProps,
+  ButtonConfig,
+} from './types/blockly-view-types';
+import {
+  parseBlocksToString,
+  parseToolboxToString,
+  parseWorkspaceToString,
+  parseButtonConfigToString,
+} from './parsers/parseToString';
+import { stringToBlockly } from './parsers/stringToBlockly';
+import { Blockly } from './classes/blockly';
+import { BlocklyViewConfig } from './classes/blocklyViewConfig';
+import { blockInToolbox, noReturnStatement } from './utils/showWarnings';
+
+// Export both classes so they can be imported by users
+export { Blockly, BlocklyViewConfig };
+export type { ButtonConfig };
+
+/**
+ * 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,
+}: BlocklyViewProps) {
+  /**
+   * 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 (
+    <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
+        }
+      }}
+    />
+  );
+}

package/src/parsers/parseToString.ts

@@ -0,0 +1,92 @@
+import type { Block, Toolbox, Workspace } from '../types/blockly-types';
+import type { ButtonConfig } from '../types/blockly-view-types';
+import type { CSSProperties } from 'react';
+
+/**
+ * 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: Block[]): string {
+  let htmlString = '';
+  blocks.forEach((block: 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: Toolbox): string {
+  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: Workspace): string {
+  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: CSSProperties): string {
+  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: ButtonConfig): {
+  text: string;
+  style: string;
+} {
+  const text = buttonConfig?.text ?? '';
+  const style = buttonConfig?.style
+    ? cssObjectToString(buttonConfig.style)
+    : '';
+
+  return { text, style };
+}

package/src/parsers/stringToBlockly.ts

@@ -0,0 +1,89 @@
+import { DEFAULT_BUTTON_TEXT, DEFAULT_BUTTON_STYLE } from '../utils/defaults';
+import { cssObjectToString } from './parseToString';
+
+/**
+ * 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: string,
+  toolbox: string,
+  workspace: string,
+  buttonConfig: { text: string; style: string }
+): string {
+  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>
+  `;
+}

package/src/types/blockly-types.d.ts

@@ -0,0 +1,28 @@
+import type { StandardBlockType } from '../utils/blocklyConstants';
+
+export type { StandardBlockType };
+
+export type Block = {
+  type: string | StandardBlockType;
+  message0?: string;
+  colour?: number;
+  tooltip?: string;
+  previousStatement?: null;
+  nextStatement?: null;
+  helpUrl?: string;
+  output?: boolean | null;
+  code?: string;
+};
+
+export type Toolbox = {
+  kind: string;
+  contents: Array<{
+    kind: string;
+    type: string | StandardBlockType;
+  }>;
+};
+
+export type Workspace = {
+  scrollbars: boolean;
+  trashcan: boolean;
+};