export as snapblocks, rename scratchblocks class

Author: ego-lay-atman-bay

README.md

@@ -92,14 +92,13 @@ You then need to call `scratchblocks.renderMatching` after the page has loaded.
 Make sure this appears at the end of the page (just before the closing `</body>` tag):
 ```js
 <script>
-scratchblocks.renderMatching('pre.blocks', {
+snapblocks.renderMatching('pre.blocks', {
   style:     'snap',       // Optional, defaults to 'scratch2'.
   languages: ['en', 'de'], // Optional, defaults to ['en'].
   scale: 1,                // Optional, defaults to 1
 });
 </script>
 ```
-Note: this does use `scratchblocks` so it's easier to migrate from scratchblocks to snapblocks.
 
 The `renderMatching()` function takes a CSS-style selector for the elements that contain snapblocks code: we use `pre.blocks` to target `pre` tags with the class `blocks`.
 
@@ -115,9 +114,9 @@ I'm rather fond of the <code class="b">cut from [ v]</code> block in Snap.
 To allow this, make a second call to `renderMatching` using the `inline` argument.
 ```js
 <script>
-scratchblocks.renderMatching("pre.blocks", ...)
+snapblocks.renderMatching("pre.blocks", ...)
 
-scratchblocks.renderMatching("code.b", {
+snapblocks.renderMatching("code.b", {
   inline: true,
   // Repeat `style` and `languages` options here.
 });
@@ -139,15 +138,15 @@ The translations files are hundreds of kilobytes in size, so to keep your page b
 
 For example, a translations file that just loads the German language (ISO code `de`) would look something like this:
 ```js
