react-blockly-component - npm Package Compare versions

Comparing version 3.0.3 to 3.1.0

dist-modules/BlocklyHelper.js

+/**
+ * @param {string} xml
+ */
+export default function parseWorkspaceXml(xml) {
+  const arrayTags = ['name', 'custom', 'colour', 'categories', 'blocks'];
+  let xmlDoc = null;
+  if (window.DOMParser) {
+    xmlDoc = new DOMParser().parseFromString(xml, 'text/xml');
+  } else if (window.ActiveXObject) {
+    xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
+    xmlDoc.async = false;
+    if (!xmlDoc.loadXML(xml)) {
+      throw new Error(`${xmlDoc.parseError.reason} ${xmlDoc.parseError.srcText}`);
+    }
+  } else {
+    throw new Error('cannot parse xml string!');
+  }
+
+  function isArray(o) {
+    return Object.prototype.toString.apply(o) === '[object Array]';
+  }
+
+  /**
+   * @param {string} xmlNode
+   * @param {Array.<string>} result
+   */
+  function parseNode(xmlNode, result) {
+    if (xmlNode.nodeName === '#text') {
+      const v = xmlNode.nodeValue;
+      if (v.trim()) {
+        result['value'] = v;
+      }
+      return;
+    }
+
+    const jsonNode = {};
+    const existing = result[xmlNode.nodeName];
+    if (existing) {
+      if (!isArray(existing)) {
+        result[xmlNode.nodeName] = [existing, jsonNode];
+      } else {
+        result[xmlNode.nodeName].push(jsonNode);
+      }
+    } else if (arrayTags && arrayTags.indexOf(xmlNode.nodeName) !== -1) {
+      result[xmlNode.nodeName] = [jsonNode];
+    } else {
+      result[xmlNode.nodeName] = jsonNode;
+    }
+
+    if (xmlNode.attributes) {
+      for (let i = 0; i < xmlNode.attributes.length; i++) {
+        const attribute = xmlNode.attributes[i];
+        jsonNode[attribute.nodeName] = attribute.nodeValue;
+      }
+    }
+
+    for (let i = 0; i < xmlNode.childNodes.length; i++) {
+      parseNode(xmlNode.childNodes[i], jsonNode);
+    }
+  }
+
+  const result = {};
+  if (xmlDoc.childNodes.length) {
+    parseNode(xmlDoc.childNodes[0], result);
+  }
+
+  return transformed(result);
+}
+
+function transformed(result) {
+  const filteredResult = [];
+  const xml = result["xml"];
+  const categories = xml["category"];
+  for (let i = 0; i < categories.length; i++) {
+    const c = categories[i];
+    const cNew = {};
+    cNew.name = c.name;
+    cNew.colour = c.colour;
+    cNew.custom = c.custom;
+    cNew.blocks = [];
+    const blocks = c.block;
+    if (blocks) {
+      for (let j = 0; j < blocks.length; j++) {
+        const b = blocks[j];
+        const bNew = {};
+        bNew.type = b.type;
+        bNew.fields = {};
+        const fields = b.field;
+        if (fields) {
+          for (let k = 0; k < fields.length; k++) {
+            const f = fields[k];
+            bNew.fields[k] = f;
+          }
+        }
+        cNew.blocks[j] = bNew;
+      }
+    }
+    filteredResult.push(cNew);
+  }
+  return filteredResult;
+}

dist-modules/initContent/content.js

