scratchblocks-plus 1.0.2 → 1.1.1

package/build/translations-all-es.js

@@ -1,5 +1,5 @@
 /**
- * scratchblocks-plus v1.0.2
+ * scratchblocks-plus v1.1.1
  * https://luyifei2011.github.io/scratchblocks-plus
  * Make pictures of Scratch blocks from text.
  *

package/build/translations-all.js

@@ -1,5 +1,5 @@
 /**
- * scratchblocks-plus v1.0.2
+ * scratchblocks-plus v1.1.1
  * https://luyifei2011.github.io/scratchblocks-plus
  * Make pictures of Scratch blocks from text.
  *

package/build/translations-es.js

@@ -1,5 +1,5 @@
 /**
- * scratchblocks-plus v1.0.2
+ * scratchblocks-plus v1.1.1
  * https://luyifei2011.github.io/scratchblocks-plus
  * Make pictures of Scratch blocks from text.
  *

package/build/translations.js

@@ -1,5 +1,5 @@
 /**
- * scratchblocks-plus v1.0.2
+ * scratchblocks-plus v1.1.1
  * https://luyifei2011.github.io/scratchblocks-plus
  * Make pictures of Scratch blocks from text.
  *

package/node-ssr.js

@@ -0,0 +1,81 @@
+import init from "./index.js"
+import { parse } from "./syntax/index.js"
+
+let nodeWindow
+
+try {
+  const { JSDOM } = await import("jsdom")
+  const dom = new JSDOM()
+  nodeWindow = dom.window
+} catch {
+  try {
+    let createCanvas
+    const { DOMParser, XMLSerializer, DOMImplementation } =
+      await import("@xmldom/xmldom")
+    const nodeDocument = new DOMImplementation().createDocument(
+      "http://www.w3.org/2000/svg",
+      null,
+      null,
+    )
+    try {
+      createCanvas = (await import("@napi-rs/canvas")).createCanvas
+    } catch {
+      try {
+        createCanvas = (await import("canvas")).createCanvas
+      } catch {
+        // pass
+      }
+    }
+    if (createCanvas) {
+      const origCreateElement = nodeDocument.createElement.bind(nodeDocument)
+      nodeDocument.createElement = tagName =>
+        tagName === "canvas"
+          ? createCanvas(300, 150)
+          : origCreateElement(tagName)
+    }
+    nodeWindow = {
+      document: nodeDocument,
+      DOMParser,
+      XMLSerializer,
+    }
+  } catch {
+    // pass
+  }
+}
+
+const sb = init(nodeWindow)
+
+export const {
+  allLanguages,
+  loadLanguages,
+  Label,
+  Icon,
+  Input,
+  Block,
+  Comment,
+  Script,
+  Document,
+  newView,
+  render,
+} = sb
+
+export { parse }
+
+/**
+ * Parse Scratch block code and render it directly to an SVG XML string.
+ *
+ * @param {string} code      - Scratch block source, e.g. "move (10) steps"
+ * @param {object} [options] - Same options accepted by scratchblocks.render()
+ *   - style:     "scratch3" | "scratch3-high-contrast" | "scratch2"  (default: "scratch3")
+ *   - languages: string[]  (default: ["en"])
+ *   - scale:     number    (default: 1)
+ * @returns {string} Complete SVG XML string
+ */
+export function renderToSVGString(code, options = {}) {
+  options = { style: "scratch3", ...options }
+  const doc = parse(code, options)
+  const view = sb.newView(doc, options)
+  const svg = view.render()
+  svg.setAttribute("class", `scratchblocks-style-${options.style}`)
+  return view.exportSVGString()
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "scratchblocks-plus",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "description": "Make pictures of Scratch blocks from text.",
   "license": "MIT",
   "author": "Lu Yifei",
@@ -21,7 +21,7 @@
   },
   "scripts": {
     "build": "rollup -c --environment buildTarget:PROD",
-    "fmt": "prettier --cache --write *.js syntax/*.js scratch2/*.js scratch3/*.js locales-src/*.js snapshots/*.js snapshots/*.html tests/*.js",
+    "fmt": "prettier --cache --write *.js syntax/*.js scratch2/*.js scratch3/*.js locales-src/*.js snapshots/*.js tests/*.js",
     "lint:staged": "lint-staged",
     "lint": "eslint *.js syntax/*.js scratch2/*.js scratch3/*.js locales-src/*.js snapshots/*.js tests/*.js",
     "locales": "node locales-src/build-locales.js",
@@ -37,25 +37,46 @@
     "@babel/plugin-external-helpers": "^7.27.1",
     "@babel/preset-env": "^7.28.5",
     "@eslint/js": "^9.39.1",
+    "@napi-rs/canvas": "^0.1.96",
+    "@resvg/resvg-js": "^2.6.2",
     "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-terser": "^0.4.4",
+    "@xmldom/xmldom": "^0.8.11",
     "cross-env": "^10.1.0",
     "csso": "^5.0.5",
     "eslint": "^9.39.1",
-    "express": "^5.1.0",
     "globals": "^16.5.0",
     "jest": "^30.2.0",
     "lint-staged": "^16.2.6",
     "prettier": "^3.6.2",
     "prettier-package-json": "^2.8.0",
-    "puppeteer": "^24.30.0",
     "rollup": "^4.53.2",
     "rollup-plugin-license": "^3.6.0",
     "rollup-plugin-serve": "^3.0.0",
     "scratch-l10n": "^6.1.23",
     "scratch-translate-extension-languages": "^1.0.7"
   },
