scratchblocks-plus 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE CHANGED
@@ -1,5 +1,5 @@
1
1
  scratchblocks is Copyright © 2013–2021, Tim Radvan
2
- scratchblocks-plus is Copyright © 2025, Lu Yifei
2
+ scratchblocks-plus is Copyright © 2025–2026, Lu Yifei
3
3
 
4
4
  Permission is hereby granted, free of charge, to any person obtaining a copy of
5
5
  this software and associated documentation files (the "Software"), to deal in
package/README.md CHANGED
@@ -1,14 +1,16 @@
1
1
  Make pictures of Scratch blocks from text.
2
2
 
3
- <!--
4
- [![Screenshot](https://scratchblocks.github.io/screenshot.png)](https://scratchblocks.github.io/#when%20flag%20clicked%0Aclear%0Aforever%0Apen%20down%0Aif%20%3C%3Cmouse%20down%3F%3E%20and%20%3Ctouching%20%5Bmouse-pointer%20v%5D%3F%3E%3E%20then%0Aswitch%20costume%20to%20%5Bbutton%20v%5D%0Aelse%0Aadd%20(x%20position)%20to%20%5Blist%20v%5D%0Aend%0Amove%20(foo)%20steps%0Aturn%20ccw%20(9)%20degrees)
3
+ <picture>
4
+ <source media="(prefers-color-scheme: dark)" srcset="/readme-assets/images/dark.png">
5
+ <img alt="Screenshot" src="/readme-assets/images/light.png">
6
+ </picture>
5
7
 
6
- **[Try it out!](https://scratchblocks.github.io/)**
7
- -->
8
+ **[Try it out!](https://luyifei2011.github.io/scratchblocks-plus/)**
8
9
 
9
10
  ---
10
11
 
11
12
  **scratchblocks-plus** is a fork of **scratchblocks**, and adds the following features:
13
+
12
14
  - basic TypeScript support
13
15
  - Matrix support (issue: [scratchblocks#509](https://github.com/scratchblocks/scratchblocks/issues/509), PR: [scratchblocks#573](https://github.com/scratchblocks/scratchblocks/pull/573))
14
16
  - block highlight
@@ -44,20 +46,25 @@ It uses the [pandoc_scratchblocks](https://github.com/CodeClub/pandoc_scratchblo
44
46
  This would probably be a good way to write a Scratch book.
45
47
  -->
46
48
 
49
+ # React
50
+
51
+ Use the [scratchblocks-plus-react](https://github.com/LuYifei2011/scratchblocks-plus-react) package to render scratchblocks in React.
52
+
47
53
  ## HTML
48
54
 
49
55
  You'll need to include a copy of the scratchblocks-plus JS file on your webpage.
50
56
  There are a few ways of getting one:
51
57
 
52
- * Download it from the <https://github.com/LuYifei2011/scratchblocks-plus/releases> page
58
+ - Download it from the <https://github.com/LuYifei2011/scratchblocks-plus/releases> page
53
59
  <!--* If you have a fancy JS build system, you might like to include the `scratchblocks-plus` package from NPM-->
54
- * You could clone this repository and build it yourself using Node 16.14.0+ (`npm run build`).
60
+ - You could clone this repository and build it yourself using Node 16.14.0+ (`npm run build`).
55
61
 
56
62
  ```html
57
63
  <script src="scratchblocks-min.js"></script>
58
64
  ```
59
65
 
60
66
  The convention is to write scratchblocks inside `pre` tags with the class `blocks`:
67
+
61
68
  ```html
62
69
  <pre class="blocks">
63
70
  when flag clicked
@@ -67,6 +74,7 @@ move (10) steps
67
74
 
68
75
  You then need to call `scratchblocks.renderMatching` after the page has loaded.
69
76
  Make sure this appears at the end of the page (just before the closing `</body>` tag):
77
+
70
78
  ```js
71
79
  <script>
72
80
  scratchblocks.renderMatching('pre.blocks', {
@@ -76,6 +84,7 @@ scratchblocks.renderMatching('pre.blocks', {
76
84
  });
77
85
  </script>
78
86
  ```
87
+
79
88
  The `renderMatching()` function takes a CSS-style selector for the elements that contain scratchblocks code: we use `pre.blocks` to target `pre` tags with the class `blocks`.
80
89
 
81
90
  The `style` option controls how the blocks appear, either the Scratch 2 or Scratch 3 style is supported.
@@ -83,11 +92,13 @@ The `style` option controls how the blocks appear, either the Scratch 2 or Scrat
83
92
  ### Inline blocks
84
93
 
85
94
  You might also want to use blocks "inline", inside a paragraph:
95
+
86
96
  ```html
87
97
  I'm rather fond of the <code class="b">stamp</code> block in Scratch.
88
98
  ```
89
99
 
90
100
  To allow this, make a second call to `renderMatching` using the `inline` argument.
101
+
91
102
  ```js
92
103
  <script>
93
104
  scratchblocks.renderMatching("pre.blocks", ...)
@@ -98,6 +109,7 @@ scratchblocks.renderMatching("code.b", {
98
109
  });
99
110
  </script>
100
111
  ```
112
+
101
113
  This time we use `code.b` to target `code` blocks with the class `b`.
102
114
 
103
115
  ### Translations
@@ -105,12 +117,13 @@ This time we use `code.b` to target `code` blocks with the class `b`.
105
117
  If you want to use languages other than English, you'll need to include a second JS file that contains translations.
106
118
  The releases page includes two options; you can pick one:
107
119
 
108
- * `translations.js` includes a limited set of languages, as seen on the Scratch Forums
109
- * `translations-all.js` includes every language that Scratch supports.
120
+ - `translations.js` includes a limited set of languages, as seen on the Scratch Forums
121
+ - `translations-all.js` includes every language that Scratch supports.
110
122
 
111
123
  The translations files are hundreds of kilobytes in size, so to keep your page bundle size down you might like to build your own file with just the languages you need.
112
124
 
113
125
  For example, a translations file that just loads the German language (ISO code `de`) would look something like this:
126
+
114
127
  ```js
115
128
  window.scratchblocks.loadLanguages({
116
129
  de: <contents of locales/de.json>
@@ -119,6 +132,7 @@ window.scratchblocks.loadLanguages({
119
132
 
120
133
  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.
121
134
  This requires your bundler to allow importing JSON files as JavaScript.
135
+
122
136
  ```js
123
137
  window.scratchblocks.loadLanguages({
124
138
  de: require('scratchblocks/locales/de.json'),
@@ -139,6 +153,7 @@ scratchblocks.renderMatching('pre.blocks');
139
153
  ```
140
154
 
141
155
  ## ESM Support
156
+
142
157
  Since version 3.6.0, scratchblocks-plus 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.
143
158
 
144
159
  ```js
@@ -152,6 +167,7 @@ loadTranslations(scratchblocks);
152
167
  # Languages
153
168
 
154
169
  To update the translations:
170
+
155
171
  ```sh
156
172
  npm upgrade scratch-l10n
157
173
  npm run locales
@@ -166,7 +182,7 @@ I'd be happy to accept pull requests for those! You'll need to rebuild the trans
166
182
 
167
183
  This should set you up and start a http-server for development:
168
184
 
169
- ```
185
+ ```sh
170
186
  npm install
171
187
  npm start
172
188
  ```
@@ -175,19 +191,18 @@ Then open <http://localhost:8000/> :-)
175
191
 
176
192
  For more details, see [`CONTRIBUTING.md`](https://github.com/LuYifei2011/scratchblocks-plus/blob/master/.github/CONTRIBUTING.md).
177
193
 
178
-
179
194
  # Credits
180
195
 
181
196
  Many, many thanks to the [contributors](https://github.com/LuYifei2011/scratchblocks-plus/graphs/contributors)!
182
197
 
183
- * Authored by [LuYifei2011](https://github.com/LuYifei2011)
184
- * This is a fork of [scratchblocks](https://github.com/scratchblocks/scratchblocks), so all the credit there still applies here.
185
- * Original scratchblocks library by [tjvr](https://github.com/tjvr)
186
- * Original scratchblocks library maintained by tjvr and [apple502j](https://github.com/apple502j)
187
- * Icons derived from [Scratch Blocks](https://github.com/scratchfoundation/scratch-blocks) (Apache License 2.0)
188
- * Scratch 2 SVG proof-of-concept, shapes & filters by [as-com](https://github.com/as-com)
189
- * Anna helped with a formula, and pointed out that I can't read graphs
190
- * JSO designed the syntax and wrote the original [Block Plugin](https://en.scratch-wiki.info/wiki/Block_Plugin_\(1.4\))
191
- * Help with translation code from [joooni](https://scratch.mit.edu/users/joooni/)
192
- * Block translations from the [scratch-l10n repository](https://github.com/scratchfoundation/scratch-l10n/)
193
- * Ported to node by [arve0](https://github.com/arve0)
198
+ - Authored by [LuYifei2011](https://github.com/LuYifei2011)
199
+ - This is a fork of [scratchblocks](https://github.com/scratchblocks/scratchblocks), so all the credit there still applies here.
200
+ - Original scratchblocks library by [tjvr](https://github.com/tjvr)
201
+ - Original scratchblocks library maintained by tjvr and [apple502j](https://github.com/apple502j)
202
+ - Icons derived from [Scratch Blocks](https://github.com/scratchfoundation/scratch-blocks) (Apache License 2.0)
203
+ - Scratch 2 SVG proof-of-concept, shapes & filters by [as-com](https://github.com/as-com)
204
+ - Anna helped with a formula, and pointed out that I can't read graphs
205
+ - JSO designed the syntax and wrote the original [Block Plugin](https://en.scratch-wiki.info/wiki/Block_Plugin_\(1.4\))
206
+ - Help with translation code from [joooni](https://scratch.mit.edu/users/joooni/)
207
+ - Block translations from the [scratch-l10n repository](https://github.com/scratchfoundation/scratch-l10n/)
208
+ - Ported to node by [arve0](https://github.com/arve0)