+const INITIAL_XML = '<xml xmlns="http://www.w3.org/1999/xhtml"><block type="text" x="70" y="30"><field name="TEXT"></field></block></xml>';
+
+const INITIAL_TOOLBOX_XML = '<xml xmlns="http://www.w3.org/1999/xhtml" id="toolbox" style="display: none;">\n' + '  <category name="Logic" colour="#5C81A6">\n' + '    <block type="controls_if"></block>\n' + '    <block type="logic_compare">\n' + '      <field name="OP">EQ</field>\n' + '    </block>\n' + '    <block type="logic_operation">\n' + '      <field name="OP">AND</field>\n' + '    </block>\n' + '    <block type="logic_negate"></block>\n' + '    <block type="logic_boolean">\n' + '      <field name="BOOL">TRUE</field>\n' + '    </block>\n' + '    <block type="logic_null"></block>\n' + '    <block type="logic_ternary"></block>\n' + '  </category>\n' + '  <category name="Loops" colour="#5CA65C">\n' + '    <block type="controls_repeat_ext">\n' + '      <value name="TIMES">\n' + '        <shadow type="math_number">\n' + '          <field name="NUM">10</field>\n' + '        </shadow>\n' + '      </value>\n' + '    </block>\n' + '    <block type="controls_whileUntil">\n' + '      <field name="MODE">WHILE</field>\n' + '    </block>\n' + '    <block type="controls_for">\n' + '      <field name="VAR" id="C(8;cYCF}~vSgkxzJ+{O" variabletype="">i</field>\n' + '      <value name="FROM">\n' + '        <shadow type="math_number">\n' + '          <field name="NUM">1</field>\n' + '        </shadow>\n' + '      </value>\n' + '      <value name="TO">\n' + '        <shadow type="math_number">\n' + '          <field name="NUM">10</field>\n' + '        </shadow>\n' + '      </value>\n' + '      <value name="BY">\n' + '        <shadow type="math_number">\n' + '          <field name="NUM">1</field>\n' + '        </shadow>\n' + '      </value>\n' + '    </block>\n' + '    <block type="controls_forEach">\n' + '      <field name="VAR" id="Cg!CSk/ZJo2XQN3=VVrz" variabletype="">j</field>\n' + '    </block>\n' + '    <block type="controls_flow_statements">\n' + '      <field name="FLOW">BREAK</field>\n' + '    </block>\n' + '  </category>\n' + '  <category name="Math" colour="#5C68A6">\n' + '    <block type="math_round">\n' + '      <field name="OP">ROUND</field>\n' + '      <value name="NUM">\n' + '        <shadow type="math_number">\n' + '          <field name="NUM">3.1</field>\n' + '        </shadow>\n' + '      </value>\n' + '    </block>\n' + '    <block type="math_number">\n' + '      <field name="NUM">0</field>\n' + '    </block>\n' + '    <block type="math_single">\n' + '      <field name="OP">ROOT</field>\n' + '      <value name="NUM">\n' + '        <shadow type="math_number">\n' + '          <field name="NUM">9</field>\n' + '        </shadow>\n' + '      </value>\n' + '    </block>\n' + '    <block type="math_trig">\n' + '      <field name="OP">SIN</field>\n' + '      <value name="NUM">\n' + '        <shadow type="math_number">\n' + '          <field name="NUM">45</field>\n' + '        </shadow>\n' + '      </value>\n' + '    </block>\n' + '    <block type="math_constant">\n' + '      <field name="CONSTANT">PI</field>\n' + '    </block>\n' + '    <block type="math_number_property">\n' + '      <mutation divisor_input="false"></mutation>\n' + '      <field name="PROPERTY">EVEN</field>\n' + '      <value name="NUMBER_TO_CHECK">\n' + '        <shadow type="math_number">\n' + '          <field name="NUM">0</field>\n' + '        </shadow>\n' + '      </value>\n' + '    </block>\n' + '    <block type="math_arithmetic">\n' + '      <field name="OP">ADD</field>\n' + '      <value name="A">\n' + '        <shadow type="math_number">\n' + '          <field name="NUM">1</field>\n' + '        </shadow>\n' + '      </value>\n' + '      <value name="B">\n' + '        <shadow type="math_number">\n' + '          <field name="NUM">1</field>\n' + '        </shadow>\n' + '      </value>\n' + '    </block>\n' + '    <block type="math_on_list">\n' + '      <mutation op="SUM"></mutation>\n' + '      <field name="OP">SUM</field>\n' + '    </block>\n' + '    <block type="math_modulo">\n' + '      <value name="DIVIDEND">\n' + '        <shadow type="math_number">\n' + '          <field name="NUM">64</field>\n' + '        </shadow>\n' + '      </value>\n' + '      <value name="DIVISOR">\n' + '        <shadow type="math_number">\n' + '          <field name="NUM">10</field>\n' + '        </shadow>\n' + '      </value>\n' + '    </block>\n' + '    <block type="math_constrain">\n' + '      <value name="VALUE">\n' + '        <shadow type="math_number">\n' + '          <field name="NUM">50</field>\n' + '        </shadow>\n' + '      </value>\n' + '      <value name="LOW">\n' + '        <shadow type="math_number">\n' + '          <field name="NUM">1</field>\n' + '        </shadow>\n' + '      </value>\n' + '      <value name="HIGH">\n' + '        <shadow type="math_number">\n' + '          <field name="NUM">100</field>\n' + '        </shadow>\n' + '      </value>\n' + '    </block>\n' + '    <block type="math_random_int">\n' + '      <value name="FROM">\n' + '        <shadow type="math_number">\n' + '          <field name="NUM">1</field>\n' + '        </shadow>\n' + '      </value>\n' + '      <value name="TO">\n' + '        <shadow type="math_number">\n' + '          <field name="NUM">100</field>\n' + '        </shadow>\n' + '      </value>\n' + '    </block>\n' + '    <block type="math_random_float"></block>\n' + '  </category>\n' + '  <category name="Text" colour="#5CA68D">\n' + '    <block type="text_charAt">\n' + '      <mutation at="true"></mutation>\n' + '      <field name="WHERE">FROM_START</field>\n' + '      <value name="VALUE">\n' + '        <block type="variables_get">\n' + '          <field name="VAR" id="q@$ZF(L?Zo/z`d{o.Bp!" variabletype="">text</field>\n' + '        </block>\n' + '      </value>\n' + '    </block>\n' + '    <block type="text">\n' + '      <field name="TEXT"></field>\n' + '    </block>\n' + '    <block type="text_append">\n' + '      <field name="VAR" id=":};P,s[*|I8+L^-.EbRi" variabletype="">item</field>\n' + '      <value name="TEXT">\n' + '        <shadow type="text">\n' + '          <field name="TEXT"></field>\n' + '        </shadow>\n' + '      </value>\n' + '    </block>\n' + '    <block type="text_length">\n' + '      <value name="VALUE">\n' + '        <shadow type="text">\n' + '          <field name="TEXT">abc</field>\n' + '        </shadow>\n' + '      </value>\n' + '    </block>\n' + '    <block type="text_isEmpty">\n' + '      <value name="VALUE">\n' + '        <shadow type="text">\n' + '          <field name="TEXT"></field>\n' + '        </shadow>\n' + '      </value>\n' + '    </block>\n' + '    <block type="text_indexOf">\n' + '      <field name="END">FIRST</field>\n' + '      <value name="VALUE">\n' + '        <block type="variables_get">\n' + '          <field name="VAR" id="q@$ZF(L?Zo/z`d{o.Bp!" variabletype="">text</field>\n' + '        </block>\n' + '      </value>\n' + '      <value name="FIND">\n' + '        <shadow type="text">\n' + '          <field name="TEXT">abc</field>\n' + '        </shadow>\n' + '      </value>\n' + '    </block>\n' + '    <block type="text_join">\n' + '      <mutation items="2"></mutation>\n' + '    </block>\n' + '    <block type="text_getSubstring">\n' + '      <mutation at1="true" at2="true"></mutation>\n' + '      <field name="WHERE1">FROM_START</field>\n' + '      <field name="WHERE2">FROM_START</field>\n' + '      <value name="STRING">\n' + '        <block type="variables_get">\n' + '          <field name="VAR" id="q@$ZF(L?Zo/z`d{o.Bp!" variabletype="">text</field>\n' + '        </block>\n' + '      </value>\n' + '    </block>\n' + '    <block type="text_changeCase">\n' + '      <field name="CASE">UPPERCASE</field>\n' + '      <value name="TEXT">\n' + '        <shadow type="text">\n' + '          <field name="TEXT">abc</field>\n' + '        </shadow>\n' + '      </value>\n' + '    </block>\n' + '    <block type="text_trim">\n' + '      <field name="MODE">BOTH</field>\n' + '      <value name="TEXT">\n' + '        <shadow type="text">\n' + '          <field name="TEXT">abc</field>\n' + '        </shadow>\n' + '      </value>\n' + '    </block>\n' + '    <block type="text_print">\n' + '      <value name="TEXT">\n' + '        <shadow type="text">\n' + '          <field name="TEXT">abc</field>\n' + '        </shadow>\n' + '      </value>\n' + '    </block>\n' + '    <block type="text_prompt_ext">\n' + '      <mutation type="TEXT"></mutation>\n' + '      <field name="TYPE">TEXT</field>\n' + '      <value name="TEXT">\n' + '        <shadow type="text">\n' + '          <field name="TEXT">abc</field>\n' + '        </shadow>\n' + '      </value>\n' + '    </block>\n' + '  </category>\n' + '  <category name="Lists" colour="#745CA6">\n' + '    <block type="lists_indexOf">\n' + '      <field name="END">FIRST</field>\n' + '      <value name="VALUE">\n' + '        <block type="variables_get">\n' + '          <field name="VAR" id="e`(L;x,.j[[XN`F33Q5." variabletype="">list</field>\n' + '        </block>\n' + '      </value>\n' + '    </block>\n' + '    <block type="lists_create_with">\n' + '      <mutation items="0"></mutation>\n' + '    </block>\n' + '    <block type="lists_repeat">\n' + '      <value name="NUM">\n' + '        <shadow type="math_number">\n' + '          <field name="NUM">5</field>\n' + '        </shadow>\n' + '      </value>\n' + '    </block>\n' + '    <block type="lists_length"></block>\n' + '    <block type="lists_isEmpty"></block>\n' + '    <block type="lists_create_with">\n' + '      <mutation items="3"></mutation>\n' + '    </block>\n' + '    <block type="lists_getIndex">\n' + '      <mutation statement="false" at="true"></mutation>\n' + '      <field name="MODE">GET</field>\n' + '      <field name="WHERE">FROM_START</field>\n' + '      <value name="VALUE">\n' + '        <block type="variables_get">\n' + '          <field name="VAR" id="e`(L;x,.j[[XN`F33Q5." variabletype="">list</field>\n' + '        </block>\n' + '      </value>\n' + '    </block>\n' + '    <block type="lists_setIndex">\n' + '      <mutation at="true"></mutation>\n' + '      <field name="MODE">SET</field>\n' + '      <field name="WHERE">FROM_START</field>\n' + '      <value name="LIST">\n' + '        <block type="variables_get">\n' + '          <field name="VAR" id="e`(L;x,.j[[XN`F33Q5." variabletype="">list</field>\n' + '        </block>\n' + '      </value>\n' + '    </block>\n' + '    <block type="lists_getSublist">\n' + '      <mutation at1="true" at2="true"></mutation>\n' + '      <field name="WHERE1">FROM_START</field>\n' + '      <field name="WHERE2">FROM_START</field>\n' + '      <value name="LIST">\n' + '        <block type="variables_get">\n' + '          <field name="VAR" id="e`(L;x,.j[[XN`F33Q5." variabletype="">list</field>\n' + '        </block>\n' + '      </value>\n' + '    </block>\n' + '    <block type="lists_split">\n' + '      <mutation mode="SPLIT"></mutation>\n' + '      <field name="MODE">SPLIT</field>\n' + '      <value name="DELIM">\n' + '        <shadow type="text">\n' + '          <field name="TEXT">,</field>\n' + '        </shadow>\n' + '      </value>\n' + '    </block>\n' + '    <block type="lists_sort">\n' + '      <field name="TYPE">NUMERIC</field>\n' + '      <field name="DIRECTION">1</field>\n' + '    </block>\n' + '  </category>\n' + '  <category name="Colour" colour="#A6745C">\n' + '    <block type="colour_picker">\n' + '      <field name="COLOUR">#ff0000</field>\n' + '    </block>\n' + '    <block type="colour_random"></block>\n' + '    <block type="colour_rgb">\n' + '      <value name="RED">\n' + '        <shadow type="math_number">\n' + '          <field name="NUM">100</field>\n' + '        </shadow>\n' + '      </value>\n' + '      <value name="GREEN">\n' + '        <shadow type="math_number">\n' + '          <field name="NUM">50</field>\n' + '        </shadow>\n' + '      </value>\n' + '      <value name="BLUE">\n' + '        <shadow type="math_number">\n' + '          <field name="NUM">0</field>\n' + '        </shadow>\n' + '      </value>\n' + '    </block>\n' + '    <block type="colour_blend">\n' + '      <value name="COLOUR1">\n' + '        <shadow type="colour_picker">\n' + '          <field name="COLOUR">#ff0000</field>\n' + '        </shadow>\n' + '      </value>\n' + '      <value name="COLOUR2">\n' + '        <shadow type="colour_picker">\n' + '          <field name="COLOUR">#3333ff</field>\n' + '        </shadow>\n' + '      </value>\n' + '      <value name="RATIO">\n' + '        <shadow type="math_number">\n' + '          <field name="NUM">0.5</field>\n' + '        </shadow>\n' + '      </value>\n' + '    </block>\n' + '  </category>\n' + '  <sep></sep>\n' + '  <category name="Variables" colour="#A65C81" custom="VARIABLE"></category>\n' + '  <category name="Functions" colour="#9A5CA6" custom="PROCEDURE"></category>\n' + '</xml>';
+
+const INITIAL_TOOLBOX_CATEGORIES = [{
+  name: 'Controls',
+  blocks: [{ type: 'controls_if' }, {
+    type: 'controls_repeat_ext',
+    values: {
+      TIMES: {
+        type: 'math_number',
+        shadow: true,
+        fields: {
+          NUM: 10
+        }
+      }
+    },
+    statements: {
+      DO: {
+        type: 'text_print',
+        shadow: true,
+        values: {
+          TEXT: {
+            type: 'text',
+            shadow: true,
+            fields: {
+              TEXT: 'abc'
+            }
+          }
+        }
+      }
+    }
+  }]
+}, {
+  name: 'Text',
+  blocks: [{ type: 'text' }, {
+    type: 'text_print',
+    values: {
+      TEXT: {
+        type: 'text',
+        shadow: true,
+        fields: {
+          TEXT: 'abc'
+        }
+      }
+    }
+  }]
+}];
+
+const ConfigFiles = {
+  INITIAL_XML,
+  INITIAL_TOOLBOX_XML,
+  INITIAL_TOOLBOX_CATEGORIES
+};
+
+export default ConfigFiles;

