react-native-blockly 0.1.0

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

@@ -0,0 +1,89 @@
+import type { Blockly } from '../classes/blockly';
+import type { BlocklyViewConfig } from '../classes/blocklyViewConfig';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { CSSProperties } from 'react';
+
+/**
+ * Configuration options for the run code button
+ */
+export interface ButtonConfig {
+  /**
+   * Text to display on the button
+   * @default 'Run Code'
+   */
+  text?: string;
+
+  /**
+   * CSS styles for the button as an object
+   * @example { backgroundColor: 'red', color: 'white', padding: '10px' }
+   */
+  style?: CSSProperties;
+}
+
+/**
+ * Props for the BlocklyView component
+ */
+export type BlocklyViewProps = {
+  /**
+   * Instance of the Blockly class that manages block definitions and logic.
+   * Contains all the custom blocks that will be available in the workspace.
+   *
+   * @example
+   * ```typescript
+   * const blockly = new Blockly('MyBlockly');
+   * blockly.createBlock({
+   *   type: 'custom_block',
+   *   message0: 'Custom Block',
+   *   colour: 230
+   * });
+   * ```
+   */
+  Blockly: Blockly;
+
+  /**
+   * Instance of the BlocklyViewConfig class that manages UI configuration.
+   * Handles toolbox layout, workspace settings, and visual appearance.
+   *
+   * @example
+   * ```typescript
+   * const config = new BlocklyViewConfig('MyConfig');
+   * config.setToolbox({
+   *   kind: 'flyoutToolbox',
+   *   contents: [{ kind: 'block', type: 'custom_block' }]
+   * });
+   * config.setWorkspace({ scrollbars: true, trashcan: true });
+   * ```
+   */
+  Config: BlocklyViewConfig;
+
+  /**
+   * Optional callback function that receives messages from the Blockly WebView.
+   * Called whenever the WebView sends data using `window.ReactNativeWebView.postMessage()`.
+   *
+   * @param data - The message data sent from the WebView as a string
+   *
+   * @example
+   * ```typescript
+   * const handleMessage = (data: string) => {
+   *  console.log('Message from Blockly:', data);
+   * };
+   * ```
+   */
+  onMessage?: (data: string) => void;
+
+  /**
+   * Optional style prop for the WebView container.
+   * Allows customization of the BlocklyView's dimensions and layout.
+   * Defaults to `{ flex: 1 }` if not provided.
+   *
+   * @example
+   * ```typescript
+   * <BlocklyView
+   *   Blockly={blockly}
+   *   Config={config}
+   *   style={{ flex: 1, backgroundColor: '#f0f0f0' }}
+   * />
+   * ```
+   */
+  style?: StyleProp<ViewStyle>;
+};

package/src/utils/blocklyConstants.ts

@@ -0,0 +1,92 @@
+/**
+ * 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',
+] as const;
+
+/**
+ * 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.
+ */
+export type StandardBlockType = (typeof STANDARD_BLOCKLY_BLOCK_TYPES)[number];

package/src/utils/defaults.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from 'react';
+
+/**
+ * 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: CSSProperties = {
+  marginTop: '15px',
+  padding: '10px 20px',
+  backgroundColor: '#007bff',
+  color: 'white',
+  border: 'none',
+  borderRadius: '5px',
+  cursor: 'pointer',
+};

package/src/utils/showWarnings.ts

@@ -0,0 +1,93 @@
+import type { Block, Toolbox } from '../types/blockly-types';
+import {
+  STANDARD_BLOCKLY_BLOCKS,
+  type StandardBlockType,
+} from './blocklyConstants';
+
+/**
+ * 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: Block[], toolbox: Toolbox | null): void {
+  const warnings: string[] = [];
+  const missingInToolbox: string[] = [];
+  const missingInBlocks: string[] = [];
+
+  // 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 as StandardBlockType)
+    ) {
+      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: Block[]): void {
+  const warnings: string[] = [];
+
+  // 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));
+  }
+}