@scratch/scratch-gui 11.0.0-beta.1

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "include": ["src"],
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+
+    /* Language and Environment */
+    "target": "ESNext",
+    "jsx": "react",
+
+    /* Modules */
+    "module": "commonjs",
+    "types": ["./src/types.d.ts"],
+
+    /* Emit */
+    "declaration": true,
+    "sourceMap": true,
+    "outDir": "./dist/types/",
+
+    /* Interop Constraints */
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+
+    /* Type Checking */
+    "strict": true,
+    "noImplicitAny": false,
+
+    /* Completeness */
+    "skipLibCheck": true
+  }
+}

package/tsconfig.test.json

@@ -0,0 +1,11 @@
+{
+  "include": ["src"],
+  "extends": ["./tsconfig.json"],
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+
+    /* Modules */
+    "module": "CommonJS",
+    "types": ["jest", "./src/types.d.ts"],
+  }
+}

package/webpack.config.js

@@ -0,0 +1,211 @@
+const path = require('path');
+const webpack = require('webpack');
+
+// Plugins
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const ScratchWebpackConfigBuilder = require('scratch-webpack-configuration');
+
+// const STATIC_PATH = process.env.STATIC_PATH || '/static';
+
+const commonHtmlWebpackPluginOptions = {
+    // Google Tag Manager ID
+    // Looks like 'GTM-XXXXXXX'
+    gtm_id: process.env.GTM_ID || '',
+
+    // Google Tag Manager env & auth info for alterative GTM environments
+    // Looks like '&gtm_auth=0123456789abcdefghijklm&gtm_preview=env-00&gtm_cookies_win=x'
+    // Taken from the middle of: GTM -> Admin -> Environments -> (environment) -> Get Snippet
+    // Blank for production
+    gtm_env_auth: process.env.GTM_ENV_AUTH || ''
+};
+
+const baseConfig = new ScratchWebpackConfigBuilder(
+    {
+        rootPath: path.resolve(__dirname),
+        enableReact: true,
+        enableTs: true,
+        shouldSplitChunks: false
+    })
+    .setTarget('browserslist')
+    .merge({
+        output: {
+            assetModuleFilename: 'static/assets/[name].[hash][ext][query]',
+            library: {
+                name: 'GUI',
+                type: 'umd2'
+            },
+            // Do not clean the JS files before building as we have two outputs to the same
+            // dist directory (the regular and the standalone version)
+            clean: false
+        },
+        resolve: {
+            fallback: {
+                Buffer: require.resolve('buffer/'),
+                stream: require.resolve('stream-browserify')
+            }
+        }
+    })
+    .addModuleRule({
+        test: /\.(svg|png|wav|mp3|gif|jpg)$/,
+        resourceQuery: /^$/, // reject any query string
+        type: 'asset' // let webpack decide on the best type of asset
+    })
+    .addPlugin(new webpack.DefinePlugin({
+        'process.env.DEBUG': Boolean(process.env.DEBUG),
+        'process.env.GA_ID': `"${process.env.GA_ID || 'UA-000000-01'}"`,
+        'process.env.GTM_ENV_AUTH': `"${process.env.GTM_ENV_AUTH || ''}"`,
+        'process.env.GTM_ID': process.env.GTM_ID ? `"${process.env.GTM_ID}"` : null
+    }))
+    .addPlugin(new CopyWebpackPlugin({
+        patterns: [
+            {
+                from: '../../node_modules/scratch-blocks/media',
+                to: 'static/blocks-media/default'
+            },
+            {
+                from: '../../node_modules/scratch-blocks/media',
+                to: 'static/blocks-media/high-contrast'
+            },
+            {
+                // overwrite some of the default block media with high-contrast versions
+                // this entry must come after copying scratch-blocks/media into the high-contrast directory
+                from: 'src/lib/themes/high-contrast/blocks-media',
+                to: 'static/blocks-media/high-contrast',
+                force: true
+            },
+            {
+                context: '../../node_modules/@scratch/scratch-vm/dist/web',
+                from: 'extension-worker.{js,js.map}',
+                noErrorOnMissing: true
+            },
+            {
+                context: '../../node_modules/scratch-storage/dist/web',
+                from: 'chunks/fetch-worker.*.{js,js.map}',
+                noErrorOnMissing: true
+            }
+        ]
+    }));
+
+if (!process.env.CI) {
+    baseConfig.addPlugin(new webpack.ProgressPlugin());
+}
+
+// build the shipping library in `dist/`
+const distConfig = baseConfig.clone()
+    .merge({
+        entry: {
+            'scratch-gui': path.join(__dirname, 'src/index.ts')
+        },
+        output: {
+            path: path.resolve(__dirname, 'dist')
+        }
+    })
+    .addExternals(['react', 'react-dom', 'redux', 'react-redux'])
+    .addPlugin(
+        new CopyWebpackPlugin({
+            patterns: [
+                {
+                    from: 'src/lib/libraries/*.json',
+                    to: 'libraries',
+                    flatten: true
+                }
+            ]
+        })
+    );
+
+// build the shipping library in `dist/` bundled with react, react-dom, redux, etc.
+const distStandaloneConfig = baseConfig.clone()
+    .merge({
+        entry: {
+            'scratch-gui-standalone': path.join(__dirname, 'src/index-standalone.tsx')
+        },
+        output: {
+            path: path.resolve(__dirname, 'dist')
+        }
+    });
+
+// build the examples and debugging tools in `build/`
+const buildConfig = baseConfig.clone()
+    .enableDevServer(process.env.PORT || 8601)
+    .merge({
+        entry: {
+            gui: './src/playground/index.jsx',
+            guistandalone: './src/playground/standalone.jsx',
+            blocksonly: './src/playground/blocks-only.jsx',
+            compatibilitytesting: './src/playground/compatibility-testing.jsx',
+            player: './src/playground/player.jsx'
+        },
+        output: {
+            path: path.resolve(__dirname, 'build'),
+
+            // This output is loaded using a file:// scheme from the local file system.
+            // Having `publicPath: '/'` (the default) means the `gui.js` file in `build/index.html`
+            // would be looked for at the root of the filesystem, which is incorrect.
+            // Hence, we're resetting the public path to be relative.
+            publicPath: ''
+        }
+    })
+    .addPlugin(new HtmlWebpackPlugin({
+        ...commonHtmlWebpackPluginOptions,
+        chunks: ['gui'],
+        template: 'src/playground/index.ejs',
+        title: 'Scratch 3.0 GUI'
+    }))
+    .addPlugin(new HtmlWebpackPlugin({
+        ...commonHtmlWebpackPluginOptions,
+        chunks: ['guistandalone'],
+        filename: 'standalone.html',
+        template: 'src/playground/index.ejs',
+        title: 'Scratch 3.0 GUI: Standalone Mode'
+    }))
+    .addPlugin(new HtmlWebpackPlugin({
+        ...commonHtmlWebpackPluginOptions,
+        chunks: ['blocksonly'],
+        filename: 'blocks-only.html',
+        template: 'src/playground/index.ejs',
+        title: 'Scratch 3.0 GUI: Blocks Only Example'
+    }))
+    .addPlugin(new HtmlWebpackPlugin({
+        ...commonHtmlWebpackPluginOptions,
+        chunks: ['compatibilitytesting'],
+        filename: 'compatibility-testing.html',
+        template: 'src/playground/index.ejs',
+        title: 'Scratch 3.0 GUI: Compatibility Testing'
+    }))
+    .addPlugin(new HtmlWebpackPlugin({
+        ...commonHtmlWebpackPluginOptions,
+        chunks: ['player'],
+        filename: 'player.html',
+        template: 'src/playground/index.ejs',
+        title: 'Scratch 3.0 GUI: Player Example'
+    }))
+    .addPlugin(new CopyWebpackPlugin({
+        patterns: [
+            {
+                from: 'static',
+                to: 'static'
+            },
+            {
+                from: 'extensions/**',
+                to: 'static',
+                context: 'src/examples'
+            }
+        ]
+    }));
+
+// Skip building `dist/` unless explicitly requested
+// It roughly doubles build time and isn't needed for `scratch-gui` development
+// If you need non-production `dist/` for local dev, such as for `scratch-www` work, you can run something like:
+// `BUILD_MODE=dist npm run build`
+const buildDist = process.env.NODE_ENV === 'production' || process.env.BUILD_MODE === 'dist';
+
+let config;
+switch (process.env.BUILD_TYPE) {
+case 'dist': config = distConfig.get(); break;
+case 'dist-standalone': config = distStandaloneConfig.get(); break;
+default: config = buildConfig.get(); break;
+}
+
+module.exports = buildDist ? config : buildConfig.get();