src/BlocklyHelper.jsx

+/**
+ * @param {string} xml
+ */
+export default function parseWorkspaceXml(xml) {
+  const arrayTags = ['name', 'custom', 'colour','categories', 'blocks'];
+  let xmlDoc = null;
+  if (window.DOMParser) {
+    xmlDoc = (new DOMParser()).parseFromString(xml, 'text/xml');
+  } else if (window.ActiveXObject) {
+    xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
+    xmlDoc.async = false;
+    if (!xmlDoc.loadXML(xml)) {
+      throw new Error(`${xmlDoc.parseError.reason} ${xmlDoc.parseError.srcText}`);
+    }
+  } else {
+    throw new Error('cannot parse xml string!');
+  }
+
+  function isArray(o) {
+    return Object.prototype.toString.apply(o) === '[object Array]';
+  }
+
+  /**
+   * @param {string} xmlNode
+   * @param {Array.<string>} result
+   */
+  function parseNode(xmlNode, result) {
+    if (xmlNode.nodeName === '#text') {
+      const v = xmlNode.nodeValue;
+      if (v.trim()) {
+        result['value'] = v;
+      }
+      return;
+    }
+
+    const jsonNode = {};
+    const existing = result[xmlNode.nodeName];
+    if (existing) {
+      if (!isArray(existing)) {
+        result[xmlNode.nodeName] = [existing, jsonNode];
+      } else {
+        result[xmlNode.nodeName].push(jsonNode);
+      }
+    } else if (arrayTags && arrayTags.indexOf(xmlNode.nodeName) !== -1) {
+      result[xmlNode.nodeName] = [jsonNode];
+    } else {
+      result[xmlNode.nodeName] = jsonNode;
+    }
+
+    if (xmlNode.attributes) {
+      for (let i = 0; i < xmlNode.attributes.length; i++) {
+        const attribute = xmlNode.attributes[i];
+        jsonNode[attribute.nodeName] = attribute.nodeValue;
+      }
+    }
+
+    for (let i = 0; i < xmlNode.childNodes.length; i++) {
+      parseNode(xmlNode.childNodes[i], jsonNode);
+    }
+  }
+
+  const result = {};
+  if (xmlDoc.childNodes.length) {
+    parseNode(xmlDoc.childNodes[0], result);
+  }
+
+  return transformed(result);
+}
+
+function transformed(result) {
+  const filteredResult = [];
+  const xml = result["xml"];
+  const categories = xml["category"];
+  for (let i = 0; i < categories.length; i++) {
+    const c = categories[i];
+    const cNew = {};
+    cNew.name = c.name;
+    cNew.colour = c.colour;
+    cNew.custom = c.custom;
+    cNew.blocks = [];
+    const blocks = c.block;
+    if (blocks) {
+      for (let j = 0; j < blocks.length; j++) {
+        const b = blocks[j];
+        const bNew = {};
+        bNew.type = b.type;
+        bNew.fields = {};
+        const fields = b.field;
+        if (fields) {
+          for (let k = 0; k < fields.length; k++) {
+            const f = fields[k];
+            bNew.fields[k] = f;
+          }
+        }
+        cNew.blocks[j] = bNew;
+      }
+    }
+    filteredResult.push(cNew);
+  }
+  return filteredResult;
+}

