feat: add webpack asset loaders

plugins/dev-create/templates/typescript-block/template/src/blockly-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@blockly/dev-scripts" />

plugins/dev-create/templates/typescript-field/template/src/blockly-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@blockly/dev-scripts" />

plugins/dev-create/templates/typescript-plugin/template/src/blockly-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@blockly/dev-scripts" />

plugins/dev-create/templates/typescript-theme/template/src/blockly-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@blockly/dev-scripts" />

plugins/dev-scripts/config/blockly-env.d.ts

@@ -0,0 +1,59 @@
+declare module '*.avif' {
+    const src: string;
+    export default src;
+  }
+
+  declare module '*.bmp' {
+    const src: string;
+    export default src;
+  }
+
+  declare module '*.cur' {
+    const src: string;
+    export default src;
+  }
+
+  declare module '*.gif' {
+    const src: string;
+    export default src;
+  }
+
+  declare module '*.jpg' {
+    const src: string;
+    export default src;
+  }
+
+  declare module '*.jpeg' {
+    const src: string;
+    export default src;
+  }
+
+  declare module '*.png' {
+    const src: string;
+    export default src;
+  }
+
+  declare module '*.svg' {
+    const src: string;
+    export default src;
+  }
+
+  declare module '*.webp' {
+      const src: string;
+      export default src;
+  }
+
+  declare module '*.mp3' {
+    const src: string;
+    export default src;
+  }
+
+  declare module '*.ogg' {
+    const src: string;
+    export default src;
+  }
+
+  declare module '*.wav' {
+    const src: string;
+    export default src;
+  }

plugins/dev-scripts/config/webpack.config.js

@@ -98,6 +98,10 @@ module.exports = (env) => {
           use: [require.resolve('source-map-loader')],
           enforce: 'pre',
         },
+        {
+          test: /\.(avif|bmp|cur|gif|jpe?g|png|svg|webp|mp3|ogg|wav)$/,
+          type: 'asset/inline',
+        },
         isTypescript && {
           test: /\.tsx?$/,
           loader: require.resolve('ts-loader'),

plugins/dev-scripts/package.json

@@ -51,6 +51,7 @@
     "access": "public",
     "registry": "https://wombat-dressing-room.appspot.com"
   },
+  "types": "./config/blockly-env.d.ts",
   "eslintConfig": {
     "extends": "@blockly/eslint-config"
   },

plugins/eslint-config/index.js

@@ -219,6 +219,8 @@ module.exports = {
           {'accessibility': 'no-public'}],
         '@typescript-eslint/no-require-imports': 'error',
         '@typescript-eslint/semi': ['error', 'always'],
+        'spaced-comment': ['error', 'always',
+          {'markers': ['/']}],
       },
     },
   ],

plugins/workspace-backpack/src/backpack.ts

@@ -13,6 +13,9 @@
 
 import * as Blockly from 'blockly/core';
 
+import backpackSvgDataUri from '../media/backpack.svg';
+import backpackFilledSvgDataUri from '../media/filled_backpack.svg';
+
 import {registerContextMenus} from './backpack_helpers';
 import {BackpackOptions, parseOptions} from './options';
 import {BackpackChange, BackpackOpen} from './ui_events';
@@ -744,71 +747,6 @@ export class Backpack extends Blockly.DragTarget implements
   }
 }
 
