fix: advanced playground and playground to work when hosted (google#6021

)
alschmiedt · Mar 23, 2022 · 364bf14 · 364bf14
1 parent c7a359a
commit 364bf14
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 40 deletions.
diff --git a/tests/playgrounds/advanced_playground.html b/tests/playgrounds/advanced_playground.html
@@ -3,29 +3,14 @@
 <head>
 <meta charset="utf-8">
 <title>Advanced Blockly Playground</title>
-<script src="../../blockly_uncompressed.js"></script>
-<script src="../../msg/messages.js"></script>
-<script src="../themes/test_themes.js"></script>
+<script src="prepare.js"></script>
 <script src="./screenshot.js"></script>
+<script src="../themes/test_themes.js"></script>
 <script src="../../node_modules/@blockly/dev-tools/dist/index.js"></script>
 <script src="../../node_modules/@blockly/theme-modern/dist/index.js"></script>
 
-<script>
-// Custom requires for the playground.
-// Rendering.
-goog.require('Blockly.minimalist.Renderer');
-goog.require('Blockly.Themes.Zelos');
-
-// Other.
-goog.require('Blockly.WorkspaceCommentSvg');
-goog.require('Blockly.libraryBlocks');
-goog.require('Blockly.Dart.all');
-goog.require('Blockly.JavaScript.all');
-goog.require('Blockly.Lua.all');
-goog.require('Blockly.PHP.all');
-goog.require('Blockly.Python.all');
-</script>
-<script>
+<script type="module">
+import Blockly from './blockly.mjs';
 'use strict';
 
 function start() {
@@ -144,7 +129,7 @@
  // Adds a default-sized workspace comment to the workspace.
  menuOptions.push(Blockly.ContextMenu.workspaceCommentOption(workspace, e));
 }
-
+start();
 </script>
 
 <style>
@@ -169,7 +154,7 @@
  }
 </style>
 </head>
-<body onload="start()">
+<body>
  <div id="root"></div>
 </body>
 </html>
diff --git a/tests/playgrounds/prepare.js b/tests/playgrounds/prepare.js
@@ -70,16 +70,30 @@
  });
  </script>`);
  } else {
+ // The below code is necessary for a few reasons:
+ // - We need an absolute path instead of relative path because the
+ // advanced_playground the and regular playground are in different folders.
+ // - We need to get the root directory for blockly because it is
+ // different for github.io, appspot and local.
+ const files = [
+ 'blockly_compressed.js',
+ 'msg/messages.js',
+ 'blocks_compressed.js',
+ 'dart_compressed.js',
+ 'javascript_compressed.js',
+ 'lua_compressed.js',
+ 'php_compressed.js',
+ 'python_compressed.js',
+ ];
+
  // We need to load Blockly in compiled mode.
+ const hostName = window.location.host.replaceAll('.', '\\.');
+ const matches = new RegExp(hostName + '\\/(.*)tests').exec(window.location.href);
+ const root = matches && matches[1] ? matches[1] : '';
 
  // Load blockly_compressed.js et al. using <script> tags.
- document.write('<script src="../../blockly_compressed.js"></script>');
- document.write('<script src="../../msg/messages.js"></script>');
- document.write('<script src="../../blocks_compressed.js"></script>');
- document.write('<script src="../../dart_compressed.js"></script>');
- document.write('<script src="../../javascript_compressed.js"></script>');
- document.write('<script src="../../lua_compressed.js"></script>');
- document.write('<script src="../../php_compressed.js"></script>');
- document.write('<script src="../../python_compressed.js"></script>');
+ for (let i = 0; i < files.length; i++) {
+ document.write('<script src="/' + root + files[i] + '"></script>');
+ }
  }
 })();
diff --git a/tests/themes/test_themes.js b/tests/themes/test_themes.js
@@ -5,24 +5,22 @@
  */
 'use strict';
 
-goog.provide('Blockly.TestThemes');
-
 
 /**
  * A theme with classic colours but enables start hats.
  */
-Blockly.Themes.TestHats = Blockly.Theme.defineTheme('testhats', {
+const TestHatsTheme = Blockly.Theme.defineTheme('testhats', {
  'base': Blockly.Themes.Classic
 });
-Blockly.Themes.TestHats.setStartHats(true);
+TestHatsTheme.setStartHats(true);
 
 /**
  * A theme with classic colours but a different font.
  */
-Blockly.Themes.TestFont = Blockly.Theme.defineTheme('testfont', {
+const TestFontTheme = Blockly.Theme.defineTheme('testfont', {
  'base': Blockly.Themes.Classic
 });
-Blockly.Themes.TestFont.setFontStyle({
+TestFontTheme.setFontStyle({
  'family': '"Times New Roman", Times, serif',
  'weight': null, // Use default font-weight
  'size': 16
@@ -33,9 +31,9 @@ Blockly.Themes.TestFont.setFontStyle({
  * @type {!Object<string, Blockly.Theme>}
  * @private
  */
-Blockly.Themes.testThemes_ = {
- 'Test Hats': Blockly.Themes.TestHats,
- 'Test Font': Blockly.Themes.TestFont
+const testThemes_ = {
+ 'Test Hats': TestHatsTheme,
+ 'Test Font': TestFontTheme
 };
 
 /**
@@ -45,7 +43,7 @@ Blockly.Themes.testThemes_ = {
  * @package
  */
 function getTestTheme(value) {
- return Blockly.Themes.testThemes_[value];
+ return testThemes_[value];
 }
 
 /**
@@ -54,7 +52,7 @@ function getTestTheme(value) {
  */
 function populateTestThemes() {
  var themeChanger = document.getElementById('themeChanger');
- var keys = Object.keys(Blockly.Themes.testThemes_);
+ var keys = Object.keys(testThemes_);
  for (var i = 0, key; (key = keys[i]); i++) {
  var option = document.createElement('option');
  option.setAttribute('value', key);