ES6 module migration, see phetsims/chipper#875

acid-base-solutions_en.html

@@ -17,6 +17,30 @@
 
 <script type="text/javascript">
 
+  window.phet = window.phet || {};
+  window.phet.chipper = window.phet.chipper || {};
+  window.phet.chipper.packageObject = {
+    "name": "acid-base-solutions",
+    "version": "1.3.0-dev.1",
+    "license": "GPL-3.0",
+    "repository": { "type": "git", "url": "https://github.com/phetsims/acid-base-solutions.git" },
+    "devDependencies": { "grunt": "~1.0.0" },
+    "phet": {
+      "requirejsNamespace": "ACID_BASE_SOLUTIONS",
+      "runnable": true,
+      "supportedBrands": [ "phet", "adapted-from-phet" ],
+      "simulation": true
+    },
+    "eslintConfig": { "extends": "../chipper/eslint/sim_eslintrc.js" }
+  };
+  window.phet.chipper.stringRepos = [ {
+    "repo": "acid-base-solutions",
+    "requirejsNamespace": "ACID_BASE_SOLUTIONS"
+  }, { "repo": "joist", "requirejsNamespace": "JOIST" }, {
+    "repo": "scenery-phet",
+    "requirejsNamespace": "SCENERY_PHET"
+  }, { "repo": "sun", "requirejsNamespace": "SUN" }, { "repo": "tambo", "requirejsNamespace": "TAMBO" } ];
+
   // Identify the brand (assume generated brand if not provided with query parameters)
   const brandMatch = location.search.match( /brand=([^&]+)/ );
   const brand = brandMatch ? decodeURIComponent( brandMatch[ 1 ] ) : 'adapted-from-phet';
@@ -28,6 +52,7 @@
   // Preloads, with more included for phet-io brand
   let preloads = [
     '../sherpa/lib/mdn-array-from-polyfill.js',
+    '../sherpa/lib/es6-promise-1e68dc.auto.min.js',
     '../joist/js/splash.js',
     '../sherpa/lib/jquery-2.1.0.js',
     '../sherpa/lib/lodash-4.17.4.js',
@@ -55,25 +80,28 @@
     ] );
   }
 
+  // TODO: es6 modules won't need a "main" param in this function
   // Loads a synchronously-executed asynchronously-downloaded script tag, with optional data-main parameter.
   // See http://www.html5rocks.com/en/tutorials/speed/script-loading/ for more about script loading. It helps to
   // load all of the scripts with this method, so they are treated the same (and placed in the correct execution
   // order).
