scratch-paint 4.1.53 → 4.2.0

package/dist/web/scratch-paint.js.LICENSE.txt

@@ -0,0 +1,5 @@
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/

package/dist/web/scratch-paint.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scratch-paint.js","mappings":";AAAA","sources":["webpack://scratch-paint/webpack/universalModuleDefinition"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"prop-types\"), require(\"minilog\"), require(\"react\"), require(\"react-redux\"), require(\"react-intl\"), require(\"@scratch/scratch-svg-renderer\"), require(\"react-style-proptype\"), require(\"react-popover\"), require(\"react-responsive\"), require(\"redux\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"prop-types\", \"minilog\", \"react\", \"react-redux\", \"react-intl\", \"@scratch/scratch-svg-renderer\", \"react-style-proptype\", \"react-popover\", \"react-responsive\", \"redux\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"scratch-paint\"] = factory(require(\"prop-types\"), require(\"minilog\"), require(\"react\"), require(\"react-redux\"), require(\"react-intl\"), require(\"@scratch/scratch-svg-renderer\"), require(\"react-style-proptype\"), require(\"react-popover\"), require(\"react-responsive\"), require(\"redux\"));\n\telse\n\t\troot[\"scratch-paint\"] = factory(root[\"prop-types\"], root[\"minilog\"], root[\"react\"], root[\"react-redux\"], root[\"react-intl\"], root[\"@scratch/scratch-svg-renderer\"], root[\"react-style-proptype\"], root[\"react-popover\"], root[\"react-responsive\"], root[\"redux\"]);\n})(self, function(__WEBPACK_EXTERNAL_MODULE__863__, __WEBPACK_EXTERNAL_MODULE__749__, __WEBPACK_EXTERNAL_MODULE__629__, __WEBPACK_EXTERNAL_MODULE__850__, __WEBPACK_EXTERNAL_MODULE__923__, __WEBPACK_EXTERNAL_MODULE__962__, __WEBPACK_EXTERNAL_MODULE__17__, __WEBPACK_EXTERNAL_MODULE__53__, __WEBPACK_EXTERNAL_MODULE__582__, __WEBPACK_EXTERNAL_MODULE__0__) {\nreturn "],"names":[],"sourceRoot":""}

package/package.json

