chore: use prettier instead of clang-format (#7014)

* chore: add and configure prettier * chore: remove clang-format * chore: remove clang-format config * chore: lint additional ts files * chore: fix lint errors in blocks * chore: add prettier-ignore where needed * chore: ignore js blocks when formatting * chore: fix playground html syntax * chore: fix yaml spacing from merge * chore: convert text blocks to use arrow functions * chore: format everything with prettier * chore: fix lint unused imports in blocks
2026-01-06 16:40:07 +01:00 · 2023-05-10 16:01:39 -07:00
parent af991f5e1b
commit 88ff901a72
425 changed files with 29170 additions and 21169 deletions
--- a/tests/playgrounds/advanced_playground.html
+++ b/tests/playgrounds/advanced_playground.html
@@ -1,168 +1,176 @@
 <!DOCTYPE html>
 <html>
-<head>
-<meta charset="utf-8">
-<title>Advanced Blockly Playground</title>
+  <head>
+    <meta charset="utf-8" />
+    <title>Advanced Blockly Playground</title>

-<script>
-  var BLOCKLY_BOOTSTRAP_OPTIONS = {
-    additionalScripts: [
-      'build/msg/en.js',
-      'tests/playgrounds/screenshot.js',
-      'tests/themes/test_themes.js',
-      'node_modules/@blockly/dev-tools/dist/index.js',
-      'node_modules/@blockly/theme-modern/dist/index.js',
-    ],
-  }
-</script>
-<script src="../bootstrap.js"></script>
-
-<script type="module">
-// Wait for Blockly to finish loading.
-import '../bootstrap_done.mjs';
-
-function start() {
-  setBackgroundColour();
-  initPlayground();
-}
-
-function createWorkspace(blocklyDiv, options) {
-  var workspace = Blockly.inject(blocklyDiv, options);
-  workspace.configureContextMenu = configureContextMenu.bind(workspace);
-  return workspace;
-}
-
-function configurePlayground(playground) {
-  // Rendering options.
-  var gui = playground.getGUI();
-  var renderingFolder = gui.addFolder('Rendering');
-  var renderingOptions = {
-    'font Size': 10,
-  };
-  renderingFolder.add(renderingOptions, 'font Size', 0, 50)
-    .onChange(function(value) {
-      var ws = playground.getWorkspace();
-      var fontStyle = {
-        'size': value
+    <script>
+      var BLOCKLY_BOOTSTRAP_OPTIONS = {
+        additionalScripts: [
+          'build/msg/en.js',
+          'tests/playgrounds/screenshot.js',
+          'tests/themes/test_themes.js',
+          'node_modules/@blockly/dev-tools/dist/index.js',
+          'node_modules/@blockly/theme-modern/dist/index.js',
+        ],
      };
-      ws.getTheme().setFontStyle(fontStyle);
-      // Refresh theme.
-      ws.setTheme(ws.getTheme());
-    });
-}
+    </script>
+    <script src="../bootstrap.js"></script>

-function initPlayground() {
-  if (typeof window.createPlayground === 'undefined') {
-    alert('You need to run \'npm install\' in order to use this playground.');
-    return;
-  }
-  var defaultOptions = {
-        comments: true,
-        collapse: true,
-        disable: true,
-        grid:
-          {
+    <script type="module">
+      // Wait for Blockly to finish loading.
+      import '../bootstrap_done.mjs';
+
+      function start() {
+        setBackgroundColour();
+        initPlayground();
+      }
+
+      function createWorkspace(blocklyDiv, options) {
+        var workspace = Blockly.inject(blocklyDiv, options);
+        workspace.configureContextMenu = configureContextMenu.bind(workspace);
+        return workspace;
+      }
+
+      function configurePlayground(playground) {
+        // Rendering options.
+        var gui = playground.getGUI();
+        var renderingFolder = gui.addFolder('Rendering');
+        var renderingOptions = {
+          'font Size': 10,
+        };
+        renderingFolder
+          .add(renderingOptions, 'font Size', 0, 50)
+          .onChange(function (value) {
+            var ws = playground.getWorkspace();
+            var fontStyle = {
+              'size': value,
+            };
+            ws.getTheme().setFontStyle(fontStyle);
+            // Refresh theme.
+            ws.setTheme(ws.getTheme());
+          });
+      }
+
+      function initPlayground() {
+        if (typeof window.createPlayground === 'undefined') {
+          alert(
+            "You need to run 'npm install' in order to use this playground."
+          );
+          return;
+        }
+        var defaultOptions = {
+          comments: true,
+          collapse: true,
+          disable: true,
+          grid: {
            spacing: 25,
            length: 3,
            colour: '#ccc',
-            snap: true
+            snap: true,
          },
-        horizontalLayout: false,
-        maxBlocks: Infinity,
-        maxInstances: {'test_basic_limit_instances': 3},
-        maxTrashcanContents: 256,
-        media: '../../media/',
-        oneBasedIndex: true,
-        readOnly: false,
-        rtl: false,
-        move: {
-          scrollbars: true,
-          drag: true,
-          wheel: false,
-        },
-        toolbox: toolboxCategories,
-        toolboxPosition: 'start',
-        renderer: 'geras',
-        zoom:
-          {
+          horizontalLayout: false,
+          maxBlocks: Infinity,
+          maxInstances: {'test_basic_limit_instances': 3},
+          maxTrashcanContents: 256,
+          media: '../../media/',
+          oneBasedIndex: true,
+          readOnly: false,
+          rtl: false,
+          move: {
+            scrollbars: true,
+            drag: true,
+            wheel: false,
+          },
+          toolbox: toolboxCategories,
+          toolboxPosition: 'start',
+          renderer: 'geras',
+          zoom: {
            controls: true,
            wheel: true,
            startScale: 1.0,
            maxScale: 4,
            minScale: 0.25,
-            scaleSpeed: 1.1
-          }
-  };
+            scaleSpeed: 1.1,
+          },
+        };

-  const playgroundConfig = {
-    toolboxes: {
-      'categories': toolboxCategories,
-      'simple': toolboxSimple,
-      'test blocks': toolboxTestBlocks,
-    }
-  }
+        const playgroundConfig = {
+          toolboxes: {
+            'categories': toolboxCategories,
+            'simple': toolboxSimple,
+            'test blocks': toolboxTestBlocks,
+          },
+        };

-  createPlayground(document.getElementById('root'), createWorkspace,
-      defaultOptions, playgroundConfig,
-      'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.19.2/min/vs')
-      .then(function(playground) {
-        configurePlayground(playground);
-      });
-}
+        createPlayground(
+          document.getElementById('root'),
+          createWorkspace,
+          defaultOptions,
+          playgroundConfig,
+          'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.19.2/min/vs'
+        ).then(function (playground) {
+          configurePlayground(playground);
+        });
+      }

-function setBackgroundColour() {
-  // Set background colour to differentiate file: vs. localhost
-  // vs. server copy.
-  if (location.protocol == 'file:') {
-    document.body.style.backgroundColor = '#89A203';  // Unpleasant green.
-  } else if (location.hostname  === 'localhost' ||
-      location.hostname === '127.0.0.1' ||
-      location.hostname === '[::1]') {
-    document.body.style.backgroundColor = '#d6d6ff';  // Familliar lilac.
-  }
-}
+      function setBackgroundColour() {
+        // Set background colour to differentiate file: vs. localhost
+        // vs. server copy.
+        if (location.protocol == 'file:') {
+          document.body.style.backgroundColor = '#89A203'; // Unpleasant green.
+        } else if (
+          location.hostname === 'localhost' ||
+          location.hostname === '127.0.0.1' ||
+          location.hostname === '[::1]'
+        ) {
+          document.body.style.backgroundColor = '#d6d6ff'; // Familliar lilac.
+        }
+      }

+      function configureContextMenu(menuOptions, e) {
+        var workspace = this;
+        var screenshotOption = {
+          text: 'Download Screenshot',
+          enabled: workspace.getTopBlocks().length,
+          callback: function () {
+            downloadScreenshot(workspace);
+          },
+        };
+        menuOptions.push(screenshotOption);

-function configureContextMenu(menuOptions, e) {
-  var workspace = this;
-  var screenshotOption = {
-    text: 'Download Screenshot',
-    enabled: workspace.getTopBlocks().length,
-    callback: function() {
-      downloadScreenshot(workspace);
-    }
-  };
-  menuOptions.push(screenshotOption);
+        // Adds a default-sized workspace comment to the workspace.
+        menuOptions.push(
+          Blockly.ContextMenu.workspaceCommentOption(workspace, e)
+        );
+      }
+      start();
+    </script>

-  // Adds a default-sized workspace comment to the workspace.
-  menuOptions.push(Blockly.ContextMenu.workspaceCommentOption(workspace, e));
-}
-start();
-</script>
+    <style>
+      html,
+      body {
+        margin: 0;
+      }

-<style>
-  html, body {
-    margin: 0;
-  }
+      .ioLabel > .blocklyFlyoutLabelText {
+        font-style: italic;
+      }

-  .ioLabel>.blocklyFlyoutLabelText {
-    font-style: italic;
-  }
+      .playgroundToggleOptions {
+        list-style: none;
+        padding: 0;
+      }
+      .playgroundToggleOptions li {
+        margin-top: 1em;
+      }

-  .playgroundToggleOptions {
-    list-style: none;
-    padding: 0;
-  }
-  .playgroundToggleOptions li {
-    margin-top: 1em;
-  }
-
-  .zelos-renderer .blocklyFlyoutButton .blocklyText {
-    font-size: 1.5rem;
-  }
-</style>
-</head>
-<body>
-  <div id="root"></div>
-</body>
+      .zelos-renderer .blocklyFlyoutButton .blocklyText {
+        font-size: 1.5rem;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
 </html>
--- a/tests/playgrounds/iframe.html
+++ b/tests/playgrounds/iframe.html
@@ -1,40 +1,40 @@
 <!DOCTYPE html>
 <html>
-<head>
-<meta charset="utf-8">
-<title>Blockly &lt;iframe&gt; Playground</title>
-<style>
-  html, body {
-    border: 0;
-    margin: 0;
-    padding: 0;
-    font-family: sans-serif;
-  }
-  h1#title {
-    border: 0;
-    margin: 2px;
-    padding: 0;
-    width: 100%;
-  }
-  #playground-iframe {
-    border: 0;
-    width: 100%;
-  }
-</style>
-<script type="text/javascript">
-  var onWindowResize = function() {
-    var iframe = document.getElementById('playground-iframe');
-    var top = iframe.getBoundingClientRect().top;
-    iframe.height = window.innerHeight - top;
-    iframe.width = window.innerWidth;
-  };
-  window.addEventListener("resize", onWindowResize);
-  window.addEventListener("load", onWindowResize);
-</script>
-</head>
-<body>
-  <h1 id="title">Outer Frame</h1>
-  <iframe id="playground-iframe" src="../playground.html">
-  </iframe>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>Blockly &lt;iframe&gt; Playground</title>
+    <style>
+      html,
+      body {
+        border: 0;
+        margin: 0;
+        padding: 0;
+        font-family: sans-serif;
+      }
+      h1#title {
+        border: 0;
+        margin: 2px;
+        padding: 0;
+        width: 100%;
+      }
+      #playground-iframe {
+        border: 0;
+        width: 100%;
+      }
+    </style>
+    <script type="text/javascript">
+      var onWindowResize = function () {
+        var iframe = document.getElementById('playground-iframe');
+        var top = iframe.getBoundingClientRect().top;
+        iframe.height = window.innerHeight - top;
+        iframe.width = window.innerWidth;
+      };
+      window.addEventListener('resize', onWindowResize);
+      window.addEventListener('load', onWindowResize);
+    </script>
+  </head>
+  <body>
+    <h1 id="title">Outer Frame</h1>
+    <iframe id="playground-iframe" src="../playground.html"> </iframe>
+  </body>
 </html>
