phetsims / tambo

library containing code to support sonification of PhET simulations
MIT License
2 stars 4 forks source link

Build as a standalone repo #171

Closed zepumph closed 1 year ago

zepumph commented 2 years ago

@jessegreenberg showed interest in this, and I think it will be straight forward. Let me take a look!

zepumph commented 2 years ago

I experimented with this and don't think we should proceed. In my opinion, it may be best and easiest to start using phet-lib for these cases, though it comes with much more baggage, having a single way to ship and version this code will likely be best and easiest.

Here is the patch where I added the ability to specify a different standalone filename, and supported tambo in having a standalone runnable with window globals for all classes:

```diff Index: tambo/js/main.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/tambo/js/main.ts b/tambo/js/main.ts new file mode 100644 --- /dev/null (date 1666721987326) +++ b/tambo/js/main.ts (date 1666721987326) @@ -0,0 +1,64 @@ +// Copyright 2022, University of Colorado Boulder + +/** + * Creates the main launch point for imports for this repository. + * + * @author John Blanco + * @author Michael Kauzmann (PhET Interactive Simulations) + */ + +import './shared-sound-players/accordionBoxClosedSoundPlayer.js'; +import './shared-sound-players/accordionBoxOpenedSoundPlayer.js'; +import './shared-sound-players/boundaryReachedSoundPlayer.js'; +import './shared-sound-players/checkboxCheckedSoundPlayer.js'; +import './shared-sound-players/checkboxUncheckedSoundPlayer.js'; +import './shared-sound-players/generalBoundaryBoopSoundPlayer.js'; +import './shared-sound-players/generalCloseSoundPlayer.js'; +import './shared-sound-players/generalOpenSoundPlayer.js'; +import './shared-sound-players/generalSoftClickSoundPlayer.js'; +import './shared-sound-players/grabSoundPlayer.js'; +import './shared-sound-players/nullSoundPlayer.js'; +import './shared-sound-players/pauseSoundPlayer.js'; +import './shared-sound-players/playSoundPlayer.js'; +import './shared-sound-players/pushButtonSoundPlayer.js'; +import './shared-sound-players/releaseSoundPlayer.js'; +import './shared-sound-players/resetAllSoundPlayer.js'; +import './shared-sound-players/softClickSoundPlayer.js'; +import './shared-sound-players/stepBackwardSoundPlayer.js'; +import './shared-sound-players/stepForwardSoundPlayer.js'; +import './shared-sound-players/switchToLeftSoundPlayer.js'; +import './shared-sound-players/switchToRightSoundPlayer.js'; +import './shared-sound-players/toggleOffSoundPlayer.js'; +import './shared-sound-players/toggleOnSoundPlayer.js'; +import './sound-generators/CompositeSoundClip.js'; +import './sound-generators/ContinuousPropertySoundGenerator.js'; +import './sound-generators/DiscreteSoundGenerator.js'; +import './sound-generators/MultiClip.js'; +import './sound-generators/NoiseGenerator.js'; +import './sound-generators/OscillatorSoundGenerator.js'; +import './sound-generators/PitchedPopGenerator.js'; +import './sound-generators/PropertyMultiClip.js'; +import './sound-generators/SoundClip.js'; +import './sound-generators/SoundClipChord.js'; +import './sound-generators/SoundClipPlayer.js'; +import './sound-generators/SoundGenerator.js'; +import './sound-generators/ValueChangeSoundPlayer.js'; +import './AmplitudeModulator.js'; +import './audioContextStateChangeMonitor.js'; +import './base64SoundToByteArray.js'; +import './BinMapper.js'; +import './multiSelectionSoundPlayerFactory.js'; +import './peak-detector.js'; +import './PeakDetectorAudioNode.js'; +import './phetAudioContext.js'; +import './soundConstants.js'; +import './SoundLevelEnum.js'; +import './soundManager.js'; +import './SoundUtils.js'; +import tambo from './tambo.js'; +import './tambo-main.js'; +import './TamboStrings.js'; +import './TSoundPlayer.js'; +import './WrappedAudioBuffer.js'; + +export default tambo; \ No newline at end of file Index: chipper/js/grunt/Gruntfile.js IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/chipper/js/grunt/Gruntfile.js b/chipper/js/grunt/Gruntfile.js --- a/chipper/js/grunt/Gruntfile.js (revision 5f4420a22e41980d814f557eb3c7ef487b46393b) +++ b/chipper/js/grunt/Gruntfile.js (date 1666722505717) @@ -207,7 +207,8 @@ --allHTML - If provided, will include the _all.html file (if it would not otherwise be built, e.g. phet brand) --XHTML - Includes an xhtml/ directory in the build output that contains a runnable XHTML form of the sim (with a separated-out JS file). - --locales={{LOCALES}} - Can be * (build all available locales, "en" and everything in babel), or a comma-separated list of locales`, + --locales={{LOCALES}} - Can be * (build all available locales, "en" and everything in babel), or a comma-separated list of locales + --tsc=true - to turn off type checking, transpiling always occurs though`, wrapTask( async () => { const buildStandalone = require( './buildStandalone' ); const buildRunnable = require( './buildRunnable' ); @@ -218,6 +219,7 @@ const fs = require( 'fs' ); const getPhetLibs = require( './getPhetLibs' ); const phetTimingLog = require( '../../../perennial-alias/js/common/phetTimingLog' ); + const _ = require( 'lodash' ); // eslint-disable-line require-statement-match await phetTimingLog.startAsync( 'grunt-build', async () => { @@ -248,7 +250,7 @@ await phetTimingLog.startAsync( 'tsc', async () => { // We must have phet-io code checked out to type check, since simLauncher imports phetioEngine - if ( brands.includes( 'phet-io' ) || brands.includes( 'phet' ) ) { + if ( grunt.option( 'tsc' ) && ( brands.includes( 'phet-io' ) || brands.includes( 'phet' ) ) ) { const results = await tsc( `../${repo}` ); reportTscResults( results, grunt ); } @@ -272,7 +274,9 @@ fs.mkdirSync( parentDir ); } - fs.writeFileSync( `${parentDir}/${repo}.min.js`, await buildStandalone( repo, minifyOptions ) ); + fs.writeFileSync( `${parentDir}/${repo}.min.js`, await buildStandalone( repo, _.merge( { + mainFile: typeof repoPackageObject.phet.buildStandalone === 'string' ? repoPackageObject.phet.buildStandalone : null + }, minifyOptions ) ) ); // Build a debug version minifyOptions.minify = false; Index: chipper/js/grunt/buildStandalone.js IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/chipper/js/grunt/buildStandalone.js b/chipper/js/grunt/buildStandalone.js --- a/chipper/js/grunt/buildStandalone.js (revision 5f4420a22e41980d814f557eb3c7ef487b46393b) +++ b/chipper/js/grunt/buildStandalone.js (date 1666722820103) @@ -34,6 +34,8 @@ const options = _.merge( { isDebug: false, + mainFile: null, // if different from the default "{{repo}}-main.js" + // {null|string[]} - if provided, exclude these preloads from the built standalone omitPreloads: null }, providedOptions ); @@ -41,7 +43,14 @@ const packageObject = grunt.file.readJSON( `../${repo}/package.json` ); assert( packageObject.phet, '`phet` object expected in package.json' ); - const webpackResult = ( await webpackBuild( repo, 'phet' ) ); + const webpackArgs = [ repo, 'phet' ]; + + // If provided, add it, otherwise don't pass in null so that it can take the default. + if ( options.mainFile ) { + webpackArgs.push( options.mainFile ); + } + + const webpackResult = ( await webpackBuild( ...webpackArgs ) ); const webpackJS = webpackResult.js; Index: tambo/package.json IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/tambo/package.json b/tambo/package.json --- a/tambo/package.json (revision a2d4aa7ee453189c87695171cc348b575878d664) +++ b/tambo/package.json (date 1666722714543) @@ -19,6 +19,8 @@ "phet", "adapted-from-phet" ], + "buildStandalone": "tambo-standalone-main.js", + "requiresLodash": true, "simFeatures": { "supportsSound": true, "supportsExtraSound": true, Index: tambo/js/tambo-standalone-main.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/tambo/js/tambo-standalone-main.ts b/tambo/js/tambo-standalone-main.ts new file mode 100644 --- /dev/null (date 1666722185438) +++ b/tambo/js/tambo-standalone-main.ts (date 1666722185438) @@ -0,0 +1,18 @@ +// Copyright 2019-2022, University of Colorado Boulder + +import axon from '../../axon/js/main.js'; // eslint-disable-line default-import-match-filename +import phetCore from '../../phet-core/js/main.js'; // eslint-disable-line default-import-match-filename +import tambo from './main.js'; // eslint-disable-line default-import-match-filename + +( function() { + + + // @ts-ignore + window.axon = axon; + + // @ts-ignore + window.phetCore = phetCore; + + // @ts-ignore + window.tambo = tambo; +} ); \ No newline at end of file Index: chipper/js/grunt/webpackBuild.js IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/chipper/js/grunt/webpackBuild.js b/chipper/js/grunt/webpackBuild.js --- a/chipper/js/grunt/webpackBuild.js (revision 5f4420a22e41980d814f557eb3c7ef487b46393b) +++ b/chipper/js/grunt/webpackBuild.js (date 1666721561637) @@ -54,9 +54,10 @@ * * @param {string} repo * @param {string} brand + * @param {string} [mainFilename] - specify if you want to build from a launch point different from "chains-main.js" for example * @returns {Promise.} - The combined JS output from the process */ -module.exports = function( repo, brand ) { +module.exports = function( repo, brand, mainFilename = `${repo}-main.js` ) { return new Promise( ( resolve, reject ) => { // Create plugins to ignore brands that we are not building at this time. Here "resource" is the module getting // imported, and "context" is the directory that holds the module doing the importing. This is split up because @@ -87,7 +88,7 @@ // Simulations or runnables will have a single entry point entry: { - repo: `../chipper/dist/js/${repo}/js/${repo}-main.js` + repo: `../chipper/dist/js/${repo}/js/${mainFilename}` }, // We output our builds to the following dir ```

Here is how I tested it:

<html>
<script src="../sherpa/lib/lodash-4.17.4.min.js"></script>
<script src="../tambo/build/tambo.min.js"></script>

</html>

I immediately ran into a problem where phet wasn't defined trying to access phet.chipper.queryParameters.supportsSound. My recommendation from this point is to instead spend time on phet-lib, since it is more streamlined into our code base (since it will do things like add initialize-globals as a preload.

Over to @jessegreenberg for next steps.

jbphet commented 1 year ago

@jessegreenberg and @zepumph - I just got tambo working from phetlib for the paper programming project (currently in the papyrus repo, but there is talk of renaming this repo). There are some awkward steps necessary to make it work, and I'll log a separate issue for that, but I'm wondering if that means this issue can be closed.

jessegreenberg commented 1 year ago

Awesome! Yes, I think phet-lib is a good way to go. I am fine closing this issue. Anyone free to reopen if there is anything else to do here.