@@ -1,19 +1,25 @@
 {
   "name": "scratch-paint",
-  "version": "4.1.53",
+  "version": "4.2.0",
   "description": "Graphical User Interface for the Scratch 3.0 paint editor, which is used to make and edit sprites for use in projects.",
-  "main": "./dist/scratch-paint.js",
+  "main": "./dist/web/scratch-paint.js",
   "browser": "./src/index.js",
+  "exports": {
+    "webpack": "./src/index.js",
+    "browser": "./src/index.js",
+    "node": "./dist/web/scratch-paint.js",
+    "default": "./dist/web/scratch-paint.js"
+  },
   "scripts": {
-    "build": "npm run clean && webpack --progress --colors --bail",
+    "build": "npm run clean && webpack --progress --bail",
     "clean": "rimraf ./dist && mkdirp dist && rimraf ./playground && mkdirp playground",
     "i18n:push": "tx-push-src scratch-editor paint-editor ./translations/en.json",
     "i18n:src": "rimraf ./translations/messages && babel src > tmp.js && rimraf tmp.js && ./scripts/build-i18n-source.js ./translations/messages/ ./translations/",
     "lint": "eslint",
-    "start": "webpack-dev-server",
+    "start": "webpack serve",
     "test": "npm run unit",
     "unit": "jest --reporters=default",
-    "watch": "webpack --progress --colors --watch"
+    "watch": "webpack --progress --watch"
   },
   "author": "Massachusetts Institute of Technology",
   "license": "AGPL-3.0-only",
@@ -50,31 +56,29 @@
     "@babel/cli": "7.28.6",
     "@babel/core": "7.29.0",
     "@babel/node": "7.29.0",
-    "@babel/preset-env": "7.29.3",
+    "@babel/preset-env": "7.29.5",
     "@babel/preset-react": "7.28.5",
     "@commitlint/cli": "17.8.1",
     "@commitlint/config-conventional": "17.8.1",
     "@testing-library/react": "8.0.9",
     "autoprefixer": "9.8.8",
     "babel-jest": "29.7.0",
-    "babel-loader": "8.4.1",
+    "babel-loader": "9.2.1",
     "babel-plugin-react-intl": "3.5.1",
-    "babel-plugin-transform-object-rest-spread": "6.26.0",
     "canvas": "3.2.3",
-    "css-loader": "3.6.0",
+    "css-loader": "5.2.7",
     "eslint": "9.39.4",
     "eslint-config-scratch": "12.0.51",
     "gh-pages": "3.2.3",
     "globals": "16.5.0",
-    "html-webpack-plugin": "3.2.0",
+    "html-webpack-plugin": "5.6.3",
     "husky": "8.0.3",
     "jest": "27.5.1",
     "jest-junit": "13.2.0",
     "json": "9.0.6",
-    "lodash.defaultsdeep": "4.6.1",
     "mkdirp": "1.0.4",
     "postcss-import": "12.0.1",
-    "postcss-loader": "3.0.0",
+    "postcss-loader": "4.3.0",
     "postcss-simple-vars": "5.0.2",
     "raf": "3.4.1",
     "react-test-renderer": "18.3.1",
@@ -84,15 +88,13 @@
     "rimraf": "2.7.1",
     "scratch-l10n": "6.1.75",
     "scratch-semantic-release-config": "4.0.1",
+    "scratch-webpack-configuration": "3.1.2",
     "semantic-release": "25.0.3",
-    "style-loader": "1.3.0",
-    "svg-url-loader": "3.0.3",
+    "style-loader": "4.0.0",
     "tap": "21.7.2",
-    "uglifyjs-webpack-plugin": "2.2.0",
-    "url-loader": "2.3.0",
-    "webpack": "4.47.0",
-    "webpack-cli": "3.3.12",
-    "webpack-dev-server": "3.11.3"
+    "webpack": "5.105.4",
+    "webpack-cli": "5.1.4",
+    "webpack-dev-server": "5.2.0"
   },
   "config": {
     "commitizen": {

package/src/containers/paper-canvas.jsx

@@ -7,6 +7,7 @@ import {sanitizeSvg} from '@scratch/scratch-svg-renderer';
 import Formats from '../lib/format';
 import log from '../log/log';
 
+import {stripInvalidPaperData} from '../helper/strip-invalid-paper-data';
 import {performSnapshot} from '../helper/undo';
 import {undoSnapshot, clearUndoState} from '../reducers/undo';
 import {isGroup, ungroupItems} from '../helper/group';
@@ -215,11 +216,12 @@ class PaperCanvas extends React.Component {
         // well-formed document.
         svg = sanitizeSvg.sanitizeSvgText(svg);
 
-        // Get the origin which the viewBox is defined relative to. During import, Paper will translate
-        // the viewBox to start at (0, 0), and we need to translate it back for some costumes to render
-        // correctly.
-        const parser = new DOMParser();
-        const svgDom = parser.parseFromString(svg, 'text/xml');
+        // 4. Parse once: read viewBox (translated back for some costumes
+        // to render correctly — paper translates it to (0, 0) on import)
+        // and strip data-paper-data values that fail JSON.parse (paper.js
+        // synchronously throws on these and aborts the whole import).
+        const svgDom = new DOMParser().parseFromString(svg, 'text/xml');
+        const modified = stripInvalidPaperData(svgDom);
         const viewBox = svgDom.documentElement.attributes.viewBox ?
             svgDom.documentElement.attributes.viewBox.value.match(/\S+/g) : null;
         if (viewBox) {
@@ -227,6 +229,7 @@ class PaperCanvas extends React.Component {
                 viewBox[i] = parseFloat(viewBox[i]);
             }
         }
+        if (modified) svg = new XMLSerializer().serializeToString(svgDom);
 
         paper.project.importSVG(svg, {
             expandShapes: true,

package/src/helper/strip-invalid-paper-data.js

@@ -0,0 +1,28 @@
+/**
+ * Drop `data-paper-data` attributes whose value isn't valid JSON. Paper.js
+ * synchronously calls JSON.parse on this attribute during importSVG and
+ * throws on malformed values, taking down the whole import. The attribute
+ * is paper's own serialization metadata; if it can't parse, paper wouldn't
+ * have been able to use it.
+ *
+ * Operates on a parsed Document in place so callers that already have one
+ * (e.g. for viewBox extraction) don't pay for a second parse-and-serialize.
+ * @param {Document} svgDoc - parsed SVG document; mutated in place.
+ * @returns {boolean} true if any attribute was removed (caller should
+ *   re-serialize); false if the document was untouched.
+ */
+const stripInvalidPaperData = function (svgDoc) {
+    let modified = false;
+    const els = svgDoc.querySelectorAll('[data-paper-data]');
+    for (let i = 0; i < els.length; i++) {
+        try {
+            JSON.parse(els[i].getAttribute('data-paper-data'));
+        } catch {
+            els[i].removeAttribute('data-paper-data');
+            modified = true;
+        }
+    }
+    return modified;
+};
+
+export {stripInvalidPaperData};

package/webpack.config.js

@@ -1,133 +1,66 @@
-const defaultsDeep = require('lodash.defaultsdeep');
 const path = require('path');
 
-// Plugins
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const ScratchWebpackConfigBuilder = require('scratch-webpack-configuration');
 
-// PostCss
-const autoprefixer = require('autoprefixer');
-const postcssVars = require('postcss-simple-vars');
-const postcssImport = require('postcss-import');
+const baseConfig = new ScratchWebpackConfigBuilder({
+    rootPath: __dirname,
+    enableReact: true
+})
+    .setTarget('browserslist')
+    .addModuleRule({
+        test: /\.(svg|png)$/i,
+        resourceQuery: /^$/,
+        type: 'asset'
+    });
 
-const base = {
-    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
-    devtool: 'cheap-module-source-map',
-    module: {
-        rules: [{
-            test: /\.jsx?$/,
-            loader: 'babel-loader',
-            include: [
-                path.resolve(__dirname, 'src'),
-                path.join(__dirname, 'node_modules/react-intl'),
-                path.join(__dirname, 'node_modules/intl-messageformat'),
-                path.join(__dirname, 'node_modules/intl-messageformat-parser'),
-                // scratch-svg-renderer's published bundle ships modern JS
-                // that webpack 4's default parser can't read; transpile it
-                // here. The library output externalizes the same package, so
-                // this is only on the path for the playground bundle.
-                path.join(__dirname, 'node_modules/@scratch/scratch-svg-renderer')
-            ],
-            options: {
-                plugins: ['transform-object-rest-spread'],
-                presets: [
-                    ['@babel/preset-env', {
-                        targets: ['last 3 versions', 'Safari >= 8', 'iOS >= 8']}],
-                    '@babel/preset-react']
-            }
-        },
-        {
-            test: /\.css$/,
-            use: [{
-                loader: 'style-loader'
-            }, {
-                loader: 'css-loader',
-                options: {
-                    modules: {
-                        localIdentName: '[name]_[local]_[hash:base64:5]'
-                    },
-                    importLoaders: 1,
-                    localsConvention: 'camelCase'
-                }
-            }, {
-                loader: 'postcss-loader',
-                options: {
-                    ident: 'postcss',
-                    plugins: function () {
-                        return [
-                            postcssImport,
-                            postcssVars,
-                            autoprefixer()
-                        ];
-                    }
-                }
-            }]
-        },
-        {
-            test: /\.png$/i,
-            loader: 'url-loader'
-        },
-        {
-            test: /\.svg$/,
-            loader: 'svg-url-loader?noquotes'
-        }]
-    },
-    optimization: {
-        minimizer: [
-            new UglifyJsPlugin({
-                include: /\.min\.js$/
-            })
-        ]
-    },
-    plugins: []
-};
-
-module.exports = [
-    // For the playground
-    defaultsDeep({}, base, {
-        devServer: {
-            contentBase: path.resolve(__dirname, 'playground'),
-            host: '0.0.0.0',
-            port: process.env.PORT || 8078
-        },
+const playgroundConfig = baseConfig.clone()
+    .merge({
         entry: {
             playground: './src/playground/playground.jsx'
         },
         output: {
-            path: path.resolve(__dirname, 'playground'),
-            filename: '[name].js'
-        },
-        plugins: base.plugins.concat([
-            new HtmlWebpackPlugin({
-                template: 'src/playground/index.ejs',
-                title: 'Scratch 3.0 Paint Editor Playground'
-            })
-        ])
-    }),
-    // For use as a library
-    defaultsDeep({}, base, {
-        externals: {
-            '@scratch/scratch-svg-renderer': '@scratch/scratch-svg-renderer',
-            'minilog': 'minilog',
-            'prop-types': 'prop-types',
-            'react': 'react',
-            'react-dom': 'react-dom',
-            'react-intl': 'react-intl',
-            'react-intl-redux': 'react-intl-redux',
-            'react-popover': 'react-popover',
-            'react-redux': 'react-redux',
-            'react-responsive': 'react-responsive',
-            'react-style-proptype': 'react-style-proptype',
-            'react-tooltip': 'react-tooltip',
-            'redux': 'redux'
+            path: path.resolve(__dirname, 'playground')
         },
+        devServer: {
+            host: '0.0.0.0'
+        }
+    })
+    .enableDevServer(process.env.PORT || 8078)
+    .addPlugin(new HtmlWebpackPlugin({
+        template: 'src/playground/index.ejs',
+        title: 'Scratch 3.0 Paint Editor Playground'
+    }));
+
+const libraryConfig = baseConfig.clone()
+    .merge({
         entry: {
             'scratch-paint': './src/index.js'
         },
         output: {
-            path: path.resolve(__dirname, 'dist'),
-            filename: '[name].js',
-            libraryTarget: 'commonjs2'
+            library: {
+                name: 'scratch-paint',
+                type: 'umd2'
+            }
         }
     })
+    .addExternals([
+        '@scratch/scratch-svg-renderer',
+        'minilog',
+        'prop-types',
+        'react',
+        'react-dom',
+        'react-intl',
+        'react-intl-redux',
+        'react-popover',
+        'react-redux',
+        'react-responsive',
+        'react-style-proptype',
+        'react-tooltip',
+        'redux'
+    ]);
+
+module.exports = [
+    playgroundConfig.get(),
+    libraryConfig.get()
 ];