src/initContent/content.jsx

+const INITIAL_XML = '<xml xmlns="http://www.w3.org/1999/xhtml"><block type="text" x="70" y="30"><field name="TEXT"></field></block></xml>';
+
+const INITIAL_TOOLBOX_XML = '<xml xmlns="http://www.w3.org/1999/xhtml" id="toolbox" style="display: none;">\n' +
+  '  <category name="Logic" colour="#5C81A6">\n' +
+  '    <block type="controls_if"></block>\n' +
+  '    <block type="logic_compare">\n' +
+  '      <field name="OP">EQ</field>\n' +
+  '    </block>\n' +
+  '    <block type="logic_operation">\n' +
+  '      <field name="OP">AND</field>\n' +
+  '    </block>\n' +
+  '    <block type="logic_negate"></block>\n' +
+  '    <block type="logic_boolean">\n' +
+  '      <field name="BOOL">TRUE</field>\n' +
+  '    </block>\n' +
+  '    <block type="logic_null"></block>\n' +
+  '    <block type="logic_ternary"></block>\n' +
+  '  </category>\n' +
+  '  <category name="Loops" colour="#5CA65C">\n' +
+  '    <block type="controls_repeat_ext">\n' +
+  '      <value name="TIMES">\n' +
+  '        <shadow type="math_number">\n' +
+  '          <field name="NUM">10</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '    <block type="controls_whileUntil">\n' +
+  '      <field name="MODE">WHILE</field>\n' +
+  '    </block>\n' +
+  '    <block type="controls_for">\n' +
+  '      <field name="VAR" id="C(8;cYCF}~vSgkxzJ+{O" variabletype="">i</field>\n' +
+  '      <value name="FROM">\n' +
+  '        <shadow type="math_number">\n' +
+  '          <field name="NUM">1</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '      <value name="TO">\n' +
+  '        <shadow type="math_number">\n' +
+  '          <field name="NUM">10</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '      <value name="BY">\n' +
+  '        <shadow type="math_number">\n' +
+  '          <field name="NUM">1</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '    <block type="controls_forEach">\n' +
+  '      <field name="VAR" id="Cg!CSk/ZJo2XQN3=VVrz" variabletype="">j</field>\n' +
+  '    </block>\n' +
+  '    <block type="controls_flow_statements">\n' +
+  '      <field name="FLOW">BREAK</field>\n' +
+  '    </block>\n' +
+  '  </category>\n' +
+  '  <category name="Math" colour="#5C68A6">\n' +
+  '    <block type="math_round">\n' +
+  '      <field name="OP">ROUND</field>\n' +
+  '      <value name="NUM">\n' +
+  '        <shadow type="math_number">\n' +
+  '          <field name="NUM">3.1</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '    <block type="math_number">\n' +
+  '      <field name="NUM">0</field>\n' +
+  '    </block>\n' +
+  '    <block type="math_single">\n' +
+  '      <field name="OP">ROOT</field>\n' +
+  '      <value name="NUM">\n' +
+  '        <shadow type="math_number">\n' +
+  '          <field name="NUM">9</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '    <block type="math_trig">\n' +
+  '      <field name="OP">SIN</field>\n' +
+  '      <value name="NUM">\n' +
+  '        <shadow type="math_number">\n' +
+  '          <field name="NUM">45</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '    <block type="math_constant">\n' +
+  '      <field name="CONSTANT">PI</field>\n' +
+  '    </block>\n' +
+  '    <block type="math_number_property">\n' +
+  '      <mutation divisor_input="false"></mutation>\n' +
+  '      <field name="PROPERTY">EVEN</field>\n' +
+  '      <value name="NUMBER_TO_CHECK">\n' +
+  '        <shadow type="math_number">\n' +
+  '          <field name="NUM">0</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '    <block type="math_arithmetic">\n' +
+  '      <field name="OP">ADD</field>\n' +
+  '      <value name="A">\n' +
+  '        <shadow type="math_number">\n' +
+  '          <field name="NUM">1</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '      <value name="B">\n' +
+  '        <shadow type="math_number">\n' +
+  '          <field name="NUM">1</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '    <block type="math_on_list">\n' +
+  '      <mutation op="SUM"></mutation>\n' +
+  '      <field name="OP">SUM</field>\n' +
+  '    </block>\n' +
+  '    <block type="math_modulo">\n' +
+  '      <value name="DIVIDEND">\n' +
+  '        <shadow type="math_number">\n' +
+  '          <field name="NUM">64</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '      <value name="DIVISOR">\n' +
+  '        <shadow type="math_number">\n' +
+  '          <field name="NUM">10</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '    <block type="math_constrain">\n' +
+  '      <value name="VALUE">\n' +
+  '        <shadow type="math_number">\n' +
+  '          <field name="NUM">50</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '      <value name="LOW">\n' +
+  '        <shadow type="math_number">\n' +
+  '          <field name="NUM">1</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '      <value name="HIGH">\n' +
+  '        <shadow type="math_number">\n' +
+  '          <field name="NUM">100</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '    <block type="math_random_int">\n' +
+  '      <value name="FROM">\n' +
+  '        <shadow type="math_number">\n' +
+  '          <field name="NUM">1</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '      <value name="TO">\n' +
+  '        <shadow type="math_number">\n' +
+  '          <field name="NUM">100</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '    <block type="math_random_float"></block>\n' +
+  '  </category>\n' +
+  '  <category name="Text" colour="#5CA68D">\n' +
+  '    <block type="text_charAt">\n' +
+  '      <mutation at="true"></mutation>\n' +
+  '      <field name="WHERE">FROM_START</field>\n' +
+  '      <value name="VALUE">\n' +
+  '        <block type="variables_get">\n' +
+  '          <field name="VAR" id="q@$ZF(L?Zo/z`d{o.Bp!" variabletype="">text</field>\n' +
+  '        </block>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '    <block type="text">\n' +
+  '      <field name="TEXT"></field>\n' +
+  '    </block>\n' +
+  '    <block type="text_append">\n' +
+  '      <field name="VAR" id=":};P,s[*|I8+L^-.EbRi" variabletype="">item</field>\n' +
+  '      <value name="TEXT">\n' +
+  '        <shadow type="text">\n' +
+  '          <field name="TEXT"></field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '    <block type="text_length">\n' +
+  '      <value name="VALUE">\n' +
+  '        <shadow type="text">\n' +
+  '          <field name="TEXT">abc</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '    <block type="text_isEmpty">\n' +
+  '      <value name="VALUE">\n' +
+  '        <shadow type="text">\n' +
+  '          <field name="TEXT"></field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '    <block type="text_indexOf">\n' +
+  '      <field name="END">FIRST</field>\n' +
+  '      <value name="VALUE">\n' +
+  '        <block type="variables_get">\n' +
+  '          <field name="VAR" id="q@$ZF(L?Zo/z`d{o.Bp!" variabletype="">text</field>\n' +
+  '        </block>\n' +
+  '      </value>\n' +
+  '      <value name="FIND">\n' +
+  '        <shadow type="text">\n' +
+  '          <field name="TEXT">abc</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '    <block type="text_join">\n' +
+  '      <mutation items="2"></mutation>\n' +
+  '    </block>\n' +
+  '    <block type="text_getSubstring">\n' +
+  '      <mutation at1="true" at2="true"></mutation>\n' +
+  '      <field name="WHERE1">FROM_START</field>\n' +
+  '      <field name="WHERE2">FROM_START</field>\n' +
+  '      <value name="STRING">\n' +
+  '        <block type="variables_get">\n' +
+  '          <field name="VAR" id="q@$ZF(L?Zo/z`d{o.Bp!" variabletype="">text</field>\n' +
+  '        </block>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '    <block type="text_changeCase">\n' +
+  '      <field name="CASE">UPPERCASE</field>\n' +
+  '      <value name="TEXT">\n' +
+  '        <shadow type="text">\n' +
+  '          <field name="TEXT">abc</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '    <block type="text_trim">\n' +
+  '      <field name="MODE">BOTH</field>\n' +
+  '      <value name="TEXT">\n' +
+  '        <shadow type="text">\n' +
+  '          <field name="TEXT">abc</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '    <block type="text_print">\n' +
+  '      <value name="TEXT">\n' +
+  '        <shadow type="text">\n' +
+  '          <field name="TEXT">abc</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '    <block type="text_prompt_ext">\n' +
+  '      <mutation type="TEXT"></mutation>\n' +
+  '      <field name="TYPE">TEXT</field>\n' +
+  '      <value name="TEXT">\n' +
+  '        <shadow type="text">\n' +
+  '          <field name="TEXT">abc</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '  </category>\n' +
+  '  <category name="Lists" colour="#745CA6">\n' +
+  '    <block type="lists_indexOf">\n' +
+  '      <field name="END">FIRST</field>\n' +
+  '      <value name="VALUE">\n' +
+  '        <block type="variables_get">\n' +
+  '          <field name="VAR" id="e`(L;x,.j[[XN`F33Q5." variabletype="">list</field>\n' +
+  '        </block>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '    <block type="lists_create_with">\n' +
+  '      <mutation items="0"></mutation>\n' +
+  '    </block>\n' +
+  '    <block type="lists_repeat">\n' +
+  '      <value name="NUM">\n' +
+  '        <shadow type="math_number">\n' +
+  '          <field name="NUM">5</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '    <block type="lists_length"></block>\n' +
+  '    <block type="lists_isEmpty"></block>\n' +
+  '    <block type="lists_create_with">\n' +
+  '      <mutation items="3"></mutation>\n' +
+  '    </block>\n' +
+  '    <block type="lists_getIndex">\n' +
+  '      <mutation statement="false" at="true"></mutation>\n' +
+  '      <field name="MODE">GET</field>\n' +
+  '      <field name="WHERE">FROM_START</field>\n' +
+  '      <value name="VALUE">\n' +
+  '        <block type="variables_get">\n' +
+  '          <field name="VAR" id="e`(L;x,.j[[XN`F33Q5." variabletype="">list</field>\n' +
+  '        </block>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '    <block type="lists_setIndex">\n' +
+  '      <mutation at="true"></mutation>\n' +
+  '      <field name="MODE">SET</field>\n' +
+  '      <field name="WHERE">FROM_START</field>\n' +
+  '      <value name="LIST">\n' +
+  '        <block type="variables_get">\n' +
+  '          <field name="VAR" id="e`(L;x,.j[[XN`F33Q5." variabletype="">list</field>\n' +
+  '        </block>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '    <block type="lists_getSublist">\n' +
+  '      <mutation at1="true" at2="true"></mutation>\n' +
+  '      <field name="WHERE1">FROM_START</field>\n' +
+  '      <field name="WHERE2">FROM_START</field>\n' +
+  '      <value name="LIST">\n' +
+  '        <block type="variables_get">\n' +
+  '          <field name="VAR" id="e`(L;x,.j[[XN`F33Q5." variabletype="">list</field>\n' +
+  '        </block>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '    <block type="lists_split">\n' +
+  '      <mutation mode="SPLIT"></mutation>\n' +
+  '      <field name="MODE">SPLIT</field>\n' +
+  '      <value name="DELIM">\n' +
+  '        <shadow type="text">\n' +
+  '          <field name="TEXT">,</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '    <block type="lists_sort">\n' +
+  '      <field name="TYPE">NUMERIC</field>\n' +
+  '      <field name="DIRECTION">1</field>\n' +
+  '    </block>\n' +
+  '  </category>\n' +
+  '  <category name="Colour" colour="#A6745C">\n' +
+  '    <block type="colour_picker">\n' +
+  '      <field name="COLOUR">#ff0000</field>\n' +
+  '    </block>\n' +
+  '    <block type="colour_random"></block>\n' +
+  '    <block type="colour_rgb">\n' +
+  '      <value name="RED">\n' +
+  '        <shadow type="math_number">\n' +
+  '          <field name="NUM">100</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '      <value name="GREEN">\n' +
+  '        <shadow type="math_number">\n' +
+  '          <field name="NUM">50</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '      <value name="BLUE">\n' +
+  '        <shadow type="math_number">\n' +
+  '          <field name="NUM">0</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '    <block type="colour_blend">\n' +
+  '      <value name="COLOUR1">\n' +
+  '        <shadow type="colour_picker">\n' +
+  '          <field name="COLOUR">#ff0000</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '      <value name="COLOUR2">\n' +
+  '        <shadow type="colour_picker">\n' +
+  '          <field name="COLOUR">#3333ff</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '      <value name="RATIO">\n' +
+  '        <shadow type="math_number">\n' +
+  '          <field name="NUM">0.5</field>\n' +
+  '        </shadow>\n' +
+  '      </value>\n' +
+  '    </block>\n' +
+  '  </category>\n' +
+  '  <sep></sep>\n' +
+  '  <category name="Variables" colour="#A65C81" custom="VARIABLE"></category>\n' +
+  '  <category name="Functions" colour="#9A5CA6" custom="PROCEDURE"></category>\n' +
+  '</xml>';
+
+const INITIAL_TOOLBOX_CATEGORIES = [
+  {
+    name: 'Controls',
+    blocks: [
+      { type: 'controls_if' },
+      {
+        type: 'controls_repeat_ext',
+        values: {
+          TIMES: {
+            type: 'math_number',
+            shadow: true,
+            fields: {
+              NUM: 10,
+            },
+          },
+        },
+        statements: {
+          DO: {
+            type: 'text_print',
+            shadow: true,
+            values: {
+              TEXT: {
+                type: 'text',
+                shadow: true,
+                fields: {
+                  TEXT: 'abc',
+                },
+              },
+            },
+          },
+        },
+      },
+    ],
+  },
+  {
+    name: 'Text',
+    blocks: [
+      { type: 'text' },
+      {
+        type: 'text_print',
+        values: {
+          TEXT: {
+            type: 'text',
+            shadow: true,
+            fields: {
+              TEXT: 'abc',
+            },
+          },
+        },
+      },
+    ],
+  },
+];
+
+const ConfigFiles = {
+  INITIAL_XML,
+  INITIAL_TOOLBOX_XML,
+  INITIAL_TOOLBOX_CATEGORIES,
+};
+
+export default ConfigFiles;