-  const loadURL = ( preloadURL, main ) => {
+  const loadURL = ( preloadURL, type = 'text/javascript' ) => {
     const script = document.createElement( 'script' );
-    if ( typeof main === 'string' ) {
-      script.setAttribute( 'data-main', main );
-    }
-    script.type = 'text/javascript';
+    script.type = type;
     script.src = preloadURL + queryAppend;
     script.async = false;
     document.head.appendChild( script );
   };
 
+  // Kick off string loading immediately
+  loadURL( '../chipper/js/load-runtime-strings.js' );
+
   // Queue all of the preloads to be loaded.
-  preloads.forEach( loadURL );
+  preloads.forEach( preload => loadURL( preload ) );
 
-  loadURL( '../sherpa/lib/require-2.3.6.js', 'js/acid-base-solutions-config.js' );
+  // Module loading in compilation-free (development) mode will be kicked off once strings are loaded.
+  // This is done in load-runtime-strings.js
+  window.phet.chipper.loadModules = () => loadURL( 'js/acid-base-solutions-main.js', 'module' );
 </script>
 </body>
 </html>

js/acid-base-solutions-main.js

@@ -6,38 +6,34 @@
  * @author Andrew Zelenkov (Mlearner)
  * @author Chris Malley (PixelZoom, Inc.)
  */
-define( require => {
-  'use strict';
 
-  // modules
-  const IntroductionScreen = require( 'ACID_BASE_SOLUTIONS/introduction/IntroductionScreen' );
-  const MySolutionScreen = require( 'ACID_BASE_SOLUTIONS/mysolution/MySolutionScreen' );
-  const Sim = require( 'JOIST/Sim' );
-  const SimLauncher = require( 'JOIST/SimLauncher' );
-  const Tandem = require( 'TANDEM/Tandem' );
+import Sim from '../../joist/js/Sim.js';
+import SimLauncher from '../../joist/js/SimLauncher.js';
+import Tandem from '../../tandem/js/Tandem.js';
+import acidBaseSolutionsStrings from './acid-base-solutions-strings.js';
+import IntroductionScreen from './introduction/IntroductionScreen.js';
+import MySolutionScreen from './mysolution/MySolutionScreen.js';
 
-  // strings
-  const acidBaseSolutionsTitleString = require( 'string!ACID_BASE_SOLUTIONS/acid-base-solutions.title' );
+const acidBaseSolutionsTitleString = acidBaseSolutionsStrings[ 'acid-base-solutions' ].title;
 
-  // constants
-  const tandem = Tandem.ROOT;
+// constants
+const tandem = Tandem.ROOT;
 
-  const simOptions = {
-    credits: {
-      leadDesign: 'Kelly Lancaster',
-      softwareDevelopment: 'Chris Malley (PixelZoom, Inc.)',
-      team: 'Bryce Gruneich, Patricia Loeblein, Emily B. Moore, Robert Parson, Kathy Perkins',
-      qualityAssurance: 'Steele Dalton, Bryce Griebenow, Elise Morgan, Oliver Orejola, Benjamin Roberts, Bryan Yoelin',
-      thanks: '\u2022 Conversion of this simulation to HTML5 was funded in part by the Royal Society of Chemistry.<br>' +
-              '\u2022 Thanks to Mobile Learner Labs for working with the PhET development team to convert this simulation to HTML5.'
-    }
-  };
+const simOptions = {
+  credits: {
+    leadDesign: 'Kelly Lancaster',
+    softwareDevelopment: 'Chris Malley (PixelZoom, Inc.)',
+    team: 'Bryce Gruneich, Patricia Loeblein, Emily B. Moore, Robert Parson, Kathy Perkins',
+    qualityAssurance: 'Steele Dalton, Bryce Griebenow, Elise Morgan, Oliver Orejola, Benjamin Roberts, Bryan Yoelin',
+    thanks: '\u2022 Conversion of this simulation to HTML5 was funded in part by the Royal Society of Chemistry.<br>' +
+            '\u2022 Thanks to Mobile Learner Labs for working with the PhET development team to convert this simulation to HTML5.'
+  }
+};
 
-  SimLauncher.launch( () => {
-    const screens = [
-      new IntroductionScreen( tandem.createTandem( 'introductionScreen' ) ),
-      new MySolutionScreen( tandem.createTandem( 'mySolutionScreen' ) )
-    ];
-    new Sim( acidBaseSolutionsTitleString, screens, simOptions ).start();
-  } );
+SimLauncher.launch( () => {
+  const screens = [
+    new IntroductionScreen( tandem.createTandem( 'introductionScreen' ) ),
+    new MySolutionScreen( tandem.createTandem( 'mySolutionScreen' ) )
+  ];
+  new Sim( acidBaseSolutionsTitleString, screens, simOptions ).start();
 } );

js/acidBaseSolutions.js

@@ -5,11 +5,7 @@
  *
  * @author Chris Malley (PixelZoom, Inc.)
  */
-define( require => {
-  'use strict';
 
-  // modules
-  const Namespace = require( 'PHET_CORE/Namespace' );
+import Namespace from '../../phet-core/js/Namespace.js';
 
-  return new Namespace( 'acidBaseSolutions' );
-} );
+export default new Namespace( 'acidBaseSolutions' );

js/common/ABSColors.js

@@ -5,57 +5,54 @@
  *
  * @author Chris Malley (PixelZoom, Inc.)
  */
-define( require => {
-  'use strict';
-
-  // modules
-  const acidBaseSolutions = require( 'ACID_BASE_SOLUTIONS/acidBaseSolutions' );
-  const Color = require( 'SCENERY/util/Color' );
-  const PhetColorScheme = require( 'SCENERY_PHET/PhetColorScheme' );
-
-  // constants
-  const GRAY_MOLECULE = 'rgb(120,120,120)';
-
-  const ABSColors = {
-
-    SCREEN_BACKGROUND: 'white',
-
-    CONTROL_PANEL_BACKGROUND: 'rgb(208,212,255)',
-
-    PH_PAPER: 'rgb(217,215,154)', // color of blank pH paper, cream
-
-    // pH colors, ordered from pH value 0-14, type Color because we'll be interpolating
-    PH: [
-      new Color( 182, 70, 72 ),
-      new Color( 196, 80, 86 ),
-      new Color( 213, 83, 71 ),
-      new Color( 237, 123, 83 ),
-      new Color( 246, 152, 86 ),
-      new Color( 244, 158, 79 ),
-      new Color( 243, 160, 78 ),
-      new Color( 244, 182, 67 ),
-      new Color( 231, 201, 75 ),
-      new Color( 93, 118, 88 ),
-      new Color( 30, 92, 89 ),
-      new Color( 34, 90, 105 ),
-      new Color( 39, 87, 111 ),
-      new Color( 27, 67, 90 ),
-      new Color( 0, 34, 52 )
-    ],
-
-    // The field names here must correspond to the 'key' fields in AqueousSolution.molecules.
-    MOLECULES: {
-      A: 'rgb(0,170,255)',
-      B: GRAY_MOLECULE,
-      BH: 'rgb(255,170,0)',
-      H2O: 'rgb(164,189,193)',
-      H3O: PhetColorScheme.RED_COLORBLIND,
-      HA: GRAY_MOLECULE,
-      M: 'rgb(255,170,0)',
-      MOH: GRAY_MOLECULE,
-      OH: 'rgb(90,90,255)'
-    }
-  };
-
-  return acidBaseSolutions.register( 'ABSColors', ABSColors );
-} );
+
+import PhetColorScheme from '../../../scenery-phet/js/PhetColorScheme.js';
+import Color from '../../../scenery/js/util/Color.js';
+import acidBaseSolutions from '../acidBaseSolutions.js';
+
+// constants
+const GRAY_MOLECULE = 'rgb(120,120,120)';
+
+const ABSColors = {
+
+  SCREEN_BACKGROUND: 'white',
+
+  CONTROL_PANEL_BACKGROUND: 'rgb(208,212,255)',
+
+  PH_PAPER: 'rgb(217,215,154)', // color of blank pH paper, cream
+
+  // pH colors, ordered from pH value 0-14, type Color because we'll be interpolating
+  PH: [
+    new Color( 182, 70, 72 ),
+    new Color( 196, 80, 86 ),
+    new Color( 213, 83, 71 ),
+    new Color( 237, 123, 83 ),
+    new Color( 246, 152, 86 ),
+    new Color( 244, 158, 79 ),
+    new Color( 243, 160, 78 ),
+    new Color( 244, 182, 67 ),
+    new Color( 231, 201, 75 ),
+    new Color( 93, 118, 88 ),
+    new Color( 30, 92, 89 ),
+    new Color( 34, 90, 105 ),
+    new Color( 39, 87, 111 ),
+    new Color( 27, 67, 90 ),
+    new Color( 0, 34, 52 )
+  ],
+
+  // The field names here must correspond to the 'key' fields in AqueousSolution.molecules.
+  MOLECULES: {
+    A: 'rgb(0,170,255)',
+    B: GRAY_MOLECULE,
+    BH: 'rgb(255,170,0)',
+    H2O: 'rgb(164,189,193)',
+    H3O: PhetColorScheme.RED_COLORBLIND,
+    HA: GRAY_MOLECULE,
+    M: 'rgb(255,170,0)',
+    MOH: GRAY_MOLECULE,
+    OH: 'rgb(90,90,255)'
+  }
+};
+
+acidBaseSolutions.register( 'ABSColors', ABSColors );
+export default ABSColors;

js/common/ABSConstants.js

@@ -5,25 +5,22 @@
  *
  * @author Andrey Zelenkov (Mlearner)
  */
-define( require => {
-  'use strict';
 
-  // modules
-  const acidBaseSolutions = require( 'ACID_BASE_SOLUTIONS/acidBaseSolutions' );
-  const Range = require( 'DOT/Range' );
-  const RangeWithValue = require( 'DOT/RangeWithValue' );
+import Range from '../../../dot/js/Range.js';
+import RangeWithValue from '../../../dot/js/RangeWithValue.js';
+import acidBaseSolutions from '../acidBaseSolutions.js';
 
-  // constants
-  const WEAK_STRENGTH_MAX = 1E2;
+// constants
+const WEAK_STRENGTH_MAX = 1E2;
 
-  const ABSConstants = {
-    CONCENTRATION_RANGE: new RangeWithValue( 1E-3, 1, 1E-2 ),
-    PH_RANGE: new Range( 0, 14 ),
-    WATER_EQUILIBRIUM_CONSTANT: 1E-14,
-    WATER_CONCENTRATION: 55.6, // water concentration when it's used as a solvent, mol/L
-    WEAK_STRENGTH_RANGE: new RangeWithValue( 1E-10, WEAK_STRENGTH_MAX, 1E-7 ),
-    STRONG_STRENGTH: WEAK_STRENGTH_MAX + 1 // arbitrary, but needs to be greater than weak max
-  };
+const ABSConstants = {
+  CONCENTRATION_RANGE: new RangeWithValue( 1E-3, 1, 1E-2 ),
+  PH_RANGE: new Range( 0, 14 ),
+  WATER_EQUILIBRIUM_CONSTANT: 1E-14,
+  WATER_CONCENTRATION: 55.6, // water concentration when it's used as a solvent, mol/L
+  WEAK_STRENGTH_RANGE: new RangeWithValue( 1E-10, WEAK_STRENGTH_MAX, 1E-7 ),
+  STRONG_STRENGTH: WEAK_STRENGTH_MAX + 1 // arbitrary, but needs to be greater than weak max
+};
 
-  return acidBaseSolutions.register( 'ABSConstants', ABSConstants );
-} );
+acidBaseSolutions.register( 'ABSConstants', ABSConstants );
+export default ABSConstants;

js/common/enum/SolutionType.js

@@ -5,19 +5,16 @@
  *
  * @author Andrey Zelenkov (Mlearner)
  */
-define( require => {
-  'use strict';
 
-  // modules
-  const acidBaseSolutions = require( 'ACID_BASE_SOLUTIONS/acidBaseSolutions' );
+import acidBaseSolutions from '../../acidBaseSolutions.js';
 
-  const SolutionType = Object.freeze( {
-    WATER: 'water',
-    STRONG_ACID: 'strongAcid',
-    WEAK_ACID: 'weakAcid',
-    STRONG_BASE: 'strongBase',
-    WEAK_BASE: 'weakBase'
-  } );
+const SolutionType = Object.freeze( {
+  WATER: 'water',
+  STRONG_ACID: 'strongAcid',
+  WEAK_ACID: 'weakAcid',
+  STRONG_BASE: 'strongBase',
+  WEAK_BASE: 'weakBase'
+} );
 
-  return acidBaseSolutions.register( 'SolutionType', SolutionType );
-} );
+acidBaseSolutions.register( 'SolutionType', SolutionType );
+export default SolutionType;