-/**
- * Base64 encoded data uri for backpack  icon.
- */
-const backpackSvgDataUri =
-    'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC' +
-    '9zdmciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI0IDI0IiBoZWlnaHQ9IjI0cHgiIH' +
-    'ZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0cHgiIGZpbGw9IiM0NTVBNjQiPjxnPjxyZW' +
-    'N0IGZpbGw9Im5vbmUiIGhlaWdodD0iMjQiIHdpZHRoPSIyNCIvPjwvZz48Zz48Zy8+PGc+PH' +
-    'BhdGggZD0iTTEzLjk3LDUuMzRDMTMuOTgsNS4yMywxNCw1LjEyLDE0LDVjMC0xLjEtMC45LT' +
-    'ItMi0ycy0yLDAuOS0yLDJjMCwwLjEyLDAuMDIsMC4yMywwLjAzLDAuMzRDNy42OSw2LjE1LD' +
-    'YsOC4zOCw2LDExdjggYzAsMS4xLDAuOSwyLDIsMmg4YzEuMSwwLDItMC45LDItMnYtOEMxOC' +
-    'w4LjM4LDE2LjMxLDYuMTUsMTMuOTcsNS4zNHogTTExLDVjMC0wLjU1LDAuNDUtMSwxLTFzMS' +
-    'wwLjQ1LDEsMSBjMCwwLjAzLTAuMDEsMC4wNi0wLjAyLDAuMDlDMTIuNjYsNS4wMywxMi4zNC' +
-    'w1LDEyLDVzLTAuNjYsMC4wMy0wLjk4LDAuMDlDMTEuMDEsNS4wNiwxMSw1LjAzLDExLDV6IE' +
-    '0xNiwxM3YxdjAuNSBjMCwwLjI4LTAuMjIsMC41LTAuNSwwLjVTMTUsMTQuNzgsMTUsMTQuNV' +
-    'YxNHYtMUg4di0xaDdoMVYxM3oiLz48L2c+PC9nPjwvc3ZnPg==';
-
-/**
- * Base64 encoded data uri for backpack  icon when filled.
- */
-const backpackFilledSvgDataUri = 'data:image/svg+xml;base64,PD94bWwgdmVyc2' +
-    'lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYX' +
-    'RlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2Zw' +
-    'ogICB3aWR0aD0iMjQiCiAgIGhlaWdodD0iMjQiCiAgIHZpZXdCb3g9IjAgMCAyNCAyNCIKIC' +
-    'AgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnNSIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3' +
-    'JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj' +
-    '4KICA8ZGVmcwogICAgIGlkPSJkZWZzMiIgLz4KICA8ZwogICAgIGlkPSJsYXllcjEiPgogIC' +
-    'AgPGcKICAgICAgIHN0eWxlPSJmaWxsOiM0NTVhNjQiCiAgICAgICBpZD0iZzg0OCIKICAgIC' +
-    'AgIHRyYW5zZm9ybT0ibWF0cml4KDAuMjY0NTgzMzMsMCwwLDAuMjY0NTgzMzMsOC44MjQ5OT' +
-    'k3LDguODI0OTk5NykiPgogICAgICA8ZwogICAgICAgICBpZD0iZzgyNiI+CiAgICAgICAgPH' +
-    'JlY3QKICAgICAgICAgICBmaWxsPSJub25lIgogICAgICAgICAgIGhlaWdodD0iMjQiCiAgIC' +
-    'AgICAgICAgd2lkdGg9IjI0IgogICAgICAgICAgIGlkPSJyZWN0ODI0IgogICAgICAgICAgIH' +
-    'g9IjAiCiAgICAgICAgICAgeT0iMCIgLz4KICAgICAgPC9nPgogICAgICA8ZwogICAgICAgIC' +
-    'BpZD0iZzgzNCI+CiAgICAgICAgPGcKICAgICAgICAgICBpZD0iZzgyOCIgLz4KICAgICAgIC' +
-    'A8ZwogICAgICAgICAgIGlkPSJnMjIyMyI+CiAgICAgICAgICA8ZwogICAgICAgICAgICAgaW' +
-    'Q9ImcyMTAxNiI+CiAgICAgICAgICAgIDxnCiAgICAgICAgICAgICAgIHN0eWxlPSJmaWxsOi' +
-    'M0NTVhNjQiCiAgICAgICAgICAgICAgIGlkPSJnMTQ5MyIKICAgICAgICAgICAgICAgdHJhbn' +
-    'Nmb3JtPSJtYXRyaXgoMy43Nzk1Mjc2LDAsMCwzLjc3OTUyNzYsLTMzLjM1NDMzLC0zMy4zNT' +
-    'QzMykiPgogICAgICAgICAgICAgIDxnCiAgICAgICAgICAgICAgICAgaWQ9ImcxNDcxIj4KIC' +
-    'AgICAgICAgICAgICAgIDxwYXRoCiAgICAgICAgICAgICAgICAgICBpZD0icmVjdDE0NjkiCi' +
-    'AgICAgICAgICAgICAgICAgICBzdHlsZT0iZmlsbDpub25lIgogICAgICAgICAgICAgICAgIC' +
-    'AgZD0iTSAwLDAgSCAyNCBWIDI0IEggMCBaIiAvPgogICAgICAgICAgICAgIDwvZz4KICAgIC' +
-    'AgICAgICAgICA8ZwogICAgICAgICAgICAgICAgIGlkPSJnMTQ3OSI+CiAgICAgICAgICAgIC' +
-    'AgICA8ZwogICAgICAgICAgICAgICAgICAgaWQ9ImcxNDczIiAvPgogICAgICAgICAgICAgIC' +
-    'AgPGcKICAgICAgICAgICAgICAgICAgIGlkPSJnMTQ3NyI+CiAgICAgICAgICAgICAgICAgID' +
-    'xwYXRoCiAgICAgICAgICAgICAgICAgICAgIGlkPSJwYXRoMTQ3NSIKICAgICAgICAgICAgIC' +
-    'AgICAgICAgZD0ibSAxMiwzIGMgLTEuMSwwIC0yLDAuOSAtMiwyIDAsMC4xMiAwLjAxOTMsMC' +
-    '4yMjk4NDM4IDAuMDI5MywwLjMzOTg0MzggQyA3LjY4OTI5NjUsNi4xNDk4NDMzIDYsOC4zOC' +
-    'A2LDExIHYgOCBjIDAsMS4xIDAuOSwyIDIsMiBoIDggYyAxLjEsMCAyLC0wLjkgMiwtMiBWID' +
-    'ExIEMgMTgsOC4zOCAxNi4zMTA3MDMsNi4xNDk4NDMzIDEzLjk3MDcwMyw1LjMzOTg0MzggMT' +
-    'MuOTgwNzAzLDUuMjI5ODQzOCAxNCw1LjEyIDE0LDUgMTQsMy45IDEzLjEsMyAxMiwzIFogbS' +
-    'AwLDEgYyAwLjU1LDAgMSwwLjQ1IDEsMSAwLDAuMDMgLTAuMDA5NSwwLjA1OTg0NCAtMC4wMT' +
-    'k1MywwLjA4OTg0NCBDIDEyLjY2MDQ2OSw1LjAyOTg0MzggMTIuMzQsNSAxMiw1IDExLjY2LD' +
-    'UgMTEuMzM5NTMxLDUuMDI5ODQzOCAxMS4wMTk1MzEsNS4wODk4NDM4IDExLjAwOTUzMSw1Lj' +
-    'A1OTg0MzggMTEsNS4wMyAxMSw1IDExLDQuNDUgMTEuNDUsNCAxMiw0IFogbSAtMy40NzI2NT' +
-    'YyLDYuMzk4NDM4IGggMS4xNTYyNSB2IDIuNjQwNjI0IGggMC4zMDkzMzU0IGwgLTIuMzdlLT' +
-    'UsLTEuMTcxMTQ2IDEuMDgyNzEwNSwtMTBlLTcgMC4wMTEsMS4xNzExNDYgaCAwLjMzMzMwNC' +
-    'BsIC0wLjAzNTA0LC0yLjU4NzMxNSBoIDAuNTc4MTI1IDAuNTc4MTI1IGwgMC4wMTEwNSwyLj' +
-    'U4NzMxNSBoIDAuMzU2MDI0IFYgMTIuMDYwNTQ3IEggMTQuMDYyNSB2IDAuOTc4NTE1IGggMC' +
-    '4zMzAwNzggdiAtMi41NTI3MzQgaCAxLjE1NjI1IHYgMi41NTI3MzQgaCAwLjk2Njc5NyB2ID' +
-    'AuMzU3NDIyIEggOS42ODM1OTM4IDguNTI3MzQzOCA3LjYwMzUxNTYgdiAtMC4zNTc0MjIgaC' +
-    'AwLjkyMzgyODIgeiIKICAgICAgICAgICAgICAgICAgICAgLz4KICAgICAgICAgICAgICAgID' +
-    'wvZz4KICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICAgIDwvZz' +
-    '4KICAgICAgICA8L2c+CiAgICAgIDwvZz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=';
-
 Blockly.Css.register(`
 .blocklyBackpack {
   opacity: 0.4;

plugins/workspace-backpack/src/blockly-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@blockly/dev-scripts" />

plugins/workspace-search/src/blockly-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@blockly/dev-scripts" />

plugins/workspace-search/src/css.ts

@@ -10,33 +10,10 @@
  * @author [email protected] (Monica Kozbial)
  */
 
-/**
- * Base64 encoded data uri for close icon.
- */
-const closeSvgDataUri =
-    'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC' +
-    '9zdmciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE0Ij48cGF0aC' +
-    'BkPSJNMTkgNi40MUwxNy41OSA1IDEyIDEwLjU5IDYuNDEgNSA1IDYuNDEgMTAuNTkgMTIgNS' +
-    'AxNy41OSA2LjQxIDE5IDEyIDEzLjQxIDE3LjU5IDE5IDE5IDE3LjU5IDEzLjQxIDEyeiIvPj' +
-    'xwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=';
+import closeSvgDataUri from '../media/close.svg';
+import arrowDownSvgDataUri from '../media/keyboard_arrow_down.svg';
+import arrowUpSvgDataUri from '../media/keyboard_arrow_up.svg';
 
-/**
- * Base64 encoded data uri for keyboard arrow down icon.
- */
-const arrowDownSvgDataUri =
-    'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC' +
-    '9zdmciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE0Ij48cGF0aC' +
-    'BkPSJNNy40MSA4LjU5TDEyIDEzLjE3bDQuNTktNC41OEwxOCAxMGwtNiA2LTYtNiAxLjQxLT' +
-    'EuNDF6Ii8+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PC9zdmc+';
-
-/**
- * Base64 encoded data uri for keyboard arrow up icon.
- */
-const arrowUpSvgDataUri =
-    'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC' +
-    '9zdmciIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE0Ij48cGF0aC' +
-    'BkPSJNNy40MSAxNS40MUwxMiAxMC44M2w0LjU5IDQuNThMMTggMTRsLTYtNi02IDZ6Ii8+PH' +
-    'BhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==';
 
 /**
  * CSS for workspace search.

plugins/zoom-to-fit/src/blockly-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@blockly/dev-scripts" />

plugins/zoom-to-fit/src/index.ts

@@ -6,6 +6,8 @@
 
 import * as Blockly from 'blockly/core';
 
+import zoomToFitSvgDataUri from '../media/zoom_reset.svg';
+
 /**
  * Class for zoom to fit control.
  */
@@ -204,18 +206,6 @@ export class ZoomToFitControl implements Blockly.IPositionable {
   }
 }
 
-/**
- * Base64 encoded data uri for zoom to fit icon.
- */
-const zoomToFitSvgDataUri =
-    'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC' +
-    '9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgZm' +
-    'lsbD0iIzU0NkU3QSI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PH' +
-    'BhdGggZD0iTTUgNi40Mkw4LjA5IDkuNSA5LjUgOC4wOSA2LjQxIDVIOVYzSDN2Nmgyem0xMC' +
-    '0zLjQxdjJoMi41N0wxNC41IDguMDlsMS40MSAxLjQxTDE5IDYuNDFWOWgyVjMuMDF6bTQgMT' +
-    'QuNTdsLTMuMDktMy4wOC0xLjQxIDEuNDFMMTcuNTkgMTlIMTV2Mmg2di02aC0yek04LjA5ID' +
-    'E0LjVMNSAxNy41OVYxNUgzdjZoNnYtMkg2LjQybDMuMDgtMy4wOXoiLz48L3N2Zz4=';
-
 Blockly.Css.register(`
 .zoomToFit {
   opacity: 0.4;