CHANGELOG.md

@@ -0,1 +1,5 @@
+# Version 3.1.0 - September 13, 2018
+
+* Add a `parseWorkspaceXml` function that makes it easier to use XML-formatted toolboxes with react-blockly-component (thanks @Macilias!)
+
 # Version 3.0.3 - September 7, 2018
@@ -2,0 +6,0 @@

dist-modules/dev-index.js

@@ -6,50 +6,5 @@ /* eslint-disable import/no-extraneous-dependencies */
 import ReactBlocklyComponent from './index';
+import ConfigFiles from './initContent/content';
+import parseWorkspaceXml from './BlocklyHelper';
 
-const INITIAL_XML = '<xml xmlns="http://www.w3.org/1999/xhtml"><block type="text" x="70" y="30"><field name="TEXT"></field></block></xml>';
-
-const INITIAL_TOOLBOX_CATEGORIES = [{
-  name: 'Controls',
-  blocks: [{ type: 'controls_if' }, {
-    type: 'controls_repeat_ext',
-    values: {
-      TIMES: {
-        type: 'math_number',
-        shadow: true,
-        fields: {
-          NUM: 10
-        }
-      }
-    },
-    statements: {
-      DO: {
-        type: 'text_print',
-        shadow: true,
-        values: {
-          TEXT: {
-            type: 'text',
-            shadow: true,
-            fields: {
-              TEXT: 'abc'
-            }
-          }
-        }
-      }
-    }
-  }]
-}, {
-  name: 'Text',
-  blocks: [{ type: 'text' }, {
-    type: 'text_print',
-    values: {
-      TEXT: {
-        type: 'text',
-        shadow: true,
-        fields: {
-          TEXT: 'abc'
-        }
-      }
-    }
-  }]
-}];
-
 class TestEditor extends React.Component {
@@ -99,3 +54,3 @@ constructor(props) {
       },
-      initialXml: INITIAL_XML,
+      initialXml: ConfigFiles.INITIAL_XML,
       wrapperDivClassName: 'fill-height',
@@ -106,3 +61,3 @@ workspaceDidChange: this.workspaceDidChange
     this.state = {
-      toolboxCategories: INITIAL_TOOLBOX_CATEGORIES
+      toolboxCategories: parseWorkspaceXml(ConfigFiles.INITIAL_TOOLBOX_XML)
     };
@@ -109,0 +64,0 @@ }