-window.scratchblocks.loadLanguages({
+window.snapblocks.loadLanguages({
     de: <contents of locales/de.json>
 })
 ```
 
 If you're using a JavaScript bundler you should be able to build your own translations file by calling `require()` with the path to the locale JSON file.
 This requires your bundler to allow importing JSON files as JavaScript.
 ```js
-window.scratchblocks.loadLanguages({
+window.snapblocks.loadLanguages({
     de: require('snapblocks/locales/de.json'),
 })
 ```
@@ -166,14 +165,14 @@ snapblocks.renderMatching('pre.blocks');
 ```
 
 ## ESM Support
-Since version 3.6.0, scratchblocks (and subsequently snapblocks) can be properly loaded as an ESM module. The ESM version, instead of defining `window.scratchblocks`, default-exports the `scratchblocks` object. Similarly, the JavaScript translation files default-exports a function to load the translations.
+Since version 3.6.0, scratchblocks (and subsequently snapblocks) can be properly loaded as an ESM module. The ESM version, instead of defining `window.snapblocks`, default-exports the `snapblocks` object. Similarly, the JavaScript translation files default-exports a function to load the translations.
 
 ```js
-import scratchblocks from "./snapblocks-es-min.js";
+import snapblocks from "./snapblocks-es-min.js";
 import loadTranslations from "./translations-all-es.js";
-loadTranslations(scratchblocks);
+loadTranslations(snapblocks);
 
-// window.scratchblocks is NOT available!
+// window.snapblocks is NOT available!
 ```
 
 # Languages

browser.es.js

@@ -1,8 +1,8 @@
 import init from "./index.js"
 
-const scratchblocks = init(window)
+const snapblocks = init(window)
 
 // add our CSS to the page
-scratchblocks.appendStyles()
+snapblocks.appendStyles()
 
-export default scratchblocks
+export default snapblocks

browser.js

@@ -1,8 +1,8 @@
 import init from "./index.js"
 
-const scratchblocks = (window.scratchblocks = init(window))
+const snapblocks = (window.snapblocks = init(window))
 
 // add our CSS to the page
-scratchblocks.appendStyles()
+snapblocks.appendStyles()
 
-export default scratchblocks
+export default snapblocks

index.html

@@ -79,14 +79,14 @@ <h1>
 
       var chooseLang = document.getElementById('choose-lang');
 
-      var languageCodes = Object.keys(scratchblocks.allLanguages)
+      var languageCodes = Object.keys(snapblocks.allLanguages)
       languageCodes.sort()
       languageCodes.forEach(function (code) {
         if (code === "en") return
         var option = document.createElement("option")
         option.value = code
 
-        var language = scratchblocks.allLanguages[code]
+        var language = snapblocks.allLanguages[code]
         option.textContent = language.name && language.altName ? `${language.name} — ${language.altName}` : language
           .name || language.altName || code
         chooseLang.appendChild(option)
@@ -178,16 +178,16 @@ <h1>
         /*
         // renderMatching API example
         preview.innerHTML = obj.script;
-        scratchblocks.renderMatching('pre.blocks', {
+        snapblocks.renderMatching('pre.blocks', {
           languages: ['en', obj.lang],
           render: function(doc, cb) {
             doc.render(function(svg) {
               var el = document.createElement('div');
               el.appendChild(svg);
   
               var link = exportSVGLink = document.createElement('a');
-              exportLink.href = scratchblocks.exportSVG(svg);
-              exportLink.setAttribute('download', 'scratchblocks.svg');
+              exportLink.href = snapblocks.exportSVG(svg);
+              exportLink.setAttribute('download', 'snapblocks.svg');
               exportLink.textContent = "Export SVG";
               exportLink.className = 'export-link';
               var p = document.createElement('p');
@@ -200,34 +200,34 @@ <h1>
         });
         */
 
-        var doc = window.doc = scratchblocks.parse(obj.script, {
+        var doc = window.doc = snapblocks.parse(obj.script, {
           languages: obj.lang ? ['en', obj.lang] : ['en'],
         });
 
-        // doc.translate(scratchblocks.allLanguages['de']);
+        // doc.translate(snapblocks.allLanguages['de']);
 
-        // var doc = window.doc = scratchblocks.fromJSON({
+        // var doc = window.doc = snapblocks.fromJSON({
         //   scripts: eval(obj.script),
         // });
 
-        console.log(scratchblocks.stringify(doc));
-        var docViewSnap = scratchblocks.newView(doc, {
+        console.log(snapblocks.stringify(doc));
+        var docViewSnap = snapblocks.newView(doc, {
           style: "snap",
           scale: 1
         });
-        var docViewSnapFlat = scratchblocks.newView(doc, {
+        var docViewSnapFlat = snapblocks.newView(doc, {
           style: "snap-flat",
           scale: 1
         });
-        var docView2 = scratchblocks.newView(doc, {
+        var docView2 = snapblocks.newView(doc, {
           style: "scratch2",
           scale: 1
         });
-        var docView3HighContrast = scratchblocks.newView(doc, {
+        var docView3HighContrast = snapblocks.newView(doc, {
           style: "scratch3-high-contrast",
           scale: 0.675
         });
-        var docView3 = scratchblocks.newView(doc, {
+        var docView3 = snapblocks.newView(doc, {
           style: "scratch3",
           scale: 0.675
         });
@@ -245,8 +245,8 @@ <h1>
         svg3HighContrast.classList.add("scratch3");
         svg3.classList.add("scratch3")
         // Need to add manually if calling View#render (folks, this is why you shouldn't use private API!)
-        svg3HighContrast.classList.add("scratchblocks-style-scratch3-high-contrast")
-        svg3.classList.add("scratchblocks-style-scratch3")
+        svg3HighContrast.classList.add("snapblocks-style-scratch3-high-contrast")
+        svg3.classList.add("snapblocks-style-scratch3")
 
         const getSelectedView = () => {
           switch (exportDropdown.value) {
@@ -266,13 +266,13 @@ <h1>
         // add export link
         setTimeout(function () {
           if (!exportSVGLink) exportSVGLink = document.createElement('a');
-            exportSVGLink.onclick = () => download("scratchblocks.svg", getSelectedView().exportSVG());
+            exportSVGLink.onclick = () => download("snapblocks.svg", getSelectedView().exportSVG());
             exportSVGLink.textContent = "Export SVG";
             exportSVGLink.className = 'export-link';
           if (!exportSVGLink.isConnected) document.querySelector('#export-options').appendChild(exportSVGLink);
 
           if (!exportPNGLink) exportPNGLink = document.createElement('a');
-            exportPNGLink.onclick = () => getSelectedView().exportPNG((url) => download("scratchblocks.png", url), 2);
+            exportPNGLink.onclick = () => getSelectedView().exportPNG((url) => download("snapblocks.png", url), 2);
             exportPNGLink.textContent = "Export PNG";
             exportPNGLink.className = 'export-link';
           if (!exportPNGLink.isConnected) document.querySelector('#export-options').appendChild(exportPNGLink);
@@ -307,7 +307,7 @@ <h1>
         }, 0);
 
         // update language dropdown
-        var lang = scratchblocks.allLanguages[obj.lang]
+        var lang = snapblocks.allLanguages[obj.lang]
         langStatus.textContent = lang ? `${lang.percentTranslated}%` : "";
       }
 

index.js

@@ -62,7 +62,7 @@ export default function (window) {
     const view = newView(doc, options)
     const svg = view.render()
     // Used in high contrast theme
-    svg.classList.add(`scratchblocks-style-${options.style}`)
+    svg.classList.add(`snapblocks-style-${options.style}`)
     return svg
   }
 
@@ -92,16 +92,16 @@ export default function (window) {
     let container
     if (options.inline) {
       container = document.createElement("span")
-      let cls = "scratchblocks scratchblocks-inline"
+      let cls = "snapblocks snapblocks-inline"
       if (doc.scripts[0] && !doc.scripts[0].isEmpty) {
-        cls += ` scratchblocks-inline-${doc.scripts[0].blocks[0].shape}`
+        cls += ` snapblocks-inline-${doc.scripts[0].blocks[0].shape}`
       }
       container.className = cls
       container.style.display = "inline-block"
       container.style.verticalAlign = "middle"
     } else {
       container = document.createElement("div")
-      container.className = "scratchblocks"
+      container.className = "snapblocks"
     }
     container.appendChild(svg)
 
@@ -112,9 +112,9 @@ export default function (window) {
   /* Render all matching elements in page to shiny scratch blocks.
    * Accepts a CSS selector as an argument.
    *
-   *  scratchblocks.renderMatching("pre.blocks");
+   *  snapblocks.renderMatching("pre.blocks");
    *
-   * Like the old 'scratchblocks2.parse().
+   * Like the old 'snapblocks2.parse().
    */
   const renderMatching = function (selector, options) {
     selector = selector || "pre.blocks"

locales-src/translations-all-es.js

@@ -1,5 +1,5 @@
 import languages from "../locales/all.js"
-export default function init(scratchblocks) {
-  scratchblocks.loadLanguages(languages)
+export default function init(snapblocks) {
+  snapblocks.loadLanguages(languages)
 }
 init.languages = languages

locales-src/translations-all.js

@@ -1,2 +1,2 @@
 import languages from "../locales/all.js"
-window.scratchblocks.loadLanguages(languages)
+window.snapblocks.loadLanguages(languages)

locales-src/translations-es.js

@@ -1,5 +1,5 @@
 import languages from "../locales/forums.js"
-export default function init(scratchblocks) {
-  scratchblocks.loadLanguages(languages)
+export default function init(snapblocks) {
+  snapblocks.loadLanguages(languages)
 }
 init.languages = languages

locales-src/translations.js

@@ -1,2 +1,2 @@
 import languages from "../locales/forums.js"
-window.scratchblocks.loadLanguages(languages)
+window.snapblocks.loadLanguages(languages)

rollup.config.js

@@ -58,7 +58,7 @@ export default [
     output: {
       file: pkg.main,
       format: "iife",
-      name: "scratchblocks",
+      name: "snapblocks",
       sourcemap: env.prod,
     },
     plugins: [

scratch3/style.css.js

@@ -232,5 +232,5 @@ const highContrastStyle = {
 
 export default common +
   create("", originalStyle) +
-  create(".scratchblocks-style-scratch3-high-contrast", highContrastStyle) +
+  create(".snapblocks-style-scratch3-high-contrast", highContrastStyle) +
   commonOverride

snapshots/headless.js

@@ -38,7 +38,7 @@ class Renderer {
     await this.page.goto(
       "http://localhost:8002/snapshots/snapshot-testing.html",
     )
-    await this.page.waitForFunction("window.scratchblocksLoaded")
+    await this.page.waitForFunction("window.snapblocksLoaded")
   }
 
   async snapshot(script, options) {