refactor(tests): Revise tests/playgrounds/prepare.js as tests/bootstrap.js to improve support for ES modules and post-bootstrap scripts (#6214)

* refactor(tests): Move and rename prepare.js, blockly.mjs

  Since prepare.js and blockly.mjs are going to be needed for running
  all tests in uncompiled mode (not just the playgrounds), move them
  tests/.  Further, rename prepare.js to bootstrap.js to better reflect
  its purpose.

* feat(tests): Introduce BLOCKLY_BOOTSTRAP_OPTIONS

  Provide a mechanism for web pages that use bootstrap.js to control
  what is loaded and how.

* fix(tests): Use the blockly repository path for all script src= URLs

  Previously the (non-advanced) playground was only correctly loadging
  on localhost because you can put an arbitrary number of "../"s in front
  of a relative URL and it just takes you to the root directory.

* fix(tests): Don't use template literals in bootstrap.js

  This is necessary (but not necessarily sufficient) to be able to
  load the file in IE 11.

* fix(tests): Throw error if attempting to bootstrap in node.js

* feat(tests): Make bootstrap.js more configurable.

* Terminology change: use "compressed" and "uncompressed" to describe
  what Closure Compiler calls "compiled" and "uncompiled", to reduce
  confusion with the compilation that will be done by tsc.

* Get the list of modules to bootstrap (in compressed mode), or
  scripts to load (in compressed mode) from BLOCKLY_BOOTSTRAP_OPTIONS,
  to allow calling scripts to to specify exactly what to load.

* feat(tests): Use a proper quote function

  We need to generate string literals.  Best to use a quote function
  instead of concatenating on quote marks withou escaping.  Copy a
  well-tested one from Code City.

* feat(tests): Support an additionalScripts option

  This is a list of scripts to load (in order) once the required modules
  have been bootstrapped.

  We do this using goog.addDependency to make the first script depend
  on the required modules, then each subsequent script depend on the
  previous one, and then finally goog.bootstrapping the last such script.

* refactor(tests): Remove special handling of msg/messages.js

* refactor(tests): Use additionalScripts for all script loading

  Use additionalScripts option for all script loading in
  playground.html and advanced_playground.html.

* refactor(tests): Use bootstrap instead of uncompressed in Mocha tests

  Use tests/bootstrap.js instead of blockly_uncompressed.js to load
  blockly in uncompressed mode in the Mocha tests.

  This entails adding a new item, despFiles, to BLOCKLY_BOOTSTRAP_OPTIONS,
  to allow tests/deps.mocha.js to be loaded at the appropriate point.

  Mention of blockly_uncompressed.js is removed from
  tests/mocah/.mocharc.js; it's not clear to me what effect the "file:"
  directive in this file might have previously had and I was not able to
  find documentation for it on mochajs.org, but in any case removing it
  appears to have had no ill effect.

* refactor(tests): Use bootstrap instead of uncompressed in generator tests

  This entails adding an additional check in bootstrap so as to load
  uncompressed when loading from a file: URL, since these are not
  localhost URLs - though in fact the generator tests run equally well
  in compressed mode, albeit against (for now) the previously-check-in
  build products rather than the live code.

* refactor(test): Use bootstrap.js in multi_playground.html

  This removes the last use of load_all.js, so remove it.

* chore(tests): Delete blockly_uncompressed.js

  Its function has now been entirely subsumed by tests/bootstrap.js,
  so remove it and update any remaining mentions of it.

  Also fix formatting and positions of some comments in playground.html.

* fix(tests): Rewrite bootstrap sequencing code

  An earlier commit modified the generated <script> to use
  goog.addDependency to trick the debug module loader into loading
  .additionalScripts (via goog.bootstrap), but it turns out there is
  a small problem: scripts like msg/messages.js have undeclared
  dependencies on the Blockly module, and without a call to
  goog.require('Blockly') in them they can end up being run before
  the Blockly module is fully loaded.

  (This problem only occurs when there are ES Modules, rather than
  merely goog.modules, in the mix.)

  Fix this by adding a script, bootstrap_helper.js, to be loaded
  options.requires and any options.additionalScripts that makes an
  explicit call to goog.require for each of option.requires.

  Also refactor the code so that instead of generating a loop which
  calls goog.addDependency, we generate the addDependency calls
  directly.  This makes debugging a bit easer as we can use the browser's
  dev tools to inspect the generated calls in the DOM tree.

* fix(tests): Prevent spurious transpilation warnings

  For some reason when the debug module loader encounters ES modules
  it starts to complain about being unable to transpile some ES202x
  features in other (non-ESM) modules, even though it doesn't normally
  try to transpile those.

  Since uncompressed-mode testing is almost exclusively on modern
  browsers we don't care about transpiling these features, so suppress
  the warnings instead.

* refactor(tests): Rename blockly.mjs to bootstrap_done.mjs; simplify

  Since blockly.mjs is no longer returning just the exports object
  from core/blockly.js (see PR #5995), it might be better named after
  its actual purpose: to wait for bootstrapping to be done.

  Remove all the code that was used to pass the blockly.js exports
  object along from the bootstrap callback to the blockly.mjs export,
  since there's no reason to go to a lot of trouble to set a local
  variable named Blockly to the same value as a global variable named
  Blockly.

  (Something like this may be needed again in future, but certainly in
  a different form.)

* chore(tests): Use freshly-build files in compressed mode.

  Use the freshly-built build/*_compresssed.js files when bootstrapping
  in compressed mode, rather than using the checked-in files in the
  repository root.

  This helps ensure that compressed and uncompressed mode will be
  testing (as closely as possible) the same code.

* chore(tests): Rename BlocklyLoader to blocklyLoader; record compressed

  - Rename the BlocklyLoader global to blocklyLoader (since it is not
    a class constructor).
  - Create it regardless of whether we are bootstrapping in
    uncompressed or loading compressed via <script> tags.
  - Record which we are doing as .compressed, and use this property
    to choose playground background colour.

* chore(tests): Resolve comments for PR #6214

  Mostly documentation changes, but notably renaming blocklyLoader to
  bootstrapInfo.

* Revert "chore(tests): Use freshly-build files in compressed mode."

  This reverts commit de8d356838.
This commit is contained in:
Christopher Allen
2022-06-15 19:35:01 +01:00
committed by GitHub
parent 16b5ccd2ea
commit 46df7d132d
14 changed files with 455 additions and 374 deletions

View File

@@ -3,15 +3,23 @@
<head>
<meta charset="utf-8">
<title>Advanced Blockly Playground</title>
<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>
var BLOCKLY_BOOTSTRAP_OPTIONS = {
additionalScripts: [
'msg/messages.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">
import Blockly from './blockly.mjs';
'use strict';
// Wait for Blockly to finish loading.
import './bootstrap_done.mjs';
function start() {
setBackgroundColour();

View File

@@ -1,39 +0,0 @@
/**
* @license
* Copyright 2022 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
/**
* @fileoverview Finishes loading Blockly and exports it as this
* module's default export.
*
* It is exported as the default export to avoid having to
* re-export each property on Blockly individually, because you
* can't do:
*
* export * from <dynamically computed source>; // SYNTAX ERROR
*
* You must use a <script> tag to load prepare.js first, before
* importing this module in a <script type=module> to obtain the
* loaded value.
*
* See tests/playground.html for example usage.
*/
let Blockly;
if (window.BlocklyLoader) {
// Uncompiled mode. Use top-level await
// (https://v8.dev/features/top-level-await) to block loading of
// this module until goog.bootstrap()ping of Blockly is finished.
await window.BlocklyLoader;
Blockly = globalThis.Blockly;
} else if (window.Blockly) {
// Compiled mode. Retrieve the pre-installed Blockly global.
Blockly = globalThis.Blockly;
} else {
throw new Error('neither window.Blockly nor window.BlocklyLoader found');
}
export default Blockly;

View File

@@ -1,53 +0,0 @@
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
/**
* @fileoverview Loads uncompressed Blockly when running locally. Loads
* compressed otherwise.
*/
'use strict';
/**
* Loads all the compressed or uncompressed dependencies necessary to run the
* playground. This is necessary since the goog.module conversion. Please see
* issue #5557 for more information.
*/
(function() {
const isIe = navigator.userAgent.indexOf('MSIE') !== -1 ||
navigator.appVersion.indexOf('Trident/') > -1;
if ((location.hostname === 'localhost' || location.hostname === '127.0.0.1' ||
location.hostname === '[::1]') &&
!isIe) {
document.write(
`<script src="../blockly_uncompressed.js" id="blockly-uncompressed-script"></script>`);
document.write(`<script src="../msg/messages.js"></script>`);
document.write(`<script src="../tests/themes/test_themes.js"></script>`);
document.write(
`<script src="../node_modules/@blockly/block-test/dist/index.js"></script>`);
document.write(`<script>
// Custom requires for the playground.
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');
goog.require('Blockly.WorkspaceCommentSvg');
</script>`);
} else {
document.write(
`<script src="../blockly_compressed.js" id="blockly-compressed-script"></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>`);
document.write(`<script src="../msg/messages.js"></script>`);
}
})();

View File

@@ -1,99 +0,0 @@
/**
* @license
* Copyright 2021 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
/**
* @fileoverview Load this file in a <script> tag to prepare for
* importing Blockly into a web page.
*
* You must use a <script> tag to load this script first, then
* import blockly.mjs in a <script type=module> to obtain the
* loaded value.
*
* See tests/playground.html for example usage.
*/
'use strict';
(function() {
// Decide whether we can load Blockly uncompiled, or must load the
// compiled version. Please see issue #5557 for more information.
const isIe = navigator.userAgent.indexOf('MSIE') !== -1 ||
navigator.appVersion.indexOf('Trident/') > -1;
const localhosts = ['localhost', '127.0.0.1', '[::1]'];
if (localhosts.includes(location.hostname) && !isIe) {
// We can load Blockly in uncompiled mode.
// Disable loading of closure/goog/deps.js (which doesn't exist).
window.CLOSURE_NO_DEPS = true;
// Load the Closure Library's base.js (the only part of the
// libary we use, mainly for goog.require / goog.provide /
// goog.module).
document.write('<script src="../../closure/goog/base.js"></script>');
// Load dependency graph info from build/deps.js. To update
// deps.js, run `npm run build:deps`.
document.write('<script src="../../build/deps.js"></script>');
// Msg loading kludge. This should go away once #5409 and/or
// #1895 are fixed.
// Load messages into a temporary Blockly.Msg object, deleting it
// afterwards (after saving the messages!)
window.Blockly = {Msg: Object.create(null)};
document.write('<script src="../../msg/messages.js"></script>');
document.write(`
<script>
window.BlocklyMsg = window.Blockly.Msg;
delete window.Blockly;
</script>`);
document.write(`
<script>
window.BlocklyLoader = new Promise((resolve, reject) => {
goog.bootstrap(
[
'Blockly',
'Blockly.libraryBlocks',
'Blockly.Dart.all',
'Blockly.JavaScript.all',
'Blockly.Lua.all',
'Blockly.PHP.all',
'Blockly.Python.all',
], resolve);
}).then(() => {
// Copy Messages from temporary Blockly.Msg object to the real one:
Object.assign(goog.module.get('Blockly').Msg, window.BlocklyMsg);
}).then(() => {
return goog.module.get('Blockly');
});
</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.
for (let i = 0; i < files.length; i++) {
document.write('<script src="/' + root + files[i] + '"></script>');
}
}
})();