--- a/tests/playgrounds/screenshot.js
+++ b/tests/playgrounds/screenshot.js
@@ -17,16 +17,25 @@
 * @param {!Function} callback Callback.
 */
 function svgToPng_(data, width, height, callback) {
-  const canvas = document.createElement("canvas");
-  const context = canvas.getContext("2d");
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d');
  const img = new Image();

  const pixelDensity = 10;
  canvas.width = width * pixelDensity;
  canvas.height = height * pixelDensity;
-  img.onload = function() {
+  img.onload = function () {
    context.drawImage(
-        img, 0, 0, width, height, 0, 0, canvas.width, canvas.height);
+      img,
+      0,
+      0,
+      width,
+      height,
+      0,
+      0,
+      canvas.width,
+      canvas.height
+    );
    try {
      const dataUri = canvas.toDataURL('image/png');
      callback(dataUri);
@@ -46,7 +55,7 @@ function svgToPng_(data, width, height, callback) {
 */
 function workspaceToSvg_(workspace, callback, customCss) {
  // Go through all text areas and set their value.
-  const textAreas = document.getElementsByTagName("textarea");
+  const textAreas = document.getElementsByTagName('textarea');
  for (let i = 0; i < textAreas.length; i++) {
    textAreas[i].innerHTML = textAreas[i].value;
  }
@@ -64,27 +73,32 @@ function workspaceToSvg_(workspace, callback, customCss) {
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
  svg.appendChild(clone);
-  svg.setAttribute('viewBox',
-      x + ' ' + y + ' ' + width + ' ' + height);
+  svg.setAttribute('viewBox', x + ' ' + y + ' ' + width + ' ' + height);

-  svg.setAttribute('class', 'blocklySvg ' +
-    (workspace.options.renderer || 'geras') + '-renderer ' +
-    (workspace.getTheme ? workspace.getTheme().name + '-theme' : ''));
+  svg.setAttribute(
+    'class',
+    'blocklySvg ' +
+      (workspace.options.renderer || 'geras') +
+      '-renderer ' +
+      (workspace.getTheme ? workspace.getTheme().name + '-theme' : '')
+  );
  svg.setAttribute('width', width);
  svg.setAttribute('height', height);
-  svg.setAttribute("style", 'background-color: transparent');
+  svg.setAttribute('style', 'background-color: transparent');

-  const css = [].slice.call(document.head.querySelectorAll('style'))
-                  .filter(
-                      (el) => /\.blocklySvg/.test(el.innerText) ||
-                          (el.id.indexOf('blockly-') === 0))
-                  .map((el) => el.innerText)
-                  .join('\n');
+  const css = [].slice
+    .call(document.head.querySelectorAll('style'))
+    .filter(
+      (el) =>
+        /\.blocklySvg/.test(el.innerText) || el.id.indexOf('blockly-') === 0
+    )
+    .map((el) => el.innerText)
+    .join('\n');
  const style = document.createElement('style');
  style.innerHTML = css + '\n' + customCss;
  svg.insertBefore(style, svg.firstChild);

-  let svgAsXML = (new XMLSerializer).serializeToString(svg);
+  let svgAsXML = new XMLSerializer().serializeToString(svg);
  svgAsXML = svgAsXML.replace(/&nbsp/g, '&#160');
  const data = 'data:image/svg+xml,' + encodeURIComponent(svgAsXML);

@@ -97,7 +111,7 @@ function workspaceToSvg_(workspace, callback, customCss) {
 * @param {!Blockly.WorkspaceSvg} workspace The Blockly workspace.
 */
 function downloadScreenshot(workspace) {
-  workspaceToSvg_(workspace, function(datauri) {
+  workspaceToSvg_(workspace, function (datauri) {
    const a = document.createElement('a');
    a.download = 'screenshot.png';
    a.target = '_self';
--- a/tests/playgrounds/shared_procedures.html
+++ b/tests/playgrounds/shared_procedures.html
@@ -1,179 +1,178 @@
 <!DOCTYPE html>
 <html>
-<head>
-<meta charset="utf-8">
-<title>Shared Procedures Playground</title>
+  <head>
+    <meta charset="utf-8" />
+    <title>Shared Procedures Playground</title>

-<!-- This script loads uncompressed when on localhost and loads
+    <!-- This script loads uncompressed when on localhost and loads
     compressed when it is being hosted or on Internet Explorer.  -->
-<script>
-  var BLOCKLY_BOOTSTRAP_OPTIONS = {
-    additionalScripts: [
-      'build/msg/en.js',
-      'node_modules/@blockly/dev-tools/dist/index.js',
-    ],
-  }
-</script>
-<script src="../bootstrap.js"></script>
-<script type=module>
-// Wait for Blockly to finish loading.
-import '../bootstrap_done.mjs';
+    <script>
+      var BLOCKLY_BOOTSTRAP_OPTIONS = {
+        additionalScripts: [
+          'build/msg/en.js',
+          'node_modules/@blockly/dev-tools/dist/index.js',
+        ],
+      };
+    </script>
+    <script src="../bootstrap.js"></script>
+    <script type="module">
+      // Wait for Blockly to finish loading.
+      import '../bootstrap_done.mjs';

-const IS_UNCOMPRESSED = !window.bootstrapInfo.compressed;  // See bootstrap.js
-var workspace = null;
+      const IS_UNCOMPRESSED = !window.bootstrapInfo.compressed; // See bootstrap.js
+      var workspace = null;

-function start() {
-  setBackgroundColour();
+      function start() {
+        setBackgroundColour();

-  var toolbox = {
-    'kind': 'categoryToolbox',
-    'contents': [
-      {
-        'kind': 'category',
-        'name': 'Other Blocks',
-        'categorystyle': 'logic_category',
-        'contents': [
-          {
-            'kind': 'block',
-            'type': 'controls_if',
+        var toolbox = {
+          'kind': 'categoryToolbox',
+          'contents': [
+            {
+              'kind': 'category',
+              'name': 'Other Blocks',
+              'categorystyle': 'logic_category',
+              'contents': [
+                {
+                  'kind': 'block',
+                  'type': 'controls_if',
+                },
+                {
+                  'kind': 'block',
+                  'type': 'logic_operation',
+                },
+                {
+                  'kind': 'block',
+                  'type': 'logic_negate',
+                },
+                {
+                  'kind': 'block',
+                  'type': 'logic_boolean',
+                },
+                {
+                  'kind': 'block',
+                  'type': 'text_print',
+                },
+              ],
+            },
+            {
+              'kind': 'category',
+              'name': 'Variables',
+              'categorystyle': 'variable_category',
+              'custom': 'VARIABLE',
+            },
+            {
+              'kind': 'category',
+              'name': 'Procedures',
+              'categorystyle': 'procedure_category',
+              'custom': 'PROCEDURE',
+            },
+          ],
+        };
+        var options = {
+          comments: true,
+          collapse: true,
+          disable: true,
+          grid: {
+            spacing: 25,
+            length: 3,
+            colour: '#ccc',
+            snap: true,
          },
-          {
-            'kind': 'block',
-            'type': 'logic_operation',
+          horizontalLayout: false,
+          maxBlocks: Infinity,
+          maxInstances: {'test_basic_limit_instances': 3},
+          maxTrashcanContents: 256,
+          media: '../../media/',
+          oneBasedIndex: true,
+          readOnly: false,
+          rtl: false,
+          move: {
+            scrollbars: true,
+            drag: true,
+            wheel: false,
          },
-          {
-            'kind': 'block',
-            'type': 'logic_negate',
+          toolbox: toolbox,
+          toolboxPosition: 'start',
+          renderer: 'geras',
+          zoom: {
+            controls: true,
+            wheel: true,
+            startScale: 1.0,
+            maxScale: 4,
+            minScale: 0.25,
+            scaleSpeed: 1.1,
          },
-          {
-            'kind': 'block',
-            'type': 'logic_boolean',
-          },
-          {
-            'kind': 'block',
-            'type': 'text_print',
-          },
-        ]
-      },
-      {
-        'kind': 'category',
-        'name': 'Variables',
-        'categorystyle': 'variable_category',
-        'custom': 'VARIABLE',
-      },
-      {
-        'kind': 'category',
-        'name': 'Procedures',
-        'categorystyle': 'procedure_category',
-        'custom': 'PROCEDURE',
-      },
-    ],
-  };
-  var options = {
-    comments: true,
-    collapse: true,
-    disable: true,
-    grid:
-      {
-        spacing: 25,
-        length: 3,
-        colour: '#ccc',
-        snap: true
-      },
-    horizontalLayout: false,
-    maxBlocks: Infinity,
-    maxInstances: {'test_basic_limit_instances': 3},
-    maxTrashcanContents: 256,
-    media: '../../media/',
-    oneBasedIndex: true,
-    readOnly: false,
-    rtl: false,
-    move: {
-      scrollbars: true,
-      drag: true,
-      wheel: false,
-    },
-    toolbox: toolbox,
-    toolboxPosition: 'start',
-    renderer: 'geras',
-    zoom:
-      {
-        controls: true,
-        wheel: true,
-        startScale: 1.0,
-        maxScale: 4,
-        minScale: 0.25,
-        scaleSpeed: 1.1
+        };
+        workspace = Blockly.inject('blocklyDiv1', options);
+        workspace = Blockly.inject('blocklyDiv2', options);
      }
-  };
-  workspace = Blockly.inject('blocklyDiv1', options);
-  workspace = Blockly.inject('blocklyDiv2', options);
-}

-function setBackgroundColour() {
-  // Set background colour to differentiate between compressed and uncompressed mode.
-  if (IS_UNCOMPRESSED) {
-    document.body.style.backgroundColor = '#d6d6ff';  // Familiar lilac.
-  } else {
-    document.body.style.backgroundColor = '#60fcfc';  // Unfamiliar blue.
-  }
-}
+      function setBackgroundColour() {
+        // Set background colour to differentiate between compressed and uncompressed mode.
+        if (IS_UNCOMPRESSED) {
+          document.body.style.backgroundColor = '#d6d6ff'; // Familiar lilac.
+        } else {
+          document.body.style.backgroundColor = '#60fcfc'; // Unfamiliar blue.
+        }
+      }

-start();
-</script>
+      start();
+    </script>

-<style>
-  html, body {
-    height: 100%;
-  }
-  body {
-    background-color: #fff;
-    font-family: sans-serif;
-    overflow: hidden;
-  }
-  h1 {
-    font-weight: normal;
-    font-size: 140%;
-  }
-  #blocklyDiv1 {
-    float: left;
-    height: 95%;
-    width: 49%;
-  }
-  #blocklyDiv2 {
-    float: right;
-    height: 95%;
-    width: 49%;
-  }
-  #importExport {
-    font-family: monospace;
-  }
+    <style>
+      html,
+      body {
+        height: 100%;
+      }
+      body {
+        background-color: #fff;
+        font-family: sans-serif;
+        overflow: hidden;
+      }
+      h1 {
+        font-weight: normal;
+        font-size: 140%;
+      }
+      #blocklyDiv1 {
+        float: left;
+        height: 95%;
+        width: 49%;
+      }
+      #blocklyDiv2 {
+        float: right;
+        height: 95%;
+        width: 49%;
+      }
+      #importExport {
+        font-family: monospace;
+      }

-  .ioLabel>.blocklyFlyoutLabelText {
-    font-style: italic;
-  }
+      .ioLabel > .blocklyFlyoutLabelText {
+        font-style: italic;
+      }

-  #blocklyDiv.renderingDebug .blockRenderDebug {
-    display: block;
-  }
+      #blocklyDiv.renderingDebug .blockRenderDebug {
+        display: block;
+      }

-  .playgroundToggleOptions {
-    list-style: none;
-    padding: 0;
-  }
-  .playgroundToggleOptions li {
-    margin-top: 1em;
-  }
+      .playgroundToggleOptions {
+        list-style: none;
+        padding: 0;
+      }
+      .playgroundToggleOptions li {
+        margin-top: 1em;
+      }

-  .zelos-renderer .blocklyFlyoutButton .blocklyText {
-    font-size: 1.5rem;
-  }
-</style>
-</head>
-<body>
-  <h1>Shared Procedures Playground</h1>
+      .zelos-renderer .blocklyFlyoutButton .blocklyText {
+        font-size: 1.5rem;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Shared Procedures Playground</h1>

-  <div id="blocklyDiv1"></div>
-  <div id="blocklyDiv2"></div>
-</body>
+    <div id="blocklyDiv1"></div>
+    <div id="blocklyDiv2"></div>
+  </body>
 </html>