package.json

 {
   "name": "react-blockly-component",
-  "version": "3.0.3",
+  "version": "3.1.0",
   "description": "A React wrapper for the Blockly visual programming editor",
@@ -5,0 +5,0 @@ "main": "dist-modules",

src/BlocklyToolbox.jsx

@@ -11,2 +11,3 @@ /* eslint-disable react/no-array-index-key */
 
+
 class BlocklyToolbox extends React.Component {
@@ -53,3 +54,3 @@ static propTypes = {
     return processedCategory;
-  }
+  };
 
@@ -70,3 +71,3 @@ renderCategories = categories => categories.map((category, i) => {
     />);
-  })
+  });
 
@@ -73,0 +74,0 @@ render = () => {

src/dev-index.jsx

@@ -6,59 +6,5 @@ /* eslint-disable import/no-extraneous-dependencies */
 import ReactBlocklyComponent from './index';
+import ConfigFiles from './initContent/content';
+import parseWorkspaceXml from './BlocklyHelper';
 
-const INITIAL_XML = '<xml xmlns="http://www.w3.org/1999/xhtml"><block type="text" x="70" y="30"><field name="TEXT"></field></block></xml>';
-
-const INITIAL_TOOLBOX_CATEGORIES = [
-  {
-    name: 'Controls',
-    blocks: [
-      { type: 'controls_if' },
-      {
-        type: 'controls_repeat_ext',
-        values: {
-          TIMES: {
-            type: 'math_number',
-            shadow: true,
-            fields: {
-              NUM: 10,
-            },
-          },
-        },
-        statements: {
-          DO: {
-            type: 'text_print',
-            shadow: true,
-            values: {
-              TEXT: {
-                type: 'text',
-                shadow: true,
-                fields: {
-                  TEXT: 'abc',
-                },
-              },
-            },
-          },
-        },
-      },
-    ],
-  },
-  {
-    name: 'Text',
-    blocks: [
-      { type: 'text' },
-      {
-        type: 'text_print',
-        values: {
-          TEXT: {
-            type: 'text',
-            shadow: true,
-            fields: {
-              TEXT: 'abc',
-            },
-          },
-        },
-      },
-    ],
-  },
-];
-
 class TestEditor extends React.Component {
@@ -68,3 +14,3 @@ constructor(props) {
     this.state = {
-      toolboxCategories: INITIAL_TOOLBOX_CATEGORIES,
+      toolboxCategories: parseWorkspaceXml(ConfigFiles.INITIAL_TOOLBOX_XML),
     };
@@ -119,3 +65,3 @@ }
       }}
-      initialXml={INITIAL_XML}
+      initialXml={ConfigFiles.INITIAL_XML}
       wrapperDivClassName="fill-height"
@@ -122,0 +68,0 @@ workspaceDidChange={this.workspaceDidChange}

No alert changes

Improved metrics

Total package byte prevSize

2487830

1.31%

Number of package files

30

15.38%

Lines of code

25987

2.35%

No dependency changes