+  "peerDependencies": {
+    "@napi-rs/canvas": "*",
+    "@xmldom/xmldom": ">=0.8.0",
+    "canvas": ">=2.0.0",
+    "jsdom": ">=16.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@xmldom/xmldom": {
+      "optional": true
+    },
+    "canvas": {
+      "optional": true
+    },
+    "@napi-rs/canvas": {
+      "optional": true
+    },
+    "jsdom": {
+      "optional": true
+    }
+  },
   "keywords": [
     "scratch"
   ],

package/scratch2/blocks.js

@@ -24,6 +24,20 @@ const {
   darkFilter,
 } = style
 
+// to be compatible with node.js xmldom
+function addClass(el, className) {
+  if (el.classList) {
+    el.classList.add(className)
+  } else {
+    const current = el.getAttribute("class") || ""
+    const classes = current.split(/\s+/).filter(Boolean)
+    if (!classes.includes(className)) {
+      classes.push(className)
+      el.setAttribute("class", classes.join(" "))
+    }
+  }
+}
+
 export class LabelView {
   constructor(label) {
     Object.assign(this, label)
@@ -184,7 +198,7 @@ class MatrixView {
         if (isFilled) {
           rect.setAttribute("fill", "#FFFFFF")
         } else {
-          rect.classList.add(`sb-${parent.info.category}`)
+          addClass(rect, `sb-${parent.info.category}`)
         }
 
         elements.push(rect)
@@ -852,7 +866,9 @@ class DocumentView {
    * Build the element map by finding all elements with data-block-path
    */
   _buildElementMap() {
-    if (!this.el) return
+    if (!this.el || !this.el.querySelectorAll) {
+      return
+    }
 
     this.elementMap.clear()
     const blocks = this.el.querySelectorAll("[data-block-path]")
@@ -881,7 +897,9 @@ class DocumentView {
    */
   highlightBlock(path, options = {}) {
     const el = this.getElementByPath(path)
-    if (!el) return false
+    if (!el) {
+      return false
+    }
 
     // Add highlight class to the first child (the shape element)
     const shapeEl = el.firstElementChild

package/scratch3/blocks.js

@@ -22,6 +22,34 @@ const {
   iconName,
 } = style
 
+// to be compatible with node.js xmldom
+function addClass(el, className) {
+  if (el.classList) {
+    el.classList.add(className)
+  } else {
+    const current = el.getAttribute("class") || ""
+    const classes = current.split(/\s+/).filter(Boolean)
+    if (!classes.includes(className)) {
+      classes.push(className)
+      el.setAttribute("class", classes.join(" "))
+    }
+  }
+}
+
+function removeClass(el, className) {
+  if (el.classList) {
+    el.classList.remove(className)
+  } else {
+    const current = el.getAttribute("class") || ""
+    const classes = current.split(/\s+/).filter(cls => cls !== className)
+    if (classes.length) {
+      el.setAttribute("class", classes.join(" "))
+    } else {
+      el.removeAttribute("class")
+    }
+  }
+}
+
 export class LabelView {
   constructor(label) {
     Object.assign(this, label)
@@ -216,7 +244,7 @@ export class MatrixView {
         if (isFilled) {
           rect.setAttribute("fill", "#FFFFFF")
         } else {
-          rect.classList.add(`sb3-${parent.info.category}`)
+          addClass(rect, `sb3-${parent.info.category}`)
         }
 
         elements.push(rect)
@@ -329,7 +357,7 @@ export class InputView {
         })
       }
     } else if (this.shape === "number-dropdown") {
-      el.classList.add(`sb3-${parent.info.category}-alt`)
+      addClass(el, `sb3-${parent.info.category}-alt`)
 
       // custom colors
       if (parent.info.color) {
@@ -339,8 +367,8 @@ export class InputView {
         })
       }
     } else if (this.shape === "boolean") {
-      el.classList.remove(`sb3-${parent.info.category}`)
-      el.classList.add(`sb3-${parent.info.category}-dark`)
+      removeClass(el, `sb3-${parent.info.category}`)
+      addClass(el, `sb3-${parent.info.category}-dark`)
 
       // custom colors
       if (parent.info.color) {
@@ -969,7 +997,9 @@ class DocumentView {
    * Build the element map by finding all elements with data-block-path
    */
   _buildElementMap() {
-    if (!this.el) return
+    if (!this.el || !this.el.querySelectorAll) {
+      return
+    }
 
     this.elementMap.clear()
     const blocks = this.el.querySelectorAll("[data-block-path]")
@@ -1000,7 +1030,9 @@ class DocumentView {
    */
   highlightBlock(path, options = {}) {
     const el = this.getElementByPath(path)
-    if (!el) return false
+    if (!el) {
+      return false
+    }
 
     // Add highlight class to the first child (the shape element)
     const shapeEl = el.firstElementChild

package/scratch3/style.css.js

@@ -2,7 +2,9 @@
 
 const common = `
 .sb3-label {
-  font: 500 12pt Helvetica Neue, Helvetica, sans-serif;
+  font-weight: 500;
+  font-size: 12pt;
+  font-family: Helvetica Neue, Helvetica, sans-serif;
 }
 
 .sb3-literal-number,
@@ -63,7 +65,9 @@ const commonOverride = `
 }
 /* specificity */
 .sb3-comment-label, .sb3-label.sb3-comment-label {
-  font: 400 12pt Helvetica Neue, Helvetica, sans-serif;
+  font-weight: 400;
+  font-size: 12pt;
+  font-family: Helvetica Neue, Helvetica, sans-serif;
   fill: #000;
   word-spacing: 0;
 }`